:root,
[data-theme=dark] {
    --color-primary: var(--color-white);
    --color-primary-low: var(--color-gray-400);
    --color-bg: var(--color-black);
    --color-bg-low: var(--color-alpha-gray-30);
    --color-bg-low-static: var(--color-alpha-gray-30-static);
    --color-border: var(--color-gray-700);
    --card-border-color: transparent;
    --topnav-bg-color: transparent;
    --color-accent: var(--color-lime-500);
    --color-white: #ffffff;
    --color-gray-100: #f7f9fc;
    --color-gray-200: #EDF0F6;
    --color-gray-300: #D8DEEB;
    --color-gray-400: #A0A4AE;
    --color-gray-500: #7E7E8C;
    --color-gray-600: #403D4F;
    --color-gray-700: #2E2A3B;
    --color-gray-800: #19142C;
    --color-gray-900: #110B24;
    --color-black: #08021D;
    --color-purple-blue-300: #8473FF;
    --color-purple-blue-400: #5D49F2;
    --color-purple-blue-500: #3C22F3;
    --color-purple-blue-800: #1D005E;
    --color-purple-blue-900: #13003F;
    --color-lime-500: #C2FF52;
    --color-purple-500: #984FF5;
    --color-orange-100: #FFF2EB;
    --color-orange-200: #FFCC80;
    --color-orange-500: #FF7B39;
    --color-orange-700: #C2410C;
    --color-orange-800: #462024;
    --color-orange-900: #2D1421;
    --color-cyan-100: #EAFBFF;
    --color-cyan-500: #2BD6FC;
    --color-cyan-600: #20A1BD;
    --color-cyan-900: #00273A;
    --color-pink-500: #FF52CE;
    --color-yellow-500: #FADE3F;
    --color-blue-500: #177AFF;
    --color-green-100: var(--color-dark-green-100);
    --color-green-200: var(--color-dark-green-200);
    --color-green-500: var(--color-dark-green-500);
    --color-green-700: var(--color-dark-green-700);
    --color-green-800: var(--color-dark-green-800);
    --color-green-900: var(--color-dark-green-900);
    --color-dark-green-100: #EDFAF5;
    --color-dark-green-200: #C7F2E4;
    --color-dark-green-500: #14F5B1;
    --color-dark-green-700: #009487;
    --color-dark-green-800: #0B3B45;
    --color-dark-green-900: #0A1D30;
    --color-light-green-100: #EBFAF5;
    --color-light-green-200: #CCF2E7;
    --color-light-green-500: #00BE85;
    --color-light-green-700: #058868;
    --color-light-green-800: #0A524B;
    --color-light-green-900: #0E2F37;
    --color-red-100: #FFF5F5;
    --color-red-200: #FFE0E8;
    --color-red-500: #FF4D6A;
    --color-red-700: #F2304A;
    --color-red-800: #451635;
    --color-red-900: #2B0C2B;
    --color-alpha-gray-10: rgba(64, 61, 79, .1);
    --color-alpha-gray-20: rgba(64, 61, 79, .2);
    --color-alpha-gray-30: rgba(64, 61, 79, .3);
    --color-alpha-gray-30-static: #211c34;
    --color-alpha-gray-50: rgba(64, 61, 79, .5);
    --color-alpha-gray-80: rgba(64, 61, 79, .8);
    --color-alpha-black-50: rgba(8, 2, 29, .5);
    --color-alpha-black-80: rgba(8, 2, 29, .8);
    --color-alpha-black-90: rgba(8, 2, 29, .9);
    --color-alpha-lime-30: rgba(194, 255, 82, .3);
    --color-alpha-green-30: rgba(20, 245, 177, .3);
    --color-alpha-red-30: rgba(255, 77, 106, .3);
    --color-light-alpha-gray-15: rgba(216, 222, 235, .15);
    --color-light-alpha-gray-35: rgba(216, 222, 235, .35);
    --color-light-alpha-gray-35-static: #f2f4f7;
    --color-light-alpha-gray-50: rgba(216, 222, 235, .5);
    --color-light-alpha-gray-80: rgba(216, 222, 235, .8);
    --gradient-box: var(--gradient-box-dark);
    --gradient-box-dark: linear-gradient(180deg, rgba(25, 20, 44, .7) 0%, rgba(25, 20, 44, .3) 100%);
    --gradient-box-light: linear-gradient(180deg, white 0%, white 100%);
    --gradient-modal: var(--gradient-modal-dark);
    --gradient-modal-dark: linear-gradient(180deg, #19142C 0%, #110B24 100%);
    --gradient-modal-light: linear-gradient(180deg, white 0%, #EDF0F6 100%);
    --gradient-box-filled: linear-gradient(to top, var(--color-gray-800) 100%, var(--color-gray-900) 100%);
    --gradient-tabbar: linear-gradient(to top, var(--color-gray-800) 70%, var(--color-black) 100%);
    --quick-trade-gradient: var(--quick-trade-gradient-dark);
    --quick-trade-gradient-dark: linear-gradient(180deg, rgba(64, 61, 79, .32) 0%, rgba(64, 61, 79, .08) 100%);
    --quick-trade-gradient-light: linear-gradient(180deg, rgba(216, 222, 235, .3) 0%, rgba(216, 222, 235, .14) 100%);
    --dialog-box-shadow: 0 0 40px 0 var(--color-gray-700);
    --shadow-ellipsis-bg-color: var(--color-purple-blue-300);
    --input-bg-color: var(--color-alpha-gray-30);
    --input-hover-bg-color: var(--color-alpha-gray-80);
    --input-disabled-bg-color: var(--color-alpha-gray-80);
    --select-bg-color: var(--color-alpha-gray-30);
    --select-hover-bg-color: var(--color-alpha-gray-80);
    --select-disabled-bg-color: var(--color-alpha-gray-80);
    --select-arrow: var(--select-arrow-dark);
    --select-arrow-disabled: var(--select-arrow-dark-disabled);
    --select-arrow-dark: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    --select-arrow-dark-disabled: url("data:image/svg+xml;utf8,<svg fill='lightgray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    --select-arrow-light: url("data:image/svg+xml;utf8,<svg fill='19142C' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    --select-arrow-light-disabled: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    --link-color: var(--color-purple-blue-300);
    --dropdown-bg-color: var(--color-gray-700);
    --dropdown-box-shadow: 8px 8px 6px 0px rgba(8, 2, 29, .25);
    --color-chart-line: var(--color-cyan-500);
    --color-chart-grid-line: var(--color-gray-700);
    --modal-backdrop-bg-color: var(-color-alpha-black-90);
    --table-overlay: var(--table-overlay-dark);
    --table-overlay-dark: linear-gradient(to top, var(--color-black) 0%, rgba(255, 255, 255, 0) 100%);
    --table-overlay-light: linear-gradient(to top, var(--color-white) 0%, rgba(255, 255, 255, 0) 100%);
    --scrollbar-color: var(--color-gray-500);
    --datepicker-range-selection-color: var(--color-gray-600);
    --datepicker-range-borders-color: var(--color-purple-blue-500);
    --news-pg-icon-bg-color: var(--color-gray-600);
    --btn-accent-bg-color: var(--color-lime-500);
    --btn-accent-font-color: var(--color-black);
    --btn-accent-hover-bg-color: color-mix(in srgb, var(--color-lime-500) 90%, transparent);
    --btn-accent-hover-font-color: var(--color-black);
    --btn-accent-border-color: var(--color-purple-blue-300);
    --btn-accent-shadow-color: var(--color-alpha-gray-50);
    --btn-default-bg-color: var(--color-gray-800);
    --btn-default-font-color: var(--color-white);
    --btn-default-hover-bg-color: color-mix(in srgb, var(--color-gray-800) 90%, transparent);
    --btn-default-hover-font-color: var(--color-white);
    --btn-default-border-color: var(--color-purple-blue-300);
    --btn-default-shadow-color: var(--color-alpha-gray-50);
    --btn-positive-bg-color: var(--color-green-500);
    --btn-positive-font-color: var(--color-black);
    --btn-positive-hover-bg-color: color-mix(in srgb, var(--color-green-500) 90%, transparent);
    --btn-positive-hover-font-color: var(--color-black);
    --btn-positive-border-color: var(--color-purple-blue-300);
    --btn-positive-shadow-color: var(--color-alpha-gray-50);
    --btn-negative-bg-color: var(--color-red-500);
    --btn-negative-font-color: var(--color-black);
    --btn-negative-hover-bg-color: color-mix(in srgb, var(--color-red-500) 90%, transparent);
    --btn-negative-hover-font-color: var(--color-black);
    --btn-negative-border-color: var(--color-purple-blue-300);
    --btn-negative-shadow-color: var(--color-alpha-gray-50);
    --buy-btn-bg-color: var(--color-green-500);
    --buy-btn-font-color: var(--color-black);
    --sell-btn-bg-color: var(--color-red-500);
    --sell-btn-font-color: var(--color-black);
    --toggle-default-bg-color: var(--color-alpha-gray-80);
    --toggle-selected-bg-color: var(--color-purple-blue-500);
    --toggle-hovered-bg-color: var(--color-purple-blue-300);
    --rs-default-bg-color: var(--color-gray-600);
    --rs-active-bg-color: var(--color-purple-blue-500);
    --rs-tooltip-bg-color: var(--color-purple-blue-500);
    --rs-tooltip-font-color: var(--color-white);
    --notification-info-bg-color: var(--color-cyan-900);
    --notification-info-font-color: var(--color-cyan-500);
    --notification-success-bg-color: var(--color-green-900);
    --notification-success-font-color: var(--color-green-500);
    --notification-warn-bg-color: var(--color-orange-900);
    --notification-warn-font-color: var(--color-orange-500);
    --notification-error-bg-color: var(--color-red-900);
    --notification-error-font-color: var(--color-red-500)
}

[data-theme=light] {
    --color-primary: var(--color-gray-800);
    --color-primary-low: var(--color-gray-500);
    --color-bg: var(--color-gray-100);
    --color-bg-low: var(--color-light-alpha-gray-35);
    --color-bg-low-static: var(--color-light-alpha-gray-35-static);
    --color-border: var(--color-gray-200);
    --card-border-color: var(--color-gray-200);
    --topnav-bg-color: var(--color-white);
    --color-accent: var(--color-purple-blue-500);
    --color-white: #ffffff;
    --color-gray-100: #f7f9fc;
    --color-gray-200: #EDF0F6;
    --color-gray-300: #D8DEEB;
    --color-gray-400: #A0A4AE;
    --color-gray-500: #7E7E8C;
    --color-gray-600: #403D4F;
    --color-gray-700: #2E2A3B;
    --color-gray-800: #19142C;
    --color-gray-900: #110B24;
    --color-black: #08021D;
    --color-purple-blue-300: #8473FF;
    --color-purple-blue-400: #5D49F2;
    --color-purple-blue-500: #3C22F3;
    --color-purple-blue-800: #1D005E;
    --color-purple-blue-900: #13003F;
    --color-lime-500: #C2FF52;
    --color-purple-500: #984FF5;
    --color-orange-100: #FFF2EB;
    --color-orange-200: #FFCC80;
    --color-orange-500: #FF7B39;
    --color-orange-700: #C2410C;
    --color-orange-800: #462024;
    --color-orange-900: #2D1421;
    --color-cyan-100: #EAFBFF;
    --color-cyan-500: #2BD6FC;
    --color-cyan-600: #20A1BD;
    --color-cyan-900: #00273A;
    --color-pink-500: #FF52CE;
    --color-yellow-500: #FADE3F;
    --color-blue-500: #177AFF;
    --color-green-100: var(--color-light-green-100);
    --color-green-200: var(--color-light-green-200);
    --color-green-500: var(--color-light-green-500);
    --color-green-700: var(--color-light-green-700);
    --color-green-800: var(--color-light-green-800);
    --color-green-900: var(--color-light-green-900);
    --color-dark-green-100: #EDFAF5;
    --color-dark-green-200: #C7F2E4;
    --color-dark-green-500: #14F5B1;
    --color-dark-green-700: #009487;
    --color-dark-green-800: #0B3B45;
    --color-dark-green-900: #0A1D30;
    --color-light-green-100: #EBFAF5;
    --color-light-green-200: #CCF2E7;
    --color-light-green-500: #00BE85;
    --color-light-green-700: #058868;
    --color-light-green-800: #0A524B;
    --color-light-green-900: #0E2F37;
    --color-red-100: #FFF5F5;
    --color-red-200: #FFE0E8;
    --color-red-500: #FF4D6A;
    --color-red-700: #F2304A;
    --color-red-800: #451635;
    --color-red-900: #2B0C2B;
    --color-alpha-gray-10: rgba(64, 61, 79, .1);
    --color-alpha-gray-20: rgba(64, 61, 79, .2);
    --color-alpha-gray-30: rgba(64, 61, 79, .3);
    --color-alpha-gray-30-static: #211c34;
    --color-alpha-gray-50: rgba(64, 61, 79, .5);
    --color-alpha-gray-80: rgba(64, 61, 79, .8);
    --color-alpha-black-50: rgba(8, 2, 29, .5);
    --color-alpha-black-80: rgba(8, 2, 29, .8);
    --color-alpha-black-90: rgba(8, 2, 29, .9);
    --color-alpha-lime-30: rgba(194, 255, 82, .3);
    --color-alpha-green-30: rgba(20, 245, 177, .3);
    --color-alpha-red-30: rgba(255, 77, 106, .3);
    --color-light-alpha-gray-15: rgba(216, 222, 235, .15);
    --color-light-alpha-gray-35: rgba(216, 222, 235, .35);
    --color-light-alpha-gray-35-static: #f2f4f7;
    --color-light-alpha-gray-50: rgba(216, 222, 235, .5);
    --color-light-alpha-gray-80: rgba(216, 222, 235, .8);
    --gradient-box: var(--gradient-box-light);
    --gradient-box-dark: linear-gradient(180deg, rgba(25, 20, 44, .7) 0%, rgba(25, 20, 44, .3) 100%);
    --gradient-box-light: linear-gradient(180deg, white 0%, white 100%);
    --gradient-modal: var(--gradient-modal-light);
    --gradient-modal-dark: linear-gradient(180deg, #19142C 0%, #110B24 100%);
    --gradient-modal-light: linear-gradient(180deg, white 0%, #EDF0F6 100%);
    --gradient-box-filled: linear-gradient(to top, var(--color-gray-800) 100%, var(--color-gray-900) 100%);
    --gradient-tabbar: linear-gradient(to top, var(--color-gray-800) 70%, var(--color-black) 100%);
    --quick-trade-gradient: var(--quick-trade-gradient-light);
    --quick-trade-gradient-dark: linear-gradient(180deg, rgba(64, 61, 79, .32) 0%, rgba(64, 61, 79, .08) 100%);
    --quick-trade-gradient-light: linear-gradient(180deg, rgba(216, 222, 235, .3) 0%, rgba(216, 222, 235, .14) 100%);
    --dialog-box-shadow: 0 0 40px 0 var(--color-gray-700);
    --shadow-ellipsis-bg-color: var(--color-white);
    --input-bg-color: var(--color-light-alpha-gray-35);
    --input-hover-bg-color: var(--color-light-alpha-gray-50);
    --input-disabled-bg-color: var(--color-light-alpha-gray-50);
    --select-bg-color: var(--color-light-alpha-gray-35);
    --select-hover-bg-color: var(--color-light-alpha-gray-50);
    --select-disabled-bg-color: var(--color-light-alpha-gray-50);
    --select-arrow: var(--select-arrow-light);
    --select-arrow-disabled: var(--select-arrow-light-disabled);
    --select-arrow-dark: url("data:image/svg+xml;utf8,<svg fill='white' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    --select-arrow-dark-disabled: url("data:image/svg+xml;utf8,<svg fill='lightgray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    --select-arrow-light: url("data:image/svg+xml;utf8,<svg fill='19142C' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    --select-arrow-light-disabled: url("data:image/svg+xml;utf8,<svg fill='gray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
    --link-color: var(--color-purple-blue-800);
    --dropdown-bg-color: var(--color-gray-100);
    --dropdown-box-shadow: 8px 8px 6px 0px rgba(8, 2, 29, .25);
    --color-chart-line: var(--color-purple-blue-300);
    --color-chart-grid-line: var(--color-gray-200);
    --modal-backdrop-bg-color: var(--color-light-alpha-gray-80);
    --table-overlay: var(--table-overlay-light);
    --table-overlay-dark: linear-gradient(to top, var(--color-black) 0%, rgba(255, 255, 255, 0) 100%);
    --table-overlay-light: linear-gradient(to top, var(--color-white) 0%, rgba(255, 255, 255, 0) 100%);
    --scrollbar-color: var(--color-gray-400);
    --datepicker-range-selection-color: var(--color-gray-300);
    --datepicker-range-borders-color: var(--color-purple-blue-800);
    --news-pg-icon-bg-color: var(--color-gray-300);
    --btn-accent-bg-color: var(--color-purple-blue-500);
    --btn-accent-font-color: var(--color-white);
    --btn-accent-hover-bg-color: var(--color-purple-blue-400);
    --btn-accent-hover-font-color: var(--color-white);
    --btn-accent-border-color: var(--color-purple-blue-500);
    --btn-accent-shadow-color: var(--color-alpha-gray-50);
    --btn-default-bg-color: var(--color-light-alpha-gray-35);
    --btn-default-font-color: var(--color-black);
    --btn-default-hover-bg-color: var(--color-light-alpha-gray-80);
    --btn-default-hover-font-color: var(--color-purple-blue-500);
    --btn-default-border-color: var(--color-purple-blue-500);
    --btn-default-shadow-color: var(--color-alpha-gray-30);
    --btn-positive-bg-color: var(--color-green-500);
    --btn-positive-font-color: var(--color-white);
    --btn-positive-hover-bg-color: color-mix(in srgb, var(--color-green-500) 90%, transparent);
    --btn-positive-hover-font-color: var(--color-white);
    --btn-positive-border-color: var(--color-purple-blue-500);
    --btn-positive-shadow-color: var(--color-alpha-gray-30);
    --btn-negative-bg-color: var(--color-red-500);
    --btn-negative-font-color: var(--color-white);
    --btn-negative-hover-bg-color: color-mix(in srgb, var(--color-red-500) 90%, transparent);
    --btn-negative-hover-font-color: var(--color-white);
    --btn-negative-border-color: var(--color-purple-blue-500);
    --btn-negative-shadow-color: var(--color-alpha-gray-30);
    --buy-btn-bg-color: var(--color-green-500);
    --buy-btn-font-color: var(--color-white);
    --sell-btn-bg-color: var(--color-red-500);
    --sell-btn-font-color: var(--color-white);
    --toggle-default-bg-color: var(--color-light-alpha-gray-80);
    --toggle-selected-bg-color: var(--color-purple-blue-500);
    --toggle-hovered-bg-color: var(--color-purple-blue-300);
    --rs-default-bg-color: var(--color-gray-300);
    --rs-active-bg-color: var(--color-purple-blue-500);
    --rs-tooltip-bg-color: var(--color-purple-blue-500);
    --rs-tooltip-font-color: var(--color-white);
    --notification-info-bg-color: var(--color-cyan-100);
    --notification-info-font-color: var(--color-cyan-600);
    --notification-success-bg-color: var(--color-light-green-100);
    --notification-success-font-color: var(--color-light-green-500);
    --notification-warn-bg-color: var(--color-orange-100);
    --notification-warn-font-color: var(--color-orange-500);
    --notification-error-bg-color: var(--color-red-200);
    --notification-error-font-color: var(--color-red-500)
}

[data-theme-color] {
    color: var(--color-primary)
}

[data-theme-bg] {
    background-color: var(--color-bg)
}

html {
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch
}

*,
*:before,
*:after {
    box-sizing: inherit
}

.clearfix:after {
    content: "";
    display: block;
    clear: both
}

html,
body,
span,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
article,
aside,
details,
dialog,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary,
audio,
canvas,
video,
mark,
code,
kbd,
samp,
a,
abbr,
acronym,
address,
del,
dfn,
em,
strong,
img,
q,
dl,
dt,
dd,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
div {
    margin: 0;
    padding: 0;
    border: none;
    font-weight: 400;
    font-style: normal;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    text-decoration: none;
    box-sizing: border-box
}

input,
button,
select,
textarea {
    margin: 0;
    padding: 0;
    font-weight: 400;
    font-style: normal;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    text-decoration: none;
    box-sizing: border-box
}

article,
aside,
details,
dialog,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary {
    display: block
}

audio,
canvas,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

mark {
    background-color: #ff0;
    color: #000
}

small {
    font-size: 80%
}

code,
kbd,
pre,
samp {
    font-family: Roboto Mono, serif;
    font-size: 1.6em
}

dfn {
    font-style: italic
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

b,
strong {
    font-weight: inherit
}

b,
strong {
    font-weight: bolder
}

a {
    cursor: pointer;
    background-color: transparent;
    outline: none
}

a:visited,
a:active {
    text-decoration: none
}

a:active,
a:hover {
    outline-width: 0
}

h1 a,
h2 a,
h3 a,
h4 a,
h5 a,
h6 a {
    color: inherit
}

table {
    border-collapse: collapse;
    border-spacing: 0
}

button,
input,
optgroup,
select,
textarea {
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button {
    outline: none
}

button,
select {
    text-transform: none
}

button,
html [type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    border: 0;
    margin: 0;
    padding: 0
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    display: inline-block;
    vertical-align: baseline
}

textarea {
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

[type=radio]+label,
[type=checkbox]+label {
    cursor: pointer
}

details,
menu {
    display: block
}

summary {
    display: list-item
}

canvas {
    display: inline-block
}

template {
    display: none
}

[hidden] {
    display: none
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px white inset
}

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

body {
    background: var(--color-white);
    position: relative;
    color: var(--color-black);
    -webkit-text-size-adjust: 100%;
    height: 100%;
    overflow: hidden
}

body.scrollable {
    overflow: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-color) transparent
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: 400;
    color: var(--color-black);
    line-height: 1.5
}

h1 {
    font-size: 2rem
}

h2 {
    font-size: 1.5rem
}

h3 {
    font-size: 1.2rem
}

h4 {
    font-size: 1rem
}

h5 {
    font-size: .9rem
}

h6 {
    font-size: .8rem
}

html {
    font-family: NdaxCryptix, Helvetica Neue;
    font-size: 16px;
    line-height: 1.5;
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    position: relative;
    height: 100%
}

html .zEWidget-launcher,
html .zEWidget-webWidget {
    display: none;
    position: fixed !important;
    z-index: 2000 !important
}

html.chat-visible .zEWidget-launcher,
html.chat-visible .zEWidget-webWidget {
    width: 100% !important;
    display: initial
}

img {
    max-width: 100%;
    font-style: italic;
    vertical-align: middle
}

img[width],
img[height] {
    max-width: none
}

@media (min-width: 461px) {
    .container {
        max-width: 540px
    }
}

@media (min-width: 769px) {
    .container {
        max-width: 720px
    }
}

@media (min-width: 993px) {
    .container {
        max-width: 960px
    }
}

@media (min-width: 1201px) {
    .container {
        max-width: 1140px
    }
}

@media (min-width: 1600px) {
    .container {
        max-width: 1520px
    }
}

.pac-container {
    z-index: 10000
}

#embeddedMessagingLiveRegion {
    height: 0
}

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

.ndax-spinner {
    display: inline-block;
    width: 25px;
    height: 25px;
    border: 3px solid var(--color-gray-500);
    border-radius: 50%;
    border-top-color: var(--color-white);
    animation: ndaxSpin .75s ease-in-out infinite
}

.portfolio-chart-tooltip__container {
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
    background-color: var(--color-bg);
    margin: 0;
    font-family: NdaxCryptix, Helvetica Neue;
    border-radius: 12px;
    border: 1px solid var(--color-border)
}

.portfolio-chart-tooltip__date {
    font-size: .8rem;
    color: var(--color-primary-low);
    margin: 0 1rem .5rem
}

.portfolio-chart-tooltip__total {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-primary);
    margin: .5rem 1rem 1rem
}

.portfolio-chart-tooltip__total .symbol {
    color: var(--color-primary-low)
}

.portfolio-chart-tooltip__distribution {
    display: grid;
    border-top: 1px solid var(--color-border);
    grid-template-columns: repeat(3, 1fr)
}

.portfolio-chart-tooltip__distribution-el {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem 1rem;
    font-weight: 500;
    color: var(--color-primary);
    font-size: .8rem
}

.portfolio-chart-tooltip__distribution-el:not(:last-of-type) {
    border-right: 1px solid var(--color-border)
}

.portfolio-chart-tooltip__distribution-el .square {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    margin-right: .5rem
}

.portfolio-chart-tooltip__distribution-el .square.btc {
    background-color: var(--color-orange-500)
}

.portfolio-chart-tooltip__distribution-el .square.altcoins {
    background-color: var(--color-purple-blue-300)
}

.portfolio-chart-tooltip__distribution-el .square.stablecoins {
    background-color: var(--color-blue-500)
}

.portfolio-chart-tooltip__gain {
    display: flex;
    align-items: center;
    margin: .5rem 1rem;
    font-size: .9rem;
    font-weight: 500;
    color: var(--color-primary)
}

.portfolio-chart-tooltip__gain .label {
    width: 170px;
    color: var(--color-primary-low)
}

.portfolio-chart-tooltip__gain .symbol {
    color: var(--color-primary-low)
}

.portfolio-chart-tooltip__gain .square {
    width: 20px;
    height: 20px;
    border-radius: 4px;
    margin-right: .5rem
}

.portfolio-chart-tooltip__gain .square.perf {
    background-color: var(--color-purple-blue-300)
}

.portfolio-chart-tooltip__gain .square.dp {
    background-color: var(--color-blue-500)
}

.portfolio-chart-tooltip__gain .square.rg {
    background-color: var(--color-green-500)
}

.portfolio-chart-tooltip__gain .square.urg {
    background-color: var(--color-orange-500)
}

.staking-chart-tooltip__container {
    display: flex;
    flex-direction: column;
    padding-top: 1rem;
    background-color: var(--color-bg);
    margin: 0;
    font-family: NdaxCryptix, Helvetica Neue;
    border-radius: 12px;
    border: 1px solid var(--color-border)
}

.staking-chart-tooltip__date {
    font-size: .8rem;
    color: var(--color-primary-low);
    margin: 0 1rem .5rem
}

.staking-chart-tooltip__total {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-primary);
    margin: .5rem 1rem 1rem
}

.staking-chart-tooltip__total .symbol {
    color: var(--color-primary-low)
}

.dashboard-widget-title {
    width: 100%;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
    letter-spacing: 1.2px;
    margin-bottom: 1rem
}

.dashboard-widget-title .label {
    color: var(--color-primary-low);
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    font-stretch: expanded
}

.dashboard-widget-title .clay-link {
    font-size: .8rem
}

@media (max-width: 768px) {
    .dashboard-widget-title .label {
        font-size: .8rem
    }
}

@media (max-width: 460px) {
    .dashboard-widget-title .link {
        font-size: .7rem
    }
}

.dashboard-widget-body {
    height: 100%;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--gradient-box);
    color: var(--color-primary);
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--card-border-color)
}

.settings-widget-card {
    background: var(--gradient-box);
    width: 100%;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--card-border-color)
}

.settings-widget-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-primary);
    text-transform: capitalize;
    padding-bottom: .5rem
}

.affiliates-widget-card {
    background: var(--gradient-box);
    width: 100%;
    padding: 1rem;
    border-radius: 12px;
    border: 1px solid var(--card-border-color)
}

.affiliates-widget-title {
    font-size: 1.2rem;
    font-weight: 500;
    color: var(--color-primary);
    text-transform: capitalize;
    padding-bottom: 1rem
}

.trade-widget-form {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-top: 1rem
}

.staking-automation-widget {
    background-color: var(--color-bg-low);
    border-radius: 12px;
    padding: 1rem;
    display: grid;
    grid-template: "a b" "c b" /1fr auto;
    grid-column-gap: 1rem;
    grid-row-gap: .5rem
}

.staking-automation-widget .title {
    display: flex;
    align-items: center;
    gap: 1rem;
    grid-area: a
}

.staking-automation-widget .title .icon {
    color: var(--color-purple-blue-300);
    font-size: 1.5rem
}

.staking-automation-widget .title .text {
    font-weight: 500
}

.staking-automation-widget .description {
    color: var(--color-primary-low);
    grid-area: c;
    font-size: .9rem
}

.staking-automation-widget .toggle {
    grid-area: b;
    display: flex;
    align-items: center
}

.ndax-page-title {
    font-size: 2.5rem;
    color: var(--color-primary);
    font-stretch: expanded;
    flex: none;
    padding-bottom: 1.5rem;
    display: flex;
    align-items: center
}

@media (max-width: 992px) {
    .ndax-page-title {
        font-size: 2rem
    }
}

@media (max-width: 768px) {
    .ndax-page-title {
        font-size: 1.5rem;
        padding-bottom: 1rem
    }
}

.trading-page-card {
    width: 100%;
    height: 100%;
    background: var(--gradient-box);
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--card-border-color)
}

.trading-page-card-title {
    font-weight: 500;
    font-size: 1.2rem;
    padding: .75rem 1rem;
    color: var(--color-primary);
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-stretch: expanded
}

@media (max-width: 768px) {
    .trading-page-card {
        border-radius: 0
    }
}

.dropdown-control-with-arrow {
    padding-left: .5rem
}

.dropdown-control-with-arrow:after {
    display: inline-block;
    content: "\e91c";
    font-family: ndax-icons, serif !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: all .2s ease-in-out;
    color: var(--color-primary-low);
    margin-left: 4px;
    pointer-events: none
}

.dropdown-control-with-arrow.opened:after {
    transform: rotate(180deg)
}

.with-popover {
    display: flex;
    align-items: center
}

.clay-input {
    background-color: var(--input-bg-color);
    height: 48px;
    border-radius: 24px;
    outline: none;
    padding: 0 1.5rem;
    color: var(--color-primary);
    width: 100%;
    letter-spacing: 1px;
    border: 2px solid transparent
}

.clay-input:-webkit-autofill,
.clay-input:-webkit-autofill:focus {
    transition: background-color 600000s 0s, color 600000s 0s;
    -webkit-box-shadow: none
}

.clay-input:hover {
    background-color: var(--input-hover-bg-color)
}

.clay-input:focus {
    background-color: var(--input-bg-color);
    border-color: var(--color-purple-blue-300)
}

.clay-input.ng-touched.ng-dirty.ng-invalid {
    border-color: var(--color-red-500)
}

.clay-input:disabled {
    background-color: var(--input-disabled-bg-color);
    pointer-events: none;
    cursor: default
}

textarea.clay-input {
    height: auto;
    padding: 1rem 1.5rem;
    resize: vertical
}

.clay-input-group {
    width: 100%;
    position: relative
}

.clay-input-group:has(*.clay-input-group-prefix)>.clay-input {
    padding-left: 3rem !important
}

.clay-input-group:has(*.clay-input-group-suffix-icon)>.clay-input {
    padding-right: 3rem !important
}

.clay-input-group:has(*.clay-input-group-suffix)>.clay-input {
    padding-right: 3rem
}

.clay-input-group-prefix {
    position: absolute;
    bottom: 0;
    left: 10px;
    top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden;
    color: var(--color-primary);
    z-index: 100
}

.clay-input-group-prefix>* {
    color: var(--color-primary)
}

.clay-input-group-suffix {
    position: absolute;
    bottom: 0;
    right: 1rem;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.clay-input-group-suffix>* {
    color: var(--color-primary-low);
    cursor: pointer
}

.clay-input-group-suffix-icon {
    position: absolute;
    bottom: 0;
    right: 1rem;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center
}

.clay-input-group-suffix-icon>* {
    color: var(--color-primary-low);
    cursor: pointer
}

.clay-btn {
    height: 48px;
    border-radius: 24px;
    border: 2px solid transparent;
    outline: none;
    font-size: 1rem;
    padding: 0 1.3rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: capitalize;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-stretch: expanded
}

.clay-btn * {
    font-weight: 500;
    font-size: 1rem
}

.clay-btn-timer-spinner {
    width: 25px;
    height: 25px;
    position: relative;
    margin-left: .5rem
}

.clay-btn-timer-spinner .timer {
    width: 100%;
    text-align: center;
    position: absolute;
    top: 4px;
    left: 0;
    font-size: .8rem
}

.clay-btn-timer-spinner .ndax-spinner {
    animation-duration: 1s
}

.clay-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem
}

.clay-btn-icon *[class^=icon-] {
    font-size: 1.2rem
}

.clay-btn-circle {
    padding: 0;
    width: 48px
}

.clay-btn-small {
    height: 40px;
    border-radius: 20px;
    padding: 0 1rem;
    font-size: .8rem
}

.clay-btn-small * {
    font-size: .8rem
}

.clay-btn-mini {
    height: 28px;
    border-radius: 14px;
    padding: 0 .5rem;
    font-size: .65rem
}

.clay-btn-small.clay-btn-circle {
    width: 40px;
    padding: 0
}

.clay-btn-accent {
    background-color: var(--btn-accent-bg-color);
    color: var(--btn-accent-font-color)
}

.clay-btn-accent:hover {
    background-color: var(--btn-accent-hover-bg-color);
    color: var(--btn-accent-hover-font-color)
}

.clay-btn-accent:focus {
    border: 2px solid var(--btn-accent-border-color)
}

.clay-btn-accent:active {
    -webkit-box-shadow: inset 0 4px 15px var(--btn-accent-shadow-color);
    -moz-box-shadow: inset 0 4px 15px var(--btn-accent-shadow-color);
    box-shadow: inset 0 4px 15px var(--btn-accent-shadow-color);
    border: 2px solid transparent !important
}

.clay-btn-accent:disabled,
.clay-btn-accent[disabled] {
    background-color: color-mix(in srgb, var(--btn-accent-bg-color) 50%, transparent);
    pointer-events: none;
    cursor: default;
    filter: grayscale(1);
    border: 2px solid transparent !important
}

.clay-btn-default {
    background-color: var(--btn-default-bg-color);
    color: var(--btn-default-font-color)
}

.clay-btn-default:hover {
    background-color: var(--btn-default-hover-bg-color);
    color: var(--btn-default-hover-font-color)
}

.clay-btn-default:focus {
    border: 2px solid var(--btn-default-border-color)
}

.clay-btn-default:active {
    -webkit-box-shadow: inset 0 4px 15px var(--btn-default-shadow-color);
    -moz-box-shadow: inset 0 4px 15px var(--btn-default-shadow-color);
    box-shadow: inset 0 4px 15px var(--btn-default-shadow-color);
    border: 2px solid transparent !important
}

.clay-btn-default:disabled,
.clay-btn-default[disabled] {
    background-color: color-mix(in srgb, var(--btn-default-bg-color) 50%, transparent);
    pointer-events: none;
    cursor: default;
    filter: grayscale(1);
    border: 2px solid transparent !important
}

.clay-btn-positive {
    background-color: var(--btn-positive-bg-color);
    color: var(--btn-positive-font-color)
}

.clay-btn-positive:hover {
    background-color: var(--btn-positive-hover-bg-color);
    color: var(--btn-positive-hover-font-color);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--btn-positive-bg-color) 30%, transparent)
}

.clay-btn-positive:focus {
    border: 2px solid var(--btn-positive-border-color)
}

.clay-btn-positive:active {
    -webkit-box-shadow: inset 0 4px 15px var(--btn-positive-shadow-color);
    -moz-box-shadow: inset 0 4px 15px var(--btn-positive-shadow-color);
    box-shadow: inset 0 4px 15px var(--btn-positive-shadow-color);
    border: 2px solid transparent !important;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--btn-positive-bg-color) 30%, transparent)
}

.clay-btn-positive:disabled,
.clay-btn-positive[disabled] {
    background-color: color-mix(in srgb, var(--btn-positive-bg-color) 50%, transparent);
    pointer-events: none;
    cursor: default;
    filter: grayscale(1);
    border: 2px solid transparent !important
}

.clay-btn-negative {
    background-color: var(--btn-negative-bg-color);
    color: var(--btn-negative-font-color)
}

.clay-btn-negative:hover {
    background-color: var(--btn-negative-hover-bg-color);
    color: var(--btn-negative-hover-font-color);
    box-shadow: 0 6px 14px color-mix(in srgb, var(--btn-negative-bg-color) 30%, transparent)
}

.clay-btn-negative:focus {
    border: 2px solid var(--btn-negative-border-color)
}

.clay-btn-negative:active {
    -webkit-box-shadow: inset 0 4px 15px var(--btn-negative-shadow-color);
    -moz-box-shadow: inset 0 4px 15px var(--btn-negative-shadow-color);
    box-shadow: inset 0 4px 15px var(--btn-negative-shadow-color);
    border: 2px solid transparent !important;
    box-shadow: 0 6px 14px color-mix(in srgb, var(--btn-negative-bg-color) 30%, transparent)
}

.clay-btn-negative:disabled,
.clay-btn-negative[disabled] {
    background-color: color-mix(in srgb, var(--btn-negative-bg-color) 50%, transparent);
    pointer-events: none;
    cursor: default;
    filter: grayscale(1);
    border: 2px solid transparent !important
}

.clay-icon-btn {
    font-size: inherit;
    color: var(--color-primary-low);
    cursor: pointer
}

.clay-icon-btn:hover {
    color: var(--color-primary)
}

.clay-icon-btn.active {
    color: var(--color-accent)
}

.clay-labels {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.clay-label,
.clay-label-secondary,
.clay-label-primary {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 400;
    margin-bottom: .5rem
}

.clay-label-primary {
    color: var(--color-primary);
    padding-left: 1.5rem
}

.clay-label-secondary {
    color: var(--color-primary-low);
    padding-right: 1.5rem
}

.clay-form-group {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: .25rem;
    position: relative
}

.clay-form-group>* {
    width: 100%
}

.clay-form-group:not(:has(.clay-error-message)):not(:last-of-type) {
    padding-bottom: 2rem
}

.clay-form-group-container {
    display: grid;
    grid-gap: 1rem
}

.clay-form-group-container.col-2 {
    grid-template-columns: 1fr 1fr
}

@media (max-width: 768px) {
    .clay-form-group-container.col-sm {
        grid-template-columns: 1fr;
        grid-gap: 0
    }
}

.clay-error-message {
    padding-left: 1.5rem;
    min-height: 2rem
}

.clay-link {
    color: var(--link-color);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    font-stretch: expanded;
    font-weight: 600;
    letter-spacing: -2.5%
}

.clay-link-with-arrow {
    padding-right: 2rem !important;
    text-transform: capitalize
}

.clay-link-with-arrow:after {
    position: absolute;
    right: 1rem;
    content: "\e909";
    font-family: ndax-icons, serif !important;
    transition: all .3s ease-in-out
}

.clay-link:hover:after {
    transform: translate(.25rem)
}

.clay-select {
    background-color: var(--select-bg-color) !important;
    height: 48px;
    border-radius: 24px;
    outline: none;
    padding: 0 3rem 0 1.5rem;
    color: var(--color-primary);
    width: 100%;
    letter-spacing: 1px;
    border: 2px solid transparent;
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position-x: calc(100% - 1rem);
    background-position-y: 12px;
    appearance: none;
    -webkit-appearance: none
}

.clay-select:hover {
    background-color: var(--select-hover-bg-color) !important
}

.clay-select:focus {
    background-color: var(--select-hover-bg-color) !important;
    border-color: var(--color-purple-blue-300)
}

.clay-select.ng-touched.ng-dirty.ng-invalid {
    border-color: var(--color-red-500)
}

.clay-select:disabled {
    background-color: var(--select-disabled-bg-color) !important;
    pointer-events: none;
    cursor: default;
    background-image: var(--select-arrow-disabled)
}

.clay-select-group {
    width: 100%;
    position: relative
}

.clay-select-group>.clay-select {
    padding-left: 3rem !important
}

.clay-select-group-prefix-image {
    position: absolute;
    bottom: 0;
    left: 10px;
    top: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    overflow: hidden
}

.clay-select-group-prefix-image>* {
    color: var(--color-primary-low);
    cursor: pointer
}

.toast-center-center {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.toast-top-center {
    top: 0;
    right: 0;
    width: 100%
}

.toast-bottom-center {
    bottom: 0;
    right: 0;
    width: 100%
}

.toast-top-full-width {
    top: 0;
    right: 0;
    width: 100%
}

.toast-bottom-full-width {
    bottom: 0;
    right: 0;
    width: 100%
}

.toast-top-left {
    top: 12px;
    left: 12px
}

.toast-top-right {
    top: 12px;
    right: 12px
}

@media (max-width: 460px) {
    .toast-top-right {
        max-width: 100%;
        left: 12px
    }
}

.toast-bottom-right {
    right: 12px;
    bottom: 12px
}

.toast-bottom-left {
    bottom: 12px;
    left: 12px
}

.toast-title {
    font-weight: 700
}

.toast-message {
    word-wrap: break-word
}

.toast-message a,
.toast-message label {
    color: var(--color-white)
}

.toast-message a:hover {
    color: var(--color-gray-300);
    text-decoration: none
}

.toast-close-button {
    position: relative;
    right: -.3em;
    top: -.3em;
    float: right;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-white);
    text-shadow: 0 1px 0 var(--color-white)
}

.toast-close-button:hover,
.toast-close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
    opacity: .4
}

button.toast-close-button {
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0
}

.toast-container {
    pointer-events: none;
    position: fixed;
    z-index: 999999
}

.toast-container * {
    box-sizing: border-box
}

.toast-container .toastr {
    position: relative;
    overflow: hidden;
    margin: 0 0 6px;
    padding: 15px 15px 15px 60px;
    width: 400px;
    border-radius: 8px;
    color: var(--color-white)
}

.toast-container .toastr:before {
    font-family: ndax-icons, serif;
    position: absolute;
    left: 1rem;
    top: .75rem;
    font-size: 2rem;
    line-height: 2rem
}

@media (max-width: 768px) {
    .toast-container .toastr {
        width: 100%
    }
}

.toast-container .toastr:hover {
    opacity: 1;
    cursor: pointer
}

.toast-info:before {
    content: "\e933"
}

.toast-error:before {
    content: "\e912"
}

.toast-success:before {
    content: "\e91a"
}

.toast-warning:before {
    content: "\e942"
}

.toast-container.toast-top-center .toastr,
.toast-container.toast-bottom-center .toastr {
    width: 400px;
    margin-left: auto;
    margin-right: auto
}

.toast-container.toast-top-full-width .toastr,
.toast-container.toast-bottom-full-width .toastr {
    width: 96%;
    margin-left: auto;
    margin-right: auto
}

.toastr {
    background-color: var(--color-black);
    pointer-events: auto
}

.toast-success {
    background-color: var(--notification-success-bg-color);
    color: var(--notification-success-font-color) !important
}

.toast-error {
    background-color: var(--notification-error-bg-color);
    color: var(--notification-error-font-color) !important
}

.toast-info {
    background-color: var(--notification-info-bg-color);
    color: var(--notification-info-font-color) !important
}

.toast-warning {
    background-color: var(--notification-warn-bg-color);
    color: var(--notification-warn-font-color) !important
}

.toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    background-color: #000;
    opacity: .4
}

@media all and (max-width: 240px) {
    .toast-container .toastr.div {
        padding: 8px 8px 8px 60px;
        width: 11em
    }

    .toast-container .toast-close-button {
        right: -.2em;
        top: -.2em
    }
}

@media all and (min-width: 241px) and (max-width: 480px) {
    .toast-container .toastr.div {
        padding: 8px 8px 8px 60px;
        width: 18em
    }

    .toast-container .toast-close-button {
        right: -.2em;
        top: -.2em
    }
}

@media all and (min-width: 481px) and (max-width: 768px) {
    .toast-container .toastr.div {
        padding: 15px 15px 15px 60px;
        width: 25em
    }
}

.bs-datepicker {
    display: flex;
    align-items: stretch;
    flex-flow: row wrap;
    background: var(--dropdown-bg-color);
    box-shadow: var(--dropdown-box-shadow);
    border-radius: 12px;
    position: relative;
    z-index: 1
}

.bs-datepicker:after {
    clear: both;
    content: "";
    display: block
}

.bs-datepicker bs-day-picker {
    float: left
}

.bs-datepicker button:hover,
.bs-datepicker button:focus,
.bs-datepicker button:active,
.bs-datepicker input:hover,
.bs-datepicker input:focus,
.bs-datepicker input:active,
.bs-datepicker-btns button:hover,
.bs-datepicker-btns button:focus,
.bs-datepicker-btns button:active,
.bs-datepicker-predefined-btns button:active,
.bs-datepicker-predefined-btns button:focus {
    outline: none
}

.bs-datepicker-head {
    min-width: 270px;
    height: 50px;
    padding: 10px;
    border-radius: 3px 3px 0 0;
    text-align: justify
}

.bs-datepicker-head:after {
    content: "";
    display: inline-block;
    vertical-align: top;
    width: 100%
}

.bs-datepicker-head button {
    display: inline-block;
    vertical-align: top;
    padding: 0;
    height: 30px;
    line-height: 30px;
    border: 0;
    background: transparent;
    text-align: center;
    cursor: pointer;
    color: var(--color-primary);
    transition: .3s
}

.bs-datepicker-head button[disabled],
.bs-datepicker-head button[disabled]:hover,
.bs-datepicker-head button[disabled]:active {
    background: var(--color-bg-low);
    color: var(--color-primary-low);
    cursor: not-allowed
}

.bs-datepicker-head button.previous span {
    transform: translate(-1px, -1px)
}

.bs-datepicker-head button.next span {
    transform: translate(1px, -1px)
}

.bs-datepicker-head button.next,
.bs-datepicker-head button.previous {
    border-radius: 50%;
    width: 30px;
    height: 30px
}

.bs-datepicker-head button.next span,
.bs-datepicker-head button.previous span {
    font-size: 28px;
    line-height: 1;
    display: inline-block;
    position: relative;
    height: 100%;
    width: 100%;
    border-radius: 50%
}

.bs-datepicker-head button.current {
    border-radius: 15px;
    max-width: 155px;
    padding: 0 13px
}

.bs-datepicker-head button:hover {
    background-color: #0000001a
}

.bs-datepicker-head button:active {
    background-color: #0003
}

.bs-datepicker-body {
    padding: 10px;
    border-radius: 0 0 3px 3px;
    min-height: 232px;
    min-width: 278px;
    border: 1px solid unset
}

.bs-datepicker-body .days.weeks {
    position: relative;
    z-index: 1
}

.bs-datepicker-body table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0
}

.bs-datepicker-body table th {
    font-size: 13px;
    color: var(--color-gray-400);
    font-weight: 400;
    text-align: center
}

.bs-datepicker-body table td {
    color: var(--color-primary-low);
    text-align: center;
    position: relative;
    padding: 0
}

.bs-datepicker-body table td span {
    display: block;
    margin: 0 auto;
    font-size: 13px;
    border-radius: 50%;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

.bs-datepicker-body table td:not(.disabled):not(.week) span:not(.disabled):not(.is-other-month) {
    cursor: pointer
}

.bs-datepicker-body table td.is-highlighted:not(.disabled):not(.selected) span,
.bs-datepicker-body table td span.is-highlighted:not(.disabled):not(.selected) {
    background-color: var(--datepicker-range-selection-color);
    transition: 0s
}

.bs-datepicker-body table td.is-active-other-month:not(.disabled):not(.selected) span,
.bs-datepicker-body table td span.is-active-other-month:not(.disabled):not(.selected) {
    background-color: var(--datepicker-range-selection-color);
    transition: 0s;
    cursor: pointer
}

.bs-datepicker-body table td span.disabled,
.bs-datepicker-body table td.disabled span {
    color: var(--color-gray-400)
}

.bs-datepicker-body table td span.selected,
.bs-datepicker-body table td.selected span {
    color: var(--color-primary)
}

.bs-datepicker-body table td span.selected.disabled,
.bs-datepicker-body table td.selected.disabled span {
    opacity: .3
}

.bs-datepicker-body table td span.is-other-month,
.bs-datepicker-body table td.is-other-month span {
    color: transparent
}

.bs-datepicker-body table td.active {
    position: relative
}

.bs-datepicker-body table td.active.select-start:before {
    left: 35%
}

.bs-datepicker-body table td.active.select-end:before {
    left: -85%
}

.bs-datepicker-body table td span.active.select-start:after,
.bs-datepicker-body table td span.active.select-end:after,
.bs-datepicker-body table td.active.select-start span:after,
.bs-datepicker-body table td.active.select-end span:after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    transition: .3s;
    top: 0;
    border-radius: 50%
}

.bs-datepicker-body table td:before,
.bs-datepicker-body table td span:before {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    inset: 6px -2px 6px -3px;
    box-sizing: content-box;
    background: transparent
}

.bs-datepicker-body table td.active.select-start+td.active:before {
    left: -20%
}

.bs-datepicker-body table td:last-child.active:before {
    border-radius: 0 3px 3px 0;
    width: 125%;
    left: -25%
}

.bs-datepicker-body table td span[class*=select-],
.bs-datepicker-body table td[class*=select-] span {
    border-radius: 50%;
    color: var(--color-primary)
}

.bs-datepicker-body table.days td.active:not(.select-start):not(.disabled):before,
.bs-datepicker-body table.days td.in-range:not(.select-start):not(.disabled):before,
.bs-datepicker-body table.days span.active:not(.select-start):not(.disabled):before,
.bs-datepicker-body table.days span.in-range:not(.select-start):not(.disabled):before {
    background: var(--datepicker-range-selection-color)
}

.bs-datepicker-body table.days span {
    width: 32px;
    height: 32px;
    line-height: 32px
}

.bs-datepicker-body table.days span.select-start {
    z-index: 2
}

.bs-datepicker-body table.days span.select-start.selected {
    color: var(--color-white)
}

.bs-datepicker-body table.days span.is-highlighted.in-range:before {
    right: 3px;
    left: 0
}

.bs-datepicker-body table.days span.in-range.select-end:before {
    right: 4px;
    left: 0
}

.bs-datepicker-body table.days td.select-start+td.select-end:before,
.bs-datepicker-body table.days td.select-start+td.is-highlighted:before,
.bs-datepicker-body table.days td.active+td.is-highlighted:before,
.bs-datepicker-body table.days td.active+td.select-end:before,
.bs-datepicker-body table.days td.in-range+td.is-highlighted:before,
.bs-datepicker-body table.days td.in-range+td.select-end:before {
    background: var(--datepicker-range-selection-color);
    width: 100%
}

.bs-datepicker-body table.weeks tr td:nth-child(2).active:before {
    border-radius: 3px 0 0 3px;
    left: 0;
    width: 100%
}

.bs-datepicker-body table:not(.weeks) tr td:first-child:before {
    border-radius: 3px 0 0 3px
}

.bs-datepicker-body table.years td span {
    width: 46px;
    height: 46px;
    line-height: 45px;
    margin: 0 auto
}

.bs-datepicker-body table.years tr:not(:last-child) td span {
    margin-bottom: 8px
}

.bs-datepicker-body table.months td {
    height: 52px
}

.bs-datepicker-body table.months td span {
    padding: 6px;
    border-radius: 15px
}

.bs-datepicker .current-timedate {
    color: var(--color-primary-low);
    font-size: 15px;
    text-align: center;
    height: 30px;
    line-height: 30px;
    border-radius: 20px;
    border: 1px solid unset;
    margin-bottom: 10px;
    cursor: pointer;
    text-transform: uppercase;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none
}

.bs-datepicker .current-timedate span:not(:empty):before {
    content: "";
    width: 15px;
    height: 16px;
    display: inline-block;
    margin-right: 4px;
    vertical-align: text-bottom;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAQCAYAAADJViUEAAABMklEQVQoU9VTwW3CQBCcOUgBtEBKSAukAnBKME+wFCAlYIhk8sQlxFABtJAScAsuAPBEewYcxCP8ouxrPDsza61uiVN1o6RNHD4htSCmq49RfO71BvMJqBBkITRf1kmUW49nQRC9h1I5AZlBClaL8aP1fKgOOxCx8aSLs+Q19eZuNO8QmPqJRtDFguy7OAcDbJPs+/BKVPDIPrvD2ZJgWAmVe7O0rI0Vqs1seyWUXpuJoppYCa5L+U++NpNPkr5OE2oMdARsb3gykJT5ydZcL8Z9Ww60nxg2LhjON9li9OwXZzo+xLbp3nC2s9CL2RrueGyVrgwNm8HpsCzZ9EEW6kqXlo1GQe03FzP/7W8Hl0dBtu7Bf7zt6mIwvX1RvzDCm7+q3mAW0Dl/GPdUCeXrZLT9BrDrGkm4qlPvAAAAAElFTkSuQmCC)
}

.bs-datepicker-multiple {
    border-radius: 4px 0 0 4px
}

.bs-datepicker-multiple+.bs-datepicker-multiple {
    margin-left: 10px
}

.bs-datepicker-multiple .bs-datepicker {
    box-shadow: none;
    position: relative
}

.bs-datepicker-multiple .bs-datepicker:not(:last-child) {
    padding-right: 10px
}

.bs-datepicker-multiple .bs-datepicker+.bs-datepicker:after {
    content: "";
    display: block;
    width: 14px;
    height: 10px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAA1ElEQVQoU42RsQrCUAxF77VuDu7O4oMWW//BURBBpZvgKk4uIrjoqKOTf+DopIO4uYggtFTfw3+pkQqCW1/G5J7kJiFy4m5MxUlxAzgIPHX+lzMPzupRYlYgxiR7vqsOP8YKzsTx0yxFMCUZ+q7aZzlr+OvgoWcAFyAHgat2jLWu48252DdqAihDJGSSJNUUxYmQjs3+hPQBlAh2rG2LCOPnaw3IiGDX99TRCs7ASJsNhUOA7d/LcuHvRG22FIZvsNXw1MX6VZExCilOQKEfeLXr/10+aC9Ho7arh7oAAAAASUVORK5CYII=);
    position: absolute;
    top: 25px;
    left: -8px
}

.bs-datepicker-multiple .bs-datepicker .left {
    float: left
}

.bs-datepicker-multiple .bs-datepicker .right {
    float: right
}

.bs-datepicker-container {
    padding: 15px
}

.bs-datepicker .bs-media-container {
    display: flex
}

@media (max-width: 768px) {
    .bs-datepicker .bs-media-container {
        flex-direction: column
    }
}

.bs-datepicker .bs-timepicker-in-datepicker-container {
    display: flex;
    justify-content: space-around
}

.bs-datepicker-custom-range {
    padding: 15px;
    background: var(--color-gray-600)
}

.bs-datepicker-predefined-btns button {
    width: 100%;
    display: block;
    height: 30px;
    background-color: unset;
    border-radius: 4px;
    color: var(--color-primary);
    border: 0;
    margin-bottom: 10px;
    padding: 0 18px;
    text-align: left;
    transition: .3s
}

.bs-datepicker-predefined-btns button:hover {
    background-color: unset
}

.bs-datepicker-buttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
    padding-top: 10px;
    border-top: 1px solid unset
}

.bs-datepicker-buttons .btn-default {
    margin-left: 10px
}

.bs-datepicker-buttons .btn-today-wrapper {
    display: flex;
    flex-flow: row wrap
}

.bs-datepicker-buttons .clear-right,
.bs-datepicker-buttons .today-right {
    flex-grow: 0
}

.bs-datepicker-buttons .clear-left,
.bs-datepicker-buttons .today-left {
    flex-grow: 1
}

.bs-datepicker-buttons .clear-center,
.bs-datepicker-buttons .today-center {
    flex-grow: .5
}

.bs-timepicker-container {
    padding: 10px 0
}

.bs-timepicker-label {
    color: var(--color-primary-low);
    margin-bottom: 10px
}

.bs-timepicker-controls {
    display: inline-block;
    vertical-align: top;
    margin-right: 10px
}

.bs-timepicker-controls button {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 0;
    background-color: unset;
    color: var(--color-primary-low);
    font-size: 16px;
    font-weight: 700;
    vertical-align: middle;
    line-height: 0;
    padding: 0;
    transition: .3s
}

.bs-timepicker-controls button:hover {
    background-color: unset
}

.bs-timepicker-controls input {
    width: 35px;
    height: 25px;
    border-radius: 13px;
    text-align: center;
    border: 1px solid unset
}

.bs-timepicker .switch-time-format {
    text-transform: uppercase;
    min-width: 54px;
    height: 25px;
    border-radius: 20px;
    border: 1px solid unset;
    background: var(--dropdown-bg-color);
    color: var(--color-primary-low);
    font-size: 13px
}

.bs-timepicker .switch-time-format img {
    vertical-align: initial;
    margin-left: 4px
}

bs-datepicker-container,
bs-daterangepicker-container {
    z-index: 1080
}

@media (max-width: 768px) {
    .bs-datepicker {
        width: min-content;
        justify-content: center
    }

    .bs-datepicker-multiple {
        display: flex
    }

    .bs-datepicker-multiple+.bs-datepicker-multiple {
        margin-top: 10px;
        margin-left: 0
    }
}

.theme-default .bs-datepicker-head {
    background-color: transparent
}

.theme-default .btn-today-wrapper .btn-success,
.theme-default .btn-clear-wrapper .btn-success {
    background-color: var(--datepicker-range-borders-color);
    border-color: var(--datepicker-range-borders-color)
}

.theme-default .btn-today-wrapper .btn-success:not(:disabled):not(.disabled):active:focus,
.theme-default .btn-clear-wrapper .btn-success:not(:disabled):not(.disabled):active:focus {
    box-shadow: none
}

.theme-default .btn-today-wrapper .btn-success:focus,
.theme-default .btn-clear-wrapper .btn-success:focus {
    box-shadow: none
}

.theme-default .btn-today-wrapper .btn-success:not(:disabled):not(.disabled):active,
.theme-default .btn-clear-wrapper .btn-success:not(:disabled):not(.disabled):active {
    background-color: unset;
    border-color: unset
}

.theme-default .btn-today-wrapper .btn-success:hover,
.theme-default .btn-clear-wrapper .btn-success:hover {
    background-color: unset;
    border-color: unset
}

.theme-default .bs-datepicker-predefined-btns button.selected {
    background-color: var(--datepicker-range-borders-color)
}

.theme-default .bs-datepicker-body table td span.selected,
.theme-default .bs-datepicker-body table td.selected span,
.theme-default .bs-datepicker-body table td span[class*=select-]:after,
.theme-default .bs-datepicker-body table td[class*=select-] span:after {
    background-color: var(--datepicker-range-borders-color);
    color: var(--color-white)
}

.theme-default .bs-datepicker-body table td.week span {
    color: var(--datepicker-range-borders-color)
}

.theme-default .bs-datepicker-body table td.active-week span:hover {
    cursor: pointer;
    background-color: var(--datepicker-range-borders-color);
    color: var(--color-primary);
    opacity: .5;
    transition: 0s
}

@font-face {
    font-family: NdaxCryptix;
    src: url("/assets-ndax/fonts/NdaxCryptix-2I3M436P.ttf") format("truetype")
}

@font-face {
    font-family: ndax-icons;
    src: url("/assets-ndax/fonts/ndax-icons-TEJWDPCG.ttf");
    src: url("/assets-ndax/fonts/ndax-icons-FB7THIB5.otf") format("opentype");
    src: url("/assets-ndax/fonts/ndax-icons-NMY6BX2Z.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: block
}

[class^=icon-],
[class*=" icon-"] {
    font-family: ndax-icons, serif !important;
    speak: never;
    font-style: normal;
    font-weight: 400;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.icon-add-message:before {
    content: "\e900"
}

.icon-administration-fee:before {
    content: "\e901"
}

.icon-advert:before {
    content: "\e902"
}

.icon-alert:before {
    content: "\e903"
}

.icon-announcements:before {
    content: "\e904"
}

.icon-api:before {
    content: "\e905"
}

.icon-api-2:before {
    content: "\e906"
}

.icon-arrow-down:before {
    content: "\e907"
}

.icon-arrow-left:before {
    content: "\e908"
}

.icon-arrow-right:before {
    content: "\e909"
}

.icon-arrow-up:before {
    content: "\e90a"
}

.icon-articles:before {
    content: "\e90b"
}

.icon-bank:before {
    content: "\e90c"
}

.icon-book:before {
    content: "\e90d"
}

.icon-briefcase:before {
    content: "\e90e"
}

.icon-buckets:before {
    content: "\e90f"
}

.icon-calendar:before {
    content: "\e910"
}

.icon-camera:before {
    content: "\e911"
}

.icon-cancel-circle:before {
    content: "\e912"
}

.icon-candles-1:before {
    content: "\e913"
}

.icon-candles:before {
    content: "\e914"
}

.icon-card:before {
    content: "\e915"
}

.icon-chart-bar:before {
    content: "\e916"
}

.icon-chart-candlestick:before {
    content: "\e917"
}

.icon-chart-line:before {
    content: "\e918"
}

.icon-chat:before {
    content: "\e919"
}

.icon-check-circle:before {
    content: "\e91a"
}

.icon-check:before {
    content: "\e91b"
}

.icon-chevron-down:before {
    content: "\e91c"
}

.icon-chevron-left:before {
    content: "\e91d"
}

.icon-chevron-right:before {
    content: "\e91e"
}

.icon-chevron-up:before {
    content: "\e91f"
}

.icon-clock:before {
    content: "\e920"
}

.icon-close:before {
    content: "\e921"
}

.icon-coins:before {
    content: "\e922"
}

.icon-convert:before {
    content: "\e923"
}

.icon-copy-link:before {
    content: "\e924"
}

.icon-copy:before {
    content: "\e925"
}

.icon-dark-mode:before {
    content: "\e926"
}

.icon-database:before {
    content: "\e927"
}

.icon-delete:before {
    content: "\e928"
}

.icon-desktop:before {
    content: "\e929"
}

.icon-diary:before {
    content: "\e92a"
}

.icon-documents:before {
    content: "\e92b"
}

.icon-down:before {
    content: "\e92c"
}

.icon-download:before {
    content: "\e92d"
}

.icon-drag:before {
    content: "\e92e"
}

.icon-dust:before {
    content: "\e92f"
}

.icon-edit:before {
    content: "\e930"
}

.icon-employeed:before {
    content: "\e931"
}

.icon-enterprise:before {
    content: "\e932"
}

.icon-error-circle:before {
    content: "\e933"
}

.icon-explorer:before {
    content: "\e934"
}

.icon-eye-closed:before {
    content: "\e935"
}

.icon-eye:before {
    content: "\e936"
}

.icon-facebook:before {
    content: "\e937"
}

.icon-face-id:before {
    content: "\e938"
}

.icon-filter:before {
    content: "\e939"
}

.icon-fingerprint:before {
    content: "\e93a"
}

.icon-fire:before {
    content: "\e93b"
}

.icon-globe:before {
    content: "\e93c"
}

.icon-google:before {
    content: "\e93d"
}

.icon-history:before {
    content: "\e93e"
}

.icon-home:before {
    content: "\e93f"
}

.icon-image:before {
    content: "\e940"
}

.icon-indicators:before {
    content: "\e941"
}

.icon-info-circle:before {
    content: "\e942"
}

.icon-instagram:before {
    content: "\e943"
}

.icon-interval:before {
    content: "\e944"
}

.icon-investing:before {
    content: "\e945"
}

.icon-key:before {
    content: "\e946"
}

.icon-lightbulb:before {
    content: "\e947"
}

.icon-linkedin:before {
    content: "\e948"
}

.icon-liquidating-mining:before {
    content: "\e949"
}

.icon-location:before {
    content: "\e94a"
}

.icon-lock:before {
    content: "\e94b"
}

.icon-log-out:before {
    content: "\e94c"
}

.icon-mail:before {
    content: "\e94d"
}

.icon-menu:before {
    content: "\e94e"
}

.icon-messenger:before {
    content: "\e94f"
}

.icon-microsoft:before {
    content: "\e950"
}

.icon-navigation:before {
    content: "\e951"
}

.icon-ndax-mark:before {
    content: "\e952"
}

.icon-notification:before {
    content: "\e953"
}

.icon-passcode:before {
    content: "\e954"
}

.icon-pause:before {
    content: "\e955"
}

.icon-phone:before {
    content: "\e956"
}

.icon-play:before {
    content: "\e957"
}

.icon-plus:before {
    content: "\e958"
}

.icon-point:before {
    content: "\e959"
}

.icon-points-vertical:before {
    content: "\e95a"
}

.icon-points:before {
    content: "\e95b"
}

.icon-portfolio:before {
    content: "\e95c"
}

.icon-profile:before {
    content: "\e95d"
}

.icon-pulse:before {
    content: "\e95e"
}

.icon-qr:before {
    content: "\e95f"
}

.icon-reddit:before {
    content: "\e960"
}

.icon-refresh:before {
    content: "\e961"
}

.icon-request-funds:before {
    content: "\e962"
}

.icon-resize:before {
    content: "\e963"
}

.icon-retired:before {
    content: "\e964"
}

.icon-retirement:before {
    content: "\e965"
}

.icon-rewards:before {
    content: "\e966"
}

.icon-savings:before {
    content: "\e967"
}

.icon-scan:before {
    content: "\e968"
}

.icon-search:before {
    content: "\e969"
}

.icon-security-key:before {
    content: "\e96a"
}

.icon-send-funds:before {
    content: "\e96b"
}

.icon-send-gift:before {
    content: "\e96c"
}

.icon-settings:before {
    content: "\e96d"
}

.icon-share:before {
    content: "\e96e"
}

.icon-shield:before {
    content: "\e96f"
}

.icon-stake:before {
    content: "\e970"
}

.icon-star-filled:before {
    content: "\e971"
}

.icon-star:before {
    content: "\e972"
}

.icon-status:before {
    content: "\e973"
}

.icon-stream:before {
    content: "\e974"
}

.icon-student:before {
    content: "\e975"
}

.icon-supporting:before {
    content: "\e976"
}

.icon-telegram:before {
    content: "\e977"
}

.icon-ticket:before {
    content: "\e978"
}

.icon-time:before {
    content: "\e979"
}

.icon-timer:before {
    content: "\e97a"
}

.icon-trophy:before {
    content: "\e97b"
}

.icon-trusted:before {
    content: "\e97c"
}

.icon-up:before {
    content: "\e97d"
}

.icon-wallet:before {
    content: "\e97e"
}

.icon-whatsapp:before {
    content: "\e97f"
}

.icon-widgets:before {
    content: "\e980"
}

.icon-x-twitter:before {
    content: "\e981"
}

.icon-youtube:before {
    content: "\e982"
}

.icon-layout:before {
    content: "\e983"
}

.icon-drag:before {
    content: "\e984"
}

.icon-help:before {
    content: "\e985"
}

.tooltip {
    --bs-tooltip-zindex: 1080;
    --bs-tooltip-max-width: 200px;
    --bs-tooltip-padding-x: 1rem;
    --bs-tooltip-padding-y: .5rem;
    --bs-tooltip-margin: ;
    --bs-tooltip-font-size: .875rem;
    --bs-tooltip-color: var(--color-white);
    --bs-tooltip-bg: var(--color-gray-700);
    --bs-tooltip-border-radius: 4px;
    --bs-tooltip-opacity: 1;
    --bs-tooltip-arrow-width: .8rem;
    --bs-tooltip-arrow-height: .4rem;
    z-index: var(--bs-tooltip-zindex);
    display: block;
    margin: var(--bs-tooltip-margin);
    font-style: normal;
    font-weight: 400;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    word-break: normal;
    white-space: normal;
    word-spacing: normal;
    line-break: auto;
    font-size: var(--bs-tooltip-font-size);
    word-wrap: break-word;
    opacity: 0
}

.tooltip.show {
    opacity: var(--bs-tooltip-opacity)
}

.tooltip .tooltip-arrow {
    display: block;
    width: var(--bs-tooltip-arrow-width);
    height: var(--bs-tooltip-arrow-height)
}

.tooltip .tooltip-arrow:before {
    position: absolute;
    content: "";
    border-color: transparent;
    border-style: solid
}

.bs-tooltip-top .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
    bottom: calc(-1 * var(--bs-tooltip-arrow-height))
}

.bs-tooltip-top .tooltip-arrow:before,
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow:before {
    top: -1px;
    border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
    border-top-color: var(--bs-tooltip-bg)
}

.bs-tooltip-end .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
    left: calc(-1 * var(--bs-tooltip-arrow-height));
    width: var(--bs-tooltip-arrow-height);
    height: var(--bs-tooltip-arrow-width)
}

.bs-tooltip-end .tooltip-arrow:before,
.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow:before {
    right: -1px;
    border-width: calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width) * .5) 0;
    border-right-color: var(--bs-tooltip-bg)
}

.bs-tooltip-bottom .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
    top: calc(-1 * var(--bs-tooltip-arrow-height))
}

.bs-tooltip-bottom .tooltip-arrow:before,
.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow:before {
    bottom: -1px;
    border-width: 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
    border-bottom-color: var(--bs-tooltip-bg)
}

.bs-tooltip-start .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
    right: calc(-1 * var(--bs-tooltip-arrow-height));
    width: var(--bs-tooltip-arrow-height);
    height: var(--bs-tooltip-arrow-width)
}

.bs-tooltip-start .tooltip-arrow:before,
.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow:before {
    left: -1px;
    border-width: calc(var(--bs-tooltip-arrow-width) * .5) 0 calc(var(--bs-tooltip-arrow-width) * .5) var(--bs-tooltip-arrow-height);
    border-left-color: var(--bs-tooltip-bg)
}

.tooltip-inner {
    max-width: var(--bs-tooltip-max-width);
    padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
    color: var(--bs-tooltip-color);
    text-align: center;
    background-color: var(--bs-tooltip-bg);
    border-radius: var(--bs-tooltip-border-radius)
}

.clay-table__menu-btn {
    font-size: 1.5rem;
    color: var(--color-primary-low)
}

.clay-table__menu-btn:hover {
    color: var(--color-primary)
}

.clay-table__no-data {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-primary-low);
    margin-top: 2rem;
    font-size: 1rem
}

.policy-dialog {
    background: var(--color-purple-blue-900) !important
}

.dialog-container .dialog-header {
    display: flex;
    padding: 1.5rem;
    color: var(--color-primary)
}

.dialog-container .dialog-header .header-text {
    letter-spacing: .5px;
    margin: 0 auto;
    padding-right: 1rem;
    color: inherit;
    font-size: 1.1rem;
    text-align: center
}

.dialog-container .dialog-header .icon-close {
    cursor: pointer;
    color: var(--color-primary-low);
    font-size: 1.2rem
}

.dialog-container .dialog-header .icon-close.disabled {
    opacity: .6;
    pointer-events: none
}

.dialog-container .dialog-header .icon-close:hover {
    color: var(--color-primary)
}

.dialog-container .dialog-body {
    padding: 0 1.5rem 1.5rem;
    color: var(--color-primary)
}

.dialog-container .dialog-actions {
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0 1.5rem 1.5rem
}

.dialog-container .dialog-actions .clay-btn {
    width: 100%
}

@media (max-width: 768px) {

    .dialog-container .dialog-body,
    .dialog-container .dialog-actions {
        padding: 0 1rem 1rem
    }

    .dialog-container .dialog-header {
        padding: 1rem
    }

    .dialog-container .dialog-header .header-text {
        font-size: 1rem
    }

    .dialog-container .dialog-actions {
        flex-direction: column
    }
}

.fade {
    transition: opacity .15s linear
}

.fade:not(.show) {
    opacity: 0
}

.modal {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1rem;
    --bs-modal-margin: .5rem;
    --bs-modal-bg: var(--gradient-modal);
    --bs-modal-border-color: rgba(0, 0, 0, .175);
    --bs-modal-border-width: 1px;
    --bs-modal-border-radius: .5rem;
    --bs-modal-box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075);
    --bs-modal-inner-border-radius: calc(.5rem - 1px);
    --bs-modal-header-padding-x: 1rem;
    --bs-modal-header-padding-y: 1rem;
    --bs-modal-header-padding: 1rem 1rem;
    --bs-modal-header-border-color: #e9edf0;
    --bs-modal-header-border-width: 1px;
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: .5rem;
    --bs-modal-footer-bg: ;
    --bs-modal-footer-border-color: #e9edf0;
    --bs-modal-footer-border-width: 1px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-modal-zindex);
    display: none;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    outline: 0
}

.modal-dialog {
    position: relative;
    width: auto;
    margin: var(--bs-modal-margin);
    pointer-events: none
}

.modal.fade .modal-dialog {
    transition: transform .3s ease-out;
    transform: translateY(-50px)
}

@media (prefers-reduced-motion: reduce) {
    .modal.fade .modal-dialog {
        transition: none
    }
}

.modal.show .modal-dialog {
    transform: none
}

.modal.modal-static .modal-dialog {
    transform: scale(1.02)
}

.modal-dialog-scrollable {
    height: calc(100% - var(--bs-modal-margin) * 2)
}

.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto
}

.modal-dialog-centered {
    display: flex;
    align-items: center;
    min-height: calc(100% - var(--bs-modal-margin) * 2)
}

.modal-content {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    pointer-events: auto;
    background-color: var(--bs-modal-bg);
    background-clip: padding-box;
    border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
    border-radius: var(--bs-modal-border-radius);
    outline: 0
}

.modal-backdrop {
    --bs-backdrop-zindex: 1050;
    --bs-backdrop-bg: var(--modal-backdrop-bg-color);
    --bs-backdrop-opacity: 1;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--bs-backdrop-zindex);
    width: 100vw;
    height: 100vh;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    background-color: var(--bs-backdrop-bg);
    opacity: 1
}

.modal-header {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    padding: var(--bs-modal-header-padding);
    border-bottom: var(--bs-modal-header-border-width) solid var(--bs-modal-header-border-color);
    border-top-left-radius: var(--bs-modal-inner-border-radius);
    border-top-right-radius: var(--bs-modal-inner-border-radius)
}

.modal-header .btn-close {
    padding: calc(var(--bs-modal-header-padding-y) * .5) calc(var(--bs-modal-header-padding-x) * .5);
    margin: calc(-.5 * var(--bs-modal-header-padding-y)) calc(-.5 * var(--bs-modal-header-padding-x)) calc(-.5 * var(--bs-modal-header-padding-y)) auto
}

.modal-title {
    margin-bottom: 0;
    line-height: var(--bs-modal-title-line-height)
}

.modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--bs-modal-padding)
}

.modal-footer {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    padding: calc(var(--bs-modal-padding) - var(--bs-modal-footer-gap) * .5);
    background-color: var(--bs-modal-footer-bg);
    border-top: var(--bs-modal-footer-border-width) solid var(--bs-modal-footer-border-color);
    border-bottom-right-radius: var(--bs-modal-inner-border-radius);
    border-bottom-left-radius: var(--bs-modal-inner-border-radius)
}

.modal-footer>* {
    margin: calc(var(--bs-modal-footer-gap) * .5)
}

@media (min-width: 461px) {
    .modal {
        --bs-modal-margin: 1.75rem;
        --bs-modal-box-shadow: var(--bs-box-shadow)
    }

    .modal-dialog {
        max-width: var(--bs-modal-width);
        margin-right: auto;
        margin-left: auto
    }

    .modal-sm {
        --bs-modal-width: 300px
    }
}

@media (min-width: 993px) {

    .modal-lg,
    .modal-xl {
        --bs-modal-width: 800px
    }
}

@media (min-width: 1201px) {
    .modal-xl {
        --bs-modal-width: 1140px
    }
}

.modal-fullscreen {
    width: 100vw;
    max-width: none;
    height: 100%;
    margin: 0
}

.modal-fullscreen .modal-content {
    height: 100%;
    border: 0;
    border-radius: 0
}

.modal-fullscreen .modal-header,
.modal-fullscreen .modal-footer {
    border-radius: 0
}

.modal-fullscreen .modal-body {
    overflow-y: auto
}

@media (max-width: 460.98px) {
    .modal-fullscreen-sm-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

    .modal-fullscreen-sm-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen-sm-down .modal-header,
    .modal-fullscreen-sm-down .modal-footer {
        border-radius: 0
    }

    .modal-fullscreen-sm-down .modal-body {
        overflow-y: auto
    }
}

@media (max-width: 768.98px) {
    .modal-fullscreen-md-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

    .modal-fullscreen-md-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen-md-down .modal-header,
    .modal-fullscreen-md-down .modal-footer {
        border-radius: 0
    }

    .modal-fullscreen-md-down .modal-body {
        overflow-y: auto
    }
}

@media (max-width: 992.98px) {
    .modal-fullscreen-lg-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

    .modal-fullscreen-lg-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen-lg-down .modal-header,
    .modal-fullscreen-lg-down .modal-footer {
        border-radius: 0
    }

    .modal-fullscreen-lg-down .modal-body {
        overflow-y: auto
    }
}

@media (max-width: 1200.98px) {
    .modal-fullscreen-xl-down {
        width: 100vw;
        max-width: none;
        height: 100%;
        margin: 0
    }

    .modal-fullscreen-xl-down .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0
    }

    .modal-fullscreen-xl-down .modal-header,
    .modal-fullscreen-xl-down .modal-footer {
        border-radius: 0
    }

    .modal-fullscreen-xl-down .modal-body {
        overflow-y: auto
    }
}

.modal-content {
    background: var(--gradient-modal);
    border-radius: 12px
}

.modal-header {
    border-bottom: 1px solid var(--color-border)
}

.popover-container {
    z-index: 10000
}

.popover-ctrl {
    color: var(--color-gray-400);
    background-color: transparent;
    background-repeat: no-repeat;
    border: none;
    cursor: help;
    overflow: hidden;
    outline: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit
}

.popover-content__outer {
    position: fixed;
    max-width: 300px;
    z-index: 10000;
    width: 100%
}

.popover-content__inner {
    position: relative;
    background-color: var(--color-gray-700);
    border-radius: 8px;
    padding: .5rem 1rem;
    width: 100%;
    color: var(--color-white);
    font-size: .9rem;
    text-transform: none;
    text-decoration: none;
    margin: 10px 0;
    letter-spacing: initial
}

.popover-arrow {
    width: 0;
    height: 0;
    position: absolute;
    border-top: 8px solid var(--color-gray-700);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent
}

.ndax-loader {
    position: absolute;
    inset: 0;
    z-index: 1000
}

.ndax-loader:before {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    border: 6px solid rgba(255, 255, 255, 0);
    border-top: 6px solid var(--color-primary);
    border-radius: 50%;
    width: 80px;
    height: 80px;
    animation: ndaxSpin .75s ease-in-out infinite
}

@keyframes spin {
    0% {
        transform: rotate(0)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.swiper-pagination {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 1rem 0
}

.swiper-pagination .swiper-pagination-bullet {
    margin: 0 5px;
    background-color: var(--color-primary-low);
    position: relative;
    width: 10px;
    height: 10px;
    transition: .2s;
    outline: none;
    border-radius: 50%;
    cursor: pointer
}

.swiper-pagination .swiper-pagination-bullet-active {
    background-color: var(--color-purple-blue-300)
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}