@import url(https://fonts.googleapis.com/css?family=Roboto:400,600,700,800); @import url(https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300&display=swap); 

.a9044 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    box-shadow: 0 3px 8px 1px rgba(0,0,0,0.28);
    background: var(--app-background-box);
    border-radius: 3px;
    box-sizing: border-box;
    min-width: 280px;
    max-height: 93vh;
    display: grid;
    grid-template-rows: auto 1fr
}

._9569b {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.28);
    z-index: 998;
    backdrop-filter: blur(2px)
}

.a9041 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate3d(-50%, -50%, 0);
    box-shadow: 0 3px 8px 1px rgba(0,0,0,0.28);
    background: var(--app-background-box);
    border-radius: 3px;
    box-sizing: border-box;
    min-width: 280px;
    max-height: 93vh;
    display: grid;
    grid-template-rows: auto 1fr
}


.e52bc {
    cursor: grab;
    user-select: none
}

.e7d03 {
    display: grid;
    grid-template-columns: 1fr auto;
    height: 45px;
    border-bottom: 1px solid var(--color-transparent-hint);
    padding: 8px;
    align-items: center
}

._83841 {
    padding: 0 12px;
    font-size: 14px;
    opacity: 0.9;
    font-weight: bold
}

._3906a {
    padding: 7px;
    border: none;
    cursor: pointer;
    background: none;
    border-radius: 3px
}

._3906a svg {
    display: flex;
    height: 16px;
    fill: var(--color);
    opacity: 0.5
}

._3906a:focus,._3906a:active {
    outline: none
}

._3906a:hover {
    background: var(--color-transparent-hint)
}

._3906a:hover svg {
    opacity: 1
}

._6d495 {
    padding: 0 2px;
    border-radius: 0 0 3px 3px
}

._6d495::-webkit-scrollbar {
    display: none
}

._699f1 {
    position: absolute;
    z-index: 10
}

.e1921 {
    top: 0;
    width: 5px;
    right: 0;
    bottom: 10px;
    background: red;
    cursor: ew-resize
}

._100e3 {
    height: 5px;
    bottom: 0;
    left: 0;
    right: 10px;
    background: yellow;
    cursor: ns-resize
}

._30de9 {
    width: 10px;
    height: 10px;
    right: 0;
    bottom: 0;
    background: #2962ff;
    cursor: nwse-resize
}

*,*::before,*::after {
    box-sizing: border-box;
    outline: none;
    padding: 0;
    margin: 0;
    user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none
}

input {
    user-select: auto;
    -moz-user-select: auto;
    -ms-user-select: auto;
    -webkit-user-select: auto
}

html {
    font-size: var(--font-size-lg, 12px);
    font-family: var(--font-family, "'Roboto', 'ubuntu'"),sans-serif
}

@media screen and (min-width: 1025px) and (max-width: 1200px) {
    html {
        font-size:var(--font-size-md, 11px)
    }
}

@media screen and (max-width: 1024px) {
    html {
        font-size:var(--font-size-sm, 10px)
    }
}

body {
    overflow: hidden;
    background-color: var(--app-background);
    color: var(--app-color)
}

iframe {
    border: none
}

img {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-drag: none
}

a,a:hover,a:active,a:visited {
    text-decoration: none;
    color: unset
}

button {
    border: none;
    outline: none;
    color: var(--color);
}

a,button {
    cursor: pointer
}

input {
    background: var(--input-background);
    border: none;
    outline: none;
    color: var(--color)
}

input[readonly] {
    cursor: default;
    background-color: var(--input-readonly-background)
}

input.invalid {
    border: 1px solid var(--error) !important
}

svg {
    fill: var(--app-icon);
 
}

ul {
    list-style-type: none
}

input[type=range]::-webkit-slider-thumb {
    border: 1px solid #000000;
    border-radius: 3px;
    background: #ffffff;
    cursor: pointer
}

.main-block {
    overflow: hidden;
    overflow-y: auto
}

.document {
    box-sizing: border-box;
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    height: 100vh
}

.container {
    display: flex;
    flex: 1
}

.app-section {
    display: flex;
    flex: 1;
    width: 100%;
    overflow-y: auto
}

.app-main {
    flex-direction: row;
    display: flex;
    -moz-display: flex;
    -webkit-display: flex;
    -webkit-flex: 1;
    flex: 1;
    -moz-flex: 1;
    position: relative;
    overflow: hidden;
    height: 100vh;
    width: 100vw
}

.content {
    -webkit-flex-grow: 1;
    -ms-flex-positive: 1;
    flex-grow: 1
}

.content-start,.justify-flex-start {
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    text-align: start
}

.content-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center
}

.content-end,.justify-flex-end {
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    text-align: end
}

.content-top {
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start
}

.content-middle {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.content-bottom {
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end
}

.row {
    display: flex;
    flex-direction: row
}

.column {
    display: flex;
    flex-direction: column
}

.content-around,.justify-space-around {
    -ms-flex-pack: distribute;
    justify-content: space-around
}

.content-between,.justify-space-between {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.content-center,.justify-space-center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center
}

.fcontent-irst {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1
}

.content-last {
    -webkit-box-ordinal-group: 2;
    -ms-flex-order: 1;
    order: 1
}

.content-column {
    flex-direction: column
}

.flex-no-wrap,.content-nowrap {
    flex-wrap: nowrap !important
}

.wrapper {
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto
}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    flex: 1;
    padding-right: 2rem;
    padding-left: 2rem
}

.row {
    box-sizing: border-box;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box: 0;
    -moz-box: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-direction: normal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap
}

.row.reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: horizontal;
    -moz-box-direction: reverse;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row-reverse;
    -ms-flex-direction: row-reverse;
    flex-direction: row-reverse
}

.col.reverse {
    -webkit-box-direction: reverse;
    -webkit-box-orient: vertical;
    -moz-box-direction: reverse;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column-reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse
}

.col-xs {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    -webkit-flex-basis: auto;
    flex-basis: auto
}

.col-xs-1 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    -webkit-flex-basis: 8.33333%;
    flex-basis: 8.33333%;
    max-width: 8.33333%
}

.col-xs-2 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    -webkit-flex-basis: 16.66667%;
    flex-basis: 16.66667%;
    max-width: 16.66667%
}

.col-xs-3 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    -webkit-flex-basis: 25%;
    flex-basis: 25%;
    max-width: 25%
}

.col-xs-4 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    -webkit-flex-basis: 33.33333%;
    flex-basis: 33.33333%;
    max-width: 33.33333%
}

.col-xs-5 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    -webkit-flex-basis: 41.66667%;
    flex-basis: 41.66667%;
    max-width: 41.66667%
}

.col-xs-6 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    -webkit-flex-basis: 50%;
    flex-basis: 50%;
    max-width: 50%
}

.col-xs-7 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    -webkit-flex-basis: 58.33333%;
    flex-basis: 58.33333%;
    max-width: 58.33333%
}

.col-xs-8 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    -webkit-flex-basis: 66.66667%;
    flex-basis: 66.66667%;
    max-width: 66.66667%
}

.col-xs-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    -webkit-flex-basis: 75%;
    flex-basis: 75%;
    max-width: 75%
}

.col-xs-10 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    -webkit-flex-basis: 83.33333%;
    flex-basis: 83.33333%;
    max-width: 83.33333%
}

.col-xs-11 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    -webkit-flex-basis: 91.66667%;
    flex-basis: 91.66667%;
    max-width: 91.66667%
}

.col-xs-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    -webkit-flex-basis: 100%;
    flex-basis: 100%;
    max-width: 100%
}

.col-xs-offset-0 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    margin-left: 0
}

.col-xs-offset-1 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    margin-left: 8.33333%
}

.col-xs-offset-2 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    margin-left: 16.66667%
}

.col-xs-offset-3 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    margin-left: 25%
}

.col-xs-offset-4 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    margin-left: 33.33333%
}

.col-xs-offset-5 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    margin-left: 41.66667%
}

.col-xs-offset-6 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    margin-left: 50%
}

.col-xs-offset-7 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    margin-left: 58.33333%
}

.col-xs-offset-8 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    margin-left: 66.66667%
}

.col-xs-offset-9 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    margin-left: 75%
}

.col-xs-offset-10 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    margin-left: 83.33333%
}

.col-xs-offset-11 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    margin-left: 91.66667%
}

.col-xs-offset-12 {
    box-sizing: border-box;
    -webkit-box-flex: 0;
    -moz-box-flex: 0;
    -webkit-flex-grow: 0;
    -ms-flex: 0;
    flex-grow: 0;
    -webkit-flex-shrink: 0;
    -moz-flex-shrink: 0;
    -ms-flex: 0;
    flex-shrink: 0;
    padding-right: .5rem;
    padding-left: .5rem;
    margin-left: 100%
}

.col-xs {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex-grow: 1;
    -ms-flex: 1;
    flex-grow: 1;
    -webkit-flex-basis: 0;
    flex-basis: 0;
    max-width: 100%
}

.start-xs {
    -webkit-box-pack: start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    -webkit-justify-content: flex-start;
    justify-content: flex-start;
    text-align: left
}

.center-xs {
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    text-align: center
}

.end-xs {
    -webkit-box-pack: end;
    -moz-box-pack: end;
    -ms-flex-pack: end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;
    text-align: right
}

.top-xs {
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start
}

.middle-xs {
    -webkit-box-align: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center
}

.bottom-xs {
    -webkit-box-align: end;
    -moz-box-align: end;
    -ms-flex-align: end;
    -webkit-align-items: flex-end;
    align-items: flex-end
}

.around-xs {
    -ms-flex-pack: distribute;
    -webkit-justify-content: space-around;
    justify-content: space-around
}

.between-xs {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between
}

.first-xs {
    order: -1
}

.last-xs {
    order: 1
}

@media only screen and (min-width: 48em) {
    .container {
        width:100%
    }

    .col-sm {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: auto;
        flex-basis: auto
    }

    .col-sm-1 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 8.33333%;
        flex-basis: 8.33333%;
        max-width: 8.33333%;
        position: relative
    }

    .col-sm-2 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 16.66667%;
        flex-basis: 16.66667%;
        max-width: 16.66667%;
        position: relative
    }

    .col-sm-3 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 25%;
        flex-basis: 25%;
        max-width: 25%;
        position: relative
    }

    .col-sm-4 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 33.33333%;
        flex-basis: 33.33333%;
        max-width: 33.33333%;
        position: relative
    }

    .col-sm-5 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 41.66667%;
        flex-basis: 41.66667%;
        max-width: 41.66667%;
        position: relative
    }

    .col-sm-6 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 50%;
        flex-basis: 50%;
        max-width: 50%;
        position: relative
    }

    .col-sm-7 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 58.33333%;
        flex-basis: 58.33333%;
        max-width: 58.33333%;
        position: relative
    }

    .col-sm-8 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 66.66667%;
        flex-basis: 66.66667%;
        max-width: 66.66667%;
        position: relative
    }

    .col-sm-9 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 75%;
        flex-basis: 75%;
        max-width: 75%;
        position: relative
    }

    .col-sm-10 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 83.33333%;
        flex-basis: 83.33333%;
        max-width: 83.33333%;
        position: relative
    }

    .col-sm-11 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 91.66667%;
        flex-basis: 91.66667%;
        max-width: 91.66667%;
        position: relative
    }

    .col-sm-12 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
        max-width: 100%;
        position: relative
    }

    .col-sm-offset-0 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 0
    }

    .col-sm-offset-1 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 8.33333%
    }

    .col-sm-offset-2 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 16.66667%
    }

    .col-sm-offset-3 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 25%
    }

    .col-sm-offset-4 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 33.33333%
    }

    .col-sm-offset-5 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 41.66667%
    }

    .col-sm-offset-6 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 50%
    }

    .col-sm-offset-7 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 58.33333%
    }

    .col-sm-offset-8 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 66.66667%
    }

    .col-sm-offset-9 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 75%
    }

    .col-sm-offset-10 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 83.33333%
    }

    .col-sm-offset-11 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 91.66667%
    }

    .col-sm-offset-12 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 100%
    }

    .col-sm {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex: 1;
        flex-grow: 1;
        -webkit-flex-basis: 0;
        flex-basis: 0;
        max-width: 100%
    }

    .start-sm {
        -webkit-box-pack: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        text-align: left
    }

    .center-sm {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        text-align: center
    }

    .end-sm {
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        text-align: right
    }

    .top-sm {
        -webkit-box-align: start;
        -moz-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start
    }

    .middle-sm {
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center
    }

    .bottom-sm {
        -webkit-box-align: end;
        -moz-box-align: end;
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end
    }

    .around-sm {
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        justify-content: space-around
    }

    .between-sm {
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between
    }

    .first-sm {
        order: -1
    }

    .last-sm {
        order: 1
    }
}

@media only screen and (min-width: 62em) {
    .container {
        width:100%
    }

    .col-md {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: auto;
        flex-basis: auto
    }

    .col-md-1 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 8.33333%;
        flex-basis: 8.33333%;
        max-width: 8.33333%;
        position: relative
    }

    .col-md-2 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 16.66667%;
        flex-basis: 16.66667%;
        max-width: 16.66667%;
        position: relative
    }

    .col-md-3 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 25%;
        flex-basis: 25%;
        max-width: 25%;
        position: relative
    }

    .col-md-4 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 33.33333%;
        flex-basis: 33.33333%;
        max-width: 33.33333%;
        position: relative
    }

    .col-md-5 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 41.66667%;
        flex-basis: 41.66667%;
        max-width: 41.66667%;
        position: relative
    }

    .col-md-6 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 50%;
        flex-basis: 50%;
        max-width: 50%;
        position: relative
    }

    .col-md-7 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 58.33333%;
        flex-basis: 58.33333%;
        max-width: 58.33333%;
        position: relative
    }

    .col-md-8 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 66.66667%;
        flex-basis: 66.66667%;
        max-width: 66.66667%;
        position: relative
    }

    .col-md-9 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 75%;
        flex-basis: 75%;
        max-width: 75%;
        position: relative
    }

    .col-md-10 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 83.33333%;
        flex-basis: 83.33333%;
        max-width: 83.33333%;
        position: relative
    }

    .col-md-11 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 91.66667%;
        flex-basis: 91.66667%;
        max-width: 91.66667%;
        position: relative
    }

    .col-md-12 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
        max-width: 100%;
        position: relative
    }

    .col-md-offset-0 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 0
    }

    .col-md-offset-1 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 8.33333%
    }

    .col-md-offset-2 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 16.66667%
    }

    .col-md-offset-3 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 25%
    }

    .col-md-offset-4 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 33.33333%
    }

    .col-md-offset-5 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 41.66667%
    }

    .col-md-offset-6 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 50%
    }

    .col-md-offset-7 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 58.33333%
    }

    .col-md-offset-8 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 66.66667%
    }

    .col-md-offset-9 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 75%
    }

    .col-md-offset-10 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 83.33333%
    }

    .col-md-offset-11 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 91.66667%
    }

    .col-md-offset-12 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 100%
    }

    .col-md {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex: 1;
        flex-grow: 1;
        -webkit-flex-basis: 0;
        flex-basis: 0;
        max-width: 100%
    }

    .start-md {
        -webkit-box-pack: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        text-align: left
    }

    .center-md {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        text-align: center
    }

    .end-md {
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        text-align: right
    }

    .top-md {
        -webkit-box-align: start;
        -moz-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start
    }

    .middle-md {
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center
    }

    .bottom-md {
        -webkit-box-align: end;
        -moz-box-align: end;
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end
    }

    .around-md {
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        justify-content: space-around
    }

    .between-md {
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between
    }

    .first-md {
        order: -1
    }

    .last-md {
        order: 1
    }
}

@media only screen and (min-width: 75em) {
    .container {
        width:100%
    }

    .col-lg {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: auto;
        flex-basis: auto
    }

    .col-lg-1 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 8.33333%;
        flex-basis: 8.33333%;
        max-width: 8.33333%;
        position: relative
    }

    .col-lg-2 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 16.66667%;
        flex-basis: 16.66667%;
        max-width: 16.66667%;
        position: relative
    }

    .col-lg-3 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 25%;
        flex-basis: 25%;
        max-width: 25%;
        position: relative
    }

    .col-lg-4 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 33.33333%;
        flex-basis: 33.33333%;
        max-width: 33.33333%;
        position: relative
    }

    .col-lg-5 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 41.66667%;
        flex-basis: 41.66667%;
        max-width: 41.66667%;
        position: relative
    }

    .col-lg-6 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 50%;
        flex-basis: 50%;
        max-width: 50%;
        position: relative
    }

    .col-lg-7 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 58.33333%;
        flex-basis: 58.33333%;
        max-width: 58.33333%;
        position: relative
    }

    .col-lg-8 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 66.66667%;
        flex-basis: 66.66667%;
        max-width: 66.66667%;
        position: relative
    }

    .col-lg-9 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 75%;
        flex-basis: 75%;
        max-width: 75%;
        position: relative
    }

    .col-lg-10 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 83.33333%;
        flex-basis: 83.33333%;
        max-width: 83.33333%;
        position: relative
    }

    .col-lg-11 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 91.66667%;
        flex-basis: 91.66667%;
        max-width: 91.66667%;
        position: relative
    }

    .col-lg-12 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        -webkit-flex-basis: 100%;
        flex-basis: 100%;
        max-width: 100%;
        position: relative
    }

    .col-lg-offset-0 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 0
    }

    .col-lg-offset-1 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 8.33333%
    }

    .col-lg-offset-2 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 16.66667%
    }

    .col-lg-offset-3 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 25%
    }

    .col-lg-offset-4 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 33.33333%
    }

    .col-lg-offset-5 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 41.66667%
    }

    .col-lg-offset-6 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 50%
    }

    .col-lg-offset-7 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 58.33333%
    }

    .col-lg-offset-8 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 66.66667%
    }

    .col-lg-offset-9 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 75%
    }

    .col-lg-offset-10 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 83.33333%
    }

    .col-lg-offset-11 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 91.66667%
    }

    .col-lg-offset-12 {
        box-sizing: border-box;
        -webkit-box-flex: 0;
        -moz-box-flex: 0;
        -webkit-flex-grow: 0;
        -ms-flex: 0;
        flex-grow: 0;
        -webkit-flex-shrink: 0;
        -moz-flex-shrink: 0;
        -ms-flex: 0;
        flex-shrink: 0;
        padding-right: .5rem;
        padding-left: .5rem;
        margin-left: 100%
    }

    .col-lg {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex-grow: 1;
        -ms-flex: 1;
        flex-grow: 1;
        -webkit-flex-basis: 0;
        flex-basis: 0;
        max-width: 100%
    }

    .start-lg {
        -webkit-box-pack: start;
        -moz-box-pack: start;
        -ms-flex-pack: start;
        -webkit-justify-content: flex-start;
        justify-content: flex-start;
        text-align: left
    }

    .center-lg {
        -webkit-box-pack: center;
        -moz-box-pack: center;
        -ms-flex-pack: center;
        -webkit-justify-content: center;
        justify-content: center;
        text-align: center
    }

    .end-lg {
        -webkit-box-pack: end;
        -moz-box-pack: end;
        -ms-flex-pack: end;
        -webkit-justify-content: flex-end;
        justify-content: flex-end;
        text-align: right
    }

    .top-lg {
        -webkit-box-align: start;
        -moz-box-align: start;
        -ms-flex-align: start;
        -webkit-align-items: flex-start;
        align-items: flex-start
    }

    .middle-lg {
        -webkit-box-align: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        -webkit-align-items: center;
        align-items: center
    }

    .bottom-lg {
        -webkit-box-align: end;
        -moz-box-align: end;
        -ms-flex-align: end;
        -webkit-align-items: flex-end;
        align-items: flex-end
    }

    .around-lg {
        -ms-flex-pack: distribute;
        -webkit-justify-content: space-around;
        justify-content: space-around
    }

    .between-lg {
        -webkit-box-pack: justify;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        -webkit-justify-content: space-between;
        justify-content: space-between
    }

    .first-lg {
        order: -1
    }

    .last-lg {
        order: 1
    }
}

::-webkit-scrollbar {
    background: 0 0;
    width: 4px;
    height: 2px
}

::-webkit-scrollbar-thumb {
    background: var(--app-scrollbar-thumb);
    opacity: 1;
    border-radius: 4px
}

::selection {
    background: var(--app-selection);
    color: #fff
}

::-moz-selection {
    background: var(--app-selection);
    color: #fff
}

.mt-xs {
    margin-top: .3rem
}

.mb-xs {
    margin-bottom: .3rem
}

.ml-xs {
    margin-left: .3rem
}

.mr-xs {
    margin-right: .3rem
}

.mt-sm {
    margin-top: .75rem
}

.mb-sm {
    margin-bottom: .75rem
}

.ml-sm {
    margin-left: .75rem
}

.mr-sm {
    margin-right: .75rem
}

.mt-md {
    margin-top: 1rem
}

.mb-md {
    margin-bottom: 1rem
}

.ml-md {
    margin-left: 1rem
}

.mr-md {
    margin-right: 1rem
}

.mt-lg {
    margin-top: 2.2rem
}

.mb-lg {
    margin-bottom: 2.2rem
}

.ml-lg {
    margin-left: 2.2rem
}

.mr-lg {
    margin-right: 2.2rem
}

.mt-xlg {
    margin-top: 4.2rem
}

.mb-xlg {
    margin-bottom: 4.2rem
}

.ml-xlg {
    margin-left: 4.2rem
}

.mr-xlg {
    margin-right: 4.2rem
}

.mt-mlg {
    margin-top: 5.5rem auto
}

.mb-mlg {
    margin-bottom: 5.5rem auto
}

.ml-mlg {
    margin-left: 5.5rem auto
}

.mr-mlg {
    margin-right: 5.5rem auto
}

.pt-xs {
    padding-top: .5rem
}

.pb-xs {
    padding-bottom: .5rem
}

.pl-xs {
    padding-left: .5rem
}

.pr-xs {
    padding-right: .5rem
}

.pt-sm {
    padding-top: .85rem
}

.pb-sm {
    padding-bottom: .85rem
}

.pl-sm {
    padding-left: .85rem
}

.pr-sm {
    padding-right: .85rem
}

.pt-md {
    padding-top: 1rem
}

.pb-md {
    padding-bottom: 1rem
}

.pl-md {
    padding-left: 1rem
}

.pr-md {
    padding-right: 1rem
}

.pt-lg {
    padding-top: 2.2rem
}

.pb-lg {
    padding-bottom: 2.2rem
}

.pl-lg {
    padding-left: 2.2rem
}

.pr-lg {
    padding-right: 2.2rem
}

.pt-xlg {
    padding-top: 4.2rem
}

.pb-xlg {
    padding-bottom: 4.2rem
}

.pl-xlg {
    padding-left: 4.2rem
}

.pr-xlg {
    padding-right: 4.2rem
}

.pt-auto {
    padding-top: auto
}

.pb-auto {
    padding-bottom: auto
}

.pl-auto {
    padding-left: auto
}

.pr-auto {
    padding-right: auto
}

.text-profit,.text-green {
    color: var(--success)
}

.text-lose,.text-red {
    color: var(--error)
}

.text-gray,.text-grey {
    color: var(--grey-100)
}

.tex-orange {
    color: var(--orange)
}

.tex-prime {
    color: var(--prime)
}

.text-bold {
    font-weight: 600
}

.text-xs {
    font-size: .75rem
}

.text-sm {
    font-size: .85rem
}

.text-md {
    font-size: 1rem
}

.text-lg {
    font-size: 1.1rem
}

.text-xlg {
    font-size: 1.3rem
}

.text-mlg {
    font-size: 1.8rem
}

.text-weight-xs {
    font-weight: 300
}

.text-weight-sm {
    font-weight: 400
}

.text-weight-md {
    font-weight: 500
}

.text-weight-lg {
    font-weight: 600
}

.text-weight-xlg {
    font-weight: 800
}

@keyframes pulse {
    from {
        transform: scale3d(1, 1, 1)
    }

    50% {
        transform: scale3d(1.05, 1.05, 1.05)
    }

    to {
        transform: scale3d(1, 1, 1)
    }
}

@keyframes rotation {
    from {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

.checkbox {
    position: relative;
    font-size: 1.8rem;
    cursor: pointer;
    width: 14px;
    height: 14px
}

.checkbox input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0
}

.checkbox .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 16px;
    width: 16px;
    background-color: #aaaaaa;
    border-radius: 2px
}

.checkbox .checkmark:after {
    content: "";
    position: absolute;
    display: none
}

.checkbox input:checked ~ .checkmark {
    background-color: var(--green)
}

.checkbox input:checked ~ .checkmark:after {
    display: block
}

.checkbox .checkmark:after {
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 3px 3px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg)
}

.checkbox-label {
    font-size: 0.85rem;
    white-space: nowrap;
    margin-left: 20px
}

.icon-profit,.icon-green {
    fill: var(--green)
}

.icon-profit svg,.icon-green svg {
    fill: var(--green)
}

.icon-lose,.icon-red {
    fill: var(--red)
}

.icon-lose svg,.icon-red svg {
    fill: var(--red)
}

.icon-gray {
    fill: var(--grey-200)
}

.icon-gray svg {
    fill: var(--grey-200)
}

.icon-round {
    border-radius: 50%
}

.icon-xs {
    width: .75rem;
    height: .75rem
}

.icon-xs>svg {
    width: .75rem;
    height: .75rem
}

.icon-sm {
    width: .85rem;
    height: .85rem
}

.icon-sm>svg {
    width: .85rem;
    height: .85rem
}

.icon-md {
    width: 1rem;
    height: 1rem
}

.icon-md>svg {
    width: 1rem;
    height: 1rem
}

.icon-lg {
    width: 1.5rem;
    height: 1.5rem
}

.icon-lg>svg {
    width: 1.5rem;
    height: 1.5rem
}

.icon-xlg {
    width: 2rem;
    height: 2rem
}

.icon-xlg>svg {
    width: 2rem;
    height: 2rem
}

.icon-mlg {
    width: 3.5rem;
    height: 3.5rem
}

.icon-mlg>svg {
    width: 3.5rem;
    height: 3.5rem
}

.btn {
    cursor: pointer;
    border-radius: 3px;
    white-space: nowrap
}

.btn-block {
    width: 100%;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center
}

.btn-xs {
    font-size: .75rem;
    padding: .25rem .75rem
}

.btn-sm {
    font-size: .85rem;
    padding: .28333rem .85rem
}

.btn-md {
    font-size: 1rem;
    padding: .33333rem 1rem
}

.btn-lg {
    font-size: 1.2rem;
    padding: .4rem 1.2rem
}

.btn-xlg {
    font-size: 1.4rem;
    padding: .46667rem 1.4rem
}

.btn-prime {
    color: var(--white);
    background-color: var(--prime)
}

.btn-prime:hover {
    background-color: color-mix(in srgb, var(--prime), #000 10%)
}

.btn-prime.active {
    background-color: color-mix(in srgb, var(--prime), #000 30%)
}

.btn-outline-prime {
    color: var(--app-color);
    border: 1px solid var(--prime);
    background: transparent
}

.btn-outline-prime:hover {
    background-color: var(--prime)
}

.btn-outline-prime.active {
    background-color: color-mix(in srgb, var(--prime), #000 30%)
}

.btn-default {
    color: var(--white);
    background-color: var(--grey-300)
}

.btn-default:hover {
    background-color: color-mix(in srgb, var(--grey-300), #000 10%)
}

.btn-default.active {
    background-color: color-mix(in srgb, var(--grey-300), #000 30%)
}

.btn-outline-default {
    color: var(--app-color);
    border: 1px solid var(--grey-300);
    background: transparent
}

.btn-outline-default:hover {
    background-color: var(--grey-300)
}

.btn-outline-default.active {
    background-color: color-mix(in srgb, var(--grey-300), #000 30%)
}

.btn-sacess {
    color: var(--white);
    background-color: var(--success)
}

.btn-sacess:hover {
    background-color: color-mix(in srgb, var(--success), #000 10%)
}

.btn-sacess.active {
    background-color: color-mix(in srgb, var(--success), #000 30%)
}

.btn-outline-sacess {
    color: var(--app-color);
    border: 1px solid var(--success);
    background: transparent
}

.btn-outline-sacess:hover {
    background-color: var(--success)
}

.btn-outline-sacess.active {
    background-color: color-mix(in srgb, var(--success), #000 30%)
}

.btn-danger {
    color: var(--white);
    background-color: var(--danger)
}

.btn-danger:hover {
    background-color: color-mix(in srgb, var(--danger), #000 10%)
}

.btn-danger.active {
    background-color: color-mix(in srgb, var(--danger), #000 30%)
}

.btn-outline-danger {
    color: var(--app-color);
    border: 1px solid var(--danger);
    background: transparent
}

.btn-outline-danger:hover {
    background-color: var(--danger)
}

.btn-outline-danger.active {
    background-color: color-mix(in srgb, var(--danger), #000 30%)
}

.btn-group {
    display: flex
}

.btn-group .btn {
    border-radius: 0;
    margin-right: 1px
}

.btn-group .btn:first-child {
    border-radius: 3px 0 0 3px
}

.btn-group .btn:last-child {
    border-radius: 0 3px 3px 0
}

.btn-switch {
    display: flex;
    border: 1px solid var(--app-border);
    padding: 3px;
    border-radius: 3px
}

.list-box {
    margin: 0;
    list-style: none
}

.list-box li {
    color: var(--color);
    display: flex;
    align-items: center;
    padding: 0
}

.list-box li:hover {
    background: var(--app-background)
}

.list-box li a {
    cursor: pointer;
    width: 100%;
    font-size: 1rem;
    padding: 1rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.list-box li:last-child {
    border-top: 1px solid var(--color-transparent-hint)
}

.badge {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 3px;
    padding: 2px 5px;
    position: relative;
    overflow: hidden;
    flex-wrap: nowrap
}

.badge-sell {
    border: 1px solid var(--red);
    color: var(--red)
}

.badge-buy {
    border: 1px solid var(--green);
    color: var(--green)
}

.badge-default {
    border: 1px solid var(--app-border);
    color: var(--app-color)
}

.badge-pending {
    border: 1px solid var(--app-border);
    color: var(--grey-200)
}

.badge-processing {
    border: 1px solid var(--app-border);
    color: var(--prime)
}

.badge-prime {
    border: 1px solid var(--prime);
    color: var(--app-color)
}

.badge-danger {
    border: 1px solid var(--red);
    background-color: var(--red);
    color: var(--app-color)
}

.badge-warning {
    border: 1px solid var(--orange);
    background-color: var(--orange);
    color: var(--app-color)
}

.badge-success {
    border: 1px solid var(--green);
    background-color: var(--green);
    color: var(--app-color)
}

.badge-xs {
    font-size: .6rem;
    padding: .1rem .3rem;
    height: 1.5rem
}

.badge-sm {
    font-size: .8rem;
    padding: .13333rem .4rem;
    height: 2rem
}

.badge-md {
    font-size: 2rem;
    padding: .33333rem 1rem;
    height: 5rem
}

.badge-lg {
    font-size: 2.4rem;
    padding: .4rem 1.2rem;
    height: 6rem
}

.badge-xlg {
    font-size: 2.8rem;
    padding: .46667rem 1.4rem;
    height: 7rem
}

.rechart-tooltip {
    background: var(--app-background-box);
    padding: 10px;
    border-radius: 4px
}

.panel {
    background: var(--app-background-box);
    border-radius: 4px
}

@keyframes shine {
    to {
        background-position-x: -200%
    }
}

.card__image {
    background: linear-gradient(110deg, var(--app-background) 28%, var(--app-background-section) 13%, var(--app-background) 28%);
    background-size: 200% 100%;
    animation: 1.2s shine linear infinite
}

.appModalWrap {
    background-color: rgba(1,1,1,0.55) !important;
    z-index: 10000 !important
}

.appModal {
    position: relative;
    margin: auto !important;
    background-color: var(--app-background-box) !important
}

.appModal_sm {
    min-height: 120px !important
}

.appModal_md {
    width: 520px !important
}

.appModal__header {
    padding: 15px 15px !important;
    position: relative;
    background-color: var(--bg-color-secondary) !important;
    border-bottom: 1px solid var(--color-transparent-hint)
}

.appModal__title,.modal-title {
    width: 100%
}

.appModal__body {
    padding: 0 0 20px !important
}

.modal-title {
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 1px;
    font-weight: 500;
    color: var(--modal-title-color)
}

.modal-title .symbol {
    font-size: 1.8rem
}

.modal-title .group {
    position: relative;
    text-transform: uppercase;
    top: -5px;
    font-size: 0.75rem;
    margin: 0 10px;
    color: var(--color-hint)
}

.modal-title i {
    cursor: pointer
}

.modal-title svg {
    width: 16px !important;
    height: 16px !important
}

.appModal__close {
    color: var(--color);
    width: 14px !important;
    height: 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: absolute !important;
    right: 10px !important;
    top: 10px !important;
    font-size: 2rem !important
}

.modal-tabs {
    display: flex;
    margin-bottom: 10px
}

.modal-tabs-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 34px;
    width: 50%;
    color: var(--color);
    font-size: 1rem;
    font-weight: 800
}

.modal-tabs-item:first-child {
    border-right: 1px solid var(--app-border)
}

.modal-tabs-item.active {
    border-top: 1px solid var(--prime);
    background-color: var(--app-background-box)
}

.modal-tabs-item:not(.active) {
    background-color: transparent;
    cursor: pointer;
    border-bottom: 1px solid var(--app-border)
}

.news-body .news-table-row,.news-header {
    background-color: transparent !important
}

.news-table-row {
    border-bottom: 1px solid var(--app-border) !important
}

.news-header {
    display: flex;
    border-bottom: 1px solid var(--app-border) !important
}

.news-header .news-table {
    display: none !important
}

.news-table-col {
    width: 100% !important;
    margin-bottom: 5px
}

.news-filter {
    width: 100% !important
}

.news-filter-inner {
    justify-content: space-between !important
}

.news-filter-item {
    flex: unset !important
}

.news-filter-item input[type='search'] {
    padding: 10px !important
}

.news-filter-inner input::placeholder {
    color: var(--color) !important
}

.news-filter-inner input,.searchable-input,.react-datepicker__input-container input,.news-filter-item input {
    border: 1px solid var(--app-border) !important;
    background-color: var(--input-step-background) !important;
    font-size: 0.85rem !important;
    border-radius: 0 !important;
    color: var(--app-color) !important
}

.news-filter-inner input input,.searchable-input input,.react-datepicker__input-container input input,.news-filter-item input input {
    color: var(--app-color) !important
}

.news-list::before {
    background-color: var(--app-background-box) !important
}

.news-filter-inner .searchable-input-arrow {
    width: 10px !important;
    height: 10px !important
}

.searchable-list {
    background-color: var(--app-background-box) !important;
    z-index: 100;
    font-size: 0.85rem !important;
    padding: 0 !important
}

.news-filter-inner .searchable-list .searchable-list-item {
    color: var(--color)
}

.news-filter-inner .searchable-list .searchable-list-item:hover {
    background-color: var(--app-background-box-hover) !important
}

.react-datepicker__header,.react-datepicker__month-container {
    background: var(--app-background-box) !important
}

.news-pagination-button {
    border: none !important;
    outline: none !important;
    box-shadow: none !important
}

.news-view-inner {
    background-color: transparent !important;
    border: 1px solid var(--border-color) !important
}

.searchable-input__active {
    border-bottom: 1px solid var(--app-border) !important
}

.searchable-list-item {
    color: var(--app-color) !important
}

.appDropdown {
    z-index: 9999;
    border: 1px solid var(--app-border) !important;
    box-shadow: none !important
}

.appDropdown,.appDropdown__content {
    border-radius: 0 !important;
    padding: 0 !important;
    color: var(--app-color) !important
}

.appDropdown__triangle {
    border-radius: 2px
}

.appDropdown__content,.appDropdown__triangle {
    background-color: var(--app-background-box) !important
}

.appDropdown,.appDropdown__triangle {
    box-shadow: 0 2px 4px rgba(0,0,0,0.4)
}

.appDropdown__title {
    font-size: 1rem;
    padding: 0.7rem 1rem
}

.__react_component_tooltip {
    z-index: 10000000 !important
}

.appTooltip {
    z-index: 10000000 !important;
    color: var(--tooltip-color);
    visibility: inherit !important
}

.appTooltip__content {
    padding: 0.5rem !important
}

.appTooltip__content,.appTooltip__triangle {
    background-color: var(--tooltip-background)
}

.appTooltip,.appTooltip__triangle {
    box-shadow: 0 0 1px var(--dropdown-shadow-color)
}

.toolTip-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center
}

.chart-dropdown {
    background-color: var(--app-background-box)
}

.chart-box-active .chart-trade {
    border: 1px solid var(--prime) !important
}

.chart-box .chart-trade {
    border: 1px solid var(--app-border)
}

.chart-dropdown__content {
    padding: 4px 0px
}

.chart-fullscreen {
    background-color: var(--app-background-box)
}

.chart-dropdown-tab .chart-dropdown-tab__active:after {
    color: var(--app-color) !important
}

.chart-dropdown-tab {
    color: var(--app-color) !important
}

.chart-dropdown-tab:after {
    background-color: var(--prime) !important
}

.chart-template-save,.chart-template-button {
    background-color: transparent !important
}

.chart-template-save-input {
    color: var(--app-color) !important
}

.chart-dropdown__search input {
    border-radius: 3px !important;
    border: 1px solid var(--app-border)
}

.chart-dropdown .select-line:after {
    background: var(--app-color) !important
}

.chart-modal__content-item {
    padding: 4px
}

.chart-dropdown__indicator-button_apply {
    background-color: var(--prime) !important;
    border-color: var(--prime) !important;
    color: var(--app-color) !important
}

.charts-indicators-controls li:hover {
    background-color: var(--app-background-box)
}

.chart-box {
    overflow: hidden
}

.charts-indicators-controls li {
    margin-bottom: 2px;
    background: var(--tab-background);
    border: 1px solid var(--app-border) !important
}

.notify-box {
    border-radius: unset !important;
    color: var(--app-color) !important;
    background-color: var(--app-background-box)
}

.notify-box_error {
    border-left: 5px solid var(--notify-box-error-background) !important
}

.notify-box_info {
    border-left: 5px solid var(--notify-box-info-background) !important
}

.notify-box_success {
    border-left: 5px solid var(--notify-box-success-background) !important
}

.appTable__theadTh {
    background-color: var(--app-background-header) !important;
    padding: 0.6rem !important;
    vertical-align: center !important;
    border: 1px solid transparent;
    border-top: none
}

.appTablePagination__button {
    color: var(--app-color) !important
}

.appTablePagination__button_active {
    color: var(--app-color) !important;
    border: 1px solid var(--prime) !important
}

.appTable__tfooter {
    border-top: 1px solid var(--app-border) !important
}

.appTable__theadThTitle_sort .appTable__theadThCaret {
    color: var(--app-color)
}

.appTable__theadThTitle_sort .appTable__theadThCaret svg {
    fill: var(--app-color)
}

.appTable__theadThTitle_sort:hover .appTable__theadThCaret {
    color: var(--app-color)
}

.appTable__theadThTitle_sort:hover .appTable__theadThCaret svg {
    fill: var(--app-color)
}

.appTable__tfooter-total {
    padding: 6px 4px;
    border-bottom: 1px solid var(--app-border)
}

.sbxTable__main {
    min-height: 100px !important
}

.historyCalendar_day_inactive {
    color: var(--prime) !important
}

.sbxTableDate__datePicker {
    background-color: var(--app-background) !important
}

.historyCalendar__daysLabel {
    color: var(--app-color) !important
}

.historyCalendar__headerButton {
    fill: var(--app-color) !important
}

.historyCalendar__headerTitle select {
    color: var(--app-color) !important;
    border-color: var(--app-color) !important
}

.historyCalendar_day:hover {
    border-color: var(--app-color) !important
}

.sbxTableDate__datePickerFooter button:last-child,.historyCalendar_day_selected {
    background-color: var(--prime) !important
}

body .sbxTable__headerBtnFilters svg {
    margin-left: 5px !important
}

body .sbxTableModal {
    overflow: hidden;
    z-index: 999 !important
}

body .sbxTableModal button {
    cursor: pointer
}

body .sbxTable__columnsSettingsField {
    background: var(--app-background-box);
    border-color: var(--color-transparent-hint);
    z-index: 2
}

body .sbxTableCheckbox__value {
    border-color: var(--color-transparent-hint)
}

body span.sbxTable__headerBtnFiltersCount {
    border-color: var(--bg-color)
}

body .sbxTableModal,body .sbxTable__searchFilters {
    background: var(--app-background-box)
}

body .sbxTableModal__header {
    background: var(--bg-color-hint)
}

body .sbxTableModal__header,body .sbxTable__searchFilters {
    border-color: var(--color-transparent-hint)
}

body .sbxTable__allFiltersItem {
    border-color: var(--color-transparent-hint)
}

body .sbxTableModal__headerBtnClose svg {
    fill: #fff
}

body .sbxTableModal__headerBtnClose:hover {
    background: var(--color-transparent-hint)
}

body .sbxTable__tableThColWrap,body .sbxTable__tableThCol {
    background: var(--app-background-box)
}

body .sbxTable__tableThColWrap,body .sbxTable__tableTbodyTr {
    border-color: var(--app-border)
}

body .sbxTable__tableThCol {
    height: 40px !important
}

body .sbxTable__tableThCol:hover {
    background: var(--app-background-box-hover)
}

body .sbxTable__tableThResize,body .sbxTable__tableTd_active {
    background: var(--app-background)
}

body .sbxTable__tableThBtnSettings {
    background: var(--app-background-box);
    border-color: var(--app-border);
    cursor: pointer
}

body .sbxTable__tableThBtnSettings:hover {
    background: var(--app-background)
}

body .sbxTable__tableTbodyTr:hover {
    background: var(--app-background-box-hover)
}

body .sbxTableDropdown,body .sbxTableSelect__list {
    background: var(--app-background-box);
    border-color: var(--app-border)
}

body .sbxTableSearch select,body .sbxTableSearch input,body .sbxTableSelect__value {
    border-color: var(--color-transparent-secondary);
    color: var(--app-color)
}

body .sbxTable__filterBtnReset {
    cursor: pointer;
    border-color: var(--app-border)
}

body .sbxTableSelect__listItemCheckbox {
    border-color: var(--app-border)
}

body .sbxTableSelect__listItemCheckbox_checked {
    border-color: #2962ff
}

body .sbxTable__tableThOrder {
    background: var(--prime)
}

body .sbxTable__tableThOrder svg {
    fill: var(--prime)
}

body .sbxTable__headerBtn {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    border-color: var(--bg-color-secondary);
    cursor: pointer;
    padding: 0 8px
}

body .sbxTable__headerBtn:hover {
    background: var(--color-transparent-hint)
}

body .sbxTable__headerBtnGroup,body .sbxTable__headerBtn {
    border-color: var(--bg-color-secondary) !important
}

body .sbxTable__headerBtnGroup .sbxTable__headerBtn:last-child {
    border-color: var(--bg-color-secondary) !important
}

body .sbxTable__headerBtnFilters {
    border: none;
    background: var(--prime)
}

body .sbxTable__headerBtnFilters:hover {
    background: var(--prime)
}

body .sbxTable__headerBtnFilters svg {
    margin: 0
}

body .sbxTable__headerBtnTimerBg {
    background: var(--prime);
    opacity: 0.4
}

body .sbxTable__roller svg {
    stroke: var(--color-transparent-secondary)
}

body .sbxTableSelect {
    display: inline-block
}

body .sbxTableSelect__value {
    display: flex;
    flex-direction: row;
    align-items: center
}

body .sbxTable__pagination {
    background-color: var(--app-background-header) !important
}

body .sbxTable__pagination span,body .sbxTable__pagination select {
    background-color: var(--app-background-header) !important;
    color: var(--app-color) !important
}

.sbxTableSelect__listSearch {
    background-color: var(--app-background-header) !important
}

.sbx-heatmap-body {
    height: 100%;
    z-index: 9
}

.confirm-content {
    padding: 1rem 1.3rem;
    text-align: center
}

.confirm-content .confirm-actions {
    margin-top: 1.2rem
}

.confirm-content .confirm-actions>a {
    padding: 0.5rem 1rem;
    border-radius: 3px;
    color: var(--white);
    cursor: pointer
}

.confirm-content .confirm-actions .confirm-btn-cancel {
    background: var(--red)
}

.confirm-content .confirm-actions .confirm-btn-approve {
    background: var(--green);
    margin-left: 5px
}

.sbxFormField__input,.sbxFormField__input_focus,.sbxFormField__select,.sbxFormField__selectCustom,.PhoneInputInput {
    background: var(--app-background-section) !important;
    border: 1px solid var(--app-border) !important;
    border-radius: 3px !important;
    color: var(--app-color) !important
}

.sbxFormField__datePickerDay {
    background-color: var(--input-background) !important
}

.sbxFormField__datePickerDay_selected {
    background-color: var(--blue) !important
}

.sbxFormField__datePicker {
    background-color: var(--app-background-box) !important;
    border-color: var(--app-border) !important;
    right: 0 !important;
    left: auto !important;
    z-index: 9999 !important
}

.sbxFormField__selectCustomOptionsListItem {
    background-color: var(--app-background-box) !important
}

.sbxFormField__selectCustomOptions {
    z-index: 20000 !important;
    border: none !important;
    margin-top: 2px;
    background: var(--app-background-box) !important
}

.sbxFormField__selectCustomOptionsSearch {
    background: var(--app-background-section) !important;
    border-radius: 0;
    padding: 4px;
    margin: 0;
    outline: none;
    border-bottom: 1px solid var(--app-border)
}

.sbxFormField__selectCustom_focus {
    border: none;
    box-shadow: none
}

.sbxFormField__selectCustomOptionsListItem_selected,.sbxFormField__selectCustomOptionsListItem:hover {
    background-color: var(--app-background-box-active) !important
}

.sbxFormField__input_valid:focus,.sbxFormField__input_valid.sbxFormField__input_focus,.sbxFormField__input_focus.sbxFormField__select_valid,.sbxFormField__input_focus.sbxFormField__selectCustom_valid,.sbxFormField__select_valid:focus,.sbxFormField__selectCustom_valid:focus,.sbxFormField__selectCustom_valid.sbxFormField__selectCustom_focus {
    box-shadow: none
}

.sbxFormField {
    margin-top: 10px
}

.searchable-input input {
    height: 2.2rem;
    font-size: 0.85rem !important;
    padding: 0.5rem 0.9rem !important;
    line-height: 1em;
    color: var(--app-color) !important;
    border-radius: 3px !important;
    width: 100px !important
}

.searchable-input-arrow-inner {
    height: 10px !important;
    width: 10px !important
}

.searchable-input-arrow {
    top: 0.7rem !important;
    right: 0.7rem !important
}

.tpsl-form-row .searchable-input {
    background-color: var(--app-background-section) !important
}

input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active,input:-webkit-autofill:valid,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px var(--app-background-section) inset !important;
    -webkit-text-fill-color: var(--app-color) !important
}

.checkbox-wrapper {
    display: flex !important
}

.checkbox-wrapper input {
    margin-right: 1rem;
    margin-left: 1rem
}

.checkbox-wrapper span {
    text-align: left
}

.sbxFormField__invalidFeedback {
    position: absolute;
    top: 2px;
    right: 8px;
    text-align: right
}

.PhoneInputCountry {
    width: 56px;
    margin-right: 5px !important;
    background: var(--app-background-section) !important;
    border: 1px solid var(--app-border) !important
}

.PhoneInputCountry .PhoneInputCountryIcon {
    width: 26px !important;
    height: 16px !important
}

.PhoneInput {
    flex: 1
}

.sbxFormField__input-wrapper,.sbxFormField__control-wrapper {
    display: flex
}

.PhoneInputInput_invalid .PhoneInputInput {
    border-color: var(--red)
}

.PhoneInputInput {
    height: 3.8rem !important
}

.PhoneInputInput_invalid {
    border-color: var(--red)
}

.PhoneInputInput:focus,.PhoneInputInput:active {
    outline: none;
    border-color: var(--brand-color);
    outline: 0
}

.input-step svg {
    fill: var(--app-color) !important
}

.sbxFormField__selectCustom {
    background-color: var(--app-background-section) !important;
    border: 1px solid var(--app-border) !important;
    color: var(--app-color) !important;
    height: 2.5rem !important;
    justify-content: left;
    align-items: center;
    display: flex !important;
    border-radius: 3px !important;
    background-position: top 1.2rem right 0.75rem !important
}

.sbxFormField__selectCustomOptionsListItem {
    background-color: var(--app-background-section) !important;
    height: 3rem !important;
    align-items: center;
    display: flex !important
}

.sbxFormField__selectCustomOptionsListItem_selected {
    color: var(--prime) !important
}

.sbxFormField__selectCustomOptions {
    border: 1px solid var(--app-border) !important
}

.checkbox .checkmark {
    border: 1px solid var(--app-border)
}

.input-md {
    height: 2.4rem !important
}

.input-lg {
    height: 3.5rem !important
}

.input-xlg {
    height: 4.5rem !important
}

.price-box {
    font-weight: 400;
    font-size: 0.8rem
}

.price-box span {
    font-size: 1.1rem;
    font-weight: 800
}

body {
    --bg-color: #131722;
    --bg-color-hint: #353742;
    --bg-contrast-color: #fff;
    --color: #b2b5be;
    --color-secondary: #787b86;
    --color-hint: #60626b;
    --prime-secondary: #2c60ef;
    --color-transparent: rgba(255, 255, 255, 0.5);
    --color-transparent-secondary: rgba(255, 255, 255, 0.3);
    --color-transparent-hint: rgba(255, 255, 255, 0.1);
    --color-contrast-transparent: rgba(0, 0, 0, 0.5);
    --color-contrast-transparent-secondary: rgba(0, 0, 0, 0.3);
    --color-contrast-transparent-hint: rgba(0, 0, 0, 0.1);
    --color-prime: #2961ff;
    --button-disabled-background: rgba(0, 0, 0, 0.8);
    --bg-modal: #1e222d;
    --dropdown-bg-color: #1e222d;
    --dropdown-color: #f2f2f2;
    --tooltip-bg-color: #000;
    --tooltip-color: #fff
}

body.light {
    --bg-gradient: #fff;
    --bg-color: #fff;
    --bg-color-hint: #c9ced1;
    --bg-contrast-color: #f3f6f7;
    --color: #000;
    --color-secondary: #5c5e5f;
    --color-hint: #363839;
    --color-transparent: rgba(0, 0, 0, 0.3);
    --color-transparent-secondary: rgba(0, 0, 0, 0.1);
    --color-transparent-hint: rgba(0, 0, 0, 0.05);
    --color-contrast-transparent: rgba(255, 255, 255, 0.3);
    --color-contrast-transparent-secondary: rgba(255, 255, 255, 0.1);
    --color-contrast-transparent-hint: rgba(255, 255, 255, 0.05);
    --button-disabled-background: rgba(0, 0, 0, 0.8);
    --bg-modal: #fff;
    --dropdown-bg-color: #fff;
    --dropdown-color: #000;
    --tooltip-bg-color: #000
}

.cursor-pointer {
    cursor: pointer
}

.main__grid.horizontal>.mainBlock:last-child {
    left: 0 !important;
    bottom: 0 !important;
    width: 100% !important
}

.input_up_text {
    position: absolute;
    right: 0;
    top: 10px;
    z-index: 1
}

.pos-relative {
    position: relative
}

.auth-inputs .sbxFormField__input,.auth-inputs .sbxFormField__select,.auth-inputs .sbxFormField__selectCustom {
    display: block;
    position: relative;
    width: 100%;
    height: 3.8rem;
    padding: 0.5rem 0.9rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-clip: padding-box;
    border: none;
    border-bottom: 1px solid var(--input-border-default);
    border-radius: 0.2rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out
}

.auth-inputs .sbxFormField__input:focus,.auth-inputs .sbxFormField__select:focus,.auth-inputs .sbxFormField__selectCustom:focus {
    border-bottom: 1px solid var(--input-border-focus);
    box-shadow: none
}

.auth-inputs .sbxFormField__input_invalid,.auth-inputs .sbxFormField__select_invalid,.auth-inputs .sbxFormField__selectCustom_invalid {
    border-bottom: 1px solid var(--input-border-invalid)
}

.auth-inputs .sbxFormField__input_valid,.auth-inputs .sbxFormField__select_valid,.auth-inputs .sbxFormField__selectCustom_valid {
    border-bottom: 1px solid var(--input-border-valid)
}

.auth-inputs .sbxFormField__input_invalid:focus,.auth-inputs .sbxFormField__input_valid:focus,.auth-inputs .sbxFormField__select_invalid:focus,.auth-inputs .sbxFormField__select_valid:focus,.auth-inputs .sbxFormField__selectCustom_invalid:focus,.auth-inputs .sbxFormField__selectCustom_valid:focus {
    border-bottom: 1px solid var(--input-border-default);
    box-shadow: none
}

.auth-inputs .btn-primary {
    background-color: var(--prime);
    height: 40px;
    width: 100%;
    border-radius: 4px;
    color: var(--white)
}

aside {
    width: 25%;
    max-width: 300px;
    display: flex
}

.app-aside-section {
    margin: 4px 0 4px 0;
    background: var(--app-background-section);
    display: flex
}

.tab-section {
    display: flex;
    flex: 1;
    flex-direction: column;
    background: var(--app-background-section)
}

hr {
    border-top: none;
    border-color: var(--app-border)
}

.confirm-actions a {
    display: inline-block
}

.modal .confirm-content {
    padding-top: 40px
}

table {
    border-collapse: collapse
}

body .appDropdown {
    z-index: 1000
}

body .appDropdown,body .appDropdown__triangle {
    border: 1px solid var(--color-transparent-hint);
    background: var(--bg-color-secondary)
}

body .appDropdown__content {
    background: none
}

#root {
    background: var(--bg-color-secondary);
    flex: 1;
    display: flex;
    height: 100vh;
    width: 100vw
}

.order-clipboard {
    cursor: pointer;
    border: 1px solid var(--color-transparent-hint);
    background: var(--color-transparent-hint);
    padding: 2px 3px;
    border-radius: 3px;
    display: inline-block
}

.order-clipboard:hover {
    border-color: var(--color-transparent-secondary)
}

body .select-line:after {
    background-color: var(--color)
}

body .select__inner {
    background-color: var(--color-transparent-hint)
}

body .select__list,body .field-list {
    background-color: var(--bg-color-secondary) !important
}

body .field-list .field-list-item {
    color: var(--color)
}

body .select:focus .select__inner {
    background-color: var(--color-transparent-secondary) !important
}

body .field {
    background-color: var(--color-transparent-hint)
}

body .field .field-dec,body .field .field-inc {
    background-color: var(--color-transparent-hint)
}

body .field input,body .field button {
    color: var(--color)
}

body .field svg path {
    fill: var(--color)
}

.risk-warning-box {
    display: block;
    height: 40px;
    font-size: 0.9rem;
    text-align: center;
    padding: 5px 10%;
    font-weight: 400
}

.warning-box-login {
    border: 1px solid var(--app-border);
    padding: 0.7rem;
    padding-top: 1rem;
    border-radius: 4px;
    font-weight: 500;
    display: block;
    position: relative;
    font-size: 0.85rem;
    color: var(--grey-100)
}

.warning-box-login b {
    position: absolute;
    color: var(--color);
    top: -0.5rem;
    font-size: 0.85rem;
    background-color: var(--app-background-section)
}

.sbxTableModal__main .sbxTable__searchFilters {
    height: 35px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end
}

.sbxTableModal__main .sbxTable__searchFilters svg,.sbxTableModal__main .sbxTable__searchFilters input {
    display: none
}

.sbxTableSearch__select option {
    color: var(--color);
    background-color: var(--bg-color)
}

.appPopUp {
    position: fixed;
    background: var(--bg-color-secondary);
    border-radius: 3px;
    padding: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    min-width: 80px;
    min-height: 40px;
    z-index: 999
}

.appPopUp_left {
    left: 10px;
    top: 50%;
    transform: translateY(-50%)
}

.appPopUp_leftStart {
    left: 10px;
    top: 10px
}

.appPopUp_leftEnd {
    left: 10px;
    bottom: 10px
}

.appPopUp_right {
    right: 10px;
    top: 50%;
    transform: translateY(-50%)
}

.appPopUp_rightStart {
    right: 10px;
    top: 10px
}

.appPopUp_rightEnd {
    right: 10px;
    top: 10px
}

.appPopUp_center {
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0)
}

.appPopUp_centerStart {
    left: 50%;
    top: 10px;
    transform: translate3d(-50%, 0, 0)
}

.appPopUp_centerEnd {
    left: 50%;
    bottom: 10px;
    transform: translate3d(-50%, 0, 0)
}

.appPopUp__btnClose {
    cursor: pointer;
    padding: 2px;
    background-color: var(--color-transparent-hint);
    border-radius: 2px;
    border: none;
    height: unset;
    width: unset;
    position: absolute;
    right: 2px;
    top: 2px;
    display: flex
}

.appPopUp__btnClose svg {
    height: 11px;
    width: 11px;
    fill: var(--color-transparent-secondary)
}

.appPopUp__btnClose:hover {
    background-color: var(--color-transparent-secondary)
}

.appPopUp__btnClose:hover svg {
    fill: var(--app-color)
}

._92545 {
    position: fixed;
    top: 30px;
    right: 30px;
    z-index: 999
}

._57312 {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.05);
    backdrop-filter: blur(2px)
}

.b0d15 {
    position: absolute;
    top: 0;
    right: 0;
    border-radius: 3px;
    background: var(--bg-color-secondary);
    color: var(--color);
    width: 230px;
    height: 60px;
    margin-bottom: 8px;
    box-shadow: 0 0 5px 2px rgba(0,0,0,0.15);
    transition: transform 250ms ease;
    overflow: hidden
}

.b0d15:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: var(--color-transparent-hint)
}

._1deec:before {
    background-color: #2CAC40
}

._6385d:before {
    background-color: #bd1313
}

._4b8f7:before {
    background-color: var(--prime)
}

.b0d15:last-child {
    cursor: pointer
}

._3b4c2 {
    height: unset
}

._2cdaf {
    padding: 12px;
    height: 100%
}

._2cdaf:hover .e147c {
    background-color: var(--bg-color-secondary);
    border-color: var(--color-transparent-hint)
}

.e147c {
    display: inline-block;
    border-radius: 3px;
    padding: 2px 5px;
    margin: -2px -5px;
    border: 1px solid transparent;
    user-select: none
}

.e147c:hover {
    background-color: var(--bg-color-hint) !important
}

aside {
    flex: 1;
    position: relative
}

.app-aside-section {
    border-radius: 3px;
    margin-right: 4px
}

.aside__split {
    position: absolute;
    left: -4px;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize
}

.openOrder-body {
    display: flex;
    flex-direction: column;
    padding: 15px
}

.openOrder {
    margin: 0 -2px
}

.openOrder-row {
    display: flex;
    justify-content: space-between
}

.openOrder-openPrice {
    justify-content: unset
}

.openOrder-field {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-top: 3px;
    padding-bottom: 3px
}

.openOrder-field .sbxFormField {
    margin-top: 0
}

.openOrder-field .sbxFormField__input {
    width: 140px
}

.openOrder-field .title {
    font-weight: 600
}

.openOrder-row .openOrder-field:first-child {
    flex: 1 !important
}

.openOrder-calculation-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 0.85rem;
    padding: 0 15px
}

.openOrder-calculation-item .title {
    font-weight: 600
}

.openOrder-submit {
    width: 100%;
    display: flex;
    justify-content: space-between
}

.openOrder-button,.modifyOrder-button {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    border-radius: 4px;
    height: 50px;
    cursor: pointer;
    color: var(--button-color);
    width: 100%;
    background-color: var(--green);
    font-weight: 900;
    font-size: 1rem;
    text-transform: uppercase
}

.modifyOrder-button {
    background-color: var(--button-disabled-background)
}

.openOrder-button.disabled {
    background-color: var(--button-disabled-background);
    cursor: default
}

.openOrder-button.disabled {
    background-color: var(--button-disabled-background) !important;
    cursor: unset
}

.openOrder-button.sell {
    background-color: var(--red)
}

.openOrder-button.buy {
    background-color: var(--green)
}

.openOrder-button .title,.openOrder-button .quote {
    position: absolute
}

.openOrder-button .title {
    top: 15px;
    font-size: 1.1rem
}

.openOrder-button .quote {
    font-size: 1.8rem;
    bottom: 5px
}

.openOrder-submit .openOrder-button.sell .title {
    right: 15px
}

.openOrder-submit .openOrder-button.buy .title {
    left: 15px
}

.openOrder-submit .openOrder-button.sell .quote {
    left: 15px
}

.openOrder-submit .openOrder-button.buy .quote {
    right: 15px
}

.modal .openOrder {
    width: 360px
}

.trade-panel-info {
    color: var(--app-color-disabled)
}

.trade-pending-desc {
    align-items: center
}

.trade-pending-desc img {
    height: 85px
}

.trade-pending-desc p {
    padding-left: 5px;
    color: var(--app-color-disabled)
}

.form-fadeIn-enter {
    opacity: 0.01
}

.form-fadeIn-enter.form-fadeIn-enter-active {
    opacity: 1;
    transition: opacity 200ms ease-in
}

.form-fadeIn-leave {
    opacity: 1
}

.form-fadeIn-leave.form-fadeIn-leave-active {
    opacity: 0.01;
    transition: opacity 200ms ease-in
}

.form-scale-enter {
    transform: scale(0);
    opacity: 0.01
}

.form-scale-enter.form-scale-enter-active {
    transform: unset;
    opacity: 1;
    transition: all 200ms ease-in-out
}

.form-scale-leave {
    transform: unset;
    opacity: 1
}

.form-scale-leave.form-scale-leave-active {
    transform: scale(0);
    opacity: 0.01;
    transition: all 200ms ease-in-out
}

.form-fadeInUp-enter {
    transform: translateY(30px);
    opacity: 0.01
}

.form-fadeInUp-enter.form-fadeInUp-enter-active {
    transform: unset;
    opacity: 1;
    transition: all 200ms ease-in-out
}

.form-fadeInUp-leave {
    transform: unset;
    opacity: 1
}

.form-fadeInUp-leave.form-fadeInUp-leave-active {
    transform: translateY(30px);
    opacity: 0.01;
    transition: all 200ms ease-in-out
}

.sbxFormField {
    position: relative
}

.sbxFormField__label {
    display: inline-block;
    margin-bottom: .5rem
}

.sbxFormField__input,.sbxFormField__select,.sbxFormField__selectCustom,.PhoneInputInput {
    display: block;
    position: relative;
    width: 100%;
    height: 2.5rem;
    padding: .5rem .9rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.2rem;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.sbxFormField__input:focus,.sbxFormField__select:focus,.sbxFormField__selectCustom:focus,.sbxFormField__selectCustom_focus,.sbxFormField__input_focus,.PhoneInputInput:focus,.PhoneInputInput_focus {
    outline: none;
    color: #495057;
    background-color: #fff;
    border-color: #8dbdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.2)
}

.sbxFormField__input_valid,.sbxFormField__select_valid,.sbxFormField__selectCustom_valid,.PhoneInputInput_valid {
    border-color: #28a745;
    padding-right: calc(1.5em + .75rem);
    background-image: url(https://cdn57.com/platform-assets/desktop/success.svg);
    background-repeat: no-repeat;
    background-position: top .75rem right .9rem;
    background-size: 1rem 1rem
}

.sbxFormField__input_valid:focus,.sbxFormField__input_valid.sbxFormField__input_focus,.sbxFormField__input_focus.sbxFormField__select_valid,.sbxFormField__input_focus.sbxFormField__selectCustom_valid,.sbxFormField__select_valid:focus,.sbxFormField__selectCustom_valid:focus,.sbxFormField__selectCustom_valid.sbxFormField__selectCustom_focus,.PhoneInputInput_valid:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40,167,69,0.25)
}

.sbxFormField__input_invalid,.sbxFormField__select_invalid,.sbxFormField__selectCustom_invalid,.PhoneInputInput_invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url(https://cdn57.com/platform-assets/desktop/error.svg);
    background-repeat: no-repeat;
    background-position: top .75rem right .9rem;
    background-size: .8rem .8rem
}

.sbxFormField__input_invalid:focus,.sbxFormField__input_invalid.sbxFormField__input_focus,.sbxFormField__input_focus.sbxFormField__select_invalid,.sbxFormField__input_focus.sbxFormField__selectCustom_invalid,.sbxFormField__select_invalid:focus,.sbxFormField__selectCustom_invalid:focus,.sbxFormField__selectCustom_invalid+.sbxFormField__selectCustom_focus,.sbxFormField__selectCustom_invalid.sbxFormField__selectCustom_focus,.PhoneInputInput_invalid:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220,53,69,0.25)
}

.sbxFormField__invalidFeedback {
    width: 100%;
    margin-top: .25rem;
    font-size: 80%;
    color: #dc3545
}

.sbxFormField__inputFile {
    overflow: hidden;
    white-space: nowrap;
    display: flex;
    align-items: center
}

.sbxFormField__inputFile:after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    padding: .375rem .75rem;
    line-height: 1.5;
    color: #495057;
    content: "Browse";
    border-left: inherit;
    border-radius: 0 .25rem .25rem 0
}

.sbxFormField__checkbox,.sbxFormField__radio {
    margin-bottom: 0
}

.sbxFormField__checkbox input,.sbxFormField__radio input {
    display: none
}

.sbxFormField__checkbox label,.sbxFormField__radio label {
    margin: 0;
    padding-left: 1.5rem;
    position: relative
}

.sbxFormField__checkbox label:before,.sbxFormField__radio label:before {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    display: block;
    width: 1rem;
    height: 1rem;
    pointer-events: none;
    content: "";
    background-color: #fff;
    border: #adb5bd solid 1px;
    border-radius: .25rem;
    transition: background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out
}

.sbxFormField__checkbox label:after,.sbxFormField__radio label:after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    display: block;
    width: 1rem;
    height: 1rem;
    content: "";
    background: no-repeat 50%/50% 50%
}

.sbxFormField__checkbox label:focus,.sbxFormField__checkbox label_focus,.sbxFormField__radio label:focus,.sbxFormField__radio label_focus {
    outline: none
}

.sbxFormField__checkbox label:focus:before,.sbxFormField__checkbox label_focus:before,.sbxFormField__radio label:focus:before,.sbxFormField__radio label_focus:before {
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25)
}

.sbxFormField__checkbox input:checked+label:before,.sbxFormField__radio input:checked+label:before {
    border-color: #007bff;
    background-color: #007bff
}

.sbxFormField__checkbox input:checked+label:after,.sbxFormField__radio input:checked+label:after {
    background-image: url(https://cdn57.com/platform-assets/desktop/checked.svg)
}

.sbxFormField__checkbox_invalid label,.sbxFormField__radio_invalid label {
    color: #dc3545
}

.sbxFormField__checkbox_invalid label:before,.sbxFormField__radio_invalid label:before {
    border-color: #dc3545
}

.sbxFormField__checkbox_invalid label:focus:before,.sbxFormField__radio_invalid label:focus:before {
    box-shadow: 0 0 0 0.2rem rgba(220,53,69,0.25)
}

.sbxFormField__radio label:before {
    border-radius: 50%;
    background-color: #fff
}

.sbxFormField__radio label:after {
    left: 0.5rem;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    border-radius: 50%;
    background: #fff;
    width: 0.45rem;
    height: 0.45rem
}

.sbxFormField__select,.sbxFormField__selectCustom {
    vertical-align: middle;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: calc(1.5em + .75rem)
}

.sbxFormField__select_multiple {
    height: unset;
    background-image: url(https://cdn57.com/platform-assets/desktop/list.svg)
}

.sbxFormField__selectCustom {
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sbxFormField__selectCustom_multiple {
    background-image: url(https://cdn57.com/platform-assets/desktop/list.svg)
}

.sbxFormField__selectCustomOptions {
    background: #fff;
    border-radius: 0.2rem;
    border: 1px solid #ced4da;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
    z-index: 5;
    user-select: none
}

.sbxFormField__selectCustomOptionsSearch {
    margin: 4px;
    width: calc(100% - 8px)
}

.sbxFormField__selectCustomOptionsSearch:focus {
    outline: none
}

.sbxFormField__selectCustomOptionsList {
    max-height: 220px;
    overflow: auto;
    list-style: none;
    padding: 0;
    margin: 0
}

.sbxFormField__selectCustomOptionsListItem {
    padding: 0.3rem 0.6rem;
    cursor: pointer
}

.sbxFormField__selectCustomOptionsListItem:hover {
    background: rgba(0,0,0,0.05)
}

.sbxFormField__selectCustomOptionsListItem_selected,.sbxFormField__selectCustomOptionsListItem_selected:hover {
    background: #007bff;
    color: #fff
}

.sbxFormField__selectCustomOptionsListItem:last-child {
    border-radius: 0 0 0.2rem 0.2rem
}

.sbxFormField__selectCustomOptionsEmpty {
    padding: 0.3rem 0.6rem;
    opacity: 0.75
}

.sbxFormField__textarea {
    height: unset;
    min-height: 2.5rem
}

.sbxFormField__datePicker {
    background: #fff;
    border-radius: 0.2rem;
    border: 1px solid #ced4da;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.3);
    display: inline-block;
    padding: 10px
}

.sbxFormField__datePickerHeader {
    font-size: 0.8rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.sbxFormField__datePickerControls {
    display: grid;
    grid-template-columns: repeat(3, auto);
    grid-gap: 5px
}

.sbxFormField__datePickerControlButton,.sbxFormField__datePickerButtonSelect {
    cursor: pointer;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border-radius: .2rem;
    background-color: rgba(0,0,0,0.1);
    border: none
}

.sbxFormField__datePickerControlButton:focus,.sbxFormField__datePickerButtonSelect:focus,.sbxFormField__datePickerControlButton:active,.sbxFormField__datePickerButtonSelect:active {
    outline: none
}

.sbxFormField__datePickerControlButton svg,.sbxFormField__datePickerButtonSelect svg {
    fill: #4d4d4d;
    height: 8px
}

.sbxFormField__datePickerControlButton:hover,.sbxFormField__datePickerButtonSelect:hover {
    background-color: rgba(0,0,0,0.08)
}

.sbxFormField__datePickerButtonSelect {
    width: unset;
    padding: 0 4px
}

.sbxFormField__datePickerButtonSelect svg {
    margin-left: 4px
}

.sbxFormField__datePickerBody {
    border-radius: .2rem;
    border: 1px solid rgba(0,0,0,0.1);
    overflow: hidden;
    display: flex;
    flex-direction: row
}

.sbxFormField__datePickerWeekdays,.sbxFormField__datePickerTimesHeader {
    background: rgba(0,0,0,0.03);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 5px 3px;
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 2px;
    font-size: 0.8rem
}

.sbxFormField__datePickerWeekdaysDay {
    flex: 1;
    text-align: center
}

.sbxFormField__datePickerCalendar {
    min-width: 230px
}

.sbxFormField__datePickerYears {
    min-width: 240px;
    height: 140px;
    overflow: auto;
    font-size: 0.8rem
}

.sbxFormField__datePickerYearsItem:focus {
    outline: none
}

.sbxFormField__datePickerYear {
    padding: 4px 8px;
    background-color: rgba(0,0,0,0.05);
    border-bottom: 1px solid rgba(0,0,0,0.1);
    cursor: pointer
}

.sbxFormField__datePickerMonths {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    grid-gap: 5px;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    padding: 5px 0
}

.sbxFormField__datePickerMonth {
    border-radius: .2rem;
    cursor: pointer;
    padding: 5px 0
}

.sbxFormField__datePickerMonth:hover {
    background-color: rgba(0,0,0,0.05)
}

.sbxFormField__datePickerMonth_selected {
    color: #fff;
    background: #007bff
}

.sbxFormField__datePickerMonth_selected:hover {
    color: #fff;
    background: #007bff
}

.sbxFormField__datePickerDays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 2px;
    padding: 5px 3px
}

.sbxFormField__datePickerDay {
    padding: 3px;
    font-size: 0.8rem;
    background: #fff;
    text-align: center;
    border-radius: 0.2rem;
    cursor: pointer
}

.sbxFormField__datePickerDay_currentDay {
    border: 1px solid rgba(0,0,0,0.2)
}

.sbxFormField__datePickerDay_notSelectedMonth {
    opacity: 0.4
}

.sbxFormField__datePickerDay:hover {
    background: rgba(0,0,0,0.05)
}

.sbxFormField__datePickerDay_selected {
    color: #fff;
    background: #007bff
}

.sbxFormField__datePickerDay_selected:hover {
    color: #fff;
    background: #007bff
}

.sbxFormField__datePickerTimesHeader {
    min-width: unset;
    grid-template-columns: 1fr
}

.sbxFormField__datePickerTimes {
    border-left: 1px solid rgba(0,0,0,0.1);
    text-align: center;
    width: 65px;
    display: flex;
    flex-direction: column
}

.sbxFormField__datePickerTimesListWrap {
    position: relative;
    height: 100%;
    flex: 1;
    min-height: 1px
}

.sbxFormField__datePickerTimesList {
    overflow: auto;
    list-style: none;
    padding: 5px 0;
    margin: 0;
    font-size: 0.8rem;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.sbxFormField__datePickerTimesListItem {
    padding: 3px 0;
    margin-bottom: 2px;
    cursor: pointer
}

.sbxFormField__datePickerTimesListItem:last-child {
    margin-bottom: 0
}

.sbxFormField__datePickerTimesListItem:hover {
    background-color: rgba(0,0,0,0.05)
}

.sbxFormField__datePickerTimesListItem_selected {
    color: #fff;
    background: #007bff
}

.sbxFormField__datePickerTimesListItem_selected:hover {
    color: #fff;
    background: #007bff
}

.PhoneInput {
    padding-right: 0
}

.PhoneInputInput,.PhoneInputCountryIcon {
    margin-left: 5px
}

.PhoneInputCountry {
    border-radius: 0.2rem;
    border: 1px solid #ced4da;
    padding: 0 5px
}

.PhoneInputInput_valid input {
    border-color: #28a745;
    padding-right: calc(1.5em + .75rem);
    background-image: url(https://cdn57.com/platform-assets/desktop/success.svg);
    background-repeat: no-repeat;
    background-position: top .75rem right .9rem;
    background-size: 1rem 1rem
}

.PhoneInputInput_valid input:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40,167,69,0.25)
}

.PhoneInputInput_invalid input {
    border-color: #dc3545;
    padding-right: calc(1.5em + .75rem);
    background-image: url(https://cdn57.com/platform-assets/desktop/error.svg);
    background-repeat: no-repeat;
    background-position: top .75rem right .9rem;
    background-size: .8rem .8rem
}

.PhoneInputInput_invalid input:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.2rem rgba(220,53,69,0.25)
}

.form-form__fieldset {
    padding: 20px 0;
    margin: 0;
    border: none
}

.form-form__fieldset_loading {
    filter: blur(2px);
    transition: filter 0.2s ease-in-out
}

.form-form {
    position: relative !important
}

.form-form__preloader,.form-form__success {
    position: absolute;
    left: 0;
    right: 0;
    height: 100%;
    z-index: 1;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 3px
}

.form-form__preloader-icon {
    background-color: #000;
    border-radius: 3px;
    padding: 15px
}

.form-form__preloader-icon svg {
    height: 50px;
    stroke: #fff
}

.input-search {
    width: 100%;
    height: 100%;
    border: none;
    font-size: 1.2rem !important
}

.input-search:focus,.input-search:active {
    border: none;
    outline: none
}

.form-form__success-icon {
    border-radius: 50%;
    background-color: #fff;
    display: block !important;
    box-shadow: 0 0 2px #353535;
    animation: scaleIcon 0.25s ease-in-out
}

.form-form__success-icon svg {
    width: 50px;
    height: 50px
}

.form-form__success-icon svg .svg-success {
    stroke-width: 2px;
    stroke: #3de665;
    fill: none
}

.form-form__success-icon svg .svg-success path {
    stroke-dasharray: 17px, 17px;
    stroke-dashoffset: 0px;
    animation: checkmark 0.25s ease-in-out 0.4s backwards
}

.form-form__success-icon svg .svg-success circle {
    stroke-dasharray: 76px, 76px;
    stroke-dashoffset: 0px;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
    animation: checkmark-circle 0.3s ease-in-out forwards
}

@keyframes scaleIcon {
    0% {
        transform: scale(0)
    }

    100% {
        transform: unset
    }
}

@keyframes checkmark {
    0% {
        stroke-dashoffset: 17px
    }

    100% {
        stroke-dashoffset: 0
    }
}

@keyframes checkmark-circle {
    0% {
        stroke-dashoffset: 76px
    }

    100% {
        stroke-dashoffset: 0px
    }
}

.form-form__success {
    left: -3px;
    right: -3px;
    top: -3px;
    bottom: -3px;
    z-index: 99
}

.sbxFormField__selectCustom-chevron {
    position: absolute;
    right: 10px
}

.tpsl-form {
    width: 100%;
    display: flex
}

.tpsl-form-col {
    display: flex;
    flex-direction: column
}

.tpsl-form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px
}

.tpsl-form-row .searchable-input {
    box-shadow: unset
}

.tpsl-form-row .searchable-input input {
    font-size: 0.85rem
}

.tpsl-form-row .searchable {
    font-family: unset
}

.tpsl-form-row .searchable-list {
    background-color: var(--app-background-box) !important;
    padding: 0;
    box-shadow: none;
    border: 1px solid var(--app-border);
    border-radius: unset;
    top: calc(100% - 1px) !important
}

.tpsl-form-row .searchable-list-item {
    font-size: 0.85rem;
    padding: 7px 14px
}

.tpsl-form-row .searchable-list-item:hover {
    background-color: var(--app-background-box-hover) !important
}

.tpsl-form-row .searchable-input .searchable-input-arrow {
    width: 10px;
    height: 10px
}

.tpsl-form-row .searchable-input {
    border: 1px solid var(--app-border)
}

.tpsl-form-row .searchable-input {
    border-radius: unset
}

.tpsl-form-row input:focus {
    color: var(--info)
}

.tpsl-changeType {
    width: 100%
}

.tpsl-changeType,.tpsl-changeType-item {
    display: flex;
    align-items: center;
    justify-content: space-around
}

.tpsl-changeType-item {
    display: flex;
    align-items: center;
    margin: 0 10px
}

.tpsl-changeType-item .title {
    margin: 0 5px
}

.tpsl-changeType-item:first-child {
    justify-content: flex-end
}

.tpsl-changeType-item:last-child {
    justify-content: flex-start
}

.tpsl-form-col .searchable-list {
    z-index: 100
}

.searchable {
    position: relative;
    font-family: arial;
    z-index: 1
}

.searchable__disabled {
    opacity: 0.8
}

.searchable__disabled,.searchable__disabled *,.searchable__disabled .searchable-input-arrow {
    cursor: not-allowed
}

.searchable__active {
    z-index: 2
}

.searchable,.searchable * {
    box-sizing: border-box
}

.searchable-input {
    position: relative;
    background-color: #252d47;
    border-radius: 5px;
    padding-right: 34px;
    border-bottom: 1px solid transparent
}

.searchable-input input {
    background-color: transparent;
    border: none;
    box-shadow: none;
    font-size: 14px;
    line-height: 1em;
    padding: 14px;
    width: 100%;
    color: #fff;
    position: relative
}

.searchable-input input::-ms-clear {
    display: none
}

.searchable-input input:read-only {
    cursor: pointer
}

.searchable-input input:focus {
    outline: none
}

.searchable-input input::placeholder {
    color: #aab7e1
}

.searchable-input-arrow {
    position: absolute;
    top: 0;
    right: 0;
    width: 34px;
    height: 100%;
    cursor: pointer
}

.searchable-input-arrow-inner {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0;
    cursor: pointer
}

.searchable-input-arrow-inner:focus {
    outline: none
}

.searchable-input-arrow svg {
    fill: #ffffff
}

.searchable-input__active {
    border-radius: 5px 5px 0 0;
    border-bottom: 1px solid #6f7dab
}

.searchable-input__active .searchable-input-arrow-inner {
    transform: translate(-50%, -50%) rotate(-180deg)
}

.searchable-input-control-assume {
    color: #aab7e1;
    position: absolute;
    left: 14px;
    top: 50%;
    font-size: 14px;
    transform: translateY(-50%)
}

.searchable-input-control-assume-char__hidden {
    color: transparent
}

.searchable-input-control-assume-char__upper {
    letter-spacing: -0.6px
}

.searchable-list {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    overflow: auto;
    background-color: #252d47;
    padding: 10px 0;
    display: none;
    border-radius: 0 0 5px 5px;
    font-size: 14px
}

.searchable-list__visible {
    display: block
}

.searchable-list-empty {
    color: #eee;
    text-align: center;
    padding: 10px;
    line-height: 1em
}

.searchable-list-item {
    color: #aab7e1;
    padding: 10px 14px;
    line-height: 1em;
    cursor: pointer;
    transition: all 0.3s;
    position: relative
}

.searchable-list-item-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    width: 10px;
    height: 10px;
    font-size: 0
}

.searchable-list-item-arrow svg {
    width: 100%;
    height: auto;
    fill: #fff
}

.searchable-list-item:hover {
    color: #fff;
    background-color: #1a1e30
}

.searchable-list-item__active {
    color: #fff
}

.searchable-list-item__arrow-position {
    padding-left: 20px
}

.searchable-list,.searchable-input {
    transition: box-shadow 0.3s
}

.searchable-list__visible,.searchable-list__active,.searchable-input__visible,.searchable-input__active {
    box-shadow: 0 2px 9px 0 rgba(0,0,0,0.5)
}

.input-step {
    position: relative
}

.input-step svg {
    position: absolute;
    right: 5px;
    cursor: pointer
}

.input-step.disabled svg {
    cursor: unset
}

.input-step.disabled svg {
    fill: var(--app-icon)
}

.input-step .up {
    top: 5px
}

.input-step .down {
    bottom: 5px
}

.input-step svg {
    width: 8px;
    height: 8px;
    fill: var(--white)
}

.asset-info {
    display: flex;
    flex: 1;
    flex-direction: column
}

.asset-info .asset-info-title {
    padding-bottom: 10px;
    font-size: 1.2rem;
    font-weight: 600
}

.asset-info-body {
    display: flex;
    flex: 1;
    width: 100%;
    flex-direction: column;
    overflow: auto;
    padding: 10px
}

.asset-info-box {
    display: flex;
    align-items: center;
    margin-top: 0.4rem;
    flex-direction: row;
    justify-content: space-between
}

.asset-info-box .title {
    color: var(--app-color-disabled)
}

.tradePeriods {
    display: flex;
    margin-bottom: 6px
}

.tradePeriods-title {
    width: 40px
}

.tradePeriods-list-item {
    display: flex;
    width: 100%
}

.tradePeriods-list-item:not(:first-child) {
    margin-top: 5px
}

.market-stats {
    font-size: 1rem;
    border-collapse: collapse
}

.market-stats th,.market-stats td {
    padding: 3px 3px;
    font-size: 0.85rem
}

.market-stats th {
    font-weight: unset;
    text-align: left
}

.market-stats tbody td:not(:first-child) {
    font-weight: 500
}

.performance {
    display: flex;
    flex-direction: column;
    width: 100%
}

.performance-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px
}

.performance-row .title {
    color: var(--app-color-disabled);
    margin-bottom: 5px;
    font-size: 1rem
}

.market-sentiment-chart {
    position: relative;
    height: 4px;
    margin-bottom: 5px
}

.market-sentiment-chart .chart {
    position: absolute;
    top: 0;
    bottom: 0;
    height: 100%
}

.chart-sellers {
    left: 0;
    background-color: var(--red);
    border-bottom-left-radius: 3px;
    border-top-left-radius: 3px
}

.chart-buyers {
    right: 0;
    background-color: var(--green);
    border-bottom-right-radius: 3px;
    border-top-right-radius: 3px
}

.market-sentiment-total {
    display: flex;
    justify-content: space-between
}

.sbxMicroChart {
    display: flex;
    flex-direction: row
}

.sbxMicroChart__limits {
    margin-right: 6px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 9px;
    color: #ccc
}

.sbxMicroChart__limits span {
    display: inline-block
}

.sbxMicroChart__limits span:first-child {
    transform: translateY(-50%)
}

.sbxMicroChart__limits span:last-child {
    transform: translateY(50%)
}

.market-depth-wrapper {
    width: 100%
}

.market-depth-row {
    display: flex;
    flex-direction: row;
    font-size: 0.9rem
}

.market-depth-row .market-depth-column {
    display: flex;
    flex-direction: column;
    flex: 1
}

.market-depth-row .market-depth-column:first-child {
    align-items: end
}

.market-depth-row .market-depth-box {
    width: 100%;
    flex: 1;
    display: flex;
    justify-content: space-between;
    padding: 5px 10px 3px
}

.market-depth-row .market-depth-bar {
    height: 3px
}

.market-depth-row .market-depth-bar-sell {
    background: var(--red)
}

.market-depth-row .market-depth-bar-buy {
    background: var(--green)
}

.iq-signal-wrapper {
    width: 100%
}

.iq-signal-box {
    position: relative;
    min-height: 100px;
    padding-bottom: 30px
}

.iq-signal-link {
    position: absolute;
    bottom: 0;
    right: 0;
    padding: 3px 10px;
    border-radius: 20px 0 0 20px;
    background-color: var(--app-background)
}

.iq-signal-link svg {
    width: 32px;
    height: 16px
}

.iq-signal-row {
    display: flex;
    flex: 1;
    flex-direction: row;
    padding: 5px
}

.iq-signal-col {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
    align-items: center
}

.miniTradePanel {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 110px
}

.miniTradePanel .miniTradePanel-body-hide {
    display: none
}

.miniTradePanel:hover .miniTradePanel-body-hide {
    display: flex
}

.miniTradePanel-head,.miniTradePanel-body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative
}

.miniTradePanel-head {
    padding: 5px 10px 0
}

.miniTradePanel-body {
    height: 70px;
    width: 100%;
    padding: 10px
}

.miniTradePanel-box {
    height: 100%
}

.miniTradePanel-box-left,.miniTradePanel-box-right {
    flex: 3
}

.miniTradePanel-box-left {
    justify-content: flex-start
}

.miniTradePanel-box-right {
    justify-content: flex-end
}

.miniTradePanel-box-center {
    justify-content: center;
    position: absolute;
    left: 50%;
    bottom: 10px;
    transform: translate3d(-50%, 0, 0);
    margin: 0 0;
    flex: 1
}

.tradePanel-input {
    width: 90px;
    margin: auto;
    height: 25px;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    background: var(--bg-color-secondary);
    border: 1px solid var(--bg-color-secondary);
    box-shadow: 0 0 5px 1px rgba(0,0,0,0.2)
}

.tradePanel-input input {
    background: var(--app-background-box)
}

.tradePanel-input.valid {
    border-color: var(--green)
}

.tradePanel-input.invalid {
    border-color: var(--red)
}

.tradePanel-input-button {
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-color-secondary);
    color: var(--color);
    cursor: pointer;
    min-width: 20px !important;
    user-select: none;
    border: 1px solid transparent
}

.tradePanel-input-button:hover {
    background-color: var(--app-color-disabled)
}

.tradePanel-input-button.minus {
    right: calc(100% - 1px)
}

.tradePanel-input-button.plus {
    left: calc(100% - 1px)
}

.tradePanel-input input {
    font-size: 0.85rem;
    text-align: center;
    color: var(--color);
    border: none;
    height: 100%;
    outline: none;
    width: 100%
}

.tradeButton {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    justify-content: space-between;
    border: 1px solid transparent;
    color: #fff
}

.tradeButton svg {
    fill: #fff
}

.tradeButton.disabled {
    cursor: default;
    background-color: var(--button-disabled-background) !important;
    border: 1px solid var(--app-border-disable)
}

.tradeButton.button-sell {
    background-color: var(--red);
    border-radius: 3px 3px 3px 3px
}

.tradeButton.button-buy {
    background-color: var(--green);
    border-radius: 3px 3px 3px 3px
}

.tradeButton.button-sell:hover {
    background-color: #d63733
}

.tradeButton.button-buy:hover {
    background-color: #00a46d
}

.tradeButton-title {
    flex: 1;
    padding: 2px 5px;
    font-size: 1rem;
    align-items: center;
    font-weight: 800
}

.tradeButton-quote {
    flex: 1;
    padding: 2px 5px;
    display: flex;
    align-items: center
}

.tradeButton-quote svg {
    fill: var(--white)
}

.tradeButton.button-sell .tradeButton-title {
    text-align: right
}

.tradeButton.button-buy .tradeButton-title {
    text-align: left
}

.tradeButton-stat {
    position: absolute;
    top: calc(100% + 1px);
    text-align: center;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    width: 86px;
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    padding: 5px;
    justify-content: center;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px
}

.tradeButton.button-sell .tradeButton-stat {
    left: 0;
    border-bottom: 1px solid var(--red);
    border-left: 1px solid var(--red);
    border-right: 1px solid var(--red);
    color: var(--red)
}

.tradeButton.button-buy .tradeButton-stat {
    right: 0;
    border-bottom: 1px solid var(--green);
    border-left: 1px solid var(--green);
    border-right: 1px solid var(--green);
    color: var(--green)
}

.appTooltip {
    position: absolute;
    z-index: 9999;
    max-width: 400px;
    border-radius: 2px
}

.appTooltip__content {
    padding: 4px 5px;
    position: relative;
    z-index: 2;
    font-size: .85rem;
    font-weight: normal;
    font-family: inherit;
    line-height: 1rem;
    border-radius: 2px
}

.appTooltip__triangle {
    position: absolute;
    z-index: 1;
    width: 8px;
    height: 8px;
    border-radius: 1px
}

.appTooltip__triangle_top {
    left: 50%;
    bottom: 1px;
    transform: translate3d(-50%, 50%, 0) rotate(45deg)
}

.appTooltip__triangle_top-left {
    right: 8px;
    bottom: 1px;
    transform: translate3d(-50%, 50%, 0) rotate(45deg)
}

.appTooltip__triangle_top-right {
    left: 8px;
    bottom: 1px;
    transform: translate3d(0%, 50%, 0) rotate(45deg)
}

.appTooltip__triangle_bottom {
    left: 50%;
    top: 1px;
    transform: translate3d(-50%, -50%, 0) rotate(45deg)
}

.appTooltip__triangle_bottom-left {
    right: 8px;
    top: 1px;
    transform: translate3d(-50%, -50%, 0) rotate(45deg)
}

.appTooltip__triangle_bottom-right {
    left: 8px;
    top: 1px;
    transform: translate3d(0%, 0%, 0) rotate(45deg)
}

.appTooltip__triangle_right {
    left: 1px;
    top: 50%;
    transform: translate3d(-50%, -50%, 0) rotate(45deg)
}

.appTooltip__triangle_left {
    right: 1px;
    top: 50%;
    transform: translate3d(50%, -50%, 0) rotate(45deg)
}

.tooltipTransition-top-enter-active,.tooltipTransition-top-left-enter-active,.tooltipTransition-top-right-enter-active {
    animation: animationTooltipTop 150ms ease-in-out forwards
}

.tooltipTransition-top-leave-active,.tooltipTransition-top-left-leave-active,.tooltipTransition-top-right-leave-active {
    animation: animationTooltipTop 150ms ease-in-out forwards reverse
}

.tooltipTransition-bottom-enter-active,.tooltipTransition-bottom-left-enter-active,.tooltipTransition-bottom-right-enter-active {
    animation: animationTooltipBottom 150ms ease-in-out forwards
}

.tooltipTransition-bottom-leave-active,.tooltipTransition-bottom-left-leave-active,.tooltipTransition-bottom-right-leave-active {
    animation: animationTooltipBottom 150ms ease-in-out forwards reverse
}

.tooltipTransition-right-enter-active {
    animation: animationTooltipRight 150ms ease-in-out forwards
}

.tooltipTransition-right-leave-active {
    animation: animationTooltipRight 150ms ease-in-out forwards reverse
}

.tooltipTransition-left-enter-active {
    animation: animationTooltipLeft 150ms ease-in-out forwards
}

.tooltipTransition-left-leave-active {
    animation: animationTooltipLeft 150ms ease-in-out forwards reverse
}

@keyframes animationTooltipBottom {
    0% {
        opacity: 0.01;
        transform: translateY(10px)
    }

    100% {
        opacity: unset;
        transform: unset
    }
}

@keyframes animationTooltipTop {
    0% {
        opacity: 0.01;
        transform: translateY(-10px)
    }

    100% {
        opacity: unset;
        transform: unset
    }
}

@keyframes animationTooltipLeft {
    0% {
        opacity: 0.01;
        transform: translateX(-10px)
    }

    100% {
        opacity: unset;
        transform: unset
    }
}

@keyframes animationTooltipRight {
    0% {
        opacity: 0.01;
        transform: translateX(10px)
    }

    100% {
        opacity: unset;
        transform: unset
    }
}

.asset-actions {
    display: flex;
    align-items: center
}

.appModal .asset-actions {
    position: absolute;
    top: 30px;
    left: 30px
}

.asset-actions-item {
    cursor: pointer;
    padding: 4px;
    background-color: var(--app-background);
    border-radius: 5px;
    margin-right: 2px
}

.asset-actions-item-inner {
    width: 225px;
    border-radius: 4px
}

.asset-actions-item.active {
    background-color: var(--red);
    border-radius: 4px
}

.asset-actions-item,.asset-actions-item i {
    display: flex;
    justify-content: center;
    align-items: center
}

.asset-actions-item:not(.active):hover {
    background-color: var(--app-background-box-hover)
}

.asset-actions-text {
    font-size: 0.75rem
}

.asset-actions-item svg {
    width: 12px;
    height: 12px
}

.asset-actions-item svg.favorite {
    fill: #FF8F00
}

.tpsl-dropdown {
    padding: 5px;
    border: 1px solid var(--app-border);
    background: var(--app-background-section)
}

.tpsl-title {
    font-size: 0.85rem;
    padding-right: 15px;
    margin-bottom: 15px
}

.tpsl-close {
    position: absolute;
    right: 6px;
    top: 6px;
    cursor: pointer
}

.tpsl-close svg {
    fill: var(--svg-fill);
    width: 8px;
    height: 8px
}

.tpsl-change-item {
    width: 50%
}

.tpsl-change-item .label {
    font-size: 1rem;
    padding: 0 !important;
    margin-left: 15px;
    margin-right: 5px
}

.tpsl-change,.tpsl-change-item {
    display: flex;
    align-items: center
}

.tpsl-change-item .input-tpsl input {
    width: 60px
}

.tpsl-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 20px;
    margin-bottom: 10px
}

.tpsl-toggle .toggle {
    margin: 0 10px;
    position: relative;
    cursor: pointer;
    width: 40px;
    height: 20px;
    border-radius: 5px;
    background-color: var(--checkbox-background)
}

.tpsl-toggle.active .toggle {
    background-color: var(--checkbox-active-background)
}

.tpsl-toggle .toggle-indicator {
    position: absolute;
    width: 14px;
    height: 14px;
    top: 3px;
    left: 3px;
    transition: 0.5s;
    background-color: var(--checkbox-indicator-background);
    border-radius: 3px
}

.tpsl-toggle.active .toggle-indicator {
    left: calc(100% - 17px)
}

.tpsl-toggle .label {
    font-size: 0.85rem;
    padding: 0
}

.tpsl-toggle .label-left {
    color: #fff !important
}

.tpsl-toggle .label-right {
    color: var(--color-disabled) !important
}

.tpsl-toggle.active .label-left {
    color: var(--color-disabled) !important
}

.tpsl-toggle.active .label-right {
    color: #fff !important
}

.addToList-inner {
    width: 220px;
    background-color: var(--app-background-box);
    padding: 24px 15px 5px 15px
}

.addToList-inner-title {
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 10px
}

.addToList-inner-text {
    font-size: 11px;
    margin-bottom: 15px
}

.addToList-inner-list {
    margin-bottom: 20px
}

.addToList-inner-list-item {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.addToList-inner-list-item .box {
    display: flex;
    align-items: center
}

.addToList-inner-list-item .box input {
    margin-right: 5px
}

.addToList-inner-btn {
    text-decoration: underline;
    font-size: 11px;
    padding-bottom: 15px;
    font-weight: 700;
    cursor: pointer
}

.assetsGroup-actions-dropdown {
    z-index: 10000 !important
}

.assetsGroup-actions-dropdown-inner {
    position: relative
}

.assetsGroup-actions-dropdown-list {
    height: 200px;
    width: 240px;
    padding-bottom: 0.5rem
}

.assetsGroup-actions-dropdown-list-item {
    height: 30px;
    display: flex;
    align-items: center;
    font-size: 11px;
    padding: 0 15px;
    text-transform: capitalize;
    cursor: pointer;
    transition: .3s;
    background-color: var(--app-background-box);
    position: relative
}

.assetsGroup-actions-dropdown-list-item:hover svg {
    opacity: 0.7
}

.assetsGroup-actions-dropdown-list-item svg {
    position: absolute;
    right: 8px;
    height: 16px;
    cursor: pointer;
    fill: var(--prime)
}

.assetsGroup-actions-dropdown-list-item:hover {
    background-color: var(--app-background-box-hover)
}

.assetsGroup-actions-dropdown-list-btn {
    font-size: 1rem;
    padding: 5px 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    cursor: pointer;
    border-top: 1px solid var(--app-border);
    user-select: none
}

.assetsGroup-actions-dropdown-list-btn svg {
    height: 20px;
    display: flex
}

.assetsGroup-modal {
    z-index: 10000 !important
}

.assetsGroup-modal .assetsGroup-modal-inner {
    padding: 20px
}

.assetsGroup-modal .assetsGroup-modal-inner fieldset {
    padding: 0
}

.assetsGroup-modal .appModal__body {
    padding-bottom: 0 !important
}

.assetsGroup-modal-submit {
    display: flex;
    justify-content: space-between;
    border-top: 1px solid var(--color-transparent-secondary);
    padding-top: 20px;
    margin-top: 20px
}

.assetsGroup-modal-submit .btn {
    width: 45%;
    font-size: 13px
}

.assetsGroup-modal-submit .btn-green {
    color: #fff
}

.assetsGroup__button {
    border-radius: 3px;
    border: 1px solid var(--color-transparent-hint);
    background: none;
    padding: 4px 6px;
    cursor: pointer;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    flex-direction: row
}

.assetsGroup__button svg {
    margin-left: 8px;
    height: 0.7rem;
    fill: var(--color-secondary)
}

.assetsGroup__button:hover {
    background: var(--color-transparent-hint)
}

.asset-direction {
    display: flex;
    align-items: center;
    padding: 0 8px;
    white-space: nowrap
}

.asset-direction svg {
    width: 12px;
    height: 12px
}

.asset-symbol {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-weight: 600;
    overflow: hidden
}

.asset-changeIcon {
    margin-right: 8px
}

.asset-changeIcon.up svg {
    fill: var(--green) !important
}

.asset-changeIcon.down svg {
    fill: var(--red) !important
}

.asset-group {
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    font-weight: 900;
    color: #90a4ae;
    text-transform: uppercase;
    margin-left: 4px
}

.alerts {
    display: grid;
    grid-template-rows: 1fr 1fr;
    flex: 1
}

.alerts__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 5px 7px
}

.alerts__headerTitle {
    margin-right: 8px;
    padding: 0;
    color: var(--app-color)
}

.alerts__headerSubTitle {
    padding: 0;
    color: var(--color-secondary);
    opacity: 0.7;
    display: inline-block;
    margin-right: auto
}

.alerts__headerRow {
    display: flex;
    flex-direction: row;
    align-items: center
}

.alerts__headerBtn {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    border-radius: 2px;
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center
}

.alerts__headerBtn svg {
    height: 22px;
    width: 22px;
    fill: var(--app-color)
}

.alerts__headerBtn:hover {
    background-color: var(--app-border)
}

.alertsActive__header {
    display: flex;
    flex-direction: row;
    border-top: 1px solid var(--app-background);
    border-bottom: 1px solid var(--app-background);
    padding: 3px 16px;
    justify-content: space-between
}

.alertsActive__headerField {
    display: flex;
    flex-direction: row;
    align-items: center
}

.alertsActive__headerFieldIcon {
    height: 18px;
    width: 18px;
    fill: var(--app-color);
    cursor: pointer
}

.alertsActive__headerFieldInput {
    height: 100%;
    border: none;
    background: none;
    color: var(--app-color);
    padding: 4px 8px
}

.alerts__block {
    display: flex;
    flex-direction: column
}

.alerts__container {
    flex: 1;
    display: flex
}

.alerts__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 30px 40px;
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%)
}

.alerts__empty svg {
    height: 90px;
    fill: var(--app-border)
}

.alerts__empty p {
    margin-top: 12px;
    text-align: center;
    opacity: 0.95;
    line-height: 1.8rem;
    font-size: 1.1rem
}

.alerts__emptyBtn {
    border: 1px solid var(--prime);
    border-radius: 4px;
    padding: 8px 20px;
    color: var(--prime);
    background: none;
    margin-top: 12px;
    cursor: pointer
}

.alerts__emptyBtn:hover {
    background: var(--prime);
    color: #fff
}

.alerts__more {
    min-width: 210px;
    overflow: hidden
}

.alerts__moreListItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 16px;
    cursor: pointer
}

.alerts__moreListItem:hover {
    background: var(--app-border)
}

.alerts__moreListItem_disabled {
    opacity: 0.5;
    touch-action: none;
    cursor: default
}

.alerts__moreListItem_disabled:hover {
    background: none
}

.alerts__moreListItemIcon {
    height: 14px;
    margin-right: 8px
}

.alerts__moreListItemCheckbox {
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--app-border-active);
    border-radius: 4px;
    margin-right: 8px;
    transition: border 0.150ms ease
}

.alerts__moreListItemCheckbox svg {
    height: 12px;
    fill: #fff;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.150ms ease
}

.alerts__moreListItemCheckbox_active {
    border-color: var(--prime);
    background: var(--prime)
}

.alerts__moreListItemCheckbox_active svg {
    transform: scale(1);
    opacity: 1
}

.alertsActive__listItem {
    padding: 8px 16px;
    border-top: 1px solid var(--app-border);
    position: relative
}

.alertsActive__listItem:first-child {
    border-top: none
}

.alertsActive__listItem:hover {
    background: var(--app-background-box-hover)
}

.alertsActive__listItem:hover .alertsActive__listItemActions {
    display: flex
}

.alertsActive__listItemActions {
    display: none;
    position: absolute;
    right: 0;
    top: 0;
    background: var(--app-background-box);
    padding: 5px;
    flex-direction: row
}

.alertsActive__listItemActionsBtn {
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    background: none;
    border: none;
    cursor: pointer;
    margin-left: 8px
}

.alertsActive__listItemActionsBtn svg {
    height: 12px;
    width: 12px
}

.alertsActive__listItemActionsBtn:hover {
    background: var(--app-border)
}

.alertsActive__listItemActionsBtn:first-child {
    margin-left: 0
}

.alertsActive__listItemHeader,.alertsActive__listItemFooter {
    margin-bottom: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.alertsActive__listItemHeader *,.alertsActive__listItemFooter * {
    vertical-align: middle
}

.alertsActive__listItemFooter {
    margin-bottom: 0;
    font-size: 0.9rem;
    line-height: 1.5rem
}

.alertsActive__listItemStatus,.alertsActive__listItemStatusTriggered {
    display: inline-block
}

.alertsActive__listItemStatus_active,.alertsActive__listItemStatusTriggered_active {
    color: var(--green)
}

.alertsActive__listItemStatus_inactive,.alertsActive__listItemStatusTriggered_inactive {
    color: #ff8000
}

.alertsActive__listItemStatus:after,.alertsActive__listItemStatus:before,.alertsActive__listItemStatusTriggered:after,.alertsActive__listItemStatusTriggered:before {
    content: "\2022";
    padding: 0 6px;
    color: var(--app-border-active)
}

.alertsActive__listItemStatus:first-child:before,.alertsActive__listItemStatusTriggered:first-child:before {
    display: none
}

.alertsActive__listItemStatus:last-child:after,.alertsActive__listItemStatusTriggered:last-child:after {
    display: none
}

.alertsActive__listItemStatus+.alertsActive__listItemStatus:before {
    display: none
}

.alertsActive__alertDesc {
    width: 240px;
    font-size: 1rem;
    line-height: 1.5rem
}

.alertsActive__alertDescRowSub {
    opacity: 0.7
}

.alertsActive__listItemFooterIcon {
    display: inline-block;
    padding-right: 6px
}

.alertsActive__listItemFooterIcon svg {
    height: 18px;
    width: 18px
}

.alertsActive__listItemFooterIcon:last-child {
    padding-right: 0
}

.alertsActive__listItemSubText {
    opacity: 0.6
}

.alerts__headerHide {
    margin-right: 8px;
    border: none;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    cursor: pointer
}

.alerts__headerHide svg {
    height: 16px;
    opacity: 0.5
}

.alerts__headerHide:hover svg {
    opacity: 1
}

.alertsActive__search {
    color: var(--prime)
}

.alerts__menu {
    background: var(--app-background-box);
    border-radius: 2px;
    overflow: hidden;
    position: absolute;
    min-width: 180px;
    z-index: 9999
}

.alerts__menuList {
    border-bottom: 1px solid var(--app-border)
}

.alerts__menuList:last-child {
    border-bottom: none
}

.appModalWrap {
    position: fixed;
    display: flex;
    align-items: center;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
    background-color: var(--color-transparent-hint)
}

.appModal {
    margin: auto;
    background-color: var(--bg-secondary)
}

.appModal_lg {
    width: 90vw;
    min-width: 320px
}

.appModal_md {
    max-width: 640px;
    min-width: 320px
}

.appModal_sm {
    max-width: 480px;
    min-width: 320px
}

.appModal_xs {
    max-width: 360px;
    min-width: 320px
}

.appModal__body {
    padding: 20px 15px
}

.appModal__body_no-padding {
    padding: 0
}

.appModal__content {
    background-clip: padding-box
}

.appModalTransition-enter .appModal {
    transform: scale(0.9)
}

.appModalTransition-enter.appModalTransition-enter-active {
    opacity: 1;
    transition: opacity 300ms ease
}

.appModalTransition-enter.appModalTransition-enter-active .appModal {
    transform: scale(1);
    transition: transform 300ms ease
}

.appModalTransition-leave {
    opacity: 1
}

.appModalTransition-leave .appModal {
    transform: scale(1)
}

.appModalTransition-leave.appModalTransition-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease
}

.appModalTransition-leave.appModalTransition-leave-active .appModal {
    transform: scale(1.1);
    transition: transform 300ms ease
}

.appModal__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.appModal__close {
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer
}

.appDropdown {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
    font-size: 1rem
}

.appDropdown__content {
    position: relative;
    z-index: 2;
    padding: 2px
}

.appDropdown__triangle {
    position: absolute;
    z-index: 1;
    width: 8px;
    height: 8px
}

.dropdownTransition-top-enter-active,.dropdownTransition-top_left-enter-active,.dropdownTransition-top_right-enter-active {
    animation: animationDropdownTop 150ms ease-in-out forwards
}

.dropdownTransition-top-leave-active,.dropdownTransition-top_left-leave-active,.dropdownTransition-top_right-leave-active {
    animation: animationDropdownTop 150ms ease-in-out forwards reverse
}

.dropdownTransition-bottom-enter-active,.dropdownTransition-bottom_left-enter-active,.dropdownTransition-bottom_right-enter-active {
    animation: animationDropdownBottom 150ms ease-in-out forwards
}

.dropdownTransition-bottom-leave-active,.dropdownTransition-bottom_left-leave-active,.dropdownTransition-bottom_right-leave-active {
    animation: animationDropdownBottom 150ms ease-in-out forwards reverse
}

.dropdownTransition-left-enter-active,.dropdownTransition-left_bottom-enter-active,.dropdownTransition-left_top-enter-active {
    animation: animationDropdownLeft 150ms ease-in-out forwards
}

.dropdownTransition-left-leave-active,.dropdownTransition-left_bottom-leave-active,.dropdownTransition-left_top-leave-active {
    animation: animationDropdownLeft 150ms ease-in-out forwards reverse
}

.dropdownTransition-right-enter-active,.dropdownTransition-right_top-enter-active,.dropdownTransition-right_bottom-enter-active {
    animation: animationDropdownRight 150ms ease-in-out forwards
}

.dropdownTransition-right-leave-active,.dropdownTransition-right_top-leave-active,.dropdownTransition-right_bottom-leave-active {
    animation: animationDropdownRight 150ms ease-in-out forwards reverse
}

@keyframes animationDropdownBottom {
    0% {
        opacity: 0.01;
        transform: translateY(10px)
    }

    100% {
        opacity: unset;
        transform: unset
    }
}

@keyframes animationDropdownTop {
    0% {
        opacity: 0.01;
        transform: translateY(-10px)
    }

    100% {
        opacity: unset;
        transform: unset
    }
}

@keyframes animationDropdownLeft {
    0% {
        opacity: 0.01;
        transform: translateX(-10px)
    }

    100% {
        opacity: unset;
        transform: unset
    }
}

@keyframes animationDropdownRight {
    0% {
        opacity: 0.01;
        transform: translateX(10px)
    }

    100% {
        opacity: unset;
        transform: unset
    }
}

.tableSearch {
    display: flex;
    flex-direction: row;
    border-top: 1px solid var(--app-background);
    border-bottom: 1px solid var(--app-background);
    padding: 3px 16px;
    justify-content: space-between
}

.tableSearch__field {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex: 1
}

.tableSearch__fieldIcon {
    height: 18px;
    width: 18px;
    fill: none;
    stroke: var(--app-color);
    cursor: pointer
}

.tableSearch__fieldIconInput {
    height: 100%;
    border: none;
    background: none;
    color: var(--app-color);
    padding: 4px 8px;
    width: 100%
}

.tableSearch__btn {
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    border-radius: 2px;
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center
}

.tableSearch__btn:last-child {
    margin-left: 8px
}

.tableSearch__btn svg {
    height: 22px;
    width: 22px;
    fill: var(--app-color)
}

.tableSearch__btn:hover {
    background-color: var(--app-border)
}

.expandList__header {
    border-top: 1px solid var(--app-border);
    padding: 0.5rem 1rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.expandList__header:hover {
    background: var(--app-border)
}

.expandList__title {
    opacity: 0.8;
    text-transform: uppercase;
    font-size: 0.8rem
}

.expandList__headerIcon {
    height: 16px;
    fill: var(--app-color);
    opacity: 0.7;
    transition: transform 150ms ease
}

.expandList__headerIcon_rotate {
    transform: rotate(180deg)
}

.expandList__scroll {
    overflow-y: auto;
    max-height: 260px
}

.error-wrapper {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center
}

.error-wrapper h1 {
    padding-bottom: 2rem
}

.error-wrapper svg {
    width: 40px;
    padding-bottom: 1rem;
    fill: var(--error)
}

@keyframes loading {
    0% {
        content: ''
    }

    25% {
        content: '.'
    }

    50% {
        content: '..'
    }

    75% {
        content: '...'
    }
}

@keyframes loadingLine {
    0% {
        width: 0
    }

    10% {
        width: 10%
    }

    40% {
        width: 40%
    }

    70% {
        width: 70%
    }

    90% {
        width: 80%
    }

    100% {
        width: 99%
    }
}

.loader {
    left: 0;
    top: 0;
    position: fixed;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    background: var(--app-background-section)
}

.loader div.content {
    text-align: center
}

.loader div.content .logo-image {
    max-width: 240px;
    max-height: 80px
}

.loader div.content p.loading {
    color: #fff;
    text-align: center;
    text-shadow: 0 0 1px #000;
    position: relative
}

.loader div.content p.loading span {
    position: relative;
    display: inline-block
}

.loader div.content p.loading span:after {
    content: '';
    display: block;
    position: absolute;
    left: 100%;
    bottom: 0;
    animation: loading 2s linear infinite
}

.loader div.content div.line {
    background-color: #4a4a51;
    width: 240px;
    height: 2px;
    margin: 20px auto;
    position: relative
}

.loader div.content div.line:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 50%;
    background-image: linear-gradient(to right, #1e8cff, #1e8cff);
    animation: loadingLine 10s linear forwards
}

.loader div.content img.logo-for-light {
    display: none
}

.loader div.content img.logo-for-dark {
    display: inline-block
}

.theme-light .loader div.content p.loading {
    color: #000;
    text-shadow: 0 0 1px #afafaf
}

.theme-light .loader div.content img.logo-for-light {
    display: inline-block
}

.theme-light .loader div.content img.logo-for-dark {
    display: none
}

.example-enter {
    opacity: 0.01
}

.example-enter.example-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in
}

.example-leave {
    opacity: 1
}

.example-leave.example-leave-active {
    opacity: 0.01;
    transition: opacity 300ms ease-in
}

.loaderWrap {
    width: 240px;
    margin: 0 auto;
    border-radius: 2px;
    border: 4px solid transparent;
    position: relative;
    padding: 1px;
    top: 10px;
    background: var(--app-background-section)
}

.loaderWrap:before {
    content: '';
    border: 1px solid var(--app-border);
    border-radius: 3px;
    position: absolute;
    padding: 3px;
    top: -4px;
    right: -4px;
    bottom: -4px;
    left: -4px
}

.loaderWrap .loaderBar {
    position: absolute;
    border-radius: 2px;
    top: 0;
    right: 100%;
    bottom: 0;
    left: 0;
    background-image: linear-gradient(to right, #1e8cff, #5ca2ff);
    width: 0;
    animation: borealisBar 2s linear infinite
}

@keyframes borealisBar {
    0% {
        left: 0%;
        right: 100%;
        width: 0%
    }

    10% {
        left: 0%;
        right: 75%;
        width: 25%
    }

    90% {
        right: 0%;
        left: 75%;
        width: 25%
    }

    100% {
        left: 100%;
        right: 0%;
        width: 0%
    }
}

.loader-simple {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    text-align: center
}

.ast-wrapper li {
    list-style: disc;
    padding-left: 40px
}

.ast-wrapper ol {
    list-style-type: circle;
    padding-left: 40px
}

.news-content {
    padding: 12px 20px;
    display: grid;
    grid-template-columns: 1fr auto;
    text-decoration: none;
    cursor: pointer
}

.news-content p {
    padding-bottom: 15px;
    padding-top: 5px;
    color: var(--grey-100)
}

.news-content a {
    color: var(--prime)
}

.news-content .news-image-box {
    display: flex;
    align-items: center;
    border-radius: 3px;
    height: 126px;
    width: 190px;
    padding: 2px
}

.news-content .modal-image {
    width: 100%;
    height: auto;
    margin: 10px 0
}

.news {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%
}

.news-content__main {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.news-content__main p {
    display: block;
    display: -webkit-box;
    height: 39.2px;
    margin-bottom: 12px;
    font-size: 13px;
    line-height: 1.4;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis
}

h5.news-content__title {
    font-size: 1.1rem
}

.news-content__title {
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
    display: grid;
    grid-template-columns: 1fr auto
}

.news-content__title svg {
    height: 1.5rem;
    fill: var(--prime)
}

.news-content__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    color: var(--color-secondary);
    width: 100%;
    justify-content: space-between
}

.news-content__footer svg {
    fill: var(--color-secondary)
}

.news-content__footerRow {
    display: flex;
    flex-direction: row;
    align-items: center
}

.newsModal {
    position: relative;
    font-family: 'Roboto Slab', serif
}

.newsModal img {
    width: 100%
}

.newsModal__content {
    position: relative;
    z-index: 2;
    padding: 20px;
    font-size: 1.3rem;
    line-height: 2rem;
    max-height: 60vh;
    overflow-y: auto
}

.newsModal__content a {
    color: var(--prime)
}

.newsModal__content p {
    padding-bottom: 15px;
    margin: 0
}

.newsModal__content p:last-child {
    padding-bottom: 0
}

.newsModal__header {
    height: 180px;
    background-repeat: no-repeat;
    background-position: center;
    position: relative;
    background-color: var(--app-background-box);
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    background-size: cover
}

.newsModal__header>div,.newsModal__header h3 {
    position: relative;
    z-index: 1
}

.newsModal__header:before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    background-color: rgba(0,0,0,0.2)
}

.newsModal__headerTitle {
    font-size: 1.7rem;
    line-height: 2rem;
    margin-bottom: 12px;
    color: #fff
}

.newsModal__headerMain {
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(10px);
    background: rgba(0,0,0,0.2);
    padding: 12px
}

.newsModal__headerInfo {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    color: #fff;
    opacity: 0.6
}

.newsModal__headerInfo .news-content__category {
    border-color: rgba(255,255,255,0.1);
    background-color: rgba(255,255,255,0.3)
}

.newsModal__headerClose {
    border: none;
    cursor: pointer;
    background: none;
    border-radius: 3px;
    position: absolute;
    padding: 12px;
    right: 2px;
    top: 2px
}

.newsModal__headerClose svg {
    display: flex;
    height: 22px;
    fill: #fff;
    opacity: 0.5
}

.newsModal__headerClose:focus,.newsModal__headerClose:active {
    outline: none
}

.newsModal__headerClose:hover {
    background: rgba(255,255,255,0.1)
}

.newsModal__headerClose:hover svg {
    opacity: 1
}

.news-content__category {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 4px;
    border-radius: 3px;
    border: 1px solid var(--color-transparent-secondary);
    text-transform: capitalize;
    background-color: var(--color-transparent-hint)
}

.newsModal__headerRow {
    display: flex;
    flex-direction: row;
    align-items: center
}

.tournaments {
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr
}

.tournaments tr:hover {
    background: unset
}

.tournaments__list {
    overflow: auto
}

.tournaments__listTitle {
    padding: 12px
}

.tournaments__item {
    margin: 12px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--color-transparent-hint);
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.tournaments__item>svg {
    position: absolute;
    top: -2px;
    right: 10px;
    height: 45px;
    z-index: 1;
    fill: var(--color-transparent-hint)
}

.tournaments__item:after {
    content: "New";
    display: none;
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    background-color: var(--prime);
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 0.77rem
}

.tournaments__item_pending:after {
    display: inline-block
}

.tournaments__item_active {
    border-color: var(--prime)
}

.tournaments__itemMain {
    position: relative;
    z-index: 2;
    padding: 20px
}

.tournaments__itemMain:hover {
    background-color: var(--color-transparent-hint)
}

.tournaments__itemTitle {
    font-size: 1.2rem;
    font-weight: normal
}

.tournaments__itemExpiration {
    margin: 12px 0
}

.tournaments__itemExpiration_pending {
    opacity: 0.7
}

.tournaments__itemExpiration_completed {
    display: inline-block;
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--color);
    border: 1px solid var(--color-transparent-secondary);
    background: var(--color-transparent-hint)
}

.tournaments__itemExpirationGrid {
    display: flex;
    flex-direction: row;
    align-items: center
}

.tournaments__itemExpirationGrid>div {
    text-align: left;
    color: var(--prime);
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 1.3rem;
    line-height: 1.8rem
}

.tournaments__itemExpirationGrid>div span {
    display: inline-block;
    font-size: 0.77rem
}

.tournaments__itemTable {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 12px
}

.tournaments__itemTableCol {
    display: flex;
    flex-direction: column;
    font-size: 1.3rem
}

.tournaments__itemTableCol span {
    display: inline-block;
    margin-bottom: 5px;
    font-size: 0.9rem;
    opacity: 0.5
}

.tournamentInfo__header {
    padding: 24px;
    border-bottom: 1px solid var(--color-transparent-hint)
}

.tournamentInfo__expiration {
    display: flex;
    flex-direction: column
}

.tournamentInfo__expiration_pending {
    color: var(--color-secondary)
}

.tournamentInfo__expiration_working {
    color: var(--prime)
}

.tournamentInfo__expirationCompleted {
    font-size: 1.6rem
}

.tournamentInfo__expirationTitle {
    color: var(--color-secondary);
    font-size: 0.9rem
}

.tournamentInfo__expirationGrid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-top: 24px
}

.tournamentInfo__expirationGrid>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: 1.3rem
}

.tournamentInfo__expirationGrid>div span {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.9rem
}

.tournamentInfo__info>table {
    text-align: left;
    width: 100%;
    font-size: 1rem
}

.tournamentInfo__info>table th,.tournamentInfo__info>table td {
    padding: 5px 12px
}

.tournamentInfo__gridTable {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 12px;
    padding: 12px
}

.tournamentInfo__gridTable>div {
    display: flex;
    flex-direction: column;
    font-size: 1.2rem;
    align-items: flex-start
}

.tournamentInfo__gridTable>div span {
    display: inline-block;
    color: var(--color-secondary);
    font-size: 0.9rem;
    margin-bottom: 5px
}

.tournamentInfo__btnJoin {
    display: block;
    width: 100%;
    border-radius: 3px;
    margin-top: 12px;
    background-color: var(--prime);
    color: #fff;
    padding: 8px;
    text-align: center;
    font-size: 1.3rem
}

.tournamentInfo__btnSwitch {
    display: block;
    width: 100%;
    border-radius: 3px;
    margin-top: 12px;
    background-color: var(--orange);
    color: #fff;
    padding: 8px;
    text-align: center;
    font-size: 1.3rem
}

.tournamentInfo__btnJoin-disabled {
    display: block;
    width: 100%;
    border-radius: 3px;
    margin-top: 12px;
    background-color: var(--grey-200);
    color: #fff;
    padding: 8px;
    text-align: center;
    font-size: 1.3rem
}

.tournamentInfo__prizePoolValue {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: 3px 8px;
    margin: -3px -8px;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.9rem;
    line-height: 1.3rem;
    color: var(--prime)
}

.tournamentInfo__prizePoolValue svg {
    display: flex;
    margin-left: 8px;
    height: 11px;
    fill: var(--prime);
    transition: all 0.2s ease
}

.tournamentInfo__prizePoolValue_active svg {
    transform: rotate(180deg)
}

.tournamentInfo__prizePoolValue:hover {
    background-color: var(--color-transparent-hint)
}

.tournamentInfo__dropdown {
    width: 200px
}

.tournamentInfo__dropdown table {
    padding: 4px 0
}

.tournamentInfo__dropdown table th,.tournamentInfo__dropdown table td {
    padding: 5px 8px;
    text-align: left
}

.tournamentInfo__dropdownAlert {
    font-size: 0.9rem;
    color: var(--color-secondary);
    padding: 8px;
    border-bottom: 1px solid var(--color-transparent-hint)
}

.tournamentInfo__description {
    margin: 0;
    padding: 12px;
    font-size: 1rem;
    line-height: 1.5rem
}

.tournamentInfo__tabs {
    display: flex;
    flex-direction: row;
    position: relative;
    margin-bottom: 24px
}

.tournamentInfo__tabs:after {
    content: "";
    display: block;
    width: 1px;
    background-color: var(--color-transparent-hint);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    height: 30%
}

.tournamentInfo__tabsItem {
    flex: 1;
    padding: 12px 0;
    text-align: center;
    font-size: 1rem;
    color: var(--color-secondary);
    cursor: pointer;
    text-transform: uppercase;
    margin-right: 24px
}

.tournamentInfo__tabsItem_active,.tournamentInfo__tabsItem_active:hover {
    color: var(--prime);
    border-bottom: 1px solid var(--prime)
}

.tournamentInfo__tabsItem:hover {
    color: var(--color)
}

.tournamentInfo__tabsItem:last-child {
    margin-right: 0
}

.tournamentInfo__leaderboard {
    min-height: 150px
}

.tournaments {
    width: 100%;
    display: grid;
    grid-template-rows: auto 1fr
}

.tournaments tr:hover {
    background: unset
}

.tournaments__list {
    overflow: auto
}

.tournaments__listTitle {
    padding: 12px
}

.tournaments__item {
    margin: 12px;
    padding: 0;
    border-radius: 4px;
    border: 1px solid var(--color-transparent-hint);
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.tournaments__item>svg {
    position: absolute;
    top: -2px;
    right: 10px;
    height: 45px;
    z-index: 1;
    fill: var(--color-transparent-hint)
}

.tournaments__item:after {
    content: "New";
    display: none;
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    background-color: var(--prime);
    position: absolute;
    right: 10px;
    bottom: 10px;
    font-size: 0.77rem
}

.tournaments__item_pending:after {
    display: inline-block
}

.tournaments__item_active {
    border-color: var(--prime)
}

.tournaments__itemMain {
    position: relative;
    z-index: 2;
    padding: 20px
}

.tournaments__itemMain:hover {
    background-color: var(--color-transparent-hint)
}

.tournaments__itemTitle {
    font-size: 1.2rem;
    font-weight: normal
}

.tournaments__itemExpiration {
    margin: 12px 0
}

.tournaments__itemExpiration_pending {
    opacity: 0.7
}

.tournaments__itemExpiration_completed {
    display: inline-block;
    padding: 2px 4px;
    border-radius: 3px;
    color: var(--color);
    border: 1px solid var(--color-transparent-secondary);
    background: var(--color-transparent-hint)
}

.tournaments__itemExpirationGrid {
    display: flex;
    flex-direction: row;
    align-items: center
}

.tournaments__itemExpirationGrid>div {
    text-align: left;
    color: var(--prime);
    flex: 1;
    display: flex;
    flex-direction: column;
    font-size: 1.3rem;
    line-height: 1.8rem
}

.tournaments__itemExpirationGrid>div span {
    display: inline-block;
    font-size: 0.77rem
}

.tournaments__itemTable {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 12px
}

.tournaments__itemTableCol {
    display: flex;
    flex-direction: column;
    font-size: 1.3rem
}

.tournaments__itemTableCol span {
    display: inline-block;
    margin-bottom: 5px;
    font-size: 0.9rem;
    opacity: 0.5
}

.tournamentInfo__header {
    padding: 24px;
    border-bottom: 1px solid var(--color-transparent-hint)
}

.tournamentInfo__expiration {
    display: flex;
    flex-direction: column
}

.tournamentInfo__expiration_pending {
    color: var(--color-secondary)
}

.tournamentInfo__expiration_working {
    color: var(--prime)
}

.tournamentInfo__expirationCompleted {
    font-size: 1.6rem
}

.tournamentInfo__expirationTitle {
    color: var(--color-secondary);
    font-size: 0.9rem
}

.tournamentInfo__expirationGrid {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    margin-top: 24px
}

.tournamentInfo__expirationGrid>div {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: 1.3rem
}

.tournamentInfo__expirationGrid>div span {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.9rem
}

.tournamentInfo__info>table {
    text-align: left;
    width: 100%;
    font-size: 1rem
}

.tournamentInfo__info>table th,.tournamentInfo__info>table td {
    padding: 5px 12px
}

.tournamentInfo__gridTable {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 12px;
    padding: 12px
}

.tournamentInfo__gridTable>div {
    display: flex;
    flex-direction: column;
    font-size: 1.2rem;
    align-items: flex-start
}

.tournamentInfo__gridTable>div span {
    display: inline-block;
    color: var(--color-secondary);
    font-size: 0.9rem;
    margin-bottom: 5px
}

.tournamentInfo__btnJoin {
    display: block;
    width: 100%;
    border-radius: 3px;
    margin-top: 12px;
    background-color: var(--prime);
    color: #fff;
    padding: 8px;
    text-align: center;
    font-size: 1.3rem
}

.tournamentInfo__btnSwitch {
    display: block;
    width: 100%;
    border-radius: 3px;
    margin-top: 12px;
    background-color: var(--orange);
    color: #fff;
    padding: 8px;
    text-align: center;
    font-size: 1.3rem
}

.tournamentInfo__btnJoin-disabled {
    display: block;
    width: 100%;
    border-radius: 3px;
    margin-top: 12px;
    background-color: var(--grey-200);
    color: #fff;
    padding: 8px;
    text-align: center;
    font-size: 1.3rem
}

.tournamentInfo__prizePoolValue {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    padding: 3px 8px;
    margin: -3px -8px;
    border-radius: 3px;
    cursor: pointer;
    white-space: nowrap;
    font-size: 0.9rem;
    line-height: 1.3rem;
    color: var(--prime)
}

.tournamentInfo__prizePoolValue svg {
    display: flex;
    margin-left: 8px;
    height: 11px;
    fill: var(--prime);
    transition: all 0.2s ease
}

.tournamentInfo__prizePoolValue_active svg {
    transform: rotate(180deg)
}

.tournamentInfo__prizePoolValue:hover {
    background-color: var(--color-transparent-hint)
}

.tournamentInfo__dropdown {
    width: 200px
}

.tournamentInfo__dropdown table {
    padding: 4px 0
}

.tournamentInfo__dropdown table th,.tournamentInfo__dropdown table td {
    padding: 5px 8px;
    text-align: left
}

.tournamentInfo__dropdownAlert {
    font-size: 0.9rem;
    color: var(--color-secondary);
    padding: 8px;
    border-bottom: 1px solid var(--color-transparent-hint)
}

.tournamentInfo__description {
    margin: 0;
    padding: 12px;
    font-size: 1rem;
    line-height: 1.5rem
}

.tournamentInfo__tabs {
    display: flex;
    flex-direction: row;
    position: relative;
    margin-bottom: 24px
}

.tournamentInfo__tabs:after {
    content: "";
    display: block;
    width: 1px;
    background-color: var(--color-transparent-hint);
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    height: 30%
}

.tournamentInfo__tabsItem {
    flex: 1;
    padding: 12px 0;
    text-align: center;
    font-size: 1rem;
    color: var(--color-secondary);
    cursor: pointer;
    text-transform: uppercase;
    margin-right: 24px
}

.tournamentInfo__tabsItem_active,.tournamentInfo__tabsItem_active:hover {
    color: var(--prime);
    border-bottom: 1px solid var(--prime)
}

.tournamentInfo__tabsItem:hover {
    color: var(--color)
}

.tournamentInfo__tabsItem:last-child {
    margin-right: 0
}

.tournamentInfo__leaderboard {
    min-height: 150px
}

.economicCalendar {
    width: 100%;
    flex: 1;
    display: grid;
    grid-template-rows: auto 1fr
}

.economicCalendarList__item,.economicCalendarList__title {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-transparent-hint)
}

.economicCalendarList__title {
    text-transform: uppercase;
    position: sticky;
    top: 0;
    background: var(--app-background);
    z-index: 1
}

.economicCalendarList__item {
    padding: 0 12px;
    height: 65px;
    justify-content: center;
    display: flex;
    flex-direction: column
}

.economicCalendarList__item:hover {
    background: var(--app-background-box-hover)
}

.economicCalendarList__item:last-child {
    border-bottom: none
}

.economicCalendarList__item_comment {
    cursor: pointer
}

.economicCalendarList__item_expand {
    border-bottom: none;
    background: var(--app-background-box-hover)
}

.economicCalendarList__item_old {
    opacity: 0.5
}

.economicCalendarList__itemHeader,.economicCalendarList__itemFooter {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.9rem;
    margin-bottom: 5px
}

.economicCalendarList__itemHeader *,.economicCalendarList__itemFooter * {
    vertical-align: middle
}

.economicCalendarList__itemHeader span,.economicCalendarList__itemFooter span {
    text-align: left
}

.economicCalendarList__itemHeader {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 8px
}

.economicCalendarList__itemHeader svg {
    height: 9px;
    fill: var(--color-secondary);
    transition: transform 150ms ease
}

.economicCalendarList__item_expand .economicCalendarList__itemHeader svg {
    transform: rotate(180deg)
}

.economicCalendarList__itemFooterIcon {
    height: 14px;
    display: inline-block;
    border-radius: 50%
}

.economicCalendarList__itemComment {
    padding: 12px;
    border-bottom: 1px solid var(--color-transparent-hint);
    line-height: 1.5rem
}

.economicCalendar__header {
    padding: 12px 8px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.economicCalendar__headerBtn {
    padding: 4px;
    display: flex;
    background: none;
    border-radius: 3px;
    cursor: pointer
}

.economicCalendar__headerBtn svg {
    height: 14px
}

.economicCalendar__headerBtn:hover {
    background: var(--app-background-box-hover)
}

.economicCalendar__countries {
    border: 1px solid var(--app-background-box-active);
    border-radius: 3px;
    width: 440px
}

.economicCalendar__countriesList {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 12px;
    padding: 12px;
    border-bottom: 1px solid var(--app-border)
}

.economicCalendar__countriesList:last-child {
    border-bottom: none
}

.economicCalendar__countriesListItem {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    padding-right: 4px
}

.economicCalendar__countriesListItem * {
    line-height: 4rem;
    vertical-align: middle
}

.economicCalendar__countriesListItem img {
    display: inline-flex;
    width: 2rem;
    margin-right: 4px;
    border-radius: 50%;
    padding: 2px;
    border: 2px solid transparent
}

.economicCalendar__countriesListItem_active img {
    border: 2px solid var(--prime)
}

.economicCalendar__countriesMain {
    max-height: 250px;
    overflow: auto
}

.economicCalendar__search {
    display: grid;
    align-items: center;
    grid-template-columns: auto 1fr;
    padding: 8px 12px;
    border-top: 1px solid var(--app-border);
    border-bottom: 1px solid var(--app-border)
}

.economicCalendar__search svg {
    height: 1.3rem;
    opacity: 0.5
}

.economicCalendar__search input {
    padding: 4px 12px;
    background: none;
    border: none
}

.economicCalendar__countriesHeader {
    transform: translateY(1px);
    display: flex;
    flex-direction: row;
    align-items: center
}

.economicCalendar__countriesHeaderList {
    white-space: nowrap
}

.economicCalendar__countriesHeaderListItem {
    display: inline-block;
    padding: 12px;
    cursor: pointer;
    user-select: none;
    line-height: 20px
}

.economicCalendar__countriesHeaderListItem_active {
    color: var(--prime);
    border-bottom: 1px solid var(--prime)
}

.economicCalendar__countriesHeaderListItem span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    text-align: center;
    width: 18px;
    height: 18px;
    font-size: 9px;
    color: #fff;
    border-radius: 50%;
    background: var(--prime);
    margin-left: 6px
}

.listHorizontal {
    position: relative;
    overflow: hidden
}

.listHorizontal__main {
    overflow-x: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.listHorizontal__main::-webkit-scrollbar {
    display: none
}

.listHorizontal__btn {
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    top: -1px;
    cursor: pointer;
    transition: transform 0.2s ease
}

.listHorizontal__btn svg {
    height: 16px;
    opacity: 0.5
}

.listHorizontal__btn:first-child {
    padding: 0 12px 0 4px;
    background: linear-gradient(90deg, var(--app-background-box), var(--app-background-box), transparent)
}

.listHorizontal__btn:last-child {
    padding: 0 4px 0 12px;
    right: 0;
    background: linear-gradient(270deg, var(--app-background-box), var(--app-background-box), transparent)
}

.listHorizontal__btn:hover svg {
    opacity: 1
}

.listHorizontal__btn_hide:first-child {
    transform: translateX(-100%)
}

.listHorizontal__btn_hide:last-child {
    transform: translateX(100%)
}

.economicCalendar__countriesHeaderBtn {
    background: none;
    display: flex;
    padding: 0 12px;
    height: 100%;
    cursor: pointer
}

.economicCalendar__countriesHeaderBtn svg {
    height: 20px;
    fill: none;
    stroke: var(--prime)
}

.economicCalendar__countriesHeaderBtn:disabled {
    opacity: 0.5;
    cursor: default
}

.economicCalendar__countriesHeaderBtn:disabled svg {
    stroke: var(--app-color)
}

.economicCalendar__headerRow {
    display: flex;
    flex-direction: row;
    align-items: center
}

.economicCalendar__headerHide {
    margin-right: 8px;
    border: none;
    background: none;
    padding: 0;
    display: flex;
    align-items: center;
    cursor: pointer
}

.economicCalendar__headerHide svg {
    height: 16px;
    opacity: 0.5
}

.economicCalendar__headerHide:hover svg {
    opacity: 1
}

.economicCalendarList__itemImportance {
    display: flex;
    justify-content: end;
    align-items: end
}

.economicCalendarList__itemImportance div {
    width: 3px;
    height: 12px;
    margin-right: 4px;
    display: inline-block
}

.economicCalendarList__itemImportance div:last-child {
    margin-right: 0
}

.economicCalendarList__itemFooter {
    display: grid;
    grid-template-columns: auto auto auto .5fr;
    grid-gap: 4px;
    align-items: center;
    color: var(--app-color-disabled)
}

.economicCalendarList__itemFooter>.economicCalendarList_itemColumn {
    display: flex;
    flex-direction: column
}

.economicCalendarList__itemHeaderTitle {
    display: flex;
    flex-direction: row;
    align-items: center
}

.economicCalendarList__itemHeaderTitle span {
    font-size: 1rem
}

.alertsCreate {
    padding: 0 16px;
    min-width: 380px
}

.alertsCreate .form-form__fieldset {
    padding: 0
}

.alertsCreate textarea {
    font-family: sans-serif
}

.alertsCreate__field {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 8px
}

.alertsCreateOption {
    display: flex;
    flex-direction: row;
    align-items: center
}

hr {
    margin: 12px 0
}

.alertsCreate__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px
}

.alertsCreate__footerBtn {
    margin-right: 8px;
    border-radius: 4px;
    padding: 8px 20px;
    border: 1px solid var(--app-border-active);
    color: var(--app-border-active);
    background: none;
    cursor: pointer
}

.alertsCreate__footerBtn:last-child {
    margin-right: 0
}

.alertsCreate__footerBtn_primary {
    background: var(--prime);
    color: #fff;
    border: none
}

.alertsCreate__footerBtn_danger {
    background: var(--red);
    color: #fff;
    border: none
}

.alertsCreate__header {
    padding: 8px 0;
    border-bottom: 1px solid var(--app-border);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.alertsCreate__header h3 {
    font-size: 1.3rem
}

.alertsCreate__headerBtn {
    padding: 8px;
    border: none;
    margin: 0;
    background: none;
    opacity: 0.6;
    cursor: pointer;
    border-radius: 3px
}

.alertsCreate__headerBtn svg {
    height: 14px
}

.alertsCreate__headerBtn:hover {
    opacity: 1;
    background: var(--app-border)
}

.alertsCreate__radio {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-collapse: collapse;
    margin: 16px 0
}

.alertsCreate__radioItem {
    border-collapse: collapse;
    border: 1px solid var(--app-border);
    text-align: center;
    text-transform: uppercase;
    padding: 8px;
    box-sizing: border-box;
    cursor: pointer;
    color: var(--app-border-active)
}

.alertsCreate__radioItem:nth-child(odd) {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px
}

.alertsCreate__radioItem:nth-child(even) {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px
}

.alertsCreate__radioItem:hover {
    background-color: var(--app-border)
}

.alertsCreate__radioItem_active {
    border-color: var(--prime);
    color: var(--prime)
}

.alertsCreate__select_disabled {
    cursor: default;
    touch-action: none
}

.alertsCreate__select_disabled * {
    cursor: default;
    touch-action: none
}

.alertModal {
    padding: 20px
}

.alertModal__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    font-size: 1.5rem;
    margin-bottom: 16px
}

.alertModal__header svg {
    height: 80px;
    display: inline-block;
    margin-right: 12px
}

.alertModal__message {
    margin-bottom: 25px;
    font-size: 1.2rem
}

.alertModal__headerTitle a {
    color: var(--prime);
    cursor: pointer
}

.alertModal__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--app-border);
    padding-top: 20px
}

.alertModal__footer button {
    padding: 8px 20px;
    border-radius: 3px;
    border: 1px solid var(--app-border-active);
    background: none;
    cursor: pointer
}

.alertModal__footer button:hover {
    background: var(--app-border)
}

.alertModal__footer button:last-child {
    border: none;
    background: var(--prime);
    color: #fff
}

.wrapCountry {
    display: inline-grid;
    grid-template-columns: 14px auto;
    grid-gap: 6px;
    line-height: 14px;
    white-space: nowrap
}

.wrapCountry img {
    border-radius: 2px;
    box-shadow: 0 0 2px rgba(0,0,0,0.05)
}

.hot-keys {
    display: flex
}

.hot-keys span {
    border-radius: 4px;
    border: 1px solid var(--app-border-active);
    border-bottom-width: 2px;
    justify-content: center;
    align-items: center
}

.hot-keys span:last-child {
    margin-right: 0
}

.hot-keys-sm span {
    font-size: 0.75rem;
    display: flex;
    min-width: 1.6rem;
    padding: 0.25rem 0.35rem;
    margin-right: 0.3rem
}

.hot-keys-md span {
    font-size: 0.85rem;
    display: flex;
    min-width: 2.1rem;
    padding: 0.35rem 0.45rem;
    margin-right: 0.4rem
}

.hot-keys {
    display: flex
}

.hot-keys span {
    border-radius: 4px;
    border: 1px solid var(--app-border-active);
    border-bottom-width: 2px;
    justify-content: center;
    align-items: center
}

.hot-keys span:last-child {
    margin-right: 0
}

.hot-keys-sm span {
    font-size: 0.75rem;
    display: flex;
    min-width: 1.6rem;
    padding: 0.25rem 0.35rem;
    margin-right: 0.3rem
}

.hot-keys-md span {
    font-size: 0.85rem;
    display: flex;
    min-width: 2.1rem;
    padding: 0.35rem 0.45rem;
    margin-right: 0.4rem
}

.appNotifies {
    margin-left: 12px
}

.appNotifies__btn {
    display: flex;
    align-items: center;
    border-radius: 3px;
    border: none;
    background: none;
    padding: 0;
    cursor: pointer;
    position: relative
}

.appNotifies__btn svg {
    height: 40px;
    fill: var(--app-icon)
}

.appNotifies__btn svg path {
    fill: var(--app-icon)
}

.appNotifies__btn:hover {
    background: var(--color-transparent-hint)
}

.appNotifies__btn span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 4px;
    top: 4px;
    background: var(--red);
    color: #fff;
    border-radius: 7px;
    padding: 2px;
    min-width: 14px;
    min-height: 12px;
    line-height: 10px;
    font-size: 8px
}

.appNotifies__list {
    overflow: auto
}

.appNotifies__listItem {
    padding: 12px;
    border-bottom: 1px solid var(--color-transparent-hint);
    cursor: pointer;
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-gap: 12px
}

.appNotifies__listItem:last-child {
    border-bottom: none
}

.appNotifies__listItem:hover {
    background: var(--color-transparent-hint)
}

.appNotifies__listItem_active {
    background: var(--color-transparent-hint)
}

.appNotifies__listItem_read {
    cursor: default
}

.appNotifies__listItem_read .appNotifies__listItemStatus {
    opacity: 0;
    transform: scale(0)
}

.appNotifies__listItemText {
    margin-bottom: 3px;
    font-size: 1.1rem;
    color: var(--color)
}

.appNotifies__listItemIcon {
    height: 18px;
    opacity: 0.5;
    stroke: var(--color)
}

.appNotifies__listItemStatus {
    width: 8px;
    height: 8px;
    border: 2px solid var(--color-transparent-secondary);
    background-color: var(--prime);
    border-radius: 50%;
    align-items: center;
    transition: all 200ms ease
}

.appNotifies__listItemDate {
    color: var(--color-secondary);
    font-size: 0.8rem
}

.appNotifies__dropdown {
    display: flex;
    height: 240px;
    width: 310px;
    position: relative;
    flex-direction: column
}

.appNotifies__content {
    display: flex;
    padding: 12px;
    font-size: 1.1rem
}

.appNotifies__header {
    border-bottom: 1px solid var(--color-transparent-hint);
    background-color: var(--app-background-box);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 6px 8px;
    align-items: center
}

.appNotifies__header h3 {
    font-size: 1rem;
    font-weight: normal
}

.appNotifies__header button {
    font-size: 0.85rem;
    border-radius: 3px;
    background: transparent;
    padding: 6px;
    display: flex;
    flex-direction: row;
    align-items: center;
    cursor: pointer
}

.appNotifies__header button svg {
    height: 22px;
    fill: var(--app-color)
}

.appNotifies__header button:hover {
    background-color: var(--color-transparent-hint)
}

.notifyModal__content {
    padding: 15px
}

.notifyModal__content table {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    width: 100%;
    color: var(--app-color)
}

.notifyModal__content table td,.notifyModal__content table th {
    border: 1px solid var(--app-border-active);
    padding: 1rem
}

.list-box .header-menu-list-item {
    width: 240px
}

.list-box .header-menu-list-item>a {
    padding: 1rem 1.4rem;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.list-box .header-menu-list-item>a span {
    display: flex;
    align-items: center
}

.list-box .header-menu-list-item>a svg {
    width: 1.75rem;
    height: 1.75rem;
    fill: var(--app-color)
}

.list-box .header-menu-list-item>a .header-menu-list-keys {
    font-size: 0.7rem;
    margin-left: 0.5rem;
    border: 1px solid var(--app-border-active);
    padding: 2px 3px;
    border-radius: 3px;
    color: var(--app-color)
}

.favoriteAssets {
    display: flex;
    margin: 0 7px;
    margin-left: 20px
}

.favoriteAssets__item {
    display: flex;
    flex-direction: row;
    border-radius: 4px;
    align-items: center;
    justify-content: center;
    background: var(--bg-color);
    cursor: pointer;
    position: relative;
    border: 1px solid var(--color-transparent-hint);
    transition: margin 0.15s ease;
    margin-right: -70px;
    padding: 5px 8px
}

.favoriteAssets__item:last-child {
    margin-right: 7px
}

.favoriteAssets__item:hover {
    margin-right: 7px;
    border-color: var(--prime)
}

.favoriteAssets__item img {
    height: 22px;
    margin-right: 8px
}

.favoriteAssets__item:last-child {
    margin-right: 0
}

.favoriteAssets__item_active {
    border-bottom: 1px solid var(--prime)
}

.favoriteAssets__itemInfo {
    font-size: 0.9rem;
    width: 70px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--app-color)
}

.favoriteAssets__itemInfo h3 {
    display: block
}

.favoriteAssets__itemInfo span {
    opacity: 0.7;
    font-size: 0.86rem
}

.favoriteAssets__itemClose {
    cursor: pointer;
    fill: var(--app-color);
    position: absolute;
    top: 5px;
    right: 5px;
    height: 8px;
    display: flex
}

header {
    display: flex;
    background: var(--app-background-section);
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 3px 0
}

header .logo {
    margin-right: auto
}

header .logo img {
    max-height: 36px;
    max-width: 150px;
    width: 100%
}

header .header-balances {
    display: flex;
    flex-direction: row
}

header .header-balances .balance {
    color: var(--green)
}

header .app-header-section {
    display: flex;
    align-items: center
}

header .app-header-box {
    min-width: 42px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center
}

.header-wrap {
    display: flex;
    align-items: center
}

.header-wrap .header-balances-item {
    padding: 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.header-profit {
    margin-left: 20px;
    margin-right: 20px;
    display: flex;
    align-items: center;
    font-size: 1.3rem;
    font-weight: 800
}

.header-info {
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end
}

.header-menu {
    cursor: pointer;
    padding: 10px;
    border-radius: 3px
}

.header-menu svg {
    height: 20px;
    width: 20px
}

.header-menu:hover {
    background-color: var(--app-border)
}

.header-account {
    display: flex;
    position: relative;
    justify-content: space-between;
    text-transform: uppercase;
    align-items: center;
    white-space: nowrap;
    background-color: transparent;
    border: 1px solid var(--color-transparent-hint);
    padding: 7px 12px;
    border-radius: 4px;
    min-width: 100px;
    cursor: pointer;
    margin-right: 10px
}

.header-account b {
    max-width: 140px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis
}

.header-account:hover {
    border-color: var(--color-transparent-secondary)
}

.header-account-real {
    border: 1px solid var(--green)
}

.header-account-demo {
    border: 1px solid var(--red)
}

.header-account-tournament {
    border: 1px solid var(--prime)
}

.header-account-type {
    position: absolute;
    background-color: var(--app-background-section);
    top: -6px;
    right: 10px;
    padding: 2px 6px;
    font-size: 0.75rem;
    border-radius: 3px
}

.header-account-id {
    font-weight: 500;
    color: var(--app-color);
    position: relative
}

.header-margin {
    display: flex;
    flex-direction: column;
    padding: 0 10px;
    min-width: 150px
}

.header-balances-item,.header-margin {
    height: 34px;
    justify-content: space-between
}

.header-margin .header-balances-item {
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    align-items: center;
    width: 100%;
    padding: unset;
    height: unset
}

.margin-bar {
    position: relative;
    height: 2px;
    width: 100%;
    background-color: var(--color-transparent-secondary)
}

.margin-bar-inner {
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    background-color: var(--green);
    max-width: 100%
}

.header-account {
    display: flex
}

.header-menu {
    display: flex;
    justify-content: flex-end
}

.profit-currency {
    display: inline-block;
    margin-left: 8px;
    color: var(--app-color)
}

.one-click-active {
    background: var(--app-background);
    border-radius: 3px;
    padding: 3px
}

.deposit-btn {
    background: var(--color-btn);
    padding: 5px;
    border-radius: 4px
}

.deposit-btn svg {
    fill: var(--app-color)
}

.notification-component .notification-control svg {
    width: 20px;
    height: 20px
}

.header-account-switch-alert {
    min-height: 300px;
    padding: 2rem;
    display: flex;
    flex: 1;
    justify-content: center;
    flex-direction: column;
    text-align: center
}

.header-account-switch-alert .btn-account-switch {
    width: 160px;
    margin: 20px auto 0;
    padding: 13px
}

.header-account-switch-alert .header-account-switch-alert__text {
    padding: 10px
}

.accounts-list {
    width: 230px;
    padding: 5px 10px
}

.accounts-list li {
    border-bottom: 1px solid var(--app-border);
    padding: 0.8rem 0.5rem
}

.accounts-list li a {
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.accounts-list li:last-child {
    border: none
}

.download-box {
    padding: 5px
}

.download-box li {
    padding: 4px
}

.download-box li a {
    justify-content: center !important
}

.app-footer {
    height: 38px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--app-background-section)
}

.app-footer-btn {
    display: flex;
    padding: 4px 8px;
    color: #fff;
    border-radius: 3px;
    margin: 0 10px
}

.app-footer-btn svg {
    fill: #fff;
    width: 12px;
    height: 12px;
    margin-right: 5px
}

.app-footer-time {
    display: flex;
    text-transform: uppercase;
    font-size: 12px;
    margin: 0 16px
}

.app-footer-time .title {
    color: var(--app-color-disabled)
}

.app-footer-time .value {
    margin: 0 5px
}

.app-footer-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2px;
    cursor: pointer;
    padding: 2px;
    border-radius: 2px
}

.app-footer-icon:hover {
    background: var(--app-border)
}

.app-footer-icon_active {
    background: var(--app-background-box-active)
}

.app-footer-icon_active svg {
    fill: var(--prime) !important
}

.app-footer-icon_active:hover {
    background: var(--app-background-box-active)
}

.app-footer-icon svg {
    width: 28px;
    height: 28px
}

.app-footer-section {
    display: flex;
    align-items: center
}

.app-footer-section:first-child>.app-footer-box {
    border-right: 1px solid var(--app-border)
}

.app-footer-section:last-child>.app-footer-box {
    border-left: 1px solid var(--app-border)
}

.app-footer-box {
    min-width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center
}

.footer-layouts-dropdown {
    padding: 15px
}

.footer-layouts-dropdown li {
    align-items: center;
    display: flex;
    height: 40px;
    border-bottom: 1px solid var(--app-border)
}

.footer-layouts-dropdown a {
    cursor: pointer;
    padding: 4px
}

.footer-layouts-dropdown a svg {
    width: 28px;
    height: 28px
}

.layouts-save-box {
    padding-left: 20px
}

.layouts-save-form {
    display: flex;
    flex: 1
}

.layouts-save-form .form-form__fieldset {
    padding: 0;
    display: flex;
    justify-content: space-between
}

.layouts-save-form .save-btn {
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    display: flex;
    padding: 0;
    width: 2.8rem;
    height: 2.4rem;
    margin-top: 10px
}

.layouts-save-form .save-btn svg {
    height: 1.6rem;
    width: 1.6rem
}

.layouts-save-list {
    max-height: 200px;
    overflow: auto
}

.reactour__helper {
    background-color: var(--app-background-section) !important
}

.tour_wrapper {
    background-color: var(--app-background-section);
    color: var(--app-color);
    padding: 20px 10px;
    align-items: center;
    text-align: center
}

.tour_wrapper h3 {
    font-size: 2rem;
    padding-bottom: 1rem
}

.calculate-box {
    border: 1px solid var(--app-border);
    background-color: var(--app-background);
    padding: 1rem;
    border-radius: 4px;
    margin-bottom: 0.5rem
}

.calculate-box div {
    margin-top: 1rem
}

menu {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 66px;
    width: 66px;
    background: var(--app-background-section);
    margin-top: 3px;
    margin-bottom: 4px;
    overflow: hidden;
    border-radius: 4px
}

menu .menu-list-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-top: 1px solid var(--app-border)
}

menu .menu-list-item:last-child {
    border-bottom: 1px solid var(--app-border)
}

menu .menu-list-item a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    font-size: 0.85rem;
    width: 100%
}

menu .menu-list-item a.menu-list-item-link_active {
    background: var(--app-background-box)
}

menu .menu-list-item a i {
    margin-bottom: 0.5rem
}

menu .menu-badge {
    position: absolute;
    top: 3px;
    right: 6px
}

menu .menu-badge svg {
    width: 12px;
    height: 12px
}

.menu-list-box {
    margin: 0;
    list-style: none;
    flex: 1;
    display: flex;
    flex-direction: column
}

.helpCenter {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: var(--app-background-box);
    z-index: 100;
    display: flex;
    flex-direction: row
}

.helpCenter__header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 16px
}

.helpCenter__header svg {
    cursor: pointer;
    height: 12px;
    opacity: 0.5
}

.helpCenter__header svg:hover {
    opacity: 1
}

.helpCenter__aside {
    border-right: 1px solid var(--app-border);
    overflow: auto;
    flex: 1;
    width: 260px
}

.helpCenter__asideItem {
    padding: 12px 16px;
    cursor: pointer;
    border-bottom: 1px solid var(--app-border);
    text-transform: uppercase
}

.helpCenter__asideItem:hover,.helpCenter__asideItem_active {
    background: var(--app-background-box-active)
}

.helpCenter__questions {
    width: 300px
}

.helpCenter__questionsItem {
    margin: 0 12px;
    padding: 16px;
    border-bottom: 1px solid var(--app-border);
    cursor: pointer
}

.helpCenter__questionsItem:hover {
    background: var(--app-background-box-hover)
}

.helpCenter__questionsItem_active {
    border: none
}

.helpCenter__questionsDesc {
    margin-top: 12px
}

.helpCenter__questionsItemRow {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-gap: 8px;
    align-items: center
}

.helpCenter__questionsItemRow svg {
    height: 10px;
    transition: all 0.150s ease
}

.helpCenter__questionsItem_active .helpCenter__questionsItemRow svg {
    transform: rotate(180deg)
}

.routeContainer {
    animation: routeFadeIn 0.5s ease;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
    margin: 4px
}

.routeContainer__header {
    position: relative;
    padding: 20px;
    min-height: 45px;
    justify-content: center;
    box-shadow: 2px 2px 10px -1px #20232a;
    z-index: 1;
    margin-bottom: 3px
}

.routeContainer__title {
    padding: 0;
    margin: 0;
    font-size: 1.3rem;
    font-weight: bold;
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    position: relative
}

.routeContainer__title i {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-right: 15px
}

.routeContainer__title i svg {
    height: 2.1rem;
    fill: #fff
}

.routeContainer__buttonClose {
    position: absolute;
    z-index: 99;
    left: 20px;
    top: 20px;
    border: none;
    background-color: var(--app-background-section);
    padding: 10px;
    border-radius: 50%;
    display: flex
}

.routeContainer__buttonClose:active,.routeContainer__buttonClose:focus {
    outline: none
}

.routeContainer__buttonClose svg {
    height: 13px;
    fill: var(--app-color)
}

.routeContainer__buttonClose:hover {
    background-color: var(--color-transparent-hint)
}

.routeContainer__content {
    position: relative;
    display: flex;
    flex: 1;
    justify-content: center
}

@keyframes routeFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px)
    }

    100% {
        opacity: unset;
        transform: unset
    }
}

.app-cabinet-container {
    padding-top: 2rem;
    display: flex;
    flex: 1;
    justify-content: center
}

.main {
    position: relative;
    flex: 1;
    min-height: 1px;
    display: flex;
    padding-left: 4px;
    padding-top: 4px
}

.main__gridBlock {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto
}

.main__grid {
    min-width: 0;
    min-height: 0;
    position: relative;
    flex: 1
}

.mainBlock {
    display: flex;
    flex-direction: column;
    position: absolute;
    padding-right: 4px;
    padding-bottom: 4px
}

.mainBlock__split {
    position: absolute;
    z-index: 10
}

.mainBlock__split_v {
    width: 4px;
    bottom: 0;
    right: 0;
    display: flex;
    align-items: center
}

.mainBlock__split_v:hover {
    cursor: col-resize
}

.mainBlock__split_h {
    height: 4px;
    left: 0;
    right: 6px;
    bottom: 0;
    display: flex;
    justify-content: center
}

.mainBlock__split_h:hover {
    cursor: row-resize
}

.mainBlock__split_left {
    top: 0;
    left: 0
}

.mainBlock__split_right {
    top: 0;
    right: 0
}

.mainBlock__split_bottom {
    bottom: 0;
    right: 0
}

.mainBlock__split_top {
    top: 0;
    right: 0
}

.mainBlock__tabs {
    display: flex;
    flex-direction: row;
    min-height: 30px;
    border-radius: 2px 2px 0 0;
    border-collapse: collapse;
    position: relative;
    overflow: hidden
}

.mainBlock__tabs:after {
    content: "";
    display: block;
    flex: 1;
    background: var(--app-background-section);
    border-bottom: 1px solid var(--app-background);
    border-radius: 3px 3px 0 3px
}

.mainBlock__tabsItemWrap {
    position: relative;
    display: flex;
    flex-direction: row
}

.mainBlock__tabsItem {
    font-size: 1.1rem;
    cursor: pointer;
    background: var(--app-background-section);
    color: var(--color);
    border-right: 1px solid var(--app-background);
    border-bottom: 1px solid var(--app-background);
    padding: 2px;
    border-radius: 3px
}

.mainBlock__tabsItem_active {
    color: var(--prime);
    border-bottom-color: transparent;
    border-radius: 3px 3px 0 0
}

.mainBlock__tabsItem_drag {
    background: var(--prime);
    opacity: 0.5;
    color: #fff
}

.mainBlock__tabsItem_drag * {
    pointer-events: none
}

.mainBlock__tabsItem_add {
    cursor: pointer;
    transition: .3s;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px 12px
}

.mainBlock__tabsItem:first-child {
    margin-left: 0;
    border-bottom-left-radius: 0
}

.mainBlock__tabsItem:last-child {
    margin-right: 0
}

.mainBlock__tabsItemContent {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: transparent;
    border-radius: 2px;
    padding: 4px 10px;
    position: relative;
    z-index: 9
}

.mainBlock__tabsItemContent_active {
    background: var(--bg-color-secondary);
    opacity: 0.8
}

.mainBlock__tabsItem:hover .mainBlock__tabsItemContent {
    background: var(--bg-color-secondary)
}

.mainBlock__tabsItemIcon {
    fill: var(--color-transparent);
    cursor: pointer;
    height: 14px;
    margin-left: 8px
}

.mainBlock__tabsItemIcon:hover {
    fill: var(--color)
}

.mainBlock__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    background-color: var(--app-background-section);
    padding: 3px;
    position: relative;
    overflow: hidden;
    border-radius: 0 0 4px 4px
}

.mainBlock__tabsItemMask {
    position: absolute;
    z-index: 999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.mainBlock__tabsItemMask+.mainBlock__tabsItemContent {
    background: unset !important;
    cursor: grabbing
}

.mainBlock__tabsItemMask_rightActive+.mainBlock__tabsItemContent {
    border-right: 2px solid var(--prime)
}

.mainBlock__tabsItemMask_leftActive+.mainBlock__tabsItemContent {
    border-left: 2px solid var(--prime)
}

@-moz-document url-prefix() {
    .main__grid {
        grid-template-rows: 1fr 345px
    }
}

.mainBlock__tabsEmpty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 40px;
    text-align: center
}

.mainBlock__tabsEmpty h3 {
    font-size: 0.9rem
}

.mainBlock__tabsEmpty p {
    font-size: 0.8rem;
    color: var(--app-color-disabled);
    margin: 0
}

.mainBlock__tabsClosedList {
    list-style: none;
    margin: 0;
    min-width: 130px
}

.mainBlock__tabsClosedList li {
    padding: 8px 15px;
    border-bottom: 1px solid var(--bg-color-secondary);
    opacity: 0.7;
    cursor: pointer
}

.mainBlock__tabsClosedList li:hover {
    opacity: 1
}

.mainBlock__tabsClosedList li:last-child {
    border-bottom: none
}

.main-custom-tab-wrapper {
    display: flex;
    flex: 1
}

.main-custom-tab-wrapper iframe {
    width: 100%
}

.settings {
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    width: 90%;
    margin-top: 10px
}

.settings-header {
    display: flex;
    flex-direction: column
}

.settings-header .title {
    font-size: 2rem;
    margin-bottom: 5px;
    text-align: left;
    font-weight: 700
}

.settings-header .subtitle {
    font-size: 0.85rem;
    color: var(--app-color-disabled);
    text-align: left
}

.settings-body {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    overflow: hidden;
    margin-bottom: 20px;
    background-color: var(--app-background-section)
}

.settings-tabs {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--app-border)
}

.settings-tabs-item {
    cursor: pointer;
    position: relative;
    text-align: center;
    font-size: 1rem;
    padding: 10px 20px;
    letter-spacing: 1px
}

.settings-tabs-item:not(.active) {
    color: var(--app-color)
}

.settings-tabs-item.active {
    cursor: unset;
    color: var(--prime)
}

.settings-tabs-item.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    width: 100%;
    height: 1px;
    left: 0;
    right: 0;
    background-color: var(--prime)
}

.settings-tabs-content {
    display: flex;
    width: 100%;
    padding: 50px 50px;
    overflow-y: auto
}

.settings-general {
    display: flex;
    width: 100%;
    justify-content: space-around
}

.settings-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 20px
}

.settings-column {
    max-width: 300px;
    width: 32%;
    display: flex;
    flex-direction: column;
    align-items: center
}

.settings-item {
    margin-bottom: 40px
}

.settings-item-row {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between
}

.settings-item-col {
    display: flex;
    flex-direction: column;
    width: 100%
}

.settings-item .label {
    margin-right: 13px
}

.settings-item-col .label {
    color: var(--app-color-disabled);
    margin-bottom: 15px
}

.settings-button-group .settings-button:not(:last-child) {
    margin-right: 10px
}

.settings-button {
    position: relative;
    border: 1px solid var(--prime);
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.85rem;
    border-radius: 3px;
    height: 46px;
    width: 48%;
    justify-content: center;
    align-items: center;
    display: flex;
    background-size: cover
}

.settings-button svg {
    fill: var(--color);
    height: 1.5rem;
    width: 1.5rem
}

.settings-button-light {
    height: 70px;
    background-image: url(https://cdn57.com/platform-assets/desktop/light-theme.png)
}

.settings-button-dark {
    height: 70px;
    background-image: url(https://cdn57.com/platform-assets/desktop/dark-theme.png)
}

.settings-button input {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0
}

.settings-button:not(.active) {
    color: var(--app-color-disabled);
    border: 1px solid var(--app-color-disabled);
    cursor: pointer
}

.settings-select {
    border: 1px solid var(--app-border);
    width: 100%;
    height: 40px;
    font-size: 0.85rem
}

.settings-select-values {
    width: 258px;
    max-height: 170px;
    overflow-y: scroll
}

.settings-select-inner {
    display: flex;
    align-content: center
}

.settings-select-active {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 10px
}

.settings-select-item {
    display: flex;
    align-items: center;
    height: 33px;
    padding: 8px 4px 8px 10px;
    cursor: pointer;
    background-color: var(--app-background-section)
}

.settings-select-item:hover {
    background-color: var(--app-background-box-hover)
}

.settings-select i,.settings-select-item i {
    margin-right: 10px
}

.settings-select svg,.settings-select-item svg {
    height: 12px
}

.settings-description {
    margin-bottom: 5px;
    color: var(--app-color-disabled);
    font-size: 1rem
}

.settings-confirmations .settings-row {
    justify-content: space-between
}

.settings-confirmations .settings-row .settings-item {
    display: flex;
    align-items: center
}

.settings-hotkeys {
    display: flex;
    width: 100%
}

.settings-hotkeys .settings-item-col {
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 20px
}

.settings-hotkeys-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px
}

.settings-hotkeys-row .button-group {
    display: flex
}

.settings-hotkeys-row .button-group>*:not(:last-child) {
    margin-right: 4px
}

.settings-item-col.disabled {
    color: var(--app-color-disabled)
}

.settings-item-col-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px
}

.settings-item-col-header .label {
    margin-bottom: unset;
    display: flex;
    flex-direction: row;
    align-items: center
}

.settings-item-col-header .label>.info-box {
    margin-left: 10px
}

.sound-bar {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.sound-bar input {
    margin: 0 10px
}

.sound-bar i {
    cursor: pointer
}

.sound-bar svg {
    width: 14px;
    height: 14px
}

.settings-trading-row {
    width: 100%;
    margin-bottom: 20px
}

.settings-trading-row .sbxFormField {
    margin-top: 0
}

.stateBar {
    position: relative;
    width: 27px;
    height: 17px;
    border-radius: 20px;
    background-color: var(--checkbox-background);
    cursor: pointer;
    transition: .5s
}

.stateBar.active {
    background-color: var(--checkbox-active-background)
}

.stateBar-indicator {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background-color: var(--checkbox-indicator-background);
    transition: .5s
}

.stateBar.active .stateBar-indicator {
    left: calc(100% - 15px)
}

._0c425 {
    width: 220px;
    max-height: 170px;
    overflow-y: scroll
}

._6a18c {
    width: 68px;
    height: 30px !important;
    border-radius: 18px
}

._6a18c svg {
    height: 18px;
    margin-left: 0
}

.a3b03 {
    display: flex;
    align-items: center;
    height: 33px;
    padding: 8px 4px 8px 10px;
    cursor: pointer;
    background-color: var(--app-background-section)
}

.a3b03:hover {
    background-color: var(--app-background-box-hover)
}

.a3b03 svg {
    height: 12px
}

.statistics {
    width: 90%
}

.statistics__header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr
}

.statistics__headerFieldTitle {
    margin-bottom: 4px;
    font-size: 0.9rem
}

.statistics__headerFieldValue {
    font-size: 1.6rem;
    font-weight: bold
}

.statistics__headerFieldValue b,.statistics__headerFieldValue span {
    font-size: 1rem
}

.statistics__headerFieldValue span {
    font-weight: normal;
    opacity: 0.7
}

.statistics__headerFieldValue sup {
    font-size: 0.9rem;
    color: var(--green)
}

.statistics__container {
    padding: 16px;
    background: var(--app-background-section);
    margin-bottom: 12px;
    flex: 1;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1)
}

.statistics__containerHeader {
    font-size: 1.2rem;
    margin-bottom: 16px;
    font-weight: bold;
    display: flex;
    flex-direction: row;
    align-items: center
}

.statistics__containerHeader span {
    font-weight: normal;
    display: inline-block;
    font-size: 1rem
}

.statistics__containerHeader span.up {
    color: var(--green)
}

.statistics__containerHeader svg {
    height: 18px;
    margin: 0 8px
}

.statistics__main {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-gap: 12px;
    position: relative
}

.statistics__col {
    display: flex;
    flex-direction: column
}

.statistics__pie {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center
}

.statistics__pieList {
    padding-top: 0;
    width: 100%
}

.statistics__pieListItem {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid var(--app-border);
    justify-content: space-between
}

.statistics__pieListItem span {
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 6px;
    display: inline-block
}

.statistics__pieListItem b {
    display: inline-block;
    margin-left: 6px
}
.open-orders-actions{display:flex;flex-direction:row;align-items:center}.open-orders-actions button{background:none;min-width:22px;height:22px;padding:5px;cursor:pointer}.block-wrapper{display:flex;flex:1;height:100%;overflow:hidden;flex-direction:column}.appTable__tbodyTr-group{border-top:1px solid var(--app-background)}.history-footer-box{border-top:1px solid var(--app-border);height:3rem;align-items:center;display:flex;justify-content:end}.history-footer-box span{padding:4px 10px}.custom-action-loader-svg{animation:rotation 5s linear 0s infinite}
.chart-main{display:flex;flex:1;position:relative;justify-content:center;align-items:center;width:100%;overflow:hidden}.chart-collapse{background:var(--app-background-box);padding:5px;border-radius:2px}.chart-collapse a{cursor:pointer;margin-right:8px}.chart-collapse a:last-child{margin-right:0}.chart-collapse svg{height:12px;width:12px;fill:var(--app-color)}.chart-trade-panel{display:flex;flex-direction:row;align-items:center;width:24rem}.chart-wrapper-footer-period--active::after{background-color:var(--prime)}.chart-wrapper{height:100%}.chartAlertMenu{min-width:240px;background:var(--app-background-box);position:absolute;border-radius:2px;overflow:hidden}.chartAlertMenu__list{padding:0;margin:0;border-bottom:1px solid var(--app-border)}.chartAlertMenu__list:last-child{border-bottom:none}.chartAlertMenu__listItem{padding:8px 16px;cursor:pointer;display:flex;flex-direction:row;align-items:center}.chartAlertMenu__listItem:hover{background:var(--app-background-box-hover)}.chartAlertMenu__listItem svg{height:18px;margin-right:8px}

.microTradePanel{display:flex;flex-direction:column;width:100%}.microTradePanel .microTradePanel-body-hide{opacity:0;visibility:hidden}.microTradePanel:hover .microTradePanel-body-hide{visibility:unset;opacity:1}.microTradePanel-head,.microTradePanel-body{display:flex;justify-content:space-between;align-items:center}.microTradePanel-head{padding:5px 10px 0}.microTradePanel-body{width:100%;padding:5px 10px;transition:opacity 0.150s ease}.microTradePanel-box{height:22px;min-width:100px}.microTradePanel-box .tradeButton{padding:0 6px}.microTradePanel-box-left{justify-content:flex-start}.microTradePanel-box-right{justify-content:flex-end}.microTradePanel-box-center{justify-content:center;flex:1}.microTradePanel-box .tradePanel-input{margin:auto;padding:0;height:100%;width:unset;position:relative;border-radius:0;box-shadow:none}.microTradePanel-box .tradeButton-quote,.microTradePanel-box .tradeButton-title{padding:0;flex:unset}.tradePanel-input-button:hover{background-color:var(--app-color-disabled)}.microTradePanel-box .tradeButton{position:relative;width:100%;height:100%;display:flex;flex-direction:row;cursor:pointer;align-items:center;justify-content:space-between;border:1px solid transparent;color:var(--button-color)}.microTradePanel-box .tradePanel-input-button{border-radius:0;height:100%}.microTradePanel-box:first-child .tradeButton{border-radius:4px 0 0 4px}.microTradePanel-box:last-child .tradeButton{border-radius:0 4px 4px 0}.tradeButton.disabled{cursor:default;background-color:var(--button-disabled-background) !important;border:1px solid var(--app-border-disable)}.microTradePanel-box .tradeButton.button-sell{background-color:var(--red)}.microTradePanel-box .tradeButton.button-buy{background-color:var(--green)}.tradeButton.button-sell:hover{background-color:#d63733}.tradeButton.button-buy:hover{background-color:#00a46d}.tradeButton-title{flex:1;padding:2px 5px;font-size:1rem;font-weight:800}.microTradePanel-box .tradeButton.button-sell .tradeButton-title{text-align:left}.tradeButton.button-buy .tradeButton-title{text-align:left}.tradeButton-stat{position:absolute;top:calc(100% + 1px);text-align:center;font-size:0.75rem;font-weight:700;display:flex;align-items:center;width:86px;max-width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;padding:5px;justify-content:center}.tradeButton.button-sell .tradeButton-stat{left:0;border-bottom:1px solid var(--red);border-left:1px solid var(--red);border-right:1px solid var(--red);color:var(--red)}.tradeButton.button-buy .tradeButton-stat{right:0;border-bottom:1px solid var(--green);border-left:1px solid var(--green);border-right:1px solid var(--green);color:var(--green)}
.assets-box:not(.expanded):hover{background-color:#d7d7d7 !important}.assets-box .asset-changeIcon svg{width:11px;height:11px}.asset-symbol{display:flex;align-items:center;flex-wrap:wrap;font-weight:600;overflow:hidden}.asset-group{background-color:var(--app-background);border-radius:3px;padding:1px 3px;font-size:0.7rem;margin-left:5px}.price-directions-up span{color:var(--green)}.price-directions-down span{color:var(--red)}.asset-description{font-weight:300;text-overflow:ellipsis;overflow-x:hidden;width:100%;text-align:left}.asset-changeIcon{margin-right:8px}.asset-changeIcon.up svg{fill:var(--green) !important}.asset-changeIcon.down svg{fill:var(--red) !important}.asset-chart-wrap{display:flex;justify-content:center;height:40px}.asset-chart-wrap svg{width:90%;height:100%}.asset-signal{margin-left:5px}.asset-signal svg{height:12px;width:20px}

.assetsGroup{display:flex;align-items:center;height:34px;justify-content:space-between}.assetsGroup-action{display:flex;flex-direction:row}.assetsGroup-list{overflow-x:scroll;overflow-y:hidden;display:flex;align-items:center;justify-content:space-between;margin:0;z-index:10;width:100%;padding:4px 10px}.assetsGroup-list .sbxFormField,.assetsGroup-list .sbxFormField__selectCustom{width:100%;height:25px;border:none}.assetsGroup-list .sbxFormField__selectCustom{display:flex;align-items:center}.assetsGroup-list-item{position:relative;cursor:pointer;font-size:0.85rem;font-weight:600;text-transform:uppercase;padding:3px 5px 3px;color:#a2adb2}.assetsGroup-list-item:hover{color:#3c5a64}.assetsGroup-list-item:hover svg{fill:#3c5a64 !important}.assetsGroup-list-item svg{width:12px;height:12px;fill:#a2adb2}.assetsGroup-list-item.active svg{fill:#3c5a64}.assetsGroup-list-item.active{color:#3c5a64}.assetsGroup-list-item.active::after{content:"";position:absolute;bottom:-2px;left:0;right:0;width:100%;height:2px;background-color:#3c5a64;z-index:20}.assetsGroup-actions{display:flex;align-items:center}.assetsGroup-actions-item{display:flex;align-items:center;justify-content:center;padding:4px 10px;cursor:pointer}.assetsGroup-actions-item svg{width:20px;height:20px}.assetsGroup-list-search-icon{display:flex;justify-content:center;align-items:center;width:28px;height:28px;cursor:pointer}.assetsGroup-list-search-icon svg{width:16px;height:16px;fill:none;stroke:var(--app-color)}.assetsGroup-list-search-icon-active path{stroke:var(--prime)}.assetsGroup-list-search{width:100%;display:flex;justify-content:center;align-items:center;flex-direction:row;border-top:1px solid var(--app-border);padding:3px 0}.assetsGroup-list-search svg{margin-left:10px;width:18px;height:18px;fill:none;stroke:var(--app-color)}.assetsGroup-list-search input{background-color:var(--app-background-section);height:34px;width:100%;padding:2px 10px}

.markets-topPanel{display:flex;justify-content:space-between;align-items:center;padding:10px}.markets-topPanel svg{width:16px;height:16px;cursor:pointer;margin-left:10px}.markets-list{font-size:0.85rem;flex-wrap:wrap;flex-direction:column;overflow-y:scroll;flex:1}.markets-list.expanded{display:flex;flex-wrap:wrap;width:100%;flex-direction:row;border-top:1px solid var(--app-border);padding-top:0.5rem}.markets-list .markets-list-header{display:grid;position:sticky;top:0;background-color:var(--app-background-box);border-top:1px solid var(--app-border);border-bottom:1px solid var(--app-border);z-index:10}.markets-list-empty{height:300px;display:flex;justify-content:center;align-items:center}.market-message{color:var(--app-color-disabled);border:1px dashed var(--app-border);font-weight:400;border-radius:4px;padding:15px 25px}.markets-list .markets-list-header .markets-list-header-item{text-transform:uppercase;font-weight:unset;padding:10px 5px;font-size:0.85rem;cursor:pointer;border-right:1px solid var(--app-border);text-align:center;color:#787b86}.markets-list .markets-list-header .markets-list-header-item:first-child{text-align:left}.markets-list .markets-list-header .markets-list-header-item:last-child{border-right:none}.markets-list .markets-list-header .markets-list-header-item>span{position:relative}.markets-list .markets-list-header .markets-list-header-item svg{position:absolute;top:2px;right:-12px;width:8px;height:8px;fill:#787b86}.market-list-row{display:grid;width:100%;font-weight:600;align-items:center;border-bottom:1px solid var(--app-border)}.market-list-row:not(.expanded){min-height:3.2rem;padding:0;cursor:pointer}.market-list-row:not(.expanded):hover{background-color:var(--app-background-box-hover)}.market-list-row:not(.expanded) .asset-symbol span{color:var(--app-color) !important}.market-list-row.expanded{justify-content:space-between;grid-template-columns:1fr;align-items:center;padding-bottom:5px;flex:1}.markets-list.expanded .market-list-row.expanded{width:250px;min-width:250px}.markets-list-header-item,.market-list-row>div{white-space:nowrap;text-overflow:ellipsis}.tradePanel-info{position:absolute;left:0;right:0;width:100%;font-size:0.75rem;text-align:center}.tradePanel-info-bottom{top:calc(100% + 5px)}.markets-list-header .markets-list-header-item:first-child{padding-left:0.5rem}.market-list-row:not(.expanded)>div{text-align:center;text-overflow:ellipsis;overflow-x:hidden}.favorites-empty{display:flex;flex-direction:column}.favorites-empty-icon{display:flex;justify-content:center}.favorites-empty-icon svg{height:38px}.favorites-empty-icon svg *{fill:var(--app-icon)}.favorites-empty-title{text-align:center;font-weight:600;margin-top:20px;font-size:1rem}.favorites-empty-subtitle{color:var(--app-color-disabled);text-align:center;margin-top:10px;padding:0 5%}.asset-change{font-weight:100}
._24794{display:flex;flex-direction:row;flex:1;background:var(--app-background-section)}._24794 ._82c5a{display:flex;flex-direction:column;flex:1}._24794 .b4d3c{margin:10px;border-radius:20px;display:flex;flex:1}._24794 header{padding:15px;height:60px;background:transparent !important}._24794 footer{height:40px;display:flex;flex-direction:row;justify-content:space-between;padding:0px 15px;border-top:1px solid var(--app-border)}._24794 footer ul{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;align-items:center;justify-items:end}._24794 footer ul li{width:max-content}._24794 ._40b03{margin-top:1.2rem}._24794 ._3856e{display:flex;align-items:center}._24794 ._3856e span{padding-top:10px;margin:auto 0}._7590f{display:flex;flex-direction:column;margin:0 15px}._784a9{display:flex;align-items:center;justify-content:center;flex-direction:column}.aabed{padding:10px 0;position:absolute;top:0;left:0;right:0;width:100%;background:var(--red)}.c5f65{background-color:rgba(255,0,0,0.1);padding:10px;margin-bottom:10px;text-align:center}._3a5d8{max-width:400px;width:100%;align-items:center;justify-content:space-between;padding:10px;display:flex;flex-direction:column}._3a5d8 a{color:var(--link-color)}.bed2e{grid-template-columns:1fr 1fr}._14a39{max-width:12rem;max-height:3rem}.e85d5{display:flex;flex-direction:column;margin:15px 0px}.e85d5 a{display:flex;width:max-content;border:1px solid var(--grey-250);border-radius:20px;padding:5px 20px;margin-top:15px}.e85d5 a span{padding-left:0.8rem}.e85d5 a svg{width:12px;height:12px;margin-right:0.1rem;fill:var(--green)}.e85d5 a b{padding-right:0.8rem;border-right:1px solid var(--grey-250)}._3a5d8 form{width:100%;display:grid;height:100%;align-items:center}._3a5d8 label{margin:10px 0}._60e28{padding:1rem;width:100%;margin-top:1.5rem}._3a5d8 .c98d1{display:flex;align-items:center;margin:0}.dbf34{margin-top:2rem;margin-bottom:1.2rem;display:flex;align-items:center;justify-content:center}.dd60d{padding:0.8rem}.dd60d li{display:flex;flex-direction:row;align-items:center}.dd60d li svg{fill:none;width:20px;height:20px;margin-right:5px}.e1b33{height:100%;display:flex;flex:1;justify-content:center;align-items:center;flex-direction:column}.e1b33 svg{width:80px;height:80px;stroke:var(--prime);fill:var(--prime)}.e1b33 h1{margin-top:2rem;font-size:2.8rem}.e1b33 p{margin-top:1rem;font-size:1rem}.e1b33 ._84eb4{margin-top:2rem;display:flex;justify-content:center;height:40px;width:220px;font-size:1.2rem;background:var(--prime);color:var(--white);align-items:center;border-radius:4px}.c5f65{background-color:rgba(255,0,0,0.1);padding:10px;margin-bottom:10px;text-align:center}

.password_switcher:hover{cursor:pointer}.password_switcher svg *{fill:none !important;stroke:var(--app-icon) !important}.password_switcher--wrapper{position:absolute;right:1.5rem;top:1rem}

.eafb9 input[type="checkbox"]{width:60px;height:30px}.caaca{appearance:none;display:inline-block;position:relative;border-radius:50px;overflow:hidden;outline:none;cursor:pointer;background-color:transparent;transition:background-color ease 0.3s;border:1px solid var(--app-border)}.caaca::before{content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IndoaXRlIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1tb29uIj48cGF0aCBkPSJNMjEgMTIuNzlBOSA5IDAgMSAxIDExLjIxIDMgNyA3IDAgMCAwIDIxIDEyLjc5eiI+PC9wYXRoPjwvc3ZnPg==");display:flex;position:absolute;align-items:center;justify-content:center;z-index:2;width:16px;height:100%;left:6px;top:50%;transform:translateY(-50%);border-radius:50%;text-indent:4px;color:#fff;white-space:nowrap;transition:all cubic-bezier(0.3, 1.5, 0.7, 1) 0.3s}.caaca:checked{background-color:transparent;border:1px solid var(--app-border)}.caaca:checked::before{left:30px;content:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItc3VuIj48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSI1Ij48L2NpcmNsZT48bGluZSB4MT0iMTIiIHkxPSIxIiB4Mj0iMTIiIHkyPSIzIj48L2xpbmU+PGxpbmUgeDE9IjEyIiB5MT0iMjEiIHgyPSIxMiIgeTI9IjIzIj48L2xpbmU+PGxpbmUgeDE9IjQuMjIiIHkxPSI0LjIyIiB4Mj0iNS42NCIgeTI9IjUuNjQiPjwvbGluZT48bGluZSB4MT0iMTguMzYiIHkxPSIxOC4zNiIgeDI9IjE5Ljc4IiB5Mj0iMTkuNzgiPjwvbGluZT48bGluZSB4MT0iMSIgeTE9IjEyIiB4Mj0iMyIgeTI9IjEyIj48L2xpbmU+PGxpbmUgeDE9IjIxIiB5MT0iMTIiIHgyPSIyMyIgeTI9IjEyIj48L2xpbmU+PGxpbmUgeDE9IjQuMjIiIHkxPSIxOS43OCIgeDI9IjUuNjQiIHkyPSIxOC4zNiI+PC9saW5lPjxsaW5lIHgxPSIxOC4zNiIgeTE9IjUuNjQiIHgyPSIxOS43OCIgeTI9IjQuMjIiPjwvbGluZT48L3N2Zz4=")}.caaca:checked__toggle{display:flex;justify-content:flex-end}.caaca:checked__header{font-size:1.5rem;font-weight:800;line-height:2}.caaca:checked__description{font-size:1rem;line-height:1.4;color:#f2f2f2}.caaca:checked__hint{margin-top:2rem;font-size:0.8rem;line-height:1.4;color:#f2f2f2}

:root{--PhoneInput-color--focus: #03b2cb;--PhoneInputInternationalIconPhone-opacity: 0.8;--PhoneInputInternationalIconGlobe-opacity: 0.65;--PhoneInputCountrySelect-marginRight: 0.35em;--PhoneInputCountrySelectArrow-width: 0.3em;--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);--PhoneInputCountrySelectArrow-borderWidth: 1px;--PhoneInputCountrySelectArrow-opacity: 0.45;--PhoneInputCountrySelectArrow-color: inherit;--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);--PhoneInputCountrySelectArrow-transform: rotate(45deg);--PhoneInputCountryFlag-aspectRatio: 1.5;--PhoneInputCountryFlag-height: 1em;--PhoneInputCountryFlag-borderWidth: 1px;--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1)}.PhoneInput{display:flex;align-items:center}.PhoneInputInput{flex:1;min-width:0}.PhoneInputCountryIcon{width:calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));height:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--square{width:var(--PhoneInputCountryFlag-height)}.PhoneInputCountryIcon--border{background-color:var(--PhoneInputCountryFlag-backgroundColor--loading);box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor)}.PhoneInputCountryIconImg{display:block;width:100%;height:100%}.PhoneInputInternationalIconPhone{opacity:var(--PhoneInputInternationalIconPhone-opacity)}.PhoneInputInternationalIconGlobe{opacity:var(--PhoneInputInternationalIconGlobe-opacity)}.PhoneInputCountry{position:relative;align-self:stretch;display:flex;align-items:center;margin-right:var(--PhoneInputCountrySelect-marginRight)}.PhoneInputCountrySelect{position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;border:0;opacity:0;cursor:pointer}.PhoneInputCountrySelect[disabled]{cursor:default}.PhoneInputCountrySelectArrow{display:block;content:'';width:var(--PhoneInputCountrySelectArrow-width);height:var(--PhoneInputCountrySelectArrow-width);margin-left:var(--PhoneInputCountrySelectArrow-marginLeft);border-style:solid;border-color:var(--PhoneInputCountrySelectArrow-color);border-top-width:0;border-bottom-width:var(--PhoneInputCountrySelectArrow-borderWidth);border-left-width:0;border-right-width:var(--PhoneInputCountrySelectArrow-borderWidth);transform:var(--PhoneInputCountrySelectArrow-transform);opacity:var(--PhoneInputCountrySelectArrow-opacity)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon+.PhoneInputCountrySelectArrow{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon--border{box-shadow:0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus)}.PhoneInputCountrySelect:focus+.PhoneInputCountryIcon .PhoneInputInternationalIconGlobe{opacity:1;color:var(--PhoneInputCountrySelectArrow-color--focus)}

.search-active{
    display: inline-flex!important;
}