/*! 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
}

.margin-top-0 {
    margin-top: 0
}

.margin-bottom-0 {
    margin-bottom: 0
}

.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 .account-blocked .state-process {
    margin-top: 10vh
}

#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.verified-pnl-app .error-section {
    margin-top: 60px
}

#app.verified-pnl-app .verified-date {
    margin-top: 4px;
    display: block;
    margin-bottom: 2px;
    font-size: 1.125rem
}

#app.verified-pnl-app .streaks .streak-label {
    margin-bottom: 5px;
    margin-top: 0
}

#app.verified-pnl-app .streaks .streak-date {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: .875rem
}

#app.verified-pnl-app .streaks h4 {
    margin-bottom: 0;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.6
}

#app.verified-pnl-app .streaks h4 span {
    font-size: 12px;
    margin-left: 5px
}

#app.verified-pnl-app .streaks .donut-chart {
    height: 73px
}

#app.verified-pnl-app .header .right-nav .user-nav {
    border: none;
    margin: 0
}

#app.verified-pnl-app .header .right-nav .user-nav a {
    margin: 0
}

#app.verified-pnl-app .pnl-date {
    margin-bottom: 0;
    padding-left: 7px
}

#app.verified-pnl-app a {
    color: #387ed1
}

#app.verified-pnl-app .cards hr {
    margin: 0;
    width: 60%;
    margin: auto
}

#app.verified-pnl-app .card {
    padding: 15px 0;
    border-top: 1px solid #eee
}

#app.verified-pnl-app .card .separator {
    color: #666
}

#app.verified-pnl-app .card .symbol {
    font-size: 16px
}

#app.verified-pnl-app .card.no-border {
    border: none!important
}

#app.verified-pnl-app .card .row {
    display: flex
}

#app.verified-pnl-app .card .row .columns {
    margin-bottom: 0!important
}

#app.verified-pnl-app .card .row .three {
    flex: 3
}

#app.verified-pnl-app .card .row .four {
    flex: 4
}

#app.verified-pnl-app .card .row .six {
    flex: 6
}

#app.verified-pnl-app .card .row .eight {
    flex: 8
}

#app.verified-pnl-app .card .row .nine {
    flex: 9
}

#app.verified-pnl-app .card .inline {
    display: inline-block;
    margin-right: 5px
}

#app.verified-pnl-app .card .inline.text-bold {
    color: #666
}

#app.verified-pnl-app .card .status-flag img {
    height: 12px;
    position: relative;
    top: 1px
}

#app.verified-pnl-app .card label {
    margin-right: 3px;
    color: #9b9b9b;
    display: inline-block;
    line-height: 1.1
}

#app.verified-pnl-app .card.last {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee
}

#app.verified-pnl-app .card .top {
    margin-bottom: 5px;
    display: flex
}

#app.verified-pnl-app .card .top .top-left {
    flex: 9
}

#app.verified-pnl-app .card .top .top-left .failure img {
    height: 14px;
    position: relative;
    top: 2px;
    margin-left: 5px
}

#app.verified-pnl-app .card .top .top-right {
    flex: 6;
    text-align: right
}

#app.verified-pnl-app .card .middle {
    margin-top: 5px;
    margin-bottom: 5px;
    display: flex
}

#app.verified-pnl-app .card .middle .middle-left {
    flex: 8
}

#app.verified-pnl-app .card .middle .middle-right {
    flex: 6;
    text-align: right
}

#app.verified-pnl-app .card .bottom {
    display: flex
}

#app.verified-pnl-app .card .bottom .bottom-left {
    flex: 6
}

#app.verified-pnl-app .card .bottom .bottom-right {
    flex: 6;
    text-align: right
}

#app.verified-pnl-app .section {
    margin-bottom: 40px
}

#app.verified-pnl-app .header .logo img {
    width: auto;
    height: 16px
}

#app.verified-pnl-app .pnl-profile {
    margin-top: 20px
}

#app.verified-pnl-app .pnl-profile .profile-value {
    display: flex;
    align-items: center;
    align-self: stretch;
    text-align: right;
    justify-content: flex-end
}

#app.verified-pnl-app text.month-name.active {
    color: #0059c1!important;
    fill: #0059c1!important
}

#app.verified-pnl-app text.month-name:hover {
    color: #0059c1;
    fill: #0059c1;
    cursor: pointer
}

#app.verified-pnl-app .pnl-profile .positive {
    background-image: url(https://console.zerodha.com/static/images/verified-pnl-green.png)
}

#app.verified-pnl-app .pnl-profile .negative {
    background-image: url(https://console.zerodha.com/static/images/verified-pnl-red.png)
}

#app.verified-pnl-app .pnl-profile .total-pnl {
    margin-top: 5px;
    margin-bottom: 5px;
    font-weight: 500
}

#app.verified-pnl-app .pnl-profile .total-pnl-percent {
    font-size: 16px
}

#app.verified-pnl-app .pnl-profile .total-pnl-percent span {
    font-size: 16px!important
}

#app.verified-pnl-app .pnl-profile .row .verified-profile-info {
    display: flex;
    align-items: center
}

#app.verified-pnl-app .pnl-profile .row .profile-avatar,#app.verified-pnl-app .pnl-profile .row .profile-name {
    display: inline-block;
    word-break: break-word
}

#app.verified-pnl-app .pnl-profile .row .profile-avatar {
    margin-right: 25px
}

#app.verified-pnl-app .pnl-profile .row .profile-name h2 {
    margin-top: 0;
    margin-bottom: 0;
    line-height: 1.6;
    font-weight: 500
}

#app.verified-pnl-app .pnl-profile .row .profile-name p {
    margin-bottom: 0;
    margin-top: 5px;
    line-height: 1.6
}

#app.verified-pnl-app .pnl-profile hr.more-margin {
    margin-top: 20px
}

#app.verified-pnl-app .pnl-profile .profile-value .margins .sub-details span.value,#app.verified-pnl-app .pnl-profile .profile-value .total-pnl,#app.verified-pnl-app .pnl-profile .profile-value .total-pnl-percent,#app.verified-pnl-app .pnl-profile .profile-value h2,#app.verified-pnl-app .pnl-profile .profile-value span.order-window,#app.verified-pnl-app .pnl-profile .profile-value span.text-small,.margins .sub-details #app.verified-pnl-app .pnl-profile .profile-value span.value {
    line-height: 1.6;
    margin: 0;
    display: block
}

#app.verified-pnl-app .segment-pnl-value {
    font-size: 1.5rem;
    font-weight: 500;
    margin-top: 5px
}

#app.verified-pnl-app .segment-pnl-percent {
    font-size: 12px
}

#app.verified-pnl-app .avatar {
    font-size: 30px!important;
    line-height: 100px!important;
    margin: auto;
    display: block
}

#app.verified-pnl-app .pos {
    color: #10b983
}

#app.verified-pnl-app .neg {
    color: #f35631
}

#app.verified-pnl-app .hide {
    display: none!important
}

#app.verified-pnl-app .pnl-table .percharges-breakdown:hover {
    cursor: pointer
}

#app.verified-pnl-app .pnl-table .percharges-breakdown .percharges-breakdown-img {
    height: 12px
}

#app.verified-pnl-app .pnl-table:not(.pnl-breakdown-table) div:not(.new-tags) {
    display: inline
}

#app.verified-pnl-app .pnl-table:not(.pnl-breakdown-table) tbody tr:hover {
    background: #fafafb
}

#app.verified-pnl-app .pnl-table tbody tr td:first-child .arrow,#app.verified-pnl-app .pnl-table thead tr td:first-child .arrow {
    float: right!important
}

#app.verified-pnl-app .pnl-table tbody tr .symbol-class,#app.verified-pnl-app .pnl-table thead tr .symbol-class {
    position: relative
}

#app.verified-pnl-app .pnl-table .context-menu {
    visibility: hidden;
    position: absolute;
    right: 10px;
    top: 11px
}

#app.verified-pnl-app .pnl-table tbody tr:hover .context-menu {
    visibility: visible
}

#app.verified-pnl-app .pnl-table thead tr {
    border-top: 1px solid #f1f1f1
}

#app.verified-pnl-app .pnl-table thead tr .sorted {
    background: #fafafb
}

#app.verified-pnl-app .pnl-table thead td {
    cursor: pointer;
    color: #9b9b9b
}

#app.verified-pnl-app .pnl-table thead td:hover {
    background: #fafafb
}

#app.verified-pnl-app .pnl-table thead td:hover .arrow {
    opacity: 1
}

#app.verified-pnl-app .pnl-table thead .arrow-show {
    opacity: 1;
    background: #fafafb
}

#app.verified-pnl-app .pnl-table tbody tr:hover .popup {
    display: block!important
}

#app.verified-pnl-app .pnl-table tbody tr:hover .popup .popuptext {
    visibility: hidden
}

#app.verified-pnl-app .pnl-table tr {
    border-bottom: 1px solid #f1f1f1
}

#app.verified-pnl-app .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
}

#app.verified-pnl-app .pnl-table .arrow.asc {
    transform: rotate(-135deg);
    -webkit-transform: rotate(-135deg)
}

#app.verified-pnl-app .pnl-table .arrow.desc {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}

#app.verified-pnl-app .pnl-table .neg span,#app.verified-pnl-app .pnl-table .pos span {
    min-width: 50px;
    display: inline-block
}

#app.verified-pnl-app .table-container {
    width: 100%;
    max-width: 100%;
    overflow-x: auto
}

#app.verified-pnl-app .heatmap-count {
    text-align: center;
    min-height: 25px;
    margin-left: 15px;
    margin-top: 20px;
    padding-bottom: 28px;
    border-bottom: 1px solid #e3e3e3
}

#app.verified-pnl-app .heatmap-count .heatmap-date {
    display: inline-block;
    margin-right: 20px;
    border-right: 1px solid #c1c1c1;
    padding-right: 20px;
    color: #0059c1
}

#app.verified-pnl-app .heatmap-count .heatmap-date-label {
    display: inline-block;
    margin-right: 20px
}

#app.verified-pnl-app .heatmap-count input {
    min-height: 0!important;
    position: relative;
    top: 3px
}

#app.verified-pnl-app .heatmap-count p {
    margin-top: 0;
    margin-bottom: 0
}

#app.verified-pnl-app .heatmap-count .heatmap-segment {
    margin-right: 20px;
    display: inline-block
}

#app.verified-pnl-app .heatmap-count .heatmap-segment:hover {
    cursor: pointer;
    opacity: .6
}

#app.verified-pnl-app .heatmap-count .heatmap-segment p {
    display: inline-block;
    margin-right: 5px
}

#app.verified-pnl-app .heatmap-count .loader-segment {
    border: none
}

#app.verified-pnl-app .toggle-mobile-menu {
    opacity: 0;
    cursor: not-allowed
}

#app.verified-pnl-app .positive-sign {
    display: inline!important
}

#app.verified-pnl-app .tab {
    padding: 15px;
    display: inline-block;
    position: relative;
    top: 1px;
    width: 23%;
    box-sizing: border-box;
    border: 1px solid #eee;
    border-radius: 4px
}

#app.verified-pnl-app .tab:not(:last-child) {
    margin-right: 2%
}

#app.verified-pnl-app .tab:not(.no-breakdown):hover {
    cursor: pointer;
    opacity: .8
}

#app.verified-pnl-app .tab.active {
    border-bottom: 6px solid #0059c1!important;
    box-shadow: 0 1px 5px rgba(0,0,0,.1)
}

#app.verified-pnl-app .tab div {
    margin-top: 5px
}

#app.verified-pnl-app .tab span {
    line-height: 1.6
}

#app.verified-pnl-app .tabs {
    font-size: 1.25rem;
    margin-bottom: 50px
}

@media only screen and (min-width: 550px) {
    #app.verified-pnl-app .streaks .six.border-right {
        margin-left:0;
        padding-right: 2%;
        background-image: url(https://console.zerodha.com/static/images/line.svg);
        background-position: 100%;
        background-repeat: no-repeat;
        background-size: 1px 50px
    }

    #app.verified-pnl-app .streaks .six.border-right:not(:first-child) {
        padding-left: 2%
    }
}

@media only screen and (min-width: 801px) {
    #app.verified-pnl-app .row.v-align {
        display:flex;
        align-items: center
    }

    #app.verified-pnl-app .pnl-profile .negative,#app.verified-pnl-app .pnl-profile .positive {
        background-position-x: 130px;
        background-repeat: no-repeat
    }
}

@media only screen and (max-width: 1100px) {
    #app.verified-pnl-app .heatmap-section {
        display:block
    }
}

@media only screen and (max-width: 800px) {
    #app.verified-pnl-app .heatmap-count {
        text-align:left!important;
        margin-left: 0!important
    }

    #app.verified-pnl-app .heatmap-date {
        border: none!important
    }

    #app.verified-pnl-app .heatmap-date,#app.verified-pnl-app .heatmap-date-label,#app.verified-pnl-app .heatmap-segment {
        display: block!important
    }

    #app.verified-pnl-app .heatmap-container {
        max-width: 100%;
        overflow: auto;
        padding-top: 20px
    }

    #app.verified-pnl-app .section.streaks {
        margin-bottom: 20px!important
    }

    #app.verified-pnl-app .verified-profile-info {
        margin-bottom: 65px
    }

    #app.verified-pnl-app .verified-date {
        margin-top: 5px!important;
        margin-bottom: 3px!important
    }

    #app.verified-pnl-app .profile-value {
        text-align: left!important;
        justify-content: flex-start!important
    }

    #app.verified-pnl-app .profile-value.three {
        height: 105px;
        align-items: end
    }

    #app.verified-pnl-app .streak-card .v-align .four.text-center {
        order: 2
    }

    #app.verified-pnl-app .header .right-nav {
        margin-right: 20px
    }

    #app.verified-pnl-app .header .right-nav img {
        height: 20px
    }

    #app.verified-pnl-app .header .logo img {
        height: 12px;
        width: auto!important
    }

    #app.verified-pnl-app .pnl-profile .row .nine {
        margin-bottom: 20px
    }

    #app.verified-pnl-app .tab {
        width: 100%;
        margin-bottom: 20px
    }

    #app.verified-pnl-app .profile-name .profile-link {
        max-width: 100%;
        box-sizing: border-box;
        word-break: break-all
    }

    #app.verified-pnl-app .avatar {
        line-height: 75px!important
    }
}

#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 h1.big-label {
    color: #9b9b9b
}

#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 .breakdown-head-mobile .top {
    display: flex;
    align-items: center;
    flex-grow: 1
}

#app .modal-container .breakdown-head-mobile .top .top-right {
    text-align: left!important
}

#app .modal-container .breakdown-cards {
    border: 1px solid #e1e1e1;
    border-radius: 8px;
    padding: 0!important;
    margin-bottom: 25px
}

#app .modal-container .breakdown-cards h4 {
    margin: 12px 0
}

#app .modal-container .breakdown-cards .bottom,#app .modal-container .breakdown-cards .middle,#app .modal-container .breakdown-cards .top,#app .modal-container .breakdown-cards h4 {
    padding: 3px 15px
}

#app .modal-container .breakdown-cards .bottom,#app .modal-container .breakdown-cards .middle,#app .modal-container .breakdown-cards .top {
    margin-bottom: 5px
}

#app .modal-container .breakdown-cards .xirr-value .neg,#app .modal-container .breakdown-cards .xirr-value .pos {
    font-weight: 600
}

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

#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(https://console.zerodha.com/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(https://console.zerodha.com/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(https://console.zerodha.com/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:not(.su-input-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 textarea,.inputcontainer textarea {
        font-size: 16px!important;
        color: #666;
        padding: 15px 20px!important;
        line-height: 1.5rem
    }

    .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(https://console.zerodha.com/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 a {
        position: relative;
        top: 7px
    }

    .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!important;
        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 .loader {
    margin-left: 5px
}

.dashboard .fullscreen-button {
    margin-left: 12px
}

.dashboard #eq_donut_container .tooltip-label:after {
    left: 440%!important
}

.dashboard #static_values,.dashboard #tooltip_values {
    color: #666
}

.dashboard .acvalue-chart-loader {
    height: 400px;
    display: flex;
    align-items: center
}

.dashboard .acvalue-chart-loader .su-loader {
    margin: auto
}

.dashboard .topbar-dropdown {
    padding-bottom: 15px
}

.dashboard .topbar-dropdown .sub-menu {
    padding-left: 18px
}

.dashboard .topbar-dropdown .sub-menu label {
    margin-bottom: 5px!important
}

.dashboard .topbar-dropdown .sub-menu label:first-child {
    margin-top: 5px
}

.dashboard .topbar-dropdown .sub-menu input {
    position: relative;
    top: 2px;
    margin-right: 3px
}

.dashboard .topbar-dropdown .right-dropdowns {
    float: right;
    display: flex;
    max-width: calc(100% - 430px)
}

.dashboard .topbar-dropdown .right-dropdowns .chart-dropdown .topbar-dropdown-content .dropdown-section .dropdown-item {
    margin-top: 7px!important;
    margin-bottom: 5px!important
}

.dashboard .topbar-dropdown #info_static label,.dashboard .topbar-dropdown #info_tooltip label {
    text-transform: capitalize
}

.dashboard .topbar-dropdown .chart-link {
    display: inline-block;
    position: relative;
    top: 8px;
    right: 10px
}

.dashboard .topbar-dropdown .chart-link img {
    height: 18px
}

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

.dashboard .topbar-dropdown .chart-dropdown .topbar-button {
    border: none;
    background: #fff;
    height: 30px!important;
    line-height: 30px;
    padding: 0!important
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-button .icon {
    font-size: 12px;
    padding-left: 5px
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-button img {
    height: 18px;
    position: relative;
    top: 4px!important
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content {
    position: absolute;
    top: 33px;
    z-index: 5;
    background: #fff;
    padding: 10px 15px;
    border: 1px solid #eee;
    border-radius: 2px;
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
    box-shadow: 1px 6px 8px 0 rgba(0,0,0,.07);
    min-width: 150px
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section:not(:first-child) {
    margin-top: 12px;
    border-top: 1px solid #eee;
    padding-top: 10px;
    max-height: 60vh;
    overflow: auto
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .su-radio-group {
    display: flex;
    flex-direction: column
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section #curve_eqCurve {
    order: 2
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .sub-menu {
    order: 3
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section label.dropdown-label {
    font-size: 12px!important;
    color: #9b9b9b!important
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .dropdown-item {
    display: block
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .dropdown-item#curve_eqAcValue {
    margin-bottom: 10px
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .dropdown-item .su-radio-label:before {
    position: relative;
    top: -1px;
    margin-right: 8px
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .dropdown-item.checkbox-item {
    display: block;
    position: relative;
    padding-left: 23px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .dropdown-item.checkbox-item.disabled {
    color: #9b9b9b!important;
    cursor: not-allowed
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .dropdown-item.checkbox-item.disabled .checkmark {
    background: #9b9b9b!important
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .dropdown-item.checkbox-item input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .dropdown-item.checkbox-item .checkmark {
    position: absolute;
    top: 4px;
    left: 0;
    height: 11px;
    width: 11px;
    border-radius: 2px;
    border: 1px solid #ccc
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .dropdown-item.checkbox-item .container:hover input~.checkmark {
    background-color: #ccc
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .dropdown-item.checkbox-item input:checked~.checkmark {
    background-color: #0059c1;
    border-color: transparent
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .dropdown-item.checkbox-item .checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .dropdown-item.checkbox-item input:checked~.checkmark:after {
    display: block
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .dropdown-item.checkbox-item .checkmark:after {
    left: 3px;
    top: 0;
    width: 3px;
    height: 7px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg)
}

.dashboard .topbar-dropdown .chart-dropdown .topbar-dropdown-content .dropdown-section .dropdown-item:hover {
    cursor: pointer
}

.dashboard .topbar-dropdown .chart-dropdown.settings-dropdown .topbar-dropdown-content {
    right: 0;
    left: auto
}

.dashboard .topbar-dropdown .chart-dropdown.compare-dropdown {
    margin-left: 15px
}

.dashboard .topbar-dropdown .chart-dropdown.compare-dropdown input {
    position: relative;
    top: 1px;
    margin-right: 5px
}

.dashboard .topbar-dropdown .chart-dropdown.compare-dropdown button {
    width: 115px
}

.dashboard .topbar-dropdown .chart-dropdown.compare-dropdown button .su-loader {
    margin-right: 10px
}

.dashboard .topbar-dropdown .chart-dropdown.compare-dropdown button .su-loader .dot-spinner i {
    background-color: #9b9b9b!important
}

.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: #38ada9
}

.l2 {
    background: #f6b93b
}

.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 .timeline-section {
    height: 500px
}

.dashboard-section .timeline-section .su-loader {
    display: inline-block;
    margin: auto
}

.dashboard-section .equity-donut-section .account-overview-heading {
    font-size: 16px
}

.dashboard-section .equity-donut-section .chart-switch-container {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    border-bottom: 1px solid #eee;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 10px;
    padding-top: 18px
}

.dashboard-section .equity-donut-section .chart-switch-container .update-tags {
    margin-left: auto;
    font-size: 12px
}

.dashboard-section .equity-donut-section .chart-switch-container .update-tags .update-tag-date {
    color: #0059c1
}

.dashboard-section .equity-donut-section .chart-switch-container .update-tags img {
    width: 12px;
    position: relative;
    margin-right: 5px;
    top: 1px
}

.dashboard-section .equity-donut-section .eqSwitch {
    display: inline-block;
    color: #9b9b9b;
    padding-right: 12px;
    text-align: center;
    font-size: 1rem;
    letter-spacing: .3px;
    line-height: 1.1
}

.dashboard-section .equity-donut-section .eqSwitch.active {
    color: #0059c1
}

.dashboard-section .equity-donut-section .eqSwitch:hover {
    cursor: pointer;
    color: #0059c1
}

.dashboard-section .equity-donut-section .comSwitch {
    display: inline-block;
    color: #9b9b9b;
    border-left: 1px solid #eee;
    padding: 0 15px;
    text-align: center;
    font-size: 1rem;
    letter-spacing: .3px;
    line-height: 1.1;
    margin-left: 10px;
    padding-left: 20px
}

.dashboard-section .equity-donut-section .comSwitch.active {
    color: #0059c1
}

.dashboard-section .equity-donut-section .comSwitch:hover {
    cursor: pointer;
    color: #0059c1
}

.dashboard-section h1 {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 25px
}

.dashboard-section .row.custom-row .six {
    width: 50%
}

.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 .beta-tag {
    font-size: 12px;
    background: #ee8e4a;
    color: #fff;
    padding: 3px 5px;
    text-transform: uppercase;
    border-radius: 3px;
    margin-left: 5px;
    position: relative;
    top: -1px
}

.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
}

.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 .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
}

.salutation div,.welcome-text {
    display: inline-block
}

.welcome-text {
    margin-bottom: 90px
}

.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
}

.holdings-block,.positions-block {
    min-height: 200px
}

@media only screen and (min-width: 800px) {
    .dashboard .timeline-section {
        height:auto!important
    }

    .dashboard .row.custom-row {
        display: flex
    }

    .dashboard .topbar-button {
        font-size: 16px!important
    }

    .dashboard .console-banner {
        display: inline-block;
        float: right;
        margin-top: 5px
    }

    .dashboard .console-banner a {
        max-width: 100%;
        display: flex;
        align-items: center
    }

    .dashboard .console-banner a span {
        line-height: 1.4;
        font-size: 1.3rem;
        margin-left: 10px;
        color: #444;
        width: 175px
    }

    .dashboard .console-banner a img {
        height: 55px
    }

    .dashboard .console-banner:hover {
        opacity: .9;
        cursor: pointer
    }

    .dashboard .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 .dashboard-chart.eqCurve .right-dropdowns {
        float:none!important;
        max-width: 100%
    }

    .dashboard .dashboard-chart:not(.eqCurve) .right-dropdowns {
        position: relative;
        top: -4px
    }

    .dashboard .compare-dropdown {
        margin-left: 0!important
    }

    .dashboard .compare-dropdown .topbar-button {
        width: 90px!important;
        margin-right: 25px
    }

    .dashboard .compare-dropdown .topbar-button img {
        top: 3px
    }

    .dashboard .legend-container {
        width: 100%
    }

    .dashboard .legend-container .legend-payin-container {
        text-align: center
    }

    .dashboard .legend-container .legend {
        display: inline-block
    }

    .dashboard .console-banner {
        display: none
    }

    .dashboard .equity-donut-section {
        margin-bottom: 50px
    }

    .dashboard #eq_donut_container .six {
        width: 50%!important
    }

    .dashboard .timeline-section {
        width: 100%!important
    }

    .dashboard .topbar-button {
        font-size: 14px!important
    }

    .dashboard .topbar-dropdown .chart-dropdown .topbar-button img {
        top: 1px
    }

    .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: 30px
    }

    .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)
}

.eqCurve .legend {
    position: relative;
    top: 3px;
    display: inline-block
}

.legend-container {
    text-align: center;
    display: inline-block;
    margin-right: 10px
}

.legend-container .legend-payin-container {
    display: block;
    text-align: right
}

.legend-container .legend-payin-container .legend-payin-dot {
    width: 9px;
    height: 9px;
    display: inline-block;
    border-radius: 50%;
    margin-right: 5px
}

.legend-container .legend {
    margin-right: 15px;
    color: #666;
    font-size: 12px
}

.legend-container .legend .legend-colour {
    width: 20px;
    height: 3px;
    display: inline-block;
    position: relative;
    bottom: 3px;
    margin-right: 5px;
    border-radius: 12px
}

#tijoritimeline_iframe {
    width: 100%;
    height: 100%;
    min-height: 500px;
    border: none
}

#tijoritimeline_iframe ::-webkit-scrollbar {
    width: 3px
}

#tijoritimeline_iframe ::-webkit-scrollbar-thumb:hover {
    background: #555;
    width: 3px
}

.acvalue-chart-container {
    max-width: 100%
}

.acvalue-chart-container button {
    background: transparent!important
}

.acvalue-chart-container {
    padding-bottom: 20px;
    background: #fff;
    box-sizing: border-box
}

#comAcValueChart .chart__line,#comAcValueChart .chart__payin--focus,#comAcValueChart .chart__payout--focus,#comAcValueChart .x.axis {
    -webkit-clip-path: url(#clipCom);
    clip-path: url(#clipCom)
}

#comAcValueChart,#eqAcValueChart {
    position: relative
}

#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 .transfer-confirm-modal ul {
    padding-left: 20px
}

.page-container.holdings .transfer-confirm-modal ul li {
    margin-bottom: 20px
}

.page-container.holdings .no-discrepancies-info {
    margin-top: 20px
}

.page-container.holdings .pledge-holdings-link img {
    height: 12px
}

.page-container.holdings .pledge-holdings-link,.page-container.holdings .transfer-holdings-link {
    margin-right: 20px
}

.page-container.holdings .download-holdings-link,.page-container.holdings .pledge-holdings-link,.page-container.holdings .transfer-holdings-link {
    display: inline-block
}

.page-container.holdings .secondary-banner {
    box-shadow: 0 1px 5px rgba(0,0,0,.1);
    display: flex;
    align-items: center;
    margin-top: 40px;
    margin-bottom: 40px;
    border-radius: 3px
}

.page-container.holdings .secondary-banner .icon-container {
    display: inline-block;
    width: 45px;
    height: 45px;
    text-align: center;
    background: #f2f8ff;
    margin-right: 15px
}

.page-container.holdings .secondary-banner .icon-container img {
    position: relative;
    top: 12px
}

.page-container.holdings .transfer-type {
    margin-top: 0!important;
    margin-left: 4px;
    margin-right: 4px
}

.page-container.holdings .transfer-history h3 img {
    height: 18px;
    position: relative;
    top: 3px;
    margin-right: 5px
}

.page-container.holdings .transfer-history h3:hover {
    cursor: pointer
}

.page-container.holdings .transfer-history table thead th {
    background-color: #fafafb;
    font-size: 12px;
    font-weight: 400
}

.page-container.holdings .transfer-history table thead th:first-child {
    text-align: left!important
}

.page-container.holdings .transfer-history table thead tr {
    border-top: 1px solid #f1f1f1
}

.page-container.holdings .transfer-history table tr {
    border-bottom: 1px solid #f1f1f1
}

.page-container.holdings .transfer-history .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.holdings .transfer-history .status a {
    position: relative;
    top: 1px
}

.page-container.holdings .transfer-history .status.success {
    color: #0b8043;
    background: rgba(11,128,67,.1)
}

.page-container.holdings .transfer-history .status.pending {
    background: rgba(255,202,85,.15);
    color: #d89602
}

.page-container.holdings .transfer-history .status.failure {
    background: rgba(255,85,85,.15);
    color: #f6461a
}

.page-container.holdings .transfer-history .status.overdue {
    color: #f09300;
    background: rgba(240,147,0,.1)
}

.page-container.holdings .transfer-history .status.accepted,.page-container.holdings .transfer-history .status.created {
    background: rgba(255,202,85,.15);
    color: #f8ab00
}

.page-container.holdings .transfer-history .status.canceled {
    background: hsla(0,0%,80%,.15);
    color: #9b9b9b
}

.page-container.holdings .transfer-history .status.approved,.page-container.holdings .transfer-history .status.processing,.page-container.holdings .transfer-history .status.transferred {
    background: rgba(65,132,243,.15);
    color: #4184f3
}

.page-container.holdings .transfer-history .status.failed {
    background: rgba(255,85,85,.15);
    color: #f6461a
}

.page-container.holdings .head-section {
    margin-bottom: 40px
}

.page-container.holdings .close-mobile-filter {
    display: none
}

.page-container.holdings .search-helper .reset-filters {
    float: right
}

.page-container.holdings .total-collateral {
    text-align: right!important
}

.page-container.holdings .external-trade-value {
    margin-bottom: 0;
    margin-top: 5px;
    margin-left: 5px;
    font-style: italic
}

.page-container.holdings .holdings-profit-percent {
    font-size: .75rem
}

.page-container.holdings #txn_type {
    display: inline-block;
    width: 175px;
    margin-left: 5px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 35px;
    height: 35px
}

.page-container.holdings .pledge-button-container {
    margin-left: auto
}

.page-container.holdings .pledge-button-container button {
    height: 35px!important;
    line-height: 20px!important;
    margin-right: 0;
    margin-bottom: 5px
}

.page-container.holdings .pledge-type-tag {
    min-width: 60px;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 2px;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    background: rgba(65,132,243,.15);
    color: #4184f3
}

.page-container.holdings .pledge-type-tag.pledge {
    color: #ff5722;
    background: rgba(255,87,34,.15)
}

.page-container.holdings .failed-pledge tbody {
    color: #df514c
}

.page-container.holdings .cancel-unpledge-link {
    font-size: 14px;
    margin-left: 10px
}

.page-container.holdings .pledge-status-tag {
    min-width: 75px;
    padding: 3px 10px;
    font-size: 12px;
    border-radius: 2px;
    display: inline-block;
    text-align: center;
    text-transform: uppercase;
    background: rgba(65,132,243,.15);
    color: #4184f3
}

.page-container.holdings .pledge-status-tag.success {
    color: #0b8043;
    background: rgba(11,128,67,.1)
}

.page-container.holdings .pledge-status-tag.pending {
    background: rgba(255,202,85,.15);
    color: #d89602
}

.page-container.holdings .pledge-status-tag.failure {
    background: rgba(255,85,85,.15);
    color: #f6461a
}

.page-container.holdings .pledge-status-tag.overdue {
    color: #f09300;
    background: rgba(240,147,0,.1)
}

.page-container.holdings .mobile-pledge-link {
    margin-bottom: 5px
}

.page-container.holdings .mobile-pledge-link img {
    height: 14px;
    position: relative;
    top: 1px;
    margin-right: 2px
}

.page-container.holdings .unpledge-modal input {
    width: 200px
}

.page-container.holdings .instant-unpledge-cards .symbol,.page-container.holdings .pledge-history-cards .symbol {
    margin-left: 0!important
}

.page-container.holdings .xirr-mobile a.xirr-help {
    font-size: 14px;
    position: relative;
    bottom: 2px
}

.page-container.holdings .breakdown-cards .xirr-value .su-checkbox-group {
    display: inline-block;
    margin-left: 10px
}

.page-container.holdings .breakdown-cards .xirr-value .su-checkbox-group .su-checkbox-value {
    margin-left: 3px
}

.page-container.holdings .xirr-show .su-checkbox-group {
    display: inline-block;
    margin-left: 5px
}

.page-container.holdings .xirr-show .su-checkbox-group label {
    font-size: 12px!important;
    line-height: 16px!important
}

.page-container.holdings .xirr-show .su-checkbox-group label .su-checkbox-box {
    width: 12px;
    height: 12px;
    min-width: 12px;
    top: 1px
}

.page-container.holdings .xirr-show .su-checkbox-group label .su-checkbox-box .su-checkbox-tick {
    width: 6px
}

.page-container.holdings .xirr-show .su-checkbox-group label .su-checkbox-value {
    margin-left: 1px;
    color: #666
}

.page-container.holdings .xirr-show .su-checkbox-group .su-checkbox:checked+.su-checkbox-label .su-checkbox-tick {
    left: 14px;
    top: 2px
}

.page-container.holdings .pledge-link {
    font-size: 12px;
    float: right;
    padding-right: 10px;
    position: relative;
    top: 4px
}

.page-container.holdings .pledge-link img {
    height: 14px;
    position: relative;
    top: 2px;
    margin-right: 3px
}

.page-container.holdings .pledge-head {
    display: flex;
    align-items: center;
    background: #fafafb;
    border: 1px solid #f1f1f1;
    border-bottom: none;
    border-left: none;
    border-right: none;
    padding: 12px 16px
}

.page-container.holdings .pledge-head p {
    margin: 0
}

.page-container.holdings .pledge-head p .total-collateral label {
    margin-left: 25px
}

.page-container.holdings .pledge-head h3 {
    margin: 0
}

.page-container.holdings .pledge-head button {
    margin-left: auto
}

.page-container.holdings .pledge-head label {
    display: inline-block;
    margin-right: 10px;
    font-size: 1.25rem!important;
    color: #444!important
}

.page-container.holdings .pledge-head .pledge-head-values {
    font-size: 1.25rem
}

.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 .xirr-container a.xirr-link {
    text-decoration: underline!important
}

.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 .symbol .secondary-holding-icon {
    margin-left: 5px
}

.page-container.holdings .symbol .secondary-holding-icon[data-balloon][data-balloon-pos=up]:after {
    left: calc(50% + 50px)
}

.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 .tijori-wrapper .modal-container {
    width: 630px;
    padding: 0 20px!important
}

.page-container.holdings .tijori-wrapper .modal-container .modal-body {
    padding: 30px 0;
    margin: 0
}

.page-container.holdings .tijori-wrapper .modal-container .modal-body .iframe-container {
    height: 550px;
    max-height: 80vh;
    overflow: hidden
}

.page-container.holdings .tijori-wrapper .modal-container .modal-body .iframe-container .loader-container {
    position: relative;
    top: 50%;
    left: 45%;
    display: inline-block
}

.page-container.holdings .tijori-wrapper .modal-container .modal-body .iframe-container iframe {
    height: 550px;
    max-height: 80vh
}

.page-container.holdings .tijori-wrapper .modal-container .modal-body .iframe-container ::-webkit-scrollbar {
    width: 3px
}

.page-container.holdings .tijori-wrapper .modal-container .modal-body .iframe-container ::-webkit-scrollbar-track {
    background: #fff
}

.page-container.holdings .tijori-wrapper .modal-container .modal-body .iframe-container ::-webkit-scrollbar-thumb {
    background: #e0e3ec
}

.page-container.holdings .tijori-wrapper .modal-container .modal-body .iframe-container ::-webkit-scrollbar-thumb:hover {
    background: #555;
    width: 3px
}

.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 .download-holdings-link,.page-container.holdings .section .pledge-holdings-link,.page-container.holdings .section .transfer-holdings-link {
        display:block!important;
        margin-bottom: 5px
    }

    .page-container.holdings .section .pledge-holdings-link img {
        margin-right: 6px
    }

    .page-container.holdings .section .row-check label {
        display: flex
    }

    .page-container.holdings .section .row-check label input {
        margin-right: 5px
    }

    .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 {
        max-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;
        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 .portfolio-xirr-link {
        position:relative;
        top: 15px
    }

    .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;
        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 .pledge-cards .pledge-head {
    position: fixed;
    top: 60px;
    left: 0;
    right: 0;
    padding: 5px 15px 5px 15px;
    background: #fff;
    z-index: 2;
    border-bottom: 1px solid #e1e1e1;
    box-shadow: 0 1px 6px 0 rgba(0,0,0,.1)
}

.page-container.holdings .section .pledge-cards button {
    padding-top: 7px!important;
    padding-bottom: 7px!important
}

.page-container.holdings .section .pledge-card .top {
    align-items: center
}

.page-container.holdings .section .pledge-card .top .top-left {
    flex: 6!important
}

.page-container.holdings .section .pledge-card .top .row-check,.page-container.holdings .section .pledge-card .top .symbol {
    display: inline-block;
    color: #444;
    margin-left: 5px
}

.page-container.holdings .section .pledge-card .pledge-qty {
    position: relative
}

.page-container.holdings .section .pledge-card .pledge-qty .su-input-group,.page-container.holdings .section .pledge-card .pledge-qty .total-qty {
    display: inline-block
}

.page-container.holdings .section .pledge-card .pledge-qty .su-input-group {
    width: 175px;
    margin-top: 0
}

.page-container.holdings .section .pledge-card .pledge-qty .su-input-group input {
    padding-right: 75px;
    text-align: right;
    font-size: 14px;
    line-height: 20px
}

.page-container.holdings .section .pledge-card .pledge-qty .total-qty {
    position: absolute;
    display: inline;
    right: 1px;
    line-height: 39px;
    top: 1px;
    width: 64px;
    text-align: left;
    background: #f3f3f3;
    color: #9b9b9b;
    padding-left: 6px;
    height: 40px
}

.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 .section .holdings-table.pledge-table.pledge-breakdown-table th,.page-container.holdings .section .holdings-table.pledge-table th {
    background: #fafafb
}

.page-container.holdings .section .holdings-table.pledge-table thead tr th:first-child {
    min-width: 20px
}

.page-container.holdings .section .holdings-table.pledge-table thead tr th:nth-child(2) {
    text-align: left
}

.page-container.holdings .section .holdings-table.pledge-table thead tr th:nth-child(2) .arrow {
    float: right!important
}

.page-container.holdings .section .holdings-table.pledge-table tbody tr:hover {
    background: none
}

.page-container.holdings .section .holdings-table.pledge-table tbody tr td input {
    text-align: right
}

.page-container.holdings .section .holdings-table.pledge-table tbody tr td .su-input-group {
    max-width: 130px;
    margin-left: auto;
    margin-top: 5px;
    margin-bottom: 5px
}

.page-container.holdings .section .holdings-table.pledge-table tbody tr td.pledge-qty {
    max-width: 150px
}

.page-container.holdings .section .holdings-table.pledge-table tbody tr td:first-child label {
    position: relative;
    left: 5px;
    top: 3px
}

.page-container.holdings .section .holdings-table.pledge-table tbody tr td:first-child label input {
    width: 16px;
    height: 16px
}

.page-container.holdings .section .holdings-table.pledge-table tbody tr td:nth-child(2) {
    max-width: 170px
}

.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-dividend tbody tr:last-child td {
    padding: 10px 10px 10px 10px!important
}

.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) {
    .secondary-banner {
        margin-top:0!important
    }

    .secondary-banner .icon-container {
        height: 60px!important;
        width: 60px!important;
        margin-right: 15px!important
    }

    .secondary-banner .icon-container img {
        top: 20px!important
    }

    .tagger .filter-box {
        display: inline-block;
        width: calc(100% - 90px)
    }

    .tagger .tagger-button {
        display: inline-block;
        width: 80px;
        margin-left: 5px
    }

    .tagger .tagger-button button {
        padding-top: 11px!important;
        padding-bottom: 11px!important
    }

    .action-tabs {
        margin-top: 50px;
        display: flex
    }

    .action-tabs .tab {
        flex-direction: column;
        flex-grow: 1;
        flex-basis: 0;
        min-width: auto!important
    }

    .pledge-head {
        padding: 8px 15px 8px 15px
    }

    .pledge-head h3 {
        margin: 2px 0
    }

    .portfolio-xirr-link {
        font-size: 12px
    }

    .table-section.pledge-table-section {
        margin-top: 25px
    }

    .pledge-card .su-input-group .su-input-label {
        font-size: 12px!important
    }

    .tijori-wrapper .modal-container {
        overflow: hidden
    }

    .tijori-wrapper .iframe-container {
        height: 100vh!important;
        max-height: 100vh!important;
        overflow: hidden
    }

    .tijori-wrapper .iframe-container .loader-container {
        position: relative;
        top: 50%;
        left: 45%;
        display: inline-block
    }

    .tijori-wrapper .iframe-container iframe {
        height: 100vh;
        max-height: 100vh
    }

    .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) {
    .cancel-unpledge-link {
        display:block;
        margin-left: 0!important;
        font-size: 12px!important
    }

    .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.mtf .card .top-left {
    flex: 24!important
}

.page-container.positions.mtf .mtf-convert-modal .modal-container {
    max-width: 550px
}

.page-container.positions.mtf .mtf-convert-modal .modal-container input {
    width: 100px;
    text-align: right
}

.page-container.positions.mtf .recent-header .recent-icon {
    position: relative;
    top: 1px;
    height: 16px;
    margin-right: 5px
}

.page-container.positions.mtf .recent-header:hover {
    cursor: pointer
}

.page-container.positions.mtf .grey-back-mobile {
    height: 145px!important
}

.page-container.positions.mtf .pull-up-section {
    top: -125px
}

.page-container.positions.mtf .positions-summary {
    display: flex;
    justify-content: space-around;
    max-width: none!important;
    padding-left: 20px!important
}

.page-container.positions.mtf .positions-summary .positions-summary-obj {
    display: inline-block
}

.page-container.positions.mtf .positions-summary .positions-summary-obj h1 {
    display: inline
}

.page-container.positions.mtf .positions-summary .positions-summary-obj .holdings-profit-percent {
    font-size: 12px
}

.page-container.positions.mtf .positions-summary .positions-summary-obj .holdings-profit-percent .icon {
    position: relative;
    top: 3px;
    left: 3px
}

.page-container.positions.mtf .positions-summary.mobile-agg {
    display: block!important;
    padding: 0!important;
    top: -140px!important
}

.page-container.positions.mtf .positions-summary.mobile-agg .row {
    padding: 7px 0!important
}

.page-container.positions.mtf .positions-summary.mobile-agg .row:nth-child(odd) {
    background: #fafafb
}

.page-container.positions.mtf .positions-summary.mobile-agg .row p {
    margin: 0;
    padding-right: 20px
}

.page-container.positions.mtf .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.positions.mtf .status a {
    position: relative;
    top: 1px
}

.page-container.positions.mtf .status.pending,.page-container.positions.mtf .status.processing {
    background: rgba(255,202,85,.15);
    color: #f8ab00
}

.page-container.positions.mtf .status.cancelled {
    background: hsla(0,0%,80%,.15);
    color: #9b9b9b
}

.page-container.positions.mtf .status.processed {
    background: rgba(65,132,243,.15);
    color: #4184f3
}

.page-container.positions.mtf .status.failed {
    background: rgba(255,85,85,.15);
    color: #f6461a
}

.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: 110px!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: 170px;
    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 {
        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 .instant-help-text {
    margin: 0;
    line-height: 20px
}

.page-container.funds-page .instant-payout-flag {
    color: #fff;
    background: #4caf50;
    font-size: 9px;
    font-weight: 500;
    text-transform: uppercase;
    padding: 4px 6px;
    border-radius: 3px;
    letter-spacing: .5px;
    position: relative;
    top: -1px;
    margin-left: 5px
}

.page-container.funds-page .payout-type {
    margin-top: 20px
}

.page-container.funds-page .payout-type .su-radio-wrap {
    margin-bottom: 0
}

.page-container.funds-page .payout-type .su-radio-wrap:first-child {
    margin-right: 20px
}

.page-container.funds-page .payout-type .su-radio-wrap label:before {
    position: relative;
    top: 0
}

.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: 8px;
    margin-bottom: 0
}

.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: 4px
}

.page-container.funds-page .section .funds-confirm .modal-container h2.withdrawal-info {
    margin-top: 20px
}

.page-container.funds-page .section .funds-confirm .modal-container h2.withdrawal-bank-details {
    margin-top: 4px
}

.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: 210px
}

.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,.page-container.funds-page .section .history-table .processing-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.interest-statement .state-process-container {
    margin-top: 50px
}

.page-container.ledger.interest-statement .mx-shortcuts-wrapper .mx-shortcuts:nth-child(2):after,.page-container.ledger.interest-statement .mx-shortcuts-wrapper .mx-shortcuts:nth-child(3),.page-container.ledger.interest-statement .mx-shortcuts-wrapper .mx-shortcuts:nth-child(4) {
    display: none
}

.page-container.ledger.interest-statement .interest-value {
    display: block
}

.page-container.ledger.interest-statement td .interest-breakdown {
    display: inline-block
}

.page-container.ledger.interest-statement td .interest-breakdown label {
    font-size: .875rem!important
}

.page-container.ledger.interest-statement td .interest-breakdown:nth-last-child(3) {
    padding-bottom: 7px;
    margin-bottom: 7px;
    border-bottom: 1px solid #e1e1e1
}

.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 .interest-total-component {
    display: inline-block
}

.page-container.ledger .section .interest-total .interest-total-component:last-child {
    margin-left: 30px
}

.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) {
    #app .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 .pnl-charges-breakdown.short-modal .modal-container {
    width: 550px;
    max-width: 100%;
    overflow: auto
}

.page-container.pnl .pnl-charges-breakdown.short-modal .modal-container tbody tr:not(.head-row) {
    border-bottom: 1px solid #eee
}

.page-container.pnl .pnl-charges-breakdown.short-modal .modal-container tbody tr.head-row td {
    font-weight: 500
}

.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 .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 .stocks-list {
    margin-top: 40px
}

.page-container.taxpnl .stocks-list p {
    display: inline-block;
    width: 48%;
    margin-right: 2%!important;
    margin-bottom: 15px!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-download-links {
    margin-top: 20px
}

.page-container.taxpnl .taxpnl-download-links a {
    display: inline-block
}

.page-container.taxpnl .taxpnl-download-links a:last-child {
    margin-left: 30px
}

.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 .stocks-list {
        margin-top:20px
    }

    .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 .modal-footer-buttons {
    text-align: center
}

.page-container.profile-content .section .modal-footer-buttons button {
    min-width: 120px
}

.page-container.profile-content .section .modal-footer-buttons button:first-child {
    margin-right: 15px
}

.page-container.profile-content .section .secondary-modal {
    max-height: 100vh
}

.page-container.profile-content .section .secondary-modal .modalbody {
    max-height: 65vh;
    overflow: auto
}

.page-container.profile-content .section .secondary-modal .secondary-consent-footer {
    padding-top: 25px;
    border-top: 1px solid #e1e1e1
}

.page-container.profile-content .section .secondary-modal .secondary-address span {
    display: block
}

.page-container.profile-content .section .secondary-modal .secondary-details,.page-container.profile-content .section .secondary-modal .secondary-details label {
    font-size: 12px!important
}

.page-container.profile-content .section .secondary-modal .secondary-details p {
    margin-bottom: 10px
}

.page-container.profile-content .section .secondary-modal .nominee-pan {
    display: inline-block
}

.page-container.profile-content .section .secondary-modal .nominee-pan .su-input-group {
    padding-bottom: 20px;
    margin-top: 5px
}

.page-container.profile-content .section .secondary-modal .nominee-pan .su-input-group .su-message {
    position: absolute
}

.page-container.profile-content .section .secondary-modal .nominee-name {
    display: inline-block;
    margin-right: 20px
}

.page-container.profile-content .section .upfront-amc-modal #upfront_amc_period {
    display: inline-block;
    width: 100px;
    margin-left: 10px
}

.page-container.profile-content .section .bank-3in1-modal {
    max-height: 90vh;
    overflow: auto
}

.page-container.profile-content .section .bank-3in1-modal ul {
    padding-left: 15px
}

.page-container.profile-content .section .enable-3in1 {
    font-size: 12px;
    position: relative;
    top: -20px
}

.page-container.profile-content .section .bank-account-number p {
    display: inline-block
}

.page-container.profile-content .section .bank-account-number a {
    display: inline-block;
    position: relative;
    top: 5px;
    left: 10px
}

.page-container.profile-content .section .mtf-popup a.btn {
    display: inline-block;
    font-size: 13px;
    height: 38px;
    line-height: 1.5;
    box-sizing: border-box
}

.page-container.profile-content .section .mtf-popup hr {
    margin-bottom: 20px
}

.page-container.profile-content .section .inside-kite {
    min-height: 100vh!important;
    max-height: none!important;
    overflow-y: auto!important;
    padding-bottom: 40px!important
}

.page-container.profile-content .section .modal-container.kite-mtf-success {
    height: 100vh!important
}

.page-container.profile-content .section .cpcode-confirmation {
    width: 700px
}

.page-container.profile-content .section .cp-code .su-checkbox-value {
    border: none
}

.page-container.profile-content .section .secondary-demat-container a:hover {
    text-decoration: none!important
}

.page-container.profile-content .section .demat-tabs {
    margin-bottom: 25px
}

.page-container.profile-content .section .demat-tabs .tab {
    padding: 10px;
    width: 125px
}

.page-container.profile-content .section .mtf-checkbox-container .su-checkbox-value {
    border: none!important
}

.page-container.profile-content .section .mtf-form-container {
    margin-top: 20px
}

.page-container.profile-content .section .mtf-form-container ul {
    padding-left: 15px;
    margin-bottom: 20px
}

.page-container.profile-content .section .mtf-final .mtf-success img {
    height: 40px
}

.page-container.profile-content .section .mtf-final .mtf-failure img {
    height: 100px
}

.page-container.profile-content .section .pending-ddpi {
    margin-top: 30px
}

.page-container.profile-content .section .pending-ddpi img {
    width: 15px;
    position: relative;
    top: 2px;
    margin-right: 5px
}

.page-container.profile-content .section .segment-tabs {
    font-size: 1.25rem;
    border-bottom: 1px solid #eee;
    margin-bottom: 50px
}

.page-container.profile-content .section .tab {
    padding: 15px 10px;
    display: inline-block;
    border-bottom: 1px solid #eee;
    position: relative;
    top: 1px;
    cursor: pointer;
    width: 180px;
    text-align: center
}

.page-container.profile-content .section .tab.active {
    border-bottom: 2px solid #0059c1
}

.page-container.profile-content .section .standalone-label {
    display: block;
    margin-bottom: 7px;
    font-size: .875rem!important;
    color: #444!important;
    font-weight: 500
}

.page-container.profile-content .section .green-tick-outline {
    background: #10b983;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-block;
    line-height: 16px;
    color: #fff;
    margin-left: 10px
}

.page-container.profile-content .section .green-tick-outline .icon-check {
    font-size: 12px
}

.page-container.profile-content .section .verifiedpnl .days-verified {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 9px
}

.page-container.profile-content .section .verifiedpnl .days-verified span {
    color: #666;
    font-size: .85rem
}

.page-container.profile-content .section .verifiedpnl .days-verified .su-switch-group {
    display: inline-block;
    float: right;
    margin-left: auto
}

.page-container.profile-content .section .verifiedpnl textarea {
    resize: none
}

.page-container.profile-content .section .verifiedpnl #end_date_label,.page-container.profile-content .section .verifiedpnl #start_date_label {
    width: 140px!important
}

.page-container.profile-content .section .verifiedpnl .su-checkbox-value {
    border: none!important
}

.page-container.profile-content .section .verifiedpnl .date-range-error {
    color: #f35631
}

.page-container.profile-content .section .verifiedpnl .date-selection-container {
    margin-top: 25px;
    margin-bottom: 30px
}

.page-container.profile-content .section .verifiedpnl .date-selection-container .su-radio-wrap {
    margin-bottom: 5px
}

.page-container.profile-content .section .verifiedpnl .date-selection-container .date-selection input,.page-container.profile-content .section .verifiedpnl .date-selection-container .mx-datepicker {
    width: 200px
}

.page-container.profile-content .section .verifiedpnl hr {
    margin-top: 25px;
    margin-bottom: 25px
}

.page-container.profile-content .section .verifiedpnl .kite-image-verified {
    margin-top: 15px;
    margin-bottom: 25px
}

.page-container.profile-content .section .verifiedpnl .segment-selection,.page-container.profile-content .section .verifiedpnl button.verified-submit {
    margin-top: 20px
}

.page-container.profile-content .section .verifiedpnl .segment-selection .su-checkbox-group {
    margin-bottom: 10px
}

.page-container.profile-content .section .verifiedpnl .personal-box {
    display: flex;
    align-items: center;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    padding: 10px;
    margin-bottom: 20px
}

.page-container.profile-content .section .verifiedpnl .personal-box .profile-avatar {
    position: relative
}

.page-container.profile-content .section .verifiedpnl .personal-box .verified-name {
    word-break: break-word
}

.page-container.profile-content .section .verifiedpnl .verified-pnl-switch {
    margin-top: 20px
}

.page-container.profile-content .section .verifiedpnl .verified-pnl-switch h3 .su-switch-group {
    float: right
}

.margins .sub-details .page-container.profile-content .section .verifiedpnl .verified-pnl-switch label.value,.page-container.profile-content .section .verifiedpnl .verified-pnl-switch .margins .sub-details label.value,.page-container.profile-content .section .verifiedpnl .verified-pnl-switch label.order-window,.page-container.profile-content .section .verifiedpnl .verified-pnl-switch label.text-small {
    font-size: .875rem!important
}

.page-container.profile-content .section .verifiedpnl .verified-pnl-switch .su-switch-group {
    display: inline-block;
    margin-left: 10px
}

.page-container.profile-content .section .verifiedpnl .verified-pnl-validation-name,.page-container.profile-content .section .verifiedpnl .verified-pnl-validation-segment {
    display: none;
    position: relative;
    top: -15px
}

.page-container.profile-content .section .verifiedpnl .verified-twitter-share-link {
    display: flex;
    align-items: center;
    min-width: 54.38px;
    justify-content: center;
    background: #e3e3e3;
    border-radius: 2px;
    margin-left: 5px
}

.page-container.profile-content .section .verifiedpnl .verified-twitter-share-link img {
    height: 18px
}

.page-container.profile-content .section .verifiedpnl .verified-pnl-url-box {
    margin-top: 20px;
    margin-bottom: 35px
}

.page-container.profile-content .section .verifiedpnl .verified-pnl-url-box div {
    display: flex
}

.page-container.profile-content .section .verifiedpnl .verified-pnl-url-box div .verified-pnl-url {
    display: inline-block;
    width: 100%;
    margin-right: 10px;
    padding: 10px;
    border: 1px solid #e3e3e3;
    background: #f4f4f8;
    border-radius: 3px;
    line-height: 1.8;
    height: 52px;
    box-sizing: border-box
}

.page-container.profile-content .section .verifiedpnl .verified-pnl-url-box div .verified-pnl-url a {
    font-size: 1.125rem
}

.page-container.profile-content .section .verifiedpnl .verified-pnl-url-box div .verified-pnl-url .link {
    padding-left: 5px;
    border-left: 1px solid #e1e1e1;
    margin-left: 5px
}

.page-container.profile-content .section .verifiedpnl .verified-pnl-url-box div button {
    padding: 15px;
    height: 52px!important;
    font-size: 16px!important;
    float: right
}

.context-menu .context-menu-list li .page-container.profile-content .section .verifiedpnl .verified-pnl-url-box a,.margins .sub-details .page-container.profile-content .section .verifiedpnl .verified-pnl-url-box a.value,.page-container.profile-content .section .verifiedpnl .verified-pnl-url-box .context-menu .context-menu-list li a,.page-container.profile-content .section .verifiedpnl .verified-pnl-url-box .margins .sub-details a.value,.page-container.profile-content .section .verifiedpnl .verified-pnl-url-box a.order-window,.page-container.profile-content .section .verifiedpnl .verified-pnl-url-box a.text-small {
    margin-left: 15px
}

.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: 1px;
    z-index: 1;
    padding: 9px 10px 10px 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: 4px 10px;
    background: #0059c1;
    color: #fff;
    font-weight: 600;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    font-size: 12px
}

.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 .account-closure-header span {
    margin-left: 20px
}

.page-container.profile-content .section .account-closure-section .account-closure-header:hover {
    cursor: pointer
}

.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 .aadhaar-modal ul {
    padding-left: 20px;
    margin-top: 25px
}

.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 .nominee-name {
    margin-top: 15px
}

.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 h3 {
    max-width: 245px;
    margin-bottom: 0
}

.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 {
    display: flex;
    align-items: center
}

.page-container.profile-content .section .profile-avatar {
    margin-right: 25px
}

.page-container.profile-content .section .profile-avatar .avatar {
    height: 75px!important;
    width: 75px!important;
    font-size: 20px!important;
    line-height: 75px!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
}

.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: 950px)and (min-width:800px) {
    .verified-pnl-url-box div .verified-pnl-url {
        max-width:70%;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

@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: 550px) {
    .verified-pnl-url {
        max-width:70%;
        text-overflow: ellipsis;
        overflow: hidden
    }

    .tab {
        padding: 12px 4px!important;
        width: 46%!important
    }
}

@media only screen and (max-width: 480px) {
    .verified-pnl-url {
        max-width:80%
    }

    .verified-pnl-url a {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis
    }
}

@media only screen and (max-width: 800px) {
    .secondary-modal .modalbody {
        max-height:55vh!important
    }

    .mtf-final {
        position: relative;
        top: 18vh
    }

    .standalone-label {
        margin-bottom: 10px
    }

    .verifiedpnl .date-selection .standalone-label {
        margin-bottom: 13px!important
    }

    .verifiedpnl .date-selection-container .date-selection input {
        width: 260px!important
    }

    .verifiedpnl .su-checkbox-box,.verifiedpnl .su-checkbox-group,.verifiedpnl .su-radio-group,.verifiedpnl .su-switch-group {
        margin-bottom: 0!important
    }

    .verifiedpnl .date-selection-container {
        margin-top: 0!important
    }

    .verifiedpnl button.verified-submit {
        width: 100px
    }

    .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: 10px
    }

    #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 img.mprofit,.refer.page-container .redeem-offers .vendor-list .vendor-logo-container .vendor-logo img.quicko {
    width: 75px!important
}

.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.gift-confirm {
    padding-top: 30px!important
}

.page-container.gift .rec-box.gift-confirm p {
    margin-top: 5px!important
}

.page-container.gift .rec-box button {
    max-width: 150px!important;
    margin-left: 0
}

.page-container.gift .rec-box h2 {
    margin-bottom: 10px;
    margin-top: 0
}

.page-container.gift .rec-box .v-align {
    margin-bottom: 10px;
    margin-top: 5px
}

.page-container.gift .rec-box p {
    overflow-wrap: break-word
}

.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: 25px;
    margin-bottom: 40px
}

.page-container.gift #gift_form .su-radio-group {
    margin-top: 10px;
    margin-bottom: 15px
}

.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: 1px;
    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-head h3.no-margin {
    margin-bottom: 0!important
}

.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 .rec-box .columns {
        margin-bottom:0!important
    }

    .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
    }
}