.reportCategory{
    background-color: #efefef;
    padding: 10px 0px;
}

.reportCategory a{
    display: block;
    color:#000000;
    font-size: 14px;
    padding: 10px 30px;
}

.reportCategory i{
   margin-right: 10px;
}

.themWMSSearchReportHolder{
    position: static;
}
.themeWMSSearchReport{
    padding: 10px 20px;
    background-color: #efefef;
   
}
.themWMSSearchReport{
    min-width: 250px !important;
}
.themWMSSearchReportHolder{
    background-color: #ffffff;
    margin: 10px 30px;
}
.themWMSSearchReportHolder i{
    margin-right: 10px;
}

/* BOX STYLE FOR LIST */
/* .printablesType {
	border: solid 1px #cccccc;
	margin: 10px 20px;
	padding: 20px;
	text-align: center;
	font-size: 18px !important;
	box-shadow: 5px 5px 5px #cccccc;
}
.printablesType i {
	font-size: 40px !important;
	margin-bottom: 10px;
	color: #00acd7;
}
.printablesTitle {
	font-size: 16px !important;
	font-weight: bold;
	color: #999;
} */
.printablesType {
	border: solid 1px #cccccc;
	margin: 10px 20px;
	font-size: 18px !important;
	box-shadow: 5px 5px 5px #cccccc;
}
.printablesType i {
	font-size: 20px !important;
	color: #00acd7;
	margin-right: 5px;
	padding: 20px;
	background-color: #fbfafa;
	border-right: solid 1px #cccccc;
}
.printablesTitle {
	font-size: 14px !important;
	color: #000000;
    display: inline;
}
/* BOX STYLE FOR LIST */

.contentHolder {
    margin-top: 25px;
}
.wms-srv-grid-scroller {
    /* overflow: auto; */
    max-height: 350px;
    border: solid 1px #cccccc;
}
.wms-srv-grid {
    min-width: 100px !important;
}
.wms-srv-grid {
    display: table;
    width: 100%;
    min-width: 1000px;
    border: solid 1px #cccccc;
    border-right: none;
    border-bottom: none;
}
.wms-srv-grid-header {
    font-weight: bold;
    background-color: #efefef;
}
.wms-srv-grid-header, .wms-srv-grid-row {
    display: table-row;
}
.wms-srv-grid-cell {
    display: table-cell;
    font-size: 13px;
    border: solid 1px #cccccc;
    border-top: none;
    border-left: none;
    padding: 5px;
    vertical-align: middle;
}
.wms-srv-grid-header {
    font-weight: bold;
    background-color: #fcfcfc85;
}
.wms-srv-grid-header, .wms-srv-grid-row {
    display: table-row;
}
.downloadFile{
    float: right;
    color: #1a44ff;
    font-weight: 100;
}
.wms-srv-input, .wms-srv-textarea {
    border: solid 1px #474747;
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 13px !important;
}
.wms-srv-search, .wms-srv-icon-input {
    position: relative;
}
.wms-srv-input, .wms-srv-textarea {
    border: solid 1px #474747;
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 13px !important;
}
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
    height: auto;
    margin-bottom: 10px;
}
.wms-srv-input, .wms-srv-textarea {
    border: solid 1px #474747;
    border-radius: 3px;
    padding: 5px 10px;
    font-size: 13px !important;
}
.wms-srv-search a, .wms-srv-icon-input i {
    position: absolute;
    float: right;
    right: 7px;
    top: 9px;
    color: #000000;
}
a {
    color: #007bff;
    text-decoration: none;
    background-color: transparent;
}
.fa, .fas, .fa-solid, .far, .fa-regular, .fal, .fa-light, .fat, .fa-thin, .fad, .fa-duotone, .fab, .fa-brands {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: var(--fa-display, inline-block);
    font-style: normal;
    font-variant: normal;
    line-height: 1;
    text-rendering: auto;
}
.wms-srv-search a, .wms-srv-icon-input i {
    position: absolute;
    float: right;
    right: 7px;
    top: 9px;
    color: #000000;
}
.fas, .fa-solid {
 /* font-family: 'Font Awesome 6 Free'; */
    font-weight: 900;
}
/* .dateGrid{
    width: 550px;
    height: 50px;
    border: 1px solid #ececec;
} */
.txtFixDates
{
    color: #48576a;
    padding-left: 15px;
    padding-bottom: 5px;
    float: left;
}
.txtFixDates:hover
{
    color: #2483ffec;
    padding-left: 15px;
    padding-bottom: 5px;
    float: left;
}
.txt_FromdatePicker{
    margin-right: 10px;
}
.dateGridView
{
    margin-right: 10px;
    z-index: 9999;
    position: absolute;
    background-color: #ffffff;
    padding:20px;
    box-shadow: 0px 10px 10px #636363;
    border:solid 1px #cccccc;
    border-radius: 7px;
    left: -80px;
}
.app .dateGridView table td, 
.app .dateGridView table th {
    padding: 0px 0px !important; 
}
.app .dateGridView .ui-state-default, 
.app .dateGridView .ui-widget-content .ui-state-default, 
.app .dateGridView .ui-widget-header .ui-state-default, 
.app .dateGridView .ui-button, 
.app .dateGridView  .ui-button.ui-state-disabled:hover, 
.app .dateGridView  .ui-button.ui-state-disabled:active {
    border: 1px solid #f1f1f1;    
    font-weight: normal;
    color: #454545;
}
.text-center {
    background-color: #0059c1;
    color: #fff;
    line-height: 1.8;
    border-radius: 2px;
    width: 96%;
    text-align: center;
}
.text-center2 {
    background-color: #0059c1;
    color: #fff;
    line-height: 1.8;
    border-radius: 2px;
    width: 100%;
    text-align: center;
}
.hrLine1{
    height: 2px;
    color: #cccccc;
    width: 244px;
    margin-left: 115px;
    margin-right: 20px;
}
.ui-datepicker .ui-datepicker-prev span, .ui-datepicker .ui-datepicker-next span {
    display: block;
    position: absolute;
    left: 50%;
    margin-left: -8px;
    top: 50%;
    margin-top: -8px;
    text-align: initial;
}
.mx-calendar-header {
    padding: 0 4px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    overflow: hidden;
}
.app .dateGridView .section .mx-calendar a {
    color: #444;
}
.mx-calendar-header > a {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}
.app a {
    color: #0059c1;
    text-decoration: none;
}
.app .dateGridView .section .mx-calendar a {
    color: #444;
}
.mx-calendar {
    float: left;
    color: #73879c;
    padding: 6px 12px;
    font: 14px/1.5 Helvetica Neue,Helvetica,Arial,Microsoft Yahei,sans-serif;
}
.mx-icon-last-month, .mx-icon-last-year, .mx-icon-next-month, .mx-icon-next-year {
    padding: 0 6px;
    font-size: 20px;
    line-height: 30px;
}
.mx-icon-last-month, .mx-icon-last-year, .mx-icon-next-month, .mx-icon-next-year {
    padding: 0 6px;
    font-size: 20px;
    line-height: 30px;
}
.mx-icon-last-month, .mx-icon-last-year, .mx-icon-next-month, .mx-icon-next-year {
    padding: 0 6px;
    font-size: 20px;
    line-height: 30px;
}
.mx-icon-last-month, .mx-icon-last-year, .mx-icon-next-month, .mx-icon-next-year {
    padding: 0 6px;
    font-size: 20px;
    line-height: 30px;
}
.mx-calendar-header {
    padding: 0 4px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    overflow: hidden;
}
.monthView
{
    margin-right:25px;
}
.yearView
{
    margin-right:25px;
}
.iconClose{
    float: right;
    margin-top: 6px;
}
.ui-state-active, 
.ui-widget-content .ui-state-active, 
.ui-widget-header .ui-state-active, 
a.ui-button:active, .ui-button:active, 
.ui-button.ui-state-active:hover {
    border: 1px solid #003eff;
    background: #5caeff;
    font-weight: normal;
    color: #ffffff;
}
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
    /* font-family: sans-serif; */
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

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

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

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

[hidden],
template {
    display: none
}

a {
    background-color: transparent
}

a:active,
a:hover {
    outline: 0
}

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

b,
strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

h1 {
    font-size: 1.7em;
    margin: .67em 0
}

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

small {
    font-size: 80%
}

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

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

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

figure {
    margin: 1em 40px
}

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

pre {
    overflow: auto
}

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

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

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

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

input {
    line-height: normal
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

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

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

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

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

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

td,
th {
    padding: 0
}

.container {
    position: relative;
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 20px
}

.column,
.columns,
.container {
    width: 100%;
    box-sizing: border-box
}

.column,
.columns {
    float: left
}

@media(min-width:400px) {
    .container {
        width: 85%;
        padding: 0
    }
}

@media(min-width:550px) {
    .container {
        width: 80%
    }

    .column,
    .columns {
        margin-left: 4%
    }

    .column:first-child,
    .columns:first-child {
        margin-left: 0
    }

    .one.column,
    .one.columns {
        width: 4.6666666667%
    }

    .two.columns {
        width: 13.3333333333%
    }

    .two-half.columns {
        width: 18%
    }

    .three.columns {
        width: 22%
    }

    .four.columns {
        width: 30.6666666667%
    }

    .five.columns {
        width: 39.3333333333%
    }

    .six.columns {
        width: 48%
    }

    .seven.columns {
        width: 56.6666666667%
    }

    .eight.columns {
        width: 65.3333333333%
    }

    .nine.columns {
        width: 74%
    }

    .ten.columns {
        width: 82.6666666667%
    }

    .eleven.columns {
        width: 91.3333333333%
    }

    .twelve.columns {
        width: 100%;
        margin-left: 0
    }

    .one-third.column {
        width: 30.6666666667%
    }

    .two-thirds.column {
        width: 65.3333333333%
    }

    .one-half.column {
        width: 48%
    }

    .offset-by-one.column,
    .offset-by-one.columns {
        margin-left: 8.6666666667%
    }

    .offset-by-two.column,
    .offset-by-two.columns {
        margin-left: 17.3333333333%
    }

    .offset-by-three.column,
    .offset-by-three.columns {
        margin-left: 26%
    }

    .offset-by-four.column,
    .offset-by-four.columns {
        margin-left: 34.6666666667%
    }

    .offset-by-five.column,
    .offset-by-five.columns {
        margin-left: 43.3333333333%
    }

    .offset-by-six.column,
    .offset-by-six.columns {
        margin-left: 52%
    }

    .offset-by-seven.column,
    .offset-by-seven.columns {
        margin-left: 60.6666666667%
    }

    .offset-by-eight.column,
    .offset-by-eight.columns {
        margin-left: 69.3333333333%
    }

    .offset-by-nine.column,
    .offset-by-nine.columns {
        margin-left: 78%
    }

    .offset-by-ten.column,
    .offset-by-ten.columns {
        margin-left: 86.6666666667%
    }

    .offset-by-eleven.column,
    .offset-by-eleven.columns {
        margin-left: 95.3333333333%
    }

    .offset-by-one-third.column,
    .offset-by-one-third.columns {
        margin-left: 34.6666666667%
    }

    .offset-by-two-thirds.column,
    .offset-by-two-thirds.columns {
        margin-left: 69.3333333333%
    }

    .offset-by-one-half.column {
        margin-left: 52%
    }
}

.container:after,
.row:after,
.u-cf {
    content: "";
    display: table;
    clear: both
}

.lessmargin {
    margin-bottom: 5px !important
}

.inc-margin {
    margin-top: 25px
}

.generic-table {
    width: 100%
}

.generic-table tbody tr td:first-child,
.generic-table thead tr td:first-child {
    text-align: left
}

.generic-table tbody tr td,
.generic-table thead tr td {
    text-align: right;
    padding: 10px 12px
}

.generic-table thead tr {
    border-top: 1px solid #f1f1f1
}

.generic-table thead td {
    padding: 15px 12px;
    color: #9b9b9b;
    background: #fafafb
}

.generic-table tr {
    border-bottom: 1px solid #f1f1f1
}

.text-center {
    text-align: center
}

.text-uppercase {
    text-transform: uppercase
}

.text-small {
    font-size: .875rem;
    line-height: 20px
}

.su-select,
.text-xsmall {
    font-size: .75rem
}

.su-input-group .su-dynamic-label,
.su-input-group .su-message,
.text-label,
.text-label.small,
.text-xxsmall {
    font-size: .725rem
}

.text-xxxsmall {
    font-size: .5rem
}

.text-normal {
    font-size: .875rem
}

.su-toast-groups .su-toast-icon,
.text-initial {
    font-size: 1rem
}

.text-pagetitle {
    font-size: 1.125rem
}

.text-large {
    font-size: 1.5rem
}

.text-xlarge {
    font-size: 2rem
}

.text-xxlarge {
    font-size: 2.625rem
}

.text-default {
    color: #444
}

.text-light {
    color: #9b9b9b
}

.text-lightest {
    color: #ccc
}

.text-green {
    color: #4caf50
}

.text-red,
.text-sell {
    color: #f6461a
}

.text-blue,
.text-buy {
    color: #387ed1
}

.text-right {
    text-align: right
}

.text-left {
    text-align: left
}

.text-decimal {
    font-size: .5em
}

.text-no-margin {
    margin: 0
}

a.text-light:hover {
    color: #444
}

.dim {
    opacity: .7
}

.caps {
    text-transform: uppercase
}

.text-label {
    padding: 2px 10px;
    text-align: center;
    border-radius: 2px;
    display: inline-block;
    letter-spacing: .5px;
    color: #444;
    box-sizing: border-box;
    background: rgba(68, 68, 68, .1)
}

.text-label.red {
    color: #df514c;
    background-color: rgba(223, 81, 76, .1)
}

.text-label.green {
    color: #4caf50;
    background-color: rgba(76, 175, 80, .1)
}

.text-label.blue {
    color: #387ed1;
    background-color: rgba(56, 126, 209, .1)
}

.text-label.orange {
    color: #ff5722;
    background-color: rgba(255, 87, 34, .1)
}

.text-label.aqua {
    color: #00b0ff;
    background-color: rgba(0, 176, 255, .1)
}

.text-label.amber {
    color: #ff8f00;
    background-color: rgba(255, 143, 0, .1)
}

.text-label.rose {
    color: #ec407a;
    background-color: rgba(236, 64, 122, .1)
}

.text-label.teal {
    color: #009688;
    background-color: rgba(0, 150, 136, .1)
}

.text-label.indigo {
    color: #673ab7;
    background-color: rgba(103, 58, 183, .1)
}

.hide {
    display: none
}

.wide {
    width: 100%
}

.text-box {
    padding: 10px 20px;
    margin-bottom: 20px;
    border-radius: 2px;
    color: rgba(0, 0, 0, .65);
    border-left: 5px solid #f4f4f4
}

.text-box.green {
    background-color: #ebf8f2;
    border-color: #ebf8f2
}

.text-box.blue {
    background-color: #ecf6fd;
    border-color: #d2eafb
}

.text-box.red {
    background-color: #fef0ef;
    border-color: #fcdbd9
}

.text-box.yellow {
    background-color: #fffaeb;
    border-color: #fff3cf
}

@-webkit-keyframes fadeInDown {
    0% {
        transform: translate3d(0, -50%, 0);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes fadeInDown {
    0% {
        transform: translate3d(0, -50%, 0);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    to {
        transform: translate3d(0, -50%, 0);
        opacity: 0
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    to {
        transform: translate3d(0, -50%, 0);
        opacity: 0
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        transform: translate3d(0, 100%, 0);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes fadeInUp {
    0% {
        transform: translate3d(0, 100%, 0);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        transform: translate3d(0, 100%, 0);
        opacity: 0
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        transform: translate3d(0, 100%, 0);
        opacity: 0
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@-webkit-keyframes slideInRight {
    0% {
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes slideInRight {
    0% {
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

@-webkit-keyframes slideOutRight {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes slideOutRight {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0)
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 10ms
}

.fade-enter,
.fade-leave-to {
    opacity: 0
}

.perspective {
    perspective: 1000px
}

.dropdown-enter-active {
    transform-origin: 0 0;
    transition: transform .15s ease-in-out, opacity .15s
}

.dropdown-leave-active {
    transform-origin: 0 0;
    transition: transform .15s ease-in-out, opacity .2s
}

.dropdown-enter,
.dropdown-leave-to {
    opacity: 0;
    transform: rotateX(-15deg);
    transform-origin: 0 0
}

.dropdown-leave-to {
    transform: rotateX(-30deg)
}

@-webkit-keyframes swing-in {
    0% {
        opacity: .4;
        transform: rotateX(-15deg)
    }

    to {
        opacity: 1;
        transform: rotateX(0deg)
    }
}

@keyframes swing-in {
    0% {
        opacity: .4;
        transform: rotateX(-15deg)
    }

    to {
        opacity: 1;
        transform: rotateX(0deg)
    }
}

.shake {
    -webkit-animation: shake .15s ease;
    animation: shake .15s ease
}

@-webkit-keyframes shake {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(1em)
    }

    40% {
        transform: translate(-1em)
    }

    60% {
        transform: translate(.5em)
    }

    80% {
        transform: translate(-.5em)
    }

    to {
        transform: translate(0)
    }
}

@keyframes shake {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(1em)
    }

    40% {
        transform: translate(-1em)
    }

    60% {
        transform: translate(.5em)
    }

    80% {
        transform: translate(-.5em)
    }

    to {
        transform: translate(0)
    }
}

.pulse {
    -webkit-animation: pulse .15s ease;
    animation: pulse .15s ease
}

@-webkit-keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(.98)
    }

    to {
        transform: scale(1)
    }
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(.98)
    }

    to {
        transform: scale(1)
    }
}

html {
    font-size: 87.5%
}

.full-height,
body,
html {
    height: 100%
}

body {
    font-size: 14px;
    overflow-y: scroll;
    overflow-x: hidden;
    letter-spacing: 0;
    color: #444;
    line-height: 1.7em;
    min-width: 300px
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    /* font-family: Inter, sans-serif */
}

h1 {
    font-size: 1.75em;
    line-height: 2.5rem
}

h1,
h2 {
    margin-top: 10px;
    margin-bottom: 20px
}

h2 {
    font-size: 1.5rem
}

h3 {
    font-size: 1.3rem;
    line-height: 2.25rem
}

h4 {
    font-size: 1.25rem
}

h3,
h4,
h5,
h6 {
    margin-top: 5px
}

h3,
h4,
h5,
h6,
p {
    margin-bottom: 20px
}

p {
    margin-top: 10px
}

hr {
    border-width: 0;
    border-top: 1px solid #f1f1f1
}

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

::-webkit-input-placeholder {
    text-transform: none;
    color: #9b9b9b
}

:-moz-placeholder,
::-moz-placeholder {
    text-transform: none;
    color: #9b9b9b
}

:-ms-input-placeholder {
    text-transform: none;
    color: #9b9b9b
}

.section {
    margin-bottom: 60px
}

@media only screen and (max-width:800px) {
    body {
        font-size: 14px
    }

    .section {
        margin-bottom: 30px
    }
}

.animated,
.su-input-group .su-input-label.su-visible,
.su-input-group .su-message {
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite,
.su-input-group .infinite.su-input-label.su-visible,
.su-input-group .infinite.su-message {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.hinge,
.su-input-group .hinge.su-input-label.su-visible,
.su-input-group .hinge.su-message {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.animated.bounceIn,
.animated.bounceOut,
.animated.flipInX,
.animated.flipOutX,
.animated.flipOutY,
.su-input-group .bounceIn.su-input-label.su-visible,
.su-input-group .bounceIn.su-message,
.su-input-group .bounceOut.su-input-label.su-visible,
.su-input-group .bounceOut.su-message,
.su-input-group .flipInX.su-input-label.su-visible,
.su-input-group .flipInX.su-message,
.su-input-group .flipOutX.su-input-label.su-visible,
.su-input-group .flipOutX.su-message,
.su-input-group .flipOutY.su-input-label.su-visible,
.su-input-group .flipOutY.su-message {
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@-webkit-keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

@-webkit-keyframes slideInUp {
    0% {
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes slideInUp {
    0% {
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.slideInUp,
.su-input-group .su-input-label.su-visible {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}

@-webkit-keyframes slideOutDown {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes slideOutDown {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0)
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown
}

@-webkit-keyframes slideInDown {
    0% {
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes slideInDown {
    0% {
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.slideInDown,
.su-input-group .su-message {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

.su-input-group {
    position: relative;
    margin-top: 20px
}

.su-input-group input,
.su-input-group textarea {
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    padding: 10px 15px;
    color: #4a4a4a;
    width: 100%;
    box-sizing: border-box;
    font-size: .875rem;
    line-height: 1.25rem
}

.su-input-group input:disabled,
.su-input-group textarea:disabled {
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0h1L0 6V5zm1 5v1H5z' fill='%23ddd' fill-rule='evenodd'/%3E%3C/svg%3E");
    color: #666;
    cursor: not-allowed;
    border-color: transparent
}

.su-input-group input:focus,
.su-input-group textarea:focus {
    outline: 0;
    border-color: #9b9b9b
}

.su-input-group input:focus+.icon,
.su-input-group textarea:focus+.icon {
    border-color: #9b9b9b
}

.su-input-group input::-moz-placeholder,
.su-input-group textarea::-moz-placeholder {
    color: #9b9b9b
}

.su-input-group input:-ms-input-placeholder,
.su-input-group textarea:-ms-input-placeholder {
    color: #9b9b9b
}

.su-input-group input::placeholder,
.su-input-group textarea::placeholder {
    color: #9b9b9b
}

.su-input-group input.show-spinner,
.su-input-group textarea.show-spinner {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield
}

.su-input-group .spinner-container {
    position: relative
}

.su-input-group .spinner-container .spinner-down,
.su-input-group .spinner-container .spinner-up {
    position: absolute;
    right: 5px;
    color: #9b9b9b
}

.su-input-group .spinner-container .spinner-down:hover,
.su-input-group .spinner-container .spinner-up:hover {
    cursor: pointer
}

.su-input-group .spinner-container .spinner-up {
    top: 0
}

.su-input-group .spinner-container .spinner-down {
    bottom: 0
}

.su-input-group.disabled .su-input-label {
    color: #ccc
}

.su-input-group .su-input-label {
    display: block;
    visibility: hidden;
    z-index: 1;
    position: absolute;
    top: -10px;
    background: #fff;
    padding: 0 5px;
    margin-left: 10px
}

.su-input-group .su-input-label.su-visible {
    visibility: visible
}

.su-input-group.su-static-label .su-input-label {
    visibility: visible;
    -webkit-animation: none;
    animation: none
}

.su-input-group.uppercase input,
.su-input-group.uppercase select,
.su-input-group.uppercase textarea {
    text-transform: uppercase
}

.su-input-group.su-has-icon input {
    padding-left: 55px
}

.su-input-group .su-message {
    display: inline-block;
    margin-top: 5px
}

.su-input-group .su-message:empty:before {
    content: "​"
}

.su-input-group.su-error-state input,
.su-input-group.su-error-state select,
.su-input-group.su-error-state textarea {
    border-color: #f6461a
}

.su-input-group.su-error-state .su-message {
    color: #f6461a
}

.su-radio-group .su-radio-wrap {
    display: inline-block;
    margin-right: 20px
}

.su-radio-group .su-radio {
    opacity: 0;
    position: absolute
}

.su-radio-group .su-radio,
.su-radio-group .su-radio-label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer
}

.su-radio-group .su-radio-label {
    position: relative
}

.su-radio-group .su-radio+.su-radio-label:before {
    content: "";
    background: #fff;
    border: 2px solid #9b9b9b;
    display: inline-block;
    vertical-align: middle;
    width: 3px;
    height: 3px;
    padding: 3px;
    margin: -1px 5px 0 0;
    text-align: center;
    border-radius: 50%
}

.su-radio-group .su-radio:checked+.su-radio-label:before {
    padding: 4px;
    background: #0059c1;
    box-shadow: inset 0 0 0 2px #fff;
    border: 1px solid #0059c1
}

.su-radio-group .su-radio:focus+.su-radio-label {
    outline: none
}

.su-radio-group .disabled .su-radio-label {
    opacity: .5 !important;
    cursor: not-allowed
}

.su-checkbox-group {
    box-sizing: border-box;
    line-height: 1
}

.su-checkbox-group .su-checkbox {
    opacity: 0;
    position: absolute
}

.su-checkbox-group .su-checkbox:disabled+.su-checkbox-label {
    opacity: .6;
    cursor: not-allowed
}

.su-checkbox-group .su-checkbox:focus+.su-checkbox-label .su-checkbox-value {
    outline: none;
    border-bottom: 1px solid #e3e3e3
}

.su-checkbox-group .su-checkbox:checked+.su-checkbox-label .su-checkbox-tick {
    top: 3px
}

.su-checkbox-group .su-checkbox-label {
    cursor: pointer;
    display: flex
}

.su-checkbox-group .su-checkbox-value {
    vertical-align: middle;
    margin-left: 10px;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0)
}

.su-checkbox-group .su-checkbox-box {
    display: inline-block;
    width: 15px;
    height: 15px;
    min-width: 15px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 2px;
    top: 3px
}

.su-checkbox-group .su-checkbox-tick {
    top: 20px;
    left: 2px;
    right: 2px;
    width: 8px;
    height: 3px;
    content: "";
    position: absolute;
    border-left: 2px solid;
    border-bottom: 2px solid;
    margin: auto;
    transform: rotate(-45deg) translateZ(0);
    transform-origin: center center;
    transition: top .5s cubic-bezier(.19, 1, .22, 1);
    border-color: #387ed1
}

.su-checkbox-group.indeterminate .su-checkbox-tick {
    transform: none;
    border-left: none
}

.su-switch-group .su-switch[type=checkbox] {
    display: none
}

.su-switch-group .su-switch-label {
    color: #9b9b9b
}

.su-switch-group .su-switch-control {
    background: #9b9b9b;
    position: relative;
    text-indent: -9999px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 20px;
    border-radius: 100px
}

.su-switch-group .su-switch-control:after {
    background: #fff;
    content: "";
    position: absolute;
    top: 2.2px;
    left: 3px;
    width: 15px;
    height: 15px;
    transition: .2s;
    border-radius: 90px
}

.su-switch-group .su-switch:checked+.su-switch-control {
    background: #0059c1
}

.su-switch-group .su-switch:checked+.su-switch-control:after {
    left: calc(100% - 3px);
    transform: translateX(-100%)
}

.su-switch-group .su-switch:disabled+.su-switch-control {
    cursor: not-allowed
}

.su-switch-group .su-switch-control:active:after {
    width: 14px
}

.su-toast-groups .su-toast-group {
    position: fixed;
    z-index: 99999;
    pointer-events: none
}

.su-toast-groups .su-toast-group div:first-child {
    position: relative
}

.su-toast-groups a {
    color: #0059c1;
    text-decoration: none
}

.su-toast-groups a:hover {
    opacity: .7
}

.su-toast-groups .su-toast-top-left {
    top: 75px;
    left: 20px
}

.su-toast-groups .su-toast-top-right {
    top: 75px;
    right: 20px
}

.su-toast-groups .su-toast-top-center {
    top: 75px;
    left: 50%;
    transform: translate(-50%)
}

.su-toast-groups .su-toast-bottom-left {
    bottom: 75px;
    left: 20px
}

.su-toast-groups .su-toast-bottom-right {
    bottom: 75px;
    right: 20px
}

.su-toast-groups .su-toast-bottom-center {
    bottom: 75px;
    left: 50%;
    transform: translate(-50%)
}

.su-toast-groups .su-toast-item {
    display: flex;
    box-sizing: border-box;
    max-width: 400px;
    min-width: 300px;
    pointer-events: all;
    position: relative;
    margin: 0 auto 10px auto;
    padding: 10px 30px 15px 15px;
    transition: opacity .2s, transform .2s;
    background: #fff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .1);
    border-left: 20px solid #eee;
    border-radius: 5px
}

.su-toast-groups .su-toast-item.info {
    color: #387ed1;
    border-left-color: #387ed1
}

.su-toast-groups .su-toast-item.success {
    color: #4caf50;
    border-left-color: #4caf50
}

.su-toast-groups .su-toast-item.warning {
    color: #ffbf00;
    border-left-color: #ffbf00
}

.su-toast-groups .su-toast-item.error {
    color: #f6461a;
    border-left-color: #f6461a
}

.su-toast-groups .su-toast-item .message {
    margin: 5px 0;
    color: #444
}

.su-toast-groups .toast-list-enter {
    opacity: 0;
    transform: translateY(-30px)
}

.su-toast-groups .toast-list-leave-active {
    display: none
}

.su-toast-groups .su-toast-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    font-size: 1.3rem;
    line-height: 1.5
}

.su-toast-groups .su-toast-item.info .su-toast-icon {
    color: #0089d0
}

.su-toast-groups .su-toast-item.success .su-toast-icon {
    color: #4caf50
}

.su-toast-groups .su-toast-item.warning .su-toast-icon {
    color: #ffbf00
}

.su-toast-groups .su-toast-item.error .su-toast-icon {
    color: #f6461a
}

.su-toast-groups .close {
    position: absolute;
    right: 10px;
    top: 12px;
    cursor: pointer
}

.dot-spinner,
.su-loader {
    display: inline-block
}

.dot-spinner {
    margin-left: 5px
}

.dot-spinner i {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9b9b9b;
    vertical-align: middle
}

button .dot-spinner {
    margin: 0;
    padding: 0
}

button .dot-spinner i {
    background: #fff
}

.dot-spinner i:first-child {
    transform: translate(-5px);
    -webkit-animation: dot-spinner-ani2 .5s linear infinite;
    animation: dot-spinner-ani2 .5s linear infinite;
    opacity: 0
}

.dot-spinner i:nth-child(2),
.dot-spinner i:nth-child(3) {
    -webkit-animation: dot-spinner-ani3 .5s linear infinite;
    animation: dot-spinner-ani3 .5s linear infinite
}

.dot-spinner i:last-child {
    -webkit-animation: dot-spinner-ani1 .5s linear infinite;
    animation: dot-spinner-ani1 .5s linear infinite
}

@-webkit-keyframes dot-spinner-ani1 {
    to {
        transform: translate(10px);
        opacity: 0
    }
}

@keyframes dot-spinner-ani1 {
    to {
        transform: translate(10px);
        opacity: 0
    }
}

@-webkit-keyframes dot-spinner-ani2 {
    to {
        transform: translate(5px);
        opacity: 1
    }
}

@keyframes dot-spinner-ani2 {
    to {
        transform: translate(5px);
        opacity: 1
    }
}

@-webkit-keyframes dot-spinner-ani3 {
    to {
        transform: translate(5px)
    }
}

@keyframes dot-spinner-ani3 {
    to {
        transform: translate(5px)
    }
}

.su-select {
    position: relative
}

.su-select .icon {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 10px;
    pointer-events: none
}

.su-select select {
    width: 100%;
    padding: 3px 30px 3px 8px;
    background: #fff;
    border-radius: 2px;
    border-color: #e3e3e3;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none
}

.su-select select:disabled {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0h1L0 6V5zm1 5v1H5z' fill='%23ddd' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
    color: #666 !important;
    cursor: not-allowed;
    border-color: transparent !important;
    background-repeat: repeat !important;
    background-size: inherit !important
}

button[data-balloon] {
    overflow: visible
}

[data-balloon]:after,
[data-balloon]:before,
[data-balloon]:hover:before {
    /* font-family: Inter, sans-serif; */
    font-weight: 600
}

[data-balloon] {
    position: relative;
    opacity: 1 !important
}

[data-balloon]:after {
    background: rgba(17, 17, 17, .9);
    border-radius: 4px;
    color: #fff;
    content: attr(data-balloon);
    font-size: 12px;
    padding: .5em 1em;
    white-space: nowrap
}

[data-balloon]:after,
[data-balloon]:before {
    filter: alpha(opactiy=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    pointer-events: none;
    transition: all .18s ease-out .18s;
    transition-delay: 0ms;
    position: absolute;
    z-index: 10
}

[data-balloon]:before {
    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");
    background-size: 100% auto;
    width: 18px;
    height: 6px;
    content: ""
}

[data-balloon]:hover:after,
[data-balloon]:hover:before,
[data-balloon][data-balloon-visible]:after,
[data-balloon][data-balloon-visible]:before {
    filter: alpha(opactiy=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    pointer-events: none
}

[data-balloon].font-awesome:after {
    /* font-family: FontAwesome */
}

[data-balloon][data-balloon-break]:after {
    white-space: pre
}

[data-balloon][data-balloon-pos=up]:after {
    bottom: 100%;
    left: 50%;
    margin-bottom: 11px;
    transform: translate(-50%, 10px);
    transform-origin: top
}

[data-balloon][data-balloon-pos=up]:before {
    bottom: 100%;
    left: 50%;
    margin-bottom: 5px;
    transform: translate(-50%, 10px);
    transform-origin: top
}

[data-balloon][data-balloon-pos=up]:hover:after,
[data-balloon][data-balloon-pos=up]:hover:before,
[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=up][data-balloon-visible]:before {
    transform: translate(-50%)
}

[data-balloon][data-balloon-pos=down]:after {
    left: 50%;
    margin-top: 11px;
    top: 100%;
    transform: translate(-50%, -10px)
}

[data-balloon][data-balloon-pos=down]:before {
    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");
    background-size: 100% auto;
    width: 18px;
    height: 6px;
    left: 50%;
    margin-top: 5px;
    top: 100%;
    transform: translate(-50%, -10px)
}

[data-balloon][data-balloon-pos=down]:hover:after,
[data-balloon][data-balloon-pos=down]:hover:before,
[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=down][data-balloon-visible]:before {
    transform: translate(-50%)
}

[data-balloon][data-balloon-pos=left]:after {
    margin-right: 11px;
    right: 100%;
    top: 50%;
    transform: translate(10px, -50%)
}

[data-balloon][data-balloon-pos=left]:before {
    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M0 33.342V1.338c0 6 12.002 11.627 12.002 16.002C12.002 21.715 0 27.406 0 33.342z'/%3E%3C/svg%3E");
    background-size: 100% auto;
    width: 6px;
    height: 18px;
    margin-right: 5px;
    right: 100%;
    top: 50%;
    transform: translate(10px, -50%)
}

[data-balloon][data-balloon-pos=left]:hover:after,
[data-balloon][data-balloon-pos=left]:hover:before,
[data-balloon][data-balloon-pos=left][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=left][data-balloon-visible]:before {
    transform: translateY(-50%)
}

[data-balloon][data-balloon-pos=right]:after {
    left: 100%;
    margin-left: 11px;
    top: 50%;
    transform: translate(-10px, -50%)
}

[data-balloon][data-balloon-pos=right]:before {
    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M12 2.658v32.004c0-6-12.002-11.627-12.002-16.002C-.002 14.285 12 8.594 12 2.658z'/%3E%3C/svg%3E");
    background-size: 100% auto;
    width: 6px;
    height: 18px;
    left: 100%;
    margin-left: 5px;
    top: 50%;
    transform: translate(-10px, -50%)
}

[data-balloon][data-balloon-pos=right]:hover:after,
[data-balloon][data-balloon-pos=right]:hover:before,
[data-balloon][data-balloon-pos=right][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=right][data-balloon-visible]:before {
    transform: translateY(-50%)
}

[data-balloon][data-balloon-length=small]:after {
    white-space: normal;
    width: 80px;
    word-wrap: break-word
}

[data-balloon][data-balloon-length=medium]:after {
    white-space: normal;
    width: 150px;
    word-wrap: break-word
}

[data-balloon][data-balloon-length=large]:after {
    white-space: normal;
    width: 260px;
    word-wrap: break-word
}

[data-balloon][data-balloon-length=fit]:after {
    white-space: normal;
    width: 100%;
    word-wrap: break-word
}

body {
    height: auto;
    overflow: auto
}

.not-found-container {
    max-width: 300px;
    margin: 60px auto 40px auto;
    padding: 40px;
    border-radius: 5px;
    transform-origin: 0 0;
    text-align: center
}

.not-found-container .logo-wrapper {
    text-align: center
}

.not-found-container .title {
    margin: 0;
    margin-top: 15px
}

.not-found-container .logo {
    width: 105px
}

.not-found-container .description {
    font-size: 12px;
    color: #9b9b9b;
    margin-top: 5px
}

@media(max-width:549px) {
    .not-found-container .title {
        font-size: 1.2rem
    }
}

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
    /* font-family: sans-serif; */
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

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

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

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

[hidden],
template {
    display: none
}

a {
    background-color: transparent
}

a:active,
a:hover {
    outline: 0
}

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

b,
strong {
    font-weight: 700
}

dfn {
    font-style: italic
}

h1 {
    font-size: 1.7em;
    margin: .67em 0
}

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

small {
    font-size: 80%
}

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

sup {
    top: -.5em
}

sub {
    bottom: -.25em
}

img {
    border: 0
}

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

figure {
    margin: 1em 40px
}

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

pre {
    overflow: auto
}

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

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    font: inherit;
    margin: 0
}

button {
    overflow: visible
}

button,
select {
    text-transform: none
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
    -webkit-appearance: button;
    cursor: pointer
}

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

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

input {
    line-height: normal
}

input[type=checkbox],
input[type=radio] {
    box-sizing: border-box;
    padding: 0
}

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

input[type=search] {
    -webkit-appearance: textfield;
    box-sizing: content-box
}

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

fieldset {
    border: 1px solid silver;
    margin: 0 2px;
    padding: .35em .625em .75em
}

legend {
    border: 0;
    padding: 0
}

textarea {
    overflow: auto
}

optgroup {
    font-weight: 700
}

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

td,
th {
    padding: 0
}

.container {
    position: relative;
    max-width: 1366px;
    margin: 0 auto;
    padding: 0 20px
}

.column,
.columns,
.container {
    width: 100%;
    box-sizing: border-box
}

.column,
.columns {
    float: left
}

@media(min-width:400px) {
    .container {
        width: 85%;
        padding: 0
    }
}

@media(min-width:550px) {
    .container {
        width: 80%
    }

    .column,
    .columns {
        margin-left: 4%
    }

    .column:first-child,
    .columns:first-child {
        margin-left: 0
    }

    .one.column,
    .one.columns {
        width: 4.6666666667%
    }

    .two.columns {
        width: 13.3333333333%
    }

    .two-half.columns {
        width: 18%
    }

    .three.columns {
        width: 22%
    }

    .four.columns {
        width: 30.6666666667%
    }

    .five.columns {
        width: 39.3333333333%
    }

    .six.columns {
        width: 48%
    }

    .seven.columns {
        width: 56.6666666667%
    }

    .eight.columns {
        width: 65.3333333333%
    }

    .nine.columns {
        width: 74%
    }

    .ten.columns {
        width: 82.6666666667%
    }

    .eleven.columns {
        width: 91.3333333333%
    }

    .twelve.columns {
        width: 100%;
        margin-left: 0
    }

    .one-third.column {
        width: 30.6666666667%
    }

    .two-thirds.column {
        width: 65.3333333333%
    }

    .one-half.column {
        width: 48%
    }

    .offset-by-one.column,
    .offset-by-one.columns {
        margin-left: 8.6666666667%
    }

    .offset-by-two.column,
    .offset-by-two.columns {
        margin-left: 17.3333333333%
    }

    .offset-by-three.column,
    .offset-by-three.columns {
        margin-left: 26%
    }

    .offset-by-four.column,
    .offset-by-four.columns {
        margin-left: 34.6666666667%
    }

    .offset-by-five.column,
    .offset-by-five.columns {
        margin-left: 43.3333333333%
    }

    .offset-by-six.column,
    .offset-by-six.columns {
        margin-left: 52%
    }

    .offset-by-seven.column,
    .offset-by-seven.columns {
        margin-left: 60.6666666667%
    }

    .offset-by-eight.column,
    .offset-by-eight.columns {
        margin-left: 69.3333333333%
    }

    .offset-by-nine.column,
    .offset-by-nine.columns {
        margin-left: 78%
    }

    .offset-by-ten.column,
    .offset-by-ten.columns {
        margin-left: 86.6666666667%
    }

    .offset-by-eleven.column,
    .offset-by-eleven.columns {
        margin-left: 95.3333333333%
    }

    .offset-by-one-third.column,
    .offset-by-one-third.columns {
        margin-left: 34.6666666667%
    }

    .offset-by-two-thirds.column,
    .offset-by-two-thirds.columns {
        margin-left: 69.3333333333%
    }

    .offset-by-one-half.column {
        margin-left: 52%
    }
}

.container:after,
.row:after,
.u-cf {
    content: "";
    display: table;
    clear: both
}

.lessmargin {
    margin-bottom: 5px !important
}

.inc-margin {
    margin-top: 25px
}

.generic-table {
    width: 100%
}

.generic-table tbody tr td:first-child,
.generic-table thead tr td:first-child {
    text-align: left
}

.generic-table tbody tr td,
.generic-table thead tr td {
    text-align: right;
    padding: 10px 12px
}

.generic-table thead tr {
    border-top: 1px solid #f1f1f1
}

.generic-table thead td {
    padding: 15px 12px;
    color: #9b9b9b;
    background: #fafafb
}

.generic-table tr {
    border-bottom: 1px solid #f1f1f1
}

.text-center {
    text-align: center
}

.text-uppercase {
    text-transform: uppercase
}

.context-menu .context-menu-list li a,
.margins .sub-details .value,
.order-window,
.text-small {
    font-size: .875rem;
    line-height: 20px
}

.app .header .app-nav .dropdown-nav .dropdown-nav-header .email,
.app .header .header-left .pinned-instruments .instrument-widget,
.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header .email,
.btn,
.btn-blue,
.btn-green,
.btn-grey,
.btn-reset,
.margins .main-details .label,
.margins .sub-details .label,
.marketwatch-sidebar .instruments .instrument:hover .actions .btn,
.marketwatch-sidebar .instruments .market-depth .ohlc,
.marketwatch-sidebar .instruments .market-depth table,
.marketwatch-sidebar .marketwatch-selector,
.notifications-window table tbody tr td,
.order-window .content .el-radio__label,
.order-window .head .transaction-type-switch span,
.orderbook .order-info-modal .modal-container,
.stats-block .label,
.stats-block .primary-stats span,
.stats-block p,
.su-select,
.text-xsmall {
    font-size: .75rem
}

.btn-small,
.marketwatch-sidebar .instruments .market-depth table thead tr th,
.order-window .content .advanced-options-toggle span,
.order-window .content .el-form-item__label,
.order-window .head .exchange,
.order-window .head .last-price,
.su-input-group .su-dynamic-label,
.su-input-group .su-message,
.text-label,
.text-label.small,
.text-xxsmall {
    font-size: .725rem
}

.text-xxxsmall {
    font-size: .5rem
}

.app .header .right-nav a.notifications-widget,
.el-notification .el-notification__icon,
.text-normal {
    font-size: .875rem
}

.app .header .app-nav .dropdown-nav .dropdown-nav-header h4,
.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header h4,
.mobile-context-menu .mobile-context-menu-list,
.su-toast-groups .su-toast-icon,
.text-initial {
    font-size: 1rem
}

.app .page-title,
.orderbook .order-info-modal .modal-container .order-info-header .tradingsymbol,
.text-pagetitle {
    font-size: 1.125rem
}

.text-large {
    font-size: 1.5rem
}

.margins .main-details .value,
.stats-block .primary-stats .value,
.stats-block h2,
.text-xlarge {
    font-size: 2rem
}

.text-xxlarge {
    font-size: 2.625rem
}

.text-default {
    color: #444
}

.text-light {
    color: #9b9b9b
}

.text-lightest {
    color: #ccc
}

.text-green {
    color: #4caf50
}

.text-red,
.text-sell {
    color: #f6461a
}

.text-blue,
.text-buy {
    color: #387ed1
}

.marketwatch-sidebar .instruments .instrument .price,
.marketwatch-sidebar .instruments .instrument .price span,
.text-right {
    text-align: right
}

.text-left {
    text-align: left
}

.text-decimal {
    font-size: .5em
}

.text-no-margin {
    margin: 0
}

a.text-light:hover {
    color: #444
}

.dim {
    opacity: .7
}

.caps {
    text-transform: uppercase
}

.text-label {
    padding: 2px 10px;
    text-align: center;
    border-radius: 2px;
    display: inline-block;
    letter-spacing: .5px;
    color: #444;
    box-sizing: border-box;
    background: rgba(68, 68, 68, .1)
}

.text-label.red {
    color: #df514c;
    background-color: rgba(223, 81, 76, .1)
}

.text-label.green {
    color: #4caf50;
    background-color: rgba(76, 175, 80, .1)
}

.text-label.blue {
    color: #387ed1;
    background-color: rgba(56, 126, 209, .1)
}

.text-label.orange {
    color: #ff5722;
    background-color: rgba(255, 87, 34, .1)
}

.text-label.aqua {
    color: #00b0ff;
    background-color: rgba(0, 176, 255, .1)
}

.text-label.amber {
    color: #ff8f00;
    background-color: rgba(255, 143, 0, .1)
}

.text-label.rose {
    color: #ec407a;
    background-color: rgba(236, 64, 122, .1)
}

.text-label.teal {
    color: #009688;
    background-color: rgba(0, 150, 136, .1)
}

.text-label.indigo {
    color: #673ab7;
    background-color: rgba(103, 58, 183, .1)
}

.hide {
    display: none
}

.wide {
    width: 100%
}

.text-box {
    padding: 10px 20px;
    margin-bottom: 20px;
    border-radius: 2px;
    color: rgba(0, 0, 0, .65);
    border-left: 5px solid #f4f4f4
}

.text-box.green {
    background-color: #ebf8f2;
    border-color: #ebf8f2
}

.text-box.blue {
    background-color: #ecf6fd;
    border-color: #d2eafb
}

.text-box.red {
    background-color: #fef0ef;
    border-color: #fcdbd9
}

.text-box.yellow {
    background-color: #fffaeb;
    border-color: #fff3cf
}

@-webkit-keyframes fadeInDown {
    0% {
        transform: translate3d(0, -50%, 0);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes fadeInDown {
    0% {
        transform: translate3d(0, -50%, 0);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

@-webkit-keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    to {
        transform: translate3d(0, -50%, 0);
        opacity: 0
    }
}

@keyframes fadeOutUp {
    0% {
        opacity: 1
    }

    to {
        transform: translate3d(0, -50%, 0);
        opacity: 0
    }
}

@-webkit-keyframes fadeInUp {
    0% {
        transform: translate3d(0, 100%, 0);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes fadeInUp {
    0% {
        transform: translate3d(0, 100%, 0);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

@-webkit-keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        transform: translate3d(0, 100%, 0);
        opacity: 0
    }
}

@keyframes fadeOutDown {
    0% {
        opacity: 1
    }

    to {
        transform: translate3d(0, 100%, 0);
        opacity: 0
    }
}

@-webkit-keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

@-webkit-keyframes slideInRight {
    0% {
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes slideInRight {
    0% {
        transform: translate3d(100%, 0, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.slideInRight {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight
}

@-webkit-keyframes slideOutRight {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0)
    }
}

@keyframes slideOutRight {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(100%, 0, 0)
    }
}

.slideOutRight {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 10ms
}

.fade-enter,
.fade-leave-to {
    opacity: 0
}

.perspective {
    perspective: 1000px
}

.dropdown-enter-active {
    transform-origin: 0 0;
    transition: transform .15s ease-in-out, opacity .15s
}

.dropdown-leave-active {
    transform-origin: 0 0;
    transition: transform .15s ease-in-out, opacity .2s
}

.dropdown-enter,
.dropdown-leave-to {
    opacity: 0;
    transform: rotateX(-15deg);
    transform-origin: 0 0
}

.dropdown-leave-to {
    transform: rotateX(-30deg)
}

@-webkit-keyframes swing-in {
    0% {
        opacity: .4;
        transform: rotateX(-15deg)
    }

    to {
        opacity: 1;
        transform: rotateX(0deg)
    }
}

@keyframes swing-in {
    0% {
        opacity: .4;
        transform: rotateX(-15deg)
    }

    to {
        opacity: 1;
        transform: rotateX(0deg)
    }
}

.shake {
    -webkit-animation: shake .15s ease;
    animation: shake .15s ease
}

@-webkit-keyframes shake {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(1em)
    }

    40% {
        transform: translate(-1em)
    }

    60% {
        transform: translate(.5em)
    }

    80% {
        transform: translate(-.5em)
    }

    to {
        transform: translate(0)
    }
}

@keyframes shake {
    0% {
        transform: translate(0)
    }

    20% {
        transform: translate(1em)
    }

    40% {
        transform: translate(-1em)
    }

    60% {
        transform: translate(.5em)
    }

    80% {
        transform: translate(-.5em)
    }

    to {
        transform: translate(0)
    }
}

.pulse {
    -webkit-animation: pulse .15s ease;
    animation: pulse .15s ease
}

@-webkit-keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(.98)
    }

    to {
        transform: scale(1)
    }
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(.98)
    }

    to {
        transform: scale(1)
    }
}

html {
    font-size: 87.5%
}

.full-height,
body,
html {
    height: 100%
}

body {
    font-size: 14px;
    overflow-y: scroll;
    overflow-x: hidden;
    letter-spacing: 0;
    color: #444;
    line-height: 1.7em;
    min-width: 300px
}

body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400;
    /* font-family: Inter, sans-serif */
}

h1 {
    font-size: 1.75em;
    line-height: 2.5rem
}

h1,
h2 {
    margin-top: 10px;
    margin-bottom: 20px
}

h2 {
    font-size: 1.5rem
}

h3 {
    font-size: 1.3rem;
    line-height: 2.25rem
}

h4 {
    font-size: 1.25rem
}

h3,
h4,
h5,
h6 {
    margin-top: 5px
}

h3,
h4,
h5,
h6,
p {
    margin-bottom: 20px
}

p {
    margin-top: 10px
}

hr {
    border-width: 0;
    border-top: 1px solid #f1f1f1
}

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

::-webkit-input-placeholder {
    text-transform: none;
    color: #9b9b9b
}

:-moz-placeholder,
::-moz-placeholder {
    text-transform: none;
    color: #9b9b9b
}

:-ms-input-placeholder {
    text-transform: none;
    color: #9b9b9b
}

.section {
    margin-bottom: 60px
}

@media only screen and (max-width:800px) {
    body {
        font-size: 14px
    }

    .section {
        margin-bottom: 30px
    }
}

.animated,
.su-input-group .su-input-label.su-visible,
.su-input-group .su-message {
    -webkit-animation-duration: .2s;
    animation-duration: .2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.animated.infinite,
.su-input-group .infinite.su-input-label.su-visible,
.su-input-group .infinite.su-message {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.animated.hinge,
.su-input-group .hinge.su-input-label.su-visible,
.su-input-group .hinge.su-message {
    -webkit-animation-duration: 2s;
    animation-duration: 2s
}

.animated.bounceIn,
.animated.bounceOut,
.animated.flipInX,
.animated.flipOutX,
.animated.flipOutY,
.su-input-group .bounceIn.su-input-label.su-visible,
.su-input-group .bounceIn.su-message,
.su-input-group .bounceOut.su-input-label.su-visible,
.su-input-group .bounceOut.su-message,
.su-input-group .flipInX.su-input-label.su-visible,
.su-input-group .flipInX.su-message,
.su-input-group .flipOutX.su-input-label.su-visible,
.su-input-group .flipOutX.su-message,
.su-input-group .flipOutY.su-input-label.su-visible,
.su-input-group .flipOutY.su-message {
    -webkit-animation-duration: .75s;
    animation-duration: .75s
}

@-webkit-keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
        opacity: 0
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        opacity: 1
    }

    80% {
        transform: perspective(400px) rotateX(-5deg)
    }

    to {
        transform: perspective(400px)
    }
}

.flipInX {
    -webkit-backface-visibility: visible !important;
    backface-visibility: visible !important;
    -webkit-animation-name: flipInX;
    animation-name: flipInX
}

@-webkit-keyframes slideInUp {
    0% {
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes slideInUp {
    0% {
        transform: translate3d(0, 100%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.slideInUp,
.su-input-group .su-input-label.su-visible {
    -webkit-animation-name: slideInUp;
    animation-name: slideInUp
}

@-webkit-keyframes slideOutDown {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0)
    }
}

@keyframes slideOutDown {
    0% {
        transform: translateZ(0)
    }

    to {
        visibility: hidden;
        transform: translate3d(0, 100%, 0)
    }
}

.slideOutDown {
    -webkit-animation-name: slideOutDown;
    animation-name: slideOutDown
}

@-webkit-keyframes slideInDown {
    0% {
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

@keyframes slideInDown {
    0% {
        transform: translate3d(0, -100%, 0);
        visibility: visible
    }

    to {
        transform: translateZ(0)
    }
}

.slideInDown,
.su-input-group .su-message {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown
}

.fadeIn {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn
}

@keyframes fadeOut {
    0% {
        opacity: 1
    }

    to {
        opacity: 0
    }
}

.fadeOut {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut
}

.su-input-group {
    position: relative;
    margin-top: 20px
}

.su-input-group input,
.su-input-group textarea {
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    padding: 10px 15px;
    color: #4a4a4a;
    width: 100%;
    box-sizing: border-box;
    font-size: .875rem;
    line-height: 1.25rem
}

.su-input-group input:disabled,
.su-input-group textarea:disabled {
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0h1L0 6V5zm1 5v1H5z' fill='%23ddd' fill-rule='evenodd'/%3E%3C/svg%3E");
    color: #666;
    cursor: not-allowed;
    border-color: transparent
}

.su-input-group input:focus,
.su-input-group textarea:focus {
    outline: 0;
    border-color: #9b9b9b
}

.su-input-group input:focus+.icon,
.su-input-group textarea:focus+.icon {
    border-color: #9b9b9b
}

.su-input-group input::-moz-placeholder,
.su-input-group textarea::-moz-placeholder {
    color: #9b9b9b
}

.su-input-group input:-ms-input-placeholder,
.su-input-group textarea:-ms-input-placeholder {
    color: #9b9b9b
}

.su-input-group input::placeholder,
.su-input-group textarea::placeholder {
    color: #9b9b9b
}

.su-input-group input.show-spinner,
.su-input-group textarea.show-spinner {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield
}

.su-input-group .spinner-container {
    position: relative
}

.su-input-group .spinner-container .spinner-down,
.su-input-group .spinner-container .spinner-up {
    position: absolute;
    right: 5px;
    color: #9b9b9b
}

.su-input-group .spinner-container .spinner-down:hover,
.su-input-group .spinner-container .spinner-up:hover {
    cursor: pointer
}

.su-input-group .spinner-container .spinner-up {
    top: 0
}

.su-input-group .spinner-container .spinner-down {
    bottom: 0
}

.su-input-group.disabled .su-input-label {
    color: #ccc
}

.su-input-group .su-input-label {
    display: block;
    visibility: hidden;
    z-index: 1;
    position: absolute;
    top: -10px;
    background: #fff;
    padding: 0 5px;
    margin-left: 10px
}

.su-input-group .su-input-label.su-visible {
    visibility: visible
}

.su-input-group.su-static-label .su-input-label {
    visibility: visible;
    -webkit-animation: none;
    animation: none
}

.su-input-group.uppercase input,
.su-input-group.uppercase select,
.su-input-group.uppercase textarea {
    text-transform: uppercase
}

.su-input-group.su-has-icon input {
    padding-left: 55px
}

.su-input-group .su-message {
    display: inline-block;
    margin-top: 5px
}

.su-input-group .su-message:empty:before {
    content: "​"
}

.su-input-group.su-error-state input,
.su-input-group.su-error-state select,
.su-input-group.su-error-state textarea {
    border-color: #f6461a
}

.su-input-group.su-error-state .su-message {
    color: #f6461a
}

.su-radio-group .su-radio-wrap {
    display: inline-block;
    margin-right: 20px
}

.su-radio-group .su-radio {
    opacity: 0;
    position: absolute
}

.su-radio-group .su-radio,
.su-radio-group .su-radio-label {
    display: inline-block;
    vertical-align: middle;
    cursor: pointer
}

.su-radio-group .su-radio-label {
    position: relative
}

.su-radio-group .su-radio+.su-radio-label:before {
    content: "";
    background: #fff;
    border: 2px solid #9b9b9b;
    display: inline-block;
    vertical-align: middle;
    width: 3px;
    height: 3px;
    padding: 3px;
    margin: -1px 5px 0 0;
    text-align: center;
    border-radius: 50%
}

.su-radio-group .su-radio:checked+.su-radio-label:before {
    padding: 4px;
    background: #0059c1;
    box-shadow: inset 0 0 0 2px #fff;
    border: 1px solid #0059c1
}

.su-radio-group .su-radio:focus+.su-radio-label {
    outline: none
}

.su-radio-group .disabled .su-radio-label {
    opacity: .5 !important;
    cursor: not-allowed
}

.su-checkbox-group {
    box-sizing: border-box;
    line-height: 1
}

.su-checkbox-group .su-checkbox {
    opacity: 0;
    position: absolute
}

.su-checkbox-group .su-checkbox:disabled+.su-checkbox-label {
    opacity: .6;
    cursor: not-allowed
}

.su-checkbox-group .su-checkbox:focus+.su-checkbox-label .su-checkbox-value {
    outline: none;
    border-bottom: 1px solid #e3e3e3
}

.su-checkbox-group .su-checkbox:checked+.su-checkbox-label .su-checkbox-tick {
    top: 3px
}

.su-checkbox-group .su-checkbox-label {
    cursor: pointer;
    display: flex
}

.su-checkbox-group .su-checkbox-value {
    vertical-align: middle;
    margin-left: 10px;
    border-bottom: 1px solid hsla(0, 0%, 100%, 0)
}

.su-checkbox-group .su-checkbox-box {
    display: inline-block;
    width: 15px;
    height: 15px;
    min-width: 15px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid #ccc;
    box-sizing: border-box;
    border-radius: 2px;
    top: 3px
}

.su-checkbox-group .su-checkbox-tick {
    top: 20px;
    left: 2px;
    right: 2px;
    width: 8px;
    height: 3px;
    content: "";
    position: absolute;
    border-left: 2px solid;
    border-bottom: 2px solid;
    margin: auto;
    transform: rotate(-45deg) translateZ(0);
    transform-origin: center center;
    transition: top .5s cubic-bezier(.19, 1, .22, 1);
    border-color: #387ed1
}

.su-checkbox-group.indeterminate .su-checkbox-tick {
    transform: none;
    border-left: none
}

.su-switch-group .su-switch[type=checkbox] {
    display: none
}

.su-switch-group .su-switch-label {
    color: #9b9b9b
}

.su-switch-group .su-switch-control {
    background: #9b9b9b;
    position: relative;
    text-indent: -9999px;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    width: 40px;
    height: 20px;
    border-radius: 100px
}

.su-switch-group .su-switch-control:after {
    background: #fff;
    content: "";
    position: absolute;
    top: 2.2px;
    left: 3px;
    width: 15px;
    height: 15px;
    transition: .2s;
    border-radius: 90px
}

.su-switch-group .su-switch:checked+.su-switch-control {
    background: #0059c1
}

.su-switch-group .su-switch:checked+.su-switch-control:after {
    left: calc(100% - 3px);
    transform: translateX(-100%)
}

.su-switch-group .su-switch:disabled+.su-switch-control {
    cursor: not-allowed
}

.su-switch-group .su-switch-control:active:after {
    width: 14px
}

.su-toast-groups .su-toast-group {
    position: fixed;
    z-index: 99999;
    pointer-events: none
}

.su-toast-groups .su-toast-group div:first-child {
    position: relative
}

.su-toast-groups a {
    color: #0059c1;
    text-decoration: none
}

.su-toast-groups a:hover {
    opacity: .7
}

.su-toast-groups .su-toast-top-left {
    top: 75px;
    left: 20px
}

.su-toast-groups .su-toast-top-right {
    top: 75px;
    right: 20px
}

.su-toast-groups .su-toast-top-center {
    top: 75px;
    left: 50%;
    transform: translate(-50%)
}

.su-toast-groups .su-toast-bottom-left {
    bottom: 75px;
    left: 20px
}

.su-toast-groups .su-toast-bottom-right {
    bottom: 75px;
    right: 20px
}

.su-toast-groups .su-toast-bottom-center {
    bottom: 75px;
    left: 50%;
    transform: translate(-50%)
}

.su-toast-groups .su-toast-item {
    display: flex;
    box-sizing: border-box;
    max-width: 400px;
    min-width: 300px;
    pointer-events: all;
    position: relative;
    margin: 0 auto 10px auto;
    padding: 10px 30px 15px 15px;
    transition: opacity .2s, transform .2s;
    background: #fff;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, .1);
    border-left: 20px solid #eee;
    border-radius: 5px
}

.su-toast-groups .su-toast-item.info {
    color: #387ed1;
    border-left-color: #387ed1
}

.su-toast-groups .su-toast-item.success {
    color: #4caf50;
    border-left-color: #4caf50
}

.su-toast-groups .su-toast-item.warning {
    color: #ffbf00;
    border-left-color: #ffbf00
}

.su-toast-groups .su-toast-item.error {
    color: #f6461a;
    border-left-color: #f6461a
}

.su-toast-groups .su-toast-item .message {
    margin: 5px 0;
    color: #444
}

.su-toast-groups .toast-list-enter {
    opacity: 0;
    transform: translateY(-30px)
}

.su-toast-groups .toast-list-leave-active {
    display: none
}

.su-toast-groups .su-toast-icon {
    display: inline-block;
    vertical-align: middle;
    margin-right: 5px;
    font-size: 1.3rem;
    line-height: 1.5
}

.su-toast-groups .su-toast-item.info .su-toast-icon {
    color: #0089d0
}

.su-toast-groups .su-toast-item.success .su-toast-icon {
    color: #4caf50
}

.su-toast-groups .su-toast-item.warning .su-toast-icon {
    color: #ffbf00
}

.su-toast-groups .su-toast-item.error .su-toast-icon {
    color: #f6461a
}

.su-toast-groups .close {
    position: absolute;
    right: 10px;
    top: 12px;
    cursor: pointer
}

.dot-spinner,
.su-loader {
    display: inline-block
}

.dot-spinner {
    margin-left: 5px
}

.dot-spinner i {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9b9b9b;
    vertical-align: middle
}

button .dot-spinner {
    margin: 0;
    padding: 0
}

button .dot-spinner i {
    background: #fff
}

.dot-spinner i:first-child {
    transform: translate(-5px);
    -webkit-animation: dot-spinner-ani2 .5s linear infinite;
    animation: dot-spinner-ani2 .5s linear infinite;
    opacity: 0
}

.dot-spinner i:nth-child(2),
.dot-spinner i:nth-child(3) {
    -webkit-animation: dot-spinner-ani3 .5s linear infinite;
    animation: dot-spinner-ani3 .5s linear infinite
}

.dot-spinner i:last-child {
    -webkit-animation: dot-spinner-ani1 .5s linear infinite;
    animation: dot-spinner-ani1 .5s linear infinite
}

@-webkit-keyframes dot-spinner-ani1 {
    to {
        transform: translate(10px);
        opacity: 0
    }
}

@keyframes dot-spinner-ani1 {
    to {
        transform: translate(10px);
        opacity: 0
    }
}

@-webkit-keyframes dot-spinner-ani2 {
    to {
        transform: translate(5px);
        opacity: 1
    }
}

@keyframes dot-spinner-ani2 {
    to {
        transform: translate(5px);
        opacity: 1
    }
}

@-webkit-keyframes dot-spinner-ani3 {
    to {
        transform: translate(5px)
    }
}

@keyframes dot-spinner-ani3 {
    to {
        transform: translate(5px)
    }
}

.su-select {
    position: relative
}

.su-select .icon {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 10px;
    pointer-events: none
}

.su-select select {
    width: 100%;
    padding: 3px 30px 3px 8px;
    background: #fff;
    border-radius: 2px;
    border-color: #e3e3e3;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    outline: none
}

.su-select select:disabled {
    background-color: #fff !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0h1L0 6V5zm1 5v1H5z' fill='%23ddd' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
    color: #666 !important;
    cursor: not-allowed;
    border-color: transparent !important;
    background-repeat: repeat !important;
    background-size: inherit !important
}

button[data-balloon] {
    overflow: visible
}

[data-balloon]:after,
[data-balloon]:before,
[data-balloon]:hover:before {
    /* font-family: Inter, sans-serif; */
    font-weight: 600
}

[data-balloon] {
    position: relative;
    opacity: 1 !important
}

[data-balloon]:after {
    background: rgba(17, 17, 17, .9);
    border-radius: 4px;
    color: #fff;
    content: attr(data-balloon);
    font-size: 12px;
    padding: .5em 1em;
    white-space: nowrap
}

[data-balloon]:after,
[data-balloon]:before {
    filter: alpha(opactiy=0);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    pointer-events: none;
    transition: all .18s ease-out .18s;
    transition-delay: 0ms;
    position: absolute;
    z-index: 10
}

[data-balloon]:before {
    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");
    background-size: 100% auto;
    width: 18px;
    height: 6px;
    content: ""
}

[data-balloon]:hover:after,
[data-balloon]:hover:before,
[data-balloon][data-balloon-visible]:after,
[data-balloon][data-balloon-visible]:before {
    filter: alpha(opactiy=100);
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    pointer-events: none
}

[data-balloon].font-awesome:after {
    /* font-family: FontAwesome */
}

[data-balloon][data-balloon-break]:after {
    white-space: pre
}

[data-balloon][data-balloon-pos=up]:after {
    bottom: 100%;
    left: 50%;
    margin-bottom: 11px;
    transform: translate(-50%, 10px);
    transform-origin: top
}

[data-balloon][data-balloon-pos=up]:before {
    bottom: 100%;
    left: 50%;
    margin-bottom: 5px;
    transform: translate(-50%, 10px);
    transform-origin: top
}

[data-balloon][data-balloon-pos=up]:hover:after,
[data-balloon][data-balloon-pos=up]:hover:before,
[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=up][data-balloon-visible]:before {
    transform: translate(-50%)
}

[data-balloon][data-balloon-pos=down]:after {
    left: 50%;
    margin-top: 11px;
    top: 100%;
    transform: translate(-50%, -10px)
}

[data-balloon][data-balloon-pos=down]:before {
    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");
    background-size: 100% auto;
    width: 18px;
    height: 6px;
    left: 50%;
    margin-top: 5px;
    top: 100%;
    transform: translate(-50%, -10px)
}

[data-balloon][data-balloon-pos=down]:hover:after,
[data-balloon][data-balloon-pos=down]:hover:before,
[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=down][data-balloon-visible]:before {
    transform: translate(-50%)
}

[data-balloon][data-balloon-pos=left]:after {
    margin-right: 11px;
    right: 100%;
    top: 50%;
    transform: translate(10px, -50%)
}

[data-balloon][data-balloon-pos=left]:before {
    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M0 33.342V1.338c0 6 12.002 11.627 12.002 16.002C12.002 21.715 0 27.406 0 33.342z'/%3E%3C/svg%3E");
    background-size: 100% auto;
    width: 6px;
    height: 18px;
    margin-right: 5px;
    right: 100%;
    top: 50%;
    transform: translate(10px, -50%)
}

[data-balloon][data-balloon-pos=left]:hover:after,
[data-balloon][data-balloon-pos=left]:hover:before,
[data-balloon][data-balloon-pos=left][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=left][data-balloon-visible]:before {
    transform: translateY(-50%)
}

[data-balloon][data-balloon-pos=right]:after {
    left: 100%;
    margin-left: 11px;
    top: 50%;
    transform: translate(-10px, -50%)
}

[data-balloon][data-balloon-pos=right]:before {
    background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M12 2.658v32.004c0-6-12.002-11.627-12.002-16.002C-.002 14.285 12 8.594 12 2.658z'/%3E%3C/svg%3E");
    background-size: 100% auto;
    width: 6px;
    height: 18px;
    left: 100%;
    margin-left: 5px;
    top: 50%;
    transform: translate(-10px, -50%)
}

[data-balloon][data-balloon-pos=right]:hover:after,
[data-balloon][data-balloon-pos=right]:hover:before,
[data-balloon][data-balloon-pos=right][data-balloon-visible]:after,
[data-balloon][data-balloon-pos=right][data-balloon-visible]:before {
    transform: translateY(-50%)
}

[data-balloon][data-balloon-length=small]:after {
    white-space: normal;
    width: 80px;
    word-wrap: break-word
}

[data-balloon][data-balloon-length=medium]:after {
    white-space: normal;
    width: 150px;
    word-wrap: break-word
}

[data-balloon][data-balloon-length=large]:after {
    white-space: normal;
    width: 260px;
    word-wrap: break-word
}

[data-balloon][data-balloon-length=fit]:after {
    white-space: normal;
    width: 100%;
    word-wrap: break-word
}

.el-loading-mask {
    background-color: transparent
}

.loader-small .el-loading-spinner .circular {
    height: 25px;
    width: 25px
}

.loader-tiny .el-loading-spinner .circular {
    height: 15px;
    width: 15px
}

.loader-block .el-loading-mask,
.loader-block .el-loading-spinner {
    position: static
}

.loader-block .el-loading-spinner {
    margin-top: 0;
    top: 0
}

.loader-block.loader-inline .el-loading-mask,
.loader-block.loader-inline .el-loading-spinner {
    width: auto;
    display: inline-block
}

.el-input input[type=email],
.el-input input[type=number],
.el-input input[type=password],
.el-input input[type=search],
.el-input input[type=tel],
.el-input input[type=text],
.el-input input[type=url] {
    border: none;
    border-bottom: 1px solid #e3e3e3;
    border-radius: 0
}

.el-input.is-disabled .el-input__inner {
    background-color: rgba(238, 241, 246, .3) !important
}

.el-select .el-input input[type=text] {
    border: 1px solid #9b9b9b;
    border-radius: 2px
}

.el-select .el-input .el-input__icon {
    color: #9b9b9b
}

.el-notification {
    left: 50%;
    margin-left: -210px !important;
    width: 420px !important;
    padding: 10px 15px !important
}

.el-notification .el-notification__content {
    text-align: left;
    margin: 0
}

.el-notification .el-notification__icon {
    width: auto;
    height: auto
}

.el-notification .el-notification__group.is-with-icon {
    margin-left: 25px
}

.el-notification .el-notification__title {
    display: none
}

.el-notification .el-notification__closeBtn {
    font-size: 10px;
    top: 15px;
    right: 15px
}

.btn,
.btn-blue,
.btn-green,
.btn-grey,
.btn-reset {
    padding: 7px 14px;
    border-radius: 2px;
    border: 1px solid #9b9b9b;
    margin: 0 3px
}

.btn {
    color: #fff;
    background: #9b9b9b;
    border-color: #9b9b9b
}

.btn:hover {
    opacity: .8
}

.btn:focus {
    outline: none
}

.section button[disabled] {
    background: #9b9b9b;
    border: 1px solid #9b9b9b
}

.section button[disabled]:hover {
    cursor: not-allowed;
    opacity: 1 !important
}

.btn-green {
    color: #fff;
    background: #4caf50;
    border-color: #4caf50
}

.btn-green.btn-outline {
    color: #4caf50;
    background: #fff
}

.btn-green.btn-outline:hover {
    opacity: 1;
    color: #fff;
    background: #4caf50
}

.btn-blue {
    color: #fff;
    background: #0059c1;
    border-color: #0059c1
}

.btn-blue.btn-outline {
    color: #0059c1;
    background: #fff
}

.btn-blue.btn-outline:hover {
    opacity: .9;
    color: #fff;
    background: #0059c1
}

.btn-grey,
.btn-grey.no-hover:hover {
    background: #9b9b9b;
    color: #fff;
    border-color: #9b9b9b
}

.btn-grey.btn-outline {
    background: #fff;
    color: #666;
    border-color: #9b9b9b
}

.btn-grey.btn-outline:hover {
    background: #9b9b9b;
    color: #fff;
    border-color: #9b9b9b
}

.btn-delete {
    background: #b73737;
    border: #b73737;
    color: #fff
}

.btn-delete:hover {
    opacity: .8
}

.btn-small {
    padding: 1px 7px
}

.btn-text {
    border: none;
    background: transparent;
    color: #9b9b9b
}

.btn-red {
    border: none;
    border-radius: 2px;
    background: #f6461a;
    color: #fff
}

:root {
    --litepicker-is-today-color: #0059c1;
    --litepicker-is-start-color-bg: #0059c1;
    --litepicker-is-end-color-bg: #0059c1;
    --litepicker-day-width: 40px
}

#outer_app {
    background: linear-gradient(#fff, #f9fbff, #fff);
    min-height: 100vh;
    position: relative;
    padding-bottom: 110px;
    box-sizing: border-box
}

#outer_app .section {
    margin: 0
}

#outer_app.account-closure {
    margin-top: 100px
}

#outer_app.account-closure .header {
    margin-bottom: 20px
}

#outer_app.account-closure .header img {
    display: block;
    margin: auto;
    width: 100px
}

#outer_app.account-closure .page-content p {
    margin-bottom: 25px
}

#outer_app.account-closure .page-content a {
    color: #fff;
    text-transform: uppercase;
    text-decoration: none
}

#outer_app.account-closure .page-content a:hover {
    color: #fff
}

#outer_app .align-middle {
    display: flex;
    align-items: center
}

#outer_app .console-landing {
    padding: 0 20px
}

#outer_app .screenshot {
    width: 100%;
    border: 1px solid #eee;
    border-radius: 8px;
    position: relative;
    left: -25px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    box-shadow: 0 2px 15px #ddd
}

#outer_app .logo {
    width: 150px;
    margin: 5px 0 15px 0
}

#outer_app .zerodha-logo {
    height: 11px
}

#outer_app .login-head {
    margin-top: 0;
    line-height: 1.6
}

#outer_app .text-light-grey {
    color: #9b9b9b
}

#outer_app .btn-blue {
    font-size: .875rem;
    text-transform: uppercase;
    font-weight: 600;
    padding: 10px 25px;
    margin-left: 0;
    margin-top: 15px
}

#outer_app .btn-blue:hover {
    opacity: .9
}

#outer_app .btn-blue:focus {
    outline: 0
}

#outer_app a {
    text-decoration: none;
    color: #0059c1
}

#outer_app a:hover {
    color: #444
}

#outer_app .console-down {
    padding: 0 20px;
    position: relative;
    top: 15vh
}

#outer_app .console-down img {
    width: auto;
    height: 175px;
    max-width: 100%
}

#outer_app .console-down h2 {
    margin: 25px 0 20px 0
}

#outer_app .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #e1e1e1;
    font-size: .75rem
}

#outer_app .footer .text-light-grey {
    color: #9b9b9b
}

#outer_app .footer .footer-section {
    max-width: 1200px;
    margin: auto
}

#outer_app .footer .footer-section .footer-container {
    padding: 25px 50px
}

#outer_app .footer .footer-section .footer-container p {
    margin: 0;
    margin-top: 5px;
    font-size: .75rem;
    line-height: 1.65
}

#outer_app .footer .footer-section .row .six:first-child {
    display: flex;
    align-items: center
}

#outer_app .footer .footer-section .row .six:first-child img {
    margin-right: 5px;
    height: 11px;
    position: relative;
    top: 1px
}

#outer_app .footer .footer-section .row .six:last-child a:hover {
    color: #0059c1 !important
}

@media only screen and (max-width:550px) {
    #outer_app .wrapper {
        padding-bottom: 250px
    }
}

@media only screen and (max-width:800px) {
    #outer_app .columns {
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 15px
    }

    #outer_app .align-middle {
        display: block;
        text-align: center
    }

    #outer_app .screenshot {
        display: none
    }
}

.su-toast-groups .su-toast-item .message {
    line-height: 1.3 !important
}

.app {
    position: relative
}

.app .text-center {
    text-align: center !important
}

.app .show {
    display: block
}

.app .nomargin {
    margin: 0 !important
}

.app .hideElement {
    display: none !important
}

.app .float-right {
    float: right
}

.app .inline {
    display: inline-block
}

.app a::-moz-focus-inner,
.app a:focus {
    border: 0;
    outline: none
}

.app body.app-wrapper,
.app html {
    height: 100%
}

.app body.app-wrapper {
    margin: 0;
    overflow-y: scroll
}

.app.offline {
    filter: grayscale(100%)
}

.app button:hover {
    opacity: .9
}

.app .error-sign {
    color: #f35631
}

.app .clickable:hover {
    cursor: pointer
}

.app .notice-new {
    color: #9b9b9b;
    margin-top: 5px;
    font-size: 12px
}

.app h1 .notice-new {
    margin-left: 40px;
    line-height: 1.4
}

.app h1 .notice-new.list ul {
    padding-left: 20px
}

.app table .time {
    color: #9b9b9b
}

.app table .blur {
    opacity: .2
}

.app table .hide-row {
    display: none
}

.app #status {
    margin: 0
}

.app .mobile-agg {
    padding: 25px 10px 15px 10px;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .1);
    background: #fff;
    position: relative;
    top: -107px;
    box-sizing: border-box;
    margin: auto
}

.app .mobile-agg label {
    font-size: .875rem;
    color: #9b9b9b
}

.app .mobile-agg label.big-label {
    font-size: 1.45em !important
}

.app .mobile-agg h1 {
    margin-top: 2px;
    font-size: 1.45em
}

.app .mobile-agg .pos {
    color: #10b983
}

.app .mobile-agg .neg {
    color: #f35631
}

.app .mobile-agg .row {
    display: flex;
    align-items: center;
    padding: 0 10px
}

.app .mobile-agg .row .columns {
    margin-bottom: 0
}

.app .mobile-agg .row .columns p {
    font-size: 14px
}

.app .mobile-agg .sub-agg .row {
    margin-bottom: 5px;
    padding: 1px 10px
}

.app .mobile-agg .sub-agg .row:nth-child(odd) {
    background: #fafafb
}

.app .mobile-agg .sub-agg .row .four {
    flex: 4
}

.app .mobile-agg .sub-agg .row .six {
    flex: 6
}

.app .mobile-agg .sub-agg .row .eight {
    flex: 8
}

.app .mobile-agg .sub-agg p {
    margin: 0
}

.app .share-modal .modal-container {
    width: 430px
}

.app .share-modal .modal-body {
    margin: 0
}

.app .share-modal .modal-body h1 {
    margin-top: 0
}

.app .share-modal #preview_share {
    font-size: 20px;
    top: 0
}

.app .share-modal #preview_share:hover {
    cursor: pointer
}

.app .analyse-tags-link {
    margin-bottom: 8px;
    margin-top: 25px
}

.app .search-helper {
    font-size: 18px;
    line-height: 30px
}

.app .search-helper .search-tags {
    color: #0059c1
}

.app .console-footer-note {
    position: absolute;
    bottom: 175px;
    font-size: .875rem;
    color: #9b9b9b
}

.app .shake-box {
    -webkit-animation: shake .4s cubic-bezier(.36, .07, .19, .97) both;
    animation: shake .4s cubic-bezier(.36, .07, .19, .97) both;
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    perspective: 1000px
}

.app .multiselect,
.app .multiselect__input,
.app .multiselect__single {
    font-size: 1rem
}

.app .multiselect {
    max-height: 38px;
    cursor: pointer
}

.app .multiselect__tags {
    min-height: 38px;
    border: none;
    border-bottom: 1px solid #e1e1e1;
    border-radius: 0
}

.app .multiselect__tag {
    margin-bottom: 0;
    background: #0059c1;
    border-radius: 2px
}

.app .multiselect__tag-icon {
    border-radius: 0;
    transition: none
}

.app .multiselect__tag-icon:focus,
.app .multiselect__tag-icon:hover {
    background: #3f91f1
}

.app .multiselect__tag-icon:after {
    color: #fff
}

.app .multiselect__content-wrapper {
    z-index: 10
}

.app .multiselect--above .multiselect__content-wrapper {
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
    border-top: 1px solid #e1e1e1
}

.app .multiselect__option--highlight {
    background: #0059c1
}

.app .multiselect__option {
    min-height: 38px
}

.app .multiselect__select:before {
    top: 62%;
    color: #444;
    border-width: 6px 3px 0;
    border-color: #444 transparent transparent
}

.app .multiselect__select {
    width: 20px;
    padding: 4px 5px
}

.app .console-note {
    background: #fff8dc;
    border: 1px solid #e0dcbf;
    padding: 15px;
    border-radius: 2px
}

.app .notice h3,
.app .notice h4 {
    margin-bottom: 10px
}

.app .notice ul {
    margin: 0;
    padding: 0;
    list-style: none
}

.app .notice ul li {
    margin-bottom: 5px
}

.app .notice ul li:last-child {
    margin-bottom: 0
}

.app .text-box {
    padding: 10px 20px;
    margin-bottom: 30px;
    border-radius: 2px;
    color: rgba(0, 0, 0, .65);
    border-left: 5px solid #f4f4f4
}

.app .text-box.green {
    background-color: #ebf8f2;
    border-color: #ebf8f2
}

.app .text-box.blue {
    background-color: #ecf6fd;
    border-color: #d2eafb
}

.app .text-box.red {
    background-color: #fef0ef;
    border-color: #fcdbd9
}

.app .text-box.yellow {
    background-color: #fffaeb;
    border-color: #fff3cf
}

.app .modal-mask {
    background: hsla(0, 0%, 100%, .7);
    z-index: 99999
}

.app .modal-container {
    border-radius: 0;
    box-shadow: 0 0 2px 0 rgba(0, 0, 0, .2), 0 4px 10px 0 rgba(0, 0, 0, .05);
    border: none
}

.app .modal-container .pending-tag {
    margin-left: 10px;
    top: 0
}

.app .modal-container .paginate-info {
    top: 0
}

.app .modal-container div .breakdown-meta {
    display: inline-block;
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: .9rem
}

.app .modal-container div .breakdown-meta:first-child {
    margin-left: 0
}

.app .modal-container div .breakdown-meta span:first-child {
    margin-right: 5px
}

.app .modal-container .tagger .custom-tag.pending .ti-icon-close {
    display: none
}

.app .modal-container td.tagger {
    padding-top: 7px !important
}

.app .close-modal {
    position: absolute;
    right: 15px;
    top: 10px;
    font-size: 1.3rem;
    cursor: pointer
}

.app .close-modal img {
    height: 20px
}

.app .table-section {
    position: relative
}

.app .search-table {
    display: inline-block;
    position: absolute;
    width: 95px;
    margin-bottom: 3px;
    margin-right: 5px;
    right: 100px;
    top: -5px;
    transition: width .2s ease-in-out
}

.app .search-table input:focus {
    outline: none
}

.app .search-table input:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #444
}

.app .search-table.expand {
    width: 185px
}

.app .search-table .su-input-group {
    margin-bottom: 3px
}

.app .search-table .icon-search {
    position: absolute;
    left: 5px;
    top: 3px;
    z-index: 1;
    color: #9b9b9b
}

.app .search-table .clear {
    display: none;
    position: absolute;
    z-index: 1;
    background: #eee;
    border-radius: 50%;
    font-size: 8px;
    width: 12px;
    height: 12px;
    top: 10px;
    right: 10px;
    pointer-events: all
}

.app .search-table .clear:before {
    bottom: 6px;
    left: .5px;
    position: relative
}

.app .search-table .clear:hover {
    cursor: pointer
}

.app .search-table label {
    display: none
}

.app .search-table input {
    min-height: 30px;
    margin-bottom: 0;
    box-sizing: border-box;
    max-width: 100% !important;
    padding-left: 30px !important;
    padding-right: 20px !important;
    font-size: 12px !important;
    color: #9b9b9b;
    border: 1px solid #e1e1e1
}

.app .filter-component .su-input-label {
    z-index: 999;
    line-height: 1 !important;
    top: -6px
}

.app .margin-label {
    margin-top: 20px;
    display: block;
    margin-bottom: 10px
}

.app .filter-field label {
    line-height: 1;
    top: -6px
}

.app .filter-field .clear {
    position: absolute;
    border-radius: 50%;
    font-size: 12px;
    right: 0;
    z-index: 1;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background: #eee;
    left: auto;
    width: 22px;
    height: 22px;
    border-radius: 50% !important;
    padding: 0 !important
}

.app .filter-field .clear:before {
    position: relative;
    left: 2.5px;
    top: 0
}

.app .table-border {
    border-right: 1px solid #eee
}

.app .table-focus {
    background: #fafafb
}

.app .header-hr {
    margin-bottom: 20px
}

.app .fetch-data {
    display: inline-block;
    width: 60px;
    margin-bottom: 3px;
    padding-left: 10px
}

.app .refer-link-img {
    height: 12px;
    width: 16.5px;
    position: relative;
    top: 1px;
    margin-left: 1px;
    margin-right: 10px
}

.app .last-updated {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 3px
}

.app .last-updated img {
    width: 12px;
    position: relative;
    top: 2px
}

.app .paginate-info {
    padding-right: 5px;
    padding-left: 10px;
    display: inline-block;
    margin-bottom: 3px;
    margin-top: 0
}

.app .paginate-data {
    height: 23px;
    margin-top: 10px
}

.app .paginate-data .su-loader {
    right: 15px;
    position: relative
}

.app .table-download {
    display: inline-block;
    float: right;
    padding-right: 10px;
    color: #0059c1;
    margin-bottom: 7px
}

.app .table-download:hover {
    opacity: .8;
    cursor: pointer
}

.app .table-sort {
    display: inline-block;
    float: right
}

.app .table-sort .sort-container {
    padding: 20px;
    box-sizing: border-box;
    padding-bottom: 30px
}

.app .vue-tags-input {
    max-width: 100%;
    background: transparent
}

.app .vue-tags-input:not(.main-input) .ti-tags .ti-tag.system-tag .ti-actions {
    display: none
}

.app .vue-tags-input .edit-tag-icon {
    display: none;
    font-size: 14px;
    position: absolute;
    left: -5px;
    top: 0;
    background: hsla(0, 0%, 100%, .6);
    border-radius: 3px
}

.app .vue-tags-input .ti-content:hover .edit-tag-icon {
    display: inline
}

.app .vue-tags-input .auto-label {
    width: 60px;
    border-radius: 3px;
    float: right;
    font-size: 12px;
    text-transform: capitalize;
    text-align: center
}

.app .vue-tags-input .auto-label.stock {
    background: rgba(249, 188, 50, .2);
    color: #e4a81f
}

.app .vue-tags-input .auto-label.type {
    background: rgba(194, 112, 200, .2);
    color: #c270c8
}

.app .vue-tags-input .auto-label.sector {
    background: rgba(0, 84, 198, .2);
    color: #0059c1
}

.app .vue-tags-input .auto-label.others {
    background: rgba(74, 74, 74, .2);
    color: #222
}

.app .vue-tags-input .auto-label.custom,
.app .vue-tags-input .auto-label.system {
    color: #008f7a;
    background: rgba(0, 143, 122, .2)
}

.app .vue-tags-input .ti-selected-item {
    background: #f4f4f4
}

.app .vue-tags-input .ti-selected-item .auto-name {
    color: #444
}

.app .vue-tags-input .auto-name {
    font-size: 12px
}

.app .vue-tags-input .ti-item>div {
    padding: 6px 15px
}

.app .vue-tags-input .ti-new-tag-input-wrapper {
    padding: 0;
    margin: 0;
    font-size: 1rem
}

.app .vue-tags-input .ti-input {
    border: none;
    padding: 0
}

.app .vue-tags-input .ti-autocomplete {
    border: 1px solid #e1e1e1;
    border-bottom-left-radius: 3px;
    border-bottom-right-radius: 3px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
    max-height: 365px;
    overflow: auto
}

.app .vue-tags-input .ti-tags {
    border: 1px solid #e3e3e3;
    border-radius: 3px;
    padding-left: 5px;
    background: #fff
}

.app .vue-tags-input .ti-tags .ti-tag {
    font-size: .75rem;
    margin: 8px 5px
}

.app .vue-tags-input .ti-tags .ti-tag.sector-tag {
    background: rgba(0, 84, 198, .2);
    color: #0059c1
}

.app .vue-tags-input .ti-tags .ti-tag.stock-tag {
    background: rgba(255, 196, 61, .2);
    color: #ca9a2d
}

.app .vue-tags-input .ti-tags .ti-tag.others-tag {
    background: rgba(74, 74, 74, .2);
    color: #222
}

.app .vue-tags-input .ti-tags .ti-tag.type-tag {
    background: rgba(194, 112, 200, .2);
    color: #c270c8
}

.app .vue-tags-input .ti-tags .ti-tag.system-tag {
    color: #666;
    background: hsla(0, 0%, 40%, .2);
    padding-left: 8px;
    padding-right: 8px
}

.app .vue-tags-input .ti-tags .ti-tag.p1 {
    color: #039be5;
    background: rgba(3, 155, 229, .1)
}

.app .vue-tags-input .ti-tags .ti-tag.p2 {
    color: #0b8043;
    background: rgba(11, 128, 67, .1)
}

.app .vue-tags-input .ti-tags .ti-tag.p3 {
    color: #3f51b5;
    background: rgba(63, 81, 181, .1)
}

.app .vue-tags-input .ti-tags .ti-tag.p4 {
    color: #f4511e;
    background: rgba(244, 81, 30, .1)
}

.app .vue-tags-input .ti-tags .ti-tag.p5 {
    color: #795548;
    background: rgba(121, 85, 72, .1)
}

.app .vue-tags-input .ti-tags .ti-tag.p6 {
    color: #7cb342;
    background: rgba(124, 179, 66, .1)
}

.app .vue-tags-input .ti-tags .ti-tag.p7 {
    color: #f09300;
    background: rgba(240, 147, 0, .1)
}

.app .vue-tags-input .ti-tags .ti-tag.p8 {
    color: #8e24aa;
    background: rgba(142, 36, 170, .1)
}

.app .vue-tags-input .ti-tags .ti-tag.p9 {
    color: #616161;
    background: rgba(97, 97, 97, .1)
}

.app .vue-tags-input .ti-tags .ti-tag.p10 {
    color: #ffcd56;
    background: rgba(255, 205, 86, .1)
}

.app .vue-tags-input input {
    padding: 10px 15px;
    line-height: 1.25rem
}

.app .pending-tag {
    font-size: 11px;
    color: #9b9b9b;
    position: relative;
    top: -2px;
    display: inline-block;
    line-height: 12px;
    margin-left: 2px
}

.app .pending-tag:hover {
    cursor: default
}

.app .pending-tag img {
    height: 10px;
    position: relative;
    top: 1px
}

.app .new-tags .added-tags,
.app .new-tags .pending-tags {
    display: inline-block
}

.app .new-tags .added-tags:hover,
.app .new-tags .pending-tags:hover {
    cursor: default
}

.app .new-tags .added-tags:empty,
.app .new-tags .pending-tags:empty {
    display: none
}

.app .new-tags span:not(.icon) {
    padding: 4px 10px;
    display: inline-block;
    margin-right: 5px;
    border-radius: 2px;
    background: rgba(68, 68, 68, .1);
    line-height: 14px;
    color: #444;
    font-size: .9rem
}

.app #mainText {
    margin-bottom: 0
}

.app .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #e1e1e1;
    font-size: .75rem
}

.app .footer .footer-section {
    max-width: 1200px;
    margin: auto
}

.app .footer .footer-section .footer-container {
    padding: 25px 50px
}

.app .footer .footer-section .footer-container p {
    margin: 0;
    margin-top: 5px;
    font-size: .75rem;
    line-height: 1.65
}

.app .footer .footer-section .row .six:first-child {
    display: flex;
    align-items: center
}

.app .footer .footer-section .row .six:first-child img {
    margin-right: 5px;
    height: 11px;
    position: relative;
    top: 1px
}

.app .footer .footer-section .row .six:last-child a:hover {
    color: #0059c1 !important
}

.app .footer-zerodha-capital {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 1px solid #e1e1e1
}

.app .footer-zerodha-capital .footer-section {
    max-width: 1200px;
    margin: auto
}

.app .footer-zerodha-capital .footer-section .footer-container {
    padding: 25px 50px
}

.app .footer-zerodha-capital .footer-section .footer-container .row ul.list-style {
    list-style-type: none;
    margin: 0;
    padding: 0
}

.app .footer-zerodha-capital .footer-section .footer-container .row ul.list-style li {
    margin-bottom: 5px;
    line-height: 2
}

.app .footer-zerodha-capital .footer-section .footer-container .row ul.list-style li a {
    color: #666
}

.app .footer-zerodha-capital .footer-section .footer-container .row ul.list-style li a:hover {
    color: #0059c1
}

.app .footer-zerodha-capital .footer-section .footer-container p {
    margin-top: 0;
    margin-bottom: 0
}

.app .wrapper {
    padding: 0;
    width: 100%;
    margin: 0 auto;
    max-width: 1200px
}

.app .hidden-content {
    display: none
}

.app hr.no-bottom {
    margin-bottom: 0
}

.app span.down,
.app span.up {
    font-size: 1.25rem !important;
    position: relative;
    bottom: 4px;
    right: 4px
}

.app .mx-calendar-content .cell.actived {
    background-color: #0059c1
}

.app .mx-calendar {
    background: #fff
}

.app .mx-calendar .mx-calendar-panel-date .text-center {
    background: #0059c1
}

.app .vdp-datepicker__calendar {
    border: 1px solid #eee;
    box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .1);
    top: 36px
}

.app .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,
.app .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,
.app .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {
    background: #4184f3;
    color: #fff;
    border: 1px solid transparent
}

.app .vdp-datepicker__calendar header .next:not(.disabled):hover,
.app .vdp-datepicker__calendar header .prev:not(.disabled):hover,
.app .vdp-datepicker__calendar header .up:not(.disabled):hover {
    color: #fff;
    background: #4184f3
}

.app .vdp-datepicker__calendar .cell.selected,
.app .vdp-datepicker__calendar .cell.selected.highlighted,
.app .vdp-datepicker__calendar .cell.selected:hover {
    background: #4184f3;
    color: #fff;
    border: 1px solid transparent
}

.app .vdp-datepicker__calendar header .prev:hover:after {
    border-right: 10px solid #fff
}

.app .vdp-datepicker__calendar header .next:hover:after {
    border-left: 10px solid #fff
}

.app .mx-shortcuts-wrapper .mx-shortcuts:after {
    content: ""
}

.app .mx-shortcuts-wrapper .mx-shortcuts:first-child:after,
.app .mx-shortcuts-wrapper .mx-shortcuts:nth-child(2):after,
.app .mx-shortcuts-wrapper .mx-shortcuts:nth-child(3):after {
    content: "|";
    margin: 0 10px;
    color: #48576a
}

.app .mx-shortcuts-wrapper button {
    padding-right: 0 !important
}

.app .error-comp .state-process {
    margin-top: 5vh
}

.app .state-process {
    margin: auto;
    text-align: center;
    margin-top: 5vh
}

.app .middle-align {
    vertical-align: middle
}

.app .scroll-discrepant {
    color: #f6461a
}

.app .container {
    display: flex;
    min-height: 100vh;
    padding-top: 60px;
    background: #fff
}

.app .container .container-left {
    flex: 0 0 400px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, .1)
}

.app .container .container-left .marketwatch-wrap {
    position: fixed;
    height: 100%;
    width: 400px;
    z-index: 1;
    overflow-y: auto
}

.app .container .container-right {
    flex: 1 1;
    max-width: 1200px
}

.app .header {
    height: 60px;
    min-width: 320px;
    box-sizing: border-box;
    z-index: 9999;
    width: 100%;
    position: fixed;
    background-color: #fff;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .1)
}

.app .header .wrapper {
    display: flex;
    box-shadow: none
}

.app .header .header-left {
    flex: 0 0 401px
}

.app .header .header-left .pinned-instruments {
    display: flex;
    align-items: center;
    font-weight: 600;
    padding: 0 20px;
    height: 60px;
    border-right: 1px solid #eee
}

.app .header .header-left .pinned-instruments .instrument-widget {
    flex: 1;
    display: inline-block;
    align-items: center
}

.app .header .header-left .pinned-instruments .instrument-widget .tradingsymbol {
    margin-right: 5px
}

.app .header .header-left .pinned-instruments .instrument-widget .tradingsymbol.link-chart {
    cursor: pointer
}

.app .header .header-left .pinned-instruments .instrument-widget .last-price {
    margin-right: 5px
}

.app .header .header-left .pinned-instruments .instrument-widget:last-child {
    margin-right: 0
}

.app .header .header-left .pinned-instruments .instrument-widget .up {
    color: #4caf50
}

.app .header .header-left .pinned-instruments .instrument-widget .down {
    color: #df514c
}

.app .header .header-left .pinned-instruments .instrument-widget .wrap {
    display: inline-block
}

.app .header .header-right {
    flex: 1 1;
    display: flex;
    position: relative
}

.app .header .app-nav a,
.app .header .right-nav a {
    margin: 0 10px;
    padding: 0 5px;
    font-size: .875rem;
    font-weight: 400;
    line-height: 25px;
    display: inline-block;
    text-decoration: none;
    color: #4a4a4a;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.app .header .app-nav a.router-link-active,
.app .header .app-nav a:hover,
.app .header .right-nav a.router-link-active,
.app .header .right-nav a:hover {
    cursor: pointer;
    color: #0059c1
}

.app .header .app-nav a.router-link-active,
.app .header .right-nav a.router-link-active {
    border-bottom: 2px solid #0059c1;
    height: 56px
}

.app .header .app-nav a.router-link-active.no-border,
.app .header .right-nav a.router-link-active.no-border {
    border-bottom: none
}

.app .header .dropdown-nav li a {
    margin: 0
}

.app .header .dropdown-nav a.router-link-active {
    height: auto !important;
    border-bottom: none !important
}

.app .header .logo {
    flex: 0;
    line-height: 1;
    margin: 0 20px 0 50px;
    display: inline-block;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #444;
    text-decoration: none
}

.app .header .logo img {
    width: 85px;
    height: auto
}

.app .header .logo img.greyscale {
    filter: grayscale(100%)
}

.app .header .offline-indicator {
    position: absolute;
    top: 60px;
    background: #f4f4f4;
    width: 100%;
    padding: 5px 50px;
    box-sizing: border-box;
    opacity: .8;
    font-size: .75rem
}

.app .header .app-nav {
    flex: 8;
    flex-basis: auto;
    min-width: 480px;
    text-align: right
}

.app .header .app-nav .dropdown-label {
    position: relative;
    outline: none
}

.app .header .app-nav .dropdown-nav {
    top: calc(100% + 3px);
    right: 0;
    z-index: 9999;
    cursor: pointer;
    text-align: left;
    min-width: 120px;
    position: absolute;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    border-color: #eee;
    background: #fff;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1)
}

.app .header .app-nav .dropdown-nav hr {
    margin: 0
}

.app .header .app-nav .dropdown-nav .dropdown-nav-header {
    padding: 10px 15px
}

.app .header .app-nav .dropdown-nav .dropdown-nav-header a {
    display: block
}

.app .header .app-nav .dropdown-nav .dropdown-nav-header a.router-link-active,
.app .header .app-nav .dropdown-nav .dropdown-nav-header a:hover {
    color: #444
}

.app .header .app-nav .dropdown-nav .dropdown-nav-header h4 {
    margin: 0;
    max-width: 170px
}

.app .header .app-nav .dropdown-nav .dropdown-nav-header .email {
    color: #9b9b9b
}

.app .header .app-nav .dropdown-nav li a {
    display: inline-block;
    vertical-align: middle;
    line-height: 35px;
    padding: 5px 10px;
    color: #4a4a4a;
    width: 100%;
    box-sizing: border-box
}

.app .header .app-nav .dropdown-nav li:hover {
    background: #fafafb
}

.app .header .portfolio-dropdown {
    right: 385px !important
}

.app .header .portfolio-dropdown .triangle {
    width: 30px;
    height: 30px;
    position: absolute;
    overflow: hidden;
    box-shadow: 0 16px 10px -17px rgba(0, 0, 0, .5);
    left: calc(50% - 17px);
    top: -30px
}

.app .header .portfolio-dropdown .triangle:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(-45deg);
    top: 20px;
    left: 4px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #eee
}

.app .header .reports-dropdown {
    right: 302px !important
}

.app .header .reports-dropdown .triangle {
    width: 30px;
    height: 30px;
    position: absolute;
    overflow: hidden;
    box-shadow: 0 16px 10px -17px rgba(0, 0, 0, .5);
    left: calc(50% - 17px);
    top: -30px
}

.app .header .reports-dropdown .triangle:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(-45deg);
    top: 20px;
    left: 4px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #eee
}

.app .header .funds-dropdown {
    right: 229px !important
}

.app .header .funds-dropdown .triangle {
    width: 30px;
    height: 30px;
    position: absolute;
    overflow: hidden;
    box-shadow: 0 16px 10px -17px rgba(0, 0, 0, .5);
    left: calc(50% - 17px);
    top: -30px
}

.app .header .funds-dropdown .triangle:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(-45deg);
    top: 20px;
    left: 4px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #eee
}

.app .header .right-nav {
    flex: 1;
    display: flex;
    margin-right: 50px
}

.app .header .right-nav .dropdown-nav-list li a img,
.app .header .right-nav .dropdown-nav-list li a span.icon {
    margin-right: 5px
}

.app .header .right-nav .notifications-menu {
    flex: 1;
    position: relative;
    margin: 15px 0
}

.app .header .right-nav .notifications-menu .icon-notification {
    font-size: 1rem
}

.app .header .right-nav .notifications-menu .notification-count {
    position: absolute;
    top: 0;
    right: 0;
    line-height: 1
}

.app .header .right-nav .notifications-menu .notification-count .dot {
    height: 5px;
    width: 5px;
    border-radius: 50%;
    display: inline-block;
    background: #f6461a
}

.app .header .right-nav .notifications-menu .notification-count .count {
    font-size: 8px;
    color: #aaa
}

.app .header .right-nav .notifications-menu.open a {
    color: #f6461a
}

.app .header .right-nav .user-nav {
    flex: 2;
    flex-basis: auto;
    min-width: 90px;
    text-align: right;
    margin: 15px 10px;
    padding-left: 10px;
    border-left: 1px solid #e3e3e3
}

.app .header .right-nav .user-nav a {
    padding: 0;
    outline: none
}

.app .header .right-nav .user-nav a div {
    display: inline-block
}

.app .header .right-nav .user-nav a .avatar {
    margin-right: 10px
}

.app .header .right-nav .user-nav .dropdown-nav {
    top: calc(100% + 18px);
    right: -5px;
    z-index: 9999;
    cursor: pointer;
    text-align: left;
    min-width: 200px;
    position: absolute;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    border-color: #eee;
    background: #fff;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1)
}

.app .header .right-nav .user-nav .dropdown-nav .triangle {
    width: 30px;
    height: 30px;
    position: absolute;
    overflow: hidden;
    box-shadow: 0 16px 10px -17px rgba(0, 0, 0, .5);
    left: calc(100% - 67px);
    top: -30px
}

.app .header .right-nav .user-nav .dropdown-nav .triangle:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(-45deg);
    top: 20px;
    left: 4px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #eee
}

.app .header .right-nav .user-nav .dropdown-nav hr {
    margin: 0
}

.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header {
    padding: 10px 15px
}

.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header a {
    display: block;
    margin: 0
}

.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header a.router-link-active,
.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header a:hover {
    color: #444
}

.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header h4 {
    margin: 0
}

.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header .email {
    color: #9b9b9b
}

.app .header .right-nav .user-nav .dropdown-nav li a {
    display: inline-block;
    vertical-align: middle;
    line-height: 35px;
    padding: 5px 10px;
    color: #4a4a4a;
    width: 100%;
    box-sizing: border-box
}

.app .header .right-nav .user-nav .dropdown-nav li:hover {
    background: #fafafb
}

.app .page-content {
    position: relative;
    box-sizing: border-box;
    padding-top: 60px;
    background: #fff;
    min-height: 100vh;
    padding-bottom: 150px
}

.app .page-content.widget {
    padding: 0 !important
}

.app .page-content.chart {
    padding: 2px;
    margin: 0
}

.app .page-title.big {
    font-size: 1.5rem
}

.app .su-loader.dim {
    border-top-color: #9b9b9b
}

.app section {
    margin-bottom: 60px
}

.app .vddl-draggable,
.app .vddl-list {
    position: relative
}

.app .vddl-draggable {
    cursor: move
}

.app .page-container.bounce {
    -webkit-animation: bound .3s cubic-bezier(.3, 2.4, .85, 2.5);
    animation: bound .3s cubic-bezier(.3, 2.4, .85, 2.5)
}

.app .hopscotch-bubble {
    position: fixed !important
}

@-webkit-keyframes bound {

    0%,
    to {
        margin-top: 0
    }

    75% {
        margin-top: 5px
    }
}

@keyframes bound {

    0%,
    to {
        margin-top: 0
    }

    75% {
        margin-top: 5px
    }
}

.app .pos {
    color: #10b983
}

.app .neg {
    color: #f35631
}

.app .custom-file-input input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    opacity: 0
}

.app .neg span:not(.inherit),
.app .pos span:not(.inherit) {
    font-size: .75rem
}

.app .neg.icon,
.app .pos.icon {
    font-size: 1.5rem !important;
    position: relative;
    top: 2px
}

.app .neg.icon:before,
.app .pos.icon:before {
    margin: 0
}

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

.app input[type=number] {
    -moz-appearance: textfield
}

.app label {
    font-size: 1rem;
    line-height: 1.6rem;
    color: #666
}

.app label.file-input-label {
    top: 7px;
    position: relative;
    padding-left: 10px;
    padding-right: 10px;
    background: #fff;
    display: inline-block;
    margin-left: 10px;
    z-index: 1
}

.app .su-input-group label {
    font-size: .85rem
}

.app select {
    width: 100%;
    background: #fff;
    font-size: 14px;
    padding: 7px 15px;
    padding-right: 20px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #e1e1e1;
    color: #666;
    border-radius: 3px;
    font-size: .875rem;
    background: url(/static/images/arrow-down.svg);
    background-repeat: no-repeat;
    background-position: 99% 10px;
    background-size: 20px;
    background-color: #fff
}

.app select:focus {
    outline: 0;
    border-color: #9b9b9b
}

.app .su-input-label {
    padding-left: 10px
}

.app a {
    color: #0059c1;
    text-decoration: none
}

.app a:hover {
    opacity: .8
}

.app a.btn.btn-blue {
    color: #fff !important
}

.app .download-link {
    float: right;
    font-size: 1.14rem;
    font-weight: 600;
    position: relative;
    top: 2px;
    color: #0059c1
}

.app .download-link:hover {
    opacity: .9;
    cursor: pointer
}

.app .download-link img {
    position: relative;
    top: 2px;
    width: 20px
}

.app .marketwatch-sidebar .instruments .instrument .price,
.app .marketwatch-sidebar .instruments .instrument .price span,
.app .text-right,
.app .textright,
.marketwatch-sidebar .instruments .instrument .app .price,
.marketwatch-sidebar .instruments .instrument .price .app span {
    text-align: right
}

.app .text-left,
.app .textleft {
    text-align: left
}

.app .text-bold {
    font-weight: 600
}

.app .text-grey {
    color: #666
}

.app .text-light-grey {
    color: #9b9b9b
}

.app .grey-back {
    background: #fafafb
}

.app .rem-padding {
    padding: 0 !important
}

.app .pagination {
    list-style-type: none;
    padding: 0;
    text-align: center;
    margin-top: 15px
}

.app .pagination li {
    display: inline-block;
    margin-right: 12px
}

.app .pagination li:first-child a {
    position: relative;
    bottom: 5px;
    font-size: 0;
    background: url(/static/images/page-prev.png);
    background-repeat: no-repeat;
    background-position: 50%
}

.app .pagination li:last-child a {
    position: relative;
    bottom: 5px;
    font-size: 0;
    background: url(/static/images/page-next.png);
    background-repeat: no-repeat;
    background-position: 50%
}

.app .pagination li a {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 30px;
    border: 1px solid transparent
}

.app .pagination li a:hover {
    opacity: .9
}

.app .pagination li a:focus {
    outline: 0
}

.app .pagination li:hover a {
    border: 1px solid rgba(65, 132, 243, .24)
}

.app .pagination li.disabled a {
    cursor: not-allowed
}

.app .pagination li.active a {
    background: rgba(65, 132, 243, .24);
    border: none
}

.app .page-container {
    padding: 40px 50px;
    padding-top: 20px
}

.app .page-container .table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto
}

.app .page-container .section {
    max-width: 100%
}

.app .page-container .section button {
    font-size: 13px;
    font-weight: 400;
    height: 38px;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 1
}

.app .page-container .section button:focus {
    outline: 0;
    opacity: .8
}

.app .page-container .section .cards hr {
    margin: 0;
    width: 60%;
    margin: auto
}

.app .page-container .section .card {
    padding: 15px 0;
    border-top: 1px solid #eee
}

.app .page-container .section .card .separator {
    color: #666
}

.app .page-container .section .card .symbol {
    font-size: 16px
}

.app .page-container .section .card.no-border {
    border: none !important
}

.app .page-container .section .card .row {
    display: flex
}

.app .page-container .section .card .row .columns {
    margin-bottom: 0 !important
}

.app .page-container .section .card .row .three {
    flex: 3
}

.app .page-container .section .card .row .four {
    flex: 4
}

.app .page-container .section .card .row .six {
    flex: 6
}

.app .page-container .section .card .row .eight {
    flex: 8
}

.app .page-container .section .card .row .nine {
    flex: 9
}

.app .page-container .section .card .inline {
    display: inline-block;
    margin-right: 5px
}

.app .page-container .section .card .inline.text-bold {
    color: #666
}

.app .page-container .section .card .status-flag img {
    height: 12px;
    position: relative;
    top: 1px
}

.app .page-container .section .card label {
    margin-right: 3px;
    color: #9b9b9b;
    display: inline-block;
    line-height: 1.1
}

.app .page-container .section .card.last {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee
}

.app .page-container .section .card .top {
    margin-bottom: 5px;
    display: flex
}

.app .page-container .section .card .top .top-left {
    flex: 9
}

.app .page-container .section .card .top .top-left .failure img {
    height: 14px;
    position: relative;
    top: 2px;
    margin-left: 5px
}

.app .page-container .section .card .top .top-right {
    flex: 6;
    text-align: right
}

.app .page-container .section .card .middle {
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex
}

.app .page-container .section .card .middle .middle-left {
    flex: 8
}

.app .page-container .section .card .middle .middle-right {
    flex: 6;
    text-align: right
}

.app .page-container .section .card .bottom {
    display: flex
}

.app .page-container .section .card .bottom .bottom-left {
    flex: 6
}

.app .page-container .section .card .bottom .bottom-right {
    flex: 6;
    text-align: right
}

.app .page-container .section .mx-calendar-panel-date div:first-child.text-center,
.app .page-container .section .mx-calendar-panel-month div:first-child.text-center,
.app .page-container .section .mx-calendar-panel-year div:first-child.text-center {
    background-color: #0059c1;
    color: #fff;
    line-height: 1.8;
    border-radius: 2px
}

@media only screen and (min-width:800px) {

    .app .page-container .section .mx-datepicker.mx-datepicker-range .mx-datepicker-popup,
    .app .page-container .section .mx-datepicker.mx-datepicker-range .mx-datepicker-popup .mx-range-wrapper {
        width: 550px !important
    }

    .app .page-container .section .mx-datepicker.mx-datepicker-range .mx-datepicker-popup .mx-shortcuts-wrapper button {
        margin-right: 0 !important;
        width: auto !important;
        padding-left: 0
    }

    .app .page-container .section .mx-datepicker.mx-datepicker-range .mx-datepicker-popup .mx-shortcuts-wrapper .mx-apply {
        display: none
    }

    .app .page-container .section .mx-datepicker.mx-datepicker-range .mx-range-wrapper .mx-calendar-content {
        height: 290px !important;
        width: 250px !important
    }

    .app .page-container .section .mx-datepicker.mx-datepicker-range .mx-range-wrapper .mx-calendar {
        width: 50% !important
    }

    .app .page-container .section .mx-datepicker.mx-datepicker-range table td,
    .app .page-container .section .mx-datepicker.mx-datepicker-range table th {
        padding: 12px 5px
    }
}

@media only screen and (max-width:800px) {
    .app .page-container .section .mx-datepicker.mx-datepicker-range {
        position: static !important
    }

    .app .page-container .section .mx-datepicker.mx-datepicker-range .mx-calendar-content,
    .app .page-container .section .mx-datepicker.mx-datepicker-range .mx-calendar.mx-calendar-panel-month,
    .app .page-container .section .mx-datepicker.mx-datepicker-range .mx-calendar.mx-calendar-panel-year {
        width: 100%
    }

    .app .page-container .section .mx-range-wrapper .mx-calendar-panel-date div:first-child {
        background-color: #0059c1;
        color: #fff;
        line-height: 1.8
    }

    .app .page-container .section .mx-datepicker-range .mx-datepicker-popup {
        width: 100% !important;
        left: 0 !important;
        top: 0 !important;
        position: absolute
    }

    .app .page-container .section .mx-datepicker-range .mx-datepicker-popup .mx-shortcuts-wrapper .mx-shortcuts {
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-right: 0 !important;
        width: auto !important
    }

    .app .page-container .section .mx-datepicker-range .mx-datepicker-popup .mx-shortcuts-wrapper .mx-apply {
        font-size: 13px;
        padding: 7px 15px !important;
        width: 65px !important;
        height: 30px !important;
        margin-left: 20% !important;
        position: absolute;
        top: 1%;
        right: 4%;
        background-color: transparent;
        outline: none;
        border: none;
        border-radius: 3px;
        color: #0059c1;
        border: 1px solid #0059c1
    }

    .app .page-container .section .mx-datepicker-range .mx-datepicker-popup .mx-shortcuts-wrapper .mx-shortcuts:after {
        margin: 0 4px !important
    }

    .app .page-container .section .mx-datepicker-range .mx-datepicker-popup .mx-range-wrapper {
        width: 100% !important
    }

    .app .page-container .section .mx-datepicker-range .mx-datepicker-popup .mx-range-wrapper .mx-calendar-panel-date {
        height: auto
    }

    .app .page-container .section .mx-datepicker-range table td,
    .app .page-container .section .mx-datepicker-range table th {
        padding: 12px 5px
    }

    .app .page-container .section .mx-calendar-panel-date {
        float: none !important
    }

    .app .page-container .section .mx-calendar-panel-date .mx-calendar-content {
        width: 100%
    }
}

.app .page-container .section .mx-calendar,
.app .page-container .section .mx-datepicker {
    color: #444;
    /* font-family: Inter, sans-serif; */
    max-width: 100%
}

.app .page-container .section .mx-calendar-icon {
    display: none
}

.app .page-container .section .mx-input {
    height: auto;
    box-shadow: none;
    border: 1px solid #e3e3e3;
    color: #444
}

.app .page-container .section .mx-panel td,
.app .page-container .section .mx-panel th {
    padding: 0 !important
}

.app .page-container .section .mx-datepicker-popup {
    width: 250px;
    margin-top: -2px
}

.app .page-container .section .mx-calendar-month>a.current,
.app .page-container .section .mx-calendar-month>a:hover,
.app .page-container .section .mx-calendar-table td.current,
.app .page-container .section .mx-calendar-table td.inrange,
.app .page-container .section .mx-calendar-table td:hover,
.app .page-container .section .mx-calendar-year>a.current,
.app .page-container .section .mx-calendar-year>a:hover {
    color: #fff;
    background-color: #4184f3
}

.app .page-container .section .mx-calendar a {
    color: #444
}

.app .page-container .section .mx-calendar-header a:hover {
    color: #4184f3
}

.app .page-container .section .mx-calendar-month>a.disabled:hover,
.app .page-container .section .mx-calendar-year>a.disabled:hover {
    color: #ccc;
    background-color: #f3f3f3
}

.app .page-container .section .mx-calendar-month a.disabled,
.app .page-container .section .mx-calendar-table td.disabled,
.app .page-container .section .mx-calendar-year a.disabled,
.app .page-container .section .mx-time-item.disabled {
    color: #ccc !important;
    background-color: #f3f3f3 !important
}

.app .page-container .section .input-container,
.app .page-container .section .inputcontainer {
    margin-top: 20px
}

.app .page-container .section .input-container .columns.lockContainer,
.app .page-container .section .inputcontainer .columns.lockContainer {
    position: relative
}

.app .page-container .section .input-container .mobile-context-menu-list,
.app .page-container .section .inputcontainer .mobile-context-menu-list {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding-bottom: 20px
}

.app .page-container .section .input-container .mobile-context-menu-list .row,
.app .page-container .section .inputcontainer .mobile-context-menu-list .row {
    display: flex;
    padding: 0 20px
}

.app .page-container .section .input-container .mobile-context-menu-list .row .six.columns,
.app .page-container .section .inputcontainer .mobile-context-menu-list .row .six.columns {
    width: 45% !important
}

.app .page-container .section .input-container .mobile-context-menu-list .row .six.columns:last-child,
.app .page-container .section .inputcontainer .mobile-context-menu-list .row .six.columns:last-child {
    margin-left: 10% !important
}

.app .page-container .section .input-container .mobile-context-menu-list #end_date_label.focus,
.app .page-container .section .input-container .mobile-context-menu-list #start_date_label.focus,
.app .page-container .section .inputcontainer .mobile-context-menu-list #end_date_label.focus,
.app .page-container .section .inputcontainer .mobile-context-menu-list #start_date_label.focus {
    border-color: #0059c1;
    border-width: 2px
}

.app .page-container .section .input-container select:-moz-focusring,
.app .page-container .section .inputcontainer select:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #444
}

.app .page-container .section .input-container button.btn-blue,
.app .page-container .section .inputcontainer button.btn-blue {
    position: relative;
    bottom: 3px;
    margin-right: 10px;
    width: 100%
}

.app .page-container .section .input-container button.btn-blue .su-loader,
.app .page-container .section .inputcontainer button.btn-blue .su-loader {
    margin-left: 0 !important
}

.app .page-container .section .input-container .filter-box,
.app .page-container .section .inputcontainer .filter-box {
    position: relative
}

.app .page-container .section .input-container .filter-box.all-tags-added-container .filter-link:hover,
.app .page-container .section .inputcontainer .filter-box.all-tags-added-container .filter-link:hover {
    cursor: default;
    pointer-events: none
}

.app .page-container .section .input-container .filter-box.all-tags-added-container .filter-link .clear:hover,
.app .page-container .section .inputcontainer .filter-box.all-tags-added-container .filter-link .clear:hover {
    cursor: pointer !important;
    pointer-events: all !important;
    z-index: 1
}

.app .page-container .section .input-container .filter-box.tagger .filter-link,
.app .page-container .section .inputcontainer .filter-box.tagger .filter-link {
    padding-right: 30px;
    border: 1px solid #e3e3e3;
    border-radius: 3px
}

.app .page-container .section .input-container .filter-box.tagger .filter-link .ti-tags,
.app .page-container .section .inputcontainer .filter-box.tagger .filter-link .ti-tags {
    border: none
}

.app .page-container .section .input-container .filter-box.tagger .filter-link .clear,
.app .page-container .section .inputcontainer .filter-box.tagger .filter-link .clear {
    top: 7px;
    right: 5px
}

.app .page-container .section .input-container .filter-link,
.app .page-container .section .inputcontainer .filter-link {
    position: relative;
    display: block;
    border: none;
    box-shadow: none;
    max-width: 100%;
    padding-right: 0;
    border-radius: 0;
    color: #444;
    min-height: 38px;
    box-sizing: border-box;
    z-index: 2
}

.app .page-container .section .input-container .filter-link .filter-count,
.app .page-container .section .inputcontainer .filter-link .filter-count {
    width: 18px;
    height: 18px;
    font-size: 10px;
    color: #fff;
    background: #0059c1;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 1.8;
    position: absolute;
    right: 5px;
    font-weight: 600;
    top: 8px
}

.app .page-container .section .input-container .filter-option-container .filter-option,
.app .page-container .section .inputcontainer .filter-option-container .filter-option {
    position: absolute;
    left: 0;
    right: 0;
    top: 1px;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
    z-index: 1;
    transition: all .15s ease;
    transform: rotateX(-15deg);
    transform-origin: 0 0;
    opacity: 0;
    visibility: hidden
}

.app .page-container .section .input-container .filter-option-container .filter-option.show,
.app .page-container .section .inputcontainer .filter-option-container .filter-option.show {
    opacity: 1;
    transform: rotateX(0deg);
    display: block;
    visibility: visible
}

.app .page-container .section .input-container .filter-option-container .filter-option ::-webkit-scrollbar,
.app .page-container .section .inputcontainer .filter-option-container .filter-option ::-webkit-scrollbar {
    width: 6px
}

.app .page-container .section .input-container .filter-option-container .filter-option ::-webkit-scrollbar-track,
.app .page-container .section .inputcontainer .filter-option-container .filter-option ::-webkit-scrollbar-track {
    background: #fff
}

.app .page-container .section .input-container .filter-option-container .filter-option ::-webkit-scrollbar-thumb,
.app .page-container .section .inputcontainer .filter-option-container .filter-option ::-webkit-scrollbar-thumb {
    background: #e0e3ec
}

.app .page-container .section .input-container .filter-option-container .filter-option ::-webkit-scrollbar-thumb:hover,
.app .page-container .section .inputcontainer .filter-option-container .filter-option ::-webkit-scrollbar-thumb:hover {
    background: #555;
    width: 3px
}

.app .page-container .section .input-container .filter-option-container .filter-option .filters,
.app .page-container .section .inputcontainer .filter-option-container .filter-option .filters {
    padding: 38px 20px 20px 20px;
    max-height: 320px;
    overflow: auto
}

.app .page-container .section .input-container .filter-option-container .filter-option .filters .manage-tags-link,
.app .page-container .section .inputcontainer .filter-option-container .filter-option .filters .manage-tags-link {
    display: inline-block;
    float: right;
    position: relative;
    top: 12px;
    font-size: 12px
}

.app .page-container .section .input-container .filter-option-container .filter-option .filters .filters-label,
.app .page-container .section .inputcontainer .filter-option-container .filter-option .filters .filters-label {
    display: block;
    margin-bottom: 10px;
    margin-top: 15px
}

.app .page-container .section .input-container .filter-option-container .filter-option .filters .filters-list,
.app .page-container .section .inputcontainer .filter-option-container .filter-option .filters .filters-list {
    display: inline-block;
    margin-bottom: 5px
}

.app .page-container .section .input-container .filter-option-container .filter-option .all-tags-select label,
.app .page-container .section .inputcontainer .filter-option-container .filter-option .all-tags-select label {
    border-color: #0059c1 !important;
    color: #0059c1 !important
}

.app .page-container .section .input-container .filter-option-container .filter-option .all-tags-select label:hover,
.app .page-container .section .inputcontainer .filter-option-container .filter-option .all-tags-select label:hover {
    background-color: #0059c1 !important;
    color: #fff !important
}

.app .page-container .section .input-container .filter-option-container .filter-option label,
.app .page-container .section .inputcontainer .filter-option-container .filter-option label {
    padding-left: 0
}

.app .page-container .section .input-container .filter-option-container .filter-option label.checks,
.app .page-container .section .inputcontainer .filter-option-container .filter-option label.checks {
    display: inline-block;
    padding: 5px 8px;
    margin-right: 8px;
    font-size: 12px;
    border: 1px solid #9b9b9b;
    border-radius: 3px;
    color: #666
}

.app .page-container .section .input-container .filter-option-container .filter-option label.checks:hover,
.app .page-container .section .inputcontainer .filter-option-container .filter-option label.checks:hover {
    cursor: pointer;
    opacity: .8
}

.app .page-container .section .input-container .filter-option-container .filter-option label.checks.active,
.app .page-container .section .inputcontainer .filter-option-container .filter-option label.checks.active {
    border: 1px solid #0059c1;
    color: #fff;
    background: #0059c1
}

.app .page-container .section .input-container .filter-option-container .filter-option input[type=checkbox],
.app .page-container .section .inputcontainer .filter-option-container .filter-option input[type=checkbox] {
    display: none
}

.app .page-container .section .input-container .filter-option-container .filter-option input,
.app .page-container .section .inputcontainer .filter-option-container .filter-option input {
    max-width: 175px;
    font-size: 12px;
    min-height: 35px;
    height: 35px
}

.app .page-container .section .input-container .filter-option-container .filter-option .triangle,
.app .page-container .section .inputcontainer .filter-option-container .filter-option .triangle {
    width: 30px;
    height: 30px;
    position: absolute;
    overflow: hidden;
    box-shadow: 0 16px 10px -17px rgba(0, 0, 0, .5);
    left: 20px;
    top: -30px
}

.app .page-container .section .input-container .filter-option-container .filter-option .triangle:after,
.app .page-container .section .inputcontainer .filter-option-container .filter-option .triangle:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(-45deg);
    top: 20px;
    left: 4px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #eee
}

.app .page-container .section .input-container .filter-option-container .reset-filter,
.app .page-container .section .inputcontainer .filter-option-container .reset-filter {
    text-align: right;
    padding: 2px 20px 2px 0;
    font-size: 12px;
    color: #9c9c9c;
    background: #fafafb
}

.app .page-container .section .input-container .filter-option-container .reset-filter span:hover,
.app .page-container .section .inputcontainer .filter-option-container .reset-filter span:hover {
    cursor: pointer;
    opacity: .8
}

.app .page-container .section .input-container .filter-option-container .reset-filter span img,
.app .page-container .section .inputcontainer .filter-option-container .reset-filter span img {
    width: 12px;
    vertical-align: middle;
    margin-right: 4px
}

.app .page-container .section .input-container .lock-img-container,
.app .page-container .section .inputcontainer .lock-img-container {
    display: inline-block
}

.app .page-container .section .input-container .lock-class,
.app .page-container .section .inputcontainer .lock-class {
    width: 15px;
    display: block;
    margin: auto;
    margin-bottom: 0
}

.app .page-container .section .input-lock {
    position: absolute;
    height: 80px;
    width: 100%;
    background: transparent;
    z-index: 1
}

.app .page-container .section .input-container.locked input,
.app .page-container .section .input-container.locked select,
.app .page-container .section .input-container.locked span,
.app .page-container .section .inputcontainer.locked input,
.app .page-container .section .inputcontainer.locked select,
.app .page-container .section .inputcontainer.locked span {
    color: #787878
}

.app .page-title {
    margin: 0;
    padding: 0;
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-transform: capitalize;
    color: #4a4a4a;
    border-bottom: 1px solid #f1f1f1
}

.app .page-title.big {
    font-size: 2rem;
    padding-bottom: 15px;
    margin-bottom: 30px
}

.app .section table {
    width: 100%;
    font-size: 14px;
    text-align: right
}

.app .section table th {
    color: #666
}

.app .section table th:first-child {
    text-align: center
}

.app .section table td,
.app .section table th {
    padding: 12px 10px
}

.app .section table .breakdown-tag-table-head {
    min-width: 130px
}

.app .section .edit-tags-enable {
    margin-right: 15px;
    margin-bottom: 5px
}

.app .popup {
    display: none;
    position: absolute;
    cursor: pointer;
    left: 240px;
    color: #4184f3;
    border: 1px solid #4184f3;
    border-radius: 2px;
    padding: 0 5px 0 7px;
    height: 17px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    margin-top: 9px
}

.app .popup i {
    content: "";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #4184f3;
    position: relative;
    margin-right: 2px;
    bottom: 4px
}

.app .popup .popuptext {
    visibility: hidden;
    width: 160px;
    background-color: #fff;
    color: #9b9b9b;
    text-align: center;
    border-radius: 6px;
    position: absolute;
    z-index: 10;
    bottom: 135%;
    left: 50%;
    margin-left: -80px;
    box-shadow: 0 0 4px 1px #e1e1e1
}

.app .popup .popuptext .menu-item {
    margin: 0;
    padding: 10px 10px;
    text-align: left;
    border-bottom: 1px solid #e1e1e1;
    cursor: pointer
}

.app .popup .popuptext .menu-item:hover {
    background: #fafafb
}

.app .popup .popuptext .menu-item:last-child {
    border-bottom: none
}

.app .popup .popuptext:before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #9b9b9b transparent transparent transparent
}

.app .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn .3s;
    animation: fadeIn .3s
}

.app .popuptext {
    cursor: default
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.app .v-align {
    display: flex;
    align-items: center
}

.app .align {
    vertical-align: middle
}

.state-process-container {
    width: 395px;
    max-width: 100%;
    margin: auto;
    overflow: hidden
}

.state-process-container img {
    height: 140px;
    margin-bottom: 30px;
    width: auto
}

.loader {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 62px;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: #fff
}

.spinner {
    position: relative;
    top: 45vh
}

.spinner img {
    width: 100px
}

.spinner .su-loader {
    position: relative;
    left: -5px
}

.text-grey {
    color: #9b9b9b
}

@-webkit-keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.show-inline-on-mobile,
.show-on-mobile {
    display: none
}

@media only screen and (max-width:700px) {
    .charges-container {
        display: inline-block;
        width: 100% !important;
        margin-left: 0 !important
    }
}

@media only screen and (max-width:800px) {
    .filter-box.tagger .filter-link .clear {
        top: 13px !important
    }

    .table-sort {
        margin-top: 10px
    }

    button {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        height: auto !important;
        font-size: 14px !important
    }

    .su-input-group input,
    .su-input-group textarea,
    select {
        font-size: 16px
    }

    .row.flex-row {
        display: flex
    }

    .row.flex-row .columns {
        margin-bottom: 0 !important
    }

    .row.flex-row .three {
        flex: 3
    }

    .row.flex-row .four {
        flex: 4
    }

    .row.flex-row .six {
        flex: 6
    }

    .row.flex-row .eight {
        flex: 8
    }

    .row.flex-row .nine {
        flex: 9
    }

    .input-container .mobile-context-menu,
    .inputcontainer .mobile-context-menu {
        z-index: 9999
    }

    .input-container input,
    .input-container select,
    .inputcontainer input,
    .inputcontainer select {
        font-size: 16px !important;
        color: #666;
        padding: 15px 20px !important;
        line-height: 1.7rem
    }

    .input-container select,
    .inputcontainer select {
        background-position-y: 17px !important
    }

    .input-container .custom-dateranges a,
    .inputcontainer .custom-dateranges a {
        font-size: 12px
    }

    .input-container .custom-dateranges .separator,
    .inputcontainer .custom-dateranges .separator {
        display: inline-block;
        margin-top: 8px;
        margin-left: 4px;
        margin-right: 2px;
        color: #0059c1;
        font-size: 12px
    }

    .dates-container {
        padding: 26px 0 20px 0;
        background: #f4f4f4;
        border-top-left-radius: 15px;
        border-top-right-radius: 15px
    }

    .dates-container .su-input-label {
        position: inherit;
        background: transparent;
        padding-left: 0 !important
    }

    .litepicker {
        /* font-family: Inter, "sans-serif"; */
        --litepicker-day-width: 13.5vw;
        --litepicker-month-width: calc(var(--litepicker-day-width)*7);
        font-size: 1em;
        width: 100%;
        background: #fff
    }

    .litepicker select.month-item-year {
        border: none !important;
        padding: 7px 15px !important;
        width: auto !important;
        padding-right: 20px !important;
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        color: #666;
        background: url(/static/images/arrow-down.svg);
        background-repeat: no-repeat;
        background-position: 99% 9px !important;
        background-size: 20px;
        background-color: #fff
    }

    .litepicker .container__main {
        width: 100%
    }

    .litepicker .container__main .container__months {
        margin: auto;
        border-radius: 0;
        box-shadow: none
    }

    .litepicker .container__main .container__months button {
        padding: 3px 5px
    }

    .litepicker .container__main .container__months .month-item:first-child .button-next-month {
        visibility: visible
    }

    .datepicker-container .month-item {
        min-height: 315px
    }

    .datepicker-container .error {
        position: absolute;
        top: 30px;
        left: 25px;
        color: #f6461a
    }

    .datepicker-container #start_date {
        display: none;
        width: 145px;
        margin-left: 20px;
        margin-top: 40px;
        margin-bottom: 5px
    }

    .datepicker-container #end_date {
        display: none;
        position: absolute;
        top: 40px;
        right: 20px;
        width: 145px
    }

    .datepicker-container .end-date,
    .datepicker-container .start-date {
        display: inline-block;
        margin-top: 5px
    }

    .datepicker-container .end-date.focus input,
    .datepicker-container .start-date.focus input {
        border-color: #0059c1
    }

    .datepicker-container .end-date:not(.focus) .litepicker,
    .datepicker-container .start-date:not(.focus) .litepicker {
        display: none !important
    }

    .paginate-info {
        padding-left: 0 !important;
        margin-bottom: 0 !important
    }

    label {
        font-size: 14px !important
    }

    .header {
        box-shadow: none !important;
        border-bottom: 1px solid #e1e1e1
    }

    .header .header-right {
        display: flex;
        align-items: center
    }

    .header .header-right .logo {
        margin-right: 0 !important
    }

    .header .header-right .logo img {
        width: 25px !important
    }

    .header .header-right .mobile-menu-drop {
        position: absolute;
        top: 60px;
        padding-bottom: 60px
    }

    .header .header-right .mobile-page-title {
        display: inline-flex;
        margin-left: auto;
        font-weight: 400;
        font-size: 1.25rem
    }

    .header .header-right .mobile-page-title.webview-title {
        margin-right: auto;
        position: relative;
        left: -25px
    }

    .header .header-right .toggle-mobile-menu {
        margin-left: auto;
        margin-top: 9px
    }

    .pull-up-section {
        position: relative;
        top: -50px
    }

    .table-top-links {
        display: flex;
        align-items: center;
        margin-bottom: 10px
    }

    .table-top-links .columns {
        margin-bottom: 0
    }

    .table-top-links .eight {
        width: 70% !important
    }

    .table-top-links .four {
        width: 30% !important
    }

    .table-top-links .download-link-div {
        color: #0059c1
    }

    .columns {
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 15px
    }

    .su-toast-groups .su-toast-top-right {
        left: 20px
    }

    .su-toast-groups .su-toast-item.warning {
        background: #f7eccb
    }

    .su-toast-groups .su-toast-item.error {
        background: #fee5de
    }

    .mx-datepicker {
        width: 100% !important
    }

    .app .container .container-right {
        max-width: 100% !important
    }

    .logo {
        margin-left: 20px !important
    }

    .app .page-container {
        padding: 20px !important
    }

    .app .page-container .mobile-input-container {
        position: absolute;
        width: 100%;
        left: 0;
        top: 0;
        background: #fff;
        min-height: 100vh;
        z-index: 9999;
        padding: 15px 20px;
        right: 0;
        box-sizing: border-box;
        max-height: 100vh;
        overflow: auto
    }

    .app .page-container .mobile-input-container .hide-mobile-input {
        position: absolute;
        font-size: 1.5rem;
        left: 20px
    }

    .app .page-container .mobile-input-container button.btn-blue {
        margin-bottom: 15px
    }

    .app .page-container .grey-back-mobile {
        height: 120px;
        background: #f4f4f4;
        position: relative;
        z-index: 0;
        top: -15px;
        width: calc(100% + 32px);
        left: -16px
    }

    .app .page-container .inputs-collapsed {
        text-align: center;
        font-size: 1rem;
        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .1);
        width: calc(100% + 32px);
        box-sizing: border-box;
        position: relative;
        left: -16px;
        top: -16px;
        padding: 15px;
        z-index: 1;
        background: #fff
    }

    .app .page-container .inputs-collapsed .date {
        text-align: center;
        background: #f4f4f4;
        display: inline-block;
        padding: 6px 30px;
        border-radius: 20px;
        margin-bottom: 15px;
        color: #9b9b9b;
        font-weight: 600;
        width: 100%;
        box-sizing: border-box
    }

    .app .page-container .inputs-collapsed .date span {
        letter-spacing: .25px
    }

    .app .page-container .inputs-collapsed .date span:first-child {
        margin-right: 5px
    }

    .app .page-container .inputs-collapsed .date span:last-child {
        margin-left: 5px
    }

    .app .page-container .inputs-collapsed .filters span {
        padding: 3px 15px;
        border-radius: 20px;
        margin-right: 10px;
        max-width: 100px;
        font-size: .875rem;
        overflow: hidden;
        display: inline-block;
        box-sizing: border-box;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .app .page-container .inputs-collapsed .filters span.filter-category {
        border: 1px solid #0059c1;
        color: #0059c1
    }

    .app .page-container .inputs-collapsed .filters span.filter-filter {
        background: rgba(194, 112, 200, .2);
        color: #c270c8
    }

    .app .page-container .inputs-collapsed .filters span.filter-more {
        color: #0059c1;
        padding-left: 0
    }

    .app .page-container .search-table .icon-search {
        top: 5px;
        font-size: 14px
    }

    .app .page-container .app-banner {
        position: absolute;
        right: 20px;
        line-height: 1;
        top: 24px
    }

    .app .page-container .app-banner img {
        width: 100px
    }

    .app .page-content {
        padding-bottom: 475px
    }

    .app .console-footer-note {
        bottom: 475px
    }

    div .breakdown-meta {
        display: block !important;
        margin: 0 !important
    }

    div .breakdown-meta:first-child {
        margin-top: 10px !important
    }

    div .breakdown-meta:last-child {
        margin-bottom: 10px !important
    }

    .show-on-mobile {
        display: block !important
    }

    .show-inline-on-mobile {
        display: inline-block !important
    }

    .hide-on-mobile {
        display: none !important
    }

    .mobile-menu-drop {
        position: relative;
        width: 100%;
        background: #fff;
        padding: 0;
        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, .1);
        height: calc(100vh - 60px);
        overflow: auto;
        box-sizing: border-box;
        transition: .5s;
        font-size: 14px
    }

    .mobile-menu-drop a {
        display: block;
        padding: 25px 20px;
        border-top: 1px solid #e1e1e1;
        color: #9b9b9b !important
    }

    .mobile-menu-drop a .profile-avatar {
        display: inline-block
    }

    .mobile-menu-drop a:hover {
        color: #0059c1 !important
    }

    .mobile-menu-drop .portfolio-count {
        background: #4184f3;
        color: #fff;
        padding: 2px 6px;
        border-radius: 2px;
        margin-left: 8px
    }

    .mobile-menu-drop .pnl-icon {
        width: 14px
    }

    .mobile-menu-drop .mobile-refer-label {
        border-bottom: 1px solid #e1e1e1
    }

    .mobile-menu-drop .icon,
    .mobile-menu-drop .mobile-refer-label img {
        margin-right: 10px
    }

    .mobile-menu-footer {
        padding: 20px
    }

    .mobile-menu-footer a {
        display: inline-block;
        box-sizing: border-box;
        width: 50%;
        padding: 10px;
        border: none;
        text-align: center
    }

    .mobile-account-link {
        margin-top: 65px;
        border-top: none !important
    }

    .mobile-profile-card {
        background: #f4f4f4;
        height: 80px
    }

    .mobile-profile-card a {
        height: auto;
        display: flex;
        align-items: center;
        width: auto;
        max-width: 300px;
        margin-bottom: 0;
        border: none;
        margin: auto;
        background: #fff;
        padding: 20px 20px;
        position: relative;
        top: 20px;
        box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .1)
    }

    .mobile-profile-card .mobile-profile-details {
        display: inline-block;
        margin-left: 30px
    }

    .mobile-profile-card .mobile-profile-details h2 {
        margin-bottom: 10px;
        color: #444;
        white-space: nowrap;
        width: 225px;
        overflow: hidden;
        box-sizing: border-box;
        text-overflow: ellipsis
    }

    .mobile-profile-card .profile-avatar img {
        border: 3px solid #e1e1e1
    }

    #mobile-side-nav.show {
        width: 220px !important
    }

    .nav-accordion-label {
        display: block;
        padding: 25px 20px;
        border-top: 1px solid #e1e1e1;
        color: #9b9b9b !important
    }

    .nav-accordion-label.active {
        color: #0059c1 !important
    }

    .nav-accordion-label .icon-chevron-down,
    .nav-accordion-label .icon-chevron-right {
        float: right
    }

    .nav-accordion-label .icon-chevron-down {
        display: none
    }

    .nav-accordion-content {
        display: none;
        padding-left: 25px;
        margin-top: 20px
    }

    .nav-accordion-content a {
        margin-bottom: 0;
        padding: 10px 0;
        border: none
    }

    .nav-accordion-label.active .icon-chevron-down,
    .nav-accordion-label.active .nav-accordion-content {
        display: block
    }

    .nav-accordion-label.active .icon-chevron-right {
        display: none
    }

    .wrapper .header-right {
        height: 60px
    }

    .toggle-mobile-menu {
        float: right;
        line-height: 4;
        display: inline-flex;
        margin-right: 20px;
        margin-top: 25px
    }

    #nav-icon4 {
        width: 20px;
        height: 25px;
        position: relative;
        transform: rotate(0deg);
        transition: .5s ease-in-out;
        cursor: pointer
    }

    #nav-icon4 span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: #4a4a4a;
        border-radius: 9px;
        opacity: 1;
        left: 0;
        transform: rotate(0deg);
        transition: .25s ease-in-out
    }

    #nav-icon4 span:first-child {
        top: 0;
        transform-origin: left center
    }

    #nav-icon4 span:nth-child(2) {
        top: 6px;
        transform-origin: left center
    }

    #nav-icon4 span:nth-child(3) {
        top: 12px;
        transform-origin: left center
    }

    #nav-icon4.open span:first-child {
        transform: rotate(45deg);
        top: -3px;
        left: 1px
    }

    #nav-icon4.open span:nth-child(2) {
        width: 0;
        opacity: 0
    }

    #nav-icon4.open span:nth-child(3) {
        transform: rotate(-45deg);
        top: 11px;
        left: 1px
    }

    .app .page-container .section .input-container button,
    .app .page-container .section .inputcontainer button.btn-blue {
        width: 98% !important;
        margin-right: 0 !important
    }

    .page-container.holdings .section .holdings-total,
    .positions-summary {
        padding: 30px 50px !important
    }

    .row.custom-row .six {
        width: 100%
    }

    .row.custom-row .six:first-child {
        padding-right: 0 !important
    }

    .row.custom-row .six:last-child {
        position: relative;
        padding-left: 0 !important;
        margin-left: 0
    }

    .border-right {
        border: none !important
    }

    .footer .row .six {
        display: block !important;
        text-align: center !important
    }
}

@media only screen and (min-width:900px)and (max-width:1200px) {
    #outer_app .console-landing {
        position: relative;
        top: 20vh
    }
}

@media only screen and (min-width:1201px) {
    #outer_app .console-landing {
        position: relative;
        top: 15vh;
        padding-bottom: 130px
    }
}

@media only screen and (max-width:900px) {
    #outer_app .console-landing {
        position: relative;
        top: 20vh
    }
}

@media only screen and (max-width:550px) {
    #outer_app {
        padding-bottom: 370px
    }

    .app .page-content {
        padding-bottom: 120px
    }

    .app .console-footer-note {
        bottom: 120px
    }

    .app .page-container .search-table .icon-search {
        left: 15px
    }

    .nomargin-mobile {
        margin: 0
    }
}

@media only screen and (max-width:350px) {
    .custom-dateranges a {
        font-size: 10px !important
    }
}

@media only screen and (max-width:800px) {

    .app .footer .footer-section .footer-container,
    #outer_app {
        padding: 20px
    }

    #outer_app {
        padding-bottom: 350px
    }

    .modal-mask,
    .modal-wrapper {
        display: block !important;
        margin-top: 0 !important
    }

    .modal-container {
        width: 100% !important;
        height: 100vh;
        overflow-y: scroll;
        padding: 20px !important;
        padding-bottom: 130px !important
    }

    .modal-container .close-modal {
        display: block !important;
        right: 15px !important
    }

    #mobile-side-nav {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 99999;
        background: #fafafb;
        display: none;
        height: 100vh;
        transition: .5s;
        overflow: hidden;
        box-shadow: 1px 1px 10px #e1e1e1
    }

    .open-side-nav {
        margin-bottom: 15px;
        display: inline-block
    }

    .hidden {
        display: none
    }

    .close-side-nav {
        text-align: center;
        width: 25px;
        margin-left: auto;
        margin-right: 10px;
        font-size: 25px;
        margin-top: 5px
    }
}

@media only screen and (max-width:550px) {
    .app .page-container {
        padding: 16px !important
    }

    #outer_app {
        padding-bottom: 370px
    }

    .app .pnl .fetch-data,
    .app .tradebook .fetch-data {
        top: 40px !important
    }

    .app .search-table {
        left: 0 !important;
        top: -5px !important;
        float: none;
        padding-left: 10px
    }

    .app .last-updated {
        display: block;
        float: none
    }

    .app .filter-table {
        top: 0 !important;
        right: 10px !important
    }

    .app .filter-dropdown {
        top: 70px !important
    }

    .app .filter-dropdown .triangle {
        left: 40px !important
    }

    .app .table-download {
        padding-right: 0 !important
    }

    .app .fetch-data {
        position: absolute;
        top: 0;
        right: 0
    }
}

.stock-widget {
    z-index: 99999
}

.stock-widget iframe {
    position: absolute;
    background: #fff;
    border: 1px solid #f1f1f1;
    width: 420px;
    height: 282px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2)
}

.data-table table {
    border-radius: 2px;
    background-color: #fff;
    width: 100%;
    font-size: 14px
}

.data-table th {
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.data-table td,
.data-table th {
    padding: 10px 20px
}

.data-table td {
    text-transform: uppercase
}

.data-table th.active .arrow {
    opacity: 1
}

.data-table .arrow {
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 0;
    margin-left: 10px;
    opacity: .66
}

.data-table .arrow.asc {
    border-bottom: 4px solid #666
}

.data-table .arrow.asc,
.data-table .arrow.dsc {
    border-left: 4px solid transparent;
    border-right: 4px solid transparent
}

.data-table .arrow.dsc {
    border-top: 4px solid #666
}

.dot-loader.inline {
    display: inline-block
}

.dot-loader.inline.small svg {
    height: 8px;
    width: 30px
}

.modal-mask {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9998;
    display: table;
    position: fixed;
    transition: opacity .3s ease;
    background: hsla(0, 0%, 100%, .8)
}

.modal-wrapper {
    display: table-cell;
    vertical-align: middle;
    margin-top: 10%
}

.modal-container {
    width: 700px;
    color: #444;
    margin: 0 auto;
    max-width: 100%;
    max-height: 100vh;
    background: #fff;
    padding: 20px 40px 35px 40px;
    position: relative;
    border: 1px solid #ddd;
    box-shadow: 2px 2px 0 #f3f3f3;
    box-sizing: border-box
}

.modal-container.confirmation {
    width: 400px
}

.modal-container.confirmation-modal {
    width: 500px
}

.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5 {
    margin-top: 0
}

.modal-default-button {
    float: right
}

.modal-enter,
.modal-leave-active {
    opacity: 0
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
    transform: scale(1)
}

@media only screen and (max-width:800px) {
    .modal-mask {
        min-height: 100vh
    }
}

.marketwatch-sidebar {
    font-size: .8125rem;
    box-sizing: border-box;
    background-color: #fff;
    border-left: 1px solid #eee;
    border-right: 1px solid #eee
}

.marketwatch-sidebar .instruments {
    margin-bottom: 40px;
    position: relative
}

.marketwatch-sidebar .instruments .empty {
    text-align: center;
    padding: 20px 40px
}

.marketwatch-sidebar .instruments .loading-marketwatch {
    padding: 10px
}

.marketwatch-sidebar .instruments .instrument {
    color: #666;
    position: relative;
    border-bottom: 1px solid #f1f1f1;
    transition: .25s ease
}

.marketwatch-sidebar .instruments .instrument.down .icon-down,
.marketwatch-sidebar .instruments .instrument.down .last-price,
.marketwatch-sidebar .instruments .instrument.down .nice-name {
    color: #df514c
}

.marketwatch-sidebar .instruments .instrument.up .icon-up,
.marketwatch-sidebar .instruments .instrument.up .last-price,
.marketwatch-sidebar .instruments .instrument.up .nice-name {
    color: #4caf50
}

.marketwatch-sidebar .instruments .instrument.index {
    background-color: #fafafb
}

.marketwatch-sidebar .instruments .instrument.index .symbol,
.marketwatch-sidebar .instruments .instrumentindex .price {
    font-weight: 600
}

.marketwatch-sidebar .instruments .instrument.selected {
    background-color: #f4f4f4
}

.marketwatch-sidebar .instruments .instrument.highlight {
    background-color: #fffacd
}

.marketwatch-sidebar .instruments .instrument:hover {
    background: #fafafb;
    cursor: pointer
}

.marketwatch-sidebar .instruments .instrument .actions {
    display: none
}

.marketwatch-sidebar .instruments .instrument:hover .actions {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    height: 44px;
    box-sizing: border-box;
    padding: 8px 15px 8px 2px
}

.marketwatch-sidebar .instruments .instrument:hover .actions .btn {
    padding: 4px 10px;
    min-width: 35px;
    display: inline-block;
    margin-left: 5px;
    font-weight: 600
}

.marketwatch-sidebar .instruments .instrument:hover .price {
    opacity: 0
}

.marketwatch-sidebar .instruments .instrument .draggable-area {
    display: none
}

.marketwatch-sidebar .instruments .instrument.draggedover .draggable-area {
    display: block;
    text-align: center;
    background: #fafafb;
    height: 50px
}

.marketwatch-sidebar .instruments .instrument .price,
.marketwatch-sidebar .instruments .instrument .symbol {
    width: 55%;
    padding: 13px 15px;
    display: inline-block;
    box-sizing: border-box
}

.marketwatch-sidebar .instruments .instrument .symbol {
    padding-right: 0
}

.marketwatch-sidebar .instruments .instrument .price {
    float: right;
    width: 45%;
    padding-left: 0
}

.marketwatch-sidebar .instruments .instrument .price span {
    display: inline-block
}

.marketwatch-sidebar .instruments .instrument .price .last-price {
    min-width: 60px
}

.marketwatch-sidebar .instruments .instrument .price .change-indicator {
    min-width: 25px
}

.marketwatch-sidebar .instruments .instrument .exchange {
    font-size: .4375rem;
    vertical-align: top;
    margin-left: 5px;
    line-height: 20px
}

.marketwatch-sidebar .instruments .instrument.active-marketdepth {
    background: #fafafb
}

.marketwatch-sidebar .instruments .instrument.list-enter-active,
.marketwatch-sidebar .instruments .instrument.list-leave-active {
    transition: all .25s
}

.marketwatch-sidebar .instruments .instrument.list-enter,
.marketwatch-sidebar .instruments .instrument.list-leave-to {
    opacity: 0;
    transform: translateY(5px)
}

.marketwatch-sidebar .instruments .market-depth {
    padding: 0 10px;
    background: #fafafb;
    border-top: 1px solid #f1f1f1
}

.marketwatch-sidebar .instruments .market-depth .loader {
    padding: 30px 0;
    text-align: center;
    display: block
}

.marketwatch-sidebar .instruments .market-depth .ohlc {
    padding: 10px 0;
    border-top: 1px solid #f1f1f1
}

.marketwatch-sidebar .instruments .market-depth table caption,
.marketwatch-sidebar .instruments .market-depth table thead tr th {
    padding: 10px 0;
    color: #9b9b9b;
    text-transform: uppercase
}

.marketwatch-sidebar .instruments .market-depth table thead tr th {
    padding: 2px 0
}

.marketwatch-sidebar .instruments .market-depth table.buy tbody,
.marketwatch-sidebar .instruments .market-depth table.buy tfoot {
    color: #387ed1
}

.marketwatch-sidebar .instruments .market-depth table.sell tbody,
.marketwatch-sidebar .instruments .market-depth table.sell tfoot {
    color: #f6461a
}

.marketwatch-sidebar .instruments .market-depth table tbody td,
.marketwatch-sidebar .instruments .market-depth table tfoot td {
    padding: 2px 0
}

.marketwatch-sidebar .instruments .market-depth table tfoot td {
    border-top: 1px solid #f1f1f1;
    padding: 6px 0
}

.marketwatch-sidebar .marketwatch-selector {
    bottom: 0;
    width: 400px;
    position: fixed;
    box-sizing: border-box;
    background: #fafafb;
    border-top: 1px solid #e3e3e3;
    border-right: 1px solid #f1f1f1
}

.marketwatch-sidebar .marketwatch-selector li {
    float: left;
    line-height: 40px;
    vertical-align: middle
}

.marketwatch-sidebar .marketwatch-selector li.label {
    background: #fafafb;
    padding: 0 15px;
    color: #9b9b9b
}

.marketwatch-sidebar .marketwatch-selector li.item {
    display: inline-block;
    padding: 0 20px;
    color: #9b9b9b;
    cursor: pointer
}

.marketwatch-sidebar .marketwatch-selector li.item.selected {
    background-color: #eee;
    color: #ff5722;
    cursor: default
}

.omnisearch-wrap {
    display: block;
    position: relative;
    border-bottom: 1px solid #f1f1f1;
    box-sizing: border-box;
    height: 50px
}

.omnisearch-wrap .icon-search {
    position: absolute;
    left: 15px;
    top: 16px;
    z-index: 1;
    opacity: .5
}

.omnisearch-wrap .omnisearch {
    height: 100%
}

.omnisearch-wrap .omnisearch .search {
    position: relative;
    height: 100%
}

.omnisearch-wrap .omnisearch .search input {
    width: 100%;
    padding: 0;
    margin: 0;
    border: none;
    text-indent: 40px;
    color: #9b9b9b;
    height: 100%
}

.omnisearch-wrap .omnisearch .search input:focus {
    outline: none
}

.omnisearch-wrap .omnisearch .search-result {
    background: #fafafb;
    position: absolute;
    top: 50px;
    z-index: 9;
    width: 100%;
    color: #9b9b9b;
    border-width: 1px 0;
    border-style: solid;
    border-color: #f4f4f4
}

.omnisearch-wrap .omnisearch .search-result-list {
    list-style: none;
    margin: 0;
    padding: 0
}

.omnisearch-wrap .omnisearch .search-result-list .search-result-item {
    padding: 6px 30px;
    margin-bottom: 0;
    cursor: pointer;
    border-bottom: 1px solid #eee
}

.omnisearch-wrap .omnisearch .search-result-list .search-result-item .exchange {
    position: absolute;
    right: 10px
}

.omnisearch-wrap .omnisearch .search-result-list .search-result-item .company {
    font-size: .5625rem
}

.omnisearch-wrap .omnisearch .search-result-list .search-result-item .exchange .BSE,
.omnisearch-wrap .omnisearch .search-result-list .search-result-item .exchange .MCX,
.omnisearch-wrap .omnisearch .search-result-list .search-result-item .exchange .NSE {
    font-size: .5625rem;
    color: #b73737;
    border: 1px solid #b73737;
    padding: 0 2px;
    border-radius: 2px;
    margin-left: 5px
}

.omnisearch-wrap .omnisearch .search-result-list .search-result-item .exchange .BSE {
    color: #0089d0;
    border-color: #0089d0
}

.omnisearch-wrap .omnisearch .search-result-list .search-result-item .exchange .MCX {
    color: #013779;
    border-color: #013779
}

.omnisearch-wrap .omnisearch .search-result-list .search-result-item.selected,
.omnisearch-wrap .omnisearch .search-result-list .search-result-item:hover {
    background: #f4f4f4
}

.orderbook table td.actions-wrap {
    position: relative
}

.orderbook table td .actions {
    left: 0;
    top: 10px;
    position: absolute
}

.orderbook .order-cancel-modal .modal-container {
    max-width: 300px
}

.orderbook .order-cancel-modal .modal-container button {
    min-width: 60px
}

.orderbook .order-info-modal .modal-container {
    max-width: 560px
}

.orderbook .order-info-modal .modal-container label {
    text-transform: uppercase;
    margin-bottom: 3px;
    display: block
}

.orderbook .order-info-modal .modal-container .order-info-header {
    color: #fff;
    margin: -20px -40px 20px -40px;
    padding: 20px 40px
}

.orderbook .order-info-modal .modal-container .order-info-header h1,
.orderbook .order-info-modal .modal-container .order-info-header h2,
.orderbook .order-info-modal .modal-container .order-info-header h3,
.orderbook .order-info-modal .modal-container .order-info-header h4,
.orderbook .order-info-modal .modal-container .order-info-header h5 {
    margin: 0
}

.orderbook .order-info-modal .modal-container .order-info-header.buy {
    background-color: #387ed1
}

.orderbook .order-info-modal .modal-container .order-info-header.sell {
    background-color: #f6461a
}

.orderbook .order-info-modal .modal-container .order-info-header .tradingsymbol {
    margin-bottom: 5px
}

.orderbook .order-info-modal .modal-container .order-info-body label {
    color: #9b9b9b
}

.orderbook .order-info-modal .modal-container .order-info-body .row {
    margin-bottom: 20px
}

.orderbook .order-info-modal .modal-container .order-info-body .row-4 {
    margin-bottom: 0
}

.order-window {
    z-index: 99;
    width: 550px;
    border-radius: 3px 2px 0 0;
    box-shadow: 0 1px 3px 0 #aaa;
    background-color: #fff;
    position: fixed
}

.order-window .head {
    padding: 10px 15px;
    color: #fff;
    background-color: #f4f4f4
}

.order-window .head.buy {
    background-color: #387ed1
}

.order-window .head.sell {
    background-color: #ff5722
}

.order-window .head .transaction-type {
    margin-right: 3px
}

.order-window .head .transaction-type-switch {
    margin: 0;
    float: right
}

.order-window .head .transaction-type-switch span {
    line-height: 14px
}

.order-window .head .el-switch.is-disabled .el-switch__core {
    background: rgba(0, 0, 0, .1) !important;
    border-color: rgba(0, 0, 0, .1) !important
}

.order-window .content {
    padding: 10px 15px 15px 15px
}

.order-window .content .advanced-options-toggle span {
    color: #9b9b9b;
    text-transform: uppercase
}

.order-window .content .el-radio__label {
    text-transform: uppercase
}

.order-window .content .el-radio__inner {
    width: 16px;
    height: 16px
}

.order-window .content .el-input {
    max-width: 100px
}

.order-window .content .el-form-item__label {
    color: #9b9b9b;
    text-transform: uppercase
}

.order-window .content .el-form-item.is-required .el-form-item__label:before {
    display: none
}

.order-window .content .row-5 .el-form-item {
    margin-bottom: 0
}

.order-window .content .actions button {
    min-width: 75px
}

.order-window .content .actions button.modify.buy,
.order-window .content .actions button.place.buy {
    color: #fff;
    background-color: #387ed1;
    border-color: #387ed1
}

.order-window .content .actions button.modify.sell,
.order-window .content .actions button.place.sell {
    color: #fff;
    background-color: #f6461a;
    border-color: #f6461a
}

.chart-container {
    position: relative;
    height: 160px;
    width: 100%
}

.dashboard .donut-container,
.dashboard .donut-container .donut-chart-container {
    margin-top: 0 !important
}

.dashboard .donut-container .donut-chart-container #comm_donut .data-path:hover,
.dashboard .donut-container .donut-chart-container #eq_donut .data-path:hover {
    cursor: pointer
}

.dashboard .donut-container .donut-chart-container #comm_donut .data-text,
.dashboard .donut-container .donut-chart-container #eq_donut .data-text {
    transition: transform .2s ease-in-out;
    fill: #666
}

.dashboard .donut-container .donut-chart-container #comm_donut .data-text__section,
.dashboard .donut-container .donut-chart-container #eq_donut .data-text__section {
    font-size: 1rem;
    transform: translateY(-.5rem);
    -moz-transform: translateY(0);
    opacity: 0
}

.dashboard .donut-container .donut-chart-container #comm_donut .data-text__value,
.dashboard .donut-container .donut-chart-container #eq_donut .data-text__value {
    font-size: 1rem;
    transform: translateY(.15rem);
    -moz-transform: translateY(1.5rem);
    opacity: 0;
    fill: #444
}

.dashboard .donut-container .donut-chart-container #comm_donut .data-text__name,
.dashboard .donut-container .donut-chart-container #eq_donut .data-text__name {
    font-size: .85rem;
    transform: translateY(-1.5rem);
    -moz-transform: translateY(-.25rem);
    opacity: 0
}

.dashboard .donut-container .donut-chart-container #comm_donut .data-text--show,
.dashboard .donut-container .donut-chart-container #eq_donut .data-text--show {
    -webkit-animation: fadeGraphTextIn .5s forwards;
    animation: fadeGraphTextIn .5s forwards
}

.dashboard .donut-container .donut-chart-container #comm_donut .data-text:hover,
.dashboard .donut-container .donut-chart-container #eq_donut .data-text:hover {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.dashboard .donut-container .donut-chart-container #comm_donut .legend-text,
.dashboard .donut-container .donut-chart-container #eq_donut .legend-text {
    fill: #fff
}

@-webkit-keyframes fadeGraphTextIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.share-modal h1 img {
    vertical-align: middle;
    height: 19px;
    margin-right: 10px
}

.share-modal .refer-link-label {
    margin-bottom: 10px
}

.share-modal .refer-link-label a {
    margin-left: 10px;
    top: 2px;
    position: relative
}

.share-modal img.refer-head-img {
    height: 60px;
    width: auto;
    position: relative;
    top: 2px
}

.share-modal .refer-message {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.8
}

.share-modal .refer-message p {
    width: 100%
}

.share-modal .refer-message p a {
    font-size: 12px;
    margin-left: 5px
}

.share-modal .refer-link .refer-link-label img {
    max-width: 18px;
    opacity: .8
}

.share-modal .refer-link .refer-link-label img:hover {
    opacity: 1
}

.share-modal .refer-link .su-input-group {
    display: inline-block;
    margin-bottom: 0
}

.share-modal .refer-link .su-input-group input {
    width: 235px
}

.share-modal .refer-link button {
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    position: relative !important;
    top: -2px !important;
    left: -22px !important
}

p.legend-name {
    display: inline-block;
    width: 115px;
    margin: 0
}

.l1 {
    background: #4bb56a
}

.l2 {
    background: #ffcb48
}

.l3 {
    background: #5f4899
}

.l4 {
    background: #fc890d
}

.l5 {
    background: #0059c1
}

.l6 {
    background: #2cb9ff
}

.l7 {
    background: #9946eb
}

.legend-color {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 7px
}

.legends h3 {
    padding-left: 20px;
    margin-top: 5px;
    margin-bottom: 15px
}

.legends span {
    color: #0059c1
}

.legends .legend-breakdown,
.legends span {
    display: inline-block
}

.link-underline {
    text-decoration: underline !important
}

.tooltip-label {
    display: inline-block !important
}

.dashboard-section .update-tags {
    font-size: 12px;
    float: right;
    position: relative;
    right: 5px;
    top: 3px
}

.dashboard-section .update-tags .update-tag-date {
    color: #0059c1
}

.dashboard-section .update-tags img {
    width: 12px;
    position: relative;
    margin-right: 3px;
    top: 1px
}

.dashboard-section h1 {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 40px
}

.dashboard-section .row.custom-row .six {
    width: 50% !important
}

.dashboard-section .row.custom-row .six:first-child {
    position: relative;
    padding-right: 4%
}

.dashboard-section .row.custom-row .six:last-child {
    position: relative;
    padding-left: 4%;
    margin-left: 0
}

.dashboard-section .border-right {
    border-right: 1px solid #eee;
    padding-bottom: 50px
}

.dashboard-section .state-process {
    margin-top: 0
}

.dashboard-section .comm-disabled img,
.dashboard-section .eq-disabled img {
    height: 100px;
    margin-top: 25px;
    position: relative;
    left: 7px
}

.dashboard-section .comm-disabled a,
.dashboard-section .eq-disabled a {
    color: #fff !important;
    font-size: 13px;
    font-weight: 400;
    height: 37px;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 1
}

.dashboard-section .comm-disabled p,
.dashboard-section .eq-disabled p {
    margin-top: 15px;
    margin-bottom: 25px
}

.dashboard-section .comm-disabled {
    padding-left: 8%
}

.dashboard-section .eq-disabled {
    padding-right: 8%
}

.acValue-chart-section h2 span:first-child img {
    position: relative;
    top: 3px
}

.acValue-chart-section h2 .share-link {
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    color: #0059c1;
    top: -2px;
    left: 15px
}

.acValue-chart-section h2 .share-link:hover {
    cursor: pointer
}

.acValue-chart-section h2 .share-link img {
    height: 18px;
    margin-right: 4px;
    vertical-align: middle
}

.acValue-chart-section #mouse {
    position: absolute;
    top: 50px;
    left: 0
}

.acValue-chart-section .acvalue-summary {
    font-size: 1rem;
    padding-left: 30px
}

.acValue-chart-section .acvalue-summary img {
    height: 15px;
    width: auto;
    margin-right: 5px;
    position: relative;
    top: 1px
}

.acValue-chart-section .acvalue-summary .summary-date-container {
    margin-bottom: 10px
}

.acValue-chart-section .acvalue-summary .summary-value {
    color: #0059c1;
    font-size: 1.25rem;
    display: block;
    margin-top: 5px
}

.acValue-chart-section .acvalue-summary .summary-date-value {
    font-size: 1.15rem
}

.acValue-chart-section .acvalue-summary .separator {
    margin-left: 10px;
    margin-right: 10px
}

.acValue-chart-section .acvalue-summary .summary-container .summary-values {
    margin-bottom: 10px
}

.acValue-chart-section .acvalue-summary .summary-container label {
    display: inline-block !important
}

.acValue-chart-section .acvalue-summary .summary-container .acvalue-events {
    margin-top: 20px
}

.acValue-chart-section .acvalue-summary .summary-container .acvalue-events h3 {
    margin-bottom: 10px;
    display: inline-block
}

.acValue-chart-section .acvalue-summary .summary-container .acvalue-events .summary-values {
    margin-top: 5px !important
}

.acValue-chart-section .acvalue-summary .summary-container .acvalue-events .summary-values label,
.acValue-chart-section .acvalue-summary .summary-container .acvalue-events .summary-values span {
    display: inline-block !important
}

.acValue-chart-section .acvalue-summary .summary-container .acvalue-events .summary-values label {
    margin-right: 10px
}

.acValue-chart-section .acvalue-summary .summary-container .acvalue-events .summary-values span {
    margin-right: 15px
}

.acValue-chart-section .chart-switch-container {
    display: inline-block;
    float: right;
    position: relative;
    top: 5px
}

.acValue-chart-section .chart-inner-container {
    position: relative
}

.acValue-chart-section .chart-inner-container img {
    display: none;
    position: relative;
    top: 20px;
    left: 40px
}

.acValue-chart-section .chart-inner-container canvas {
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 3% 2%
}

.acValue-chart-section .chart-inner-container .benchmark-container {
    position: absolute;
    right: 20px;
    top: 15px
}

.acValue-chart-section .chart-inner-container .benchmark-container select {
    max-width: 130px;
    border: 1px solid #e1e1e1 !important;
    margin-left: 10px
}

.acValue-chart-section .reset-benchmark {
    background: none;
    height: auto;
    border: none;
    padding: 0;
    margin-right: 10px
}

.acValue-chart-section .reset-benchmark img {
    width: 20px
}

.acValue-chart-section .eqSwitch {
    display: inline-block;
    color: #9b9b9b;
    padding: 0 15px;
    text-align: center;
    font-size: 1rem;
    letter-spacing: .3px;
    line-height: 1.1
}

.acValue-chart-section .eqSwitch.active {
    color: #0059c1
}

.acValue-chart-section .eqSwitch:hover {
    cursor: pointer;
    color: #0059c1
}

.acValue-chart-section .comSwitch {
    display: inline-block;
    color: #9b9b9b;
    border-left: 1px solid #9b9b9b;
    padding: 0 15px;
    text-align: center;
    font-size: 1rem;
    letter-spacing: .3px;
    line-height: 1.1;
    margin-left: 10px;
    padding-left: 20px
}

.acValue-chart-section .comSwitch.active {
    color: #0059c1
}

.acValue-chart-section .comSwitch:hover {
    cursor: pointer;
    color: #0059c1
}

.acValue-chart-section .switch {
    position: relative;
    display: inline-block !important;
    width: 45px;
    height: 20px;
    margin-right: 10px
}

.acValue-chart-section .switch input {
    opacity: 0;
    width: 0;
    height: 0
}

.acValue-chart-section .slider {
    position: absolute;
    display: inline-block;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ff5722;
    transition: .4s
}

.acValue-chart-section .slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: #fff;
    transition: .4s
}

.acValue-chart-section input:checked+.slider {
    background-color: #2196f3
}

.acValue-chart-section input:focus+.slider {
    box-shadow: 0 0 1px #2196f3
}

.acValue-chart-section input:checked+.slider:before {
    transform: translateX(26px)
}

.acValue-chart-section .slider.round {
    border-radius: 34px
}

.acValue-chart-section .slider.round:before {
    border-radius: 50%
}

.dashboard-card {
    box-shadow: 4px 8px 16px -8px #d5d5d5;
    padding: 15px 30px;
    border: 1px solid #eee;
    border-radius: 2px;
    min-height: 600px
}

.products-card {
    background: #fafafb;
    padding: 35px;
    border-radius: 2px
}

.products-card img {
    width: 40px
}

.products-card .kite-logo {
    width: 47px
}

.products-card .varsity-logo {
    width: 76px
}

.products-card h1 {
    margin-top: 5px
}

.bulletin-head img {
    position: relative;
    top: 2px;
    margin-right: 5px;
    width: 21px
}

.product-container {
    color: #444 !important;
    display: block
}

.product-container:hover {
    opacity: .8;
    cursor: pointer
}

.news-container p {
    margin-top: 5px;
    margin-bottom: 20px
}

.pledge-color {
    background-color: #387ed1
}

.holdings-color {
    background-color: #fed51c
}

.marginBl-color {
    background-color: #ff5722
}

.free-color {
    background-color: #4caf50
}

.legend-row {
    margin-bottom: 5px;
    font-size: 14px;
    color: #666
}

.legend-row:first-child {
    margin-top: 40px
}

.welcome-text {
    margin-bottom: 50px;
    display: inline-block
}

.console-banner {
    display: none
}

.stats-block {
    padding: 20px
}

.stats-block p {
    font-weight: 400;
    margin: 0
}

.stats-block h2 {
    margin: 0;
    text-transform: capitalize
}

.stats-block h2 span {
    margin-right: 5px
}

.stats-block .value {
    font-weight: 400
}

.stats-block .label {
    color: #9b9b9b
}

.stats-block .primary-stats {
    margin-bottom: 30px
}

.stats-block .secondary-stats .value {
    font-size: 1.25rem;
    color: #387ed1
}

.stats-block .portfolio-stats {
    margin-top: 20px;
    margin-bottom: 40px
}

.stats-block .portfolio-stats .primary-stats .value {
    font-size: 1.9rem
}

.stats-block .portfolio-stats .pending-orders-stats {
    margin-bottom: 0
}

.stats-block .margins-stats {
    min-height: 150px
}

.stats-block .margins-stats .first,
.stats-block .margins-wrapper {
    border-right: 1px solid #eee
}

.loader {
    margin-left: 5px
}

.holdings-block,
.positions-block {
    min-height: 200px
}

@media only screen and (max-width:800px) {
    .acValue-chart-section {
        display: none !important
    }
}

@media only screen and (min-width:800px) {
    .console-banner {
        display: inline-block;
        float: right;
        margin-top: 5px
    }

    .console-banner a {
        max-width: 100%;
        display: flex;
        align-items: center
    }

    .console-banner a span {
        line-height: 1.4;
        font-size: 1.3rem;
        margin-left: 10px;
        color: #444;
        width: 175px
    }

    .console-banner a img {
        height: 55px
    }

    .console-banner:hover {
        opacity: .9;
        cursor: pointer
    }

    .summary-container .border-left {
        border-left: 1px solid #e1e1e1
    }
}

@media only screen and (max-width:325px) {

    .dashboard .dashboard-section #comm_card .update-tags,
    .dashboard .dashboard-section #equity_card .update-tags {
        left: 2px !important;
        bottom: -20px !important
    }
}

@media only screen and (max-width:1370px) {
    .dashboard [data-balloon].xl-tooltip:after {
        white-space: unset !important;
        width: 250px !important
    }
}

@media only screen and (max-width:800px) {
    .dashboard .grey-back-mobile {
        height: 85px !important
    }

    .dashboard .show-on-mobile.update-tags {
        float: none
    }

    .dashboard .mobile-agg {
        top: -80px !important
    }

    .dashboard .mobile-agg h1 {
        margin-bottom: 0
    }

    .dashboard .pull-up-section {
        top: -40px
    }

    .dashboard .benchmark-container {
        position: unset !important
    }

    .dashboard .summary-container .two {
        width: 50% !important
    }

    .dashboard .dashboard-section .border-right {
        padding-bottom: 0 !important
    }

    .dashboard .dashboard-section h2 {
        margin-bottom: 5px;
        font-size: 18px;
        text-align: center
    }

    .dashboard .dashboard-section .dashboard-section .border-right {
        padding-bottom: 0
    }

    .dashboard .dashboard-section .comm-disabled {
        padding-left: 0
    }

    .dashboard .dashboard-section .comm-donut-section.six,
    .dashboard .dashboard-section .equity-donut-section.six {
        width: 100% !important
    }

    .dashboard .dashboard-section .comm-donut-section.six .chart-container,
    .dashboard .dashboard-section .equity-donut-section.six .chart-container {
        margin-top: 15px
    }

    .dashboard .dashboard-section .comm-donut-section {
        display: none
    }

    .dashboard .dashboard-section #comm_card,
    .dashboard .dashboard-section #equity_card {
        padding: 10px !important;
        box-sizing: border-box;
        width: 47.5% !important;
        margin-bottom: 0
    }

    .dashboard .dashboard-section #comm_card .update-tags,
    .dashboard .dashboard-section #equity_card .update-tags {
        font-size: 10px;
        left: 10px;
        position: absolute;
        bottom: -25px;
        top: auto
    }

    .dashboard .dashboard-section #comm_card .update-tags img,
    .dashboard .dashboard-section #equity_card .update-tags img {
        width: 10px
    }

    .dashboard .dashboard-section #equity_card {
        margin-right: 5%
    }

    .dashboard .dashboard-section #comm_card.active,
    .dashboard .dashboard-section #equity_card.active {
        color: #0059c1;
        border-bottom: 1px solid #0059c1
    }

    .dashboard .dashboard-section #comm_card.active label,
    .dashboard .dashboard-section #equity_card.active label {
        color: #fff
    }

    .welcome-text {
        margin-bottom: 20px
    }

    .products-card a {
        text-align: center
    }
}

#eqAcValueChart .chart__line,
#eqAcValueChart .chart__payin--focus,
#eqAcValueChart .chart__payout--focus,
#eqAcValueChart .x.axis {
    -webkit-clip-path: url(#clipEq);
    clip-path: url(#clipEq)
}

.acvalue-chart-container {
    max-width: 100%;
    overflow: auto
}

#comAcValueChart .chart__line,
#comAcValueChart .chart__payin--focus,
#comAcValueChart .chart__payout--focus,
#comAcValueChart .x.axis {
    -webkit-clip-path: url(#clipCom);
    clip-path: url(#clipCom)
}

#comAcValueChart text,
#eqAcValueChart text {
    /* font-family: Inter, sans-serif */
}

#comAcValueChart .zoom,
#eqAcValueChart .zoom {
    cursor: move;
    fill: none;
    pointer-events: all
}

#comAcValueChart .chart__mf-holdings--focus,
#eqAcValueChart .chart__mf-holdings--focus {
    fill: none;
    stroke: #facb48;
    stroke-width: 2px
}

#comAcValueChart .chart__account-value--focus,
#eqAcValueChart .chart__account-value--focus {
    fill: none;
    stroke: #387ed1;
    stroke-width: 2px
}

#comAcValueChart .chart__equity-holdings--focus,
#eqAcValueChart .chart__equity-holdings--focus {
    fill: none;
    stroke: #4bb56a;
    stroke-width: 2px
}

#comAcValueChart .chart__overlay,
#eqAcValueChart .chart__overlay {
    fill: none;
    pointer-events: all
}

#comAcValueChart .brush .selection,
#eqAcValueChart .brush .selection {
    stroke: #fff;
    fill-opacity: .125;
    shape-rendering: crispEdges
}

#comAcValueChart .chart__range-selection text,
#eqAcValueChart .chart__range-selection text {
    cursor: pointer;
    text-decoration: underline;
    fill: #2980b9
}

#comAcValueChart .chart__axis--context text,
#eqAcValueChart .chart__axis--context text {
    fill: #7f8faf
}

#comAcValueChart .chart__axis--context .tick:nth-child(odd),
#comAcValueChart .chart__axis--context line,
#comAcValueChart .chart__axis--context path,
#eqAcValueChart .chart__axis--context .tick:nth-child(odd),
#eqAcValueChart .chart__axis--context line,
#eqAcValueChart .chart__axis--context path {
    display: none
}

#comAcValueChart .chart__area,
#eqAcValueChart .chart__area {
    fill: #e6f6fe;
    stroke: #3587bc
}

#comAcValueChart .selection,
#eqAcValueChart .selection {
    fill: #e2f0ff;
    fill: #3587bc;
    fill-opacity: .3
}

#comAcValueChart .grid line,
#eqAcValueChart .grid line {
    stroke: #d3d3d3;
    stroke-opacity: .6;
    shape-rendering: crispEdges
}

#comAcValueChart .grid path,
#eqAcValueChart .grid path {
    stroke-width: 0
}

#comAcValueChart .y.axis path,
#eqAcValueChart .y.axis path {
    color: #e8e8e8
}

#comAcValueChart .y.axis .tick,
#eqAcValueChart .y.axis .tick {
    color: #8c8b8b
}

#comAcValueChart .x.axis path,
#eqAcValueChart .x.axis path {
    color: #e8e8e8
}

#comAcValueChart .x.axis .tick,
#eqAcValueChart .x.axis .tick {
    color: #8c8b8b
}

.page-container.holdings .head-section {
    margin-bottom: 40px
}

.page-container.holdings .close-mobile-filter {
    display: none
}

.page-container.holdings .icon-times {
    width: 22px;
    height: 22px;
    border-radius: 50% !important;
    padding: 0 !important
}

.page-container.holdings .icon-times:before {
    position: relative;
    left: 2.5px;
    top: 0
}

.page-container.holdings .icon-times:hover {
    background: #ccc
}

.page-container.holdings .family-web-apply button {
    margin-right: 15px
}

.page-container.holdings .donut-reset {
    margin: 0;
    position: relative;
    top: 15px
}

.page-container.holdings .symbol [data-balloon][data-balloon-pos=up]:after {
    left: calc(50% + 85px)
}

.page-container.holdings .no-family .state-process-container {
    width: 450px
}

.page-container.holdings .no-family a.btn {
    font-size: .875rem;
    padding: 7px 15px;
    font-weight: 400;
    line-height: 21px;
    height: 38px;
    -webkit-appearance: button;
    cursor: pointer;
    box-sizing: border-box
}

.page-container.holdings .no-family img {
    width: 270px;
    height: auto
}

.page-container.holdings .pull-up-section {
    top: -70px
}

.page-container.holdings .family-card-box {
    max-height: 235px;
    overflow: scroll
}

.page-container.holdings .summary-breakdown {
    margin-bottom: 5px;
    font-size: 14px;
    margin-top: 20px
}

.page-container.holdings .summary-breakdown .icon {
    margin-left: 10px
}

.page-container.holdings .summary-breakdown-container {
    padding-top: 25px;
    border-top: 1px solid #eee;
    margin-top: 20px
}

.page-container.holdings .summary-breakdown-container .table-container {
    max-height: 350px
}

.page-container.holdings #family_donut .data-path:hover {
    cursor: pointer
}

.page-container.holdings #family_donut .data-text {
    transition: transform .2s ease-in-out;
    fill: #666
}

.page-container.holdings #family_donut .data-text__section {
    font-size: 1rem;
    transform: translateY(-.5rem);
    -moz-transform: translateY(0);
    opacity: 0
}

.page-container.holdings #family_donut .data-text__value {
    font-size: 1rem;
    transform: translateY(.15rem);
    -moz-transform: translateY(1.5rem);
    opacity: 0;
    fill: #444
}

.page-container.holdings #family_donut .data-text__name {
    font-size: .85rem;
    transform: translateY(-1.5rem);
    -moz-transform: translateY(-.25rem);
    opacity: 0
}

.page-container.holdings #family_donut .data-text--show {
    -webkit-animation: fadeGraphTextIn .5s forwards;
    animation: fadeGraphTextIn .5s forwards
}

.page-container.holdings #family_donut .data-text:hover {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.page-container.holdings #family_donut .legend-text {
    fill: #fff
}

.page-container.holdings .summary-breakdown-table tbody tr td {
    vertical-align: middle !important
}

.page-container.holdings .summary-breakdown-card .summary-clientid {
    position: relative;
    left: 5px;
    top: 2px
}

.page-container.holdings .summary-breakdown-card .top-left {
    flex: 20 !important
}

.page-container.holdings .summary-breakdown-card .bottom-left label,
.page-container.holdings .summary-breakdown-card .middle-left label {
    width: 57px
}

.page-container.holdings .family-card {
    position: relative;
    padding: 12px 0 12px 20px;
    border-bottom: 1px solid #eee
}

.page-container.holdings .family-card .family-checkbox-label {
    color: initial !important
}

.page-container.holdings .family-card .family-checkbox-label .family-name {
    text-transform: capitalize
}

.page-container.holdings .family-card input {
    visibility: hidden;
    position: absolute
}

.page-container.holdings .family-card .checkmark {
    position: absolute;
    top: 12px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%
}

.page-container.holdings .family-card .checkmark:after {
    left: 6px;
    top: 3px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

.page-container.holdings .family-card input:checked~.checkmark {
    background-color: #0059c1
}

.page-container.holdings .family-card .checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.page-container.holdings .family-card input:checked~.checkmark:after {
    display: block
}

.page-container.holdings .mobile-agg {
    padding-left: 25px !important;
    padding-right: 25px !important;
    padding-top: 15px !important;
    padding-bottom: 10px !important;
    top: -115px !important
}

.page-container.holdings .mobile-agg hr {
    width: calc(100% + 52px);
    position: relative;
    left: -26px;
    margin-top: 15px;
    margin-bottom: 10px
}

.page-container.holdings .mobile-agg h1 {
    margin-bottom: 0
}

.page-container.holdings .mobile-agg .row:last-child h1 {
    margin-top: 0
}

.page-container.holdings .mobile-agg .block {
    margin-bottom: 10px
}

.page-container.holdings .mobile-agg .eight {
    flex-basis: 120%;
    padding-left: 30px
}

.page-container.holdings .blocked-qty {
    color: #666;
    font-weight: 600;
    font-size: .875rem;
    display: inline-block
}

.page-container.holdings .include-mf {
    margin-top: 15px;
    margin-bottom: 60px;
    margin-right: 10px
}

.page-container.holdings .include-mf .su-checkbox-group {
    display: inline-block
}

.page-container.holdings .mf-weightage {
    padding: 3px 10px;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    line-height: 1.4 !important;
    color: #4184f3;
    background-color: rgba(65, 132, 243, .1);
    position: relative;
    top: -3px
}

.page-container.holdings .filter-component .su-input-label {
    z-index: 999;
    line-height: 1 !important;
    top: -6px
}

.page-container.holdings .table-link-container {
    display: inline-block;
    float: right
}

.page-container.holdings .table-link-container .scroll-discrepant {
    font-size: 1rem;
    position: relative;
    top: 1px;
    right: 10px;
    padding: 10px
}

.page-container.holdings .table-link-container .scroll-discrepant:hover {
    opacity: .9;
    cursor: pointer
}

.page-container.holdings .table-link-container .scroll-discrepant img {
    position: relative;
    top: 3px;
    height: 16px;
    margin-right: 2px
}

.page-container.holdings #account_chart .data-path:hover,
.page-container.holdings #sector_chart .data-path:hover,
.page-container.holdings #stock_chart .data-path:hover {
    cursor: pointer
}

.page-container.holdings #account_chart .data-text,
.page-container.holdings #sector_chart .data-text,
.page-container.holdings #stock_chart .data-text {
    transition: transform .2s ease-in-out;
    fill: #666
}

.page-container.holdings #account_chart .data-text__section,
.page-container.holdings #sector_chart .data-text__section,
.page-container.holdings #stock_chart .data-text__section {
    font-size: 1rem;
    transform: translateY(-.5rem);
    -moz-transform: translateY(0);
    opacity: 0
}

.page-container.holdings #account_chart .data-text__value,
.page-container.holdings #sector_chart .data-text__value,
.page-container.holdings #stock_chart .data-text__value {
    font-size: 1rem;
    transform: translateY(.15rem);
    -moz-transform: translateY(1.5rem);
    opacity: 0;
    fill: #444
}

.page-container.holdings #account_chart .data-text__name,
.page-container.holdings #sector_chart .data-text__name,
.page-container.holdings #stock_chart .data-text__name {
    font-size: .85rem;
    transform: translateY(-1.5rem);
    -moz-transform: translateY(-.25rem);
    opacity: 0
}

.page-container.holdings #account_chart .data-text--show,
.page-container.holdings #sector_chart .data-text--show,
.page-container.holdings #stock_chart .data-text--show {
    -webkit-animation: fadeGraphTextIn .5s forwards;
    animation: fadeGraphTextIn .5s forwards
}

.page-container.holdings #account_chart .data-text:hover,
.page-container.holdings #sector_chart .data-text:hover,
.page-container.holdings #stock_chart .data-text:hover {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.page-container.holdings #account_chart .legend-text,
.page-container.holdings #sector_chart .legend-text,
.page-container.holdings #stock_chart .legend-text {
    fill: #fff
}

@keyframes fadeGraphTextIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.page-container.holdings #stock_chart .data-text__section {
    font-size: .85rem
}

.page-container.holdings #stock_chart .data-text__value {
    font-size: .875rem
}

.page-container.holdings #stock_chart .data-text__name {
    font-size: .75rem;
    transform: translateY(-1.25rem)
}

.page-container.holdings #insights_frame {
    display: inline-block;
    margin: 0;
    margin-top: 30px;
    height: 450px;
    max-width: 620px;
    width: 100%;
    border: none
}

.page-container.holdings .iframe-side-container {
    display: inline-block;
    vertical-align: top;
    min-width: 200px;
    padding-left: 40px
}

.page-container.holdings .iframe-side-container div:first-child:not(.iframe-tags) {
    margin-top: 35px
}

.page-container.holdings .iframe-side-container .iframe-tags {
    padding: 10px;
    border-bottom: 1px solid #eee;
    position: relative
}

.page-container.holdings .iframe-side-container .iframe-tags:hover {
    cursor: pointer;
    background: #f4f4f4
}

.page-container.holdings .iframe-side-container .iframe-tags.active {
    background: #f4f4f4
}

.page-container.holdings .iframe-side-container .iframe-tags.active:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 22px solid transparent;
    border-right: 22px solid #f4f4f4;
    border-bottom: 22px solid transparent;
    display: inline-block;
    left: -21px;
    top: 0
}

.page-container.holdings .iframe-side-container .iframe-tags .iframe-tag-name {
    display: inline-block;
    margin-right: 20px;
    font-size: .85rem
}

.page-container.holdings .iframe-side-container .iframe-tags .iframe-tag-type {
    display: inline-block;
    float: right;
    padding: 3px 5px 3px 5px;
    border-radius: 3px;
    line-height: 1.7;
    text-transform: uppercase;
    font-size: .675rem;
    line-height: 1.9
}

.page-container.holdings .iframe-side-container .iframe-tags .iframe-tag-type.sector-tag {
    background: rgba(0, 84, 198, .2);
    color: #0059c1
}

.page-container.holdings .iframe-side-container .iframe-tags .iframe-tag-type.stock-tag {
    background: rgba(255, 196, 61, .2);
    color: #ca9a2d
}

.page-container.holdings .mf-compo-container {
    max-width: 530px !important
}

.page-container.holdings .holdings-total .triangle {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    margin-right: 3px;
    position: relative
}

.page-container.holdings .holdings-total .triangle.pos {
    vertical-align: middle;
    bottom: 7px;
    border-bottom: 11px solid #555;
    border-bottom-color: #10b983
}

.page-container.holdings .holdings-total .triangle.neg {
    top: 6px;
    vertical-align: middle;
    border-top: 12px solid #555;
    border-top-color: #f35631
}

.page-container.holdings .tab {
    padding: 10px 20px;
    display: inline-block;
    border-bottom: 1px solid #eee;
    position: relative;
    top: 1px;
    text-align: center;
    cursor: pointer;
    min-width: 150px;
    box-sizing: border-box
}

.page-container.holdings .tab.active {
    border-bottom: 2px solid #0059c1
}

.page-container.holdings .chart-switch .treemap-share-link {
    position: relative;
    top: 1px;
    font-size: 16px;
    color: #0059c1
}

.page-container.holdings .chart-switch .treemap-share-link:hover {
    cursor: pointer;
    opacity: .7
}

.page-container.holdings .chart-switch .treemap-share-link img {
    height: 16px;
    position: relative;
    top: 2px
}

.page-container.holdings .clear {
    position: absolute;
    border-radius: 50%;
    font-size: 12px;
    right: 0;
    z-index: 1;
    top: 10px;
    right: 10px;
    cursor: pointer;
    background: #eee;
    left: auto
}

.page-container.holdings .donut-container {
    margin-top: 25px;
    position: relative
}

.page-container.holdings .donut-container .donut-chart-container {
    margin-top: 10px
}

.page-container.holdings .donut-container .donut-chart-container .chart-columns:first-child {
    margin-left: 0 !important
}

.page-container.holdings .donut-container .donut-chart-container .chart-columns h2 {
    font-size: 16px;
    width: 78px;
    text-align: center;
    border-radius: 3px;
    padding: 1px 0
}

.page-container.holdings .donut-container .switches {
    margin-bottom: 10px
}

.page-container.holdings .donut-container .donut-chart {
    display: inline-block !important;
    width: 180px;
    height: 180px;
    box-sizing: border-box
}

.page-container.holdings .donut-container ::-webkit-scrollbar {
    width: 3px
}

.page-container.holdings .donut-container ::-webkit-scrollbar-track {
    background: #fff
}

.page-container.holdings .donut-container ::-webkit-scrollbar-thumb {
    background: #e0e3ec
}

.page-container.holdings .donut-container ::-webkit-scrollbar-thumb:hover {
    background: #555;
    width: 3px
}

.page-container.holdings .donut-container [data-balloon]:after {
    max-width: 90px;
    font-size: 10px;
    padding: 3px 10px 5px 10px;
    white-space: normal
}

.page-container.holdings .donut-container [data-balloon][data-balloon-pos=down]:after,
.page-container.holdings .donut-container [data-balloon][data-balloon-pos=down]:before {
    top: 80%
}

.page-container.holdings .donut-container [data-balloon][data-balloon-pos=up]:after,
.page-container.holdings .donut-container [data-balloon][data-balloon-pos=up]:before {
    bottom: 80%
}

.page-container.holdings .donut-container .labels {
    display: inline-block;
    width: 150px;
    vertical-align: top;
    margin-left: 15px;
    margin-top: 15px;
    max-height: 170px;
    height: 170px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: green
}

.page-container.holdings .donut-container .labels .label {
    display: block;
    font-size: .75rem;
    line-height: 1rem;
    padding: 3px;
    border-radius: 2px;
    margin-bottom: 5px;
    max-width: 135px;
    color: #666
}

.page-container.holdings .donut-container .labels .label .label-weight {
    float: right
}

.page-container.holdings .donut-container .labels .label.active {
    background: #eee
}

.page-container.holdings .donut-container .labels .label:hover {
    cursor: pointer
}

.page-container.holdings .donut-container .labels .label .label-name {
    display: inline-block
}

.page-container.holdings .donut-container .labels .label .label-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 8px;
    top: 0;
    margin-right: 4px
}

.page-container.holdings #logo_img {
    display: none;
    position: relative;
    top: -5px
}

.page-container.holdings .treemap-container {
    margin-top: 25px
}

.page-container.holdings .treemap-container #treemap_share_container {
    width: 100%
}

.page-container.holdings .treemap-container h2 span:hover {
    cursor: pointer
}

.page-container.holdings .treemap-container #treemap_stats {
    display: none;
    text-align: center;
    margin: 0 auto;
    position: relative;
    height: 65px;
    top: -60px
}

.page-container.holdings .treemap-container #treemap_stats span.stats-obj {
    color: #9b9b9b;
    width: 550px;
    display: block
}

.page-container.holdings .treemap-container #treemap_stats span.stats-obj span {
    display: block;
    text-align: center;
    font-size: 16px;
    margin-top: 10px;
    color: #0059c1;
    font-weight: 600
}

.page-container.holdings .treemap-container #treemap_stats span.stats-obj span i {
    font-style: normal
}

.page-container.holdings .treemap-container #treemap_stats span.stats-obj:first-child {
    margin-bottom: 0
}

.page-container.holdings .treemap-container #treemap_stats span.stats-obj:last-child {
    border-left: 2px solid #e1e1e1;
    padding-left: 2%;
    margin-left: 2%;
    position: relative;
    left: 550px;
    bottom: 55px
}

.page-container.holdings .smallcase-wrapper .modal-container {
    width: 630px;
    padding: 10px 20px !important
}

.page-container.holdings .iframe-container {
    overflow: auto
}

.page-container.holdings .iframe-container iframe {
    border: none;
    width: 100%;
    height: 350px
}

.page-container.holdings .table-download {
    margin-bottom: 0 !important
}

.page-container.holdings .table-download a:hover {
    color: #444 !important
}

.page-container.holdings .table-download:hover {
    cursor: default !important;
    opacity: 1 !important
}

.page-container.holdings .download-link {
    border-left: 1px solid #4184f3;
    padding-left: 25px
}

.page-container.holdings .inputcontainer .two {
    width: 10.33333%
}

.page-container.holdings .inputcontainer .three:not(.gift-inputs) {
    width: 25%
}

.page-container.holdings .inputs-collapsed .filters .filter-filter {
    background: rgba(194, 112, 200, .2);
    color: #c270c8
}

.page-container.holdings .section .filters .manage-tags-link {
    display: inline-block;
    float: right;
    position: relative;
    top: 12px;
    font-size: 12px
}

.page-container.holdings .section .filters .filters-list {
    display: inline-block
}

.page-container.holdings .section .filters .filters-label {
    margin-bottom: 5px;
    margin-top: 8px
}

.page-container.holdings .section .su-checkbox-group {
    line-height: 1.4
}

.page-container.holdings .section .su-checkbox-group .su-checkbox-box {
    top: 3px
}

.page-container.holdings .section .unpledge-modal input {
    position: relative;
    top: 3px
}

.page-container.holdings .section .unpledge-modal .holdings-modal-label {
    min-width: auto !important
}

.page-container.holdings .section .cancel-pledge-modal .modal-container,
.page-container.holdings .section .unpledge-modal .modal-container {
    width: 555px
}

.page-container.holdings .section .cancel-pledge-modal button[disabled],
.page-container.holdings .section .pledge-modal button[disabled] {
    background: #9b9b9b;
    border: 1px solid #9b9b9b;
    border-radius: 2px;
    color: #fff
}

.page-container.holdings .section .pledge-modal .modal-container {
    max-height: 100vh;
    overflow: auto
}

.page-container.holdings .section .disc-list-container {
    max-height: 60vh;
    overflow: auto
}

.page-container.holdings .section .disc-list {
    padding: 20px 10px;
    border-bottom: 1px solid #f1f1f1;
    overflow: auto
}

.page-container.holdings .section .disc-list:hover {
    cursor: pointer;
    background: #fafafb
}

.page-container.holdings .section .disc-list span.status-flag {
    background: rgba(255, 85, 85, .15);
    color: #f6461a;
    font-size: .875rem;
    padding: 3px 11px;
    border-radius: 2px;
    min-width: 105px;
    text-align: center;
    display: inline-block;
    float: right
}

.page-container.holdings .section .disc-list span.instrument-name {
    max-width: 55%;
    display: inline-block;
    overflow: hidden;
    word-break: break-word
}

.page-container.holdings .section .activeInstrument {
    background: #fafafb
}

.page-container.holdings .section .disc-info {
    padding-left: 30px;
    border-left: 1px solid #f1f1f1
}

.page-container.holdings .section .discrepant-link {
    float: right;
    font-size: 1rem
}

.page-container.holdings .section .discrepant-link a {
    text-decoration: none
}

.page-container.holdings .section .discrepant-link a img {
    position: relative;
    top: 5px
}

.page-container.holdings .section .add-trade-container {
    line-height: 37px;
    margin-bottom: 0
}

.page-container.holdings .section #external_trades .context-menu {
    visibility: hidden
}

.page-container.holdings .section #external_trades tbody tr td:first-child,
.page-container.holdings .section #external_trades thead tr td:first-child {
    width: 230px
}

.page-container.holdings .section #external_trades tbody tr:hover .context-menu {
    visibility: visible
}

.page-container.holdings .section #external_trades tr {
    border-bottom: 1px solid #f1f1f1;
    padding: 10px 5px
}

.page-container.holdings .section #external_trades thead {
    color: #9b9b9b
}

.page-container.holdings .section #external_trades .delete-disc,
.page-container.holdings .section #external_trades .edit-disc {
    display: none;
    width: .875rem
}

.page-container.holdings .section #external_trades .delete-disc:hover,
.page-container.holdings .section #external_trades .edit-disc:hover {
    cursor: pointer
}

.page-container.holdings .section #external_trades .edit-disc {
    position: relative;
    right: 15px
}

.page-container.holdings .section #external_trades tbody tr:hover {
    background: #fafafb
}

.page-container.holdings .section #external_trades tbody tr:hover .delete-disc,
.page-container.holdings .section #external_trades tbody tr:hover .edit-disc {
    display: inline
}

.page-container.holdings .section #external_trades tbody tr td:last-child {
    min-width: 40px
}

.page-container.holdings .section #external_trades tbody .pending-flag {
    background: rgba(255, 202, 85, .15);
    color: #f8ab00;
    text-transform: uppercase;
    font-size: .6875rem;
    padding: 3px 11px;
    border-radius: 2px;
    position: relative;
    left: 20px
}

.page-container.holdings .section .add-external-trade {
    float: right
}

.page-container.holdings .section .trade-type {
    padding: 3px 10px;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    line-height: 1.4 !important;
    color: #4184f3;
    background-color: rgba(65, 132, 243, .1);
    margin-left: 10px
}

.page-container.holdings .section .modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease
}

.page-container.holdings .section .modal-wrapper {
    display: table-cell;
    vertical-align: middle
}

.page-container.holdings .section .smallcase-modal {
    padding: 20px 0 !important
}

.page-container.holdings .section .smallcase-modal .modal-body {
    margin: 0 !important
}

.page-container.holdings .section .modal-container {
    margin: 0 auto;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    box-sizing: border-box;
    transition: all .3s ease;
    max-width: 100%
}

.page-container.holdings .section .modal-body,
.page-container.holdings .section .modalbody {
    margin: 20px 0
}

.page-container.holdings .section .modal-body .holdings-breakdown-name,
.page-container.holdings .section .modalbody .holdings-breakdown-name {
    margin: 0
}

.page-container.holdings .section .modal-body .modal-separator,
.page-container.holdings .section .modalbody .modal-separator {
    margin: 20px 0
}

.page-container.holdings .section .modal-body .holdings-breakdown-qty,
.page-container.holdings .section .modalbody .holdings-breakdown-qty {
    margin-bottom: 20px
}

.page-container.holdings .section .modal-body .holdings-breakdown-qty .five.borderRight,
.page-container.holdings .section .modalbody .holdings-breakdown-qty .five.borderRight {
    border-right: 1px solid #e1e1e1
}

.page-container.holdings .section .modal-body .holdings-modal-label,
.page-container.holdings .section .modalbody .holdings-modal-label {
    position: relative;
    margin-right: 5px;
    min-width: 30px;
    display: inline-block
}

.page-container.holdings .section .modal-body select:disabled,
.page-container.holdings .section .modalbody select:disabled {
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0h1L0 6V5zm1 5v1H5z' fill='%23ddd' fill-rule='evenodd'/%3E%3C/svg%3E") !important;
    color: #ccc;
    cursor: not-allowed;
    box-sizing: border-box;
    padding: 6px;
    border-color: transparent
}

.page-container.holdings .section .modal-default-button {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    font-size: 22px !important;
    padding: 0
}

.page-container.holdings .section .modal-enter,
.page-container.holdings .section .modal-leave-active {
    opacity: 0
}

.page-container.holdings .section .modal-enter .modal-container,
.page-container.holdings .section .modal-leave-active .modal-container {
    transform: scale(1.1)
}

.page-container.holdings .section input {
    max-width: 100%
}

.page-container.holdings .section .last-updated {
    float: left;
    margin-bottom: 0 !important
}

@media only screen and (max-width:800px) {
    .page-container.holdings .section .tab {
        padding: 10px 5px
    }

    .page-container.holdings .section .table-sort.no-float {
        float: none !important
    }

    .page-container.holdings .section .summary-breakdown {
        padding-left: 10px
    }

    .page-container.holdings .section .family-filter {
        padding: 0 10px
    }

    .page-container.holdings .section .family-link {
        font-size: 16px;
        padding: 10px 0 15px 0;
        display: block;
        border-bottom: 1px solid #eee;
        margin-bottom: 20px
    }

    .page-container.holdings .section .family-link .family-head span {
        margin-left: 10px
    }

    .page-container.holdings .section .family-link .icon,
    .page-container.holdings .section .family-list .select-links a:last-child {
        float: right
    }

    .page-container.holdings .section .disc-info {
        padding-left: 0;
        border: none
    }

    .page-container.holdings .section .open-side-nav {
        margin-top: 20px;
        font-size: 1rem
    }

    .page-container.holdings .section .mobileFilter .ti-new-tag-input-wrapper input {
        pointer-events: none
    }

    .page-container.holdings .section .mobileFilter.mobile {
        background: #fff;
        z-index: 9999;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        max-height: 100vh;
        height: 100vh;
        overflow: auto;
        display: block
    }

    .page-container.holdings .section .mobileFilter.mobile .close-mobile-filter {
        width: 15%;
        display: inline-block;
        z-index: 999;
        color: #0059c1;
        position: absolute;
        top: 10px;
        left: 10px;
        font-size: 1.5rem
    }

    .page-container.holdings .section .mobileFilter.mobile label {
        display: none
    }

    .page-container.holdings .section .mobileFilter.mobile .filter-box {
        margin-top: 5px
    }

    .page-container.holdings .section .mobileFilter.mobile .filter-link {
        max-width: 83% !important;
        margin-left: 14%;
        z-index: 99
    }

    .page-container.holdings .section .mobileFilter.mobile .filters {
        max-height: 100vh !important;
        box-sizing: border-box;
        height: 100vh
    }

    .page-container.holdings .section .mobileFilter.mobile .ti-autocomplete {
        max-height: 400px !important
    }

    .page-container.holdings .section .mobileFilter.mobile .ti-new-tag-input-wrapper input {
        pointer-events: auto
    }

    .page-container.holdings .section .tab {
        min-width: 33%
    }

    .page-container.holdings .section .chart-columns {
        display: block
    }

    .page-container.holdings .section .holdings-total {
        padding: 10px !important;
        max-width: 800px;
        line-height: 1.8;
        border-radius: 2px
    }

    .page-container.holdings .section .holdings-total .primary-stats-holdings {
        border-right: 1px solid #e1e1e1;
        width: 45%
    }

    .page-container.holdings .section .holdings-total .primary-stats-holdings div.label {
        color: #9b9b9b
    }

    .page-container.holdings .section .holdings-total .primary-stats-holdings .profit-agg .total-unrealized-profit {
        font-size: 30px
    }

    .page-container.holdings .section .holdings-total label {
        display: block;
        font-size: 1rem !important;
        color: #9b9b9b
    }

    .page-container.holdings .section .holdings-total .secondary-stats-holdings {
        padding-left: 16px;
        margin-top: 5px
    }

    .page-container.holdings .section .holdings-total .secondary-stats-holdings .block {
        margin-bottom: 10px
    }

    .page-container.holdings .section .holdings-total .secondary-stats-holdings .block span.label {
        color: #9b9b9b
    }

    .page-container.holdings .section .holdings-total .secondary-stats-holdings .block span.value {
        font-size: 16px;
        padding-left: 5px
    }

    .page-container.holdings .section .holdings-total .six-columns {
        min-width: 120px;
        float: left
    }

    .page-container.holdings .section .holdings-total .pos {
        color: #10b983
    }

    .page-container.holdings .section .holdings-total .neg {
        color: #f35631
    }

    .page-container.holdings .section .last-updated {
        display: inline-block !important
    }
}

@media only screen and (min-width:800px) {
    .page-container.holdings .section .family-card {
        display: inline-block;
        border: 1px solid #eee;
        box-sizing: border-box;
        padding: 8px 20px;
        margin-right: 10px;
        margin-bottom: 10px
    }

    .page-container.holdings .section .family-card:hover {
        cursor: pointer
    }

    .page-container.holdings .section .family-card .family-checkbox-label {
        line-height: 19px !important
    }

    .page-container.holdings .section .family-card .family-checkbox-label:hover {
        cursor: pointer
    }

    .page-container.holdings .section .family-card .family-name {
        margin-right: 15px;
        margin-left: 20px;
        max-width: 100px;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
        white-space: nowrap;
        box-sizing: border-box;
        text-transform: capitalize
    }

    .page-container.holdings .section .family-card .family-id {
        display: inline-block;
        box-sizing: border-box;
        vertical-align: top
    }

    .page-container.holdings .section .family-card .checkmark {
        margin-left: 10px;
        top: 8px
    }

    .page-container.holdings .section .family-account-web {
        border-bottom: 1px solid #eee;
        margin-bottom: 23px
    }

    .page-container.holdings .section .family-account-web .child-selected {
        margin-left: 20px;
        font-size: 16px
    }

    .page-container.holdings .section .family-account-web .icon {
        color: #0059c1;
        font-size: 18px;
        padding: 8px
    }

    .page-container.holdings .section .family-account-web .icon:hover {
        cursor: pointer
    }

    .page-container.holdings .section .family-switch {
        margin-bottom: 35px;
        border-bottom: 1px solid #eee
    }

    .page-container.holdings .section .family-switch span {
        padding: 10px 10px;
        display: inline-block;
        min-width: 125px;
        text-align: center
    }

    .page-container.holdings .section .family-switch span.active {
        border-bottom: 2px solid #0059c1;
        color: #0059c1
    }

    .page-container.holdings .section .family-switch span:hover {
        cursor: pointer
    }

    .page-container.holdings .section .filter-component {
        perspective: 600px;
        z-index: 1
    }

    .page-container.holdings .section .donut-switch {
        position: absolute;
        top: -50px;
        right: 20px
    }

    .page-container.holdings .section .holdings-total {
        padding: 30px;
        border-radius: 2px;
        margin-top: 5px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, .1);
        margin-bottom: 35px
    }

    .page-container.holdings .section .holdings-total h3 {
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 0;
        font-size: 22px
    }

    .page-container.holdings .section .holdings-total label {
        display: block;
        font-size: 1rem !important;
        color: #9b9b9b
    }

    .page-container.holdings .section .holdings-total .profit-agg label {
        display: block
    }

    .page-container.holdings .section .holdings-total .profit-agg h3 {
        display: inline-block
    }

    .page-container.holdings .section .holdings-total .profit-agg .holdings-profit-percent {
        position: relative;
        left: 10px
    }

    .page-container.holdings .section .holdings-total .profit-agg .pos {
        color: #10b983
    }

    .page-container.holdings .section .holdings-total .profit-agg .neg {
        color: #f35631
    }
}

.page-container.holdings .section .filter-table {
    display: inline-block;
    position: relative;
    float: right;
    min-width: 60px;
    margin-bottom: 3px;
    margin-right: 10px;
    margin-left: 10px
}

.page-container.holdings .section .filter-table .filter-link {
    font-size: .875rem;
    font-weight: 600;
    color: #0059c1
}

.page-container.holdings .section .filter-table .filter-link img {
    height: 12px;
    position: relative;
    top: 1px;
    margin-right: 1px
}

.page-container.holdings .section .filter-table:hover .filter-link {
    cursor: pointer;
    opacity: .8
}

.page-container.holdings .section .filter-dropdown {
    top: 35px;
    right: 0;
    z-index: 9999;
    cursor: pointer;
    text-align: left;
    min-width: 175px;
    position: absolute;
    border-style: solid;
    border-width: 0 1px 1px 1px;
    border-color: #eee;
    background: #fff;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1)
}

.page-container.holdings .section .filter-dropdown hr {
    margin: 0
}

.page-container.holdings .section .filter-dropdown li {
    font-size: 12px;
    display: inline-block;
    vertical-align: middle;
    line-height: 35px;
    padding: 5px 10px;
    color: #4a4a4a;
    width: 100%;
    box-sizing: border-box
}

.page-container.holdings .section .filter-dropdown li:hover {
    background: #fafafb
}

.page-container.holdings .section .search-table {
    position: relative !important;
    margin-bottom: 0 !important;
    right: 0 !important;
    float: right
}

.page-container.holdings .section .holdings-breakdown-table .family-comp .family-clientid,
.page-container.holdings .section .holdings-table .family-comp .family-clientid {
    display: inline-block;
    margin-right: 7px
}

.page-container.holdings .section .holdings-breakdown-table .family-comp .family-split,
.page-container.holdings .section .holdings-table .family-comp .family-split {
    display: inline-block;
    padding: 3px 5px;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    line-height: 1.4 !important;
    color: #4184f3;
    background-color: rgba(65, 132, 243, .1);
    margin-right: 10px
}

.page-container.holdings .section .holdings-table span.symbol {
    max-width: 80%;
    display: inline-block
}

.page-container.holdings .section .holdings-table span.symbol .detailed-symbol {
    display: inline-block;
    padding: 3px 5px;
    text-transform: uppercase;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    line-height: 1.4 !important;
    color: #4184f3;
    background-color: rgba(65, 132, 243, .1)
}

.page-container.holdings .section .holdings-table span.symbol .detailed-symbol .name {
    margin-right: 10px
}

.page-container.holdings .section .holdings-table .flag-container {
    position: absolute;
    right: 0;
    display: inline-block
}

.page-container.holdings .section .holdings-table .status-flag {
    display: inline-block;
    color: #f6461a;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 2px;
    margin-right: 10px;
    text-align: center
}

.page-container.holdings .section .holdings-table .status-flag a {
    color: #f6461a !important;
    display: inline-block;
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box
}

.page-container.holdings .section .holdings-table .status-flag a.text-grey {
    color: #666 !important
}

.page-container.holdings .section .holdings-table .status-flag img {
    width: 11px;
    position: relative;
    top: 1px
}

.page-container.holdings .section .holdings-table .status-flag.longterm-flag {
    color: #4caf50 !important
}

.page-container.holdings .section .holdings-table .status-flag.shortterm-flag {
    color: #387ed1 !important
}

.page-container.holdings .section .holdings-table .context-menu {
    float: none !important;
    margin-right: 10px;
    position: relative;
    top: 2px
}

.page-container.holdings .section .holdings-table .context-menu img {
    width: 14px;
    position: relative;
    top: 2px;
    left: 2px;
    margin-right: 9px
}

.page-container.holdings .section .holdings-table .pledge-flag {
    display: inline-block;
    color: #c0890e;
    font-size: .75rem;
    font-weight: 600;
    border-radius: 2px;
    text-align: center;
    margin-right: 10px
}

.page-container.holdings .section .holdings-table .pledge-flag a {
    color: #c0890e !important;
    display: inline-block;
    width: 100%;
    padding: 0 5px;
    box-sizing: border-box
}

.page-container.holdings .section .holdings-table .pledge-flag img {
    width: 11px;
    position: relative;
    top: 1px
}

.page-container.holdings .section .holdings-table .pledge-flag.loan-flag {
    color: #0059c1
}

.page-container.holdings .section .holdings-table .pending-pledge,
.page-container.holdings .section .holdings-table .pending-unpledge {
    border: 1px solid #c0890e;
    padding: 0 5px;
    line-height: 1.8
}

.page-container.holdings .section .holdings-table .table-tags {
    max-width: 290px;
    word-wrap: break-word;
    line-height: 1;
    margin-top: 3px
}

.page-container.holdings .section .holdings-table .table-tags a {
    display: inline-block;
    font-size: 10px;
    text-decoration: underline;
    margin-right: 10px;
    color: #9b9b9b !important
}

.page-container.holdings .section .holdings-table .table-tags a:hover {
    color: #0059c1 !important
}

.page-container.holdings .section .holdings-table .context-menu {
    visibility: hidden
}

.page-container.holdings .section .holdings-table tbody tr td,
.page-container.holdings .section .holdings-table thead tr td {
    text-align: right
}

.page-container.holdings .section .holdings-table tbody tr td:first-child,
.page-container.holdings .section .holdings-table thead tr td:first-child {
    position: relative;
    text-align: left !important
}

.page-container.holdings .section .holdings-table tbody tr td:first-child .arrow,
.page-container.holdings .section .holdings-table thead tr td:first-child .arrow {
    float: right !important
}

.page-container.holdings .section .holdings-table tbody tr th:first-child,
.page-container.holdings .section .holdings-table thead tr th:first-child {
    min-width: 220px;
    text-align: left !important
}

.page-container.holdings .section .holdings-table tbody tr th:first-child .arrow,
.page-container.holdings .section .holdings-table thead tr th:first-child .arrow {
    float: right !important
}

.page-container.holdings .section .holdings-table thead tr {
    border-top: 1px solid #f1f1f1
}

.page-container.holdings .section .holdings-table thead tr .sorted {
    background: #fafafb
}

.page-container.holdings .section .holdings-table thead th {
    cursor: pointer;
    font-size: .85rem;
    font-weight: 400;
    color: #9b9b9b
}

.page-container.holdings .section .holdings-table thead th:hover {
    background: #fafafb
}

.page-container.holdings .section .holdings-table thead th:hover .arrow {
    opacity: 1
}

.page-container.holdings .section .holdings-table thead .arrow-show {
    opacity: 1;
    background: #fafafb
}

.page-container.holdings .section .holdings-table tbody tr:hover .context-menu {
    visibility: visible
}

.page-container.holdings .section .holdings-table tbody tr:hover {
    background: #fafafb
}

.page-container.holdings .section .holdings-table tr {
    border-bottom: 1px solid #f1f1f1
}

.page-container.holdings .section .holdings-table .arrow {
    display: inline-block;
    float: left;
    position: relative;
    top: 7px;
    border: solid #9b9b9b;
    border-width: 0 1px 1px 0;
    padding: 3px;
    opacity: 0
}

.page-container.holdings .section .holdings-table .arrow.asc {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg)
}

.page-container.holdings .section .holdings-table .arrow.desc {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.page-container.holdings .holdings-treemap {
    margin-bottom: 40px;
    min-height: 85px
}

.page-container.holdings .holdings-treemap h2 .sector-icon {
    position: relative;
    top: 4px
}

.page-container.holdings .holdings-treemap h2 span {
    font-size: 14px;
    font-weight: 600;
    color: #0059c1;
    top: -2px;
    left: 15px;
    margin-right: 10px
}

.page-container.holdings .holdings-treemap h2 span:hover {
    cursor: pointer
}

.page-container.holdings .holdings-treemap h2 span img {
    height: 18px;
    margin-right: 4px;
    vertical-align: middle
}

.page-container.holdings .holdings-treemap #treemap_view_types {
    float: right;
    bottom: 50px;
    position: relative
}

.page-container.holdings .holdings-treemap .treemap-source {
    position: relative
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio-wrap {
    margin-right: 0
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio-wrap:first-child label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid #9b9b9b;
    margin-right: 10px;
    padding-right: 20px
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio-wrap:last-child label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio+.su-radio-label:before {
    border: none;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio:checked+.su-radio-label:before {
    background: #fff;
    padding: 0;
    box-shadow: none;
    border: none
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio-label {
    border-radius: 3px;
    padding: 0 5px;
    text-align: center;
    font-size: 1rem !important;
    line-height: 1.1;
    letter-spacing: .3px
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio-label:hover {
    color: #0059c1 !important
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio:checked+.su-radio-label {
    color: #0059c1 !important;
    font-weight: 600
}

.page-container.holdings .holdings-treemap .node {
    font-size: 11px;
    color: #fff;
    line-height: 12px;
    position: absolute;
    padding-top: 5px;
    padding-left: 6px
}

.page-container.holdings .holdings-treemap .chart-action {
    color: #0059c1;
    font-weight: 600
}

.page-container.holdings .holdings-treemap .chart-action:hover {
    cursor: pointer;
    color: #444
}

.page-container.holdings .holdings-treemap .chart-action img {
    height: 14px;
    width: auto;
    vertical-align: middle
}

.page-container.holdings .holdings-treemap .chart-action span {
    margin-left: 2px
}

.page-container.holdings .holdings-treemap .chart .chart-action,
.page-container.holdings .holdings-treemap .chart form {
    display: inline-block
}

.page-container.holdings .holdings-treemap .chart .canvas {
    margin-bottom: 10px
}

.page-container.holdings .holdings-dividend-container .notice {
    margin-bottom: 0 !important;
    margin-top: 15px
}

.page-container.holdings .holdings-dividend {
    padding-top: 30px
}

.page-container.holdings .breakdown-tag-container {
    width: 765px
}

.page-container.holdings .holdings-breakdown-table-container .breakdown-tag-label {
    display: inline-block;
    margin-bottom: 10px
}

.page-container.holdings .holdings-breakdown-table-container tbody {
    border-bottom: 1px solid #f1f1f1
}

.page-container.holdings .holdings-breakdown-table-container tbody tr {
    border-bottom: none !important
}

.page-container.holdings .holdings-breakdown-table-container tbody tr:first-child td {
    padding-bottom: 5px !important
}

.page-container.holdings .holdings-breakdown-table-container tbody tr:last-child td {
    padding: 0 10px 10px 10px !important
}

.page-container.holdings .holdings-breakdown-table-container tbody .tagger {
    padding-top: 0 !important
}

.page-container.holdings .holdings-breakdown-table-container tbody .tagger .ti-tags {
    padding-left: 15px !important
}

.page-container.holdings .holdings-breakdown-table-container tbody .tagger .filter-link.active {
    z-index: 4
}

.page-container.holdings .holdings-breakdown-table-container tbody .tagger .filter-option.show {
    z-index: 3
}

.page-container.holdings .holdings-breakdown-table-container tbody .new-tags span:not(.icon) {
    margin-bottom: 5px
}

.page-container.holdings .holdings-breakdown-table {
    width: 100%
}

.page-container.holdings .holdings-breakdown-table .breakdown-tag-table-head {
    min-width: 130px
}

.page-container.holdings .holdings-breakdown-table input {
    font-size: 12px
}

.page-container.holdings .holdings-breakdown-table tbody tr td,
.page-container.holdings .holdings-breakdown-table thead tr td {
    text-align: right;
    padding: 10px 12px
}

.page-container.holdings .holdings-breakdown-table tbody tr td:first-child,
.page-container.holdings .holdings-breakdown-table thead tr td:first-child {
    text-align: left !important
}

.page-container.holdings .holdings-breakdown-table thead tr {
    border-top: 1px solid #f1f1f1
}

.page-container.holdings .holdings-breakdown-table thead td {
    padding: 15px 12px !important;
    color: #9b9b9b;
    background: #fafafb
}

.page-container.holdings .holdings-breakdown-table tbody tr td:first-child {
    min-width: 130px;
    max-width: 130px
}

.page-container.holdings .holdings-breakdown-table tbody tr td {
    vertical-align: top
}

.page-container.holdings .holdings-breakdown-table tbody tr td:nth-child(6) {
    padding-top: 5px !important
}

.page-container.holdings .holdings-breakdown-table tr {
    border-bottom: 1px solid #f1f1f1
}

@media only screen and (max-width:400px) {
    .page-container.holdings .chart-columns .donut-chart {
        width: 48%
    }

    .page-container.holdings .chart-columns .donut-chart svg {
        width: 100%;
        height: 100%
    }

    .page-container.holdings .chart-columns .labels {
        width: 50%;
        margin-left: 0
    }
}

@media only screen and (max-width:1080px) {
    .disc-list span {
        display: block;
        float: none !important;
        min-width: 100px;
        width: 100px;
        margin-top: 5px
    }
}

@media only screen and (max-width:800px) {
    .family-inputs {
        padding-bottom: 0 !important
    }

    .family-switch {
        display: flex;
        align-content: space-between
    }

    .family-switch span {
        display: block;
        width: 50%;
        padding: 10px
    }

    .family-switch span.active {
        color: #0059c1;
        border-bottom: 2px solid #0059c1
    }

    .month-item {
        min-height: 472px
    }

    #mobile-side-nav.show {
        width: 220px !important;
        height: 100vh;
        max-height: 100vh;
        overflow: auto
    }

    .disc-list {
        padding: 10px
    }

    .disc-list .status-flag {
        width: auto;
        padding: 1px 5px !important;
        min-width: auto !important;
        float: right !important
    }

    #holdings_date {
        width: 100%;
        padding: 6px 30px;
        padding-left: 10px;
        font-size: 14px;
        line-height: 1.4;
        color: #555;
        background-color: #fff;
        border: 1px solid #e3e3e3;
        border-radius: 4px;
        box-sizing: border-box
    }

    .litepicker {
        width: auto !important
    }

    .table-download {
        float: unset !important;
        margin-top: 10px
    }

    .donut-switch {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        text-align: center !important;
        margin-bottom: 20px
    }

    #treemap_view_types {
        float: none !important;
        position: unset !important;
        margin-bottom: 20px
    }

    .iframe-container iframe {
        height: 90vh !important
    }

    .treemap-source {
        bottom: 5px !important
    }

    .table-link-container,
    .treemap-source {
        display: block !important;
        float: none !important
    }

    .table-link-container {
        margin-top: 20px
    }

    .table-link-container span {
        right: 0 !important
    }

    .page-container.holdings .section .modal-body .holdings-breakdown-qty .five,
    .page-container.holdings .section .modalbody .holdings-breakdown-qty .five {
        border-right: none !important
    }

    .page-container.holdings .v-align {
        display: block !important
    }

    .mobileBreakdown td {
        font-size: 12px;
        padding: 10px !important
    }

    .show-on-mobile.inputcontainer.row .six.columns,
    .show-on-mobile.locked.inputcontainer.row .six.columns {
        width: 50%;
        padding-right: 5px !important
    }

    .filter-modal-wrapper {
        position: fixed;
        width: 100% !important;
        height: 100vh;
        left: 0;
        top: 0;
        z-index: 10;
        background: #fff;
        transition: .5s;
        overflow: hidden
    }

    .filter-modal-wrapper button {
        position: absolute;
        bottom: 0;
        width: 100%;
        margin: 0
    }

    .filter-modal-wrapper .header-header {
        position: fixed;
        top: 0;
        line-height: 50px;
        height: 50px;
        color: #fff;
        width: 100%;
        background-color: #0059c1;
        z-index: 30
    }

    .filter-modal-wrapper .header-header .left-btn {
        width: 40px;
        height: 100%;
        z-index: 1;
        position: absolute;
        display: inline-block;
        vertical-align: top;
        text-align: center;
        padding-top: 8px;
        box-sizing: border-box
    }

    .filter-modal-wrapper .header-header .header-middle {
        width: 55%;
        left: 40px;
        right: 40px;
        position: absolute;
        top: 0;
        text-align: center;
        z-index: 0;
        padding-left: 0;
        font-size: 16px
    }

    .filter-modal-wrapper .header-header .reset-filter {
        text-align: right;
        padding-left: 80vw;
        position: absolute;
        font-size: 16px;
        color: #fff
    }

    .filter-modal-wrapper .header-header .reset-filter span:hover {
        cursor: pointer;
        opacity: .8
    }

    .filter-modal-wrapper .header-header .reset-filter span img {
        width: 16px;
        color: #fff;
        vertical-align: middle;
        margin-right: 4px;
        padding-bottom: 3px
    }

    .filter-modal-wrapper .filters {
        padding: 10px 20px 20px 20px;
        margin-top: 50px
    }

    .filter-modal-wrapper .filters .su-input-label.filters-label {
        width: 100% !important
    }

    .filter-modal-wrapper label {
        padding-left: 0;
        display: inline-block !important;
        margin-top: 10px
    }

    .filter-modal-wrapper label.checks {
        display: inline-block;
        padding: 4px 10px;
        margin-right: 8px;
        font-size: 12px
    }

    .filter-modal-wrapper label.checks.type {
        border-bottom: 1px solid #0059c1
    }

    .filter-modal-wrapper label.checks.sector {
        border-bottom: 1px solid #e17055
    }

    .filter-modal-wrapper label.checks.others {
        border-bottom: 1px solid #9b9b9b
    }

    .filter-modal-wrapper label.checks:hover {
        cursor: pointer;
        color: #444;
        border: 1px solid #444
    }

    .filter-modal-wrapper label.checks.active {
        border: 1px solid #0059c1;
        color: #fff !important;
        background: #0059c1
    }

    .filter-modal-wrapper input[type=checkbox] {
        display: none
    }

    .filter-modal-wrapper input {
        max-width: 175px;
        font-size: 12px;
        min-height: 35px;
        height: 35px
    }
}

@media only screen and (min-width:800px) {
    .chart-columns {
        width: 32.7%;
        display: inline-block;
        margin-left: .5%
    }

    .holdings-breakdown-table-container {
        max-height: 250px;
        overflow: auto;
        min-height: 200px
    }
}

.page-container.positions .inputcontainer button {
    width: 55px !important
}

.page-container.positions .inputcontainer .manage-tag-link {
    margin-left: 15px
}

.page-container.positions .grey-back-mobile {
    height: 70px !important
}

.page-container.positions .mobile-agg {
    top: -65px !important
}

.page-container.positions .pull-up-section {
    top: -50px
}

.page-container.positions .tags-treemap {
    margin-bottom: 40px;
    margin-top: 40px;
    min-height: 85px
}

.page-container.positions .tags-treemap #treemap_view_types {
    display: inline-block;
    float: right
}

.page-container.positions .tags-treemap.exposure-treemap {
    margin-bottom: 75px
}

.page-container.positions .tags-treemap.exposure-treemap [data-balloon][data-balloon-length=small]:after {
    width: 165px
}

.page-container.positions .tags-treemap [data-balloon][data-balloon-length=small]:after {
    white-space: pre-line;
    width: 80px;
    word-wrap: break-word
}

.page-container.positions .tags-treemap [data-balloon][data-balloon-length=medium]:after {
    white-space: pre-line;
    width: 150px;
    word-wrap: break-word
}

.page-container.positions .tags-treemap [data-balloon][data-balloon-length=large]:after {
    white-space: pre-line;
    width: 260px;
    word-wrap: break-word
}

.page-container.positions .tags-treemap [data-balloon][data-balloon-length=fit]:after {
    white-space: pre-line;
    width: 100%;
    word-wrap: break-word
}

.page-container.positions .tags-treemap .treemap-source {
    position: relative
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio-wrap {
    margin-right: 0
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio-wrap:first-child label {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: 1px solid #9b9b9b;
    margin-right: 10px;
    padding-right: 20px
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio-wrap:last-child label {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio+.su-radio-label:before {
    border: none;
    width: auto;
    height: auto;
    padding: 0;
    margin: 0
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio:checked+.su-radio-label:before {
    background: #fff;
    padding: 0;
    box-shadow: none;
    border: none
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio-label {
    border-radius: 3px;
    padding: 0 5px;
    text-align: center;
    font-size: 1rem !important;
    line-height: 1.1;
    letter-spacing: .3px
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio-label:hover {
    color: #0059c1 !important
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio:checked+.su-radio-label {
    color: #0059c1 !important;
    font-weight: 600
}

.page-container.positions .tags-treemap .node {
    font-size: 11px;
    color: #fff;
    line-height: 12px;
    position: absolute;
    padding-top: 5px;
    padding-left: 6px;
    text-shadow: 0 0 #fff
}

.page-container.positions .tags-treemap .chart-action {
    display: inline-block;
    color: #0059c1;
    font-weight: 600
}

.page-container.positions .tags-treemap .chart-action:hover {
    cursor: pointer;
    color: #444
}

.page-container.positions .tags-treemap .chart-action img {
    height: 14px;
    width: auto;
    vertical-align: middle
}

.page-container.positions .tags-treemap .chart-action span {
    margin-left: 2px
}

.page-container.positions .tags-treemap .chart .chart-action,
.page-container.positions .tags-treemap .chart form {
    display: inline-block
}

.page-container.positions .tags-treemap .chart .canvas {
    margin-bottom: 10px
}

.page-container.positions .tag-head-icon {
    float: right;
    position: relative;
    top: 5px;
    right: 20px
}

.page-container.positions .tag-head-icon img {
    height: 28px
}

.page-container.positions .section .modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease
}

.page-container.positions .section .modal-wrapper {
    display: table-cell;
    vertical-align: middle
}

.page-container.positions .section .modal-container {
    margin: 0 auto;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    box-sizing: border-box;
    transition: all .3s ease
}

.page-container.positions .section .tags-table tr td:first-child {
    position: relative
}

.page-container.positions .section .tags-table .context-menu {
    position: absolute;
    right: 10px
}

.page-container.positions .section .tag-pin {
    width: 12px;
    height: 12px;
    display: inline-block;
    border-radius: 50%;
    position: relative;
    top: 1px;
    margin-right: 5px
}

.page-container.positions .section .tag-summary .four.tag-summary-card {
    padding: 20px 25px;
    border-radius: 4px;
    box-sizing: border-box;
    border: 1px solid #e1e1e1
}

.page-container.positions .section .tag-summary .four.tag-summary-card .icon {
    -webkit-text-stroke-width: .5px
}

.page-container.positions .section .tag-summary .four.tag-summary-card p {
    margin: 0;
    display: inline-block
}

.page-container.positions .section .tag-summary .four.tag-summary-card h2 {
    margin-bottom: 15px;
    margin-top: 20px
}

.page-container.positions .section .tag-summary .four.tag-summary-card h2.tag-detail {
    display: flex;
    align-items: center
}

.page-container.positions .section .tag-summary .four.tag-summary-card .tag-comp-table {
    padding: 2px 0
}

.page-container.positions .section .tag-summary .four.tag-summary-card .tag-summary-sub {
    margin-bottom: 20px
}

.page-container.positions .section .tag-summary .four.tag-summary-card hr {
    margin: 2px 0;
    border-color: #e1e1e1
}

.page-container.positions .section .tag-summary .four.tag-summary-card label {
    font-weight: 600
}

.page-container.positions .section .tag-summary .tag-colour {
    width: 14px;
    height: 14px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 7px
}

.page-container.positions .section .tag-summary .tag-name {
    display: inline-block;
    width: calc(100% - 28px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.page-container.positions .section .tags-search {
    position: relative !important;
    float: right;
    right: 10px !important
}

.page-container.positions .section .tags-segment {
    padding: 3px 10px;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    line-height: 1.4 !important;
    color: #4184f3;
    background-color: rgba(65, 132, 243, .1);
    margin-left: 10px
}

.page-container.positions .section .table-download a:hover {
    color: #444 !important
}

.page-container.positions .section .table-download:hover {
    cursor: default !important;
    opacity: 1 !important
}

.page-container.positions .section .search-table:not(.tags-search) {
    right: 170px !important
}

.page-container.positions .section .modal-body {
    margin: 20px 0
}

.page-container.positions .section .modal-body .holdings-breakdown-name {
    margin: 0
}

.page-container.positions .section .modal-body .modal-separator {
    margin: 20px 0
}

.page-container.positions .section .modal-body label {
    color: #9b9b9b
}

.page-container.positions .section .modal-body .holdings-breakdown-qty {
    margin-bottom: 20px
}

.page-container.positions .section .modal-body .holdings-breakdown-qty .five {
    border-right: 1px solid #e1e1e1
}

.page-container.positions .section .modal-body .holdings-modal-label {
    position: relative;
    right: 5px
}

.page-container.positions .section .modal-default-button {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    font-size: 22px !important;
    padding: 0
}

.page-container.positions .section .modal-enter,
.page-container.positions .section .modal-leave-active {
    opacity: 0
}

.page-container.positions .section .modal-enter .modal-container,
.page-container.positions .section .modal-leave-active .modal-container {
    transform: scale(1.1)
}

.page-container.positions .section .positions-summary {
    box-sizing: border-box;
    padding: 30px 20px 30px 90px;
    background: #fafafb;
    border-radius: 2px;
    max-width: 450px;
    margin: auto
}

.page-container.positions .section .positions-summary h1 {
    margin-top: 10px
}

.page-container.positions .section .positions-summary span {
    font-size: 1rem
}

.page-container.positions .section .last-updated {
    float: left
}

.page-container.positions .section .positions-table:not(.pnl-breakdown-table) div:not(.new-tags) {
    display: inline
}

.page-container.positions .section .positions-table:not(.pnl-breakdown-table) tbody tr:hover {
    background: #fafafb
}

.page-container.positions .section .positions-table .context-menu {
    visibility: hidden;
    position: absolute;
    right: 10px;
    top: 11px
}

.page-container.positions .section .positions-table .context-menu img {
    width: 14px;
    position: relative;
    top: 2px;
    left: 2px;
    margin-right: 9px
}

.page-container.positions .section .positions-table tbody tr:hover .context-menu {
    visibility: visible
}

.page-container.positions .section .positions-table tbody tr .symbol-class,
.page-container.positions .section .positions-table thead tr .symbol-class {
    position: relative
}

.page-container.positions .section .positions-table tbody tr td,
.page-container.positions .section .positions-table thead tr td {
    text-align: right
}

.page-container.positions .section .positions-table tbody tr td:first-child,
.page-container.positions .section .positions-table thead tr td:first-child {
    min-width: 220px;
    text-align: left !important
}

.page-container.positions .section .positions-table tbody tr td:first-child .arrow,
.page-container.positions .section .positions-table thead tr td:first-child .arrow {
    float: right !important
}

.page-container.positions .section .positions-table thead tr {
    border-top: 1px solid #f1f1f1
}

.page-container.positions .section .positions-table thead tr .sorted {
    background: #fafafb
}

.page-container.positions .section .positions-table thead td {
    cursor: pointer;
    color: #9b9b9b
}

.page-container.positions .section .positions-table thead td:hover {
    background: #fafafb
}

.page-container.positions .section .positions-table thead td:hover .arrow {
    opacity: 1
}

.page-container.positions .section .positions-table thead .arrow-show {
    opacity: 1;
    background: #fafafb
}

.page-container.positions .section .positions-table tbody tr:hover .popup {
    display: block !important
}

.page-container.positions .section .positions-table tbody tr:hover .popup .popuptext {
    visibility: hidden
}

.page-container.positions .section .positions-table tbody tr:hover {
    background: #fafafb
}

.page-container.positions .section .positions-table tr {
    border-bottom: 1px solid #f1f1f1
}

.page-container.positions .section .positions-table tr .text-left .trade-type {
    float: left
}

.page-container.positions .section .positions-table tr .trade-type {
    padding: 3px 10px;
    text-transform: uppercase;
    width: 30px;
    display: block;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    margin: auto;
    line-height: 1.4 !important
}

.page-container.positions .section .positions-table tr .buy {
    color: #4184f3;
    background-color: rgba(65, 132, 243, .1)
}

.page-container.positions .section .positions-table tr .sell {
    color: #df514c;
    background-color: rgba(223, 81, 76, .1)
}

.page-container.positions .section .positions-table .arrow {
    display: inline-block;
    float: left;
    position: relative;
    top: 7px;
    border: solid #9b9b9b;
    border-width: 0 1px 1px 0;
    padding: 3px;
    opacity: 0
}

.page-container.positions .section .positions-table .arrow.asc {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg)
}

.page-container.positions .section .positions-table .arrow.desc {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.page-container.positions .section .positions-breakdown-table {
    width: 100%
}

.page-container.positions .section .positions-breakdown-table tbody tr td,
.page-container.positions .section .positions-breakdown-table thead tr td {
    text-align: right;
    padding: 10px 12px !important
}

.page-container.positions .section .positions-breakdown-table tbody tr td:first-child,
.page-container.positions .section .positions-breakdown-table thead tr td:first-child {
    text-align: left !important
}

.page-container.positions .section .positions-breakdown-table thead tr {
    border-top: 1px solid #f1f1f1
}

.page-container.positions .section .positions-breakdown-table thead td {
    padding: 15px 12px !important;
    color: #9b9b9b;
    background: #fafafb
}

.page-container.positions .section .positions-breakdown-table tr {
    border-bottom: 1px solid #f1f1f1
}

.page-container.positions .section .positions-breakdown-table-container {
    max-height: 400px;
    overflow: auto
}

.page-container.positions .section .positions-breakdown-table-container tbody {
    border-bottom: 1px solid #f1f1f1
}

.page-container.positions .section .positions-breakdown-table-container tbody tr {
    border-bottom: none !important
}

.page-container.positions .section .positions-breakdown-table-container tbody tr:first-child td {
    padding-bottom: 5px !important
}

.page-container.positions .section .positions-breakdown-table-container tbody tr:last-child td {
    padding: 0 10px 10px 10px !important
}

.page-container.positions .section .positions-breakdown-table-container tbody .tagger {
    padding-top: 0 !important
}

.page-container.positions .section .positions-breakdown-table-container tbody .tagger .ti-tags {
    padding-left: 15px !important
}

.page-container.positions .section .positions-breakdown-table-container tbody .tagger .filter-link.active {
    z-index: 4
}

.page-container.positions .section .positions-breakdown-table-container tbody .tagger .filter-option.show {
    z-index: 3
}

.page-container.positions .section .positions-breakdown-table-container tbody .new-tags span:not(.icon) {
    margin-bottom: 5px
}

.page-container.positions .section .trade-type {
    padding: 3px 10px;
    text-transform: uppercase;
    width: 30px;
    display: block;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    line-height: 1.4 !important
}

.page-container.positions .section .buy {
    color: #4184f3;
    background-color: rgba(65, 132, 243, .1)
}

.page-container.positions .section .sell {
    color: #df514c;
    background-color: rgba(223, 81, 76, .1)
}

.page-container.positions .section .positions-paginate {
    margin-top: 15px
}

.page-container.positions .section .positions-paginate button {
    height: 25px !important;
    border: 1px solid #e1e1e1
}

.page-container.positions .section .positions-paginate button:disabled {
    color: #666;
    cursor: not-allowed
}

.page-container.positions .section .positions-paginate span {
    font-size: 12px;
    padding: 0 10px
}

@media only screen and (min-width:800px) {
    .page-container.positions .month-item {
        min-height: 472px
    }

    .page-container.positions .section .positions-summary h1 {
        margin-bottom: 5px
    }

    .page-container.positions .section .positions-breakdown-table-container {
        max-height: 250px;
        min-height: 200px;
        overflow: auto
    }

    .page-container.positions .section .tag-summary .tag-summary-container {
        display: flex
    }

    .page-container.positions .section .tag-summary .tag-summary-container .four.tag-summary-card h2 {
        font-size: 20px
    }

    .page-container.positions .section .tag-summary .tag-summary-container .four.tag-summary-card .tag-colour {
        width: 20px;
        height: 20px
    }

    .page-container.positions .section .tag-summary .tag-summary-container .four.tag-summary-card .tag-name {
        width: calc(100% - 34px);
        overflow: hidden;
        text-overflow: ellipsis;
        display: inline-block;
        white-space: nowrap
    }
}

@media only screen and (max-width:800px) {
    .page-container.positions .section .table-download {
        float: right !important;
        margin-top: 0 !important
    }

    .page-container.positions .section .exposure-treemap {
        margin-bottom: 20px !important
    }

    .page-container.positions .section .tag-summary .columns .four {
        width: 30.66667% !important
    }

    .page-container.positions .section .tag-summary .columns .six {
        width: 48% !important
    }

    .page-container.positions .section .tag-summary .columns .nine {
        width: 74% !important
    }

    .page-container.positions .section .tag-summary .columns .three {
        width: 22% !important
    }

    .page-container.positions .section .tag-summary .columns .four,
    .page-container.positions .section .tag-summary .columns .nine,
    .page-container.positions .section .tag-summary .columns .six,
    .page-container.positions .section .tag-summary .columns .three {
        margin-left: 4% !important
    }

    .page-container.positions .section .tag-summary .columns .four:first-child,
    .page-container.positions .section .tag-summary .columns .nine:first-child,
    .page-container.positions .section .tag-summary .columns .six:first-child,
    .page-container.positions .section .tag-summary .columns .three:first-child {
        margin-left: 0 !important
    }

    .page-container.positions .show-on-mobile.inputcontainer.row .six.columns,
    .page-container.positions .show-on-mobile.locked.inputcontainer.row .six.columns {
        width: 50% !important;
        padding-right: 5px !important
    }

    .page-container.positions .section .tag-summary .four .columns {
        margin-bottom: 0
    }

    .page-container.positions .section .positions-summary {
        padding: 18px 5px 3px 5px !important
    }

    .page-container.positions .section .positions-summary .six.columns {
        width: 50% !important;
        padding-left: 20px !important
    }

    .page-container.positions .section .card {
        padding: 12px 10px;
        border-top: 1px solid #eee
    }

    .page-container.positions .section .card.last {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee
    }

    .page-container.positions .section .card-right,
    .page-container.positions .section .card .bottom .bottom-right,
    .page-container.positions .section .card .middle .middle-right,
    .page-container.positions .section .card .top .top-right {
        flex: 6;
        text-align: right
    }

    .page-container.positions .section .card .top {
        margin-bottom: 5px;
        display: flex
    }

    .page-container.positions .section .card .top .top-left {
        flex: 4;
        font-weight: 600
    }

    .page-container.positions .section .card .middle {
        margin-bottom: 5px;
        display: flex
    }

    .page-container.positions .section .card .middle .middle-left {
        flex: 6
    }

    .page-container.positions .section .card .bottom {
        display: flex
    }

    .page-container.positions .section .card .bottom .bottom-left {
        flex: 6
    }

    .page-container.positions .section .trade-type {
        padding: 3px 10px;
        text-transform: uppercase;
        width: 30px;
        display: unset;
        border-radius: 2px;
        font-size: 10px;
        text-align: center;
        line-height: 1.4 !important
    }

    .page-container.positions .section .buy {
        color: #4184f3;
        background-color: rgba(65, 132, 243, .1)
    }

    .page-container.positions .section .sell {
        color: #df514c;
        background-color: rgba(223, 81, 76, .1)
    }

    .page-container.positions .section .last-updated {
        display: inline-block !important
    }

    .page-container.positions .section .search-table {
        top: 20px !important
    }

    .page-container.positions .pos {
        color: #10b983
    }

    .page-container.positions .neg {
        color: #f35631
    }
}

.page-container.funds-page .notice {
    margin-top: 25px
}

.page-container.funds-page .action-tabs {
    font-size: 1.25rem;
    margin-bottom: 50px
}

.page-container.funds-page .action-tabs .tab {
    padding: 15px;
    display: inline-block;
    position: relative;
    top: 1px;
    cursor: pointer;
    box-sizing: border-box;
    min-width: 150px;
    border-bottom: 2px solid #e1e1e1
}

.page-container.funds-page .action-tabs .tab.active {
    border-bottom: 2px solid #0059c1
}

.page-container.funds-page .imps-upload-section {
    background: #fafafb;
    padding: 20px
}

.page-container.funds-page .imps-upload-section .imps-upload {
    padding-left: 10px
}

.page-container.funds-page .show-on-mobile.last-updated {
    padding-left: 0 !important;
    margin-top: 16px;
    margin-bottom: 0
}

.page-container.funds-page .show-on-mobile.q-settlement {
    padding-left: 0 !important;
    margin-top: 0;
    margin-bottom: 0
}

.page-container.funds-page .qs {
    margin: 0
}

.page-container.funds-page .fund-input-error {
    padding-left: 10px;
    font-size: .85rem;
    color: #f35631;
    position: absolute;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.page-container.funds-page .funds-breakdown-table {
    max-height: calc(100vh - 60px);
    overflow: auto
}

.page-container.funds-page .funds-breakdown-table td p {
    margin: 0
}

.page-container.funds-page .funds-tooltip {
    display: inline-block;
    margin-left: 5px
}

.page-container.funds-page .funds-tooltip.selected-box {
    color: #fff !important
}

.page-container.funds-page .manage-mf-funds {
    display: inline-block
}

.page-container.funds-page .comm-disabled img {
    width: 200px
}

.page-container.funds-page #commodity_card .fund-prefs {
    top: 0
}

.page-container.funds-page #commodity_card .fund-prefs .su-radio-wrap.disabled,
.page-container.funds-page #mobile_comm_content .su-radio-wrap.disabled {
    display: none
}

.page-container.funds-page .no-account {
    border: none;
    width: 250px;
    margin: auto;
    text-align: center;
    margin-bottom: 30px
}

.page-container.funds-page .fund-prefs .su-radio-group .su-radio+.su-radio-label:before {
    position: absolute;
    left: -3px;
    width: 3px;
    top: 5px
}

.page-container.funds-page .fund-prefs label {
    position: relative;
    padding-left: 15px
}

.page-container.funds-page .mf-confirm h1 a {
    font-size: 14px;
    vertical-align: middle;
    margin-left: 5px
}

.page-container.funds-page .all-withdraw {
    margin-top: 13px;
    background: #fafafb;
    padding: 10px;
    border-radius: 3px
}

.page-container.funds-page .su-radio-wrap {
    vertical-align: top
}

.page-container.funds-page .su-radio-wrap:first-child {
    margin-bottom: 20px
}

.page-container.funds-page .su-radio-wrap span {
    margin-left: 17px;
    display: inline-block;
    line-height: 1.7
}

.page-container.funds-page .su-radio-wrap label {
    color: #444 !important
}

.page-container.funds-page .mobile-notice {
    display: none
}

.page-container.funds-page .eq-fund-history h3:hover {
    cursor: pointer
}

.page-container.funds-page .eq-fund-history h3 span {
    display: inline-block;
    margin-left: 15px
}

.page-container.funds-page .section .funds-confirm .wide-container {
    width: 600px !important
}

.page-container.funds-page .section .funds-confirm .wide-container hr {
    margin-bottom: 20px
}

.page-container.funds-page .section .funds-confirm .withdraw-button {
    margin-top: 20px
}

.page-container.funds-page .section .funds-confirm .withdrawal-box {
    padding: 15px 10px 0 20px;
    background: #fafafb
}

.page-container.funds-page .section .funds-confirm .withdrawal-box .columns p {
    font-weight: 600
}

.page-container.funds-page .section .funds-confirm .withdrawal-box .columns:last-child p {
    color: #0059c1
}

.page-container.funds-page .section .funds-confirm .modal-container h1 {
    margin-bottom: 10px
}

.page-container.funds-page .section .funds-confirm .modal-container h2 {
    font-size: 1.3rem;
    margin-top: 20px
}

.page-container.funds-page .section .funds-confirm .modal-container h3 {
    margin-top: 25px
}

.page-container.funds-page .section .funds-confirm .modal-container .close-modal {
    right: 15px !important
}

.page-container.funds-page .section .recent-icon {
    height: 16px;
    position: relative;
    top: 2px;
    margin-right: 3px
}

.page-container.funds-page .section .funds-confirm-container {
    padding-left: 10px
}

.page-container.funds-page .section .funds-note {
    margin: 0
}

.page-container.funds-page .section .funds-note .note-flag {
    text-transform: uppercase;
    font-size: .6875rem;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 2px;
    position: relative;
    width: 76px;
    display: inline;
    line-height: 1.7;
    text-align: center;
    background: rgba(255, 85, 85, .15);
    color: #f6461a
}

.page-container.funds-page .section .withdraw-box {
    border-radius: 2px
}

.page-container.funds-page .section .withdraw-box label {
    display: block
}

.page-container.funds-page .section .withdraw-box .su-input-group.disabled {
    margin-top: 0 !important
}

.page-container.funds-page .section .withdraw-box .six:nth-child(2) {
    position: relative
}

.page-container.funds-page .section .withdraw-box .six:nth-child(2) input[type=number] {
    max-width: 280px !important;
    box-sizing: border-box
}

.page-container.funds-page .section .withdraw-box .six:nth-child(2) .withdraw-funds-check {
    display: inline-block;
    margin-left: 10px;
    margin-right: 20px
}

.page-container.funds-page .section .withdraw-box .six:nth-child(2) .withdraw-funds-check .su-checkbox-value {
    color: #444 !important
}

.page-container.funds-page .section .withdraw-box .six:nth-child(2) .withdraw-funds-check .su-checkbox-box {
    position: relative;
    top: 2px
}

.page-container.funds-page .section .withdraw-box .status-flag {
    color: #f8ab00;
    background: rgba(255, 202, 85, .15);
    width: 130px;
    text-transform: uppercase;
    font-size: .75rem;
    text-align: center;
    line-height: 2
}

.page-container.funds-page .section .withdraw-box button {
    min-width: 120px;
    margin-top: 22px
}

.page-container.funds-page .section input[type=file] {
    border-bottom: none;
    margin: 15px 0
}

.page-container.funds-page .section .com-recent thead tr,
.page-container.funds-page .section .eq-recent thead tr {
    border-top: 1px solid #f1f1f1
}

.page-container.funds-page .section .com-recent tbody tr td:first-child,
.page-container.funds-page .section .com-recent thead tr td:first-child,
.page-container.funds-page .section .eq-recent tbody tr td:first-child,
.page-container.funds-page .section .eq-recent thead tr td:first-child {
    width: 150px
}

.page-container.funds-page .section .history-table .approved-flag,
.page-container.funds-page .section .history-table .cancel-flag,
.page-container.funds-page .section .history-table .failed-flag,
.page-container.funds-page .section .history-table .pending-flag {
    text-transform: uppercase;
    font-size: .6875rem;
    padding: 3px 11px;
    border-radius: 2px;
    position: relative;
    width: 76px;
    display: block;
    line-height: 1.7;
    text-align: center
}

.page-container.funds-page .section .history-table .pending-flag {
    background: rgba(255, 202, 85, .15);
    color: #f8ab00
}

.page-container.funds-page .section .history-table .cancel-flag {
    background: hsla(0, 0%, 80%, .15);
    color: #9b9b9b
}

.page-container.funds-page .section .history-table .approved-flag {
    background: rgba(65, 132, 243, .15);
    color: #4184f3
}

.page-container.funds-page .section .history-table .failed-flag {
    background: rgba(255, 85, 85, .15);
    color: #f6461a
}

.page-container.funds-page .section .history-table tr {
    border-bottom: 1px solid #f1f1f1;
    padding: 10px 5px
}

.page-container.funds-page .section .history-table thead {
    color: #9b9b9b
}

.page-container.funds-page .section .history-table .delete-disc,
.page-container.funds-page .section .history-table .edit-disc {
    display: none;
    width: .875rem
}

.page-container.funds-page .section .history-table .delete-disc:hover,
.page-container.funds-page .section .history-table .edit-disc:hover {
    cursor: pointer
}

.page-container.funds-page .section .history-table .edit-disc {
    position: relative;
    right: 15px
}

.page-container.funds-page .section .history-table [data-balloon][data-balloon-pos=up]:after {
    left: -80% !important
}

.page-container.funds-page .section .history-table tbody tr:hover {
    background: #fafafb
}

.page-container.funds-page .section .history-table tbody tr:hover .delete-disc,
.page-container.funds-page .section .history-table tbody tr:hover .edit-disc {
    display: inline
}

.page-container.funds-page .section .history-table tbody tr td:last-child {
    min-width: 40px
}

@media only screen and (min-width:800px) {
    .funds-page .funds-confirm .modal-body {
        max-height: 100vh;
        overflow: auto
    }

    .funds-page #equity_card {
        margin-top: 20px
    }

    .funds-page #commodity_card,
    .funds-page #equity_card {
        padding: 35px 30px 35px 30px;
        border-radius: 3px;
        margin-bottom: 60px;
        box-shadow: 0 1px 6px 1px rgba(0, 0, 0, .1)
    }

    .funds-page #commodity_card.comm-disabled-box,
    .funds-page #equity_card.comm-disabled-box {
        padding: 0;
        box-shadow: none
    }

    .funds-page #commodity_card .view-details,
    .funds-page #equity_card .view-details {
        margin: 0
    }

    .funds-page #commodity_card .card-head,
    .funds-page #equity_card .card-head {
        margin-right: 30px
    }

    .funds-page #commodity_card .card-info,
    .funds-page #equity_card .card-info {
        margin-top: 15px
    }

    .funds-page #commodity_card .card-info .last-updated,
    .funds-page #equity_card .card-info .last-updated {
        display: block;
        padding-left: 0
    }

    .funds-page #commodity_card .twelve .withdraw-box .withdraw-input,
    .funds-page #equity_card .twelve .withdraw-box .withdraw-input {
        border-right: 1px solid #f4f4f4
    }

    .funds-page #commodity_card .twelve .withdraw-box .withdraw-input .su-input-group,
    .funds-page #equity_card .twelve .withdraw-box .withdraw-input .su-input-group {
        display: inline-block;
        width: 100%
    }

    .funds-page #commodity_card .three,
    .funds-page #equity_card .three {
        border-right: 1px solid #e1e1e1
    }

    .funds-page #commodity_card .three p,
    .funds-page #equity_card .three p {
        margin-bottom: 25px
    }

    .funds-page .breakdown-total {
        color: #0059c1;
        font-size: 1.25rem
    }

    .funds-page .breakdown-total a {
        font-size: 14px;
        position: relative;
        top: -1px
    }

    .funds-page .breakdown-label,
    .funds-page .breakdown-value {
        margin: 0;
        margin-bottom: 10px
    }

    .funds-page .breakdown-value {
        text-align: right
    }

    .funds-page .commodity-section .eq-fund-history {
        margin-top: 25px
    }

    .funds-page .fund-prefs {
        position: relative;
        top: 20px
    }

    .funds-page .su-radio-wrap {
        margin-bottom: 20px;
        margin-right: 0
    }

    .funds-page .funds-input {
        width: 100% !important;
        margin-left: 0
    }
}

@media only screen and (max-width:370px) {

    .page-container.funds-page #commodity_card h2,
    .page-container.funds-page #equity_card h2 {
        font-size: 14px !important
    }
}

@media only screen and (max-width:800px) {
    .page-container.funds-page .action-tabs .tab {
        width: 50%
    }

    .page-container.funds-page .main-agg {
        margin-top: 15px
    }

    .page-container.funds-page .main-agg h1 {
        margin-bottom: 0
    }

    .page-container.funds-page .main-agg .view-details {
        margin-bottom: 0;
        margin-top: 5px
    }

    .page-container.funds-page .grey-back-mobile {
        height: 160px !important
    }

    .page-container.funds-page .mobile-agg {
        top: -155px !important
    }

    .page-container.funds-page .pull-up-section {
        top: -120px
    }

    .page-container.funds-page #commodity_card,
    .page-container.funds-page #equity_card {
        text-align: center
    }

    .page-container.funds-page #commodity_card h2,
    .page-container.funds-page #equity_card h2 {
        margin-bottom: 5px !important
    }

    .page-container.funds-page .withdraw-breakdown .row {
        padding: 5px
    }

    .page-container.funds-page .withdraw-breakdown .row:nth-child(odd) {
        background-color: #fff !important
    }

    .page-container.funds-page .withdraw-breakdown .row:nth-child(2n) {
        background-color: #fafafb
    }

    .page-container.funds-page .withdraw-breakdown .eight {
        width: 60% !important
    }

    .page-container.funds-page .withdraw-breakdown .four {
        width: 40% !important
    }

    .page-container.funds-page .withdraw-breakdown .eight,
    .page-container.funds-page .withdraw-breakdown .four {
        margin-bottom: 0 !important
    }

    .page-container.funds-page .withdraw-breakdown .eight p,
    .page-container.funds-page .withdraw-breakdown .four p {
        margin-bottom: 0;
        margin-top: 0
    }

    .page-container.funds-page .withdraw-breakdown .eight .breakdown-total,
    .page-container.funds-page .withdraw-breakdown .four .breakdown-total {
        font-size: 16px;
        color: #0059c1
    }

    .page-container.funds-page .eq-fund-history {
        margin-top: 20px
    }

    .page-container.funds-page .comm-disabled p {
        margin-bottom: 19px;
        margin-top: 40px
    }

    .page-container.funds-page .comm-disabled a {
        margin-bottom: 0;
        display: inline-block;
        height: 12px;
        line-height: 12px
    }

    .page-container.funds-page #mobile_comm_content {
        display: none
    }

    .page-container.funds-page #mobile_comm_content,
    .page-container.funds-page #mobile_eq_content {
        margin-bottom: 40px;
        margin-top: 15px
    }

    .page-container.funds-page .mobile-notice {
        display: block
    }

    .page-container.funds-page #commodity_card,
    .page-container.funds-page #equity_card {
        padding: 10px 10px 5px 10px !important;
        box-sizing: border-box;
        width: 47% !important;
        color: #666;
        margin-bottom: 0
    }

    .page-container.funds-page #commodity_card:hover,
    .page-container.funds-page #equity_card:hover {
        cursor: pointer
    }

    .page-container.funds-page #commodity_card h2,
    .page-container.funds-page #equity_card h2 {
        display: inline-block;
        margin-top: 5px;
        margin-bottom: 20px;
        font-size: 18px;
        word-break: break-word
    }

    .page-container.funds-page #commodity_card h1,
    .page-container.funds-page #equity_card h1 {
        font-size: 22px;
        margin-bottom: 5px
    }

    .page-container.funds-page #equity_card {
        margin-right: 6%
    }

    .page-container.funds-page #commodity_card.active,
    .page-container.funds-page #equity_card.active {
        color: #0059c1;
        border-bottom: 1px solid #0059c1
    }

    .page-container.funds-page #commodity_card.active label,
    .page-container.funds-page #equity_card.active label {
        color: #fff
    }

    .page-container.funds-page .commodity-section,
    .page-container.funds-page .equity-section {
        display: none
    }

    .page-container.funds-page .commodity-section.active,
    .page-container.funds-page .equity-section.active {
        display: block
    }

    .page-container.funds-page .withdraw-box {
        margin-bottom: 16px
    }

    .page-container.funds-page .withdraw-box .eight,
    .page-container.funds-page .withdraw-box .six {
        margin-bottom: 0
    }

    .page-container.funds-page .withdraw-box .su-input-group input {
        padding: 15px 20px
    }

    .page-container.funds-page .withdraw-box button {
        position: relative;
        top: 2px;
        margin-left: 0;
        width: 100%;
        margin-top: 10px
    }

    .page-container.funds-page .withdraw-funds-check {
        margin-bottom: 20px
    }
}

.page-container.ledger .grey-back-mobile {
    height: 160px !important
}

.page-container.ledger .mobile-agg {
    top: -155px !important
}

.page-container.ledger .pull-up-section {
    top: -120px
}

.page-container.ledger .section .card .symbol {
    margin-right: 10px
}

.page-container.ledger .section .card .remarks {
    line-height: 18px;
    color: #9b9b9b
}

.page-container.ledger .section .card .middle {
    margin: 10px 0 !important
}

.page-container.ledger .section .card .debit {
    color: #f35631 !important;
    font-size: 12px !important;
    position: relative;
    bottom: .5px
}

.page-container.ledger .section .card .credit {
    color: #10b983 !important;
    font-size: 12px !important;
    position: relative;
    bottom: .5px
}

.page-container.ledger .section input {
    max-width: 100%
}

.page-container.ledger .section input:focus {
    outline: 0;
    border-color: #ccc
}

.page-container.ledger .section .inputcontainer .two:nth-child(7) {
    margin-left: 0
}

.page-container.ledger .section .table-download a:hover {
    color: #444 !important
}

.page-container.ledger .section .table-download:hover {
    cursor: default !important;
    opacity: 1 !important
}

.page-container.ledger .section .ledger-note {
    float: right
}

.page-container.ledger .section .interest-total {
    display: inline-block;
    box-sizing: border-box;
    padding: 30px 45px;
    background: #fafafb;
    border-radius: 2px
}

.page-container.ledger .section .interest-total h1 {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 5px
}

.page-container.ledger .section .interest-total label {
    display: block
}

.page-container.ledger .section .ledger-total {
    box-sizing: border-box;
    padding: 30px 50px 30px 120px;
    background: #fafafb;
    border-radius: 2px;
    margin: auto
}

.page-container.ledger .section .ledger-total h1 {
    display: inline-block;
    margin-top: 10px;
    margin-bottom: 5px
}

.page-container.ledger .section .ledger-total label {
    display: block
}

.page-container.ledger .section .ledger-total.min-box {
    max-width: 600px
}

.page-container.ledger .section .ledger-table tbody tr .remarks,
.page-container.ledger .section .ledger-table thead tr .remarks {
    max-width: 400px
}

.page-container.ledger .section .ledger-table tbody tr .ledger-date,
.page-container.ledger .section .ledger-table thead tr .ledger-date {
    min-width: 85px
}

.page-container.ledger .section .ledger-table .time {
    color: #9b9b9b
}

.page-container.ledger .section .ledger-table .exchange {
    font-size: .75rem;
    color: #9b9b9b;
    margin-left: 15px;
    font-weight: 600
}

.page-container.ledger .section .ledger-table thead tr {
    border-top: 1px solid #f1f1f1
}

.page-container.ledger .section .ledger-table thead tr .sorted {
    background: #fafafb
}

.page-container.ledger .section .ledger-table thead td {
    cursor: pointer;
    color: #9b9b9b;
    background: #fafafb
}

.page-container.ledger .section .ledger-table thead td:hover {
    background: #fafafb
}

.page-container.ledger .section .ledger-table thead td:hover .arrow {
    opacity: 1
}

.page-container.ledger .section .ledger-table thead .arrow-show {
    opacity: 1;
    background: #fafafb
}

.page-container.ledger .section .ledger-table tr {
    border-bottom: 1px solid #f1f1f1
}

.page-container.ledger .section .ledger-table tr .trade-exchange {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    color: #9b9b9b;
    font-weight: 600
}

.page-container.ledger .section .ledger-table tr .trade-type {
    padding: 3px 10px;
    text-transform: uppercase;
    width: 30px;
    display: block;
    border-radius: 2px;
    float: right;
    font-size: 10px;
    text-align: center
}

.page-container.ledger .section .ledger-table tr .buy {
    color: #4184f3;
    background-color: rgba(65, 132, 243, .1)
}

.page-container.ledger .section .ledger-table tr .sell {
    color: #df514c;
    background-color: rgba(223, 81, 76, .1)
}

.page-container.ledger .section .ledger-table .arrow {
    display: inline-block;
    float: left;
    position: relative;
    top: 7px;
    border: solid #9b9b9b;
    border-width: 0 1px 1px 0;
    padding: 3px;
    opacity: 0
}

.page-container.ledger .section .ledger-table .arrow.asc {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg)
}

.page-container.ledger .section .ledger-table .arrow.desc {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.page-container.ledger .section .ledger-paginate {
    margin-top: 15px
}

.page-container.ledger .section .ledger-paginate button {
    height: 25px !important;
    border: 1px solid #e1e1e1
}

.page-container.ledger .section .ledger-paginate button:disabled {
    color: #666;
    cursor: not-allowed
}

.page-container.ledger .section .ledger-paginate span {
    font-size: 12px;
    padding: 0 10px
}

@media only screen and (min-width:800px) {
    .page-container.ledger .downloads {
        position: relative
    }

    .page-container.ledger .downloads .no-margin {
        margin-left: 0;
        margin-bottom: 30px
    }

    .page-container.ledger .downloads .no-margin button {
        position: absolute !important;
        left: 0;
        top: 75px;
        width: 150px !important
    }
}

.page-container.tradebook .input-heatmap-section {
    margin-bottom: 40px
}

.page-container.tradebook .section #logo_img {
    display: none;
    position: absolute;
    left: 55px;
    top: 20px
}

.page-container.tradebook .section #calendar_container_tradebook {
    margin-bottom: 25px
}

.page-container.tradebook .section input {
    max-width: 100%
}

.page-container.tradebook .section .inputcontainer .three {
    width: 18%
}

.page-container.tradebook .section .inputcontainer .four {
    width: 34.66667%
}

.page-container.tradebook .section .state-process {
    margin-top: 20px !important
}

.page-container.tradebook .section .table-download a:hover {
    color: #444 !important
}

.page-container.tradebook .section .table-download:hover {
    cursor: default !important;
    opacity: 1 !important
}

.page-container.tradebook .section .search-table {
    right: 170px !important
}

.page-container.tradebook .section .tradebook-table tbody tr td.row-check,
.page-container.tradebook .section .tradebook-table thead tr td.row-check {
    width: 20px;
    text-align: center
}

.page-container.tradebook .section .tradebook-table tbody tr td:nth-child(2),
.page-container.tradebook .section .tradebook-table thead tr td:nth-child(2) {
    position: relative
}

.page-container.tradebook .section .tradebook-table tbody tr td:nth-child(2) .arrow,
.page-container.tradebook .section .tradebook-table tbody tr td:nth-child(3) .arrow,
.page-container.tradebook .section .tradebook-table tbody tr td:nth-child(4) .arrow,
.page-container.tradebook .section .tradebook-table tbody tr td:nth-child(5) .arrow,
.page-container.tradebook .section .tradebook-table thead tr td:nth-child(2) .arrow,
.page-container.tradebook .section .tradebook-table thead tr td:nth-child(3) .arrow,
.page-container.tradebook .section .tradebook-table thead tr td:nth-child(4) .arrow,
.page-container.tradebook .section .tradebook-table thead tr td:nth-child(5) .arrow {
    float: right !important
}

.page-container.tradebook .section .tradebook-table tbody tr td.qty,
.page-container.tradebook .section .tradebook-table thead tr td.qty {
    min-width: 70px
}

.page-container.tradebook .section .tradebook-table tbody tr td.price,
.page-container.tradebook .section .tradebook-table thead tr td.price {
    min-width: 90px
}

.page-container.tradebook .section .tradebook-table tbody tr .context-menu,
.page-container.tradebook .section .tradebook-table thead tr .context-menu {
    visibility: hidden
}

.page-container.tradebook .section .tradebook-table tbody tr .flag-container,
.page-container.tradebook .section .tradebook-table thead tr .flag-container {
    position: absolute;
    right: 50px
}

.page-container.tradebook .section .tradebook-table tbody tr:hover .context-menu,
.page-container.tradebook .section .tradebook-table thead tr:hover .context-menu {
    visibility: visible
}

.page-container.tradebook .section .tradebook-table .exchange {
    font-size: .75rem;
    color: #9b9b9b;
    font-weight: 600;
    float: right;
    position: relative;
    top: 3px
}

.page-container.tradebook .section .tradebook-table .exchange.edis {
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    padding: 0 5px;
    margin-right: 10px;
    right: 0
}

.page-container.tradebook .section .tradebook-table .exchange.edis a {
    color: #9b9b9b !important;
    display: block
}

.page-container.tradebook .section .tradebook-table thead tr {
    border-top: 1px solid #f1f1f1
}

.page-container.tradebook .section .tradebook-table thead tr .sorted {
    background: #fafafb
}

.page-container.tradebook .section .tradebook-table thead td {
    cursor: pointer;
    color: #9b9b9b
}

.page-container.tradebook .section .tradebook-table thead td:hover {
    background: #fafafb
}

.page-container.tradebook .section .tradebook-table thead td:hover .arrow {
    opacity: 1
}

.page-container.tradebook .section .tradebook-table thead .arrow-show {
    opacity: 1;
    background: #fafafb
}

.page-container.tradebook .section .tradebook-table tr {
    border-bottom: 1px solid #f1f1f1
}

.page-container.tradebook .section .tradebook-table tr .trade-exchange {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    color: #9b9b9b;
    font-weight: 600
}

.page-container.tradebook .section .tradebook-table tr .trade-type {
    padding: 3px 10px;
    text-transform: uppercase;
    width: 30px;
    display: block;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    line-height: 1.4 !important
}

.page-container.tradebook .section .tradebook-table tr .buy {
    color: #4184f3;
    background-color: rgba(65, 132, 243, .1)
}

.page-container.tradebook .section .tradebook-table tr .sell {
    color: #df514c;
    background-color: rgba(223, 81, 76, .1)
}

.page-container.tradebook .section .tradebook-table .arrow {
    display: inline-block;
    float: left;
    position: relative;
    top: 7px;
    border: solid #9b9b9b;
    border-width: 0 1px 1px 0;
    padding: 3px;
    opacity: 0
}

.page-container.tradebook .section .tradebook-table .arrow.asc {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg)
}

.page-container.tradebook .section .tradebook-table .arrow.desc {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.page-container.tradebook .section .tradebook-table .text-left .arrow {
    float: right !important
}

.page-container.tradebook .section .heatmap-section {
    margin-top: 35px;
    margin-bottom: 0
}

.page-container.tradebook .section .hidden {
    display: none !important
}

.page-container.tradebook .section .heatmap-section-locked {
    position: absolute;
    height: 260px;
    width: 100%;
    background: transparent;
    z-index: 1
}

.page-container.tradebook .section input[name=heatmap-overview] {
    top: 2px;
    position: relative
}

.page-container.tradebook .section .overview-button {
    display: inline-block;
    left: -40px
}

.page-container.tradebook .section .overview-button:hover {
    opacity: .8;
    cursor: pointer
}

.page-container.tradebook .section .overview-button img {
    vertical-align: middle
}

.page-container.tradebook .section .overview-button label span {
    font-size: 11px
}

.page-container.tradebook .section .overview-button label:hover {
    cursor: pointer
}

.page-container.tradebook .section .overview-button input[type=radio]:checked+span {
    color: #0059c1
}

.page-container.tradebook .section .date-fetched {
    left: -10px
}

.page-container.tradebook .section .heatmap-container {
    position: relative;
    display: inline-block;
    max-width: 100%
}

.page-container.tradebook .section .heatmap-container #share_chart {
    left: 15px;
    position: absolute;
    z-index: 5;
    font-size: 14px;
    font-weight: 600;
    color: #0059c1;
    top: -5px;
    margin-right: 10px
}

.page-container.tradebook .section .heatmap-container #share_chart:hover {
    cursor: pointer
}

.page-container.tradebook .section .heatmap-container #share_chart img {
    height: 18px;
    margin-right: 4px;
    vertical-align: middle
}

.page-container.tradebook .section .heatmap-container #calendar_year svg:not(:root),
.page-container.tradebook .section .heatmap-container #calendar svg:not(:root) {
    overflow: visible
}

.page-container.tradebook .section .heatmap-container .heatmap-count {
    text-align: left;
    min-height: 25px;
    margin-left: 15px;
    margin-top: 40px
}

.page-container.tradebook .section .heatmap-container .heatmap-count .heatmap-date {
    width: 90px;
    display: inline-block;
    margin-right: 20px;
    font-weight: 600
}

.page-container.tradebook .section .heatmap-container .heatmap-count input {
    min-height: 0 !important;
    position: relative;
    top: 3px
}

.page-container.tradebook .section .heatmap-container .heatmap-count p {
    margin-top: 0;
    margin-bottom: 0
}

.page-container.tradebook .section .heatmap-container .heatmap-count .heatmap-segment {
    color: #0059c1;
    margin-right: 20px;
    border-bottom: 2px solid #0059c1;
    padding: 0 5px;
    display: inline-block
}

.page-container.tradebook .section .heatmap-container .heatmap-count .heatmap-segment:hover {
    cursor: pointer;
    opacity: .8
}

.page-container.tradebook .section .heatmap-container .heatmap-count .heatmap-segment p {
    display: inline-block;
    margin-right: 5px
}

.page-container.tradebook .section .heatmap-container .heatmap-count .loader-segment {
    border: none
}

.page-container.tradebook .section .tradebook-paginate {
    margin-top: 15px
}

.page-container.tradebook .section .tradebook-paginate button {
    height: 25px !important;
    border: 1px solid #e1e1e1
}

.page-container.tradebook .section .tradebook-paginate button:disabled {
    color: #666;
    cursor: not-allowed
}

.page-container.tradebook .section .tradebook-paginate span {
    font-size: 12px;
    padding: 0 10px
}

@media only screen and (max-width:800px) {
    .page-container.tradebook .section .table-sort {
        margin-top: 3px !important
    }

    .page-container.tradebook .section .show-on-mobile.inputcontainer.row .two.columns,
    .page-container.tradebook .section .show-on-mobile.locked.inputcontainer.row .two.columns {
        width: 50% !important;
        padding-right: 5px !important
    }

    .page-container.tradebook .section .exchange {
        font-size: .75rem;
        color: #9b9b9b;
        font-weight: 600;
        display: inline-block
    }

    .page-container.tradebook .section .exchange.edis {
        border: 1px solid #e1e1e1;
        border-radius: 2px;
        padding: 0 5px
    }

    .page-container.tradebook .section .exchange.edis a {
        color: #9b9b9b !important;
        display: block
    }

    .page-container.tradebook .section .card {
        padding: 12px 10px;
        border-top: 1px solid #eee
    }

    .page-container.tradebook .section .card.last {
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee
    }

    .page-container.tradebook .section .card-right,
    .page-container.tradebook .section .card .bottom .bottom-right,
    .page-container.tradebook .section .card .middle .middle-right,
    .page-container.tradebook .section .card .top .top-right {
        flex: 6;
        text-align: right
    }

    .page-container.tradebook .section .card .top {
        margin-bottom: 5px;
        display: flex
    }

    .page-container.tradebook .section .card .top .top-left {
        flex: 4;
        font-weight: 600
    }

    .page-container.tradebook .section .card .middle {
        margin-bottom: 5px;
        display: flex
    }

    .page-container.tradebook .section .card .middle .middle-left {
        flex: 6
    }

    .page-container.tradebook .section .card .bottom {
        display: flex
    }

    .page-container.tradebook .section .card .bottom .bottom-left {
        flex: 6
    }

    .page-container.tradebook .section .time {
        color: #9b9b9b
    }

    .page-container.tradebook .section .trade-type {
        padding: 3px 10px;
        text-transform: uppercase;
        width: 30px;
        border-radius: 2px;
        font-size: 10px;
        text-align: center;
        line-height: 1.4 !important
    }

    .page-container.tradebook .section .buy {
        color: #4184f3;
        background-color: rgba(65, 132, 243, .1)
    }

    .page-container.tradebook .section .sell {
        color: #df514c;
        background-color: rgba(223, 81, 76, .1)
    }
}

@media only screen and (max-width:1100px) {
    .heatmap-section {
        display: none
    }
}

@media only screen and (max-width:650px) {
    .app .tradebook .search-table {
        left: 10px !important;
        top: 25px !important;
        padding-left: 0
    }

    .app .tradebook .search-table .icon-search {
        left: 5px !important
    }

    .app .tradebook .table-download {
        left: 120px;
        position: relative
    }
}

@media only screen and (max-width:550px) {
    .app .tradebook .search-table {
        top: 48px !important
    }
}

.page-container.pnl .pnl-head-icon {
    position: relative;
    width: 23px;
    top: 4px
}

.page-container.pnl .input-heatmap-section {
    margin-bottom: 30px
}

.page-container.pnl .input-heatmap-section .lock-class {
    width: 15px;
    display: block !important;
    margin-bottom: 0 !important;
    top: 0 !important
}

.page-container.pnl .input-heatmap-section .lock-img-container .su-loader {
    display: block;
    margin-left: 0 !important
}

.page-container.pnl .pnl-summary-section {
    margin-bottom: 10px
}

.page-container.pnl .pnl-summary-section label {
    display: block
}

.page-container.pnl .pnl-summary-section p {
    display: inline-block
}

.page-container.pnl .pnl-charges-breakdown h4 {
    margin-left: 2%;
    font-weight: 600
}

.page-container.pnl .inputcontainer .filter-field label {
    z-index: 2
}

.page-container.pnl .inputcontainer .seven {
    margin-left: 0
}

.page-container.pnl .section .filters .manage-tags-link {
    display: inline-block;
    float: right;
    position: relative;
    top: 12px;
    font-size: 12px
}

.page-container.pnl .section #logo_img {
    display: none;
    position: absolute;
    left: 55px;
    top: 20px
}

.page-container.pnl .section #calendar_container {
    position: relative;
    margin-bottom: 25px
}

.page-container.pnl .section .pnl-charges-breakdown .modal-container {
    width: 850px !important
}

.page-container.pnl .section .modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease
}

.page-container.pnl .section .state-process {
    margin-top: 20px !important
}

.page-container.pnl .section .modal-wrapper {
    display: table-cell;
    vertical-align: middle
}

.page-container.pnl .section .modal-container {
    margin: 0 auto;
    padding: 20px 30px;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
    box-sizing: border-box;
    transition: all .3s ease
}

.page-container.pnl .section .modal-body,
.page-container.pnl .section .modalbody {
    margin: 20px 0
}

.page-container.pnl .section .modal-body .holdings-breakdown-name,
.page-container.pnl .section .modalbody .holdings-breakdown-name {
    margin: 0
}

.page-container.pnl .section .modal-body .pnl-breakdown-head,
.page-container.pnl .section .modalbody .pnl-breakdown-head {
    margin-bottom: 10px
}

.page-container.pnl .section .modal-body .pnl-breakdown-head h2,
.page-container.pnl .section .modal-body .pnl-breakdown-head p,
.page-container.pnl .section .modalbody .pnl-breakdown-head h2,
.page-container.pnl .section .modalbody .pnl-breakdown-head p {
    margin: 0 !important
}

.page-container.pnl .section .modal-body .pnl-breakdown-head p,
.page-container.pnl .section .modalbody .pnl-breakdown-head p {
    text-align: right;
    padding-right: 20px
}

.page-container.pnl .section .modal-body .pnl-breakdown-head span,
.page-container.pnl .section .modalbody .pnl-breakdown-head span {
    padding-right: 5px
}

.page-container.pnl .section .modal-body .modal-separator,
.page-container.pnl .section .modalbody .modal-separator {
    margin: 20px 0
}

.page-container.pnl .section .modal-body label,
.page-container.pnl .section .modalbody label {
    color: #9b9b9b
}

.page-container.pnl .section .modal-body .holdings-breakdown-qty,
.page-container.pnl .section .modalbody .holdings-breakdown-qty {
    margin-bottom: 20px
}

.page-container.pnl .section .modal-body .holdings-breakdown-qty .five,
.page-container.pnl .section .modalbody .holdings-breakdown-qty .five {
    border-right: 1px solid #e1e1e1
}

.page-container.pnl .section .modal-body .holdings-modal-label,
.page-container.pnl .section .modalbody .holdings-modal-label {
    position: relative;
    right: 5px
}

.page-container.pnl .section .modal-default-button {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    font-size: 22px !important;
    padding: 0
}

.page-container.pnl .section .modal-enter,
.page-container.pnl .section .modal-leave-active {
    opacity: 0
}

.page-container.pnl .section .modal-enter .modal-container,
.page-container.pnl .section .modal-leave-active .modal-container {
    transform: scale(1.1)
}

.page-container.pnl .section input {
    max-width: 100%
}

.page-container.pnl .section input:focus {
    outline: 0;
    border-color: #ccc
}

.page-container.pnl .section .pnl-breakdown-table-container {
    overflow: auto
}

.page-container.pnl .section .pnl-breakdown-table-container input {
    font-size: 12px
}

.page-container.pnl .section .pnl-breakdown-table-container table thead td {
    background: #fafafb
}

.page-container.pnl .section .pnl-breakdown-table-container table thead td:first-child {
    min-width: 100px
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody {
    border-bottom: 1px solid #f1f1f1
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody tr {
    border-bottom: none !important
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody tr:first-child td {
    padding-bottom: 5px !important
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody tr:last-child td {
    padding: 0 10px 10px 10px !important
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody .tagger {
    padding-top: 0 !important
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody .tagger .ti-tags {
    padding-left: 15px !important
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody .tagger .filter-link.active {
    z-index: 4
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody .tagger .filter-option.show {
    z-index: 3
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody .new-tags span:not(.icon) {
    margin-bottom: 5px
}

.page-container.pnl .section .other-charges {
    font-size: .65rem !important;
    padding: 3px 5px !important;
    line-height: 2 !important;
    position: relative;
    top: 3px;
    float: right !important;
    margin-left: 10px
}

.page-container.pnl .section .trade-type {
    padding: 3px 10px;
    text-transform: uppercase;
    width: 30px;
    display: block;
    border-radius: 2px;
    float: left;
    font-size: 10px;
    text-align: center;
    line-height: 1.4 !important
}

.page-container.pnl .section .buy {
    color: #4184f3;
    background-color: rgba(65, 132, 243, .1)
}

.page-container.pnl .section .sell {
    color: #df514c;
    background-color: rgba(223, 81, 76, .1)
}

.page-container.pnl .section .charges {
    margin-bottom: 5px
}

.page-container.pnl .section .charges-breakdown-img {
    width: 15px
}

.page-container.pnl .section .charges-container {
    display: inline-block;
    width: 31%;
    margin-left: 2%
}

.page-container.pnl .section .table-container:not(.pnl-breakdown-table-container) {
    padding-top: 35px
}

.page-container.pnl .section .table-download {
    position: relative;
    top: 35px
}

.page-container.pnl .section .search-table {
    top: 30px !important
}

.page-container.pnl .section .fetch-data,
.page-container.pnl .section .last-updated {
    position: relative;
    top: 35px
}

.page-container.pnl .section .paginate-info {
    margin-bottom: 5px;
    position: relative;
    top: 35px
}

.page-container.pnl .section .pnl-table .percharges-breakdown:hover {
    cursor: pointer
}

.page-container.pnl .section .pnl-table .percharges-breakdown .percharges-breakdown-img {
    height: 12px
}

.page-container.pnl .section .pnl-table:not(.pnl-breakdown-table) div:not(.new-tags) {
    display: inline
}

.page-container.pnl .section .pnl-table:not(.pnl-breakdown-table) tbody tr:hover {
    background: #fafafb
}

.page-container.pnl .section .pnl-table tbody tr td,
.page-container.pnl .section .pnl-table thead tr td {
    text-align: right
}

.page-container.pnl .section .pnl-table tbody tr td:first-child .arrow,
.page-container.pnl .section .pnl-table thead tr td:first-child .arrow {
    float: right !important
}

.page-container.pnl .section .pnl-table tbody tr .symbol-class,
.page-container.pnl .section .pnl-table thead tr .symbol-class {
    position: relative
}

.page-container.pnl .section .pnl-table .context-menu {
    visibility: hidden;
    position: absolute;
    right: 10px;
    top: 11px
}

.page-container.pnl .section .pnl-table tbody tr:hover .context-menu {
    visibility: visible
}

.page-container.pnl .section .pnl-table thead tr {
    border-top: 1px solid #f1f1f1
}

.page-container.pnl .section .pnl-table thead tr .sorted {
    background: #fafafb
}

.page-container.pnl .section .pnl-table thead td {
    cursor: pointer;
    color: #9b9b9b
}

.page-container.pnl .section .pnl-table thead td:hover {
    background: #fafafb
}

.page-container.pnl .section .pnl-table thead td:hover .arrow {
    opacity: 1
}

.page-container.pnl .section .pnl-table thead .arrow-show {
    opacity: 1;
    background: #fafafb
}

.page-container.pnl .section .pnl-table tbody tr:hover .popup {
    display: block !important
}

.page-container.pnl .section .pnl-table tbody tr:hover .popup .popuptext {
    visibility: hidden
}

.page-container.pnl .section .pnl-table tr {
    border-bottom: 1px solid #f1f1f1
}

.page-container.pnl .section .pnl-table .arrow {
    display: inline-block;
    float: left;
    position: relative;
    top: 7px;
    border: solid #9b9b9b;
    border-width: 0 1px 1px 0;
    padding: 3px;
    opacity: 0
}

.page-container.pnl .section .pnl-table .arrow.asc {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg)
}

.page-container.pnl .section .pnl-table .arrow.desc {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.page-container.pnl .section .pnl-table .neg span,
.page-container.pnl .section .pnl-table .pos span {
    min-width: 50px;
    display: inline-block
}

.page-container.pnl .section .heatmap-section {
    margin-top: 35px;
    margin-bottom: 0
}

.page-container.pnl .section .heatmap-section-locked {
    position: absolute;
    height: 260px;
    width: 100%;
    background: transparent;
    z-index: 1
}

.page-container.pnl .section .overview-button {
    display: inline-block;
    left: -40px
}

.page-container.pnl .section .overview-button:hover {
    opacity: .8;
    cursor: pointer
}

.page-container.pnl .section .overview-button img {
    vertical-align: middle
}

.page-container.pnl .section .overview-button label span {
    font-size: 11px
}

.page-container.pnl .section .overview-button label:hover {
    cursor: pointer
}

.page-container.pnl .section .overview-button input[type=radio]:checked+span {
    color: #0059c1
}

.page-container.pnl .section input[name=heatmap-overview] {
    top: 2px;
    position: relative
}

.page-container.pnl .section .date-fetched {
    left: -10px
}

.page-container.pnl .section .heatmap-container {
    position: relative;
    display: inline-block;
    max-width: 100%
}

.page-container.pnl .section .heatmap-container text.month-name {
    color: #444;
    fill: #444
}

.page-container.pnl .section .heatmap-container text.month-name:hover {
    cursor: pointer;
    color: #0059c1;
    fill: #0059c1
}

.page-container.pnl .section .heatmap-container text.month-name.active {
    color: #0059c1 !important;
    fill: #0059c1 !important
}

.page-container.pnl .section .heatmap-container .day-initial {
    color: #444;
    fill: #444
}

.page-container.pnl .section .heatmap-container #calendar_stats {
    display: none;
    text-align: left;
    margin: 0 auto;
    position: relative;
    left: 250px;
    height: 65px;
    top: 20px
}

.page-container.pnl .section .heatmap-container #calendar_stats span.stats-obj {
    color: #9b9b9b;
    width: 200px;
    display: block
}

.page-container.pnl .section .heatmap-container #calendar_stats span.stats-obj span {
    display: block;
    text-align: center;
    font-size: 25px;
    margin-top: 10px;
    color: #0059c1;
    font-weight: 600
}

.page-container.pnl .section .heatmap-container #calendar_stats span.stats-obj:first-child {
    margin-bottom: 0
}

.page-container.pnl .section .heatmap-container #calendar_stats span.stats-obj:last-child {
    border-left: 2px solid #e1e1e1;
    padding-left: 35px;
    margin-left: 35px;
    position: relative;
    left: 200px;
    bottom: 55px
}

.page-container.pnl .section .heatmap-container #calendar_stats span.stats-obj:last-child span {
    left: -20px;
    position: relative
}

.page-container.pnl .section .heatmap-container #share_chart {
    left: 15px;
    position: absolute;
    z-index: 5;
    font-size: 14px;
    font-weight: 600;
    color: #0059c1;
    top: -5px;
    margin-right: 10px
}

.page-container.pnl .section .heatmap-container #share_chart:hover {
    cursor: pointer
}

.page-container.pnl .section .heatmap-container #share_chart img {
    height: 18px;
    margin-right: 4px;
    vertical-align: middle
}

.page-container.pnl .section .heatmap-container #calendar_year svg:not(:root),
.page-container.pnl .section .heatmap-container #calendar svg:not(:root) {
    overflow: visible
}

.page-container.pnl .section .heatmap-container .heatmap-count {
    text-align: left;
    min-height: 25px;
    margin-left: 15px
}

.page-container.pnl .section .heatmap-container .heatmap-count .heatmap-date {
    display: inline-block;
    margin-right: 20px;
    border-right: 1px solid #c1c1c1;
    padding-right: 20px;
    color: #0059c1
}

.page-container.pnl .section .heatmap-container .heatmap-count .heatmap-date-label {
    display: inline-block;
    margin-right: 20px
}

.page-container.pnl .section .heatmap-container .heatmap-count input {
    min-height: 0 !important;
    position: relative;
    top: 3px
}

.page-container.pnl .section .heatmap-container .heatmap-count p {
    margin-top: 0;
    margin-bottom: 0
}

.page-container.pnl .section .heatmap-container .heatmap-count .heatmap-segment {
    margin-right: 20px;
    display: inline-block
}

.page-container.pnl .section .heatmap-container .heatmap-count .heatmap-segment:hover {
    cursor: pointer;
    opacity: .6
}

.page-container.pnl .section .heatmap-container .heatmap-count .heatmap-segment p {
    display: inline-block;
    margin-right: 5px
}

.page-container.pnl .section .heatmap-container .heatmap-count .loader-segment {
    border: none
}

.page-container.pnl .section .pnl-view {
    display: inline-block;
    float: right;
    margin-bottom: 20px
}

.page-container.pnl .section .pnl-view label {
    margin-bottom: 8px;
    margin-left: 8px
}

.page-container.pnl .section .unrealized {
    width: 205px !important;
    margin-left: 0 !important
}

.page-container.pnl .section .unrealized .two {
    width: 100%
}

.page-container.pnl .section .pnl-summary {
    box-sizing: border-box;
    padding: 30px 30px 30px 50px;
    background: #fafafb;
    border-radius: 2px;
    max-width: 100%;
    margin: auto
}

.page-container.pnl .section .pnl-summary h1 {
    display: inline-block;
    margin: 10px 0
}

.page-container.pnl .section .pnl-summary .pnl-profit-percent {
    position: relative;
    left: 10px
}

.page-container.pnl .section .pnl-summary .border-right {
    border-right: 1px solid #f1f1f1;
    padding-right: 40px
}

.page-container.pnl .section .pnl-paginate {
    margin-top: 15px
}

.page-container.pnl .section .pnl-paginate button {
    height: 25px !important;
    border: 1px solid #e1e1e1
}

.page-container.pnl .section .pnl-paginate button:disabled {
    color: #666;
    cursor: not-allowed
}

.page-container.pnl .section .pnl-paginate span {
    font-size: 12px;
    padding: 0 10px
}

@media only screen and (min-width:850px) {
    .page-container.pnl .realized {
        width: 850px
    }

    .page-container.pnl .realized .seven {
        width: 70%
    }
}

@media only screen and (max-width:550px) {

    .page-container.pnl .page-container.pnl .section .modal-body .pnl-breakdown-head p,
    .page-container.pnl .page-container.pnl .section .modalbody .pnl-breakdown-head p {
        text-align: left !important
    }

    .page-container.pnl .page-container.pnl .section .modal-body .pnl-breakdown-head h2 {
        line-height: 1.5
    }

    .page-container.pnl .page-container.pnl .section .pnl-table thead tr td:first-child {
        min-width: 165px
    }
}

@media only screen and (max-width:800px) {
    .page-container.pnl .table-sort {
        margin-top: 3px !important
    }

    .page-container.pnl .grey-back-mobile {
        height: 175px !important
    }

    .page-container.pnl .mobile-agg {
        top: -170px !important
    }

    .page-container.pnl .pull-up-section {
        top: -140px
    }

    .page-container.pnl .pull-up-section.unrealised-pnl {
        top: -100px !important
    }

    .page-container.pnl .cards hr {
        margin: auto;
        width: 75%
    }

    .page-container.pnl .cards .top-left .text-bold {
        font-size: 14px
    }

    .page-container.pnl .cards .middle-left {
        flex: 9 !important
    }

    .page-container.pnl .cards .avg {
        width: 60px
    }

    .page-container.pnl .cards .val {
        width: 67px
    }

    .page-container.pnl .show-on-mobile.inputcontainer.row .four.columns:nth-child(-n+3),
    .page-container.pnl .show-on-mobile.locked.inputcontainer.row .four.columns:nth-child(-n+3) {
        width: 33.33% !important;
        padding-right: 5px !important
    }

    .page-container.pnl .page-container.pnl .input-heatmap-section .two.columns:nth-child(2) {
        width: 50% !important;
        padding-left: 10px
    }

    .page-container.pnl .page-container.pnl .input-heatmap-section .two.columns:first-child {
        width: 50% !important
    }

    .page-container.pnl .page-container.pnl .search-table {
        right: 0
    }

    .page-container.pnl .pnl-summary-mobile {
        max-width: 800px
    }

    .page-container.pnl .pnl-summary-mobile h1 {
        display: inline-block;
        margin-bottom: 10px;
        font-size: 1.7rem
    }

    .page-container.pnl .pnl-summary-mobile .columns {
        margin-bottom: 0
    }

    .page-container.pnl .pnl-summary-mobile .pnl-summary-left {
        border-right: 1px solid #e1e1e1;
        width: 45% !important
    }

    .page-container.pnl .pnl-summary-mobile .pnl-summary-left div.label {
        color: #9b9b9b
    }

    .page-container.pnl .pnl-summary-mobile .pnl-summary-right {
        width: 50% !important;
        padding-left: 16px
    }

    .page-container.pnl .pnl-summary-mobile .pnl-summary-right img.charges-breakdown-img {
        position: relative;
        top: 3px;
        left: 5px
    }

    .page-container.pnl .pnl-summary-mobile .pnl-summary-right .block {
        margin-bottom: 10px
    }

    .page-container.pnl .pnl-summary-mobile .pnl-summary-right .block span.label {
        color: #9b9b9b
    }

    .page-container.pnl .pnl-summary-mobile .pnl-summary-right .block span.value {
        font-size: 16px;
        padding-left: 5px
    }

    .page-container.pnl .pnl-summary-mobile .six-columns {
        min-width: 120px;
        float: left
    }

    .page-container.pnl .pnl-summary-mobile .pos {
        color: #10b983
    }

    .page-container.pnl .pnl-summary-mobile .neg {
        color: #f35631
    }
}

@media only screen and (max-width:650px) {

    .app .pnl .last-updated,
    .app .pnl .paginate-info {
        top: 0
    }

    .app .pnl .search-table {
        left: -10px !important;
        top: 90px !important
    }

    .app .pnl .table-download {
        top: 25px;
        left: 120px
    }
}

@media only screen and (min-width:800px) {
    .pnl-breakdown-table-container {
        max-height: 250px;
        min-height: 200px
    }

    .input-heatmap-section .one {
        width: 4%
    }

    .input-heatmap-section .one button {
        margin: 0;
        padding-left: 5px !important;
        padding-right: 5px !important
    }
}

.page-container.taxpnl .taxpnl-tabs {
    font-size: 1.25rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 50px
}

.page-container.taxpnl .console-banner-tax {
    max-width: 270px;
    position: absolute;
    right: 0;
    top: -14px
}

.page-container.taxpnl .console-banner-tax img {
    max-width: 100%
}

.page-container.taxpnl h1 {
    position: relative
}

.page-container.taxpnl .console-banner {
    position: absolute;
    right: 0
}

.page-container.taxpnl .partner-logo {
    float: right;
    font-size: 1rem;
    position: absolute;
    right: 15px;
    top: -12px;
    color: #444 !important
}

.page-container.taxpnl .partner-logo:hover {
    cursor: pointer;
    opacity: .7
}

.page-container.taxpnl .partner-logo img {
    width: 120px
}

.page-container.taxpnl .tab {
    padding: 15px;
    display: inline-block;
    border-bottom: 1px solid #eee;
    position: relative;
    top: 1px;
    cursor: pointer;
    width: 20%;
    box-sizing: border-box
}

.page-container.taxpnl .tab.active {
    border-bottom: 2px solid #0059c1
}

.page-container.taxpnl .taxpnl-download {
    margin-top: 40px
}

.page-container.taxpnl .taxpnl-download a {
    padding-bottom: 2px;
    padding-right: 5px;
    border-bottom: 1px solid #0059c1
}

.page-container.taxpnl .taxpnl-quarter-input {
    max-width: 100%;
    width: auto
}

.page-container.taxpnl .taxpnl-total {
    box-sizing: border-box;
    padding: 40px 90px;
    background: #fafafb;
    border-radius: 2px;
    max-width: 100%;
    margin: auto
}

.page-container.taxpnl .taxpnl-total label {
    display: block;
    margin-bottom: 5px
}

.page-container.taxpnl .taxpnl-total .row .four h2:last-child {
    margin-bottom: 0
}

.page-container.taxpnl .taxpnl-total .row:nth-child(2) {
    margin-top: 30px
}

.page-container.taxpnl .taxpnl-total h2 {
    display: inline-block;
    margin-top: 10px
}

.page-container.taxpnl .taxpnl-total hr {
    margin: 30px 0
}

@media only screen and (max-width:750px) {
    .page-container.taxpnl .taxpnl-total {
        padding: 20px
    }

    .page-container.taxpnl .tab {
        width: 100%
    }
}

@media only screen and (max-width:450px) {
    .console-banner-tax {
        max-width: 200px !important;
        top: -2px !important
    }
}

@media only screen and (max-width:350px) {
    .console-banner-tax {
        max-width: 185px !important
    }
}

@media only screen and (min-width:800px) {
    .page-container.taxpnl.taxloss .border-right {
        border-right: 1px solid #e1e1e1
    }
}

@media only screen and (max-width:800px) {
    .console-banner-tax {
        position: inherit !important;
        width: 75%;
        max-width: 100% !important;
        display: block;
        margin: auto
    }

    .page-container.taxpnl.taxloss .border-right {
        border-bottom: 1px solid #e1e1e1 !important;
        padding-bottom: 20px;
        margin-bottom: 20px
    }
}

.page-container.taxpnl.taxloss h1 .link {
    float: right;
    vertical-align: middle;
    font-size: 14px
}

.page-container.taxpnl.taxloss .notice h2 {
    display: inline-block;
    margin-bottom: 10px;
    color: #0059c1
}

.page-container.taxpnl.taxloss .notice span {
    line-height: 1.6;
    display: inline-block
}

.page-container.taxpnl.taxloss .notice span:first-child {
    margin-bottom: 10px
}

.page-container.taxpnl.taxloss .notice li {
    margin-bottom: 2px !important
}

.page-container.taxpnl.taxloss .notice li span {
    margin-bottom: 0 !important
}

.page-container.taxpnl.taxloss .taxloss-table-heads {
    margin-bottom: 10px;
    margin-top: 30px
}

.page-container.taxpnl.taxloss .sell-links {
    float: right;
    font-size: 14px;
    vertical-align: middle
}

.page-container.taxpnl.taxloss .taxloss-sell,
.page-container.taxpnl.taxloss .taxpnl-tabs {
    margin-bottom: 25px
}

.page-container.taxpnl.taxloss .mf-scheme {
    font-size: .75rem;
    text-decoration: none;
    padding: 2px 7px;
    margin-left: 5px;
    border-radius: 2px;
    line-height: 1.4;
    float: right;
    min-width: 36px;
    margin-right: 10px;
    margin-top: 3px;
    text-align: center
}

.page-container.taxpnl.taxloss .mf-scheme.DEBT {
    color: #f8ab00;
    background: rgba(255, 202, 85, .33)
}

.page-container.taxpnl.taxloss .mf-scheme.EQUITY {
    color: #0059c1;
    background: rgba(63, 132, 243, .2)
}

.page-container.taxpnl.taxloss p {
    margin: 0
}

.page-container.taxpnl.taxloss .taxloss-table thead tr {
    border-top: 1px solid #f1f1f1
}

.page-container.taxpnl.taxloss .taxloss-table thead td {
    color: #9b9b9b;
    background: #fafafb
}

.page-container.taxpnl.taxloss .taxloss-table tr {
    border-bottom: 1px solid #f1f1f1
}

.page-container.taxpnl.taxloss .taxpnl-total {
    padding: 20px 30px !important;
    margin-bottom: 30px
}

.page-container.taxpnl.taxloss .taxpnl-total h2 {
    margin-top: 10px;
    margin-bottom: 0
}

.page-container.taxpnl.taxloss .taxpnl-total h3 {
    color: #0059c1;
    margin-bottom: 15px
}

.page-container.taxpnl.taxloss .taxpnl-total hr {
    margin: 20px 0
}

.page-container.taxpnl.taxloss .taxpnl-total:last-child {
    margin-top: 30px
}

.page-container.taxpnl.taxloss .taxpnl-total .row:nth-child(2) {
    margin: 0
}

.page-container.taxpnl.taxloss .taxloss-total {
    padding: 30px
}

.page-container.taxpnl.taxloss .taxloss-total label {
    display: inline-block !important
}

.page-container.taxpnl.taxloss .taxloss-total h2 {
    display: inline-block
}

.page-container.taxpnl.taxloss .mf-type-switch {
    padding-left: 30px;
    position: relative;
    top: -20px
}

.page-container.taxpnl.taxloss .mf-type-switch label {
    display: inline-block !important
}

.page-container.taxpnl.taxloss .mf-type-switch label:last-child {
    margin-left: 20px
}

.page-container.taxpnl.taxloss .mf-type-switch input {
    min-height: 0 !important
}

.page-container.profile-content .section input:-webkit-autofill,
.page-container.profile-content .section input:-webkit-autofill:active,
.page-container.profile-content .section input:-webkit-autofill:focus,
.page-container.profile-content .section input:-webkit-autofill:hover {
    -webkit-box-shadow: 0 0 0 30px #fff inset !important;
    -webkit-text-fill-color: #4a4a4a
}

.page-container.profile-content .section button[disabled] {
    background: #9b9b9b;
    border: 1px solid #9b9b9b
}

.page-container.profile-content .section .income-proof-info {
    display: block
}

.page-container.profile-content .section .aadhaar-alert {
    display: none;
    align-items: center;
    margin-top: 20px
}

.page-container.profile-content .section .aadhaar-alert img {
    margin-right: 12px
}

.page-container.profile-content .section .family h1 span {
    margin-right: 5px
}

.page-container.profile-content .section .family-account-card .top-left {
    flex: 20 !important
}

.page-container.profile-content .section .family-table tbody td:last-child.family-account-links {
    width: 230px
}

.page-container.profile-content .section .family-table tbody td:last-child.family-account-links .family-view {
    padding-right: 15px;
    margin-right: 10px;
    border-right: 1px solid #e1e1e1
}

.page-container.profile-content .section .family-table tbody .rel {
    font-size: 18px
}

.page-container.profile-content .section .family-table tbody .status span {
    text-transform: capitalize
}

.page-container.profile-content .section .family-form input {
    text-transform: uppercase
}

.page-container.profile-content .section .add-family-sub-heading {
    margin-top: 30px;
    margin-bottom: 10px
}

.page-container.profile-content .section .family-mobile {
    position: relative
}

.page-container.profile-content .section .family-mobile .pre-mobile {
    position: absolute;
    top: 21px;
    z-index: 1;
    padding: 10px;
    background: #fafafb;
    left: 1px;
    line-height: 1.25rem
}

.page-container.profile-content .section .family-mobile input {
    padding-left: 50px !important
}

.page-container.profile-content .section .profile-list {
    padding: 20px 10px;
    border-bottom: 1px solid #f1f1f1
}

.page-container.profile-content .section .profile-list.active,
.page-container.profile-content .section .profile-list:hover {
    cursor: pointer;
    background: #fafafb;
    color: #0059c1
}

.page-container.profile-content .section .file-password-help {
    display: inline-block;
    line-height: 18px;
    margin-top: 5px
}

.page-container.profile-content .section .profile-mobile .profile-mobile-card {
    position: relative;
    top: -16px;
    background: #f4f4f4;
    left: -20px;
    right: -20px;
    width: calc(100% + 40px);
    height: 75px;
    margin-bottom: 70px
}

.page-container.profile-content .section .profile-mobile .profile-mobile-card .profile-avatar-container {
    display: flex;
    align-items: center;
    width: auto;
    max-width: 300px;
    margin-bottom: 0;
    border: none;
    margin: auto;
    background: #fff;
    padding: 20px 20px;
    position: relative;
    top: 19px;
    box-shadow: 0 1px 6px 0 rgba(0, 0, 0, .1)
}

.page-container.profile-content .section .profile-mobile .profile-mobile-card .profile-avatar-container .row {
    align-items: center
}

.page-container.profile-content .section .profile-mobile .profile-mobile-card .profile-avatar-container h2 {
    margin-bottom: 10px
}

.page-container.profile-content .section .profile-mobile .profile-mobile-card .profile-avatar-container h3 {
    margin-bottom: 0
}

.page-container.profile-content .section .profile-mobile .profile-mobile-card .profile-avatar {
    position: relative
}

.page-container.profile-content .section .open-side-nav {
    position: relative;
    left: -20px;
    padding: 13px 17px;
    bottom: 15px;
    background: #0059c1;
    color: #fff;
    font-weight: 600;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 18px
}

.page-container.profile-content .section .open-side-nav .opened {
    display: none
}

.page-container.profile-content .section .same-address {
    margin-top: 30px;
    margin-bottom: 0
}

.page-container.profile-content .section .error-state {
    color: #f35631
}

.page-container.profile-content .section .account-closure-section {
    margin-top: 80px
}

.page-container.profile-content .section .account-closure-section #close_account {
    margin-top: 10px
}

.page-container.profile-content .section .account-closure-section #account_closure_form .su-radio-group {
    margin-bottom: 30px
}

.page-container.profile-content .section .account-closure-section #account_closure_form .su-radio-group .su-radio-wrap {
    display: block;
    margin-bottom: 10px
}

.page-container.profile-content .section .account-closure-section #account_closure_form textarea {
    width: auto;
    max-width: 100%
}

.page-container.profile-content .section .account-closure-section #account_closure_form #submit_account_closure {
    margin-right: 20px
}

.page-container.profile-content .section .nominee-container {
    width: 100%
}

.page-container.profile-content .section .add-nominee-form .guardian-note,
.page-container.profile-content .section .add-nominee-form .nominee-actions {
    display: inline-block;
    float: right;
    font-size: 14px
}

.page-container.profile-content .section .add-nominee-form .su-checkbox-group {
    display: inline-block
}

.page-container.profile-content .section .add-nominee-form .nominee-actions {
    padding: 15px 0
}

.page-container.profile-content .section .add-nominee-form .nominee-empty {
    margin-bottom: 30px
}

.page-container.profile-content .section .add-nominee-form .nominee-empty.nominee-collapse {
    border-bottom: 1px solid #e1e1e1
}

.page-container.profile-content .section .add-nominee-form .nominee-empty h3 {
    margin-bottom: 0
}

.page-container.profile-content .section .add-nominee-form .custom-error {
    display: none
}

.page-container.profile-content .section .add-nominee-form .mx-datepicker,
.page-container.profile-content .section .add-nominee-form .nominee-rel,
.page-container.profile-content .section .add-nominee-form input[type=file],
.page-container.profile-content .section .add-nominee-form select {
    display: block
}

.page-container.profile-content .section .add-nominee-form .su-input-group {
    margin-top: 30px
}

.page-container.profile-content .section .add-nominee-form .su-input-group .su-message {
    margin-top: 0;
    position: absolute;
    font-size: .725rem
}

.page-container.profile-content .section .add-nominee-form button {
    margin-bottom: 5px
}

.page-container.profile-content .section .nominee-proof-help {
    margin: 0;
    line-height: 18px;
    margin-top: 35px
}

.page-container.profile-content .section .guardian-nominee-form {
    margin-top: 40px
}

.page-container.profile-content .section .nominee-name-tab {
    display: inline-block;
    padding: 15px 0
}

.page-container.profile-content .section .nominee-name-tab:hover {
    cursor: pointer;
    opacity: .8
}

.page-container.profile-content .section .nominee-collapse form {
    opacity: 0;
    height: 0;
    overflow: hidden;
    margin-bottom: 0 !important
}

.page-container.profile-content .section .nominee-reupload {
    position: absolute;
    top: 4px;
    right: 7px;
    padding: 4px
}

.page-container.profile-content .section #witness_form,
.page-container.profile-content .section .nominee-filled {
    margin-bottom: 20px
}

.page-container.profile-content .section .nominee-list-item {
    margin-top: 20px
}

.page-container.profile-content .section .nominee-list-item .edit-nominee:hover {
    cursor: pointer
}

.page-container.profile-content .section .location-inputs input {
    color: #666 !important
}

.page-container.profile-content .section .poa-form {
    margin-top: 40px
}

.page-container.profile-content .section .poa-form .su-checkbox-value {
    line-height: 20px
}

.page-container.profile-content .section .poa-form .su-checkbox-box {
    position: relative;
    top: 3px
}

.page-container.profile-content .section .bank-secondary-edit .su-radio-group {
    display: inline-block;
    margin-left: 15px;
    position: relative;
    bottom: 1px
}

.page-container.profile-content .section .bank-secondary-edit button {
    margin-top: 20px
}

.page-container.profile-content .section .segment-kill-icon {
    display: inline-block;
    float: right;
    position: relative;
    top: 5px;
    margin-right: 5px
}

.page-container.profile-content .section .edit_bank_form .hidden {
    display: none
}

.page-container.profile-content .section .edit_bank_form ul {
    padding-left: 25px
}

.page-container.profile-content .section .edit_bank_form ul li {
    margin-bottom: 10px
}

.page-container.profile-content .section .edit_bank_form .manage-segment-head {
    margin-bottom: 30px
}

.page-container.profile-content .section #form_segment_manage .segment-paused {
    display: block;
    margin-top: 10px
}

.page-container.profile-content .section #form_segment_manage .locked-segment,
.page-container.profile-content .section #form_segment_manage .su-switch-group {
    display: inline-block;
    float: right
}

.page-container.profile-content .section #form_segment_manage .locked-segment a {
    padding: 4px 10px;
    text-transform: uppercase;
    width: 87px;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    line-height: 1.4 !important;
    color: #df514c;
    background-color: rgba(223, 81, 76, .1);
    border-radius: 3px
}

.page-container.profile-content .section #form_segment_manage .locked-segment a:hover {
    text-decoration: none !important
}

.page-container.profile-content .section #form_segment_manage label {
    color: #444
}

.page-container.profile-content .section #form_segment_manage .su-switch-group {
    display: inline-block;
    margin-left: 20px
}

.page-container.profile-content .section #form_segment_manage .manage-segment-box {
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #e1e1e1
}

.page-container.profile-content .section #form_segment_manage .segment-name {
    display: inline-block
}

.page-container.profile-content .section .holdings-check-box {
    border: 1px solid #e1e1e1;
    padding: 10px 13px;
    margin-bottom: 30px;
    border-radius: 3px
}

.page-container.profile-content .section .holdings-check-box .su-checkbox-group {
    margin-bottom: 10px
}

.page-container.profile-content .section .documents select {
    width: auto !important;
    margin-right: 20px;
    top: 1px;
    position: relative
}

.page-container.profile-content .section .segment-file-container {
    position: relative;
    margin-top: 5px
}

.page-container.profile-content .section .edit-bank {
    display: inline-block;
    font-size: 1.25rem;
    margin-left: 10px;
    color: #0059c1
}

.page-container.profile-content .section .edit-bank:hover {
    cursor: pointer;
    opacity: .8
}

.page-container.profile-content .section .edit-bank img {
    height: 1.25rem;
    position: relative;
    top: 1.5px
}

.page-container.profile-content .section #segment_file_error {
    color: #f35631;
    display: block
}

.page-container.profile-content .section .soon-tag {
    margin-left: 25px;
    font-size: 10px;
    background: #4caf50;
    color: #fff;
    font-weight: 600;
    padding: 5px 6px;
    line-height: 10px;
    border-radius: 2px;
    display: inline-block
}

.page-container.profile-content .section .slb .su-checkbox-box {
    position: relative;
    top: 3px
}

.page-container.profile-content .section .slb .su-checkbox-value {
    line-height: 1.5
}

.page-container.profile-content .section #profile_zpin h3 a {
    margin-left: 10px;
    font-size: .875rem
}

.page-container.profile-content .section #profile_zpin h3 a img {
    height: 18px;
    position: relative;
    top: 3px
}

.page-container.profile-content .section .pending-requests {
    margin-top: 60px
}

.page-container.profile-content .section .pending-requests img {
    height: 16px;
    position: relative;
    top: 2px
}

.page-container.profile-content .section .history-table tr {
    border-bottom: 1px solid #f1f1f1;
    padding: 10px 5px
}

.page-container.profile-content .section .history-table thead {
    color: #9b9b9b
}

.page-container.profile-content .section .history-table thead tr {
    border-top: 1px solid #f1f1f1
}

.page-container.profile-content .section .history-table .delete-disc,
.page-container.profile-content .section .history-table .edit-disc {
    display: none;
    width: .875rem
}

.page-container.profile-content .section .history-table .delete-disc:hover,
.page-container.profile-content .section .history-table .edit-disc:hover {
    cursor: pointer
}

.page-container.profile-content .section .history-table .edit-disc {
    position: relative;
    right: 15px
}

.page-container.profile-content .section .history-table tbody tr:hover {
    background: #fafafb
}

.page-container.profile-content .section .history-table tbody tr:hover .delete-disc,
.page-container.profile-content .section .history-table tbody tr:hover .edit-disc {
    display: inline
}

.page-container.profile-content .section .history-table tbody tr td:last-child {
    min-width: 40px
}

.page-container.profile-content .section .history-table tbody .approved-flag,
.page-container.profile-content .section .history-table tbody .cancel-flag,
.page-container.profile-content .section .history-table tbody .failed-flag,
.page-container.profile-content .section .history-table tbody .pending-flag {
    text-transform: uppercase;
    font-size: .6875rem;
    padding: 3px 11px;
    border-radius: 2px;
    position: relative;
    width: 76px;
    display: inline-block;
    margin: auto;
    line-height: 1.7;
    text-align: center
}

.page-container.profile-content .section .history-table tbody .pending-flag {
    background: rgba(255, 202, 85, .15);
    color: #f8ab00
}

.page-container.profile-content .section .history-table tbody .cancel-flag {
    background: hsla(0, 0%, 80%, .15);
    color: #9b9b9b
}

.page-container.profile-content .section .history-table tbody .approved-flag {
    background: rgba(65, 132, 243, .15);
    color: #4184f3
}

.page-container.profile-content .section .history-table tbody .failed-flag {
    background: rgba(255, 85, 85, .15);
    color: #f6461a
}

.page-container.profile-content .section .profile-info {
    display: none
}

.page-container.profile-content .section .profile-info.active {
    display: block
}

.page-container.profile-content .section .profile-info.bank a:hover {
    text-decoration: none !important
}

.page-container.profile-content .section .profile-avatar,
.page-container.profile-content .section .profile-name {
    display: inline-block
}

.page-container.profile-content .section .profile-name {
    margin-left: 85px
}

.page-container.profile-content .section .profile-name h3 {
    max-width: 245px
}

.page-container.profile-content .section .mcx-classify-form .row {
    margin-bottom: 15px;
    text-align: left
}

.page-container.profile-content .section .mcx-classify-form .row.hidden {
    display: none
}

.page-container.profile-content .section .mcx-classify-form button[disabled] {
    background: #9b9b9b;
    border: 1px solid #9b9b9b
}

.page-container.profile-content .section .mcx-classify-form .pagination {
    margin-top: 40px !important;
    margin-bottom: 0
}

.page-container.profile-content .section .mcx-classify-form p {
    margin: 0;
    line-height: 32px;
    text-transform: capitalize
}

.page-container.profile-content .section .personal .icon {
    color: #0059c1
}

.page-container.profile-content .section .personal .edit-email,
.page-container.profile-content .section .personal .edit-mobile {
    display: inline-block;
    margin-left: 5px
}

.page-container.profile-content .section .personal .edit-email:hover,
.page-container.profile-content .section .personal .edit-mobile:hover {
    cursor: pointer
}

.page-container.profile-content .section .edit-profile-modal h1 a {
    color: inherit !important
}

.page-container.profile-content .section .edit-profile-modal ul {
    padding-left: 25px
}

.page-container.profile-content .section .edit-profile-modal .modal-container {
    overflow: auto
}

.page-container.profile-content .section .edit-profile-modal .edit-profile-email input {
    max-width: 250px !important
}

.page-container.profile-content .section .edit-profile-modal .edit-profile-mobile input {
    max-width: 150px !important
}

.page-container.profile-content .section .edit-profile-modal .notice {
    margin-top: 15px
}

.page-container.profile-content .section .profile-avatar-container {
    position: relative
}

.page-container.profile-content .section .profile-avatar {
    margin-right: 25px;
    position: absolute;
    top: -1px
}

.page-container.profile-content .section .profile-avatar .avatar {
    height: 60px !important;
    width: 60px !important;
    font-size: 20px !important;
    line-height: 60px !important
}

.page-container.profile-content .section .profile-uploads {
    display: inline-block;
    width: 31%;
    margin-left: 2%
}

.page-container.profile-content .section .profile-uploads-container .profile-uploads:nth-child(3n-2) {
    margin-left: 0
}

.page-container.profile-content .section .profile-container h3 {
    word-break: break-word;
    line-height: 1.3
}

.page-container.profile-content .section .profile-container a:hover {
    text-decoration: underline !important
}

.page-container.profile-content .section .profile-container .eight {
    padding-left: 45px;
    border-left: 1px solid #f1f1f1;
    min-height: 525px
}

.page-container.profile-content .section .profile-container .text-box {
    margin-bottom: 30px !important
}

.page-container.profile-content .section .financial-upload-form select {
    margin-bottom: 20px;
    width: 200px !important
}

.page-container.profile-content .section .financial-upload-form input[type=file] {
    max-width: 100%;
    height: 39px;
    position: relative;
    top: -4px
}

.page-container.profile-content .section .financial-upload-form .password-help,
.page-container.profile-content .section .financial-upload-form .password-help div {
    display: inline
}

.page-container.profile-content .section .quarterly-settlement-form .su-radio-wrap {
    display: block;
    margin-bottom: 15px
}

.page-container.profile-content .section .quarterly-settlement-form label {
    border-bottom: none
}

.page-container.profile-content .section .quarterly-settlement-form button {
    margin-top: 15px
}

.page-container.profile-content .section .quarterly-settlement-form .su-radio-group .su-radio:checked+.su-radio-label:before {
    background: #0059c1;
    border: 1px solid #0059c1
}

.page-container.profile-content .section .reset-zpin {
    font-size: .75rem;
    text-decoration: none;
    padding: 2px 7px;
    margin-left: 5px;
    background: rgba(63, 132, 243, .2);
    border-radius: 2px;
    line-height: 1;
    position: relative;
    bottom: 2px;
    left: 10px
}

.page-container.profile-content .section .account-flag {
    font-size: .6875rem;
    display: inline;
    margin-left: 5px;
    background: rgba(255, 202, 85, .15);
    color: #f8ab00
}

.page-container.profile-content .section .account-flag,
.page-container.profile-content .section .financial-proof-flag {
    text-transform: uppercase;
    padding: 3px 11px;
    border-radius: 2px;
    position: relative;
    width: 76px;
    line-height: 1.7;
    text-align: center
}

.page-container.profile-content .section .financial-proof-flag {
    font-size: .75rem;
    font-weight: 600;
    display: block
}

.page-container.profile-content .section .approved-flag {
    background: rgba(65, 132, 243, .15);
    color: #4184f3
}

.page-container.profile-content .section .pending-flag {
    background: rgba(255, 202, 85, .15);
    color: #d89602
}

.page-container.profile-content .section .rejected-flag {
    background: rgba(255, 85, 85, .15);
    color: #f6461a
}

@media only screen and (max-width:400px) {
    .segment-kill-icon {
        top: 0 !important
    }

    .segment-kill-icon img {
        width: 90px
    }
}

@media only screen and (max-width:800px) {
    .page-container.profile-content .section .profile-mobile .profile-mobile-card .profile-avatar-container h2 {
        font-size: 14px;
        line-height: 20px
    }

    .page-container.profile-content .section .profile-mobile .profile-mobile-card .profile-avatar-container h3 {
        font-size: 12px
    }

    .family-confirmation .six {
        width: 50% !important
    }

    .app .page-container.profile-content {
        padding-left: 20px !important;
        padding-right: 20px !important
    }

    .app .page-container.profile-content .section {
        margin-bottom: 40px
    }

    .app .page-container.profile-content .profile-uploads {
        width: 100% !important
    }

    .app .page-container.profile-content .profile-list {
        padding: 15px !important;
        min-width: 220px;
        box-sizing: border-box
    }

    .app .page-container.profile-content .profile-container .eight {
        padding-left: 0 !important;
        border-left: none !important
    }

    .app .page-container.profile-content #profile_client_id,
    .app .page-container.profile-content #profile_zpin {
        width: 48% !important
    }

    .app .page-container.profile-content #profile_zpin {
        margin-left: 4% !important
    }
}

.margins .fund-button-wrap {
    text-align: right
}

.margins .main-details .row {
    margin-bottom: 50px
}

.margins .main-details .label {
    text-transform: uppercase;
    color: #9b9b9b;
    margin-bottom: 10px
}

.margins .sub-details .row {
    margin-bottom: 50px
}

.margins .sub-details .label {
    text-transform: uppercase;
    color: #9b9b9b;
    margin-bottom: 10px
}

.notifications-window {
    position: absolute;
    right: 45px;
    top: 50px;
    min-width: 300px;
    padding: 10px;
    z-index: 100;
    text-align: left;
    border: 1px solid #eee;
    border-radius: 2px;
    background: #fff;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .1)
}

.notifications-window table tbody tr td {
    text-align: left
}

.notifications-window table tbody tr td.status {
    text-align: right
}

.notifications-window .loader {
    display: block;
    text-align: center;
    padding: 20px
}

.notifications-window .clear {
    float: right;
    padding: 5px 5px 0 5px;
    color: #9b9b9b;
    cursor: pointer
}

.context-menu {
    position: absolute;
    display: inline-block
}

.context-menu .separator {
    border-top: 1px solid #eee
}

.context-menu .context-menu-list {
    left: 4px;
    z-index: 9;
    padding: 3px 0 0 0;
    box-sizing: border-box;
    text-align: left;
    min-width: 175px;
    border-width: 1px;
    border-radius: 2px;
    position: fixed;
    border-style: solid;
    background: #fff;
    border-color: #ddd;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1)
}

.context-menu .context-menu-list li a {
    width: 100%;
    padding: 8px 10px;
    display: inline-block;
    box-sizing: border-box;
    color: rgba(68, 68, 68, .6) !important;
    text-decoration: none
}

.context-menu .context-menu-list li a .icon {
    margin-right: 5px
}

.context-menu .context-menu-list li a:hover {
    color: #444;
    background: #fafafb
}

.context-menu .context-menu-list hr {
    margin: 0
}

.context-menu .context-menu-list.position-bottom:after,
.context-menu .context-menu-list.position-bottom:before {
    border-bottom: 7px solid #fff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
    right: 9px;
    position: absolute;
    top: -7px
}

.context-menu .context-menu-list.position-bottom:before {
    border-bottom-color: #ccc;
    border-bottom-width: 7px;
    top: -8px
}

.context-menu .context-menu-list.position-top {
    padding: 0
}

.context-menu .context-menu-list.position-top:after,
.context-menu .context-menu-list.position-top:before {
    border-top: 7px solid #fff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    content: "";
    right: 9px;
    position: absolute;
    bottom: -7px
}

.context-menu .context-menu-list.position-top:before {
    border-top-color: #ccc;
    border-top-width: 7px;
    bottom: -8px
}

.context-menu.table {
    float: right;
    display: inline-block;
    position: relative
}

.context-menu.table .context-menu-button {
    font-size: 1rem;
    color: #fff;
    background: #387ed1;
    cursor: pointer;
    display: inline-block;
    line-height: 1;
    border: 1px solid #387ed1;
    padding: 0 5px;
    border-radius: 2px
}

.context-menu.mobile .context-menu-list {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%
}

.mobile-context-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background: rgba(0, 0, 0, .6)
}

.mobile-context-menu .mobile-context-menu-list {
    bottom: 0;
    width: 100%;
    position: fixed;
    background: #fff
}

.mobile-context-menu .mobile-context-menu-list li {
    border-top: 1px solid #f4f4f4
}

.mobile-context-menu .mobile-context-menu-list li .link,
.mobile-context-menu .mobile-context-menu-list li a {
    width: 100%;
    padding: 15px;
    box-sizing: border-box;
    color: #000 !important;
    display: flex
}

.mobile-context-menu .mobile-context-menu-list li .link span.icon,
.mobile-context-menu .mobile-context-menu-list li a span.icon {
    margin-right: 10px
}

.mobile-context-menu .mobile-context-menu-list li a span:nth-child(2) {
    margin-top: 2px
}

.mobile-context-menu .mobile-context-menu-list li a span:nth-child(3) {
    margin-left: 85%;
    position: absolute
}

.mobile-context-menu .mobile-context-menu-list li img {
    max-width: 20px;
    height: 20px;
    margin-right: 4px;
    margin-top: 2px
}

.loans .flag {
    text-transform: uppercase;
    font-size: .6875rem;
    padding: 3px 11px;
    border-radius: 2px;
    position: relative;
    width: 76px;
    display: inline;
    margin-left: 5px;
    line-height: 1.7;
    text-align: center;
    background: rgba(255, 202, 85, .15);
    color: #f35631
}

.loans .manage-pledge-amounts {
    padding-top: 15px
}

.loans .manage-pledge-amounts .unpledge-info-text {
    line-height: normal
}

.loans .manage-pledge-amounts div:nth-child(2) .icon-arrow-right {
    margin: 0;
    padding: 20px 30px 0 0
}

@media only screen and (min-width:801px) {
    .loans .manage-pledge-amounts {
        border-left: 1px solid #f1f1f1;
        padding: 0 20px 20px 40px !important
    }
}

.loans .unpledge-button {
    margin-top: 25px
}

.loans .img-zerodha-capital {
    right: 5%;
    position: absolute
}

.loans .text-red {
    color: #f6461a
}

.loans a.btn {
    color: #fff !important
}

.loans .loan-info-wrapper .banner-alert-warning {
    border-radius: 2px;
    padding: 12px 10px 12px 42px;
    background-color: #feeeeb
}

.loans .loan-info-wrapper .banner-alert-warning p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 5px;
    color: #f35631
}

.loans .loan-info-wrapper .banner-alert-success {
    border-radius: 2px;
    padding: 12px 10px 12px 42px;
    background-color: #eff8ef
}

.loans .loan-info-wrapper .banner-alert-success p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    margin-left: 5px;
    color: #56b85a
}

@media only screen and (min-width:1200px) {
    .loans .loan-info-wrapper {
        padding: 0 50px
    }
}

@media only screen and (max-width:600px) {
    .loans .loans-card-container .one {
        display: none
    }
}

.loans .loans-card-container {
    margin: 40px 0
}

.loans .loans-card-container .loanamt-card {
    background-color: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    min-height: 166px !important
}

.loans .loans-card-container .loanamt-card.left {
    padding: 20px 0 20px 30px;
    display: flex;
    align-items: center
}

.loans .loans-card-container .loanamt-card.right {
    padding: 20px 0
}

.loans .loans-card-container .loanamt-card.right .payment-title {
    display: flex;
    align-items: center;
    padding: 0 30px
}

.loans .loans-card-container .loanamt-card.right .payment-title .six.columns p {
    margin-bottom: 0;
    margin-top: 0;
    text-align: right
}

.loans .loans-card-container .loanamt-card.right .repayment .make-payment-btn {
    float: right
}

.loans .loans-card-container .loanamt-card.right .repayment .make-payment-btn.sm {
    float: none
}

.loans .loans-card-container .loanamt-card.right .repayment .close-loan-text {
    color: #0059c1;
    cursor: pointer;
    font-size: 12px;
    margin-top: 0;
    text-align: center;
    width: 154px;
    float: right
}

.loans .loans-card-container .loanamt-card.right .repayment .close-loan-text.sm {
    float: none
}

.loans .loans-card-container .loanamt-card.right .payment-card-text.repayment,
.loans .loans-card-container .loanamt-card.right .payment-card-text.shortfall-payment {
    padding: 20px 30px
}

.loans .loans-card-container .loanamt-card.right .payment-card-text.repayment .make-payment-btn,
.loans .loans-card-container .loanamt-card.right .payment-card-text.shortfall-payment .make-payment-btn {
    margin: 0
}

.loans .loans-card-container .loanamt-card.right .payment-card-text .four.columns .loan-closure-btn {
    margin-top: 8px;
    max-width: 133px;
    width: 133px
}

.loans .loans-card-container .loanamt-card.right .payment-card-text .four.columns .loan-closure-btn,
.loans .loans-card-container .loanamt-card.right .payment-card-text .four.columns .make-payment-btn {
    font-size: .875rem;
    padding: 7px 25px
}

.loans .loans-card-container .loanamt-card h2 {
    margin-bottom: 0
}

.loans .loans-card-container .loanamt-card .outstanding-loan-amount {
    width: 100%;
    display: flex;
    align-items: center
}

.loans .loans-card-container .loanamt-card .outstanding-loan-amount .interest-rate,
.loans .loans-card-container .loanamt-card .outstanding-loan-amount .ltv-ratio,
.loans .loans-card-container .loanamt-card .outstanding-loan-amount .tenure {
    display: flex;
    padding-top: 5px;
    padding-bottom: 5px
}

.loans .loans-card-container .loanamt-card .outstanding-loan-amount .interest-rate p,
.loans .loans-card-container .loanamt-card .outstanding-loan-amount .ltv-ratio p,
.loans .loans-card-container .loanamt-card .outstanding-loan-amount .tenure p {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.loans .loans-card-container .loanamt-card .outstanding-loan-amount .interest-rate label,
.loans .loans-card-container .loanamt-card .outstanding-loan-amount .ltv-ratio label,
.loans .loans-card-container .loanamt-card .outstanding-loan-amount .tenure label {
    min-width: 120px
}

.loans .loans-card-container .payment-card-text p {
    margin-bottom: 0 !important;
    margin-top: 0 !important
}

.loans .loans-card-container .payment-card-text p.loan-close-text {
    cursor: pointer
}

.loans .confirm-btn {
    margin-top: 10px
}

.loans .loan-pledge-confirm div {
    float: left
}

.loans .loan-pledge-confirm div:first-child {
    width: 25%
}

.loans .loan-pledge-confirm div:nth-child(2) {
    width: 25%;
    text-align: center;
    color: #387ed1
}

.loans .loan-pledge-confirm div:nth-child(3) {
    width: 50%
}

.loans .loan-pledge-confirm div label {
    color: #387ed1 !important
}

.loans .loan-pledge-confirm div p {
    color: #9b9b9b !important;
    margin-top: 2px
}

.loans .loan-pledge-confirm div img {
    margin-top: 15%
}

.loans .verify-aadhaar-text a {
    text-decoration: none;
    color: #000
}

.loans .processing-fee {
    margin-top: 30px;
    margin-bottom: 15px
}

.loans .processing-fee p,
.loans .processing-fee span {
    display: inline
}

.loans .processing-fee span {
    font-weight: 600;
    color: #000 !important;
    font-size: 14px !important
}

.loans .pledge-stocks-container {
    margin-top: -20px;
    margin-left: -60px
}

.loans .pledge-stocks-container table thead tr {
    border-bottom: 1px solid #f1f1f1;
    border-top: 1px solid #f1f1f1
}

.loans .pledge-stocks-container table thead tr th {
    color: #666 !important;
    font-weight: 400
}

.loans .pledge-stocks-container table thead tr th:first-child {
    float: left
}

.loans .pledge-stocks-container table tbody tr {
    border-bottom: 1px solid #f1f1f1
}

.loans .pledge-stocks-container table tbody tr td {
    margin: 4px 0 4px 0
}

.loans .pledge-stocks-container table tbody tr td:first-child {
    float: left
}

.loans .pledge-stocks-details {
    width: 50%;
    float: left
}

.loans .pledge-statements-container .data-table:focus {
    border: 0;
    outline: none
}

.loans .pledge-statements-container table thead tr {
    border-bottom: 1px solid #f1f1f1;
    border-top: 1px solid #f1f1f1
}

.loans .pledge-statements-container table thead tr th {
    color: #666 !important;
    background: #fafafb;
    font-weight: 400
}

.loans .pledge-statements-container table thead tr th:nth-child(-n+2) {
    text-align: left !important
}

.loans .pledge-statements-container table thead tr th:nth-child(4n+1) {
    min-width: 100px !important
}

.loans .pledge-statements-container table tbody tr {
    border-bottom: 1px solid #f1f1f1
}

.loans .pledge-statements-container table tbody tr td {
    margin: 5px 0 5px 0
}

.loans .pledge-statements-container table tbody tr td:first-child {
    position: relative
}

.loans .pledge-statements-container .flag-container {
    position: absolute;
    right: 0;
    display: inline-block
}

.loans .pledge-statements-container .flag-container .context-menu-button-wrap>*,
.loans .pledge-statements-container .flag-container .context-menu.table ul.context-menu-list li a {
    text-transform: none !important
}

.loans .pledge-statements-container ul.pagination {
    padding: 0;
    list-style-type: none;
    text-align: center;
    margin-top: 30px
}

.loans .pledge-statements-container ul.pagination li {
    cursor: pointer;
    display: inline-block;
    margin-right: 12px
}

.loans .pledge-statements-container ul.pagination li:first-child a {
    position: relative;
    bottom: 5px;
    font-size: 0;
    background: url(/static/images/page-prev.png);
    background-repeat: no-repeat;
    background-position: 50%
}

.loans .pledge-statements-container ul.pagination li:last-child a {
    position: relative;
    bottom: 5px;
    font-size: 0;
    background: url(/static/images/page-next.png);
    background-repeat: no-repeat;
    background-position: 50%
}

.loans .pledge-statements-container ul.pagination li.selected {
    color: #0059c1;
    text-decoration: none
}

.loans .pledge-statements-container ul.pagination li.selected a {
    background: rgba(65, 132, 243, .24);
    border: none
}

.loans .pledge-statements-container ul.pagination li.disabled a {
    cursor: not-allowed
}

.loans .pledge-statements-container ul.pagination li:hover a {
    border: 1px solid rgba(65, 132, 243, .24)
}

.loans .pledge-statements-container ul.pagination li a {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    line-height: 30px;
    color: #0059c1;
    display: block;
    border: 1px solid transparent
}

.loans .pledge-statements-container ul.pagination li a:hover {
    opacity: .9
}

.loans .pledge-statements-container ul.pagination li a:focus {
    outline: 0
}

.loans .section.cards .card {
    padding: 12px 10px;
    border-top: 1px solid #eee
}

.loans .section.cards .card.last {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee
}

.loans .section.cards .card .top {
    margin-bottom: 5px;
    display: flex
}

.loans .section.cards .card .top .top-left {
    flex: 6
}

.loans .section.cards .card .top .top-right {
    flex: 6;
    text-align: right
}

.loans .section.cards .card .middle {
    margin-bottom: 5px;
    display: flex
}

.loans .section.cards .card .middle .middle-left {
    flex: 6
}

.loans .section.cards .card .middle .middle-right {
    flex: 6;
    text-align: right
}

.loans .section.cards .card .bottom {
    display: flex
}

.loans .section.cards .card .bottom .bottom-left {
    flex: 6
}

.loans .section.cards .card .bottom .bottom-right {
    flex: 6;
    text-align: right
}

.loans .loan-confirm-wrapper h3 {
    margin-bottom: 15px !important
}

.loans .loan-confirm-wrapper .interest-rate h2 {
    margin-bottom: 0 !important
}

.loans .loan-confirm-wrapper .interest-rate span {
    font-size: 14px !important;
    color: #444
}

.loans .loan-confirm-wrapper .annum-charge {
    margin-bottom: 10px !important;
    line-height: normal
}

.loans .loan-confirm-wrapper .confirm-kyc-details {
    border-left: 1px solid #f1f1f1;
    padding: 0 20px 20px 40px
}

.loans .loan-confirm-wrapper .confirm-kyc-details h3 {
    display: inline
}

.loans .loan-confirm-wrapper .confirm-kyc-details label {
    margin-bottom: 0 !important;
    font-size: 1rem !important
}

.loans .loan-confirm-wrapper .confirm-kyc-details .bank-account-details,
.loans .loan-confirm-wrapper .confirm-kyc-details .loan-purpose-details,
.loans .loan-confirm-wrapper .confirm-kyc-details .loan-purpose-text {
    margin-top: 30px !important
}

.loans .loan-confirm-wrapper .confirm-kyc-details .confirm-termsheet {
    margin-top: 20px !important
}

.loans .loan-confirm-wrapper .edit-pledge-stocks-header {
    font-size: 16px
}

.loans .loan-confirm-wrapper .edit-pledge-stocks-header .icon {
    color: #0059c1
}

.loans .loan-confirm-wrapper .edit-pledge-stocks-header .edit-pledge-stocks {
    display: inline-block;
    margin-left: 5px
}

.loans .loan-confirm-wrapper .edit-pledge-stocks-header .edit-pledge-stocks:hover {
    cursor: pointer
}

.loans .pledged-table,
.loans .statement-table,
.loans .unpledge-table {
    width: 100%
}

.loans .pledged-table input,
.loans .statement-table input,
.loans .unpledge-table input {
    border: 1px solid #e1e1e1
}

.loans .pledged-table tbody,
.loans .statement-table tbody,
.loans .unpledge-table tbody {
    font-size: 14px
}

.loans .pledged-table td,
.loans .statement-table td,
.loans .unpledge-table td {
    text-align: right
}

.loans .pledged-table tbody td:first-child,
.loans .pledged-table thead td:first-child,
.loans .statement-table tbody td:first-child,
.loans .statement-table thead td:first-child,
.loans .unpledge-table tbody td:first-child,
.loans .unpledge-table thead td:first-child {
    text-align: left !important
}

.loans .show-inline {
    display: inline-block !important
}

.loans .tabs-component-tabs {
    list-style-type: none;
    text-align: right;
    padding-left: 0
}

.loans li.tabs-component-tab {
    display: inline-block;
    margin-right: 20px
}

.loans li.tabs-component-tab a {
    font-size: 12px;
    text-decoration: none;
    color: #666;
    padding-bottom: 5px
}

.loans li.tabs-component-tab a:hover {
    color: #ff5c20
}

.loans .tabs-component-tab.is-active a {
    color: #ff5c20;
    border-bottom: 2px solid #ff5c20
}

.loans .tabs-component-tab.is-active a:hover {
    color: #ff5c20;
    cursor: default
}

.loans .su-radio:checked+.su-radio-label:before {
    background: #0059c1 !important;
    border: 1px solid #0059c1 !important
}

.loans .su-radio-group .su-radio:checked+.su-radio-label {
    color: #0059c1 !important
}

.loans .su-radio-group .su-radio+.su-radio-label:before {
    margin: -4px 5px 0 0 !important
}

.loans .loans-closure .modal-container .close-modal,
.loans .section .loans-confirm .modal-container .close-modal {
    display: block !important;
    top: 15px !important;
    right: 15px !important
}

.loans .loans-closure .modal-container .modal-body-rowinput-container .su-input-group,
.loans .section .loans-confirm .modal-container .modal-body-rowinput-container .su-input-group {
    float: left;
    width: 60%
}

.loans .loans-closure .modal-container .modal-body-rowinput-container .payment-mode,
.loans .section .loans-confirm .modal-container .modal-body-rowinput-container .payment-mode {
    margin-top: 20px
}

.loans .loans-closure .modal-container .modal-body-rowinput-container .payment-mode .su-radio-group,
.loans .section .loans-confirm .modal-container .modal-body-rowinput-container .payment-mode .su-radio-group {
    margin-top: 0
}

.loans .loans-closure .modal-container .modal-body-rowinput-container .su-radio-group,
.loans .section .loans-confirm .modal-container .modal-body-rowinput-container .su-radio-group {
    margin-top: 20px
}

.loans .loans-closure .modal-container .modal-body-rowinput-container .su-radio-group .su-radio-wrap,
.loans .section .loans-confirm .modal-container .modal-body-rowinput-container .su-radio-group .su-radio-wrap {
    margin-bottom: 5px
}

.loans .loans-closure .modal-container .modal-body-rowinput-container button,
.loans .section .loans-confirm .modal-container .modal-body-rowinput-container button {
    float: left;
    margin-left: 20px;
    margin-top: 20px
}

.loans .loans-closure .modal-container {
    width: 450px;
    padding: 20px
}

.loans .loans-closure .modal-container input {
    background-color: #f4f4f4;
    pointer-events: none
}

.loans .section .loans-confirm .modal-container {
    width: 450px;
    padding: 20px
}

.loans .section .loans-confirm .modal-container .modal-body .modal-body-header {
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0;
    margin-top: 0
}

.loans .section .loans-confirm .modal-container .modal-body .modal-body-header .close-modal {
    position: relative !important;
    top: 3px !important;
    right: 0 !important
}

.loans .section .loans-confirm .modal-container .modal-body .su-radio-group .su-radio-wrap {
    display: block !important
}

.loans .section .loans-confirm .modal-container .modal-body .loan-close-row,
.loans .section .loans-confirm .modal-container .modal-body .loan-custom-row,
.loans .section .loans-confirm .modal-container .modal-body .loan-repayment-row {
    position: relative
}

.loans .section .loans-confirm .modal-container .modal-body .loan-close-row .pre-rupee,
.loans .section .loans-confirm .modal-container .modal-body .loan-custom-row .pre-rupee,
.loans .section .loans-confirm .modal-container .modal-body .loan-repayment-row .pre-rupee {
    position: absolute;
    top: 21px;
    z-index: 1;
    padding: 10px;
    background: #fafafb;
    left: 2px;
    line-height: 1.25rem
}

.loans .section .loans-confirm .modal-container .modal-body .loan-close-row .su-input-group input.upi-input,
.loans .section .loans-confirm .modal-container .modal-body .loan-custom-row .su-input-group input.upi-input,
.loans .section .loans-confirm .modal-container .modal-body .loan-repayment-row .su-input-group input.upi-input {
    padding: 10px 15px 10px 10px
}

.loans .section .loans-confirm .modal-container .modal-body .loan-close-row .su-input-group input,
.loans .section .loans-confirm .modal-container .modal-body .loan-custom-row .su-input-group input,
.loans .section .loans-confirm .modal-container .modal-body .loan-repayment-row .su-input-group input {
    padding: 10px 15px 10px 35px
}

.loans .section .loans-confirm .modal-container .modal-body .pan-consent-required {
    padding: 15px 0
}

.loans .section .loans-confirm .modal-container .modal-body .loan-close-row input {
    background-color: #f4f4f4;
    pointer-events: none
}

.loans .section .loans-confirm .modal-container .modal-body .repay-loanclose-text {
    margin-bottom: 0 !important;
    line-height: 15px
}

.loans .section.fatca {
    margin-top: 45px
}

.loans .section.fatca h2 {
    font-size: 20px
}

.loans .section.fatca .su-radio-group {
    margin-top: 15px !important
}

.loans .section.fatca .su-radio-group .su-radio-wrap label {
    font-size: 14px !important
}

.loans .section.fatca .input-container select {
    padding-left: 10px !important
}

.loans .section.fatca .input-container label {
    margin-bottom: 0 !important
}

.loans .section table td input {
    text-align: right;
    border: 1px solid #e1e1e1;
    padding: 2px 5px;
    height: 28px;
    border-radius: 2px
}

.loans .section .img-loan-sub {
    width: 290px;
    height: 180px;
    padding: 20px
}

.loans .tooltip-ltp,
.loans .tooltip-qty {
    display: inline-block
}

.loans .tooltip-ltp span,
.loans .tooltip-mvalue span,
.loans .tooltip-qty span {
    display: block;
    text-align: center
}

.loans .tooltip-mvalue span:first-child {
    color: #387ed1
}

.loans .tooltip-ltp {
    margin-left: 30px
}

.loans .tooltip-ltp span:last-child,
.loans .tooltip-mvalue span:last-child,
.loans .tooltip-qty span:last-child {
    font-size: 11px;
    font-style: italic;
    text-align: center
}

.loans .v-popover {
    display: inline
}

.loans .v-popover button {
    font-size: 10px !important;
    border: 1px solid #ccc;
    background: #fff;
    width: 15px;
    height: 15px !important;
    padding: 0 1px 0 0 !important;
    border-radius: 50%;
    color: #9b9b9b;
    position: relative;
    bottom: 1px;
    right: 5px
}

.loans .v-popover button:hover {
    border-color: #666;
    color: #666
}

.loans .tooltip.popover .popover-inner {
    background: #fff;
    color: #222;
    padding: 5px 20px;
    border: 1px solid #ccc;
    border-radius: 2px;
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, .1)
}

.loans .tooltip.popover .popover-arrow {
    border-color: #f9f9f9
}

.loans .tooltip-arrow {
    z-index: 1
}

.loans .kyc-main-container .body-section span .asterisk-cls {
    color: #4a4a4a
}

.loans .kyc-main-container .body-section h2 {
    font-size: 20px
}

.loans .kyc-main-container .body-section .kyc-details {
    margin-bottom: 5px
}

.loans .kyc-main-container .body-section .kyc-details span.icon.icon-help-circle {
    float: left
}

.loans .kyc-main-container .body-section .kyc-details div.four.columns {
    margin-left: 0
}

.loans .kyc-main-container .body-section .kyc-details span.span-ckyc {
    color: #9b9b9b;
    font-size: 10px;
    padding-left: 10px
}

.loans .kyc-main-container .body-section button {
    margin-top: 20px !important
}

.loans .kyc-main-container .body-section .img-kyc-confirm {
    text-align: center
}

.loans .kyc-main-container .body-section .img-kyc-confirm img {
    height: 280px;
    width: 300px
}

.loans .loans-form .new-loan-head {
    position: relative
}

.loans .loans-form .new-loan-head .search-table {
    position: absolute;
    right: 0 !important;
    margin: 0 !important
}

.loans .loans-form .new-loan-head .search-table .filter-input {
    border-radius: 2px
}

.loans .loans-form .new-loan-head .search-table .icon-search {
    font-size: 1rem
}

.loans .loans-form .new-loan-head .search-table .icon-times {
    top: 16px !important
}

.loans .loans-form .new-loan-head .search-table .icon-times:before {
    bottom: 12px !important
}

.loans .loans-form .new-loan-para {
    margin-top: 0 !important;
    margin-bottom: 0 !important
}

.loans .loans-form .loans-form-textarea {
    border-left: 1px solid #f1f1f1;
    padding: 0 20px 20px 40px
}

.loans .loans-form .loans-form-textarea .annum-charge {
    margin-bottom: 10px !important;
    line-height: normal
}

.loans .loans-form .holdings-total {
    padding-top: 10px;
    padding-bottom: 10px;
    margin-top: 0 !important;
    border-bottom: 1px solid #eee;
    box-sizing: border-box;
    text-align: right;
    width: 100%
}

.loans .loans-form .holdings-total.px-60 {
    padding-right: 60px
}

.loans .loans-form .holdings-total.px-45 {
    padding-right: 45px
}

.loans .loans-form .holdings-total span:first-child {
    color: #666;
    font-size: .875rem;
    padding-right: 15px
}

.loans .loans-form .key-points p {
    margin-bottom: 10px
}

.loans .eligible-main-container h2 {
    font-size: 20px
}

.loans .eligible-main-container a {
    text-decoration: underline !important
}

.loans .eligible-main-container img.profile-img {
    max-height: 200px
}

.loans .eligible-main-container label .edit-mobile {
    margin-left: 5px;
    color: #0059c1;
    display: inline-block;
    cursor: pointer
}

.loans .eligible-tac,
.loans .fatca-tac {
    margin: 40px 0 25px 0
}

.loans .table-container {
    max-height: 600px;
    overflow: auto;
    border-bottom: 1px solid #eee
}

.loans .table-container input {
    min-height: 0
}

.loans .table-container div:focus {
    outline: none
}

.loans .table-container div .data-table table {
    border-collapse: separate;
    border-spacing: 0;
    min-width: 500px
}

.loans .table-container div .data-table tbody tr td {
    text-align: right
}

.loans .table-container div .data-table tbody tr td input {
    min-height: 30px !important
}

.loans .table-container div .data-table tbody tr td p {
    margin-bottom: 0 !important;
    margin-top: 0 !important
}

.loans .table-container div .data-table tbody tr td:nth-child(3) {
    min-width: 120px !important;
    box-sizing: border-box
}

.loans .table-container div .data-table tbody tr td:nth-child(3) div.su-input-group {
    margin-bottom: 0;
    margin-top: 0
}

.loans .table-container div .data-table tbody tr td:nth-child(3) div.su-input-group input {
    min-width: 45px;
    max-width: 35px
}

.loans .table-container div .data-table tbody tr td:nth-child(3) div.su-input-group span {
    display: inline-block;
    min-width: 40px !important;
    text-align: left
}

.loans .table-container div .data-table tbody tr td:nth-child(4) {
    padding-right: 15px !important;
    min-width: 110px
}

.loans .table-container div .data-table tbody tr td:nth-child(4) div .su-input-group {
    margin-bottom: 0;
    margin-top: 0;
    display: inline-block;
    width: 100px;
    margin-right: -5px
}

.loans .table-container div .data-table tbody tr td:nth-child(4) div .su-input-group input {
    min-width: 70px !important
}

.loans .table-container div .data-table tbody tr td:nth-child(4) div .su-checkbox-group {
    display: inline-block;
    margin-left: 15px
}

.loans .table-container div .data-table tbody tr td:nth-child(4) div .su-checkbox-group .su-checkbox {
    position: fixed !important
}

.loans .table-container div .data-table tbody tr td:first-child {
    text-align: left !important
}

.loans .table-container div .data-table tbody tr td:first-child .arrow {
    float: right !important
}

.loans .table-container div .data-table thead th:first-child {
    background: #fafafb
}

.loans .table-container div .data-table thead th {
    font-size: .85rem;
    font-weight: 400;
    position: sticky;
    top: 0;
    z-index: 5;
    border-bottom: 1px solid #f1f1f1;
    border-top: 1px solid #f1f1f1
}

.loans .table-container div .data-table thead th:hover {
    background: #fafafb
}

.loans .table-container div .data-table thead th:hover .arrow {
    opacity: 1
}

.loans .table-container div .data-table thead .arrow-show {
    opacity: 1;
    background: #fafafb
}

.loans .table-container div .data-table thead th:first-child {
    cursor: pointer;
    text-align: left !important
}

.loans .table-container div .data-table thead th:first-child .arrow {
    float: right !important
}

.loans .table-container div .data-table thead th:nth-child(2) {
    background: #fff;
    cursor: pointer
}

.loans .table-container div .data-table thead th:nth-child(3) {
    background: #fff;
    cursor: default;
    text-align: center !important
}

.loans .table-container div .data-table thead th:nth-child(4) {
    padding-right: 15px !important;
    background: #fff;
    cursor: default
}

.loans .table-container div .data-table thead th:nth-child(4) .su-checkbox-group {
    display: inline-block;
    margin-left: 9px
}

.loans .table-container div .data-table thead th:nth-child(4) .su-checkbox-group .su-checkbox-box {
    top: 3px
}

.loans .table-container div .data-table tbody tr:hover .context-menu {
    visibility: visible
}

.loans .table-container div .data-table tbody tr:hover {
    background: #fafafb
}

.loans .table-container div .data-table tr td {
    border-bottom: 1px solid #f1f1f1
}

.loans .table-container div .data-table .arrow {
    display: inline-block;
    float: left;
    position: relative;
    top: 7px;
    border: solid #9b9b9b;
    border-width: 0 1px 1px 0;
    padding: 3px;
    opacity: 0
}

.loans .table-container div .data-table .arrow.asc {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg)
}

.loans .table-container div .data-table .arrow.desc {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.loans .manage-pledge-table-container div .data-table table tbody tr td:nth-child(2) {
    min-width: 150px
}

.loans .manage-pledge-table-container div .data-table table tbody tr td:nth-child(4) {
    min-width: 130px
}

.loans .manage-pledge-table-modal-container div .data-table table thead tr th:nth-child(3) {
    text-align: right !important
}

.loans .table-container.confirm-table-container div .data-table thead th:hover {
    background: #fafafb !important
}

.loans .table-container.confirm-table-container div .data-table thead th:nth-child(3) {
    background: #fff;
    cursor: pointer
}

.loans .stamp-duty-paid .steps-container h2 {
    display: inline-block;
    margin-top: 5px;
    margin-bottom: 20px;
    margin-left: 30px
}

.loans .stamp-duty-paid .steps-container .step {
    display: inline-block;
    content: "";
    font-size: 15px;
    text-align: center;
    border: 2px solid #9b9b9b;
    color: #9b9b9b;
    border-radius: 50%;
    position: relative;
    right: 2px;
    top: 2px;
    width: 25px;
    height: 25px;
    vertical-align: top
}

.loans .stamp-duty-paid .steps-container .step span {
    line-height: 1;
    position: relative;
    bottom: 0
}

.loans .stamp-duty-paid .steps-container .step.inactive {
    margin-right: 10px
}

.loans .stamp-duty-paid .steps-container .step.active,
.loans .stamp-duty-paid .steps-container .step.done {
    border: 2px solid #0059c1;
    color: #fff;
    background: #0059c1;
    width: 30px;
    height: 30px;
    right: 4px
}

.loans .stamp-duty-paid .steps-container .step.active span,
.loans .stamp-duty-paid .steps-container .step.done span {
    top: 3px
}

.loans .stamp-duty-paid .steps-container .step-vertical {
    border-left: 1px solid #e1e1e1;
    margin-top: -10px;
    margin-bottom: 5px;
    padding-bottom: 20px;
    margin-left: 12px;
    padding-left: 20px
}

.loans .stamp-duty-paid .steps-container .step-vertical .step-vertical-inside {
    margin-left: 35px
}

.loans .stamp-duty-paid .loan-against-shares-tncs {
    margin-top: 40px
}

@media only screen and (min-width:800px) {
    .loans .stamp-duty-paid .stamp-duty-paid-textarea {
        border-left: 1px solid #f1f1f1;
        padding: 0 20px 20px 40px
    }

    .loans .stamp-duty-paid .stamp-duty-paid-textarea hr {
        margin-bottom: 20px;
        margin-top: 20px
    }

    .loans .stamp-duty-paid .stamp-duty-paid-textarea .annum-charge {
        margin-bottom: 10px !important;
        line-height: normal
    }
}

.loans .processing-documents .processing-documents-imgarea h2 {
    margin-bottom: 10px !important
}

@media only screen and (min-width:800px) {
    .loans .processing-documents .processing-documents-textarea {
        border-left: 1px solid #f1f1f1;
        padding: 0 20px 20px 40px
    }

    .loans .processing-documents .processing-documents-textarea hr {
        margin-bottom: 20px;
        margin-top: 20px
    }

    .loans .processing-documents .processing-documents-textarea .annum-charge {
        margin-bottom: 10px !important;
        line-height: normal
    }
}

.loans .invoke-table-container table th {
    color: #9b9b9b !important;
    background: #fafafb !important;
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
    font-weight: 400
}

.loans .invoke-table-container table th:nth-child(-n+2) {
    text-align: left !important
}

.loans .invoke-table-container table td {
    border-bottom: 1px solid #f1f1f1
}

.loans .invoke-table-container .invoke-table-footer {
    padding-top: 20px
}

.loans .invoke-table-container .su-checkbox-group {
    display: flex;
    justify-content: end
}

.loans .invoke-table-container button {
    margin: 10px 0;
    float: right
}

.loans .loan-info-container {
    padding: 20px 0;
    background: #fff;
    margin-top: -20px;
    margin-bottom: 0
}

@media only screen and (min-width:1200px) {
    .loans .loan-info-container {
        margin-left: calc(-50vw + 560px);
        margin-right: calc(-50vw + 560px)
    }
}

.loans .loan-info-container.existing-loan {
    background: #fafafb !important;
    margin-bottom: 30px !important
}

@media only screen and (max-width:800px) {
    .loans .page-container.loans.section .v-align {
        display: block !important
    }

    .loans .confirm-kyc-details,
    .loans .loans-form-textarea {
        border-left: 0 !important;
        padding: 0 !important
    }

    .loans .holdings-total {
        margin-right: 2px !important
    }
}

@media only screen and (max-width:550px) {
    .loans .new-loan-head {
        line-height: 48px;
        margin-bottom: 0 !important
    }

    .loans .new-loan-head .search-table {
        display: block !important;
        position: relative !important
    }

    .loans .new-loan-head .search-table .filter-input {
        border-radius: 2px
    }
}

.page-container.enach .enach-icon {
    height: 20px;
    position: relative;
    top: 2px;
    margin-right: 5px
}

.page-container.enach .notice {
    margin-bottom: 35px !important
}

.page-container.enach .section .input-container input:focus {
    outline: none
}

.page-container.enach .section .input-container input:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 #444
}

.page-container.enach .section .schedules-table tr td:first-child {
    min-width: 160px
}

.page-container.enach .section .mandate-cancel {
    float: right;
    margin-right: 10px;
    font-size: 14px
}

.page-container.enach .section .context-data {
    position: relative
}

.page-container.enach .section .context-data .context-menu {
    position: absolute;
    right: 5px
}

.page-container.enach .section .mandate-status {
    display: inline-block;
    margin-left: 10px;
    position: relative;
    top: 2px
}

.page-container.enach .section .mandate-status .schedule-status {
    display: inline-block;
    margin: 0;
    position: relative;
    top: -4px
}

.page-container.enach .section .help-tooltip {
    display: inline-block
}

.page-container.enach .section .mandate {
    margin-bottom: 60px
}

.page-container.enach .section .mandate .mandate-info p {
    margin: 0
}

.page-container.enach .section .mandate .mandate-info .row {
    margin: 10px 0;
    padding: 5px 10px;
    border-radius: 2px
}

.page-container.enach .section .mandate .mandate-info .row:nth-child(odd) {
    background: #fafafb
}

.page-container.enach .section .mandate-help {
    display: inline-block;
    font-size: 1.25rem;
    position: relative;
    top: -2px
}

.page-container.enach .section .mandate-help:after {
    width: 360px;
    white-space: normal
}

.page-container.enach .section .enach-landing {
    height: 165px;
    max-width: 100%;
    margin-bottom: 30px
}

.page-container.enach .section .set-schedule {
    margin-bottom: 60px
}

.page-container.enach .section .schedule-status {
    text-transform: uppercase;
    font-size: .875rem;
    padding: 3px 5px;
    border-radius: 2px;
    position: relative;
    display: block;
    line-height: 1.7;
    text-align: center;
    background: rgba(255, 202, 85, .15);
    color: #f8ab00
}

.page-container.enach .section #create_schedule:focus {
    outline: 5px auto -webkit-focus-ring-color;
    outline-color: -webkit-focus-ring-color;
    outline-color: #85b4eb;
    outline-style: auto;
    outline-width: 5px
}

.page-container.enach .section .schedule-list tr {
    border-bottom: 1px solid #f1f1f1;
    border-top: 1px solid #f1f1f1;
    padding: 10px 5px
}

.page-container.enach .section .schedule-list thead {
    color: #9b9b9b
}

.page-container.enach .section .schedule-list .context-menu {
    visibility: hidden
}

.page-container.enach .section .schedule-list tbody tr:hover .context-menu {
    visibility: visible
}

.page-container.enach .section .schedule-list tbody tr:hover {
    background: #fafafb
}

.page-container.enach .section .schedule-list tbody td:first-child {
    min-width: 100px
}

.page-container.challenge-content.ofs-content .mobile-context-menu .mobile-context-menu-list {
    min-height: 12vh
}

.page-container.challenge-content.ofs-content .mobile-context-menu .mobile-context-menu-list li {
    border-top: none !important;
    border-bottom: 1px solid #eee
}

.page-container.challenge-content h1 p {
    font-size: 14px;
    margin: 0;
    position: relative;
    top: 5px;
    margin-right: 5px
}

.page-container.challenge-content .challenge-head-link {
    font-size: 16px;
    position: relative;
    top: -2px;
    margin-left: 5px
}

.page-container.challenge-content .challenge-head-link[data-balloon]:after {
    z-index: 9999 !important
}

.page-container.challenge-content .ipo-tabs {
    font-size: 1.125rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 50px
}

.page-container.challenge-content .ipo-tabs .tab {
    padding: 15px;
    display: inline-block;
    border-bottom: 1px solid #eee;
    position: relative;
    top: 1px;
    cursor: pointer;
    width: 20%;
    box-sizing: border-box
}

.page-container.challenge-content .ipo-tabs .tab.active {
    border-bottom: 2px solid #0059c1
}

.page-container.challenge-content .ipo-tabs .tab:hover {
    opacity: .7
}

.page-container.challenge-content .section.ipo-empty img {
    height: 200px
}

.page-container.challenge-content .ipo-history-head .ipo-history-chevron {
    display: inline-block;
    font-size: 16px;
    margin-left: 5px
}

.page-container.challenge-content .ipo-history-head .ipo-history-chevron:hover {
    cursor: pointer
}

.page-container.challenge-content .ipo-history-table thead tr {
    border-top: none !important
}

.page-container.challenge-content .ipo-notice {
    margin-bottom: 30px
}

.page-container.challenge-content .bids-error,
.page-container.challenge-content .upi-error,
.page-container.challenge-content .value-error {
    display: none;
    padding-left: 10px;
    font-size: .85rem;
    color: #f35631;
    position: absolute;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.page-container.challenge-content .ipo-error {
    padding-left: 10px;
    font-size: .85rem;
    color: #f35631;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content
}

.page-container.challenge-content .section .action-tabs {
    font-size: 1.25rem;
    margin-bottom: 50px
}

.page-container.challenge-content .section .action-tabs .tab {
    padding: 15px;
    display: inline-block;
    position: relative;
    top: 1px;
    cursor: pointer;
    box-sizing: border-box
}

.page-container.challenge-content .section .action-tabs .tab.active {
    border-bottom: 2px solid #0059c1
}

.page-container.challenge-content .section .card {
    padding: 12px 10px;
    border-top: 1px solid #eee
}

.page-container.challenge-content .section .card .top .top-left {
    flex: 2 !important;
    -ms-flex: 2 !important
}

.page-container.challenge-content .section .card .no-bids span {
    padding: 3px 10px;
    text-transform: uppercase;
    width: 45px;
    margin-left: auto;
    display: block;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    line-height: 1.4 !important;
    background: rgba(255, 202, 85, .15);
    color: #f8ab00
}

.page-container.challenge-content .section .card .pending-flag {
    background: rgba(255, 202, 85, .15);
    color: #f8ab00
}

.page-container.challenge-content .section .card .non-retail-flag,
.page-container.challenge-content .section .card .pending-flag {
    text-transform: uppercase;
    font-size: .6875rem;
    padding: 3px 11px;
    border-radius: 2px;
    position: relative;
    display: inline;
    line-height: 1.7;
    text-align: center;
    margin-left: 5px
}

.page-container.challenge-content .section .card .non-retail-flag {
    color: #4184f3;
    background-color: rgba(65, 132, 243, .1)
}

.page-container.challenge-content .section .card .closed-flag {
    text-transform: uppercase;
    font-size: .6875rem;
    padding: 3px 11px;
    border-radius: 2px;
    position: relative;
    display: inline;
    line-height: 1.7;
    text-align: center;
    color: #666;
    background-color: #eee;
    margin-left: 5px
}

.page-container.challenge-content .section .init-ipo-historical {
    margin-top: 10px;
    display: block
}

.page-container.challenge-content .section .init-ipo-historical img {
    height: 1rem;
    position: relative;
    top: 1px
}

.page-container.challenge-content .section .unpledge-modal input:disabled {
    color: #424242
}

.page-container.challenge-content .section .ipo-historical {
    font-size: 1rem;
    float: right;
    margin-right: 10px
}

.page-container.challenge-content .section .ipo-historical img {
    height: 1rem;
    position: relative;
    top: 1px
}

.page-container.challenge-content .section .ipo-investor {
    margin-bottom: 10px
}

.page-container.challenge-content .section .ipo-investor select {
    max-width: 180px
}

.page-container.challenge-content .section .ipo-investor label {
    padding-left: 10px
}

.page-container.challenge-content .section .su-checkbox-box {
    position: relative;
    top: 3px
}

.page-container.challenge-content .section .card-container {
    border-top: 1px solid #eee;
    padding: 12px 10px
}

.page-container.challenge-content .section .card-container .active .timeline {
    display: block
}

.page-container.challenge-content .section .card-container .timeline {
    display: none
}

.page-container.challenge-content .section .card a {
    margin-left: 0;
    display: inline-block
}

.page-container.challenge-content .section .card a.btn {
    padding: 0 12px !important
}

.page-container.challenge-content .section .card.last {
    border-bottom: 1px solid #eee
}

.page-container.challenge-content .section .card .top {
    margin-bottom: 5px;
    display: flex
}

.page-container.challenge-content .section .card .top .top-left {
    flex: 10
}

.page-container.challenge-content .section .card .top .top-right {
    flex: 2;
    text-align: right
}

.page-container.challenge-content .section .card .middle {
    margin-bottom: 5px;
    display: flex
}

.page-container.challenge-content .section .card .middle .middle-left {
    flex: 6
}

.page-container.challenge-content .section .card .middle .middle-right {
    flex: 6;
    text-align: right
}

.page-container.challenge-content .section .card .bottom {
    display: flex
}

.page-container.challenge-content .section .card .bottom .bottom-left {
    flex: 6
}

.page-container.challenge-content .section .card .bottom .bottom-right {
    flex: 6;
    text-align: right
}

.page-container.challenge-content .section input {
    max-width: 100%
}

.page-container.challenge-content .section input:focus {
    outline: 0;
    border-color: #ccc
}

.page-container.challenge-content .section .state-process {
    margin-top: 5vh !important
}

.page-container.challenge-content .section button[disabled] {
    background: #9b9b9b;
    border: 1px solid #9b9b9b !important;
    color: #fff
}

.page-container.challenge-content .section button[disabled]:hover {
    opacity: 1 !important;
    background: #9b9b9b !important
}

.page-container.challenge-content .section .ipo-modal .modal-container {
    width: 900px;
    padding: 0;
    max-height: 100vh;
    overflow: auto
}

.page-container.challenge-content .section .ipo-modal input[type=number] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: textfield
}

.page-container.challenge-content .section .ipo-modal .upi-input .three button {
    padding: 0 !important
}

.page-container.challenge-content .section .ipo-modal .verify-vpa {
    font-size: .65rem;
    position: relative;
    left: -10px;
    padding: 3px 7px;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 3px;
    letter-spacing: .25px;
    color: #0059c1;
    border: 1px solid #0059c1
}

.page-container.challenge-content .section .ipo-modal .verify-vpa:hover {
    cursor: pointer;
    background: #0059c1;
    color: #fff
}

.page-container.challenge-content .section .ipo-modal .verify-vpa.verified {
    background: #4caf50;
    color: #fff;
    border: 1px solid #4caf50
}

.page-container.challenge-content .section .ipo-modal .verify-vpa.verified:hover {
    background: #4caf50;
    cursor: default
}

.page-container.challenge-content .section .ipo-modal .upi-confirm {
    font-size: 12px;
    padding-left: 10px;
    color: #9b9b9b;
    position: relative;
    font-style: italic
}

.page-container.challenge-content .section .ipo-modal .upi-confirm.invisible {
    visibility: hidden
}

.page-container.challenge-content .section .ipo-modal .notice {
    margin-bottom: 10px;
    margin-top: 15px
}

.page-container.challenge-content .section .ipo-modal input {
    box-sizing: border-box
}

.page-container.challenge-content .section .ipo-modal .upi-select {
    display: inline-block;
    width: auto !important;
    position: relative;
    left: -15px
}

.page-container.challenge-content .section .ipo-modal .upi-select:hover {
    cursor: pointer
}

.page-container.challenge-content .section .ipo-modal .vpa-input {
    display: inline-block
}

.page-container.challenge-content .section .ipo-modal .vpa-input input {
    display: inline-block;
    width: 140px
}

.page-container.challenge-content .section .ipo-modal .btn-outline:hover {
    background: #444;
    border: 1px solid #444;
    color: #fff
}

.page-container.challenge-content .section .ipo-modal .bids {
    margin-top: 30px
}

.page-container.challenge-content .section .ipo-modal .bids .su-input-group {
    margin-top: 0
}

.page-container.challenge-content .section .ipo-modal .bids .one {
    position: relative
}

.page-container.challenge-content .section .ipo-modal .bids .one .icon {
    position: absolute;
    left: 20px;
    top: 7px;
    color: #9b9b9b
}

.page-container.challenge-content .section .ipo-details ::-moz-placeholder {
    color: #9b9b9b;
    opacity: 1
}

.page-container.challenge-content .section .ipo-details :-ms-input-placeholder {
    opacity: 1
}

.page-container.challenge-content .section .ipo-details ::placeholder {
    color: #9b9b9b;
    opacity: 1
}

.page-container.challenge-content .section .ipo-details .su-input-group input:disabled,
.page-container.challenge-content .section .ipo-details .su-input-group textarea:disabled {
    color: #666
}

.page-container.challenge-content .section .ipo-details ul {
    padding-left: 20px
}

.page-container.challenge-content .section .ipo-details button:first-child {
    margin-right: 25px
}

.page-container.challenge-content .section .ipo-details .su-checkbox-group {
    position: relative;
    top: 10px
}

.page-container.challenge-content .section .ipo-details .ipo-accept {
    margin-bottom: 20px
}

.page-container.challenge-content .section .ipo-details .ipo-accept .su-checkbox-box {
    top: 3px;
    left: 2px
}

.page-container.challenge-content .section .ipo-details .ipo-accept .su-checkbox-value {
    font-size: 12px
}

.page-container.challenge-content .section .ipo-details .total-bid {
    padding-right: 20px;
    margin-top: 0;
    font-weight: 600
}

.page-container.challenge-content .section .ipo-details .total-bid span {
    font-size: 12px;
    font-weight: 400
}

.page-container.challenge-content .section .ipo-details .total-bid label {
    font-weight: 400;
    display: inline-block;
    margin-right: 10px
}

.page-container.challenge-content .section .ipo-details .exchange {
    padding: 3px 10px;
    text-transform: uppercase;
    width: 20px;
    display: inline-block;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    line-height: 1.4 !important;
    color: #4184f3;
    background-color: rgba(65, 132, 243, .1);
    position: relative;
    top: -3px;
    margin-left: 15px
}

.page-container.challenge-content .section .ipo-details :-ms-input-placeholder {
    color: #9b9b9b
}

.page-container.challenge-content .section .ipo-details ::-ms-input-placeholder {
    color: #9b9b9b
}

.page-container.challenge-content .section .ipo-details h2 {
    font-weight: 600
}

.page-container.challenge-content .section .ipo-details .five a {
    position: relative;
    left: 5px;
    font-size: .875rem
}

.page-container.challenge-content .section .ipo-details .data-row {
    margin: 0 0 10px 0;
    padding: 5px 5px 10px 5px;
    border-bottom: 1px solid #eee
}

.page-container.challenge-content .section .ipo-details .data,
.page-container.challenge-content .section .ipo-details .label {
    display: inline-block !important
}

.page-container.challenge-content .section .ipo-details .data {
    float: right
}

.page-container.challenge-content .section .ipo-details .row .su-checkbox-value {
    color: #444
}

.page-container.challenge-content .section .ipo-details .bid-no {
    position: relative;
    top: 10px
}

.page-container.challenge-content .section .delete-ipo {
    width: 125px;
    position: relative
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) thead td {
    padding: 20px !important
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody.active .timeline {
    display: table-row
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody .timeline {
    display: none
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody tr:first-child td {
    padding: 20px !important
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody tr:first-child td:first-child {
    font-weight: 600
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody tr:first-child:hover {
    background: #fafafb;
    cursor: pointer
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody tr:first-child a.btn-blue {
    display: inline-block;
    min-width: 40px;
    text-align: center;
    font-size: 13px
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody.active {
    border: 1px solid #eee;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .1)
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody.active tr:first-child {
    background: #fafafb
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody td {
    max-width: 80px;
    white-space: nowrap
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) .place-bids span {
    display: inline-block
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) .place-bids [data-balloon][data-balloon-pos=up]:before {
    left: 35%
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) .place-bids [data-balloon][data-balloon-pos=up]:after {
    left: -25%
}

.page-container.challenge-content .section .ipo-status {
    margin: 10px 0
}

.page-container.challenge-content .section .ipo-status .row {
    padding: 0 10px
}

.page-container.challenge-content .section .ipo-status .status-head {
    margin-top: 15px;
    margin-bottom: 10px
}

.page-container.challenge-content .section .ipo-status p {
    margin-top: 5px;
    margin-bottom: 10px;
    white-space: normal
}

.page-container.challenge-content .section .timeline hr {
    margin-top: 15px;
    margin-bottom: 20px;
    width: 95%
}

.page-container.challenge-content .section .ipo-timeline {
    display: flex;
    justify-content: center;
    margin-bottom: 10px
}

.page-container.challenge-content .section .ipo-timeline .span {
    display: inline-block;
    width: 150px;
    text-align: center;
    margin-top: 10px;
    vertical-align: top
}

.page-container.challenge-content .section .ipo-timeline .span .pin {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: 4px solid #0059c1;
    position: relative;
    left: calc(50% - 10px)
}

.page-container.challenge-content .section .ipo-timeline .span.active .pin {
    background: #0059c1;
    border: 2px solid #0059c1;
    top: 1px
}

.page-container.challenge-content .section .ipo-timeline .span.active .pin:before {
    content: "";
    width: 18px;
    height: 18px;
    border: 3px solid #0059c1;
    border-radius: 50%;
    display: inline-block;
    position: absolute;
    top: -8px;
    left: -8px;
    z-index: 1
}

.page-container.challenge-content .section .ipo-timeline .span.active .label {
    margin-top: 20px
}

.page-container.challenge-content .section .ipo-timeline .span .label {
    margin-top: 15px;
    margin-bottom: 0;
    color: #0059c1
}

.page-container.challenge-content .section .ipo-timeline .span .value {
    margin-bottom: 10px;
    margin-top: 5px
}

.page-container.challenge-content .section .ipo-timeline .span.past .pin:after {
    background: #0059c1 !important
}

.page-container.challenge-content .section .ipo-timeline .span:not(:first-child) .pin:after {
    content: "";
    width: 134px;
    height: 3px;
    background: #e1e1e1;
    display: inline-block;
    position: absolute;
    top: 3px;
    left: 12px;
    left: -4px;
    transform: rotate(180deg);
    transform-origin: left
}

.page-container.challenge-content .section .checkbox-container .su-checkbox-group {
    margin-top: 35px;
    display: inline-block
}

.page-container.challenge-content .section .checkbox-container .inline {
    display: inline-block;
    position: relative;
    bottom: 2px
}

.page-container.challenge-content .section .checkbox-container .inline a {
    color: #9b9b9b !important
}

.page-container.challenge-content .section .checkbox-container .inline span.icon {
    position: relative;
    top: 2px
}

.page-container.challenge-content .section .checkbox-container label {
    display: flex !important
}

.page-container.challenge-content .section .table-container {
    padding-top: 5px
}

.page-container.challenge-content .section .challenge-disabled {
    position: relative;
    top: -3px;
    width: 100%;
    font-size: 13px;
    font-weight: 400;
    height: 38px;
    padding-left: 15px;
    padding-right: 15px;
    line-height: 1.9;
    background: #9b9b9b;
    border: transparent;
    cursor: default;
    color: #fff;
    padding: 7px 14px;
    border-radius: 2px;
    margin: 0 3px;
    box-sizing: border-box;
    text-align: center
}

.page-container.challenge-content .section .challenge-table.completed .context-menu,
.page-container.challenge-content .section .challenge-table.ongoing .context-menu {
    visibility: hidden
}

.page-container.challenge-content .section .challenge-table.completed tbody tr td:first-child,
.page-container.challenge-content .section .challenge-table.ongoing tbody tr td:first-child {
    width: 150px
}

.page-container.challenge-content .section .challenge-table.completed tbody tr:hover,
.page-container.challenge-content .section .challenge-table.ongoing tbody tr:hover {
    background: #fafafb
}

.page-container.challenge-content .section .challenge-table.completed tbody tr:hover .context-menu,
.page-container.challenge-content .section .challenge-table.ongoing tbody tr:hover .context-menu {
    visibility: visible
}

.page-container.challenge-content .section .cancel-modal .modal-container {
    width: 555px
}

.page-container.challenge-content .section .ofs-table tbody td:first-child,
.page-container.challenge-content .section .ofs-table thead td:first-child {
    min-width: 115px;
    position: relative
}

.page-container.challenge-content .section .ofs-table .context-menu {
    visibility: hidden;
    position: absolute;
    right: 5px
}

.page-container.challenge-content .section .ofs-table tbody tr:hover .context-menu {
    visibility: visible
}

.page-container.challenge-content .section .ofs-table .pending-flag {
    background: rgba(255, 202, 85, .15);
    color: #f8ab00
}

.page-container.challenge-content .section .non-retail-flag,
.page-container.challenge-content .section .ofs-table .pending-flag {
    text-transform: uppercase;
    font-size: .6875rem;
    padding: 3px 11px;
    border-radius: 2px;
    position: relative;
    display: inline;
    line-height: 1.7;
    text-align: center;
    margin-left: 5px
}

.page-container.challenge-content .section .non-retail-flag {
    color: #4184f3;
    background-color: rgba(65, 132, 243, .1)
}

.page-container.challenge-content .section .closed-flag {
    text-transform: uppercase;
    font-size: .6875rem;
    padding: 3px 11px;
    border-radius: 2px;
    position: relative;
    display: inline;
    line-height: 1.7;
    text-align: center;
    color: #666;
    background-color: #eee;
    margin-left: 5px
}

.page-container.challenge-content .section .challenge-table .challenge-profit {
    cursor: pointer
}

.page-container.challenge-content .section .challenge-table .challenge-profit:hover {
    opacity: .8
}

.page-container.challenge-content .section .challenge-table .won span {
    color: #10b983;
    background-color: rgba(16, 185, 131, .1)
}

.page-container.challenge-content .section .challenge-table .lost span,
.page-container.challenge-content .section .challenge-table .won span {
    padding: 3px 10px;
    text-transform: uppercase;
    width: 30px;
    display: block;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    line-height: 1.4 !important
}

.page-container.challenge-content .section .challenge-table .lost span {
    color: #df514c;
    background-color: rgba(223, 81, 76, .1)
}

.page-container.challenge-content .section .challenge-table .exchange {
    font-size: .75rem;
    color: #9b9b9b;
    font-weight: 600;
    float: right;
    position: relative;
    top: 3px
}

.page-container.challenge-content .section .challenge-table thead div {
    display: inline
}

.page-container.challenge-content .section .challenge-table thead [data-balloon][data-balloon-pos=up]:after {
    left: -65px !important
}

.page-container.challenge-content .section .challenge-table thead tr {
    border-top: 1px solid #f1f1f1
}

.page-container.challenge-content .section .challenge-table thead tr .sorted {
    background: #fafafb
}

.page-container.challenge-content .section .challenge-table thead td {
    cursor: pointer;
    color: #9b9b9b
}

.page-container.challenge-content .section .challenge-table thead td:hover {
    background: #fafafb
}

.page-container.challenge-content .section .challenge-table thead td:hover .arrow {
    opacity: 1
}

.page-container.challenge-content .section .challenge-table thead .arrow-show {
    opacity: 1;
    background: #fafafb
}

.page-container.challenge-content .section .challenge-table thead th {
    font-size: .85rem;
    font-weight: 400;
    color: #9b9b9b
}

.page-container.challenge-content .section .challenge-table tr {
    border-bottom: 1px solid #f1f1f1
}

.page-container.challenge-content .section .challenge-table tr .trade-exchange {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    color: #9b9b9b;
    font-weight: 600
}

.page-container.challenge-content .section .challenge-table tr .trade-type {
    padding: 3px 10px;
    text-transform: uppercase;
    width: 30px;
    display: block;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    line-height: 1.4 !important
}

.page-container.challenge-content .section .challenge-table tr .buy {
    color: #4184f3;
    background-color: rgba(65, 132, 243, .1)
}

.page-container.challenge-content .section .challenge-table tr .sell {
    color: #df514c;
    background-color: rgba(223, 81, 76, .1)
}

.page-container.challenge-content .section .challenge-table .arrow {
    display: inline-block;
    float: left;
    position: relative;
    top: 7px;
    border: solid #9b9b9b;
    border-width: 0 1px 1px 0;
    padding: 3px;
    opacity: 0
}

.page-container.challenge-content .section .challenge-table .arrow.asc {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg)
}

.page-container.challenge-content .section .challenge-table .arrow.desc {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

.page-container.challenge-content .section .challenge-table .text-left .arrow {
    float: right !important
}

.page-container.challenge-content .section .tradebook-paginate {
    margin-top: 15px
}

.page-container.challenge-content .section .tradebook-paginate button {
    height: 25px !important;
    border: 1px solid #e1e1e1
}

.page-container.challenge-content .section .tradebook-paginate button:disabled {
    color: #666;
    cursor: not-allowed
}

.page-container.challenge-content .section .tradebook-paginate span {
    font-size: 12px;
    padding: 0 10px
}

@media only screen and (max-width:1200px) {
    .ipo-table .ipo-timeline .span {
        width: 120px !important
    }

    .ipo-table .ipo-timeline .span:not(:first-child) .pin:after {
        content: "";
        width: 105px !important
    }
}

@media only screen and (max-width:980px) {
    .ipo-table .ipo-timeline .span {
        width: 105px !important
    }

    .ipo-table .ipo-timeline .span:not(:first-child) .pin:after {
        content: "";
        width: 90px !important
    }
}

@media only screen and (max-width:860px) {
    .ipo-table .ipo-timeline .span {
        width: 90px !important
    }

    .ipo-table .ipo-timeline .span:not(:first-child) .pin:after {
        content: "";
        width: 75px !important
    }
}

@media only screen and (max-width:800px) {
    .ipo-tabs .tab {
        width: 50% !important
    }

    .ipo-table .ipo-timeline .span {
        width: 90px !important
    }

    .ipo-table .ipo-timeline .span:not(:first-child) .pin:after {
        content: "";
        width: 75px !important
    }

    .label-span,
    .pin-span {
        display: inline-block
    }

    .timeline {
        margin-top: 10px
    }

    .timeline,
    .timeline .ipo-timeline {
        display: block !important
    }

    .timeline .ipo-timeline .pin-span .span.active {
        height: 16px
    }

    .timeline .ipo-timeline .pin-span .span.active .pin {
        top: 5px !important
    }

    .timeline .ipo-timeline .pin-span .span.active+.span .pin:after {
        width: 63px !important
    }

    .timeline .ipo-timeline .pin-span .span {
        display: block !important;
        width: 50px !important
    }

    .timeline .ipo-timeline .pin-span .span.active .pin {
        left: 17px !important
    }

    .timeline .ipo-timeline .pin-span .span.active .pin:after {
        left: -7px !important
    }

    .timeline .ipo-timeline .pin-span .span:not(:first-child) {
        margin-top: 70px !important
    }

    .timeline .ipo-timeline .pin-span .span .pin {
        transform: rotate(90deg)
    }

    .timeline .ipo-timeline .pin-span .span .pin:after {
        width: 70px !important
    }

    .label-span .label {
        margin-top: 0 !important
    }

    .label-span .value {
        margin-bottom: 30px !important
    }
}

@media only screen and (max-width:900px) {
    .ipo-modal .modal-container {
        width: 100% !important
    }
}

@media only screen and (min-width:801px) {
    .section .no-bids span {
        background: rgba(255, 202, 85, .15);
        color: #f8ab00
    }

    .section .no-bids span,
    .section .place-bids span {
        padding: 3px 10px;
        text-transform: uppercase;
        width: 45px;
        margin-left: auto;
        display: block;
        border-radius: 2px;
        font-size: 10px;
        text-align: center;
        line-height: 1.4 !important
    }

    .section .place-bids span.insert {
        background: rgba(255, 202, 85, .15);
        color: #f8ab00
    }

    .section .place-bids span.edit {
        color: #4184f3;
        background-color: rgba(65, 132, 243, .1)
    }

    .ipo-details {
        display: flex
    }

    .ipo-details .seven.ipo-form {
        padding: 25px 30px 20px 0
    }

    .ipo-details .five.ipo-data {
        padding: 30px;
        background: #fafafb
    }

    .ipo-details .ipo-show {
        display: none
    }

    .delete-ipo {
        right: 20px
    }
}

@media only screen and (max-width:450px) {
    .upi-input input {
        width: 105px !important
    }

    .upi-input .upi-select {
        left: -5px !important
    }

    .upi-input .verify-vpa {
        left: 0 !important
    }

    .upi-input .three label {
        display: none !important
    }
}

@media only screen and (max-width:800px) {
    .upi-input .upi-select {
        top: -2px
    }

    .ofs-content .action-tabs {
        margin-bottom: 0 !important;
        display: flex;
        justify-content: center
    }

    .section li.place-bids {
        width: auto;
        padding: 20px 10px;
        text-transform: inherit;
        font-size: 16px
    }

    .section .bid-no {
        top: 0 !important
    }

    .challenge-content .cards .ipo-status {
        margin: 0 !important
    }

    .challenge-content .cards .ipo-status .status-head {
        margin-top: 0 !important
    }

    .challenge-content .cards .card-footer hr {
        margin: 20px 0
    }

    .challenge-content .cards .card-footer .row {
        padding: 0 !important
    }

    .challenge-content .cards .card-footer .row .columns {
        margin-bottom: 5px !important
    }

    .ipo-details .one {
        width: auto;
        margin-right: 10px
    }

    .ipo-details .one .su-checkbox-group {
        top: -8px !important
    }

    .ipo-details .one .icon {
        top: -7px !important
    }

    .ipo-details .ipo-actions {
        display: flex
    }

    .ipo-details .ipo-actions .four {
        order: 2;
        text-align: right
    }

    .ipo-details .ipo-actions .six {
        width: 50% !important
    }

    .ipo-details .ipo-actions .total-bid {
        padding-top: 5px;
        text-align: left !important
    }

    .ipo-details .ipo-show {
        padding: 5px 0
    }

    .ipo-details .ipo-show:hover {
        cursor: pointer
    }

    .ipo-details .ipo-show .icon {
        margin-left: 10px
    }

    .ipo-details .four .su-checkbox-value {
        font-size: 12px
    }

    .ipo-details .data-list {
        display: none
    }
}

fieldset[disabled] .multiselect {
    pointer-events: none
}

.multiselect__spinner {
    position: absolute;
    right: 1px;
    top: 1px;
    width: 48px;
    height: 35px;
    background: #fff;
    display: block
}

.multiselect__spinner:after,
.multiselect__spinner:before {
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    margin: -8px 0 0 -8px;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    border-color: #41b883 transparent transparent;
    border-style: solid;
    border-width: 2px;
    box-shadow: 0 0 0 1px transparent
}

.multiselect__spinner:before {
    -webkit-animation: a 2.4s cubic-bezier(.41, .26, .2, .62);
    animation: a 2.4s cubic-bezier(.41, .26, .2, .62);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.multiselect__spinner:after {
    -webkit-animation: a 2.4s cubic-bezier(.51, .09, .21, .8);
    animation: a 2.4s cubic-bezier(.51, .09, .21, .8);
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite
}

.multiselect__loading-enter-active,
.multiselect__loading-leave-active {
    transition: opacity .4s ease-in-out;
    opacity: 1
}

.multiselect__loading-enter,
.multiselect__loading-leave-active {
    opacity: 0
}

.multiselect,
.multiselect__input,
.multiselect__single {
    /* font-family: inherit; */
    font-size: 16px;
    touch-action: manipulation
}

.multiselect {
    box-sizing: content-box;
    display: block;
    position: relative;
    width: 100%;
    min-height: 40px;
    text-align: left;
    color: #35495e
}

.multiselect * {
    box-sizing: border-box
}

.multiselect:focus {
    outline: none
}

.multiselect--disabled {
    opacity: .6
}

.multiselect--active {
    z-index: 1
}

.multiselect--active:not(.multiselect--above) .multiselect__current,
.multiselect--active:not(.multiselect--above) .multiselect__input,
.multiselect--active:not(.multiselect--above) .multiselect__tags {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.multiselect--active .multiselect__select {
    transform: rotate(180deg)
}

.multiselect--above.multiselect--active .multiselect__current,
.multiselect--above.multiselect--active .multiselect__input,
.multiselect--above.multiselect--active .multiselect__tags {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.multiselect__input,
.multiselect__single {
    position: relative;
    display: inline-block;
    min-height: 20px;
    line-height: 20px;
    border: none;
    border-radius: 5px;
    background: #fff;
    padding: 0 0 0 5px;
    width: 100%;
    transition: border .1s ease;
    box-sizing: border-box;
    margin-bottom: 8px;
    vertical-align: top
}

.multiselect__input:-ms-input-placeholder {
    color: #35495e
}

.multiselect__input::-moz-placeholder {
    color: #35495e
}

.multiselect__input::placeholder {
    color: #35495e
}

.multiselect__tag~.multiselect__input,
.multiselect__tag~.multiselect__single {
    width: auto
}

.multiselect__input:hover,
.multiselect__single:hover {
    border-color: #cfcfcf
}

.multiselect__input:focus,
.multiselect__single:focus {
    border-color: #a8a8a8;
    outline: none
}

.multiselect__single {
    padding-left: 5px;
    margin-bottom: 8px
}

.multiselect__tags-wrap {
    display: inline
}

.multiselect__tags {
    min-height: 40px;
    display: block;
    padding: 8px 40px 0 8px;
    border-radius: 5px;
    border: 1px solid #e8e8e8;
    background: #fff;
    font-size: 14px
}

.multiselect__tag {
    position: relative;
    display: inline-block;
    padding: 4px 26px 4px 10px;
    border-radius: 5px;
    margin-right: 10px;
    color: #fff;
    line-height: 1;
    background: #41b883;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    max-width: 100%;
    text-overflow: ellipsis
}

.multiselect__tag-icon {
    cursor: pointer;
    margin-left: 7px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    font-weight: 700;
    font-style: normal;
    width: 22px;
    text-align: center;
    line-height: 22px;
    transition: all .2s ease;
    border-radius: 5px
}

.multiselect__tag-icon:after {
    content: "×";
    color: #266d4d;
    font-size: 14px
}

.multiselect__tag-icon:focus,
.multiselect__tag-icon:hover {
    background: #369a6e
}

.multiselect__tag-icon:focus:after,
.multiselect__tag-icon:hover:after {
    color: #fff
}

.multiselect__current {
    min-height: 40px;
    overflow: hidden;
    padding: 8px 12px 0;
    padding-right: 30px;
    white-space: nowrap;
    border-radius: 5px;
    border: 1px solid #e8e8e8
}

.multiselect__current,
.multiselect__select {
    line-height: 16px;
    box-sizing: border-box;
    display: block;
    margin: 0;
    text-decoration: none;
    cursor: pointer
}

.multiselect__select {
    position: absolute;
    width: 40px;
    height: 38px;
    right: 1px;
    top: 1px;
    padding: 4px 8px;
    text-align: center;
    transition: transform .2s ease
}

.multiselect__select:before {
    position: relative;
    right: 0;
    top: 65%;
    color: #999;
    margin-top: 4px;
    border-style: solid;
    border-width: 5px 5px 0;
    border-color: #999 transparent transparent;
    content: ""
}

.multiselect__placeholder {
    color: #adadad;
    display: inline-block;
    margin-bottom: 10px;
    padding-top: 2px
}

.multiselect--active .multiselect__placeholder {
    display: none
}

.multiselect__content-wrapper {
    position: absolute;
    display: block;
    background: #fff;
    width: 100%;
    max-height: 240px;
    overflow: auto;
    border: 1px solid #e8e8e8;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    z-index: 1;
    -webkit-overflow-scrolling: touch
}

.multiselect__content {
    list-style: none;
    display: inline-block;
    padding: 0;
    margin: 0;
    min-width: 100%;
    vertical-align: top
}

.multiselect--above .multiselect__content-wrapper {
    bottom: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom: none;
    border-top: 1px solid #e8e8e8
}

.multiselect__content::webkit-scrollbar {
    display: none
}

.multiselect__element {
    display: block
}

.multiselect__option {
    display: block;
    padding: 12px;
    min-height: 40px;
    line-height: 16px;
    text-decoration: none;
    text-transform: none;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    white-space: nowrap
}

.multiselect__option:after {
    top: 0;
    right: 0;
    position: absolute;
    line-height: 40px;
    padding-right: 12px;
    padding-left: 20px;
    font-size: 13px
}

.multiselect__option--highlight {
    background: #41b883;
    outline: none;
    color: #fff
}

.multiselect__option--highlight:after {
    content: attr(data-select);
    background: #41b883;
    color: #fff
}

.multiselect__option--selected {
    background: #f3f3f3;
    color: #35495e;
    font-weight: 700
}

.multiselect__option--selected:after {
    content: attr(data-selected);
    color: silver
}

.multiselect__option--selected.multiselect__option--highlight {
    background: #ff6a6a;
    color: #fff
}

.multiselect__option--selected.multiselect__option--highlight:after {
    background: #ff6a6a;
    content: attr(data-deselect);
    color: #fff
}

.multiselect--disabled {
    background: #ededed;
    pointer-events: none
}

.multiselect--disabled .multiselect__current,
.multiselect--disabled .multiselect__select,
.multiselect__option--disabled {
    background: #ededed;
    color: #a6a6a6
}

.multiselect__option--disabled {
    cursor: text;
    pointer-events: none
}

.multiselect__option--group {
    background: #ededed;
    color: #35495e
}

.multiselect__option--group.multiselect__option--highlight {
    background: #35495e;
    color: #fff
}

.multiselect__option--group.multiselect__option--highlight:after {
    background: #35495e
}

.multiselect__option--disabled.multiselect__option--highlight {
    background: #dedede
}

.multiselect__option--group-selected.multiselect__option--highlight {
    background: #ff6a6a;
    color: #fff
}

.multiselect__option--group-selected.multiselect__option--highlight:after {
    background: #ff6a6a;
    content: attr(data-deselect);
    color: #fff
}

.multiselect-enter-active,
.multiselect-leave-active {
    transition: all .15s ease
}

.multiselect-enter,
.multiselect-leave-active {
    opacity: 0
}

.multiselect__strong {
    margin-bottom: 8px;
    line-height: 20px;
    display: inline-block;
    vertical-align: top
}

[dir=rtl] .multiselect {
    text-align: right
}

[dir=rtl] .multiselect__select {
    right: auto;
    left: 1px
}

[dir=rtl] .multiselect__tags {
    padding: 8px 8px 0 40px
}

[dir=rtl] .multiselect__content {
    text-align: right
}

[dir=rtl] .multiselect__option:after {
    right: auto;
    left: 0
}

[dir=rtl] .multiselect__clear {
    right: auto;
    left: 12px
}

[dir=rtl] .multiselect__spinner {
    right: auto;
    left: 1px
}

@-webkit-keyframes a {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(2turn)
    }
}

@keyframes a {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(2turn)
    }
}

text.calendar-heatmap-legend-text,
text.day-initial,
text.month-name {
    /* font-family: Inter, sans-serif; */
    font-size: 10px;
    color: #444;
    fill: #444
}

text.month-name {
    font-size: 12px !important;
    text-transform: uppercase;
    color: #444;
    fill: #444
}

rect.day-cell:hover {
    stroke: #555;
    stroke-width: 1px
}

.day-cell-tooltip {
    position: absolute;
    z-index: 9999;
    padding: 5px 9px;
    color: #444;
    font-size: 12px;
    background: #fafafb;
    border-radius: 3px;
    text-align: center;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .25);
    border: 1px solid #eee
}

.calendar-heatmap {
    box-sizing: initial
}

.refer.page-container .credit-card {
    display: inline-block;
    margin-left: 20px
}

.refer.page-container .credit-card h1 {
    margin-bottom: 0;
    margin-top: 15px;
    font-weight: 600
}

.refer.page-container .credit-card h1 a {
    font-size: 11px;
    margin-left: 10px;
    position: relative;
    bottom: 1px;
    font-weight: 400
}

.refer.page-container .redeem-modal h3 {
    margin-top: 0
}

.refer.page-container .refer-mobile {
    position: relative
}

.refer.page-container .refer-mobile .pre-mobile {
    position: absolute;
    top: 21px;
    z-index: 1;
    padding: 10px;
    background: #fafafb;
    left: 1px;
    line-height: 1.25rem
}

.refer.page-container .refer-mobile input {
    padding-left: 50px !important
}

.refer.page-container .table-container {
    max-height: 400px;
    overflow: auto
}

.refer.page-container .refer-block .refer-link-label {
    margin-bottom: 10px
}

.refer.page-container .refer-block .refer-link-label a {
    margin-left: 5px;
    top: 2px;
    position: relative
}

.refer.page-container .refer-block img.refer-head-img {
    height: 60px;
    width: auto;
    position: relative;
    top: 2px
}

.refer.page-container .refer-block .refer-message {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.8
}

.refer.page-container .refer-block .refer-message p {
    width: 100%
}

.refer.page-container .refer-block .refer-message p a {
    font-size: 12px;
    margin-left: 5px
}

.refer.page-container .pnl-charges-breakdown .state-process {
    margin-top: 20px !important
}

.refer.page-container .pnl-charges-breakdown textarea {
    border: 1px solid #e1e1e1;
    margin-top: 10px
}

.refer.page-container .redeem-offers .post-redeem {
    margin-top: 20px
}

.refer.page-container .redeem-offers .vendor-list {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee
}

.refer.page-container .redeem-offers .vendor-list h3 {
    font-weight: 600;
    margin-top: 20px
}

.refer.page-container .redeem-offers .vendor-list .vendor-desc {
    margin-bottom: 30px
}

.refer.page-container .redeem-offers .vendor-list .vendor-logo-container .vendor-logo {
    padding: 25px 0;
    text-align: center;
    border: 1px solid #eee;
    border-top: none;
    background: #fafafb
}

.refer.page-container .redeem-offers .vendor-list .vendor-logo-container .vendor-logo img {
    width: 125px;
    height: auto;
    margin: auto;
    position: relative;
    top: 2px
}

.refer.page-container .redeem-offers .vendor-list .vendor-logo-container .vendor-logo.selected {
    background: #fff;
    border-right: none
}

.refer.page-container .redeem-offers .vendor-list .vendor-logo-container .vendor-logo:hover {
    cursor: pointer
}

.refer.page-container .redeem-offers .vendor-list .vendor-logo-container:last-child .vendor-logo {
    border-bottom: none
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer {
    margin-top: 15px
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer:first-child {
    margin-top: 30px
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer label {
    display: block !important;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer label span {
    float: right
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:checked,
.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:not(:checked) {
    position: absolute;
    left: -9999px
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:checked+label,
.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:not(:checked)+label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    line-height: 20px;
    display: inline-block;
    font-weight: 600;
    color: #444 !important
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:checked+label {
    color: #0059c1 !important
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:not(:checked)+label:before {
    border: 2px solid #9b9b9b
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:checked+label:before {
    border: 2px solid #0059c1
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:checked+label:before,
.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:not(:checked)+label:before {
    content: "";
    position: absolute;
    left: 0;
    top: 1px;
    width: 14px;
    height: 14px;
    border-radius: 100%
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:checked+label:after,
.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:not(:checked)+label:after {
    content: "";
    width: 10px;
    height: 10px;
    background: #0059c1;
    position: absolute;
    top: 5px;
    left: 4px;
    border-radius: 100%;
    transition: all .2s ease
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:not(:checked)+label:after {
    opacity: 0;
    transform: scale(0)
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:checked+label:after {
    opacity: 1;
    transform: scale(1)
}

.refer.page-container .refer-form h2 a {
    font-size: 11px;
    margin-left: 10px;
    position: relative;
    bottom: 1px
}

.refer.page-container .refer-link .refer-link-label img {
    max-width: 18px;
    opacity: .8
}

.refer.page-container .refer-link .refer-link-label img:hover {
    opacity: 1
}

.refer.page-container .refer-link .su-input-group {
    display: inline-block;
    margin-bottom: 0
}

.refer.page-container .refer-link .su-input-group input {
    width: 235px
}

.refer.page-container .refer-link button {
    margin-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    position: relative !important;
    top: 0 !important;
    left: -22px !important
}

.refer.page-container .refer-head-icon {
    position: relative;
    width: 25px;
    height: 22px;
    margin-right: 3px;
    margin-left: 5px;
    top: 2px
}

.refer.page-container .credits-req {
    position: relative;
    top: 4px;
    font-size: .85rem;
    font-weight: 600
}

.refer.page-container .refer-table tbody tr .remarks,
.refer.page-container .refer-table thead tr .remarks {
    max-width: 400px
}

.refer.page-container .refer-table tbody tr .ledger-date,
.refer.page-container .refer-table thead tr .ledger-date {
    min-width: 85px
}

.refer.page-container .refer-table tbody tr:first-child td:first-child,
.refer.page-container .refer-table thead tr:first-child td:first-child {
    width: 80px
}

.refer.page-container .refer-table .time {
    color: #9b9b9b
}

.refer.page-container .refer-table .exchange {
    font-size: .75rem;
    color: #9b9b9b;
    margin-left: 15px;
    font-weight: 600
}

.refer.page-container .refer-table thead tr {
    border-top: 1px solid #f1f1f1
}

.refer.page-container .refer-table thead tr .sorted {
    background: #fafafb
}

.refer.page-container .refer-table thead td {
    cursor: pointer;
    color: #9b9b9b;
    background: #fafafb
}

.refer.page-container .refer-table thead td:first-child {
    min-width: 75px
}

.refer.page-container .refer-table thead td:hover {
    background: #fafafb
}

.refer.page-container .refer-table thead td:hover .arrow {
    opacity: 1
}

.refer.page-container .refer-table thead .arrow-show {
    opacity: 1;
    background: #fafafb
}

.refer.page-container .refer-table tr {
    border-bottom: 1px solid #f1f1f1
}

.refer.page-container .refer-table tr .trade-exchange {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    color: #9b9b9b;
    font-weight: 600
}

.refer.page-container .refer-table tr .trade-type {
    padding: 3px 10px;
    text-transform: uppercase;
    width: 30px;
    display: block;
    border-radius: 2px;
    float: right;
    font-size: 10px;
    text-align: center
}

.refer.page-container .refer-table tr .buy {
    color: #4184f3;
    background-color: rgba(65, 132, 243, .1)
}

.refer.page-container .refer-table tr .sell {
    color: #df514c;
    background-color: rgba(223, 81, 76, .1)
}

.refer.page-container .refer-table .arrow {
    display: inline-block;
    float: left;
    position: relative;
    top: 7px;
    border: solid #9b9b9b;
    border-width: 0 1px 1px 0;
    padding: 3px;
    opacity: 0
}

.refer.page-container .refer-table .arrow.asc {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg)
}

.refer.page-container .refer-table .arrow.desc {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

@media only screen and (min-width:800px) {
    .refer.page-container .refer-block {
        display: flex;
        margin-top: 30px
    }

    .refer.page-container .refer-message {
        padding-left: 30px;
        border-left: 1px solid #eee
    }
}

@media only screen and (max-width:800px) {
    .refer.page-container .refer-mobile .pre-mobile {
        padding: 18px 10px !important
    }

    .refer.page-container .vendor-block .vendor-offer label span {
        float: none !important;
        display: block
    }

    .refer.page-container .refer-link-label a {
        margin-left: 10px !important
    }

    .refer.page-container .refer-link-label img {
        max-width: 25px !important
    }

    .refer.page-container .show-inline-on-mobile {
        display: inline !important
    }

    .refer.page-container .refer-message {
        margin-top: 10px
    }

    .refer.page-container .vendor-logo-container {
        width: 25% !important;
        display: inline-block
    }

    .refer.page-container .vendor-logo-container .vendor-logo {
        border-bottom: 1px solid #eee !important
    }

    .refer.page-container .vendor-logo-container .vendor-logo img {
        width: 70px !important;
        height: 25px !important
    }

    .refer.page-container .redeem-offers .vendor-block .vendor-offer label {
        border-bottom: none !important
    }

    .marketwatch-sidebar .instruments .instrument .price .refer.page-container .redeem-offers span,
    .marketwatch-sidebar .instruments .instrument .refer.page-container .redeem-offers .price,
    .refer.page-container .redeem-offers .marketwatch-sidebar .instruments .instrument .price,
    .refer.page-container .redeem-offers .marketwatch-sidebar .instruments .instrument .price span,
    .refer.page-container .redeem-offers .text-right {
        text-align: center !important
    }
}

.page-container.gift .table-section {
    padding-top: 20px
}

.page-container.gift .table-section .table-download {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 0
}

.page-container.gift .cards .card .top {
    margin-bottom: 10px !important;
    align-items: center
}

.page-container.gift .cards .card .su-input-group {
    margin-top: 0;
    display: inline-block
}

.page-container.gift .cards .card .bottom {
    display: block !important
}

.page-container.gift #gift_link {
    opacity: 0
}

.page-container.gift .cancel-pledge-modal .btn-blue {
    margin-right: 20px
}

.page-container.gift ul {
    padding-left: 25px
}

.page-container.gift ul li {
    margin-bottom: 10px
}

.page-container.gift .gift-illustration {
    margin: 60px 0
}

.page-container.gift .gift-illustration img {
    max-width: 400px
}

.page-container.gift .gift-illustration .inputcontainer {
    margin-top: 60px !important
}

.page-container.gift .rec-box {
    padding: 20px 40px 30px 40px;
    box-shadow: 0 0 6px 0 rgba(0, 0, 0, .2);
    border-radius: 2px
}

.page-container.gift .rec-box button {
    max-width: 150px !important;
    margin-left: 0
}

.page-container.gift .rec-box h2 {
    margin-bottom: 0;
    margin-top: 0
}

.page-container.gift .rec-box .v-align {
    margin-bottom: 10px;
    margin-top: 5px
}

.page-container.gift .gift-head-icon {
    position: relative;
    width: 25px;
    height: 22px;
    margin-right: 3px;
    margin-left: 5px;
    top: 2px
}

.page-container.gift .rec-card {
    margin-top: 60px;
    margin-bottom: 60px
}

.page-container.gift .rec-card .seven span {
    margin-right: 15px
}

.page-container.gift .rec-card .low-marg {
    margin-bottom: 10px;
    margin-top: 0
}

.page-container.gift .rec-card button {
    max-width: 100px
}

.page-container.gift .selected-container {
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 5px;
    min-height: 20px;
    margin-top: 20px
}

.page-container.gift .selected-container label {
    font-size: .875rem !important
}

.page-container.gift .selected-container span {
    color: #0059c1
}

.page-container.gift .success {
    color: #167f39
}

.page-container.gift #gift_form {
    margin-top: 50px;
    margin-bottom: 40px
}

.page-container.gift #rec_form {
    margin-bottom: 15px
}

.page-container.gift #rec_form .gift-mobile {
    position: relative
}

.page-container.gift #rec_form .gift-mobile .pre-mobile {
    position: absolute;
    top: 21px;
    z-index: 1;
    padding: 10px;
    background: #fafafb;
    left: 1px;
    line-height: 1.25rem;
    font-size: .875rem
}

.page-container.gift #rec_form .gift-mobile input {
    padding-left: 50px !important
}

.page-container.gift .gift-history img {
    height: 16px;
    position: relative;
    top: 2px;
    margin-right: 5px
}

.page-container.gift .gift-history h3:hover {
    cursor: pointer
}

.page-container.gift .gift-history h3 .icon {
    margin-left: 15px
}

.page-container.gift .gift-history.accept-table {
    max-height: 500px;
    width: 500px !important;
    margin: auto
}

.page-container.gift .accept-head h3 {
    margin-top: 20px;
    margin-bottom: 25px
}

.page-container.gift .accept-invite {
    font-size: 16px
}

.page-container.gift .history-table .gift-status {
    display: inline-block
}

.page-container.gift .history-table tr {
    border-bottom: 1px solid #f1f1f1;
    padding: 10px 5px
}

.page-container.gift .history-table tr td:first-child,
.page-container.gift .history-table tr td:last-child,
.page-container.gift .history-table tr td:nth-child(2),
.page-container.gift .history-table tr td:nth-child(3) {
    min-width: 125px
}

.page-container.gift .history-table thead {
    color: #9b9b9b
}

.page-container.gift .history-table button {
    margin-right: 10px
}

.page-container.gift .history-table .status {
    text-transform: uppercase;
    font-size: .6875rem;
    padding: 3px 15px;
    border-radius: 2px;
    position: relative;
    display: inline-block;
    line-height: 1.7;
    text-align: center;
    margin-right: 10px
}

.page-container.gift .history-table .status a {
    position: relative;
    top: 1px
}

.page-container.gift .history-table .status.accepted,
.page-container.gift .history-table .status.created {
    background: rgba(255, 202, 85, .15);
    color: #f8ab00
}

.page-container.gift .history-table .status.canceled {
    background: hsla(0, 0%, 80%, .15);
    color: #9b9b9b
}

.page-container.gift .history-table .status.approved,
.page-container.gift .history-table .status.processing,
.page-container.gift .history-table .status.transferred {
    background: rgba(65, 132, 243, .15);
    color: #4184f3
}

.page-container.gift .history-table .status.failed {
    background: rgba(255, 85, 85, .15);
    color: #f6461a
}

.page-container.gift #holdings_table thead tr th:first-child:hover,
.page-container.gift #holdings_table thead tr th:last-child:hover {
    cursor: default;
    background: #fff
}

.page-container.gift #holdings_table thead tr th:first-child input {
    width: 15px;
    height: 15px;
    position: relative;
    top: 2px;
    left: 2px
}

.page-container.gift #holdings_table thead tr th:first-child input:hover {
    cursor: pointer
}

.page-container.gift #holdings_table tr .row-check {
    line-height: 0
}

.page-container.gift #holdings_table tr .row-check label:hover {
    cursor: pointer
}

.page-container.gift #holdings_table tr input[type=number]::-webkit-inner-spin-button,
.page-container.gift #holdings_table tr input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0
}

.page-container.gift #holdings_table tr input[type=number] {
    -moz-appearance: textfield
}

.page-container.gift #holdings_table tr td:first-child {
    min-width: 20px;
    width: 20px;
    padding-top: 11px;
    padding-bottom: 5px
}

.page-container.gift #holdings_table tr td:first-child input {
    display: none
}

.page-container.gift #holdings_table tr td:first-child .checkmark {
    display: inline-block;
    top: 0;
    left: 0;
    height: 15px;
    width: 15px;
    border: 1px solid #e1e1e1;
    position: relative;
    border-radius: 2px
}

.page-container.gift #holdings_table tr td:first-child input:checked~.checkmark {
    background-color: #0059c1
}

.page-container.gift #holdings_table tr td:first-child .checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.page-container.gift #holdings_table tr td:first-child input:checked~.checkmark:after {
    display: block
}

.page-container.gift #holdings_table tr td:first-child .checkmark:after {
    left: 5px;
    top: 2px;
    width: 3px;
    height: 7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

.page-container.gift #holdings_table tr td:last-child {
    width: 125px
}

.page-container.gift #holdings_table tr td:first-child input {
    width: 15px;
    height: 15px;
    position: relative;
    top: 2px;
    left: 2px
}

.page-container.gift #holdings_table tr td:first-child input:hover {
    cursor: pointer
}

.page-container.gift #holdings_table tr td:nth-child(2) {
    text-align: left !important
}

.page-container.gift #holdings_table tr td:nth-child(2) .arrow {
    float: right !important
}

.page-container.gift #holdings_table tr td .su-input-group {
    margin-top: 0;
    width: 110px;
    float: right
}

.page-container.gift #holdings_table tr td .su-input-group input {
    text-align: right
}

@media only screen and (min-width:800px) {
    .page-container.gift .gift-mobile .pre-mobile {
        padding: 10px !important
    }

    .page-container.gift #holdings_table tbody {
        display: block;
        max-height: 500px;
        overflow: auto
    }

    .page-container.gift #holdings_table tbody tr,
    .page-container.gift #holdings_table thead {
        display: table;
        width: 100%;
        table-layout: fixed
    }
}

@media only screen and (max-width:800px) {
    .page-container.gift .card input[type=number] {
        width: 95px;
        text-align: right !important
    }

    .page-container.gift .gift-mobile .pre-mobile {
        padding: 18px 10px !important
    }

    .page-container.gift .gift-illustration {
        margin: 10px 0 40px 0
    }

    .page-container.gift .gift-illustration img {
        max-width: 200px
    }

    .page-container.gift .gift-illustration .inputcontainer {
        margin-top: 20px !important
    }

    .page-container.gift .selected-container {
        padding: 0
    }

    .page-container.gift .rec-card {
        margin-top: 20px
    }

    .page-container.gift .gift-history #gift_link {
        position: absolute
    }

    .page-container.gift .gift-history .history-table {
        padding-top: 0 !important
    }

    .page-container.gift .gift-history .history-table .status {
        margin-right: 0
    }

    .page-container.gift .gift-history .history-table .card .top {
        display: block
    }

    .page-container.gift .gift-history .history-table .card .middle {
        margin-bottom: 10px !important
    }

    .page-container.gift .gift-history .history-table .card .gift-status button {
        padding: 5px 5px !important;
        height: 25px !important;
        line-height: 1;
        font-size: 12px !important
    }
}

.tagger .modal-container {
    width: 555px
}

.tagger .modal-container .create-tag-head a {
    color: #444 !important
}

.tagger h4 {
    margin-bottom: 0;
    margin-top: 20px
}

.tagger .filter-box {
    position: relative
}

.tagger .is-all {
    padding-right: 50px
}

.tagger .tags-nudge-link {
    position: absolute;
    top: 9px;
    right: 20px
}

.tagger .filters-list label.p1,
.tagger .ti-tags.p1 {
    color: #039be5 !important;
    background: rgba(3, 155, 229, .1) !important;
    border: none !important
}

.tagger .filters-list label.p2,
.tagger .ti-tags.p2 {
    color: #0b8043 !important;
    background: rgba(11, 128, 67, .1) !important;
    border: none !important
}

.tagger .filters-list label.p3,
.tagger .ti-tags.p3 {
    color: #3f51b5 !important;
    background: rgba(63, 81, 181, .1) !important;
    border: none !important
}

.tagger .filters-list label.p4,
.tagger .ti-tags.p4 {
    color: #f4511e !important;
    background: rgba(244, 81, 30, .1) !important;
    border: none !important
}

.tagger .filters-list label.p5,
.tagger .ti-tags.p5 {
    color: #795548 !important;
    background: rgba(121, 85, 72, .1) !important;
    border: none !important
}

.tagger .filters-list label.p6,
.tagger .ti-tags.p6 {
    color: #7cb342 !important;
    background: rgba(124, 179, 66, .1) !important;
    border: none !important
}

.tagger .filters-list label.p7,
.tagger .ti-tags.p7 {
    color: #f09300 !important;
    background: rgba(240, 147, 0, .1) !important;
    border: none !important
}

.tagger .filters-list label.p8,
.tagger .ti-tags.p8 {
    color: #8e24aa !important;
    background: rgba(142, 36, 170, .1) !important;
    border: none !important
}

.tagger .filters-list label.p9,
.tagger .ti-tags.p9 {
    color: #616161 !important;
    background: rgba(97, 97, 97, .1) !important;
    border: none !important
}

.tagger .filters-list label.p10,
.tagger .ti-tags.p10 {
    color: #ffcd56 !important;
    background: rgba(255, 205, 86, .1) !important;
    border: none !important
}

.tagger .filter-link {
    position: relative;
    display: block;
    border: none;
    box-shadow: none;
    max-width: 100%;
    padding-right: 0;
    border-radius: 0;
    color: #444;
    min-height: 38px;
    box-sizing: border-box;
    z-index: 2
}

.tagger .filter-link .filter-count {
    width: 18px;
    height: 18px;
    font-size: 10px;
    color: #fff;
    background: #0059c1;
    border-radius: 50%;
    display: inline-block;
    text-align: center;
    line-height: 1.8;
    position: absolute;
    right: 5px;
    font-weight: 600;
    top: 8px
}

.tagger .filter-option-container.main-input .filters {
    padding-top: 50px !important
}

.tagger .filter-option-container:not(.main-input) .filter-option label.checks {
    margin-bottom: 10px
}

.tagger .filter-option-container .filter-option {
    position: absolute;
    left: -1px;
    right: -1px;
    top: -1px;
    background: #fff;
    border: 1px solid #e1e1e1;
    border-radius: 2px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
    z-index: 0;
    transition: all .15s ease;
    transform: rotateX(-15deg);
    transform-origin: 0 0;
    opacity: 0;
    visibility: hidden
}

.tagger .filter-option-container .filter-option ::-webkit-scrollbar {
    width: 6px
}

.tagger .filter-option-container .filter-option ::-webkit-scrollbar-track {
    background: #fff
}

.tagger .filter-option-container .filter-option ::-webkit-scrollbar-thumb {
    background: #e0e3ec
}

.tagger .filter-option-container .filter-option ::-webkit-scrollbar-thumb:hover {
    background: #555;
    width: 3px
}

.tagger .filter-option-container .filter-option.show {
    opacity: 1;
    transform: rotateX(0deg);
    display: block;
    visibility: visible
}

.tagger .filter-option-container .filter-option .filters {
    padding: 45px 20px 10px 20px;
    max-height: 320px;
    overflow: auto
}

.tagger .filter-option-container .filter-option .filters .filters-label {
    display: block;
    margin-bottom: 10px;
    margin-top: 15px
}

.tagger .filter-option-container .filter-option .filters .filters-list {
    display: inline-block
}

.tagger .filter-option-container .filter-option label {
    padding-left: 0
}

.tagger .filter-option-container .filter-option .all-tags-select {
    display: block !important;
    margin-top: 15px
}

.tagger .filter-option-container .filter-option .all-tags-select label {
    border-color: #0059c1 !important;
    color: #0059c1 !important;
    background: #fff !important
}

.tagger .filter-option-container .filter-option .all-tags-select label:hover {
    background-color: #0059c1 !important;
    color: #fff !important
}

.tagger .filter-option-container .filter-option .all-filter-hr {
    margin-bottom: 17px
}

.tagger .filter-option-container .filter-option .create-tag-cloud {
    display: inline-block;
    color: #0059c1 !important;
    border: none
}

.tagger .filter-option-container .filter-option .create-tag-cloud:hover {
    opacity: .8;
    background: #fff;
    color: #0059c1 !important;
    cursor: pointer;
    font-size: 12px
}

.tagger .filter-option-container .filter-option label.checks {
    display: inline-block;
    padding: 4px 10px;
    margin-right: 8px;
    font-size: .9rem !important;
    border: none;
    border-radius: 3px;
    color: #666;
    background: #fafafb;
    line-height: 1rem !important
}

.tagger .filter-option-container .filter-option label.checks:hover {
    cursor: pointer;
    opacity: .8
}

.tagger .filter-option-container .filter-option label.checks.active {
    border: 1px solid #0059c1;
    color: #fff;
    background: #0059c1
}

.tagger .filter-option-container .filter-option input[type=checkbox] {
    display: none
}

.tagger .filter-option-container .filter-option input {
    max-width: 175px;
    font-size: 12px;
    min-height: 35px;
    height: 35px
}

.tagger .filter-option-container .filter-option .triangle {
    width: 30px;
    height: 30px;
    position: absolute;
    overflow: hidden;
    box-shadow: 0 16px 10px -17px rgba(0, 0, 0, .5);
    left: 20px;
    top: -30px
}

.tagger .filter-option-container .filter-option .triangle:after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    transform: rotate(-45deg);
    top: 20px;
    left: 4px;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .1);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #eee
}

.tagger .filter-option-container .reset-filter {
    text-align: right;
    padding: 2px 20px 2px 0;
    font-size: 12px;
    color: #9c9c9c;
    background: #fafafb
}

.tagger .filter-option-container .reset-filter span:hover {
    cursor: pointer;
    opacity: .8
}

.tagger .filter-option-container .reset-filter span img {
    width: 12px;
    vertical-align: middle;
    margin-right: 4px
}

.tagger .filter-option-container .filter-option {
    top: -10px;
    z-index: 1
}

.tagger .filter-option-container .filter-option .filters {
    padding-top: 45px
}

.tagger .vue-tags-input.border-input {
    border: 1px solid #e1e1e1;
    border-radius: 3px
}

.tagger .vue-tags-input.all-tags-added .ti-tags li {
    display: none
}

.tagger .vue-tags-input.all-tags-added .ti-tags li:nth-last-child(2) {
    display: inline-block;
    background-color: #fff !important;
    color: #444 !important;
    font-weight: 600
}

.tagger .vue-tags-input.all-tags-added .ti-tags li:nth-last-child(2) .ti-actions {
    display: none
}

.tagger .vue-tags-input.main-input .ti-autocomplete {
    padding-bottom: 10px
}

.tagger .vue-tags-input.main-input ul .ti-item div {
    padding: 6px !important
}

.tagger .vue-tags-input:not(.main-input) input {
    padding-left: 5px !important
}

.tagger .vue-tags-input:not(.main-input) ul .ti-item:last-child {
    background: #eee;
    color: #444
}

.tagger .vue-tags-input:not(.main-input) ul .ti-item:last-child div.my-item {
    padding-left: 0 !important
}

.tagger .vue-tags-input:not(.main-input) ul .ti-item:last-child span {
    background: inherit !important
}

.tagger .vue-tags-input:not(.main-input) ul .ti-item:not(:last-child) div {
    padding: 6px !important
}

.tagger .vue-tags-input:not(.main-input):not(.is-all) .ti-autocomplete {
    position: static
}

.tagger .vue-tags-input:not(.main-input) .ti-tags {
    padding-left: 15px !important;
    border: none !important
}

.tagger .vue-tags-input ul .ti-selected-item {
    background: transparent !important;
    opacity: .8
}

.tagger .vue-tags-input ul .ti-selected-item:last-child {
    background: #f4f4f4
}

.tagger .vue-tags-input ul .ti-selected-item:last-child .auto-name {
    color: #444
}

.tagger .vue-tags-input ul .ti-selected-item:last-child:hover {
    background: #f4f4f4 !important
}

.tagger .vue-tags-input ul .ti-selected-item:hover {
    background: transparent !important
}

.tagger .vue-tags-input .auto-name {
    font-size: 12px;
    padding: 4px 10px
}

.tagger .vue-tags-input li.ti-item.ti-valid.custom-tag,
.tagger .vue-tags-input li.ti-item.ti-valid.system-tag {
    display: inline-block;
    margin-right: 5px
}

.tagger .vue-tags-input .ti-tag {
    font-size: .9rem !important;
    padding: 4px 10px
}

.tagger .vue-tags-input .ti-tag .ti-icon-close {
    line-height: 14px
}

.tagger .vue-tags-input .ti-tag .ti-content:hover {
    cursor: pointer
}

.tagger .vue-tags-input .ti-tag.processing .ti-actions .ti-icon-close {
    pointer-events: none
}

.tagger .vue-tags-input .ti-tag.processing .ti-actions .ti-icon-close:before {
    content: "î ¶";
    /* font-family: kiteicons; */
    font-style: normal;
    font-weight: 400;
    speak: never;
    display: inline-block;
    text-decoration: inherit;
    width: 1em;
    margin-right: .2em;
    text-align: center;
    font-variant: normal;
    text-transform: none;
    line-height: 1em;
    margin-left: .2em;
    pointer-events: none
}

.tagger .vue-tags-input .auto-label {
    display: none
}

.tagger .vue-tags-input .ti-autocomplete .ti-item:hover {
    color: #fff
}

.tagger .vue-tags-input .ti-autocomplete .ti-item.custom-tag {
    color: #444;
    background: #fff
}

.tagger .vue-tags-input .ti-autocomplete .ti-item.custom-tag:hover {
    color: #444;
    background: transparent !important
}

.tagger .vue-tags-input .ti-selected-item.ti-item.custom-tag .auto-name {
    color: #444
}

.tagger .vue-tags-input .ti-selected-item.ti-item .auto-name {
    color: #fff
}

.tagger .create-tag-color,
.tagger .create-tag-name {
    display: inline-block
}

.tagger .create-tag-name {
    width: calc(100% - 125px)
}

.tagger .create-tag-color {
    position: relative;
    top: 1px;
    margin-right: 20px
}

.tagger .create-tag-color .selected-color {
    box-sizing: border-box;
    border: 1px solid #e1e1e1;
    padding: 7px;
    border-radius: 3px;
    padding-right: 20px
}

.tagger .create-tag-color .selected-color span:first-child {
    border-radius: 2px;
    display: inline-block;
    box-sizing: border-box;
    width: 23px;
    height: 23px
}

.tagger .create-tag-color .selected-color span:last-child {
    margin-left: 7px;
    color: #666
}

.tagger .create-tag-color .selected-color:hover {
    cursor: pointer
}

.tagger .create-tag-color .color-palette {
    position: absolute;
    width: 130px;
    z-index: 2;
    background: #fff;
    border: 1px solid #e1e1e1;
    padding: 4px
}

.tagger .create-tag-color .color-palette .palette-colors {
    width: 20px;
    height: 20px;
    margin: 3px;
    display: inline-block;
    border-radius: 2px
}

.tagger .create-tag-color .color-palette .palette-colors:hover {
    opacity: .8;
    cursor: pointer
}

.tagger .create-tag-desc button {
    width: 100%
}

@media only screen and (max-width:800px) {
    .tagger .create-tag-color .selected-color {
        height: 54px;
        display: flex;
        align-items: center
    }

    .tagger .create-tag-color .selected-color span:first-child {
        width: 25px;
        height: 25px
    }

    .tagger .create-tag-color .color-palette {
        width: 125px
    }

    .tagger .create-tag-color .color-palette .palette-colors {
        width: 25px;
        height: 25px
    }
}

.tag-widget h1 button {
    float: right;
    height: 36px !important;
    line-height: 1;
    font-size: .9rem !important;
    padding: 0 10px !important
}

.tag-widget h1 .icon-arrow-left:hover {
    cursor: pointer
}

.tag-widget .no-tags img {
    max-width: 100%
}

.tag-widget .no-tags button {
    line-height: 1
}

.tag-widget .added-tags {
    max-height: calc(100vh - 250px);
    overflow: auto;
    padding-right: 7px
}

.tag-widget .added-tags::-webkit-scrollbar {
    width: 3px
}

.tag-widget .added-tags::-webkit-scrollbar-track {
    background: #fff
}

.tag-widget .added-tags::-webkit-scrollbar-thumb {
    background: #e0e3ec
}

.tag-widget .added-tags::-webkit-scrollbar-thumb:hover {
    background: #555;
    width: 3px
}

.tag-widget .added-tags p {
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 12px;
    margin-bottom: 15px
}

.tag-widget .added-tags span.tag {
    padding: 6px 10px;
    display: inline-block;
    margin-right: 5px;
    border-radius: 2px;
    background: rgba(68, 68, 68, .1);
    line-height: 14px;
    color: #444
}

.tag-widget .added-tags span.tag:hover {
    cursor: pointer;
    opacity: .8
}

.tag-widget .added-tags .tag-links {
    float: right;
    position: relative;
    top: 5px
}

.tag-widget .added-tags .tag-links span.icon-container {
    display: inline-block;
    margin-right: 5px
}

.tag-widget .added-tags .tag-links span.icon-container.analyse[data-balloon][data-balloon-pos=up]:after {
    left: -35% !important
}

.tag-widget .added-tags .tag-links span.icon {
    display: inline-block;
    font-size: 1rem
}

.tag-widget .added-tags .tag-links span.icon:hover {
    cursor: pointer;
    opacity: .8
}

.tag-widget .tag-search {
    margin-top: 30px;
    margin-bottom: 35px
}

.tag-widget #create_tag_form .su-input-group {
    top: 2px;
    margin-bottom: 10px
}

.tag-widget #create_tag_form .su-input-group .su-message {
    position: absolute
}

@media only screen and (max-width:800px) {
    .tag-widget #create_tag_form .create-tag-color .selected-color span:last-child {
        top: 0 !important
    }

    .tag-widget .su-input-group input,
    .tag-widget .su-input-group textarea,
    .tag-widget select {
        height: 54px
    }
}

  
body {
font-size: 14px;
overflow-y: scroll;
overflow-x: hidden;
letter-spacing: 0;
color: #444;
line-height: 1.7em;
min-width: 300px;
}
.app {
	position: relative;
}

.app .wrapper {
	padding: 0;
	width: 100%;
	margin: 0 auto;
	max-width: 1200px;
}
.app .page-content {
	position: relative;
	box-sizing: border-box;
	padding-top: 60px;
	background: #fff;
	min-height: 100vh;
	padding-bottom: 150px;
}
.app .page-container {
	padding: 40px 50px;
	padding-top: 20px;
}
h1, h2 {
	margin-top: 10px;
	margin-bottom: 20px;
}
.app .header-hr {
margin-bottom: 20px;
}
hr {
border-width: 0;
border-top: 1px solid #f1f1f1;
}
body, h1, h2, h3, h4, h5, h6 {
font-weight: 400;
/* font-family: Inter,sans-serif; */
}

.app label {
font-size: 1rem;
line-height: 1.6rem;
color: #666;
}
 
  
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
/* font-family: sans-serif; */
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}

body {
margin: 0
}

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

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

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

[hidden],template {
display: none
}

a {
background-color: transparent
}

a:active,a:hover {
outline: 0
}

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

b,strong {
font-weight: 700
}

dfn {
font-style: italic
}

h1 {
font-size: 1.7em;
margin: .67em 0
}

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

small {
font-size: 80%
}

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

sup {
top: -.5em
}

sub {
bottom: -.25em
}

img {
border: 0
}

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

figure {
margin: 1em 40px
}

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

pre {
overflow: auto
}

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

button,input,optgroup,select,textarea {
color: inherit;
font: inherit;
margin: 0
}

button {
overflow: visible
}

button,select {
text-transform: none
}

button,html input[type=button],input[type=reset],input[type=submit] {
-webkit-appearance: button;
cursor: pointer
}

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

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

input {
line-height: normal
}

input[type=checkbox],input[type=radio] {
box-sizing: border-box;
padding: 0
}

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

input[type=search] {
-webkit-appearance: textfield;
box-sizing: content-box
}

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

fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: .35em .625em .75em
}

legend {
border: 0;
padding: 0
}

textarea {
overflow: auto
}

optgroup {
font-weight: 700
}

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

td,th {
padding: 0
}

.container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 0 20px
}

.column,.columns,.container {
width: 100%;
box-sizing: border-box
}

.column,.columns {
float: left
}

@media(min-width: 400px) {
.container {
width:85%;
padding: 0
}
}

@media(min-width: 550px) {
.container {
width:80%
}

.column,.columns {
margin-left: 4%
}

.column:first-child,.columns:first-child {
margin-left: 0
}

.one.column,.one.columns {
width: 4.6666666667%
}

.two.columns {
width: 13.3333333333%
}

.two-half.columns {
width: 18%
}

.three.columns {
width: 22%
}

.four.columns {
width: 30.6666666667%
}

.five.columns {
width: 39.3333333333%
}

.six.columns {
width: 48%
}

.seven.columns {
width: 56.6666666667%
}

.eight.columns {
width: 65.3333333333%
}

.nine.columns {
width: 74%
}

.ten.columns {
width: 82.6666666667%
}

.eleven.columns {
width: 91.3333333333%
}

.twelve.columns {
width: 100%;
margin-left: 0
}

.one-third.column {
width: 30.6666666667%
}

.two-thirds.column {
width: 65.3333333333%
}

.one-half.column {
width: 48%
}

.offset-by-one.column,.offset-by-one.columns {
margin-left: 8.6666666667%
}

.offset-by-two.column,.offset-by-two.columns {
margin-left: 17.3333333333%
}

.offset-by-three.column,.offset-by-three.columns {
margin-left: 26%
}

.offset-by-four.column,.offset-by-four.columns {
margin-left: 34.6666666667%
}

.offset-by-five.column,.offset-by-five.columns {
margin-left: 43.3333333333%
}

.offset-by-six.column,.offset-by-six.columns {
margin-left: 52%
}

.offset-by-seven.column,.offset-by-seven.columns {
margin-left: 60.6666666667%
}

.offset-by-eight.column,.offset-by-eight.columns {
margin-left: 69.3333333333%
}

.offset-by-nine.column,.offset-by-nine.columns {
margin-left: 78%
}

.offset-by-ten.column,.offset-by-ten.columns {
margin-left: 86.6666666667%
}

.offset-by-eleven.column,.offset-by-eleven.columns {
margin-left: 95.3333333333%
}

.offset-by-one-third.column,.offset-by-one-third.columns {
margin-left: 34.6666666667%
}

.offset-by-two-thirds.column,.offset-by-two-thirds.columns {
margin-left: 69.3333333333%
}

.offset-by-one-half.column {
margin-left: 52%
}
}

.container:after,.row:after,.u-cf {
content: "";
display: table;
clear: both
}

.lessmargin {
margin-bottom: 5px!important
}

.inc-margin {
margin-top: 25px
}

.generic-table {
width: 100%
}

.generic-table tbody tr td:first-child,.generic-table thead tr td:first-child {
text-align: left
}

.generic-table tbody tr td,.generic-table thead tr td {
text-align: right;
padding: 10px 12px
}

.generic-table thead tr {
border-top: 1px solid #f1f1f1
}

.generic-table thead td {
padding: 15px 12px;
color: #9b9b9b;
background: #fafafb
}

.generic-table tr {
border-bottom: 1px solid #f1f1f1
}

.text-center {
text-align: center
}

.text-uppercase {
text-transform: uppercase
}

.context-menu .context-menu-list li a,.margins .sub-details .value,.order-window,.text-small {
font-size: .875rem;
line-height: 20px
}

.app .header .app-nav .dropdown-nav .dropdown-nav-header .email,.app .header .header-left .pinned-instruments .instrument-widget,.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header .email,.btn,.btn-blue,.btn-green,.btn-grey,.btn-reset,.margins .main-details .label,.margins .sub-details .label,.marketwatch-sidebar .instruments .instrument:hover .actions .btn,.marketwatch-sidebar .instruments .market-depth .ohlc,.marketwatch-sidebar .instruments .market-depth table,.marketwatch-sidebar .marketwatch-selector,.notifications-window table tbody tr td,.order-window .content .el-radio__label,.order-window .head .transaction-type-switch span,.orderbook .order-info-modal .modal-container,.stats-block .label,.stats-block .primary-stats span,.stats-block p,.su-select,.text-xsmall {
font-size: .75rem
}

.btn-small,.marketwatch-sidebar .instruments .market-depth table thead tr th,.order-window .content .advanced-options-toggle span,.order-window .content .el-form-item__label,.order-window .head .exchange,.order-window .head .last-price,.su-input-group .su-dynamic-label,.su-input-group .su-message,.text-label,.text-label.small,.text-xxsmall {
font-size: .725rem
}

.text-xxxsmall {
font-size: .5rem
}

.app .header .right-nav a.notifications-widget,.el-notification .el-notification__icon,.text-normal {
font-size: .875rem
}

.app .header .app-nav .dropdown-nav .dropdown-nav-header h4,.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header h4,.mobile-context-menu .mobile-context-menu-list,.su-toast-groups .su-toast-icon,.text-initial {
font-size: 1rem
}

.app .page-title,.orderbook .order-info-modal .modal-container .order-info-header .tradingsymbol,.text-pagetitle {
font-size: 1.125rem
}

.text-large {
font-size: 1.5rem
}

.margins .main-details .value,.stats-block .primary-stats .value,.stats-block h2,.text-xlarge {
font-size: 2rem
}

.text-xxlarge {
font-size: 2.625rem
}

.text-default {
color: #444
}

.text-light {
color: #9b9b9b
}

.text-lightest {
color: #ccc
}

.text-green {
color: #4caf50
}

.text-red,.text-sell {
color: #f6461a
}

.text-blue,.text-buy {
color: #387ed1
}

.marketwatch-sidebar .instruments .instrument .price,.marketwatch-sidebar .instruments .instrument .price span,.text-right {
text-align: right
}

.text-left {
text-align: left
}

.text-decimal {
font-size: .5em
}

.text-no-margin {
margin: 0
}

a.text-light:hover {
color: #444
}

.dim {
opacity: .7
}

.caps {
text-transform: uppercase
}

.text-label {
padding: 2px 10px;
text-align: center;
border-radius: 2px;
display: inline-block;
letter-spacing: .5px;
color: #444;
box-sizing: border-box;
background: rgba(68,68,68,.1)
}

.text-label.red {
color: #df514c;
background-color: rgba(223,81,76,.1)
}

.text-label.green {
color: #4caf50;
background-color: rgba(76,175,80,.1)
}

.text-label.blue {
color: #387ed1;
background-color: rgba(56,126,209,.1)
}

.text-label.orange {
color: #ff5722;
background-color: rgba(255,87,34,.1)
}

.text-label.aqua {
color: #00b0ff;
background-color: rgba(0,176,255,.1)
}

.text-label.amber {
color: #ff8f00;
background-color: rgba(255,143,0,.1)
}

.text-label.rose {
color: #ec407a;
background-color: rgba(236,64,122,.1)
}

.text-label.teal {
color: #009688;
background-color: rgba(0,150,136,.1)
}

.text-label.indigo {
color: #673ab7;
background-color: rgba(103,58,183,.1)
}

.hide {
display: none
}

.wide {
width: 100%
}

.text-box {
padding: 10px 20px;
margin-bottom: 20px;
border-radius: 2px;
color: rgba(0,0,0,.65);
border-left: 5px solid #f4f4f4
}

.text-box.green {
background-color: #ebf8f2;
border-color: #ebf8f2
}

.text-box.blue {
background-color: #ecf6fd;
border-color: #d2eafb
}

.text-box.red {
background-color: #fef0ef;
border-color: #fcdbd9
}

.text-box.yellow {
background-color: #fffaeb;
border-color: #fff3cf
}

@-webkit-keyframes fadeInDown {
0% {
transform: translate3d(0,-50%,0);
opacity: 0
}

to {
transform: none;
opacity: 1
}
}

@keyframes fadeInDown {
0% {
transform: translate3d(0,-50%,0);
opacity: 0
}

to {
transform: none;
opacity: 1
}
}

@-webkit-keyframes fadeOutUp {
0% {
opacity: 1
}

to {
transform: translate3d(0,-50%,0);
opacity: 0
}
}

@keyframes fadeOutUp {
0% {
opacity: 1
}

to {
transform: translate3d(0,-50%,0);
opacity: 0
}
}

@-webkit-keyframes fadeInUp {
0% {
transform: translate3d(0,100%,0);
opacity: 0
}

to {
transform: none;
opacity: 1
}
}

@keyframes fadeInUp {
0% {
transform: translate3d(0,100%,0);
opacity: 0
}

to {
transform: none;
opacity: 1
}
}

@-webkit-keyframes fadeOutDown {
0% {
opacity: 1
}

to {
transform: translate3d(0,100%,0);
opacity: 0
}
}

@keyframes fadeOutDown {
0% {
opacity: 1
}

to {
transform: translate3d(0,100%,0);
opacity: 0
}
}

@-webkit-keyframes fadeOut {
0% {
opacity: 1
}

to {
opacity: 0
}
}

@-webkit-keyframes slideInRight {
0% {
transform: translate3d(100%,0,0);
visibility: visible
}

to {
transform: translateZ(0)
}
}

@keyframes slideInRight {
0% {
transform: translate3d(100%,0,0);
visibility: visible
}

to {
transform: translateZ(0)
}
}

.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight
}

@-webkit-keyframes slideOutRight {
0% {
transform: translateZ(0)
}

to {
visibility: hidden;
transform: translate3d(100%,0,0)
}
}

@keyframes slideOutRight {
0% {
transform: translateZ(0)
}

to {
visibility: hidden;
transform: translate3d(100%,0,0)
}
}

.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight
}

.fade-enter-active,.fade-leave-active {
transition: opacity 10ms
}

.fade-enter,.fade-leave-to {
opacity: 0
}

.perspective {
perspective: 1000px
}

.dropdown-enter-active {
transform-origin: 0 0;
transition: transform .15s ease-in-out,opacity .15s
}

.dropdown-leave-active {
transform-origin: 0 0;
transition: transform .15s ease-in-out,opacity .2s
}

.dropdown-enter,.dropdown-leave-to {
opacity: 0;
transform: rotateX(-15deg);
transform-origin: 0 0
}

.dropdown-leave-to {
transform: rotateX(-30deg)
}

@-webkit-keyframes swing-in {
0% {
opacity: .4;
transform: rotateX(-15deg)
}

to {
opacity: 1;
transform: rotateX(0deg)
}
}

@keyframes swing-in {
0% {
opacity: .4;
transform: rotateX(-15deg)
}

to {
opacity: 1;
transform: rotateX(0deg)
}
}

.shake {
-webkit-animation: shake .15s ease;
animation: shake .15s ease
}

@-webkit-keyframes shake {
0% {
transform: translate(0)
}

20% {
transform: translate(1em)
}

40% {
transform: translate(-1em)
}

60% {
transform: translate(.5em)
}

80% {
transform: translate(-.5em)
}

to {
transform: translate(0)
}
}

@keyframes shake {
0% {
transform: translate(0)
}

20% {
transform: translate(1em)
}

40% {
transform: translate(-1em)
}

60% {
transform: translate(.5em)
}

80% {
transform: translate(-.5em)
}

to {
transform: translate(0)
}
}

.pulse {
-webkit-animation: pulse .15s ease;
animation: pulse .15s ease
}

@-webkit-keyframes pulse {
0% {
transform: scale(1)
}

50% {
transform: scale(.98)
}

to {
transform: scale(1)
}
}

@keyframes pulse {
0% {
transform: scale(1)
}

50% {
transform: scale(.98)
}

to {
transform: scale(1)
}
}

html {
font-size: 87.5%
}

.full-height,body,html {
height: 100%
}

body {
font-size: 14px;
overflow-y: scroll;
overflow-x: hidden;
letter-spacing: 0;
color: #444;
line-height: 1.7em;
min-width: 300px
}

body,h1,h2,h3,h4,h5,h6 {
font-weight: 400;
/* font-family: Inter,sans-serif */
}

h1 {
font-size: 1.75em;
line-height: 2.5rem
}

h1,h2 {
margin-top: 10px;
margin-bottom: 20px
}

h2 {
font-size: 1.5rem
}

h3 {
font-size: 1.3rem;
line-height: 2.25rem
}

h4 {
font-size: 1.25rem
}

h3,h4,h5,h6 {
margin-top: 5px
}

h3,h4,h5,h6,p {
margin-bottom: 20px
}

p {
margin-top: 10px
}

hr {
border-width: 0;
border-top: 1px solid #f1f1f1
}

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

::-webkit-input-placeholder {
text-transform: none;
color: #9b9b9b
}

:-moz-placeholder,::-moz-placeholder {
text-transform: none;
color: #9b9b9b
}

:-ms-input-placeholder {
text-transform: none;
color: #9b9b9b
}

.section {
margin-bottom: 60px
}

@media only screen and (max-width: 800px) {
body {
font-size:14px
}

.section {
margin-bottom: 30px
}
}

.animated,.su-input-group .su-input-label.su-visible,.su-input-group .su-message {
-webkit-animation-duration: .2s;
animation-duration: .2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}

.animated.infinite,.su-input-group .infinite.su-input-label.su-visible,.su-input-group .infinite.su-message {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}

.animated.hinge,.su-input-group .hinge.su-input-label.su-visible,.su-input-group .hinge.su-message {
-webkit-animation-duration: 2s;
animation-duration: 2s
}

.animated.bounceIn,.animated.bounceOut,.animated.flipInX,.animated.flipOutX,.animated.flipOutY,.su-input-group .bounceIn.su-input-label.su-visible,.su-input-group .bounceIn.su-message,.su-input-group .bounceOut.su-input-label.su-visible,.su-input-group .bounceOut.su-message,.su-input-group .flipInX.su-input-label.su-visible,.su-input-group .flipInX.su-message,.su-input-group .flipOutX.su-input-label.su-visible,.su-input-group .flipOutX.su-message,.su-input-group .flipOutY.su-input-label.su-visible,.su-input-group .flipOutY.su-message {
-webkit-animation-duration: .75s;
animation-duration: .75s
}

@-webkit-keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0
}

40% {
transform: perspective(400px) rotateX(-20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}

60% {
transform: perspective(400px) rotateX(10deg);
opacity: 1
}

80% {
transform: perspective(400px) rotateX(-5deg)
}

to {
transform: perspective(400px)
}
}

@keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0
}

40% {
transform: perspective(400px) rotateX(-20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}

60% {
transform: perspective(400px) rotateX(10deg);
opacity: 1
}

80% {
transform: perspective(400px) rotateX(-5deg)
}

to {
transform: perspective(400px)
}
}

.flipInX {
-webkit-backface-visibility: visible!important;
backface-visibility: visible!important;
-webkit-animation-name: flipInX;
animation-name: flipInX
}

@-webkit-keyframes slideInUp {
0% {
transform: translate3d(0,100%,0);
visibility: visible
}

to {
transform: translateZ(0)
}
}

@keyframes slideInUp {
0% {
transform: translate3d(0,100%,0);
visibility: visible
}

to {
transform: translateZ(0)
}
}

.slideInUp,.su-input-group .su-input-label.su-visible {
-webkit-animation-name: slideInUp;
animation-name: slideInUp
}

@-webkit-keyframes slideOutDown {
0% {
transform: translateZ(0)
}

to {
visibility: hidden;
transform: translate3d(0,100%,0)
}
}

@keyframes slideOutDown {
0% {
transform: translateZ(0)
}

to {
visibility: hidden;
transform: translate3d(0,100%,0)
}
}

.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown
}

@-webkit-keyframes slideInDown {
0% {
transform: translate3d(0,-100%,0);
visibility: visible
}

to {
transform: translateZ(0)
}
}

@keyframes slideInDown {
0% {
transform: translate3d(0,-100%,0);
visibility: visible
}

to {
transform: translateZ(0)
}
}

.slideInDown,.su-input-group .su-message {
-webkit-animation-name: slideInDown;
animation-name: slideInDown
}

.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn
}

@keyframes fadeOut {
0% {
opacity: 1
}

to {
opacity: 0
}
}

.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut
}

.su-input-group {
position: relative;
margin-top: 20px
}

.su-input-group input,.su-input-group textarea {
border: 1px solid #e3e3e3;
border-radius: 3px;
padding: 10px 15px;
color: #4a4a4a;
width: 100%;
box-sizing: border-box;
font-size: .875rem;
line-height: 1.25rem
}

.su-input-group input:disabled,.su-input-group textarea:disabled {
background-color: #fff;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0h1L0 6V5zm1 5v1H5z' fill='%23ddd' fill-rule='evenodd'/%3E%3C/svg%3E");
color: #666;
cursor: not-allowed;
border-color: transparent
}

.su-input-group input:focus,.su-input-group textarea:focus {
outline: 0;
border-color: #9b9b9b
}

.su-input-group input:focus+.icon,.su-input-group textarea:focus+.icon {
border-color: #9b9b9b
}

.su-input-group input::-moz-placeholder,.su-input-group textarea::-moz-placeholder {
color: #9b9b9b
}

.su-input-group input:-ms-input-placeholder,.su-input-group textarea:-ms-input-placeholder {
color: #9b9b9b
}

.su-input-group input::placeholder,.su-input-group textarea::placeholder {
color: #9b9b9b
}

.su-input-group input.show-spinner,.su-input-group textarea.show-spinner {
appearance: none;
-webkit-appearance: none;
-moz-appearance: textfield
}

.su-input-group .spinner-container {
position: relative
}

.su-input-group .spinner-container .spinner-down,.su-input-group .spinner-container .spinner-up {
position: absolute;
right: 5px;
color: #9b9b9b
}

.su-input-group .spinner-container .spinner-down:hover,.su-input-group .spinner-container .spinner-up:hover {
cursor: pointer
}

.su-input-group .spinner-container .spinner-up {
top: 0
}

.su-input-group .spinner-container .spinner-down {
bottom: 0
}

.su-input-group.disabled .su-input-label {
color: #ccc
}

.su-input-group .su-input-label {
display: block;
visibility: hidden;
z-index: 1;
position: absolute;
top: -10px;
background: #fff;
padding: 0 5px;
margin-left: 10px
}

.su-input-group .su-input-label.su-visible {
visibility: visible
}

.su-input-group.su-static-label .su-input-label {
visibility: visible;
-webkit-animation: none;
animation: none
}

.su-input-group.uppercase input,.su-input-group.uppercase select,.su-input-group.uppercase textarea {
text-transform: uppercase
}

.su-input-group.su-has-icon input {
padding-left: 55px
}

.su-input-group .su-message {
display: inline-block;
margin-top: 5px
}

.su-input-group .su-message:empty:before {
content: "​"
}

.su-input-group.su-error-state input,.su-input-group.su-error-state select,.su-input-group.su-error-state textarea {
border-color: #f6461a
}

.su-input-group.su-error-state .su-message {
color: #f6461a
}

.su-radio-group .su-radio-wrap {
display: inline-block;
margin-right: 20px
}

.su-radio-group .su-radio {
opacity: 0;
position: absolute
}

.su-radio-group .su-radio,.su-radio-group .su-radio-label {
display: inline-block;
vertical-align: middle;
cursor: pointer
}

.su-radio-group .su-radio-label {
position: relative
}

.su-radio-group .su-radio+.su-radio-label:before {
content: "";
background: #fff;
border: 2px solid #9b9b9b;
display: inline-block;
vertical-align: middle;
width: 3px;
height: 3px;
padding: 3px;
margin: -1px 5px 0 0;
text-align: center;
border-radius: 50%
}

.su-radio-group .su-radio:checked+.su-radio-label:before {
padding: 4px;
background: #0059c1;
box-shadow: inset 0 0 0 2px #fff;
border: 1px solid #0059c1
}

.su-radio-group .su-radio:focus+.su-radio-label {
outline: none
}

.su-radio-group .disabled .su-radio-label {
opacity: .5!important;
cursor: not-allowed
}

.su-checkbox-group {
box-sizing: border-box;
line-height: 1
}

.su-checkbox-group .su-checkbox {
opacity: 0;
position: absolute
}

.su-checkbox-group .su-checkbox:disabled+.su-checkbox-label {
opacity: .6;
cursor: not-allowed
}

.su-checkbox-group .su-checkbox:focus+.su-checkbox-label .su-checkbox-value {
outline: none;
border-bottom: 1px solid #e3e3e3
}

.su-checkbox-group .su-checkbox:checked+.su-checkbox-label .su-checkbox-tick {
top: 3px
}

.su-checkbox-group .su-checkbox-label {
cursor: pointer;
display: flex
}

.su-checkbox-group .su-checkbox-value {
vertical-align: middle;
margin-left: 10px;
border-bottom: 1px solid hsla(0,0%,100%,0)
}

.su-checkbox-group .su-checkbox-box {
display: inline-block;
width: 15px;
height: 15px;
min-width: 15px;
position: relative;
overflow: hidden;
cursor: pointer;
border: 1px solid #ccc;
box-sizing: border-box;
border-radius: 2px;
top: 3px
}

.su-checkbox-group .su-checkbox-tick {
top: 20px;
left: 2px;
right: 2px;
width: 8px;
height: 3px;
content: "";
position: absolute;
border-left: 2px solid;
border-bottom: 2px solid;
margin: auto;
transform: rotate(-45deg) translateZ(0);
transform-origin: center center;
transition: top .5s cubic-bezier(.19,1,.22,1);
border-color: #387ed1
}

.su-checkbox-group.indeterminate .su-checkbox-tick {
transform: none;
border-left: none
}

.su-switch-group .su-switch[type=checkbox] {
display: none
}

.su-switch-group .su-switch-label {
color: #9b9b9b
}

.su-switch-group .su-switch-control {
background: #9b9b9b;
position: relative;
text-indent: -9999px;
cursor: pointer;
display: inline-block;
vertical-align: middle;
width: 40px;
height: 20px;
border-radius: 100px
}

.su-switch-group .su-switch-control:after {
background: #fff;
content: "";
position: absolute;
top: 2.2px;
left: 3px;
width: 15px;
height: 15px;
transition: .2s;
border-radius: 90px
}

.su-switch-group .su-switch:checked+.su-switch-control {
background: #0059c1
}

.su-switch-group .su-switch:checked+.su-switch-control:after {
left: calc(100% - 3px);
transform: translateX(-100%)
}

.su-switch-group .su-switch:disabled+.su-switch-control {
cursor: not-allowed
}

.su-switch-group .su-switch-control:active:after {
width: 14px
}

.su-toast-groups .su-toast-group {
position: fixed;
z-index: 99999;
pointer-events: none
}

.su-toast-groups .su-toast-group div:first-child {
position: relative
}

.su-toast-groups a {
color: #0059c1;
text-decoration: none
}

.su-toast-groups a:hover {
opacity: .7
}

.su-toast-groups .su-toast-top-left {
top: 75px;
left: 20px
}

.su-toast-groups .su-toast-top-right {
top: 75px;
right: 20px
}

.su-toast-groups .su-toast-top-center {
top: 75px;
left: 50%;
transform: translate(-50%)
}

.su-toast-groups .su-toast-bottom-left {
bottom: 75px;
left: 20px
}

.su-toast-groups .su-toast-bottom-right {
bottom: 75px;
right: 20px
}

.su-toast-groups .su-toast-bottom-center {
bottom: 75px;
left: 50%;
transform: translate(-50%)
}

.su-toast-groups .su-toast-item {
display: flex;
box-sizing: border-box;
max-width: 400px;
min-width: 300px;
pointer-events: all;
position: relative;
margin: 0 auto 10px auto;
padding: 10px 30px 15px 15px;
transition: opacity .2s,transform .2s;
background: #fff;
box-shadow: 2px 2px 10px rgba(0,0,0,.1);
border-left: 20px solid #eee;
border-radius: 5px
}

.su-toast-groups .su-toast-item.info {
color: #387ed1;
border-left-color: #387ed1
}

.su-toast-groups .su-toast-item.success {
color: #4caf50;
border-left-color: #4caf50
}

.su-toast-groups .su-toast-item.warning {
color: #ffbf00;
border-left-color: #ffbf00
}

.su-toast-groups .su-toast-item.error {
color: #f6461a;
border-left-color: #f6461a
}

.su-toast-groups .su-toast-item .message {
margin: 5px 0;
color: #444
}

.su-toast-groups .toast-list-enter {
opacity: 0;
transform: translateY(-30px)
}

.su-toast-groups .toast-list-leave-active {
display: none
}

.su-toast-groups .su-toast-icon {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
font-size: 1.3rem;
line-height: 1.5
}

.su-toast-groups .su-toast-item.info .su-toast-icon {
color: #0089d0
}

.su-toast-groups .su-toast-item.success .su-toast-icon {
color: #4caf50
}

.su-toast-groups .su-toast-item.warning .su-toast-icon {
color: #ffbf00
}

.su-toast-groups .su-toast-item.error .su-toast-icon {
color: #f6461a
}

.su-toast-groups .close {
position: absolute;
right: 10px;
top: 12px;
cursor: pointer
}

.dot-spinner,.su-loader {
display: inline-block
}

.dot-spinner {
margin-left: 5px
}

.dot-spinner i {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #9b9b9b;
vertical-align: middle
}

button .dot-spinner {
margin: 0;
padding: 0
}

button .dot-spinner i {
background: #fff
}

.dot-spinner i:first-child {
transform: translate(-5px);
-webkit-animation: dot-spinner-ani2 .5s linear infinite;
animation: dot-spinner-ani2 .5s linear infinite;
opacity: 0
}

.dot-spinner i:nth-child(2),.dot-spinner i:nth-child(3) {
-webkit-animation: dot-spinner-ani3 .5s linear infinite;
animation: dot-spinner-ani3 .5s linear infinite
}

.dot-spinner i:last-child {
-webkit-animation: dot-spinner-ani1 .5s linear infinite;
animation: dot-spinner-ani1 .5s linear infinite
}

@-webkit-keyframes dot-spinner-ani1 {
to {
transform: translate(10px);
opacity: 0
}
}

@keyframes dot-spinner-ani1 {
to {
transform: translate(10px);
opacity: 0
}
}

@-webkit-keyframes dot-spinner-ani2 {
to {
transform: translate(5px);
opacity: 1
}
}

@keyframes dot-spinner-ani2 {
to {
transform: translate(5px);
opacity: 1
}
}

@-webkit-keyframes dot-spinner-ani3 {
to {
transform: translate(5px)
}
}

@keyframes dot-spinner-ani3 {
to {
transform: translate(5px)
}
}

.su-select {
position: relative
}

.su-select .icon {
position: absolute;
top: 5px;
right: 5px;
font-size: 10px;
pointer-events: none
}

.su-select select {
width: 100%;
padding: 3px 30px 3px 8px;
background: #fff;
border-radius: 2px;
border-color: #e3e3e3;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
outline: none
}

.su-select select:disabled {
background-color: #fff!important;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0h1L0 6V5zm1 5v1H5z' fill='%23ddd' fill-rule='evenodd'/%3E%3C/svg%3E")!important;
color: #666!important;
cursor: not-allowed;
border-color: transparent!important;
background-repeat: repeat!important;
background-size: inherit!important
}

button[data-balloon] {
overflow: visible
}

[data-balloon]:after,[data-balloon]:before,[data-balloon]:hover:before {
/* font-family: Inter,sans-serif; */
font-weight: 600
}

[data-balloon] {
position: relative;
opacity: 1!important
}

[data-balloon]:after {
background: rgba(17,17,17,.9);
border-radius: 4px;
color: #fff;
content: attr(data-balloon);
font-size: 12px;
padding: .5em 1em;
white-space: nowrap
}

[data-balloon]:after,[data-balloon]:before {
filter: alpha(opactiy=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
pointer-events: none;
transition: all .18s ease-out .18s;
transition-delay: 0ms;
position: absolute;
z-index: 10
}

[data-balloon]:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
content: ""
}

[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before {
filter: alpha(opactiy=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
pointer-events: none
}

/* [data-balloon].font-awesome:after {
font-family: FontAwesome */


[data-balloon][data-balloon-break]:after {
white-space: pre
}

[data-balloon][data-balloon-pos=up]:after {
bottom: 100%;
left: 50%;
margin-bottom: 11px;
transform: translate(-50%,10px);
transform-origin: top
}

[data-balloon][data-balloon-pos=up]:before {
bottom: 100%;
left: 50%;
margin-bottom: 5px;
transform: translate(-50%,10px);
transform-origin: top
}

[data-balloon][data-balloon-pos=up]:hover:after,[data-balloon][data-balloon-pos=up]:hover:before,[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up][data-balloon-visible]:before {
transform: translate(-50%)
}

[data-balloon][data-balloon-pos=down]:after {
left: 50%;
margin-top: 11px;
top: 100%;
transform: translate(-50%,-10px)
}

[data-balloon][data-balloon-pos=down]:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
left: 50%;
margin-top: 5px;
top: 100%;
transform: translate(-50%,-10px)
}

[data-balloon][data-balloon-pos=down]:hover:after,[data-balloon][data-balloon-pos=down]:hover:before,[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down][data-balloon-visible]:before {
transform: translate(-50%)
}

[data-balloon][data-balloon-pos=left]:after {
margin-right: 11px;
right: 100%;
top: 50%;
transform: translate(10px,-50%)
}

[data-balloon][data-balloon-pos=left]:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M0 33.342V1.338c0 6 12.002 11.627 12.002 16.002C12.002 21.715 0 27.406 0 33.342z'/%3E%3C/svg%3E");
background-size: 100% auto;
width: 6px;
height: 18px;
margin-right: 5px;
right: 100%;
top: 50%;
transform: translate(10px,-50%)
}

[data-balloon][data-balloon-pos=left]:hover:after,[data-balloon][data-balloon-pos=left]:hover:before,[data-balloon][data-balloon-pos=left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=left][data-balloon-visible]:before {
transform: translateY(-50%)
}

[data-balloon][data-balloon-pos=right]:after {
left: 100%;
margin-left: 11px;
top: 50%;
transform: translate(-10px,-50%)
}

[data-balloon][data-balloon-pos=right]:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M12 2.658v32.004c0-6-12.002-11.627-12.002-16.002C-.002 14.285 12 8.594 12 2.658z'/%3E%3C/svg%3E");
background-size: 100% auto;
width: 6px;
height: 18px;
left: 100%;
margin-left: 5px;
top: 50%;
transform: translate(-10px,-50%)
}

[data-balloon][data-balloon-pos=right]:hover:after,[data-balloon][data-balloon-pos=right]:hover:before,[data-balloon][data-balloon-pos=right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=right][data-balloon-visible]:before {
transform: translateY(-50%)
}

[data-balloon][data-balloon-length=small]:after {
white-space: normal;
width: 80px;
word-wrap: break-word
}

[data-balloon][data-balloon-length=medium]:after {
white-space: normal;
width: 150px;
word-wrap: break-word
}

[data-balloon][data-balloon-length=large]:after {
white-space: normal;
width: 260px;
word-wrap: break-word
}

[data-balloon][data-balloon-length=fit]:after {
white-space: normal;
width: 100%;
word-wrap: break-word
}

.el-loading-mask {
background-color: transparent
}

.loader-small .el-loading-spinner .circular {
height: 25px;
width: 25px
}

.loader-tiny .el-loading-spinner .circular {
height: 15px;
width: 15px
}

.loader-block .el-loading-mask,.loader-block .el-loading-spinner {
position: static
}

.loader-block .el-loading-spinner {
margin-top: 0;
top: 0
}

.loader-block.loader-inline .el-loading-mask,.loader-block.loader-inline .el-loading-spinner {
width: auto;
display: inline-block
}

.el-input input[type=email],.el-input input[type=number],.el-input input[type=password],.el-input input[type=search],.el-input input[type=tel],.el-input input[type=text],.el-input input[type=url] {
border: none;
border-bottom: 1px solid #e3e3e3;
border-radius: 0
}

.el-input.is-disabled .el-input__inner {
background-color: rgba(238,241,246,.3)!important
}

.el-select .el-input input[type=text] {
border: 1px solid #9b9b9b;
border-radius: 2px
}

.el-select .el-input .el-input__icon {
color: #9b9b9b
}

.el-notification {
left: 50%;
margin-left: -210px!important;
width: 420px!important;
padding: 10px 15px!important
}

.el-notification .el-notification__content {
text-align: left;
margin: 0
}

.el-notification .el-notification__icon {
width: auto;
height: auto
}

.el-notification .el-notification__group.is-with-icon {
margin-left: 25px
}

.el-notification .el-notification__title {
display: none
}

.el-notification .el-notification__closeBtn {
font-size: 10px;
top: 15px;
right: 15px
}

.btn,.btn-blue,.btn-green,.btn-grey,.btn-reset {
padding: 7px 14px;
border-radius: 2px;
border: 1px solid #9b9b9b;
margin: 0 3px
}

.btn {
color: #fff;
background: #9b9b9b;
border-color: #9b9b9b
}

.btn:hover {
opacity: .8
}

.btn:focus {
outline: none
}

.section button[disabled] {
background: #9b9b9b;
border: 1px solid #9b9b9b
}

.section button[disabled]:hover {
cursor: not-allowed;
opacity: 1!important
}

.btn-green {
color: #fff;
background: #4caf50;
border-color: #4caf50
}

.btn-green.btn-outline {
color: #4caf50;
background: #fff
}

.btn-green.btn-outline:hover {
opacity: 1;
color: #fff;
background: #4caf50
}

.btn-blue {
color: #fff;
background: #0059c1;
border-color: #0059c1
}

.btn-blue.btn-outline {
color: #0059c1;
background: #fff
}

.btn-blue.btn-outline:hover {
opacity: .9;
color: #fff;
background: #0059c1
}

.btn-grey,.btn-grey.no-hover:hover {
background: #9b9b9b;
color: #fff;
border-color: #9b9b9b
}

.btn-grey.btn-outline {
background: #fff;
color: #666;
border-color: #9b9b9b
}

.btn-grey.btn-outline:hover {
background: #9b9b9b;
color: #fff;
border-color: #9b9b9b
}

.btn-delete {
background: #b73737;
border: #b73737;
color: #fff
}

.btn-delete:hover {
opacity: .8
}

.btn-small {
padding: 1px 7px
}

.btn-text {
border: none;
background: transparent;
color: #9b9b9b
}

.btn-red {
border: none;
border-radius: 2px;
background: #f6461a;
color: #fff
}

:root {
--litepicker-is-today-color: #0059c1;
--litepicker-is-start-color-bg: #0059c1;
--litepicker-is-end-color-bg: #0059c1;
--litepicker-day-width: 40px
}

#outer_app {
background: linear-gradient(#fff,#f9fbff,#fff);
min-height: 100vh;
position: relative;
padding-bottom: 110px;
box-sizing: border-box
}

#outer_app .section {
margin: 0
}

#outer_app.account-closure {
margin-top: 100px
}

#outer_app.account-closure .header {
margin-bottom: 20px
}

#outer_app.account-closure .header img {
display: block;
margin: auto;
width: 100px
}

#outer_app.account-closure .page-content p {
margin-bottom: 25px
}

#outer_app.account-closure .page-content a {
color: #fff;
text-transform: uppercase;
text-decoration: none
}

#outer_app.account-closure .page-content a:hover {
color: #fff
}

#outer_app .align-middle {
display: flex;
align-items: center
}

#outer_app .console-landing {
padding: 0 20px
}

#outer_app .screenshot {
width: 100%;
border: 1px solid #eee;
border-radius: 8px;
position: relative;
left: -25px;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
box-shadow: 0 2px 15px #ddd
}

#outer_app .logo {
width: 150px;
margin: 5px 0 15px 0
}

#outer_app .zerodha-logo {
height: 11px
}

#outer_app .login-head {
margin-top: 0;
line-height: 1.6
}

#outer_app .text-light-grey {
color: #9b9b9b
}

#outer_app .btn-blue {
font-size: .875rem;
text-transform: uppercase;
font-weight: 600;
padding: 10px 25px;
margin-left: 0;
margin-top: 15px
}

#outer_app .btn-blue:hover {
opacity: .9
}

#outer_app .btn-blue:focus {
outline: 0
}

#outer_app a {
text-decoration: none;
color: #0059c1
}

#outer_app a:hover {
color: #444
}

#outer_app .console-down {
padding: 0 20px;
position: relative;
top: 15vh
}

#outer_app .console-down img {
width: auto;
height: 175px;
max-width: 100%
}

#outer_app .console-down h2 {
margin: 25px 0 20px 0
}

#outer_app .footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid #e1e1e1;
font-size: .75rem
}

#outer_app .footer .text-light-grey {
color: #9b9b9b
}

#outer_app .footer .footer-section {
max-width: 1200px;
margin: auto
}

#outer_app .footer .footer-section .footer-container {
padding: 25px 50px
}

#outer_app .footer .footer-section .footer-container p {
margin: 0;
margin-top: 5px;
font-size: .75rem;
line-height: 1.65
}

#outer_app .footer .footer-section .row .six:first-child {
display: flex;
align-items: center
}

#outer_app .footer .footer-section .row .six:first-child img {
margin-right: 5px;
height: 11px;
position: relative;
top: 1px
}

#outer_app .footer .footer-section .row .six:last-child a:hover {
color: #0059c1!important
}

@media only screen and (max-width: 550px) {
#outer_app .wrapper {
padding-bottom:250px
}
}

@media only screen and (max-width: 800px) {
#outer_app .columns {
width:100%!important;
margin-left: 0!important;
margin-bottom: 15px
}

#outer_app .align-middle {
display: block;
text-align: center
}

#outer_app .screenshot {
display: none
}
}

.su-toast-groups .su-toast-item .message {
line-height: 1.3!important
}

.app {
position: relative
}

.app .text-center {
text-align: center!important
}

.app .show {
display: block
}

.app .nomargin {
margin: 0!important
}

.app .hideElement {
display: none!important
}

.app .float-right {
float: right
}

.app .inline {
display: inline-block
}

.app a::-moz-focus-inner,.app a:focus {
border: 0;
outline: none
}

.app body.app-wrapper,.app html {
height: 100%
}

.app body.app-wrapper {
margin: 0;
overflow-y: scroll
}

.app.offline {
filter: grayscale(100%)
}

.app button:hover {
opacity: .9
}

.app .error-sign {
color: #f35631
}

.app .clickable:hover {
cursor: pointer
}

.app .notice-new {
color: #9b9b9b;
margin-top: 5px;
font-size: 12px
}

.app h1 .notice-new {
margin-left: 40px;
line-height: 1.4
}

.app h1 .notice-new.list ul {
padding-left: 20px
}

.app table .time {
color: #9b9b9b
}

.app table .blur {
opacity: .2
}

.app table .hide-row {
display: none
}

.app #status {
margin: 0
}

.app .mobile-agg {
padding: 25px 10px 15px 10px;
box-shadow: 0 1px 6px 0 rgba(0,0,0,.1);
background: #fff;
position: relative;
top: -107px;
box-sizing: border-box;
margin: auto
}

.app .mobile-agg label {
font-size: .875rem;
color: #9b9b9b
}

.app .mobile-agg label.big-label {
font-size: 1.45em!important
}

.app .mobile-agg h1 {
margin-top: 2px;
font-size: 1.45em
}

.app .mobile-agg .pos {
color: #10b983
}

.app .mobile-agg .neg {
color: #f35631
}

.app .mobile-agg .row {
display: flex;
align-items: center;
padding: 0 10px
}

.app .mobile-agg .row .columns {
margin-bottom: 0
}

.app .mobile-agg .row .columns p {
font-size: 14px
}

.app .mobile-agg .sub-agg .row {
margin-bottom: 5px;
padding: 1px 10px
}

.app .mobile-agg .sub-agg .row:nth-child(odd) {
background: #fafafb
}

.app .mobile-agg .sub-agg .row .four {
flex: 4
}

.app .mobile-agg .sub-agg .row .six {
flex: 6
}

.app .mobile-agg .sub-agg .row .eight {
flex: 8
}

.app .mobile-agg .sub-agg p {
margin: 0
}

.app .share-modal .modal-container {
width: 430px
}

.app .share-modal .modal-body {
margin: 0
}

.app .share-modal .modal-body h1 {
margin-top: 0
}

.app .share-modal #preview_share {
font-size: 20px;
top: 0
}

.app .share-modal #preview_share:hover {
cursor: pointer
}

.app .analyse-tags-link {
margin-bottom: 8px;
margin-top: 25px
}

.app .search-helper {
font-size: 18px;
line-height: 30px
}

.app .search-helper .search-tags {
color: #0059c1
}

.app .console-footer-note {
position: absolute;
bottom: 175px;
font-size: .875rem;
color: #9b9b9b
}

.app .shake-box {
-webkit-animation: shake .4s cubic-bezier(.36,.07,.19,.97) both;
animation: shake .4s cubic-bezier(.36,.07,.19,.97) both;
transform: translateZ(0);
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
perspective: 1000px
}

.app .multiselect,.app .multiselect__input,.app .multiselect__single {
font-size: 1rem
}

.app .multiselect {
max-height: 38px;
cursor: pointer
}

.app .multiselect__tags {
min-height: 38px;
border: none;
border-bottom: 1px solid #e1e1e1;
border-radius: 0
}

.app .multiselect__tag {
margin-bottom: 0;
background: #0059c1;
border-radius: 2px
}

.app .multiselect__tag-icon {
border-radius: 0;
transition: none
}

.app .multiselect__tag-icon:focus,.app .multiselect__tag-icon:hover {
background: #3f91f1
}

.app .multiselect__tag-icon:after {
color: #fff
}

.app .multiselect__content-wrapper {
z-index: 10
}

.app .multiselect--above .multiselect__content-wrapper {
border-top-left-radius: 2px;
border-top-right-radius: 2px;
border-top: 1px solid #e1e1e1
}

.app .multiselect__option--highlight {
background: #0059c1
}

.app .multiselect__option {
min-height: 38px
}

.app .multiselect__select:before {
top: 62%;
color: #444;
border-width: 6px 3px 0;
border-color: #444 transparent transparent
}

.app .multiselect__select {
width: 20px;
padding: 4px 5px
}

.app .console-note {
background: #fff8dc;
border: 1px solid #e0dcbf;
padding: 15px;
border-radius: 2px
}

.app .notice h3,.app .notice h4 {
margin-bottom: 10px
}

.app .notice ul {
margin: 0;
padding: 0;
list-style: none
}

.app .notice ul li {
margin-bottom: 5px
}

.app .notice ul li:last-child {
margin-bottom: 0
}

.app .text-box {
padding: 10px 20px;
margin-bottom: 30px;
border-radius: 2px;
color: rgba(0,0,0,.65);
border-left: 5px solid #f4f4f4
}

.app .text-box.green {
background-color: #ebf8f2;
border-color: #ebf8f2
}

.app .text-box.blue {
background-color: #ecf6fd;
border-color: #d2eafb
}

.app .text-box.red {
background-color: #fef0ef;
border-color: #fcdbd9
}

.app .text-box.yellow {
background-color: #fffaeb;
border-color: #fff3cf
}

.app .modal-mask {
background: hsla(0,0%,100%,.7);
z-index: 99999
}

.app .modal-container {
border-radius: 0;
box-shadow: 0 0 2px 0 rgba(0,0,0,.2),0 4px 10px 0 rgba(0,0,0,.05);
border: none
}

.app .modal-container .pending-tag {
margin-left: 10px;
top: 0
}

.app .modal-container .paginate-info {
top: 0
}

.app .modal-container div .breakdown-meta {
display: inline-block;
margin-left: 20px;
margin-right: 20px;
margin-top: 10px;
margin-bottom: 10px;
font-size: .9rem
}

.app .modal-container div .breakdown-meta:first-child {
margin-left: 0
}

.app .modal-container div .breakdown-meta span:first-child {
margin-right: 5px
}

.app .modal-container .tagger .custom-tag.pending .ti-icon-close {
display: none
}

.app .modal-container td.tagger {
padding-top: 7px!important
}

.app .close-modal {
position: absolute;
right: 15px;
top: 10px;
font-size: 1.3rem;
cursor: pointer
}

.app .close-modal img {
height: 20px
}

.app .table-section {
position: relative
}

.app .search-table {
display: inline-block;
position: absolute;
width: 95px;
margin-bottom: 3px;
margin-right: 5px;
right: 100px;
top: -5px;
transition: width .2s ease-in-out
}

.app .search-table input:focus {
outline: none
}

.app .search-table input:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #444
}

.app .search-table.expand {
width: 185px
}

.app .search-table .su-input-group {
margin-bottom: 3px
}

.app .search-table .icon-search {
position: absolute;
left: 5px;
top: 3px;
z-index: 1;
color: #9b9b9b
}

.app .search-table .clear {
display: none;
position: absolute;
z-index: 1;
background: #eee;
border-radius: 50%;
font-size: 8px;
width: 12px;
height: 12px;
top: 10px;
right: 10px;
pointer-events: all
}

.app .search-table .clear:before {
bottom: 6px;
left: .5px;
position: relative
}

.app .search-table .clear:hover {
cursor: pointer
}

.app .search-table label {
display: none
}

.app .search-table input {
min-height: 30px;
margin-bottom: 0;
box-sizing: border-box;
max-width: 100%!important;
padding-left: 30px!important;
padding-right: 20px!important;
font-size: 12px!important;
color: #9b9b9b;
border: 1px solid #e1e1e1
}

.app .filter-component .su-input-label {
z-index: 999;
line-height: 1!important;
top: -6px
}

.app .margin-label {
margin-top: 20px;
display: block;
margin-bottom: 10px
}

.app .filter-field label {
line-height: 1;
top: -6px
}

.app .filter-field .clear {
position: absolute;
border-radius: 50%;
font-size: 12px;
right: 0;
z-index: 1;
top: 10px;
right: 10px;
cursor: pointer;
background: #eee;
left: auto;
width: 22px;
height: 22px;
border-radius: 50%!important;
padding: 0!important
}

.app .filter-field .clear:before {
position: relative;
left: 2.5px;
top: 0
}

.app .table-border {
border-right: 1px solid #eee
}

.app .table-focus {
background: #fafafb
}

.app .header-hr {
margin-bottom: 20px
}

.app .fetch-data {
display: inline-block;
width: 60px;
margin-bottom: 3px;
padding-left: 10px
}

.app .refer-link-img {
height: 12px;
width: 16.5px;
position: relative;
top: 1px;
margin-left: 1px;
margin-right: 10px
}

.app .last-updated {
display: inline-block;
margin-top: 0;
margin-bottom: 3px
}

.app .last-updated img {
width: 12px;
position: relative;
top: 2px
}

.app .paginate-info {
padding-right: 5px;
padding-left: 10px;
display: inline-block;
margin-bottom: 3px;
margin-top: 0
}

.app .paginate-data {
height: 23px;
margin-top: 10px
}

.app .paginate-data .su-loader {
right: 15px;
position: relative
}

.app .table-download {
display: inline-block;
float: right;
padding-right: 10px;
color: #0059c1;
margin-bottom: 7px
}

.app .table-download:hover {
opacity: .8;
cursor: pointer
}

.app .table-sort {
display: inline-block;
float: right
}

.app .table-sort .sort-container {
padding: 20px;
box-sizing: border-box;
padding-bottom: 30px
}

.app .vue-tags-input {
max-width: 100%;
background: transparent
}

.app .vue-tags-input:not(.main-input) .ti-tags .ti-tag.system-tag .ti-actions {
display: none
}

.app .vue-tags-input .edit-tag-icon {
display: none;
font-size: 14px;
position: absolute;
left: -5px;
top: 0;
background: hsla(0,0%,100%,.6);
border-radius: 3px
}

.app .vue-tags-input .ti-content:hover .edit-tag-icon {
display: inline
}

.app .vue-tags-input .auto-label {
width: 60px;
border-radius: 3px;
float: right;
font-size: 12px;
text-transform: capitalize;
text-align: center
}

.app .vue-tags-input .auto-label.stock {
background: rgba(249,188,50,.2);
color: #e4a81f
}

.app .vue-tags-input .auto-label.type {
background: rgba(194,112,200,.2);
color: #c270c8
}

.app .vue-tags-input .auto-label.sector {
background: rgba(0,84,198,.2);
color: #0059c1
}

.app .vue-tags-input .auto-label.others {
background: rgba(74,74,74,.2);
color: #222
}

.app .vue-tags-input .auto-label.custom,.app .vue-tags-input .auto-label.system {
color: #008f7a;
background: rgba(0,143,122,.2)
}

.app .vue-tags-input .ti-selected-item {
background: #f4f4f4
}

.app .vue-tags-input .ti-selected-item .auto-name {
color: #444
}

.app .vue-tags-input .auto-name {
font-size: 12px
}

.app .vue-tags-input .ti-item>div {
padding: 6px 15px
}

.app .vue-tags-input .ti-new-tag-input-wrapper {
padding: 0;
margin: 0;
font-size: 1rem
}

.app .vue-tags-input .ti-input {
border: none;
padding: 0
}

.app .vue-tags-input .ti-autocomplete {
border: 1px solid #e1e1e1;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
max-height: 365px;
overflow: auto
}

.app .vue-tags-input .ti-tags {
border: 1px solid #e3e3e3;
border-radius: 3px;
padding-left: 5px;
background: #fff
}

.app .vue-tags-input .ti-tags .ti-tag {
font-size: .75rem;
margin: 8px 5px
}

.app .vue-tags-input .ti-tags .ti-tag.sector-tag {
background: rgba(0,84,198,.2);
color: #0059c1
}

.app .vue-tags-input .ti-tags .ti-tag.stock-tag {
background: rgba(255,196,61,.2);
color: #ca9a2d
}

.app .vue-tags-input .ti-tags .ti-tag.others-tag {
background: rgba(74,74,74,.2);
color: #222
}

.app .vue-tags-input .ti-tags .ti-tag.type-tag {
background: rgba(194,112,200,.2);
color: #c270c8
}

.app .vue-tags-input .ti-tags .ti-tag.system-tag {
color: #666;
background: hsla(0,0%,40%,.2);
padding-left: 8px;
padding-right: 8px
}

.app .vue-tags-input .ti-tags .ti-tag.p1 {
color: #039be5;
background: rgba(3,155,229,.1)
}

.app .vue-tags-input .ti-tags .ti-tag.p2 {
color: #0b8043;
background: rgba(11,128,67,.1)
}

.app .vue-tags-input .ti-tags .ti-tag.p3 {
color: #3f51b5;
background: rgba(63,81,181,.1)
}

.app .vue-tags-input .ti-tags .ti-tag.p4 {
color: #f4511e;
background: rgba(244,81,30,.1)
}

.app .vue-tags-input .ti-tags .ti-tag.p5 {
color: #795548;
background: rgba(121,85,72,.1)
}

.app .vue-tags-input .ti-tags .ti-tag.p6 {
color: #7cb342;
background: rgba(124,179,66,.1)
}

.app .vue-tags-input .ti-tags .ti-tag.p7 {
color: #f09300;
background: rgba(240,147,0,.1)
}

.app .vue-tags-input .ti-tags .ti-tag.p8 {
color: #8e24aa;
background: rgba(142,36,170,.1)
}

.app .vue-tags-input .ti-tags .ti-tag.p9 {
color: #616161;
background: rgba(97,97,97,.1)
}

.app .vue-tags-input .ti-tags .ti-tag.p10 {
color: #ffcd56;
background: rgba(255,205,86,.1)
}

.app .vue-tags-input input {
padding: 10px 15px;
line-height: 1.25rem
}

.app .pending-tag {
font-size: 11px;
color: #9b9b9b;
position: relative;
top: -2px;
display: inline-block;
line-height: 12px;
margin-left: 2px
}

.app .pending-tag:hover {
cursor: default
}

.app .pending-tag img {
height: 10px;
position: relative;
top: 1px
}

.app .new-tags .added-tags,.app .new-tags .pending-tags {
display: inline-block
}

.app .new-tags .added-tags:hover,.app .new-tags .pending-tags:hover {
cursor: default
}

.app .new-tags .added-tags:empty,.app .new-tags .pending-tags:empty {
display: none
}

.app .new-tags span:not(.icon) {
padding: 4px 10px;
display: inline-block;
margin-right: 5px;
border-radius: 2px;
background: rgba(68,68,68,.1);
line-height: 14px;
color: #444;
font-size: .9rem
}

.app #mainText {
margin-bottom: 0
}

.app .footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid #e1e1e1;
font-size: .75rem
}

.app .footer .footer-section {
max-width: 1200px;
margin: auto
}

.app .footer .footer-section .footer-container {
padding: 25px 50px
}

.app .footer .footer-section .footer-container p {
margin: 0;
margin-top: 5px;
font-size: .75rem;
line-height: 1.65
}

.app .footer .footer-section .row .six:first-child {
display: flex;
align-items: center
}

.app .footer .footer-section .row .six:first-child img {
margin-right: 5px;
height: 11px;
position: relative;
top: 1px
}

.app .footer .footer-section .row .six:last-child a:hover {
color: #0059c1!important
}

.app .footer-zerodha-capital {
position: absolute;
bottom: 0;
left: 0;
right: 0;
border-top: 1px solid #e1e1e1
}

.app .footer-zerodha-capital .footer-section {
max-width: 1200px;
margin: auto
}

.app .footer-zerodha-capital .footer-section .footer-container {
padding: 25px 50px
}

.app .footer-zerodha-capital .footer-section .footer-container .row ul.list-style {
list-style-type: none;
margin: 0;
padding: 0
}

.app .footer-zerodha-capital .footer-section .footer-container .row ul.list-style li {
margin-bottom: 5px;
line-height: 2
}

.app .footer-zerodha-capital .footer-section .footer-container .row ul.list-style li a {
color: #666
}

.app .footer-zerodha-capital .footer-section .footer-container .row ul.list-style li a:hover {
color: #0059c1
}

.app .footer-zerodha-capital .footer-section .footer-container p {
margin-top: 0;
margin-bottom: 0
}

.app .wrapper {
padding: 0;
width: 100%;
margin: 0 auto;
max-width: 1200px
}

.app .hidden-content {
display: none
}

.app hr.no-bottom {
margin-bottom: 0
}

.app span.down,.app span.up {
font-size: 1.25rem!important;
position: relative;
bottom: 4px;
right: 4px
}

.app .mx-calendar-content .cell.actived {
background-color: #0059c1
}

.app .mx-calendar {
background: #fff
}

.app .mx-calendar .mx-calendar-panel-date .text-center {
background: #0059c1
}

.app .vdp-datepicker__calendar {
border: 1px solid #eee;
box-shadow: 0 1px 8px 0 rgba(0,0,0,.1);
top: 36px
}

.app .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).day:hover,.app .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).month:hover,.app .vdp-datepicker__calendar .cell:not(.blank):not(.disabled).year:hover {
background: #4184f3;
color: #fff;
border: 1px solid transparent
}

.app .vdp-datepicker__calendar header .next:not(.disabled):hover,.app .vdp-datepicker__calendar header .prev:not(.disabled):hover,.app .vdp-datepicker__calendar header .up:not(.disabled):hover {
color: #fff;
background: #4184f3
}

.app .vdp-datepicker__calendar .cell.selected,.app .vdp-datepicker__calendar .cell.selected.highlighted,.app .vdp-datepicker__calendar .cell.selected:hover {
background: #4184f3;
color: #fff;
border: 1px solid transparent
}

.app .vdp-datepicker__calendar header .prev:hover:after {
border-right: 10px solid #fff
}

.app .vdp-datepicker__calendar header .next:hover:after {
border-left: 10px solid #fff
}

.app .mx-shortcuts-wrapper .mx-shortcuts:after {
content: ""
}

.app .mx-shortcuts-wrapper .mx-shortcuts:first-child:after,.app .mx-shortcuts-wrapper .mx-shortcuts:nth-child(2):after,.app .mx-shortcuts-wrapper .mx-shortcuts:nth-child(3):after {
content: "|";
margin: 0 10px;
color: #48576a
}

.app .mx-shortcuts-wrapper button {
padding-right: 0!important
}

.app .error-comp .state-process {
margin-top: 5vh
}

.app .state-process {
margin: auto;
text-align: center;
margin-top: 5vh
}

.app .middle-align {
vertical-align: middle
}

.app .scroll-discrepant {
color: #f6461a
}

.app .container {
display: flex;
min-height: 100vh;
padding-top: 60px;
background: #fff
}

.app .container .container-left {
flex: 0 0 400px;
box-shadow: 0 0 5px 0 rgba(0,0,0,.1)
}

.app .container .container-left .marketwatch-wrap {
position: fixed;
height: 100%;
width: 400px;
z-index: 1;
overflow-y: auto
}

.app .container .container-right {
flex: 1 1;
max-width: 1200px
}

.app .header {
height: 60px;
min-width: 320px;
box-sizing: border-box;
z-index: 9999;
width: 100%;
position: fixed;
background-color: #fff;
box-shadow: 0 1px 6px 0 rgba(0,0,0,.1)
}

.app .header .wrapper {
display: flex;
box-shadow: none
}

.app .header .header-left {
flex: 0 0 401px
}

.app .header .header-left .pinned-instruments {
display: flex;
align-items: center;
font-weight: 600;
padding: 0 20px;
height: 60px;
border-right: 1px solid #eee
}

.app .header .header-left .pinned-instruments .instrument-widget {
flex: 1;
display: inline-block;
align-items: center
}

.app .header .header-left .pinned-instruments .instrument-widget .tradingsymbol {
margin-right: 5px
}

.app .header .header-left .pinned-instruments .instrument-widget .tradingsymbol.link-chart {
cursor: pointer
}

.app .header .header-left .pinned-instruments .instrument-widget .last-price {
margin-right: 5px
}

.app .header .header-left .pinned-instruments .instrument-widget:last-child {
margin-right: 0
}

.app .header .header-left .pinned-instruments .instrument-widget .up {
color: #4caf50
}

.app .header .header-left .pinned-instruments .instrument-widget .down {
color: #df514c
}

.app .header .header-left .pinned-instruments .instrument-widget .wrap {
display: inline-block
}

.app .header .header-right {
flex: 1 1;
display: flex;
position: relative
}

.app .header .app-nav a,.app .header .right-nav a {
margin: 0 10px;
padding: 0 5px;
font-size: .875rem;
font-weight: 400;
line-height: 25px;
display: inline-block;
text-decoration: none;
color: #4a4a4a;
height: 100%;
display: inline-flex;
align-items: center;
justify-content: center
}

.app .header .app-nav a.router-link-active,.app .header .app-nav a:hover,.app .header .right-nav a.router-link-active,.app .header .right-nav a:hover {
cursor: pointer;
color: #0059c1
}

.app .header .app-nav a.router-link-active,.app .header .right-nav a.router-link-active {
border-bottom: 2px solid #0059c1;
height: 56px
}

.app .header .app-nav a.router-link-active.no-border,.app .header .right-nav a.router-link-active.no-border {
border-bottom: none
}

.app .header .dropdown-nav li a {
margin: 0
}

.app .header .dropdown-nav a.router-link-active {
height: auto!important;
border-bottom: none!important
}

.app .header .logo {
flex: 0;
line-height: 1;
margin: 0 20px 0 50px;
display: inline-block;
height: 60px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #444;
text-decoration: none
}

.app .header .logo img {
width: 85px;
height: auto
}

.app .header .logo img.greyscale {
filter: grayscale(100%)
}

.app .header .offline-indicator {
position: absolute;
top: 60px;
background: #f4f4f4;
width: 100%;
padding: 5px 50px;
box-sizing: border-box;
opacity: .8;
font-size: .75rem
}

.app .header .app-nav {
flex: 8;
flex-basis: auto;
min-width: 480px;
text-align: right
}

.app .header .app-nav .dropdown-label {
position: relative;
outline: none
}

.app .header .app-nav .dropdown-nav {
top: calc(100% + 3px);
right: 0;
z-index: 9999;
cursor: pointer;
text-align: left;
min-width: 120px;
position: absolute;
border-style: solid;
border-width: 0 1px 1px 1px;
border-color: #eee;
background: #fff;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.1)
}

.app .header .app-nav .dropdown-nav hr {
margin: 0
}

.app .header .app-nav .dropdown-nav .dropdown-nav-header {
padding: 10px 15px
}

.app .header .app-nav .dropdown-nav .dropdown-nav-header a {
display: block
}

.app .header .app-nav .dropdown-nav .dropdown-nav-header a.router-link-active,.app .header .app-nav .dropdown-nav .dropdown-nav-header a:hover {
color: #444
}

.app .header .app-nav .dropdown-nav .dropdown-nav-header h4 {
margin: 0;
max-width: 170px
}

.app .header .app-nav .dropdown-nav .dropdown-nav-header .email {
color: #9b9b9b
}

.app .header .app-nav .dropdown-nav li a {
display: inline-block;
vertical-align: middle;
line-height: 35px;
padding: 5px 10px;
color: #4a4a4a;
width: 100%;
box-sizing: border-box
}

.app .header .app-nav .dropdown-nav li:hover {
background: #fafafb
}

.app .header .portfolio-dropdown {
right: 385px!important
}

.app .header .portfolio-dropdown .triangle {
width: 30px;
height: 30px;
position: absolute;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0,0,0,.5);
left: calc(50% - 17px);
top: -30px
}

.app .header .portfolio-dropdown .triangle:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(-45deg);
top: 20px;
left: 4px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #eee
}

.app .header .reports-dropdown {
right: 302px!important
}

.app .header .reports-dropdown .triangle {
width: 30px;
height: 30px;
position: absolute;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0,0,0,.5);
left: calc(50% - 17px);
top: -30px
}

.app .header .reports-dropdown .triangle:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(-45deg);
top: 20px;
left: 4px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #eee
}

.app .header .funds-dropdown {
right: 229px!important
}

.app .header .funds-dropdown .triangle {
width: 30px;
height: 30px;
position: absolute;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0,0,0,.5);
left: calc(50% - 17px);
top: -30px
}

.app .header .funds-dropdown .triangle:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(-45deg);
top: 20px;
left: 4px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #eee
}

.app .header .right-nav {
flex: 1;
display: flex;
margin-right: 50px
}

.app .header .right-nav .dropdown-nav-list li a img,.app .header .right-nav .dropdown-nav-list li a span.icon {
margin-right: 5px
}

.app .header .right-nav .notifications-menu {
flex: 1;
position: relative;
margin: 15px 0
}

.app .header .right-nav .notifications-menu .icon-notification {
font-size: 1rem
}

.app .header .right-nav .notifications-menu .notification-count {
position: absolute;
top: 0;
right: 0;
line-height: 1
}

.app .header .right-nav .notifications-menu .notification-count .dot {
height: 5px;
width: 5px;
border-radius: 50%;
display: inline-block;
background: #f6461a
}

.app .header .right-nav .notifications-menu .notification-count .count {
font-size: 8px;
color: #aaa
}

.app .header .right-nav .notifications-menu.open a {
color: #f6461a
}

.app .header .right-nav .user-nav {
flex: 2;
flex-basis: auto;
min-width: 90px;
text-align: right;
margin: 15px 10px;
padding-left: 10px;
border-left: 1px solid #e3e3e3
}

.app .header .right-nav .user-nav a {
padding: 0;
outline: none
}

.app .header .right-nav .user-nav a div {
display: inline-block
}

.app .header .right-nav .user-nav a .avatar {
margin-right: 10px
}

.app .header .right-nav .user-nav .dropdown-nav {
top: calc(100% + 18px);
right: -5px;
z-index: 9999;
cursor: pointer;
text-align: left;
min-width: 200px;
position: absolute;
border-style: solid;
border-width: 0 1px 1px 1px;
border-color: #eee;
background: #fff;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.1)
}

.app .header .right-nav .user-nav .dropdown-nav .triangle {
width: 30px;
height: 30px;
position: absolute;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0,0,0,.5);
left: calc(100% - 67px);
top: -30px
}

.app .header .right-nav .user-nav .dropdown-nav .triangle:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(-45deg);
top: 20px;
left: 4px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #eee
}

.app .header .right-nav .user-nav .dropdown-nav hr {
margin: 0
}

.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header {
padding: 10px 15px
}

.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header a {
display: block;
margin: 0
}

.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header a.router-link-active,.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header a:hover {
color: #444
}

.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header h4 {
margin: 0
}

.app .header .right-nav .user-nav .dropdown-nav .dropdown-nav-header .email {
color: #9b9b9b
}

.app .header .right-nav .user-nav .dropdown-nav li a {
display: inline-block;
vertical-align: middle;
line-height: 35px;
padding: 5px 10px;
color: #4a4a4a;
width: 100%;
box-sizing: border-box
}

.app .header .right-nav .user-nav .dropdown-nav li:hover {
background: #fafafb
}

.app .page-content {
position: relative;
box-sizing: border-box;
padding-top: 0px;
background: #fff;
min-height: 100vh;
padding-bottom: 150px
}

.app .page-content.widget {
padding: 0!important
}

.app .page-content.chart {
padding: 2px;
margin: 0
}

.app .page-title.big {
font-size: 1.5rem
}

.app .su-loader.dim {
border-top-color: #9b9b9b
}

.app section {
margin-bottom: 60px
}

.app .vddl-draggable,.app .vddl-list {
position: relative
}

.app .vddl-draggable {
cursor: move
}

.app .page-container.bounce {
-webkit-animation: bound .3s cubic-bezier(.3,2.4,.85,2.5);
animation: bound .3s cubic-bezier(.3,2.4,.85,2.5)
}

.app .hopscotch-bubble {
position: fixed!important
}

@-webkit-keyframes bound {
0%,to {
margin-top: 0
}

75% {
margin-top: 5px
}
}

@keyframes bound {
0%,to {
margin-top: 0
}

75% {
margin-top: 5px
}
}

.app .pos {
color: #10b983
}

.app .neg {
color: #f35631
}

.app .custom-file-input input[type=file] {
position: absolute;
top: 0;
left: 0;
z-index: 1;
opacity: 0
}

.app .neg span:not(.inherit),.app .pos span:not(.inherit) {
font-size: .75rem
}

.app .neg.icon,.app .pos.icon {
font-size: 1.5rem!important;
position: relative;
top: 2px
}

.app .neg.icon:before,.app .pos.icon:before {
margin: 0
}

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

.app input[type=number] {
-moz-appearance: textfield
}

.app label {
font-size: 1rem;
line-height: 1.6rem;
color: #666
}

.app label.file-input-label {
top: 7px;
position: relative;
padding-left: 10px;
padding-right: 10px;
background: #fff;
display: inline-block;
margin-left: 10px;
z-index: 1
}

.app .su-input-group label {
font-size: .85rem
}

.app select {
width: 100%;
background: #fff;
font-size: 14px;
padding: 7px 15px;
padding-right: 20px;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: 1px solid #e1e1e1;
color: #666;
border-radius: 3px;
font-size: .875rem;
background: url(/static/images/arrow-down.svg);
background-repeat: no-repeat;
background-position: 99% 10px;
background-size: 20px;
background-color: #fff
}

.app select:focus {
outline: 0;
border-color: #9b9b9b
}

.app .su-input-label {
padding-left: 10px
}

.app a {
color: #0059c1;
text-decoration: none
}

.app a:hover {
opacity: .8
}

.app a.btn.btn-blue {
color: #fff!important
}

.app .download-link {
float: right;
font-size: 1.14rem;
font-weight: 600;
position: relative;
top: 2px;
color: #0059c1
}

.app .download-link:hover {
opacity: .9;
cursor: pointer
}

.app .download-link img {
position: relative;
top: 2px;
width: 20px
}

.app .marketwatch-sidebar .instruments .instrument .price,.app .marketwatch-sidebar .instruments .instrument .price span,.app .text-right,.app .textright,.marketwatch-sidebar .instruments .instrument .app .price,.marketwatch-sidebar .instruments .instrument .price .app span {
text-align: right
}

.app .text-left,.app .textleft {
text-align: left
}

.app .text-bold {
font-weight: 600
}

.app .text-grey {
color: #666
}

.app .text-light-grey {
color: #9b9b9b
}

.app .grey-back {
background: #fafafb
}

.app .rem-padding {
padding: 0!important
}

.app .pagination {
list-style-type: none;
padding: 0;
text-align: center;
margin-top: 15px
}

.app .pagination li {
display: inline-block;
margin-right: 12px
}

.app .pagination li:first-child a {
position: relative;
bottom: 5px;
font-size: 0;
background: url(/static/images/page-prev.png);
background-repeat: no-repeat;
background-position: 50%
}

.app .pagination li:last-child a {
position: relative;
bottom: 5px;
font-size: 0;
background: url(/static/images/page-next.png);
background-repeat: no-repeat;
background-position: 50%
}

.app .pagination li a {
display: block;
width: 30px;
height: 30px;
border-radius: 50%;
line-height: 30px;
border: 1px solid transparent
}

.app .pagination li a:hover {
opacity: .9
}

.app .pagination li a:focus {
outline: 0
}

.app .pagination li:hover a {
border: 1px solid rgba(65,132,243,.24)
}

.app .pagination li.disabled a {
cursor: not-allowed
}

.app .pagination li.active a {
background: rgba(65,132,243,.24);
border: none
}

.app .page-container {
padding: 40px 50px;
padding-top: 20px
}

.app .page-container .table-container {
width: 100%;
max-width: 100%;
overflow-x: auto
}

.app .page-container .section {
max-width: 100%
}

.app .page-container .section button {
font-size: 13px;
font-weight: 400;
height: 38px;
padding-left: 15px;
padding-right: 15px;
line-height: 1
}

.app .page-container .section button:focus {
outline: 0;
opacity: .8
}

.app .page-container .section .cards hr {
margin: 0;
width: 60%;
margin: auto
}

.app .page-container .section .card {
padding: 15px 0;
border-top: 1px solid #eee
}

.app .page-container .section .card .separator {
color: #666
}

.app .page-container .section .card .symbol {
font-size: 16px
}

.app .page-container .section .card.no-border {
border: none!important
}

.app .page-container .section .card .row {
display: flex
}

.app .page-container .section .card .row .columns {
margin-bottom: 0!important
}

.app .page-container .section .card .row .three {
flex: 3
}

.app .page-container .section .card .row .four {
flex: 4
}

.app .page-container .section .card .row .six {
flex: 6
}

.app .page-container .section .card .row .eight {
flex: 8
}

.app .page-container .section .card .row .nine {
flex: 9
}

.app .page-container .section .card .inline {
display: inline-block;
margin-right: 5px
}

.app .page-container .section .card .inline.text-bold {
color: #666
}

.app .page-container .section .card .status-flag img {
height: 12px;
position: relative;
top: 1px
}

.app .page-container .section .card label {
margin-right: 3px;
color: #9b9b9b;
display: inline-block;
line-height: 1.1
}

.app .page-container .section .card.last {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee
}

.app .page-container .section .card .top {
margin-bottom: 5px;
display: flex
}

.app .page-container .section .card .top .top-left {
flex: 9
}

.app .page-container .section .card .top .top-left .failure img {
height: 14px;
position: relative;
top: 2px;
margin-left: 5px
}

.app .page-container .section .card .top .top-right {
flex: 6;
text-align: right
}

.app .page-container .section .card .middle {
margin-top: 5px;
margin-bottom: 5px;
display: flex
}

.app .page-container .section .card .middle .middle-left {
flex: 8
}

.app .page-container .section .card .middle .middle-right {
flex: 6;
text-align: right
}

.app .page-container .section .card .bottom {
display: flex
}

.app .page-container .section .card .bottom .bottom-left {
flex: 6
}

.app .page-container .section .card .bottom .bottom-right {
flex: 6;
text-align: right
}

.app .page-container .section .mx-calendar-panel-date div:first-child.text-center,.app .page-container .section .mx-calendar-panel-month div:first-child.text-center,.app .page-container .section .mx-calendar-panel-year div:first-child.text-center {
background-color: #0059c1;
color: #fff;
line-height: 1.8;
border-radius: 2px
}

@media only screen and (min-width: 800px) {
.app .page-container .section .mx-datepicker.mx-datepicker-range .mx-datepicker-popup,.app .page-container .section .mx-datepicker.mx-datepicker-range .mx-datepicker-popup .mx-range-wrapper {
width:550px!important
}

.app .page-container .section .mx-datepicker.mx-datepicker-range .mx-datepicker-popup .mx-shortcuts-wrapper button {
margin-right: 0!important;
width: auto!important;
padding-left: 0
}

.app .page-container .section .mx-datepicker.mx-datepicker-range .mx-datepicker-popup .mx-shortcuts-wrapper .mx-apply {
display: none
}

.app .page-container .section .mx-datepicker.mx-datepicker-range .mx-range-wrapper .mx-calendar-content {
height: 290px!important;
width: 250px!important
}

.app .page-container .section .mx-datepicker.mx-datepicker-range .mx-range-wrapper .mx-calendar {
width: 50%!important
}

.app .page-container .section .mx-datepicker.mx-datepicker-range table td,.app .page-container .section .mx-datepicker.mx-datepicker-range table th {
padding: 12px 5px
}
}

@media only screen and (max-width: 800px) {
.app .page-container .section .mx-datepicker.mx-datepicker-range {
position:static!important
}

.app .page-container .section .mx-datepicker.mx-datepicker-range .mx-calendar-content,.app .page-container .section .mx-datepicker.mx-datepicker-range .mx-calendar.mx-calendar-panel-month,.app .page-container .section .mx-datepicker.mx-datepicker-range .mx-calendar.mx-calendar-panel-year {
width: 100%
}

.app .page-container .section .mx-range-wrapper .mx-calendar-panel-date div:first-child {
background-color: #0059c1;
color: #fff;
line-height: 1.8
}

.app .page-container .section .mx-datepicker-range .mx-datepicker-popup {
width: 100%!important;
left: 0!important;
top: 0!important;
position: absolute
}

.app .page-container .section .mx-datepicker-range .mx-datepicker-popup .mx-shortcuts-wrapper .mx-shortcuts {
padding-right: 0!important;
padding-left: 0!important;
margin-right: 0!important;
width: auto!important
}

.app .page-container .section .mx-datepicker-range .mx-datepicker-popup .mx-shortcuts-wrapper .mx-apply {
font-size: 13px;
padding: 7px 15px!important;
width: 65px!important;
height: 30px!important;
margin-left: 20%!important;
position: absolute;
top: 1%;
right: 4%;
background-color: transparent;
outline: none;
border: none;
border-radius: 3px;
color: #0059c1;
border: 1px solid #0059c1
}

.app .page-container .section .mx-datepicker-range .mx-datepicker-popup .mx-shortcuts-wrapper .mx-shortcuts:after {
margin: 0 4px!important
}

.app .page-container .section .mx-datepicker-range .mx-datepicker-popup .mx-range-wrapper {
width: 100%!important
}

.app .page-container .section .mx-datepicker-range .mx-datepicker-popup .mx-range-wrapper .mx-calendar-panel-date {
height: auto
}

.app .page-container .section .mx-datepicker-range table td,.app .page-container .section .mx-datepicker-range table th {
padding: 12px 5px
}

.app .page-container .section .mx-calendar-panel-date {
float: none!important
}

.app .page-container .section .mx-calendar-panel-date .mx-calendar-content {
width: 100%
}
}

.app .page-container .section .mx-calendar,.app .page-container .section .mx-datepicker {
color: #444;
/* font-family: Inter,sans-serif; */
max-width: 100%
}

.app .page-container .section .mx-calendar-icon {
display: none
}

.app .page-container .section .mx-input {
height: auto;
box-shadow: none;
border: 1px solid #e3e3e3;
color: #444
}

.app .page-container .section .mx-panel td,.app .page-container .section .mx-panel th {
padding: 0!important
}

.app .page-container .section .mx-datepicker-popup {
width: 250px;
margin-top: -2px
}

.app .page-container .section .mx-calendar-month>a.current,.app .page-container .section .mx-calendar-month>a:hover,.app .page-container .section .mx-calendar-table td.current,.app .page-container .section .mx-calendar-table td.inrange,.app .page-container .section .mx-calendar-table td:hover,.app .page-container .section .mx-calendar-year>a.current,.app .page-container .section .mx-calendar-year>a:hover {
color: #fff;
background-color: #4184f3
}

.app .page-container .section .mx-calendar a {
color: #444
}

.app .page-container .section .mx-calendar-header a:hover {
color: #4184f3
}

.app .page-container .section .mx-calendar-month>a.disabled:hover,.app .page-container .section .mx-calendar-year>a.disabled:hover {
color: #ccc;
background-color: #f3f3f3
}

.app .page-container .section .mx-calendar-month a.disabled,.app .page-container .section .mx-calendar-table td.disabled,.app .page-container .section .mx-calendar-year a.disabled,.app .page-container .section .mx-time-item.disabled {
color: #ccc!important;
background-color: #f3f3f3!important
}

.app .page-container .section .input-container,.app .page-container .section .inputcontainer {
margin-top: 20px
}

.app .page-container .section .input-container .columns.lockContainer,.app .page-container .section .inputcontainer .columns.lockContainer {
position: relative
}

.app .page-container .section .input-container .mobile-context-menu-list,.app .page-container .section .inputcontainer .mobile-context-menu-list {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
padding-bottom: 20px
}

.app .page-container .section .input-container .mobile-context-menu-list .row,.app .page-container .section .inputcontainer .mobile-context-menu-list .row {
display: flex;
padding: 0 20px
}

.app .page-container .section .input-container .mobile-context-menu-list .row .six.columns,.app .page-container .section .inputcontainer .mobile-context-menu-list .row .six.columns {
width: 45%!important
}

.app .page-container .section .input-container .mobile-context-menu-list .row .six.columns:last-child,.app .page-container .section .inputcontainer .mobile-context-menu-list .row .six.columns:last-child {
margin-left: 10%!important
}

.app .page-container .section .input-container .mobile-context-menu-list #end_date_label.focus,.app .page-container .section .input-container .mobile-context-menu-list #start_date_label.focus,.app .page-container .section .inputcontainer .mobile-context-menu-list #end_date_label.focus,.app .page-container .section .inputcontainer .mobile-context-menu-list #start_date_label.focus {
border-color: #0059c1;
border-width: 2px
}

.app .page-container .section .input-container select:-moz-focusring,.app .page-container .section .inputcontainer select:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #444
}

.app .page-container .section .input-container button.btn-blue,.app .page-container .section .inputcontainer button.btn-blue {
position: relative;
bottom: 3px;
margin-right: 10px;
width: 100%
}

.app .page-container .section .input-container button.btn-blue .su-loader,.app .page-container .section .inputcontainer button.btn-blue .su-loader {
margin-left: 0!important
}

.app .page-container .section .input-container .filter-box,.app .page-container .section .inputcontainer .filter-box {
position: relative
}

.app .page-container .section .input-container .filter-box.all-tags-added-container .filter-link:hover,.app .page-container .section .inputcontainer .filter-box.all-tags-added-container .filter-link:hover {
cursor: default;
pointer-events: none
}

.app .page-container .section .input-container .filter-box.all-tags-added-container .filter-link .clear:hover,.app .page-container .section .inputcontainer .filter-box.all-tags-added-container .filter-link .clear:hover {
cursor: pointer!important;
pointer-events: all!important;
z-index: 1
}

.app .page-container .section .input-container .filter-box.tagger .filter-link,.app .page-container .section .inputcontainer .filter-box.tagger .filter-link {
padding-right: 30px;
border: 1px solid #e3e3e3;
border-radius: 3px
}

.app .page-container .section .input-container .filter-box.tagger .filter-link .ti-tags,.app .page-container .section .inputcontainer .filter-box.tagger .filter-link .ti-tags {
border: none
}

.app .page-container .section .input-container .filter-box.tagger .filter-link .clear,.app .page-container .section .inputcontainer .filter-box.tagger .filter-link .clear {
top: 7px;
right: 5px
}

.app .page-container .section .input-container .filter-link,.app .page-container .section .inputcontainer .filter-link {
position: relative;
display: block;
border: none;
box-shadow: none;
max-width: 100%;
padding-right: 0;
border-radius: 0;
color: #444;
min-height: 38px;
box-sizing: border-box;
z-index: 2
}

.app .page-container .section .input-container .filter-link .filter-count,.app .page-container .section .inputcontainer .filter-link .filter-count {
width: 18px;
height: 18px;
font-size: 10px;
color: #fff;
background: #0059c1;
border-radius: 50%;
display: inline-block;
text-align: center;
line-height: 1.8;
position: absolute;
right: 5px;
font-weight: 600;
top: 8px
}

.app .page-container .section .input-container .filter-option-container .filter-option,.app .page-container .section .inputcontainer .filter-option-container .filter-option {
position: absolute;
left: 0;
right: 0;
top: 1px;
background: #fff;
border: 1px solid #e1e1e1;
border-radius: 2px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
z-index: 1;
transition: all .15s ease;
transform: rotateX(-15deg);
transform-origin: 0 0;
opacity: 0;
visibility: hidden
}

.app .page-container .section .input-container .filter-option-container .filter-option.show,.app .page-container .section .inputcontainer .filter-option-container .filter-option.show {
opacity: 1;
transform: rotateX(0deg);
display: block;
visibility: visible
}

.app .page-container .section .input-container .filter-option-container .filter-option ::-webkit-scrollbar,.app .page-container .section .inputcontainer .filter-option-container .filter-option ::-webkit-scrollbar {
width: 6px
}

.app .page-container .section .input-container .filter-option-container .filter-option ::-webkit-scrollbar-track,.app .page-container .section .inputcontainer .filter-option-container .filter-option ::-webkit-scrollbar-track {
background: #fff
}

.app .page-container .section .input-container .filter-option-container .filter-option ::-webkit-scrollbar-thumb,.app .page-container .section .inputcontainer .filter-option-container .filter-option ::-webkit-scrollbar-thumb {
background: #e0e3ec
}

.app .page-container .section .input-container .filter-option-container .filter-option ::-webkit-scrollbar-thumb:hover,.app .page-container .section .inputcontainer .filter-option-container .filter-option ::-webkit-scrollbar-thumb:hover {
background: #555;
width: 3px
}

.app .page-container .section .input-container .filter-option-container .filter-option .filters,.app .page-container .section .inputcontainer .filter-option-container .filter-option .filters {
padding: 38px 20px 20px 20px;
max-height: 320px;
overflow: auto
}

.app .page-container .section .input-container .filter-option-container .filter-option .filters .manage-tags-link,.app .page-container .section .inputcontainer .filter-option-container .filter-option .filters .manage-tags-link {
display: inline-block;
float: right;
position: relative;
top: 12px;
font-size: 12px
}

.app .page-container .section .input-container .filter-option-container .filter-option .filters .filters-label,.app .page-container .section .inputcontainer .filter-option-container .filter-option .filters .filters-label {
display: block;
margin-bottom: 10px;
margin-top: 15px
}

.app .page-container .section .input-container .filter-option-container .filter-option .filters .filters-list,.app .page-container .section .inputcontainer .filter-option-container .filter-option .filters .filters-list {
display: inline-block;
margin-bottom: 5px
}

.app .page-container .section .input-container .filter-option-container .filter-option .all-tags-select label,.app .page-container .section .inputcontainer .filter-option-container .filter-option .all-tags-select label {
border-color: #0059c1!important;
color: #0059c1!important
}

.app .page-container .section .input-container .filter-option-container .filter-option .all-tags-select label:hover,.app .page-container .section .inputcontainer .filter-option-container .filter-option .all-tags-select label:hover {
background-color: #0059c1!important;
color: #fff!important
}

.app .page-container .section .input-container .filter-option-container .filter-option label,.app .page-container .section .inputcontainer .filter-option-container .filter-option label {
padding-left: 0
}

.app .page-container .section .input-container .filter-option-container .filter-option label.checks,.app .page-container .section .inputcontainer .filter-option-container .filter-option label.checks {
display: inline-block;
padding: 5px 8px;
margin-right: 8px;
font-size: 12px;
border: 1px solid #9b9b9b;
border-radius: 3px;
color: #666
}

.app .page-container .section .input-container .filter-option-container .filter-option label.checks:hover,.app .page-container .section .inputcontainer .filter-option-container .filter-option label.checks:hover {
cursor: pointer;
opacity: .8
}

.app .page-container .section .input-container .filter-option-container .filter-option label.checks.active,.app .page-container .section .inputcontainer .filter-option-container .filter-option label.checks.active {
border: 1px solid #0059c1;
color: #fff;
background: #0059c1
}

.app .page-container .section .input-container .filter-option-container .filter-option input[type=checkbox],.app .page-container .section .inputcontainer .filter-option-container .filter-option input[type=checkbox] {
display: none
}

.app .page-container .section .input-container .filter-option-container .filter-option input,.app .page-container .section .inputcontainer .filter-option-container .filter-option input {
max-width: 175px;
font-size: 12px;
min-height: 35px;
height: 35px
}

.app .page-container .section .input-container .filter-option-container .filter-option .triangle,.app .page-container .section .inputcontainer .filter-option-container .filter-option .triangle {
width: 30px;
height: 30px;
position: absolute;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0,0,0,.5);
left: 20px;
top: -30px
}

.app .page-container .section .input-container .filter-option-container .filter-option .triangle:after,.app .page-container .section .inputcontainer .filter-option-container .filter-option .triangle:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(-45deg);
top: 20px;
left: 4px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #eee
}

.app .page-container .section .input-container .filter-option-container .reset-filter,.app .page-container .section .inputcontainer .filter-option-container .reset-filter {
text-align: right;
padding: 2px 20px 2px 0;
font-size: 12px;
color: #9c9c9c;
background: #fafafb
}

.app .page-container .section .input-container .filter-option-container .reset-filter span:hover,.app .page-container .section .inputcontainer .filter-option-container .reset-filter span:hover {
cursor: pointer;
opacity: .8
}

.app .page-container .section .input-container .filter-option-container .reset-filter span img,.app .page-container .section .inputcontainer .filter-option-container .reset-filter span img {
width: 12px;
vertical-align: middle;
margin-right: 4px
}

.app .page-container .section .input-container .lock-img-container,.app .page-container .section .inputcontainer .lock-img-container {
display: inline-block
}

.app .page-container .section .input-container .lock-class,.app .page-container .section .inputcontainer .lock-class {
width: 15px;
display: block;
margin: auto;
margin-bottom: 0
}

.app .page-container .section .input-lock {
position: absolute;
height: 80px;
width: 100%;
background: transparent;
z-index: 1
}

.app .page-container .section .input-container.locked input,.app .page-container .section .input-container.locked select,.app .page-container .section .input-container.locked span,.app .page-container .section .inputcontainer.locked input,.app .page-container .section .inputcontainer.locked select,.app .page-container .section .inputcontainer.locked span {
color: #787878
}

.app .page-title {
margin: 0;
padding: 0;
padding-bottom: 10px;
margin-bottom: 20px;
text-transform: capitalize;
color: #4a4a4a;
border-bottom: 1px solid #f1f1f1
}

.app .page-title.big {
font-size: 2rem;
padding-bottom: 15px;
margin-bottom: 30px
}

.app .section table {
width: 100%;
font-size: 14px;
text-align: right
}

.app .section table th {
color: #666
}

.app .section table th:first-child {
text-align: center
}

.app .section table td,.app .section table th {
padding: 12px 10px
}

.app .section table .breakdown-tag-table-head {
min-width: 130px
}

.app .section .edit-tags-enable {
margin-right: 15px;
margin-bottom: 5px
}

.app .popup {
display: none;
position: absolute;
cursor: pointer;
left: 240px;
color: #4184f3;
border: 1px solid #4184f3;
border-radius: 2px;
padding: 0 5px 0 7px;
height: 17px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-top: 9px
}

.app .popup i {
content: "";
display: inline-block;
width: 4px;
height: 4px;
border-radius: 50%;
background: #4184f3;
position: relative;
margin-right: 2px;
bottom: 4px
}

.app .popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #fff;
color: #9b9b9b;
text-align: center;
border-radius: 6px;
position: absolute;
z-index: 10;
bottom: 135%;
left: 50%;
margin-left: -80px;
box-shadow: 0 0 4px 1px #e1e1e1
}

.app .popup .popuptext .menu-item {
margin: 0;
padding: 10px 10px;
text-align: left;
border-bottom: 1px solid #e1e1e1;
cursor: pointer
}

.app .popup .popuptext .menu-item:hover {
background: #fafafb
}

.app .popup .popuptext .menu-item:last-child {
border-bottom: none
}

.app .popup .popuptext:before {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #9b9b9b transparent transparent transparent
}

.app .popup .show {
visibility: visible;
-webkit-animation: fadeIn .3s;
animation: fadeIn .3s
}

.app .popuptext {
cursor: default
}

@-webkit-keyframes fadeIn {
0% {
opacity: 0
}

to {
opacity: 1
}
}

@keyframes fadeIn {
0% {
opacity: 0
}

to {
opacity: 1
}
}

.app .v-align {
display: flex;
align-items: center
}

.app .align {
vertical-align: middle
}

.state-process-container {
width: 395px;
max-width: 100%;
margin: auto;
overflow: hidden
}

.state-process-container img {
height: 140px;
margin-bottom: 30px;
width: auto
}

.loader {
position: fixed;
width: 100%;
height: 100%;
top: 62px;
bottom: 0;
left: 0;
right: 0;
z-index: 99999;
background: #fff
}

.spinner {
position: relative;
top: 45vh
}

.spinner img {
width: 100px
}

.spinner .su-loader {
position: relative;
left: -5px
}

.text-grey {
color: #9b9b9b
}

@-webkit-keyframes spin {
0% {
transform: rotate(0deg)
}

to {
transform: rotate(1turn)
}
}

@keyframes spin {
0% {
transform: rotate(0deg)
}

to {
transform: rotate(1turn)
}
}

.show-inline-on-mobile,.show-on-mobile {
display: none
}

@media only screen and (max-width: 700px) {
.charges-container {
display:inline-block;
width: 100%!important;
margin-left: 0!important
}
}

@media only screen and (max-width: 800px) {
.filter-box.tagger .filter-link .clear {
top:13px!important
}

.table-sort {
margin-top: 10px
}

button {
padding-top: 15px!important;
padding-bottom: 15px!important;
height: auto!important;
font-size: 14px!important
}

.su-input-group input,.su-input-group textarea,select {
font-size: 16px
}

.row.flex-row {
display: flex
}

.row.flex-row .columns {
margin-bottom: 0!important
}

.row.flex-row .three {
flex: 3
}

.row.flex-row .four {
flex: 4
}

.row.flex-row .six {
flex: 6
}

.row.flex-row .eight {
flex: 8
}

.row.flex-row .nine {
flex: 9
}

.input-container .mobile-context-menu,.inputcontainer .mobile-context-menu {
z-index: 9999
}

.input-container input,.input-container select,.inputcontainer input,.inputcontainer select {
font-size: 16px!important;
color: #666;
padding: 15px 20px!important;
line-height: 1.7rem
}

.input-container select,.inputcontainer select {
background-position-y: 17px!important
}

.input-container .custom-dateranges a,.inputcontainer .custom-dateranges a {
font-size: 12px
}

.input-container .custom-dateranges .separator,.inputcontainer .custom-dateranges .separator {
display: inline-block;
margin-top: 8px;
margin-left: 4px;
margin-right: 2px;
color: #0059c1;
font-size: 12px
}

.dates-container {
padding: 26px 0 20px 0;
background: #f4f4f4;
border-top-left-radius: 15px;
border-top-right-radius: 15px
}

.dates-container .su-input-label {
position: inherit;
background: transparent;
padding-left: 0!important
}

.litepicker {
/* font-family: Inter,"sans-serif"; */
--litepicker-day-width: 13.5vw;
--litepicker-month-width: calc(var(--litepicker-day-width)*7);
font-size: 1em;
width: 100%;
background: #fff
}

.litepicker select.month-item-year {
border: none!important;
padding: 7px 15px!important;
width: auto!important;
padding-right: 20px!important;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
color: #666;
background: url(/static/images/arrow-down.svg);
background-repeat: no-repeat;
background-position: 99% 9px!important;
background-size: 20px;
background-color: #fff
}

.litepicker .container__main {
width: 100%
}

.litepicker .container__main .container__months {
margin: auto;
border-radius: 0;
box-shadow: none
}

.litepicker .container__main .container__months button {
padding: 3px 5px
}

.litepicker .container__main .container__months .month-item:first-child .button-next-month {
visibility: visible
}

.datepicker-container .month-item {
min-height: 315px
}

.datepicker-container .error {
position: absolute;
top: 30px;
left: 25px;
color: #f6461a
}

.datepicker-container #start_date {
display: none;
width: 145px;
margin-left: 20px;
margin-top: 40px;
margin-bottom: 5px
}

.datepicker-container #end_date {
display: none;
position: absolute;
top: 40px;
right: 20px;
width: 145px
}

.datepicker-container .end-date,.datepicker-container .start-date {
display: inline-block;
margin-top: 5px
}

.datepicker-container .end-date.focus input,.datepicker-container .start-date.focus input {
border-color: #0059c1
}

.datepicker-container .end-date:not(.focus) .litepicker,.datepicker-container .start-date:not(.focus) .litepicker {
display: none!important
}

.paginate-info {
padding-left: 0!important;
margin-bottom: 0!important
}

label {
font-size: 14px!important
}

.header {
box-shadow: none!important;
border-bottom: 1px solid #e1e1e1
}

.header .header-right {
display: flex;
align-items: center
}

.header .header-right .logo {
margin-right: 0!important
}

.header .header-right .logo img {
width: 25px!important
}

.header .header-right .mobile-menu-drop {
position: absolute;
top: 60px;
padding-bottom: 60px
}

.header .header-right .mobile-page-title {
display: inline-flex;
margin-left: auto;
font-weight: 400;
font-size: 1.25rem
}

.header .header-right .mobile-page-title.webview-title {
margin-right: auto;
position: relative;
left: -25px
}

.header .header-right .toggle-mobile-menu {
margin-left: auto;
margin-top: 9px
}

.pull-up-section {
position: relative;
top: -50px
}

.table-top-links {
display: flex;
align-items: center;
margin-bottom: 10px
}

.table-top-links .columns {
margin-bottom: 0
}

.table-top-links .eight {
width: 70%!important
}

.table-top-links .four {
width: 30%!important
}

.table-top-links .download-link-div {
color: #0059c1
}

.columns {
width: 100%!important;
margin-left: 0!important;
margin-bottom: 15px
}

.su-toast-groups .su-toast-top-right {
left: 20px
}

.su-toast-groups .su-toast-item.warning {
background: #f7eccb
}

.su-toast-groups .su-toast-item.error {
background: #fee5de
}

.mx-datepicker {
width: 100%!important
}

.app .container .container-right {
max-width: 100%!important
}

.logo {
margin-left: 20px!important
}

.app .page-container {
padding: 20px!important
}

.app .page-container .mobile-input-container {
position: absolute;
width: 100%;
left: 0;
top: 0;
background: #fff;
min-height: 100vh;
z-index: 9999;
padding: 15px 20px;
right: 0;
box-sizing: border-box;
max-height: 100vh;
overflow: auto
}

.app .page-container .mobile-input-container .hide-mobile-input {
position: absolute;
font-size: 1.5rem;
left: 20px
}

.app .page-container .mobile-input-container button.btn-blue {
margin-bottom: 15px
}

.app .page-container .grey-back-mobile {
height: 120px;
background: #f4f4f4;
position: relative;
z-index: 0;
top: -15px;
width: calc(100% + 32px);
left: -16px
}

.app .page-container .inputs-collapsed {
text-align: center;
font-size: 1rem;
box-shadow: 0 1px 6px 0 rgba(0,0,0,.1);
width: calc(100% + 32px);
box-sizing: border-box;
position: relative;
left: -16px;
top: -16px;
padding: 15px;
z-index: 1;
background: #fff
}

.app .page-container .inputs-collapsed .date {
text-align: center;
background: #f4f4f4;
display: inline-block;
padding: 6px 30px;
border-radius: 20px;
margin-bottom: 15px;
color: #9b9b9b;
font-weight: 600;
width: 100%;
box-sizing: border-box
}

.app .page-container .inputs-collapsed .date span {
letter-spacing: .25px
}

.app .page-container .inputs-collapsed .date span:first-child {
margin-right: 5px
}

.app .page-container .inputs-collapsed .date span:last-child {
margin-left: 5px
}

.app .page-container .inputs-collapsed .filters span {
padding: 3px 15px;
border-radius: 20px;
margin-right: 10px;
max-width: 100px;
font-size: .875rem;
overflow: hidden;
display: inline-block;
box-sizing: border-box;
text-overflow: ellipsis;
white-space: nowrap
}

.app .page-container .inputs-collapsed .filters span.filter-category {
border: 1px solid #0059c1;
color: #0059c1
}

.app .page-container .inputs-collapsed .filters span.filter-filter {
background: rgba(194,112,200,.2);
color: #c270c8
}

.app .page-container .inputs-collapsed .filters span.filter-more {
color: #0059c1;
padding-left: 0
}

.app .page-container .search-table .icon-search {
top: 5px;
font-size: 14px
}

.app .page-container .app-banner {
position: absolute;
right: 20px;
line-height: 1;
top: 24px
}

.app .page-container .app-banner img {
width: 100px
}

.app .page-content {
padding-bottom: 475px
}

.app .console-footer-note {
bottom: 475px
}

div .breakdown-meta {
display: block!important;
margin: 0!important
}

div .breakdown-meta:first-child {
margin-top: 10px!important
}

div .breakdown-meta:last-child {
margin-bottom: 10px!important
}

.show-on-mobile {
display: block!important
}

.show-inline-on-mobile {
display: inline-block!important
}

.hide-on-mobile {
display: none!important
}

.mobile-menu-drop {
position: relative;
width: 100%;
background: #fff;
padding: 0;
box-shadow: 0 1px 8px 0 rgba(0,0,0,.1);
height: calc(100vh - 60px);
overflow: auto;
box-sizing: border-box;
transition: .5s;
font-size: 14px
}

.mobile-menu-drop a {
display: block;
padding: 25px 20px;
border-top: 1px solid #e1e1e1;
color: #9b9b9b!important
}

.mobile-menu-drop a .profile-avatar {
display: inline-block
}

.mobile-menu-drop a:hover {
color: #0059c1!important
}

.mobile-menu-drop .portfolio-count {
background: #4184f3;
color: #fff;
padding: 2px 6px;
border-radius: 2px;
margin-left: 8px
}

.mobile-menu-drop .pnl-icon {
width: 14px
}

.mobile-menu-drop .mobile-refer-label {
border-bottom: 1px solid #e1e1e1
}

.mobile-menu-drop .icon,.mobile-menu-drop .mobile-refer-label img {
margin-right: 10px
}

.mobile-menu-footer {
padding: 20px
}

.mobile-menu-footer a {
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px;
border: none;
text-align: center
}

.mobile-account-link {
margin-top: 65px;
border-top: none!important
}

.mobile-profile-card {
background: #f4f4f4;
height: 80px
}

.mobile-profile-card a {
height: auto;
display: flex;
align-items: center;
width: auto;
max-width: 300px;
margin-bottom: 0;
border: none;
margin: auto;
background: #fff;
padding: 20px 20px;
position: relative;
top: 20px;
box-shadow: 0 1px 6px 0 rgba(0,0,0,.1)
}

.mobile-profile-card .mobile-profile-details {
display: inline-block;
margin-left: 30px
}

.mobile-profile-card .mobile-profile-details h2 {
margin-bottom: 10px;
color: #444;
white-space: nowrap;
width: 225px;
overflow: hidden;
box-sizing: border-box;
text-overflow: ellipsis
}

.mobile-profile-card .profile-avatar img {
border: 3px solid #e1e1e1
}

#mobile-side-nav.show {
width: 220px!important
}

.nav-accordion-label {
display: block;
padding: 25px 20px;
border-top: 1px solid #e1e1e1;
color: #9b9b9b!important
}

.nav-accordion-label.active {
color: #0059c1!important
}

.nav-accordion-label .icon-chevron-down,.nav-accordion-label .icon-chevron-right {
float: right
}

.nav-accordion-label .icon-chevron-down {
display: none
}

.nav-accordion-content {
display: none;
padding-left: 25px;
margin-top: 20px
}

.nav-accordion-content a {
margin-bottom: 0;
padding: 10px 0;
border: none
}

.nav-accordion-label.active .icon-chevron-down,.nav-accordion-label.active .nav-accordion-content {
display: block
}

.nav-accordion-label.active .icon-chevron-right {
display: none
}

.wrapper .header-right {
height: 60px
}

.toggle-mobile-menu {
float: right;
line-height: 4;
display: inline-flex;
margin-right: 20px;
margin-top: 25px
}

#nav-icon4 {
width: 20px;
height: 25px;
position: relative;
transform: rotate(0deg);
transition: .5s ease-in-out;
cursor: pointer
}

#nav-icon4 span {
display: block;
position: absolute;
height: 3px;
width: 100%;
background: #4a4a4a;
border-radius: 9px;
opacity: 1;
left: 0;
transform: rotate(0deg);
transition: .25s ease-in-out
}

#nav-icon4 span:first-child {
top: 0;
transform-origin: left center
}

#nav-icon4 span:nth-child(2) {
top: 6px;
transform-origin: left center
}

#nav-icon4 span:nth-child(3) {
top: 12px;
transform-origin: left center
}

#nav-icon4.open span:first-child {
transform: rotate(45deg);
top: -3px;
left: 1px
}

#nav-icon4.open span:nth-child(2) {
width: 0;
opacity: 0
}

#nav-icon4.open span:nth-child(3) {
transform: rotate(-45deg);
top: 11px;
left: 1px
}

.app .page-container .section .input-container button,.app .page-container .section .inputcontainer button.btn-blue {
width: 98%!important;
margin-right: 0!important
}

.page-container.holdings .section .holdings-total,.positions-summary {
padding: 30px 50px!important
}

.row.custom-row .six {
width: 100%
}

.row.custom-row .six:first-child {
padding-right: 0!important
}

.row.custom-row .six:last-child {
position: relative;
padding-left: 0!important;
margin-left: 0
}

.border-right {
border: none!important
}

.footer .row .six {
display: block!important;
text-align: center!important
}
}

@media only screen and (min-width: 900px)and (max-width:1200px) {
#outer_app .console-landing {
position:relative;
top: 20vh
}
}

@media only screen and (min-width: 1201px) {
#outer_app .console-landing {
position:relative;
top: 15vh;
padding-bottom: 130px
}
}

@media only screen and (max-width: 900px) {
#outer_app .console-landing {
position:relative;
top: 20vh
}
}

@media only screen and (max-width: 550px) {
#outer_app {
padding-bottom:370px
}

.app .page-content {
padding-bottom: 120px
}

.app .console-footer-note {
bottom: 120px
}

.app .page-container .search-table .icon-search {
left: 15px
}

.nomargin-mobile {
margin: 0
}
}

@media only screen and (max-width: 350px) {
.custom-dateranges a {
font-size:10px!important
}
}

@media only screen and (max-width: 800px) {
.app .footer .footer-section .footer-container,#outer_app {
padding:20px
}

#outer_app {
padding-bottom: 350px
}

.modal-mask,.modal-wrapper {
display: block!important;
margin-top: 0!important
}

.modal-container {
width: 100%!important;
height: 100vh;
overflow-y: scroll;
padding: 20px!important;
padding-bottom: 130px!important
}

.modal-container .close-modal {
display: block!important;
right: 15px!important
}

#mobile-side-nav {
position: fixed;
left: 0;
top: 0;
z-index: 99999;
background: #fafafb;
display: none;
height: 100vh;
transition: .5s;
overflow: hidden;
box-shadow: 1px 1px 10px #e1e1e1
}

.open-side-nav {
margin-bottom: 15px;
display: inline-block
}

.hidden {
display: none
}

.close-side-nav {
text-align: center;
width: 25px;
margin-left: auto;
margin-right: 10px;
font-size: 25px;
margin-top: 5px
}
}

@media only screen and (max-width: 550px) {
.app .page-container {
padding:16px!important
}

#outer_app {
padding-bottom: 370px
}

.app .pnl .fetch-data,.app .tradebook .fetch-data {
top: 40px!important
}

.app .search-table {
left: 0!important;
top: -5px!important;
float: none;
padding-left: 10px
}

.app .last-updated {
display: block;
float: none
}

.app .filter-table {
top: 0!important;
right: 10px!important
}

.app .filter-dropdown {
top: 70px!important
}

.app .filter-dropdown .triangle {
left: 40px!important
}

.app .table-download {
padding-right: 0!important
}

.app .fetch-data {
position: absolute;
top: 0;
right: 0
}
}

.stock-widget {
z-index: 99999
}

.stock-widget iframe {
position: absolute;
background: #fff;
border: 1px solid #f1f1f1;
width: 420px;
height: 282px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.2)
}

.data-table table {
border-radius: 2px;
background-color: #fff;
width: 100%;
font-size: 14px
}

.data-table th {
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

.data-table td,.data-table th {
padding: 10px 20px
}

.data-table td {
text-transform: uppercase
}

.data-table th.active .arrow {
opacity: 1
}

.data-table .arrow {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
margin-left: 10px;
opacity: .66
}

.data-table .arrow.asc {
border-bottom: 4px solid #666
}

.data-table .arrow.asc,.data-table .arrow.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent
}

.data-table .arrow.dsc {
border-top: 4px solid #666
}

.dot-loader.inline {
display: inline-block
}

.dot-loader.inline.small svg {
height: 8px;
width: 30px
}

.modal-mask {
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 9998;
display: table;
position: fixed;
transition: opacity .3s ease;
background: hsla(0,0%,100%,.8)
}

.modal-wrapper {
display: table-cell;
vertical-align: middle;
margin-top: 10%
}

.modal-container {
width: 700px;
color: #444;
margin: 0 auto;
max-width: 100%;
max-height: 100vh;
background: #fff;
padding: 20px 40px 35px 40px;
position: relative;
border: 1px solid #ddd;
box-shadow: 2px 2px 0 #f3f3f3;
box-sizing: border-box
}

.modal-container.confirmation {
width: 400px
}

.modal-container.confirmation-modal {
width: 500px
}

.modal-header h1,.modal-header h2,.modal-header h3,.modal-header h4,.modal-header h5 {
margin-top: 0
}

.modal-default-button {
float: right
}

.modal-enter,.modal-leave-active {
opacity: 0
}

.modal-enter .modal-container,.modal-leave-active .modal-container {
transform: scale(1)
}

@media only screen and (max-width: 800px) {
.modal-mask {
min-height:100vh
}
}

.marketwatch-sidebar {
font-size: .8125rem;
box-sizing: border-box;
background-color: #fff;
border-left: 1px solid #eee;
border-right: 1px solid #eee
}

.marketwatch-sidebar .instruments {
margin-bottom: 40px;
position: relative
}

.marketwatch-sidebar .instruments .empty {
text-align: center;
padding: 20px 40px
}

.marketwatch-sidebar .instruments .loading-marketwatch {
padding: 10px
}

.marketwatch-sidebar .instruments .instrument {
color: #666;
position: relative;
border-bottom: 1px solid #f1f1f1;
transition: .25s ease
}

.marketwatch-sidebar .instruments .instrument.down .icon-down,.marketwatch-sidebar .instruments .instrument.down .last-price,.marketwatch-sidebar .instruments .instrument.down .nice-name {
color: #df514c
}

.marketwatch-sidebar .instruments .instrument.up .icon-up,.marketwatch-sidebar .instruments .instrument.up .last-price,.marketwatch-sidebar .instruments .instrument.up .nice-name {
color: #4caf50
}

.marketwatch-sidebar .instruments .instrument.index {
background-color: #fafafb
}

.marketwatch-sidebar .instruments .instrument.index .symbol,.marketwatch-sidebar .instruments .instrumentindex .price {
font-weight: 600
}

.marketwatch-sidebar .instruments .instrument.selected {
background-color: #f4f4f4
}

.marketwatch-sidebar .instruments .instrument.highlight {
background-color: #fffacd
}

.marketwatch-sidebar .instruments .instrument:hover {
background: #fafafb;
cursor: pointer
}

.marketwatch-sidebar .instruments .instrument .actions {
display: none
}

.marketwatch-sidebar .instruments .instrument:hover .actions {
display: block;
position: absolute;
top: 0;
right: 0;
height: 44px;
box-sizing: border-box;
padding: 8px 15px 8px 2px
}

.marketwatch-sidebar .instruments .instrument:hover .actions .btn {
padding: 4px 10px;
min-width: 35px;
display: inline-block;
margin-left: 5px;
font-weight: 600
}

.marketwatch-sidebar .instruments .instrument:hover .price {
opacity: 0
}

.marketwatch-sidebar .instruments .instrument .draggable-area {
display: none
}

.marketwatch-sidebar .instruments .instrument.draggedover .draggable-area {
display: block;
text-align: center;
background: #fafafb;
height: 50px
}

.marketwatch-sidebar .instruments .instrument .price,.marketwatch-sidebar .instruments .instrument .symbol {
width: 55%;
padding: 13px 15px;
display: inline-block;
box-sizing: border-box
}

.marketwatch-sidebar .instruments .instrument .symbol {
padding-right: 0
}

.marketwatch-sidebar .instruments .instrument .price {
float: right;
width: 45%;
padding-left: 0
}

.marketwatch-sidebar .instruments .instrument .price span {
display: inline-block
}

.marketwatch-sidebar .instruments .instrument .price .last-price {
min-width: 60px
}

.marketwatch-sidebar .instruments .instrument .price .change-indicator {
min-width: 25px
}

.marketwatch-sidebar .instruments .instrument .exchange {
font-size: .4375rem;
vertical-align: top;
margin-left: 5px;
line-height: 20px
}

.marketwatch-sidebar .instruments .instrument.active-marketdepth {
background: #fafafb
}

.marketwatch-sidebar .instruments .instrument.list-enter-active,.marketwatch-sidebar .instruments .instrument.list-leave-active {
transition: all .25s
}

.marketwatch-sidebar .instruments .instrument.list-enter,.marketwatch-sidebar .instruments .instrument.list-leave-to {
opacity: 0;
transform: translateY(5px)
}

.marketwatch-sidebar .instruments .market-depth {
padding: 0 10px;
background: #fafafb;
border-top: 1px solid #f1f1f1
}

.marketwatch-sidebar .instruments .market-depth .loader {
padding: 30px 0;
text-align: center;
display: block
}

.marketwatch-sidebar .instruments .market-depth .ohlc {
padding: 10px 0;
border-top: 1px solid #f1f1f1
}

.marketwatch-sidebar .instruments .market-depth table caption,.marketwatch-sidebar .instruments .market-depth table thead tr th {
padding: 10px 0;
color: #9b9b9b;
text-transform: uppercase
}

.marketwatch-sidebar .instruments .market-depth table thead tr th {
padding: 2px 0
}

.marketwatch-sidebar .instruments .market-depth table.buy tbody,.marketwatch-sidebar .instruments .market-depth table.buy tfoot {
color: #387ed1
}

.marketwatch-sidebar .instruments .market-depth table.sell tbody,.marketwatch-sidebar .instruments .market-depth table.sell tfoot {
color: #f6461a
}

.marketwatch-sidebar .instruments .market-depth table tbody td,.marketwatch-sidebar .instruments .market-depth table tfoot td {
padding: 2px 0
}

.marketwatch-sidebar .instruments .market-depth table tfoot td {
border-top: 1px solid #f1f1f1;
padding: 6px 0
}

.marketwatch-sidebar .marketwatch-selector {
bottom: 0;
width: 400px;
position: fixed;
box-sizing: border-box;
background: #fafafb;
border-top: 1px solid #e3e3e3;
border-right: 1px solid #f1f1f1
}

.marketwatch-sidebar .marketwatch-selector li {
float: left;
line-height: 40px;
vertical-align: middle
}

.marketwatch-sidebar .marketwatch-selector li.label {
background: #fafafb;
padding: 0 15px;
color: #9b9b9b
}

.marketwatch-sidebar .marketwatch-selector li.item {
display: inline-block;
padding: 0 20px;
color: #9b9b9b;
cursor: pointer
}

.marketwatch-sidebar .marketwatch-selector li.item.selected {
background-color: #eee;
color: #ff5722;
cursor: default
}

.omnisearch-wrap {
display: block;
position: relative;
border-bottom: 1px solid #f1f1f1;
box-sizing: border-box;
height: 50px
}

.omnisearch-wrap .icon-search {
position: absolute;
left: 15px;
top: 16px;
z-index: 1;
opacity: .5
}

.omnisearch-wrap .omnisearch {
height: 100%
}

.omnisearch-wrap .omnisearch .search {
position: relative;
height: 100%
}

.omnisearch-wrap .omnisearch .search input {
width: 100%;
padding: 0;
margin: 0;
border: none;
text-indent: 40px;
color: #9b9b9b;
height: 100%
}

.omnisearch-wrap .omnisearch .search input:focus {
outline: none
}

.omnisearch-wrap .omnisearch .search-result {
background: #fafafb;
position: absolute;
top: 50px;
z-index: 9;
width: 100%;
color: #9b9b9b;
border-width: 1px 0;
border-style: solid;
border-color: #f4f4f4
}

.omnisearch-wrap .omnisearch .search-result-list {
list-style: none;
margin: 0;
padding: 0
}

.omnisearch-wrap .omnisearch .search-result-list .search-result-item {
padding: 6px 30px;
margin-bottom: 0;
cursor: pointer;
border-bottom: 1px solid #eee
}

.omnisearch-wrap .omnisearch .search-result-list .search-result-item .exchange {
position: absolute;
right: 10px
}

.omnisearch-wrap .omnisearch .search-result-list .search-result-item .company {
font-size: .5625rem
}

.omnisearch-wrap .omnisearch .search-result-list .search-result-item .exchange .BSE,.omnisearch-wrap .omnisearch .search-result-list .search-result-item .exchange .MCX,.omnisearch-wrap .omnisearch .search-result-list .search-result-item .exchange .NSE {
font-size: .5625rem;
color: #b73737;
border: 1px solid #b73737;
padding: 0 2px;
border-radius: 2px;
margin-left: 5px
}

.omnisearch-wrap .omnisearch .search-result-list .search-result-item .exchange .BSE {
color: #0089d0;
border-color: #0089d0
}

.omnisearch-wrap .omnisearch .search-result-list .search-result-item .exchange .MCX {
color: #013779;
border-color: #013779
}

.omnisearch-wrap .omnisearch .search-result-list .search-result-item.selected,.omnisearch-wrap .omnisearch .search-result-list .search-result-item:hover {
background: #f4f4f4
}

.orderbook table td.actions-wrap {
position: relative
}

.orderbook table td .actions {
left: 0;
top: 10px;
position: absolute
}

.orderbook .order-cancel-modal .modal-container {
max-width: 300px
}

.orderbook .order-cancel-modal .modal-container button {
min-width: 60px
}

.orderbook .order-info-modal .modal-container {
max-width: 560px
}

.orderbook .order-info-modal .modal-container label {
text-transform: uppercase;
margin-bottom: 3px;
display: block
}

.orderbook .order-info-modal .modal-container .order-info-header {
color: #fff;
margin: -20px -40px 20px -40px;
padding: 20px 40px
}

.orderbook .order-info-modal .modal-container .order-info-header h1,.orderbook .order-info-modal .modal-container .order-info-header h2,.orderbook .order-info-modal .modal-container .order-info-header h3,.orderbook .order-info-modal .modal-container .order-info-header h4,.orderbook .order-info-modal .modal-container .order-info-header h5 {
margin: 0
}

.orderbook .order-info-modal .modal-container .order-info-header.buy {
background-color: #387ed1
}

.orderbook .order-info-modal .modal-container .order-info-header.sell {
background-color: #f6461a
}

.orderbook .order-info-modal .modal-container .order-info-header .tradingsymbol {
margin-bottom: 5px
}

.orderbook .order-info-modal .modal-container .order-info-body label {
color: #9b9b9b
}

.orderbook .order-info-modal .modal-container .order-info-body .row {
margin-bottom: 20px
}

.orderbook .order-info-modal .modal-container .order-info-body .row-4 {
margin-bottom: 0
}

.order-window {
z-index: 99;
width: 550px;
border-radius: 3px 2px 0 0;
box-shadow: 0 1px 3px 0 #aaa;
background-color: #fff;
position: fixed
}

.order-window .head {
padding: 10px 15px;
color: #fff;
background-color: #f4f4f4
}

.order-window .head.buy {
background-color: #387ed1
}

.order-window .head.sell {
background-color: #ff5722
}

.order-window .head .transaction-type {
margin-right: 3px
}

.order-window .head .transaction-type-switch {
margin: 0;
float: right
}

.order-window .head .transaction-type-switch span {
line-height: 14px
}

.order-window .head .el-switch.is-disabled .el-switch__core {
background: rgba(0,0,0,.1)!important;
border-color: rgba(0,0,0,.1)!important
}

.order-window .content {
padding: 10px 15px 15px 15px
}

.order-window .content .advanced-options-toggle span {
color: #9b9b9b;
text-transform: uppercase
}

.order-window .content .el-radio__label {
text-transform: uppercase
}

.order-window .content .el-radio__inner {
width: 16px;
height: 16px
}

.order-window .content .el-input {
max-width: 100px
}

.order-window .content .el-form-item__label {
color: #9b9b9b;
text-transform: uppercase
}

.order-window .content .el-form-item.is-required .el-form-item__label:before {
display: none
}

.order-window .content .row-5 .el-form-item {
margin-bottom: 0
}

.order-window .content .actions button {
min-width: 75px
}

.order-window .content .actions button.modify.buy,.order-window .content .actions button.place.buy {
color: #fff;
background-color: #387ed1;
border-color: #387ed1
}

.order-window .content .actions button.modify.sell,.order-window .content .actions button.place.sell {
color: #fff;
background-color: #f6461a;
border-color: #f6461a
}

.chart-container {
position: relative;
height: 160px;
width: 100%
}

.dashboard .donut-container,.dashboard .donut-container .donut-chart-container {
margin-top: 0!important
}

.dashboard .donut-container .donut-chart-container #comm_donut .data-path:hover,.dashboard .donut-container .donut-chart-container #eq_donut .data-path:hover {
cursor: pointer
}

.dashboard .donut-container .donut-chart-container #comm_donut .data-text,.dashboard .donut-container .donut-chart-container #eq_donut .data-text {
transition: transform .2s ease-in-out;
fill: #666
}

.dashboard .donut-container .donut-chart-container #comm_donut .data-text__section,.dashboard .donut-container .donut-chart-container #eq_donut .data-text__section {
font-size: 1rem;
transform: translateY(-.5rem);
-moz-transform: translateY(0);
opacity: 0
}

.dashboard .donut-container .donut-chart-container #comm_donut .data-text__value,.dashboard .donut-container .donut-chart-container #eq_donut .data-text__value {
font-size: 1rem;
transform: translateY(.15rem);
-moz-transform: translateY(1.5rem);
opacity: 0;
fill: #444
}

.dashboard .donut-container .donut-chart-container #comm_donut .data-text__name,.dashboard .donut-container .donut-chart-container #eq_donut .data-text__name {
font-size: .85rem;
transform: translateY(-1.5rem);
-moz-transform: translateY(-.25rem);
opacity: 0
}

.dashboard .donut-container .donut-chart-container #comm_donut .data-text--show,.dashboard .donut-container .donut-chart-container #eq_donut .data-text--show {
-webkit-animation: fadeGraphTextIn .5s forwards;
animation: fadeGraphTextIn .5s forwards
}

.dashboard .donut-container .donut-chart-container #comm_donut .data-text:hover,.dashboard .donut-container .donut-chart-container #eq_donut .data-text:hover {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

.dashboard .donut-container .donut-chart-container #comm_donut .legend-text,.dashboard .donut-container .donut-chart-container #eq_donut .legend-text {
fill: #fff
}

@-webkit-keyframes fadeGraphTextIn {
0% {
opacity: 0
}

to {
opacity: 1
}
}

.share-modal h1 img {
vertical-align: middle;
height: 19px;
margin-right: 10px
}

.share-modal .refer-link-label {
margin-bottom: 10px
}

.share-modal .refer-link-label a {
margin-left: 10px;
top: 2px;
position: relative
}

.share-modal img.refer-head-img {
height: 60px;
width: auto;
position: relative;
top: 2px
}

.share-modal .refer-message {
font-weight: 600;
font-size: 16px;
line-height: 1.8
}

.share-modal .refer-message p {
width: 100%
}

.share-modal .refer-message p a {
font-size: 12px;
margin-left: 5px
}

.share-modal .refer-link .refer-link-label img {
max-width: 18px;
opacity: .8
}

.share-modal .refer-link .refer-link-label img:hover {
opacity: 1
}

.share-modal .refer-link .su-input-group {
display: inline-block;
margin-bottom: 0
}

.share-modal .refer-link .su-input-group input {
width: 235px
}

.share-modal .refer-link button {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
position: relative!important;
top: -2px!important;
left: -22px!important
}

p.legend-name {
display: inline-block;
width: 115px;
margin: 0
}

.l1 {
background: #4bb56a
}

.l2 {
background: #ffcb48
}

.l3 {
background: #5f4899
}

.l4 {
background: #fc890d
}

.l5 {
background: #0059c1
}

.l6 {
background: #2cb9ff
}

.l7 {
background: #9946eb
}

.legend-color {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 7px
}

.legends h3 {
padding-left: 20px;
margin-top: 5px;
margin-bottom: 15px
}

.legends span {
color: #0059c1
}

.legends .legend-breakdown,.legends span {
display: inline-block
}

.link-underline {
text-decoration: underline!important
}

.tooltip-label {
display: inline-block!important
}

.dashboard-section .update-tags {
font-size: 12px;
float: right;
position: relative;
right: 5px;
top: 3px
}

.dashboard-section .update-tags .update-tag-date {
color: #0059c1
}

.dashboard-section .update-tags img {
width: 12px;
position: relative;
margin-right: 3px;
top: 1px
}

.dashboard-section h1 {
display: inline-block;
margin-top: 0;
margin-bottom: 40px
}

.dashboard-section .row.custom-row .six {
width: 50%!important
}

.dashboard-section .row.custom-row .six:first-child {
position: relative;
padding-right: 4%
}

.dashboard-section .row.custom-row .six:last-child {
position: relative;
padding-left: 4%;
margin-left: 0
}

.dashboard-section .border-right {
border-right: 1px solid #eee;
padding-bottom: 50px
}

.dashboard-section .state-process {
margin-top: 0
}

.dashboard-section .comm-disabled img,.dashboard-section .eq-disabled img {
height: 100px;
margin-top: 25px;
position: relative;
left: 7px
}

.dashboard-section .comm-disabled a,.dashboard-section .eq-disabled a {
color: #fff!important;
font-size: 13px;
font-weight: 400;
height: 37px;
padding-left: 15px;
padding-right: 15px;
line-height: 1
}

.dashboard-section .comm-disabled p,.dashboard-section .eq-disabled p {
margin-top: 15px;
margin-bottom: 25px
}

.dashboard-section .comm-disabled {
padding-left: 8%
}

.dashboard-section .eq-disabled {
padding-right: 8%
}

.acValue-chart-section h2 span:first-child img {
position: relative;
top: 3px
}

.acValue-chart-section h2 .share-link {
display: inline-block;
font-size: 14px;
font-weight: 600;
color: #0059c1;
top: -2px;
left: 15px
}

.acValue-chart-section h2 .share-link:hover {
cursor: pointer
}

.acValue-chart-section h2 .share-link img {
height: 18px;
margin-right: 4px;
vertical-align: middle
}

.acValue-chart-section #mouse {
position: absolute;
top: 50px;
left: 0
}

.acValue-chart-section .acvalue-summary {
font-size: 1rem;
padding-left: 30px
}

.acValue-chart-section .acvalue-summary img {
height: 15px;
width: auto;
margin-right: 5px;
position: relative;
top: 1px
}

.acValue-chart-section .acvalue-summary .summary-date-container {
margin-bottom: 10px
}

.acValue-chart-section .acvalue-summary .summary-value {
color: #0059c1;
font-size: 1.25rem;
display: block;
margin-top: 5px
}

.acValue-chart-section .acvalue-summary .summary-date-value {
font-size: 1.15rem
}

.acValue-chart-section .acvalue-summary .separator {
margin-left: 10px;
margin-right: 10px
}

.acValue-chart-section .acvalue-summary .summary-container .summary-values {
margin-bottom: 10px
}

.acValue-chart-section .acvalue-summary .summary-container label {
display: inline-block!important
}

.acValue-chart-section .acvalue-summary .summary-container .acvalue-events {
margin-top: 20px
}

.acValue-chart-section .acvalue-summary .summary-container .acvalue-events h3 {
margin-bottom: 10px;
display: inline-block
}

.acValue-chart-section .acvalue-summary .summary-container .acvalue-events .summary-values {
margin-top: 5px!important
}

.acValue-chart-section .acvalue-summary .summary-container .acvalue-events .summary-values label,.acValue-chart-section .acvalue-summary .summary-container .acvalue-events .summary-values span {
display: inline-block!important
}

.acValue-chart-section .acvalue-summary .summary-container .acvalue-events .summary-values label {
margin-right: 10px
}

.acValue-chart-section .acvalue-summary .summary-container .acvalue-events .summary-values span {
margin-right: 15px
}

.acValue-chart-section .chart-switch-container {
display: inline-block;
float: right;
position: relative;
top: 5px
}

.acValue-chart-section .chart-inner-container {
position: relative
}

.acValue-chart-section .chart-inner-container img {
display: none;
position: relative;
top: 20px;
left: 40px
}

.acValue-chart-section .chart-inner-container canvas {
background-color: #fff;
background-repeat: no-repeat;
background-position: 3% 2%
}

.acValue-chart-section .chart-inner-container .benchmark-container {
position: absolute;
right: 20px;
top: 15px
}

.acValue-chart-section .chart-inner-container .benchmark-container select {
max-width: 130px;
border: 1px solid #e1e1e1!important;
margin-left: 10px
}

.acValue-chart-section .reset-benchmark {
background: none;
height: auto;
border: none;
padding: 0;
margin-right: 10px
}

.acValue-chart-section .reset-benchmark img {
width: 20px
}

.acValue-chart-section .eqSwitch {
display: inline-block;
color: #9b9b9b;
padding: 0 15px;
text-align: center;
font-size: 1rem;
letter-spacing: .3px;
line-height: 1.1
}

.acValue-chart-section .eqSwitch.active {
color: #0059c1
}

.acValue-chart-section .eqSwitch:hover {
cursor: pointer;
color: #0059c1
}

.acValue-chart-section .comSwitch {
display: inline-block;
color: #9b9b9b;
border-left: 1px solid #9b9b9b;
padding: 0 15px;
text-align: center;
font-size: 1rem;
letter-spacing: .3px;
line-height: 1.1;
margin-left: 10px;
padding-left: 20px
}

.acValue-chart-section .comSwitch.active {
color: #0059c1
}

.acValue-chart-section .comSwitch:hover {
cursor: pointer;
color: #0059c1
}

.acValue-chart-section .switch {
position: relative;
display: inline-block!important;
width: 45px;
height: 20px;
margin-right: 10px
}

.acValue-chart-section .switch input {
opacity: 0;
width: 0;
height: 0
}

.acValue-chart-section .slider {
position: absolute;
display: inline-block;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ff5722;
transition: .4s
}

.acValue-chart-section .slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: #fff;
transition: .4s
}

.acValue-chart-section input:checked+.slider {
background-color: #2196f3
}

.acValue-chart-section input:focus+.slider {
box-shadow: 0 0 1px #2196f3
}

.acValue-chart-section input:checked+.slider:before {
transform: translateX(26px)
}

.acValue-chart-section .slider.round {
border-radius: 34px
}

.acValue-chart-section .slider.round:before {
border-radius: 50%
}

.dashboard-card {
box-shadow: 4px 8px 16px -8px #d5d5d5;
padding: 15px 30px;
border: 1px solid #eee;
border-radius: 2px;
min-height: 600px
}

.products-card {
background: #fafafb;
padding: 35px;
border-radius: 2px
}

.products-card img {
width: 40px
}

.products-card .kite-logo {
width: 47px
}

.products-card .varsity-logo {
width: 76px
}

.products-card h1 {
margin-top: 5px
}

.bulletin-head img {
position: relative;
top: 2px;
margin-right: 5px;
width: 21px
}

.product-container {
color: #444!important;
display: block
}

.product-container:hover {
opacity: .8;
cursor: pointer
}

.news-container p {
margin-top: 5px;
margin-bottom: 20px
}

.pledge-color {
background-color: #387ed1
}

.holdings-color {
background-color: #fed51c
}

.marginBl-color {
background-color: #ff5722
}

.free-color {
background-color: #4caf50
}

.legend-row {
margin-bottom: 5px;
font-size: 14px;
color: #666
}

.legend-row:first-child {
margin-top: 40px
}

.welcome-text {
margin-bottom: 50px;
display: inline-block
}

.console-banner {
display: none
}

.stats-block {
padding: 20px
}

.stats-block p {
font-weight: 400;
margin: 0
}

.stats-block h2 {
margin: 0;
text-transform: capitalize
}

.stats-block h2 span {
margin-right: 5px
}

.stats-block .value {
font-weight: 400
}

.stats-block .label {
color: #9b9b9b
}

.stats-block .primary-stats {
margin-bottom: 30px
}

.stats-block .secondary-stats .value {
font-size: 1.25rem;
color: #387ed1
}

.stats-block .portfolio-stats {
margin-top: 20px;
margin-bottom: 40px
}

.stats-block .portfolio-stats .primary-stats .value {
font-size: 1.9rem
}

.stats-block .portfolio-stats .pending-orders-stats {
margin-bottom: 0
}

.stats-block .margins-stats {
min-height: 150px
}

.stats-block .margins-stats .first,.stats-block .margins-wrapper {
border-right: 1px solid #eee
}

.loader {
margin-left: 5px
}

.holdings-block,.positions-block {
min-height: 200px
}

@media only screen and (max-width: 800px) {
.acValue-chart-section {
display:none!important
}
}

@media only screen and (min-width: 800px) {
.console-banner {
display:inline-block;
float: right;
margin-top: 5px
}

.console-banner a {
max-width: 100%;
display: flex;
align-items: center
}

.console-banner a span {
line-height: 1.4;
font-size: 1.3rem;
margin-left: 10px;
color: #444;
width: 175px
}

.console-banner a img {
height: 55px
}

.console-banner:hover {
opacity: .9;
cursor: pointer
}

.summary-container .border-left {
border-left: 1px solid #e1e1e1
}
}

@media only screen and (max-width: 325px) {
.dashboard .dashboard-section #comm_card .update-tags,.dashboard .dashboard-section #equity_card .update-tags {
left:2px!important;
bottom: -20px!important
}
}

@media only screen and (max-width: 1370px) {
.dashboard [data-balloon].xl-tooltip:after {
white-space:unset!important;
width: 250px!important
}
}

@media only screen and (max-width: 800px) {
.dashboard .grey-back-mobile {
height:85px!important
}

.dashboard .show-on-mobile.update-tags {
float: none
}

.dashboard .mobile-agg {
top: -80px!important
}

.dashboard .mobile-agg h1 {
margin-bottom: 0
}

.dashboard .pull-up-section {
top: -40px
}

.dashboard .benchmark-container {
position: unset!important
}

.dashboard .summary-container .two {
width: 50%!important
}

.dashboard .dashboard-section .border-right {
padding-bottom: 0!important
}

.dashboard .dashboard-section h2 {
margin-bottom: 5px;
font-size: 18px;
text-align: center
}

.dashboard .dashboard-section .dashboard-section .border-right {
padding-bottom: 0
}

.dashboard .dashboard-section .comm-disabled {
padding-left: 0
}

.dashboard .dashboard-section .comm-donut-section.six,.dashboard .dashboard-section .equity-donut-section.six {
width: 100%!important
}

.dashboard .dashboard-section .comm-donut-section.six .chart-container,.dashboard .dashboard-section .equity-donut-section.six .chart-container {
margin-top: 15px
}

.dashboard .dashboard-section .comm-donut-section {
display: none
}

.dashboard .dashboard-section #comm_card,.dashboard .dashboard-section #equity_card {
padding: 10px!important;
box-sizing: border-box;
width: 47.5%!important;
margin-bottom: 0
}

.dashboard .dashboard-section #comm_card .update-tags,.dashboard .dashboard-section #equity_card .update-tags {
font-size: 10px;
left: 10px;
position: absolute;
bottom: -25px;
top: auto
}

.dashboard .dashboard-section #comm_card .update-tags img,.dashboard .dashboard-section #equity_card .update-tags img {
width: 10px
}

.dashboard .dashboard-section #equity_card {
margin-right: 5%
}

.dashboard .dashboard-section #comm_card.active,.dashboard .dashboard-section #equity_card.active {
color: #0059c1;
border-bottom: 1px solid #0059c1
}

.dashboard .dashboard-section #comm_card.active label,.dashboard .dashboard-section #equity_card.active label {
color: #fff
}

.welcome-text {
margin-bottom: 20px
}

.products-card a {
text-align: center
}
}

#eqAcValueChart .chart__line,#eqAcValueChart .chart__payin--focus,#eqAcValueChart .chart__payout--focus,#eqAcValueChart .x.axis {
-webkit-clip-path: url(#clipEq);
clip-path: url(#clipEq)
}

.acvalue-chart-container {
max-width: 100%;
overflow: auto
}

#comAcValueChart .chart__line,#comAcValueChart .chart__payin--focus,#comAcValueChart .chart__payout--focus,#comAcValueChart .x.axis {
-webkit-clip-path: url(#clipCom);
clip-path: url(#clipCom)
}

#comAcValueChart text,#eqAcValueChart text {
/* font-family: Inter,sans-serif */
}

#comAcValueChart .zoom,#eqAcValueChart .zoom {
cursor: move;
fill: none;
pointer-events: all
}

#comAcValueChart .chart__mf-holdings--focus,#eqAcValueChart .chart__mf-holdings--focus {
fill: none;
stroke: #facb48;
stroke-width: 2px
}

#comAcValueChart .chart__account-value--focus,#eqAcValueChart .chart__account-value--focus {
fill: none;
stroke: #387ed1;
stroke-width: 2px
}

#comAcValueChart .chart__equity-holdings--focus,#eqAcValueChart .chart__equity-holdings--focus {
fill: none;
stroke: #4bb56a;
stroke-width: 2px
}

#comAcValueChart .chart__overlay,#eqAcValueChart .chart__overlay {
fill: none;
pointer-events: all
}

#comAcValueChart .brush .selection,#eqAcValueChart .brush .selection {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges
}

#comAcValueChart .chart__range-selection text,#eqAcValueChart .chart__range-selection text {
cursor: pointer;
text-decoration: underline;
fill: #2980b9
}

#comAcValueChart .chart__axis--context text,#eqAcValueChart .chart__axis--context text {
fill: #7f8faf
}

#comAcValueChart .chart__axis--context .tick:nth-child(odd),#comAcValueChart .chart__axis--context line,#comAcValueChart .chart__axis--context path,#eqAcValueChart .chart__axis--context .tick:nth-child(odd),#eqAcValueChart .chart__axis--context line,#eqAcValueChart .chart__axis--context path {
display: none
}

#comAcValueChart .chart__area,#eqAcValueChart .chart__area {
fill: #e6f6fe;
stroke: #3587bc
}

#comAcValueChart .selection,#eqAcValueChart .selection {
fill: #e2f0ff;
fill: #3587bc;
fill-opacity: .3
}

#comAcValueChart .grid line,#eqAcValueChart .grid line {
stroke: #d3d3d3;
stroke-opacity: .6;
shape-rendering: crispEdges
}

#comAcValueChart .grid path,#eqAcValueChart .grid path {
stroke-width: 0
}

#comAcValueChart .y.axis path,#eqAcValueChart .y.axis path {
color: #e8e8e8
}

#comAcValueChart .y.axis .tick,#eqAcValueChart .y.axis .tick {
color: #8c8b8b
}

#comAcValueChart .x.axis path,#eqAcValueChart .x.axis path {
color: #e8e8e8
}

#comAcValueChart .x.axis .tick,#eqAcValueChart .x.axis .tick {
color: #8c8b8b
}

.page-container.holdings .head-section {
margin-bottom: 40px
}

.page-container.holdings .close-mobile-filter {
display: none
}

.page-container.holdings .icon-times {
width: 22px;
height: 22px;
border-radius: 50%!important;
padding: 0!important
}

.page-container.holdings .icon-times:before {
position: relative;
left: 2.5px;
top: 0
}

.page-container.holdings .icon-times:hover {
background: #ccc
}

.page-container.holdings .family-web-apply button {
margin-right: 15px
}

.page-container.holdings .donut-reset {
margin: 0;
position: relative;
top: 15px
}

.page-container.holdings .symbol [data-balloon][data-balloon-pos=up]:after {
left: calc(50% + 85px)
}

.page-container.holdings .no-family .state-process-container {
width: 450px
}

.page-container.holdings .no-family a.btn {
font-size: .875rem;
padding: 7px 15px;
font-weight: 400;
line-height: 21px;
height: 38px;
-webkit-appearance: button;
cursor: pointer;
box-sizing: border-box
}

.page-container.holdings .no-family img {
width: 270px;
height: auto
}

.page-container.holdings .pull-up-section {
top: -70px
}

.page-container.holdings .family-card-box {
max-height: 235px;
overflow: scroll
}

.page-container.holdings .summary-breakdown {
margin-bottom: 5px;
font-size: 14px;
margin-top: 20px
}

.page-container.holdings .summary-breakdown .icon {
margin-left: 10px
}

.page-container.holdings .summary-breakdown-container {
padding-top: 25px;
border-top: 1px solid #eee;
margin-top: 20px
}

.page-container.holdings .summary-breakdown-container .table-container {
max-height: 350px
}

.page-container.holdings #family_donut .data-path:hover {
cursor: pointer
}

.page-container.holdings #family_donut .data-text {
transition: transform .2s ease-in-out;
fill: #666
}

.page-container.holdings #family_donut .data-text__section {
font-size: 1rem;
transform: translateY(-.5rem);
-moz-transform: translateY(0);
opacity: 0
}

.page-container.holdings #family_donut .data-text__value {
font-size: 1rem;
transform: translateY(.15rem);
-moz-transform: translateY(1.5rem);
opacity: 0;
fill: #444
}

.page-container.holdings #family_donut .data-text__name {
font-size: .85rem;
transform: translateY(-1.5rem);
-moz-transform: translateY(-.25rem);
opacity: 0
}

.page-container.holdings #family_donut .data-text--show {
-webkit-animation: fadeGraphTextIn .5s forwards;
animation: fadeGraphTextIn .5s forwards
}

.page-container.holdings #family_donut .data-text:hover {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

.page-container.holdings #family_donut .legend-text {
fill: #fff
}

.page-container.holdings .summary-breakdown-table tbody tr td {
vertical-align: middle!important
}

.page-container.holdings .summary-breakdown-card .summary-clientid {
position: relative;
left: 5px;
top: 2px
}

.page-container.holdings .summary-breakdown-card .top-left {
flex: 20!important
}

.page-container.holdings .summary-breakdown-card .bottom-left label,.page-container.holdings .summary-breakdown-card .middle-left label {
width: 57px
}

.page-container.holdings .family-card {
position: relative;
padding: 12px 0 12px 20px;
border-bottom: 1px solid #eee
}

.page-container.holdings .family-card .family-checkbox-label {
color: initial!important
}

.page-container.holdings .family-card .family-checkbox-label .family-name {
text-transform: capitalize
}

.page-container.holdings .family-card input {
visibility: hidden;
position: absolute
}

.page-container.holdings .family-card .checkmark {
position: absolute;
top: 12px;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border-radius: 50%
}

.page-container.holdings .family-card .checkmark:after {
left: 6px;
top: 3px;
width: 5px;
height: 10px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg)
}

.page-container.holdings .family-card input:checked~.checkmark {
background-color: #0059c1
}

.page-container.holdings .family-card .checkmark:after {
content: "";
position: absolute;
display: none
}

.page-container.holdings .family-card input:checked~.checkmark:after {
display: block
}

.page-container.holdings .mobile-agg {
padding-left: 25px!important;
padding-right: 25px!important;
padding-top: 15px!important;
padding-bottom: 10px!important;
top: -115px!important
}

.page-container.holdings .mobile-agg hr {
width: calc(100% + 52px);
position: relative;
left: -26px;
margin-top: 15px;
margin-bottom: 10px
}

.page-container.holdings .mobile-agg h1 {
margin-bottom: 0
}

.page-container.holdings .mobile-agg .row:last-child h1 {
margin-top: 0
}

.page-container.holdings .mobile-agg .block {
margin-bottom: 10px
}

.page-container.holdings .mobile-agg .eight {
flex-basis: 120%;
padding-left: 30px
}

.page-container.holdings .blocked-qty {
color: #666;
font-weight: 600;
font-size: .875rem;
display: inline-block
}

.page-container.holdings .include-mf {
margin-top: 15px;
margin-bottom: 60px;
margin-right: 10px
}

.page-container.holdings .include-mf .su-checkbox-group {
display: inline-block
}

.page-container.holdings .mf-weightage {
padding: 3px 10px;
text-transform: uppercase;
display: inline-block;
border-radius: 2px;
font-size: 10px;
text-align: center;
line-height: 1.4!important;
color: #4184f3;
background-color: rgba(65,132,243,.1);
position: relative;
top: -3px
}

.page-container.holdings .filter-component .su-input-label {
z-index: 999;
line-height: 1!important;
top: -6px
}

.page-container.holdings .table-link-container {
display: inline-block;
float: right
}

.page-container.holdings .table-link-container .scroll-discrepant {
font-size: 1rem;
position: relative;
top: 1px;
right: 10px;
padding: 10px
}

.page-container.holdings .table-link-container .scroll-discrepant:hover {
opacity: .9;
cursor: pointer
}

.page-container.holdings .table-link-container .scroll-discrepant img {
position: relative;
top: 3px;
height: 16px;
margin-right: 2px
}

.page-container.holdings #account_chart .data-path:hover,.page-container.holdings #sector_chart .data-path:hover,.page-container.holdings #stock_chart .data-path:hover {
cursor: pointer
}

.page-container.holdings #account_chart .data-text,.page-container.holdings #sector_chart .data-text,.page-container.holdings #stock_chart .data-text {
transition: transform .2s ease-in-out;
fill: #666
}

.page-container.holdings #account_chart .data-text__section,.page-container.holdings #sector_chart .data-text__section,.page-container.holdings #stock_chart .data-text__section {
font-size: 1rem;
transform: translateY(-.5rem);
-moz-transform: translateY(0);
opacity: 0
}

.page-container.holdings #account_chart .data-text__value,.page-container.holdings #sector_chart .data-text__value,.page-container.holdings #stock_chart .data-text__value {
font-size: 1rem;
transform: translateY(.15rem);
-moz-transform: translateY(1.5rem);
opacity: 0;
fill: #444
}

.page-container.holdings #account_chart .data-text__name,.page-container.holdings #sector_chart .data-text__name,.page-container.holdings #stock_chart .data-text__name {
font-size: .85rem;
transform: translateY(-1.5rem);
-moz-transform: translateY(-.25rem);
opacity: 0
}

.page-container.holdings #account_chart .data-text--show,.page-container.holdings #sector_chart .data-text--show,.page-container.holdings #stock_chart .data-text--show {
-webkit-animation: fadeGraphTextIn .5s forwards;
animation: fadeGraphTextIn .5s forwards
}

.page-container.holdings #account_chart .data-text:hover,.page-container.holdings #sector_chart .data-text:hover,.page-container.holdings #stock_chart .data-text:hover {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}

.page-container.holdings #account_chart .legend-text,.page-container.holdings #sector_chart .legend-text,.page-container.holdings #stock_chart .legend-text {
fill: #fff
}

@keyframes fadeGraphTextIn {
0% {
opacity: 0
}

to {
opacity: 1
}
}

.page-container.holdings #stock_chart .data-text__section {
font-size: .85rem
}

.page-container.holdings #stock_chart .data-text__value {
font-size: .875rem
}

.page-container.holdings #stock_chart .data-text__name {
font-size: .75rem;
transform: translateY(-1.25rem)
}

.page-container.holdings #insights_frame {
display: inline-block;
margin: 0;
margin-top: 30px;
height: 450px;
max-width: 620px;
width: 100%;
border: none
}

.page-container.holdings .iframe-side-container {
display: inline-block;
vertical-align: top;
min-width: 200px;
padding-left: 40px
}

.page-container.holdings .iframe-side-container div:first-child:not(.iframe-tags) {
margin-top: 35px
}

.page-container.holdings .iframe-side-container .iframe-tags {
padding: 10px;
border-bottom: 1px solid #eee;
position: relative
}

.page-container.holdings .iframe-side-container .iframe-tags:hover {
cursor: pointer;
background: #f4f4f4
}

.page-container.holdings .iframe-side-container .iframe-tags.active {
background: #f4f4f4
}

.page-container.holdings .iframe-side-container .iframe-tags.active:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 22px solid transparent;
border-right: 22px solid #f4f4f4;
border-bottom: 22px solid transparent;
display: inline-block;
left: -21px;
top: 0
}

.page-container.holdings .iframe-side-container .iframe-tags .iframe-tag-name {
display: inline-block;
margin-right: 20px;
font-size: .85rem
}

.page-container.holdings .iframe-side-container .iframe-tags .iframe-tag-type {
display: inline-block;
float: right;
padding: 3px 5px 3px 5px;
border-radius: 3px;
line-height: 1.7;
text-transform: uppercase;
font-size: .675rem;
line-height: 1.9
}

.page-container.holdings .iframe-side-container .iframe-tags .iframe-tag-type.sector-tag {
background: rgba(0,84,198,.2);
color: #0059c1
}

.page-container.holdings .iframe-side-container .iframe-tags .iframe-tag-type.stock-tag {
background: rgba(255,196,61,.2);
color: #ca9a2d
}

.page-container.holdings .mf-compo-container {
max-width: 530px!important
}

.page-container.holdings .holdings-total .triangle {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
margin-right: 3px;
position: relative
}

.page-container.holdings .holdings-total .triangle.pos {
vertical-align: middle;
bottom: 7px;
border-bottom: 11px solid #555;
border-bottom-color: #10b983
}

.page-container.holdings .holdings-total .triangle.neg {
top: 6px;
vertical-align: middle;
border-top: 12px solid #555;
border-top-color: #f35631
}

.page-container.holdings .tab {
padding: 10px 20px;
display: inline-block;
border-bottom: 1px solid #eee;
position: relative;
top: 1px;
text-align: center;
cursor: pointer;
min-width: 150px;
box-sizing: border-box
}

.page-container.holdings .tab.active {
border-bottom: 2px solid #0059c1
}

.page-container.holdings .chart-switch .treemap-share-link {
position: relative;
top: 1px;
font-size: 16px;
color: #0059c1
}

.page-container.holdings .chart-switch .treemap-share-link:hover {
cursor: pointer;
opacity: .7
}

.page-container.holdings .chart-switch .treemap-share-link img {
height: 16px;
position: relative;
top: 2px
}

.page-container.holdings .clear {
position: absolute;
border-radius: 50%;
font-size: 12px;
right: 0;
z-index: 1;
top: 10px;
right: 10px;
cursor: pointer;
background: #eee;
left: auto
}

.page-container.holdings .donut-container {
margin-top: 25px;
position: relative
}

.page-container.holdings .donut-container .donut-chart-container {
margin-top: 10px
}

.page-container.holdings .donut-container .donut-chart-container .chart-columns:first-child {
margin-left: 0!important
}

.page-container.holdings .donut-container .donut-chart-container .chart-columns h2 {
font-size: 16px;
width: 78px;
text-align: center;
border-radius: 3px;
padding: 1px 0
}

.page-container.holdings .donut-container .switches {
margin-bottom: 10px
}

.page-container.holdings .donut-container .donut-chart {
display: inline-block!important;
width: 180px;
height: 180px;
box-sizing: border-box
}

.page-container.holdings .donut-container ::-webkit-scrollbar {
width: 3px
}

.page-container.holdings .donut-container ::-webkit-scrollbar-track {
background: #fff
}

.page-container.holdings .donut-container ::-webkit-scrollbar-thumb {
background: #e0e3ec
}

.page-container.holdings .donut-container ::-webkit-scrollbar-thumb:hover {
background: #555;
width: 3px
}

.page-container.holdings .donut-container [data-balloon]:after {
max-width: 90px;
font-size: 10px;
padding: 3px 10px 5px 10px;
white-space: normal
}

.page-container.holdings .donut-container [data-balloon][data-balloon-pos=down]:after,.page-container.holdings .donut-container [data-balloon][data-balloon-pos=down]:before {
top: 80%
}

.page-container.holdings .donut-container [data-balloon][data-balloon-pos=up]:after,.page-container.holdings .donut-container [data-balloon][data-balloon-pos=up]:before {
bottom: 80%
}

.page-container.holdings .donut-container .labels {
display: inline-block;
width: 150px;
vertical-align: top;
margin-left: 15px;
margin-top: 15px;
max-height: 170px;
height: 170px;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: green
}

.page-container.holdings .donut-container .labels .label {
display: block;
font-size: .75rem;
line-height: 1rem;
padding: 3px;
border-radius: 2px;
margin-bottom: 5px;
max-width: 135px;
color: #666
}

.page-container.holdings .donut-container .labels .label .label-weight {
float: right
}

.page-container.holdings .donut-container .labels .label.active {
background: #eee
}

.page-container.holdings .donut-container .labels .label:hover {
cursor: pointer
}

.page-container.holdings .donut-container .labels .label .label-name {
display: inline-block
}

.page-container.holdings .donut-container .labels .label .label-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
left: 8px;
top: 0;
margin-right: 4px
}

.page-container.holdings #logo_img {
display: none;
position: relative;
top: -5px
}

.page-container.holdings .treemap-container {
margin-top: 25px
}

.page-container.holdings .treemap-container #treemap_share_container {
width: 100%
}

.page-container.holdings .treemap-container h2 span:hover {
cursor: pointer
}

.page-container.holdings .treemap-container #treemap_stats {
display: none;
text-align: center;
margin: 0 auto;
position: relative;
height: 65px;
top: -60px
}

.page-container.holdings .treemap-container #treemap_stats span.stats-obj {
color: #9b9b9b;
width: 550px;
display: block
}

.page-container.holdings .treemap-container #treemap_stats span.stats-obj span {
display: block;
text-align: center;
font-size: 16px;
margin-top: 10px;
color: #0059c1;
font-weight: 600
}

.page-container.holdings .treemap-container #treemap_stats span.stats-obj span i {
font-style: normal
}

.page-container.holdings .treemap-container #treemap_stats span.stats-obj:first-child {
margin-bottom: 0
}

.page-container.holdings .treemap-container #treemap_stats span.stats-obj:last-child {
border-left: 2px solid #e1e1e1;
padding-left: 2%;
margin-left: 2%;
position: relative;
left: 550px;
bottom: 55px
}

.page-container.holdings .smallcase-wrapper .modal-container {
width: 630px;
padding: 10px 20px!important
}

.page-container.holdings .iframe-container {
overflow: auto
}

.page-container.holdings .iframe-container iframe {
border: none;
width: 100%;
height: 350px
}

.page-container.holdings .table-download {
margin-bottom: 0!important
}

.page-container.holdings .table-download a:hover {
color: #444!important
}

.page-container.holdings .table-download:hover {
cursor: default!important;
opacity: 1!important
}

.page-container.holdings .download-link {
border-left: 1px solid #4184f3;
padding-left: 25px
}

.page-container.holdings .inputcontainer .two {
width: 10.33333%
}

.page-container.holdings .inputcontainer .three:not(.gift-inputs) {
width: 25%
}

.page-container.holdings .inputs-collapsed .filters .filter-filter {
background: rgba(194,112,200,.2);
color: #c270c8
}

.page-container.holdings .section .filters .manage-tags-link {
display: inline-block;
float: right;
position: relative;
top: 12px;
font-size: 12px
}

.page-container.holdings .section .filters .filters-list {
display: inline-block
}

.page-container.holdings .section .filters .filters-label {
margin-bottom: 5px;
margin-top: 8px
}

.page-container.holdings .section .su-checkbox-group {
line-height: 1.4
}

.page-container.holdings .section .su-checkbox-group .su-checkbox-box {
top: 3px
}

.page-container.holdings .section .unpledge-modal input {
position: relative;
top: 3px
}

.page-container.holdings .section .unpledge-modal .holdings-modal-label {
min-width: auto!important
}

.page-container.holdings .section .cancel-pledge-modal .modal-container,.page-container.holdings .section .unpledge-modal .modal-container {
width: 555px
}

.page-container.holdings .section .cancel-pledge-modal button[disabled],.page-container.holdings .section .pledge-modal button[disabled] {
background: #9b9b9b;
border: 1px solid #9b9b9b;
border-radius: 2px;
color: #fff
}

.page-container.holdings .section .pledge-modal .modal-container {
max-height: 100vh;
overflow: auto
}

.page-container.holdings .section .disc-list-container {
max-height: 60vh;
overflow: auto
}

.page-container.holdings .section .disc-list {
padding: 20px 10px;
border-bottom: 1px solid #f1f1f1;
overflow: auto
}

.page-container.holdings .section .disc-list:hover {
cursor: pointer;
background: #fafafb
}

.page-container.holdings .section .disc-list span.status-flag {
background: rgba(255,85,85,.15);
color: #f6461a;
font-size: .875rem;
padding: 3px 11px;
border-radius: 2px;
min-width: 105px;
text-align: center;
display: inline-block;
float: right
}

.page-container.holdings .section .disc-list span.instrument-name {
max-width: 55%;
display: inline-block;
overflow: hidden;
word-break: break-word
}

.page-container.holdings .section .activeInstrument {
background: #fafafb
}

.page-container.holdings .section .disc-info {
padding-left: 30px;
border-left: 1px solid #f1f1f1
}

.page-container.holdings .section .discrepant-link {
float: right;
font-size: 1rem
}

.page-container.holdings .section .discrepant-link a {
text-decoration: none
}

.page-container.holdings .section .discrepant-link a img {
position: relative;
top: 5px
}

.page-container.holdings .section .add-trade-container {
line-height: 37px;
margin-bottom: 0
}

.page-container.holdings .section #external_trades .context-menu {
visibility: hidden
}

.page-container.holdings .section #external_trades tbody tr td:first-child,.page-container.holdings .section #external_trades thead tr td:first-child {
width: 230px
}

.page-container.holdings .section #external_trades tbody tr:hover .context-menu {
visibility: visible
}

.page-container.holdings .section #external_trades tr {
border-bottom: 1px solid #f1f1f1;
padding: 10px 5px
}

.page-container.holdings .section #external_trades thead {
color: #9b9b9b
}

.page-container.holdings .section #external_trades .delete-disc,.page-container.holdings .section #external_trades .edit-disc {
display: none;
width: .875rem
}

.page-container.holdings .section #external_trades .delete-disc:hover,.page-container.holdings .section #external_trades .edit-disc:hover {
cursor: pointer
}

.page-container.holdings .section #external_trades .edit-disc {
position: relative;
right: 15px
}

.page-container.holdings .section #external_trades tbody tr:hover {
background: #fafafb
}

.page-container.holdings .section #external_trades tbody tr:hover .delete-disc,.page-container.holdings .section #external_trades tbody tr:hover .edit-disc {
display: inline
}

.page-container.holdings .section #external_trades tbody tr td:last-child {
min-width: 40px
}

.page-container.holdings .section #external_trades tbody .pending-flag {
background: rgba(255,202,85,.15);
color: #f8ab00;
text-transform: uppercase;
font-size: .6875rem;
padding: 3px 11px;
border-radius: 2px;
position: relative;
left: 20px
}

.page-container.holdings .section .add-external-trade {
float: right
}

.page-container.holdings .section .trade-type {
padding: 3px 10px;
text-transform: uppercase;
display: inline-block;
border-radius: 2px;
font-size: 10px;
text-align: center;
line-height: 1.4!important;
color: #4184f3;
background-color: rgba(65,132,243,.1);
margin-left: 10px
}

.page-container.holdings .section .modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
display: table;
transition: opacity .3s ease
}

.page-container.holdings .section .modal-wrapper {
display: table-cell;
vertical-align: middle
}

.page-container.holdings .section .smallcase-modal {
padding: 20px 0!important
}

.page-container.holdings .section .smallcase-modal .modal-body {
margin: 0!important
}

.page-container.holdings .section .modal-container {
margin: 0 auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0,0,0,.33);
box-sizing: border-box;
transition: all .3s ease;
max-width: 100%
}

.page-container.holdings .section .modal-body,.page-container.holdings .section .modalbody {
margin: 20px 0
}

.page-container.holdings .section .modal-body .holdings-breakdown-name,.page-container.holdings .section .modalbody .holdings-breakdown-name {
margin: 0
}

.page-container.holdings .section .modal-body .modal-separator,.page-container.holdings .section .modalbody .modal-separator {
margin: 20px 0
}

.page-container.holdings .section .modal-body .holdings-breakdown-qty,.page-container.holdings .section .modalbody .holdings-breakdown-qty {
margin-bottom: 20px
}

.page-container.holdings .section .modal-body .holdings-breakdown-qty .five.borderRight,.page-container.holdings .section .modalbody .holdings-breakdown-qty .five.borderRight {
border-right: 1px solid #e1e1e1
}

.page-container.holdings .section .modal-body .holdings-modal-label,.page-container.holdings .section .modalbody .holdings-modal-label {
position: relative;
margin-right: 5px;
min-width: 30px;
display: inline-block
}

.page-container.holdings .section .modal-body select:disabled,.page-container.holdings .section .modalbody select:disabled {
background-color: #fff;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0h1L0 6V5zm1 5v1H5z' fill='%23ddd' fill-rule='evenodd'/%3E%3C/svg%3E")!important;
color: #ccc;
cursor: not-allowed;
box-sizing: border-box;
padding: 6px;
border-color: transparent
}

.page-container.holdings .section .modal-default-button {
position: absolute;
top: 0;
right: 0;
background: none;
border: none;
font-size: 22px!important;
padding: 0
}

.page-container.holdings .section .modal-enter,.page-container.holdings .section .modal-leave-active {
opacity: 0
}

.page-container.holdings .section .modal-enter .modal-container,.page-container.holdings .section .modal-leave-active .modal-container {
transform: scale(1.1)
}

.page-container.holdings .section input {
max-width: 100%
}

.page-container.holdings .section .last-updated {
float: left;
margin-bottom: 0!important
}

@media only screen and (max-width: 800px) {
.page-container.holdings .section .tab {
padding:10px 5px
}

.page-container.holdings .section .table-sort.no-float {
float: none!important
}

.page-container.holdings .section .summary-breakdown {
padding-left: 10px
}

.page-container.holdings .section .family-filter {
padding: 0 10px
}

.page-container.holdings .section .family-link {
font-size: 16px;
padding: 10px 0 15px 0;
display: block;
border-bottom: 1px solid #eee;
margin-bottom: 20px
}

.page-container.holdings .section .family-link .family-head span {
margin-left: 10px
}

.page-container.holdings .section .family-link .icon,.page-container.holdings .section .family-list .select-links a:last-child {
float: right
}

.page-container.holdings .section .disc-info {
padding-left: 0;
border: none
}

.page-container.holdings .section .open-side-nav {
margin-top: 20px;
font-size: 1rem
}

.page-container.holdings .section .mobileFilter .ti-new-tag-input-wrapper input {
pointer-events: none
}

.page-container.holdings .section .mobileFilter.mobile {
background: #fff;
z-index: 9999;
position: absolute;
top: 0;
left: 0;
right: 0;
max-height: 100vh;
height: 100vh;
overflow: auto;
display: block
}

.page-container.holdings .section .mobileFilter.mobile .close-mobile-filter {
width: 15%;
display: inline-block;
z-index: 999;
color: #0059c1;
position: absolute;
top: 10px;
left: 10px;
font-size: 1.5rem
}

.page-container.holdings .section .mobileFilter.mobile label {
display: none
}

.page-container.holdings .section .mobileFilter.mobile .filter-box {
margin-top: 5px
}

.page-container.holdings .section .mobileFilter.mobile .filter-link {
max-width: 83%!important;
margin-left: 14%;
z-index: 99
}

.page-container.holdings .section .mobileFilter.mobile .filters {
max-height: 100vh!important;
box-sizing: border-box;
height: 100vh
}

.page-container.holdings .section .mobileFilter.mobile .ti-autocomplete {
max-height: 400px!important
}

.page-container.holdings .section .mobileFilter.mobile .ti-new-tag-input-wrapper input {
pointer-events: auto
}

.page-container.holdings .section .tab {
min-width: 33%
}

.page-container.holdings .section .chart-columns {
display: block
}

.page-container.holdings .section .holdings-total {
padding: 10px!important;
max-width: 800px;
line-height: 1.8;
border-radius: 2px
}

.page-container.holdings .section .holdings-total .primary-stats-holdings {
border-right: 1px solid #e1e1e1;
width: 45%
}

.page-container.holdings .section .holdings-total .primary-stats-holdings div.label {
color: #9b9b9b
}

.page-container.holdings .section .holdings-total .primary-stats-holdings .profit-agg .total-unrealized-profit {
font-size: 30px
}

.page-container.holdings .section .holdings-total label {
display: block;
font-size: 1rem!important;
color: #9b9b9b
}

.page-container.holdings .section .holdings-total .secondary-stats-holdings {
padding-left: 16px;
margin-top: 5px
}

.page-container.holdings .section .holdings-total .secondary-stats-holdings .block {
margin-bottom: 10px
}

.page-container.holdings .section .holdings-total .secondary-stats-holdings .block span.label {
color: #9b9b9b
}

.page-container.holdings .section .holdings-total .secondary-stats-holdings .block span.value {
font-size: 16px;
padding-left: 5px
}

.page-container.holdings .section .holdings-total .six-columns {
min-width: 120px;
float: left
}

.page-container.holdings .section .holdings-total .pos {
color: #10b983
}

.page-container.holdings .section .holdings-total .neg {
color: #f35631
}

.page-container.holdings .section .last-updated {
display: inline-block!important
}
}

@media only screen and (min-width: 800px) {
.page-container.holdings .section .family-card {
display:inline-block;
border: 1px solid #eee;
box-sizing: border-box;
padding: 8px 20px;
margin-right: 10px;
margin-bottom: 10px
}

.page-container.holdings .section .family-card:hover {
cursor: pointer
}

.page-container.holdings .section .family-card .family-checkbox-label {
line-height: 19px!important
}

.page-container.holdings .section .family-card .family-checkbox-label:hover {
cursor: pointer
}

.page-container.holdings .section .family-card .family-name {
margin-right: 15px;
margin-left: 20px;
max-width: 100px;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
white-space: nowrap;
box-sizing: border-box;
text-transform: capitalize
}

.page-container.holdings .section .family-card .family-id {
display: inline-block;
box-sizing: border-box;
vertical-align: top
}

.page-container.holdings .section .family-card .checkmark {
margin-left: 10px;
top: 8px
}

.page-container.holdings .section .family-account-web {
border-bottom: 1px solid #eee;
margin-bottom: 23px
}

.page-container.holdings .section .family-account-web .child-selected {
margin-left: 20px;
font-size: 16px
}

.page-container.holdings .section .family-account-web .icon {
color: #0059c1;
font-size: 18px;
padding: 8px
}

.page-container.holdings .section .family-account-web .icon:hover {
cursor: pointer
}

.page-container.holdings .section .family-switch {
margin-bottom: 35px;
border-bottom: 1px solid #eee
}

.page-container.holdings .section .family-switch span {
padding: 10px 10px;
display: inline-block;
min-width: 125px;
text-align: center
}

.page-container.holdings .section .family-switch span.active {
border-bottom: 2px solid #0059c1;
color: #0059c1
}

.page-container.holdings .section .family-switch span:hover {
cursor: pointer
}

.page-container.holdings .section .filter-component {
perspective: 600px;
z-index: 1
}

.page-container.holdings .section .donut-switch {
position: absolute;
top: -50px;
right: 20px
}

.page-container.holdings .section .holdings-total {
padding: 30px;
border-radius: 2px;
margin-top: 5px;
box-shadow: 0 1px 5px rgba(0,0,0,.1);
margin-bottom: 35px
}

.page-container.holdings .section .holdings-total h3 {
display: inline-block;
margin-top: 10px;
margin-bottom: 0;
font-size: 22px
}

.page-container.holdings .section .holdings-total label {
display: block;
font-size: 1rem!important;
color: #9b9b9b
}

.page-container.holdings .section .holdings-total .profit-agg label {
display: block
}

.page-container.holdings .section .holdings-total .profit-agg h3 {
display: inline-block
}

.page-container.holdings .section .holdings-total .profit-agg .holdings-profit-percent {
position: relative;
left: 10px
}

.page-container.holdings .section .holdings-total .profit-agg .pos {
color: #10b983
}

.page-container.holdings .section .holdings-total .profit-agg .neg {
color: #f35631
}
}

.page-container.holdings .section .filter-table {
display: inline-block;
position: relative;
float: right;
min-width: 60px;
margin-bottom: 3px;
margin-right: 10px;
margin-left: 10px
}

.page-container.holdings .section .filter-table .filter-link {
font-size: .875rem;
font-weight: 600;
color: #0059c1
}

.page-container.holdings .section .filter-table .filter-link img {
height: 12px;
position: relative;
top: 1px;
margin-right: 1px
}

.page-container.holdings .section .filter-table:hover .filter-link {
cursor: pointer;
opacity: .8
}

.page-container.holdings .section .filter-dropdown {
top: 35px;
right: 0;
z-index: 9999;
cursor: pointer;
text-align: left;
min-width: 175px;
position: absolute;
border-style: solid;
border-width: 0 1px 1px 1px;
border-color: #eee;
background: #fff;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.1)
}

.page-container.holdings .section .filter-dropdown hr {
margin: 0
}

.page-container.holdings .section .filter-dropdown li {
font-size: 12px;
display: inline-block;
vertical-align: middle;
line-height: 35px;
padding: 5px 10px;
color: #4a4a4a;
width: 100%;
box-sizing: border-box
}

.page-container.holdings .section .filter-dropdown li:hover {
background: #fafafb
}

.page-container.holdings .section .search-table {
position: relative!important;
margin-bottom: 0!important;
right: 0!important;
float: right
}

.page-container.holdings .section .holdings-breakdown-table .family-comp .family-clientid,.page-container.holdings .section .holdings-table .family-comp .family-clientid {
display: inline-block;
margin-right: 7px
}

.page-container.holdings .section .holdings-breakdown-table .family-comp .family-split,.page-container.holdings .section .holdings-table .family-comp .family-split {
display: inline-block;
padding: 3px 5px;
border-radius: 2px;
font-size: 10px;
text-align: center;
line-height: 1.4!important;
color: #4184f3;
background-color: rgba(65,132,243,.1);
margin-right: 10px
}

.page-container.holdings .section .holdings-table span.symbol {
max-width: 80%;
display: inline-block
}

.page-container.holdings .section .holdings-table span.symbol .detailed-symbol {
display: inline-block;
padding: 3px 5px;
text-transform: uppercase;
border-radius: 2px;
font-size: 10px;
text-align: center;
line-height: 1.4!important;
color: #4184f3;
background-color: rgba(65,132,243,.1)
}

.page-container.holdings .section .holdings-table span.symbol .detailed-symbol .name {
margin-right: 10px
}

.page-container.holdings .section .holdings-table .flag-container {
position: absolute;
right: 0;
display: inline-block
}

.page-container.holdings .section .holdings-table .status-flag {
display: inline-block;
color: #f6461a;
font-size: .75rem;
font-weight: 600;
border-radius: 2px;
margin-right: 10px;
text-align: center
}

.page-container.holdings .section .holdings-table .status-flag a {
color: #f6461a!important;
display: inline-block;
width: 100%;
padding: 0 5px;
box-sizing: border-box
}

.page-container.holdings .section .holdings-table .status-flag a.text-grey {
color: #666!important
}

.page-container.holdings .section .holdings-table .status-flag img {
width: 11px;
position: relative;
top: 1px
}

.page-container.holdings .section .holdings-table .status-flag.longterm-flag {
color: #4caf50!important
}

.page-container.holdings .section .holdings-table .status-flag.shortterm-flag {
color: #387ed1!important
}

.page-container.holdings .section .holdings-table .context-menu {
float: none!important;
margin-right: 10px;
position: relative;
top: 2px
}

.page-container.holdings .section .holdings-table .context-menu img {
width: 14px;
position: relative;
top: 2px;
left: 2px;
margin-right: 9px
}

.page-container.holdings .section .holdings-table .pledge-flag {
display: inline-block;
color: #c0890e;
font-size: .75rem;
font-weight: 600;
border-radius: 2px;
text-align: center;
margin-right: 10px
}

.page-container.holdings .section .holdings-table .pledge-flag a {
color: #c0890e!important;
display: inline-block;
width: 100%;
padding: 0 5px;
box-sizing: border-box
}

.page-container.holdings .section .holdings-table .pledge-flag img {
width: 11px;
position: relative;
top: 1px
}

.page-container.holdings .section .holdings-table .pledge-flag.loan-flag {
color: #0059c1
}

.page-container.holdings .section .holdings-table .pending-pledge,.page-container.holdings .section .holdings-table .pending-unpledge {
border: 1px solid #c0890e;
padding: 0 5px;
line-height: 1.8
}

.page-container.holdings .section .holdings-table .table-tags {
max-width: 290px;
word-wrap: break-word;
line-height: 1;
margin-top: 3px
}

.page-container.holdings .section .holdings-table .table-tags a {
display: inline-block;
font-size: 10px;
text-decoration: underline;
margin-right: 10px;
color: #9b9b9b!important
}

.page-container.holdings .section .holdings-table .table-tags a:hover {
color: #0059c1!important
}

.page-container.holdings .section .holdings-table .context-menu {
visibility: hidden
}

.page-container.holdings .section .holdings-table tbody tr td,.page-container.holdings .section .holdings-table thead tr td {
text-align: right
}

.page-container.holdings .section .holdings-table tbody tr td:first-child,.page-container.holdings .section .holdings-table thead tr td:first-child {
position: relative;
text-align: left!important
}

.page-container.holdings .section .holdings-table tbody tr td:first-child .arrow,.page-container.holdings .section .holdings-table thead tr td:first-child .arrow {
float: right!important
}

.page-container.holdings .section .holdings-table tbody tr th:first-child,.page-container.holdings .section .holdings-table thead tr th:first-child {
min-width: 220px;
text-align: left!important
}

.page-container.holdings .section .holdings-table tbody tr th:first-child .arrow,.page-container.holdings .section .holdings-table thead tr th:first-child .arrow {
float: right!important
}

.page-container.holdings .section .holdings-table thead tr {
border-top: 1px solid #f1f1f1
}

.page-container.holdings .section .holdings-table thead tr .sorted {
background: #fafafb
}

.page-container.holdings .section .holdings-table thead th {
cursor: pointer;
font-size: .85rem;
font-weight: 400;
color: #9b9b9b
}

.page-container.holdings .section .holdings-table thead th:hover {
background: #fafafb
}

.page-container.holdings .section .holdings-table thead th:hover .arrow {
opacity: 1
}

.page-container.holdings .section .holdings-table thead .arrow-show {
opacity: 1;
background: #fafafb
}

.page-container.holdings .section .holdings-table tbody tr:hover .context-menu {
visibility: visible
}

.page-container.holdings .section .holdings-table tbody tr:hover {
background: #fafafb
}

.page-container.holdings .section .holdings-table tr {
border-bottom: 1px solid #f1f1f1
}

.page-container.holdings .section .holdings-table .arrow {
display: inline-block;
float: left;
position: relative;
top: 7px;
border: solid #9b9b9b;
border-width: 0 1px 1px 0;
padding: 3px;
opacity: 0
}

.page-container.holdings .section .holdings-table .arrow.asc {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg)
}

.page-container.holdings .section .holdings-table .arrow.desc {
transform: rotate(45deg);
-webkit-transform: rotate(45deg)
}

.page-container.holdings .holdings-treemap {
margin-bottom: 40px;
min-height: 85px
}

.page-container.holdings .holdings-treemap h2 .sector-icon {
position: relative;
top: 4px
}

.page-container.holdings .holdings-treemap h2 span {
font-size: 14px;
font-weight: 600;
color: #0059c1;
top: -2px;
left: 15px;
margin-right: 10px
}

.page-container.holdings .holdings-treemap h2 span:hover {
cursor: pointer
}

.page-container.holdings .holdings-treemap h2 span img {
height: 18px;
margin-right: 4px;
vertical-align: middle
}

.page-container.holdings .holdings-treemap #treemap_view_types {
float: right;
bottom: 50px;
position: relative
}

.page-container.holdings .holdings-treemap .treemap-source {
position: relative
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio-wrap {
margin-right: 0
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio-wrap:first-child label {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 1px solid #9b9b9b;
margin-right: 10px;
padding-right: 20px
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio-wrap:last-child label {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio+.su-radio-label:before {
border: none;
width: auto;
height: auto;
padding: 0;
margin: 0
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio:checked+.su-radio-label:before {
background: #fff;
padding: 0;
box-shadow: none;
border: none
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio-label {
border-radius: 3px;
padding: 0 5px;
text-align: center;
font-size: 1rem!important;
line-height: 1.1;
letter-spacing: .3px
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio-label:hover {
color: #0059c1!important
}

.page-container.holdings .holdings-treemap .treemap-source .su-radio-group .su-radio:checked+.su-radio-label {
color: #0059c1!important;
font-weight: 600
}

.page-container.holdings .holdings-treemap .node {
font-size: 11px;
color: #fff;
line-height: 12px;
position: absolute;
padding-top: 5px;
padding-left: 6px
}

.page-container.holdings .holdings-treemap .chart-action {
color: #0059c1;
font-weight: 600
}

.page-container.holdings .holdings-treemap .chart-action:hover {
cursor: pointer;
color: #444
}

.page-container.holdings .holdings-treemap .chart-action img {
height: 14px;
width: auto;
vertical-align: middle
}

.page-container.holdings .holdings-treemap .chart-action span {
margin-left: 2px
}

.page-container.holdings .holdings-treemap .chart .chart-action,.page-container.holdings .holdings-treemap .chart form {
display: inline-block
}

.page-container.holdings .holdings-treemap .chart .canvas {
margin-bottom: 10px
}

.page-container.holdings .holdings-dividend-container .notice {
margin-bottom: 0!important;
margin-top: 15px
}

.page-container.holdings .holdings-dividend {
padding-top: 30px
}

.page-container.holdings .breakdown-tag-container {
width: 765px
}

.page-container.holdings .holdings-breakdown-table-container .breakdown-tag-label {
display: inline-block;
margin-bottom: 10px
}

.page-container.holdings .holdings-breakdown-table-container tbody {
border-bottom: 1px solid #f1f1f1
}

.page-container.holdings .holdings-breakdown-table-container tbody tr {
border-bottom: none!important
}

.page-container.holdings .holdings-breakdown-table-container tbody tr:first-child td {
padding-bottom: 5px!important
}

.page-container.holdings .holdings-breakdown-table-container tbody tr:last-child td {
padding: 0 10px 10px 10px!important
}

.page-container.holdings .holdings-breakdown-table-container tbody .tagger {
padding-top: 0!important
}

.page-container.holdings .holdings-breakdown-table-container tbody .tagger .ti-tags {
padding-left: 15px!important
}

.page-container.holdings .holdings-breakdown-table-container tbody .tagger .filter-link.active {
z-index: 4
}

.page-container.holdings .holdings-breakdown-table-container tbody .tagger .filter-option.show {
z-index: 3
}

.page-container.holdings .holdings-breakdown-table-container tbody .new-tags span:not(.icon) {
margin-bottom: 5px
}

.page-container.holdings .holdings-breakdown-table {
width: 100%
}

.page-container.holdings .holdings-breakdown-table .breakdown-tag-table-head {
min-width: 130px
}

.page-container.holdings .holdings-breakdown-table input {
font-size: 12px
}

.page-container.holdings .holdings-breakdown-table tbody tr td,.page-container.holdings .holdings-breakdown-table thead tr td {
text-align: right;
padding: 10px 12px
}

.page-container.holdings .holdings-breakdown-table tbody tr td:first-child,.page-container.holdings .holdings-breakdown-table thead tr td:first-child {
text-align: left!important
}

.page-container.holdings .holdings-breakdown-table thead tr {
border-top: 1px solid #f1f1f1
}

.page-container.holdings .holdings-breakdown-table thead td {
padding: 15px 12px!important;
color: #9b9b9b;
background: #fafafb
}

.page-container.holdings .holdings-breakdown-table tbody tr td:first-child {
min-width: 130px;
max-width: 130px
}

.page-container.holdings .holdings-breakdown-table tbody tr td {
vertical-align: top
}

.page-container.holdings .holdings-breakdown-table tbody tr td:nth-child(6) {
padding-top: 5px!important
}

.page-container.holdings .holdings-breakdown-table tr {
border-bottom: 1px solid #f1f1f1
}

@media only screen and (max-width: 400px) {
.page-container.holdings .chart-columns .donut-chart {
width:48%
}

.page-container.holdings .chart-columns .donut-chart svg {
width: 100%;
height: 100%
}

.page-container.holdings .chart-columns .labels {
width: 50%;
margin-left: 0
}
}

@media only screen and (max-width: 1080px) {
.disc-list span {
display:block;
float: none!important;
min-width: 100px;
width: 100px;
margin-top: 5px
}
}

@media only screen and (max-width: 800px) {
.family-inputs {
padding-bottom:0!important
}

.family-switch {
display: flex;
align-content: space-between
}

.family-switch span {
display: block;
width: 50%;
padding: 10px
}

.family-switch span.active {
color: #0059c1;
border-bottom: 2px solid #0059c1
}

.month-item {
min-height: 472px
}

#mobile-side-nav.show {
width: 220px!important;
height: 100vh;
max-height: 100vh;
overflow: auto
}

.disc-list {
padding: 10px
}

.disc-list .status-flag {
width: auto;
padding: 1px 5px!important;
min-width: auto!important;
float: right!important
}

#holdings_date {
width: 100%;
padding: 6px 30px;
padding-left: 10px;
font-size: 14px;
line-height: 1.4;
color: #555;
background-color: #fff;
border: 1px solid #e3e3e3;
border-radius: 4px;
box-sizing: border-box
}

.litepicker {
width: auto!important
}

.table-download {
float: unset!important;
margin-top: 10px
}

.donut-switch {
position: relative;
top: auto;
left: auto;
right: auto;
text-align: center!important;
margin-bottom: 20px
}

#treemap_view_types {
float: none!important;
position: unset!important;
margin-bottom: 20px
}

.iframe-container iframe {
height: 90vh!important
}

.treemap-source {
bottom: 5px!important
}

.table-link-container,.treemap-source {
display: block!important;
float: none!important
}

.table-link-container {
margin-top: 20px
}

.table-link-container span {
right: 0!important
}

.page-container.holdings .section .modal-body .holdings-breakdown-qty .five,.page-container.holdings .section .modalbody .holdings-breakdown-qty .five {
border-right: none!important
}

.page-container.holdings .v-align {
display: block!important
}

.mobileBreakdown td {
font-size: 12px;
padding: 10px!important
}

.show-on-mobile.inputcontainer.row .six.columns,.show-on-mobile.locked.inputcontainer.row .six.columns {
width: 50%;
padding-right: 5px!important
}

.filter-modal-wrapper {
position: fixed;
width: 100%!important;
height: 100vh;
left: 0;
top: 0;
z-index: 10;
background: #fff;
transition: .5s;
overflow: hidden
}

.filter-modal-wrapper button {
position: absolute;
bottom: 0;
width: 100%;
margin: 0
}

.filter-modal-wrapper .header-header {
position: fixed;
top: 0;
line-height: 50px;
height: 50px;
color: #fff;
width: 100%;
background-color: #0059c1;
z-index: 30
}

.filter-modal-wrapper .header-header .left-btn {
width: 40px;
height: 100%;
z-index: 1;
position: absolute;
display: inline-block;
vertical-align: top;
text-align: center;
padding-top: 8px;
box-sizing: border-box
}

.filter-modal-wrapper .header-header .header-middle {
width: 55%;
left: 40px;
right: 40px;
position: absolute;
top: 0;
text-align: center;
z-index: 0;
padding-left: 0;
font-size: 16px
}

.filter-modal-wrapper .header-header .reset-filter {
text-align: right;
padding-left: 80vw;
position: absolute;
font-size: 16px;
color: #fff
}

.filter-modal-wrapper .header-header .reset-filter span:hover {
cursor: pointer;
opacity: .8
}

.filter-modal-wrapper .header-header .reset-filter span img {
width: 16px;
color: #fff;
vertical-align: middle;
margin-right: 4px;
padding-bottom: 3px
}

.filter-modal-wrapper .filters {
padding: 10px 20px 20px 20px;
margin-top: 50px
}

.filter-modal-wrapper .filters .su-input-label.filters-label {
width: 100%!important
}

.filter-modal-wrapper label {
padding-left: 0;
display: inline-block!important;
margin-top: 10px
}

.filter-modal-wrapper label.checks {
display: inline-block;
padding: 4px 10px;
margin-right: 8px;
font-size: 12px
}

.filter-modal-wrapper label.checks.type {
border-bottom: 1px solid #0059c1
}

.filter-modal-wrapper label.checks.sector {
border-bottom: 1px solid #e17055
}

.filter-modal-wrapper label.checks.others {
border-bottom: 1px solid #9b9b9b
}

.filter-modal-wrapper label.checks:hover {
cursor: pointer;
color: #444;
border: 1px solid #444
}

.filter-modal-wrapper label.checks.active {
border: 1px solid #0059c1;
color: #fff!important;
background: #0059c1
}

.filter-modal-wrapper input[type=checkbox] {
display: none
}

.filter-modal-wrapper input {
max-width: 175px;
font-size: 12px;
min-height: 35px;
height: 35px
}
}

@media only screen and (min-width: 800px) {
.chart-columns {
width:32.7%;
display: inline-block;
margin-left: .5%
}

.holdings-breakdown-table-container {
max-height: 250px;
overflow: auto;
min-height: 200px
}
}

.page-container.positions .inputcontainer button {
width: 55px!important
}

.page-container.positions .inputcontainer .manage-tag-link {
margin-left: 15px
}

.page-container.positions .grey-back-mobile {
height: 70px!important
}

.page-container.positions .mobile-agg {
top: -65px!important
}

.page-container.positions .pull-up-section {
top: -50px
}

.page-container.positions .tags-treemap {
margin-bottom: 40px;
margin-top: 40px;
min-height: 85px
}

.page-container.positions .tags-treemap #treemap_view_types {
display: inline-block;
float: right
}

.page-container.positions .tags-treemap.exposure-treemap {
margin-bottom: 75px
}

.page-container.positions .tags-treemap.exposure-treemap [data-balloon][data-balloon-length=small]:after {
width: 165px
}

.page-container.positions .tags-treemap [data-balloon][data-balloon-length=small]:after {
white-space: pre-line;
width: 80px;
word-wrap: break-word
}

.page-container.positions .tags-treemap [data-balloon][data-balloon-length=medium]:after {
white-space: pre-line;
width: 150px;
word-wrap: break-word
}

.page-container.positions .tags-treemap [data-balloon][data-balloon-length=large]:after {
white-space: pre-line;
width: 260px;
word-wrap: break-word
}

.page-container.positions .tags-treemap [data-balloon][data-balloon-length=fit]:after {
white-space: pre-line;
width: 100%;
word-wrap: break-word
}

.page-container.positions .tags-treemap .treemap-source {
position: relative
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio-wrap {
margin-right: 0
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio-wrap:first-child label {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-right: 1px solid #9b9b9b;
margin-right: 10px;
padding-right: 20px
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio-wrap:last-child label {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-left: none
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio+.su-radio-label:before {
border: none;
width: auto;
height: auto;
padding: 0;
margin: 0
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio:checked+.su-radio-label:before {
background: #fff;
padding: 0;
box-shadow: none;
border: none
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio-label {
border-radius: 3px;
padding: 0 5px;
text-align: center;
font-size: 1rem!important;
line-height: 1.1;
letter-spacing: .3px
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio-label:hover {
color: #0059c1!important
}

.page-container.positions .tags-treemap .treemap-source .su-radio-group .su-radio:checked+.su-radio-label {
color: #0059c1!important;
font-weight: 600
}

.page-container.positions .tags-treemap .node {
font-size: 11px;
color: #fff;
line-height: 12px;
position: absolute;
padding-top: 5px;
padding-left: 6px;
text-shadow: 0 0 #fff
}

.page-container.positions .tags-treemap .chart-action {
display: inline-block;
color: #0059c1;
font-weight: 600
}

.page-container.positions .tags-treemap .chart-action:hover {
cursor: pointer;
color: #444
}

.page-container.positions .tags-treemap .chart-action img {
height: 14px;
width: auto;
vertical-align: middle
}

.page-container.positions .tags-treemap .chart-action span {
margin-left: 2px
}

.page-container.positions .tags-treemap .chart .chart-action,.page-container.positions .tags-treemap .chart form {
display: inline-block
}

.page-container.positions .tags-treemap .chart .canvas {
margin-bottom: 10px
}

.page-container.positions .tag-head-icon {
float: right;
position: relative;
top: 5px;
right: 20px
}

.page-container.positions .tag-head-icon img {
height: 28px
}

.page-container.positions .section .modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
display: table;
transition: opacity .3s ease
}

.page-container.positions .section .modal-wrapper {
display: table-cell;
vertical-align: middle
}

.page-container.positions .section .modal-container {
margin: 0 auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0,0,0,.33);
box-sizing: border-box;
transition: all .3s ease
}

.page-container.positions .section .tags-table tr td:first-child {
position: relative
}

.page-container.positions .section .tags-table .context-menu {
position: absolute;
right: 10px
}

.page-container.positions .section .tag-pin {
width: 12px;
height: 12px;
display: inline-block;
border-radius: 50%;
position: relative;
top: 1px;
margin-right: 5px
}

.page-container.positions .section .tag-summary .four.tag-summary-card {
padding: 20px 25px;
border-radius: 4px;
box-sizing: border-box;
border: 1px solid #e1e1e1
}

.page-container.positions .section .tag-summary .four.tag-summary-card .icon {
-webkit-text-stroke-width: .5px
}

.page-container.positions .section .tag-summary .four.tag-summary-card p {
margin: 0;
display: inline-block
}

.page-container.positions .section .tag-summary .four.tag-summary-card h2 {
margin-bottom: 15px;
margin-top: 20px
}

.page-container.positions .section .tag-summary .four.tag-summary-card h2.tag-detail {
display: flex;
align-items: center
}

.page-container.positions .section .tag-summary .four.tag-summary-card .tag-comp-table {
padding: 2px 0
}

.page-container.positions .section .tag-summary .four.tag-summary-card .tag-summary-sub {
margin-bottom: 20px
}

.page-container.positions .section .tag-summary .four.tag-summary-card hr {
margin: 2px 0;
border-color: #e1e1e1
}

.page-container.positions .section .tag-summary .four.tag-summary-card label {
font-weight: 600
}

.page-container.positions .section .tag-summary .tag-colour {
width: 14px;
height: 14px;
display: inline-block;
border-radius: 50%;
margin-right: 7px
}

.page-container.positions .section .tag-summary .tag-name {
display: inline-block;
width: calc(100% - 28px);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap
}

.page-container.positions .section .tags-search {
position: relative!important;
float: right;
right: 10px!important
}

.page-container.positions .section .tags-segment {
padding: 3px 10px;
text-transform: uppercase;
display: inline-block;
border-radius: 2px;
font-size: 10px;
text-align: center;
line-height: 1.4!important;
color: #4184f3;
background-color: rgba(65,132,243,.1);
margin-left: 10px
}

.page-container.positions .section .table-download a:hover {
color: #444!important
}

.page-container.positions .section .table-download:hover {
cursor: default!important;
opacity: 1!important
}

.page-container.positions .section .search-table:not(.tags-search) {
right: 170px!important
}

.page-container.positions .section .modal-body {
margin: 20px 0
}

.page-container.positions .section .modal-body .holdings-breakdown-name {
margin: 0
}

.page-container.positions .section .modal-body .modal-separator {
margin: 20px 0
}

.page-container.positions .section .modal-body label {
color: #9b9b9b
}

.page-container.positions .section .modal-body .holdings-breakdown-qty {
margin-bottom: 20px
}

.page-container.positions .section .modal-body .holdings-breakdown-qty .five {
border-right: 1px solid #e1e1e1
}

.page-container.positions .section .modal-body .holdings-modal-label {
position: relative;
right: 5px
}

.page-container.positions .section .modal-default-button {
position: absolute;
top: 0;
right: 0;
background: none;
border: none;
font-size: 22px!important;
padding: 0
}

.page-container.positions .section .modal-enter,.page-container.positions .section .modal-leave-active {
opacity: 0
}

.page-container.positions .section .modal-enter .modal-container,.page-container.positions .section .modal-leave-active .modal-container {
transform: scale(1.1)
}

.page-container.positions .section .positions-summary {
box-sizing: border-box;
padding: 30px 20px 30px 90px;
background: #fafafb;
border-radius: 2px;
max-width: 450px;
margin: auto
}

.page-container.positions .section .positions-summary h1 {
margin-top: 10px
}

.page-container.positions .section .positions-summary span {
font-size: 1rem
}

.page-container.positions .section .last-updated {
float: left
}

.page-container.positions .section .positions-table:not(.pnl-breakdown-table) div:not(.new-tags) {
display: inline
}

.page-container.positions .section .positions-table:not(.pnl-breakdown-table) tbody tr:hover {
background: #fafafb
}

.page-container.positions .section .positions-table .context-menu {
visibility: hidden;
position: absolute;
right: 10px;
top: 11px
}

.page-container.positions .section .positions-table .context-menu img {
width: 14px;
position: relative;
top: 2px;
left: 2px;
margin-right: 9px
}

.page-container.positions .section .positions-table tbody tr:hover .context-menu {
visibility: visible
}

.page-container.positions .section .positions-table tbody tr .symbol-class,.page-container.positions .section .positions-table thead tr .symbol-class {
position: relative
}

.page-container.positions .section .positions-table tbody tr td,.page-container.positions .section .positions-table thead tr td {
text-align: right
}

.page-container.positions .section .positions-table tbody tr td:first-child,.page-container.positions .section .positions-table thead tr td:first-child {
min-width: 220px;
text-align: left!important
}

.page-container.positions .section .positions-table tbody tr td:first-child .arrow,.page-container.positions .section .positions-table thead tr td:first-child .arrow {
float: right!important
}

.page-container.positions .section .positions-table thead tr {
border-top: 1px solid #f1f1f1
}

.page-container.positions .section .positions-table thead tr .sorted {
background: #fafafb
}

.page-container.positions .section .positions-table thead td {
cursor: pointer;
color: #9b9b9b
}

.page-container.positions .section .positions-table thead td:hover {
background: #fafafb
}

.page-container.positions .section .positions-table thead td:hover .arrow {
opacity: 1
}

.page-container.positions .section .positions-table thead .arrow-show {
opacity: 1;
background: #fafafb
}

.page-container.positions .section .positions-table tbody tr:hover .popup {
display: block!important
}

.page-container.positions .section .positions-table tbody tr:hover .popup .popuptext {
visibility: hidden
}

.page-container.positions .section .positions-table tbody tr:hover {
background: #fafafb
}

.page-container.positions .section .positions-table tr {
border-bottom: 1px solid #f1f1f1
}

.page-container.positions .section .positions-table tr .text-left .trade-type {
float: left
}

.page-container.positions .section .positions-table tr .trade-type {
padding: 3px 10px;
text-transform: uppercase;
width: 30px;
display: block;
border-radius: 2px;
font-size: 10px;
text-align: center;
margin: auto;
line-height: 1.4!important
}

.page-container.positions .section .positions-table tr .buy {
color: #4184f3;
background-color: rgba(65,132,243,.1)
}

.page-container.positions .section .positions-table tr .sell {
color: #df514c;
background-color: rgba(223,81,76,.1)
}

.page-container.positions .section .positions-table .arrow {
display: inline-block;
float: left;
position: relative;
top: 7px;
border: solid #9b9b9b;
border-width: 0 1px 1px 0;
padding: 3px;
opacity: 0
}

.page-container.positions .section .positions-table .arrow.asc {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg)
}

.page-container.positions .section .positions-table .arrow.desc {
transform: rotate(45deg);
-webkit-transform: rotate(45deg)
}

.page-container.positions .section .positions-breakdown-table {
width: 100%
}

.page-container.positions .section .positions-breakdown-table tbody tr td,.page-container.positions .section .positions-breakdown-table thead tr td {
text-align: right;
padding: 10px 12px!important
}

.page-container.positions .section .positions-breakdown-table tbody tr td:first-child,.page-container.positions .section .positions-breakdown-table thead tr td:first-child {
text-align: left!important
}

.page-container.positions .section .positions-breakdown-table thead tr {
border-top: 1px solid #f1f1f1
}

.page-container.positions .section .positions-breakdown-table thead td {
padding: 15px 12px!important;
color: #9b9b9b;
background: #fafafb
}

.page-container.positions .section .positions-breakdown-table tr {
border-bottom: 1px solid #f1f1f1
}

.page-container.positions .section .positions-breakdown-table-container {
max-height: 400px;
overflow: auto
}

.page-container.positions .section .positions-breakdown-table-container tbody {
border-bottom: 1px solid #f1f1f1
}

.page-container.positions .section .positions-breakdown-table-container tbody tr {
border-bottom: none!important
}

.page-container.positions .section .positions-breakdown-table-container tbody tr:first-child td {
padding-bottom: 5px!important
}

.page-container.positions .section .positions-breakdown-table-container tbody tr:last-child td {
padding: 0 10px 10px 10px!important
}

.page-container.positions .section .positions-breakdown-table-container tbody .tagger {
padding-top: 0!important
}

.page-container.positions .section .positions-breakdown-table-container tbody .tagger .ti-tags {
padding-left: 15px!important
}

.page-container.positions .section .positions-breakdown-table-container tbody .tagger .filter-link.active {
z-index: 4
}

.page-container.positions .section .positions-breakdown-table-container tbody .tagger .filter-option.show {
z-index: 3
}

.page-container.positions .section .positions-breakdown-table-container tbody .new-tags span:not(.icon) {
margin-bottom: 5px
}

.page-container.positions .section .trade-type {
padding: 3px 10px;
text-transform: uppercase;
width: 30px;
display: block;
border-radius: 2px;
font-size: 10px;
text-align: center;
line-height: 1.4!important
}

.page-container.positions .section .buy {
color: #4184f3;
background-color: rgba(65,132,243,.1)
}

.page-container.positions .section .sell {
color: #df514c;
background-color: rgba(223,81,76,.1)
}

.page-container.positions .section .positions-paginate {
margin-top: 15px
}

.page-container.positions .section .positions-paginate button {
height: 25px!important;
border: 1px solid #e1e1e1
}

.page-container.positions .section .positions-paginate button:disabled {
color: #666;
cursor: not-allowed
}

.page-container.positions .section .positions-paginate span {
font-size: 12px;
padding: 0 10px
}

@media only screen and (min-width: 800px) {
.page-container.positions .month-item {
min-height:472px
}

.page-container.positions .section .positions-summary h1 {
margin-bottom: 5px
}

.page-container.positions .section .positions-breakdown-table-container {
max-height: 250px;
min-height: 200px;
overflow: auto
}

.page-container.positions .section .tag-summary .tag-summary-container {
display: flex
}

.page-container.positions .section .tag-summary .tag-summary-container .four.tag-summary-card h2 {
font-size: 20px
}

.page-container.positions .section .tag-summary .tag-summary-container .four.tag-summary-card .tag-colour {
width: 20px;
height: 20px
}

.page-container.positions .section .tag-summary .tag-summary-container .four.tag-summary-card .tag-name {
width: calc(100% - 34px);
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
white-space: nowrap
}
}

@media only screen and (max-width: 800px) {
.page-container.positions .section .table-download {
float:right!important;
margin-top: 0!important
}

.page-container.positions .section .exposure-treemap {
margin-bottom: 20px!important
}

.page-container.positions .section .tag-summary .columns .four {
width: 30.66667%!important
}

.page-container.positions .section .tag-summary .columns .six {
width: 48%!important
}

.page-container.positions .section .tag-summary .columns .nine {
width: 74%!important
}

.page-container.positions .section .tag-summary .columns .three {
width: 22%!important
}

.page-container.positions .section .tag-summary .columns .four,.page-container.positions .section .tag-summary .columns .nine,.page-container.positions .section .tag-summary .columns .six,.page-container.positions .section .tag-summary .columns .three {
margin-left: 4%!important
}

.page-container.positions .section .tag-summary .columns .four:first-child,.page-container.positions .section .tag-summary .columns .nine:first-child,.page-container.positions .section .tag-summary .columns .six:first-child,.page-container.positions .section .tag-summary .columns .three:first-child {
margin-left: 0!important
}

.page-container.positions .show-on-mobile.inputcontainer.row .six.columns,.page-container.positions .show-on-mobile.locked.inputcontainer.row .six.columns {
width: 50%!important;
padding-right: 5px!important
}

.page-container.positions .section .tag-summary .four .columns {
margin-bottom: 0
}

.page-container.positions .section .positions-summary {
padding: 18px 5px 3px 5px!important
}

.page-container.positions .section .positions-summary .six.columns {
width: 50%!important;
padding-left: 20px!important
}

.page-container.positions .section .card {
padding: 12px 10px;
border-top: 1px solid #eee
}

.page-container.positions .section .card.last {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee
}

.page-container.positions .section .card-right,.page-container.positions .section .card .bottom .bottom-right,.page-container.positions .section .card .middle .middle-right,.page-container.positions .section .card .top .top-right {
flex: 6;
text-align: right
}

.page-container.positions .section .card .top {
margin-bottom: 5px;
display: flex
}

.page-container.positions .section .card .top .top-left {
flex: 4;
font-weight: 600
}

.page-container.positions .section .card .middle {
margin-bottom: 5px;
display: flex
}

.page-container.positions .section .card .middle .middle-left {
flex: 6
}

.page-container.positions .section .card .bottom {
display: flex
}

.page-container.positions .section .card .bottom .bottom-left {
flex: 6
}

.page-container.positions .section .trade-type {
padding: 3px 10px;
text-transform: uppercase;
width: 30px;
display: unset;
border-radius: 2px;
font-size: 10px;
text-align: center;
line-height: 1.4!important
}

.page-container.positions .section .buy {
color: #4184f3;
background-color: rgba(65,132,243,.1)
}

.page-container.positions .section .sell {
color: #df514c;
background-color: rgba(223,81,76,.1)
}

.page-container.positions .section .last-updated {
display: inline-block!important
}

.page-container.positions .section .search-table {
top: 20px!important
}

.page-container.positions .pos {
color: #10b983
}

.page-container.positions .neg {
color: #f35631
}
}

.page-container.funds-page .notice {
margin-top: 25px
}

.page-container.funds-page .action-tabs {
font-size: 1.25rem;
margin-bottom: 50px
}

.page-container.funds-page .action-tabs .tab {
padding: 15px;
display: inline-block;
position: relative;
top: 1px;
cursor: pointer;
box-sizing: border-box;
min-width: 150px;
border-bottom: 2px solid #e1e1e1
}

.page-container.funds-page .action-tabs .tab.active {
border-bottom: 2px solid #0059c1
}

.page-container.funds-page .imps-upload-section {
background: #fafafb;
padding: 20px
}

.page-container.funds-page .imps-upload-section .imps-upload {
padding-left: 10px
}

.page-container.funds-page .show-on-mobile.last-updated {
padding-left: 0!important;
margin-top: 16px;
margin-bottom: 0
}

.page-container.funds-page .show-on-mobile.q-settlement {
padding-left: 0!important;
margin-top: 0;
margin-bottom: 0
}

.page-container.funds-page .qs {
margin: 0
}

.page-container.funds-page .fund-input-error {
padding-left: 10px;
font-size: .85rem;
color: #f35631;
position: absolute;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content
}

.page-container.funds-page .funds-breakdown-table {
max-height: calc(100vh - 60px);
overflow: auto
}

.page-container.funds-page .funds-breakdown-table td p {
margin: 0
}

.page-container.funds-page .funds-tooltip {
display: inline-block;
margin-left: 5px
}

.page-container.funds-page .funds-tooltip.selected-box {
color: #fff!important
}

.page-container.funds-page .manage-mf-funds {
display: inline-block
}

.page-container.funds-page .comm-disabled img {
width: 200px
}

.page-container.funds-page #commodity_card .fund-prefs {
top: 0
}

.page-container.funds-page #commodity_card .fund-prefs .su-radio-wrap.disabled,.page-container.funds-page #mobile_comm_content .su-radio-wrap.disabled {
display: none
}

.page-container.funds-page .no-account {
border: none;
width: 250px;
margin: auto;
text-align: center;
margin-bottom: 30px
}

.page-container.funds-page .fund-prefs .su-radio-group .su-radio+.su-radio-label:before {
position: absolute;
left: -3px;
width: 3px;
top: 5px
}

.page-container.funds-page .fund-prefs label {
position: relative;
padding-left: 15px
}

.page-container.funds-page .mf-confirm h1 a {
font-size: 14px;
vertical-align: middle;
margin-left: 5px
}

.page-container.funds-page .all-withdraw {
margin-top: 13px;
background: #fafafb;
padding: 10px;
border-radius: 3px
}

.page-container.funds-page .su-radio-wrap {
vertical-align: top
}

.page-container.funds-page .su-radio-wrap:first-child {
margin-bottom: 20px
}

.page-container.funds-page .su-radio-wrap span {
margin-left: 17px;
display: inline-block;
line-height: 1.7
}

.page-container.funds-page .su-radio-wrap label {
color: #444!important
}

.page-container.funds-page .mobile-notice {
display: none
}

.page-container.funds-page .eq-fund-history h3:hover {
cursor: pointer
}

.page-container.funds-page .eq-fund-history h3 span {
display: inline-block;
margin-left: 15px
}

.page-container.funds-page .section .funds-confirm .wide-container {
width: 600px!important
}

.page-container.funds-page .section .funds-confirm .wide-container hr {
margin-bottom: 20px
}

.page-container.funds-page .section .funds-confirm .withdraw-button {
margin-top: 20px
}

.page-container.funds-page .section .funds-confirm .withdrawal-box {
padding: 15px 10px 0 20px;
background: #fafafb
}

.page-container.funds-page .section .funds-confirm .withdrawal-box .columns p {
font-weight: 600
}

.page-container.funds-page .section .funds-confirm .withdrawal-box .columns:last-child p {
color: #0059c1
}

.page-container.funds-page .section .funds-confirm .modal-container h1 {
margin-bottom: 10px
}

.page-container.funds-page .section .funds-confirm .modal-container h2 {
font-size: 1.3rem;
margin-top: 20px
}

.page-container.funds-page .section .funds-confirm .modal-container h3 {
margin-top: 25px
}

.page-container.funds-page .section .funds-confirm .modal-container .close-modal {
right: 15px!important
}

.page-container.funds-page .section .recent-icon {
height: 16px;
position: relative;
top: 2px;
margin-right: 3px
}

.page-container.funds-page .section .funds-confirm-container {
padding-left: 10px
}

.page-container.funds-page .section .funds-note {
margin: 0
}

.page-container.funds-page .section .funds-note .note-flag {
text-transform: uppercase;
font-size: .6875rem;
font-weight: 600;
padding: 3px 11px;
border-radius: 2px;
position: relative;
width: 76px;
display: inline;
line-height: 1.7;
text-align: center;
background: rgba(255,85,85,.15);
color: #f6461a
}

.page-container.funds-page .section .withdraw-box {
border-radius: 2px
}

.page-container.funds-page .section .withdraw-box label {
display: block
}

.page-container.funds-page .section .withdraw-box .su-input-group.disabled {
margin-top: 0!important
}

.page-container.funds-page .section .withdraw-box .six:nth-child(2) {
position: relative
}

.page-container.funds-page .section .withdraw-box .six:nth-child(2) input[type=number] {
max-width: 280px!important;
box-sizing: border-box
}

.page-container.funds-page .section .withdraw-box .six:nth-child(2) .withdraw-funds-check {
display: inline-block;
margin-left: 10px;
margin-right: 20px
}

.page-container.funds-page .section .withdraw-box .six:nth-child(2) .withdraw-funds-check .su-checkbox-value {
color: #444!important
}

.page-container.funds-page .section .withdraw-box .six:nth-child(2) .withdraw-funds-check .su-checkbox-box {
position: relative;
top: 2px
}

.page-container.funds-page .section .withdraw-box .status-flag {
color: #f8ab00;
background: rgba(255,202,85,.15);
width: 130px;
text-transform: uppercase;
font-size: .75rem;
text-align: center;
line-height: 2
}

.page-container.funds-page .section .withdraw-box button {
min-width: 120px;
margin-top: 22px
}

.page-container.funds-page .section input[type=file] {
border-bottom: none;
margin: 15px 0
}

.page-container.funds-page .section .com-recent thead tr,.page-container.funds-page .section .eq-recent thead tr {
border-top: 1px solid #f1f1f1
}

.page-container.funds-page .section .com-recent tbody tr td:first-child,.page-container.funds-page .section .com-recent thead tr td:first-child,.page-container.funds-page .section .eq-recent tbody tr td:first-child,.page-container.funds-page .section .eq-recent thead tr td:first-child {
width: 150px
}

.page-container.funds-page .section .history-table .approved-flag,.page-container.funds-page .section .history-table .cancel-flag,.page-container.funds-page .section .history-table .failed-flag,.page-container.funds-page .section .history-table .pending-flag {
text-transform: uppercase;
font-size: .6875rem;
padding: 3px 11px;
border-radius: 2px;
position: relative;
width: 76px;
display: block;
line-height: 1.7;
text-align: center
}

.page-container.funds-page .section .history-table .pending-flag {
background: rgba(255,202,85,.15);
color: #f8ab00
}

.page-container.funds-page .section .history-table .cancel-flag {
background: hsla(0,0%,80%,.15);
color: #9b9b9b
}

.page-container.funds-page .section .history-table .approved-flag {
background: rgba(65,132,243,.15);
color: #4184f3
}

.page-container.funds-page .section .history-table .failed-flag {
background: rgba(255,85,85,.15);
color: #f6461a
}

.page-container.funds-page .section .history-table tr {
border-bottom: 1px solid #f1f1f1;
padding: 10px 5px
}

.page-container.funds-page .section .history-table thead {
color: #9b9b9b
}

.page-container.funds-page .section .history-table .delete-disc,.page-container.funds-page .section .history-table .edit-disc {
display: none;
width: .875rem
}

.page-container.funds-page .section .history-table .delete-disc:hover,.page-container.funds-page .section .history-table .edit-disc:hover {
cursor: pointer
}

.page-container.funds-page .section .history-table .edit-disc {
position: relative;
right: 15px
}

.page-container.funds-page .section .history-table [data-balloon][data-balloon-pos=up]:after {
left: -80%!important
}

.page-container.funds-page .section .history-table tbody tr:hover {
background: #fafafb
}

.page-container.funds-page .section .history-table tbody tr:hover .delete-disc,.page-container.funds-page .section .history-table tbody tr:hover .edit-disc {
display: inline
}

.page-container.funds-page .section .history-table tbody tr td:last-child {
min-width: 40px
}

@media only screen and (min-width: 800px) {
.funds-page .funds-confirm .modal-body {
max-height:100vh;
overflow: auto
}

.funds-page #equity_card {
margin-top: 20px
}

.funds-page #commodity_card,.funds-page #equity_card {
padding: 35px 30px 35px 30px;
border-radius: 3px;
margin-bottom: 60px;
box-shadow: 0 1px 6px 1px rgba(0,0,0,.1)
}

.funds-page #commodity_card.comm-disabled-box,.funds-page #equity_card.comm-disabled-box {
padding: 0;
box-shadow: none
}

.funds-page #commodity_card .view-details,.funds-page #equity_card .view-details {
margin: 0
}

.funds-page #commodity_card .card-head,.funds-page #equity_card .card-head {
margin-right: 30px
}

.funds-page #commodity_card .card-info,.funds-page #equity_card .card-info {
margin-top: 15px
}

.funds-page #commodity_card .card-info .last-updated,.funds-page #equity_card .card-info .last-updated {
display: block;
padding-left: 0
}

.funds-page #commodity_card .twelve .withdraw-box .withdraw-input,.funds-page #equity_card .twelve .withdraw-box .withdraw-input {
border-right: 1px solid #f4f4f4
}

.funds-page #commodity_card .twelve .withdraw-box .withdraw-input .su-input-group,.funds-page #equity_card .twelve .withdraw-box .withdraw-input .su-input-group {
display: inline-block;
width: 100%
}

.funds-page #commodity_card .three,.funds-page #equity_card .three {
border-right: 1px solid #e1e1e1
}

.funds-page #commodity_card .three p,.funds-page #equity_card .three p {
margin-bottom: 25px
}

.funds-page .breakdown-total {
color: #0059c1;
font-size: 1.25rem
}

.funds-page .breakdown-total a {
font-size: 14px;
position: relative;
top: -1px
}

.funds-page .breakdown-label,.funds-page .breakdown-value {
margin: 0;
margin-bottom: 10px
}

.funds-page .breakdown-value {
text-align: right
}

.funds-page .commodity-section .eq-fund-history {
margin-top: 25px
}

.funds-page .fund-prefs {
position: relative;
top: 20px
}

.funds-page .su-radio-wrap {
margin-bottom: 20px;
margin-right: 0
}

.funds-page .funds-input {
width: 100%!important;
margin-left: 0
}
}

@media only screen and (max-width: 370px) {
.page-container.funds-page #commodity_card h2,.page-container.funds-page #equity_card h2 {
font-size:14px!important
}
}

@media only screen and (max-width: 800px) {
.page-container.funds-page .action-tabs .tab {
width:50%
}

.page-container.funds-page .main-agg {
margin-top: 15px
}

.page-container.funds-page .main-agg h1 {
margin-bottom: 0
}

.page-container.funds-page .main-agg .view-details {
margin-bottom: 0;
margin-top: 5px
}

.page-container.funds-page .grey-back-mobile {
height: 160px!important
}

.page-container.funds-page .mobile-agg {
top: -155px!important
}

.page-container.funds-page .pull-up-section {
top: -120px
}

.page-container.funds-page #commodity_card,.page-container.funds-page #equity_card {
text-align: center
}

.page-container.funds-page #commodity_card h2,.page-container.funds-page #equity_card h2 {
margin-bottom: 5px!important
}

.page-container.funds-page .withdraw-breakdown .row {
padding: 5px
}

.page-container.funds-page .withdraw-breakdown .row:nth-child(odd) {
background-color: #fff!important
}

.page-container.funds-page .withdraw-breakdown .row:nth-child(2n) {
background-color: #fafafb
}

.page-container.funds-page .withdraw-breakdown .eight {
width: 60%!important
}

.page-container.funds-page .withdraw-breakdown .four {
width: 40%!important
}

.page-container.funds-page .withdraw-breakdown .eight,.page-container.funds-page .withdraw-breakdown .four {
margin-bottom: 0!important
}

.page-container.funds-page .withdraw-breakdown .eight p,.page-container.funds-page .withdraw-breakdown .four p {
margin-bottom: 0;
margin-top: 0
}

.page-container.funds-page .withdraw-breakdown .eight .breakdown-total,.page-container.funds-page .withdraw-breakdown .four .breakdown-total {
font-size: 16px;
color: #0059c1
}

.page-container.funds-page .eq-fund-history {
margin-top: 20px
}

.page-container.funds-page .comm-disabled p {
margin-bottom: 19px;
margin-top: 40px
}

.page-container.funds-page .comm-disabled a {
margin-bottom: 0;
display: inline-block;
height: 12px;
line-height: 12px
}

.page-container.funds-page #mobile_comm_content {
display: none
}

.page-container.funds-page #mobile_comm_content,.page-container.funds-page #mobile_eq_content {
margin-bottom: 40px;
margin-top: 15px
}

.page-container.funds-page .mobile-notice {
display: block
}

.page-container.funds-page #commodity_card,.page-container.funds-page #equity_card {
padding: 10px 10px 5px 10px!important;
box-sizing: border-box;
width: 47%!important;
color: #666;
margin-bottom: 0
}

.page-container.funds-page #commodity_card:hover,.page-container.funds-page #equity_card:hover {
cursor: pointer
}

.page-container.funds-page #commodity_card h2,.page-container.funds-page #equity_card h2 {
display: inline-block;
margin-top: 5px;
margin-bottom: 20px;
font-size: 18px;
word-break: break-word
}

.page-container.funds-page #commodity_card h1,.page-container.funds-page #equity_card h1 {
font-size: 22px;
margin-bottom: 5px
}

.page-container.funds-page #equity_card {
margin-right: 6%
}

.page-container.funds-page #commodity_card.active,.page-container.funds-page #equity_card.active {
color: #0059c1;
border-bottom: 1px solid #0059c1
}

.page-container.funds-page #commodity_card.active label,.page-container.funds-page #equity_card.active label {
color: #fff
}

.page-container.funds-page .commodity-section,.page-container.funds-page .equity-section {
display: none
}

.page-container.funds-page .commodity-section.active,.page-container.funds-page .equity-section.active {
display: block
}

.page-container.funds-page .withdraw-box {
margin-bottom: 16px
}

.page-container.funds-page .withdraw-box .eight,.page-container.funds-page .withdraw-box .six {
margin-bottom: 0
}

.page-container.funds-page .withdraw-box .su-input-group input {
padding: 15px 20px
}

.page-container.funds-page .withdraw-box button {
position: relative;
top: 2px;
margin-left: 0;
width: 100%;
margin-top: 10px
}

.page-container.funds-page .withdraw-funds-check {
margin-bottom: 20px
}
}

.page-container.ledger .grey-back-mobile {
height: 160px!important
}

.page-container.ledger .mobile-agg {
top: -155px!important
}

.page-container.ledger .pull-up-section {
top: -120px
}

.page-container.ledger .section .card .symbol {
margin-right: 10px
}

.page-container.ledger .section .card .remarks {
line-height: 18px;
color: #9b9b9b
}

.page-container.ledger .section .card .middle {
margin: 10px 0!important
}

.page-container.ledger .section .card .debit {
color: #f35631!important;
font-size: 12px!important;
position: relative;
bottom: .5px
}

.page-container.ledger .section .card .credit {
color: #10b983!important;
font-size: 12px!important;
position: relative;
bottom: .5px
}

.page-container.ledger .section input {
max-width: 100%
}

.page-container.ledger .section input:focus {
outline: 0;
border-color: #ccc
}

.page-container.ledger .section .inputcontainer .two:nth-child(7) {
margin-left: 0
}

.page-container.ledger .section .table-download a:hover {
color: #444!important
}

.page-container.ledger .section .table-download:hover {
cursor: default!important;
opacity: 1!important
}

.page-container.ledger .section .ledger-note {
float: right
}

.page-container.ledger .section .interest-total {
display: inline-block;
box-sizing: border-box;
padding: 30px 45px;
background: #fafafb;
border-radius: 2px
}

.page-container.ledger .section .interest-total h1 {
display: inline-block;
margin-top: 10px;
margin-bottom: 5px
}

.page-container.ledger .section .interest-total label {
display: block
}

.page-container.ledger .section .ledger-total {
box-sizing: border-box;
padding: 30px 50px 30px 120px;
background: #fafafb;
border-radius: 2px;
margin: auto
}

.page-container.ledger .section .ledger-total h1 {
display: inline-block;
margin-top: 10px;
margin-bottom: 5px
}

.page-container.ledger .section .ledger-total label {
display: block
}

.page-container.ledger .section .ledger-total.min-box {
max-width: 600px
}

.page-container.ledger .section .ledger-table tbody tr .remarks,.page-container.ledger .section .ledger-table thead tr .remarks {
max-width: 400px
}

.page-container.ledger .section .ledger-table tbody tr .ledger-date,.page-container.ledger .section .ledger-table thead tr .ledger-date {
min-width: 85px
}

.page-container.ledger .section .ledger-table .time {
color: #9b9b9b
}

.page-container.ledger .section .ledger-table .exchange {
font-size: .75rem;
color: #9b9b9b;
margin-left: 15px;
font-weight: 600
}

.page-container.ledger .section .ledger-table thead tr {
border-top: 1px solid #f1f1f1
}

.page-container.ledger .section .ledger-table thead tr .sorted {
background: #fafafb
}

.page-container.ledger .section .ledger-table thead td {
cursor: pointer;
color: #9b9b9b;
background: #fafafb
}

.page-container.ledger .section .ledger-table thead td:hover {
background: #fafafb
}

.page-container.ledger .section .ledger-table thead td:hover .arrow {
opacity: 1
}

.page-container.ledger .section .ledger-table thead .arrow-show {
opacity: 1;
background: #fafafb
}

.page-container.ledger .section .ledger-table tr {
border-bottom: 1px solid #f1f1f1
}

.page-container.ledger .section .ledger-table tr .trade-exchange {
display: inline-block;
margin-left: 8px;
font-size: 10px;
color: #9b9b9b;
font-weight: 600
}

.page-container.ledger .section .ledger-table tr .trade-type {
padding: 3px 10px;
text-transform: uppercase;
width: 30px;
display: block;
border-radius: 2px;
float: right;
font-size: 10px;
text-align: center
}

.page-container.ledger .section .ledger-table tr .buy {
color: #4184f3;
background-color: rgba(65,132,243,.1)
}

.page-container.ledger .section .ledger-table tr .sell {
color: #df514c;
background-color: rgba(223,81,76,.1)
}

.page-container.ledger .section .ledger-table .arrow {
display: inline-block;
float: left;
position: relative;
top: 7px;
border: solid #9b9b9b;
border-width: 0 1px 1px 0;
padding: 3px;
opacity: 0
}

.page-container.ledger .section .ledger-table .arrow.asc {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg)
}

.page-container.ledger .section .ledger-table .arrow.desc {
transform: rotate(45deg);
-webkit-transform: rotate(45deg)
}

.page-container.ledger .section .ledger-paginate {
margin-top: 15px
}

.page-container.ledger .section .ledger-paginate button {
height: 25px!important;
border: 1px solid #e1e1e1
}

.page-container.ledger .section .ledger-paginate button:disabled {
color: #666;
cursor: not-allowed
}

.page-container.ledger .section .ledger-paginate span {
font-size: 12px;
padding: 0 10px
}

@media only screen and (min-width: 800px) {
.page-container.ledger .downloads {
position:relative
}

.page-container.ledger .downloads .no-margin {
margin-left: 0;
margin-bottom: 30px
}

.page-container.ledger .downloads .no-margin button {
position: absolute!important;
left: 0;
top: 75px;
width: 150px!important
}
}

.page-container.tradebook .input-heatmap-section {
margin-bottom: 40px
}

.page-container.tradebook .section #logo_img {
display: none;
position: absolute;
left: 55px;
top: 20px
}

.page-container.tradebook .section #calendar_container_tradebook {
margin-bottom: 25px
}

.page-container.tradebook .section input {
max-width: 100%
}

.page-container.tradebook .section .inputcontainer .three {
width: 18%
}

.page-container.tradebook .section .inputcontainer .four {
width: 34.66667%
}

.page-container.tradebook .section .state-process {
margin-top: 20px!important
}

.page-container.tradebook .section .table-download a:hover {
color: #444!important
}

.page-container.tradebook .section .table-download:hover {
cursor: default!important;
opacity: 1!important
}

.page-container.tradebook .section .search-table {
right: 170px!important
}

.page-container.tradebook .section .tradebook-table tbody tr td.row-check,.page-container.tradebook .section .tradebook-table thead tr td.row-check {
width: 20px;
text-align: center
}

.page-container.tradebook .section .tradebook-table tbody tr td:nth-child(2),.page-container.tradebook .section .tradebook-table thead tr td:nth-child(2) {
position: relative
}

.page-container.tradebook .section .tradebook-table tbody tr td:nth-child(2) .arrow,.page-container.tradebook .section .tradebook-table tbody tr td:nth-child(3) .arrow,.page-container.tradebook .section .tradebook-table tbody tr td:nth-child(4) .arrow,.page-container.tradebook .section .tradebook-table tbody tr td:nth-child(5) .arrow,.page-container.tradebook .section .tradebook-table thead tr td:nth-child(2) .arrow,.page-container.tradebook .section .tradebook-table thead tr td:nth-child(3) .arrow,.page-container.tradebook .section .tradebook-table thead tr td:nth-child(4) .arrow,.page-container.tradebook .section .tradebook-table thead tr td:nth-child(5) .arrow {
float: right!important
}

.page-container.tradebook .section .tradebook-table tbody tr td.qty,.page-container.tradebook .section .tradebook-table thead tr td.qty {
min-width: 70px
}

.page-container.tradebook .section .tradebook-table tbody tr td.price,.page-container.tradebook .section .tradebook-table thead tr td.price {
min-width: 90px
}

.page-container.tradebook .section .tradebook-table tbody tr .context-menu,.page-container.tradebook .section .tradebook-table thead tr .context-menu {
visibility: hidden
}

.page-container.tradebook .section .tradebook-table tbody tr .flag-container,.page-container.tradebook .section .tradebook-table thead tr .flag-container {
position: absolute;
right: 50px
}

.page-container.tradebook .section .tradebook-table tbody tr:hover .context-menu,.page-container.tradebook .section .tradebook-table thead tr:hover .context-menu {
visibility: visible
}

.page-container.tradebook .section .tradebook-table .exchange {
font-size: .75rem;
color: #9b9b9b;
font-weight: 600;
float: right;
position: relative;
top: 3px
}

.page-container.tradebook .section .tradebook-table .exchange.edis {
border: 1px solid #e1e1e1;
border-radius: 2px;
padding: 0 5px;
margin-right: 10px;
right: 0
}

.page-container.tradebook .section .tradebook-table .exchange.edis a {
color: #9b9b9b!important;
display: block
}

.page-container.tradebook .section .tradebook-table thead tr {
border-top: 1px solid #f1f1f1
}

.page-container.tradebook .section .tradebook-table thead tr .sorted {
background: #fafafb
}

.page-container.tradebook .section .tradebook-table thead td {
cursor: pointer;
color: #9b9b9b
}

.page-container.tradebook .section .tradebook-table thead td:hover {
background: #fafafb
}

.page-container.tradebook .section .tradebook-table thead td:hover .arrow {
opacity: 1
}

.page-container.tradebook .section .tradebook-table thead .arrow-show {
opacity: 1;
background: #fafafb
}

.page-container.tradebook .section .tradebook-table tr {
border-bottom: 1px solid #f1f1f1
}

.page-container.tradebook .section .tradebook-table tr .trade-exchange {
display: inline-block;
margin-left: 8px;
font-size: 10px;
color: #9b9b9b;
font-weight: 600
}

.page-container.tradebook .section .tradebook-table tr .trade-type {
padding: 3px 10px;
text-transform: uppercase;
width: 30px;
display: block;
border-radius: 2px;
font-size: 10px;
text-align: center;
line-height: 1.4!important
}

.page-container.tradebook .section .tradebook-table tr .buy {
color: #4184f3;
background-color: rgba(65,132,243,.1)
}

.page-container.tradebook .section .tradebook-table tr .sell {
color: #df514c;
background-color: rgba(223,81,76,.1)
}

.page-container.tradebook .section .tradebook-table .arrow {
display: inline-block;
float: left;
position: relative;
top: 7px;
border: solid #9b9b9b;
border-width: 0 1px 1px 0;
padding: 3px;
opacity: 0
}

.page-container.tradebook .section .tradebook-table .arrow.asc {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg)
}

.page-container.tradebook .section .tradebook-table .arrow.desc {
transform: rotate(45deg);
-webkit-transform: rotate(45deg)
}

.page-container.tradebook .section .tradebook-table .text-left .arrow {
float: right!important
}

.page-container.tradebook .section .heatmap-section {
margin-top: 35px;
margin-bottom: 0
}

.page-container.tradebook .section .hidden {
display: none!important
}

.page-container.tradebook .section .heatmap-section-locked {
position: absolute;
height: 260px;
width: 100%;
background: transparent;
z-index: 1
}

.page-container.tradebook .section input[name=heatmap-overview] {
top: 2px;
position: relative
}

.page-container.tradebook .section .overview-button {
display: inline-block;
left: -40px
}

.page-container.tradebook .section .overview-button:hover {
opacity: .8;
cursor: pointer
}

.page-container.tradebook .section .overview-button img {
vertical-align: middle
}

.page-container.tradebook .section .overview-button label span {
font-size: 11px
}

.page-container.tradebook .section .overview-button label:hover {
cursor: pointer
}

.page-container.tradebook .section .overview-button input[type=radio]:checked+span {
color: #0059c1
}

.page-container.tradebook .section .date-fetched {
left: -10px
}

.page-container.tradebook .section .heatmap-container {
position: relative;
display: inline-block;
max-width: 100%
}

.page-container.tradebook .section .heatmap-container #share_chart {
left: 15px;
position: absolute;
z-index: 5;
font-size: 14px;
font-weight: 600;
color: #0059c1;
top: -5px;
margin-right: 10px
}

.page-container.tradebook .section .heatmap-container #share_chart:hover {
cursor: pointer
}

.page-container.tradebook .section .heatmap-container #share_chart img {
height: 18px;
margin-right: 4px;
vertical-align: middle
}

.page-container.tradebook .section .heatmap-container #calendar_year svg:not(:root),.page-container.tradebook .section .heatmap-container #calendar svg:not(:root) {
overflow: visible
}

.page-container.tradebook .section .heatmap-container .heatmap-count {
text-align: left;
min-height: 25px;
margin-left: 15px;
margin-top: 40px
}

.page-container.tradebook .section .heatmap-container .heatmap-count .heatmap-date {
width: 90px;
display: inline-block;
margin-right: 20px;
font-weight: 600
}

.page-container.tradebook .section .heatmap-container .heatmap-count input {
min-height: 0!important;
position: relative;
top: 3px
}

.page-container.tradebook .section .heatmap-container .heatmap-count p {
margin-top: 0;
margin-bottom: 0
}

.page-container.tradebook .section .heatmap-container .heatmap-count .heatmap-segment {
color: #0059c1;
margin-right: 20px;
border-bottom: 2px solid #0059c1;
padding: 0 5px;
display: inline-block
}

.page-container.tradebook .section .heatmap-container .heatmap-count .heatmap-segment:hover {
cursor: pointer;
opacity: .8
}

.page-container.tradebook .section .heatmap-container .heatmap-count .heatmap-segment p {
display: inline-block;
margin-right: 5px
}

.page-container.tradebook .section .heatmap-container .heatmap-count .loader-segment {
border: none
}

.page-container.tradebook .section .tradebook-paginate {
margin-top: 15px
}

.page-container.tradebook .section .tradebook-paginate button {
height: 25px!important;
border: 1px solid #e1e1e1
}

.page-container.tradebook .section .tradebook-paginate button:disabled {
color: #666;
cursor: not-allowed
}

.page-container.tradebook .section .tradebook-paginate span {
font-size: 12px;
padding: 0 10px
}

@media only screen and (max-width: 800px) {
.page-container.tradebook .section .table-sort {
margin-top:3px!important
}

.page-container.tradebook .section .show-on-mobile.inputcontainer.row .two.columns,.page-container.tradebook .section .show-on-mobile.locked.inputcontainer.row .two.columns {
width: 50%!important;
padding-right: 5px!important
}

.page-container.tradebook .section .exchange {
font-size: .75rem;
color: #9b9b9b;
font-weight: 600;
display: inline-block
}

.page-container.tradebook .section .exchange.edis {
border: 1px solid #e1e1e1;
border-radius: 2px;
padding: 0 5px
}

.page-container.tradebook .section .exchange.edis a {
color: #9b9b9b!important;
display: block
}

.page-container.tradebook .section .card {
padding: 12px 10px;
border-top: 1px solid #eee
}

.page-container.tradebook .section .card.last {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee
}

.page-container.tradebook .section .card-right,.page-container.tradebook .section .card .bottom .bottom-right,.page-container.tradebook .section .card .middle .middle-right,.page-container.tradebook .section .card .top .top-right {
flex: 6;
text-align: right
}

.page-container.tradebook .section .card .top {
margin-bottom: 5px;
display: flex
}

.page-container.tradebook .section .card .top .top-left {
flex: 4;
font-weight: 600
}

.page-container.tradebook .section .card .middle {
margin-bottom: 5px;
display: flex
}

.page-container.tradebook .section .card .middle .middle-left {
flex: 6
}

.page-container.tradebook .section .card .bottom {
display: flex
}

.page-container.tradebook .section .card .bottom .bottom-left {
flex: 6
}

.page-container.tradebook .section .time {
color: #9b9b9b
}

.page-container.tradebook .section .trade-type {
padding: 3px 10px;
text-transform: uppercase;
width: 30px;
border-radius: 2px;
font-size: 10px;
text-align: center;
line-height: 1.4!important
}

.page-container.tradebook .section .buy {
color: #4184f3;
background-color: rgba(65,132,243,.1)
}

.page-container.tradebook .section .sell {
color: #df514c;
background-color: rgba(223,81,76,.1)
}
}

@media only screen and (max-width: 1100px) {
.heatmap-section {
display:none
}
}

@media only screen and (max-width: 650px) {
.app .tradebook .search-table {
left:10px!important;
top: 25px!important;
padding-left: 0
}

.app .tradebook .search-table .icon-search {
left: 5px!important
}

.app .tradebook .table-download {
left: 120px;
position: relative
}
}

@media only screen and (max-width: 550px) {
.app .tradebook .search-table {
top:48px!important
}
}

.page-container.pnl .pnl-head-icon {
position: relative;
width: 23px;
top: 4px
}

.page-container.pnl .input-heatmap-section {
margin-bottom: 30px
}

.page-container.pnl .input-heatmap-section .lock-class {
width: 15px;
display: block!important;
margin-bottom: 0!important;
top: 0!important
}

.page-container.pnl .input-heatmap-section .lock-img-container .su-loader {
display: block;
margin-left: 0!important
}

.page-container.pnl .pnl-summary-section {
margin-bottom: 10px
}

.page-container.pnl .pnl-summary-section label {
display: block
}

.page-container.pnl .pnl-summary-section p {
display: inline-block
}

.page-container.pnl .pnl-charges-breakdown h4 {
margin-left: 2%;
font-weight: 600
}

.page-container.pnl .inputcontainer .filter-field label {
z-index: 2
}

.page-container.pnl .inputcontainer .seven {
margin-left: 0
}

.page-container.pnl .section .filters .manage-tags-link {
display: inline-block;
float: right;
position: relative;
top: 12px;
font-size: 12px
}

.page-container.pnl .section #logo_img {
display: none;
position: absolute;
left: 55px;
top: 20px
}

.page-container.pnl .section #calendar_container {
position: relative;
margin-bottom: 25px
}

.page-container.pnl .section .pnl-charges-breakdown .modal-container {
width: 850px!important
}

.page-container.pnl .section .modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.5);
display: table;
transition: opacity .3s ease
}

.page-container.pnl .section .state-process {
margin-top: 20px!important
}

.page-container.pnl .section .modal-wrapper {
display: table-cell;
vertical-align: middle
}

.page-container.pnl .section .modal-container {
margin: 0 auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0,0,0,.33);
box-sizing: border-box;
transition: all .3s ease
}

.page-container.pnl .section .modal-body,.page-container.pnl .section .modalbody {
margin: 20px 0
}

.page-container.pnl .section .modal-body .holdings-breakdown-name,.page-container.pnl .section .modalbody .holdings-breakdown-name {
margin: 0
}

.page-container.pnl .section .modal-body .pnl-breakdown-head,.page-container.pnl .section .modalbody .pnl-breakdown-head {
margin-bottom: 10px
}

.page-container.pnl .section .modal-body .pnl-breakdown-head h2,.page-container.pnl .section .modal-body .pnl-breakdown-head p,.page-container.pnl .section .modalbody .pnl-breakdown-head h2,.page-container.pnl .section .modalbody .pnl-breakdown-head p {
margin: 0!important
}

.page-container.pnl .section .modal-body .pnl-breakdown-head p,.page-container.pnl .section .modalbody .pnl-breakdown-head p {
text-align: right;
padding-right: 20px
}

.page-container.pnl .section .modal-body .pnl-breakdown-head span,.page-container.pnl .section .modalbody .pnl-breakdown-head span {
padding-right: 5px
}

.page-container.pnl .section .modal-body .modal-separator,.page-container.pnl .section .modalbody .modal-separator {
margin: 20px 0
}

.page-container.pnl .section .modal-body label,.page-container.pnl .section .modalbody label {
color: #9b9b9b
}

.page-container.pnl .section .modal-body .holdings-breakdown-qty,.page-container.pnl .section .modalbody .holdings-breakdown-qty {
margin-bottom: 20px
}

.page-container.pnl .section .modal-body .holdings-breakdown-qty .five,.page-container.pnl .section .modalbody .holdings-breakdown-qty .five {
border-right: 1px solid #e1e1e1
}

.page-container.pnl .section .modal-body .holdings-modal-label,.page-container.pnl .section .modalbody .holdings-modal-label {
position: relative;
right: 5px
}

.page-container.pnl .section .modal-default-button {
position: absolute;
top: 0;
right: 0;
background: none;
border: none;
font-size: 22px!important;
padding: 0
}

.page-container.pnl .section .modal-enter,.page-container.pnl .section .modal-leave-active {
opacity: 0
}

.page-container.pnl .section .modal-enter .modal-container,.page-container.pnl .section .modal-leave-active .modal-container {
transform: scale(1.1)
}

.page-container.pnl .section input {
max-width: 100%
}

.page-container.pnl .section input:focus {
outline: 0;
border-color: #ccc
}

.page-container.pnl .section .pnl-breakdown-table-container {
overflow: auto
}

.page-container.pnl .section .pnl-breakdown-table-container input {
font-size: 12px
}

.page-container.pnl .section .pnl-breakdown-table-container table thead td {
background: #fafafb
}

.page-container.pnl .section .pnl-breakdown-table-container table thead td:first-child {
min-width: 100px
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody {
border-bottom: 1px solid #f1f1f1
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody tr {
border-bottom: none!important
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody tr:first-child td {
padding-bottom: 5px!important
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody tr:last-child td {
padding: 0 10px 10px 10px!important
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody .tagger {
padding-top: 0!important
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody .tagger .ti-tags {
padding-left: 15px!important
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody .tagger .filter-link.active {
z-index: 4
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody .tagger .filter-option.show {
z-index: 3
}

.page-container.pnl .section .pnl-breakdown-table-container table tbody .new-tags span:not(.icon) {
margin-bottom: 5px
}

.page-container.pnl .section .other-charges {
font-size: .65rem!important;
padding: 3px 5px!important;
line-height: 2!important;
position: relative;
top: 3px;
float: right!important;
margin-left: 10px
}

.page-container.pnl .section .trade-type {
padding: 3px 10px;
text-transform: uppercase;
width: 30px;
display: block;
border-radius: 2px;
float: left;
font-size: 10px;
text-align: center;
line-height: 1.4!important
}

.page-container.pnl .section .buy {
color: #4184f3;
background-color: rgba(65,132,243,.1)
}

.page-container.pnl .section .sell {
color: #df514c;
background-color: rgba(223,81,76,.1)
}

.page-container.pnl .section .charges {
margin-bottom: 5px
}

.page-container.pnl .section .charges-breakdown-img {
width: 15px
}

.page-container.pnl .section .charges-container {
display: inline-block;
width: 31%;
margin-left: 2%
}

.page-container.pnl .section .table-container:not(.pnl-breakdown-table-container) {
padding-top: 35px
}

.page-container.pnl .section .table-download {
position: relative;
top: 35px
}

.page-container.pnl .section .search-table {
top: 30px!important
}

.page-container.pnl .section .fetch-data,.page-container.pnl .section .last-updated {
position: relative;
top: 35px
}

.page-container.pnl .section .paginate-info {
margin-bottom: 5px;
position: relative;
top: 35px
}

.page-container.pnl .section .pnl-table .percharges-breakdown:hover {
cursor: pointer
}

.page-container.pnl .section .pnl-table .percharges-breakdown .percharges-breakdown-img {
height: 12px
}

.page-container.pnl .section .pnl-table:not(.pnl-breakdown-table) div:not(.new-tags) {
display: inline
}

.page-container.pnl .section .pnl-table:not(.pnl-breakdown-table) tbody tr:hover {
background: #fafafb
}

.page-container.pnl .section .pnl-table tbody tr td,.page-container.pnl .section .pnl-table thead tr td {
text-align: right
}

.page-container.pnl .section .pnl-table tbody tr td:first-child .arrow,.page-container.pnl .section .pnl-table thead tr td:first-child .arrow {
float: right!important
}

.page-container.pnl .section .pnl-table tbody tr .symbol-class,.page-container.pnl .section .pnl-table thead tr .symbol-class {
position: relative
}

.page-container.pnl .section .pnl-table .context-menu {
visibility: hidden;
position: absolute;
right: 10px;
top: 11px
}

.page-container.pnl .section .pnl-table tbody tr:hover .context-menu {
visibility: visible
}

.page-container.pnl .section .pnl-table thead tr {
border-top: 1px solid #f1f1f1
}

.page-container.pnl .section .pnl-table thead tr .sorted {
background: #fafafb
}

.page-container.pnl .section .pnl-table thead td {
cursor: pointer;
color: #9b9b9b
}

.page-container.pnl .section .pnl-table thead td:hover {
background: #fafafb
}

.page-container.pnl .section .pnl-table thead td:hover .arrow {
opacity: 1
}

.page-container.pnl .section .pnl-table thead .arrow-show {
opacity: 1;
background: #fafafb
}

.page-container.pnl .section .pnl-table tbody tr:hover .popup {
display: block!important
}

.page-container.pnl .section .pnl-table tbody tr:hover .popup .popuptext {
visibility: hidden
}

.page-container.pnl .section .pnl-table tr {
border-bottom: 1px solid #f1f1f1
}

.page-container.pnl .section .pnl-table .arrow {
display: inline-block;
float: left;
position: relative;
top: 7px;
border: solid #9b9b9b;
border-width: 0 1px 1px 0;
padding: 3px;
opacity: 0
}

.page-container.pnl .section .pnl-table .arrow.asc {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg)
}

.page-container.pnl .section .pnl-table .arrow.desc {
transform: rotate(45deg);
-webkit-transform: rotate(45deg)
}

.page-container.pnl .section .pnl-table .neg span,.page-container.pnl .section .pnl-table .pos span {
min-width: 50px;
display: inline-block
}

.page-container.pnl .section .heatmap-section {
margin-top: 35px;
margin-bottom: 0
}

.page-container.pnl .section .heatmap-section-locked {
position: absolute;
height: 260px;
width: 100%;
background: transparent;
z-index: 1
}

.page-container.pnl .section .overview-button {
display: inline-block;
left: -40px
}

.page-container.pnl .section .overview-button:hover {
opacity: .8;
cursor: pointer
}

.page-container.pnl .section .overview-button img {
vertical-align: middle
}

.page-container.pnl .section .overview-button label span {
font-size: 11px
}

.page-container.pnl .section .overview-button label:hover {
cursor: pointer
}

.page-container.pnl .section .overview-button input[type=radio]:checked+span {
color: #0059c1
}

.page-container.pnl .section input[name=heatmap-overview] {
top: 2px;
position: relative
}

.page-container.pnl .section .date-fetched {
left: -10px
}

.page-container.pnl .section .heatmap-container {
position: relative;
display: inline-block;
max-width: 100%
}

.page-container.pnl .section .heatmap-container text.month-name {
color: #444;
fill: #444
}

.page-container.pnl .section .heatmap-container text.month-name:hover {
cursor: pointer;
color: #0059c1;
fill: #0059c1
}

.page-container.pnl .section .heatmap-container text.month-name.active {
color: #0059c1!important;
fill: #0059c1!important
}

.page-container.pnl .section .heatmap-container .day-initial {
color: #444;
fill: #444
}

.page-container.pnl .section .heatmap-container #calendar_stats {
display: none;
text-align: left;
margin: 0 auto;
position: relative;
left: 250px;
height: 65px;
top: 20px
}

.page-container.pnl .section .heatmap-container #calendar_stats span.stats-obj {
color: #9b9b9b;
width: 200px;
display: block
}

.page-container.pnl .section .heatmap-container #calendar_stats span.stats-obj span {
display: block;
text-align: center;
font-size: 25px;
margin-top: 10px;
color: #0059c1;
font-weight: 600
}

.page-container.pnl .section .heatmap-container #calendar_stats span.stats-obj:first-child {
margin-bottom: 0
}

.page-container.pnl .section .heatmap-container #calendar_stats span.stats-obj:last-child {
border-left: 2px solid #e1e1e1;
padding-left: 35px;
margin-left: 35px;
position: relative;
left: 200px;
bottom: 55px
}

.page-container.pnl .section .heatmap-container #calendar_stats span.stats-obj:last-child span {
left: -20px;
position: relative
}

.page-container.pnl .section .heatmap-container #share_chart {
left: 15px;
position: absolute;
z-index: 5;
font-size: 14px;
font-weight: 600;
color: #0059c1;
top: -5px;
margin-right: 10px
}

.page-container.pnl .section .heatmap-container #share_chart:hover {
cursor: pointer
}

.page-container.pnl .section .heatmap-container #share_chart img {
height: 18px;
margin-right: 4px;
vertical-align: middle
}

.page-container.pnl .section .heatmap-container #calendar_year svg:not(:root),.page-container.pnl .section .heatmap-container #calendar svg:not(:root) {
overflow: visible
}

.page-container.pnl .section .heatmap-container .heatmap-count {
text-align: left;
min-height: 25px;
margin-left: 15px
}

.page-container.pnl .section .heatmap-container .heatmap-count .heatmap-date {
display: inline-block;
margin-right: 20px;
border-right: 1px solid #c1c1c1;
padding-right: 20px;
color: #0059c1
}

.page-container.pnl .section .heatmap-container .heatmap-count .heatmap-date-label {
display: inline-block;
margin-right: 20px
}

.page-container.pnl .section .heatmap-container .heatmap-count input {
min-height: 0!important;
position: relative;
top: 3px
}

.page-container.pnl .section .heatmap-container .heatmap-count p {
margin-top: 0;
margin-bottom: 0
}

.page-container.pnl .section .heatmap-container .heatmap-count .heatmap-segment {
margin-right: 20px;
display: inline-block
}

.page-container.pnl .section .heatmap-container .heatmap-count .heatmap-segment:hover {
cursor: pointer;
opacity: .6
}

.page-container.pnl .section .heatmap-container .heatmap-count .heatmap-segment p {
display: inline-block;
margin-right: 5px
}

.page-container.pnl .section .heatmap-container .heatmap-count .loader-segment {
border: none
}

.page-container.pnl .section .pnl-view {
display: inline-block;
float: right;
margin-bottom: 20px
}

.page-container.pnl .section .pnl-view label {
margin-bottom: 8px;
margin-left: 8px
}

.page-container.pnl .section .unrealized {
width: 205px!important;
margin-left: 0!important
}

.page-container.pnl .section .unrealized .two {
width: 100%
}

.page-container.pnl .section .pnl-summary {
box-sizing: border-box;
padding: 30px 30px 30px 50px;
background: #fafafb;
border-radius: 2px;
max-width: 100%;
margin: auto
}

.page-container.pnl .section .pnl-summary h1 {
display: inline-block;
margin: 10px 0
}

.page-container.pnl .section .pnl-summary .pnl-profit-percent {
position: relative;
left: 10px
}

.page-container.pnl .section .pnl-summary .border-right {
border-right: 1px solid #f1f1f1;
padding-right: 40px
}

.page-container.pnl .section .pnl-paginate {
margin-top: 15px
}

.page-container.pnl .section .pnl-paginate button {
height: 25px!important;
border: 1px solid #e1e1e1
}

.page-container.pnl .section .pnl-paginate button:disabled {
color: #666;
cursor: not-allowed
}

.page-container.pnl .section .pnl-paginate span {
font-size: 12px;
padding: 0 10px
}

@media only screen and (min-width: 850px) {
.page-container.pnl .realized {
width:850px
}

.page-container.pnl .realized .seven {
width: 70%
}
}

@media only screen and (max-width: 550px) {
.page-container.pnl .page-container.pnl .section .modal-body .pnl-breakdown-head p,.page-container.pnl .page-container.pnl .section .modalbody .pnl-breakdown-head p {
text-align:left!important
}

.page-container.pnl .page-container.pnl .section .modal-body .pnl-breakdown-head h2 {
line-height: 1.5
}

.page-container.pnl .page-container.pnl .section .pnl-table thead tr td:first-child {
min-width: 165px
}
}

@media only screen and (max-width: 800px) {
.page-container.pnl .table-sort {
margin-top:3px!important
}

.page-container.pnl .grey-back-mobile {
height: 175px!important
}

.page-container.pnl .mobile-agg {
top: -170px!important
}

.page-container.pnl .pull-up-section {
top: -140px
}

.page-container.pnl .pull-up-section.unrealised-pnl {
top: -100px!important
}

.page-container.pnl .cards hr {
margin: auto;
width: 75%
}

.page-container.pnl .cards .top-left .text-bold {
font-size: 14px
}

.page-container.pnl .cards .middle-left {
flex: 9!important
}

.page-container.pnl .cards .avg {
width: 60px
}

.page-container.pnl .cards .val {
width: 67px
}

.page-container.pnl .show-on-mobile.inputcontainer.row .four.columns:nth-child(-n+3),.page-container.pnl .show-on-mobile.locked.inputcontainer.row .four.columns:nth-child(-n+3) {
width: 33.33%!important;
padding-right: 5px!important
}

.page-container.pnl .page-container.pnl .input-heatmap-section .two.columns:nth-child(2) {
width: 50%!important;
padding-left: 10px
}

.page-container.pnl .page-container.pnl .input-heatmap-section .two.columns:first-child {
width: 50%!important
}

.page-container.pnl .page-container.pnl .search-table {
right: 0
}

.page-container.pnl .pnl-summary-mobile {
max-width: 800px
}

.page-container.pnl .pnl-summary-mobile h1 {
display: inline-block;
margin-bottom: 10px;
font-size: 1.7rem
}

.page-container.pnl .pnl-summary-mobile .columns {
margin-bottom: 0
}

.page-container.pnl .pnl-summary-mobile .pnl-summary-left {
border-right: 1px solid #e1e1e1;
width: 45%!important
}

.page-container.pnl .pnl-summary-mobile .pnl-summary-left div.label {
color: #9b9b9b
}

.page-container.pnl .pnl-summary-mobile .pnl-summary-right {
width: 50%!important;
padding-left: 16px
}

.page-container.pnl .pnl-summary-mobile .pnl-summary-right img.charges-breakdown-img {
position: relative;
top: 3px;
left: 5px
}

.page-container.pnl .pnl-summary-mobile .pnl-summary-right .block {
margin-bottom: 10px
}

.page-container.pnl .pnl-summary-mobile .pnl-summary-right .block span.label {
color: #9b9b9b
}

.page-container.pnl .pnl-summary-mobile .pnl-summary-right .block span.value {
font-size: 16px;
padding-left: 5px
}

.page-container.pnl .pnl-summary-mobile .six-columns {
min-width: 120px;
float: left
}

.page-container.pnl .pnl-summary-mobile .pos {
color: #10b983
}

.page-container.pnl .pnl-summary-mobile .neg {
color: #f35631
}
}

@media only screen and (max-width: 650px) {
.app .pnl .last-updated,.app .pnl .paginate-info {
top:0
}

.app .pnl .search-table {
left: -10px!important;
top: 90px!important
}

.app .pnl .table-download {
top: 25px;
left: 120px
}
}

@media only screen and (min-width: 800px) {
.pnl-breakdown-table-container {
max-height:250px;
min-height: 200px
}

.input-heatmap-section .one {
width: 4%
}

.input-heatmap-section .one button {
margin: 0;
padding-left: 5px!important;
padding-right: 5px!important
}
}

.page-container.taxpnl .taxpnl-tabs {
font-size: 1.25rem;
border-bottom: 1px solid #eee;
margin-bottom: 50px
}

.page-container.taxpnl .console-banner-tax {
max-width: 270px;
position: absolute;
right: 0;
top: -14px
}

.page-container.taxpnl .console-banner-tax img {
max-width: 100%
}

.page-container.taxpnl h1 {
position: relative
}

.page-container.taxpnl .console-banner {
position: absolute;
right: 0
}

.page-container.taxpnl .partner-logo {
float: right;
font-size: 1rem;
position: absolute;
right: 15px;
top: -12px;
color: #444!important
}

.page-container.taxpnl .partner-logo:hover {
cursor: pointer;
opacity: .7
}

.page-container.taxpnl .partner-logo img {
width: 120px
}

.page-container.taxpnl .tab {
padding: 15px;
display: inline-block;
border-bottom: 1px solid #eee;
position: relative;
top: 1px;
cursor: pointer;
width: 20%;
box-sizing: border-box
}

.page-container.taxpnl .tab.active {
border-bottom: 2px solid #0059c1
}

.page-container.taxpnl .taxpnl-download {
margin-top: 40px
}

.page-container.taxpnl .taxpnl-download a {
padding-bottom: 2px;
padding-right: 5px;
border-bottom: 1px solid #0059c1
}

.page-container.taxpnl .taxpnl-quarter-input {
max-width: 100%;
width: auto
}

.page-container.taxpnl .taxpnl-total {
box-sizing: border-box;
padding: 40px 90px;
background: #fafafb;
border-radius: 2px;
max-width: 100%;
margin: auto
}

.page-container.taxpnl .taxpnl-total label {
display: block;
margin-bottom: 5px
}

.page-container.taxpnl .taxpnl-total .row .four h2:last-child {
margin-bottom: 0
}

.page-container.taxpnl .taxpnl-total .row:nth-child(2) {
margin-top: 30px
}

.page-container.taxpnl .taxpnl-total h2 {
display: inline-block;
margin-top: 10px
}

.page-container.taxpnl .taxpnl-total hr {
margin: 30px 0
}

@media only screen and (max-width: 750px) {
.page-container.taxpnl .taxpnl-total {
padding:20px
}

.page-container.taxpnl .tab {
width: 100%
}
}

@media only screen and (max-width: 450px) {
.console-banner-tax {
max-width:200px!important;
top: -2px!important
}
}

@media only screen and (max-width: 350px) {
.console-banner-tax {
max-width:185px!important
}
}

@media only screen and (min-width: 800px) {
.page-container.taxpnl.taxloss .border-right {
border-right:1px solid #e1e1e1
}
}

@media only screen and (max-width: 800px) {
.console-banner-tax {
position:inherit!important;
width: 75%;
max-width: 100%!important;
display: block;
margin: auto
}

.page-container.taxpnl.taxloss .border-right {
border-bottom: 1px solid #e1e1e1!important;
padding-bottom: 20px;
margin-bottom: 20px
}
}

.page-container.taxpnl.taxloss h1 .link {
float: right;
vertical-align: middle;
font-size: 14px
}

.page-container.taxpnl.taxloss .notice h2 {
display: inline-block;
margin-bottom: 10px;
color: #0059c1
}

.page-container.taxpnl.taxloss .notice span {
line-height: 1.6;
display: inline-block
}

.page-container.taxpnl.taxloss .notice span:first-child {
margin-bottom: 10px
}

.page-container.taxpnl.taxloss .notice li {
margin-bottom: 2px!important
}

.page-container.taxpnl.taxloss .notice li span {
margin-bottom: 0!important
}

.page-container.taxpnl.taxloss .taxloss-table-heads {
margin-bottom: 10px;
margin-top: 30px
}

.page-container.taxpnl.taxloss .sell-links {
float: right;
font-size: 14px;
vertical-align: middle
}

.page-container.taxpnl.taxloss .taxloss-sell,.page-container.taxpnl.taxloss .taxpnl-tabs {
margin-bottom: 25px
}

.page-container.taxpnl.taxloss .mf-scheme {
font-size: .75rem;
text-decoration: none;
padding: 2px 7px;
margin-left: 5px;
border-radius: 2px;
line-height: 1.4;
float: right;
min-width: 36px;
margin-right: 10px;
margin-top: 3px;
text-align: center
}

.page-container.taxpnl.taxloss .mf-scheme.DEBT {
color: #f8ab00;
background: rgba(255,202,85,.33)
}

.page-container.taxpnl.taxloss .mf-scheme.EQUITY {
color: #0059c1;
background: rgba(63,132,243,.2)
}

.page-container.taxpnl.taxloss p {
margin: 0
}

.page-container.taxpnl.taxloss .taxloss-table thead tr {
border-top: 1px solid #f1f1f1
}

.page-container.taxpnl.taxloss .taxloss-table thead td {
color: #9b9b9b;
background: #fafafb
}

.page-container.taxpnl.taxloss .taxloss-table tr {
border-bottom: 1px solid #f1f1f1
}

.page-container.taxpnl.taxloss .taxpnl-total {
padding: 20px 30px!important;
margin-bottom: 30px
}

.page-container.taxpnl.taxloss .taxpnl-total h2 {
margin-top: 10px;
margin-bottom: 0
}

.page-container.taxpnl.taxloss .taxpnl-total h3 {
color: #0059c1;
margin-bottom: 15px
}

.page-container.taxpnl.taxloss .taxpnl-total hr {
margin: 20px 0
}

.page-container.taxpnl.taxloss .taxpnl-total:last-child {
margin-top: 30px
}

.page-container.taxpnl.taxloss .taxpnl-total .row:nth-child(2) {
margin: 0
}

.page-container.taxpnl.taxloss .taxloss-total {
padding: 30px
}

.page-container.taxpnl.taxloss .taxloss-total label {
display: inline-block!important
}

.page-container.taxpnl.taxloss .taxloss-total h2 {
display: inline-block
}

.page-container.taxpnl.taxloss .mf-type-switch {
padding-left: 30px;
position: relative;
top: -20px
}

.page-container.taxpnl.taxloss .mf-type-switch label {
display: inline-block!important
}

.page-container.taxpnl.taxloss .mf-type-switch label:last-child {
margin-left: 20px
}

.page-container.taxpnl.taxloss .mf-type-switch input {
min-height: 0!important
}

.page-container.profile-content .section input:-webkit-autofill,.page-container.profile-content .section input:-webkit-autofill:active,.page-container.profile-content .section input:-webkit-autofill:focus,.page-container.profile-content .section input:-webkit-autofill:hover {
-webkit-box-shadow: 0 0 0 30px #fff inset!important;
-webkit-text-fill-color: #4a4a4a
}

.page-container.profile-content .section button[disabled] {
background: #9b9b9b;
border: 1px solid #9b9b9b
}

.page-container.profile-content .section .income-proof-info {
display: block
}

.page-container.profile-content .section .aadhaar-alert {
display: none;
align-items: center;
margin-top: 20px
}

.page-container.profile-content .section .aadhaar-alert img {
margin-right: 12px
}

.page-container.profile-content .section .family h1 span {
margin-right: 5px
}

.page-container.profile-content .section .family-account-card .top-left {
flex: 20!important
}

.page-container.profile-content .section .family-table tbody td:last-child.family-account-links {
width: 230px
}

.page-container.profile-content .section .family-table tbody td:last-child.family-account-links .family-view {
padding-right: 15px;
margin-right: 10px;
border-right: 1px solid #e1e1e1
}

.page-container.profile-content .section .family-table tbody .rel {
font-size: 18px
}

.page-container.profile-content .section .family-table tbody .status span {
text-transform: capitalize
}

.page-container.profile-content .section .family-form input {
text-transform: uppercase
}

.page-container.profile-content .section .add-family-sub-heading {
margin-top: 30px;
margin-bottom: 10px
}

.page-container.profile-content .section .family-mobile {
position: relative
}

.page-container.profile-content .section .family-mobile .pre-mobile {
position: absolute;
top: 21px;
z-index: 1;
padding: 10px;
background: #fafafb;
left: 1px;
line-height: 1.25rem
}

.page-container.profile-content .section .family-mobile input {
padding-left: 50px!important
}

.page-container.profile-content .section .profile-list {
padding: 20px 10px;
border-bottom: 1px solid #f1f1f1
}

.page-container.profile-content .section .profile-list.active,.page-container.profile-content .section .profile-list:hover {
cursor: pointer;
background: #fafafb;
color: #0059c1
}

.page-container.profile-content .section .file-password-help {
display: inline-block;
line-height: 18px;
margin-top: 5px
}

.page-container.profile-content .section .profile-mobile .profile-mobile-card {
position: relative;
top: -16px;
background: #f4f4f4;
left: -20px;
right: -20px;
width: calc(100% + 40px);
height: 75px;
margin-bottom: 70px
}

.page-container.profile-content .section .profile-mobile .profile-mobile-card .profile-avatar-container {
display: flex;
align-items: center;
width: auto;
max-width: 300px;
margin-bottom: 0;
border: none;
margin: auto;
background: #fff;
padding: 20px 20px;
position: relative;
top: 19px;
box-shadow: 0 1px 6px 0 rgba(0,0,0,.1)
}

.page-container.profile-content .section .profile-mobile .profile-mobile-card .profile-avatar-container .row {
align-items: center
}

.page-container.profile-content .section .profile-mobile .profile-mobile-card .profile-avatar-container h2 {
margin-bottom: 10px
}

.page-container.profile-content .section .profile-mobile .profile-mobile-card .profile-avatar-container h3 {
margin-bottom: 0
}

.page-container.profile-content .section .profile-mobile .profile-mobile-card .profile-avatar {
position: relative
}

.page-container.profile-content .section .open-side-nav {
position: relative;
left: -20px;
padding: 13px 17px;
bottom: 15px;
background: #0059c1;
color: #fff;
font-weight: 600;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
font-size: 18px
}

.page-container.profile-content .section .open-side-nav .opened {
display: none
}

.page-container.profile-content .section .same-address {
margin-top: 30px;
margin-bottom: 0
}

.page-container.profile-content .section .error-state {
color: #f35631
}

.page-container.profile-content .section .account-closure-section {
margin-top: 80px
}

.page-container.profile-content .section .account-closure-section #close_account {
margin-top: 10px
}

.page-container.profile-content .section .account-closure-section #account_closure_form .su-radio-group {
margin-bottom: 30px
}

.page-container.profile-content .section .account-closure-section #account_closure_form .su-radio-group .su-radio-wrap {
display: block;
margin-bottom: 10px
}

.page-container.profile-content .section .account-closure-section #account_closure_form textarea {
width: auto;
max-width: 100%
}

.page-container.profile-content .section .account-closure-section #account_closure_form #submit_account_closure {
margin-right: 20px
}

.page-container.profile-content .section .nominee-container {
width: 100%
}

.page-container.profile-content .section .add-nominee-form .guardian-note,.page-container.profile-content .section .add-nominee-form .nominee-actions {
display: inline-block;
float: right;
font-size: 14px
}

.page-container.profile-content .section .add-nominee-form .su-checkbox-group {
display: inline-block
}

.page-container.profile-content .section .add-nominee-form .nominee-actions {
padding: 15px 0
}

.page-container.profile-content .section .add-nominee-form .nominee-empty {
margin-bottom: 30px
}

.page-container.profile-content .section .add-nominee-form .nominee-empty.nominee-collapse {
border-bottom: 1px solid #e1e1e1
}

.page-container.profile-content .section .add-nominee-form .nominee-empty h3 {
margin-bottom: 0
}

.page-container.profile-content .section .add-nominee-form .custom-error {
display: none
}

.page-container.profile-content .section .add-nominee-form .mx-datepicker,.page-container.profile-content .section .add-nominee-form .nominee-rel,.page-container.profile-content .section .add-nominee-form input[type=file],.page-container.profile-content .section .add-nominee-form select {
display: block
}

.page-container.profile-content .section .add-nominee-form .su-input-group {
margin-top: 30px
}

.page-container.profile-content .section .add-nominee-form .su-input-group .su-message {
margin-top: 0;
position: absolute;
font-size: .725rem
}

.page-container.profile-content .section .add-nominee-form button {
margin-bottom: 5px
}

.page-container.profile-content .section .nominee-proof-help {
margin: 0;
line-height: 18px;
margin-top: 35px
}

.page-container.profile-content .section .guardian-nominee-form {
margin-top: 40px
}

.page-container.profile-content .section .nominee-name-tab {
display: inline-block;
padding: 15px 0
}

.page-container.profile-content .section .nominee-name-tab:hover {
cursor: pointer;
opacity: .8
}

.page-container.profile-content .section .nominee-collapse form {
opacity: 0;
height: 0;
overflow: hidden;
margin-bottom: 0!important
}

.page-container.profile-content .section .nominee-reupload {
position: absolute;
top: 4px;
right: 7px;
padding: 4px
}

.page-container.profile-content .section #witness_form,.page-container.profile-content .section .nominee-filled {
margin-bottom: 20px
}

.page-container.profile-content .section .nominee-list-item {
margin-top: 20px
}

.page-container.profile-content .section .nominee-list-item .edit-nominee:hover {
cursor: pointer
}

.page-container.profile-content .section .location-inputs input {
color: #666!important
}

.page-container.profile-content .section .poa-form {
margin-top: 40px
}

.page-container.profile-content .section .poa-form .su-checkbox-value {
line-height: 20px
}

.page-container.profile-content .section .poa-form .su-checkbox-box {
position: relative;
top: 3px
}

.page-container.profile-content .section .bank-secondary-edit .su-radio-group {
display: inline-block;
margin-left: 15px;
position: relative;
bottom: 1px
}

.page-container.profile-content .section .bank-secondary-edit button {
margin-top: 20px
}

.page-container.profile-content .section .segment-kill-icon {
display: inline-block;
float: right;
position: relative;
top: 5px;
margin-right: 5px
}

.page-container.profile-content .section .edit_bank_form .hidden {
display: none
}

.page-container.profile-content .section .edit_bank_form ul {
padding-left: 25px
}

.page-container.profile-content .section .edit_bank_form ul li {
margin-bottom: 10px
}

.page-container.profile-content .section .edit_bank_form .manage-segment-head {
margin-bottom: 30px
}

.page-container.profile-content .section #form_segment_manage .segment-paused {
display: block;
margin-top: 10px
}

.page-container.profile-content .section #form_segment_manage .locked-segment,.page-container.profile-content .section #form_segment_manage .su-switch-group {
display: inline-block;
float: right
}

.page-container.profile-content .section #form_segment_manage .locked-segment a {
padding: 4px 10px;
text-transform: uppercase;
width: 87px;
border-radius: 2px;
font-size: 10px;
text-align: center;
line-height: 1.4!important;
color: #df514c;
background-color: rgba(223,81,76,.1);
border-radius: 3px
}

.page-container.profile-content .section #form_segment_manage .locked-segment a:hover {
text-decoration: none!important
}

.page-container.profile-content .section #form_segment_manage label {
color: #444
}

.page-container.profile-content .section #form_segment_manage .su-switch-group {
display: inline-block;
margin-left: 20px
}

.page-container.profile-content .section #form_segment_manage .manage-segment-box {
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #e1e1e1
}

.page-container.profile-content .section #form_segment_manage .segment-name {
display: inline-block
}

.page-container.profile-content .section .holdings-check-box {
border: 1px solid #e1e1e1;
padding: 10px 13px;
margin-bottom: 30px;
border-radius: 3px
}

.page-container.profile-content .section .holdings-check-box .su-checkbox-group {
margin-bottom: 10px
}

.page-container.profile-content .section .documents select {
width: auto!important;
margin-right: 20px;
top: 1px;
position: relative
}

.page-container.profile-content .section .segment-file-container {
position: relative;
margin-top: 5px
}

.page-container.profile-content .section .edit-bank {
display: inline-block;
font-size: 1.25rem;
margin-left: 10px;
color: #0059c1
}

.page-container.profile-content .section .edit-bank:hover {
cursor: pointer;
opacity: .8
}

.page-container.profile-content .section .edit-bank img {
height: 1.25rem;
position: relative;
top: 1.5px
}

.page-container.profile-content .section #segment_file_error {
color: #f35631;
display: block
}

.page-container.profile-content .section .soon-tag {
margin-left: 25px;
font-size: 10px;
background: #4caf50;
color: #fff;
font-weight: 600;
padding: 5px 6px;
line-height: 10px;
border-radius: 2px;
display: inline-block
}

.page-container.profile-content .section .slb .su-checkbox-box {
position: relative;
top: 3px
}

.page-container.profile-content .section .slb .su-checkbox-value {
line-height: 1.5
}

.page-container.profile-content .section #profile_zpin h3 a {
margin-left: 10px;
font-size: .875rem
}

.page-container.profile-content .section #profile_zpin h3 a img {
height: 18px;
position: relative;
top: 3px
}

.page-container.profile-content .section .pending-requests {
margin-top: 60px
}

.page-container.profile-content .section .pending-requests img {
height: 16px;
position: relative;
top: 2px
}

.page-container.profile-content .section .history-table tr {
border-bottom: 1px solid #f1f1f1;
padding: 10px 5px
}

.page-container.profile-content .section .history-table thead {
color: #9b9b9b
}

.page-container.profile-content .section .history-table thead tr {
border-top: 1px solid #f1f1f1
}

.page-container.profile-content .section .history-table .delete-disc,.page-container.profile-content .section .history-table .edit-disc {
display: none;
width: .875rem
}

.page-container.profile-content .section .history-table .delete-disc:hover,.page-container.profile-content .section .history-table .edit-disc:hover {
cursor: pointer
}

.page-container.profile-content .section .history-table .edit-disc {
position: relative;
right: 15px
}

.page-container.profile-content .section .history-table tbody tr:hover {
background: #fafafb
}

.page-container.profile-content .section .history-table tbody tr:hover .delete-disc,.page-container.profile-content .section .history-table tbody tr:hover .edit-disc {
display: inline
}

.page-container.profile-content .section .history-table tbody tr td:last-child {
min-width: 40px
}

.page-container.profile-content .section .history-table tbody .approved-flag,.page-container.profile-content .section .history-table tbody .cancel-flag,.page-container.profile-content .section .history-table tbody .failed-flag,.page-container.profile-content .section .history-table tbody .pending-flag {
text-transform: uppercase;
font-size: .6875rem;
padding: 3px 11px;
border-radius: 2px;
position: relative;
width: 76px;
display: inline-block;
margin: auto;
line-height: 1.7;
text-align: center
}

.page-container.profile-content .section .history-table tbody .pending-flag {
background: rgba(255,202,85,.15);
color: #f8ab00
}

.page-container.profile-content .section .history-table tbody .cancel-flag {
background: hsla(0,0%,80%,.15);
color: #9b9b9b
}

.page-container.profile-content .section .history-table tbody .approved-flag {
background: rgba(65,132,243,.15);
color: #4184f3
}

.page-container.profile-content .section .history-table tbody .failed-flag {
background: rgba(255,85,85,.15);
color: #f6461a
}

.page-container.profile-content .section .profile-info {
display: none
}

.page-container.profile-content .section .profile-info.active {
display: block
}

.page-container.profile-content .section .profile-info.bank a:hover {
text-decoration: none!important
}

.page-container.profile-content .section .profile-avatar,.page-container.profile-content .section .profile-name {
display: inline-block
}

.page-container.profile-content .section .profile-name {
margin-left: 85px
}

.page-container.profile-content .section .profile-name h3 {
max-width: 245px
}

.page-container.profile-content .section .mcx-classify-form .row {
margin-bottom: 15px;
text-align: left
}

.page-container.profile-content .section .mcx-classify-form .row.hidden {
display: none
}

.page-container.profile-content .section .mcx-classify-form button[disabled] {
background: #9b9b9b;
border: 1px solid #9b9b9b
}

.page-container.profile-content .section .mcx-classify-form .pagination {
margin-top: 40px!important;
margin-bottom: 0
}

.page-container.profile-content .section .mcx-classify-form p {
margin: 0;
line-height: 32px;
text-transform: capitalize
}

.page-container.profile-content .section .personal .icon {
color: #0059c1
}

.page-container.profile-content .section .personal .edit-email,.page-container.profile-content .section .personal .edit-mobile {
display: inline-block;
margin-left: 5px
}

.page-container.profile-content .section .personal .edit-email:hover,.page-container.profile-content .section .personal .edit-mobile:hover {
cursor: pointer
}

.page-container.profile-content .section .edit-profile-modal h1 a {
color: inherit!important
}

.page-container.profile-content .section .edit-profile-modal ul {
padding-left: 25px
}

.page-container.profile-content .section .edit-profile-modal .modal-container {
overflow: auto
}

.page-container.profile-content .section .edit-profile-modal .edit-profile-email input {
max-width: 250px!important
}

.page-container.profile-content .section .edit-profile-modal .edit-profile-mobile input {
max-width: 150px!important
}

.page-container.profile-content .section .edit-profile-modal .notice {
margin-top: 15px
}

.page-container.profile-content .section .profile-avatar-container {
position: relative
}

.page-container.profile-content .section .profile-avatar {
margin-right: 25px;
position: absolute;
top: -1px
}

.page-container.profile-content .section .profile-avatar .avatar {
height: 60px!important;
width: 60px!important;
font-size: 20px!important;
line-height: 60px!important
}

.page-container.profile-content .section .profile-uploads {
display: inline-block;
width: 31%;
margin-left: 2%
}

.page-container.profile-content .section .profile-uploads-container .profile-uploads:nth-child(3n-2) {
margin-left: 0
}

.page-container.profile-content .section .profile-container h3 {
word-break: break-word;
line-height: 1.3
}

.page-container.profile-content .section .profile-container a:hover {
text-decoration: underline!important
}

.page-container.profile-content .section .profile-container .eight {
padding-left: 45px;
border-left: 1px solid #f1f1f1;
min-height: 525px
}

.page-container.profile-content .section .profile-container .text-box {
margin-bottom: 30px!important
}

.page-container.profile-content .section .financial-upload-form select {
margin-bottom: 20px;
width: 200px!important
}

.page-container.profile-content .section .financial-upload-form input[type=file] {
max-width: 100%;
height: 39px;
position: relative;
top: -4px
}

.page-container.profile-content .section .financial-upload-form .password-help,.page-container.profile-content .section .financial-upload-form .password-help div {
display: inline
}

.page-container.profile-content .section .quarterly-settlement-form .su-radio-wrap {
display: block;
margin-bottom: 15px
}

.page-container.profile-content .section .quarterly-settlement-form label {
border-bottom: none
}

.page-container.profile-content .section .quarterly-settlement-form button {
margin-top: 15px
}

.page-container.profile-content .section .quarterly-settlement-form .su-radio-group .su-radio:checked+.su-radio-label:before {
background: #0059c1;
border: 1px solid #0059c1
}

.page-container.profile-content .section .reset-zpin {
font-size: .75rem;
text-decoration: none;
padding: 2px 7px;
margin-left: 5px;
background: rgba(63,132,243,.2);
border-radius: 2px;
line-height: 1;
position: relative;
bottom: 2px;
left: 10px
}

.page-container.profile-content .section .account-flag {
font-size: .6875rem;
display: inline;
margin-left: 5px;
background: rgba(255,202,85,.15);
color: #f8ab00
}

.page-container.profile-content .section .account-flag,.page-container.profile-content .section .financial-proof-flag {
text-transform: uppercase;
padding: 3px 11px;
border-radius: 2px;
position: relative;
width: 76px;
line-height: 1.7;
text-align: center
}

.page-container.profile-content .section .financial-proof-flag {
font-size: .75rem;
font-weight: 600;
display: block
}

.page-container.profile-content .section .approved-flag {
background: rgba(65,132,243,.15);
color: #4184f3
}

.page-container.profile-content .section .pending-flag {
background: rgba(255,202,85,.15);
color: #d89602
}

.page-container.profile-content .section .rejected-flag {
background: rgba(255,85,85,.15);
color: #f6461a
}

@media only screen and (max-width: 400px) {
.segment-kill-icon {
top:0!important
}

.segment-kill-icon img {
width: 90px
}
}

@media only screen and (max-width: 800px) {
.page-container.profile-content .section .profile-mobile .profile-mobile-card .profile-avatar-container h2 {
font-size:14px;
line-height: 20px
}

.page-container.profile-content .section .profile-mobile .profile-mobile-card .profile-avatar-container h3 {
font-size: 12px
}

.family-confirmation .six {
width: 50%!important
}

.app .page-container.profile-content {
padding-left: 20px!important;
padding-right: 20px!important
}

.app .page-container.profile-content .section {
margin-bottom: 40px
}

.app .page-container.profile-content .profile-uploads {
width: 100%!important
}

.app .page-container.profile-content .profile-list {
padding: 15px!important;
min-width: 220px;
box-sizing: border-box
}

.app .page-container.profile-content .profile-container .eight {
padding-left: 0!important;
border-left: none!important
}

.app .page-container.profile-content #profile_client_id,.app .page-container.profile-content #profile_zpin {
width: 48%!important
}

.app .page-container.profile-content #profile_zpin {
margin-left: 4%!important
}
}

.margins .fund-button-wrap {
text-align: right
}

.margins .main-details .row {
margin-bottom: 50px
}

.margins .main-details .label {
text-transform: uppercase;
color: #9b9b9b;
margin-bottom: 10px
}

.margins .sub-details .row {
margin-bottom: 50px
}

.margins .sub-details .label {
text-transform: uppercase;
color: #9b9b9b;
margin-bottom: 10px
}

.notifications-window {
position: absolute;
right: 45px;
top: 50px;
min-width: 300px;
padding: 10px;
z-index: 100;
text-align: left;
border: 1px solid #eee;
border-radius: 2px;
background: #fff;
box-shadow: 0 2px 2px 0 rgba(0,0,0,.1)
}

.notifications-window table tbody tr td {
text-align: left
}

.notifications-window table tbody tr td.status {
text-align: right
}

.notifications-window .loader {
display: block;
text-align: center;
padding: 20px
}

.notifications-window .clear {
float: right;
padding: 5px 5px 0 5px;
color: #9b9b9b;
cursor: pointer
}

.context-menu {
position: absolute;
display: inline-block
}

.context-menu .separator {
border-top: 1px solid #eee
}

.context-menu .context-menu-list {
left: 4px;
z-index: 9;
padding: 3px 0 0 0;
box-sizing: border-box;
text-align: left;
min-width: 175px;
border-width: 1px;
border-radius: 2px;
position: fixed;
border-style: solid;
background: #fff;
border-color: #ddd;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.1)
}

.context-menu .context-menu-list li a {
width: 100%;
padding: 8px 10px;
display: inline-block;
box-sizing: border-box;
color: rgba(68,68,68,.6)!important;
text-decoration: none
}

.context-menu .context-menu-list li a .icon {
margin-right: 5px
}

.context-menu .context-menu-list li a:hover {
color: #444;
background: #fafafb
}

.context-menu .context-menu-list hr {
margin: 0
}

.context-menu .context-menu-list.position-bottom:after,.context-menu .context-menu-list.position-bottom:before {
border-bottom: 7px solid #fff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
right: 9px;
position: absolute;
top: -7px
}

.context-menu .context-menu-list.position-bottom:before {
border-bottom-color: #ccc;
border-bottom-width: 7px;
top: -8px
}

.context-menu .context-menu-list.position-top {
padding: 0
}

.context-menu .context-menu-list.position-top:after,.context-menu .context-menu-list.position-top:before {
border-top: 7px solid #fff;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
content: "";
right: 9px;
position: absolute;
bottom: -7px
}

.context-menu .context-menu-list.position-top:before {
border-top-color: #ccc;
border-top-width: 7px;
bottom: -8px
}

.context-menu.table {
float: right;
display: inline-block;
position: relative
}

.context-menu.table .context-menu-button {
font-size: 1rem;
color: #fff;
background: #387ed1;
cursor: pointer;
display: inline-block;
line-height: 1;
border: 1px solid #387ed1;
padding: 0 5px;
border-radius: 2px
}

.context-menu.mobile .context-menu-list {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%
}

.mobile-context-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
background: rgba(0,0,0,.6)
}

.mobile-context-menu .mobile-context-menu-list {
bottom: 0;
width: 100%;
position: fixed;
background: #fff
}

.mobile-context-menu .mobile-context-menu-list li {
border-top: 1px solid #f4f4f4
}

.mobile-context-menu .mobile-context-menu-list li .link,.mobile-context-menu .mobile-context-menu-list li a {
width: 100%;
padding: 15px;
box-sizing: border-box;
color: #000!important;
display: flex
}

.mobile-context-menu .mobile-context-menu-list li .link span.icon,.mobile-context-menu .mobile-context-menu-list li a span.icon {
margin-right: 10px
}

.mobile-context-menu .mobile-context-menu-list li a span:nth-child(2) {
margin-top: 2px
}

.mobile-context-menu .mobile-context-menu-list li a span:nth-child(3) {
margin-left: 85%;
position: absolute
}

.mobile-context-menu .mobile-context-menu-list li img {
max-width: 20px;
height: 20px;
margin-right: 4px;
margin-top: 2px
}

.loans .flag {
text-transform: uppercase;
font-size: .6875rem;
padding: 3px 11px;
border-radius: 2px;
position: relative;
width: 76px;
display: inline;
margin-left: 5px;
line-height: 1.7;
text-align: center;
background: rgba(255,202,85,.15);
color: #f35631
}

.loans .manage-pledge-amounts {
padding-top: 15px
}

.loans .manage-pledge-amounts .unpledge-info-text {
line-height: normal
}

.loans .manage-pledge-amounts div:nth-child(2) .icon-arrow-right {
margin: 0;
padding: 20px 30px 0 0
}

@media only screen and (min-width: 801px) {
.loans .manage-pledge-amounts {
border-left:1px solid #f1f1f1;
padding: 0 20px 20px 40px!important
}
}

.loans .unpledge-button {
margin-top: 25px
}

.loans .img-zerodha-capital {
right: 5%;
position: absolute
}

.loans .text-red {
color: #f6461a
}

.loans a.btn {
color: #fff!important
}

.loans .loan-info-wrapper .banner-alert-warning {
border-radius: 2px;
padding: 12px 10px 12px 42px;
background-color: #feeeeb
}

.loans .loan-info-wrapper .banner-alert-warning p {
margin-top: 0!important;
margin-bottom: 0!important;
margin-left: 5px;
color: #f35631
}

.loans .loan-info-wrapper .banner-alert-success {
border-radius: 2px;
padding: 12px 10px 12px 42px;
background-color: #eff8ef
}

.loans .loan-info-wrapper .banner-alert-success p {
margin-top: 0!important;
margin-bottom: 0!important;
margin-left: 5px;
color: #56b85a
}

@media only screen and (min-width: 1200px) {
.loans .loan-info-wrapper {
padding:0 50px
}
}

@media only screen and (max-width: 600px) {
.loans .loans-card-container .one {
display:none
}
}

.loans .loans-card-container {
margin: 40px 0
}

.loans .loans-card-container .loanamt-card {
background-color: #fff;
border: 1px solid #e1e1e1;
border-radius: 2px;
min-height: 166px!important
}

.loans .loans-card-container .loanamt-card.left {
padding: 20px 0 20px 30px;
display: flex;
align-items: center
}

.loans .loans-card-container .loanamt-card.right {
padding: 20px 0
}

.loans .loans-card-container .loanamt-card.right .payment-title {
display: flex;
align-items: center;
padding: 0 30px
}

.loans .loans-card-container .loanamt-card.right .payment-title .six.columns p {
margin-bottom: 0;
margin-top: 0;
text-align: right
}

.loans .loans-card-container .loanamt-card.right .repayment .make-payment-btn {
float: right
}

.loans .loans-card-container .loanamt-card.right .repayment .make-payment-btn.sm {
float: none
}

.loans .loans-card-container .loanamt-card.right .repayment .close-loan-text {
color: #0059c1;
cursor: pointer;
font-size: 12px;
margin-top: 0;
text-align: center;
width: 154px;
float: right
}

.loans .loans-card-container .loanamt-card.right .repayment .close-loan-text.sm {
float: none
}

.loans .loans-card-container .loanamt-card.right .payment-card-text.repayment,.loans .loans-card-container .loanamt-card.right .payment-card-text.shortfall-payment {
padding: 20px 30px
}

.loans .loans-card-container .loanamt-card.right .payment-card-text.repayment .make-payment-btn,.loans .loans-card-container .loanamt-card.right .payment-card-text.shortfall-payment .make-payment-btn {
margin: 0
}

.loans .loans-card-container .loanamt-card.right .payment-card-text .four.columns .loan-closure-btn {
margin-top: 8px;
max-width: 133px;
width: 133px
}

.loans .loans-card-container .loanamt-card.right .payment-card-text .four.columns .loan-closure-btn,.loans .loans-card-container .loanamt-card.right .payment-card-text .four.columns .make-payment-btn {
font-size: .875rem;
padding: 7px 25px
}

.loans .loans-card-container .loanamt-card h2 {
margin-bottom: 0
}

.loans .loans-card-container .loanamt-card .outstanding-loan-amount {
width: 100%;
display: flex;
align-items: center
}

.loans .loans-card-container .loanamt-card .outstanding-loan-amount .interest-rate,.loans .loans-card-container .loanamt-card .outstanding-loan-amount .ltv-ratio,.loans .loans-card-container .loanamt-card .outstanding-loan-amount .tenure {
display: flex;
padding-top: 5px;
padding-bottom: 5px
}

.loans .loans-card-container .loanamt-card .outstanding-loan-amount .interest-rate p,.loans .loans-card-container .loanamt-card .outstanding-loan-amount .ltv-ratio p,.loans .loans-card-container .loanamt-card .outstanding-loan-amount .tenure p {
margin-top: 0!important;
margin-bottom: 0!important
}

.loans .loans-card-container .loanamt-card .outstanding-loan-amount .interest-rate label,.loans .loans-card-container .loanamt-card .outstanding-loan-amount .ltv-ratio label,.loans .loans-card-container .loanamt-card .outstanding-loan-amount .tenure label {
min-width: 120px
}

.loans .loans-card-container .payment-card-text p {
margin-bottom: 0!important;
margin-top: 0!important
}

.loans .loans-card-container .payment-card-text p.loan-close-text {
cursor: pointer
}

.loans .confirm-btn {
margin-top: 10px
}

.loans .loan-pledge-confirm div {
float: left
}

.loans .loan-pledge-confirm div:first-child {
width: 25%
}

.loans .loan-pledge-confirm div:nth-child(2) {
width: 25%;
text-align: center;
color: #387ed1
}

.loans .loan-pledge-confirm div:nth-child(3) {
width: 50%
}

.loans .loan-pledge-confirm div label {
color: #387ed1!important
}

.loans .loan-pledge-confirm div p {
color: #9b9b9b!important;
margin-top: 2px
}

.loans .loan-pledge-confirm div img {
margin-top: 15%
}

.loans .verify-aadhaar-text a {
text-decoration: none;
color: #000
}

.loans .processing-fee {
margin-top: 30px;
margin-bottom: 15px
}

.loans .processing-fee p,.loans .processing-fee span {
display: inline
}

.loans .processing-fee span {
font-weight: 600;
color: #000!important;
font-size: 14px!important
}

.loans .pledge-stocks-container {
margin-top: -20px;
margin-left: -60px
}

.loans .pledge-stocks-container table thead tr {
border-bottom: 1px solid #f1f1f1;
border-top: 1px solid #f1f1f1
}

.loans .pledge-stocks-container table thead tr th {
color: #666!important;
font-weight: 400
}

.loans .pledge-stocks-container table thead tr th:first-child {
float: left
}

.loans .pledge-stocks-container table tbody tr {
border-bottom: 1px solid #f1f1f1
}

.loans .pledge-stocks-container table tbody tr td {
margin: 4px 0 4px 0
}

.loans .pledge-stocks-container table tbody tr td:first-child {
float: left
}

.loans .pledge-stocks-details {
width: 50%;
float: left
}

.loans .pledge-statements-container .data-table:focus {
border: 0;
outline: none
}

.loans .pledge-statements-container table thead tr {
border-bottom: 1px solid #f1f1f1;
border-top: 1px solid #f1f1f1
}

.loans .pledge-statements-container table thead tr th {
color: #666!important;
background: #fafafb;
font-weight: 400
}

.loans .pledge-statements-container table thead tr th:nth-child(-n+2) {
text-align: left!important
}

.loans .pledge-statements-container table thead tr th:nth-child(4n+1) {
min-width: 100px!important
}

.loans .pledge-statements-container table tbody tr {
border-bottom: 1px solid #f1f1f1
}

.loans .pledge-statements-container table tbody tr td {
margin: 5px 0 5px 0
}

.loans .pledge-statements-container table tbody tr td:first-child {
position: relative
}

.loans .pledge-statements-container .flag-container {
position: absolute;
right: 0;
display: inline-block
}

.loans .pledge-statements-container .flag-container .context-menu-button-wrap>*,.loans .pledge-statements-container .flag-container .context-menu.table ul.context-menu-list li a {
text-transform: none!important
}

.loans .pledge-statements-container ul.pagination {
padding: 0;
list-style-type: none;
text-align: center;
margin-top: 30px
}

.loans .pledge-statements-container ul.pagination li {
cursor: pointer;
display: inline-block;
margin-right: 12px
}

.loans .pledge-statements-container ul.pagination li:first-child a {
position: relative;
bottom: 5px;
font-size: 0;
background: url(/static/images/page-prev.png);
background-repeat: no-repeat;
background-position: 50%
}

.loans .pledge-statements-container ul.pagination li:last-child a {
position: relative;
bottom: 5px;
font-size: 0;
background: url(/static/images/page-next.png);
background-repeat: no-repeat;
background-position: 50%
}

.loans .pledge-statements-container ul.pagination li.selected {
color: #0059c1;
text-decoration: none
}

.loans .pledge-statements-container ul.pagination li.selected a {
background: rgba(65,132,243,.24);
border: none
}

.loans .pledge-statements-container ul.pagination li.disabled a {
cursor: not-allowed
}

.loans .pledge-statements-container ul.pagination li:hover a {
border: 1px solid rgba(65,132,243,.24)
}

.loans .pledge-statements-container ul.pagination li a {
width: 30px;
height: 30px;
border-radius: 50%;
line-height: 30px;
color: #0059c1;
display: block;
border: 1px solid transparent
}

.loans .pledge-statements-container ul.pagination li a:hover {
opacity: .9
}

.loans .pledge-statements-container ul.pagination li a:focus {
outline: 0
}

.loans .section.cards .card {
padding: 12px 10px;
border-top: 1px solid #eee
}

.loans .section.cards .card.last {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee
}

.loans .section.cards .card .top {
margin-bottom: 5px;
display: flex
}

.loans .section.cards .card .top .top-left {
flex: 6
}

.loans .section.cards .card .top .top-right {
flex: 6;
text-align: right
}

.loans .section.cards .card .middle {
margin-bottom: 5px;
display: flex
}

.loans .section.cards .card .middle .middle-left {
flex: 6
}

.loans .section.cards .card .middle .middle-right {
flex: 6;
text-align: right
}

.loans .section.cards .card .bottom {
display: flex
}

.loans .section.cards .card .bottom .bottom-left {
flex: 6
}

.loans .section.cards .card .bottom .bottom-right {
flex: 6;
text-align: right
}

.loans .loan-confirm-wrapper h3 {
margin-bottom: 15px!important
}

.loans .loan-confirm-wrapper .interest-rate h2 {
margin-bottom: 0!important
}

.loans .loan-confirm-wrapper .interest-rate span {
font-size: 14px!important;
color: #444
}

.loans .loan-confirm-wrapper .annum-charge {
margin-bottom: 10px!important;
line-height: normal
}

.loans .loan-confirm-wrapper .confirm-kyc-details {
border-left: 1px solid #f1f1f1;
padding: 0 20px 20px 40px
}

.loans .loan-confirm-wrapper .confirm-kyc-details h3 {
display: inline
}

.loans .loan-confirm-wrapper .confirm-kyc-details label {
margin-bottom: 0!important;
font-size: 1rem!important
}

.loans .loan-confirm-wrapper .confirm-kyc-details .bank-account-details,.loans .loan-confirm-wrapper .confirm-kyc-details .loan-purpose-details,.loans .loan-confirm-wrapper .confirm-kyc-details .loan-purpose-text {
margin-top: 30px!important
}

.loans .loan-confirm-wrapper .confirm-kyc-details .confirm-termsheet {
margin-top: 20px!important
}

.loans .loan-confirm-wrapper .edit-pledge-stocks-header {
font-size: 16px
}

.loans .loan-confirm-wrapper .edit-pledge-stocks-header .icon {
color: #0059c1
}

.loans .loan-confirm-wrapper .edit-pledge-stocks-header .edit-pledge-stocks {
display: inline-block;
margin-left: 5px
}

.loans .loan-confirm-wrapper .edit-pledge-stocks-header .edit-pledge-stocks:hover {
cursor: pointer
}

.loans .pledged-table,.loans .statement-table,.loans .unpledge-table {
width: 100%
}

.loans .pledged-table input,.loans .statement-table input,.loans .unpledge-table input {
border: 1px solid #e1e1e1
}

.loans .pledged-table tbody,.loans .statement-table tbody,.loans .unpledge-table tbody {
font-size: 14px
}

.loans .pledged-table td,.loans .statement-table td,.loans .unpledge-table td {
text-align: right
}

.loans .pledged-table tbody td:first-child,.loans .pledged-table thead td:first-child,.loans .statement-table tbody td:first-child,.loans .statement-table thead td:first-child,.loans .unpledge-table tbody td:first-child,.loans .unpledge-table thead td:first-child {
text-align: left!important
}

.loans .show-inline {
display: inline-block!important
}

.loans .tabs-component-tabs {
list-style-type: none;
text-align: right;
padding-left: 0
}

.loans li.tabs-component-tab {
display: inline-block;
margin-right: 20px
}

.loans li.tabs-component-tab a {
font-size: 12px;
text-decoration: none;
color: #666;
padding-bottom: 5px
}

.loans li.tabs-component-tab a:hover {
color: #ff5c20
}

.loans .tabs-component-tab.is-active a {
color: #ff5c20;
border-bottom: 2px solid #ff5c20
}

.loans .tabs-component-tab.is-active a:hover {
color: #ff5c20;
cursor: default
}

.loans .su-radio:checked+.su-radio-label:before {
background: #0059c1!important;
border: 1px solid #0059c1!important
}

.loans .su-radio-group .su-radio:checked+.su-radio-label {
color: #0059c1!important
}

.loans .su-radio-group .su-radio+.su-radio-label:before {
margin: -4px 5px 0 0!important
}

.loans .loans-closure .modal-container .close-modal,.loans .section .loans-confirm .modal-container .close-modal {
display: block!important;
top: 15px!important;
right: 15px!important
}

.loans .loans-closure .modal-container .modal-body-rowinput-container .su-input-group,.loans .section .loans-confirm .modal-container .modal-body-rowinput-container .su-input-group {
float: left;
width: 60%
}

.loans .loans-closure .modal-container .modal-body-rowinput-container .payment-mode,.loans .section .loans-confirm .modal-container .modal-body-rowinput-container .payment-mode {
margin-top: 20px
}

.loans .loans-closure .modal-container .modal-body-rowinput-container .payment-mode .su-radio-group,.loans .section .loans-confirm .modal-container .modal-body-rowinput-container .payment-mode .su-radio-group {
margin-top: 0
}

.loans .loans-closure .modal-container .modal-body-rowinput-container .su-radio-group,.loans .section .loans-confirm .modal-container .modal-body-rowinput-container .su-radio-group {
margin-top: 20px
}

.loans .loans-closure .modal-container .modal-body-rowinput-container .su-radio-group .su-radio-wrap,.loans .section .loans-confirm .modal-container .modal-body-rowinput-container .su-radio-group .su-radio-wrap {
margin-bottom: 5px
}

.loans .loans-closure .modal-container .modal-body-rowinput-container button,.loans .section .loans-confirm .modal-container .modal-body-rowinput-container button {
float: left;
margin-left: 20px;
margin-top: 20px
}

.loans .loans-closure .modal-container {
width: 450px;
padding: 20px
}

.loans .loans-closure .modal-container input {
background-color: #f4f4f4;
pointer-events: none
}

.loans .section .loans-confirm .modal-container {
width: 450px;
padding: 20px
}

.loans .section .loans-confirm .modal-container .modal-body .modal-body-header {
font-size: 18px;
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0;
margin-top: 0
}

.loans .section .loans-confirm .modal-container .modal-body .modal-body-header .close-modal {
position: relative!important;
top: 3px!important;
right: 0!important
}

.loans .section .loans-confirm .modal-container .modal-body .su-radio-group .su-radio-wrap {
display: block!important
}

.loans .section .loans-confirm .modal-container .modal-body .loan-close-row,.loans .section .loans-confirm .modal-container .modal-body .loan-custom-row,.loans .section .loans-confirm .modal-container .modal-body .loan-repayment-row {
position: relative
}

.loans .section .loans-confirm .modal-container .modal-body .loan-close-row .pre-rupee,.loans .section .loans-confirm .modal-container .modal-body .loan-custom-row .pre-rupee,.loans .section .loans-confirm .modal-container .modal-body .loan-repayment-row .pre-rupee {
position: absolute;
top: 21px;
z-index: 1;
padding: 10px;
background: #fafafb;
left: 2px;
line-height: 1.25rem
}

.loans .section .loans-confirm .modal-container .modal-body .loan-close-row .su-input-group input.upi-input,.loans .section .loans-confirm .modal-container .modal-body .loan-custom-row .su-input-group input.upi-input,.loans .section .loans-confirm .modal-container .modal-body .loan-repayment-row .su-input-group input.upi-input {
padding: 10px 15px 10px 10px
}

.loans .section .loans-confirm .modal-container .modal-body .loan-close-row .su-input-group input,.loans .section .loans-confirm .modal-container .modal-body .loan-custom-row .su-input-group input,.loans .section .loans-confirm .modal-container .modal-body .loan-repayment-row .su-input-group input {
padding: 10px 15px 10px 35px
}

.loans .section .loans-confirm .modal-container .modal-body .pan-consent-required {
padding: 15px 0
}

.loans .section .loans-confirm .modal-container .modal-body .loan-close-row input {
background-color: #f4f4f4;
pointer-events: none
}

.loans .section .loans-confirm .modal-container .modal-body .repay-loanclose-text {
margin-bottom: 0!important;
line-height: 15px
}

.loans .section.fatca {
margin-top: 45px
}

.loans .section.fatca h2 {
font-size: 20px
}

.loans .section.fatca .su-radio-group {
margin-top: 15px!important
}

.loans .section.fatca .su-radio-group .su-radio-wrap label {
font-size: 14px!important
}

.loans .section.fatca .input-container select {
padding-left: 10px!important
}

.loans .section.fatca .input-container label {
margin-bottom: 0!important
}

.loans .section table td input {
text-align: right;
border: 1px solid #e1e1e1;
padding: 2px 5px;
height: 28px;
border-radius: 2px
}

.loans .section .img-loan-sub {
width: 290px;
height: 180px;
padding: 20px
}

.loans .tooltip-ltp,.loans .tooltip-qty {
display: inline-block
}

.loans .tooltip-ltp span,.loans .tooltip-mvalue span,.loans .tooltip-qty span {
display: block;
text-align: center
}

.loans .tooltip-mvalue span:first-child {
color: #387ed1
}

.loans .tooltip-ltp {
margin-left: 30px
}

.loans .tooltip-ltp span:last-child,.loans .tooltip-mvalue span:last-child,.loans .tooltip-qty span:last-child {
font-size: 11px;
font-style: italic;
text-align: center
}

.loans .v-popover {
display: inline
}

.loans .v-popover button {
font-size: 10px!important;
border: 1px solid #ccc;
background: #fff;
width: 15px;
height: 15px!important;
padding: 0 1px 0 0!important;
border-radius: 50%;
color: #9b9b9b;
position: relative;
bottom: 1px;
right: 5px
}

.loans .v-popover button:hover {
border-color: #666;
color: #666
}

.loans .tooltip.popover .popover-inner {
background: #fff;
color: #222;
padding: 5px 20px;
border: 1px solid #ccc;
border-radius: 2px;
box-shadow: 1px 1px 3px 0 rgba(0,0,0,.1)
}

.loans .tooltip.popover .popover-arrow {
border-color: #f9f9f9
}

.loans .tooltip-arrow {
z-index: 1
}

.loans .kyc-main-container .body-section span .asterisk-cls {
color: #4a4a4a
}

.loans .kyc-main-container .body-section h2 {
font-size: 20px
}

.loans .kyc-main-container .body-section .kyc-details {
margin-bottom: 5px
}

.loans .kyc-main-container .body-section .kyc-details span.icon.icon-help-circle {
float: left
}

.loans .kyc-main-container .body-section .kyc-details div.four.columns {
margin-left: 0
}

.loans .kyc-main-container .body-section .kyc-details span.span-ckyc {
color: #9b9b9b;
font-size: 10px;
padding-left: 10px
}

.loans .kyc-main-container .body-section button {
margin-top: 20px!important
}

.loans .kyc-main-container .body-section .img-kyc-confirm {
text-align: center
}

.loans .kyc-main-container .body-section .img-kyc-confirm img {
height: 280px;
width: 300px
}

.loans .loans-form .new-loan-head {
position: relative
}

.loans .loans-form .new-loan-head .search-table {
position: absolute;
right: 0!important;
margin: 0!important
}

.loans .loans-form .new-loan-head .search-table .filter-input {
border-radius: 2px
}

.loans .loans-form .new-loan-head .search-table .icon-search {
font-size: 1rem
}

.loans .loans-form .new-loan-head .search-table .icon-times {
top: 16px!important
}

.loans .loans-form .new-loan-head .search-table .icon-times:before {
bottom: 12px!important
}

.loans .loans-form .new-loan-para {
margin-top: 0!important;
margin-bottom: 0!important
}

.loans .loans-form .loans-form-textarea {
border-left: 1px solid #f1f1f1;
padding: 0 20px 20px 40px
}

.loans .loans-form .loans-form-textarea .annum-charge {
margin-bottom: 10px!important;
line-height: normal
}

.loans .loans-form .holdings-total {
padding-top: 10px;
padding-bottom: 10px;
margin-top: 0!important;
border-bottom: 1px solid #eee;
box-sizing: border-box;
text-align: right;
width: 100%
}

.loans .loans-form .holdings-total.px-60 {
padding-right: 60px
}

.loans .loans-form .holdings-total.px-45 {
padding-right: 45px
}

.loans .loans-form .holdings-total span:first-child {
color: #666;
font-size: .875rem;
padding-right: 15px
}

.loans .loans-form .key-points p {
margin-bottom: 10px
}

.loans .eligible-main-container h2 {
font-size: 20px
}

.loans .eligible-main-container a {
text-decoration: underline!important
}

.loans .eligible-main-container img.profile-img {
max-height: 200px
}

.loans .eligible-main-container label .edit-mobile {
margin-left: 5px;
color: #0059c1;
display: inline-block;
cursor: pointer
}

.loans .eligible-tac,.loans .fatca-tac {
margin: 40px 0 25px 0
}

.loans .table-container {
max-height: 600px;
overflow: auto;
border-bottom: 1px solid #eee
}

.loans .table-container input {
min-height: 0
}

.loans .table-container div:focus {
outline: none
}

.loans .table-container div .data-table table {
border-collapse: separate;
border-spacing: 0;
min-width: 500px
}

.loans .table-container div .data-table tbody tr td {
text-align: right
}

.loans .table-container div .data-table tbody tr td input {
min-height: 30px!important
}

.loans .table-container div .data-table tbody tr td p {
margin-bottom: 0!important;
margin-top: 0!important
}

.loans .table-container div .data-table tbody tr td:nth-child(3) {
min-width: 120px!important;
box-sizing: border-box
}

.loans .table-container div .data-table tbody tr td:nth-child(3) div.su-input-group {
margin-bottom: 0;
margin-top: 0
}

.loans .table-container div .data-table tbody tr td:nth-child(3) div.su-input-group input {
min-width: 45px;
max-width: 35px
}

.loans .table-container div .data-table tbody tr td:nth-child(3) div.su-input-group span {
display: inline-block;
min-width: 40px!important;
text-align: left
}

.loans .table-container div .data-table tbody tr td:nth-child(4) {
padding-right: 15px!important;
min-width: 110px
}

.loans .table-container div .data-table tbody tr td:nth-child(4) div .su-input-group {
margin-bottom: 0;
margin-top: 0;
display: inline-block;
width: 100px;
margin-right: -5px
}

.loans .table-container div .data-table tbody tr td:nth-child(4) div .su-input-group input {
min-width: 70px!important
}

.loans .table-container div .data-table tbody tr td:nth-child(4) div .su-checkbox-group {
display: inline-block;
margin-left: 15px
}

.loans .table-container div .data-table tbody tr td:nth-child(4) div .su-checkbox-group .su-checkbox {
position: fixed!important
}

.loans .table-container div .data-table tbody tr td:first-child {
text-align: left!important
}

.loans .table-container div .data-table tbody tr td:first-child .arrow {
float: right!important
}

.loans .table-container div .data-table thead th:first-child {
background: #fafafb
}

.loans .table-container div .data-table thead th {
font-size: .85rem;
font-weight: 400;
position: sticky;
top: 0;
z-index: 5;
border-bottom: 1px solid #f1f1f1;
border-top: 1px solid #f1f1f1
}

.loans .table-container div .data-table thead th:hover {
background: #fafafb
}

.loans .table-container div .data-table thead th:hover .arrow {
opacity: 1
}

.loans .table-container div .data-table thead .arrow-show {
opacity: 1;
background: #fafafb
}

.loans .table-container div .data-table thead th:first-child {
cursor: pointer;
text-align: left!important
}

.loans .table-container div .data-table thead th:first-child .arrow {
float: right!important
}

.loans .table-container div .data-table thead th:nth-child(2) {
background: #fff;
cursor: pointer
}

.loans .table-container div .data-table thead th:nth-child(3) {
background: #fff;
cursor: default;
text-align: center!important
}

.loans .table-container div .data-table thead th:nth-child(4) {
padding-right: 15px!important;
background: #fff;
cursor: default
}

.loans .table-container div .data-table thead th:nth-child(4) .su-checkbox-group {
display: inline-block;
margin-left: 9px
}

.loans .table-container div .data-table thead th:nth-child(4) .su-checkbox-group .su-checkbox-box {
top: 3px
}

.loans .table-container div .data-table tbody tr:hover .context-menu {
visibility: visible
}

.loans .table-container div .data-table tbody tr:hover {
background: #fafafb
}

.loans .table-container div .data-table tr td {
border-bottom: 1px solid #f1f1f1
}

.loans .table-container div .data-table .arrow {
display: inline-block;
float: left;
position: relative;
top: 7px;
border: solid #9b9b9b;
border-width: 0 1px 1px 0;
padding: 3px;
opacity: 0
}

.loans .table-container div .data-table .arrow.asc {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg)
}

.loans .table-container div .data-table .arrow.desc {
transform: rotate(45deg);
-webkit-transform: rotate(45deg)
}

.loans .manage-pledge-table-container div .data-table table tbody tr td:nth-child(2) {
min-width: 150px
}

.loans .manage-pledge-table-container div .data-table table tbody tr td:nth-child(4) {
min-width: 130px
}

.loans .manage-pledge-table-modal-container div .data-table table thead tr th:nth-child(3) {
text-align: right!important
}

.loans .table-container.confirm-table-container div .data-table thead th:hover {
background: #fafafb!important
}

.loans .table-container.confirm-table-container div .data-table thead th:nth-child(3) {
background: #fff;
cursor: pointer
}

.loans .stamp-duty-paid .steps-container h2 {
display: inline-block;
margin-top: 5px;
margin-bottom: 20px;
margin-left: 30px
}

.loans .stamp-duty-paid .steps-container .step {
display: inline-block;
content: "";
font-size: 15px;
text-align: center;
border: 2px solid #9b9b9b;
color: #9b9b9b;
border-radius: 50%;
position: relative;
right: 2px;
top: 2px;
width: 25px;
height: 25px;
vertical-align: top
}

.loans .stamp-duty-paid .steps-container .step span {
line-height: 1;
position: relative;
bottom: 0
}

.loans .stamp-duty-paid .steps-container .step.inactive {
margin-right: 10px
}

.loans .stamp-duty-paid .steps-container .step.active,.loans .stamp-duty-paid .steps-container .step.done {
border: 2px solid #0059c1;
color: #fff;
background: #0059c1;
width: 30px;
height: 30px;
right: 4px
}

.loans .stamp-duty-paid .steps-container .step.active span,.loans .stamp-duty-paid .steps-container .step.done span {
top: 3px
}

.loans .stamp-duty-paid .steps-container .step-vertical {
border-left: 1px solid #e1e1e1;
margin-top: -10px;
margin-bottom: 5px;
padding-bottom: 20px;
margin-left: 12px;
padding-left: 20px
}

.loans .stamp-duty-paid .steps-container .step-vertical .step-vertical-inside {
margin-left: 35px
}

.loans .stamp-duty-paid .loan-against-shares-tncs {
margin-top: 40px
}

@media only screen and (min-width: 800px) {
.loans .stamp-duty-paid .stamp-duty-paid-textarea {
border-left:1px solid #f1f1f1;
padding: 0 20px 20px 40px
}

.loans .stamp-duty-paid .stamp-duty-paid-textarea hr {
margin-bottom: 20px;
margin-top: 20px
}

.loans .stamp-duty-paid .stamp-duty-paid-textarea .annum-charge {
margin-bottom: 10px!important;
line-height: normal
}
}

.loans .processing-documents .processing-documents-imgarea h2 {
margin-bottom: 10px!important
}

@media only screen and (min-width: 800px) {
.loans .processing-documents .processing-documents-textarea {
border-left:1px solid #f1f1f1;
padding: 0 20px 20px 40px
}

.loans .processing-documents .processing-documents-textarea hr {
margin-bottom: 20px;
margin-top: 20px
}

.loans .processing-documents .processing-documents-textarea .annum-charge {
margin-bottom: 10px!important;
line-height: normal
}
}

.loans .invoke-table-container table th {
color: #9b9b9b!important;
background: #fafafb!important;
border-top: 1px solid #f1f1f1;
border-bottom: 1px solid #f1f1f1;
font-weight: 400
}

.loans .invoke-table-container table th:nth-child(-n+2) {
text-align: left!important
}

.loans .invoke-table-container table td {
border-bottom: 1px solid #f1f1f1
}

.loans .invoke-table-container .invoke-table-footer {
padding-top: 20px
}

.loans .invoke-table-container .su-checkbox-group {
display: flex;
justify-content: end
}

.loans .invoke-table-container button {
margin: 10px 0;
float: right
}

.loans .loan-info-container {
padding: 20px 0;
background: #fff;
margin-top: -20px;
margin-bottom: 0
}

@media only screen and (min-width: 1200px) {
.loans .loan-info-container {
margin-left:calc(-50vw + 560px);
margin-right: calc(-50vw + 560px)
}
}

.loans .loan-info-container.existing-loan {
background: #fafafb!important;
margin-bottom: 30px!important
}

@media only screen and (max-width: 800px) {
.loans .page-container.loans.section .v-align {
display:block!important
}

.loans .confirm-kyc-details,.loans .loans-form-textarea {
border-left: 0!important;
padding: 0!important
}

.loans .holdings-total {
margin-right: 2px!important
}
}

@media only screen and (max-width: 550px) {
.loans .new-loan-head {
line-height:48px;
margin-bottom: 0!important
}

.loans .new-loan-head .search-table {
display: block!important;
position: relative!important
}

.loans .new-loan-head .search-table .filter-input {
border-radius: 2px
}
}

.page-container.enach .enach-icon {
height: 20px;
position: relative;
top: 2px;
margin-right: 5px
}

.page-container.enach .notice {
margin-bottom: 35px!important
}

.page-container.enach .section .input-container input:focus {
outline: none
}

.page-container.enach .section .input-container input:-moz-focusring {
color: transparent;
text-shadow: 0 0 0 #444
}

.page-container.enach .section .schedules-table tr td:first-child {
min-width: 160px
}

.page-container.enach .section .mandate-cancel {
float: right;
margin-right: 10px;
font-size: 14px
}

.page-container.enach .section .context-data {
position: relative
}

.page-container.enach .section .context-data .context-menu {
position: absolute;
right: 5px
}

.page-container.enach .section .mandate-status {
display: inline-block;
margin-left: 10px;
position: relative;
top: 2px
}

.page-container.enach .section .mandate-status .schedule-status {
display: inline-block;
margin: 0;
position: relative;
top: -4px
}

.page-container.enach .section .help-tooltip {
display: inline-block
}

.page-container.enach .section .mandate {
margin-bottom: 60px
}

.page-container.enach .section .mandate .mandate-info p {
margin: 0
}

.page-container.enach .section .mandate .mandate-info .row {
margin: 10px 0;
padding: 5px 10px;
border-radius: 2px
}

.page-container.enach .section .mandate .mandate-info .row:nth-child(odd) {
background: #fafafb
}

.page-container.enach .section .mandate-help {
display: inline-block;
font-size: 1.25rem;
position: relative;
top: -2px
}

.page-container.enach .section .mandate-help:after {
width: 360px;
white-space: normal
}

.page-container.enach .section .enach-landing {
height: 165px;
max-width: 100%;
margin-bottom: 30px
}

.page-container.enach .section .set-schedule {
margin-bottom: 60px
}

.page-container.enach .section .schedule-status {
text-transform: uppercase;
font-size: .875rem;
padding: 3px 5px;
border-radius: 2px;
position: relative;
display: block;
line-height: 1.7;
text-align: center;
background: rgba(255,202,85,.15);
color: #f8ab00
}

.page-container.enach .section #create_schedule:focus {
outline: 5px auto -webkit-focus-ring-color;
outline-color: -webkit-focus-ring-color;
outline-color: #85b4eb;
outline-style: auto;
outline-width: 5px
}

.page-container.enach .section .schedule-list tr {
border-bottom: 1px solid #f1f1f1;
border-top: 1px solid #f1f1f1;
padding: 10px 5px
}

.page-container.enach .section .schedule-list thead {
color: #9b9b9b
}

.page-container.enach .section .schedule-list .context-menu {
visibility: hidden
}

.page-container.enach .section .schedule-list tbody tr:hover .context-menu {
visibility: visible
}

.page-container.enach .section .schedule-list tbody tr:hover {
background: #fafafb
}

.page-container.enach .section .schedule-list tbody td:first-child {
min-width: 100px
}

.page-container.challenge-content.ofs-content .mobile-context-menu .mobile-context-menu-list {
min-height: 12vh
}

.page-container.challenge-content.ofs-content .mobile-context-menu .mobile-context-menu-list li {
border-top: none!important;
border-bottom: 1px solid #eee
}

.page-container.challenge-content h1 p {
font-size: 14px;
margin: 0;
position: relative;
top: 5px;
margin-right: 5px
}

.page-container.challenge-content .challenge-head-link {
font-size: 16px;
position: relative;
top: -2px;
margin-left: 5px
}

.page-container.challenge-content .challenge-head-link[data-balloon]:after {
z-index: 9999!important
}

.page-container.challenge-content .ipo-tabs {
font-size: 1.125rem;
border-bottom: 1px solid #eee;
margin-bottom: 50px
}

.page-container.challenge-content .ipo-tabs .tab {
padding: 15px;
display: inline-block;
border-bottom: 1px solid #eee;
position: relative;
top: 1px;
cursor: pointer;
width: 20%;
box-sizing: border-box
}

.page-container.challenge-content .ipo-tabs .tab.active {
border-bottom: 2px solid #0059c1
}

.page-container.challenge-content .ipo-tabs .tab:hover {
opacity: .7
}

.page-container.challenge-content .section.ipo-empty img {
height: 200px
}

.page-container.challenge-content .ipo-history-head .ipo-history-chevron {
display: inline-block;
font-size: 16px;
margin-left: 5px
}

.page-container.challenge-content .ipo-history-head .ipo-history-chevron:hover {
cursor: pointer
}

.page-container.challenge-content .ipo-history-table thead tr {
border-top: none!important
}

.page-container.challenge-content .ipo-notice {
margin-bottom: 30px
}

.page-container.challenge-content .bids-error,.page-container.challenge-content .upi-error,.page-container.challenge-content .value-error {
display: none;
padding-left: 10px;
font-size: .85rem;
color: #f35631;
position: absolute;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content
}

.page-container.challenge-content .ipo-error {
padding-left: 10px;
font-size: .85rem;
color: #f35631;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content
}

.page-container.challenge-content .section .action-tabs {
font-size: 1.25rem;
margin-bottom: 50px
}

.page-container.challenge-content .section .action-tabs .tab {
padding: 15px;
display: inline-block;
position: relative;
top: 1px;
cursor: pointer;
box-sizing: border-box
}

.page-container.challenge-content .section .action-tabs .tab.active {
border-bottom: 2px solid #0059c1
}

.page-container.challenge-content .section .card {
padding: 12px 10px;
border-top: 1px solid #eee
}

.page-container.challenge-content .section .card .top .top-left {
flex: 2!important;
-ms-flex: 2!important
}

.page-container.challenge-content .section .card .no-bids span {
padding: 3px 10px;
text-transform: uppercase;
width: 45px;
margin-left: auto;
display: block;
border-radius: 2px;
font-size: 10px;
text-align: center;
line-height: 1.4!important;
background: rgba(255,202,85,.15);
color: #f8ab00
}

.page-container.challenge-content .section .card .pending-flag {
background: rgba(255,202,85,.15);
color: #f8ab00
}

.page-container.challenge-content .section .card .non-retail-flag,.page-container.challenge-content .section .card .pending-flag {
text-transform: uppercase;
font-size: .6875rem;
padding: 3px 11px;
border-radius: 2px;
position: relative;
display: inline;
line-height: 1.7;
text-align: center;
margin-left: 5px
}

.page-container.challenge-content .section .card .non-retail-flag {
color: #4184f3;
background-color: rgba(65,132,243,.1)
}

.page-container.challenge-content .section .card .closed-flag {
text-transform: uppercase;
font-size: .6875rem;
padding: 3px 11px;
border-radius: 2px;
position: relative;
display: inline;
line-height: 1.7;
text-align: center;
color: #666;
background-color: #eee;
margin-left: 5px
}

.page-container.challenge-content .section .init-ipo-historical {
margin-top: 10px;
display: block
}

.page-container.challenge-content .section .init-ipo-historical img {
height: 1rem;
position: relative;
top: 1px
}

.page-container.challenge-content .section .unpledge-modal input:disabled {
color: #424242
}

.page-container.challenge-content .section .ipo-historical {
font-size: 1rem;
float: right;
margin-right: 10px
}

.page-container.challenge-content .section .ipo-historical img {
height: 1rem;
position: relative;
top: 1px
}

.page-container.challenge-content .section .ipo-investor {
margin-bottom: 10px
}

.page-container.challenge-content .section .ipo-investor select {
max-width: 180px
}

.page-container.challenge-content .section .ipo-investor label {
padding-left: 10px
}

.page-container.challenge-content .section .su-checkbox-box {
position: relative;
top: 3px
}

.page-container.challenge-content .section .card-container {
border-top: 1px solid #eee;
padding: 12px 10px
}

.page-container.challenge-content .section .card-container .active .timeline {
display: block
}

.page-container.challenge-content .section .card-container .timeline {
display: none
}

.page-container.challenge-content .section .card a {
margin-left: 0;
display: inline-block
}

.page-container.challenge-content .section .card a.btn {
padding: 0 12px!important
}

.page-container.challenge-content .section .card.last {
border-bottom: 1px solid #eee
}

.page-container.challenge-content .section .card .top {
margin-bottom: 5px;
display: flex
}

.page-container.challenge-content .section .card .top .top-left {
flex: 10
}

.page-container.challenge-content .section .card .top .top-right {
flex: 2;
text-align: right
}

.page-container.challenge-content .section .card .middle {
margin-bottom: 5px;
display: flex
}

.page-container.challenge-content .section .card .middle .middle-left {
flex: 6
}

.page-container.challenge-content .section .card .middle .middle-right {
flex: 6;
text-align: right
}

.page-container.challenge-content .section .card .bottom {
display: flex
}

.page-container.challenge-content .section .card .bottom .bottom-left {
flex: 6
}

.page-container.challenge-content .section .card .bottom .bottom-right {
flex: 6;
text-align: right
}

.page-container.challenge-content .section input {
max-width: 100%
}

.page-container.challenge-content .section input:focus {
outline: 0;
border-color: #ccc
}

.page-container.challenge-content .section .state-process {
margin-top: 5vh!important
}

.page-container.challenge-content .section button[disabled] {
background: #9b9b9b;
border: 1px solid #9b9b9b!important;
color: #fff
}

.page-container.challenge-content .section button[disabled]:hover {
opacity: 1!important;
background: #9b9b9b!important
}

.page-container.challenge-content .section .ipo-modal .modal-container {
width: 900px;
padding: 0;
max-height: 100vh;
overflow: auto
}

.page-container.challenge-content .section .ipo-modal input[type=number] {
appearance: none;
-webkit-appearance: none;
-moz-appearance: textfield
}

.page-container.challenge-content .section .ipo-modal .upi-input .three button {
padding: 0!important
}

.page-container.challenge-content .section .ipo-modal .verify-vpa {
font-size: .65rem;
position: relative;
left: -10px;
padding: 3px 7px;
text-transform: uppercase;
font-weight: 600;
border-radius: 3px;
letter-spacing: .25px;
color: #0059c1;
border: 1px solid #0059c1
}

.page-container.challenge-content .section .ipo-modal .verify-vpa:hover {
cursor: pointer;
background: #0059c1;
color: #fff
}

.page-container.challenge-content .section .ipo-modal .verify-vpa.verified {
background: #4caf50;
color: #fff;
border: 1px solid #4caf50
}

.page-container.challenge-content .section .ipo-modal .verify-vpa.verified:hover {
background: #4caf50;
cursor: default
}

.page-container.challenge-content .section .ipo-modal .upi-confirm {
font-size: 12px;
padding-left: 10px;
color: #9b9b9b;
position: relative;
font-style: italic
}

.page-container.challenge-content .section .ipo-modal .upi-confirm.invisible {
visibility: hidden
}

.page-container.challenge-content .section .ipo-modal .notice {
margin-bottom: 10px;
margin-top: 15px
}

.page-container.challenge-content .section .ipo-modal input {
box-sizing: border-box
}

.page-container.challenge-content .section .ipo-modal .upi-select {
display: inline-block;
width: auto!important;
position: relative;
left: -15px
}

.page-container.challenge-content .section .ipo-modal .upi-select:hover {
cursor: pointer
}

.page-container.challenge-content .section .ipo-modal .vpa-input {
display: inline-block
}

.page-container.challenge-content .section .ipo-modal .vpa-input input {
display: inline-block;
width: 140px
}

.page-container.challenge-content .section .ipo-modal .btn-outline:hover {
background: #444;
border: 1px solid #444;
color: #fff
}

.page-container.challenge-content .section .ipo-modal .bids {
margin-top: 30px
}

.page-container.challenge-content .section .ipo-modal .bids .su-input-group {
margin-top: 0
}

.page-container.challenge-content .section .ipo-modal .bids .one {
position: relative
}

.page-container.challenge-content .section .ipo-modal .bids .one .icon {
position: absolute;
left: 20px;
top: 7px;
color: #9b9b9b
}

.page-container.challenge-content .section .ipo-details ::-moz-placeholder {
color: #9b9b9b;
opacity: 1
}

.page-container.challenge-content .section .ipo-details :-ms-input-placeholder {
opacity: 1
}

.page-container.challenge-content .section .ipo-details ::placeholder {
color: #9b9b9b;
opacity: 1
}

.page-container.challenge-content .section .ipo-details .su-input-group input:disabled,.page-container.challenge-content .section .ipo-details .su-input-group textarea:disabled {
color: #666
}

.page-container.challenge-content .section .ipo-details ul {
padding-left: 20px
}

.page-container.challenge-content .section .ipo-details button:first-child {
margin-right: 25px
}

.page-container.challenge-content .section .ipo-details .su-checkbox-group {
position: relative;
top: 10px
}

.page-container.challenge-content .section .ipo-details .ipo-accept {
margin-bottom: 20px
}

.page-container.challenge-content .section .ipo-details .ipo-accept .su-checkbox-box {
top: 3px;
left: 2px
}

.page-container.challenge-content .section .ipo-details .ipo-accept .su-checkbox-value {
font-size: 12px
}

.page-container.challenge-content .section .ipo-details .total-bid {
padding-right: 20px;
margin-top: 0;
font-weight: 600
}

.page-container.challenge-content .section .ipo-details .total-bid span {
font-size: 12px;
font-weight: 400
}

.page-container.challenge-content .section .ipo-details .total-bid label {
font-weight: 400;
display: inline-block;
margin-right: 10px
}

.page-container.challenge-content .section .ipo-details .exchange {
padding: 3px 10px;
text-transform: uppercase;
width: 20px;
display: inline-block;
border-radius: 2px;
font-size: 10px;
text-align: center;
line-height: 1.4!important;
color: #4184f3;
background-color: rgba(65,132,243,.1);
position: relative;
top: -3px;
margin-left: 15px
}

.page-container.challenge-content .section .ipo-details :-ms-input-placeholder {
color: #9b9b9b
}

.page-container.challenge-content .section .ipo-details ::-ms-input-placeholder {
color: #9b9b9b
}

.page-container.challenge-content .section .ipo-details h2 {
font-weight: 600
}

.page-container.challenge-content .section .ipo-details .five a {
position: relative;
left: 5px;
font-size: .875rem
}

.page-container.challenge-content .section .ipo-details .data-row {
margin: 0 0 10px 0;
padding: 5px 5px 10px 5px;
border-bottom: 1px solid #eee
}

.page-container.challenge-content .section .ipo-details .data,.page-container.challenge-content .section .ipo-details .label {
display: inline-block!important
}

.page-container.challenge-content .section .ipo-details .data {
float: right
}

.page-container.challenge-content .section .ipo-details .row .su-checkbox-value {
color: #444
}

.page-container.challenge-content .section .ipo-details .bid-no {
position: relative;
top: 10px
}

.page-container.challenge-content .section .delete-ipo {
width: 125px;
position: relative
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) thead td {
padding: 20px!important
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody.active .timeline {
display: table-row
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody .timeline {
display: none
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody tr:first-child td {
padding: 20px!important
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody tr:first-child td:first-child {
font-weight: 600
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody tr:first-child:hover {
background: #fafafb;
cursor: pointer
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody tr:first-child a.btn-blue {
display: inline-block;
min-width: 40px;
text-align: center;
font-size: 13px
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody.active {
border: 1px solid #eee;
box-shadow: 0 4px 8px 0 rgba(0,0,0,.1)
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody.active tr:first-child {
background: #fafafb
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) tbody td {
max-width: 80px;
white-space: nowrap
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) .place-bids span {
display: inline-block
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) .place-bids [data-balloon][data-balloon-pos=up]:before {
left: 35%
}

.page-container.challenge-content .section .ipo-table:not(.ipo-bids) .place-bids [data-balloon][data-balloon-pos=up]:after {
left: -25%
}

.page-container.challenge-content .section .ipo-status {
margin: 10px 0
}

.page-container.challenge-content .section .ipo-status .row {
padding: 0 10px
}

.page-container.challenge-content .section .ipo-status .status-head {
margin-top: 15px;
margin-bottom: 10px
}

.page-container.challenge-content .section .ipo-status p {
margin-top: 5px;
margin-bottom: 10px;
white-space: normal
}

.page-container.challenge-content .section .timeline hr {
margin-top: 15px;
margin-bottom: 20px;
width: 95%
}

.page-container.challenge-content .section .ipo-timeline {
display: flex;
justify-content: center;
margin-bottom: 10px
}

.page-container.challenge-content .section .ipo-timeline .span {
display: inline-block;
width: 150px;
text-align: center;
margin-top: 10px;
vertical-align: top
}

.page-container.challenge-content .section .ipo-timeline .span .pin {
width: 8px;
height: 8px;
border-radius: 50%;
border: 4px solid #0059c1;
position: relative;
left: calc(50% - 10px)
}

.page-container.challenge-content .section .ipo-timeline .span.active .pin {
background: #0059c1;
border: 2px solid #0059c1;
top: 1px
}

.page-container.challenge-content .section .ipo-timeline .span.active .pin:before {
content: "";
width: 18px;
height: 18px;
border: 3px solid #0059c1;
border-radius: 50%;
display: inline-block;
position: absolute;
top: -8px;
left: -8px;
z-index: 1
}

.page-container.challenge-content .section .ipo-timeline .span.active .label {
margin-top: 20px
}

.page-container.challenge-content .section .ipo-timeline .span .label {
margin-top: 15px;
margin-bottom: 0;
color: #0059c1
}

.page-container.challenge-content .section .ipo-timeline .span .value {
margin-bottom: 10px;
margin-top: 5px
}

.page-container.challenge-content .section .ipo-timeline .span.past .pin:after {
background: #0059c1!important
}

.page-container.challenge-content .section .ipo-timeline .span:not(:first-child) .pin:after {
content: "";
width: 134px;
height: 3px;
background: #e1e1e1;
display: inline-block;
position: absolute;
top: 3px;
left: 12px;
left: -4px;
transform: rotate(180deg);
transform-origin: left
}

.page-container.challenge-content .section .checkbox-container .su-checkbox-group {
margin-top: 35px;
display: inline-block
}

.page-container.challenge-content .section .checkbox-container .inline {
display: inline-block;
position: relative;
bottom: 2px
}

.page-container.challenge-content .section .checkbox-container .inline a {
color: #9b9b9b!important
}

.page-container.challenge-content .section .checkbox-container .inline span.icon {
position: relative;
top: 2px
}

.page-container.challenge-content .section .checkbox-container label {
display: flex!important
}

.page-container.challenge-content .section .table-container {
padding-top: 5px
}

.page-container.challenge-content .section .challenge-disabled {
position: relative;
top: -3px;
width: 100%;
font-size: 13px;
font-weight: 400;
height: 38px;
padding-left: 15px;
padding-right: 15px;
line-height: 1.9;
background: #9b9b9b;
border: transparent;
cursor: default;
color: #fff;
padding: 7px 14px;
border-radius: 2px;
margin: 0 3px;
box-sizing: border-box;
text-align: center
}

.page-container.challenge-content .section .challenge-table.completed .context-menu,.page-container.challenge-content .section .challenge-table.ongoing .context-menu {
visibility: hidden
}

.page-container.challenge-content .section .challenge-table.completed tbody tr td:first-child,.page-container.challenge-content .section .challenge-table.ongoing tbody tr td:first-child {
width: 150px
}

.page-container.challenge-content .section .challenge-table.completed tbody tr:hover,.page-container.challenge-content .section .challenge-table.ongoing tbody tr:hover {
background: #fafafb
}

.page-container.challenge-content .section .challenge-table.completed tbody tr:hover .context-menu,.page-container.challenge-content .section .challenge-table.ongoing tbody tr:hover .context-menu {
visibility: visible
}

.page-container.challenge-content .section .cancel-modal .modal-container {
width: 555px
}

.page-container.challenge-content .section .ofs-table tbody td:first-child,.page-container.challenge-content .section .ofs-table thead td:first-child {
min-width: 115px;
position: relative
}

.page-container.challenge-content .section .ofs-table .context-menu {
visibility: hidden;
position: absolute;
right: 5px
}

.page-container.challenge-content .section .ofs-table tbody tr:hover .context-menu {
visibility: visible
}

.page-container.challenge-content .section .ofs-table .pending-flag {
background: rgba(255,202,85,.15);
color: #f8ab00
}

.page-container.challenge-content .section .non-retail-flag,.page-container.challenge-content .section .ofs-table .pending-flag {
text-transform: uppercase;
font-size: .6875rem;
padding: 3px 11px;
border-radius: 2px;
position: relative;
display: inline;
line-height: 1.7;
text-align: center;
margin-left: 5px
}

.page-container.challenge-content .section .non-retail-flag {
color: #4184f3;
background-color: rgba(65,132,243,.1)
}

.page-container.challenge-content .section .closed-flag {
text-transform: uppercase;
font-size: .6875rem;
padding: 3px 11px;
border-radius: 2px;
position: relative;
display: inline;
line-height: 1.7;
text-align: center;
color: #666;
background-color: #eee;
margin-left: 5px
}

.page-container.challenge-content .section .challenge-table .challenge-profit {
cursor: pointer
}

.page-container.challenge-content .section .challenge-table .challenge-profit:hover {
opacity: .8
}

.page-container.challenge-content .section .challenge-table .won span {
color: #10b983;
background-color: rgba(16,185,131,.1)
}

.page-container.challenge-content .section .challenge-table .lost span,.page-container.challenge-content .section .challenge-table .won span {
padding: 3px 10px;
text-transform: uppercase;
width: 30px;
display: block;
border-radius: 2px;
font-size: 10px;
text-align: center;
line-height: 1.4!important
}

.page-container.challenge-content .section .challenge-table .lost span {
color: #df514c;
background-color: rgba(223,81,76,.1)
}

.page-container.challenge-content .section .challenge-table .exchange {
font-size: .75rem;
color: #9b9b9b;
font-weight: 600;
float: right;
position: relative;
top: 3px
}

.page-container.challenge-content .section .challenge-table thead div {
display: inline
}

.page-container.challenge-content .section .challenge-table thead [data-balloon][data-balloon-pos=up]:after {
left: -65px!important
}

.page-container.challenge-content .section .challenge-table thead tr {
border-top: 1px solid #f1f1f1
}

.page-container.challenge-content .section .challenge-table thead tr .sorted {
background: #fafafb
}

.page-container.challenge-content .section .challenge-table thead td {
cursor: pointer;
color: #9b9b9b
}

.page-container.challenge-content .section .challenge-table thead td:hover {
background: #fafafb
}

.page-container.challenge-content .section .challenge-table thead td:hover .arrow {
opacity: 1
}

.page-container.challenge-content .section .challenge-table thead .arrow-show {
opacity: 1;
background: #fafafb
}

.page-container.challenge-content .section .challenge-table thead th {
font-size: .85rem;
font-weight: 400;
color: #9b9b9b
}

.page-container.challenge-content .section .challenge-table tr {
border-bottom: 1px solid #f1f1f1
}

.page-container.challenge-content .section .challenge-table tr .trade-exchange {
display: inline-block;
margin-left: 8px;
font-size: 10px;
color: #9b9b9b;
font-weight: 600
}

.page-container.challenge-content .section .challenge-table tr .trade-type {
padding: 3px 10px;
text-transform: uppercase;
width: 30px;
display: block;
border-radius: 2px;
font-size: 10px;
text-align: center;
line-height: 1.4!important
}

.page-container.challenge-content .section .challenge-table tr .buy {
color: #4184f3;
background-color: rgba(65,132,243,.1)
}

.page-container.challenge-content .section .challenge-table tr .sell {
color: #df514c;
background-color: rgba(223,81,76,.1)
}

.page-container.challenge-content .section .challenge-table .arrow {
display: inline-block;
float: left;
position: relative;
top: 7px;
border: solid #9b9b9b;
border-width: 0 1px 1px 0;
padding: 3px;
opacity: 0
}

.page-container.challenge-content .section .challenge-table .arrow.asc {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg)
}

.page-container.challenge-content .section .challenge-table .arrow.desc {
transform: rotate(45deg);
-webkit-transform: rotate(45deg)
}

.page-container.challenge-content .section .challenge-table .text-left .arrow {
float: right!important
}

.page-container.challenge-content .section .tradebook-paginate {
margin-top: 15px
}

.page-container.challenge-content .section .tradebook-paginate button {
height: 25px!important;
border: 1px solid #e1e1e1
}

.page-container.challenge-content .section .tradebook-paginate button:disabled {
color: #666;
cursor: not-allowed
}

.page-container.challenge-content .section .tradebook-paginate span {
font-size: 12px;
padding: 0 10px
}

@media only screen and (max-width: 1200px) {
.ipo-table .ipo-timeline .span {
width:120px!important
}

.ipo-table .ipo-timeline .span:not(:first-child) .pin:after {
content: "";
width: 105px!important
}
}

@media only screen and (max-width: 980px) {
.ipo-table .ipo-timeline .span {
width:105px!important
}

.ipo-table .ipo-timeline .span:not(:first-child) .pin:after {
content: "";
width: 90px!important
}
}

@media only screen and (max-width: 860px) {
.ipo-table .ipo-timeline .span {
width:90px!important
}

.ipo-table .ipo-timeline .span:not(:first-child) .pin:after {
content: "";
width: 75px!important
}
}

@media only screen and (max-width: 800px) {
.ipo-tabs .tab {
width:50%!important
}

.ipo-table .ipo-timeline .span {
width: 90px!important
}

.ipo-table .ipo-timeline .span:not(:first-child) .pin:after {
content: "";
width: 75px!important
}

.label-span,.pin-span {
display: inline-block
}

.timeline {
margin-top: 10px
}

.timeline,.timeline .ipo-timeline {
display: block!important
}

.timeline .ipo-timeline .pin-span .span.active {
height: 16px
}

.timeline .ipo-timeline .pin-span .span.active .pin {
top: 5px!important
}

.timeline .ipo-timeline .pin-span .span.active+.span .pin:after {
width: 63px!important
}

.timeline .ipo-timeline .pin-span .span {
display: block!important;
width: 50px!important
}

.timeline .ipo-timeline .pin-span .span.active .pin {
left: 17px!important
}

.timeline .ipo-timeline .pin-span .span.active .pin:after {
left: -7px!important
}

.timeline .ipo-timeline .pin-span .span:not(:first-child) {
margin-top: 70px!important
}

.timeline .ipo-timeline .pin-span .span .pin {
transform: rotate(90deg)
}

.timeline .ipo-timeline .pin-span .span .pin:after {
width: 70px!important
}

.label-span .label {
margin-top: 0!important
}

.label-span .value {
margin-bottom: 30px!important
}
}

@media only screen and (max-width: 900px) {
.ipo-modal .modal-container {
width:100%!important
}
}

@media only screen and (min-width: 801px) {
.section .no-bids span {
background:rgba(255,202,85,.15);
color: #f8ab00
}

.section .no-bids span,.section .place-bids span {
padding: 3px 10px;
text-transform: uppercase;
width: 45px;
margin-left: auto;
display: block;
border-radius: 2px;
font-size: 10px;
text-align: center;
line-height: 1.4!important
}

.section .place-bids span.insert {
background: rgba(255,202,85,.15);
color: #f8ab00
}

.section .place-bids span.edit {
color: #4184f3;
background-color: rgba(65,132,243,.1)
}

.ipo-details {
display: flex
}

.ipo-details .seven.ipo-form {
padding: 25px 30px 20px 0
}

.ipo-details .five.ipo-data {
padding: 30px;
background: #fafafb
}

.ipo-details .ipo-show {
display: none
}

.delete-ipo {
right: 20px
}
}

@media only screen and (max-width: 450px) {
.upi-input input {
width:105px!important
}

.upi-input .upi-select {
left: -5px!important
}

.upi-input .verify-vpa {
left: 0!important
}

.upi-input .three label {
display: none!important
}
}

@media only screen and (max-width: 800px) {
.upi-input .upi-select {
top:-2px
}

.ofs-content .action-tabs {
margin-bottom: 0!important;
display: flex;
justify-content: center
}

.section li.place-bids {
width: auto;
padding: 20px 10px;
text-transform: inherit;
font-size: 16px
}

.section .bid-no {
top: 0!important
}

.challenge-content .cards .ipo-status {
margin: 0!important
}

.challenge-content .cards .ipo-status .status-head {
margin-top: 0!important
}

.challenge-content .cards .card-footer hr {
margin: 20px 0
}

.challenge-content .cards .card-footer .row {
padding: 0!important
}

.challenge-content .cards .card-footer .row .columns {
margin-bottom: 5px!important
}

.ipo-details .one {
width: auto;
margin-right: 10px
}

.ipo-details .one .su-checkbox-group {
top: -8px!important
}

.ipo-details .one .icon {
top: -7px!important
}

.ipo-details .ipo-actions {
display: flex
}

.ipo-details .ipo-actions .four {
order: 2;
text-align: right
}

.ipo-details .ipo-actions .six {
width: 50%!important
}

.ipo-details .ipo-actions .total-bid {
padding-top: 5px;
text-align: left!important
}

.ipo-details .ipo-show {
padding: 5px 0
}

.ipo-details .ipo-show:hover {
cursor: pointer
}

.ipo-details .ipo-show .icon {
margin-left: 10px
}

.ipo-details .four .su-checkbox-value {
font-size: 12px
}

.ipo-details .data-list {
display: none
}
}

fieldset[disabled] .multiselect {
pointer-events: none
}

.multiselect__spinner {
position: absolute;
right: 1px;
top: 1px;
width: 48px;
height: 35px;
background: #fff;
display: block
}

.multiselect__spinner:after,.multiselect__spinner:before {
position: absolute;
content: "";
top: 50%;
left: 50%;
margin: -8px 0 0 -8px;
width: 16px;
height: 16px;
border-radius: 100%;
border-color: #41b883 transparent transparent;
border-style: solid;
border-width: 2px;
box-shadow: 0 0 0 1px transparent
}

.multiselect__spinner:before {
-webkit-animation: a 2.4s cubic-bezier(.41,.26,.2,.62);
animation: a 2.4s cubic-bezier(.41,.26,.2,.62);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}

.multiselect__spinner:after {
-webkit-animation: a 2.4s cubic-bezier(.51,.09,.21,.8);
animation: a 2.4s cubic-bezier(.51,.09,.21,.8);
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}

.multiselect__loading-enter-active,.multiselect__loading-leave-active {
transition: opacity .4s ease-in-out;
opacity: 1
}

.multiselect__loading-enter,.multiselect__loading-leave-active {
opacity: 0
}

.multiselect,.multiselect__input,.multiselect__single {
/* font-family: inherit; */
font-size: 16px;
touch-action: manipulation
}

.multiselect {
box-sizing: content-box;
display: block;
position: relative;
width: 100%;
min-height: 40px;
text-align: left;
color: #35495e
}

.multiselect * {
box-sizing: border-box
}

.multiselect:focus {
outline: none
}

.multiselect--disabled {
opacity: .6
}

.multiselect--active {
z-index: 1
}

.multiselect--active:not(.multiselect--above) .multiselect__current,.multiselect--active:not(.multiselect--above) .multiselect__input,.multiselect--active:not(.multiselect--above) .multiselect__tags {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0
}

.multiselect--active .multiselect__select {
transform: rotate(180deg)
}

.multiselect--above.multiselect--active .multiselect__current,.multiselect--above.multiselect--active .multiselect__input,.multiselect--above.multiselect--active .multiselect__tags {
border-top-left-radius: 0;
border-top-right-radius: 0
}

.multiselect__input,.multiselect__single {
position: relative;
display: inline-block;
min-height: 20px;
line-height: 20px;
border: none;
border-radius: 5px;
background: #fff;
padding: 0 0 0 5px;
width: 100%;
transition: border .1s ease;
box-sizing: border-box;
margin-bottom: 8px;
vertical-align: top
}

.multiselect__input:-ms-input-placeholder {
color: #35495e
}

.multiselect__input::-moz-placeholder {
color: #35495e
}

.multiselect__input::placeholder {
color: #35495e
}

.multiselect__tag~.multiselect__input,.multiselect__tag~.multiselect__single {
width: auto
}

.multiselect__input:hover,.multiselect__single:hover {
border-color: #cfcfcf
}

.multiselect__input:focus,.multiselect__single:focus {
border-color: #a8a8a8;
outline: none
}

.multiselect__single {
padding-left: 5px;
margin-bottom: 8px
}

.multiselect__tags-wrap {
display: inline
}

.multiselect__tags {
min-height: 40px;
display: block;
padding: 8px 40px 0 8px;
border-radius: 5px;
border: 1px solid #e8e8e8;
background: #fff;
font-size: 14px
}

.multiselect__tag {
position: relative;
display: inline-block;
padding: 4px 26px 4px 10px;
border-radius: 5px;
margin-right: 10px;
color: #fff;
line-height: 1;
background: #41b883;
margin-bottom: 5px;
white-space: nowrap;
overflow: hidden;
max-width: 100%;
text-overflow: ellipsis
}

.multiselect__tag-icon {
cursor: pointer;
margin-left: 7px;
position: absolute;
right: 0;
top: 0;
bottom: 0;
font-weight: 700;
font-style: normal;
width: 22px;
text-align: center;
line-height: 22px;
transition: all .2s ease;
border-radius: 5px
}

.multiselect__tag-icon:after {
content: "×";
color: #266d4d;
font-size: 14px
}

.multiselect__tag-icon:focus,.multiselect__tag-icon:hover {
background: #369a6e
}

.multiselect__tag-icon:focus:after,.multiselect__tag-icon:hover:after {
color: #fff
}

.multiselect__current {
min-height: 40px;
overflow: hidden;
padding: 8px 12px 0;
padding-right: 30px;
white-space: nowrap;
border-radius: 5px;
border: 1px solid #e8e8e8
}

.multiselect__current,.multiselect__select {
line-height: 16px;
box-sizing: border-box;
display: block;
margin: 0;
text-decoration: none;
cursor: pointer
}

.multiselect__select {
position: absolute;
width: 40px;
height: 38px;
right: 1px;
top: 1px;
padding: 4px 8px;
text-align: center;
transition: transform .2s ease
}

.multiselect__select:before {
position: relative;
right: 0;
top: 65%;
color: #999;
margin-top: 4px;
border-style: solid;
border-width: 5px 5px 0;
border-color: #999 transparent transparent;
content: ""
}

.multiselect__placeholder {
color: #adadad;
display: inline-block;
margin-bottom: 10px;
padding-top: 2px
}

.multiselect--active .multiselect__placeholder {
display: none
}

.multiselect__content-wrapper {
position: absolute;
display: block;
background: #fff;
width: 100%;
max-height: 240px;
overflow: auto;
border: 1px solid #e8e8e8;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
z-index: 1;
-webkit-overflow-scrolling: touch
}

.multiselect__content {
list-style: none;
display: inline-block;
padding: 0;
margin: 0;
min-width: 100%;
vertical-align: top
}

.multiselect--above .multiselect__content-wrapper {
bottom: 100%;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom: none;
border-top: 1px solid #e8e8e8
}

.multiselect__content::webkit-scrollbar {
display: none
}

.multiselect__element {
display: block
}

.multiselect__option {
display: block;
padding: 12px;
min-height: 40px;
line-height: 16px;
text-decoration: none;
text-transform: none;
vertical-align: middle;
position: relative;
cursor: pointer;
white-space: nowrap
}

.multiselect__option:after {
top: 0;
right: 0;
position: absolute;
line-height: 40px;
padding-right: 12px;
padding-left: 20px;
font-size: 13px
}

.multiselect__option--highlight {
background: #41b883;
outline: none;
color: #fff
}

.multiselect__option--highlight:after {
content: attr(data-select);
background: #41b883;
color: #fff
}

.multiselect__option--selected {
background: #f3f3f3;
color: #35495e;
font-weight: 700
}

.multiselect__option--selected:after {
content: attr(data-selected);
color: silver
}

.multiselect__option--selected.multiselect__option--highlight {
background: #ff6a6a;
color: #fff
}

.multiselect__option--selected.multiselect__option--highlight:after {
background: #ff6a6a;
content: attr(data-deselect);
color: #fff
}

.multiselect--disabled {
background: #ededed;
pointer-events: none
}

.multiselect--disabled .multiselect__current,.multiselect--disabled .multiselect__select,.multiselect__option--disabled {
background: #ededed;
color: #a6a6a6
}

.multiselect__option--disabled {
cursor: text;
pointer-events: none
}

.multiselect__option--group {
background: #ededed;
color: #35495e
}

.multiselect__option--group.multiselect__option--highlight {
background: #35495e;
color: #fff
}

.multiselect__option--group.multiselect__option--highlight:after {
background: #35495e
}

.multiselect__option--disabled.multiselect__option--highlight {
background: #dedede
}

.multiselect__option--group-selected.multiselect__option--highlight {
background: #ff6a6a;
color: #fff
}

.multiselect__option--group-selected.multiselect__option--highlight:after {
background: #ff6a6a;
content: attr(data-deselect);
color: #fff
}

.multiselect-enter-active,.multiselect-leave-active {
transition: all .15s ease
}

.multiselect-enter,.multiselect-leave-active {
opacity: 0
}

.multiselect__strong {
margin-bottom: 8px;
line-height: 20px;
display: inline-block;
vertical-align: top
}

[dir=rtl] .multiselect {
text-align: right
}

[dir=rtl] .multiselect__select {
right: auto;
left: 1px
}

[dir=rtl] .multiselect__tags {
padding: 8px 8px 0 40px
}

[dir=rtl] .multiselect__content {
text-align: right
}

[dir=rtl] .multiselect__option:after {
right: auto;
left: 0
}

[dir=rtl] .multiselect__clear {
right: auto;
left: 12px
}

[dir=rtl] .multiselect__spinner {
right: auto;
left: 1px
}

@-webkit-keyframes a {
0% {
transform: rotate(0)
}

to {
transform: rotate(2turn)
}
}

@keyframes a {
0% {
transform: rotate(0)
}

to {
transform: rotate(2turn)
}
}

text.calendar-heatmap-legend-text,text.day-initial,text.month-name {
/* font-family: Inter,sans-serif; */
font-size: 10px;
color: #444;
fill: #444
}

text.month-name {
font-size: 12px!important;
text-transform: uppercase;
color: #444;
fill: #444
}

rect.day-cell:hover {
stroke: #555;
stroke-width: 1px
}

.day-cell-tooltip {
position: absolute;
z-index: 9999;
padding: 5px 9px;
color: #444;
font-size: 12px;
background: #fafafb;
border-radius: 3px;
text-align: center;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
box-shadow: 0 3px 5px rgba(0,0,0,.25);
border: 1px solid #eee
}

.calendar-heatmap {
box-sizing: initial
}

.refer.page-container .credit-card {
display: inline-block;
margin-left: 20px
}

.refer.page-container .credit-card h1 {
margin-bottom: 0;
margin-top: 15px;
font-weight: 600
}

.refer.page-container .credit-card h1 a {
font-size: 11px;
margin-left: 10px;
position: relative;
bottom: 1px;
font-weight: 400
}

.refer.page-container .redeem-modal h3 {
margin-top: 0
}

.refer.page-container .refer-mobile {
position: relative
}

.refer.page-container .refer-mobile .pre-mobile {
position: absolute;
top: 21px;
z-index: 1;
padding: 10px;
background: #fafafb;
left: 1px;
line-height: 1.25rem
}

.refer.page-container .refer-mobile input {
padding-left: 50px!important
}

.refer.page-container .table-container {
max-height: 400px;
overflow: auto
}

.refer.page-container .refer-block .refer-link-label {
margin-bottom: 10px
}

.refer.page-container .refer-block .refer-link-label a {
margin-left: 5px;
top: 2px;
position: relative
}

.refer.page-container .refer-block img.refer-head-img {
height: 60px;
width: auto;
position: relative;
top: 2px
}

.refer.page-container .refer-block .refer-message {
font-weight: 600;
font-size: 16px;
line-height: 1.8
}

.refer.page-container .refer-block .refer-message p {
width: 100%
}

.refer.page-container .refer-block .refer-message p a {
font-size: 12px;
margin-left: 5px
}

.refer.page-container .pnl-charges-breakdown .state-process {
margin-top: 20px!important
}

.refer.page-container .pnl-charges-breakdown textarea {
border: 1px solid #e1e1e1;
margin-top: 10px
}

.refer.page-container .redeem-offers .post-redeem {
margin-top: 20px
}

.refer.page-container .redeem-offers .vendor-list {
border-top: 1px solid #eee;
border-bottom: 1px solid #eee
}

.refer.page-container .redeem-offers .vendor-list h3 {
font-weight: 600;
margin-top: 20px
}

.refer.page-container .redeem-offers .vendor-list .vendor-desc {
margin-bottom: 30px
}

.refer.page-container .redeem-offers .vendor-list .vendor-logo-container .vendor-logo {
padding: 25px 0;
text-align: center;
border: 1px solid #eee;
border-top: none;
background: #fafafb
}

.refer.page-container .redeem-offers .vendor-list .vendor-logo-container .vendor-logo img {
width: 125px;
height: auto;
margin: auto;
position: relative;
top: 2px
}

.refer.page-container .redeem-offers .vendor-list .vendor-logo-container .vendor-logo.selected {
background: #fff;
border-right: none
}

.refer.page-container .redeem-offers .vendor-list .vendor-logo-container .vendor-logo:hover {
cursor: pointer
}

.refer.page-container .redeem-offers .vendor-list .vendor-logo-container:last-child .vendor-logo {
border-bottom: none
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer {
margin-top: 15px
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer:first-child {
margin-top: 30px
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer label {
display: block!important;
padding-bottom: 15px;
border-bottom: 1px solid #eee
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer label span {
float: right
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:checked,.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:not(:checked) {
position: absolute;
left: -9999px
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:checked+label,.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:not(:checked)+label {
position: relative;
padding-left: 30px;
cursor: pointer;
line-height: 20px;
display: inline-block;
font-weight: 600;
color: #444!important
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:checked+label {
color: #0059c1!important
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:not(:checked)+label:before {
border: 2px solid #9b9b9b
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:checked+label:before {
border: 2px solid #0059c1
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:checked+label:before,.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:not(:checked)+label:before {
content: "";
position: absolute;
left: 0;
top: 1px;
width: 14px;
height: 14px;
border-radius: 100%
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:checked+label:after,.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:not(:checked)+label:after {
content: "";
width: 10px;
height: 10px;
background: #0059c1;
position: absolute;
top: 5px;
left: 4px;
border-radius: 100%;
transition: all .2s ease
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:not(:checked)+label:after {
opacity: 0;
transform: scale(0)
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer [type=radio]:checked+label:after {
opacity: 1;
transform: scale(1)
}

.refer.page-container .refer-form h2 a {
font-size: 11px;
margin-left: 10px;
position: relative;
bottom: 1px
}

.refer.page-container .refer-link .refer-link-label img {
max-width: 18px;
opacity: .8
}

.refer.page-container .refer-link .refer-link-label img:hover {
opacity: 1
}

.refer.page-container .refer-link .su-input-group {
display: inline-block;
margin-bottom: 0
}

.refer.page-container .refer-link .su-input-group input {
width: 235px
}

.refer.page-container .refer-link button {
margin-left: 0;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
position: relative!important;
top: 0!important;
left: -22px!important
}

.refer.page-container .refer-head-icon {
position: relative;
width: 25px;
height: 22px;
margin-right: 3px;
margin-left: 5px;
top: 2px
}

.refer.page-container .credits-req {
position: relative;
top: 4px;
font-size: .85rem;
font-weight: 600
}

.refer.page-container .refer-table tbody tr .remarks,.refer.page-container .refer-table thead tr .remarks {
max-width: 400px
}

.refer.page-container .refer-table tbody tr .ledger-date,.refer.page-container .refer-table thead tr .ledger-date {
min-width: 85px
}

.refer.page-container .refer-table tbody tr:first-child td:first-child,.refer.page-container .refer-table thead tr:first-child td:first-child {
width: 80px
}

.refer.page-container .refer-table .time {
color: #9b9b9b
}

.refer.page-container .refer-table .exchange {
font-size: .75rem;
color: #9b9b9b;
margin-left: 15px;
font-weight: 600
}

.refer.page-container .refer-table thead tr {
border-top: 1px solid #f1f1f1
}

.refer.page-container .refer-table thead tr .sorted {
background: #fafafb
}

.refer.page-container .refer-table thead td {
cursor: pointer;
color: #9b9b9b;
background: #fafafb
}

.refer.page-container .refer-table thead td:first-child {
min-width: 75px
}

.refer.page-container .refer-table thead td:hover {
background: #fafafb
}

.refer.page-container .refer-table thead td:hover .arrow {
opacity: 1
}

.refer.page-container .refer-table thead .arrow-show {
opacity: 1;
background: #fafafb
}

.refer.page-container .refer-table tr {
border-bottom: 1px solid #f1f1f1
}

.refer.page-container .refer-table tr .trade-exchange {
display: inline-block;
margin-left: 8px;
font-size: 10px;
color: #9b9b9b;
font-weight: 600
}

.refer.page-container .refer-table tr .trade-type {
padding: 3px 10px;
text-transform: uppercase;
width: 30px;
display: block;
border-radius: 2px;
float: right;
font-size: 10px;
text-align: center
}

.refer.page-container .refer-table tr .buy {
color: #4184f3;
background-color: rgba(65,132,243,.1)
}

.refer.page-container .refer-table tr .sell {
color: #df514c;
background-color: rgba(223,81,76,.1)
}

.refer.page-container .refer-table .arrow {
display: inline-block;
float: left;
position: relative;
top: 7px;
border: solid #9b9b9b;
border-width: 0 1px 1px 0;
padding: 3px;
opacity: 0
}

.refer.page-container .refer-table .arrow.asc {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg)
}

.refer.page-container .refer-table .arrow.desc {
transform: rotate(45deg);
-webkit-transform: rotate(45deg)
}

@media only screen and (min-width: 800px) {
.refer.page-container .refer-block {
display:flex;
margin-top: 30px
}

.refer.page-container .refer-message {
padding-left: 30px;
border-left: 1px solid #eee
}
}

@media only screen and (max-width: 800px) {
.refer.page-container .refer-mobile .pre-mobile {
padding:18px 10px!important
}

.refer.page-container .vendor-block .vendor-offer label span {
float: none!important;
display: block
}

.refer.page-container .refer-link-label a {
margin-left: 10px!important
}

.refer.page-container .refer-link-label img {
max-width: 25px!important
}

.refer.page-container .show-inline-on-mobile {
display: inline!important
}

.refer.page-container .refer-message {
margin-top: 10px
}

.refer.page-container .vendor-logo-container {
width: 25%!important;
display: inline-block
}

.refer.page-container .vendor-logo-container .vendor-logo {
border-bottom: 1px solid #eee!important
}

.refer.page-container .vendor-logo-container .vendor-logo img {
width: 70px!important;
height: 25px!important
}

.refer.page-container .redeem-offers .vendor-block .vendor-offer label {
border-bottom: none!important
}

.marketwatch-sidebar .instruments .instrument .price .refer.page-container .redeem-offers span,.marketwatch-sidebar .instruments .instrument .refer.page-container .redeem-offers .price,.refer.page-container .redeem-offers .marketwatch-sidebar .instruments .instrument .price,.refer.page-container .redeem-offers .marketwatch-sidebar .instruments .instrument .price span,.refer.page-container .redeem-offers .text-right {
text-align: center!important
}
}

.page-container.gift .table-section {
padding-top: 20px
}

.page-container.gift .table-section .table-download {
position: absolute;
right: 0;
top: 0;
margin-top: 0
}

.page-container.gift .cards .card .top {
margin-bottom: 10px!important;
align-items: center
}

.page-container.gift .cards .card .su-input-group {
margin-top: 0;
display: inline-block
}

.page-container.gift .cards .card .bottom {
display: block!important
}

.page-container.gift #gift_link {
opacity: 0
}

.page-container.gift .cancel-pledge-modal .btn-blue {
margin-right: 20px
}

.page-container.gift ul {
padding-left: 25px
}

.page-container.gift ul li {
margin-bottom: 10px
}

.page-container.gift .gift-illustration {
margin: 60px 0
}

.page-container.gift .gift-illustration img {
max-width: 400px
}

.page-container.gift .gift-illustration .inputcontainer {
margin-top: 60px!important
}

.page-container.gift .rec-box {
padding: 20px 40px 30px 40px;
box-shadow: 0 0 6px 0 rgba(0,0,0,.2);
border-radius: 2px
}

.page-container.gift .rec-box button {
max-width: 150px!important;
margin-left: 0
}

.page-container.gift .rec-box h2 {
margin-bottom: 0;
margin-top: 0
}

.page-container.gift .rec-box .v-align {
margin-bottom: 10px;
margin-top: 5px
}

.page-container.gift .gift-head-icon {
position: relative;
width: 25px;
height: 22px;
margin-right: 3px;
margin-left: 5px;
top: 2px
}

.page-container.gift .rec-card {
margin-top: 60px;
margin-bottom: 60px
}

.page-container.gift .rec-card .seven span {
margin-right: 15px
}

.page-container.gift .rec-card .low-marg {
margin-bottom: 10px;
margin-top: 0
}

.page-container.gift .rec-card button {
max-width: 100px
}

.page-container.gift .selected-container {
padding-left: 10px;
padding-right: 10px;
margin-bottom: 5px;
min-height: 20px;
margin-top: 20px
}

.page-container.gift .selected-container label {
font-size: .875rem!important
}

.page-container.gift .selected-container span {
color: #0059c1
}

.page-container.gift .success {
color: #167f39
}

.page-container.gift #gift_form {
margin-top: 50px;
margin-bottom: 40px
}

.page-container.gift #rec_form {
margin-bottom: 15px
}

.page-container.gift #rec_form .gift-mobile {
position: relative
}

.page-container.gift #rec_form .gift-mobile .pre-mobile {
position: absolute;
top: 21px;
z-index: 1;
padding: 10px;
background: #fafafb;
left: 1px;
line-height: 1.25rem;
font-size: .875rem
}

.page-container.gift #rec_form .gift-mobile input {
padding-left: 50px!important
}

.page-container.gift .gift-history img {
height: 16px;
position: relative;
top: 2px;
margin-right: 5px
}

.page-container.gift .gift-history h3:hover {
cursor: pointer
}

.page-container.gift .gift-history h3 .icon {
margin-left: 15px
}

.page-container.gift .gift-history.accept-table {
max-height: 500px;
width: 500px!important;
margin: auto
}

.page-container.gift .accept-head h3 {
margin-top: 20px;
margin-bottom: 25px
}

.page-container.gift .accept-invite {
font-size: 16px
}

.page-container.gift .history-table .gift-status {
display: inline-block
}

.page-container.gift .history-table tr {
border-bottom: 1px solid #f1f1f1;
padding: 10px 5px
}

.page-container.gift .history-table tr td:first-child,.page-container.gift .history-table tr td:last-child,.page-container.gift .history-table tr td:nth-child(2),.page-container.gift .history-table tr td:nth-child(3) {
min-width: 125px
}

.page-container.gift .history-table thead {
color: #9b9b9b
}

.page-container.gift .history-table button {
margin-right: 10px
}

.page-container.gift .history-table .status {
text-transform: uppercase;
font-size: .6875rem;
padding: 3px 15px;
border-radius: 2px;
position: relative;
display: inline-block;
line-height: 1.7;
text-align: center;
margin-right: 10px
}

.page-container.gift .history-table .status a {
position: relative;
top: 1px
}

.page-container.gift .history-table .status.accepted,.page-container.gift .history-table .status.created {
background: rgba(255,202,85,.15);
color: #f8ab00
}

.page-container.gift .history-table .status.canceled {
background: hsla(0,0%,80%,.15);
color: #9b9b9b
}

.page-container.gift .history-table .status.approved,.page-container.gift .history-table .status.processing,.page-container.gift .history-table .status.transferred {
background: rgba(65,132,243,.15);
color: #4184f3
}

.page-container.gift .history-table .status.failed {
background: rgba(255,85,85,.15);
color: #f6461a
}

.page-container.gift #holdings_table thead tr th:first-child:hover,.page-container.gift #holdings_table thead tr th:last-child:hover {
cursor: default;
background: #fff
}

.page-container.gift #holdings_table thead tr th:first-child input {
width: 15px;
height: 15px;
position: relative;
top: 2px;
left: 2px
}

.page-container.gift #holdings_table thead tr th:first-child input:hover {
cursor: pointer
}

.page-container.gift #holdings_table tr .row-check {
line-height: 0
}

.page-container.gift #holdings_table tr .row-check label:hover {
cursor: pointer
}

.page-container.gift #holdings_table tr input[type=number]::-webkit-inner-spin-button,.page-container.gift #holdings_table tr input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0
}

.page-container.gift #holdings_table tr input[type=number] {
-moz-appearance: textfield
}

.page-container.gift #holdings_table tr td:first-child {
min-width: 20px;
width: 20px;
padding-top: 11px;
padding-bottom: 5px
}

.page-container.gift #holdings_table tr td:first-child input {
display: none
}

.page-container.gift #holdings_table tr td:first-child .checkmark {
display: inline-block;
top: 0;
left: 0;
height: 15px;
width: 15px;
border: 1px solid #e1e1e1;
position: relative;
border-radius: 2px
}

.page-container.gift #holdings_table tr td:first-child input:checked~.checkmark {
background-color: #0059c1
}

.page-container.gift #holdings_table tr td:first-child .checkmark:after {
content: "";
position: absolute;
display: none
}

.page-container.gift #holdings_table tr td:first-child input:checked~.checkmark:after {
display: block
}

.page-container.gift #holdings_table tr td:first-child .checkmark:after {
left: 5px;
top: 2px;
width: 3px;
height: 7px;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: rotate(45deg)
}

.page-container.gift #holdings_table tr td:last-child {
width: 125px
}

.page-container.gift #holdings_table tr td:first-child input {
width: 15px;
height: 15px;
position: relative;
top: 2px;
left: 2px
}

.page-container.gift #holdings_table tr td:first-child input:hover {
cursor: pointer
}

.page-container.gift #holdings_table tr td:nth-child(2) {
text-align: left!important
}

.page-container.gift #holdings_table tr td:nth-child(2) .arrow {
float: right!important
}

.page-container.gift #holdings_table tr td .su-input-group {
margin-top: 0;
width: 110px;
float: right
}

.page-container.gift #holdings_table tr td .su-input-group input {
text-align: right
}

@media only screen and (min-width: 800px) {
.page-container.gift .gift-mobile .pre-mobile {
padding:10px!important
}

.page-container.gift #holdings_table tbody {
display: block;
max-height: 500px;
overflow: auto
}

.page-container.gift #holdings_table tbody tr,.page-container.gift #holdings_table thead {
display: table;
width: 100%;
table-layout: fixed
}
}

@media only screen and (max-width: 800px) {
.page-container.gift .card input[type=number] {
width:95px;
text-align: right!important
}

.page-container.gift .gift-mobile .pre-mobile {
padding: 18px 10px!important
}

.page-container.gift .gift-illustration {
margin: 10px 0 40px 0
}

.page-container.gift .gift-illustration img {
max-width: 200px
}

.page-container.gift .gift-illustration .inputcontainer {
margin-top: 20px!important
}

.page-container.gift .selected-container {
padding: 0
}

.page-container.gift .rec-card {
margin-top: 20px
}

.page-container.gift .gift-history #gift_link {
position: absolute
}

.page-container.gift .gift-history .history-table {
padding-top: 0!important
}

.page-container.gift .gift-history .history-table .status {
margin-right: 0
}

.page-container.gift .gift-history .history-table .card .top {
display: block
}

.page-container.gift .gift-history .history-table .card .middle {
margin-bottom: 10px!important
}

.page-container.gift .gift-history .history-table .card .gift-status button {
padding: 5px 5px!important;
height: 25px!important;
line-height: 1;
font-size: 12px!important
}
}

.tagger .modal-container {
width: 555px
}

.tagger .modal-container .create-tag-head a {
color: #444!important
}

.tagger h4 {
margin-bottom: 0;
margin-top: 20px
}

.tagger .filter-box {
position: relative
}

.tagger .is-all {
padding-right: 50px
}

.tagger .tags-nudge-link {
position: absolute;
top: 9px;
right: 20px
}

.tagger .filters-list label.p1,.tagger .ti-tags.p1 {
color: #039be5!important;
background: rgba(3,155,229,.1)!important;
border: none!important
}

.tagger .filters-list label.p2,.tagger .ti-tags.p2 {
color: #0b8043!important;
background: rgba(11,128,67,.1)!important;
border: none!important
}

.tagger .filters-list label.p3,.tagger .ti-tags.p3 {
color: #3f51b5!important;
background: rgba(63,81,181,.1)!important;
border: none!important
}

.tagger .filters-list label.p4,.tagger .ti-tags.p4 {
color: #f4511e!important;
background: rgba(244,81,30,.1)!important;
border: none!important
}

.tagger .filters-list label.p5,.tagger .ti-tags.p5 {
color: #795548!important;
background: rgba(121,85,72,.1)!important;
border: none!important
}

.tagger .filters-list label.p6,.tagger .ti-tags.p6 {
color: #7cb342!important;
background: rgba(124,179,66,.1)!important;
border: none!important
}

.tagger .filters-list label.p7,.tagger .ti-tags.p7 {
color: #f09300!important;
background: rgba(240,147,0,.1)!important;
border: none!important
}

.tagger .filters-list label.p8,.tagger .ti-tags.p8 {
color: #8e24aa!important;
background: rgba(142,36,170,.1)!important;
border: none!important
}

.tagger .filters-list label.p9,.tagger .ti-tags.p9 {
color: #616161!important;
background: rgba(97,97,97,.1)!important;
border: none!important
}

.tagger .filters-list label.p10,.tagger .ti-tags.p10 {
color: #ffcd56!important;
background: rgba(255,205,86,.1)!important;
border: none!important
}

.tagger .filter-link {
position: relative;
display: block;
border: none;
box-shadow: none;
max-width: 100%;
padding-right: 0;
border-radius: 0;
color: #444;
min-height: 38px;
box-sizing: border-box;
z-index: 2
}

.tagger .filter-link .filter-count {
width: 18px;
height: 18px;
font-size: 10px;
color: #fff;
background: #0059c1;
border-radius: 50%;
display: inline-block;
text-align: center;
line-height: 1.8;
position: absolute;
right: 5px;
font-weight: 600;
top: 8px
}

.tagger .filter-option-container.main-input .filters {
padding-top: 50px!important
}

.tagger .filter-option-container:not(.main-input) .filter-option label.checks {
margin-bottom: 10px
}

.tagger .filter-option-container .filter-option {
position: absolute;
left: -1px;
right: -1px;
top: -1px;
background: #fff;
border: 1px solid #e1e1e1;
border-radius: 2px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
z-index: 0;
transition: all .15s ease;
transform: rotateX(-15deg);
transform-origin: 0 0;
opacity: 0;
visibility: hidden
}

.tagger .filter-option-container .filter-option ::-webkit-scrollbar {
width: 6px
}

.tagger .filter-option-container .filter-option ::-webkit-scrollbar-track {
background: #fff
}

.tagger .filter-option-container .filter-option ::-webkit-scrollbar-thumb {
background: #e0e3ec
}

.tagger .filter-option-container .filter-option ::-webkit-scrollbar-thumb:hover {
background: #555;
width: 3px
}

.tagger .filter-option-container .filter-option.show {
opacity: 1;
transform: rotateX(0deg);
display: block;
visibility: visible
}

.tagger .filter-option-container .filter-option .filters {
padding: 45px 20px 10px 20px;
max-height: 320px;
overflow: auto
}

.tagger .filter-option-container .filter-option .filters .filters-label {
display: block;
margin-bottom: 10px;
margin-top: 15px
}

.tagger .filter-option-container .filter-option .filters .filters-list {
display: inline-block
}

.tagger .filter-option-container .filter-option label {
padding-left: 0
}

.tagger .filter-option-container .filter-option .all-tags-select {
display: block!important;
margin-top: 15px
}

.tagger .filter-option-container .filter-option .all-tags-select label {
border-color: #0059c1!important;
color: #0059c1!important;
background: #fff!important
}

.tagger .filter-option-container .filter-option .all-tags-select label:hover {
background-color: #0059c1!important;
color: #fff!important
}

.tagger .filter-option-container .filter-option .all-filter-hr {
margin-bottom: 17px
}

.tagger .filter-option-container .filter-option .create-tag-cloud {
display: inline-block;
color: #0059c1!important;
border: none
}

.tagger .filter-option-container .filter-option .create-tag-cloud:hover {
opacity: .8;
background: #fff;
color: #0059c1!important;
cursor: pointer;
font-size: 12px
}

.tagger .filter-option-container .filter-option label.checks {
display: inline-block;
padding: 4px 10px;
margin-right: 8px;
font-size: .9rem!important;
border: none;
border-radius: 3px;
color: #666;
background: #fafafb;
line-height: 1rem!important
}

.tagger .filter-option-container .filter-option label.checks:hover {
cursor: pointer;
opacity: .8
}

.tagger .filter-option-container .filter-option label.checks.active {
border: 1px solid #0059c1;
color: #fff;
background: #0059c1
}

.tagger .filter-option-container .filter-option input[type=checkbox] {
display: none
}

.tagger .filter-option-container .filter-option input {
max-width: 175px;
font-size: 12px;
min-height: 35px;
height: 35px
}

.tagger .filter-option-container .filter-option .triangle {
width: 30px;
height: 30px;
position: absolute;
overflow: hidden;
box-shadow: 0 16px 10px -17px rgba(0,0,0,.5);
left: 20px;
top: -30px
}

.tagger .filter-option-container .filter-option .triangle:after {
content: "";
position: absolute;
width: 20px;
height: 20px;
background: #fff;
transform: rotate(-45deg);
top: 20px;
left: 4px;
box-shadow: 0 1px 4px 0 rgba(0,0,0,.1);
border-style: solid;
border-width: 1px 1px 1px 1px;
border-color: #eee
}

.tagger .filter-option-container .reset-filter {
text-align: right;
padding: 2px 20px 2px 0;
font-size: 12px;
color: #9c9c9c;
background: #fafafb
}

.tagger .filter-option-container .reset-filter span:hover {
cursor: pointer;
opacity: .8
}

.tagger .filter-option-container .reset-filter span img {
width: 12px;
vertical-align: middle;
margin-right: 4px
}

.tagger .filter-option-container .filter-option {
top: -10px;
z-index: 1
}

.tagger .filter-option-container .filter-option .filters {
padding-top: 45px
}

.tagger .vue-tags-input.border-input {
border: 1px solid #e1e1e1;
border-radius: 3px
}

.tagger .vue-tags-input.all-tags-added .ti-tags li {
display: none
}

.tagger .vue-tags-input.all-tags-added .ti-tags li:nth-last-child(2) {
display: inline-block;
background-color: #fff!important;
color: #444!important;
font-weight: 600
}

.tagger .vue-tags-input.all-tags-added .ti-tags li:nth-last-child(2) .ti-actions {
display: none
}

.tagger .vue-tags-input.main-input .ti-autocomplete {
padding-bottom: 10px
}

.tagger .vue-tags-input.main-input ul .ti-item div {
padding: 6px!important
}

.tagger .vue-tags-input:not(.main-input) input {
padding-left: 5px!important
}

.tagger .vue-tags-input:not(.main-input) ul .ti-item:last-child {
background: #eee;
color: #444
}

.tagger .vue-tags-input:not(.main-input) ul .ti-item:last-child div.my-item {
padding-left: 0!important
}

.tagger .vue-tags-input:not(.main-input) ul .ti-item:last-child span {
background: inherit!important
}

.tagger .vue-tags-input:not(.main-input) ul .ti-item:not(:last-child) div {
padding: 6px!important
}

.tagger .vue-tags-input:not(.main-input):not(.is-all) .ti-autocomplete {
position: static
}

.tagger .vue-tags-input:not(.main-input) .ti-tags {
padding-left: 15px!important;
border: none!important
}

.tagger .vue-tags-input ul .ti-selected-item {
background: transparent!important;
opacity: .8
}

.tagger .vue-tags-input ul .ti-selected-item:last-child {
background: #f4f4f4
}

.tagger .vue-tags-input ul .ti-selected-item:last-child .auto-name {
color: #444
}

.tagger .vue-tags-input ul .ti-selected-item:last-child:hover {
background: #f4f4f4!important
}

.tagger .vue-tags-input ul .ti-selected-item:hover {
background: transparent!important
}

.tagger .vue-tags-input .auto-name {
font-size: 12px;
padding: 4px 10px
}

.tagger .vue-tags-input li.ti-item.ti-valid.custom-tag,.tagger .vue-tags-input li.ti-item.ti-valid.system-tag {
display: inline-block;
margin-right: 5px
}

.tagger .vue-tags-input .ti-tag {
font-size: .9rem!important;
padding: 4px 10px
}

.tagger .vue-tags-input .ti-tag .ti-icon-close {
line-height: 14px
}

.tagger .vue-tags-input .ti-tag .ti-content:hover {
cursor: pointer
}

.tagger .vue-tags-input .ti-tag.processing .ti-actions .ti-icon-close {
pointer-events: none
}

.tagger .vue-tags-input .ti-tag.processing .ti-actions .ti-icon-close:before {
content: "î ¶";
/* font-family: kiteicons; */
font-style: normal;
font-weight: 400;
speak: never;
display: inline-block;
text-decoration: inherit;
width: 1em;
margin-right: .2em;
text-align: center;
font-variant: normal;
text-transform: none;
line-height: 1em;
margin-left: .2em;
pointer-events: none
}

.tagger .vue-tags-input .auto-label {
display: none
}

.tagger .vue-tags-input .ti-autocomplete .ti-item:hover {
color: #fff
}

.tagger .vue-tags-input .ti-autocomplete .ti-item.custom-tag {
color: #444;
background: #fff
}

.tagger .vue-tags-input .ti-autocomplete .ti-item.custom-tag:hover {
color: #444;
background: transparent!important
}

.tagger .vue-tags-input .ti-selected-item.ti-item.custom-tag .auto-name {
color: #444
}

.tagger .vue-tags-input .ti-selected-item.ti-item .auto-name {
color: #fff
}

.tagger .create-tag-color,.tagger .create-tag-name {
display: inline-block
}

.tagger .create-tag-name {
width: calc(100% - 125px)
}

.tagger .create-tag-color {
position: relative;
top: 1px;
margin-right: 20px
}

.tagger .create-tag-color .selected-color {
box-sizing: border-box;
border: 1px solid #e1e1e1;
padding: 7px;
border-radius: 3px;
padding-right: 20px
}

.tagger .create-tag-color .selected-color span:first-child {
border-radius: 2px;
display: inline-block;
box-sizing: border-box;
width: 23px;
height: 23px
}

.tagger .create-tag-color .selected-color span:last-child {
margin-left: 7px;
color: #666
}

.tagger .create-tag-color .selected-color:hover {
cursor: pointer
}

.tagger .create-tag-color .color-palette {
position: absolute;
width: 130px;
z-index: 2;
background: #fff;
border: 1px solid #e1e1e1;
padding: 4px
}

.tagger .create-tag-color .color-palette .palette-colors {
width: 20px;
height: 20px;
margin: 3px;
display: inline-block;
border-radius: 2px
}

.tagger .create-tag-color .color-palette .palette-colors:hover {
opacity: .8;
cursor: pointer
}

.tagger .create-tag-desc button {
width: 100%
}

@media only screen and (max-width: 800px) {
.tagger .create-tag-color .selected-color {
height:54px;
display: flex;
align-items: center
}

.tagger .create-tag-color .selected-color span:first-child {
width: 25px;
height: 25px
}

.tagger .create-tag-color .color-palette {
width: 125px
}

.tagger .create-tag-color .color-palette .palette-colors {
width: 25px;
height: 25px
}
}

.tag-widget h1 button {
float: right;
height: 36px!important;
line-height: 1;
font-size: .9rem!important;
padding: 0 10px!important
}

.tag-widget h1 .icon-arrow-left:hover {
cursor: pointer
}

.tag-widget .no-tags img {
max-width: 100%
}

.tag-widget .no-tags button {
line-height: 1
}

.tag-widget .added-tags {
max-height: calc(100vh - 250px);
overflow: auto;
padding-right: 7px
}

.tag-widget .added-tags::-webkit-scrollbar {
width: 3px
}

.tag-widget .added-tags::-webkit-scrollbar-track {
background: #fff
}

.tag-widget .added-tags::-webkit-scrollbar-thumb {
background: #e0e3ec
}

.tag-widget .added-tags::-webkit-scrollbar-thumb:hover {
background: #555;
width: 3px
}

.tag-widget .added-tags p {
border-bottom: 1px solid #e1e1e1;
padding-bottom: 12px;
margin-bottom: 15px
}

.tag-widget .added-tags span.tag {
padding: 6px 10px;
display: inline-block;
margin-right: 5px;
border-radius: 2px;
background: rgba(68,68,68,.1);
line-height: 14px;
color: #444
}

.tag-widget .added-tags span.tag:hover {
cursor: pointer;
opacity: .8
}

.tag-widget .added-tags .tag-links {
float: right;
position: relative;
top: 5px
}

.tag-widget .added-tags .tag-links span.icon-container {
display: inline-block;
margin-right: 5px
}

.tag-widget .added-tags .tag-links span.icon-container.analyse[data-balloon][data-balloon-pos=up]:after {
left: -35%!important
}

.tag-widget .added-tags .tag-links span.icon {
display: inline-block;
font-size: 1rem
}

.tag-widget .added-tags .tag-links span.icon:hover {
cursor: pointer;
opacity: .8
}

.tag-widget .tag-search {
margin-top: 30px;
margin-bottom: 35px
}

.tag-widget #create_tag_form .su-input-group {
top: 2px;
margin-bottom: 10px
}

.tag-widget #create_tag_form .su-input-group .su-message {
position: absolute
}

@media only screen and (max-width: 800px) {
.tag-widget #create_tag_form .create-tag-color .selected-color span:last-child {
top:0!important
}

.tag-widget .su-input-group input,.tag-widget .su-input-group textarea,.tag-widget select {
height: 54px
}
}

 
  
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
/* font-family: sans-serif; */
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%
}

body {
margin: 0
}

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

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

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

[hidden],template {
display: none
}

a {
background-color: transparent
}

a:active,a:hover {
outline: 0
}

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

b,strong {
font-weight: 700
}

dfn {
font-style: italic
}

h1 {
font-size: 1.7em;
margin: .67em 0
}

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

small {
font-size: 80%
}

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

sup {
top: -.5em
}

sub {
bottom: -.25em
}

img {
border: 0
}

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

figure {
margin: 1em 40px
}

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

pre {
overflow: auto
}

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

button,input,optgroup,select,textarea {
color: inherit;
font: inherit;
margin: 0
}

button {
overflow: visible
}

button,select {
text-transform: none
}

button,html input[type=button],input[type=reset],input[type=submit] {
-webkit-appearance: button;
cursor: pointer
}

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

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

input {
line-height: normal
}

input[type=checkbox],input[type=radio] {
box-sizing: border-box;
padding: 0
}

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

input[type=search] {
-webkit-appearance: textfield;
box-sizing: content-box
}

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

fieldset {
border: 1px solid silver;
margin: 0 2px;
padding: .35em .625em .75em
}

legend {
border: 0;
padding: 0
}

textarea {
overflow: auto
}

optgroup {
font-weight: 700
}

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

td,th {
padding: 0
}

.container {
position: relative;
max-width: 1366px;
margin: 0 auto;
padding: 0 20px
}

.column,.columns,.container {
width: 100%;
box-sizing: border-box
}

.column,.columns {
float: left
}

@media(min-width: 400px) {
.container {
width:85%;
padding: 0
}
}

@media(min-width: 550px) {
.container {
width:80%
}

.column,.columns {
margin-left: 4%
}

.column:first-child,.columns:first-child {
margin-left: 0
}

.one.column,.one.columns {
width: 4.6666666667%
}

.two.columns {
width: 13.3333333333%
}

.two-half.columns {
width: 18%
}

.three.columns {
width: 22%
}

.four.columns {
width: 30.6666666667%
}

.five.columns {
width: 39.3333333333%
}

.six.columns {
width: 48%
}

.seven.columns {
width: 56.6666666667%
}

.eight.columns {
width: 65.3333333333%
}

.nine.columns {
width: 74%
}

.ten.columns {
width: 82.6666666667%
}

.eleven.columns {
width: 91.3333333333%
}

.twelve.columns {
width: 100%;
margin-left: 0
}

.one-third.column {
width: 30.6666666667%
}

.two-thirds.column {
width: 65.3333333333%
}

.one-half.column {
width: 48%
}

.offset-by-one.column,.offset-by-one.columns {
margin-left: 8.6666666667%
}

.offset-by-two.column,.offset-by-two.columns {
margin-left: 17.3333333333%
}

.offset-by-three.column,.offset-by-three.columns {
margin-left: 26%
}

.offset-by-four.column,.offset-by-four.columns {
margin-left: 34.6666666667%
}

.offset-by-five.column,.offset-by-five.columns {
margin-left: 43.3333333333%
}

.offset-by-six.column,.offset-by-six.columns {
margin-left: 52%
}

.offset-by-seven.column,.offset-by-seven.columns {
margin-left: 60.6666666667%
}

.offset-by-eight.column,.offset-by-eight.columns {
margin-left: 69.3333333333%
}

.offset-by-nine.column,.offset-by-nine.columns {
margin-left: 78%
}

.offset-by-ten.column,.offset-by-ten.columns {
margin-left: 86.6666666667%
}

.offset-by-eleven.column,.offset-by-eleven.columns {
margin-left: 95.3333333333%
}

.offset-by-one-third.column,.offset-by-one-third.columns {
margin-left: 34.6666666667%
}

.offset-by-two-thirds.column,.offset-by-two-thirds.columns {
margin-left: 69.3333333333%
}

.offset-by-one-half.column {
margin-left: 52%
}
}

.container:after,.row:after,.u-cf {
content: "";
display: table;
clear: both
}

.lessmargin {
margin-bottom: 5px!important
}

.inc-margin {
margin-top: 25px
}

.generic-table {
width: 100%
}

.generic-table tbody tr td:first-child,.generic-table thead tr td:first-child {
text-align: left
}

.generic-table tbody tr td,.generic-table thead tr td {
text-align: right;
padding: 10px 12px
}

.generic-table thead tr {
border-top: 1px solid #f1f1f1
}

.generic-table thead td {
padding: 15px 12px;
color: #9b9b9b;
background: #fafafb
}

.generic-table tr {
border-bottom: 1px solid #f1f1f1
}

.text-center {
text-align: center
}

.text-uppercase {
text-transform: uppercase
}

.text-small {
font-size: .875rem;
line-height: 20px
}

.su-select,.text-xsmall {
font-size: .75rem
}

.su-input-group .su-dynamic-label,.su-input-group .su-message,.text-label,.text-label.small,.text-xxsmall {
font-size: .725rem
}

.text-xxxsmall {
font-size: .5rem
}

.text-normal {
font-size: .875rem
}

.su-toast-groups .su-toast-icon,.text-initial {
font-size: 1rem
}

.text-pagetitle {
font-size: 1.125rem
}

.text-large {
font-size: 1.5rem
}

.text-xlarge {
font-size: 2rem
}

.text-xxlarge {
font-size: 2.625rem
}

.text-default {
color: #444
}

.text-light {
color: #9b9b9b
}

.text-lightest {
color: #ccc
}

.text-green {
color: #4caf50
}

.text-red,.text-sell {
color: #f6461a
}

.text-blue,.text-buy {
color: #387ed1
}

.text-right {
text-align: right
}

.text-left {
text-align: left
}

.text-decimal {
font-size: .5em
}

.text-no-margin {
margin: 0
}

a.text-light:hover {
color: #444
}

.dim {
opacity: .7
}

.caps {
text-transform: uppercase
}

.text-label {
padding: 2px 10px;
text-align: center;
border-radius: 2px;
display: inline-block;
letter-spacing: .5px;
color: #444;
box-sizing: border-box;
background: rgba(68,68,68,.1)
}

.text-label.red {
color: #df514c;
background-color: rgba(223,81,76,.1)
}

.text-label.green {
color: #4caf50;
background-color: rgba(76,175,80,.1)
}

.text-label.blue {
color: #387ed1;
background-color: rgba(56,126,209,.1)
}

.text-label.orange {
color: #ff5722;
background-color: rgba(255,87,34,.1)
}

.text-label.aqua {
color: #00b0ff;
background-color: rgba(0,176,255,.1)
}

.text-label.amber {
color: #ff8f00;
background-color: rgba(255,143,0,.1)
}

.text-label.rose {
color: #ec407a;
background-color: rgba(236,64,122,.1)
}

.text-label.teal {
color: #009688;
background-color: rgba(0,150,136,.1)
}

.text-label.indigo {
color: #673ab7;
background-color: rgba(103,58,183,.1)
}

.hide {
display: none
}

.wide {
width: 100%
}

.text-box {
padding: 10px 20px;
margin-bottom: 20px;
border-radius: 2px;
color: rgba(0,0,0,.65);
border-left: 5px solid #f4f4f4
}

.text-box.green {
background-color: #ebf8f2;
border-color: #ebf8f2
}

.text-box.blue {
background-color: #ecf6fd;
border-color: #d2eafb
}

.text-box.red {
background-color: #fef0ef;
border-color: #fcdbd9
}

.text-box.yellow {
background-color: #fffaeb;
border-color: #fff3cf
}

@-webkit-keyframes fadeInDown {
0% {
transform: translate3d(0,-50%,0);
opacity: 0
}

to {
transform: none;
opacity: 1
}
}

@keyframes fadeInDown {
0% {
transform: translate3d(0,-50%,0);
opacity: 0
}

to {
transform: none;
opacity: 1
}
}

@-webkit-keyframes fadeOutUp {
0% {
opacity: 1
}

to {
transform: translate3d(0,-50%,0);
opacity: 0
}
}

@keyframes fadeOutUp {
0% {
opacity: 1
}

to {
transform: translate3d(0,-50%,0);
opacity: 0
}
}

@-webkit-keyframes fadeInUp {
0% {
transform: translate3d(0,100%,0);
opacity: 0
}

to {
transform: none;
opacity: 1
}
}

@keyframes fadeInUp {
0% {
transform: translate3d(0,100%,0);
opacity: 0
}

to {
transform: none;
opacity: 1
}
}

@-webkit-keyframes fadeOutDown {
0% {
opacity: 1
}

to {
transform: translate3d(0,100%,0);
opacity: 0
}
}

@keyframes fadeOutDown {
0% {
opacity: 1
}

to {
transform: translate3d(0,100%,0);
opacity: 0
}
}

@-webkit-keyframes fadeIn {
0% {
opacity: 0
}

to {
opacity: 1
}
}

@-webkit-keyframes fadeOut {
0% {
opacity: 1
}

to {
opacity: 0
}
}

@-webkit-keyframes slideInRight {
0% {
transform: translate3d(100%,0,0);
visibility: visible
}

to {
transform: translateZ(0)
}
}

@keyframes slideInRight {
0% {
transform: translate3d(100%,0,0);
visibility: visible
}

to {
transform: translateZ(0)
}
}

.slideInRight {
-webkit-animation-name: slideInRight;
animation-name: slideInRight
}

@-webkit-keyframes slideOutRight {
0% {
transform: translateZ(0)
}

to {
visibility: hidden;
transform: translate3d(100%,0,0)
}
}

@keyframes slideOutRight {
0% {
transform: translateZ(0)
}

to {
visibility: hidden;
transform: translate3d(100%,0,0)
}
}

.slideOutRight {
-webkit-animation-name: slideOutRight;
animation-name: slideOutRight
}

.fade-enter-active,.fade-leave-active {
transition: opacity 10ms
}

.fade-enter,.fade-leave-to {
opacity: 0
}

.perspective {
perspective: 1000px
}

.dropdown-enter-active {
transform-origin: 0 0;
transition: transform .15s ease-in-out,opacity .15s
}

.dropdown-leave-active {
transform-origin: 0 0;
transition: transform .15s ease-in-out,opacity .2s
}

.dropdown-enter,.dropdown-leave-to {
opacity: 0;
transform: rotateX(-15deg);
transform-origin: 0 0
}

.dropdown-leave-to {
transform: rotateX(-30deg)
}

@-webkit-keyframes swing-in {
0% {
opacity: .4;
transform: rotateX(-15deg)
}

to {
opacity: 1;
transform: rotateX(0deg)
}
}

@keyframes swing-in {
0% {
opacity: .4;
transform: rotateX(-15deg)
}

to {
opacity: 1;
transform: rotateX(0deg)
}
}

.shake {
-webkit-animation: shake .15s ease;
animation: shake .15s ease
}

@-webkit-keyframes shake {
0% {
transform: translate(0)
}

20% {
transform: translate(1em)
}

40% {
transform: translate(-1em)
}

60% {
transform: translate(.5em)
}

80% {
transform: translate(-.5em)
}

to {
transform: translate(0)
}
}

@keyframes shake {
0% {
transform: translate(0)
}

20% {
transform: translate(1em)
}

40% {
transform: translate(-1em)
}

60% {
transform: translate(.5em)
}

80% {
transform: translate(-.5em)
}

to {
transform: translate(0)
}
}

.pulse {
-webkit-animation: pulse .15s ease;
animation: pulse .15s ease
}

@-webkit-keyframes pulse {
0% {
transform: scale(1)
}

50% {
transform: scale(.98)
}

to {
transform: scale(1)
}
}

@keyframes pulse {
0% {
transform: scale(1)
}

50% {
transform: scale(.98)
}

to {
transform: scale(1)
}
}

html {
font-size: 87.5%
}

.full-height,body,html {
height: 100%
}

body {
font-size: 14px;
overflow-y: scroll;
overflow-x: hidden;
letter-spacing: 0;
color: #444;
line-height: 1.7em;
min-width: 300px
}

body,h1,h2,h3,h4,h5,h6 {
font-weight: 400;
/* font-family: Inter,sans-serif */
}

h1 {
font-size: 1.75em;
line-height: 2.5rem
}

h1,h2 {
margin-top: 10px;
margin-bottom: 20px
}

h2 {
font-size: 1.5rem
}

h3 {
font-size: 1.3rem;
line-height: 2.25rem
}

h4 {
font-size: 1.25rem
}

h3,h4,h5,h6 {
margin-top: 5px
}

h3,h4,h5,h6,p {
margin-bottom: 20px
}

p {
margin-top: 10px
}

hr {
border-width: 0;
border-top: 1px solid #f1f1f1
}

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

::-webkit-input-placeholder {
text-transform: none;
color: #9b9b9b
}

:-moz-placeholder,::-moz-placeholder {
text-transform: none;
color: #9b9b9b
}

:-ms-input-placeholder {
text-transform: none;
color: #9b9b9b
}

.section {
margin-bottom: 60px
}

@media only screen and (max-width: 800px) {
body {
font-size:14px
}

.section {
margin-bottom: 30px
}
}

.animated,.su-input-group .su-input-label.su-visible,.su-input-group .su-message {
-webkit-animation-duration: .2s;
animation-duration: .2s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}

.animated.infinite,.su-input-group .infinite.su-input-label.su-visible,.su-input-group .infinite.su-message {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite
}

.animated.hinge,.su-input-group .hinge.su-input-label.su-visible,.su-input-group .hinge.su-message {
-webkit-animation-duration: 2s;
animation-duration: 2s
}

.animated.bounceIn,.animated.bounceOut,.animated.flipInX,.animated.flipOutX,.animated.flipOutY,.su-input-group .bounceIn.su-input-label.su-visible,.su-input-group .bounceIn.su-message,.su-input-group .bounceOut.su-input-label.su-visible,.su-input-group .bounceOut.su-message,.su-input-group .flipInX.su-input-label.su-visible,.su-input-group .flipInX.su-message,.su-input-group .flipOutX.su-input-label.su-visible,.su-input-group .flipOutX.su-message,.su-input-group .flipOutY.su-input-label.su-visible,.su-input-group .flipOutY.su-message {
-webkit-animation-duration: .75s;
animation-duration: .75s
}

@-webkit-keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0
}

40% {
transform: perspective(400px) rotateX(-20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}

60% {
transform: perspective(400px) rotateX(10deg);
opacity: 1
}

80% {
transform: perspective(400px) rotateX(-5deg)
}

to {
transform: perspective(400px)
}
}

@keyframes flipInX {
0% {
transform: perspective(400px) rotateX(90deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
opacity: 0
}

40% {
transform: perspective(400px) rotateX(-20deg);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in
}

60% {
transform: perspective(400px) rotateX(10deg);
opacity: 1
}

80% {
transform: perspective(400px) rotateX(-5deg)
}

to {
transform: perspective(400px)
}
}

.flipInX {
-webkit-backface-visibility: visible!important;
backface-visibility: visible!important;
-webkit-animation-name: flipInX;
animation-name: flipInX
}

@-webkit-keyframes slideInUp {
0% {
transform: translate3d(0,100%,0);
visibility: visible
}

to {
transform: translateZ(0)
}
}

@keyframes slideInUp {
0% {
transform: translate3d(0,100%,0);
visibility: visible
}

to {
transform: translateZ(0)
}
}

.slideInUp,.su-input-group .su-input-label.su-visible {
-webkit-animation-name: slideInUp;
animation-name: slideInUp
}

@-webkit-keyframes slideOutDown {
0% {
transform: translateZ(0)
}

to {
visibility: hidden;
transform: translate3d(0,100%,0)
}
}

@keyframes slideOutDown {
0% {
transform: translateZ(0)
}

to {
visibility: hidden;
transform: translate3d(0,100%,0)
}
}

.slideOutDown {
-webkit-animation-name: slideOutDown;
animation-name: slideOutDown
}

@-webkit-keyframes slideInDown {
0% {
transform: translate3d(0,-100%,0);
visibility: visible
}

to {
transform: translateZ(0)
}
}

@keyframes slideInDown {
0% {
transform: translate3d(0,-100%,0);
visibility: visible
}

to {
transform: translateZ(0)
}
}

.slideInDown,.su-input-group .su-message {
-webkit-animation-name: slideInDown;
animation-name: slideInDown
}

@keyframes fadeIn {
0% {
opacity: 0
}

to {
opacity: 1
}
}

.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn
}

@keyframes fadeOut {
0% {
opacity: 1
}

to {
opacity: 0
}
}

.fadeOut {
-webkit-animation-name: fadeOut;
animation-name: fadeOut
}

.su-input-group {
position: relative;
margin-top: 20px
}

.su-input-group input,.su-input-group textarea {
border: 1px solid #e3e3e3;
border-radius: 3px;
padding: 10px 15px;
color: #4a4a4a;
width: 100%;
box-sizing: border-box;
font-size: .875rem;
line-height: 1.25rem
}

.su-input-group input:disabled,.su-input-group textarea:disabled {
background-color: #fff;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0h1L0 6V5zm1 5v1H5z' fill='%23ddd' fill-rule='evenodd'/%3E%3C/svg%3E");
color: #666;
cursor: not-allowed;
border-color: transparent
}

.su-input-group input:focus,.su-input-group textarea:focus {
outline: 0;
border-color: #9b9b9b
}

.su-input-group input:focus+.icon,.su-input-group textarea:focus+.icon {
border-color: #9b9b9b
}

.su-input-group input::-moz-placeholder,.su-input-group textarea::-moz-placeholder {
color: #9b9b9b
}

.su-input-group input:-ms-input-placeholder,.su-input-group textarea:-ms-input-placeholder {
color: #9b9b9b
}

.su-input-group input::placeholder,.su-input-group textarea::placeholder {
color: #9b9b9b
}

.su-input-group input.show-spinner,.su-input-group textarea.show-spinner {
appearance: none;
-webkit-appearance: none;
-moz-appearance: textfield
}

.su-input-group .spinner-container {
position: relative
}

.su-input-group .spinner-container .spinner-down,.su-input-group .spinner-container .spinner-up {
position: absolute;
right: 5px;
color: #9b9b9b
}

.su-input-group .spinner-container .spinner-down:hover,.su-input-group .spinner-container .spinner-up:hover {
cursor: pointer
}

.su-input-group .spinner-container .spinner-up {
top: 0
}

.su-input-group .spinner-container .spinner-down {
bottom: 0
}

.su-input-group.disabled .su-input-label {
color: #ccc
}

.su-input-group .su-input-label {
display: block;
visibility: hidden;
z-index: 1;
position: absolute;
top: -10px;
background: #fff;
padding: 0 5px;
margin-left: 10px
}

.su-input-group .su-input-label.su-visible {
visibility: visible
}

.su-input-group.su-static-label .su-input-label {
visibility: visible;
-webkit-animation: none;
animation: none
}

.su-input-group.uppercase input,.su-input-group.uppercase select,.su-input-group.uppercase textarea {
text-transform: uppercase
}

.su-input-group.su-has-icon input {
padding-left: 55px
}

.su-input-group .su-message {
display: inline-block;
margin-top: 5px
}

.su-input-group .su-message:empty:before {
content: "​"
}

.su-input-group.su-error-state input,.su-input-group.su-error-state select,.su-input-group.su-error-state textarea {
border-color: #f6461a
}

.su-input-group.su-error-state .su-message {
color: #f6461a
}

.su-radio-group .su-radio-wrap {
display: inline-block;
margin-right: 20px
}

.su-radio-group .su-radio {
opacity: 0;
position: absolute
}

.su-radio-group .su-radio,.su-radio-group .su-radio-label {
display: inline-block;
vertical-align: middle;
cursor: pointer
}

.su-radio-group .su-radio-label {
position: relative
}

.su-radio-group .su-radio+.su-radio-label:before {
content: "";
background: #fff;
border: 2px solid #9b9b9b;
display: inline-block;
vertical-align: middle;
width: 3px;
height: 3px;
padding: 3px;
margin: -1px 5px 0 0;
text-align: center;
border-radius: 50%
}

.su-radio-group .su-radio:checked+.su-radio-label:before {
padding: 4px;
background: #0059c1;
box-shadow: inset 0 0 0 2px #fff;
border: 1px solid #0059c1
}

.su-radio-group .su-radio:focus+.su-radio-label {
outline: none
}

.su-radio-group .disabled .su-radio-label {
opacity: .5!important;
cursor: not-allowed
}

.su-checkbox-group {
box-sizing: border-box;
line-height: 1
}

.su-checkbox-group .su-checkbox {
opacity: 0;
position: absolute
}

.su-checkbox-group .su-checkbox:disabled+.su-checkbox-label {
opacity: .6;
cursor: not-allowed
}

.su-checkbox-group .su-checkbox:focus+.su-checkbox-label .su-checkbox-value {
outline: none;
border-bottom: 1px solid #e3e3e3
}

.su-checkbox-group .su-checkbox:checked+.su-checkbox-label .su-checkbox-tick {
top: 3px
}

.su-checkbox-group .su-checkbox-label {
cursor: pointer;
display: flex
}

.su-checkbox-group .su-checkbox-value {
vertical-align: middle;
margin-left: 10px;
border-bottom: 1px solid hsla(0,0%,100%,0)
}

.su-checkbox-group .su-checkbox-box {
display: inline-block;
width: 15px;
height: 15px;
min-width: 15px;
position: relative;
overflow: hidden;
cursor: pointer;
border: 1px solid #ccc;
box-sizing: border-box;
border-radius: 2px;
top: 3px
}

.su-checkbox-group .su-checkbox-tick {
top: 20px;
left: 2px;
right: 2px;
width: 8px;
height: 3px;
content: "";
position: absolute;
border-left: 2px solid;
border-bottom: 2px solid;
margin: auto;
transform: rotate(-45deg) translateZ(0);
transform-origin: center center;
transition: top .5s cubic-bezier(.19,1,.22,1);
border-color: #387ed1
}

.su-checkbox-group.indeterminate .su-checkbox-tick {
transform: none;
border-left: none
}

.su-switch-group .su-switch[type=checkbox] {
display: none
}

.su-switch-group .su-switch-label {
color: #9b9b9b
}

.su-switch-group .su-switch-control {
background: #9b9b9b;
position: relative;
text-indent: -9999px;
cursor: pointer;
display: inline-block;
vertical-align: middle;
width: 40px;
height: 20px;
border-radius: 100px
}

.su-switch-group .su-switch-control:after {
background: #fff;
content: "";
position: absolute;
top: 2.2px;
left: 3px;
width: 15px;
height: 15px;
transition: .2s;
border-radius: 90px
}

.su-switch-group .su-switch:checked+.su-switch-control {
background: #0059c1
}

.su-switch-group .su-switch:checked+.su-switch-control:after {
left: calc(100% - 3px);
transform: translateX(-100%)
}

.su-switch-group .su-switch:disabled+.su-switch-control {
cursor: not-allowed
}

.su-switch-group .su-switch-control:active:after {
width: 14px
}

.su-toast-groups .su-toast-group {
position: fixed;
z-index: 99999;
pointer-events: none
}

.su-toast-groups .su-toast-group div:first-child {
position: relative
}

.su-toast-groups a {
color: #0059c1;
text-decoration: none
}

.su-toast-groups a:hover {
opacity: .7
}

.su-toast-groups .su-toast-top-left {
top: 75px;
left: 20px
}

.su-toast-groups .su-toast-top-right {
top: 75px;
right: 20px
}

.su-toast-groups .su-toast-top-center {
top: 75px;
left: 50%;
transform: translate(-50%)
}

.su-toast-groups .su-toast-bottom-left {
bottom: 75px;
left: 20px
}

.su-toast-groups .su-toast-bottom-right {
bottom: 75px;
right: 20px
}

.su-toast-groups .su-toast-bottom-center {
bottom: 75px;
left: 50%;
transform: translate(-50%)
}

.su-toast-groups .su-toast-item {
display: flex;
box-sizing: border-box;
max-width: 400px;
min-width: 300px;
pointer-events: all;
position: relative;
margin: 0 auto 10px auto;
padding: 10px 30px 15px 15px;
transition: opacity .2s,transform .2s;
background: #fff;
box-shadow: 2px 2px 10px rgba(0,0,0,.1);
border-left: 20px solid #eee;
border-radius: 5px
}

.su-toast-groups .su-toast-item.info {
color: #387ed1;
border-left-color: #387ed1
}

.su-toast-groups .su-toast-item.success {
color: #4caf50;
border-left-color: #4caf50
}

.su-toast-groups .su-toast-item.warning {
color: #ffbf00;
border-left-color: #ffbf00
}

.su-toast-groups .su-toast-item.error {
color: #f6461a;
border-left-color: #f6461a
}

.su-toast-groups .su-toast-item .message {
margin: 5px 0;
color: #444
}

.su-toast-groups .toast-list-enter {
opacity: 0;
transform: translateY(-30px)
}

.su-toast-groups .toast-list-leave-active {
display: none
}

.su-toast-groups .su-toast-icon {
display: inline-block;
vertical-align: middle;
margin-right: 5px;
font-size: 1.3rem;
line-height: 1.5
}

.su-toast-groups .su-toast-item.info .su-toast-icon {
color: #0089d0
}

.su-toast-groups .su-toast-item.success .su-toast-icon {
color: #4caf50
}

.su-toast-groups .su-toast-item.warning .su-toast-icon {
color: #ffbf00
}

.su-toast-groups .su-toast-item.error .su-toast-icon {
color: #f6461a
}

.su-toast-groups .close {
position: absolute;
right: 10px;
top: 12px;
cursor: pointer
}

.dot-spinner,.su-loader {
display: inline-block
}

.dot-spinner {
margin-left: 5px
}

.dot-spinner i {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
background: #9b9b9b;
vertical-align: middle
}

button .dot-spinner {
margin: 0;
padding: 0
}

button .dot-spinner i {
background: #fff
}

.dot-spinner i:first-child {
transform: translate(-5px);
-webkit-animation: dot-spinner-ani2 .5s linear infinite;
animation: dot-spinner-ani2 .5s linear infinite;
opacity: 0
}

.dot-spinner i:nth-child(2),.dot-spinner i:nth-child(3) {
-webkit-animation: dot-spinner-ani3 .5s linear infinite;
animation: dot-spinner-ani3 .5s linear infinite
}

.dot-spinner i:last-child {
-webkit-animation: dot-spinner-ani1 .5s linear infinite;
animation: dot-spinner-ani1 .5s linear infinite
}

@-webkit-keyframes dot-spinner-ani1 {
to {
transform: translate(10px);
opacity: 0
}
}

@keyframes dot-spinner-ani1 {
to {
transform: translate(10px);
opacity: 0
}
}

@-webkit-keyframes dot-spinner-ani2 {
to {
transform: translate(5px);
opacity: 1
}
}

@keyframes dot-spinner-ani2 {
to {
transform: translate(5px);
opacity: 1
}
}

@-webkit-keyframes dot-spinner-ani3 {
to {
transform: translate(5px)
}
}

@keyframes dot-spinner-ani3 {
to {
transform: translate(5px)
}
}

.su-select {
position: relative
}

.su-select .icon {
position: absolute;
top: 5px;
right: 5px;
font-size: 10px;
pointer-events: none
}

.su-select select {
width: 100%;
padding: 3px 30px 3px 8px;
background: #fff;
border-radius: 2px;
border-color: #e3e3e3;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
outline: none
}

.su-select select:disabled {
background-color: #fff!important;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg width='6' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5 0h1L0 6V5zm1 5v1H5z' fill='%23ddd' fill-rule='evenodd'/%3E%3C/svg%3E")!important;
color: #666!important;
cursor: not-allowed;
border-color: transparent!important;
background-repeat: repeat!important;
background-size: inherit!important
}

button[data-balloon] {
overflow: visible
}

[data-balloon]:after,[data-balloon]:before,[data-balloon]:hover:before {
/* font-family: Inter,sans-serif; */
font-weight: 600
}

[data-balloon] {
position: relative;
opacity: 1!important
}

[data-balloon]:after {
background: rgba(17,17,17,.9);
border-radius: 4px;
color: #fff;
content: attr(data-balloon);
font-size: 12px;
padding: .5em 1em;
white-space: nowrap
}

[data-balloon]:after,[data-balloon]:before {
filter: alpha(opactiy=0);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-moz-opacity: 0;
-khtml-opacity: 0;
opacity: 0;
pointer-events: none;
transition: all .18s ease-out .18s;
transition-delay: 0ms;
position: absolute;
z-index: 10
}

[data-balloon]:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
content: ""
}

[data-balloon]:hover:after,[data-balloon]:hover:before,[data-balloon][data-balloon-visible]:after,[data-balloon][data-balloon-visible]:before {
filter: alpha(opactiy=100);
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;
pointer-events: none
}

[data-balloon].font-awesome:after {
/* font-family: FontAwesome */
}

[data-balloon][data-balloon-break]:after {
white-space: pre
}

[data-balloon][data-balloon-pos=up]:after {
bottom: 100%;
left: 50%;
margin-bottom: 11px;
transform: translate(-50%,10px);
transform-origin: top
}

[data-balloon][data-balloon-pos=up]:before {
bottom: 100%;
left: 50%;
margin-bottom: 5px;
transform: translate(-50%,10px);
transform-origin: top
}

[data-balloon][data-balloon-pos=up]:hover:after,[data-balloon][data-balloon-pos=up]:hover:before,[data-balloon][data-balloon-pos=up][data-balloon-visible]:after,[data-balloon][data-balloon-pos=up][data-balloon-visible]:before {
transform: translate(-50%)
}

[data-balloon][data-balloon-pos=down]:after {
left: 50%;
margin-top: 11px;
top: 100%;
transform: translate(-50%,-10px)
}

[data-balloon][data-balloon-pos=down]:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M33.342 12H1.338c6 0 11.627-12.002 16.002-12.002C21.715-.002 27.406 12 33.342 12z'/%3E%3C/svg%3E");
background-size: 100% auto;
width: 18px;
height: 6px;
left: 50%;
margin-top: 5px;
top: 100%;
transform: translate(-50%,-10px)
}

[data-balloon][data-balloon-pos=down]:hover:after,[data-balloon][data-balloon-pos=down]:hover:before,[data-balloon][data-balloon-pos=down][data-balloon-visible]:after,[data-balloon][data-balloon-pos=down][data-balloon-visible]:before {
transform: translate(-50%)
}

[data-balloon][data-balloon-pos=left]:after {
margin-right: 11px;
right: 100%;
top: 50%;
transform: translate(10px,-50%)
}

[data-balloon][data-balloon-pos=left]:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M0 33.342V1.338c0 6 12.002 11.627 12.002 16.002C12.002 21.715 0 27.406 0 33.342z'/%3E%3C/svg%3E");
background-size: 100% auto;
width: 6px;
height: 18px;
margin-right: 5px;
right: 100%;
top: 50%;
transform: translate(10px,-50%)
}

[data-balloon][data-balloon-pos=left]:hover:after,[data-balloon][data-balloon-pos=left]:hover:before,[data-balloon][data-balloon-pos=left][data-balloon-visible]:after,[data-balloon][data-balloon-pos=left][data-balloon-visible]:before {
transform: translateY(-50%)
}

[data-balloon][data-balloon-pos=right]:after {
left: 100%;
margin-left: 11px;
top: 50%;
transform: translate(-10px,-50%)
}

[data-balloon][data-balloon-pos=right]:before {
background: no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='36'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='M12 2.658v32.004c0-6-12.002-11.627-12.002-16.002C-.002 14.285 12 8.594 12 2.658z'/%3E%3C/svg%3E");
background-size: 100% auto;
width: 6px;
height: 18px;
left: 100%;
margin-left: 5px;
top: 50%;
transform: translate(-10px,-50%)
}

[data-balloon][data-balloon-pos=right]:hover:after,[data-balloon][data-balloon-pos=right]:hover:before,[data-balloon][data-balloon-pos=right][data-balloon-visible]:after,[data-balloon][data-balloon-pos=right][data-balloon-visible]:before {
transform: translateY(-50%)
}

[data-balloon][data-balloon-length=small]:after {
white-space: normal;
width: 80px;
word-wrap: break-word
}

[data-balloon][data-balloon-length=medium]:after {
white-space: normal;
width: 150px;
word-wrap: break-word
}

[data-balloon][data-balloon-length=large]:after {
white-space: normal;
width: 260px;
word-wrap: break-word
}

[data-balloon][data-balloon-length=fit]:after {
white-space: normal;
width: 100%;
word-wrap: break-word
}

body {
height: auto;
overflow: auto
}

.not-found-container {
max-width: 300px;
margin: 60px auto 40px auto;
padding: 40px;
border-radius: 5px;
transform-origin: 0 0;
text-align: center
}

.not-found-container .logo-wrapper {
text-align: center
}

.not-found-container .title {
margin: 0;
margin-top: 15px
}

.not-found-container .logo {
width: 105px
}

.not-found-container .description {
font-size: 12px;
color: #9b9b9b;
margin-top: 5px
}

@media(max-width: 549px) {
.not-found-container .title {
font-size:1.2rem
}
}