﻿/* =========================================================
   WEALTHSTREET ACCESSIBILITY PANEL
========================================================= */
h3.ws-accessibility-heading {
    font-size: 18px;
    padding: 8px 0;
}

/* =========================================================
   ACCESSIBILITY FLOATING BUTTON
========================================================= */

.ws-accessibility-trigger {
    position: fixed;

    right: 20px;
    bottom: 20px;

    width: 54px;
    height: 54px;

    padding: 0;

    border: 0;
    border-radius: 50%;

    background: #1450f0;
    color: #ffffff;

    font-size: 25px;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    z-index: 9998;

    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


.ws-accessibility-trigger:hover {
    transform: scale(1.05);

    box-shadow:
        0 7px 22px rgba(0, 0, 0, 0.25);
}


/* =========================================================
   OVERLAY
========================================================= */

.ws-accessibility-overlay {
    position: fixed;

    inset: 0;

    background:
        rgba(0, 0, 0, 0.45);

    z-index: 9999;
}


/* =========================================================
   PANEL
========================================================= */

.ws-accessibility-panel {
    position: fixed;

    top: 0;
    right: 0;

    width: 390px;
    max-width: 100%;

    height: 100vh;

    background: #ffffff;

    color: #0f172a;

    z-index: 10000;

    overflow-y: auto;

    box-shadow:
        -8px 0 30px rgba(0, 0, 0, 0.20);

    transform: translateX(100%);

    visibility: hidden;

    transition:
        transform 0.25s ease,
        visibility 0.25s ease;
}


/* Open */

.ws-accessibility-panel.ws-panel-open {
    transform: translateX(0);

    visibility: visible;
}


/* =========================================================
   HEADER
========================================================= */

.ws-accessibility-header {
    min-height: 70px;

    padding: 14px 20px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    border-bottom:
        1px solid #e2e8f0;

    background: #ffffff;
}


.ws-accessibility-header h2 {
    margin: 0;

    color: #0f172a;

    font-size: 22px;

    line-height: 1.3;

    font-weight: 700;
}


/* Close */

.ws-accessibility-close {
    width: 42px;
    height: 42px;

    padding: 0;

    border:
        1px solid #cbd5e1;

    border-radius: 8px;

    background: #ffffff;

    color: #0f172a;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 18px;

    cursor: pointer;
}


.ws-accessibility-close:hover { background: #f1f5f9; }


/* =========================================================
   BODY
========================================================= */

.ws-accessibility-body { padding: 20px; }


/* =========================================================
   TOP GRID
========================================================= */

.ws-accessibility-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }


/* =========================================================
   TILE
========================================================= */

.ws-accessibility-tile { min-height: 100px; padding: 15px; border: 1px solid #cbd5e1; border-radius: 10px; background: #ffffff; color: #0f172a; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.ws-accessibility-tile:hover:not(:disabled) { background: #f5f7ff; border-color: #1450f0; transform: translateY(-2px); }
.ws-accessibility-tile.ws-active { background: #eef3ff; border-color: #1450f0; }
.ws-accessibility-tile:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }


/* Icon */

.ws-accessibility-icon { display: block; margin-bottom: 10px; font-size: 28px; font-weight: 700; line-height: 1; }
/* Label */
.ws-accessibility-label { display: block; font-size: 15px; line-height: 1.4; font-weight: 600; }

/* Status */
.ws-accessibility-status { display: block; margin-top: 5px; color: #64748b; font-size: 12px; line-height: 1.3; }


/* =========================================================
   TOGGLE LIST
========================================================= */
.ws-accessibility-toggle-list { margin-top: 10px; }
.ws-accessibility-toggle-row { min-height: 55px; display: flex; align-items: center; justify-content: space-between; gap: 15px; border-bottom: 1px solid #e2e8f0; }
.ws-toggle-label { color: #0f172a; font-size: 15px; font-weight: 500; line-height: 1.4; }


/* =========================================================
   SWITCH
========================================================= */

.ws-switch { position: relative; width: 50px; height: 28px; display: inline-block; flex-shrink: 0; cursor: pointer; }

/* Actual checkbox */

.ws-switch input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
}


/* Track */

.ws-switch-track {
    position: absolute;

    inset: 0;

    border-radius: 50px;

    background: #cbd5e1;

    transition:
        background 0.2s ease;
}


/* Circle */

.ws-switch-track::after {
    content: "";

    position: absolute;

    width: 20px;
    height: 20px;

    top: 4px;
    left: 4px;

    border-radius: 50%;

    background: #ffffff;

    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.25);

    transition:
        transform 0.2s ease;
}


/* Checked */

.ws-switch input:checked
+ .ws-switch-track {
    background: #1450f0;
}


.ws-switch input:checked
+ .ws-switch-track::after {
    transform: translateX(22px);
}


/* =========================================================
   RESET BUTTON
========================================================= */

.ws-accessibility-reset {
    margin-top: 25px;

    padding-bottom: 25px;
}


#wsResetAccessibility {
    width: 100%;

    min-height: 48px;

    padding: 12px 16px;

    border:
        1px solid #dc2626;

    border-radius: 8px;

    background: #ffffff;

    color: #dc2626;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;
}


#wsResetAccessibility:hover {
    background: #fef2f2;
}


/* =========================================================
   KEYBOARD FOCUS
========================================================= */

.ws-accessibility-trigger:focus-visible,
.ws-accessibility-close:focus-visible,
.ws-accessibility-tile:focus-visible,
#wsResetAccessibility:focus-visible,
.ws-switch input:focus-visible
+ .ws-switch-track {

    outline:
        3px solid #f59e0b;

    outline-offset:
        3px;
}


/* =========================================================
   ZOOM
========================================================= */

/*
   100% = Default

   110% = Slightly bigger
   125% = Bigger
   150% = Large
   175% = Extra Large
   200% = Maximum
*/

html.ws-zoom-110 {
    zoom: 1.10;
}


html.ws-zoom-125 {
    zoom: 1.25;
}


html.ws-zoom-150 {
    zoom: 1.50;
}


html.ws-zoom-175 {
    zoom: 1.75;
}


html.ws-zoom-200 {
    zoom: 2;
}


/* =========================================================
   TEXT SPACING
========================================================= */

body.ws-text-spacing * {
    letter-spacing:
        0.12em !important;

    word-spacing:
        0.16em !important;
}


/* =========================================================
   LINE HEIGHT
========================================================= */

body.ws-line-height * {
    line-height:
        1.8 !important;
}


/* =========================================================
   DYSLEXIA FONT
========================================================= */

body.ws-dyslexia,
body.ws-dyslexia * {
    font-family:
        Arial,
        Helvetica,
        sans-serif !important;
}


/* =========================================================
   HIGHLIGHT LINKS
========================================================= */

body.ws-highlight-links a {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
body.ws-highlight-links .ace-responsive-menu > li a{padding:0 10px; align-content:center;}
/*body.ws-highlight-links .ace-responsive-menu > li {display:inline-flex; align-items:center; align-content:center;}*/
body.ws-highlight-links a.navbar-brand.m-logo-none img {padding: 6px 0px 0 0;}

/* =========================================================
   BIG CURSOR
========================================================= */

body.ws-big-cursor,
body.ws-big-cursor * {

    /*cursor: url("../images/big-cursor.svg") 12 12, auto !important;*/
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M7 3 L7 39 L17 29 L24 44 L31 41 L24 26 L40 26 Z' fill='white' stroke='black' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 7 3, auto !important;
}


/* =========================================================
   HIDE IMAGES
========================================================= */

body.ws-hide-images img {
    visibility:
        hidden !important;
}


/* =========================================================
   INVERT COLORS
========================================================= */

/*body.ws-invert {
    filter:
        invert(1);
}




body.ws-invert img,
body.ws-invert video,
body.ws-invert iframe {
    filter:
        invert(1);
}*/
body.ws-invert > *:not(#wsAccessibilityTrigger)
                   :not(#wsAccessibilityOverlay)
                   :not(#wsAccessibilityPanel) {
    filter: invert(1);
}


/* Keep Accessibility Button normal */

body.ws-invert #wsAccessibilityTrigger {
    filter: none !important;
}


/* Keep Accessibility Overlay normal */

body.ws-invert #wsAccessibilityOverlay {
    filter: none !important;
}


/* Keep Accessibility Panel normal */

body.ws-invert #wsAccessibilityPanel {
    filter: none !important;

    background: #ffffff !important;
    color: #0f172a !important;
}


/* Keep panel children normal */

body.ws-invert #wsAccessibilityPanel * {
    filter: none !important;
}


/* Keep button icon normal */

body.ws-invert #wsAccessibilityTrigger * {
    filter: none !important;
}


/* =========================================================
   ACCESSIBLE COLOR
========================================================= */

body.ws-accessible-color { background: #ffffff !important; color: #000000 !important; }
body.ws-accessible-color a { text-decoration: underline !important; }
body.ws-accessible-color button { border-color: #000000 !important; }


body.ws-accessible-color a, body.ws-accessible-color .ace-responsive-menu > li > a{
    background:yellow !important; 
    color:#281662 !important;
}

body.ws-accessible-color a.navbar-brand.m-logo-none img,
body.ws-accessible-color .f-logo a img
{ background: yellow; }

body.ws-accessible-color a.btn-iwealth,
body.ws-accessible-color .wmt-dwnl .txt, 
body.ws-accessible-color .app-dwnl-box,
body.ws-accessible-color .need-box a,
body.ws-accessible-color .invest-contact a,
ul.form-dwnld li span
{ background: yellow; }

body.ws-accessible-color .feature-box a,
body.ws-accessible-color .kyc-status-box a{background:initial !important;}
body.ws-accessible-color .feature-box h3,
body.ws-accessible-color .kyc-status-box a h6 {background: yellow;}

body.ws-accessible-color .btn-button,
body.ws-accessible-color .btn-partner-submit {
    background:yellow !important; 
    color:#281662 !important;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 575px) {

    .ws-accessibility-panel {
        width: 100%;
    }
    body.ws-highlight-links .ace-responsive-menu > li a{padding:10px;}

    .ws-accessibility-body {
        padding: 15px;
    }


    .ws-accessibility-grid {
        gap: 10px;
    }


    .ws-accessibility-tile {
        min-height: 110px;
    }


    .ws-accessibility-trigger {
        right: 15px;
        bottom: 15px;

        width: 50px;
        height: 50px;
    }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .ws-accessibility-panel,
    .ws-accessibility-trigger,
    .ws-accessibility-tile,
    .ws-switch-track,
    .ws-switch-track::after {

        transition:
            none !important;
    }

}

/*=====================================================================================*/


/* ==========================================
   LIGHT / DARK MODE
========================================== */

:root {
    --ws-page-bg: #ffffff;
    --ws-page-text: #281662;
    --ws-card-bg: #ffffff;
    --ws-border: #dddddd;
    --ws-input-bg: #ffffff;
    --ws-input-text: #281662;
}


/* ==========================================
   DARK MODE
========================================== */

body.ws-dark-mode {
      --ws-page-bg: #121212;
    --ws-page-text: #ffffff;
    --ws-card-bg: #1e1e1e;
    --ws-border: #444444;
    --ws-input-bg: #1e1e1e;
    --ws-input-text: #ffffff;

    /* Existing website variables */
    --bg-color: #1e1e1e;
    --box-shadow: rgba(0, 0, 0, 0.60);

    background-color: var(--ws-page-bg) !important;
    color: var(--ws-page-text) !important;
}


/* Main website */

/*body.ws-dark-mode #wsPageContent {
    background-color: #121212 !important;
    color: #ffffff !important;
}*/


/* Headings */

/*body.ws-dark-mode #wsPageContent h1,
body.ws-dark-mode #wsPageContent h2,
body.ws-dark-mode #wsPageContent h3,
body.ws-dark-mode #wsPageContent h4,
body.ws-dark-mode #wsPageContent h5,
body.ws-dark-mode #wsPageContent h6 {
    color: #ffffff !important;
}*/


/* Paragraph */

/*body.ws-dark-mode #wsPageContent p,
body.ws-dark-mode #wsPageContent span,
body.ws-dark-mode #wsPageContent li {
    color: #eeeeee;
}*/

body.ws-dark-mode .use-link ul li:before, 
body.ws-dark-mode .use-link-policy ul li::before{
    background:#fff;
}
body.ws-dark-mode .nav-tabs.anywhere-nav-tabs .nav-link.active{background:initial;}

/* Links */
body.ws-dark-mode .menu,
body.ws-dark-mode .menu a,
body.ws-dark-mode .menu span,
body.ws-dark-mode p, body.ws-dark-mode h4,
body.ws-dark-mode .feature-box h3,
body.ws-dark-mode .menu ul li, body.ws-dark-mode ul li,
body.ws-dark-mode ul li a,
body.ws-dark-mode h5, body.ws-dark-mode h5 a,
body.ws-dark-mode h6,
body.ws-dark-mode .ws-offer-info dl,
body.ws-dark-mode .ws-offer-info dl dt,
body.ws-dark-mode .ws-offer-info dl dd,
body.ws-dark-mode .value-txt,
body.ws-dark-mode .equity-info p span,
body.ws-dark-mode .rslider-hdng h3,
body.ws-dark-mode .calc-result .calc-result-info h3,
body.ws-dark-mode .calc-boxs label,
body.ws-dark-mode .kyc-ttl h4 a,
body.ws-dark-mode .status-info a,
body.ws-dark-mode .control,
body.ws-dark-mode .matrix-link a,
body.ws-dark-mode ol.Tem-num li:before,
body.ws-dark-mode .mf-dtl-box h3 {
    color: #ffffff !important;
}

body.ws-dark-mode .table-bordered td, 
body.ws-dark-mode .table-bordered th, 
body.ws-dark-mode .table-bordered td a,
body.ws-dark-mode .complaint-exchange ul li:before{
    background-color: #1e1e1e !important; color: #ffffff !important; border-color:#fff;
}
/*body.ws-dark-mode #wsPageContent a {
    color: #66a3ff;
}*/

body.ws-dark-mode .feature-bg::before{background:inherit;}
/* Cards */

body.ws-dark-mode #wsPageContent .card,
body.ws-dark-mode #wsPageContent .bg-white,
body.ws-dark-mode .wmt-anywhere,
body.ws-dark-mode .bg-slider-one:before,
body.ws-dark-mode .service-box,
body.ws-dark-mode .bg-become-partner,
body.ws-dark-mode .footer-part:before,
body.ws-dark-mode .bg-clr-rond-t-b, 
body.ws-dark-mode .bg_abt_trading,
body.ws-dark-mode .bg-iposubscr,
body.ws-dark-mode .bg-stock-app:before,
body.ws-dark-mode .list-group-item.active,
body.ws-dark-mode ul.form-dwnld li::before,
body.ws-dark-mode .dwn-invester,
body.ws-dark-mode .card-body,
body.ws-dark-mode .card .card-header,
body.ws-dark-mode .form-search-box,
body.ws-dark-mode .light-bg {
    background-color: #1e1e1e !important; color: #ffffff !important;
}

/* Form controls */

body.ws-dark-mode #wsPageContent input,
body.ws-dark-mode #wsPageContent textarea,
body.ws-dark-mode #wsPageContent select,
body.ws-dark-mode .filter-dropdown #nav > ul > li > a {
    background-color: #1e1e1e !important; color: #ffffff !important; border-color: #555555 !important;
}


/* ===========MODE BUTTONS ========================================== */

.ws-mode-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ws-mode-btn { min-height: 75px; padding: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 2px solid #d8d8d8; border-radius: 10px; background: #ffffff; color: #281662; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; }
.ws-mode-btn i { font-size: 22px; }
.ws-mode-btn span { font-size: 14px; }
.ws-mode-btn[aria-pressed="true"] { background: #eef3ff; border-color: #1450f0; color: #1450f0; }
.ws-mode-btn:focus-visible { outline: 3px solid #1450f0; outline-offset: 3px; }





