:root {
    --ThemeColor: #3D5AFE;
    --ThemeColorHover: #5570FF;
    --ThemeColorBright: #8FA9FF;
    --ThemeColorTint: #4C6FFF;
    --ThemeColorOnLight: #2C45C8;
    --ThemeColorSecond: #7A4DFF;
    --ThemeColorRgb: 61, 90, 254;
    --ThemeBrightRgb: 143, 169, 255;
    --ThemeTintRgb: 76, 111, 255;
    --ThemeOnLightRgb: 44, 69, 200;
}

@font-face {
    font-family: 'AvenirBold';
    src: url('../fonts/AvenirNextWorld-Bold.woff2') format('woff2'), url('../fonts/AvenirNextWorld-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AvenirMedium';
    src: url('../fonts/AvenirNextWorld-Medium.woff2') format('woff2'), url('../fonts/AvenirNextWorld-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AvenirRegular';
    src: url('../fonts/AvenirNextWorld-Regular.woff2') format('woff2'), url('../fonts/AvenirNextWorld-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
* {
    outline: none !important;
}
h1 {
    color: #ECECEC;
    font-family: AvenirBold;
    font-size: 20px;
    line-height: 28px;
}
h1 i {
    margin-right: 9px;
    font-size: 20px;
}
h2 {
    color: #ECECEC;
    font-family: AvenirBold;
    font-size: 19px;
    line-height: 28px;
}
h2 span {
    color: rgba(236,236,236,0.3);
}
h2 i {
    margin-right: 8px;
    font-size: 18px;
}
.row {
    margin-left: -16px;
    margin-right: -16px;
}
.row .col-sm-3,
.row .col-sm-4,
.row .col-sm-6,
.row .col-sm-12 {
    padding-left: 16px;
    padding-right: 16px;
}
.rowflex {
    display: inline-flex;
    align-items: center;
    width: 100%;
}
.btn-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: AvenirBold;
    color: #fff;
    font-size: 16px;
    background-color: #3A4152;
    border: none;
    border-radius: 8px;
    padding: 0 24px;
    height: 42px;
    line-height: 42px;
    position: relative;
}
.btn-default:after {
    content: '';
    width: 100%;
    height: 0;
    background: rgba(255,255,255,0.1);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.3s;
}
.btn-default:hover,
.btn-default:focus,
.btn-default.focus {
    background: #46506A !important;
    border: none;
    box-shadow: none !important;
    color: #fff;
}
.btn-default:hover:after,
.btn-default:focus:after,
.btn-default.focus:after {
    height: 100%;
}
.btn-default:not(:disabled):not(.disabled).active,
.btn-default:not(:disabled):not(.disabled):active {
    background: #46506A !important;
}
.btn-default.disabled,
.btn-default:disabled {
    opacity: 0.35;
    background: #46506A !important;
}
.btn-success {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: AvenirBold;
    color: #fff;
    font-size: 16px;
    background-color: var(--ThemeColor);
    border: none;
    border-radius: 8px;
    padding: 0 24px;
    height: 42px;
    line-height: 42px;
    position: relative;
}
.btn-success:after {
    content: '';
    width: 100%;
    height: 0;
    background: rgba(255,255,255,0.1);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.3s;
}
.btn-success:hover,
.btn-success:focus,
.btn-success.focus {
    background: var(--ThemeColorHover) !important;
    border: none;
    box-shadow: none !important;
    color: #fff;
}
.btn-success:hover:after,
.btn-success:focus:after,
.btn-success.focus:after {
    height: 100%;
}
.btn-success:not(:disabled):not(.disabled).active,
.btn-success:not(:disabled):not(.disabled):active {
    background: var(--ThemeColorHover) !important;
}
.btn-success.disabled,
.btn-success:disabled {
    opacity: 0.35;
    background: var(--ThemeColorHover) !important;
}
.btn-warning {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: AvenirBold;
    color: #fff;
    font-size: 16px;
    background-color: var(--ThemeColorSecond);
    border: none;
    border-radius: 8px;
    padding: 0 24px;
    height: 42px;
    line-height: 42px;
    position: relative;
}
.btn-warning:after {
    content: '';
    width: 100%;
    height: 0;
    background: rgba(255,255,255,0.1);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.3s;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus {
    background-color: var(--ThemeColorSecond);
    border: none;
    box-shadow: none !important;
    color: #fff;
}
.btn-warning:hover:after,
.btn-warning:focus:after,
.btn-warning.focus:after {
    height: 100%;
}
.btn-warning:not(:disabled):not(.disabled).active,
.btn-warning:not(:disabled):not(.disabled):active {
    background-color: var(--ThemeColorSecond);
}
.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: AvenirMedium;
    color: #FFFFFF;
    font-size: 15px;
    background: var(--ThemeColor) !important;
    border: none !important;
    border: none;
    border-radius: 4px;
    padding: 0 18px;
    height: 38px;
    line-height: 36px;
}
.btn-primary:after {
    content: '';
    width: 100%;
    height: 0;
    background: rgba(255,255,255,0.1);
    position: absolute;
    bottom: 0;
    left: 0;
    transition: 0.3s;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
    background: var(--ThemeColorHover) !important;
    border: none;
    box-shadow: none !important;
    color: #FFFFFF;
}
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active {
    background: var(--ThemeColorHover) !important;
}
.btn-primary.disabled,
.btn-primary:disabled {
    opacity: 0.35;
    background: var(--ThemeColor) !important;
}
.FormWidth {
    display: inline-block;
    width: 100%;
    margin: 0 auto;
    margin-bottom: 16px;
    background: linear-gradient(to bottom right, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%) 100%;
    padding: 22px;
    border-radius: 8px;
}
.FormHeight {
    height: auto;
}
.form-control {
    background-color: transparent;
    border: solid rgba(195,216,219,0.3) 1px;
    height: 46px;
    line-height: normal;
    border-radius: 6px;
    font-family: AvenirRegular;
    color: rgba(255,255,255,0.92);
    font-size: 15px;
    width: 100%;
    padding-left: 14px;
    transition: 0.3s;
}
.form-control:focus {
    box-shadow: none;
    background-color: #1A1A23;
    border: solid rgba(195,216,219,0.3) 1px;
    color: #ffffff;
    box-shadow: 0px 3px 6px rgba(0,0,0,0.16);
}
.form-control.Error {
    border: solid #B22828 1px;
}
.form-control.Success {
    border: solid #28B2A9 1px;
}
.form-control::-webkit-input-placeholder {
    color: rgba(255,255,255,0.38);
    opacity: 1;
}
.form-control::-moz-placeholder {
    color: rgba(255,255,255,0.38);
    opacity: 1;
}
.form-control::placeholder {
    color: rgba(255,255,255,0.38);
    opacity: 1;
}
.input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),
.input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
    border-radius: 4px;
}
.FormText p {
    color: #919191;
    font-size: 13px;
    line-height: 24px;
    font-family: AvenirMedium;
    margin-bottom: 7px;
}
.FormText p a {
    color: var(--ThemeColorBright);
    font-family: AvenirMedium;
    text-decoration: none;
}
.FormText p a.Color1 {
    color: #fff;
}
.FormText p a:hover {
    text-decoration: underline;
}
.CheckMaterial {
    position: absolute;
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
}
.CheckboxLabel {
    font-family: AvenirRegular;
    color: #C3D8DB;
    font-size: 14px;
    line-height: 24px;
    position: relative;
    cursor: pointer;
    line-height: 24px;
    padding-top: 1px;
    padding-bottom: 2px;
    padding-left: 28px;
}
.CheckboxLabel a {
    color: var(--ThemeColorBright);
    text-decoration: none;
    display: inline;
    font-size: 14px;
}
.CheckboxLabel a:hover {
    text-decoration: underline;
}
.CheckboxLabel:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 18px;
    height: 18px;
    margin: 3px;
    background-color: transparent;
    border: 1px #919191 solid;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    line-height: 18px;
    padding-left: 0.5px;
}
.CheckMaterial:checked ~ .CheckboxLabel:before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free" !important;
    font-weight: 900 !important;
    font-style: normal;
    font-variant: normal;
    text-align: center;
    background-color: var(--ThemeColorTint);
    border-color: var(--ThemeColorTint);
    color: #fff;
    font-size: 15px;
}
.CheckMaterial:disabled ~ .CheckboxLabel {
    color: rgba(0, 0, 0, 0.38);
}
.CheckMaterial:disabled ~ .CheckboxLabel:before {
    border-color: rgba(145, 145, 145, 0.40);
}
.CheckMaterial:checked:disabled ~ .CheckboxLabel:before {
    background-color: rgba(145, 145, 145, 0.40);
    background-clip: padding-box;
}
.CheckMaterial ~ .CheckboxLabel:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}
.CheckMaterial:focus ~ .CheckboxLabel:after {
    -webkit-animation: ClickWave 0.5s;
    animation: ClickWave 0.5s;
}
.CheckMaterial:checked ~ .CheckboxLabel:after {
    background-color: var(--ThemeColorTint);
}
.CheckMaterial:not(:checked) ~ .CheckboxLabel:after {
    background-color: var(--ThemeColorTint);
}
@keyframes ClickWave {
    0% {
        width: 24px;
        height: 24px;
        opacity: 0.5;
    }
    100% {
        width: 48px;
        height: 48px;
        margin-left: -12px;
        margin-top: -12px;
        opacity: 0;
    }
}
@-webkit-keyframes ClickWave {
    0% {
        width: 24px;
        height: 24px;
        opacity: 0.5;
    }
    100% {
        width: 48px;
        height: 48px;
        margin-left: -12px;
        margin-top: -12px;
        opacity: 0;
    }
}
.TableDiv {
    display: inline-block;
    width: 100%;
    position: relative;
}
.TableContent {
    margin-top: 18px;
    background: linear-gradient(to bottom right, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%) 100%;
    border-radius: 8px;
    padding: 22px;
}
.TableContent > .table,
.TableContent > .table-responsive > .table {
    margin-bottom: 0;
}
.TableContent .Nohistoryyet {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 141px;
    color: #ECECEC;
    font-family: AvenirBold;
    font-size: 17px;
    line-height: 26px;
    text-align: center;
    padding: 0;
}
tbody,
td,
tfoot,
th,
thead,
tr {
    border: 0;
}
.table thead {
    border-bottom: solid rgba(195,216,219,0.1) 1px;
}
.table thead tr th {
    color: #ECECEC;
    font-size: 14px;
    line-height: 20px;
    font-family: AvenirBold;
    padding: 13px .5rem;
}
.table tbody tr td {
    color: #ECECEC;
    font-size: 14px;
    line-height: 22px;
    font-family: AvenirMedium;
    padding: 12px .5rem;
    vertical-align: middle;
}
.table tbody tr td a {
    color: var(--ThemeColorBright);
    font-size: 14px;
    line-height: 22px;
    text-decoration: none;
    font-family: AvenirBold;
}
.table tbody tr td a:hover {
    opacity: 0.8;
}
.table tbody tr td a.btn,
.table tbody tr td a.btn:hover,
.table tbody tr td a.btn:focus {
    color: #fff;
}
.TextDiv {
    display: inline-block;
    width: 100%;
    color: #C3D8DB;
    font-family: AvenirMedium;
    font-size: 15px;
    line-height: 24px;
}
.TextDiv .Item {
    display: inline-block;
    margin-right: 40px;
    font-size: 15px;
    line-height: 24px;
}
.TextDiv .Item span {
    font-family: AvenirBold;
    font-size: 20px;
    line-height: 30px;
    padding-left: 3px;
}
.TextDiv .Item .btn {
    position: relative;
    top: -8px;
}
.LogOut {
    display: inline-flex;
    align-items: center;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(32px);
    backdrop-filter: blur(32px);
    background: rgba(33, 36, 40,0.2);
    position: absolute;
    top: 0;
    right: 0%;
    z-index: 0;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
}
.LogOut.Show {
    visibility: visible;
    opacity: 1;
    z-index: 999999;
}
.LogOut .Info {
    width: 100%;
    text-align: center;
    padding: 52px 30px;
    background: linear-gradient(180deg, rgba(18, 18, 26, 0) 0%, rgba(18, 18, 26, 0.72) 26%, rgba(18, 18, 26, 0.72) 74%, rgba(18, 18, 26, 0) 100%);
}
.LogOut .Info .Icon {
    font-size: 34px;
    color: #DBC3C3;
}
.LogOut .Info .Text {
    font-family: AvenirBold;
    font-size: 32px;
    line-height: 55px;
    color: #C3D8DB;
    margin-bottom: 44px;
    margin-top: 40px;
}
.LogOut .Info .Buttons .btn {
    margin-right: 40px;
    margin-left: 40px;
    width: 220px;
}
.PayIcons {
    display: inline-block;
    width: 100%;
    text-align: right;
}
.PayIcons .Image {
    display: inline-block;
    margin-left: 14px;
    margin-right: 14px;
}
.PayIcons .Image img {
    display: block;
    width: auto;
    height: 44px;
    max-width: 140px;
    object-fit: contain;
}
.ArgusBg {
    background-position: 30px center;
    background-size: 40%;
}
.LoginPage .form-group,
.LoginPage .input-group,
.LoginPage .FormText {
    margin-top: 0 !important;
    margin-bottom: 16px !important;
}
.LoginPage .form-group:has(.CheckboxLabel) {
    margin-top: -3px !important;
    margin-bottom: 10px !important;
}
.LoginPage .form-group:has(> .FormText):not(:has(.FormNotice)) {
    margin-top: -4px !important;
    margin-bottom: 12px !important;
}
.LoginPage .FormText p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.LoginPage .FormText p + p {
    margin-top: 8px !important;
}
.LoginPage .g-recaptcha:empty {
    margin-bottom: 0 !important;
}
.LoginPage .form-group:last-child,
.LoginPage .FormText:last-child {
    margin-bottom: 0 !important;
}
.LoginPage a:not(.btn):not(.PwToggle):not(.dropdown-toggle):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.language):not(.Logo a):not(:has(img)):not(.Sidebar a):not(.sidebar a):not(.sidenav a):not(.MainMenu a):not(.menu a):not(.table a):not(.TableTabs a):not(.Language a):not(.navbar a),
.MainDiv a:not(.btn):not(.PwToggle):not(.dropdown-toggle):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.language):not(.Logo a):not(:has(img)):not(.Sidebar a):not(.sidebar a):not(.sidenav a):not(.MainMenu a):not(.menu a):not(.table a):not(.TableTabs a):not(.Language a):not(.navbar a) {
    text-decoration: none;
    transition: filter 0.2s ease;
}
.LoginPage a:not(.btn):not(.PwToggle):not(.dropdown-toggle):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.language):not(.Logo a):not(:has(img)):not(.Sidebar a):not(.sidebar a):not(.sidenav a):not(.MainMenu a):not(.menu a):not(.table a):not(.TableTabs a):not(.Language a):not(.navbar a):hover,
.MainDiv a:not(.btn):not(.PwToggle):not(.dropdown-toggle):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.language):not(.Logo a):not(:has(img)):not(.Sidebar a):not(.sidebar a):not(.sidenav a):not(.MainMenu a):not(.menu a):not(.table a):not(.TableTabs a):not(.Language a):not(.navbar a):hover,
.LoginPage a:not(.btn):not(.PwToggle):not(.dropdown-toggle):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.language):not(.Logo a):not(:has(img)):not(.Sidebar a):not(.sidebar a):not(.sidenav a):not(.MainMenu a):not(.menu a):not(.table a):not(.TableTabs a):not(.Language a):not(.navbar a):focus-visible,
.MainDiv a:not(.btn):not(.PwToggle):not(.dropdown-toggle):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.language):not(.Logo a):not(:has(img)):not(.Sidebar a):not(.sidebar a):not(.sidenav a):not(.MainMenu a):not(.menu a):not(.table a):not(.TableTabs a):not(.Language a):not(.navbar a):focus-visible {
    text-decoration: underline;
    filter: brightness(1.15);
}
@supports not selector(::-webkit-scrollbar) {
    html {
        scrollbar-width: thin;
        scrollbar-color: #32323F #15151C;
    }
    .WhiteMode,
    .LightMode {
        scrollbar-color: rgba(25, 24, 41, 0.28) rgba(25, 24, 41, 0.05);
    }
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: #15151C;
}
::-webkit-scrollbar-thumb {
    background: #32323F;
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
    background: #3D3D4D;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
    background: #4A4A5C;
    border: 2px solid transparent;
    background-clip: padding-box;
}
::-webkit-scrollbar-corner {
    background: #15151C;
}
.LightMode::-webkit-scrollbar-track,
.LightMode ::-webkit-scrollbar-track,
.WhiteMode ::-webkit-scrollbar-track,
.LightMode::-webkit-scrollbar-corner,
.LightMode ::-webkit-scrollbar-corner,
.WhiteMode ::-webkit-scrollbar-corner {
    background: rgba(25, 24, 41, 0.05);
}
.LightMode::-webkit-scrollbar-thumb,
.LightMode ::-webkit-scrollbar-thumb,
.WhiteMode ::-webkit-scrollbar-thumb {
    background: rgba(25, 24, 41, 0.28);
    border: 2px solid transparent;
    background-clip: padding-box;
}
.LightMode::-webkit-scrollbar-thumb:hover,
.LightMode ::-webkit-scrollbar-thumb:hover,
.WhiteMode ::-webkit-scrollbar-thumb:hover {
    background: rgba(25, 24, 41, 0.42);
    border: 2px solid transparent;
    background-clip: padding-box;
}
.LightMode::-webkit-scrollbar-thumb:active,
.LightMode ::-webkit-scrollbar-thumb:active,
.WhiteMode ::-webkit-scrollbar-thumb:active {
    background: rgba(25, 24, 41, 0.55);
    border: 2px solid transparent;
    background-clip: padding-box;
}
.LoginPage .FormText p a {
    color: var(--ThemeColorBright);
}
:root {
    color-scheme: dark;
}
:root.LightMode,
:root.WhiteMode {
    color-scheme: light;
}
html {
    height: 100%;
    background-color: #06060C;
    background-image: linear-gradient(to right, #1A1A1A , #06060C);
}
html.LightMode {
    background-color: #EEF1F7;
    background-image: none;
}
body {
    padding: 0;
    margin: 0;
    height: 100%;
    background-image: linear-gradient(to right, #1A1A1A , #06060C);
    overflow-x: hidden;
}
.MainDiv {
    display: inline-block;
    width: 100%;
    float: left;
}
.MainDiv .ContentFLex {
    display: flex;
}
.Sidebar {
    display: inline-block;
    float: left;
    width: 264px;
    min-height: 100vh;
    padding-top: 32px;
}
.Sidebar .Logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 220px;
    height: 80px;
    margin: 0 auto 28px;
    padding: 0 10px;
    overflow: hidden;
}
.Sidebar .Logo a,
.Sidebar .Logo p {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
.Sidebar .Logo .LogoImage,
.Sidebar .Logo img {
    width: auto;
    height: auto !important;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.Sidebar .MainMenu {
    margin-top: 8px;
}
.Sidebar .MainMenu ul {
    padding: 0;
}
.Sidebar .MainMenu ul li {
    display: inline-block;
    width: 100%;
    padding: 0 18px;
    margin-bottom: 2px;
}
.Sidebar .MainMenu ul li a {
    display: block;
    color: #ECECEC;
    font-size: 16px;
    font-family: AvenirMedium;
    height: 48px;
    line-height: 48px;
    padding-left: 16px;
    text-decoration: none;
    transition: 0.5s;
    border-radius: 8px;
}
.Sidebar .MainMenu ul li a i {
    display: inline-block;
    width: 24px;
    margin-right: 10px;
    font-size: 18px;
    text-align: center;
}
.Sidebar .MainMenu ul li.active a,
.Sidebar .MainMenu ul li:hover a {
    background: rgba(var(--ThemeTintRgb), 0.14);
    color: var(--ThemeColorBright);
}
.ContentDiv {
    width: calc(100% - 264px);
    display: inline-block;
    float: left;
    padding: 0 24px;
    padding-bottom: 28px;
    position: relative;
}
.ContentDiv .Header {
    padding-top: 18px;
    margin-bottom: 6px;
}
.ContentDiv .Header .HeadButtons {
    display: inline-block;
    width: auto;
}
.ContentInside {
    display: inline-block;
    width: 100%;
}
.ContentInside .Content {
    display: inline-block;
    width: 100%;
    padding: 0px 0 14px 0;
}
.ContentInside h1 {
    height: 40px;
    display: inline-block;
    margin-bottom: 30px;
}
.ContentInside .Buttons {
    float: right;
    display: inline-flex;
    gap: 10px;
}
.ContentInside .Buttons .btn {
    width: 220px;
    margin-left: 0;
}
.ContentInside .TradingWidget {
    background: #1e222d;
    border: solid #434651 1px;
    height: 75px;
    border-radius: 8px;
    overflow: hidden;
}
.tradingview-widget-copyright {
    display: none !important;
}
.DashBoard {
    display: inline-block;
    width: 100%;
}
:root {
    --AuthBackground: url("../img/background.svg");
    --AuthBackgroundPosition: right bottom;
    --AuthBackgroundSize: auto 60%;
    --AuthLogo: none;
}
.LoginPage {
    /* Centred in the viewport, and scrolling only once the form really needs more than it */
    display: flex;
    align-items: safe center;
    width: 100%;
    min-height: 100%;
    background-image: var(--AuthBackground);
    background-repeat: no-repeat;
    background-position: var(--AuthBackgroundPosition) !important;
    background-size: var(--AuthBackgroundSize);
    background-attachment: fixed;
    overflow: hidden;
    padding-top: 25px;
    padding-bottom: 25px;
    padding-left: 270px;
    position: relative;
}
.LoginPage .FormDiv {
    width: 328px;
    display: inline-block;
    float: left;
    margin-right: 32px;
}
.LoginPage .Flex {
    display: inline-flex;
    width: 100%;
    align-items: center;
    height: 100%;
}
.LoginPage .Content {
    width: 100%;
}
.LoginPage .Form {
    display: inline-block;
    width: 100%;
}
.LoginPage .Form .Title {
    color: #fff;
    font-size: 32px;
    line-height: 55px;
    font-family: AvenirBold;
    text-align: center;
}
.form-group {
    margin-bottom: 14px;
}
.close {
    float: right;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    color: #000;
    text-shadow: 0 1px 0 #fff;
    opacity: .5;
    background-color: transparent;
    border: 0;
}
*:has(> .PwToggle) {
    position: relative;
}
.PwToggle {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    background: none;
    border: 0;
    padding: 4px 6px;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.55;
    z-index: 6;
}
.PwToggle:hover,
.PwToggle:focus-visible {
    opacity: 1;
    outline: none;
}
*:has(> .PwToggle) > .form-control,
*:has(> .PwToggle) > input {
    padding-right: 42px !important;
}
.LoginPage .form-group,
.LoginPage .input-group {
    position: relative;
}
.LoginPage .form-group > i.fas,
.LoginPage .input-group > i.fas {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    pointer-events: none;
    opacity: 0.68;
    font-size: 15px;
    z-index: 2;
}
.LoginPage .form-group:has(> i.fas) .form-control,
.LoginPage .input-group:has(> i.fas) .form-control {
    padding-left: 42px;
}
img[src*="flags/"] {
    width: 24px;
    height: 18px;
    object-fit: cover;
    border-radius: 3px;
}
.dropdown-menu img[src*="flags/"],
a.language img[src*="flags/"] {
    width: 24px;
    height: 18px;
}
img[src*="payments/"] {
    max-width: 54px;
    max-height: 54px;
    object-fit: contain;
}
@media (max-width: 1024px) {
    img[src*="payments/"] {
        max-width: 44px;
        max-height: 44px;
    }
}
@media (max-width: 992px) {
    h1 {
        font-size: 18px;
    }
    h1 i {
        font-size: 22px;
    }
    h2 {
        font-size: 18px;
    }
    .Sidebar {
        width: calc(100% - 60px);
        /* on a phone that leaves the usual 60px of page showing */
        max-width: 320px;
        position: absolute;
        z-index: 999999;
        left: -100%;
        transition: 0.3s;
        overflow-y: scroll;
        height: 100%;
        box-shadow: 0px -3px 15px rgba(0,0,0,1);
        padding-top: 30px;
        padding-bottom: 50px;
        background-image: linear-gradient(180deg, #333333 0%, #1A1A1A 100%);
    }
    .Sidebar .MainMenu ul li {
        margin-bottom: 5px;
        padding: 0 20px;
    }
    .Sidebar .MainMenu ul li a {
        padding-left: 22px;
        font-size: 16px;
        height: 52px;
        line-height: 52px;
    }
    .Sidebar .MainMenu ul li a span {
        font-size: 16px;
    }
    .Sidebar .Logo {
        margin-bottom: 45px;
        height: 52px;
    }
    .BurgerIcon {
        position: absolute;
        top: 18px;
        left: 16px;
        right: auto;
        z-index: 999999;
        width: 46px;
        height: 46px;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #141421;
        border: solid rgba(255, 255, 255, 0.22) 1px;
        border-radius: 100%;
        color: #FFFFFF;
        font-size: 18px;
        cursor: pointer;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }
    .BurgerIcon:hover,
    .BurgerIcon:focus-visible {
        background: #1E1E30;
        border-color: rgba(var(--ThemeBrightRgb), 0.6);
        color: var(--ThemeColorBright);
        outline: none;
    }
    .WhiteMode .BurgerIcon,
    .LightMode .BurgerIcon {
        background: var(--Card);
        border-color: var(--CardLine);
        color: rgba(27, 33, 41, 0.7);
    }
    .WhiteMode .BurgerIcon:hover,
    .LightMode .BurgerIcon:hover,
    .WhiteMode .BurgerIcon:focus-visible,
    .LightMode .BurgerIcon:focus-visible {
        background: rgba(25, 24, 41, 0.06);
        color: var(--BrandInk);
    }
    .BurgerIcon .Icon2 {
        display: none;
    }
    .ShowSidebar .BurgerIcon .Icon1 {
        display: none;
    }
    .ShowSidebar .BurgerIcon .Icon2 {
        display: inline-block;
    }
    .ShowSidebar {
        overflow: hidden;
    }
    .ShowSidebar .Sidebar {
        left: 0;
    }
    .ShowSidebar .BurgerIcon {
        left: auto;
        right: 7px;
    }
    /* Backdrop behind the open drawer - a tap on it closes the drawer */
    .ContentDiv:before {
        content: "";
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 999998;
        background: rgba(6, 6, 12, 0.45);
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    .ShowSidebar .ContentDiv:before {
        opacity: 1;
        visibility: visible;
    }
    .ContentDiv .Header {
        padding-left: 72px;
        padding-right: 0;
    }
    .ContentDiv {
        width: 100%;
        padding-left: 16px;
        padding-right: 16px;
    }
    .ContentInside {
        margin-top: 0 !important;
        padding-top: 0;
        padding-left: 0;
        padding-right: 0;
    }
    .ContentInside .Content {
        margin-top: 0 !important;
    }
    .ContentInside .Buttons {
        float: none;
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .ContentInside .Buttons .btn {
        width: 100%;
        margin-left: 0;
        margin-top: 0;
    }
    .PayIcons {
        text-align: center;
    }
    .PayIcons .Image {
        margin-left: 8px;
        margin-right: 8px;
    }
    .PayIcons .Image img {
        height: 32px;
    }
    .FormWidth .btn {
        width: 100%;
    }
    .LogOut .Info .Buttons {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        gap: 10px;
    }
    .LogOut .Info .Buttons .btn {
        width: 100%;
        max-width: 260px;
        margin-left: 0;
        margin-right: 0;
    }
    .FormHeight {
        height: auto;
    }
    .TextDiv .Item .btn {
        margin-top: 30px;
    }
    .LoginPage {
        padding-left: 25px;
        padding-right: 25px;
        background-size: auto 20%;
    }
    .LoginPage .FormDiv {
        width: 100%;
    }
    .LoginPage:after {
        width: 125px;
        height: 70px;
    }
    .LoginPage .btn {
        width: 100%;
    }
}
@media (min-width: 992px) {
    .HideDesktop {
        display: none !important;
    }
}
@media (min-width:1024px) and (max-width:1540px) {
    .LoginPage .Form {
        padding-right: 70px;
    }
    .Sidebar {
        width: 248px;
    }
    .ContentDiv {
        width: calc(100% - 248px);
    }
    .Sidebar .MainMenu ul li {
        padding: 0 14px;
    }
    .Sidebar .MainMenu ul li a {
        padding-left: 14px;
    }
}
.WhiteMode,
.LightMode {
    --Ground: #EEF1F7;
    --Card: #FFFFFF;
    --CardLine: rgba(25, 24, 41, 0.09);
    --Ink: #1B2129;
    --InkSoft: rgba(27, 33, 41, 0.62);
    --InkFaint: rgba(27, 33, 41, 0.42);
    --Line: rgba(25, 24, 41, 0.12);
    --Brand: var(--ThemeColor);
    --BrandInk: var(--ThemeColorOnLight);
}
.WhiteMode,
.LightMode {
    background: var(--Ground);
    background-image: none;
    color: var(--Ink);
}
.WhiteMode .MainDiv,
.LightMode .MainDiv {
    background: var(--Ground);
}
.WhiteMode h1,
.LightMode h1,
.WhiteMode h2,
.LightMode h2,
.WhiteMode h4,
.LightMode h4,
.WhiteMode h5,
.LightMode h5,
.WhiteMode h6,
.LightMode h6,
.WhiteMode .modal-title,
.LightMode .modal-title {
    color: var(--Ink);
}
.WhiteMode .Sidebar,
.LightMode .Sidebar {
    background: var(--Ground);
    background-image: none;
    border-right: 0;
}
.WhiteMode .Sidebar .MainMenu ul li a,
.LightMode .Sidebar .MainMenu ul li a {
    color: #3A4152;
}
.WhiteMode .Sidebar .MainMenu ul li a i,
.LightMode .Sidebar .MainMenu ul li a i {
    color: rgba(27, 33, 41, 0.55);
}
.WhiteMode .Sidebar .MainMenu ul li.active a,
.LightMode .Sidebar .MainMenu ul li.active a,
.WhiteMode .Sidebar .MainMenu ul li:hover a,
.LightMode .Sidebar .MainMenu ul li:hover a {
    background: rgba(var(--ThemeColorRgb), 0.1);
    color: var(--BrandInk);
}
.WhiteMode .Sidebar .MainMenu ul li.active a i,
.LightMode .Sidebar .MainMenu ul li.active a i,
.WhiteMode .Sidebar .MainMenu ul li:hover a i,
.LightMode .Sidebar .MainMenu ul li:hover a i {
    color: var(--BrandInk);
}
.WhiteMode .BurgerIcon,
.LightMode .BurgerIcon {
    color: var(--Ink);
}
.WhiteMode .FormWidth,
.LightMode .FormWidth,
.WhiteMode .TableContent,
.LightMode .TableContent,
.WhiteMode .ContentInside .card-body,
.LightMode .ContentInside .card-body {
    background: linear-gradient(180deg, #FFFFFF 0%, #F2F4FA 100%);
    border: solid var(--CardLine) 1px;
    box-shadow: 0 1px 2px rgba(20, 30, 45, 0.04);
    color: var(--Ink);
}
.WhiteMode .TableContent .FormWidth,
.LightMode .TableContent .FormWidth,
.WhiteMode .FormWidth .FormWidth,
.LightMode .FormWidth .FormWidth {
    border-color: transparent;
    box-shadow: none;
}
.WhiteMode .TextDiv,
.LightMode .TextDiv,
.WhiteMode .TextDiv .Item,
.LightMode .TextDiv .Item,
.WhiteMode .FormText p,
.LightMode .FormText p {
    color: var(--Ink);
}
.WhiteMode .FormText p,
.LightMode .FormText p {
    color: var(--InkSoft);
}
.WhiteMode .table thead,
.LightMode .table thead {
    border-bottom-color: var(--Line);
}
.WhiteMode .table thead tr th,
.LightMode .table thead tr th,
.WhiteMode .table tbody tr td,
.LightMode .table tbody tr td,
.WhiteMode .table tbody tr th,
.LightMode .table tbody tr th,
.WhiteMode .TableContent .Nohistoryyet,
.LightMode .TableContent .Nohistoryyet {
    color: var(--Ink);
}
.WhiteMode .table tbody tr td a:not(.btn),
.LightMode .table tbody tr td a:not(.btn) {
    color: var(--BrandInk);
}
.WhiteMode .form-control,
.LightMode .form-control {
    background-color: var(--Card);
    border: solid rgba(25, 24, 41, 0.22) 1px;
    color: #12131C;
}
.WhiteMode .form-control::-webkit-input-placeholder,
.LightMode .form-control::-webkit-input-placeholder {
    color: var(--InkFaint);
    opacity: 1;
}
.WhiteMode .form-control::-moz-placeholder,
.LightMode .form-control::-moz-placeholder {
    color: var(--InkFaint);
    opacity: 1;
}
.WhiteMode .form-control::placeholder,
.LightMode .form-control::placeholder {
    color: var(--InkFaint);
    opacity: 1;
}
.WhiteMode .form-control:focus,
.LightMode .form-control:focus {
    background-color: var(--Card);
    border: solid rgba(var(--ThemeColorRgb), 0.75) 1px;
    box-shadow: 0 0 0 3px rgba(var(--ThemeColorRgb), 0.14);
    color: #12131C;
}
.WhiteMode .CheckboxLabel,
.LightMode .CheckboxLabel {
    color: var(--Ink);
}
.WhiteMode .CheckboxLabel:before,
.LightMode .CheckboxLabel:before {
    border: solid rgba(25, 24, 41, 0.35) 1px;
}
.WhiteMode .LoginPage,
.LightMode .LoginPage {
    background-color: var(--Ground);
    color: var(--Ink);
}
.WhiteMode .LoginPage .Form .Title,
.LightMode .LoginPage .Form .Title {
    color: var(--Ink);
}
.WhiteMode .LoginPage .FormDiv,
.LightMode .LoginPage .FormDiv {
    color: var(--Ink);
}
.WhiteMode .LoginPage .form-control,
.LightMode .LoginPage .form-control {
    background-color: var(--Card);
    border: solid rgba(25, 24, 41, 0.22) 1px;
    color: #12131C;
}
.WhiteMode .LoginPage .form-control::-webkit-input-placeholder,
.LightMode .LoginPage .form-control::-webkit-input-placeholder,
.WhiteMode .LoginPage .form-control::-moz-placeholder,
.LightMode .LoginPage .form-control::-moz-placeholder,
.WhiteMode .LoginPage .form-control::placeholder,
.LightMode .LoginPage .form-control::placeholder {
    color: var(--InkFaint);
    opacity: 1;
}
.WhiteMode .LoginPage a:not(.btn),
.LightMode .LoginPage a:not(.btn) {
    color: var(--BrandInk);
}
.WhiteMode .LoginPage .FormText p,
.LightMode .LoginPage .FormText p {
    color: var(--InkSoft);
}
.WhiteMode .LogOut,
.LightMode .LogOut {
    background: rgba(20, 30, 45, 0.35);
}
.WhiteMode .LogOut .Info,
.LightMode .LogOut .Info {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.97) 26%, rgba(255, 255, 255, 0.97) 74%, rgba(255, 255, 255, 0) 100%);
    color: var(--Ink);
}
.WhiteMode .LogOut .Info .Icon,
.LightMode .LogOut .Info .Icon,
.WhiteMode .LogOut .Info .Text,
.LightMode .LogOut .Info .Text {
    color: var(--Ink);
}
.MainDiv .FormWidth label:not(.CheckboxLabel),
.MainDiv .form-group > label:not(.CheckboxLabel),
.LoginPage .form-group > label:not(.CheckboxLabel) {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-family: AvenirMedium;
    font-size: 13px;
    line-height: 18px;
    text-transform: none;
    letter-spacing: 0.01em;
}
.WhiteMode .MainDiv .FormWidth label:not(.CheckboxLabel),
.LightMode .MainDiv .FormWidth label:not(.CheckboxLabel),
.WhiteMode .MainDiv .form-group > label:not(.CheckboxLabel),
.LightMode .MainDiv .form-group > label:not(.CheckboxLabel),
.WhiteMode .LoginPage .form-group > label:not(.CheckboxLabel),
.LightMode .LoginPage .form-group > label:not(.CheckboxLabel) {
    color: rgba(25, 24, 41, 0.62);
}
.btn-sm,
.table .btn,
.table .btn-primary,
.table .btn-success,
.table .btn-warning,
.table .btn-default {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    line-height: 28px;
    font-size: 13px;
    padding: 0 12px;
    border-radius: 6px;
}
.MainDiv *:has(> .form-control ~ i.fas),
.LoginPage *:has(> .form-control ~ i.fas) {
    position: relative;
}
.MainDiv .form-control ~ i.fas,
.LoginPage .form-control ~ i.fas {
    position: absolute;
    top: auto;
    bottom: 0;
    /* the icon owns the whole 42px gutter and centres its glyph in it */
    left: 0;
    width: 42px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: none;
    pointer-events: none;
    opacity: 0.68;
    font-size: 15px;
    z-index: 2;
}
.MainDiv .form-control ~ .PwToggle,
.LoginPage .form-control ~ .PwToggle {
    top: auto;
    bottom: 0;
    height: 46px;
    display: flex;
    align-items: center;
    transform: none;
}
.MainDiv .pb-3 > .form-control ~ i.fas {
    bottom: 1rem;
}
.MainDiv .form-group:has(> small) > i.fas {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    display: block;
}
.MainDiv *:has(> .form-control ~ i.fas) > .form-control,
.LoginPage *:has(> .form-control ~ i.fas) > .form-control {
    padding-left: 42px;
}
select.form-control {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-right: 38px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23FFFFFF' stroke-opacity='0.55' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
}
.WhiteMode select.form-control,
.LightMode select.form-control {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23191829' stroke-opacity='0.6' stroke-width='1.6' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
}
select.form-control option {
    background-color: #16161F;
    color: #ECECEC;
}
.WhiteMode select.form-control option,
.LightMode select.form-control option {
    background-color: #FFFFFF;
    color: #191829;
}
select.form-control:has(> option[value=""]:checked),
input[type="date"].IsEmpty {
    color: rgba(255, 255, 255, 0.38);
}
.WhiteMode select.form-control:has(> option[value=""]:checked),
.LightMode select.form-control:has(> option[value=""]:checked),
.WhiteMode input[type="date"].IsEmpty,
.LightMode input[type="date"].IsEmpty {
    color: rgba(25, 24, 41, 0.42);
}
.form-control:disabled,
.form-control[readonly] {
    background-color: rgba(255, 255, 255, 0.04);
    border-color: rgba(195, 216, 219, 0.18);
    color: rgba(255, 255, 255, 0.45);
    cursor: not-allowed;
}
.WhiteMode .form-control:disabled,
.LightMode .form-control:disabled,
.WhiteMode .form-control[readonly],
.LightMode .form-control[readonly] {
    background-color: rgba(25, 24, 41, 0.06);
    border-color: rgba(25, 24, 41, 0.22);
    color: rgba(25, 24, 41, 0.5);
}
.table tbody tr th {
    color: #ECECEC;
    font-family: AvenirMedium;
    font-size: 14px;
    line-height: 22px;
    padding: 12px .5rem;
    vertical-align: middle;
}
h4,
.modal-title {
    font-size: 17px;
    line-height: 24px;
}
.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2A2F3E;
    border: none;
    color: #D8DEEE;
    height: 38px;
    line-height: 36px;
    font-size: 15px;
    padding: 0 18px;
    border-radius: 8px;
}
.MainDiv .ContentInside,
.MainDiv .FormWidth,
.MainDiv .TableContent,
.MainDiv .card-body,
.MainDiv .DashBoard {
    color: #ECECEC;
}
.WhiteMode .MainDiv .ContentInside,
.LightMode .MainDiv .ContentInside,
.WhiteMode .MainDiv .FormWidth,
.LightMode .MainDiv .FormWidth,
.WhiteMode .MainDiv .TableContent,
.LightMode .MainDiv .TableContent,
.WhiteMode .MainDiv .card-body,
.LightMode .MainDiv .card-body,
.WhiteMode .MainDiv .DashBoard,
.LightMode .MainDiv .DashBoard {
    color: #191829;
}
.form-control[readonly] {
    color: rgba(255, 255, 255, 0.78);
}
.WhiteMode .form-control[readonly],
.LightMode .form-control[readonly] {
    color: rgba(25, 24, 41, 0.78);
}
.MainDiv .input-group .btn,
.LoginPage .input-group .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 46px;
    line-height: 44px;
    padding: 0 14px;
}
.MainDiv .FormWidth.mt-5,
.MainDiv .TableDiv + .row .FormWidth.mt-5 {
    margin-top: 20px !important;
}
.cancelWD,
.btn-warning.cancelWD {
    background: #A33342 !important;
    background-image: none !important;
    border: none !important;
    color: #FFE8EB !important;
}
.cancelWD:hover,
.cancelWD:focus {
    background: #BB3A4B !important;
    color: #FFFFFF !important;
}
.WhiteMode .cancelWD,
.LightMode .cancelWD,
.WhiteMode .btn-warning.cancelWD,
.LightMode .btn-warning.cancelWD {
    background: #CB4155 !important;
    border: none !important;
    color: #FFFFFF !important;
}
.WhiteMode .cancelWD:hover,
.LightMode .cancelWD:hover,
.WhiteMode .cancelWD:focus,
.LightMode .cancelWD:focus {
    background: #D84E62 !important;
    color: #FFFFFF !important;
}
.MainDiv .alert-danger,
.LoginPage .alert-danger {
    background: rgba(224, 87, 107, 0.12);
    border: solid rgba(224, 87, 107, 0.35) 1px;
    border-radius: 8px;
    padding: 12px 16px;
    color: #F0A6AF;
    font-family: AvenirMedium;
    font-size: 14px;
    line-height: 20px;
}
.MainDiv .alert-danger strong,
.LoginPage .alert-danger strong {
    color: #FF8D9B;
    margin-right: 6px;
    font-family: AvenirBold;
}
.WhiteMode .MainDiv .alert-danger,
.LightMode .MainDiv .alert-danger,
.WhiteMode .LoginPage .alert-danger,
.LightMode .LoginPage .alert-danger {
    background: rgba(190, 45, 65, 0.1);
    border-color: rgba(190, 45, 65, 0.4);
    color: #8E1F2E;
}
.WhiteMode .MainDiv .alert-danger strong,
.LightMode .MainDiv .alert-danger strong,
.WhiteMode .LoginPage .alert-danger strong,
.LightMode .LoginPage .alert-danger strong {
    color: #7A1725;
}
.PwToggle,
.LoginPage .form-group > i.fas,
.LoginPage .input-group > i.fas,
.LoginPage .form-control ~ i.fas,
.MainDiv .form-control ~ i.fas,
.MainDiv .form-group > i.fas,
.MainDiv .input-group > i.fas {
    color: rgba(255, 255, 255, 0.62);
    opacity: 1;
}
.PwToggle:hover,
.PwToggle:focus-visible {
    color: rgba(255, 255, 255, 0.92);
    opacity: 1;
}
.MainDiv *:has(> .form-control:disabled) > i.fas,
.MainDiv *:has(> .form-control[readonly]) > i.fas {
    color: rgba(255, 255, 255, 0.35);
}
.WhiteMode .PwToggle,
.LightMode .PwToggle,
.WhiteMode .LoginPage .form-group > i.fas,
.LightMode .LoginPage .form-group > i.fas,
.WhiteMode .LoginPage .input-group > i.fas,
.LightMode .LoginPage .input-group > i.fas,
.WhiteMode .LoginPage .form-control ~ i.fas,
.LightMode .LoginPage .form-control ~ i.fas,
.WhiteMode .MainDiv .form-control ~ i.fas,
.LightMode .MainDiv .form-control ~ i.fas,
.WhiteMode .MainDiv .form-group > i.fas,
.LightMode .MainDiv .form-group > i.fas,
.WhiteMode .MainDiv .input-group > i.fas,
.LightMode .MainDiv .input-group > i.fas {
    color: rgba(25, 24, 41, 0.55);
}
.WhiteMode .PwToggle:hover,
.LightMode .PwToggle:hover,
.WhiteMode .PwToggle:focus-visible,
.LightMode .PwToggle:focus-visible {
    color: rgba(25, 24, 41, 0.9);
}
.WhiteMode .MainDiv *:has(> .form-control:disabled) > i.fas,
.LightMode .MainDiv *:has(> .form-control:disabled) > i.fas,
.WhiteMode .MainDiv *:has(> .form-control[readonly]) > i.fas,
.LightMode .MainDiv *:has(> .form-control[readonly]) > i.fas {
    color: rgba(25, 24, 41, 0.35);
}
.MainDiv .ProviderList {
    max-width: 420px;
    margin: 0 auto;
    padding: 4px 0 14px;
}
.MainDiv .ProviderList .form-group {
    margin-bottom: 0;
    padding: 14px 0;
    text-align: center;
}
.MainDiv .ProviderList a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #ECECEC;
    font-family: AvenirMedium;
    font-size: 16px;
    text-decoration: none;
    transition: color 0.2s ease;
}
.MainDiv .ProviderList a:hover,
.MainDiv .ProviderList a:focus-visible {
    color: var(--ThemeColorBright);
}
.MainDiv .ProviderList img {
    max-height: 30px;
    width: auto;
}
.MainDiv .ProviderList img.ProviderIcon {
    filter: brightness(0) invert(1);
    opacity: 0.85;
    background: none;
    padding: 0;
}
.MainDiv .ProviderList hr {
    margin: 0;
    border: 0;
    border-top: solid rgba(195, 216, 219, 0.18) 1px;
    opacity: 1;
}
.MainDiv .ProviderList hr:last-child {
    display: none;
}
.MainDiv .ProviderList h3 {
    margin: 0;
    padding: 18px 0;
    color: rgba(255, 255, 255, 0.75);
    font-size: 17px;
    text-align: center;
}
.WhiteMode .MainDiv .ProviderList a,
.LightMode .MainDiv .ProviderList a {
    color: #191829;
}
.WhiteMode .MainDiv .ProviderList a:hover,
.LightMode .MainDiv .ProviderList a:hover,
.WhiteMode .MainDiv .ProviderList a:focus-visible,
.LightMode .MainDiv .ProviderList a:focus-visible {
    color: var(--ThemeColorOnLight);
}
.WhiteMode .MainDiv .ProviderList img.ProviderIcon,
.LightMode .MainDiv .ProviderList img.ProviderIcon {
    filter: none;
    opacity: 0.85;
}
.WhiteMode .MainDiv .ProviderList hr,
.LightMode .MainDiv .ProviderList hr {
    border-top-color: rgba(25, 24, 41, 0.18);
}
.WhiteMode .MainDiv .ProviderList h3,
.LightMode .MainDiv .ProviderList h3 {
    color: rgba(25, 24, 41, 0.75);
}
.ThemeDatePicker {
    position: fixed;
    z-index: 1200;
    display: none;
    width: 268px;
    padding: 12px;
    background: var(--PickerSurface);
    border: solid var(--PickerLine) 1px;
    border-radius: 12px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45);
    color: var(--PickerText);
    font-family: AvenirMedium;
    font-size: 13px;
    line-height: 20px;
    user-select: none;
}
.ThemeDatePicker.open {
    display: block;
}
.ThemeDatePickerHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.ThemeDatePickerTitle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: AvenirBold;
    font-size: 14px;
}

.ThemeDatePickerMonth,
.ThemeDatePickerYear {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    max-width: 112px;
    height: 28px;
    padding: 0 18px 0 8px;
    background-color: transparent;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23808080' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 5px center;
    background-size: 9px 6px;
    border: 1px solid var(--PickerLine);
    border-radius: 8px;
    color: var(--PickerText);
    font: inherit;
    line-height: 1;
    cursor: pointer;
}
.ThemeDatePickerYear {
    max-width: 62px;
}
.ThemeDatePickerMonth:hover,
.ThemeDatePickerYear:hover,
.ThemeDatePickerMonth:focus,
.ThemeDatePickerYear:focus {
    background-color: var(--PickerHover);
    outline: none;
}
.ThemeDatePickerMonth option,
.ThemeDatePickerYear option {
    background: var(--PickerSurface);
    color: var(--PickerText);
}
.ThemeDatePickerStep {
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: solid var(--PickerLine) 1px;
    border-radius: 8px;
    color: var(--PickerText);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}
/* the month arrows are icons, not the < and > characters: those sit on the
   font's maths axis, which rides above the middle of the button */
.ThemeDatePickerStep i {
    font-size: 12px;
    line-height: 1;
}
.ThemeDatePickerStep:hover {
    background: var(--PickerHover);
}
.ThemeDatePickerDays,
.ThemeDatePickerGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.ThemeDatePickerDays span {
    padding: 4px 0;
    text-align: center;
    font-family: AvenirBold;
    font-size: 11px;
    opacity: 0.55;
}
.ThemeDatePickerDay {
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 8px;
    color: inherit;
    font-size: 13px;
    cursor: pointer;
}
.ThemeDatePickerDay:hover:not(:disabled) {
    background: var(--PickerHover);
}
.ThemeDatePickerDay.outside {
    opacity: 0.35;
}
.ThemeDatePickerDay.today:not(.chosen) {
    box-shadow: inset 0 0 0 1px var(--PickerLine);
}
.ThemeDatePickerDay.chosen {
    background: var(--PickerAccent);
    color: var(--PickerOnAccent);
    font-family: AvenirBold;
}
.ThemeDatePickerDay:disabled {
    opacity: 0.25;
    cursor: default;
}
.ThemeDatePickerFoot {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    padding-top: 8px;
    border-top: solid var(--PickerLine) 1px;
}
.ThemeDatePickerFoot button {
    padding: 4px 10px;
    background: transparent;
    border: 0;
    border-radius: 7px;
    color: var(--PickerAccent);
    font-family: AvenirBold;
    font-size: 12px;
    cursor: pointer;
}
.ThemeDatePickerFoot button:hover {
    background: var(--PickerHover);
}
:root {
    --PickerSurface: #1A1A23;
    --PickerLine: rgba(255, 255, 255, 0.14);
    --PickerText: #ECECEC;
    --PickerHover: rgba(255, 255, 255, 0.08);
    --PickerAccent: var(--ThemeColorHover);
    --PickerOnAccent: #FFFFFF;
}
.WhiteMode,
.LightMode {
    --PickerSurface: #FFFFFF;
    --PickerLine: rgba(25, 24, 41, 0.14);
    --PickerText: #191829;
    --PickerHover: rgba(25, 24, 41, 0.07);
    --PickerAccent: var(--ThemeColor);
}
input[type="date"]::-webkit-calendar-picker-indicator {
    display: none;
}
input[type="date"] {
    cursor: pointer;
}
.SelectStyle2 {
    position: relative;
}
.LoginPage i.fa-caret-down,
.MainDiv i.fa-caret-down {
    display: none;
}
.form-control,
select.form-control,
textarea.form-control {
    line-height: normal;
    padding-top: 0;
    padding-bottom: 0;
}
textarea.form-control {
    padding-top: 12px;
    padding-bottom: 12px;
    line-height: 22px;
    height: auto;
}
select.form-control {
    display: flex;
    align-items: center;
}
input[type="date"].form-control::-webkit-datetime-edit {
    line-height: normal;
}
.CheckboxLabel {
    display: inline-block;
    position: relative;
    vertical-align: middle;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 28px;
    line-height: 20px;
}
.CheckboxLabel:before {
    position: absolute;
    top: 1px;
    left: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    line-height: 16px;
    text-align: center;
    padding-left: 0;
}
.MainDiv .form-group:not(:has(> input[type="checkbox"])) .FieldError,
.MainDiv .input-group:not(:has(> input[type="checkbox"])) .FieldError,
.LoginPage .form-group:not(:has(> input[type="checkbox"])) .FieldError,
.LoginPage .input-group:not(:has(> input[type="checkbox"])) .FieldError {
    top: auto;
    bottom: calc(100% + 7px);
    right: 0;
    left: auto;
    transform: none;
    z-index: 40;
}
.MainDiv .form-group:not(:has(> input[type="checkbox"])) .FieldError::before,
.MainDiv .input-group:not(:has(> input[type="checkbox"])) .FieldError::before,
.LoginPage .form-group:not(:has(> input[type="checkbox"])) .FieldError::before,
.LoginPage .input-group:not(:has(> input[type="checkbox"])) .FieldError::before {
    top: auto;
    bottom: -5px;
    left: auto;
    right: 14px;
    margin-top: 0;
    border-left: 0;
    border-top: 0;
    border-right: solid #e04343 1px;
    border-bottom: solid #e04343 1px;
}
/* A group with a label is tall enough to carry the message itself */
.MainDiv .form-group:has(> label):not(:has(> input[type="checkbox"])) .FieldError {
    top: -10px;
    bottom: auto;
}
.MainDiv .form-group:has(> input[type="checkbox"]) .FieldError,
.LoginPage .form-group:has(> input[type="checkbox"]) .FieldError {
    top: -3px;
    bottom: auto;
    left: auto;
    right: 0;
    transform: none;
}
.MainDiv .form-group:has(> input[type="checkbox"]) .FieldError::before,
.LoginPage .form-group:has(> input[type="checkbox"]) .FieldError::before {
    top: 15px;
    bottom: auto;
    left: -5px;
    right: auto;
    margin-top: -4px;
    border-left: solid #e04343 1px;
    border-bottom: solid #e04343 1px;
    border-top: 0;
    border-right: 0;
}
.MainDiv .form-control.FieldInvalid,
.LoginPage .form-control.FieldInvalid,
.MainDiv select.form-control.FieldInvalid,
.LoginPage select.form-control.FieldInvalid {
    border-color: #e04343 !important;
    box-shadow: 0 0 0 2px rgba(224, 67, 67, 0.18) !important;
}
.WhiteMode .FieldError,
.LightMode .FieldError {
    background-color: #FDECEC;
    border-color: #D93636;
    color: #A3201F;
    box-shadow: 0 8px 22px rgba(20, 30, 45, 0.16);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23d93636'%3E%3Cpath d='M8 1.5 15 14H1L8 1.5zm0 4.2a.8.8 0 0 0-.8.85l.2 3.1a.6.6 0 0 0 1.2 0l.2-3.1A.8.8 0 0 0 8 5.7zm0 5.2a.85.85 0 1 0 0 1.7.85.85 0 0 0 0-1.7z'/%3E%3C/svg%3E");
}
.WhiteMode .FieldError::before,
.LightMode .FieldError::before,
.WhiteMode .MainDiv .form-group .FieldError::before,
.LightMode .MainDiv .form-group .FieldError::before,
.WhiteMode .LoginPage .form-group .FieldError::before,
.LightMode .LoginPage .form-group .FieldError::before,
.WhiteMode .MainDiv .form-group:has(> input[type="checkbox"]) .FieldError::before,
.LightMode .MainDiv .form-group:has(> input[type="checkbox"]) .FieldError::before,
.WhiteMode .LoginPage .form-group:has(> input[type="checkbox"]) .FieldError::before,
.LightMode .LoginPage .form-group:has(> input[type="checkbox"]) .FieldError::before {
    background: #FDECEC;
    border-color: #D93636;
}
.LoginPage .FormDiv {
    min-height: 330px;
}
.LoginPage .FormNotice {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 12px 15px;
    border: solid rgba(195, 216, 219, 0.3) 1px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.03);
}
.LoginPage .FormNotice p {
    margin: 0;
}
.LoginPage .FormNotice i {
    flex: 0 0 auto;
    color: rgba(255, 255, 255, 0.55);
    font-size: 18px;
}
.WhiteMode .LoginPage .FormNotice,
.LightMode .LoginPage .FormNotice {
    border-color: rgba(25, 24, 41, 0.18);
    background: rgba(25, 24, 41, 0.03);
}
.WhiteMode .LoginPage .FormNotice i,
.LightMode .LoginPage .FormNotice i {
    color: rgba(25, 24, 41, 0.5);
}
.LoginPage .row > form,
.MainDiv .row > form {
    padding-left: 0;
    padding-right: 0;
}
.AuthControls {
    position: absolute;
    top: 20px;
    right: clamp(16px, 6vw, 120px);
    z-index: 100;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.ThemeToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 34px;
    padding: 0;
    background: rgba(255, 255, 255, 0.06);
    border: solid rgba(255, 255, 255, 0.14) 1px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 15px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.ThemeToggle:hover,
.ThemeToggle:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    outline: none;
}
.WhiteMode .ThemeToggle,
.LightMode .ThemeToggle {
    background: rgba(25, 24, 41, 0.04);
    border-color: rgba(25, 24, 41, 0.14);
    color: rgba(27, 33, 41, 0.7);
}
.WhiteMode .ThemeToggle:hover,
.LightMode .ThemeToggle:hover,
.WhiteMode .ThemeToggle:focus-visible,
.LightMode .ThemeToggle:focus-visible {
    background: rgba(25, 24, 41, 0.09);
    color: #1B2129;
}
@media (max-width: 767.98px) {
    .AuthControls {
        top: 12px;
        right: 16px;
    }
    .LoginPage {
        padding-top: 78px;
    }
}
.LightMode body,
.LightMode body.LoginBody {
    background: var(--Ground);
    background-image: none;
    color: var(--Ink);
}
.WhiteMode .CheckboxLabel a,
.LightMode .CheckboxLabel a,
.WhiteMode .FormText p a,
.LightMode .FormText p a {
    color: var(--ThemeColorOnLight);
}
.WhiteMode .ContentInside .TradingWidget,
.LightMode .ContentInside .TradingWidget {
    background: #F7F8FC;
    border-color: rgba(25, 24, 41, 0.12);
}
.LoginPage .AuthLogo {
    display: var(--AuthLogo);
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: var(--AuthLogoWidth, 220px);
    height: var(--AuthLogoHeight, 64px);
    margin: 0 0 22px;
    overflow: hidden;
}
.LoginPage .AuthLogo a {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
}
.LoginPage .AuthLogo img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
.TableContent,
.FormWidth,
.ContentInside .card-body {
    background: linear-gradient(180deg, #333333 0%, #1A1A1A 100%);
    border-radius: 8px;
    padding: 22px;
}
.TableContent .FormWidth,
.FormWidth .FormWidth,
.TableContent .card-body,
.FormWidth .card-body {
    background: none;
    padding: 0;
    border-radius: 0;
}
.WhiteMode .TableContent .FormWidth,
.LightMode .TableContent .FormWidth,
.WhiteMode .FormWidth .FormWidth,
.LightMode .FormWidth .FormWidth,
.WhiteMode .TableContent .card-body,
.LightMode .TableContent .card-body {
    background: none;
    border-color: transparent;
    box-shadow: none;
}
.ContentInside > .Content,
.ContentInside > .row,
.ContentInside > .Content > .row:first-child,
.TableContent > .row:first-child {
    margin-top: 0 !important;
}
.ContentInside h1:first-child,
.ContentInside h2:first-child,
.ContentInside .Content > h1:first-child,
.ContentInside .Content > h2:first-child,
.ContentInside .row:first-child h1,
.ContentInside .row:first-child h2,
.ContentInside .row:first-child h4,
.TableContent .row:first-child h1,
.TableContent .row:first-child h2,
.TableContent .row:first-child h4 {
    margin-top: 0;
    margin-bottom: 0;
}
.ContentInside > .row > [class*="col-"] > .TableDiv > .TableContent,
.ContentInside .Content .TableContent {
    margin-top: 18px;
}
.WhiteMode .LoginPage a:not(.btn):not(.PwToggle):not(.dropdown-toggle):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.language):not(.Logo a):not(:has(img)):not(.Sidebar a):not(.sidebar a):not(.sidenav a):not(.MainMenu a):not(.menu a):not(.table a):not(.TableTabs a):not(.Language a):not(.navbar a),
.LightMode .LoginPage a:not(.btn):not(.PwToggle):not(.dropdown-toggle):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.page-link):not(.language):not(.Logo a):not(:has(img)):not(.Sidebar a):not(.sidebar a):not(.sidenav a):not(.MainMenu a):not(.menu a):not(.table a):not(.TableTabs a):not(.Language a):not(.navbar a),
.WhiteMode .LoginPage .FormText p a,
.LightMode .LoginPage .FormText p a {
    color: var(--ThemeColorOnLight);
}
.ContentDiv .Header .HeadButtons {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.HeadBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    padding: 0;
    background: #141421;
    border: solid rgba(255, 255, 255, 0.22) 1px;
    border-radius: 100%;
    color: #FFFFFF;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.HeadBtn:hover,
.HeadBtn:focus-visible {
    background: #1E1E30;
    border-color: rgba(var(--ThemeBrightRgb), 0.6);
    color: var(--ThemeColorBright);
    outline: none;
}
.LangPick {
    position: relative;
    display: inline-flex;
}
.LangBtn {
    position: relative;
    overflow: hidden;
}
.LangBtn i,
.LangBtn img.LangFlagNow {
    transition: opacity 0.2s ease;
}
.LangBtn img.LangFlagNow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: 0;
    border-radius: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
}
.LangBtn:hover img.LangFlagNow,
.LangBtn:focus-visible img.LangFlagNow {
    opacity: 1;
}
.LangBtn:hover i,
.LangBtn:focus-visible i {
    opacity: 0;
}
.LangModal {
    position: fixed;
    inset: 0;
    z-index: 1400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(8, 8, 14, 0.62);
    text-align: left;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
}
.LangPick.Open .LangModal {
    visibility: visible;
    opacity: 1;
}
.LangCard {
    width: 100%;
    max-width: 420px;
    padding: 22px;
    background: linear-gradient(180deg, #333333 0%, #1A1A1A 100%);
    border: solid rgba(255, 255, 255, 0.1) 1px;
    border-radius: 12px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.LangHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    color: #ECECEC;
    font-family: AvenirBold;
    font-size: 17px;
    line-height: 24px;
}
.LangClose {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 15px;
    cursor: pointer;
}
.LangClose:hover,
.LangClose:focus-visible {
    background: rgba(255, 255, 255, 0.08);
    color: #FFFFFF;
    outline: none;
}
.LangGrid {
    --LangRow: 60px;
    --LangGap: 8px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-content: start;
    gap: var(--LangGap);
    min-height: calc(var(--LangRow) * 2 + var(--LangGap));
    max-height: calc(var(--LangRow) * 6 + var(--LangGap) * 5);
    max-height: min(calc(var(--LangRow) * 6 + var(--LangGap) * 5), 52vh);
    overflow-y: auto;
}
.LangGrid a.language {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border: solid transparent 1px;
    border-radius: 10px;
    color: #ECECEC;
    font-family: AvenirMedium;
    font-size: 14px;
    text-decoration: none;
}
.LangGrid a.language:hover,
.LangGrid a.language:focus-visible {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(var(--ThemeBrightRgb), 0.45);
    color: #FFFFFF;
    text-decoration: none;
    outline: none;
}
.LangGrid a.language.Current {
    background: rgba(var(--ThemeTintRgb), 0.14);
    border-color: rgba(var(--ThemeBrightRgb), 0.5);
}
.LangGrid .Flag {
    display: inline-flex;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 100%;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.LangGrid .Flag img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.LangGrid .Name {
    flex: 1 1 auto;
    line-height: 18px;
}
@media (max-width: 575.98px) {
    .LangGrid {
        grid-template-columns: minmax(0, 1fr);
    }
}
.WhiteMode .HeadBtn,
.LightMode .HeadBtn {
    background: var(--Card);
    border: solid var(--CardLine) 1px;
    color: rgba(27, 33, 41, 0.7);
}
.WhiteMode .HeadBtn:hover,
.WhiteMode .HeadBtn:focus-visible,
.LightMode .HeadBtn:hover,
.LightMode .HeadBtn:focus-visible {
    background: rgba(25, 24, 41, 0.06);
    color: var(--BrandInk);
}
.WhiteMode .LangModal,
.LightMode .LangModal {
    background: rgba(20, 30, 45, 0.38);
}
.WhiteMode .LangCard,
.LightMode .LangCard {
    background: linear-gradient(180deg, #FFFFFF 0%, #F2F4FA 100%);
    border-color: rgba(25, 24, 41, 0.12);
    box-shadow: 0 24px 60px rgba(20, 30, 45, 0.22);
}
.WhiteMode .LangHead,
.LightMode .LangHead {
    color: var(--Ink);
}
.WhiteMode .LangClose,
.LightMode .LangClose {
    color: rgba(27, 33, 41, 0.55);
}
.WhiteMode .LangClose:hover,
.WhiteMode .LangClose:focus-visible,
.LightMode .LangClose:hover,
.LightMode .LangClose:focus-visible {
    background: rgba(25, 24, 41, 0.07);
    color: var(--Ink);
}
.WhiteMode .LangGrid a.language,
.LightMode .LangGrid a.language {
    color: rgba(27, 33, 41, 0.85);
}
.WhiteMode .LangGrid a.language:hover,
.WhiteMode .LangGrid a.language:focus-visible,
.LightMode .LangGrid a.language:hover,
.LightMode .LangGrid a.language:focus-visible {
    background: rgba(25, 24, 41, 0.05);
    border-color: rgba(var(--ThemeOnLightRgb), 0.45);
    color: #1B2129;
}
.WhiteMode .LangGrid a.language.Current,
.LightMode .LangGrid a.language.Current {
    background: rgba(var(--ThemeColorRgb), 0.1);
    border-color: rgba(var(--ThemeOnLightRgb), 0.45);
}
.WhiteMode .LangGrid .Flag,
.LightMode .LangGrid .Flag {
    box-shadow: 0 0 0 1px rgba(25, 24, 41, 0.16);
}
.ContentInside > .row.rowflex:first-child,
.ContentInside .Content > .row.rowflex:first-child,
.TableContent > .row.rowflex:first-child {
    align-items: flex-start;
    margin-left: 0;
    margin-right: 0;
}
.ContentInside > .row.rowflex:first-child > [class*="col-"],
.ContentInside .Content > .row.rowflex:first-child > [class*="col-"],
.TableContent > .row.rowflex:first-child > [class*="col-"] {
    padding-left: 0;
    padding-right: 0;
}
.LangGrid a.language .Flag img[src*="flags/"],
.LangGrid .Flag img {
    width: 100%;
    height: 100%;
    border-radius: 0;
    object-fit: cover;
}
table tbody {
    counter-reset: tableRow;
}
table tbody tr {
    counter-increment: tableRow;
}
table tbody .counterCell::before {
    content: counter(tableRow);
}
.deposit-links {
    list-style: none;
    padding: 0;
}
.deposit-links li {
    margin-bottom: 5px;
}
.deposit-links li a {
    color: #ffffff;
    font-size: large;
    text-decoration: none;
    font-weight: bold;
}
.deposit-links li a:hover {
    color: #a2d9ff;
    text-decoration: underline;
}
html:has(.PaymentFrame),
body:has(.PaymentFrame) {
    margin: 0;
    padding: 0;
    height: 100%;
}
body:has(.PaymentFrame) {
    background-color: #fff0 !important;
}
html:has(.PaymentFrameScroll),
body:has(.PaymentFrameScroll) {
    overflow: scroll;
}
html:has(.PaymentFrameFixed),
body:has(.PaymentFrameFixed) {
    overflow: hidden;
}
.PaymentFrame {
    min-width: 100%;
}
.PaymentFrame iframe {
    border-width: 0;
}
.PaymentFrameScroll iframe {
    padding-top: 100px;
}
.FormTextIndent {
    margin-left: 28%;
}
.ColCenter {
    float: none;
    margin: 0 auto;
}
.ContactPanel {
    height: auto;
}
.InlineField {
    display: inline-block;
}
.FieldHalf {
    width: 50%;
    margin-right: 10px;
}
.RefLinkField {
    padding-top: 9px;
}
.LabelSpacer {
    display: block;
}
.StarAlert {
    color: red;
}
.submitfile {
    border-radius: 1px;
    height: 100%;
}
.ColPadTop {
    padding-top: 25px;
}
.TextAlert {
    color: red;
}
.SectionPadTop {
    padding-top: 7px;
}
.SwalForm {
    text-align: initial;
}
.TradeFrame {
    width: 100%;
    height: 100%;
}
.Hidden {
    display: none;
}
.ErrorArt .white_page {
    fill: #fff;
}
.ErrorArt .dark_gray_page {
    fill: #a9a9a9;
}
.ErrorArt .medium_gray {
    fill: #ccc;
}
.ErrorArt .light_orange {
    fill: #fca671;
}
.ErrorArt .orange {
    fill: #e96019;
}
.ErrorArt .top-martini {
    fill: #fdd2b8;
}
.ErrorArt .dark_navy {
    fill: #1b2c3d;
}
.ErrorArt .green {
    fill: #a48801;
}
.ErrorArt .med-blue {
    fill: #395d6d;
}
.ErrorArt .light-blue {
    fill: #e8eaec;
}
.ErrorArt .extra-light-o {
    fill: #fce7dc;
}
.ErrorArt .extra2-light-o {
    fill: #fff2ea;
}
.ErrorArt .navy-light {
    fill: #495664;
}
.ErrorArt .light-green {
    fill: #bfac4d;
}
.ErrorArt .light-bubbles {
    fill: #e1e7e9;
}
.table {
    --bs-table-bg: transparent;
    --bs-table-color: #212529;
}
:root {
    --bs-card-spacer-y: 1rem;
    --bs-card-spacer-x: 1rem;
    --bs-dropdown-item-padding-y: 0.25rem;
    --bs-dropdown-item-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.5rem;
    --bs-nav-link-padding-x: 1rem;
}
:root {
    --bs-emphasis-color: #212529;
    --bs-secondary-color: #6c757d;
    --bs-border-radius: 0.25rem;
}
.table {
    color: var(--bs-table-color);
}

.DlgOverlay {
    --Dlg-backdrop: rgba(0, 0, 0, 0.45);
    --Dlg-bg: #ffffff;
    --Dlg-fg: #212529;
    --Dlg-muted: #6c757d;
    --Dlg-radius: 6px;
    --Dlg-width: 420px;
    --Dlg-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
    --Dlg-line: rgba(0, 0, 0, 0.12);
    --Dlg-success: #2eb85c;
    --Dlg-error: #e04343;
    --Dlg-warning: #f0ad4e;
    --Dlg-info: #3aa0dd;
    --Dlg-question: #9aa0a6;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    display: flex;
    padding: 24px;
    background: var(--Dlg-backdrop);
    opacity: 0;
    transition: opacity 0.15s ease;
}
.DlgOverlay.is-open {
    opacity: 1;
}
.DlgPos--center {
    align-items: center;
    justify-content: center;
}
.DlgPos--top {
    align-items: flex-start;
    justify-content: center;
}
.DlgPos--top-start {
    align-items: flex-start;
    justify-content: flex-start;
}
.DlgPos--top-end {
    align-items: flex-start;
    justify-content: flex-end;
}
.DlgPos--bottom {
    align-items: flex-end;
    justify-content: center;
}
.DlgPos--bottom-start {
    align-items: flex-end;
    justify-content: flex-start;
}
.DlgPos--bottom-end {
    align-items: flex-end;
    justify-content: flex-end;
}
.DlgBox {
    width: 100%;
    max-width: var(--Dlg-width);
    padding: 28px 24px 22px;
    background: var(--Dlg-bg);
    color: var(--Dlg-fg);
    border: solid var(--Dlg-line) 1px;
    border-radius: var(--Dlg-radius);
    box-shadow: var(--Dlg-shadow);
    text-align: center;
    transform: translateY(-10px) scale(0.97);
    transition: transform 0.16s ease;
}
.DlgOverlay.is-open .DlgBox {
    transform: none;
}
.DlgIcon {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
}
.DlgIcon svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.DlgIcon svg circle:first-child {
    opacity: 0.3;
}
.DlgIcon--success svg {
    stroke: var(--Dlg-success);
}
.DlgIcon--error svg {
    stroke: var(--Dlg-error);
}
.DlgIcon--warning svg {
    stroke: var(--Dlg-warning);
}
.DlgIcon--info svg {
    stroke: var(--Dlg-info);
}
.DlgIcon--question svg {
    stroke: var(--Dlg-question);
}
.DlgImage {
    display: block;
    max-width: 100%;
    margin: 0 auto 16px;
}
.DlgTitle {
    margin: 0 0 8px;
    font-size: 22px;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}
.DlgText {
    margin: 0;
    font-size: 15px;
    line-height: 1.5;
    color: var(--Dlg-muted);
}
.DlgActions {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-top: 22px;
}
.DlgBtn {
    min-width: 96px;
    cursor: pointer;
}
@media (max-width: 575.98px) {
    .DlgBox {
        padding: 22px 18px 18px;
    }
    .DlgTitle {
        font-size: 19px;
    }
    .DlgIcon {
        width: 60px;
        height: 60px;
    }
}

/* Bootstrap gives .input-group > :not(:first-child) a -1px margin so borders collapse between */
.input-group > .FieldIcon,
.input-group > .PwToggle {
    /* Bootstrap's own rule is a long :not() chain, so plain specificity loses to it here */
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Deposits has seven columns and Withdraws eight */
@media (min-width: 1025px) {
    .HistoryTable {
        table-layout: fixed;
    }
    .HistoryTable th:nth-child(1),
    .HistoryTable td:nth-child(1) {
        width: 5%;
    }
    .HistoryTable th:nth-child(2),
    .HistoryTable td:nth-child(2) {
        width: 12%;
    }
    .HistoryTable th:nth-child(3),
    .HistoryTable td:nth-child(3) {
        width: 16%;
    }
    .HistoryTable th:nth-child(4),
    .HistoryTable td:nth-child(4) {
        width: 12%;
    }
    .HistoryTable th:nth-child(5),
    .HistoryTable td:nth-child(5) {
        width: 10.5%;
    }
    .HistoryTable th:nth-child(6),
    .HistoryTable td:nth-child(6) {
        width: 13.5%;
    }
    .HistoryTable th:nth-child(8),
    .HistoryTable td:nth-child(8) {
        width: 14%;
    }
    .HistoryTable th,
    .HistoryTable td {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

label.form-control-label {
    display: block;
    margin-bottom: 6px;
    color: rgba(255, 255, 255, 0.55);
    font-family: AvenirMedium;
    font-size: 13px;
    line-height: 18px;
    text-transform: none;
    letter-spacing: 0.01em;
}
.WhiteMode label.form-control-label,
.LightMode label.form-control-label {
    color: rgba(25, 24, 41, 0.62);
}

@media (max-width: 1024.98px) {
    .form-control,
    .form-control-2,
    .reg_select,
    .form-select,
    select,
    textarea,
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="date"],
    input[type="search"] {
        font-size: 16px;
    }
}

/* Every dashboard page carries its title inside the card */
.TableContent > h2,
.FormWidth > h2,
.ContentInside .TableContent > h2,
.ContentInside .FormWidth > h2,
.ContentInside .card-body > h2 {
    /* .ContentInside h2:first-child zeroes the margin with the same weight */
    margin: 0 0 18px !important;
}

/* The Redeem button is the third .Item in the referral row */
.TextDiv .Item:has(> .btn) {
    margin-right: 0;
}

/* Deposits and Withdraws nest their title in a .row > .col */
.TableContent > .row:first-child h2 {
    margin: 0 0 18px !important;
}

/* A row carrying a button was 8px taller than a text-only row */
.TableContent .table tbody td:has(> .btn),
.TableContent .table tbody td:has(> .generic_price_btn) {
    padding-top: 8px;
    padding-bottom: 8px;
}

.TableContent .table tbody tr {
    transition: background-color 0.15s ease-in-out;
}
.TableContent .table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.05);
}
.WhiteMode .TableContent .table tbody tr:hover,
.LightMode .TableContent .table tbody tr:hover {
    background-color: rgba(25, 24, 41, 0.04);
}

.DocStatus,
.DocRow .FileInput {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    padding: 0 10px;
    background-color: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
}
.DocName {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    color: #ECECEC;
    font-family: AvenirMedium;
    font-size: 14px;
    line-height: 20px;
}
.DocBadge {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    height: 24px;
    padding: 0 10px;
    border-radius: 6px;
    font-family: AvenirBold;
    font-size: 12px;
    line-height: 1;
}
.DocBadgeOk {
    color: #5BD69B;
    background-color: rgba(35, 160, 90, 0.14);
    border: 1px solid rgba(35, 160, 90, 0.36);
}
.DocBadgeWait {
    color: #F0B849;
    background-color: rgba(230, 150, 20, 0.14);
    border: 1px solid rgba(230, 150, 20, 0.36);
}
.DocRow .FileInput {
    width: 100%;
}
.DocRow .FileInput .form-control {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    height: auto;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
}
.DocRow .FileInput .form-control:focus {
    box-shadow: none;
}
.DocRow .FileInput .btn {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    height: 30px;
}
.DocRow .FileInput .btn.submitfile {
    width: 30px;
    padding: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.72);
}
.DocRow .FileInput .btn.submitfile:hover,
.DocRow .FileInput .btn.submitfile:focus-visible {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.34);
    color: #fff;
}
.WhiteMode .DocStatus,
.LightMode .DocStatus,
.WhiteMode .DocRow .FileInput,
.LightMode .DocRow .FileInput {
    background-color: rgba(25, 24, 41, 0.03);
    border-color: var(--CardLine);
}
.WhiteMode .DocName,
.LightMode .DocName {
    color: var(--Ink);
}
.WhiteMode .DocRow .FileInput .btn.submitfile,
.LightMode .DocRow .FileInput .btn.submitfile {
    border-color: rgba(25, 24, 41, 0.2);
    color: rgba(25, 24, 41, 0.66);
}

.ContactIcon {
    width: 18px;
    margin-right: 8px;
    opacity: 0.68;
    text-align: center;
}
.ContactValue {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    color: var(--ThemeColorBright);
    font-family: AvenirBold;
    font-size: 14px;
    line-height: 20px;
    text-decoration: none;
}
.ContactValue:hover,
.ContactValue:focus-visible {
    text-decoration: underline;
}
.WhiteMode .ContactValue,
.LightMode .ContactValue {
    color: var(--ThemeColorOnLight);
}

/* Every page's first card starts at the same height. */
.MainDiv .ContentInside {
    /* my-3 put 16px above the wrapper on the form pages but not on the table pages */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.MainDiv .ContentInside:not(.TableContent):not(.FormWidth) {
    padding-top: 0;
}
.MainDiv .TableContent,
.MainDiv .FormWidth,
.MainDiv .ContentInside .card-body {
    margin-top: 18px;
}
.MainDiv .TableContent .FormWidth,
.MainDiv .FormWidth .FormWidth {
    margin-top: 0;
}

/* The dashboard stacks two cards, and the widget row's own margin sat on top of the second */
.MainDiv .ContentInside.TableContent + .DashBoard,
.MainDiv .DashBoard.mt-4 {
    margin-top: 0 !important;
}

.TableContent > .table-responsive {
    min-height: 190px;
}
/* an empty table hands that height to the message instead, which centres in it */
.TableContent > .table-responsive:has(~ .Nohistoryyet) {
    min-height: 0;
}

.MainDiv .btn,
.MainDiv input[type="button"].btn,
.MainDiv input[type="submit"].btn {
    font-family: AvenirBold;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0.01em;
    text-transform: none;
}

.MainDiv .btn {
    height: 38px;
    line-height: 36px;
    padding: 0 18px;
}
.MainDiv .table .btn,
.MainDiv .DocRow .FileInput .btn {
    height: 30px;
    line-height: 28px;
    padding: 0 12px;
}
.MainDiv .DocRow .FileInput .btn.submitfile {
    width: 30px;
    padding: 0;
}
.MainDiv .input-group .btn {
    height: 46px;
    line-height: 44px;
    padding: 0 14px;
}

.MainDiv .btn {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    line-height: 1;
}
.MainDiv input[type="button"].btn,
.MainDiv input[type="submit"].btn {
    display: inline-block;
    line-height: 36px;
}
.MainDiv .table input[type="button"].btn,
.MainDiv .table input[type="submit"].btn {
    line-height: 28px;
}
.MainDiv .input-group input[type="button"].btn,
.MainDiv .input-group input[type="submit"].btn {
    line-height: 44px;
}
.MainDiv .form-control,
.MainDiv select.form-control {
    padding-top: 0;
    padding-bottom: 0;
}

.MainDiv .btn,
.MainDiv .btn-default,
.MainDiv .btn-primary,
.MainDiv .btn-secondary,
.MainDiv .btn-success,
.MainDiv .btn-warning,
.MainDiv .btn-danger {
    border-radius: 6px;
}

.MainDiv .InvitePage .form-control {
    height: 38px;
}
.MainDiv .InvitePage .input-group .btn {
    height: 38px;
    line-height: 36px;
    padding: 0 18px;
}
/* Both rows lay out with a flex gap rather than margins */
.MainDiv .InvitePage .input-group,
.MainDiv .InvitePage .TextDiv:has(> .Item) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 10px;
}
.MainDiv .InvitePage .form-control ~ i.fas {
    height: 38px;
}
.MainDiv .InvitePage .TextDiv .Item,
.MainDiv .InvitePage .FieldHalf {
    margin-right: 0;
}

.MainDiv .InvitePage .TextDiv > .Item > .LabelSpacer {
    display: none;
}
.MainDiv .InvitePage .TextDiv .Item .btn {
    position: static;
    top: auto;
}

.MainDiv .InvitePage .TextDiv > p.card-category {
    margin-bottom: 6px;
}
.MainDiv .InvitePage .TextDiv > p.card-category:last-child {
    margin-bottom: 16px;
}
/* The stats row sat 46px below its heading - the heading's own 18px plus the row's top margin and */
.MainDiv .InvitePage > h2 + .TextDiv,
.MainDiv .InvitePage .TextDiv.my-1,
.MainDiv .InvitePage > h2 + .Content {
    /* the stats block is wrapped in a .Content mt-4, whose 24px stacked on the heading's own 18px and */
    margin-top: 0 !important;
}
.MainDiv .InvitePage .TextDiv > .Item > label {
    margin-top: 0;
    margin-bottom: 6px;
}

.MainDiv .InvitePage .TextDiv > .Item:not(:last-child) {
    -ms-flex: 0 0 calc(25% - 5px);
    flex: 0 0 calc(25% - 5px);
    max-width: calc(25% - 5px);
    min-width: 0;
}

.ContactPanel > .row {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.ContactPanel > .row > [class*="col-"] {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    /* the card is half the page now, so a row fills it rather than half of it */
    max-width: 100%;
    /* the same 14px Verification leaves between its stacked rows */
    margin-bottom: 14px !important;
}
.ContactPanel > .row > [class*="col-"]:last-child {
    margin-bottom: 0 !important;
}
@media (max-width: 992px) {
    .ContactPanel > .row > [class*="col-"] {
        max-width: 100%;
    }
}

/* The action row on the form pages carries mt-5 pt-3 */
.MainDiv .FormWidth .form-group.text-end,
.MainDiv .TableContent .form-group.text-end,
.MainDiv .ContentInside .card-body .form-group.text-end {
    margin-top: 18px !important;
    padding-top: 0 !important;
}

/* Withdraw keeps an empty slot for its error message */
.MainDiv .TextAlert:has(> h5:empty) {
    display: none;
}

/* The deposit fields carry pb-3 on top of mb-3, putting them 56px apart where every other form */
.MainDiv .FormWidth .form-group.mb-3.pb-3 {
    padding-bottom: 0 !important;
}
.MainDiv .FormWidth .form-group.mb-3.pb-3 > .form-control ~ i.fas {
    bottom: 0;
}

.MainDiv #withdraw-form .row {
    margin-left: 0;
    margin-right: 0;
}
.MainDiv #withdraw-form .row > *,
.MainDiv #withdraw-form .i-checks > .form-group {
    padding-left: 0;
    padding-right: 0;
}
.MainDiv #withdraw-form .col-md-6.ColPadTop {
    padding-top: 0;
}
.MainDiv #withdraw-form .i-checks {
    margin-top: 2px;
}

/* The card closes with the same 22px it opens with: whatever ends it */
.MainDiv :is(.TableContent, .FormWidth, .ContentInside .card-body) > :last-child,
.MainDiv :is(.TableContent, .FormWidth, .ContentInside .card-body) > :last-child > :last-child,
.MainDiv :is(.TableContent, .FormWidth, .ContentInside .card-body) > :last-child > :last-child > :last-child,
.MainDiv :is(.TableContent, .FormWidth, .ContentInside .card-body) > :last-child > :last-child > :last-child > :last-child {
    margin-bottom: 0 !important;
}

.LogOut .Info .Buttons .btn {
    height: 38px;
    line-height: 1;
    padding: 0 18px;
    border-radius: 6px;
    font-family: AvenirBold;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 0.01em;
}

/* AvenirBold puts 16px above the baseline and 8px below */
.MainDiv .btn:not(input):not(.submitfile),
.LogOut .Info .Buttons .btn {
    padding-top: 3px !important;
    padding-bottom: 0 !important;
}

@media (max-width: 575.98px) {
    .MainDiv .TableContent,
    .MainDiv .FormWidth,
    .MainDiv .ContentInside .card-body {
        padding: 16px;
    }
}

/* Handheld: a card keeps the full width of the page. */
@media (max-width: 992px) {
    .ContentDiv .row > [class*="col-"]:has(> .FormWidth),
    .ContentDiv .row > [class*="col-"]:has(> .TableContent),
    .ContentDiv .row > [class*="col-"]:has(> .TableDiv),
    .ContentDiv .row > [class*="col-"]:has(> .card-body) {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* Handheld: the history and account tables stop scrolling sideways and stack into one card per */
@media (max-width: 992px) {
    .MainDiv .table-responsive {
        overflow-x: visible;
        min-height: 0;
    }
    .MainDiv .table thead {
        display: none;
    }
    .MainDiv .table,
    .MainDiv .table tbody,
    .MainDiv .table tbody tr,
    .MainDiv .table tbody tr > td,
    .MainDiv .table tbody tr > th {
        display: block;
        width: 100%;
    }
    .MainDiv .table tbody tr {
        margin-bottom: 10px;
        padding: 4px 12px;
        border: solid rgba(255, 255, 255, 0.09) 1px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.04);
    }
    .MainDiv .table tbody tr:last-child {
        margin-bottom: 0;
    }
    .MainDiv .table tbody tr > td,
    .MainDiv .table tbody tr > th,
    .MainDiv .TableContent .table tbody td:has(> .btn),
    .MainDiv .TableContent .table tbody td:has(> .generic_price_btn) {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        height: auto;
        min-height: 38px;
        padding: 5px 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        font-size: 15px;
        line-height: 1.3;
        text-align: right;
    }
    .MainDiv .table tbody tr > td + td,
    .MainDiv .table tbody tr > th + td {
        border-top: solid rgba(255, 255, 255, 0.07) 1px;
    }
    .MainDiv .table tbody tr > td:before,
    .MainDiv .table tbody tr > th:before {
        content: attr(data-label);
        flex: 0 0 auto;
        color: rgba(255, 255, 255, 0.55);
        font-family: AvenirMedium;
        font-size: 14px;
        text-align: left;
    }
    .MainDiv .table tbody tr > [data-label="#"] {
        display: none;
    }
    .MainDiv .table tbody tr > td .btn,
    .MainDiv .table tbody tr > td .generic_price_btn {
        margin: 0;
    }
    .WhiteMode .MainDiv .table tbody tr,
    .LightMode .MainDiv .table tbody tr {
        border-color: var(--CardLine);
        background: rgba(25, 24, 41, 0.03);
    }
    .WhiteMode .MainDiv .table tbody tr > td + td,
    .LightMode .MainDiv .table tbody tr > td + td,
    .WhiteMode .MainDiv .table tbody tr > th + td,
    .LightMode .MainDiv .table tbody tr > th + td {
        border-top-color: var(--CardLine);
    }
    .WhiteMode .MainDiv .table tbody tr > td:before,
    .LightMode .MainDiv .table tbody tr > td:before,
    .WhiteMode .MainDiv .table tbody tr > th:before,
    .LightMode .MainDiv .table tbody tr > th:before {
        color: rgba(27, 33, 41, 0.6);
    }
}

.ContentInside .TradingStack {
    display: none;
}
@media (max-width: 992px) {
    .ContentInside .TradingStrip {
        display: none;
    }
    .ContentInside .TradingStack {
        display: block;
    }
    .ContentInside .TradingStack .TradingWidget + .TradingWidget {
        margin-top: 8px;
    }
}

.ScrollPane {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ScrollPane > .LangGrid {
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.ScrollPane > .LangGrid::-webkit-scrollbar {
    width: 0;
    height: 0;
}
.ScrollArrow {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 34px;
    padding: 0;
    background: rgba(255, 255, 255, 0.05);
    border: solid rgba(255, 255, 255, 0.1) 1px;
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.65);
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.ScrollArrowUp {
    -webkit-box-ordinal-group: 0;
    -ms-flex-order: -1;
    order: -1;
}
.ScrollPane.CanScroll > .ScrollArrow {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
}
/* the row stays where it is at either end of the list */
.ScrollPane > .ScrollArrow.IsOff,
.ScrollPane > .ScrollArrow:disabled {
    opacity: 0.4;
    cursor: default;
    pointer-events: none;
}
.ScrollArrow:not(:disabled):hover,
.ScrollArrow:not(:disabled):focus-visible {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(var(--ThemeBrightRgb), 0.45);
    color: #FFFFFF;
    outline: none;
}
.WhiteMode .ScrollArrow,
.LightMode .ScrollArrow {
    background: rgba(25, 24, 41, 0.04);
    border-color: var(--CardLine);
    color: rgba(27, 33, 41, 0.6);
}
.WhiteMode .ScrollArrow:not(:disabled):hover,
.LightMode .ScrollArrow:not(:disabled):hover,
.WhiteMode .ScrollArrow:not(:disabled):focus-visible,
.LightMode .ScrollArrow:not(:disabled):focus-visible {
    background: rgba(25, 24, 41, 0.07);
    border-color: rgba(var(--ThemeColorRgb), 0.35);
    color: var(--BrandInk);
}

/* Invitations on a phone: the referral field had to share its row with the Copy button and ended */
@media (max-width: 575.98px) {
    .MainDiv .InvitePage .input-group > .form-group {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .MainDiv .InvitePage .TextDiv > .Item:not(:last-child) {
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px);
    }
    .MainDiv .InvitePage .TextDiv > .Item:last-child {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .MainDiv .InvitePage .LabelSpacer {
        display: none;
    }
    /* stacked, the row gap is the only thing between a field and its button */
    .MainDiv .InvitePage .input-group,
    .MainDiv .InvitePage .TextDiv:has(> .Item) {
        row-gap: 12px;
    }
    .MainDiv .InvitePage .input-group > .form-group,
    .MainDiv .InvitePage .TextDiv > .Item,
    .MainDiv .InvitePage .FieldHalf {
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .MainDiv .InvitePage .input-group .btn,
    .MainDiv .InvitePage .TextDiv .Item .btn {
        margin-top: 0;
    }
    /* Both buttons carry an &emsp; spacer label that lined them up with the fields beside them. */
    .MainDiv .InvitePage .LabelSpacer,
    .MainDiv .InvitePage label.form-control-label.LabelSpacer {
        display: none !important;
    }
    .MainDiv .InvitePage .input-group > .form-group:has(> .btn),
    .MainDiv .InvitePage .TextDiv > .Item:has(> .btn) {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
}

.LoginPage .form-control,
.LoginPage .form-control:focus,
.LoginPage select.form-control,
.LoginPage textarea.form-control {
    background-color: #1A1A23;
}
.WhiteMode .LoginPage .form-control,
.LightMode .LoginPage .form-control,
.WhiteMode .LoginPage .form-control:focus,
.LightMode .LoginPage .form-control:focus,
.WhiteMode .LoginPage select.form-control,
.LightMode .LoginPage select.form-control,
.WhiteMode .LoginPage textarea.form-control,
.LightMode .LoginPage textarea.form-control {
    background-color: var(--Card);
}

/* Account pages from the tablet down, where the button runs the full width of the form */
@media (max-width: 992px) {
    /* order only counts inside a flex parent, and the single-column pages keep both groups in */
    .LoginPage .Form:not(:has(.FormTextIndent)) .FormDiv {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        -webkit-box-align: stretch;
        -ms-flex-align: stretch;
        align-items: stretch;
    }
    .LoginPage .Form:not(:has(.FormTextIndent)) .form-group.text-end {
        order: 98;
    }
    /* The button group is last in the markup, so :last-child zeroes its bottom margin */
    .LoginPage .Form:not(:has(.FormTextIndent)) .form-group:has(> .FormText a):not(:has(.FormNotice)) {
        order: 99;
        margin-top: 14px !important;
        margin-bottom: 0 !important;
    }
    .LoginPage .FormText p + p {
        margin-top: 4px !important;
    }
    /* Under a full-width button the two lines read as a footer, so they centre on it. */
    .LoginPage .Form:not(:has(.FormTextIndent)) .FormText:not(.FormNotice) {
        text-align: center;
    }
}

/* Register keeps its two columns down to the tablet and only flattens into one flow on a phone */
@media (max-width: 767.98px) {
    .LoginPage .Form:has(.FormTextIndent) {
        display: flex;
        flex-direction: column;
    }
    .LoginPage .Form:has(.FormTextIndent) > [class*="col-"]:has(> .FormDiv),
    .LoginPage .Form:has(.FormTextIndent) > [class*="col-"] > .FormDiv {
        display: contents;
    }
    .LoginPage .Form:has(.FormTextIndent) .form-group.text-end {
        order: 98;
        margin-bottom: 16px !important;
    }
    .LoginPage .FormText.FormTextIndent {
        order: 99;
        margin-top: 14px !important;
        margin-bottom: 0 !important;
        /* the 28% indent parks it under the second column on a wide screen */
        margin-left: 0;
        text-align: center;
    }
}

/* Register side by side, the way Capacitor lays it out: two 328px columns with a 32px gutter */
@media (min-width: 768px) {
    .LoginPage .Form:has(.FormTextIndent) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-line-pack: start;
        align-content: flex-start;
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        gap: 0 32px;
        max-width: 688px;
        margin-left: auto;
        margin-right: auto;
    }
    .LoginPage .Form:has(.FormTextIndent) > [class*="col-"] {
        -ms-flex: 0 1 328px;
        flex: 0 1 328px;
        width: auto;
        max-width: 328px;
        padding-left: 0;
        padding-right: 0;
    }
    /* the title, and anything that is not one of the two columns, spans both */
    .LoginPage .Form:has(.FormTextIndent) > [class*="col-"]:has(> .Title),
    .LoginPage .Form:has(.FormTextIndent) > :not([class*="col-"]) {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .LoginPage .Form:has(.FormTextIndent) .FormDiv {
        width: 100%;
        max-width: 100%;
        float: none;
        margin-right: 0;
    }
    .LoginPage .Form:has(.FormTextIndent) .FormText.FormTextIndent {
        margin-left: 0;
    }
    /* .Form takes a 70px right padding between 1024 and 1540, which left 618px
       of content - ten short of the two columns and their gutter, so they wrapped
       and the form read as the phone layout on a laptop */
    .LoginPage .Form:has(.FormTextIndent) {
        padding-right: 0;
    }
}

/* On a desktop the other forms sit against the left edge of .Form */
@media (min-width: 993px) {
    .LoginPage .Form:has(.FormTextIndent) {
        -webkit-box-pack: start;
        -ms-flex-pack: start;
        justify-content: flex-start;
        margin-left: 0;
        margin-right: auto;
    }
}

/* Tablet: a single-column form keeps the width it has on a desktop and sits in the middle. */
@media (min-width: 576px) and (max-width: 992px) {
    .LoginPage .Form:not(:has(.FormTextIndent)) {
        display: block;
        max-width: 328px;
        margin-left: auto;
        margin-right: auto;
    }
    .LoginPage .FormDiv {
        width: 100%;
        max-width: 100%;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }
}

@media (min-width: 576px) and (max-width: 992px) {
    .MainDiv .InvitePage .Content .row > [class*="col-"] {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
    .MainDiv .InvitePage .FieldHalf {
        width: auto;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
    }
    .MainDiv .InvitePage .TextDiv > .Item:not(:last-child) {
        -ms-flex: 1 1 0%;
        flex: 1 1 0%;
        max-width: none;
    }
}

@media (min-width: 576px) and (max-width: 992px) {
    .ContentInside .TradingStack {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }
    .ContentInside .TradingStack .TradingWidget + .TradingWidget {
        margin-top: 0;
    }
    .ContentInside .TradingStack .TradingWidget:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }
}

.ProviderList img[src*="payments/"] {
    max-width: none;
}

.LogoImage {
    content: var(--LogoDark, normal);
}
.WhiteMode .LogoImage,
.LightMode .LogoImage {
    content: var(--LogoLight, normal);
}

.LoginPage .AuthLogo {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
}
.LoginPage .AuthLogo a {
    justify-content: center;
}
.LoginPage .AuthLogo a,
.LoginPage .AuthLogo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.DlgOverlay {
    --Dlg-bg: var(--PickerSurface);
    --Dlg-fg: var(--PickerText);
    --Dlg-muted: var(--PickerText);
    --Dlg-radius: 12px;
    --Dlg-backdrop: rgba(10, 10, 16, 0.6);
    --Dlg-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.WhiteMode .DlgOverlay,
.LightMode .DlgOverlay {
    --Dlg-backdrop: rgba(25, 24, 41, 0.38);
    --Dlg-shadow: 0 20px 48px rgba(20, 30, 45, 0.18);
}
.DlgText {
    opacity: 0.72;
}
@media (max-width: 767.98px) {
    .DlgOverlay {
        padding: 16px;
    }
    .DlgBox {
        max-width: 100%;
    }
    .DlgActions {
        flex-direction: column-reverse;
        gap: 8px;
        margin-top: 18px;
    }
    .DlgBtn {
        width: 100%;
    }
}

.DlgOverlay {
    --Dlg-line: var(--PickerLine);
}

.tradingview-widget-container iframe {
    color-scheme: normal;
}

/* The consent rows sit in a half-width column, so the message this theme pins
   to the row's right edge landed mid-card, over the label. Full width, the way
   Capacitor's rows already are. */
.MainDiv .col-md-6.ColPadTop:has(.i-checks input[type="checkbox"]) {
    flex: 0 0 100%;
    max-width: 100%;
    width: 100%;
}

/* .ContentDiv keeps 24px between the page and its right edge, so the cards keep
   the same 24px between each other - below the dashboard's first card, and
   between the two on Edit Profile, where the 32px gutter gives up 4px a side. */
.DashBoard .TableContent {
    margin-top: 24px;
}
.MainDiv .Content > .row > .col-sm-6:has(.FormWidth):first-child:not(:last-child) {
    padding-right: 12px;
}
.MainDiv .Content > .row > .col-sm-6:has(.FormWidth):last-child:not(:first-child) {
    padding-left: 12px;
}


/* A field that opens a calendar says so on its right, the way a select says it
   opens a list. The date can still be typed - yyyy-mm-dd is checked on blur. */
.form-control[data-date="iso"],
input[data-date="iso"] {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23808080' stroke-width='1.3' stroke-linecap='round'%3E%3Crect x='1.9' y='3.1' width='12.2' height='11' rx='2'/%3E%3Cpath d='M1.9 6.6h12.2M5.3 1.6v2.6M10.7 1.6v2.6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 16px 16px !important;
    padding-right: 38px !important;
}

.ThemeDatePickerStep:disabled {
    opacity: 0.35;
    cursor: default;
}
.ThemeDatePickerStep:disabled:hover {
    background: transparent;
}
.ThemeDatePickerMonth option:disabled,
.ThemeDatePickerYear option:disabled {
    opacity: 0.45;
}

.ThemeDatePickerToday:disabled,
.ThemeDatePickerClear:disabled {
    opacity: 0.35;
    cursor: default;
    text-decoration: none;
}