/* ============================================================
SHARED — ALL 5 PAGES (Login, Register, Register Demo,
Password Reminder, Email Confirmation)
============================================================ */
body#Login,
body#Register,
body#Register-Demo-Account,
body#Password-Reminder,
body#Email-Confirmation,
html {
margin: 0 !important;
padding: 0 !important;
background: #f5f5f7 !important;
font-family:
'Inter',
-apple-system,
BlinkMacSystemFont,
'Segoe UI',
sans-serif !important;
color: #0a0a1a !important;
min-height: 100vh !important;
}
body#Login > div[style*='height: 100vh'] > ul.x-navigation,
body#Login > div[style*='height: 100vh'] > hr,
body#Login .disclaimer-color,
body#Login .footer-color,
body#Register > div[style*='height: 100vh'] > ul.x-navigation,
body#Register > div[style*='height: 100vh'] > hr,
body#Register .disclaimer-color,
body#Register .footer-color,
body#Register-Demo-Account > div[style*='height: 100vh'] > ul.x-navigation,
body#Register-Demo-Account > div[style*='height: 100vh'] > hr,
body#Register-Demo-Account .disclaimer-color,
body#Register-Demo-Account .footer-color,
body#Password-Reminder > div[style*='height: 100vh'] > ul.x-navigation,
body#Password-Reminder > div[style*='height: 100vh'] > hr,
body#Password-Reminder .disclaimer-color,
body#Password-Reminder .footer-color,
body#Email-Confirmation > div[style*='height: 100vh'] > ul.x-navigation,
body#Email-Confirmation > div[style*='height: 100vh'] > hr,
body#Email-Confirmation .disclaimer-color,
body#Email-Confirmation .footer-color {
display: none !important;
}
.loader {
background: #f5f5f7 !important;
}
/* ============================================================
SHARED PAGE BACKGROUND (Login + Password Reminder + Email Confirmation)
Centred, compact card
============================================================ */
body#Login > div[style*='height: 100vh'],
body#Password-Reminder > div[style*='height: 100vh'],
body#Email-Confirmation > div[style*='height: 100vh'] {
position: relative !important;
min-height: 100vh !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 40px 20px !important;
box-sizing: border-box !important;
background:
radial-gradient(
ellipse 60% 50% at 50% 45%,
rgba(80, 130, 220, 0.55) 0%,
rgba(100, 150, 230, 0.25) 25%,
rgba(140, 170, 220, 0.08) 50%,
transparent 75%
),
#f5f5f7 !important;
overflow: hidden !important;
}
/* ============================================================
SHARED PAGE BACKGROUND (Register + Register Demo)
Top-aligned, wider card, scrollable
============================================================ */
body#Register > div[style*='height: 100vh'],
body#Register-Demo-Account > div[style*='height: 100vh'] {
position: relative !important;
min-height: 100vh !important;
display: flex !important;
align-items: flex-start !important;
justify-content: center !important;
padding: 40px 20px !important;
box-sizing: border-box !important;
background:
radial-gradient(
ellipse 60% 50% at 50% 30%,
rgba(80, 130, 220, 0.45) 0%,
rgba(100, 150, 230, 0.2) 25%,
rgba(140, 170, 220, 0.06) 50%,
transparent 75%
),
#f5f5f7 !important;
overflow-x: hidden !important;
overflow-y: auto !important;
}
/* ============================================================
LOGIN-STYLE CONTAINER (Login + Password Reminder + Email Confirmation)
============================================================ */
.login-container {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
max-width: 440px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
min-height: auto !important;
z-index: 2 !important;
}
.login-box {
position: relative !important;
width: 100% !important;
max-width: 440px !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
animation: none !important;
z-index: 2 !important;
}
html body#Login .login-container .login-box .login-body,
html body#Password-Reminder .login-container .login-box .login-body,
html body#Email-Confirmation .login-container .login-box .login-body {
background: rgba(255, 255, 255, 0.55) !important;
backdrop-filter: blur(24px) saturate(140%) !important;
-webkit-backdrop-filter: blur(24px) saturate(140%) !important;
padding: 48px 40px !important;
box-shadow:
0 1px 3px rgba(10, 10, 26, 0.04),
0 20px 50px rgba(30, 60, 140, 0.12) !important;
border-radius: 20px !important;
border: 1px solid rgba(255, 255, 255, 0.6) !important;
color: #0a0a1a !important;
font-family:
'Inter',
-apple-system,
BlinkMacSystemFont,
sans-serif !important;
}
html
body#Login
.login-container
.login-box
.login-body
*:not(.fa):not([class*='fa-']),
html
body#Password-Reminder
.login-container
.login-box
.login-body
*:not(.fa):not([class*='fa-']),
html
body#Email-Confirmation
.login-container
.login-box
.login-body
*:not(.fa):not([class*='fa-']) {
font-family:
'Inter',
-apple-system,
BlinkMacSystemFont,
sans-serif !important;
}
html body#Login .login-container .login-box .login-body .fa,
html body#Login .login-container .login-box .login-body [class*='fa-'],
html body#Password-Reminder .login-container .login-box .login-body .fa,
html
body#Password-Reminder
.login-container
.login-box
.login-body
[class*='fa-'] {
font-family: 'FontAwesome' !important;
}
/* Logo on login + password reminder */
body#Login .login-body::before,
body#Password-Reminder .login-body::before {
content: '' !important;
display: block !important;
width: 140px !important;
height: 40px !important;
background-image: url('https://cdn.skaleapps.io/images/branding/KEv0OR6puO.png?v=2') !important;
background-repeat: no-repeat !important;
background-position: left center !important;
background-size: contain !important;
margin-bottom: 32px !important;
}
/* Title styling */
html body#Login .login-container .login-box .login-body .login-title,
html
body#Password-Reminder
.login-container
.login-box
.login-body
.login-title {
color: #1e1eb4 !important;
font-size: 26px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
margin-bottom: 4px !important;
text-align: left !important;
letter-spacing: -0.02em !important;
}
html body#Login .login-container .login-box .login-body .login-title strong,
html
body#Password-Reminder
.login-container
.login-box
.login-body
.login-title
strong {
color: #0a0a1a !important;
font-weight: 700 !important;
}
/* Login-specific subtitle */
html
body#Login
.login-container
.login-box
.login-body
> .login-title:first-of-type::after {
content: 'Sign in to access your trading account' !important;
display: block !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #6a6a78 !important;
margin-top: 6px !important;
line-height: 1.5 !important;
}
/* Password Reminder-specific subtitle */
html
body#Password-Reminder
.login-container
.login-box
.login-body
> .login-title:first-of-type::after {
content: 'Enter your email to receive a reset link' !important;
display: block !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #6a6a78 !important;
margin-top: 6px !important;
line-height: 1.5 !important;
}
/* Hide the raw instructional div on password reminder (we use pseudo subtitle instead) */
body#Password-Reminder
.login-body
form
.form-group:first-of-type
div[style*='color:#fff'] {
color: #6a6a78 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
margin-top: 20px !important;
margin-bottom: 8px !important;
}
/* Form */
.login-body > form {
margin-top: 24px !important;
}
.login-body .form-group {
margin-bottom: 14px !important;
position: relative !important;
}
.login-body .form-group > div[class*='col-md'] {
padding: 0 !important;
width: 100% !important;
}
html body#Login .login-container .login-box .login-body .form-control,
html
body#Password-Reminder
.login-container
.login-box
.login-body
.form-control {
background-color: rgba(255, 255, 255, 0.7) !important;
border: 1px solid rgba(217, 217, 226, 0.8) !important;
color: #0a0a1a !important;
height: 48px !important;
padding: 0 16px !important;
border-radius: 10px !important;
font-size: 14px !important;
width: 100% !important;
box-shadow: none !important;
}
html body#Login .login-container .login-box .login-body .form-control:focus,
html
body#Password-Reminder
.login-container
.login-box
.login-body
.form-control:focus {
background-color: #ffffff !important;
border-color: #1e1eb4 !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(30, 30, 180, 0.08) !important;
}
.login-body .form-control::placeholder {
color: #8a8a99 !important;
}
#hideShow {
top: 15px !important;
right: 16px !important;
}
.show-password-login {
color: #8a8a99 !important;
}
/* Login-specific: reverse stack + password toggle row */
body#Login .login-body .form-group:last-of-type {
margin-top: 20px !important;
display: flex !important;
flex-direction: column-reverse !important;
gap: 12px !important;
}
body#Login .login-body .form-group:last-of-type .col-md-6 {
width: 100% !important;
padding: 0 !important;
}
/* Primary login / submit button */
.login-body .btn-login {
background-color: #1e1eb4 !important;
border: none !important;
color: #ffffff !important;
height: 50px !important;
border-radius: 999px !important;
font-size: 15px !important;
font-weight: 600 !important;
width: 100% !important;
box-shadow: 0 4px 14px rgba(30, 30, 180, 0.25) !important;
}
.login-body .btn-login:hover {
background-color: #16168f !important;
color: #ffffff !important;
}
/* Password Reminder layout: stack Login link + Submit button */
body#Password-Reminder .login-body .form-group:last-of-type {
display: flex !important;
flex-direction: column-reverse !important;
gap: 10px !important;
margin-top: 20px !important;
}
body#Password-Reminder .login-body .form-group:last-of-type .col-md-6 {
width: 100% !important;
padding: 0 !important;
}
html body#Login .login-container .login-box .login-body .btn-link,
html body#Password-Reminder .login-container .login-box .login-body .btn-link {
color: #1e1eb4 !important;
font-size: 13px !important;
font-weight: 500 !important;
text-align: center !important;
text-decoration: none !important;
background: transparent !important;
border: none !important;
padding: 8px 0 !important;
display: block !important;
}
html body#Login .login-container .login-box .login-body .btn-link:hover,
html
body#Password-Reminder
.login-container
.login-box
.login-body
.btn-link:hover {
color: #16168f !important;
text-decoration: underline !important;
}
/* Login "Live / Demo" row */
html
body#Login
.login-container
.login-box
.login-body
.col-md-12
.login-title {
color: transparent !important;
font-size: 0 !important;
margin: 28px 0 14px !important;
padding: 0 !important;
}
body#Login .login-body .not-registered {
font-size: 13px !important;
font-weight: 400 !important;
color: #6a6a78 !important;
margin: 0 !important;
padding: 0 !important;
text-align: center !important;
display: block !important;
}
body#Login .login-body > .col-md-12:last-child {
display: flex !important;
gap: 10px !important;
padding: 0 !important;
margin-top: 14px !important;
width: 100% !important;
}
body#Login .login-body > .col-md-12:last-child > .col-md-6 {
padding: 0 !important;
flex: 1 1 0 !important;
width: 0 !important;
min-width: 0 !important;
display: flex !important;
}
body#Login .login-body .btn-live,
body#Login .login-body .btn-demo {
background-color: rgba(255, 255, 255, 0.7) !important;
border: 1px solid rgba(217, 217, 226, 0.8) !important;
color: #0a0a1a !important;
height: 44px !important;
border-radius: 999px !important;
font-size: 12px !important;
font-weight: 500 !important;
width: 100% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
white-space: nowrap !important;
}
body#Login .login-body .btn-live:hover,
body#Login .login-body .btn-demo:hover {
background-color: #ffffff !important;
border-color: #1e1eb4 !important;
}
/* ============================================================
EMAIL CONFIRMATION — success state, no form
============================================================ */
/* Success checkmark icon above the message */
body#Email-Confirmation .login-body::before {
content: '' !important;
display: block !important;
width: 64px !important;
height: 64px !important;
margin: 0 auto 20px !important;
border-radius: 50% !important;
background-color: rgba(30, 30, 180, 0.08) !important;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e1eb4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 30px 30px !important;
border: 2px solid rgba(30, 30, 180, 0.2) !important;
}
html body#Email-Confirmation .login-container .login-box .login-body {
text-align: center !important;
}
html
body#Email-Confirmation
.login-container
.login-box
.login-body
.login-title {
color: #0a0a1a !important;
font-size: 18px !important;
font-weight: 500 !important;
line-height: 1.5 !important;
margin: 0 !important;
text-align: center !important;
letter-spacing: -0.01em !important;
}
html body#Email-Confirmation .login-body .login-title strong {
display: block !important;
margin-top: 24px !important;
font-weight: 400 !important;
}
html body#Email-Confirmation .login-body .login-title strong a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background-color: #1e1eb4 !important;
color: #ffffff !important;
height: 48px !important;
padding: 0 32px !important;
border-radius: 999px !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
box-shadow: 0 4px 14px rgba(30, 30, 180, 0.25) !important;
transition:
background-color 0.15s ease,
transform 0.15s ease !important;
min-width: 160px !important;
letter-spacing: -0.01em !important;
}
html body#Email-Confirmation .login-body .login-title strong a:hover {
background-color: #16168f !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
}
html body#Email-Confirmation .login-body .login-title strong a::after {
content: '' !important;
display: inline-block !important;
width: 14px !important;
height: 14px !important;
margin-left: 8px !important;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='5' y1='12' x2='19' y2='12'/%3e%3cpolyline points='12 5 19 12 12 19'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: center !important;
}
/* ============================================================
REGISTER-STYLE CONTAINER (Register + Register Demo)
============================================================ */
.registration-container {
position: relative !important;
display: flex !important;
justify-content: center !important;
width: 100% !important;
max-width: 560px !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
z-index: 2 !important;
}
.registration-box {
width: 100% !important;
max-width: 560px !important;
margin: 0 auto !important;
padding: 0 !important;
background: transparent !important;
animation: none !important;
z-index: 2 !important;
}
html body#Register .registration-container .registration-box .registration-body,
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body {
background: rgba(255, 255, 255, 0.6) !important;
backdrop-filter: blur(24px) saturate(140%) !important;
-webkit-backdrop-filter: blur(24px) saturate(140%) !important;
padding: 40px 36px !important;
box-shadow:
0 1px 3px rgba(10, 10, 26, 0.04),
0 20px 50px rgba(30, 60, 140, 0.12) !important;
border-radius: 20px !important;
border: 1px solid rgba(255, 255, 255, 0.6) !important;
color: #0a0a1a !important;
margin: 0 !important;
font-family:
'Inter',
-apple-system,
BlinkMacSystemFont,
sans-serif !important;
}
html
body#Register
.registration-container
.registration-box
.registration-body
*:not(.fa):not([class*='fa-']):not(.flag),
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
*:not(.fa):not([class*='fa-']):not(.flag) {
font-family:
'Inter',
-apple-system,
BlinkMacSystemFont,
sans-serif !important;
}
html
body#Register
.registration-container
.registration-box
.registration-body
.fa,
html
body#Register
.registration-container
.registration-box
.registration-body
[class*='fa-'],
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
.fa,
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
[class*='fa-'] {
font-family: 'FontAwesome' !important;
}
/* Logo */
body#Register .registration-body::before,
body#Register-Demo-Account .registration-body::before {
content: '' !important;
display: block !important;
width: 140px !important;
height: 40px !important;
background-image: url('https://cdn.skaleapps.io/images/branding/KEv0OR6puO.png?v=2') !important;
background-repeat: no-repeat !important;
background-position: left center !important;
background-size: contain !important;
margin-bottom: 28px !important;
}
/* Titles */
html
body#Register
.registration-container
.registration-box
.registration-body
.registration-title,
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
.registration-title {
color: #0a0a1a !important;
font-size: 26px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
margin-bottom: 6px !important;
text-align: left !important;
letter-spacing: -0.02em !important;
}
html
body#Register
.registration-container
.registration-box
.registration-body
.registration-title
strong,
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
.registration-title
strong {
color: #1e1eb4 !important;
font-weight: 700 !important;
}
html
body#Register
.registration-container
.registration-box
.registration-body
.registration-subtitle,
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
.registration-subtitle {
color: #6a6a78 !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.5 !important;
margin-bottom: 28px !important;
text-align: left !important;
}
/* Section headers */
html
body#Register
.registration-container
.registration-box
.registration-body
h4,
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
h4 {
color: #0a0a1a !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
margin: 24px 0 16px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid rgba(217, 217, 226, 0.6) !important;
}
html
body#Register
.registration-container
.registration-box
.registration-body
h4:first-of-type,
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
h4:first-of-type {
margin-top: 0 !important;
}
/* PROGRESS BAR — Register only */
html body#Register .wizard > ul {
display: flex !important;
gap: 8px !important;
padding: 0 !important;
margin: 0 0 32px !important;
list-style: none !important;
justify-content: center !important;
align-items: center !important;
}
html body#Register .wizard > ul li {
flex: 0 1 40px !important;
max-width: 40px !important;
min-width: 40px !important;
position: relative !important;
}
html body#Register .wizard > ul li a {
display: block !important;
width: 100% !important;
height: 4px !important;
background: rgba(217, 217, 226, 0.8) !important;
border-radius: 999px !important;
text-decoration: none !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
transition: background 0.2s ease !important;
}
html body#Register .wizard > ul li.selected a,
html body#Register .wizard > ul li.done a {
background: #1e1eb4 !important;
}
html body#Register .wizard > ul li .stepNumber,
html body#Register .wizard > ul li .stepDesc,
html body#Register .wizard > ul li .chevron,
html body#Register .wizard > ul li svg {
display: none !important;
}
html body#Register .wizard > ul li::before,
html body#Register .wizard > ul li::after,
html body#Register .wizard > ul li a::before,
html body#Register .wizard > ul li a::after {
content: none !important;
display: none !important;
}
/* FORM FIELDS */
html
body#Register
.registration-container
.registration-box
.registration-body
.form-control,
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
.form-control {
background-color: rgba(255, 255, 255, 0.75) !important;
border: 1px solid rgba(217, 217, 226, 0.8) !important;
color: #0a0a1a !important;
height: 46px !important;
padding: 0 16px !important;
border-radius: 10px !important;
font-size: 14px !important;
width: 100% !important;
box-shadow: none !important;
box-sizing: border-box !important;
}
html
body#Register
.registration-container
.registration-box
.registration-body
.form-control:focus,
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
.form-control:focus {
background-color: #ffffff !important;
border-color: #1e1eb4 !important;
outline: none !important;
box-shadow: 0 0 0 3px rgba(30, 30, 180, 0.08) !important;
}
html
body#Register
.registration-container
.registration-box
.registration-body
select.form-control,
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
select.form-control {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
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' fill='none'%3e%3cpath d='M1 1L6 6L11 1' stroke='%236a6a78' stroke-width='1.5' stroke-linecap='round'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
padding-right: 40px !important;
cursor: pointer !important;
}
.show-password-register {
color: #8a8a99 !important;
}
/* Phone country code layout (DOB row overridden below) */
body#Register .form-group .col-md-3,
body#Register-Demo-Account .form-group .col-md-3 {
width: 32% !important;
padding-right: 8px !important;
}
body#Register .form-group .col-md-9,
body#Register-Demo-Account .form-group .col-md-9 {
width: 68% !important;
padding: 0 !important;
}
/* Checkboxes */
html
body#Register
.registration-container
.registration-box
.registration-body
input[type='checkbox'],
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
input[type='checkbox'] {
width: 18px !important;
height: 18px !important;
margin-right: 10px !important;
accent-color: #1e1eb4 !important;
vertical-align: middle !important;
}
html
body#Register
.registration-container
.registration-box
.registration-body
input[type='checkbox']
+ h4,
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
input[type='checkbox']
+ h4 {
display: inline !important;
font-size: 14px !important;
font-weight: 400 !important;
color: #6a6a78 !important;
text-transform: none !important;
letter-spacing: 0 !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
}
html
body#Register
.registration-container
.registration-box
.registration-body
input[type='checkbox']
+ h4
a,
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
input[type='checkbox']
+ h4
a {
color: #1e1eb4 !important;
text-decoration: none !important;
font-weight: 500 !important;
}
/* ACTION BAR — Register (wizard) */
html body#Register .actionBar {
display: flex !important;
gap: 12px !important;
margin-top: 28px !important;
padding: 0 !important;
border: none !important;
background: transparent !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: nowrap !important;
}
html body#Register .actionBar .buttonFinish,
html body#Register .actionBar a.buttonFinish,
html body#Register .actionBar .btn.buttonFinish {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
padding: 0 !important;
margin: 0 !important;
overflow: hidden !important;
}
html body#Register .actionBar a.pull-left {
background: transparent !important;
border: 1px solid #d9d9e2 !important;
color: #0a0a1a !important;
height: 44px !important;
padding: 0 20px !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 500 !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
text-decoration: none !important;
min-width: 100px !important;
box-shadow: none !important;
transition: all 0.15s ease !important;
margin-right: auto !important;
}
html body#Register .actionBar a.pull-left:hover {
background-color: #ffffff !important;
border-color: #1e1eb4 !important;
color: #1e1eb4 !important;
}
html body#Register .actionBar a.pull-right {
background-color: #1e1eb4 !important;
border: none !important;
color: #ffffff !important;
height: 44px !important;
padding: 0 24px !important;
border-radius: 999px !important;
font-size: 13px !important;
font-weight: 600 !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
text-decoration: none !important;
min-width: 100px !important;
box-shadow: 0 4px 14px rgba(30, 30, 180, 0.2) !important;
transition: background-color 0.15s ease !important;
}
html body#Register .actionBar a.pull-right:not([style*='display: none']) {
display: inline-flex !important;
}
html body#Register .actionBar a.pull-left:not([style*='display: none']) {
display: inline-flex !important;
}
html body#Register .actionBar .btn-register:not([style*='display: none']) {
display: inline-flex !important;
}
html body#Register .actionBar a.pull-right:hover {
background-color: #16168f !important;
color: #ffffff !important;
}
/* REGISTER SUBMIT BUTTON (.btn-register) — shared Register + Demo */
html body#Register .actionBar .btn-register,
html body#Register-Demo-Account .btn-register {
background-color: #1e1eb4 !important;
border: none !important;
color: #ffffff !important;
height: 50px !important;
padding: 0 32px !important;
border-radius: 999px !important;
font-size: 15px !important;
font-weight: 600 !important;
line-height: 50px !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 4px 14px rgba(30, 30, 180, 0.25) !important;
min-width: 160px !important;
width: 100% !important;
text-align: center !important;
vertical-align: middle !important;
}
/* Only apply inline-flex when the button is meant to be visible.
Skale's JS sets style="display: block" on the last step,
and style="display: none" on earlier steps. We respect both. */
html body#Register .actionBar .btn-register[style*='display: block'],
html body#Register-Demo-Account .btn-register {
display: inline-flex !important;
}
html body#Register .actionBar .btn-register:hover,
html body#Register-Demo-Account .btn-register:hover {
background-color: #16168f !important;
color: #ffffff !important;
}
html body#Register .actionBar > div:last-child {
width: auto !important;
flex: 0 0 auto !important;
padding: 0 !important;
margin-left: auto !important;
}
/* Hide empty currency dropdown (Register + Demo) */
html body#Register select.form-control[name='currency']:empty,
html body#Register-Demo-Account select.form-control[name='currency']:empty {
display: none !important;
}
/* Already have account link (Register + Demo) */
html
body#Register
.registration-container
.registration-box
.registration-body
.btn-link,
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
.btn-link {
color: #1e1eb4 !important;
font-size: 13px !important;
font-weight: 500 !important;
text-align: center !important;
text-decoration: none !important;
background: transparent !important;
border: none !important;
padding: 16px 0 0 !important;
display: block !important;
}
html
body#Register
.registration-container
.registration-box
.registration-body
.btn-link:hover,
html
body#Register-Demo-Account
.registration-container
.registration-box
.registration-body
.btn-link:hover {
color: #16168f !important;
text-decoration: underline !important;
}
/* REGISTER DEMO — bottom action row (Already have account + Start Trading) */
body#Register-Demo-Account
.registration-body
> form
> .form-group:last-of-type {
display: flex !important;
flex-direction: column-reverse !important;
gap: 12px !important;
margin-top: 28px !important;
}
body#Register-Demo-Account
.registration-body
> form
> .form-group:last-of-type
.col-md-6 {
width: 100% !important;
padding: 0 !important;
}
/* Error labels */
html body#Register label.error,
html body#Register-Demo-Account label.error {
color: #d93025 !important;
font-size: 12px !important;
font-weight: 500 !important;
margin-top: 4px !important;
display: block !important;
}
html body#Register .stepContainer,
html body#Register-Demo-Account .stepContainer {
height: auto !important;
padding: 0 !important;
}
/* ============================================================
REGISTER v2 — UPDATED STRUCTURE (3 steps, DOB, new fields)
============================================================ */
/* === DATE OF BIRTH LAYOUT === */
/* DOB label column */
html
body#Register
.registration-container
.registration-box
.registration-body
.form-group
.col-md-3
> label {
display: block !important;
padding: 0 !important;
margin: 0 !important;
}
html
body#Register
.registration-container
.registration-box
.registration-body
.form-group
.col-md-3
> label
h4 {
color: #0a0a1a !important;
font-size: 13px !important;
font-weight: 500 !important;
text-transform: none !important;
letter-spacing: 0 !important;
margin: 0 !important;
padding: 13px 0 0 !important;
border: none !important;
line-height: 1.2 !important;
}
/* DOB row — 4 equal columns instead of phone layout's 32%/68% */
html body#Register .form-group:has(#year) .col-md-3 {
width: 25% !important;
padding: 0 4px !important;
}
html body#Register .form-group:has(#year) .col-md-3:first-child {
padding-left: 0 !important;
}
html body#Register .form-group:has(#year) .col-md-3:last-child {
padding-right: 0 !important;
}
/* === FIX DUPLICATE DROPDOWN ICONS === */
/* Ensure native chevron stays hidden everywhere in register */
html body#Register select.form-control,
html body#Register-Demo-Account select.form-control {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
}
/* Kill the FontAwesome :before chevron from .select wrapper (duplicate source) */
html body#Register .form-group .col-md-3.small-select:before,
html body#Register .form-group .col-md-3.select:before,
html body#Register .form-group .col-md-12.select:before,
html body#Register-Demo-Account .form-group .col-md-12.select:before {
display: none !important;
content: none !important;
}
/* DOB sub-selects need tighter chevron spacing due to narrow width */
html body#Register .form-group .col-md-3.small-select .form-control,
html body#Register .form-group .col-md-3.select .form-control {
padding-right: 28px !important;
background-position: right 10px center !important;
font-size: 13px !important;
}
/* === FIX PASSWORD EYE ICON POSITIONING === */
html body#Register .form-group[style*='position: relative'] {
position: relative !important;
}
html body#Register #password-field,
html body#Register #password-confirm-field {
position: absolute !important;
right: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 2 !important;
cursor: pointer !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
}
html body#Register #password-field .show-password-register,
html body#Register #password-confirm-field .show-password-register {
font-size: 16px !important;
color: #8a8a99 !important;
line-height: 1 !important;
}
html body#Register input[name='password'],
html body#Register input[name='password_confirmation'] {
padding-right: 48px !important;
}
/* === LEGAL INFO SECTION (Step 3 Terms checkbox) === */
html body#Register .form-group:has(input[name='terms']) {
margin-top: 20px !important;
padding: 16px !important;
background: rgba(255, 255, 255, 0.4) !important;
border-radius: 10px !important;
border: 1px solid rgba(217, 217, 226, 0.6) !important;
}
html body#Register input[name='terms'] + h4 {
display: inline !important;
font-size: 13px !important;
font-weight: 400 !important;
color: #6a6a78 !important;
text-transform: none !important;
letter-spacing: 0 !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1.5 !important;
}
html body#Register input[name='terms'] + h4 a {
color: #1e1eb4 !important;
text-decoration: none !important;
}
html body#Register input[name='terms'] + h4 a:hover {
text-decoration: underline !important;
}
/* ============================================================
CONTRACT (T&C) CHECKBOX — Step 3 final agreement
============================================================ */
/* Wrapper card around the checkbox + label */
html body#Register .form-group:has(> .col-md-12 > input[name='contract']) {
background: rgba(255, 255, 255, 0.4) !important;
border: 1px solid rgba(217, 217, 226, 0.6) !important;
border-radius: 10px !important;
padding: 16px !important;
margin: 20px 0 8px !important;
transition:
border-color 0.15s ease,
background-color 0.15s ease !important;
}
html
body#Register
.form-group:has(> .col-md-12 > input[name='contract']:checked) {
background: rgba(30, 30, 180, 0.05) !important;
border-color: rgba(30, 30, 180, 0.35) !important;
}
html
body#Register
.form-group:has(> .col-md-12 > input[name='contract'])
> .col-md-12 {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
padding: 0 !important;
width: 100% !important;
flex-wrap: wrap !important;
}
/* Hide the empty 150px scroll panel that follows the contract input */
html
body#Register
input[name='contract']
~ #changeColorRegTextBoxes.panel-body.scroll,
html body#Register input[name='contract'] ~ div#changeColorRegTextBoxes {
display: none !important;
}
/* Custom-styled checkbox — overrides the global accent-color rule.
Uses html body...input[name="contract"] (highest specificity that
we can stack with !important) to win against the global rule. */
html
body#Register
.registration-container
.registration-box
.registration-body
input[type='checkbox'][name='contract'] {
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
margin: 1px 0 0 0 !important;
border: 2px solid rgba(217, 217, 226, 1) !important;
border-radius: 5px !important;
background-color: rgba(255, 255, 255, 0.85) !important;
background-image: none !important;
cursor: pointer !important;
position: relative !important;
flex-shrink: 0 !important;
transition: all 0.15s ease !important;
vertical-align: middle !important;
accent-color: auto !important;
}
html
body#Register
.registration-container
.registration-box
.registration-body
input[type='checkbox'][name='contract']:hover {
border-color: #1e1eb4 !important;
background-color: rgba(30, 30, 180, 0.05) !important;
}
html
body#Register
.registration-container
.registration-box
.registration-body
input[type='checkbox'][name='contract']:checked {
background-color: #1e1eb4 !important;
background-image: none !important;
border-color: #1e1eb4 !important;
}
html
body#Register
.registration-container
.registration-box
.registration-body
input[type='checkbox'][name='contract']:checked::after {
content: '' !important;
position: absolute !important;
top: 2px !important;
left: 5px !important;
width: 5px !important;
height: 10px !important;
border: solid #ffffff !important;
border-width: 0 2px 2px 0 !important;
transform: rotate(45deg) !important;
display: block !important;
background: transparent !important;
}
html
body#Register
.registration-container
.registration-box
.registration-body
input[type='checkbox'][name='contract']:focus-visible {
outline: 2px solid #1e1eb4 !important;
outline-offset: 2px !important;
}
/* The agreement text — Skale renders it as a not