html {
  color: var(--color-text-primary);
}
body {
  background: var(--color-background-surface);
  transition: background-color 0.4s ease-out;
  -webkit-tap-highlight-color: transparent;
  color: #a7a7a7;
}
:root {
  --zindex-minus-1000: -1000;
}
html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}
*,
:after,
:before {
  box-sizing: inherit;
}
body {
  margin: 0;
  -webkit-text-rendering: geometricPrecision;
  -moz-text-rendering: geometricPrecision;
  -o-text-rendering: geometricPrecision;
  -ms-text-rendering: geometricPrecision;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-font-smoothing: subpixel-antialiased;
  -o-font-smoothing: subpixel-antialiased;
  -ms-font-smoothing: subpixel-antialiased;
  font-smoothing: subpixel-antialiased;
}
:root {
  --border-radius-main: 4px;
  --color-black: 30, 31, 34;
  --color-main-100: 42, 43, 48;
  --color-main-90: 62, 63, 69;
  --color-main-80: 84, 86, 95;
  --color-main-70: 106, 108, 119;
  --color-main-60: 134, 136, 147;
  --color-main-50: 155, 156, 166;
  --color-main-40: 174, 175, 183;
  --color-main-25: 204, 204, 209;
  --color-main-15: 224, 224, 227;
  --color-main-10: 240, 240, 242;
  --color-main-5: 246, 247, 247;
  --color-white: 255, 255, 255;
  --color-red-soft: 252, 206, 209;
  --color-red-light: 250, 158, 163;
  --color-red: 255, 100, 108;
  --color-red-bright: 255, 0, 0;
  --color-red-faint: 204, 51, 59;
  --color-red-dark: 124, 3, 9;
  --color-orange: 255, 143, 0;
  --color-orange-dark: 153, 86, 0;
  --color-orange-faint: 209, 148, 71;
  --color-orange-bright: 255, 119, 0;
  --color-orange-light: 255, 188, 102;
  --color-orange-soft: 255, 233, 204;
  --color-yellow: 255, 221, 60;
  --color-yellow-dark: 147, 123, 16;
  --color-yellow-faint: 250, 200, 26;
  --color-yellow-bright: 255, 245, 51;
  --color-yellow-light: 255, 239, 163;
  --color-yellow-soft: 255, 248, 214;
  --color-green: 20, 198, 121;
  --color-green-dark: 11, 107, 65;
  --color-green-faint: 64, 156, 116;
  --color-green-bright: 1, 255, 0;
  --color-green-light: 102, 219, 168;
  --color-green-soft: 185, 238, 215;
  --color-cyan: 72, 230, 230;
  --color-cyan-dark: 25, 138, 148;
  --color-cyan-faint: 79, 173, 181;
  --color-cyan-bright: 0, 255, 255;
  --color-cyan-light: 161, 242, 242;
  --color-cyan-soft: 210, 249, 249;
  --color-blue: 12, 121, 248;
  --color-blue-dark: 4, 73, 154;
  --color-blue-faint: 93, 139, 192;
  --color-blue-bright: 0, 0, 255;
  --color-blue-light: 111, 176, 251;
  --color-blue-soft: 210, 230, 254;
  --color-violet: 128, 52, 194;
  --color-violet-dark: 74, 30, 113;
  --color-violet-faint: 119, 88, 147;
  --color-violet-bright: 136, 0, 255;
  --color-violet-light: 177, 126, 220;
  --color-violet-soft: 226, 207, 242;
  --color-pink: 247, 110, 242;
  --color-pink-dark: 115, 38, 112;
  --color-pink-faint: 153, 51, 149;
  --color-pink-bright: 255, 0, 245;
  --color-pink-light: 255, 173, 252;
  --color-pink-soft: 249, 231, 248;
  --color-main-8: 240, 240, 242;
  --color-main-4: 246, 247, 247;
  --height-xs-xl: 1px;
  --height-sm-3xs: 2px;
  --height-sm-2xs: 4px;
  --height-sm-xs: 6px;
  --height-sm-s: 8px;
  --height-sm-sm: 10px;
  --height-sm-m: 12px;
  --height-sm-ml: 14px;
  --height-sm-l: 16px;
  --height-sm-xl: 18px;
  --height-sm-2xl: 20px;
  --height-md-2xs: 24px;
  --height-md-xs: 28px;
  --height-md-s: 32px;
  --height-md-m: 36px;
  --height-md-l: 40px;
  --height-md-xl: 44px;
  --height-md-2xl: 48px;
  --height-lg-xs: 52px;
  --height-lg-s: 56px;
  --height-lg-m: 60px;
  --height-lg-l: 64px;
  --height-lg-xl: 68px;
  --height-lg-2xl: 72px;
  --height-lg-3xl: 76px;
  --height-xl-2xs: 80px;
  --height-xl-xs: 84px;
  --height-xl-s: 88px;
  --height-xl-m: 92px;
  --height-xl-l: 96px;
  --height-xl-xl: 100px;
  --height-xl-2xl: 104px;
  --height-xl-3xl: 200px;
  --offset-sm-xxxs: 2px;
  --offset-sm-xxs: 4px;
  --offset-sm-xxxl: 24px;
  --offset-md-xxl: 48px;
  --offset-lg-xxl: 72px;
  --offset-lg-xxxl: 76px;
  --offset-sm-3xs: 2px;
  --offset-sm-2xs: 4px;
  --offset-sm-xs: 6px;
  --offset-sm-s: 8px;
  --offset-sm-sm: 10px;
  --offset-sm-m: 12px;
  --offset-sm-ml: 14px;
  --offset-sm-l: 16px;
  --offset-sm-xl: 18px;
  --offset-sm-xxl: 20px;
  --offset-md-2xs: 24px;
  --offset-md-xs: 28px;
  --offset-md-s: 32px;
  --offset-md-m: 36px;
  --offset-md-l: 40px;
  --offset-md-xl: 44px;
  --offset-md-2xl: 48px;
  --offset-lg-xs: 52px;
  --offset-lg-s: 56px;
  --offset-lg-m: 60px;
  --offset-lg-l: 64px;
  --offset-lg-xl: 68px;
  --offset-lg-2xl: 72px;
  --offset-lg-3xl: 76px;
  --cubic-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --cubic-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --cubic-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition-slowest: 1s;
  --transition-slower: 0.7s;
  --transition-slow: 0.5s;
  --transition-standart: 0.35s;
  --transition-medium: 0.3s;
  --transition-fast: 0.25s;
  --transition-faster: 0.2s;
  --transition-fastest: 0.15s;
  --width-sm-4xs: 1px;
  --width-sm-3xs: 2px;
  --width-sm-2xs: 4px;
  --width-sm-xs: 6px;
  --width-sm-s: 8px;
  --width-sm-sm: 10px;
  --width-sm-m: 12px;
  --width-sm-ml: 14px;
  --width-sm-l: 16px;
  --width-sm-xl: 18px;
  --width-sm-2xl: 20px;
  --width-md-2xs: 24px;
  --width-md-xs: 28px;
  --width-md-s: 32px;
  --width-md-m: 36px;
  --width-md-l: 40px;
  --width-md-xl: 44px;
  --width-md-2xl: 48px;
  --width-lg-xs: 52px;
  --width-lg-s: 56px;
  --width-lg-m: 60px;
  --width-lg-l: 64px;
  --width-lg-xl: 68px;
  --width-lg-2xl: 72px;
  --width-lg-3xl: 76px;
  --width-xl-2xs: 80px;
  --width-xl-xs: 84px;
  --width-xl-s: 88px;
  --width-xl-m: 92px;
  --width-xl-l: 96px;
  --width-xl-xl: 100px;
  --width-xl-2xl: 104px;
  --width-xl-3xl: 200px;
  --width-mobile-xs: 288px;
  --width-mobile-s: 512px;
  --width-tablet-s: 688px;
  --width-tablet-m: 944px;
  --width-laptop-l: 1104px;
  --width-desktop-xl: 1264px;
  --width-full: 100%;
  --zindex-bottom: -1000;
  --zindex-minus-50: -50;
  --zindex-0: 0;
  --zindex-1: 1;
  --zindex-2: 2;
  --zindex-3: 3;
  --zindex-4: 4;
  --zindex-5: 5;
  --zindex-6: 6;
  --zindex-7: 7;
  --zindex-8: 8;
  --zindex-9: 9;
  --zindex-10: 10;
  --zindex-50: 50;
  --zindex-100: 100;
  --zindex-150: 150;
  --zindex-200: 200;
  --zindex-250: 250;
  --zindex-300: 300;
  --zindex-350: 350;
  --zindex-400: 400;
  --zindex-450: 450;
  --zindex-500: 500;
  --zindex-1000: 1000;
  --zindex-1050: 1050;
  --zindex-top: 9999;
  --opacity-0: 0;
  --opacity-01: 0.01;
  --opacity-1: 0.1;
  --opacity-2: 0.2;
  --opacity-3: 0.3;
  --opacity-4: 0.4;
  --opacity-5: 0.5;
  --opacity-6: 0.6;
  --opacity-7: 0.7;
  --opacity-8: 0.8;
  --opacity-9: 0.8;
  --opacity-10: 1;
  --bg-blur-25: blur(2.5px);
  --bg-blur-50: blur(5px);
  --bg-blur-100: blur(10px);
  --border-width-xs: 1px;
  --border-width-s: 2px;
  --border-width-m: 3px;
  --border-width-l: 4px;
  --border-radius-xxs: 2px;
  --border-radius-xs: 4px;
  --border-radius-s: 6px;
  --border-radius-m: 8px;
  --border-radius-ml: 10px;
  --border-radius-l: 12px;
  --border-radius-xl: 14px;
  --border-radius-2xl: 16px;
  --border-radius-3xl: 18px;
  --border-radius-4xl: 20px;
  --border-radius-round: 50%;
  --black-xxl: 80px/88px "NunitoSans Black", sans-serif;
  --black-xl: 40px/48px "NunitoSans Black", sans-serif;
  --black-l: 32px/40px "NunitoSans Black", sans-serif;
  --black-m: 24px/32px "NunitoSans Black", sans-serif;
  --black-s: 20px/28px "NunitoSans Black", sans-serif;
  --black-xs: 16px/24px "NunitoSans Black", sans-serif;
  --black-xs-compact: 16px/20px "NunitoSans Black", sans-serif;
  --bold-xxl: 20px/28px "NunitoSans Bold", sans-serif;
  --bold-xxl-compact: 20px/24px "NunitoSans Bold", sans-serif;
  --bold-xl: 16px/24px "NunitoSans Bold", sans-serif;
  --bold-xl-compact: 16px/20px "NunitoSans Bold", sans-serif;
  --bold-l: 14px/20px "NunitoSans Bold", sans-serif;
  --bold-m: 12px/16px "NunitoSans Bold", sans-serif;
  --bold-s: 10px/12px "NunitoSans Bold", sans-serif;
  --regular-xl: 20px/28px "NunitoSans Regular", sans-serif;
  --regular-l: 16px/24px "NunitoSans Regular", sans-serif;
  --regular-m: 14px/20px "NunitoSans Regular", sans-serif;
  --regular-s: 12px/16px "NunitoSans Regular", sans-serif;
  --regular-xs: 10px/12px "NunitoSans Regular", sans-serif;
}

/********************************** ASET CPY ********************************/

html, body, #app {
  background-color: #040404 !important;
}

.alert {
  font-weight: 500 !important;
}

.alert-danger {
  border:none !important;
}

.main-layout {
  /* height: 100%;
  width: 100%;
  position: fixed;
  overflow-y:scroll;
  overflow-x:hidden; */
  background-color: #040404;
  /* background-color: #232737; */
  position: fixed;
  height: 100%;
  width: 100%;
  overflow-y:scroll;
  overflow-x:hidden;
}

.main-layout:has(.trading-content){
  height: 100%;
  width: 100%;
  position: fixed;
  overflow-y:hidden;
  overflow-x:hidden;
}

div:has(div div.Vue-Toastification__container) { 
  position: fixed; 
}

small {
  font-size: 75%;
}

html {
  -webkit-box-sizing: border-box;
}
*,
:after,
:before {
  -webkit-box-sizing: inherit;
}
[type="button"]:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]:-moz-focusring,
[type="reset"]::-moz-focus-inner,
[type="submit"]:-moz-focusring,
[type="submit"]::-moz-focus-inner,
button:-moz-focusring,
button::-moz-focus-inner {
  -webkit-appearance: none;
}
ol,
ul {
  margin: 0;
  padding-left: 0;
}

button {
  -webkit-appearance: none;
  background-color: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
  font-style: inherit;
  font-variant: inherit;
  font-weight: inherit;
  line-height: inherit;
  outline: none;
  text-decoration: none;
}
button[disabled] {
  cursor: default;
}
ui-reset {
  display: none;
}
input:-webkit-autofill,
input:-webkit-autofill:active,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover {
  /* -webkit-text-fill-color: var(--color-text-primary) !important; */
  -webkit-transition: background-color 999999s ease-in-out 0s;
  transition: background-color 999999s ease-in-out 0s;
}
:active,
:focus,
:hover {
  outline: 0;
  outline-offset: 0;
}
:root {
  --border-radius-main: 4px;
  --color-black: 30, 31, 34;
  --color-main-100: 42, 43, 48;
  --color-main-90: 62, 63, 69;
  --color-main-80: 84, 86, 95;
  --color-main-70: 106, 108, 119;
  --color-main-60: 134, 136, 147;
  --color-main-50: 155, 156, 166;
  --color-main-40: 174, 175, 183;
  --color-main-25: 204, 204, 209;
  --color-main-15: 224, 224, 227;
  --color-main-10: 240, 240, 242;
  --color-main-5: 246, 247, 247;
  --color-white: 255, 255, 255;
  --color-red-soft: 252, 206, 209;
  --color-red-light: 250, 158, 163;
  --color-red: 255, 100, 108;
  --color-red-bright: 255, 0, 0;
  --color-red-faint: 204, 51, 59;
  --color-red-dark: 124, 3, 9;
  --color-orange: 255, 143, 0;
  --color-orange-dark: 153, 86, 0;
  --color-orange-faint: 209, 148, 71;
  --color-orange-bright: 255, 119, 0;
  --color-orange-light: 255, 188, 102;
  --color-orange-soft: 255, 233, 204;
  --color-yellow: 255, 221, 60;
  --color-yellow-dark: 147, 123, 16;
  --color-yellow-faint: 250, 200, 26;
  --color-yellow-bright: 255, 245, 51;
  --color-yellow-light: 255, 239, 163;
  --color-yellow-soft: 255, 248, 214;
  --color-green: 20, 198, 121;
  --color-green-dark: 11, 107, 65;
  --color-green-faint: 64, 156, 116;
  --color-green-bright: 1, 255, 0;
  --color-green-light: 102, 219, 168;
  --color-green-soft: 185, 238, 215;
  --color-cyan: 72, 230, 230;
  --color-cyan-dark: 25, 138, 148;
  --color-cyan-faint: 79, 173, 181;
  --color-cyan-bright: 0, 255, 255;
  --color-cyan-light: 161, 242, 242;
  --color-cyan-soft: 210, 249, 249;
  --color-blue: 12, 121, 248;
  --color-blue-dark: 4, 73, 154;
  --color-blue-faint: 93, 139, 192;
  --color-blue-bright: 0, 0, 255;
  --color-blue-light: 111, 176, 251;
  --color-blue-soft: 210, 230, 254;
  --color-violet: 128, 52, 194;
  --color-violet-dark: 74, 30, 113;
  --color-violet-faint: 119, 88, 147;
  --color-violet-bright: 136, 0, 255;
  --color-violet-light: 177, 126, 220;
  --color-violet-soft: 226, 207, 242;
  --color-pink: 247, 110, 242;
  --color-pink-dark: 115, 38, 112;
  --color-pink-faint: 153, 51, 149;
  --color-pink-bright: 255, 0, 245;
  --color-pink-light: 255, 173, 252;
  --color-pink-soft: 249, 231, 248;
  --color-main-8: 240, 240, 242;
  --color-main-4: 246, 247, 247;
  --height-xs-xl: 1px;
  --height-sm-3xs: 2px;
  --height-sm-2xs: 4px;
  --height-sm-xs: 6px;
  --height-sm-s: 8px;
  --height-sm-sm: 10px;
  --height-sm-m: 12px;
  --height-sm-ml: 14px;
  --height-sm-l: 16px;
  --height-sm-xl: 18px;
  --height-sm-2xl: 20px;
  --height-md-2xs: 24px;
  --height-md-xs: 28px;
  --height-md-s: 32px;
  --height-md-m: 36px;
  --height-md-l: 40px;
  --height-md-xl: 44px;
  --height-md-2xl: 48px;
  --height-lg-xs: 52px;
  --height-lg-s: 56px;
  --height-lg-m: 60px;
  --height-lg-l: 64px;
  --height-lg-xl: 68px;
  --height-lg-2xl: 72px;
  --height-lg-3xl: 76px;
  --height-xl-2xs: 80px;
  --height-xl-xs: 84px;
  --height-xl-s: 88px;
  --height-xl-m: 92px;
  --height-xl-l: 96px;
  --height-xl-xl: 100px;
  --height-xl-2xl: 104px;
  --height-xl-3xl: 200px;
  --offset-sm-xxxs: 2px;
  --offset-sm-xxs: 4px;
  --offset-sm-xxxl: 24px;
  --offset-md-xxl: 48px;
  --offset-lg-xxl: 72px;
  --offset-lg-xxxl: 76px;
  --offset-sm-3xs: 2px;
  --offset-sm-2xs: 4px;
  --offset-sm-xs: 6px;
  --offset-sm-s: 8px;
  --offset-sm-sm: 10px;
  --offset-sm-m: 12px;
  --offset-sm-ml: 14px;
  --offset-sm-l: 16px;
  --offset-sm-xl: 18px;
  --offset-sm-xxl: 20px;
  --offset-md-2xs: 24px;
  --offset-md-xs: 28px;
  --offset-md-s: 32px;
  --offset-md-m: 36px;
  --offset-md-l: 40px;
  --offset-md-xl: 44px;
  --offset-md-2xl: 48px;
  --offset-lg-xs: 52px;
  --offset-lg-s: 56px;
  --offset-lg-m: 60px;
  --offset-lg-l: 64px;
  --offset-lg-xl: 68px;
  --offset-lg-2xl: 72px;
  --offset-lg-3xl: 76px;
  --cubic-ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --cubic-ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --cubic-ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
  --transition-slowest: 1s;
  --transition-slower: 0.7s;
  --transition-slow: 0.5s;
  --transition-standart: 0.35s;
  --transition-medium: 0.3s;
  --transition-fast: 0.25s;
  --transition-faster: 0.2s;
  --transition-fastest: 0.15s;
  --width-sm-4xs: 1px;
  --width-sm-3xs: 2px;
  --width-sm-2xs: 4px;
  --width-sm-xs: 6px;
  --width-sm-s: 8px;
  --width-sm-sm: 10px;
  --width-sm-m: 12px;
  --width-sm-ml: 14px;
  --width-sm-l: 16px;
  --width-sm-xl: 18px;
  --width-sm-2xl: 20px;
  --width-md-2xs: 24px;
  --width-md-xs: 28px;
  --width-md-s: 32px;
  --width-md-m: 36px;
  --width-md-l: 40px;
  --width-md-xl: 44px;
  --width-md-2xl: 48px;
  --width-lg-xs: 52px;
  --width-lg-s: 56px;
  --width-lg-m: 60px;
  --width-lg-l: 64px;
  --width-lg-xl: 68px;
  --width-lg-2xl: 72px;
  --width-lg-3xl: 76px;
  --width-xl-2xs: 80px;
  --width-xl-xs: 84px;
  --width-xl-s: 88px;
  --width-xl-m: 92px;
  --width-xl-l: 96px;
  --width-xl-xl: 100px;
  --width-xl-2xl: 104px;
  --width-xl-3xl: 200px;
  --width-mobile-xs: 288px;
  --width-mobile-s: 512px;
  --width-tablet-s: 688px;
  --width-tablet-m: 944px;
  --width-laptop-l: 1104px;
  --width-desktop-xl: 1264px;
  --width-full: 100%;
  --zindex-bottom: -1000;
  --zindex-minus-50: -50;
  --zindex-0: 0;
  --zindex-1: 1;
  --zindex-2: 2;
  --zindex-3: 3;
  --zindex-4: 4;
  --zindex-5: 5;
  --zindex-6: 6;
  --zindex-7: 7;
  --zindex-8: 8;
  --zindex-9: 9;
  --zindex-10: 10;
  --zindex-50: 50;
  --zindex-100: 100;
  --zindex-150: 150;
  --zindex-200: 200;
  --zindex-250: 250;
  --zindex-300: 300;
  --zindex-350: 350;
  --zindex-400: 400;
  --zindex-450: 450;
  --zindex-500: 500;
  --zindex-1000: 1000;
  --zindex-1050: 1050;
  --zindex-top: 9999;
  --opacity-0: 0;
  --opacity-01: 0.01;
  --opacity-1: 0.1;
  --opacity-2: 0.2;
  --opacity-3: 0.3;
  --opacity-4: 0.4;
  --opacity-5: 0.5;
  --opacity-6: 0.6;
  --opacity-7: 0.7;
  --opacity-8: 0.8;
  --opacity-9: 0.8;
  --opacity-10: 1;
  --bg-blur-25: blur(2.5px);
  --bg-blur-50: blur(5px);
  --bg-blur-100: blur(10px);
  --border-width-xs: 1px;
  --border-width-s: 2px;
  --border-width-m: 3px;
  --border-width-l: 4px;
  --border-radius-xxs: 2px;
  --border-radius-xs: 4px;
  --border-radius-s: 6px;
  --border-radius-m: 8px;
  --border-radius-ml: 10px;
  --border-radius-l: 12px;
  --border-radius-xl: 14px;
  --border-radius-2xl: 16px;
  --border-radius-3xl: 18px;
  --border-radius-4xl: 20px;
  --border-radius-round: 50%;
  --black-xxl: 80px/88px "NunitoSans Black", sans-serif;
  --black-xl: 40px/48px "NunitoSans Black", sans-serif;
  --black-l: 32px/40px "NunitoSans Black", sans-serif;
  --black-m: 24px/32px "NunitoSans Black", sans-serif;
  --black-s: 20px/28px "NunitoSans Black", sans-serif;
  --black-xs: 16px/24px "NunitoSans Black", sans-serif;
  --black-xs-compact: 16px/20px "NunitoSans Black", sans-serif;
  --bold-xxl: 20px/28px "NunitoSans Bold", sans-serif;
  --bold-xxl-compact: 20px/24px "NunitoSans Bold", sans-serif;
  --bold-xl: 16px/24px "NunitoSans Bold", sans-serif;
  --bold-xl-compact: 16px/20px "NunitoSans Bold", sans-serif;
  --bold-l: 14px/20px "NunitoSans Bold", sans-serif;
  --bold-m: 12px/16px "NunitoSans Bold", sans-serif;
  --bold-s: 10px/12px "NunitoSans Bold", sans-serif;
  --regular-xl: 20px/28px "NunitoSans Regular", sans-serif;
  --regular-l: 16px/24px "NunitoSans Regular", sans-serif;
  --regular-m: 14px/20px "NunitoSans Regular", sans-serif;
  --regular-s: 12px/16px "NunitoSans Regular", sans-serif;
  --regular-xs: 10px/12px "NunitoSans Regular", sans-serif;
}
.font-black-xxl {
  font: var(--black-xxl);
}
.font-black-xl {
  font: var(--black-xl);
}
.font-black-l {
  font: var(--black-l);
}
.font-black-m {
  font: var(--black-m);
}
.font-black-s {
  font: var(--black-s);
}
.font-black-xs {
  font: var(--black-xs);
}
.font-black-xs-compact {
  font: var(--black-xs-compact);
}
.font-bold-xxl {
  font: var(--bold-xxl);
}
.font-bold-xl {
  font: var(--bold-xl);
}
.font-bold-xl-compact {
  font: var(--bold-xl-compact);
}
.font-bold-l {
  font: var(--bold-l);
}
.font-bold-m {
  font: var(--bold-m);
}
.font-bold-s {
  font: var(--bold-s);
}
.font-regular-xl {
  font: var(--regular-xl);
}
.font-regular-l {
  font: var(--regular-l);
}
.font-regular-m {
  font: var(--regular-m);
}
.font-regular-s {
  font: var(--regular-s);
}
.font-regular-xs {
  font: var(--regular-xs);
}
[align-self-start] {
  -ms-flex-item-align: start !important;
  align-self: flex-start !important;
}
[align-self-end] {
  -ms-flex-item-align: end !important;
  align-self: flex-end !important;
}
[align-self-center] {
  -ms-flex-item-align: center !important;
  align-self: center !important;
}
[align-self-stretch] {
  -ms-flex-item-align: stretch !important;
  align-self: stretch !important;
}
[align-self-baseline] {
  -ms-flex-item-align: baseline !important;
  align-self: baseline !important;
}
[align-self-auto] {
  -ms-flex-item-align: auto !important;
  align-self: auto !important;
}
[wrap] {
  -ms-flex-wrap: wrap !important;
  flex-wrap: wrap !important;
}
[nowrap] {
  -ms-flex-wrap: nowrap !important;
  flex-wrap: nowrap !important;
}
[wrap-reverse] {
  -ms-flex-wrap: wrap-reverse !important;
  flex-wrap: wrap-reverse !important;
}
[justify-content-start] {
  -ms-flex-pack: start !important;
  justify-content: flex-start !important;
}
[justify-content-center] {
  -ms-flex-pack: center !important;
  justify-content: center !important;
}
[justify-content-end] {
  -ms-flex-pack: end !important;
  justify-content: flex-end !important;
}
[justify-content-around] {
  -ms-flex-pack: distribute !important;
  justify-content: space-around !important;
}
[justify-content-between] {
  -ms-flex-pack: justify !important;
  justify-content: space-between !important;
}
[justify-content-evenly] {
  -ms-flex-pack: space-evenly !important;
  justify-content: space-evenly !important;
}
[align-items-start] {
  -ms-flex-align: start !important;
  align-items: flex-start !important;
}
[align-items-center] {
  -ms-flex-align: center !important;
  align-items: center !important;
}
[align-items-end] {
  -ms-flex-align: end !important;
  align-items: flex-end !important;
}
[align-items-stretch] {
  -ms-flex-align: stretch !important;
  align-items: stretch !important;
}
[align-items-baseline] {
  -ms-flex-align: baseline !important;
  align-items: baseline !important;
}
vui-icon {
  -ms-flex-pack: center;
  display: -ms-inline-flexbox;
  display: inline-flex;
  justify-content: center;
}
:root {
  --color-background-base: #1e1f22;
  --color-background-surface: #2a2b30;
  --color-background-secondary-surface: #3e3f45;
  --color-background-highlight: #54565f;
  --color-background-inverted: #F6F7F7;
  --color-background-accent-positive: #ffdd3c;
  --color-background-positive: #14c679;
  --color-background-warning: #ff8f00;
  --color-background-positive-rgb: 255, 221, 60;
  --color-background-accent-negative: #868893;
  --color-background-negative: #ff646c;
  --color-stroke-divider: #54565f;
  --color-stroke-active: #54565f;
  --color-stroke-secondary-active: #f0f0f2;
  --color-stroke-highlight: #868893;
  --color-stroke-inactive: #2a2b30;
  --color-stroke-accent: #f6f7f7;
  --color-stroke-accent-color: #ffdd3c;
  --color-stroke-positive: #14c679;
  --color-stroke-warning: #ff8f00;
  --color-stroke-negative: #ff646c;
  --color-text-primary: #f6f7f7;
  --color-text-secondary: #868893;
  --color-text-inactive: #54565f;
  --color-text-inverted: #1e1f22;
  --color-text-button-primary: #1e1f22;
  --color-text-button-secondary: #f6f7f7;
  --color-text-button-inactive: #868893;
  --color-text-accent: #ffdd3c;
  --color-text-positive: #14c679;
  --color-text-warning: #ff8f00;
  --color-text-negative: #ff646c;
  --color-text-link: #6fb0fb;
  --color-icon-primary-active: #f6f7f7;
  --color-icon-primary-highlight: #aeafb7;
  --color-icon-primary-inactive: #54565f;
  --color-icon-secondary-active: #868893;
  --color-icon-secondary-highlight: #f6f7f7;
  --color-icon-secondary-inactive: #54565f;
  --color-icon-button-dark: #2a2b30;
  --color-icon-button-light: #F6F7F7;
  --color-icon-button-inactive: #868893;
  --color-icon-inverted: #2a2b30;
  --color-icon-primary-accent: #ffdd3c;
  --color-icon-positive: #14c679;
  --color-icon-negative: #ff646c;
  --color-icon-warning: #ff8f00;
  --color-icon-secondary-accent: #0c79f8;
  --color-button-negative-active: #ff646c;
  --color-button-negative-highlight: #fa9ea3;
  --color-button-negative-inactive: #7c0309;
  --color-button-primary-active: #ffdd3c;
  --color-button-primary-highlight: #ffefa3;
  --color-button-primary-inactive: #937b10;
  --color-button-positive-active: #14c679;
  --color-button-positive-highlight: #66dba8;
  --color-button-positive-inactive: #0b6b41;
  --color-button-secondary-active: #0c79f8;
  --color-button-secondary-highlight: #6fb0fb;
  --color-button-secondary-inactive: #04499a;
  --color-button-neutral-active: #54565f;
  --color-button-neutral-highlight: #6a6c77;
  --color-button-neutral-inactive: #1e1f22;
  --color-button-inverted: #f6f7f7;
  --color-control-active: #ffdd3c;
  --color-control-highlight: #ffefa3;
  --color-control-inactive: #54565f;
  --color-chart-yellow: #fff533;
  --color-chart-green: #01ff00;
  --color-chart-cyan: #0ff;
  --color-chart-violet: #80f;
  --color-chart-pink: #ff00f5;
  --color-chart-red: red;
  --color-tournament-gradient: linear-gradient(0deg, #2a2b30, rgba(42, 43, 48, 0.8) 30%, rgba(42, 43, 48, 0));
  --color-opacity-base: 30, 31, 34;
  --shadow-e1: 0 2px 6px rgba(0, 0, 0, 0.2);
  --shadow-e2: 0 4px 8px rgba(0, 0, 0, 0.2), 0px 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-e3: 0 8px 16px rgba(0, 0, 0, 0.3), 0px 12px 32px rgba(0, 0, 0, 0.4);
}
/*
@font-face {
  font-family: NunitoSans Black;
  font-style: normal;
  font-weight: 900;
  src: url(/h-assets/fonts/nunitosans-black-40ca0429e1a40bcd6c26.woff2) format("woff2"), url(/h-assets/fonts/nunitosans-black-7ae52f38151ec8bc7591.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: NunitoSans Bold;
  font-style: normal;
  font-weight: 700;
  src: url(/h-assets/fonts/nunitosans-bold-9c4cdbefdbac045118a3.woff2) format("woff2"), url(/h-assets/fonts/nunitosans-bold-9709a8d45fa54da212c6.woff) format("woff");
}
@font-face {
  font-display: swap;
  font-family: NunitoSans Regular;
  font-style: normal;
  font-weight: 400;
  src: url(/h-assets/fonts/nunitosans-regular-159d1cc68606c496d527.woff2) format("woff2"), url(/h-assets/fonts/nunitosans-regular-6829d5bb0386828b00bc.woff) format("woff");
}*/
html {
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  color: var(--color-text-primary);
  /* font-family: NunitoSans Regular, sans-serif; */
}
/* 
body {
  background-color: #2a2b30;
  font-weight: 200;
} */

#full-height {
  height: 100%;
}

.height-min-header {
  height: 100% !important;
}

.left-section {
  background-color: #000;
  /* border-right: 1px solid #1f1d1d; */
}
.right-section {
  background-color: #000;
  /* border-left: 1px solid #1f1d1d; */
  padding-top: 10px;
  padding-bottom: 10px;
  z-index: 3;
}
.middle-section {
  background-color: #000;
  padding: 0;
}

.container {
  max-width: 100% !important;
  
}

#container {
  width: calc(100% - 81px) !important;
  height: 100%;
}

.nav-item .dropdown-menu {
  border: none;
  margin-top: 0;
  border-top: none;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .3), 0px 12px 32px rgba(0, 0, 0, .4);
  border-radius: 10px;
  background-color: #000000;
  /* border-top: none !important; */
  width: 300px;
  padding: 13px;
  border: 1px solid #383f48 !important;
}

.dropdown-menu.dropdown-light {
  border: none !important;
}

.dropdown-item {
  color: #f6f7f7;
  padding: 10px;
  /* font-weight: 300; */
}

.dropdown-item:hover {
  color: #f6f7f7;
  background: none;
}

/* Style the tabs */
.tabs {
  overflow: hidden;
  height: 65px;
  /* background: #F6F7F7; */
  border-bottom: 1px solid #1e1c1c;
  /* margin-bottom: -2px; */
  /* margin-left: 24px; */
  /* padding-top: 20px; */
}

.tabs a{
  /*float: left; */
    cursor: pointer;
    padding: 20px 24px;
    transition: background-color 0.2s;
    /* border: 1px solid #ccc; */
    border-right: none;
    /* background-color: #f1f1f1; */
    border-radius: 10px 10px 0 0;
    /* font-weight: bold; */
    color: #9e9e9e;
    font-size: 16px;
    font-weight: 800;
}
.tabs a:last-child { 
  /* border-right: 1px solid #ccc; */
}

/* Change background color of tabs on hover */
.tabs a:hover {
  /* background-color: #aaa; */
  color: #F6F7F7;
  text-decoration: none;
}

/* Styling for active tab */
.tabs a.active {
  /*background-color: #F6F7F7; */
  color: #F6F7F7;
  border-bottom: 2px solid #F6F7F7;
  font-weight: bold;
  cursor: default;
  /* color: #F6F7F7; */
  font-weight: 800;
}

/* Style the tab content */
.tabcontent {
  /* padding: 0px 28px; */
  /* border: 1px solid #ccc; */
  /* border-radius: 10px; */
  /* box-shadow: 4px 4px 8px #e1e1e1 */
}

.tabcontent td {
padding: 0.3em 0.4em;
color: #F6F7F7;
}
.tabcontent td.legend { 
color: #888; 
font-weight: bold;
text-align: right;
}
.tabcontent .map {
height: 173px;
width: 220px;
background: #D3EAFB;
margin-left: 60px;
/* border: 1px solid #ccc; */
border-radius: 10px;
}
.data { width: 120px; }

.bok {
  border: 1px solid #54565f;
  padding: 10px;
  border-radius: 10px;
  text-align: center;
  vertical-align: middle;
  height: 147px;
}

#khonten {
  padding-top: 64px;
  margin: 0;
  width: 100%;
  height: 100%;
  color: #fff !important;
}

.form-control:valid {
  /* background-color:  #464649 !important; */
  background-color:  #272c33;
  color: #F6F7F7;
}

.font-bold {
  font-weight: bold !important;
}

.btn-reload {
  display: inline-flex;
    align-items: center;
    color: #F6F7F7;
}

ul.menu-mobile {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  /* background-color: #333333; */
}

.menu-mobile li {
  float: left;
  height: 48px;
  /* background: red; */
  /* border: 1px solid #fff !important; */
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-top: 0;
}

.menu-mobile li a {
  display: block;
  /* color: white; */
  text-align: left;
  padding: 16px;
  text-decoration: none;
}

.menu-mobile li a:hover {
  /* background-color: #111111; */
}

.dropdown-toggle-mobile::after {
  display: none;
}

.dropdown-toggle::after {
  display: none;
}

.navbar-light div div ul li .nav-balance {
  /* background-color: #dddddd; */
}

.add-asset {
  /* margin-top: 6px; */
  border: 1px solid #1777ff !important;
  background: #242e49 !important;
  /* padding-right: 0px !important; */
  padding-right: 0px !important;
  padding-left: 10px !important;
}

#modalBigMenu {
  width: 70%;
  height: calc(100% - 59px);
  position: fixed;
  z-index: 1032;
  top: 0;
  margin-top: 64px;
  display: none;
  background: #000;
  border-right: 1px solid #1f1d1d;
  color: #F6F7F7;
  box-shadow: -5px 13px 14px 3px #000000;
}

#modalBigMenu ul li {
  list-style: none;
  padding: 15px;
  border-bottom: 1px solid #1f1d1d;
  font-weight: 300;
}
#modalBigMenu ul {
  padding-left: 0;
}

#modalBigMenu.show {
  display: block;
}

#modalBigMenu ul li a {
  color: #cecece;
  /* color: #cecece !important; */
}

.no-bg {
  background: none !important;
}

.left-section-desktop .cild {
  border:1px solid #202020;
  height: 100%;
  border-radius: 10px;
}

/******* MODAL NOTIF **************/
#modalNotification {
  width: 400px;
  height: calc(100% - 84px);
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  margin-top: 74px;
  display: none;
  background: #14161a;
  color: #F6F7F7;
  border-radius: 10px;
}

.modalNotification-desktop {
  margin-left: 90px;
  padding-top: 10px;
}

.modalNotification-desktop ul {
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

#modalNotification ul li {
  list-style: none;
  padding: 15px;
  font-weight: 300;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}
#modalNotification ul {
  padding-left: 0;
}

#modalNotification.show {
  display: block;
}

#modalNotification .row .col-6 {
  font-weight: 600;
}
/******* MODAL NOTIF **************/

/******* MODAL TRADING HISTORY **************/
#modalTradeHistory {
  width: 330px;
  height: calc(100% - 84px);
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  margin-top: 74px;
  display: none;
  background: #14161a;
  color: #F6F7F7;
  border-radius: 10px;
}

.modalTradeHistory-desktop {
  margin-left: 90px;
  padding-top: 10px;
}

.modalTradeHistory-desktop ul {
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

#modalTradeHistory ul li {
  list-style: none;
  padding: 15px;
  font-weight: 300;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}
#modalTradeHistory ul {
  padding-left: 0;
}

#modalTradeHistory.show {
  display: block;
}

#modalTradeHistory .row .col-6 {
  font-weight: 600;
}
/******* MODAL TRADING HISTORY **************/

/******* MODAL TOP TRADER **************/
#modalToptrader {
  width: 330px;
  height: calc(100% - 84px);
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  margin-top: 74px;
  display: none;
  background: #14161a;
  color: #F6F7F7;
  border-radius: 10px;
}

.modalToptrader-desktop {
  margin-left: 90px;
  padding-top: 10px;
}

.modalToptrader-desktop ul {
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
  margin-bottom: 0 !important;
}

#modalToptrader ul li {
  list-style: none;
  padding: 15px;
  font-weight: 300;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
}
#modalToptrader ul {
  padding-left: 0;
}

#modalToptrader.show {
  display: block;
}

#modalToptrader .row .col-6 {
  font-weight: 600;
}
/******* MODAL TOP TRADER **************/

/******* MODAL TRADING TOOLS **************/
#modalTradeTools {
  width: 330px;
  height: calc(100% - 59px);
  position: fixed;
  z-index: 3;
  top: 0;
  left: 0;
  margin-top: 59px;
  display: none;
  background: #141619;
  border-right: 1px solid #1f1d1d;
  color: #F6F7F7;
}

.modalTradeTools-desktop {
  margin-left: 81px;
  padding-top: 20px;
}

#modalTradeTools ul li {
  list-style: none;
  padding: 15px;
  font-weight: 300;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  background-color: #27292d;
  margin-bottom: 10px;
}

#modalTradeTools ul li:hover {
  background-color: #545659;
}

#modalTradeTools ul {
  padding-left: 0;
}

#modalTradeTools.show {
  display: block;
}

#modalTradeTools .row .col-6 {
  font-weight: 600;
}
/******* MODAL TRADING TOOLS **************/

/******* MODAL DRAWING **************/
#modalDrawing {
  width: 40px;
  /* height: calc(100% - 59px); */
  position: fixed;
  z-index: 3;
  top: 36px;
  left: 0px;
  margin-top: 74px;
  display: none;
  background: #1f273f;
  /* border-right: 1px solid #383f48; */
  color: #F6F7F7;
  border-radius: 10px;
  border: 1px solid #383f48;
  padding: 0;
  bottom: 76px;
  border-left: none;
  border-top-right-radius: 10px !important;
  border-bottom-right-radius: 10px !important;
  max-height: 554px;
}

.modalDrawing-desktop {
  margin-left: 81px;
  padding-top: 20px;
}

#modalDrawing ul li {
  list-style: none;
  /* padding: 15px; */
  font-weight: 300;
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  /* background-color: #27292d; */
  /* margin-bottom: 10px; */
  border-bottom: 1px solid #383f48;
  padding: 5px;
}

#modalDrawing ul li:hover {
  /* background-color: #545659; */
}

#modalDrawing ul {
  padding-left: 0;
}

#modalDrawing.show {
  display: block;
}

#modalDrawing .row .col-6 {
  font-weight: 600;
}

.tools-list-row {
  overflow-y: auto; /* Mengaktifkan scroll vertikal */
  overflow-x: hidden; /* Menyembunyikan scroll horizontal jika tidak diperlukan */
}

/******* MODAL DRAWING **************/

/******* MODAL CANDLE TYPE **************/
#modalCandleType {
  position: fixed;
  z-index: 3;
  border: 0;
  left: 0;
  margin-top: 59px;
  display: none;
  background: #141619;
  /* border-right: 1px solid #54565f; */
  color: #F6F7F7;
  /* box-shadow: 0px 1px 14px 3px #222121; */
  width: 220px;
  margin-left: 92px;
  height: auto;
  margin-top: 75px;
  border: none;
  border-radius: 15px;
  padding-top: 6px;
  /* border: 1px solid #54565f; */
  bottom: 80px;
}

.modalCandleType-desktop {
  margin-left: 81px;
  padding-top: 20px;
}

#modalCandleType ul li {
  list-style: none;
  padding: 10px;
  font-weight: 300;
  padding-left: 15px;
  background: #27292d;
  border-radius: 5px;
  margin-top: 10px;
}

#modalCandleType ul li a {
  color: #cecece !important;
  text-decoration: none;
}
#modalCandleType ul {
  /* padding-left: 0; */
  margin-bottom: 5px !important;
}

#modalCandleType.show {
  display: block;
}
/******* MODAL CANDLE TYPE **************/

/******* MODAL SELECT PRICE **************/
#modalSelectPrice {
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  margin-top: 59px;
  display: none;
  background: #141619;
  /* border-right: 1px solid #54565f; */
  color: #F6F7F7;
  /* box-shadow: 0px 1px 14px 3px #222121; */
  width: 120px;
  margin-right: 280px;
  height: auto;
  margin-top: 75px;
  border: none;
  border-radius: 15px;
  padding-top: 6px;
  /* border: 1px solid #54565f; */
}

.modalSelectPrice-desktop {
  margin-left: 81px;
  padding-top: 20px;
}

#modalSelectPrice ul li {
  list-style: none;
  padding: 5px;
  font-weight: normal;
  background: #27292d;
  border-radius: 6px;
  margin-bottom: 10px;
  text-align: center;
}

#modalSelectPrice ul li:hover {
  background: #545659;
}

#modalSelectPrice ul li a {
  color: #cecece !important;
  text-decoration: none;
  font-weight: bold;
}
#modalSelectPrice ul {
  /* padding-left: 0; */
  margin-bottom: 0;
}

#modalSelectPrice.show {
  display: block;
}
/******* MODAL SELECT PRICE **************/

/******* MODAL SELECT PRICE **************/
#modalSelectTimeframe {
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  margin-top: 59px;
  display: none;
  background: #141619;
  /* border-right: 1px solid #54565f; */
  color: #F6F7F7;
  /* box-shadow: 0px 1px 14px 3px #222121; */
  width: 120px;
  margin-right: 200px;
  height: auto;
  margin-top: 75px;
  border: none;
  border-radius: 15px;
  padding-top: 6px;
  /* border: 1px solid #54565f; */
}

.modalSelectTimeframe-desktop {
  margin-left: 81px;
  padding-top: 20px;
}

#modalSelectTimeframe ul li {
  list-style: none;
  padding: 10px;
  font-weight: bold;
  padding-left: 15px;
  background-color: #27292d;
  border-radius: 5px;
  margin-bottom: 10px;
  text-align: center;
}

#modalSelectTimeframe ul li a {
  color: #cecece !important;
  font-weight: bold;
  text-decoration: none;
}
#modalSelectTimeframe ul {
  /* padding-left: 0; */
  padding-bottom: 0;
  margin-bottom: 0;
}

#modalSelectTimeframe.show {
  display: block;
}
/******* MODAL SELECT PRICE **************/

/******* MODAL TF **************/
#modalTimeframe {
  /* width: 100%;
  height: calc(100% - 59px); */
  position: fixed;
  z-index: 3;
  bottom: 80px;
  left: 0;
  /* margin-top: 59px; */
  display: none;
  background: #141619;
  /* border-right: 1px solid #54565f; */
  color: #F6F7F7;
  /* box-shadow: 0px 1px 14px 3px #222121; */
  width: 150px;
  margin-left: 92px;
  height: auto;
  margin-top: 75px;
  border: none;
  border-radius: 15px;
  padding-top: 6px;
  /* border: 1px solid #54565f; */
}

.modalTimeframe-desktop {
  margin-left: 81px;
  padding-top: 20px;
}

#modalTimeframe ul li {
  list-style: none;
  padding: 10px;
  font-weight: 300;
  padding-left: 15px;
  background: #27292d;
  border-radius: 6px;
  margin-top: 10px;
  text-align: center;
}

#modalTimeframe ul li:hover {
  background: #545659;
}

#modalTimeframe ul li a {
  color: #cecece !important;
  text-decoration: none;
  font-weight: bold;
}
#modalTimeframe ul {
  /* padding-left: 0; */
  margin-bottom: 5px !important;
}

#modalTimeframe.show {
  display: block;
}
/******* MODAL TF **************/

/******* MODAL ASSETS **************/
#modalAssets {
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  display: none;
  background: #272c33;
  border-right: 1px solid #54565f;
  color: #F6F7F7;
  /* box-shadow: 0px 1px 14px 3px #222121; */
  width: 420px;
  margin-left: 175px;
  height: auto;
  margin-top: 58px;
  border: none;
  border-radius: 10px;
  padding-top: 6px;
  /* border: 1px solid #54565f; */
  min-height: 410px;
}

.modalAssets-desktop {
  margin-left: 81px;
  padding-top: 20px;
}

#modalAssets ul li {
  list-style: none;
  padding: 10px;
  padding-left: 15px;
  font-weight: bold;
  border: 1px solid #3b404f;
  margin-bottom: 10px;
  border-radius: 5px;
  /* font: 13px/16px "NunitoSans Bold",sans-serif; */
}

#modalAssets ul li a {
  color: #fff !important;
  text-decoration: none;
}
#modalAssets ul {
  padding-left: 0;
}

#modalAssets.show {
  display: block;
}
/******* MODAL ASSETS **************/

/******* MODAL SWITCH MODE **************/
#modalSwitchMode {
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  display: none;
  background: #272c33;
  border-right: 1px solid #54565f;
  color: #F6F7F7;
  /* box-shadow: 0px 1px 14px 3px #222121; */
  width: 100%;
  height: 100%;
  /* margin-top: 58px; */
  border: none;
  /* border-radius: 10px; */
  padding-top: 6px;
  /* border: 1px solid #54565f; */
  min-height: 410px;
}

#modalSwitchMode.show {
  display: block;
}
/******* MODAL SWITCH MODE **************/

/******* MODAL CALENDAR **************/
#modalCalendar {
  position: fixed;
  z-index: 1031;
  top: 0;
  left: 0;
  margin-top: 150px;
  display: none;
  background: none;
  /* border-right: 1px solid #54565f; */
  color: #F6F7F7;
  box-shadow: none;
  width: 100%;
  /* margin-left: 175px; */
  height: auto;
  /* margin-top: 54px; */
  border: none;
  border-radius: 15px;
  padding-top: 6px;
  /* border: 1px solid #54565f; */
  min-height: 410px;
  
}

.modalCalendar-desktop {
  margin-left: 81px;
  padding-top: 20px;
}

#modalCalendar ul li {
  list-style: none;
  padding: 10px;
  padding-left: 15px;
  font: 13px/16px "NunitoSans Bold",sans-serif;
}

#modalCalendar ul li a {
  color: #cecece !important;
  text-decoration: none;
}
#modalCalendar ul {
  padding-left: 0;
}

#modalCalendar.show {
  display: block;
}
/******* MODAL CALENDAR **************/

/******* MODAL FLOATING BUTTON TOOLS **************/
#modalFloatingButtonTools {
  position: fixed;
  z-index: 2;
  /* top: 0; */
  left: 0;
  /* margin-top: 150px; */
  background: none !important;
  /* border-right: 1px solid #54565f; */
  color: #F6F7F7;
  box-shadow: none;
  width: auto;
  /* margin-left: 175px; */
  height: auto;
  /* margin-top: 54px; */
  border: none;
  /* border-radius: 15px; */
  /* border: 1px solid #54565f; */
  /* height: 100px; */
  position: fixed;
  bottom: 30px;
  margin-left: 90px;
  padding: 0;
}

.modalFloatingButtonTools-desktop {
  margin-left: 81px;
  padding-top: 20px;
}

#modalFloatingButtonTools ul li {
  list-style: none;
  background: #000 !important;
  /* padding: 10px; */
  /* padding-left: 15px; */
  border: 1px solid #1f1e1e;
  border-radius: 8px;
  font: 13px/16px "NunitoSans Bold",sans-serif;
  width: 37px;
  height: 37px;
  margin-right: 10px;
}

#modalFloatingButtonTools ul li a {
  color: #707582 !important;
  text-decoration: none;
  font-weight: bold;
}

#modalFloatingButtonTools ul li a:hover {
  color: #F6F7F7 !important;
}

#modalFloatingButtonTools ul {
  padding-left: 0;
}

#modalFloatingButtonTools.show {
  display: block;
}

.btmMenu ul {
  list-style-type: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  /* background-color: #333333 !important; */
}

.btmMenu ul li {
  float: left !important;
}

.btmMenu ul li a {
  display: block !important;
  text-align: center !important;
  padding: 6px !important;
  text-decoration: none !important;
}

.btmMenu ul li a:hover {
  background-color: #111111 !important;
}

/******* MODAL FLOATING BUTTON TOOLS **************/

/******* MODAL ACTIVE TRADE **************/
.currentTime {
  font-size: 12px;
  white-space: nowrap;
  color: #8a8c8f;
  display: block;
  width: 100%;
  /* width: 200px; */
  float: left;
}
.currentActiveTrade {
  /* background-color: #333; */
  overflow: auto;
  white-space: nowrap;
  display: block;
  float: left;
  width: 100%;
}
.text-coret {
  text-decoration: line-through;
}
.currentActiveTrade span {
  display: inline-block;
  color: white;
  text-align: center;
  text-decoration: none;
  margin-right: 10px;
  border-radius: 5px;
  /* background: #2a2b30; */
  /* background-color: #333; */
  padding-left: 7px;
  padding-bottom: 2px;
  padding-top: 2px;
}
.currentActiveTrade span.countdown-item {
  height: 21px;
  line-height: 18px;
  background-color: #54565f;
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 7px;
}
#modalActiveTrade {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  margin-top: 59px;
  /* background: #000; */
  border-right: 1px solid #54565f;
  color: #F6F7F7;
  /* box-shadow: 0px 1px 14px 3px #222121; */
  width: 100%;
  /* margin-left: 151px; */
  height: auto;
  margin-top: 66px;
  border: none;
  /* border-radius: 15px; */
  padding-top: 6px;
  /* border: 1px solid #54565f; */
  min-height: 37px;
  margin-left: 81px;
  text-shadow: 2px 2px 5px #656565;
}

.modalActiveTrade-desktop {
  margin-left: 81px;
  padding-top: 20px;
}

#modalActiveTrade ul li {
  list-style: none;
  padding: 10px;
  font-weight: 300;
  padding-left: 15px;
}

#modalActiveTrade ul li a {
  color: #cecece !important;
  text-decoration: none;
}
#modalActiveTrade ul {
  padding-left: 0;
}

#modalActiveTrade.show {
  display: block;
}
/******* MODAL ACTIVE TRADE **************/

/* .text-grey {
  color: #868893 !important;
} */
.text-grey {
  /* color: #504e4e !important; */
  color: #b8b8b8 !important;
  text-decoration: none;
}
a.text-grey:hover {
  color: #fff !important;
  text-decoration: none;
}

#amount-area {
  border: 1px solid #383f48;
  border-radius: 8px;
  background: #000;
  padding-left: 10px;
  padding-top: 4px;
}
#amount-area #amount {
  padding-left: 0;
  border: none;
  background: none;
  padding-top: 5px;
  padding-right: 0 !important;
  /* background: #000 !important; */
}

#amount-area label {
  margin-top: -15px;
  position: fixed;
  background: #000;
  padding-left: 5px;
  padding-right: 5px;
}

#amount-area label small {
  color: #c9bfbf;
  font-size: 10px;
}

#time-area {
  border: 1px solid #383f48;
  border-radius: 8px;
  background: #000;
  padding-left: 10px;
  padding-top: 4px;
}
#time-area #time {
  padding-left: 0;
  border: none;
  background: none;
  padding-top: 5px;
  /* background: #000 !important; */
}

#time-area label {
  margin-top: -15px;
  position: fixed;
  background: #000;
  padding-left: 5px;
  padding-right: 5px;
}

#time-area label small {
  color: #c9bfbf;
  font-size: 10px;
}

input:focus, input.form-control:focus {

  outline:none !important;
  outline-width: 0 !important;
  box-shadow: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
}

.card-history {
  padding: 5px 10px;
  background: #27292d !important;
  border: none !important;
}

small, .small {
  font-size: 0.775em;
}

.btn-tools {
  border: 1px solid #4680f1;
  background: #000;
  color: #aeafb7;
  font-weight: 500;
  border-radius: 5px;
  padding: 5px 6px;
  margin-left: 8px;
  width: 36px;
  height: 36px;
}

.text-bold {
  font-weight: bold;
}

.bg-grey {
  background-color: #f4f4f6 !important;
}

.status_label {
  background: #333;
  padding: 2px 4px;
  border: 1px solid #666666;
  border-radius: 4px;
}

#labelSelectedPair {
  /* margin-top: 8px; */
  background: #272c33;
  padding: 5px;
  border-radius: 6px;
}

#labelSelectedPair a {
  background: none;
}

.settings-card {
  border:none !important;
}

.border-menu {
  border: 1px solid #54565f;
  margin: 0 18px;
  padding: 7px;
  padding-bottom: 8px;
  font-weight: 600;
  border-radius: 8px;
}

.top-left {
  position: absolute;
  left: 18px;
  top: 18px;
}

.basic-layout .links > a.btn {
  padding: 14px 35px;
}

.basic-layout .links > a {
  text-transform: none;
}

.add-asset{
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px;
  border:1px solid #272c33;
  background-color: #272c33;
  color: #f6f7f7 !important;
  margin-left: 10px;
  width: 44px !important;
}

.selected-asset{
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 5px;
  border:1px solid #272c33;
  background-color: #272c33;
  color: #f6f7f7 !important;
  text-align: center;
}
.selected-asset:hover{
  border:1px solid #54565f;
  background-color: #54565f;
}

.itemAsset {
  padding: 10px;
}

.mr-10 {
  margin-right: 10px !important;
}
.ml-10 {
  margin-left: 10px !important;
}

.itemAsset:hover {
  background: #555e68;
  border-radius: 5px;
}

.card-hist-finish {
  border: 1px solid #27292d !important;
}

.border-bottom-grey {
  border-bottom: 1px solid #42474e;
  padding-bottom: 14px;
  padding-left: 15px;
}

.card-hist-unfinish {
  border: 1px solid #ffc008 !important;
  background-color: #372d11 !important;
}

.currentActiveTrade a {
  /* background-color: #333;
  padding: 5px 15px;
  border-radius: 10px; */
}

.countdown-item {
  font-size: 10px;
  /* padding: 3px 7px; */
  /* margin-left: 5px; */
  /* display: none; */
  background: #000;
  padding: 2px 5px;
  border-radius: 3px;
}


.countdown-item a{
  margin-top:-0px;
  color: #F6F7F7;
  font-size: 11px;
}

.countdown-item a:hover{
  color: #F6F7F7;
}

.icon {
  max-width: 100% !important;
  max-height: 86px !important;
  /* width: 30px !important;
  height: 30px !important; */
  margin-bottom: 10px;
}

.h5, h5 {
  /* color: #fff !important; */
}

.bg-white{
  background: #fff !important;
}

.bg-white .main-layout{
  background: #f4f4f6 !important;
}

.header {
  /* padding: 3.5px 0px !important; */
  /* border-bottom: 1px solid #dddee4 !important; */
}

.header__menu {
  max-width: none !important;
  padding-left: 14px;
  padding-right: 14px;
}

.modal-sign__container {
  color: #000 !important;
}

.modal-sign__block-button {
  border-radius: 12px !important;
  padding: 14px 20px !important;
}

.modal-sign__input {
  color: #000 !important;
}

.modal-sign__checked-container input:checked ~ .modal-sign__checked-checkmark {
  background-color: #ddd !important;
}

.modal-sign__checked-checkmark {
  border : 1px solid #4d4d4d !important;
  border-radius: 8px !important;
}

.modal-sign__input-value:-webkit-autofill, .modal-sign__input-value:-webkit-autofill:focus, .modal-sign__input-value:-webkit-autofill:hover {
  /* -webkit-box-shadow: 0 0 0 1000px #f4f4f6 inset !important; */
  -webkit-text-fill-color: #fff !important;
  background-color: #131314 !important;
  border: 1px solid #1f1f20;
  color: #F6F7F7;
}

.modal-dark .modal-sign__input-value:-webkit-autofill, .modal-dark .modal-sign__input-value:-webkit-autofill:focus, .modal-dark .modal-sign__input-value:-webkit-autofill:hover {
  -webkit-box-shadow: none;
  -webkit-text-fill-color: none;
  background-color: none;
}

.btn-light {
  background-color: #dddee4 !important;
  font-weight: bold;
}

.header__logo img {
  /* max-width: 31px !important; */
  max-height: 32px !important;
}

.header__logo {
  color: #000;
  font: 24px/32px "NunitoSans Black",sans-serif;
}

.bg-none {
  background: none !important;
}

.bg-dark {
    background: #000 !important;
}

.navbar-light  {
  background: #fff !important;
  border-bottom: 1px solid #dddee4 !important;
}

.navbar-light div div ul li a {
  color: #000 !important;
}

.navbar-light div div ul li a small {
  color: #777 !important;
}

.navbar-light div div ul li a .nav-balance-amount {
  color: #000 !important;
}

.dropdown-light {
  background: #fff !important;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .1), 0px 12px 32px rgba(0, 0, 0, .15) !important;
}

.dropdown-light .dropdown-item{
  background: #ebebeb;
}

.dropdown-light .dropdown-item:hover{
  color: #999 !important;
}

.reload-light {
  border: 2px solid #51576c;
  border-radius: 7px;
  padding: 3px;
  margin-top: -3px;
  color: #51576c !important;
}

.reload-light:hover {
  border: 2px solid #999;
  color: #999 !important;
}

.navbar-brand {
  font: 24px/39px "NunitoSans Black",sans-serif;
  margin-top: 0;
}

.dropdown-light .dropdown-divider {
  opacity: 0;
}

.mw-100 {
  max-width: 100% !important;
}

#toggle {
  display: block;
}

.card-body.collapse {
  display: none;
}

.card-hist {
  box-shadow: 0 var(--offset-sm-xxl) 18px rgba(0, 0, 0, .03), 0 100px 80px rgba(0, 0, 0, .03) !important;
  border-radius: 4px !important;
}

.card-hist-title {
  padding-top: 10px;
}

.alert-secondary {
  --bs-alert-color: #000000;
  --bs-alert-bg: #b6b6b6;
  --bs-alert-border-color: none;
  border-radius: 4px !important;
  padding: 15px 10px;
  color: #fff !important;
  margin-bottom: 12px !important;
  background: #151516;
  border: 1px solid #383839;
  font-weight: 800 !important;
}

.card-hist .card-body {
  padding: 0 !important;
}

.bg-white .main-layout .header .header__menu {
  background: #fff !important;
}

.bg-white .main-layout .header {
  border-bottom: 1px solid #dddee4 !important;
}

.nav-pills .nav-link {
  border-radius: 10px;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  border-radius: 10px;
  color: #fff !important;
}

.alert-success {
  color: #0f5132 !important;
}

.alert-dismissible .btn-close {
  padding: 1rem 1rem;
}

.modal-sign__input-value {
  background-color: #f4f4f6;
}

.form-dark .modal-sign__input-value {
  /* background-color: #131314;
  border: 1px solid #383839; */
  background-color: #2c3244;
  border: 1px solid #1c2233 !important;
  color: #F6F7F7;
}

.form-dark .modal-sign__input-value:active {
  background-color: #131314 !important;
  /* border: 1px solid #383839 !important; */
  color: #fff !important;
}

.form-dark .modal-sign__input-value:focus {
  background-color: #131314 !important;
  border: 1px solid #1c2233 !important;
  color: #fff !important;
}

.form-dark .modal-sign__input-value .modal-sign__input-label {
  color: #504e4e !important;
}

.settings-card {
  text-align: center;
}

.settings-card .nav-pills {
  display: inline-block;
}

.settings-card .nav-pills li {
  float: left;
}

.tabcontent {
  margin-top: 0px;
  margin-bottom: 15px;
}

#depoStepOne h3 {
  margin-bottom: 20px;
}

#modalAssets div div table tr th {
  /* font: 13px/16px "NunitoSans Regular",sans-serif; */
  font-weight: bold;
}

#modalAssets table tr th {
  /* font: 13px/16px "NunitoSans Regular",sans-serif; */
  font-weight: bold;
}

.title_vip {
  background-color: #151723;
  padding: 2px 5px;
  text-decoration: underline;
}

.bg-white .main-layout header a {
  color: #000 !important;
}

.listTools {
  width: 100%;
  height: 100%;
  padding-bottom: 64px;
  overflow: auto;
}

.listTools li {
  height: 48px;
  border-radius: 5px;
}

.listTools li a{
  padding-top: 14px;
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 0px;
  color: #fff ;
}
.listTools li:hover{
  background-color: #3E3F45 ;
}

.listToolsActive {
  width: 100%;
  height: 100%;
  padding-bottom: 38px;
  overflow: auto;
}

.listToolsActive li {
  height: 48px;
  border-radius: 5px;
}

.listToolsActive li a{
  padding-top: 14px;
  padding-left: 14px;
  padding-right: 14px;
  padding-bottom: 0px;
  color: #fff ;
}
.listToolsActive li:hover{
  background-color: #3E3F45 ;
}

.right-section form {
  border: 1px solid #202020;
  padding: 10px;
  border-radius: 10px;
  padding-top: 0;
  height: 100%;
}

#time:focus {
  color: #fff !important;
}

#selectAmount {
  /* background-color: #F6F7F7;
  border-radius: 20px;
  box-shadow: 0 8px 16px rgba(0, 0, 0, .1), 0px 12px 32px rgba(0, 0, 0, .15); */
}

.item-amnt {
  border:2px solid rgb(255, 255, 255);
  /* background-color: #F6F7F7;
  border-radius: 5px;
  color: #000;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1); */
}
.item-amnt:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, .05), 0px 8px 24px rgba(0, 0, 0, .15);
}

.icon-copy {
  top: 3px;
  background: rgb(244, 244, 246);
  /* position: absolute; */
  margin-right: 3px !important;
  height: 48px;
  width: 48px;
  padding: 5px;
  border-radius: 8px;
  float: right;
  position: absolute;
  right: 0;
}

.item-amnt.active{
  border:2px solid rgb(124, 195, 250);
}

.profile-photo {
  width: 2.5rem;
  height: 2.5rem;
  margin: -.375rem 0;
}

.container {
  max-width: 1100px;
}

#dropdown-flags {
  background: #232737 !important;
  border: 1px solid #393f56;
  width: 182px !important;
  margin-top: 27px !important;
}

#dropdown-flags .dropdown-item {
  background: none;
  margin-bottom: 15px;
  background: #2c3244;
  border-radius: 15px;
  padding-left: 15px !important;
}

#dropdown-flags .dropdown-item:last-child {
  margin-bottom: 0;
}

#dropdown-flags .dropdown-item:hover {
  background: #393f56;
  /* border-radius: 15px; */
}

.theme-light ul li #dropdown-flags {
  background: #fff !important;
  border: 1px solid #F6F7F7;
  width: 182px !important;
  margin-top: 27px !important;
}

.theme-light ul li #dropdown-flags  .dropdown-item:hover {
  /* background: #b9b9ba; */
  border-radius: 10px;
}

.input-frame {
  background-color: #f4f4f6 !important;
  border: 2px solid #dddee4 !important;
  border-radius: 10px !important;
  height: 56px;
}

.input-frame .label {
  font-size: 11px;
  color: #82889b;
  padding-left: 15px;
}

.select2-container--default .select2-selection--single {
  background: none !important;
  border: 1px solid #f4f4f6;
  border-radius: 10px !important;
  /* border: none !important; */
  /* background-color: #f4f4f6 !important;
  border: 2px solid #dddee4 !important;
  border-radius: 10px !important; */
}

.select2-container .select2-selection--single {
  /* height: 56px !important; */
}

.select2-dropdown {
  border:2px solid #dddee4;
  border-radius: 10px !important;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
  border-radius: 5px;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  margin-top: 0;
  font-weight: 700;
  margin-left: 5px;
}

#icon_chat {
  position: absolute; /* Use absolute positioning */
  bottom: 20px; /* Distance from the bottom */
  right: 20px; /* Distance from the right */
  z-index: 1000; /* Ensure it appears above other elements */
  cursor: pointer; /* Change cursor to pointer for better UX */
}

.f12 {
  font-size: 12px !important;
}

@media only screen and (max-width: 1058px) { 
  #time {
    font-size: 12px !important;
  }

  .input-group-text {
    padding: 8px !important;
    line-height: .7 !important;
  }
}

.image-verif {
  /* display: none; */
  border-radius: 20px;
}

.cv {
  margin: 0;
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.modal-sign__input {
  max-width: none !important;
}

.header__menu {
  grid-template-columns: 160px 1fr !important;
}

.header__buttons a {
  font-weight: bold;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"] {
  -moz-appearance: textfield;
}

.tabcontent {
    margin-top: 50px;
}

.card-notif {
  background: #2e2f33 !important;
  border: none !important;
  margin-bottom: 10px !important;
}

.notif-title {
  font-size: 18px;
  font-weight: 800;
}

.title-area {
  border-bottom: 1px solid #3d3e40;padding-bottom: 12px;font-size: 20px;
}

#btn-buy svg {
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 3px;
}

#btn-sell svg {
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.3);
  padding: 3px;
}


@media only screen and (max-width: 991px) {

  .navbar-toggler-icon {
    margin-left: 10px !important;
  }

  .tabcontent {
    margin-top: 0px;
  }

  .header-label {
    margin-top: 0;
  }

  .header__buttons a {
    background: #098df8;
    border-radius: 5px;
    padding: 3px 12px;
    min-width: 80px;
    font-weight: bold;
    font-size: 16px;
    /* margin-right: 8px; */
  }

  .header__button {
    line-height: auto;
  }

  .area-profile {
    padding: 0 !important;
    margin-top: -65px;
  }

  .image-verif {
    /* display: block; */
    border-radius: 20px;
  }

  .cv {
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: none;
  }

  /*
  .main-layout {
    position: fixed !important;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
  }*/
  
  #dropdown-flags {
    /* margin-top: 20px !important; */
    position: fixed !important;
    margin-right: 10px !important;
    left: auto !important;
    width: 100% !important;
    left: 0px !important;
    margin-top: 0px !important;
    transform: none !important;
  }

  .profile-photo {
    width: 2.2rem;
    height: 2.2rem;
    margin: -.375rem 0;
    float: left;
  }

  #time {
    font-size: 14px !important;
  }
  
  #amount {
    font-size: 14px !important;
  }

  .dropdown-menu[data-bs-popper] {
    top: 100% !important;
  }

  .selected-asset {
    padding-left: 5px !important;
    padding-right: 5px !important;
    font-size: 11px;
    font-weight: bold;
  }

  .right-section form { 
    border :none;
    padding: 0;
  }

  .cc-1m2mf {
    /* margin-bottom: 200px !important; */
    /* margin-right: -70px !important; */
    /* display: none !important; */
  }

  body {
    /* position: absolute; */
    top: 0;
    left: 0;
    bottom: 0;
  }
  
  #app {
    /*
    top: 0;
    left: 0;
    bottom: 0;
    position: fixed;
    overflow-y: scroll;
    overflow-x: hidden;*/
    position: relative;
  }

  .main-layout {
    /* position: fixed; */
  }

  #layout-login {
    height: calc(100% - 48px);
  }

  #modalBigMenu {
    height: calc(100% - 48px) !important;
    margin-top: 48px !important;
  }

  .header {
    padding: 0px 0px !important;
    border-bottom: 1px solid #dddee4;
    height: 48px !important;
  }

  .form-common .modal-sign__input {
    margin: 0 auto 15px;
  }

  .settings-card .flex-column {
    flex-direction: unset !important;
  }

  #profitLabel {
    font-size: 16px;
    line-height: 20px !important; 
  }

  .header__menu {
    height: 47px !important;
  }

  .header__logo img {
    /* max-width: 30px !important; */
    max-height: 32px !important;
    margin-right: 7px;
  }

  .sign__title { 
    /* font: 16px/24px "NunitoSans Black",sans-serif !important; */
    font-weight: bold !important;
  }

  .tabcontent {
    margin-top: 10px;
  }

  #depoStepOne {
    margin-top: 15px;
  }

  .tabs a{
    padding: 11.5px 24px;
    font-size: 14px !important;
  }

  #modalTimeframe {
    width: 100%;
    height: calc(100% - 48px);
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    margin-top: 47px;
    display: none;
    background: #000;
    /* border-right: 1px solid #54565f; */
    color: #F6F7F7;
    box-shadow: 0px 1px 14px 3px #222121;
    margin-left: 0;
    border-radius: 0;
  }
  
  #modalAssets {
    width: 100%;
    height: calc(100% - 48px);
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    display: none;
    background: #141619;
    /* border-right: 1px solid #54565f; */
    color: #F6F7F7;
    /* box-shadow: 0px 1px 14px 3px #222121; */
    margin-left: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    margin-top: 48px;
  }

  #modalAssets ul li {
    /* border-top: 1px solid #293340; */
  }
  
  #modalCalendar {
    width: 100%;
    /* height: calc(100% - 48px); */
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    display: none;
    background: none;
    border-right: 1px solid #54565f;
    color: #F6F7F7;
    box-shadow: none;
    margin-left: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    margin-top: 48px;
    margin: 0;
    position: absolute;
    top: 50%;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    padding-left: 30px;
    padding-right: 30px;
  }

  .modal-light {
    background: #fff !important;
    border-right: 1px solid #dddee4 !important;
    box-shadow: -5px 9px 10px 2px #9d9d9d !important;
  }

  .modal-light ul li a {
    color: #000 !important;
  }
  
  .modal-light ul li {
    border-bottom: 1px solid #dddee4 !important;
  }

  .card-hist-finish {
    color: #fff !important;
  }
  
  #notSupportedModal {
    width: 100%;
    height: calc(100% - 48px);
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    background: #2a2b30;
    border-right: 1px solid #54565f;
    color: #F6F7F7;
    box-shadow: 0px 1px 14px 3px #222121;
    margin-left: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
    margin-top: 48px;
  }
  
  #notSupportedModal div {
    display: flex;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    padding: 50px;
    text-align: center;
  }

  #modalCandleType {
    width: 100%;
    height: calc(100% - 48px);
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    margin-top: 47px;
    display: none;
    background: #000;
    border-right: 1px solid #000;
    color: #F6F7F7;
    box-shadow: 0px 1px 14px 3px #222121;
    margin-left: 0;
    border-radius: 0;
  }
  
  #modalSelectPrice {
    width: 160px;
    height: auto;
    position: fixed;
    z-index: 3;
    bottom: 0;
    left: 0;
    top: auto;
    right: auto;
    margin-left: 14px;
    display: none;
    background: #3c3d44;
    border: none;
    color: #F6F7F7;
    box-shadow: 0px 1px 14px 3px #222121;
    border-radius: 15px;
    margin-bottom: 163px;
    margin-right: unset;
  }
  
  #modalSelectTimeframe {
    width: 100px;
    height: auto;
    position: fixed;
    z-index: 3;
    bottom: 0;
    /* left: 0; */
    top: auto;
    right: auto;
    /* margin-top: 48px; */
    display: none;
    background: #141619;
    border: none;
    color: #F6F7F7;
    /* box-shadow: 0px 1px 14px 3px #222121; */
    margin-left: 264px;
    border-radius: 15px;
    margin-bottom: 163px;
  }

  .myModal {
    position: fixed;
    height: 100%;
    z-index: 4;
    width: 100%;
  }
  
  .myModal .backdrop {
    position: fixed;
    height: 100%;
    background: #2a2b30;
    bottom: 0;
  }

  .navbar {
    padding-top: 0;
    height: 48px !important;
  }

  .navbar .container{
    padding: 0 !important;
  }

  .navbar > .container, .navbar > .container-fluid, .navbar > .container-sm, .navbar > .container-md, .navbar > .container-lg, .navbar > .container-xl, .navbar > .container-xxl {
    display: unset !important;
  }

  .dropdown-item { 
    padding: 10px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .dropdown-divider {
    opacity: 0;
    margin: 0;
  }

  .dropdown-menu.show {
    display: block;
    background: #000;
    margin-top: 0px;
    /* border: 1px solid #54565f; */
    width: 100%;
    border-left: none;
    border-right: none;
    /* left: 0 !important; */
    margin-top: 0px !important;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 10px;
    position: fixed;
    width: 100%;
    height: calc(100% - 48px);
    left: 0 !important;
    top: 48px !important;
  }

  #khonten {
    padding-top: 48px;
    /* background: #F6F7F7; */
    height: auto;
  }

  .tools-mobile {
    background: #000;
    position: fixed;
    z-index: 3;
    width: 100%;
    color: #F6F7F7;
    padding: 0px 10px;
    /* margin: 10px; */
    border-radius: 10px;
    /* box-shadow: inset 0px 20px 20px 0px #414141; */
    float: right;
    right: 0;
    margin-top: 5px;
  }

  .left-section {
    display: none;
  }
  
  .right-section {
    height: 220px;
    background: #000;
    border-left: none;
    z-index: 3;
    bottom: 0;
    margin-bottom: 0;
    vertical-align: bottom;
    position: fixed !important;
  }
  .form-trade-mobile {
    background: #000;
    /* border: 1px solid #54565f; */
    border-radius: 15px;
    /* border-top-left-radius: 15px; */
    margin: 0;
  }
  .middle-section {
    height: calc(100% - 228px); /****** 180 bottom + 48 header ****/
  }
  .container {
    width: 100% !important;
  }
  #container {
    width: 100% !important;
    padding-top: 70px;
    /* height: calc(100% - 200px) !important; */
  }

  .klinecharts-pro-period-bar {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
  }

  .klinecharts-pro-period-bar .menu-container {
    padding-left: 11.5px;
    padding-right: 11.5px;
  }

  .nav-item .dropdown-menu { 
    width: 100%;
    margin-bottom: 10px;
    margin-top: 15px;
  }

  .nav-balance span {
    font-weight: bold !important;
  }

  .tabs {
    overflow: auto;
    white-space: nowrap;
    height: 48px;
    padding-top: 0px;
  }

  .mobile-frame {
    margin-top: 0 !important;
  }

  .navbar-toggler {
    border:none;
  }

  #modalTradeHistory {
    /* box-shadow: 0px 1px 14px 3px #222121; */
    box-shadow: none;
    height: calc(100% - 48px);
    margin-top: 48px;
    border-radius: 0px !important;
  }
  
  #modalToptrader {
    /* box-shadow: 0px 1px 14px 3px #222121; */
    height: calc(100% - 48px);
    margin-top: 48px;
    border-radius: 0px !important;
  }
  
  #modalNotification {
    box-shadow: 0px 1px 14px 3px #222121;
    height: calc(100% - 48px);
    margin-top: 48px;
    width: 100%;
  }

  #modalNotification div {
    border-bottom: none !important;
    
  }

  .title-area {
    padding-bottom: 0 !important;
  }

  .card-notif {
    margin-bottom: 13px !important;
  }
  
  #modalTradeTools {
    box-shadow: 0px 1px 14px 3px #222121;
    height: calc(100% - 48px);
    margin-top: 48px;
  }
  
  #modalDrawing {
    box-shadow: 0px 1px 14px 3px #222121;
    height: calc(100% - 48px);
    margin-top: 48px;
  }

  .footer {
    display: none !important;
  }

  #modalActiveTrade {
      position: fixed;
      z-index: 2;
      top: 0;
      left: 0;
      /* background: #1e1f22; */
      background: #000;
      border-right: 1px solid #54565f;
      color: #F6F7F7;
      /* box-shadow: 0px 1px 14px 3px #222121; */
      /* width: 100%; */
      /* margin-left: 151px; */
      height: auto;
      margin-top: 48px;
      border: none;
      /* border-radius: 15px; */
      padding-top: 11px;
      /* border: 1px solid #54565f; */
      min-height: 37px;
      margin-left: 0;
  }

  .currentActiveTrade {
    margin-top: 4px;
  }

  .currentActiveTrade span {
    background-color:rgba(47, 47, 47, 1);
    border-radius: 11px;
  }

  .currentActiveTrade span.countdown-item {
    border-radius: 8px;
    margin-right: 5px;
    height: 21px;
  }

  .currentTime {
    font-size: 12px;
    white-space: nowrap;
    color: #8a8c8f;
    display: block;
    width: 100%;
    float: left;
    background: #000;
    padding: 12px;
    border-radius: 10px;
    margin-top: 30px;
    padding-bottom: 0px;
    padding-left: 0px;
  }

  .btn-tools {
    /* border:none; */
  }

  ul li a {
    font-size: 16px;
    /* color: #6c6c6c !important; */
    /* color: #b9b1b1 !important; */
  }

  html {
    /* background: #fff !important; */
  }

  .tabcontent {
    padding-left: 25px;
    padding-right: 25px;
  }

  .nav-balance {
    background: none !important;
  }

  .btn-sm-depo {
    height: 32px !important;
  }

  .selected-asset {
    /* border:none !important; */
    border-bottom: 3px solid #454958 !important;
  }

}

@media only screen and (min-width: 568px) { 
  .middle-section {
    height: calc(100% - 198px);
  }
}

@media only screen and (min-width: 992px) { 
  .middle-section {
    height: 100%;
  }
  .navbar-toggler-icon {
    width: 2.5em;
    height: 2.5em;
    margin-top: 7px;
    margin-right: 13px;
  }
  .navbar-nav.ms-auto.nav-right {
    padding-top: 2px;
  }
  #dropdown-flags {
    background: #232737 !important;
    border: 1px solid #393f56;
    width: 182px !important;
    margin-top: 27px !important;
    right: 0 !important;
    left: auto;
    margin-top: 5px !important;
    border-radius: 20px !important;
  }
  #modalBigMenu {
    width: 300px;
  }
  /* .navbar-expand-lg .navbar-nav .dropdown-menu {
    position: fixed;
    right: 10px !important;
    float: right;
    left: auto;
    margin-top: 75px;
    border: 1px solid #1f1d1d;
  } */

  .navbar-expand-lg .navbar-nav .dropdown-menu {
    border-radius: 15px;
  }

  .currentActiveTrade {
    margin-top: 7px !important;
  }
}

@media only screen and (max-width: 401px) { 
  body {
    font-size: 12px;
  }
  .menu-mobile li a {
    padding: 5px;
  }
  .logo-mobile {
    margin-left: 0 !important;
  }
  .nav-balance span {
    font-size: 12px !important;
  }
  .tabs a {
    font-size: 12px !important;
  }
  .btn-tools {
    width: 30px;
    height: 30px;
    padding: 0;
  }
  #labelSelectedPair {
    padding: 2px;
  }
}

@media only screen and (max-width: 324px) { 
  body {
    font-size: 10px;
  }
  .menu-mobile li a {
    padding: 5px;
  }
  .logo-mobile {
    margin-left: 0 !important;
  }
  .nav-balance span {
    font-size: 10px !important;
  }
  .tabs a {
    font-size: 10px !important;
  }
  .btn-tools {
    width: 25px;
    height: 25px;
    padding: 0;
  }
  #labelSelectedPair {
    padding: 2px;
  }
  #amount-area #amount {
    font-size: 10px !important;
  }
  #time-area #time {
    font-size: 10px !important;
  }
  .input-group-amount {
    padding: 0px !important;
  }
  #amount-area {
    padding-left: 0px !important;
    padding-right: 5px !important;
    padding-bottom: 2px;
  }
  #time-area {
    padding-left: 0px !important;
    padding-right: 5px !important;
    padding-bottom: 2px;
  }
}

@media only screen and (max-width: 275px) { 
  body {
    font-size: 10px;
  }
  .menu-mobile li a {
    padding: 2px !important;
  }
  .logo-mobile {
    margin-left: 0 !important;
  }
  .nav-balance span {
    font-size: 10px !important;
  }
  .tabs a {
    font-size: 10px !important;
  }
  .btn-tools {
    width: 25px;
    height: 25px;
    padding: 0;
  }
  #labelSelectedPair {
    padding: 2px;
  }
  #btn-buy {
    padding: 2px 10px !important;
    font-size: 12px;
  }
  #btn-sell {
    padding: 2px 10px !important;
    font-size: 12px;
  }
  #btn-buy svg {
    margin-top: 3px;
    max-height: 15px;
  }
  #btn-sell svg {
    margin-top: 3px;
    max-height: 15px;
  }
  .profile-photo {
    width: 1.5rem;
    height: 1.5rem;
    margin: -.375rem 0;
  }
  .right-section {
    height: auto;
    font-size: 11px !important;
  }
  a {
    font-size: 11px !important;
  }
  .btn-trade-hist {
    font-size: 10px !important;
  }
  .mb-1 {
    margin-bottom: 0px !important;
  }
  #profitLabel {
    font-size: 12px !important;
  }
  .input-group-text {
    padding: 6px !important;
    line-height: .4 !important;
  }
  #modalSelectTimeframe ul li {
    padding: 2px !important;
  }
  #modalSelectTimeframe ul li a {
    font-size: 11px !important;
  }
  #modalSelectPrice {
    width: 160px;
    height: auto;
    position: fixed;
    z-index: 3;
    bottom: 0;
    left: 0;
    top: auto;
    right: auto;
    margin-left: 12px;
    display: none;
    background: #3c3d44;
    border: none;
    color: #F6F7F7;
    box-shadow: 0px 1px 14px 3px #222121;
    border-radius: 15px;
    margin-bottom: 110px;
    margin-right: unset;
  }
  #modalSelectTimeframe {
    width: 100px;
    height: auto;
    position: fixed;
    z-index: 3;
    bottom: 0;
    /* left: 0; */
    top: auto;
    right: auto;
    /* margin-top: 48px; */
    display: none;
    background: #141619;
    border: none;
    color: #F6F7F7;
    /* box-shadow: 0px 1px 14px 3px #222121; */
    margin-left: 190px;
    border-radius: 15px;
    margin-bottom: 110px;
  }

}

.navbar {
  background: #000;
  border-bottom: 1px solid #1f1d1d;
  height: 64px;
}

.klinecharts-pro-checkbox {
  justify-content: left;
}

.nav-balance {
  line-height: 1;
  color: #f6f7f7 !important;
  /* background: #272c33; */
  border-radius: 5px;
}

.drpdwn-profile a{
  color: #f6f7f7 !important;
  font-weight: bold;
}

.nav-balance small {
  font-size: 11px;
  /* font-weight: 300; */
  color: #b8b8b8;
}

.nav-balance span {
  font-size: 14px;
  /* font-weight: 300; */
  color: #f6f7f7;
}

.btn-sm-depo {
  /* padding: 11px; */
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 10px;
  font-weight: bold;
  /* height: 48px; */
  /* margin-top: 8px; */
  /* padding-top: 0; */
  /* padding-top: 5px; */
  font-size: 17px;
}

.btn-lg-depo {
  padding: 15px 20px;
  border-radius: 15px;
  font-weight: bold;
  width: 100%;
  /* margin-top: 9px; */
}

.m-0 {
  margin: 0 !important;
}



.nav-link {
  color: #000;
  /* color: #f6f7f7; */
  /* font-weight: 300; */
  width: 100%;
}

.btn {
  border-radius: 5px;
}

.form-control {
  background-color: #464649;
  background-clip: padding-box;
  border: 1px solid #6a6b6c;
  border-radius: 7px !important;
  color: #F6F7F7;
  padding-bottom: 8px;
  font-weight: 300;
}

.alert {
  font-weight: 300;
  border-radius: 5px;
}

.bok {
  position: relative;
  padding-left: 0;
  background: #2d2d2d;
  color: #ccc;
  border: 2px solid #2d2d2d;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
}

.text-dark {
  color: #000 !important;
}

.bok p {
  width: 100%;
  padding: 11px;
  /* font-weight: 200; */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px !important;
}

.bok.active {
  /* background-color: #389067; */
  border: 2px solid #8cccae;
  color: #fff !important;
}

.card {
  border-radius: 10px;
  background: #151516;
  border: 2px solid #383839;
  /* background: #F6F7F7; */
  /* border: 1px solid #54565f; */
  box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
  color: #F6F7F7;
}

.card-header {
  background: none;
  /* background: #464649; */
  font-weight: 500;
  font-size: 20px;
  border: none;
  border-top-left-radius: 9px !important;
  border-top-right-radius: 9px !important;
}

.text-success-new {
  color: #4bf5a5 !important;
}

.btn-warning {
  color: #000 !important;
}

#calendar {
  width: 100%;
}

.xcalendar {
  background: #f43f5f;
    padding: 0px 5px;
    border-radius: 5px;
    font-weight: bold;
    color:#fff !important;
    margin-bottom: 3px;
    border:1px solid #000;
}

.bg-green.text-bold {
  background: #1a8754 !important;
  color: #fff !important;
  font-weight: bold !important;
}

.bg-red.text-bold {
  background: #f43f5f !important;
  color: #fff !important;
  font-weight: bold !important;
}

.vanilla-calendar-day {
  padding-left: 2px;
  padding-right: 2px;
}

.left-section-desktop {
  width: 81px;
  color:#F6F7F7;
  height: 100%;
  float: left;
  padding: 10px;
  padding-right: 0px;
}

.left-section-mobile {
  width: 81px;
  color:#F6F7F7;
  height: 100%;
  float: left;
}

#js-support-container {
  margin: 0 auto;
}

.about_us__help-block {
  max-width: 530px !important;
}

.contacts__textarea {
  margin-top: 0 !important;
}

.nav-link.selected-asset {
  /* margin-top: 5px; */
}

.navbar-light #modalBigMenu {
  background: #F6F7F7;
  border-right: 1px solid #dddee4;
  box-shadow: -5px 13px 14px 3px #a4a4a4;
}

.navbar-light #modalBigMenu ul li {
  border-bottom: 1px solid #dddee4;
}

.navbar-light #modalBigMenu ul li a {
  color: #000;
}

.itemAsset table tr td span {
  cursor: default;
}

.btn-success {
  background-color: #0fb85c;
  border:none;
}

.btn-danger {
  background-color: #fe6352;
  border:none;
}

#btn-sell {
  text-align: left !important;
  padding: 14px 20px;
}

#btn-buy {
  text-align: left !important;
  padding: 14px 20px;
}

#profitLabel {
  color:#F6F7F7;
}

.btn-primary {
  background: #497fe9;
  border:none;
}

.btn-primary:hover {
  background: #5783d8;
}

.input-group-amount {
  /* border: 1px solid #000; */
  border-radius: 5px;
  /* padding: 7px; */
  padding-right: 12px;
  padding-bottom: 3px;
}

.input-group-text {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 0.8rem;
  font-weight: bold;
  line-height: 1.5;
  color: #F6F7F7;
  text-align: center;
  white-space: nowrap;
  background-color: #272c33;
  border: none;
  border-radius: 50%;
  margin: 5px;
  margin-right: 0;
}

.input-group-text-light {
  border-radius: 0px;
  background-color: #dee3e9;
  border: 1px solid #ddd;
  border-radius: 5px;
  color: #000;
  font-weight: bold;
}

.input-group .form-control-light {
  background-color: #F6F7F7;
  border: none;
  color: #000;
}

.input-group-append {
  margin-left: 0;
}

#amount {
  text-align: center;
  background: none !important;
  border: none !important;
  font-weight: bold;
}

#time {
  text-align: center;
  background: none !important;
  border: none !important;
  font-weight: bold;
  padding-left: 0;
  padding-right: 0;
}

input[type="time"]::-webkit-calendar-picker-indicator { display: none; }

.cursor-pointer {
  cursor: pointer;
}

.bd-grey {
  border : 1px solid #1e1d1d;
}

.text-success {
  color: #00ff00 !important;
}

.text-danger {
  color: #ff0000 !important;
}

.text-small {
  font-size: 13px;
}

ol.histTrans {
  width: 100%;
}

.histTrans li {
  display: flex;
  width: 100%;
  padding-bottom: 0 !important;
}

.histTrans_price {
  flex-grow: 1;
  text-align: right;
  display: flex;
}

.histTrans_price::before {
  content:'';
  background: repeating-linear-gradient(to right, currentColor, currentColor 1px, transparent 2px, transparent 4px);
  height: 1px;
  flex-grow: 1;
  display: inline-block;
  margin-top: 1em;
}

small {
  font-size: 82% !important;
}

.card-history:hover {
  background-color: #545659 !important;
}

.dropdown-item {
  background: #27292d;
  border-radius: 15px;
  font-weight: bold;
}

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

.dropdown-light .dropdown-item:hover {
  background: #f1f0f0;
  color: #000 !important;
}

.dropdown-item svg {
  margin-right: 10px;
}

.profile-photo-big {
  width: 5rem;
  height: 5rem;
}

.dropdown-light .text-white {
  color: #000;
}

.dropdown-dark center .text-black {
  color: #fff !important;
}

.dropdown-item-no-bg {
  background: none !important;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 20px;
  border: 1px solid #888;
  width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.userStatus {
  padding: 2px 5px;
  border-radius: 5px;
}

.coverStatus {
  padding-top: 10px;
}

.no-shadow {
  box-shadow :none;
}

.card-currency {
  border: 1px solid #1f1f20;
  background: #131314;
}

.card-currency .card-body {
  padding: 13px !important;
}

.card-currency.active {
  border: 1px solid #4a8ded;
  background: #497fe9;
}

.col-6 .modal-sign__input-label {
  left : 20px;
}

.alert-gray {
  background: #272c33;
}

.alert {
  padding: 10px 15px;
}

p {
  font-size: 12px !important;
}

.f13 {
  font-size: 13px !important;
}

.modal-sign__input-value.grey {
  background: #272c33;
  border: 2px solid #515861 !important;
  font-size: 14px;
}
.modal-sign__input-value.grey:active {
  background: #272c33 !important;
  border: 2px solid #515861 !important;
}
.modal-sign__input-value.grey:focus {
  background: #272c33 !important;
  border: 2px solid #515861 !important;
}
.modal-sign__input-value.grey:focus-visible {
  background: #272c33 !important;
  border: 2px solid #515861 !important;
}
.modal-sign__input-value.grey:-webkit-autofill,
.modal-sign__input-value.grey:-webkit-autofill:focus,
.modal-sign__input-value.grey:-webkit-autofill:hover {
  background: #272c33 !important;
  border: 2px solid #515861 !important;
}

#modalToptrader {
  /* display: flex;  */
  flex-direction: column; /* Mengatur arah flex menjadi kolom */
}

#scrollAble {
  /* flex-grow: 1; */
  overflow-y: auto; /* Menambahkan scroll vertikal jika konten melebihi tinggi */
  overflow-x: hidden; /* Menyembunyikan scroll horizontal jika tidak diperlukan */
}

.tinyBox {
  width: 20px;
  height: 20px;
  float: left;
  border-radius: 5px;
  margin-right: 10px;
  text-align: center;
}

.tinyBox.box-1 {
  background-color: #ddc340 !important;
  color: #000;
}

.tinyBox.box-2 {
  background-color: #e0e0e3 !important;
  color: #000;
}

.tinyBox.box-3 {
  background-color: #d19447 !important;
  color: #000;
}

.header-label {
  background: #272c33;
  border-radius: 5px;
  padding: 5px 10px !important;
  margin-bottom: 15px !important;
  margin-top: 15px;
}

.title-area {
  border-bottom: none !important;
}

.title-area div svg {
  margin-right: 10px;
}

.title-area div a svg {
  margin-right: 0px;
}

#google-login-btn div div div {
  height: 52px !important;
  border-radius: 10px !important;
}

#google-login-btn div div div div div svg {
  margin-top: 15px !important;
}

.scrollable-area {
  flex-wrap: nowrap;
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch; /* Untuk smooth scrolling di iOS */
}

.scrollable-area::-webkit-scrollbar {
  display: none; /* Sembunyikan scrollbar */
}

.nav-right {
  width: auto;
}

.itm-slctd {
  width: 200px !important;
}

.badge-success {
  background: #3e7e5c;
}