* {
    -webkit-tap-highlight-color: rgba(0,0,0,0); /* make transparent link selection, adjust last value opacity 0 to 1.0 */
}

@font-face {
    font-family: 'Plex';
    font-display: swap;
    src: url('../fonts/Plex-Light.woff2') format('woff2'), url('../fonts/Plex-Light.woff') format('woff');
    font-weight: 200;
}
  
@font-face {
    font-family: 'Plex';
    font-display: swap;
    src: url('../fonts/Plex-Light.woff2') format('woff2'), url('../fonts/Plex-Light.woff') format('woff');
    font-weight: 300;
}

@font-face {
    font-family: 'Plex';
    font-display: swap;
    src: url('../fonts/Plex-Regular.woff2') format('woff2'), url('../fonts/Plex-Regular.woff') format('woff');
    font-weight: 400;
}

@font-face {
    font-family: 'Plex';
    font-display: swap;
    src: url('../fonts/Plex-Medium.woff2') format('woff2'), url('../fonts/Plex-Medium.woff') format('woff');
    font-weight: 500;
}

@font-face {
    font-family: 'Plex';
    font-display: swap;
    src: url('../fonts/Plex-SemiBold.woff2') format('woff2'), url('../fonts/Plex-SemiBold.woff') format('woff');
    font-weight: 600;
}

@font-face {
    font-family: 'Plex';
    font-display: swap;
    src: url('../fonts/Plex-SemiBold.woff2') format('woff2'), url('../fonts/Plex-SemiBold.woff') format('woff');
    font-weight: 700;
}

@font-face {
    font-family: 'Plex';
    font-display: swap;
    src: url('../fonts/Plex-SemiBold.woff2') format('woff2'), url('../fonts/Plex-SemiBold.woff') format('woff');
    font-weight: 800;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/MaterialIconsRound-Regular.eot'); /* For IE6-8 */
    src: local('Material Icons'), local('MaterialIconsRound-Regular'), url('../fonts/MaterialIconsRound-Regular.woff2') format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    /* font-size: 24px; */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
  
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
  
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
  
    /* Support for IE. */
    font-feature-settings: 'liga';
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-30 { font-size: 30px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-120 { font-size: 120px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/* Rules for using icons as dual color according to light/dark theme. */
body.light .material-icons.md-dual { color: rgba(0, 0, 0, 0.54); }
body.light .material-icons.md-dual.md-inactive { color: rgba(0, 0, 0, 0.26); }
body.dark .material-icons.md-dual { color: rgba(255, 255, 255, 1); }
body.dark .material-icons.md-dual.md-inactive { color: rgba(255, 255, 255, 0.3); }

body.light .md-theme { color: var(--color1); }
body.light.modern .md-theme { color: var(--color3); }

:root{
    --color1: rgba(255, 255, 255, 1); /* Primary Use - White */
    --color2: rgba(0, 0, 0, 1); /* Primary Use - Black */
    --color3: rgba(19, 139, 250, 1); /* Primary Use - Blue */
    --color4: rgba(115, 115, 115, 0.2); /* Light Border */
    --color5: rgba(132, 142, 156, 1);
    --color6: rgba(234, 236, 239, 1);
    --color7: rgba(1, 113, 189, 1);
    --color8: rgba(24, 24, 24, 0.5);
    --color9: rgba(93, 93, 93, 1);
    --color10: rgb(0, 0, 0); /* Main Background - Semi Black */
    --color11: rgba(204, 204, 204, 1); /* #ccc Light Gray */
    --color12: rgba(71, 77, 87, 1);
    --color13: rgba(231, 231, 231, 0.2);
    --color14: rgba(30, 35, 41, 1); /* Darkmode Menu background */
    --color15: rgba(43, 49, 57, 1); /* Darkmode Menu link background */
    --color16: rgba(250, 53, 53, 1); /* error / sell */
    --color17: rgba(14, 203, 129, 1); /* success / buy */
    --color18: rgba(43, 49, 57, 0.5);
    --color19: rgba(0, 0, 0, 0.10);
    --color20: rgba(153, 153, 153, 1);
    --color21: rgba(31, 31, 31, 1);
    --color22: rgba(45, 45, 45, 1);
    --color23: rgba(51, 51, 51, 1);
    --color24: rgba(102,102,102, 1);
    --color25: rgba(244, 244, 244, 1);
    --color26: rgba(115, 115, 115, 0.4);
    --color27: rgba(255, 255, 255, 0.5);
    --color28: rgba(38, 166, 154, 1);
    --color29: rgba(1, 113, 189, 0.8);
    --color30: rgba(126, 126, 126, 0.1);
    --color31: rgba(240, 210, 60, 0.8);
    --color32: rgba(242, 174, 61, 1);
    --color33: rgba(227, 227, 227, 1);
}

body{
    -webkit-touch-callout: none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust: none;             /* prevent webkit from resizing text to fit */
    -webkit-user-select: none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
    user-select: none;   
    font-family: Plex, Roboto, system-ui, -apple-system, -apple-system-font, 'Segoe UI', sans-serif !important;
    font-size: 14px;
    margin: 0px;
    padding: 0px;
    /* Padding to avoid the "unsafe" areas behind notches in the screen */
    padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    width: 100%;
    text-align: center;
}

body.light{
    background-color: var(--color1);
    color: var(--color2);
}

body.dark{
    background-color: var(--color10);
    color: var(--color1);
}

body.light .panes{
    background-color: var(--color1);
}

body.dark .panes{
    background-color: var(--color10);
}

/* common fixed styles starts */

input{
    caret-color: var(--color3);
}

input:not(.cs1):-webkit-autofill,
input:-webkit-autofill:not(.cs1):hover,
input:-webkit-autofill:not(.cs1):focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
    border: 1px solid var(--color6) !important;
    border-bottom-color: var(--color6) !important;
    border-bottom-style: solid !important;
    border-bottom-width: 1px !important;
    background-color: transparent !important;
    outline: none !important;
    -webkit-text-fill-color: inherit !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--color1) inset;
    box-shadow: 0 0 0px 1000px var(--color1) inset;
    transition: color 99999s ease-in-out 0s,background-color 99999s ease-in-out 0s;
}

body.dark input:not(.cs1):-webkit-autofill,
body.dark input:-webkit-autofill:not(.cs1):hover,
body.dark input:-webkit-autofill:not(.cs1):focus,
body.dark textarea:-webkit-autofill,
body.dark textarea:-webkit-autofill:hover,
body.dark textarea:-webkit-autofill:focus,
body.dark select:-webkit-autofill,
body.dark select:-webkit-autofill:hover,
body.dark select:-webkit-autofill:focus {
    border: 1px solid var(--color12) !important;
    border-bottom-color: var(--color12) !important;
    -webkit-box-shadow: 0 0 0px 1000px var(--color10) inset;
    box-shadow: 0 0 0px 1000px var(--color10) inset;
    background-color: transparent !important;
}

input::placeholder{
    font-family: Plex, Roboto, system-ui, -apple-system, -apple-system-font, 'Segoe UI', sans-serif !important;
}

.fs9{font-size: 9px;}
.fs10{font-size: 10px;}
.fs11{font-size: 11px;}
.fs12{font-size: 12px;}
.fs13{font-size: 13px;}
.fs14{font-size: 14px;}
.fs15{font-size: 15px;}
.fs16{font-size: 16px;}
.fs17{font-size: 17px;}
.fs18{font-size: 18px;}
.fs19{font-size: 19px;}
.fs20{font-size: 20px;}
.fs21{font-size: 21px;}
.fs22{font-size: 22px;}
.fs23{font-size: 23px;}
.fs24{font-size: 24px;}
.fs25{font-size: 25px;}
.fs26{font-size: 26px;}
.fs27{font-size: 27px;}
.fs28{font-size: 28px;}
.fs29{font-size: 29px;}
.fs30{font-size: 30px;}
.fs31{font-size: 31px;}
.fs32{font-size: 32px;}

.lh13{line-height: 13px;}
.lh14{line-height: 14px;}
.lh16{line-height: 16px;}
.lh18{line-height: 18px;}
.lh20{line-height: 20px;}
.lh22{line-height: 22px;}
.lh25{line-height: 25px;}
.lh26{line-height: 26px;}
.lh40{line-height: 40px;}
.lh60{line-height: 60px;}


.fw300{font-weight: 300;}
.fw400{font-weight: 400;}
.fw500{font-weight: 500;}
.fw600{font-weight: 600;}

.mt0i{margin-top: 0px !important;}
.mt2{margin-top: 2px;}
.mt3{margin-top: 3px;}
.mt4{margin-top: 4px;}
.mt5{margin-top: 5px;}
.mt10{margin-top: 10px;}
.mt15{margin-top: 15px;}
.mt20{margin-top: 20px;}
.mt20i{margin-top: 20px !important;}
.mt25{margin-top: 25px;}
.mt30{margin-top: 30px;}
.mt40{margin-top: 40px;}
.mt50{margin-top: 50px;}
.mt70{margin-top: 70px;}
.mt100{margin-top: 100px;}
.mt150{margin-top: 150px;}

.ml3{margin-left: 3px;}
.ml4{margin-left: 4px;}
.ml5{margin-left: 5px;}
.ml6{margin-left: 6px;}
.ml7{margin-left: 7px;}
.ml8{margin-left: 8px;}
.ml20{margin-left: 20px;}
.mlM20{margin-left: -20px;}
.mtM75{margin-top: -75px !important;}

.mr2{margin-right: 2px;}
.mr3{margin-right: 3px;}
.mr5{margin-right: 5px;}
.mr7{margin-right: 7px;}
.mr10{margin-right: 10px;}

.mb3{margin-bottom: 3px;}
.mb5{margin-bottom: 5px;}
.mb10{margin-bottom: 10px;}
.mb15{margin-bottom: 15px;}
.mb20{margin-bottom: 20px;}
.mb25{margin-bottom: 25px;}
.mb30{margin-bottom: 30px;}
.mb80i{margin-bottom: 80px !important;}
.mb90{margin-bottom: 90px;}

.mx20{margin-left: 20px; margin-right: 20px;}

.pt0i{padding-top: 0px !important;}
.pt1{padding-top: 1px;}
.pt2{padding-top: 2px;}
.pt3{padding-top: 3px;}
.pt5{padding-top: 5px;}
.pt10{padding-top: 10px;}
.pt15{padding-top: 15px;}

.pb5{padding-bottom: 5px;}
.pb10{padding-bottom: 10px;}
.pb15{padding-bottom: 15px;}
.pb200{padding-bottom: 200px;}

.pl0{padding-left: 0px !important;}
.pl5{padding-left: 5px;}
.pl5i{padding-left: 5px !important;}
.pl10{padding-left: 10px;}
.pl20{padding-left: 20px;}

.pr0{padding-right: 0px !important;}
.pr5{padding-right: 5px;}
.pr10{padding-right: 10px;}

.p5{padding: 5px;}
.p10{padding: 10px;}
.p20{padding: 20px;}

.py20{padding-left: 20px; padding-right: 20px;}
.px10{padding-top: 10px; padding-bottom: 10px;}

.dib{display: inline-block;}
.dibi{display: inline-block !important;}
.dblock{display: block;}
.vam{vertical-align: middle;}
.tal{text-align: left;}
.tac{text-align: center;}
.taci{text-align: center !important;}
.tar{text-align: right;}
.ttc{text-transform: capitalize;}

.b0{border:0 !important;}
.wh60{width: calc(100vw - 60px) !important;}

.oboxheading{
    display: inline-block;
    line-height: 20px;
    text-transform: capitalize;
    margin: 15px 10px;
}

.fl{float: left;}
.fr{float: right;}
.cb{clear: both;}

.vw10{width: 10vw !important;}
.vw20{width: 20vw !important;}
.nwid{width: calc(46vw - 10px) !important;}

.ct{color: transparent !important;}
/* common fixed styles ends */

.header-container{
    position: fixed;
    top: 0px;
    z-index: 50;
    width: 100%;
}

.header-area{
    max-width: 768px;
    max-height: 50px;
    overflow: hidden;
    margin: 0px auto;
    background: linear-gradient(45deg,   
    rgb(200, 140, 50),
    rgb(180, 20, 20),
    rgb(90, 40, 125)
    );
    color: var(--color1);
    text-align: left;
}

.loss.header-area{
    background-color: var(--color16);
}

.modern .header-area{
    max-height: 49px;
    border-bottom: 1px solid var(--color4);
    background-color: var(--color1);
    color: var(--color3);
}

.modern .header-area.loss{
    color: var(--color16);
}

.dark.modern .header-area{
    background-color: var(--color10);
}

.menuButtonA{
    padding-left: 10px;
    cursor: pointer;
    display: inline-block;
}

.body-container{
    width: 100vw;
}

.body-area{
    padding-top: 50px;
    max-width: 768px;
    margin: 0px auto;
}

.body-area.qp{
    padding-top: 90px;
}

.verSpan{
    float: right;
    font-size: 12px;
    padding: 10px 10px 0px 0px;
}

.loginLogo{
    clear: both;
    max-width: 180px;
    display: block;
    margin: 0px auto;
}

.input-element{
    background-color: transparent;
    color: var(--color10);
    border: 1px solid var(--color6);
    outline: none;
    height: 40px;
    padding: 0px 10px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    width: calc(100vw - 40px);
    max-width: 728px;
    margin-top: 5px;
}

body.dark .input-element{
    color: var(--color1);
    border: 1px solid var(--color12);
}

.input-element:active,
.input-element:hover,
.input-element:focus,
body.dark .input-element:active,
body.dark .input-element:hover,
body.dark .input-element:focus{
    border: 1px solid var(--color3);
}


/* Buttons Starts */

.button.s1{
    display: block;
    margin: 10px auto;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 500;
    background-color: var(--color3);
    color: var(--color1);
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

.button.s1:hover{
    opacity: 0.9;
}

.button.s5{
    padding: 0px 8px;
    margin: -10px;
    float: right;
    cursor: pointer;
    font-size: 12px;
}
.button.s5:hover{
    background-color: var(--color19);
}

.button.s5 .material-icons{
    color: var(--color2);
    vertical-align: middle;
    padding: 6px 0px;
}

.s5text-content{
    color: var(--color2);
    vertical-align: middle;
    font-size: 12px;
    line-height: 18px;
    padding: 6px 0px 6px 6px;
}

.button-hint{
    display: none;
    position: absolute;
    background-color: var(--color17);
    padding: 5px;
}

.button.s2{
    display: block;
    cursor: pointer;
    padding-left: 20px;
    color: var(--color9);
    font-size: 16px;
    line-height: 42px;
    border-bottom: 1px solid var(--color4);
    text-decoration: none;
}

#as-settings-pane .button.s2, #as-gsettings-pane .button.s2{
    padding-left: 10px;
}

.button.s2.active{
    color: var(--color2);
    background-color: var(--color11);
}

.button.s2.last{
    margin-bottom: 30px;
}

body.dark .button.s2{
    color: var(--color6);
}

body.dark .button.s2.active{
    background-color: var(--color15);
}

.button.s2 span{
    vertical-align: middle;
    display: inline-block;
}

.button.s2 span.material-icons{
    width: 35px;
}

.button.s3{
    cursor: pointer;
    width: 44px;
    height: 40px;
    text-align: center;
    padding-top: 10px;
}

.button.s3.bl{
    border-left: 1px solid var(--color13);
}

body.light.modern .button.s3.bl{
    border-left: 1px solid var(--color6);
}

/* @media (max-width: 431px) {
    .button.s3{
        width: 41px;
    }
}

@media (max-width: 391px) {
    .button.s3{
        width: 38px;
    }
}

@media (max-width: 371px) {
    .button.s3{
        width: 35px;
    }
}

@media (max-width: 341px) {
    .button.s3{
        width: 32px;
    }
} */

.button.s4{
    display: inline-block;
    margin: 10px auto;
    padding: 12px 48px;
    font-size: 16px;
    font-weight: 500;
    background-color: var(--color3);
    color: var(--color1);
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

/* .button.s4:hover{
    opacity: 0.9;
} */

.button.s6{
    display: inline-block;
    margin: 10px auto;
    padding: 5px 10px;
    font-size: 16px;
    font-weight: 500;
    background-color: var(--color3);
    color: var(--color1);
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}

.button.s7{
    display: inline-block;
    margin: 10px auto;
    padding: 5px 10px;
    font-size: 16px;
    font-weight: 500;
    background-color: var(--color16);
    color: var(--color1);
    border-radius: 4px;
    cursor: pointer;
    text-align: center;
}
/* Buttons Ends */


.disabled, .disabled:hover{
    opacity: 0.3 !important;
}

.link-s1{
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    color: var(--color7);
    text-decoration: none;
}

.link-s1:hover{
    text-decoration: underline;
    color: var(--color3);
}

.sidebar-closer{
    display: none;
    position: fixed;
    z-index: 53;
    width: 100vw;
    height: calc(100vh - 50px);
    top: 50px;
    left: 0px;
    background: var(--color8);
    cursor: pointer;
}

body.dark .sidebar-closer{
    background: var(--color13);
}

.sidebar{
    display: inline-block;
    position: fixed;
    z-index: 57;
    width: 300px;
    height: calc(100vh - 50px);
    top: 50px;
    left: -300px;
    background: var(--color1);
    box-shadow: 0 2px 5px 0 rgb(0 0 0 / 16%), 0 2px 10px 0 rgb(0 0 0 / 12%);
    text-align: left;
    overflow-y: scroll;
}

body.dark .sidebar{
    background: var(--color14);
}

body.dark.modern .sidebar{
    background: var(--color10);
}

.link-s2{
    color: var(--color7);
    display: inline-block;
    text-decoration: none;
}

.link-s2:hover{
    color: var(--color3);
}

/* Chrome, Safari, Edge, Opera */
input.hidden_arrows::-webkit-outer-spin-button,
input.hidden_arrows::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input.hidden_arrows[type=number] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.country-onleft{
    width: calc(100vw - 159px);
    vertical-align: middle;
    max-width: 609px;  
    padding-left: 50px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}

.country-selector{
    background-color: transparent;
    color: var(--color10);
    border: 1px solid var(--color6);
    height: 40px;
    padding: 0px 0px 0px 5px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    display: inline-block;
    cursor: pointer;
    vertical-align: middle;
    margin-top: 5px;
    text-align: right;
    width: 70px;
    font-weight: 500;
    font-size: 14px;
}

.country-selector span#cname{
    font-size: 14px;
    font-weight: 500;
    line-height: 40px;
    vertical-align: middle;
    display: inline-block;
}

.country-selector span.material-icons{
    font-size: 24px;
    line-height: 40px;
    vertical-align: middle;
    display: inline-block;
}

body.dark .country-selector{
    color: var(--color1);
    border: 1px solid var(--color12);
}

body.dark .country-selector:hover, .country-selector:hover{
    border: 1px solid var(--color3);
}

.fullpage-selector{
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 65;
    overflow-x: hidden;
    overflow-y: scroll;
    left: 0px;
    top: 0px;
    display: none;
    margin: 0px auto;
}

body.light .fullpage-selector{
    background-color: var(--color1);
    color: var(--color2);
}

body.dark .fullpage-selector{
    background-color: var(--color10);
    color: var(--color1);
}

.fps-heading{
    max-width: 748px;
    max-height: 50px;
    overflow: hidden;
    margin: 0px auto;
    background-color: var(--color3);
    color: var(--color1);
    text-align: left;
    font-weight: 500;
    line-height: 50px;
    padding-left: 20px;
    width: calc(100vw - 20px);
}

.modern .fps-heading{
    max-height: 49px;
    border-bottom: 1px solid var(--color4);
    background-color: var(--color1);
    color: var(--color3);
}

.dark.modern .fps-heading{
    background-color: var(--color10);
}

.fps-body{
    max-width: 768px;
    margin: 0px auto 20px auto;
    border-top: 1px solid var(--color4);
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100vw;
    height: calc(100vh - 133px);
    text-align: left;
}

.fps-close{
    float: right;
    cursor: pointer;
    width: 50px;
    height: 50px;
    overflow: hidden;
}

.fps-close .material-icons{
    padding: 7px;
}

.fps-close:hover{
    background: var(--color19);
}

.fps-opt{
    border-bottom: 1px solid var(--color4);
    padding: 8px 10px;
    cursor: pointer;
}

body.light .fps-opt:hover{
    background: var(--color19);
}

body.dark .fps-opt:hover{
    background: var(--color19);
}

.fps-search, .com-search{
    margin: 0px auto;
    text-align: left;
    max-width: 768px;
}

.fps-ci-holder, .com-ci-holder{
    max-width: 768px;
    text-align: right;
    margin: 0px auto;
}

.fps-searchin, .com-searchin{
    margin: 10px;
    padding-left: 40px;
    width: calc(100vw - 100px);
    height: 40px;
    padding-right: 40px;
    max-width: 668px;
}

.fps-search-icon, .com-search-icon{
    position: absolute;
    margin: 20px 0px 0px 20px;
    display: inline-block;
    height: 40px;
    color: var(--color9);
}

.com-search{
    background-color: var(--color1);
}
body.dark .com-search{
    background-color: var(--color10);
}

.fps-search-close-icon, .com-search-close-icon{
    position: absolute;
    display: inline-block;
    line-height: 40px;
    width: 40px;
    text-align: center;
    margin: 11px 0px 0px -51px;
    cursor: pointer;
}

.loadingHolder{
    display: block;
    position: fixed;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0px;
    z-index: 98;
    text-align: center;
}

body.dark .loadingHolder{
    background-color: var(--color8);
    color: var(--color1);
}

body.light .loadingHolder{
    background-color: var(--color26);
    color: var(--color2);
}

.loader{
    margin-top: 30vh;
    border-radius: 4px;
    display: inline-block;
    padding: 20px;
    font-weight: 600;
    border: 2px solid var(--color3);
}

body.dark .loader{
    background-color: var(--color8);
}

body.light .loader{
    background-color: var(--color26);
}

.loader img{
    width: 98px;
    margin-bottom: 10px;
}

.input-hint{
    color: var(--color16);
    margin: 3px 0px 0px 0px;
}


/* Flash MSG: Starts */

.flashMSG-success-holder, .flashMSG-error-holder{
    position: fixed;
    width: 100vw;
    height: 100vh;
    text-align: center;
    z-index: 85;
    display: none;
}

body.light .flashMSG-success-holder, body.light .flashMSG-error-holder{
    background: var(--color8);
}

body.dark .flashMSG-success-holder, body.dark .flashMSG-error-holder{
    background: var(--color13);
}

.flashMSG-holder{
    width: 70vw;
    margin: 20vh auto;
    border-radius: 20px;
    padding: 20px;
}

body.light .flashMSG-holder{
    background-color: var(--color1);
    color: var(--color2);
}

body.dark .flashMSG-holder{
    background-color: var(--color10);
    color: var(--color1);
}

.flashMSG-success-holder .material-icons{
    color: var(--color17);
}

.flashMSG-error-holder .material-icons{
    color: var(--color16);
}

/* Flash MSG: Ends */

.country-icon{
    width: 40px;
    height: 26px;
    margin-right: 10px;
    border-radius: 4px;
    border: 1px solid;
}

.fps-cimg{
    width: 40px;
    height: 26px;
    border-radius: 4px;
    margin: 6px 0px 6px 5px;
    border: 1px solid;
}

.lable-ccode{
    width: 129px;
    display: inline-block;
}

.single-country-view{
    margin-right: -116px;
    line-height: 40px;
    vertical-align: top;
}

.single-country-image{
    min-width: 45px;
    max-height: 40px;
    display: inline-block;
    vertical-align: top;
}

.nav-lable{
    font-weight: 600;
    padding: 5px 0px 5px 10px;
    background-color: var(--color18);
    border-top: 1px solid var(--color4);
    margin-top: 10px;
}

body.light.classic .nav-lable{ color: var(--color1); }
body.dark.classic .nav-lable{ color: var(--color5); }

.modern .nav-lable{
    background-color: var(--color30);
}

body.light.modern .nav-lable{ color: var(--color9); }
body.dark.modern .nav-lable{ color: var(--color20); }

.single-settings-view{
    float: right;
    color: var(--color3);
    margin-right: 10px;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 600;
}

.currency-symbol-view{
    float: right;
    font-size: 14px;
    font-weight: 600;
    line-height: 26px;
    color: var(--color3);
    min-width: 40px;
    text-align: right;
}

.currency-symbol2-view{
    float: right;
    font-size: 14px;
    line-height: 26px;
    min-width: 35px;
    text-align: left;
}

.goleft-view{
    float: right;
    font-size: 20px;
    font-weight: 600;
    line-height: 22px;
    color: var(--color3);
}

.goleft-view.big{
    line-height: 0px;
}

.addright-view{
    float: right;
    font-size: 20px;
    font-weight: 600;
    color: var(--color3);
}

.addright-view.big{
    line-height: 0px;
}

.addright-view.small{
    line-height: 26px;
}

.ind-user-holder{
    margin: 5px 10px;
    padding: 10px;
    border: 1px solid transparent;
    cursor: pointer;
}

body.light .ind-user-holder{
    color: var(--color2);
    background-color: var(--color4);
}

body.dark .ind-user-holder{
    color: var(--color1);
    background-color: var(--color15);
}

.ind-user-holder:hover{
    opacity: 0.9;
    border: 1px solid var(--color3);
}

.ind-user-lable{
    margin-top: 5px;
    font-weight: 300;
    font-size: 11px;
    line-height: 11px;
}

body.light .ind-user-lable{
    color: var(--color9);
}

body.dark .ind-user-lable{
    color: var(--color5);
}

.ind-user-info{
    font-weight: 500;
    line-height: 16px;
    font-size: 14px;
    text-transform: capitalize;
}

.footer-space{
    min-height: 80px;
}

.footer-menu-container{
    position: fixed;
    bottom: 0px;
    z-index: 35;
    width: 100%;
    max-height: 80px;
    height: 80px;
    overflow: hidden;
}

.footer-menu{
    max-width: 768px;
    margin: 0px auto;
    text-align: center;
    border-top: 1px solid var(--color4);
}

body.light .footer-menu{
    /*background-color: var(--color1);*/
    background: linear-gradient(45deg,   
    rgb(200, 140, 50),
    rgb(180, 20, 20),
    rgb(90, 40, 125)
    );
}

body.dark .footer-menu{
    /*background-color: var(--color10);*/
    background: linear-gradient(45deg,   
    rgb(200, 140, 50),
    rgb(180, 20, 20),
    rgb(90, 40, 125)
    );
}

.menuButtonB{
    width: calc(20vw);
    max-width: 153px;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    text-decoration: none !important;
    padding-bottom: 34px;
}

.fmicon{
    font-size: 24px;
    line-height: 34px;
}

.fmlable{
    font-size: 13px;
    margin-top: -5px;
}

body.light .menuButtonB{
    color: var(--color2);
}

body.dark .menuButtonB{
    color: var(--color2);
}

body.light .menuButtonB.active, body.dark .menuButtonB.active{
    color: var(--color1) !important;
}

/* body.light .menuButtonB:hover{
    background-color: var(--color19);
}

body.dark .menuButtonB:hover{
    background-color: var(--color4);
} */

.sb-ad-holder{
    padding: 10px 5px 10px 5px;
    border-left: 5px solid var(--color17);
    margin-left: 10px;
}

.active-mark{
    float: right;
    font-weight: 500;
    font-size: 12px;
    margin-top: -8px;
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background: var(--color17);
}

.obox-closer{
    display: none;
    position: fixed;
    z-index: 52;
    width: 100vw;
    height: calc(100vh);
    top: 0px;
    left: 0px;
    cursor: pointer;
    background: var(--color13);
}

body.light .obox-closer{
    background: var(--color26);
}

.obox{
    display: inline-block;
    position: fixed;
    z-index: 55;
    width: 100vw;
    top: 100vh;
    left: 0px;
    text-align: center;
}

.obox-inner-holder{
    max-width: 768px;
    margin: auto;
}

.obox-heading{
    background: var(--color21);
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    line-height: 50px;
    margin: 0px 10px;
    font-size: 12px;
}

.obox-button{
    line-height: 60px;
    font-size: 18px;
    text-align: center;
    margin: 0px 10px;
    background: var(--color21);
    border-top: 1px solid var(--color24);
    color: var(--color3);
    cursor: pointer;
}

body.light .obox-button, body.light .obox-heading{
    background: var(--color6);
}

body.light .obox-button{
    border-top: 1px solid var(--color4);
}

.obox-button.last{
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
}

body.dark .obox-button:hover, body.dark .obox-cancel:hover{
    background-color: var(--color23);
}

body.light .obox-button:hover, body.light .obox-cancel:hover{
    background-color: var(--color25);
}

.obox-cancel{
    line-height: 60px;
    border-radius: 15px;
    margin: 5px 10px 15px 10px;
    background: var(--color22);
    font-weight: bold;
    color: var(--color3);
    font-size: 18px;
    cursor: pointer;
}

body.light .obox-cancel{
    background: var(--color1);
}

.symbols-selector, .sort-n-remove-selector{
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 70;
    overflow-x: hidden;
    overflow-y: scroll;
    left: 0px;
    top: 0px;
    display: none;
    margin: 0px auto;
}

body.light .symbols-selector, body.light .sort-n-remove-selector{
    background-color: var(--color1);
    color: var(--color2);
}

body.dark .symbols-selector, body.dark .sort-n-remove-selector{
    background-color: var(--color10);
    color: var(--color1);
}

.ss-heading, .snr-heading{
    width: 100vw;
    max-width: 748px;
    max-height: 50px;
    overflow: hidden;
    margin: 0px auto;
    background-color: var(--color3);
    color: var(--color1);
    text-align: left;
}

.modern .ss-heading, .modern .snr-heading{
    max-height: 49px;
    border-bottom: 1px solid var(--color4);
    background-color: var(--color1);
    color: var(--color3);
}

.dark.modern .ss-heading, .dark.modern .snr-heading{
    background-color: var(--color10);
}

.ss-body, .snr-body{
    max-width: 768px;
    margin: 0px auto 20px auto;
    border-top: 1px solid var(--color4);
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100vw;
    height: calc(100vh - 133px);
    text-align: left;
}

.ss-close, .snr-close{
    float: left;
    cursor: pointer;
    height: 50px;
    overflow: hidden;
}

.ss-close .material-icons, .snr-close .material-icons{
    padding: 10px 5px;
}

.ss-close-holder, .snr-close-holder{
    cursor: pointer;
    display: inline-block;
    padding-right: 10px;
}

.ss-close-holder:hover, .snr-close-holder:hover{
    background: var(--color19);
}

.ss-search{
    margin: 0px auto;
    text-align: left;
    max-width: 768px;
}

.ss-ci-holder{
    max-width: 768px;
    text-align: right;
    margin: 0px auto;
}

.ss-searchin{
    margin: 10px;
    padding-left: 40px;
    width: calc(100vw - 100px);
    height: 40px;
    padding-right: 40px;
    max-width: 668px;
}

.ss-search-icon {
    position: absolute;
    margin: 20px 0px 0px 20px;
    display: inline-block;
    height: 40px;
    color: var(--color9);
}

.ss-search-close-icon {
    position: absolute;
    display: inline-block;
    line-height: 40px;
    width: 40px;
    text-align: center;
    margin: 11px 0px 0px -51px;
    cursor: pointer;
}

.ss-opt{
    border-bottom: 1px solid var(--color4);
    padding: 8px 10px;
    cursor: pointer;
}

body.light .ss-opt:hover{
    background: var(--color19);
}

body.dark .ss-opt:hover{
    background: var(--color19);
}

.isv-holder{
    border-bottom: 1px solid var(--color4);
    padding: 10px 8px;
    clear: both;
    cursor: pointer;
}

.isv1{
    display: inline-block;
}

body.dark .colorn{
    color: var(--color20);
}

body.light .colorn{
    color: var(--color9);
}

.ticker-ud{
    padding: 0px 3px;
    display: inline-block;
    border-radius: 4px;
}

.t-up{
    color: var(--color17);
}

.t-dn{
    color: var(--color16);
}

body.classic .t-up, body.classic .t-dn{
    background-color: var(--color8);
}

.coloru{
    color: var(--color3);
}

.colord{
    color: var(--color16);
}

.colord-i{
    color: var(--color16) !important;
}

.colorh{
    color: var(--color28);
}

.colorw{
    color: var(--color1);
}

.colorb{
    color: var(--color2);
}

.colore{
    color: var(--color32);
}

.isv2, .isv3{
    float: right;
    text-align: right;
    margin-top: 4px;
}

.ui-sort-handle{
    float: right;
    padding: 10px 15px;
    margin: 0px;
    vertical-align: middle;
}

#as-sort-remove-pane .isv1{
    padding: 10px 0px;
}

.isv3{
    width: 96px;
}

.isv-price-small{
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.7px;
    display: inline-block;
    transform: scale(1, 1.2);
    -webkit-transform: scale(1, 1.2);
    -moz-transform: scale(1, 1.2);
    -ms-transform: scale(1, 1.2);
    -o-transform: scale(1, 1.2);
}

.callpush .isv-price-small, .putpush .isv-price-small{
    font-size: 15px;
}

.isv-price-big{
    font-size: 28px;
    line-height: 31px;
    vertical-align: bottom;
    letter-spacing: -0.7px;
    font-weight: 600;
    display: inline-block;
    transform: scale(1, 1.2);
    -webkit-transform: scale(1, 1.2);
    -moz-transform: scale(1, 1.2);
    -ms-transform: scale(1, 1.2);
    -o-transform: scale(1, 1.2);
}

.ripple{
    position:relative;
    overflow:hidden;
    transform:translate3d(0,0,0);
}

.ripple:after{
    content:"";
    display:block;
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    pointer-events:none;
    background-repeat:no-repeat;
    background-position:50%;
    transform:scale(10,10);
    opacity:0;
    transition:transform .3s,opacity .6s;
}

body.dark .ripple:after{
    background-image:radial-gradient(circle,#FFF 10%,transparent 10.01%);
}

body.light .ripple:after{
    background-image:radial-gradient(circle,#000 10%,transparent 10.01%);
}

.ripple:active:after{
    transform:scale(0,0);
    opacity:.2;
    transition:0s;
}

.snr-delete{
    background-color: var(--color16);
    color: var(--color1);
}

body.dark .snr-delete{
    color: var(--color2);
}

.snr-isv-holder{
    border-bottom: 1px solid var(--color4);
    clear: both;
    cursor: pointer;
    border-collapse: collapse;
}

#sortable1 {
    border-top: 1px solid var(--color4);
    list-style-type: none;
    margin: 0;
    padding: 0;
}    

#sortable1 li { 
    overflow: visible;
    width: 100vw; 
    max-width: 768px;
}

.sortable1.list, .sortable1.lis { 
    clear:both;
}

body.dark .ui-sortable-helper{
    background: var(--color8);
    border-top: 1px solid var(--color4);
    -webkit-box-shadow: 0px 10px 10px 0px rgba(74,74,74,1),0px -10px 10px 0px rgba(74,74,74,1);
    -moz-box-shadow: 0px 10px 10px 0px rgba(74,74,74,1),0px -10px 10px 0px rgba(74,74,74,1);
    box-shadow: 0px 10px 10px 0px rgba(74,74,74,1),0px -10px 10px 0px rgba(74,74,74,1);
}

body.light .ui-sortable-helper{
    background: var(--color27);
    border-top: 1px solid var(--color4);
    -webkit-box-shadow: 0px 10px 10px 0px rgba(204,204,204,1),0px -10px 10px 0px rgba(204,204,204,1);
    -moz-box-shadow: 0px 10px 10px 0px rgba(204,204,204,1),0px -10px 10px 0px rgba(204,204,204,1);
    box-shadow: 0px 10px 10px 0px rgba(204,204,204,1),0px -10px 10px 0px rgba(204,204,204,1);
}

.isv4{
    float: left;
    padding: 10px;
    vertical-align: middle;
    min-width: 24px;
}

/* .snr-qh-scroll{
    display: inline-block;
    width: 40px;
    vertical-align: top;
    border-top: 1px solid var(--color4);
} */

.snr-quotes-holder{
    display: inline-block;
    width: 100vw;
    max-width: 768px;
    margin-bottom: 10px;
    vertical-align: top;
}

.snr-in-dummy{
    height: 80px;
    border-bottom: 1px solid var(--color4);
    width: 40px;
}

.sdrow{
    padding: 5px 15px;
    border-bottom: 1px solid var(--color4);
    clear: both;
}

.cdcell-l{
    font-size: 14px;
    font-weight: bold;
    line-height: 30px;
}

.cdcell-r{
    font-size: 14px;
    float: right;
    line-height: 30px;
}

.sdrow2{
    padding: 2px 10px;
    border-bottom: 1px solid var(--color4);
    clear: both;
}

.cdcell-l2{
    font-size: 12px;
    line-height: 18px;
}

.cdcell-r2{
    font-size: 12px;
    float: right;
    line-height: 18px;
    font-weight: bold;
}

body.dark .cdcell-r{
    color: var(--color20);
}

body.light .cdcell-r{
    color: var(--color9);
}

.jch-container{
    width: calc(100vw + 5px);
    height: calc(100vh - 340px);
    margin: 0px 0px 0px -5px;
    max-width: 773px;
}

.jch-yx{
    position: absolute;
    display: inline-block;
    right: 0;
    top: 0;
    background-color: transparent;
    z-index: 10;
    text-align: center;
}

.gchart-text{
    position: absolute;
    z-index: 20;
    line-height: 20px;
    text-align: left;
    margin-top: 8px;
}

.gchart-canvas{
    position: relative;
    width: calc(100vw + 5px);
    height: calc(100vh - 340px);
    min-height: 200px;
    overflow: hidden;
    z-index: 12;
    max-width: 768px;
    padding-top: 5px;
}

/* Hide scrollbar for Chrome, Safari and Opera */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
.gchart-canvas::-webkit-scrollbar,
.symbols-selector::-webkit-scrollbar,
.ss-body::-webkit-scrollbar,
.fullpage-selector::-webkit-scrollbar,
.fps-body::-webkit-scrollbar,
.body-container::-webkit-scrollbar,
.body-area::-webkit-scrollbar,
.hor-sc-bar::-webkit-scrollbar,
.panes::-webkit-scrollbar,
.sidebar::-webkit-scrollbar{
    display: none;
}
  
/* Hide scrollbar for IE, Edge and Firefox */
html, body, .gchart-canvas, .symbols-selector, .ss-body, .fullpage-selector, .fps-body, .panes, .body-container, .body-area, .hor-sc-bar, .sidebar {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
  
/* non-selective or unselectable elements */
html, body, div, span, p, nav, section, canvas {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
 
.ch-loader img{
    width: 18px;
    height: 18px;
    vertical-align: middle; 
}

.gls-sm{
    font-size:12px;
}

@media (max-width: 361px) {
    .gls-sm{
      font-size:11px;
    }
}

@media (min-width: 361px) {
    .glg-hide{
      display: none;
    }
}

.lttime{
    font-size: 13px;
    position: absolute;
}

.isv1 .s_name{
    font-size: 15px;
    height: 24px;
    line-height: 25px;
    font-weight: 500;
    vertical-align: middle;
}

.s_segment{
    font-weight: 300;
    display: inline-block;
    font-size: 10px;
    line-height: 10px;
    padding: 1px 2px;
    margin: 8px 0px 0px 2px;
    border-radius: 3px;
    position: absolute;
}

body.light .s_segment {
    background: var(--color19);
}

body.dark .s_segment {
    background: var(--color13);
}

.obs_segment{
    font-weight: 300;
    display: inline-block;
    font-size: 14px;
    line-height: 14px;
    padding: 2px 4px;
    margin: 4px 0px 0px 2px;
    border-radius: 4px;
}

body.light .obs_segment {
    background: var(--color19);
}

body.dark .obs_segment {
    background: var(--color13);
}

/* //320
below 321 is small

//360
//375
below 381 is medium

//390
//412
//414
//428 */

.buyopen{
    position: absolute;
    width: 15px;
    height: 15px;
    margin-left: -8px;
    margin-top: -10px;
    background: linear-gradient(to top left, transparent 0%, transparent 50%, var(--color3) 50%, var(--color3) 100%);
}

.sellopen{
    position: absolute;
    width: 15px;
    height: 15px;
    margin-left: -8px;
    margin-top: -10px;
    background: linear-gradient(to top left, transparent 0%, transparent 50%, var(--color16) 50%, var(--color16) 100%);
}

.expiredmark{
    position: absolute;
    width: 15px;
    height: 15px;
    margin-left: -8px;
    margin-top: -10px;
    background: linear-gradient(to top left, transparent 0%, transparent 50%, var(--color32) 50%, var(--color32) 100%);
}

/* .buyopen{
    position: absolute;
    width: 4px;
    height: 70px;
    margin-left: -8px;
    margin-top: -8px;
    background: var(--color3);
}

.sellopen{
    position: absolute;
    width: 4px;
    height: 70px;
    margin-left: -8px;
    margin-top: -8px;
    background: var(--color16);
} */

@media (max-width: 361px) {

    .isv1 .fs14{
        font-size: 13px;
    }
    .isv1 .lh14{
        line-height: 13px;
    }

    .isv1 .s_name{
        font-size: 14px;
    }

    .isv-price-small{
        font-size: 18px;
    }
    .isv-price-big{
        font-size: 24px;
        line-height: 28px;
    }

    .isv2 .fs14, .isv3 .fs14{
        font-size: 13px;
    }
    .isv2 .lh16, .isv3 .lh16{
        line-height: 15px;
    }

    .isv3{
        width: 76px;
    }

    .lttime{
        font-size: 12px;
    }

    .isv-holder{
        padding: 10px 6px;
    }

    .s_segment{
        font-size: 9px;
        line-height: 9px;
    }

    .buyopen{
        margin-left: -6px;
    }
    
    .sellopen{
        margin-left: -6px;
    }

}

.pc-in-ch{
    margin-left: 5px;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 12px;
}

.gup{
    color: var(--color28) !important;
    background-color: rgba(0,126,246,0.15);
}

.gdn{
    color: var(--color16) !important;
    background-color: rgba(234,81,89,0.15);
}

/* .gup2{
    color: var(--color-success) !important;
}

.gdn2{
    color: var(--color-error) !important;
} */

.ls-halfpx{
    letter-spacing: -0.5px;
}

.livestatus{
    color: var(--color17);
    position: absolute;
    margin-left: 2px;
    font-weight: 900;
    font-size: 20px;
    line-height: 12px;
    display: none;
}

.offstatus{
    color: var(--color16);
    position: absolute;
    margin-left: 2px;
    font-weight: 900;
    font-size: 20px;
    line-height: 12px;
}

#t-cross, .aiab .material-icons{
    color: var(--color27);
}

.modern.light #t-cross, .modern.light .aiab .material-icons{
    color: var(--color5);
}

#t-cross.active, .aiab.active .material-icons{
    color: var(--color1);
}

.modern #t-cross.active, .modern .aiab.active .material-icons{
    color: var(--color3);
}

.candlePeriodBox{
    float: right;
    width: 50px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}

#actCP{
    font-weight: bold;
    line-height: 50px;
}

#actCP:hover, #actCP.active{
    background-color: var(--color19);
}

.cpDropDownHolder{
    position: absolute;
    z-index: 20;
    background-color: var(--color29);
    display: none;
}

.modern .cpDropDownHolder{
    background-color: var(--color4);
}

.ch-cp{
    width: 50px;
    line-height: 40px;
    border-bottom: 1px solid var(--color4);
}

.ch-cp:hover{
    font-weight: bold;
    background-color: var(--color12);
}

.orderTypeBox{
    line-height: 50px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    width: 100vw;
    max-width: 768px;
}

.actOT{
    font-weight: 500;
    background-color: var(--color30);
    border-bottom: 1px solid var(--color4);
}

.otDropDownHolder{
    display: none;
    border-bottom: 1px solid var(--color4);
}

.ch-ot{
    border-bottom: 1px solid var(--color4);
}

.ch-tt{
    border-top: 1px solid var(--color4);
}

.obs-bar{
    height: 40px;
    border-bottom: 1px solid var(--color4);
    width: 100vw;
    overflow: hidden;
    max-width: 768px;
    clear: both;
}

.obs-bidask-bar, .obs-close-bar{
    font-weight: bold;
    /* background-color: var(--color30); */
    /* border-bottom: 1px solid var(--color4); */
    font-size: 20px;
    font-weight: 600;
    line-height: 29px;
    min-height: 29px;
    padding-top: 5px;
    clear: both;
}

.obs-bid{
    float: left;
    text-align: right;
    color: var(--color16);
    width: calc(50vw - 10px);
    margin-right: 10px;
    max-width: 372px;
}

.obs-ask{
    float: left;
    text-align: left;
    color: var(--color3);
    margin-left: 10px;
    width: calc(50vw - 10px);
    max-width: 372px;
}

.obs-close-bar .obs-bid-c{
    text-align: center;
    color: var(--color16);
    display: block;
}

.obs-close-bar .obs-ask-c{
    text-align: center;
    color: var(--color3);
    display: block;
}

.obs-name-lable{
    display: inline-block;
    margin-left: 10px;
    line-height: 40px;
    height: 40px;
    vertical-align: middle;
}

.obs-input-holder{
    display: inline-block;
    vertical-align: middle;
}

.obs-m, .obs-p{
    min-width: 40px;
    height: 40px;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    font-weight: 900;
    vertical-align: middle;
    cursor: pointer;
    color: var(--color3);
}

.obs-m-dis, .obs-p-dis{
    min-width: 40px;
    height: 40px;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    font-weight: 900;
    vertical-align: middle;
    cursor: pointer;
    color: var(--color3);
}

.lotsized{
    font-size: 12px;
    line-height: 39px;
    display: inline-block;
    vertical-align: middle;
    padding: 1px 0px 0px 3px;
}

input.obs-quantity{
    display: inline-block;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    padding-top: 4px;
    height: 35px;
    vertical-align: middle;
    width: 106px;
}

body.light input.obs-quantity, body.light input.obs-price{
    color: var(--color2);
}

body.dark input.obs-quantity, body.dark input.obs-price{
    color: var(--color1);
}

#as-buysell-pane input, #as-buysell-pane input:focus, #as-ordermodify-pane input, #as-ordermodify-pane input:focus{
    border: none !important;
    outline: none !important;
    background: transparent !important;
}

input.obs-sl, input.obs-tp, input.obs-price{
    display: inline-block;
    text-align: center;
    font-size: 15px;
    padding-top: 4px;
    height: 35px;
    vertical-align: middle;
    width: 106px;
}

.obs-sl{
    color: var(--color16);
}

.obs-tp{
    color: var(--color17);
}

input.obs-quantity:focus{
    outline: none !important;
}

.obs-bs-bar{
    text-align: center;
    width: 100vw;
    clear: both;
    max-width: 768px;
}

.place-pending{
    text-align: center;
    color: var(--color1);
    font-weight: 600;
    padding: 5px;
    cursor: pointer;
    max-width: 758px;
}

.place-pending.buy{
    background-color: var(--color3);
}

.place-pending.sell{
    background-color: var(--color16);
}

.market-price-warning{
    padding: 10px;
    color: var(--color9);
    font-size: 12px;
    margin-top: 3px;
    background-color: var(--color30);
    border-top: 1px solid var(--color4);
    border-bottom: 1px solid var(--color4);
}

body.dark .market-price-warning{
    color: var(--color20);
}

.buy-by-market, .sell-by-market, .modify-order, .close-order{
    text-align: center;
    display: inline-block;
    width: calc(50vw - 16px);
    color: var(--color1);
    font-weight: 600;
    padding: 5px;
    cursor: pointer;
    max-width: 372px;
}

.buy-by-market{
    background-color: var(--color3);
}

.sell-by-market{
    margin-right: 3px;
    background-color: var(--color16);
}

.modify-order{
    width: calc(100vw - 16px);
    padding: 10px 5px;
    background-color: var(--color9);
}

.close-order{
    width: calc(100vw - 16px);
    padding: 10px 5px;
    background-color: var(--color31);
}

.balanceDataHolder{
    border-bottom: 1px solid var(--color4);
    padding: 8px 10px;
}

.blbl{
    font-weight: 600;
    line-height: 24px;
    /* color: var(--color9); */
    padding-right: 5px;
    background: var(--color1);
}

body.dark .blbl{
    /* color: var(--color20); */
    background: var(--color10);
}

.bval{
    font-weight: 600;
    line-height: 24px;
    float: right;
    text-align: right;
    color: var(--color3);
    padding-left: 5px;
    background: var(--color1);
}

body.dark .bval{
    background: var(--color10);
}

.margin-segment-box{
    padding: 10px;
    margin-bottom: 10px;
    background: var(--color25);
    border-bottom: 2px solid var(--color4);
}

.blbl2{
    font-weight: 500;
    line-height: 24px;
    /* color: var(--color9); */
    padding-right: 5px;
    background: var(--color25);
}

body.dark .blbl2{
    /* color: var(--color20); */
    background: var(--color10);
}

.bval2{
    font-weight: 500;
    line-height: 24px;
    float: right;
    text-align: right;
    color: var(--color3);
    padding-left: 5px;
    background: var(--color25);
}

body.dark .bval2{
    background: var(--color10);
}

.dbb{
    background-image: radial-gradient(circle, var(--color4) 20%, transparent 10%), radial-gradient(circle, var(--color4) 20%, transparent 10%);
    background-size: 8px 8px;
    background-position: 5px 12px;
    background-repeat: repeat-x;
}

body.dark .dbb{
    background-image: radial-gradient(circle, var(--color9) 20%, transparent 10%), radial-gradient(circle, var(--color9) 20%, transparent 10%);
}

.positionsHeader{
    color: var(--color9);
    background: var(--color30);
    padding: 3px 10px;
    font-weight: 500;
    border-bottom: 1px solid var(--color4);
}

body.dark .positionsHeader{
    color: var(--color20);
}

.formSubHeader{
    color: var(--color9);
    background: var(--color30);
    padding: 8px 10px;
    font-weight: 500;
    border-top: 1px solid var(--color4);
    border-bottom: 1px solid var(--color4);
}

body.dark .formSubHeader{
    color: var(--color20);
}

.panes{
    position: absolute;
    z-index: 21;
    width: 100vw;
    overflow: hidden;
}

.panes:not(#as-accounts-pane){
    display: none;
}

.as__{
    cursor: pointer;
}

@media (max-width: 301px) {

    input.obs-sl, input.obs-tp, input.obs-price{
        width: 106px;
        font-size: 14px;    
    }

    .obs-name-lable{
        font-size: 12px;
    }

    .obs-m, .obs-p {
        min-width: 30px;
    }

    .obs-m-dis, .obs-p-dis {
        min-width: 30px;
    }

    .market-price-warning{
        font-size: 10px;
    }
}

.def_indicator{
    font-size: 12px;
    font-weight: 300;
    color: var(--color3);
    background: var(--color30);
    padding: 2px 4px;
    border-radius: 3px;
    line-height: 40px;
    float: right;
}

.rtot, .rtob, .rtow, .bow, .gob{
    display: inline-block;
    border-radius: 4px;
    border: 1px solid var(--color4);
    margin: 0px 5px 0px 0px;
    padding: 2px 4px;
}

body.light .rtot, .rtow, .bow{
    background-color: var(--color1);
}

body.dark .rtot, .rtob, .gob{
    background-color: var(--color2);
}

.rtot .ccc1, .rtob .ccc1, .rtow .ccc1{
    color: var(--color16);
    font-size: 32px;
    vertical-align: middle;
}

.rtot .ccc2, .rtob .ccc2, .rtow .ccc2{
    color: var(--color28);
    font-size: 32px;
    vertical-align: middle;
}

.gob .ccc1{
    color: var(--color17);
    font-size: 32px;
    vertical-align: middle;
}

.bow .ccc1{
    color: var(--color2);
    font-size: 32px;
    vertical-align: middle;
}

/* .pulltorefresh{
    position: absolute;
    z-index: 0;
    font-size: 48px;
    margin-left: -24px;
    color: var(--color5);
} */

.fps-opimage-empty{
    font-size: 12px;
    line-height: 38px;
}

.single-trade-box{
    padding: 10px 8px;
    border-bottom: 1px solid var(--color4);
    clear: both;
    cursor: pointer;
    min-height: 43px;
}

.single-trade-box .fs1{
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    vertical-align: middle;
}

.single-trade-box .fs2{
    font-size: 18px;
    font-weight: 500;
    line-height: 40px;
}

.single-trade-box .fs2e{
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}

.single-trade-box .fs3{
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    vertical-align: middle;
}

.color2n{
    color: var(--color22);
}
body.dark .color2n{
    color: var(--color11);
}

.stb1{
    display: inline-block;
}

.stb2{
    float: right;
}

.tibl{
    width: calc(50vw - 10px);
    max-width: 374px;
    text-align: left;
    font-size: 14px;
    line-height: 16px;
    display: inline-block;
}

.tibr{
    width: calc(50vw - 10px);
    float: right;
    text-align: left;
    font-size: 14px;
    line-height: 16px;
    max-width: 374px;
}

.llb{
    padding: 3px;
    display: inline-block;
    text-align: left;
}

.rvb{
    padding: 3px;
    text-align: right;
    float: right;
}

@media (max-width: 361px) {
    .sfiss{
        font-size: 12px;
    }
    .tibr, .tibl{
        font-size: 12px;
        line-height: 14px;
    }
}

#as-orderclose-pane input:disabled {
    border-color: transparent !important;
    background-color: transparent !important;
}

.inProfit{
    background-color: var(--color3);
}

.inLoss{
    background-color: var(--color16);
}

.ttc{
    text-transform: capitalize;
}

.ttl{
    text-transform: lowercase;
}

.tapHold{
    background-color: var(--color4);
}

.subpages-bar{
    text-align: center;
    padding: 4px 0px;
    border-bottom: 1px solid var(--color4);
}

.spb-action-button{
    display: inline-block;
    border-radius: 4px;
    padding: 4px 10px;
    vertical-align: middle;
}

body.dark .spb-action-button{
    color: var(--color6);
}

.spb-action-button.active{
    background-color: var(--color1);
}

body.dark .spb-action-button.active{
    background-color: var(--color24);
}

.payment-action-button{
    display: inline-block;
    border-radius: 4px;
    padding: 4px 10px;
    vertical-align: middle;
}

body.dark .payment-action-button{
    color: var(--color6);
}

.payment-action-button.active{
    background-color: var(--color1);
}

body.dark .payment-action-button.active{
    background-color: var(--color24);
}

.spb-holder{
    display: inline-block;
    background-color: var(--color4);
    border-radius: 4px;
    padding: 2px;
}

body.dark .spb-holder{
    background-color: var(--color30);
}

.jb{
    display: inline-block;
    border-right: 1px solid var(--color4);
    min-width: 1px;
    min-height: 22px;
    vertical-align: middle;
}

.tpsfbox{
    position: fixed;
    background-color: var(--color1);
}

body.dark .tpsfbox{
    background-color: var(--color10);
}

.posabs{
    position: absolute;
}

.posfix{
    position: fixed;
    z-index: 2;
}

.order-book-holder{
    text-align: center;
    margin: auto;
    border-top: 1px solid var(--color4);
}
.left-ob{
    width: calc(50vw - 8px);
    float: left;
    max-width: 379px;
    padding-left: 5px;
}
.right-ob{
    width: calc(50vw - 8px);
    float: right;
    max-width: 379px;
    padding-right: 5px;
}
.data-r{
    clear: both;
    padding: 5px 0px;
    font-size: 13px;
    line-height: 15px;
}
.ai-r{
    clear: both;
    padding: 5px;
    font-size: 13px;
    line-height: 15px;
}
.rules-ul{
    list-style: decimal-leading-zero;
    text-align: left;
    margin: 10px 0px 100px -5px;
    padding-right: 10px;
}

.rules-ul li{
    margin-bottom: 10px;
}

.billlink{
    vertical-align: middle;
    margin-right: 10px;
}
.dnone{
    display: none;
}
.licon{
    list-style: none;
    margin: 5px;
    padding-left: 5px;
    padding-right: 5px;
    max-height: 40px;
}
body.light .hscroll{
    background: #EFEFEF;
    line-height: 40px;
}
body.dark .hscroll{
    background: var(--color30);
    line-height: 40px;
}
.ssicon{
    font-weight: 500;
    cursor: pointer;
    width: 20vw;
    text-align: center;
    vertical-align: middle;
    line-height: 22px;
    display:inline-block;
    font-size: 13px;
    max-width: 140px;
}
.activeSS{
    border: 1px solid #007EF6;
    border-radius: 4px;
    background: #007EF6;
    color: white;
}

.menuarea{
    max-width: 768px;
    overflow: hidden;
    margin: 0px auto;
}
.col-red {
    color: red !important;
}
.green {
    color: var(--color17);
}
.orange{
    color: orange;
}
.mh60{min-height: 60px !important;}
.mh75{min-height: 75px !important;}
.mreset{
    border: 1px solid var(--color3);
    padding: 6px;
    border-radius: 3px;
    font-weight: 500;
    background: var(--color3);
    color: white;
    cursor: pointer;
}
.payin{
    border: 1px solid var(--color3);
    font-size: 16px;
    line-height: 50px;
    text-align: center;
    border-radius: 4px;
    background: var(--color3);
    padding-right: 130px;
    padding-left: 130px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.psubmit {
    border: 1px solid var(--color3);
    font-size: 16px;
    line-height: 35px;
    text-align: center;
    border-radius: 4px;
    background: var(--color3);
    padding-right: 100px;
    padding-left: 100px;
    padding-top: 5px;
    padding-bottom: 5px;
}
.tnone{
    text-decoration: none;
}

.pishortage{
    padding: 10px 10px 5px 10px;
}

.psamount{
    padding: 5px;
    width: 80px;
    border: 1px solid var(--color26);
    border-radius: 4px;
    display: inline-block;
    margin: 8px 5px;
    cursor: pointer;
}

.psamount:hover{
    cursor: pointer;
    font-weight: bold;
}

.rplink{
    padding: 4px 8px 4px 0px;
    cursor: pointer;
    text-decoration: underline;
    font-weight: 500;
    display: inline-block;
    color: var(--color17);
}

.rpslink{
    cursor: pointer;
    border: 1px solid var(--color5);
    color: var(--color3);
    background: var(--color4);
    border-radius: 4px;
}

.bbheading{
    font-weight: bold;
    font-size: 16px;
    text-decoration: underline;
    line-height: 30px;
    padding: 5px 0px 0px 0px;
    color: var(--color16);
}

.hbcontainer{
    border: 4px solid var(--color4);
    margin: 10px 5px;
    padding-bottom: 5px;
}

.hor-sc-bar{
    text-align: left;
    padding: 2px 10px;
    border-bottom: 1px solid var(--color4);
    height: 36px;
    width: calc(100vw - 20px);
    max-width: 748px;
    margin: 0px auto;
    background: var(--color33);
    white-space:nowrap;
    overflow: auto;
    overflow-y: hidden;
}

body.dark .hor-sc-bar{
    background-color: var(--color14);
}

.hor-inc-holder{
    display: inline-block;
    text-align: left;
    height: 36px;
}

.dcbut{
    display: inline-block;
    cursor: pointer;
    text-align: center;
    border-radius: 4px;
    padding: 5px 6px;
    vertical-align: middle;
    line-height: 13px;
    font-size: 13px;
    font-weight: 500;
}

body.dark .dcbut{
    color: var(--color6);
}

.dcbut.active{
    background-color: var(--color1);
}

body.dark .dcbut.active{
    background-color: var(--color24);
}

.ptb11{
    padding-top: 11px;
    padding-bottom: 11px;
}

.mh300{
    min-height: 300px !important;
}

/* // OPTION CHAIN CSS // */

.chainseg {
    margin: 2px 0px 0px 0px ! IMPORTANT;
    FONT-SIZE: 11PX ! IMPORTANT;
    BACKGROUND: NONE ! IMPORTANT;
    PADDING: 1PX 0PX ! IMPORTANT;
}

.callput-header {
    padding-bottom: 10px;
}

#as-option_chain-pane .t-up {
    background: none !important;
}
.v30 {
    width: 30% !important;
}
.t-up {
    color: rgb(0 126 246);
}
.v33 {
    width: 33.33% !important;
}
.pcen {
    text-align: center;
    display: inline-block;
}.cptop {
    background: #000000;
}
.plr8 {
    padding: 5px 0px !important;
}
.v20 {
    width: 20%;
}
.dflex {
    display: flex;
}
#as-option_chain-pane .t-dn {
    background: none !important;
}
.w100 {
    width: 100%;
}
.ptb5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
.pt12 {
    padding-top: 12px !important;
}
.cstrike {
    padding: 10px;
    border: 1px solid #007ef6;
    border-radius: 20px;
    margin-left: 60px;
    margin-right: 60px;
    margin-top: 10px;
}
.callpush {
    background: #deeaf6;
    padding-bottom: 5px;
}
.putpush {
    background: #ffe7e7;
    padding-bottom: 5px;
}
.vstrike {
    text-align: center;
    vertical-align: top;
}
.h40 {
    height: 40px;
}
.p6 {
    padding: 6px;
}
.br3 {
    border-radius: 3px;
}
.expribox {
    background: #deeaf6;
}
.w95 {
    width: 95%;
}
.bcolcom {
    border-color: #deeaf6;
}
.mt0I {
    margin-top: 0px !important;
}
.boleft {
    border-radius: 5px 0px 0px 5px;
}
.boright {
    border-radius: 0px 5px 5px 0px;
}
body.dark .putpush, body.dark .callpush{color: var(--color2);}