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

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

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

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

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

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

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

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

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

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    /* font-size: 24px; */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;

    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;

    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;

    /* Support for IE. */
    font-feature-settings: 'liga';
}

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-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;}
.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;}
.pt10{padding-top: 10px;}
.pt15{padding-top: 15px;}
.pt50{padding-top: 50px;}

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

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

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

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

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

.dib{display: inline-block;}
.dibi{display: inline-block !important;}
.dblock{display: block;}
.vam{vertical-align: middle;}
.tal{text-align: left;}
.tac{text-align: center !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: 10px;
  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: 16px;
    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;
}

.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(50vw - 8px);
    float: left;
    max-width: 379px;
    padding-left: 5px;
}
.right-ob{
    width: calc(50vw - 8px);
    float: right;
    max-width: 379px;
    padding-right: 5px;
}
.data-r{
    clear: both;
    padding: 5px 0px;
    font-size: 13px;
    line-height: 15px;
}
.ai-r{
    clear: both;
    padding: 5px;
    font-size: 13px;
    line-height: 15px;
}
.rules-ul{
    list-style: decimal-leading-zero;
    text-align: left;
    margin: 10px 0px 100px -5px;
    padding-right: 10px;
}

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

.billlink{
    vertical-align: middle;
    margin-right: 10px;
}
.dnone{
    display: none;
}
.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;}
.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;
}

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


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;

}