* {
    -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-14 {
    font-size: 14px;
}

.material-icons.md-16 {
    font-size: 16px;
}

.material-icons.md-18 {
    font-size: 18px;
}

.material-icons.md-22 {
    font-size: 22px;
}

.material-icons.md-24 {
    font-size: 24px;
}

.material-icons.md-26 {
    font-size: 26px;
}

.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(0, 126, 246, 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: #071824;
    /* 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(246, 70, 93, 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: #fff;
    color: #1f2933;
}

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

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

body.dark .panes {
    background-color: #071824;
}

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

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

.lh30 {
    line-height: 30px;
}

.lh35 {
    line-height: 35px !important;
}

.lh40 {
    line-height: 40px;
}

.lh50 {
    line-height: 50px;
}

.lh60 {
    line-height: 60px;
}


.fw300 {
    font-weight: 300;
}

.fw300i {
    font-weight: 300 !important;
}

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

.mt12 {
    margin-top: 12px;
}

.mt15 {
    margin-top: 15px;
}

.mt20 {
    margin-top: 20px;
}

.mt20i {
    margin-top: 20px !important;
}

.mt25 {
    margin-top: 25px;
}

.mt30 {
    margin-top: 30px;
}

.mt35 {
    margin-top: 35px !important;
}

.mt40 {
    margin-top: 40px;
}

.mt45 {
    margin-top: 45px;
}

.mt50 {
    margin-top: 50px;
}

.mt50i {
    margin-top: 50px !important;
}

.mt60 {
    margin-top: 60px;
}

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

.ml10 {
    margin-left: 10px;
}

.ml20 {
    margin-left: 20px;
}

.ml25 {
    margin-left: 25px;
}

.ml50 {
    margin-left: 50px;
}


.ml30 {
    margin-left: 30px;
}

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

.mb100 {
    margin-bottom: 100px;
}

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

.pt8{
    padding-top: 8px;
}

.pt10 {
    padding-top: 10px;
}

.pt15 {
    padding-top: 15px;
}

.pt21{
    padding-top: 21px;
}

.pt50 {
    padding-top: 50px;
}

.pb5 {
    padding-bottom: 5px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb15 {
    padding-bottom: 15px;
}

.pb100{
    padding-bottom: 100px;
}

.pb200 {
    padding-bottom: 200px;
}

.pl0 {
    padding-left: 0px !important;
}

.pl5 {
    padding-left: 5px;
}

.pl5i {
    padding-left: 5px !important;
}

.pl10 {
    padding-left: 10px;
}

.pl12 {
    padding-left: 12px;
}

#pl12 {
    padding-left: 12px;
}

.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 !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-color: #071824 !important;
    color: var(--color1);
    text-align: left;
}

body.light .header-area {
    max-width: 768px;
    max-height: 50px;
    overflow: hidden;
    margin: 0px auto;
    background-color: #f4f6fa !important;
    color: #1f2933;
    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;
}

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

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

.loginLogo {
    max-width: 50px;
    float: left;
}

.loginlo {
    margin-top: 13px;
    font-size: 18px;
    margin-left: 12px;
}

.input-element {
    background-color: #071d2a;
    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.light .input-element {
    background-color: #fff;
    color: var(--color10);
    border: 1px solid var(--color6);
    outline: none;
    height: 40px;
    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 #213743;
}

.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: 14px;
    font-weight: 500;
    background-color: var(--color3);
    color: var(--color1);
    border-radius: calc(.5rem + 4px);
    cursor: pointer;
    text-align: center;
}

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

.logintext {
    font-size: 0.6125rem;
    color: #b1bad3;
    padding: 0px 13px;
}

.svgicon {
    position: absolute;
    margin-left: -30px;
    margin-top: -2px;
    color: #1475e1;
}

.button.paisa {
    display: block;
    margin: 10px auto;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    background-color: #0f212e;
    color: var(--color1);
    border-radius: calc(.5rem + 4px);
    cursor: pointer;
    text-align: center;
    text-decoration: none;
}

body.light .button.paisa {
    background-color: #eef1f9;
}

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

.button.dwnapp {
    display: block;
    margin: 10px auto;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    background-color: color-mix(in oklab, #1475e1 10%, transparent);
    color: var(--color1);
    border-radius: calc(.5rem + 4px);
    cursor: pointer;
    text-align: center;
}

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

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

.link-s3: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: #071d2a;
    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;
}

body.light .country-selector {
    background-color: #fff;
}

.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 #213743;
}

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: 45px;
    padding-right: 40px;
    max-width: 668px;
}

.fps-searchined {
    margin: 10px;
    padding-left: 40px;
    width: calc(100vw - 100px);
    height: 45px;
    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: #071824;
}

body.dark .com-search {
    background-color: #071824;
}

.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;
    text-align: left;
    font-size: 12px;
}


/* 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);
}

.showMSG-holder {
    width: 88vw;
    margin: 15vh auto;
    border-radius: 10px;
    padding: 20px;
}

.msg-title {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    padding: 5px 0px;
}

.msg-message {
    text-align: center;
    font-size: 14px;
    padding: 5px 0px;
}

.msg-image {
    text-align: center;
    margin: 5px 0px;
}

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

body.dark .showMSG-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: #fff;
}

body.dark .footer-menu {
    background-color: #0f212e;
}

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

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

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

.fmblable {
    line-height: 34px;
    font-size: 14px;
}

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

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

body.light .menuButtonB.active,
body.dark .menuButtonB.active {
    color: var(--color3) !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: rgb(7 24 36);
    color: var(--color1);
    text-align: left;
}

body.light .ss-heading,
.snr-heading {
    width: 100vw;
    max-width: 748px;
    max-height: 50px;
    overflow: hidden;
    margin: 0px auto;
    background-color: #f4f6fa;
    color: #1f2933;
    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;
}

body.light .ss-body,
.snr-body {
    max-width: 768px;
    margin: 0px auto 20px auto;
    border-top: none;
    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);
}

body.light .ss-search-icon {
    margin: 14px 0px 0px 20px;
}

.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: 15px 15px;
    clear: both;
    cursor: pointer;
}

div#quotes-holder .isv-holder {
    padding: 20px 15px 12px 15px;
}

.isv1 {
    display: inline-block;
}

body.dark .colorn {
    color: #b1bad3;
}

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

/* .wdefault {
    color: #808080; 
    transition: all 0.4s ease-in; 
} */

[id^="ask-color-"],
[id^="bid-color-"],
body.dark .wdefault {
    color: #a9a6a6;
    transition: color 0.4s ease-in;
}

[id^="ask-color-"],
[id^="bid-color-"],
body.light .wdefault {
    color: #423c3c;
    transition: color 0.4s ease-in;
}

.coloru {
    color: #01a96b;
}

.wcoloru {
    color: #01a96b !important;
}

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

.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: 76px;
    position: relative;
    text-align: right;
    /* display: flex;
  flex-direction: column;
  align-items: flex-end;  */
}

.ltp-top {
    position: absolute;
    top: -17px;
    right: 0;
    font-size: 12px;
    color: #b1bad3;

}

body.light .ltp-top {
    color: #1f2933;
}

/* ASK price main */
.isv-price-small {
    font-size: 13px;
    font-weight: bold;
}

.isv-price-small {
    font-size: 18px;
    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);
}

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

.app-download-row {
    display: flex;
    gap: 15px;
    margin-top: 15px;
}

.app-box {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 10px;
    text-decoration: none;
    background: linear-gradient(145deg, #0f2a3a, #0b1f2c);
    color: #fff;
    transition: all 0.25s ease;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

body.light .app-box {
    background: linear-gradient(145deg, #eef1f9, #eef1f9);
    color: #000;
}

.app-box:hover {
    transform: translateY(-2px);
    background: linear-gradient(145deg, #14364a, #0e2736);
}

.app-box .icon {
    font-size: 22px;
    opacity: 0.9;
}

.app-box small {
    display: block;
    font-size: 11px;
    opacity: 0.7;
}

.app-box strong {
    font-size: 15px;
}

/* Optional platform tint */
.app-box.ios {
    border-left: 3px solid #a2aaad;
}

.app-box.android {
    border-left: 3px solid #3ddc84;
}

.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
bellow 321 is small

//360
//375
bellow 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);
}

body.light #t-cross.active,
.aiab.active .material-icons {
    color: black;
}

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

body.light #t-cross,
.aiab .material-icons {
    color: black;
}

.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;
    width: 95%;
    line-height: 40px;
    border-radius: 3px;
    border: 2px solid rgb(28 42 53);
}

.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: 36px;
    font-weight: 500;
    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 {
    flex: 1;
    border: none;
    border-radius: 4px;
    padding: 12px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.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 - 35px);
    padding: 10px 5px;
    background-color: rgb(20 117 225);
}

.close-order {
    width: calc(90vw - 0px);
    padding: 10px 5px;
    border-radius: 4px;
    line-height: 19px;
    font-size: 12px;

}

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

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

body.dark .blbl{
    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%);
}

.top13 {
    top: 15px;
}

.mred {
    top: 4px;
    position: relative;
}

.pos {
    position: absolute;
}

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

.bgmsg {
    background: lightgoldenrodyellow;
}

@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;
}

body.light .single-trade-box {
    padding: 10px 8px;
    border-bottom: 1px solid #e2e6f0 !important;
    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 .fs5 {
    font-size: 12px;
    font-weight: 500;
    line-height: 20px;
    text-align: right;
}

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

@media (max-width: 301px) {
    .single-trade-box .fs2e {
        font-size: 16px;
        line-height: 24px;
    }
}

.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: #1475e1;
}

.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(48vw - 8px);
    float: left;
    max-width: 379px;
    padding-left: 5px;
}

.right-ob {
    width: calc(48vw - 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;
}

.dnonei {
    display: none !important;
}

.fnone {
    display: none !important;
}

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

.mmh60{
    max-height: 60px !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: #071824;
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;
}

body.light .hor-sc-bar {
    text-align: left;
    padding: 2px 10px;
    border-bottom: none;
    height: 36px;
    width: calc(100vw - 20px);
    max-width: 748px;
    margin: 0px auto;
    background: #f4f6fa;
    white-space: nowrap;
    overflow: auto;
    overflow-y: hidden;
}

.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 {
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-color: #1475e1;
    text-decoration-thickness: 2px;
}

body.dark .dcbut.active {
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-color: #1475e1;
    text-decoration-thickness: 2px;
}

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

.wa-chat-box {
    margin-top: 50px;
    /* padding: 3px 20px 0px 25px;
    border: 2px solid #31d851; */
    border-radius: 40px;
    display: inline-block;
    cursor: pointer;
}

.wa-chat-icon {
    width: 35px;
    margin-top: -3px;
    vertical-align: middle;
    margin-left: -12px;
}

.ai-logo {
    width: 190px;
    vertical-align: middle;
    margin-left: 0px;
}

.wa-chat-text {
    font-size: 18px;
    font-weight: bold;
    color: var(--color7);
    margin-top: -4px;
    vertical-align: middle;
    display: inline-block;
}

.company_name {
    margin-top: -38px;
    display: inline-block;
    position: absolute;
    margin-left: -38px;
    font-weight: 500;
    font-size: 20px;
}

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

.sltpactive span {
    font-weight: 500;
    color: var(--color28);
    text-decoration: underline dotted;
}

.extranamestr {
    display: inline-block;
    font-size: 12px;
    line-height: 12px;
    vertical-align: -2px;
    padding-left: 3px;
}

.unread {
    padding: 1px 5px;
    background: black;
    color: white;
    border-radius: 15px;
}

body.dark .unread {
    padding: 1px 5px;
    background: white;
    color: black;
    border-radius: 15px;
}

.msgunread {
    top: 5px;
    position: relative;
}

.top17 {
    top: 17px;
}

.notiImg {
    width: 50px;
    height: 50px;
    border-radius: 5px;
    margin-left: 5px;
    background: #f1f3f2;

}

.notifications_icon {
    width: 98%;
    margin-top: -75px;
}

/* // 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%;
}

.v100 {
    width: 100px !important;
}

.ptb5 {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}

.pt12 {
    padding-top: 12px !important;
}

.cstrike {
    padding: 10px;
    margin: 5px auto;
}

.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: #0f212e;
}

body.light .expribox {
    background: #eef1f9;
}

.w95 {
    width: 95%;
}

.bcolcom {
    border-color: var(--color4);
    color: #fff;
}

body.light .bcolcom {
    color: #000;
}

.mt0I {
    margin-top: 0px !important;
}

.boleft {
    border-radius: 5px 0px 0px 5px;
}

.boright {
    border-radius: 0px 5px 5px 0px;
}

.tdn {
    text-decoration: none;
}

.contactcss {
    border: 1px solid black;
    padding: 8px;
    border-radius: 3px;
    font-weight: 600;
    vertical-align: middle;
    color: black;
    display: block;
    margin: 10px auto;
    font-size: 17px;

}

/* Container background */
.body-area {
    background-color: #0b1620;
    /* Dark background */
    padding: 0px;
    color: white;
}

body.light .body-area {
    padding: 10px;
    background-color: #fff;
    color: #1f2933;
}

/* 2x2 Grid for Balance Data */
.custom-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 10px 5px;
    margin-bottom: 10px;
}

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

.blbl {
    color: #8da2b5;
    /* Grey text */
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 5px;
}

.bval {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
}

body.light .bval {
    color: black;
    font-size: 18px;
    font-weight: 600;
}

/* Position Header with Batch Close Button */
.position-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.title {
    font-size: 24px;
    margin: 0;
}

.batch-close-btn {
    background-color: #e74c3c;
    color: white;
    border: none;
    padding: 6px 15px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: bold;
}

/* Tab Bar Styling */
.subpages-bar {
    display: flex;
    border-bottom: 1px solid #2c3e50;
    margin-bottom: 15px;
}

body.light .subpages-bar {
    display: flex;
    border-bottom: none;
    margin-bottom: 15px;
}

.spb-holder {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.spb-action-button {
    display: flex;
    align-items: center;
    padding: 10px 5px;
    cursor: pointer;
    color: #8da2b5;
    font-size: 14px;
    white-space: nowrap;
    position: relative;
}

.spb-action-button.active {
    color: #ffffff;
    border-bottom: 2px solid #3498db;
}

body.light .spb-action-button.active {
    color: black !important;
    border-bottom: 2px solid #3498db;
}

.subpages-bar>.spb-holder {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    justify-content: space-between !important;
}

body.light .subpages-bar>.spb-holder {
    display: flex !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0px !important;
    padding: 0px !important;
    margin: 0px !important;
    justify-content: space-between !important;
    background: #f4f6fa;
}

.spb-holder>.spb-action-button {
    flex: 1 1 0% !important;
    text-align: center !important;
    justify-content: center !important;
    display: flex !important;
    align-items: center !important;
    padding: 10px 5px !important;
    white-space: nowrap !important;
    border-bottom: 2px solid transparent;
}

.spb-holder>.spb-action-button.active {
    border-bottom: 2px solid #3498db !important;
    color: #ffffff !important;
}

.badge {
    background-color: #1c2e3d;
    color: #8da2b5;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 50%;
    margin-left: 5px;
}

.badge {
    background-color: #1c2e3d;
    color: #8da2b5;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 50%;
    margin-left: 5px;
}

/* Total P&L Box Styling */
.pnl-summary-box {
    background-color: #12202d;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin-top: 10px;
}

body.light .pnl-summary-box {
    background-color: #f4f6fa;
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    margin-top: 10px;
}

.pnl-label {
    display: block;
    color: #8da2b5;
    font-size: 11px;
    margin-bottom: 5px;
}

body.light .pnl-label {
    display: block;
    color: #5f6c7b;
    font-size: 11px;
    margin-bottom: 5px;
}

.pnl-value {
    color: #2ecc71;
    /* Green for profit */
    font-size: 20px;
    font-weight: bold;
}

.single-trade-box {
    background-color: transparent !important;
    padding: 15px 10px !important;
    border-bottom: 1px solid #1c2e3d !important;
    font-family: sans-serif !important;
}

.trade-top-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 8px !important;
}

.order-type-badge {
    padding: 2px 8px !important;
    border-radius: 3px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    margin-right: 10px !important;
}

/* BUY/SELL Badge Colors */
.order-type-badge.buy,
.order-type-badge.BUY {
    color: #3498db !important;
    background: rgba(46, 204, 113, 0.15) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}

.order-type-badge.sell,
.order-type-badge.SELL {
    color: #e74c3c !important;
    background: rgba(231, 76, 60, 0.15) !important;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}

.qty-display {
    color: #3498db !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    margin-left: 0px !important;
    position: absolute;
    margin-top: 2px;
}

.time-display {
    background: #12202d !important;
    color: #3498db;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    margin: 3px;
}

body.light .time-display {
    background: rgba(231, 76, 60, 0.15) !important;
    color: #3498db;
    padding: 2px 8px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
    margin: 3px;
}

.trade-middle-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 5px !important;
}

.symbol-name {
    font-size: 16px !important;
    font-weight: bold !important;
    color: #ffffff !important;
    text-align: left !important;
}

body.light .symbol-name {
    font-size: 16px !important;
    font-weight: bold !important;
    color: black !important;
    text-align: left !important;
}

.expiry-info {
    font-size: 10px !important;
    color: #8da2b5 !important;
    margin-top: 6px !important;
}

body.light .expiry-info {
    font-size: 10px !important;
    color: #5f6c7b !important;
    margin-top: 6px !important;
}

.profit-info {
    text-align: right !important;
}

.live-pnl {
    font-size: 16px !important;
    font-weight: 500 !important;
}

/* PnL Green/Red Colors */
.green,
.profitColor.green {
    color: #2ecc71 !important;
}

.red,
.profitColor.red {
    color: #e74c3c !important;
}

.trade-bottom-row {
    display: flex !important;
    justify-content: flex-end !important;
    font-size: 13px !important;
    color: #8da2b5 !important;
    /* position: absolute; */
    text-align: right;
    width: 100%;
    margin-top: -40px;
    /* margin-left: -50px; */
}

.trade-bottom-row-position {
    display: flex !important;
    justify-content: flex-end !important;
    font-size: 13px !important;
    color: #8da2b5 !important;
    position: absolute;
    text-align: right;
    width: 100%;
    margin-top: -19px;
    margin-left: -50px;
}

.trade-bottom-row-portfolio {
    display: flex !important;
    justify-content: flex-end !important;
    font-size: 13px !important;
    color: #8da2b5 !important;
    /* position: absolute; */
    text-align: right;
    width: 100%;
    margin-top: -66px;
    /* margin-left: -50px; */
}

.tradetimeflow {
    display: flex !important;
    justify-content: flex-end !important;
    color: #8da2b5 !important;
    /* position: absolute; */
    text-align: right;
    width: 100%;
    margin-top: -5px;
    /* margin-left: -50px; */
}

.positiontimeflow {
    display: flex !important;
    justify-content: flex-end !important;
    color: #8da2b5 !important;
    position: absolute;
    text-align: right;
    width: 100%;
    margin-top: 45px;
    margin-left: -50px;
}

.price-flow {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 10px !important;
    color: #8da2b5 !important;
}

body.light .price-flow {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 10px !important;
    color: #5f6c7b !important;
}

.arrow {
    font-size: 16px !important;
    color: #4b5d6d !important;
}

.price-label {
    font-size: 10px !important;
    font-weight: bold !important;
    margin-left: 3px !important;
}

.w92 {
    width: 92% !important;
}

.logintop {
    padding: 7px 15px;
    border-bottom: 1px solid #2f4553;
}

body.light .logintop {
    border-bottom: 1px solid #e2e6f0;
}

.lcc {
    color: #b1bad3;
}

body.light .lcc {
    color: black;
}

.registerLogo {
    clear: both;
    max-width: 100px;
    display: block;
    margin: 0px auto;
    margin-top: 90px;
}

.underline {
    text-decoration: underline;
}



.profile-card {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 10px 15px !important;
    margin: 10px 15px !important;
    border-radius: 12px !important;
}

body.light .profile-card {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    padding: 10px 15px !important;
    background: #f4f6fa !important;
    margin: 10px 0px !important;
    border-radius: 12px !important;
}

.profile-avatar {
    width: 50px !important;
    height: 50px !important;
    background: #1c2e3d !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: white !important;
    border: 1px solid #2c3e50 !important;
}

body.light .profile-avatar {
    width: 50px !important;
    height: 50px !important;
    background: #fff !important;
    border-radius: 50% !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 20px !important;
    font-weight: bold !important;
    color: white !important;
    border: 1px solid #fff !important;
}

.profile-name {
    font-size: 18px !important;
    font-weight: bold !important;
    color: white !important;
}

body.light .profile-name {
    font-size: 18px !important;
    font-weight: bold !important;
    color: black !important;
}

.profile-id {
    font-size: 12px !important;
    color: #8da2b5 !important;
}

.balance-card {
    background: #12202d !important;
    margin: 0 15px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid #1c2e3d !important;

}

body.light .balance-card {
    background: #f4f6fa !important;
    margin: 0 0px !important;
    padding: 10px !important;
    border-radius: 12px !important;
    border: 1px solid #e2e6f0 !important;
}

.p15 {
    padding: 15px;
}

.balance-label {
    font-size: 12px !important;
    color: #8da2b5 !important;
    margin-bottom: 5px !important;
}

.passwordcon {
    color: #b1bad3;
    font-size: 11px;
    padding: 0px 5px;
}

body.light .passwordcon {
    color: #5f6c7b;
    font-size: 11px;
    padding: 0px 5px;
}

.balance-amount {
    font-size: 20px !important;
    font-weight: bold !important;
    color: #2ecc71 !important;
}

.action-buttons-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 15px !important;
}

.btn-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #1c2e3d !important;
    color: white;
    padding: 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

body.light .btn-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #fff !important;
    color: #fff;
    padding: 12px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    border: 1px solid #007bff;
}

.with {
    color: white !important;
}

body.light .with {
    color: #007bff !important;
}

.depo {
    background-color: #007bff !important;
}

body.light .depo {
    background-color: #007bff !important;
}

.btn-blue {
    background: #007bff !important;
}

.settings-menu-list {
    margin-top: 10px !important;
}

.menu-item {
    display: flex !important;
    align-items: center !important;
    padding: 15px !important;
    border-bottom: 1px solid #12202d !important;
    text-decoration: none !important;
    color: white !important;
    gap: 15px !important;
}

body.light .menu-item {
    display: flex !important;
    align-items: center !important;
    padding: 15px !important;
    border-bottom: 1px solid #e2e6f0 !important;
    text-decoration: none !important;
    color: black !important;
    gap: 15px !important;
    background: #f4f6fa;
}

.menu-item .material-icons {
    color: #8da2b5 !important;
    font-size: 22px !important;
}

.menu-text {
    flex: 1 !important;
}

.menu-title {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #ffffff !important;
}

body.light .menu-title {
    font-size: 14px !important;
    font-weight: 400 !important;
    color: #1f2933 !important;
}

.menu-sub {
    font-size: 11px !important;
    color: #5c7080 !important;
}

.arrow {
    font-size: 18px !important;
    color: #3e4e5e !important;
}

.wa-icon-small {
    width: 30px !important;
}

.theme-switch {
    display: flex !important;
    background: #12202d !important;
    padding: 4px !important;
    border-radius: 6px !important;
    gap: 5px !important;
}

body.light .theme-switch {
    background: #fff !important;
}

.mode-btn {
    font-size: 11px !important;
    padding: 5px 10px !important;
    border-radius: 4px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    color: #8da2b5 !important;
}

.mode-btn.active {
    background: #1c2e3d !important;
    color: white !important;
}

body.light .mode-btn.active {
    background: #007bff !important;
    color: white !important;
}

.colorh {
    color: #e74c3c !important;
}


/* --- Core Theme Style (Target Design Same to Same) --- */
.body-area.angel-one-theme {
    background-color: #0c161d;
    /* Deep Dark Blue/Black background */
    color: #f1f1f1;
    font-family: 'Roboto', sans-serif;
    padding: 10px;
    font-size: 14px;
}

/* Material Icons size fix */
.angel-one-theme .material-icons {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 2px;
}

/* Common Colors */
.angel-one-theme .buy-color {
    color: #01a96b !important;
}

.angel-one-theme .sell-color {
    color: #f14b4b !important;
}

.angel-one-theme .red {
    color: #f14b4b !important;
}

.angel-one-theme .fs12 {
    font-size: 12px;
}

/* 1. Header */
.ao-header {
    padding-bottom: 10px;
    border-bottom: 1px solid #1c2a35;
}

body.light .ao-header {
    padding-bottom: 10px;
    border-bottom: none;
}

.ao-row-1,
.ao-row-2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ao-row-2 {
    margin-top: 5px;
    font-size: 12px;
}

.ao-symbol {
    font-size: 18px;
    font-weight: bold;
}

.ao-cart {
    padding: 2px 8px;
    border-radius: 4px;
    color: #1475e1;
    margin-left: 8px;
}

body.light .ao-cart {
    background: transparent;
    padding: 2px 8px;
    border-radius: 4px;
    color: #1475e1;
    margin-left: 8px;
}

.aor-cart {
    padding: 2px 8px;
    border-radius: 4px;
    color: #f14b4b;
    margin-left: 8px;
}

body.light .aor-cart {
    background: transparent;
    padding: 2px 8px;
    border-radius: 4px;
    color: #f14b4b;
    margin-left: 8px;
}

.ao-ltp-top {
    font-weight: bold;
    font-size: 16px;
    margin-left: 10px;
}

.ao-expiry,
.ao-pnl {
    color: #8a9ba8;
}

/* 2. Action Tabs */
.ao-action-tabs {
    display: flex;
    gap: 8px;
    align-items: center;
    margin: 12px 0;
}

.ao-tab-btn {
    background: #1c2a35;
    color: #c4d0d9;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 9px;
    cursor: pointer;
}

body.light .ao-tab-btn {
    background: #e4e4e4;
    color: black;
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 9px;
    cursor: pointer;
}

.ao-trade-toggle {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    margin-left: auto;
}

.ao-trade-toggle button {
    border: 1px solid #1c2a35;
    background: #0c161d;
    color: #8a9ba8;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 10px;
}

body.light .ao-trade-toggle button {
    border: 1px solid #e4e4e4;
    background: #e4e4e4;
    color: #8a9ba8;
    padding: 6px 12px;
    cursor: pointer;
    font-size: 10px;
}

.ao-toggle-buy.active {
    background: #1475e1 !important;
    color: #fff !important;
    border-color: #1475e1 !important;
}

.ao-toggle-sell.active {
    background: #f14b4b !important;
    color: #fff !important;
    border-color: #f14b4b !important;
}

/* 3. SL/TP Switch (Custom CSS) */
.ao-sl-tp-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 15px;
}

.ao-sl-tp-control {
    background: #1c2a35;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    color: #c4d0d9;
    display: flex;
    align-items: center;
    gap: 5px;
}

body.light .ao-sl-tp-control {
    background: #e4e4e4;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 12px;
    color: #c4d0d9;
    display: flex;
    align-items: center;
    gap: 5px;
}

.ao-target-icon {
    color: #8a9ba8;
}

.ao-switch {
    position: relative;
    display: inline-block;
    width: 34px;
    height: 18px;
    margin-left: 5px;
}

.ao-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ao-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #324453;
    transition: .4s;
    border-radius: 18px;
}

body.light .ao-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e4e4e4;
    transition: .4s;
    border-radius: 18px;
}

.ao-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked+.ao-slider {
    background-color: #0082f0;
}

input:checked+.ao-slider:before {
    transform: translateX(16px);
}

/* 4. Stats Grid */
.ao-stats-grid {
    display: flex;
    justify-content: space-between;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.ao-stat-box {
    display: flex;
    flex-direction: column;
    font-size: 12px;
}

.ao-stat-box span {
    color: #8a9ba8;
    margin-bottom: 3px;
}

body.light .ao-stat-box span {
    color: #5f6c7b;
    margin-bottom: 3px;
}

.ao-stat-box b {
    font-size: 12px;
    color: #c4d0d9;
    text-align: left;
}

body.light .ao-stat-box b {
    font-size: 12px;
    color: #5f6c7b;
    text-align: left;
}

.text-right {
    text-align: right;
}

.ao-lot-item {
    text-align: left;
}

/* 5. Lot Info */
.ao-lot-info-row {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid #1c2a35;
    margin-bottom: 10px;
}

body.light .ao-lot-info-row {
    display: flex;
    gap: 15px;
    align-items: center;
    padding: 10px 0;
    margin-bottom: 10px;
    border-top: 1px solid var(--color4);
}

.ao-lot-item span {
    color: #8a9ba8;
    font-size: 12px;
    display: block;
    margin-bottom: 3px;
}

body.light .ao-lot-item span {
    color: #5f6c7b;
    font-size: 12px;
    display: block;
    margin-bottom: 3px;
}

.ao-lot-item b {
    font-size: 11px;
    font-weight: bold;
}

.ao-switch-qty {
    background: #1c2a35;
    border: 1px solid #324453;
    color: #c4d0d9;
    padding: 5px 12px;
    border-radius: 4px;
    margin-left: auto;
    cursor: pointer;
    font-size: 12px;
}

body.light .ao-switch-qty {
    background: #fff;
    border: 1px solid #e2e6f0;
    color: #1f2933;
    padding: 5px 12px;
    border-radius: 4px;
    margin-left: auto;
    cursor: pointer;
    font-size: 12px;
}

/* 6. Input Section (Matched Exact look) */
.ao-input-section {
    display: flex;
    gap: 10px;
    margin-bottom: 15px;
}

.ao-input-block {
    flex: 1;
    background: #1c2a35;
    border-radius: 4px;
    border: 1px solid #324453;
}

body.light .ao-input-block {
    flex: 1;
    background: #fff;
    border-radius: 4px;
    border: 1px solid #e2e6f0;
}

.ao-market-block {
    text-align: center;
}

.ao-block-label {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 2px;
}

/* .ao-block-sub { color: #8a9ba8; font-size: 10px; text-transform: uppercase; font-weight: bold;} */
.ao-qty-block {
    text-align: center;
}

/* .ao-qty-control { display: flex; justify-content: center; align-items: center; gap: 15px; margin-bottom: 2px;} */
.ao-minus,
.ao-plus {
    background: transparent;
    border: none;
    color: #8a9ba8;
    font-size: 24px;
    cursor: pointer;
}

/* .ao-qty-input { background: transparent; border: none; color: white; width: 40px; text-align: center; font-size: 11px; font-weight: bold;} */

/* 7. Execution Modes */
.ao-execution-modes {
    display: flex;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 20px;
}

.ao-mode-btn {
    flex: 1;
    border: none;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
    color: #8a9ba8;
    display: flex;
    justify-content: center;
    align-items: center;
}

.ao-mode-btn.active {
    background-color: #0082f0;
    color: white;
}

.ao-mode-btn:not(.active) {
    background-color: #1c2a35;
}

body.light .ao-mode-btn:not(.active) {
    background-color: #fff;
    border: 1px solid #e2e6f0;
}

/* 8. Info Footer */
.ao-info-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    color: #c4d0d9;
    font-size: 13px;
    padding: 10px 0;
    border-top: 1px solid #1c2a35;
}

body.light .ao-info-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    color: #5f6c7b;
    font-size: 13px;
    padding: 10px 0;
    border-top: 1px solid #e2e6f0;
}

.ao-info-item b {
    color: #f1f1f1;
    margin-left: 3px;
}

.ao-margin {
    margin-left: auto;
    color: #8a9ba8;
    font-size: 12px;
}

body.light .ao-margin {
    margin-left: auto;
    color: #5f6c7b;
    font-size: 12px;
}

body.light .freeMargin {
    color: black;
}

/* 9. Final Action Buttons */
.ao-final-actions {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.ao-final-actions button {
    flex: 1;
    border: none;
    border-radius: 4px;
    padding: 12px;
    color: white;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.ao-btn-buy {
    background-color: #0082f0;
}

.ao-btn-sell {
    background-color: #f14b4b;
}

.ao-price {
    font-size: 12px;
    font-weight: normal;
    margin-top: 3px;
    opacity: 0.9;
}


.com-search {
    display: flex !important;
    align-items: center !important;
    background: #0b1620 !important;
    /* Dark background as per PaisaX */
    border: 1px solid #1c2e3d !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    position: relative !important;
}

body.light .com-search {
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    /* Dark background as per PaisaX */
    border: none !important;
    border-radius: 8px !important;
    padding: 5px 10px !important;
    position: relative !important;
}

.com-searchin {
    flex: 1 !important;
    background: #071d2a !important;
    color: white !important;
    padding-right: 120px !important;
    outline: none !important;
}

body.light .com-searchin {
    flex: 1 !important;
    background: #f4f6fa !important;
    color: black !important;
    padding-right: 120px !important;
    outline: none !important;
}

.search-actions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    position: absolute !important;
    right: 25px !important;
    border: 1px solid #213743;
    padding: 5px;
    border-radius: 10px;
}

body.light .search-actions {
    border: 1px solid #e2e6f0;
}

.action-icon {
    color: #8da2b5 !important;
    font-size: 20px !important;
    cursor: pointer !important;
}

.btn-add-symbol {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background-color: #ffffff !important;
    /* White button as per second image */
    color: #000000 !important;
    border: none !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

body.light .btn-add-symbol {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background-color: #000 !important;
    color: #fff !important;
    border: none !important;
    padding: 4px 12px !important;
    border-radius: 6px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
}

.btn-add-symbol .material-icons {
    font-size: 12px !important;
}


/* Container styling */
#trades-pendings-holder {
    background-color: #0b1622;
    padding: 10px;
}

body.light #trades-pendings-holder {
    background-color: #fff;
    padding: 10px;
}

.trade-card-modern {
    background-color: #121f2d !important;
    border-bottom: 1px solid #1d2d3d;
    padding: 15px;
    color: #ffffff;
    font-family: 'Segoe UI', Roboto, sans-serif !important;
}

body.light .trade-card-modern {
    background-color: #fff !important;
}

/* Header Section */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.left-section,
.right-section {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Badges */
.badge {
    padding: 2px 12px;
    border-radius: 4px;
    font-weight: bold;
    font-size: 12px;
    text-transform: uppercase;
}

/* .badge.buy { background-color: #004d7a; color: #00a8ff; }
.badge.sell { background-color: #7a0019; color: #ff4d4d; } */

.order-type-tag {
    color: #1e88e5;
    font-size: 12px;
    font-weight: bold;
}

/* Text Styling */
.cart-icon,
.timestamp {
    color: #6c7d8f;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Body Section */
.card-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.symbol-name {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.expiry-date {
    color: #6c7d8f;
    font-size: 13px;
    margin-top: 4px;
}

.price-info {
    text-align: right;
}

.ask-price {
    color: #6c7d8f;
    font-size: 12px;
    margin-top: 4px;
}


/* Container Background */
#rejected-trade-logs-holder {
    background-color: #0b1622;
    padding: 10px;
}

body.light #rejected-trade-logs-holder {
    background-color: #fff;
    padding: 10px;
}

.rejection-card {
    /* background-color: #121f2d; */
    border-bottom: 1px solid #1d2d3d;
    padding: 15px 0px;
    margin-bottom: 2px;
    font-family: 'Inter', sans-serif;
}

body.light .rejection-card {
    border-bottom: 1px solid #e2e6f0;
}

.header-left,
.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.badge {
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

.badge.buy {
    background-color: #002d4d;
    color: #00a8ff;
}

.badge.sell {
    background: #3d141a;
    color: #ff4d4d;
}

body.light .badge.buy {
    color: #00a8ff;
    background-color:
        color-mix(in oklab, #2f5bff 10%, transparent);
}

body.light .badge.sell {
    color: #ff4d4d;
    background-color: rgba(231, 76, 60, 0.15) !important;
}

.status-tag.rejected {
    background-color: #2a1518;
    color: #ff3b3b;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid #4a1c22;
}

body.light .status-tag.rejected {
    background-color: rgba(231, 76, 60, 0.15) !important;
    color: #ff3b3b;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    border: none;
}

/* Body Styling */
.card-body {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.symbol-name {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.symbol-full {
    color: #6c7d8f;
    font-size: 12px;
    margin-top: 2px;
}

.main-price {
    font-size: 18px;
    font-weight: 500;
    text-align: right;
}

body.light .main-price {
    color: #000;
}

.order-id {
    color: #4f5d6d;
    font-size: 11px;
    text-align: right;
}

/* Footer / Note Styling */
.card-footer {
    margin-top: 12px;
}

.rejection-note {
    color: #8fa3b7;
    font-size: 13px;
    line-height: 1.4;
    text-align: right;
    /* Matching the 2nd image's note placement */
}

.qty-info,
.timestamp {
    color: #6c7d8f;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 4px;
}




#ss-body-2 {
    background-color: #08121d;
    /* Deep dark blue background */
    padding: 0;
}

body.light #ss-body-2 {
    background-color: #fff;
    /* Deep dark blue background */
    padding: 0;
}

.symbol-row-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background-color: #0c1a29;
    border-bottom: 1px solid #162638;
    cursor: pointer;
    transition: background 0.2s;
}

body.light .symbol-row-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    background-color: #fff;
    border-bottom: 1px solid #e2e6f0;
    cursor: pointer;
    transition: background 0.2s;
}

.symbol-row-modern:hover {
    background-color: #12253a;
}

/* Left side: Name and Month */
.symbol-meta {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.symbol-title {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

body.light .symbol-title {
    color: #1f2933;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.symbol-expiry {
    color: #6a7e91;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

/* Right side: Actions and Tag */
.symbol-actions {
    display: flex;
    align-items: center;
    gap: 15px;
}

.tag-future {
    background-color: #12314d;
    color: #1a88ff;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

body.light .tag-future {
    background-color: rgba(46, 204, 113, 0.15) !important;
    color: #3498db;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 4px;
    letter-spacing: 0.5px;
}

.action-icon {
    color: #a0b0c0;
    font-size: 18px !important;
    cursor: pointer;
}

body.light .action-icon {
    color: #5f6c7b !important;
    font-size: 20px !important;
    cursor: pointer !important;
}

.action-icon:hover {
    color: #ffffff;
}

.star-icon {
    color: #a0b0c0;
    font-size: 20px !important;
}

#ss-body-4 {
    background-color: #08121d;
}

body.light #ss-body-4 {
    background-color: #fff;
}

/* Main Row Styling */
.option-row-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 18px;
    background-color: #0c1a29;
    border-bottom: 1px solid #162638;
    cursor: pointer;
}

body.light .option-row-modern {
    background-color: #fff;
    border-bottom: 1px solid #e2e6f0;
}

/* Left Content Column */
.option-info {
    display: flex;
    flex-direction: column;
}

.top-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 2px;
}

.symbol-name {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}

.option-type {
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
}

body.light .option-type {
    color: #000;
}

.expiry-text {
    color: #6a7e91;
    font-size: 12px;
}

/* Right Side Arrow */
.option-action i {
    color: #007aff;
    /* Blue Arrow color as per modern UI */
    font-size: 16px !important;
    font-weight: bold;
}

#ss-body-5 {
    background-color: #08121d;
}

body.light #ss-body-5 {
    background-color: #fff;
}

.strike-row-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    background-color: #0c1a29;
    border-bottom: 1px solid #162638;
}

body.light .strike-row-modern {
    background-color: #fff;
    border-bottom: 1px solid #e2e6f0;
}

/* Left Section */
.strike-left {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.strike-symbol {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}

body.light .strike-symbol {
    color: #000;
}

.strike-expiry {
    color: #6a7e91;
    font-size: 11px;
    text-transform: uppercase;
}

/* Right Section */
.strike-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.badge-monthly {
    background-color: #2d1417;
    /* Dark Red background */
    color: #ff4d4d;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
}

.strike-price-val {
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
}

/* CE / PE Badges */
.badge-type {
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 3px;
}

.badge-ce {
    background-color: #002d4d;
    color: #00a8ff;
}

body.light .badge-ce {
    background-color: rgba(46, 204, 113, 0.15) !important;
    color: #3498db;
}

.badge-pe {
    background-color: #3d141a;
    color: #ff4d4d;
}

body.light .badge-pe {
    color: #ff4d4d;
    background-color: rgb(211 59 59 / 15%) !important;
}

/* Icons */
.strike-icons {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 5px;
}

.strike-icons i {
    color: #a0b0c0;
    font-size: 18px !important;
    cursor: pointer;
}

body.light .strike-icons i {
    color: #5f6c7b;
    font-size: 18px !important;
    cursor: pointer;
}

.strike-icons i:hover {
    color: #ffffff;
}




/* Toast Main Container */
.toast-notification {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 400px;
    padding: 12px 16px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10000;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    animation: slideDown 0.4s ease-out;
    display: none;
}

/* Success Theme (Green) */
.toast-notification.success {
    background-color: #0d3b2a;
    /* Dark Green matching image */
    border: 1px solid #1b5e40;
}

body.light .toast-notification.success {
    background-color: #fff;
    /* Dark Green matching image */
    border: 1px solid #1b5e40;
}

/* Error Theme (Red) */
.toast-notification.error {
    background-color: #3d141a;
    /* Dark Red matching image */
    border: 1px solid #5e1b1b;
}

body.light .toast-notification.error {
    background-color: #fff;
    /* Dark Red matching image */
    border: 1px solid #5e1b1b;
}

/* Content Layout */
.toast-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.toast-icon .material-icons {
    font-size: 24px;
}

.success .toast-icon .material-icons {
    color: #2ecc71;
    margin-top: 3px;
}

.error .toast-icon .material-icons {
    color: #ff4d4d;
    margin-top: 3px;
}

.toast-text {
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-align: left;
}

body.light .toast-text {
    color: #000;
}

/* Close Icon */
.toast-close {
    color: rgba(255, 255, 255, 0.5);
    font-size: 18px !important;
    cursor: pointer;
    margin-left: 10px;
    margin-top: -25px;
}

/* Entry Animation */
@keyframes slideDown {
    from {
        top: -50px;
        opacity: 0;
    }

    to {
        top: 20px;
        opacity: 1;
    }
}



/* Container Background */
#ledger-holder {
    background-color: #08121d;
}

body.light #ledger-holder {
    background-color: #fff;
}

.ledger-row-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 12px;
    border-bottom: 1px solid #162638;
}

body.light .ledger-row-modern {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 12px;
    border-bottom: 1px solid #e2e6f0;
}

.ledger-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Icon Styles */
.ledger-icon {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.icon-entry {
    background-color: rgba(0, 129, 255, 0.1);
    color: #0081ff;
}

.icon-pnl {
    background-color: rgba(255, 77, 77, 0.1);
    color: #ff4d4d;
}

.icon-default {
    background-color: rgba(160, 176, 192, 0.1);
    color: #a0b0c0;
}

.ledger-icon .material-icons {
    font-size: 20px !important;
}

/* Text Content */
.ledger-type-text {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

body.light .ledger-type-text {
    color: #1f2933;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}

.ledger-time {
    color: #6a7e91;
    font-size: 11px;
    margin-top: 2px;
    text-align: left;
}

.ledger-remark {
    color: #4a5e71;
    font-size: 10px;
    margin-top: 1px;
    text-align: left;
}

/* Amount styling */
.ledger-amount {
    font-size: 15px;
    font-weight: 700;
}

/* Dynamic Colors */
.text-green {
    color: #00c853 !important;
}

.text-red {
    color: #ff4d4d !important;
}

/* Card Container */
.modern-settings-card {
    background-color: #0d1a26;
    /* Dark navy background */
    border: 1px solid #1a2a3a;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 15px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}


.script-name {
    color: #0081ff;
    /* Blue color for name */
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
}

/* Status Badges (Segment & Max Position) */
.status-group {
    text-align: right;
}

.status-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.status-label {
    color: #6a7e91;
    font-size: 11px;
}

.status-badge {
    background-color: rgba(0, 200, 83, 0.1);
    /* Light green tint */
    color: #00c853;
    /* Success Green */
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
}

/* Body Section (Min/Max Order) */
.info-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px dashed #1a2a3a;
}

.info-row:last-child {
    border-bottom: none;
}

.info-label {
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
}

.info-value {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

.colw {
    color: #fff !important;
}


/* Executed Card Specific Styling */
.executed-card {
    background-color: #121e28;
    /* Darker background */
    margin-bottom: 10px;
    border-radius: 8px;
    padding: 12px;
}


/* Right Section Tag */
.order-status-tag {
    background: rgba(0, 200, 5, 0.15);
    color: #00c805;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: bold;
    margin-left: 5px;
}

.timestamp {
    color: #8a9ba8;
    font-size: 11px;
    display: flex;
    align-items: center;
}

.timestamp .material-icons {
    font-size: 14px;
    margin-right: 3px;
}

.symbol-name {
    font-weight: bold;
    font-size: 15px;
    color: #ffffff;
}

.expiry-date {
    font-size: 12px;
    color: #8a9ba8;
}

.price-info {
    text-align: right;
}

.main-price {
    font-weight: bold;
    font-size: 16px;
    color: #ffffff;
}

.avg-label {
    font-size: 10px;
    color: #8a9ba8;
    text-transform: uppercase;
}


/* Quantity Settings Card Base */
.qs-card {
    background-color: #121e28;
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid #1c2a35;
    transition: 0.3s;
    margin: 10px 20px;
}

body.light .qs-card {
    background-color: #f4f6fa;
    border-radius: 8px;
    padding: 12px 16px;
    border: 1px solid #f4f6fa;
    transition: 0.3s;
    margin: 10px 20px;
}

.qs-card:active {
    background-color: #1c2a35;
}

/* Header Styling */
.qs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #1c2a35;
}

body.light .qs-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #e2e6f0;
}

.qs-title-grp {
    display: flex;
    align-items: center;
    gap: 10px;
}

.qs-symbol {
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
}

body.light .qs-symbol {
    font-size: 16px;
    font-weight: bold;
    color: #1f2933;
}

.qs-segment-badge {
    background: #1c2a35;
    color: #8a9ba8;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

body.light .qs-segment-badge {
    background: #c3d9ea;
    color: black;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
}

.qs-arrow {
    color: #8a9ba8;
    font-size: 20px;
}

/* Body / Grid Styling */
.qs-body {
    padding-top: 12px;
}

.qs-grid {
    display: flex;
    justify-content: space-between;
    text-align: left;
}

.qs-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qs-label {
    color: #8a9ba8;
    font-size: 11px;
    text-transform: uppercase;
}

body.light .qs-label {
    color: #1f2933;
    font-size: 11px;
    text-transform: uppercase;
}

.qs-val {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
}

body.light .qs-val {
    color: #1f2933;
    font-size: 14px;
    font-weight: 600;
}

/* Specific alignments if needed */
.qs-grid .qs-item:nth-child(2) {
    text-align: center;
}

.qs-grid .qs-item:nth-child(3) {
    text-align: right;
}

/* Container padding and Background */
#sortable1 {
    list-style-type: none;
    padding: 0;
    margin: 0;
    background-color: #0c161d;
}

body.light #sortable1 {
    background-color: #fff;
}

/* Single Item Card */
.snr-edit-item {
    background-color: #121e28;
    margin-bottom: 2px;
    /* Thin line separator */
    border: none !important;
}

body.light .snr-edit-item {
    background-color: #fff;
}

.snr-edit-wrap {
    display: flex;
    align-items: center;
    padding: 12px 15px;
    gap: 15px;
}

/* Delete Icon (Minus Circle) */
.snr-edit-prefix {
    width: 30px;
    display: flex;
    justify-content: center;
}

.del-icon {
    color: #f14b4b;
    /* Red color for delete */
    cursor: pointer;
    font-size: 22px;
}

/* Symbol Content */
.snr-edit-content {
    flex-grow: 1;
}

.sn-symbol-name {
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    margin-bottom: 2px;
}

body.light .sn-symbol-name {
    color: #1f2933;
}

.sn-symbol-details {
    color: #8a9ba8;
    font-size: 12px;
    text-transform: uppercase;
}

/* Drag Handle */
.ui-sort-handle {
    cursor: grab;
    color: #4a5a68;
}

.ui-sort-handle .material-icons {
    font-size: 24px;
}

/* Sortable Placeholder (Drag karta hoy tyare) */
.ui-state-highlight {
    height: 60px;
    background: #1c2a35;
    border: 1px dashed #324453;
    margin-bottom: 2px;
}

.buysellback {
    font-size: 25px !important;
    position: relative;
    top: 10px;
}

.ao-qty-controlr input::-webkit-outer-spin-button,
.ao-qty-control input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ao-qty-control input[type=number] {
    -moz-appearance: textfield;
}

.btn-content {
    display: flex;
    flex-direction: column;
    /* Vertical alignment mate */
    align-items: center;
    line-height: 1.2;
}

.btn-title {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.btn-price {
    font-size: 13px;
    font-weight: 500;
    opacity: 0.9;
}

/* Icon style (optional - jo tame FontAwesome use karta ho) */
.btn-title i {
    margin-right: 5px;
    font-size: 12px;
}

.supportbtmn {
    color: white;
    text-decoration: none;
    margin-top: 15px;
    margin-right: 15px;
    border: 1px solid #213743;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
}

body.light .supportbtmn {
    color: #1f2933;
    text-decoration: none;
    margin-top: 15px;
    margin-right: 15px;
    border: 1px solid #213743;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 11px;
}

.suporticon {
    padding-right: 4px;
    padding-top: 2px;
}

.custom-qty-container {
    background-color: #121e2c;
    border: 1px solid #243447;
    border-radius: 8px;
    /* width: fit-content; */
    overflow: hidden;
}

body.light .custom-qty-container {
    background-color: #f4f6fa;
    border: 1px solid #e2e6f0;
    border-radius: 8px;
    /* width: fit-content; */
    overflow: hidden;
}

.ao-qty-control {
    display: flex;
    align-items: stretch;
    height: 60px;
}

.obsql {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    min-width: 30px;
    cursor: pointer;
    color: #8a99af;
    font-size: 24px;
    transition: background 0.3s;
}

.obsql:hover {
    background-color: #1c2b3d;
}

.center-content {
    background-color: #0b141e;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    min-width: 50px;
    width: 100%;
}

body.light .center-content {
    background-color: #fff;
}

.ao-qty-input {
    background: transparent;
    border: none;
    color: white;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    width: 100%;
    outline: none;
}

body.light .ao-qty-input {
    color: black;
}

.ao-qty-input::-webkit-inner-spin-button,
.ao-qty-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ao-block-sub {
    color: #8a99af;
    font-size: 11px;
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: 4px;
}

.bnone {
    border: none !important;
}

.exittimeflow {
    display: flex !important;
    justify-content: flex-end !important;
    color: #8da2b5 !important;
    position: absolute;
    text-align: right;
    width: 100%;
    margin-top: 58px;
    margin-left: -50px;
}

.minh70 {
    min-height: 70px !important;
}

.h110 {
    height: 110px !important;
}

.bmute {
    border: 1px solid #213743;
}

.mtM2 {
    margin-top: -2px !important;
}
.mtM3 {
    margin-top: -3px !important;
}


body {
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}

#pwaBanner {

    position: fixed;

    bottom: 16px;

    left: 16px;

    right: 16px;

    background: #111;

    color: #fff;

    border-radius: 12px;

    padding: 12px;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);

    z-index: 9999;

    font-family: sans-serif;

}

.banner-content {

    display: flex;

    align-items: center;

    gap: 10px;

}

.banner-content img {

    width: 40px;

    height: 40px;

    border-radius: 8px;

}

.banner-content .text {

    flex: 1;

    display: flex;

    flex-direction: column;

}

.banner-content button {

    border: none;

    padding: 8px 12px;

    border-radius: 8px;

    cursor: pointer;

}

#installBtn {

    background: #4CAF50;

    color: white;

}

#closeBtn {

    background: transparent;

    color: white;

    font-size: 16px;

}

#actionBtn {

    background: #4CAF50;

    color: white;

}

.bankinp {
    width: calc(100vw - 18px) !important;
}

.bankbox {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid rgb(30, 136, 229);
    border-radius: 5px;
    color: white;
    margin-top: 20px;

}

.info-icon {
    display: inline-block;
    width: 15px;
    height: 15px;
    background-color: #3b82f6;
    color: white;
    border-radius: 50%;
    text-align: center;
    font-size: 12px;
    font-weight: bold;
    font-family: "Times New Roman", serif;
    line-height: 15px;
    margin-left: 5px;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s;
}

.info-icon:hover {
    background-color: #2563eb;
}

.hint-popup {
    display: none;
    /* Default hide */
}

.hint-popup.show {
    display: block !important;
    /* Forcefully show popup when class is added */
}

/* Popup Container */
.hint-popup {
    display: none;
    /* Hidden by default */
    bottom: 100%;
    left: 0;
    background-color: #1e293b;
    color: #cbd5e1;
    border: 1px solid #334155;
    padding: 12px;
    border-radius: 6px;
    width: calc(100vw - 45px);
    z-index: 1000;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.4);
    font-size: 13px;
    margin-bottom: 10px;
    margin-top: 7px;
}

/* Little arrow pointing down from the popup */
.hint-popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 80px;
    /* Positioned roughly under the 'i' icon */
    border-width: 6px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* Class added by JS to show the popup */
.hint-popup.show {
    display: block;
}

/* Text formatting inside popup */
.popup-title {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: #f8fafc;
}

.popup-list {
    margin: 0;
    padding-left: 20px;
    line-height: 1.5;
}

.pg-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #111d28;
    border: 1px solid #1e3044;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    position: relative;
}

/* Hide Native Radio Input */
.pg-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Text Content */
.pg-content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pg-title {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.pg-limits {
    color: #8da4b8;
    font-size: 12px;
}

/* Custom Radio Circle */
.pg-radio-circle {
    width: 20px;
    height: 20px;
    border: 2px solid #3c5269;
    border-radius: 50%;
    position: relative;
    transition: all 0.2s ease;
}

/* Selected State Styling */
.pg-card:has(input[type="radio"]:checked) {
    background: #162a3d;
    border-color: #2196f3;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.15);
}

.pg-card input[type="radio"]:checked+.pg-content+.pg-radio-circle {
    border-color: #2196f3;
    background-color: #2196f3;
    box-shadow: inset 0 0 0 3px #162a3d;
}

.no-data {
    color: #8da4b8;
    text-align: center;
    padding: 20px;
    font-size: 14px;
}





/* // KLINE CHART CSS START */


/* =====================================================
   KLINE TRADINGVIEW STYLE
===================================================== */


/* 1. Main Chart Container ne Top thi space aapo ane bottom time bar fix karo */
#kline-chart-container,
.kline-chart-container {
    position: relative !important;
    height: calc(100% - 80px) !important;
    top: 0px !important;
    /* Top Buy/Sell buttons ni niche push karse */
    box-sizing: border-box !important;
}

/* 2. Primary Canvas Elements Height Adjustment */
#kline-chart-container canvas,
.kline-chart-container canvas {
    /* Height and position adjust to prevent clipping bottom time bar */
    box-sizing: border-box !important;
}

/* 3. Bottom Time Axis (X-Axis) and Footer Controls Overlay */
.tv-chart-main,
.tv-chart-row {
    overflow: hidden !important;
    height: 100% !important;
}

/* 4. Jo OHLC Legend overlay thai to ene top margin aapo */
div[id*="k_line_chart"]>div:first-child {
    top: 0px !important;
    /* Container 45px niche chhe etle aa container ma 0px aavse */
}

.tv-candle-group {
    position: relative;
}


.tv-icon-btn {
    width: 34px;
    height: 34px;

    border: 0;
    background: transparent;

    color: #aeb7bd;

    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 4px;

    padding: 0;
}


.tv-icon-btn:hover {
    background: #1b222d;
    color: #ffffff;
}


.tv-candle-icon {
    font-size: 18px;
    line-height: 1;
}


/* POPUP */

.tv-candle-dropdown {

    display: none;

    position: absolute;

    top: 38px;
    right: 0;

    width: 180px;

    background: #131a22;

    border: 1px solid #2b333d;

    border-radius: 5px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .45);

    z-index: 99999;

    padding: 5px 0;

}


/* OPEN */

.tv-candle-dropdown.open {
    display: block;
}


/* ITEMS */

.tv-dropdown-item {

    height: 38px;

    padding: 0 12px;

    display: flex;
    align-items: center;

    gap: 10px;

    color: #d8dde1;

    font-size: 13px;

    cursor: pointer;

    box-sizing: border-box;

}


.tv-dropdown-item:hover {

    background: #1f2935;

    color: #ffffff;

}


.tv-dropdown-item.active {

    background: #182430;

    color: #00c896;

}


.chart-type-icon {

    width: 22px;

    text-align: center;

    font-size: 16px;

}

#as-klinechart-pane {
    background: #07131d;
    color: #d1d4dc;

    width: 100%;
    height: 100%;

    overflow: hidden;

    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/* =====================================================
   TOP BAR
===================================================== */

.tv-topbar {

    height: 44px;

    display: flex;
    align-items: center;

    background: #07131d;

    border-bottom: 1px solid #182631;

    padding: 0 5px;

    gap: 2px;

    position: relative;

    z-index: 1000;
}


.tv-icon-btn {

    width: 32px;
    height: 34px;

    border: 0;
    background: transparent;

    color: #9ca8b3;

    font-size: 17px;

    cursor: pointer;

    border-radius: 4px;
}


.tv-icon-btn:hover {

    background: #17232d;

    color: #ffffff;
}


/* =====================================================
   SYMBOL
===================================================== */

.tv-symbol-box {

    height: 34px;

    display: flex;
    align-items: center;

    padding: 0 8px;

    min-width: 65px;

    font-size: 13px;

    font-weight: 600;

    color: #f0f3f5;
}


.tv-status-dot {

    width: 7px;
    height: 7px;

    margin-left: 5px;

    border-radius: 50%;

    background: #20c997;
}


/* =====================================================
   TIMEFRAME
===================================================== */

.tv-timeframe-wrapper {

    position: relative;

    height: 34px;
}


.tv-timeframe-btn {

    height: 34px;

    min-width: 43px;

    border: 0;

    background: transparent;

    color: #d1d4dc;

    font-size: 13px;

    font-weight: 600;

    cursor: pointer;

    padding: 0 7px;

    border-radius: 4px;
}


.tv-timeframe-btn:hover {

    background: #17232d;
}


.tv-arrow {

    font-size: 8px;

    margin-left: 2px;
}


/* =====================================================
   TIMEFRAME DROPDOWN
===================================================== */

.tv-dropdown {

    display: none;

    position: absolute;

    top: 39px;

    left: 0;

    min-width: 75px;

    background: #111b24;

    border: 1px solid #293640;

    border-radius: 5px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .5);

    padding: 4px 0;

    z-index: 99999;
}


.tv-dropdown.active {

    display: block;
}


.tv-drop-item {

    height: 32px;

    display: flex;

    align-items: center;

    padding: 0 14px;

    color: #c8d0d7;

    font-size: 13px;

    cursor: pointer;
}


.tv-drop-item:hover {

    background: #1e2b35;

    color: #ffffff;
}


.tv-drop-item.active {

    color: #20c997;

    background: #172830;

    font-weight: 600;
}


/* =====================================================
   INDICATOR BUTTON
===================================================== */

.tv-indicator-btn {

    height: 34px;

    border: 0;

    background: transparent;

    color: #d1d4dc;

    font-size: 12px;

    padding: 0 8px;

    cursor: pointer;

    white-space: nowrap;
}


.tv-indicator-btn:hover {

    background: #17232d;
}


/* =====================================================
   CHART ROW
===================================================== */

.tv-chart-row {

    display: flex;

    width: 100%;

    height: calc(100% - 44px - 125px - 32px);

    min-height: 300px;

    background: #07131d;
}


/* =====================================================
   LEFT TOOLBAR
===================================================== */

.tv-drawing-toolbar {

    width: 44px;

    flex: 0 0 44px;

    background: #0b151e;

    border-right: 1px solid #1c2a34;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding-top: 5px;

    overflow: hidden;
}


.tv-draw-btn {

    width: 34px;
    height: 34px;

    margin-bottom: 2px;

    border: 0;

    background: transparent;

    color: #91a0aa;

    font-size: 15px;

    cursor: pointer;

    border-radius: 4px;
}


.tv-draw-btn:hover,
.tv-draw-btn.active {

    background: #1c2c38;

    color: #ffffff;
}


/* =====================================================
   MAIN CHART
===================================================== */

.tv-chart-main {

    position: relative;

    flex: 1;

    min-width: 0;

    height: 100%;

    overflow: hidden;

    background: #07131d;
}


/* =====================================================
   LEGEND
===================================================== */

/* =========================================
   TRADINGVIEW STYLE PRICE / BUY SELL PANEL
========================================= */

#kline-chart-container {
    position: relative !important;
    overflow: hidden;
}


/* Main panel */

#kline-tv-price-panel {
    position: absolute;
    top: 8px;
    left: 10px;

    z-index: 1000;

    pointer-events: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #d1d4dc;

    user-select: none;
}


/* Symbol */

.kline-tv-symbol-row {
    display: flex;
    align-items: center;
    gap: 8px;

    height: 24px;

    font-size: 14px;
    font-weight: 600;
}


/* Nifty name */

#kline-tv-symbol {
    color: #d1d4dc;
}


/* Period */

#kline-tv-period {
    color: #9aa4b2;

    font-size: 12px;
}


/* Price row */

.kline-tv-price-row {
    display: flex;
    align-items: center;

    gap: 6px;

    margin-top: 4px;
}


/* BUY / SELL buttons */

.kline-tv-order-btn {

    pointer-events: auto;

    border: 1px solid;

    border-radius: 5px;

    height: 34px;

    min-width: 76px;

    padding: 3px 7px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    font-family: Arial, Helvetica, sans-serif;

    transition: opacity .15s ease;

}


/* Hover */

.kline-tv-order-btn:hover {
    opacity: .8;
}


/* Price */

.kline-tv-order-price {

    font-size: 12px;

    line-height: 13px;

    font-weight: 600;
}


/* SELL / BUY text */

.kline-tv-order-type {

    font-size: 10px;

    line-height: 11px;

    font-weight: 500;
}


/* Change */

.kline-tv-change {

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    min-width: 55px;

    font-size: 11px;

    line-height: 14px;

    white-space: nowrap;
}


/* Positive */

.kline-tv-change.positive {
    color: #26a69a;
}


/* Negative */

.kline-tv-change.negative {
    color: #ef5350;
}


/* Mobile */

@media (max-width: 600px) {

    #kline-tv-price-panel {
        top: 7px;
        left: 10px;
    }

    .kline-tv-symbol-row {
        font-size: 13px;
    }

    .kline-tv-order-btn {
        min-width: 70px;
        height: 32px;
    }

    .kline-tv-change {
        min-width: 48px;
        font-size: 10px;
    }
}

#kline-tv-price-panel {
    pointer-events: none;
}

.kline-tv-order-btn {
    pointer-events: auto;
}

.tv-chart-legend {

    position: absolute;

    left: 8px;
    top: 5px;

    z-index: 20;

    pointer-events: none;
}


.tv-legend-title {

    color: #e7edf1;

    font-size: 13px;

    font-weight: 600;

    margin-bottom: 3px;
    text-align: left;
}


.tv-legend-values {

    display: flex;

    align-items: center;

    gap: 5px;

    font-size: 10px;

    color: #7f909d;
}


.tv-legend-values b {

    color: #d5dde2;

    font-weight: 500;
}


.tv-change {

    color: #20c997 !important;

    font-weight: 600;
}


/* =====================================================
   KLINE CONTAINER
===================================================== */

.kline-chart-container {

    position: absolute;

    left: 0;
    right: 0;

    top: 0;
    bottom: 0;

    width: 100%;
    /* height: 100%; */

    height: calc(100vh - 110px);
    background-color: #131722;
    /* TradingView Dark Theme Background */
}


/* =====================================================
   CURRENT PRICE LABEL
===================================================== */

.tv-current-price {

    position: absolute;

    right: 0;

    min-width: 58px;

    height: 20px;

    line-height: 20px;

    padding: 0 5px;

    background: #20b486;

    color: #ffffff;

    font-size: 10px;

    font-weight: 600;

    text-align: center;

    z-index: 30;

    pointer-events: none;

    top: 50%;
}


/* =====================================================
   ORDER BOOK
===================================================== */

.tv-orderbook {

    height: 125px;

    display: flex;

    width: 100%;

    background: #07131d;

    border-top: 1px solid #14232e;

}


.tv-ob-side {

    width: 50%;

    padding: 3px 8px;

}


.tv-ob-header {

    height: 20px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 11px;

    font-weight: 600;
}


.tv-ob-side:first-child .tv-ob-header {

    color: #20c997;
}


.tv-ob-side:last-child .tv-ob-header {

    color: #ff4967;
}


.tv-ob-row {

    height: 18px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 10px;
}


.tv-ob-side:first-child .tv-ob-row span:last-child {

    color: #20c997;
}


.tv-ob-side:last-child .tv-ob-row span:first-child {

    color: #ff4967;
}


/* =====================================================
   BOTTOM BAR
===================================================== */

.tv-bottom-bar {

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 10px;

    background: #07131d;

    border-top: 1px solid #172631;

    color: #a8b3bb;

    font-size: 10px;
}


.tv-bottom-bar span {

    margin-left: 3px;
}


/* =====================================================
   MOBILE
===================================================== */

@media(max-width: 500px) {

    .tv-topbar {

        height: 42px;

        padding: 0 2px;

        gap: 0;
    }


    .tv-chart-row {

        height: calc(100% - 42px - 125px - 30px);
    }


    .tv-drawing-toolbar {

        width: 42px;

        flex-basis: 50px;
    }


    .tv-draw-btn {

        width: 32px;
        height: 32px;
    }


    .tv-indicator-btn {

        font-size: 11px;

        padding: 0 5px;
    }


    .tv-symbol-box {

        min-width: 58px;

        padding: 0 5px;
    }


    .tv-icon-btn {

        width: 28px;
    }


    .tv-orderbook {

        height: 125px;
    }

}

/* =========================================
   KLINE TRADINGVIEW PRICE PANEL
========================================= */

#kline-tv-price-panel {

    position: absolute;

    top: 8px;
    left: 10px;
    right: 10px;

    z-index: 1000;

    pointer-events: none;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: #d1d4dc;

}


/* =========================================
   SYMBOL ROW
========================================= */

.kline-tv-symbol-row {

    display: flex;

    align-items: center;

    justify-content: flex-start;

    gap: 8px;

    height: 22px;

    margin-bottom: 3px;

    font-size: 13px;

    font-weight: 600;

}


.kline-tv-symbol-left {

    display: flex;

    align-items: center;

    gap: 5px;

}


#kline-tv-symbol {

    color: #d1d4dc;

    font-size: 13px;

    font-weight: 600;

}


#kline-tv-period {

    color: #d1d4dc;

    font-size: 12px;

    font-weight: 500;

}


.kline-tv-status-dot {

    width: 7px;

    height: 7px;

    border-radius: 50%;

    background: #00c087;

    display: inline-block;

}


/* =========================================
   PRICE ROW
========================================= */

.kline-tv-price-row {

    display: flex;

    align-items: center;

    gap: 5px;

    pointer-events: auto;
    position: absolute;
    top: 35px;

}


/* =========================================
   BUY / SELL BUTTON
========================================= */

.kline-tv-order-btn {

    min-width: 78px;

    height: 32px;

    border: 1px solid;

    border-radius: 5px;

    padding: 3px 8px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    line-height: 1.05;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

}


/* SELL */

.kline-tv-order-btn.sell {

    background: rgba(244, 67, 54, 0.10);

    border-color: #f44336;

    color: #ff5252;

}


/* BUY */

.kline-tv-order-btn.buy {

    background: rgba(41, 121, 255, 0.10);

    border-color: #2979ff;

    color: #448aff;

}


/* =========================================
   PRICE
========================================= */

.kline-tv-order-price {

    font-size: 12px;

    font-weight: 600;

    white-space: nowrap;

}


/* =========================================
   BUY / SELL TEXT
========================================= */

.kline-tv-order-type {

    font-size: 10px;

    margin-top: 2px;

    font-weight: 500;

}


/* =========================================
   CHANGE
========================================= */

.kline-tv-change {

    min-width: 55px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    line-height: 1.15;

    font-size: 11px;

    font-weight: 500;

    white-space: nowrap;

}


#kline-tv-change {

    font-size: 11px;

}


#kline-tv-change-p {

    font-size: 10px;

    margin-top: 1px;

}


/* =========================================
   POSITIVE
========================================= */

.kline-tv-change.positive {

    color: #00c087;

}


/* =========================================
   NEGATIVE
========================================= */

.kline-tv-change.negative {

    color: #f44336;

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    #kline-tv-price-panel {

        top: 7px;

        left: 10px;

        right: 5px;

    }


    .kline-tv-symbol-row {

        height: 20px;

        margin-bottom: 2px;

    }


    #kline-tv-symbol {

        font-size: 12px;

    }


    #kline-tv-period {

        font-size: 11px;

    }


    .kline-tv-order-btn {

        min-width: 76px;

        height: 31px;

        padding: 2px 6px;

    }


    .kline-tv-order-price {

        font-size: 11px;

    }


    .kline-tv-order-type {

        font-size: 9px;

    }


    .kline-tv-change {

        min-width: 48px;

        font-size: 10px;

    }


    #kline-tv-change {

        font-size: 10px;

    }


    #kline-tv-change-p {

        font-size: 9px;

    }

}

#kline-chart-container {
    width: 100%;
    height: 100%;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: #07141d;
    margin-top: 25px;
}

body.light #kline-chart-container {
    width: 100%;
    height: 100%;
    min-height: 0;
    position: relative;
    overflow: hidden;
    background: white;
}

.kline-chart-container {
    width: 100%;
    height: 100%;
}

#as-klinechart-pane {
    background: #07141d;
    color: #ffffff;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#kline-toolbar {
    width: 100%;
    height: 42px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    padding: 0 10px;
    background: #07141d;
}

#kline-info {
    width: 100%;
    height: 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 10px;
    box-sizing: border-box;
    font-size: 11px;
    color: #9caab4;
}

#kline-chart-container {
    width: 100%;
    height: 500px;
    min-height: 400px;
    display: block;
    position: relative;
}

.kline-symbol {
    font-weight: 700;
    min-width: 120px;
}

.kline-periods {
    display: flex;
    align-items: center;
    gap: 4px;
}

.kline-period-btn {
    border: 0;
    background: transparent;
    color: #b8c4cc;
    padding: 6px 9px;
    cursor: pointer;
    border-radius: 4px;
}

.kline-period-btn:hover,
.kline-period-btn.active {
    background: #1976d2;
    color: #fff;
}

.kline-actions {
    margin-left: auto;
    display: flex;
    gap: 5px;
}

.kline-actions button {
    border: 0;
    background: transparent;
    color: #c7d0d6;
    padding: 6px 8px;
    cursor: pointer;
}

.kline-info {
    height: 30px;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 0 10px;
    font-size: 12px;
    color: #9caab4;
    background: #081722;
}

.kline-info b {
    color: #d8e0e5;
}


#kline-market-data {
    background: #07141d;
    padding: 8px 15px;
}

.kline-book {
    display: flex;
    justify-content: space-between;
}

.book-title {
    color: #ffffff;
    font-weight: 600;
}

.kline-statistics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px 20px;
    margin-top: 10px;
}

.kline-statistics span {
    color: #ffffff;
}

.kline-statistics b {
    margin-left: 10px;
}

/* KLINE CHART CSS END */





/* NEW KLINE CHART CSS START */


/* ==========================================
   TRADINGVIEW STYLE KLINE
========================================== */

.kline-tv-pane {
    background: #0b1117;
    color: #d1d4dc;
    overflow: hidden;
    position: relative;
}


/* ==========================================
   TOP BAR
========================================== */

.tv-topbar {
    height: 50px;
    background: #0b1117;
    border-bottom: 1px solid #20262d;

    display: flex;
    align-items: center;

    padding: 0 10px;
    gap: 6px;

    box-sizing: border-box;
}


.tv-symbol-area {
    display: flex;
    align-items: center;
    min-width: 190px;
}


.tv-symbol-info {
    margin-left: 8px;
}


.tv-symbol-title {
    font-size: 14px;
    font-weight: 600;
    color: #f1f3f6;
}


.tv-symbol-sub {
    font-size: 10px;
    color: #8b949e;
    margin-top: 2px;
}


.tv-dot {
    margin: 0 4px;
}


.tv-icon-btn {
    height: 34px;

    border: 0;
    background: transparent;

    color: #b8bdc5;

    border-radius: 4px;

    cursor: pointer;

    padding: 0 10px;

    font-size: 14px;
}


.tv-icon-btn:hover {
    background: #1b222d;
    color: #ffffff;
}


.tv-toolbar-group {
    position: relative;
}


.tv-arrow {
    margin-left: 5px;
    font-size: 10px;
}

.tv-timeframe-group {
    position: relative;
    display: flex;
    align-items: center;
}


.tv-tool-btn {
    height: 34px;
    min-width: 42px;

    border: 0;
    outline: 0;

    background: transparent;
    color: #d1d4dc;

    cursor: pointer;

    font-size: 13px;
    font-weight: 600;

    padding: 0 8px;
}


.tv-tool-btn:hover {
    background: #1e2935;
}


.tv-arrow {
    font-size: 9px;
    margin-left: 4px;
}


/* DROPDOWN */


.tv-drop-item {
    height: 32px;

    display: flex;
    align-items: center;

    padding: 0 14px;

    color: #d1d4dc;

    font-size: 13px;

    cursor: pointer;

    white-space: nowrap;
}


.tv-drop-item:hover {
    background: #26313c;
    color: #ffffff;
}


.tv-drop-item.active {
    background: #1d2b38;
    color: #26a69a;
    font-weight: 600;
}


.tv-header-spacer {
    flex: 1;
}


/* ==========================================
   DROPDOWN
========================================== */


.tv-drop-item {
    padding: 8px 10px;

    font-size: 12px;

    color: #c7cbd1;

    border-radius: 3px;

    cursor: pointer;
}


.tv-drop-item:hover {
    background: #1e2732;
    color: #fff;
}


.tv-drop-title {
    padding: 8px 10px;

    font-size: 11px;

    color: #808892;

    border-bottom: 1px solid #272e37;

    margin-bottom: 4px;
}


/* ==========================================
   CHART WORKSPACE
========================================== */

.tv-chart-workspace {
    display: flex;

    width: 100%;

    height: calc(100vh - 150px);

    min-height: 400px;
}


/* ==========================================
   LEFT TOOLBAR
========================================== */

.tv-left-toolbar {
    width: 48px;

    flex: 0 0 48px;

    background: #11171e;

    border-right: 1px solid #242b33;

    display: flex;

    flex-direction: column;

    align-items: center;

    padding-top: 5px;

    box-sizing: border-box;
}


.tv-left-tool {
    width: 38px;
    height: 38px;

    margin: 2px 0;

    border: 0;

    background: transparent;

    color: #9ba3ad;

    border-radius: 4px;

    cursor: pointer;

    font-size: 15px;

    display: flex;

    align-items: center;

    justify-content: center;
}


.tv-left-tool:hover {
    background: #202831;
    color: #fff;
}


.tv-left-tool.active {
    background: #26313c;
    color: #fff;
}


.tv-tool-separator {
    width: 28px;

    height: 1px;

    background: #2b333c;

    margin: 5px 0;
}


/* ==========================================
   CHART AREA
========================================== */

.tv-chart-area {
    position: relative;

    flex: 1;

    min-width: 0;

    background: #0b1117;
}


.kline-chart-container {
    position: absolute;

    top: 45px;
    right: 0;
    bottom: 35px;
    left: 0;
}


.tv-chart-info {
    position: absolute;

    z-index: 50;

    top: 7px;
    left: 12px;

    pointer-events: none;
}


.tv-chart-info-row {
    font-size: 13px;

    color: #e6e9ed;

    font-weight: 600;
}


.tv-chart-info-row span {
    margin-right: 7px;
}


.tv-ohlc-row {
    display: flex;

    gap: 10px;

    margin-top: 5px;

    font-size: 11px;

    color: #89929c;
}


.tv-ohlc-row b {
    color: #dce1e6;

    font-weight: normal;
}


.tv-change {
    color: #16c784;
}


.kline-loader {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 100;

    background: rgba(10, 15, 20, .9);

    padding: 12px 18px;

    border-radius: 5px;

    font-size: 12px;
}


.kline-spinner {
    width: 15px;
    height: 15px;

    border: 2px solid #4b5563;
    border-top-color: #16c784;

    border-radius: 50%;

    animation: klineSpin .7s linear infinite;

    display: inline-block;

    margin-right: 7px;

    vertical-align: middle;
}


@keyframes klineSpin {
    to {
        transform: rotate(360deg);
    }
}


/* ==========================================
   BOTTOM BAR
========================================== */

.tv-bottom-bar {
    position: absolute;

    bottom: 0;
    left: 0;
    right: 0;

    height: 35px;

    background: #000000;

    border-top: 1px solid #20272f;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 12px;

    font-size: 11px;

    color: #9ba3ad;

    box-sizing: border-box;
}


.tv-status-btn {
    border: 0;

    background: transparent;

    color: #9ba3ad;

    cursor: pointer;
}


.tv-status-btn:hover {
    color: #fff;
}


/* ==========================================
   ORDER BOOK
========================================== */

.tv-orderbook {
    height: 120px;

    display: flex;

    background: #09131b;

    border-top: 1px solid #202a33;
}


.tv-ob-side {
    width: 50%;

    padding: 6px 12px;

    box-sizing: border-box;
}


.tv-ob-side:first-child {
    border-right: 1px solid #202a33;
}


.tv-ob-title {
    font-size: 11px;

    margin-bottom: 4px;

    font-weight: 600;
}


.tv-ob-title.bid {
    color: #16c784;
}


.tv-ob-title.ask {
    color: #ff4964;
}


.tv-ob-row {
    height: 19px;

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 11px;
}


.tv-ob-row strong {
    font-weight: 500;
}


.tv-ob-side:first-child .tv-ob-row strong {
    color: #16c784;
}


.tv-ob-side:last-child .tv-ob-row strong {
    color: #ff4964;
}


.tv-ob-row span {
    color: #d1d4dc;
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 700px) {

    .tv-topbar {
        height: 46px;
    }


    .tv-symbol-area {
        min-width: 130px;
    }


    .tv-symbol-title {
        font-size: 12px;
    }


    .tv-tool-btn {
        padding: 0 7px;
    }


    .tv-left-toolbar {
        width: 40px;
        flex-basis: 40px;
    }


    .tv-left-tool {
        width: 34px;
        height: 34px;

        font-size: 12px;
    }


    .tv-chart-workspace {
        height: calc(100vh - 170px);
    }


    .tv-orderbook {
        height: 110px;
    }


    .tv-ohlc-row {
        gap: 5px;
    }


    .tv-chart-info {
        left: 7px;
    }

}

.tv-orderbook {
    height: 125px;
}

@media(max-width:500px) {

    .tv-orderbook {
        height: 110px;
    }

}

/* =========================
   CHART TYPE DROPDOWN
========================= */

.chart-type-group {
    position: relative;
}

#kline-chart-type-btn {
    width: 34px;
    height: 32px;
    border: 0;
    background: transparent;
    color: #cfd5da;
    cursor: pointer;
    font-size: 17px;
}

#kline-chart-type-btn:hover {
    background: #17232c;
}


/* DROPDOWN */

.chart-type-dropdown {
    display: none;

    position: absolute;

    top: 38px;
    left: -5px;

    width: 220px;

    background: #202020;

    border: 1px solid #3b3b3b;

    border-radius: 6px;

    box-shadow:
        0 8px 25px rgba(0, 0, 0, .45);

    z-index: 99999;

    padding: 6px 0;
}


/* ITEM */

.tv-dropdown-item {

    height: 42px;

    padding: 0 12px;

    display: flex;

    align-items: center;

    gap: 12px;

    color: #eeeeee;

    font-size: 14px;

    cursor: pointer;

    box-sizing: border-box;
}

.tv-dropdown-item:hover {
    background: #2b2b2b;
}

.tv-dropdown-item.active {
    background: #292929;
}


/* ICON */

.chart-type-icon {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: inherit;
    flex-shrink: 0;
}

.chart-type-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
}


/* STAR */

.chart-type-star {

    margin-left: auto;

    color: #9a9a9a;

    font-size: 20px;
}

.tv-dropdown-item:hover .chart-type-star {
    color: #ffffff;
}

.kline-screenshot-icon {
    display: inline-flex;

    width: 16px;
    height: 13px;

    border: 1.5px solid #aeb7bd;
    border-radius: 2px;

    position: relative;

    box-sizing: border-box;
}


/* Camera lens */

.kline-screenshot-icon::after {

    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    border: 1px solid #aeb7bd;

    border-radius: 50%;

    left: 4px;
    top: 2px;

}


/* Camera top */

.kline-screenshot-icon::before {

    content: "";

    position: absolute;

    width: 5px;
    height: 2px;

    background: #aeb7bd;

    left: 2px;
    top: -3px;

    border-radius: 1px;

}

.bbbig {
    border-bottom: 4px solid #2e2e2e !important;
}

body.light .bbbig {
    border-bottom: 4px solid #e9e9e9 !important;
}

.brbig {
    border-right: 4px solid #2e2e2e !important;
}

body.light .brbig {
    border-right: 4px solid #e9e9e9 !important;
}

#kline-chart-container.kline-zoom-mode {

    cursor: zoom-in !important;

}


.kline-chart-container {
    position: relative;
}

#kline-volume-badge {
    position: absolute;

    /* Sits just above the time axis, over the
       right edge of the volume strip */
    right: 4px;
    bottom: 22px;

    z-index: 5;
    pointer-events: none;

    padding: 1px 6px;
    border-radius: 2px;

    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 11px;
    font-weight: 600;
    line-height: 16px;
    color: #ffffff;

    background-color: #8a949d;

    transition: background-color 0.15s ease;
}

#kline-volume-badge.up {
    background-color: #20c997;
}

#kline-volume-badge.down {
    background-color: #ff4967;
}

/* Hidden by default until the first tick / bar
   arrives, so it never flashes "0" on load */
#kline-volume-badge {
    opacity: 0.95;
}

/* NEW KLINE CHART CSS END */

/* =====================================================================
   TRADINGVIEW EXACT THEME — CONSOLIDATED OVERRIDE
   (kept LAST on purpose: several rules for these same selectors exist
   earlier in this file with conflicting values from repeated edits —
   e.g. .tv-topbar is declared 2x with different heights/colors,
   #kline-chart-container is declared 3x with a fixed 500px height
   that was fighting the responsive layout, and .kline-chart-container
   is declared 5x. Because equal-specificity CSS rules resolve by
   "last one in the file wins", this block cleanly overrides all of
   that instead of requiring you to hunt every duplicate down.
   Do NOT copy these values earlier in the file — leave this block
   as the single source of truth and append future tweaks here.)
   ===================================================================== */

#as-klinechart-pane {
    background: #131722;
    color: #d1d4dc;
}

.tv-topbar {
    height: 44px;
    background: #131722;
    border-bottom: 1px solid #2a2e39;
    display: flex;
    align-items: center;
    padding: 0 8px;
    gap: 4px;
    box-sizing: border-box;
    position: relative;
    z-index: 1000;
}

.tv-symbol-box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    color: #d1d4dc;
    font-size: 14px;
    font-weight: 600;
}

body.light .tv-symbol-box {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    color: black;
    font-size: 14px;
    font-weight: 600;
}

.tv-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #26a69a;
    display: inline-block;
}

.tv-icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: #b2b5be;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
}

body.light .tv-icon-btn {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: black;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
}

.tv-icon-btn:hover {
    background: #2a2e39;
    color: #ffffff;
}

.tv-timeframe-btn,
.tv-indicator-btn {
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: #b2b5be;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
}

.tv-indicator-btn {
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: #b2b5be !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
}

body.light .tv-indicator-btn {
    height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px;
    border: 0;
    background: transparent;
    color: black !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 4px;
    white-space: nowrap;
}

.tv-timeframe-btn:hover,
.tv-indicator-btn:hover {
    background: #2a2e39;
    color: #ffffff;
}

.tv-dropdown {
    display: none;
    position: absolute;
    top: 46px;
    background: #1e222d;
    border: 1px solid #2a2e39;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45);
    z-index: 2000;
    min-width: 160px;
    overflow: hidden;
}

.tv-dropdown.show,
.tv-dropdown.active {
    display: block;
}

.tv-dropdown-item,
.tv-drop-item {
    padding: 9px 14px;
    font-size: 13px;
    color: #d1d4dc;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tv-dropdown-item:hover,
.tv-drop-item:hover {
    background: #2a2e39;
}

.tv-dropdown-item.active,
.tv-drop-item.active {
    background: #2962ff;
    color: #ffffff;
}

.tv-drawing-toolbar {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    background: #131722;
    border-right: 1px solid #2a2e39;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 0;
    gap: 4px;
    flex-shrink: 0;
    box-sizing: border-box;
}

.tv-draw-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #b2b5be;
    cursor: pointer;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

body.light .tv-draw-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    color: #434651;
    cursor: pointer;
    border-radius: 4px;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    flex-shrink: 0;
}

#kline-name{
    color: white;
}

body.light #kline-name{
    color: black;
}

/* ==================== LIGHT THEME OVERRIDES (body.light) ==================== */

/* 1. Main Topbar Light Theme */
body.light .tv-topbar.bbbig {
    background-color: #ffffff !important;
    color: #131722 !important;
}

body.light .tv-topbar .material-icons,
body.light .tv-topbar-left,
body.light .tv-topbar-right,
body.light #kline-symbol,
body.light .tv-timeframe-btn,
body.light .tv-indicator-btn {
    color: #131722 !important;
}

body.light .tv-icon-btn:hover,
body.light .tv-timeframe-btn:hover,
body.light .tv-indicator-btn:hover {
    background-color: #f0f3fa !important;
}

/* 2. Dropdowns Light Styling */
body.light .tv-dropdown,
body.light #kline-timeframe-menu.tv-dropdown,
body.light #kline-candle-menu.tv-dropdown {
    background: #ffffff !important;
    border: 1px solid #e0e3eb !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

body.light .tv-drop-item,
body.light .tv-dropdown-item {
    color: #131722 !important;
}

body.light .tv-drop-item:hover,
body.light .tv-dropdown-item:hover {
    background-color: #f0f3fa !important;
    color: #2962ff !important;
}

/* 3. Buy/Sell Panel Light Theme */
body.light .tv-buy-sell-panel {
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid #e0e3eb !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

body.light .tv-symbol-title {
    color: #131722 !important;
}

body.light .sell-btn {
    background-color: rgba(246, 70, 93, 0.08) !important;
    border-color: #f6465d !important;
    color: #f6465d !important;
}

body.light .buy-btn {
    background-color: rgba(14, 203, 129, 0.08) !important;
    border-color: #0ecb81 !important;
    color: #0ecb81 !important;
}

/* 4. Left Toolbar Icons (Drawing Tools) */
body.light .left-toolbar,
body.light .tv-left-toolbar {
    background-color: #ffffff !important;
    border-right: 1px solid #e0e3eb !important;
}

body.light .left-toolbar .material-icons,
body.light .left-toolbar button {
    color: #434651 !important;
}

body.light .left-toolbar button:hover {
    background-color: #f0f3fa !important;
}

/* 5. Bottom Status / Timezone Bar */
body.light .tv-bottom-bar,
body.light .kline-footer-bar {
    background-color: #f8f9fd !important;
    border-top: 1px solid #e0e3eb !important;
    color: #434651 !important;
}

.tv-draw-btn:hover {
    background: #2a2e39;
    color: #ffffff;
}

.tv-draw-btn.active {
    background: #3d3d3d !important;
    color: #ffffff;
}

body.light .tv-draw-btn.active {
    background: #ebebeb !important;
    color: black;
}

.tv-chart-row {
    display: flex;
    width: 100%;
    height: calc(100% - 44px);
}

.tv-chart-main {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 100%;
    background: #131722;
}

#kline-chart-container,
.kline-chart-container {
    position: absolute !important;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    background: #131722;
    overflow: hidden;
}

body.light #as-klinechart-pane,
body.light .tv-topbar,
body.light .tv-drawing-toolbar,
body.light .tv-chart-main,
body.light #kline-chart-container,
body.light .kline-chart-container {
    background: #ffffff;
    color: #131722;
}

/* Modal Overlay - Aakhi Screen par Center positioning */
.indicator-modal-overlay {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.75) !important;
    /* Semi-transparent dark background */
    z-index: 999999 !important;
    /* Chart ni bau upar rakhva mate */
    align-items: center;
    justify-content: center;
}

/* Modal Open thaye tyare display karva mate */
.indicator-modal-overlay.show {
    display: flex !important;
}

/* Modal Box Styling (TradingView Dark Theme) */
.indicator-modal {
    background-color: #1e222d !important;
    /* Solid Dark Background */
    color: #d1d4dc !important;
    width: 320px !important;
    max-width: 90%;
    border-radius: 8px !important;
    border: 1px solid #2a2e39 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    padding: 16px !important;
    position: relative !important;
}

body.light .indicator-modal {
    background-color: #ffffff !important;
    /* Solid Dark Background */
    color: black !important;
    width: 320px !important;
    max-width: 90%;
    border-radius: 8px !important;
    border: 1px solid #2a2e39 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    padding: 16px !important;
    position: relative !important;
}

/* Header & Close Button */
.modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border-bottom: 1px solid #2a2e39 !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
}

.modal-header h3 {
    margin: 0 !important;
    font-size: 16px !important;
    color: #ffffff !important;
}

.modal-header .close-btn {
    cursor: pointer !important;
    font-size: 20px !important;
    color: #787b86 !important;
}

/* Options Section */
.indicator-group h4 {
    margin: 10px 0 6px 0 !important;
    font-size: 12px !important;
    color: #787b86 !important;
    text-transform: uppercase;
}

body.light .indicator-group h4 {
    margin: 10px 0 6px 0 !important;
    font-size: 12px !important;
    color: black !important;
    text-transform: uppercase;
}

.checkbox-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 0 !important;
    font-size: 13px !important;
    color: #d1d4dc !important;
    cursor: pointer !important;
}

body.light .checkbox-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 5px 0 !important;
    font-size: 13px !important;
    color: black !important;
    cursor: pointer !important;
}

.chart-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    background-color: #0b1620;
    border-bottom: 1px solid var(--color4);
    padding: 0 10px;
}

.chart-top-group {
    display: flex;
    align-items: center;
    gap: 6px;
}

.top-btn {
    background: transparent;
    border: 1px solid var(--color4);
    color: #8da2b5;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.top-btn:hover,
.top-btn.active {
    background-color: var(--color3);
    color: #fff;
    border-color: var(--color3);
}

/* Main Workspace Layout */
.chart-main-container {
    display: flex;
    width: 100vw;
    height: calc(100vh - 48px);
    position: relative;
}

/* Left Sidebar Tools Options - EXPANDED & LARGER */
.kline-tools-left {
    width: 55px;
    /* Scaled Up */
    background-color: #0b1620;
    border-right: 1px solid var(--color4);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 8px;
    gap: 8px;
    z-index: 10;
}

.tool-btn {
    width: 42px;
    /* Bigger touch & click area */
    height: 42px;
    background: transparent;
    border: 1px solid transparent;
    color: #8da2b5;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.tool-btn .material-icons {
    font-size: 24px !important;
    /* Larger Icons */
}

.tool-btn:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.tool-btn.active {
    background-color: var(--color3);
    color: #fff;
}

/* Chart Canvas Area */
#kline-chart-canvas {
    flex: 1;
    height: 100%;
    position: relative;
}

/* Clear Overlay Action */
.danger-btn:hover {
    background-color: var(--color16) !important;
    border-color: var(--color16) !important;
}

/* Top Bar Base Setup */
.tv-topbar.bbbig {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 48px;
    background-color: #0b1620;
    padding: 0 8px;
    box-sizing: border-box;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
}

/* Hide Scrollbar for clean look */
/* .tv-topbar.bbbig::-webkit-scrollbar {
    display: none;
} */

.tv-topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.tv-topbar-right {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Button & Font scaling on mobile */
.tv-icon-btn,
.tv-timeframe-btn,
.tv-indicator-btn {
    flex-shrink: 0;
    padding: 4px 6px;
}

/* ==================== MOBILE & SMALL SCREEN RESPONSIVE (Media Queries) ==================== */
@media screen and (max-width: 480px) {
    .tv-topbar.bbbig {
        height: 42px;
        padding: 0 4px;
    }

    .tv-indicator-btn {
        font-size: 11px;
        padding: 3px 6px;
    }

    /* Symbol text size shrink */
    #kline-symbol {
        font-size: 13px;
        font-weight: 600;
    }

    /* Material Icons scale down slightly on iPhone/Small Screen */
    .tv-topbar .material-icons {
        font-size: 18px !important;
    }

    /* OHLC overlay inside Chart area adjusting */
    .kline-chart-info-panel {
        font-size: 10px;
        line-height: 1.2;
    }
}

.tv-timeframe-wrapper,
.tv-candle-group {
    position: relative !important;
}

/* 2. Dropdown Menu Base Styles Fixed */
.tv-dropdown,
.tv-candle-dropdown {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    z-index: 999999 !important;
    background-color: #1e222d !important;
    /* Dark theme background */
    border: 1px solid #2a2e39 !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6) !important;
    min-width: 120px !important;
    overflow: visible !important;
    /* Content overflow issue fix */
}

.tv-candle-dropdown {
    left: auto !important;
    right: 0 !important;
}

/* 3. Dropdown Active Display Fix */
.tv-dropdown.active,
.tv-dropdown.show,
.tv-candle-dropdown.open {
    display: block !important;
}

/* 4. Topbar Overflow Fix */
.tv-topbar.bbbig {
    overflow: visible !important;
}

/* 5. Dropdown Item Styling Fix */
.tv-drop-item,
.tv-dropdown-item {
    padding: 8px 12px !important;
    color: #d1d4dc !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

.tv-drop-item:hover,
.tv-dropdown-item:hover {
    background-color: #2a2e39 !important;
    color: #2962ff !important;
}

.tv-topbar.bbbig {
    padding: 0 4px !important;
    /* Topbar border spacing */
}

/* Left & Right Wrapper Gap Fix */
.tv-topbar-left,
.tv-topbar-right {
    gap: 2px !important;
}

/* Icon Buttons Tight Padding */
.tv-icon-btn,
.tv-timeframe-btn,
.tv-indicator-btn {
    padding: 2px 4px !important;
    margin: 0 !important;
}

/* Material Icons Size Adjust */
.tv-topbar .material-icons {
    font-size: 18px !important;
}

/* ==================== MOBILE / SMALL SCREEN ONLY (< 480px) ==================== */
@media screen and (max-width: 480px) {

    /* Gap tightest */
    .tv-topbar-left,
    .tv-topbar-right {
        gap: 1px !important;
    }

    .tv-indicator-btn {
        font-size: 10px !important;
        padding: 2px 3px !important;
    }

    /* Symbol Name Font */
    #kline-symbol {
        font-size: 14px !important;
        font-weight: 600;
    }

    /* Timeframe Button */
    .tv-timeframe-btn {
        font-size: 12px !important;
        padding: 2px 3px !important;
    }
}

/* ==================== TOPBAR & DROPDOWN CONTAINER FIX ==================== */

.tv-timeframe-wrapper,
.tv-candle-group {
    position: relative !important;
}

#kline-timeframe-menu.tv-dropdown {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    right: auto !important;
    z-index: 99999 !important;
    background: #1e222d !important;
    border: 1px solid #2a2e39 !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    min-width: 90px !important;
    max-height: 250px !important;
    overflow-y: auto !important;
}

#kline-candle-menu.tv-dropdown {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 99999 !important;
    background: #1e222d !important;
    border: 1px solid #2a2e39 !important;
    border-radius: 6px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5) !important;
    min-width: 140px !important;
}

.tv-drop-item,
.tv-dropdown-item {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    color: #d1d4dc !important;
    cursor: pointer !important;
    white-space: nowrap !important;
}

.tv-drop-item:hover,
.tv-dropdown-item:hover,
.tv-drop-item.active,
.tv-dropdown-item.active {
    background-color: #2962ff !important;
    color: #ffffff !important;
}


/* ==================== FLOATING BUY/SELL PANEL POSITIONING ==================== */

.tv-buy-sell-panel {
    position: absolute !important;
    top: 52px !important;
    left: 50px !important;
    z-index: 1000 !important;
    background: rgba(19, 23, 34, 0.9) !important;
    backdrop-filter: blur(4px) !important;
    border: 1px solid rgba(42, 46, 57, 0.8) !important;
    border-radius: 4px !important;
    padding: 4px 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

@media screen and (max-width: 480px) {
    .tv-buy-sell-panel {
        top: 46px !important;
        left: 42px !important;
        padding: 2px 4px !important;
        transform: scale(0.9);
        transform-origin: top left;
    }
}

/* ==================== OHLC TEXT & TOOLTIP LIGHT THEME ==================== */

/* OHLC Info Text overlay on Chart */
body.light .kline-chart-info-panel,
body.light .tv-chart-view-info,
body.light [class*="kline-info"],
body.light [class*="ohlc-info"] {
    color: #131722 !important; /* Dark color for white background */
}

body.light .kline-chart-info-panel span,
body.light .tv-chart-view-info span {
    color: #434651 !important;
}

/* Value labels bold dark fix */
body.light .kline-chart-info-panel .value,
body.light .tv-chart-info-item-value {
    color: #131722 !important;
    font-weight: 600 !important;
}

/* =========================================
   KLINE BUY / SELL PANEL (FIXED DESIGN)
========================================= */

#kline-tv-price-panel {
    position: absolute !important;
    top: 45px !important; /* OHLC ટેક્સ્ટની નીચે બોક્સ લાવવા માટે */
    left: 12px !important;
    z-index: 1000 !important;
    pointer-events: none !important;
    font-family: "Plex", Roboto, system-ui, sans-serif !important;
}

.kline-tv-price-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    pointer-events: auto !important; /* બટન પર ક્લિક કરવા માટે */
    
    /* ગ્લાસ-ઇફેક્ટ બેકગ્રાઉન્ડ જેથી પાછળની કેન્ડલ પણ આછી દેખાય અને ટેક્સ્ટ પણ વંચાય */
    background: rgba(11, 17, 23, 0.6) !important; 
    backdrop-filter: blur(4px) !important; 
    -webkit-backdrop-filter: blur(4px) !important;
    
    padding: 6px 8px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(42, 46, 57, 0.6) !important;
}

/* લાઈટ થીમ માટે બેકગ્રાઉન્ડ */
body.light .kline-tv-price-row {
    background: rgba(255, 255, 255, 0.8) !important;
    border: 1px solid rgba(226, 230, 240, 0.9) !important;
}

/* બટનની નવી ડીઝાઇન */
.kline-tv-order-btn {
    min-width: 78px !important;
    height: 36px !important;
    border: 1px solid !important;
    border-radius: 4px !important;
    padding: 4px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    cursor: pointer !important;
    line-height: 1.1 !important;
    transition: all 0.2s ease !important;
}

.kline-tv-order-btn:hover {
    transform: scale(1.03) !important; /* હોવર ઇફેક્ટ */
}

/* SELL બટન */
.kline-tv-order-btn.sell {
    background: rgba(244, 67, 54, 0.12) !important;
    border-color: rgba(244, 67, 54, 0.4) !important;
    color: #ff5252 !important;
}

/* BUY બટન */
.kline-tv-order-btn.buy {
    background: rgba(41, 121, 255, 0.12) !important;
    border-color: rgba(41, 121, 255, 0.4) !important;
    color: #448aff !important;
}

.kline-tv-order-price {
    font-size: 13px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
}

.kline-tv-order-type {
    font-size: 10px !important;
    margin-top: 2px !important;
    font-weight: 500 !important;
    letter-spacing: 0.5px !important;
}

/* વચમાં દેખાતો Change ડેટા */
.kline-tv-change {
    min-width: 55px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

#kline-tv-change {
    font-size: 12px !important;
    font-weight: 600 !important;
}

#kline-tv-change-p {
    font-size: 10px !important;
    margin-top: 1px !important;
    font-weight: 500 !important;
}

.kline-tv-change.positive { color: #00c087 !important; }
.kline-tv-change.negative { color: #f44336 !important; }

/* મોબાઈલ સ્ક્રીન માટે સેટઅપ */
@media (max-width: 600px) {
    #kline-tv-price-panel {
        top: 5px !important; /* મોબાઈલમાં પણ ડેટા નીચે દેખાશે */
        left: 8px !important;
    }
    .kline-tv-price-row {
        padding: 4px 6px !important;
        gap: 6px !important;
    }
    .kline-tv-order-btn {
        min-width: 70px !important;
        height: 34px !important;
    }
    .kline-tv-order-price {
        font-size: 12px !important;
    }
}

.tv-topbar, .tv-topbar.bbbig {
    position: relative !important;
    z-index: 999999 !important;
}
#kline-tv-price-panel {
    z-index: 100 !important; 
}


#kline-chart-container, 
.kline-chart-container, 
.tv-chart-main, 
#as-klinechart-pane,
.body-area.angel-one-theme,
.tv-topbar,
.tv-drawing-toolbar {
    background-color: #000000 !important;
}

body.light #kline-chart-container, 
body.light .kline-chart-container, 
body.light .tv-chart-main, 
body.light #as-klinechart-pane,
body.light .body-area.angel-one-theme,
body.light .tv-topbar,
body.light .tv-drawing-toolbar {
    background-color: #ffffff !important;
}

.date-range-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 50px;
    z-index: 20;
}

.chart-wrapper {
    position: relative;
    padding-bottom: 30px;
}

/* =====================================================
   KLINE DRAWING TOOLBAR - STABLE INTERACTION
   ===================================================== */

.tv-drawing-toolbar {
    position: relative;
    z-index: 50;
    user-select: none;
    -webkit-user-select: none;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    box-sizing: border-box;
}

.tv-draw-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 auto !important;
    outline: none;
    border: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    transition: background-color .12s ease, color .12s ease, transform .08s ease;
    border-radius: 4px;
}

.tv-draw-btn:hover {
    background: #182630;
    color: #ffffff;
}

.tv-draw-btn:active {
    transform: scale(.96);
}

.tv-draw-btn.active {
    background: #1c2c38;
    color: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.05);
    width: 36px !important;
    height: 36px !important;
}

.tv-draw-btn[data-tool="delete"].active,
.tv-draw-btn[data-tool="layers"].active {
    background: transparent;
    color: #91a0aa;
    box-shadow: none;
}

.tv-draw-btn.tool-locked {
    color: #ef5350 !important;
    background: rgba(239, 83, 80, 0.18) !important;
}

.tv-draw-btn.tool-hidden {
    color: #ff9800 !important;
    background: rgba(255, 152, 0, 0.18) !important;
}

body.light .tv-draw-btn.tool-locked {
    color: #d32f2f !important;
    background: rgba(211, 47, 47, 0.15) !important;
}

body.light .tv-draw-btn.tool-hidden {
    color: #f57c00 !important;
    background: rgba(245, 124, 0, 0.15) !important;
}

.tv-draw-btn svg {
    display: block;
    width: 22px;
    height: 22px;
    pointer-events: none;
}




/* ============================================================
   FINAL TOPBAR FIX — SCROLL + DROPDOWN + CAMERA/FULLSCREEN
   Only overrides the topbar/dropdown layout.
   ============================================================ */

/*
 * IMPORTANT:
 * Keep the OUTER topbar visible so dropdowns are never clipped.
 * The INNER .tv-topbar-scroll is the horizontal scrolling area.
 */
.tv-topbar.bbbig {
    position: relative !important;
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;
    height: 48px !important;

    padding: 0 !important;
    margin: 0 !important;

    box-sizing: border-box !important;

    overflow: visible !important;
    white-space: nowrap !important;

    z-index: 999999 !important;
}

/*
 * The actual horizontal scroll viewport.
 * Extra right padding prevents camera/fullscreen from being cut.
 */
.tv-topbar.bbbig > .tv-topbar-scroll {
    position: relative !important;

    display: flex !important;
    align-items: center !important;

    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;

    box-sizing: border-box !important;

    padding: 0 10px !important;

    overflow-x: auto !important;
    overflow-y: visible !important;

    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;

    white-space: nowrap !important;
}

.tv-topbar.bbbig > .tv-topbar-scroll::-webkit-scrollbar {
    display: none !important;
}

/* Never shrink either toolbar side. */
.tv-topbar.bbbig .tv-topbar-left,
.tv-topbar.bbbig .tv-topbar-right {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;

    min-width: max-content !important;

    white-space: nowrap !important;
}

.tv-topbar.bbbig .tv-topbar-left {
    display: flex !important;
    align-items: center !important;
}

.tv-topbar.bbbig .tv-topbar-right {
    display: flex !important;
    align-items: center !important;

    margin-left: auto !important;

    padding-right: 4px !important;
}

/* Camera + fullscreen are never allowed to shrink. */
.tv-topbar.bbbig .tv-topbar-right .tv-icon-btn {
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;

    min-width: 30px !important;
}

/* ============================================================
   DROPDOWNS
   ============================================================ */

/*
 * CSS Anchor Positioning lets the menus escape the horizontal
 * scroll clipping while staying attached to their buttons.
 */
.tv-topbar.bbbig .tv-timeframe-wrapper {
    position: relative !important;
    anchor-name: --kline-timeframe-anchor !important;
}

.tv-topbar.bbbig .tv-candle-group {
    position: relative !important;
    anchor-name: --kline-candle-anchor !important;
}

#kline-timeframe-menu.tv-dropdown {
    position: fixed !important;

    position-anchor: --kline-timeframe-anchor !important;

    top: anchor(bottom) !important;
    left: anchor(left) !important;

    right: auto !important;
    transform: none !important;

    z-index: 2147483647 !important;

    min-width: 90px !important;
    max-height: 250px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    box-sizing: border-box !important;
}

#kline-candle-menu.tv-dropdown {
    position: fixed !important;

    position-anchor: --kline-candle-anchor !important;

    top: anchor(bottom) !important;
    left: anchor(left) !important;

    right: auto !important;
    transform: none !important;

    z-index: 2147483647 !important;

    min-width: 140px !important;

    overflow-x: hidden !important;
    overflow-y: auto !important;

    box-sizing: border-box !important;
}

/*
 * Keep the existing JS class based open/close behavior.
 */
#kline-timeframe-menu.tv-dropdown.active,
#kline-timeframe-menu.tv-dropdown.show,
#kline-candle-menu.tv-dropdown.active,
#kline-candle-menu.tv-dropdown.show,
#kline-candle-menu.tv-dropdown.open {
    display: block !important;
}

/* ============================================================
   SMALL SCREEN
   ============================================================ */

@media screen and (max-width: 480px) {

    .tv-topbar.bbbig {
        height: 42px !important;
    }

    .tv-topbar.bbbig > .tv-topbar-scroll {
        padding-left: 4px !important;
        padding-right: 0px !important;
    }

    .tv-topbar.bbbig .tv-topbar-right {
        padding-right: 4px !important;
    }

    .tv-topbar.bbbig .tv-topbar-right .tv-icon-btn {
        min-width: 30px !important;
        width: 30px !important;
        flex-basis: 30px !important;
    }
}

/* ============================================================
   VERY SMALL SCREEN — extra camera/fullscreen breathing room
   ============================================================ */

@media screen and (max-width: 380px) {

    .tv-topbar.bbbig > .tv-topbar-scroll {
        padding-left: 3px !important;
        padding-right: 0px !important;
    }

    .tv-topbar.bbbig .tv-topbar-right {
        padding-right: 6px !important;
    }

    .tv-topbar.bbbig .tv-topbar-right .tv-icon-btn {
        min-width: 30px !important;
        width: 30px !important;
        flex-basis: 30px !important;
    }
}

/* ============================================================
   SUPPORT TICKETS & CHAT STYLES
   ============================================================ */

.user-ticket-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 12px 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.user-ticket-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.ticket-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.ticket-id {
    font-weight: 700;
    font-size: 14px;
    color: #3897f0;
}

.ticket-card-message {
    font-size: 13px;
    color: var(--text-color, #ccc);
    line-height: 1.4;
    margin-bottom: 8px;
    word-break: break-word;
}

.ticket-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.45);
}

.status-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 12px;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.status-badge.badge-pending {
    background: rgba(243, 156, 18, 0.18);
    color: #f39c12;
    border: 1px solid rgba(243, 156, 18, 0.4);
}

.status-badge.badge-replied {
    background: rgba(46, 204, 113, 0.18);
    color: #2ecc71;
    border: 1px solid rgba(46, 204, 113, 0.4);
}

.status-badge.badge-closed {
    background: rgba(149, 165, 166, 0.18);
    color: #95a5a6;
    border: 1px solid rgba(149, 165, 166, 0.4);
}

/* Chat thread */
.chat-bubble {
    max-width: 85%;
    border-radius: 12px;
    padding: 10px 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    word-break: break-word;
}

.chat-bubble-user {
    align-self: flex-end;
    background: #1976d2;
    color: #ffffff;
    border-bottom-right-radius: 2px;
}

.chat-bubble-admin {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-color, #e0e0e0);
    border-bottom-left-radius: 2px;
}

.chat-bubble-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    font-size: 10px;
    margin-bottom: 4px;
    opacity: 0.8;
}

.chat-bubble-sender {
    font-weight: 700;
}

.chat-bubble-user .chat-bubble-sender {
    color: #e3f2fd;
}

.chat-bubble-admin .chat-bubble-sender {
    color: #2ecc71;
}

.chat-bubble-text {
    font-size: 13px;
    line-height: 1.45;
    white-space: pre-wrap;
    text-align: left;
}

.chat-attachment-holder {
    margin-top: 8px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.chat-file-thumb {
    width: 65px;
    height: 65px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.chat-file-thumb:hover {
    transform: scale(1.05);
}

.chat-file-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(0, 0, 0, 0.2);
    color: #fff;
    font-size: 11px;
    text-decoration: none;
}

/* ============================================================
   TICKET CHAT COMPONENT STYLES (st-*)
   ============================================================ */

/* Ensure header-container has solid background */
.header-container {
    background-color: #071824;
}

body.light .header-container {
    background-color: #f4f6fa;
}

/* Chat thread container and spacing */
.st-ticket-chat-thread {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: calc(100vh - 180px);
    margin-top: 45px;
}

.st-chat-bottom-spacer {
    height: 75px;
    width: 100%;
}

/* Fixed Bottom Reply Bar */
.st-ticket-chat-bottom-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 60;
    background: #0d1e2c;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 8px 12px;
    box-sizing: border-box;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.3);
}

body.light .st-ticket-chat-bottom-bar {
    background: #ffffff;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
}

.st-ticket-chat-bottom-inner {
    max-width: 768px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

.st-ticket-chat-reply-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.st-ticket-chat-attach-btn {
    margin: 0;
    cursor: pointer;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #8fa0b5;
    border-radius: 50%;
    transition: background 0.15s ease;
    flex-shrink: 0;
}

.st-ticket-chat-attach-btn:hover {
    background: rgba(255, 255, 255, 0.08);
}

.st-ticket-chat-file-badge {
    display: none;
    font-size: 11px;
    background: #2962ff;
    color: #fff;
    padding: 3px 8px;
    border-radius: 12px;
    white-space: nowrap;
    font-weight: 600;
    flex-shrink: 0;
    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.st-ticket-chat-input {
    flex: 1 1 0%;
    min-width: 0;
    width: 0;
    margin: 0;
    border-radius: 20px;
    padding: 9px 16px;
    font-size: 13px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #ffffff;
    outline: none;
    box-sizing: border-box;
}

body.light .st-ticket-chat-input {
    background: #f0f2f5;
    border: 1px solid #d1d5db;
    color: #111827;
}

.st-ticket-chat-input:focus {
    border-color: #2962ff;
}

.st-ticket-chat-send-btn {
    background: #2962ff;
    border: none;
    border-radius: 50%;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    flex-shrink: 0;
}

.st-ticket-chat-send-btn:hover {
    background: #1e54e4;
    transform: scale(1.05);
}

.st-ticket-chat-closed-box {
    display: none;
    text-align: center;
    padding: 10px;
    font-size: 13px;
    color: #8fa0b5;
    font-weight: 500;
}

/* ============================================================
   SUPPORT TICKETS UNIQUE COMPONENT CLASSES (st-*)
   ============================================================ */

/* Create Ticket Form */
.st-create-textarea {
    height: auto !important;
    min-height: 100px !important;
    padding: 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
    font-family: inherit !important;
}

.st-create-file-input {
    padding: 8px 0 !important;
}

/* Tickets List Pane */
.st-tickets-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    margin-top: 45px;
}

.st-tickets-heading {
    opacity: 0.8;
}

.st-tickets-new-btn {
    margin: 0 !important;
    width: auto !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    border-radius: 20px !important;
}

.st-tickets-card-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Common Ticket Icons & Text Utilities */
.st-icon-14-vam {
    font-size: 14px !important;
    vertical-align: middle !important;
}

.st-icon-16 {
    font-size: 16px !important;
}

.st-icon-18 {
    font-size: 18px !important;
}

.st-icon-24-vam {
    font-size: 24px !important;
    vertical-align: middle !important;
}

.st-loading-placeholder {
    opacity: 0.6;
}

.st-empty-box {
    opacity: 0.7;
}

.st-empty-icon {
    font-size: 48px !important;
    opacity: 0.4;
}

.st-empty-sub {
    opacity: 0.7;
}

.st-error-text {
    color: #e74c3c !important;
}

/* Ticket Chat Elements */
.st-chat-file-input-hidden {
    display: none !important;
}

.st-lock-icon {
    font-size: 16px !important;
    vertical-align: middle !important;
    margin-right: 4px !important;
}
.jcc{justify-content: center;}