/* Minification failed. Returning unminified contents.
(1300,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1301,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1302,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1303,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1304,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1305,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1306,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1307,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1309,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1310,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1311,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1312,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1315,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1316,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1317,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1319,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1320,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1321,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1322,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1323,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1328,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1332,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-bg-color'
(1341,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal'
(1345,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(1354,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1355,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1359,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1360,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-accent'
(1364,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1368,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1376,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-bg-2'
(1401,32): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(1405,32): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1414,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-bg-2'
(1415,35): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1419,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-strong'
(1425,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal'
(1436,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(1441,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(1451,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(1461,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-bg-color'
(1466,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-strong'
(1474,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1478,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-card-2'
(1479,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1484,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1485,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1490,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(1500,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-bg-color'
(1517,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1518,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1527,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1534,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1545,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-card-2'
(1546,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1555,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(1563,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1564,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1570,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1572,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1576,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-card-2'
(1577,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1582,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(1588,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1593,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1599,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1603,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-card-2'
(1604,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1605,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1609,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1610,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1614,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(1619,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-card-2'
(1620,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1621,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1627,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1631,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-card-2'
(1632,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-table-head'
(1633,35): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1637,35): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1638,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1647,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1648,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1653,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1654,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1655,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1659,31): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1660,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1664,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1669,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1670,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1675,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1676,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1680,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1684,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-accent'
(1684,60): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-accent'
(1690,16): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1694,18): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1699,18): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1708,16): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1717,16): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1721,16): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1730,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(1767,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-accent'
(1781,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(1805,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-accent'
(1809,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-blue'
(1827,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1831,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-accent'
(1835,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(1845,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-yellow'
(1854,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(1865,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-red'
(1871,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(1872,32): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(1883,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-accent'
(1887,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(1900,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-bg-color'
(1901,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1905,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1909,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1915,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1922,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1923,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1929,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(1934,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1935,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1936,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1940,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1941,31): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1948,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1949,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1950,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1954,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-dim'
(1971,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1972,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
 */
@-ms-viewport {
    width: device-width;
}

/* Legacy `html { font-size: 62.5%; }` removed so 1rem now tracks the user's
   browser/device font-size setting (typically 16px). Every pre-existing
   rem value across own + vendor stylesheets was scaled by 0.625 in the
   same commit so visual sizes stay identical at the 16px default. */

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    width: 100%;
    box-sizing: border-box;
    -ms-overflow-style: scrollbar;
}

body {
    margin: 0;
    font-family: "IBM Plex Sans", "Inter", "Segoe UI", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    font-feature-settings: "cv11", "ss03";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    background-color: #e6ecef;
    color: #1b2330;
    direction: ltr;
}

    body.Dark {
        background-color: #262931;
    }

article, footer, header, nav, section {
    display: block;
}

a {
    text-decoration: none;
}

.clearfix {
    clear: both;
}

.containarea, .container {
    max-width: 90rem;
    margin: 0 auto;
    padding-right: 0.46875rem !important;
    padding-left: 0.46875rem !important;
}

.d-none {
    display: none;
}

@media (min-width: 576px) {
    .d-sm-inline {
        display: inline-block;
    }
}

@media (min-width: 768px) {

    .d-md-inline {
        display: inline-block;
    }
}

@media (min-width: 992px) {

    .d-lg-inline {
        display: inline-block;
    }
}


.pull-left {
    float: left !important
}

header {
    z-index: 999;
    position: relative;
}

    header a, footer a {
        -webkit-transition: none;
        -moz-transition: none;
        -ms-transition: none;
        -o-transition: none;
        transition: none;
    }


    header .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
    }

    header .container > .row > .col {
        padding-left: 0.3125rem;
        padding-right: 0.3125rem;
    }

    header .row .col {
        -ms-flex-preferred-size: 0;
        flex-basis: 0;
        -webkit-box-flex: 1;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: 100%;
    }

    header .navbar-header {
        margin-left: 2.1875rem;
        flex-grow: 1;
        flex-basis: 70%;
    }

body.srcopen header .navbar-header, body.srcopen header .menuToggle {
    display: none
}


header .top-toolbar {
    position: relative;
    text-align: right;
    flex-grow: 1;
}

    header .top-toolbar input.toggle {
        display: none
    }

    header .top-toolbar .help {
        text-align: center;
        padding: 6px 8px;
        line-height: 25px;
        vertical-align: middle;
        margin-top: 3px;
    }

        header .top-toolbar .help:hover {
            background-color: #00778f;
        }

        header .top-toolbar .help svg {
            display: block
        }

body.fullWidth header {
    padding: 0 0.9375rem;
}

header nav {
    position: relative;
}

flex {
    display: flex;
}

gap-1 {
    gap: 0.625rem;
}

.justify-between {
    justify-content: space-between;
}

header nav.full {
    display: flex;
}

    header nav.full .menuToggle {
        flex-grow: 1;
        margin-left: 0.9375rem;
    }

body.fullWidth header nav.full .menuToggle {
    position: absolute;
    margin: 0;
    display: block;
    top: 45px;
    left: -0.9375rem;
    right: -0.9375rem;
}

body.Dark.fullWidth header nav.full .menuToggle {
    background: none 0% 0% / auto repeat scroll padding-box border-box rgb(28, 28, 28);
}

header nav a.amar-brand {
    display: inline-block;
    align-items: center;
    height: 44px;
    padding: 0.5625rem 0;
}

header nav a.amar-android {
    display: none;
}

header .top-toolbar img {
    max-width: 100%;
    height: auto;
}

#ThemeChooser {
    display: none;
}


header nav .menuToggle:before {
    content: "";
    display: table;
    clear: left;
}

header nav .menuToggle:after {
    content: "";
    display: table;
    clear: both;
}

header nav .menuToggle input {
    display: block;
    width: 30px;
    height: 32px;
    position: absolute;
    top: 5px;
    left: 10px;
    cursor: pointer;
    opacity: 0;
    z-index: 2;
    margin: 0;
    -webkit-touch-callout: none;
}

body.fullWidth header nav .menuToggle input {
    top: -2.375rem;
    left: 0.9375rem;
}

header nav .menuToggle input:checked ~ .burger span {
    opacity: 1;
    transform: rotate(45deg) translate(-3px,-9px);
    background: #F7941E;
}

    header nav .menuToggle input:checked ~ .burger span:nth-last-child(3) {
        opacity: 0;
    }

    header nav .menuToggle input:checked ~ .burger span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0px, 0px);
        margin: 0;
    }

header nav .menuToggle input:checked ~ ul {
    max-height: 999px;
}

header nav .menuToggle .burger {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
}

body.fullWidth header nav .menuToggle .burger {
    top: -2rem;
    left: 0.9375rem;
}

header nav .menuToggle .burger span {
    display: block;
    width: 1.5625rem;
    height: 0.1875rem;
    margin-bottom: 0.3125rem;
    position: relative;
    background: #fff;
    border-radius: 0.1875rem;
    z-index: 1;
    transform-origin: 4px 0px;
    transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.3s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.33s ease;
}

    header nav .menuToggle .burger span:first-child {
        transform-origin: 50% 0%;
    }

    header nav .menuToggle .burger span:nth-last-child(2) {
        transform-origin: 50% 0%;
    }

header nav ul {
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    max-height: 0;
    position: relative;
    text-align: left;
}

    header nav ul li {
        list-style: none;
        position: relative;
    }

        header nav ul li a {
            line-height: 2.5rem;
            padding: 0 0.0625rem;
            display: block;
            color: #fff;
            font-weight: bold;
            text-shadow: 0px 1px 1px #012c32;
            letter-spacing: normal;
        }

header nav.full ul li a {
    line-height: 2.75rem;
}

header nav ul li.has-dropdown .toggle {
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 2.5rem;
}

    header nav ul li.has-dropdown .toggle:checked ~ ul.dropdown {
        max-height: 999px;
    }

    header nav ul li.has-dropdown .toggle:checked ~ a:after {
        border-color: transparent transparent #fff transparent;
    }

header nav ul li.has-dropdown > a:after {
    content: "";
    display: block;
    border: inset 5px;
    border-color: #fff transparent transparent transparent;
    border-left-style: solid;
    position: absolute;
    top: 20px;
    right: 0;
}

header nav ul.dropdown {
    max-height: 0;
    z-index: 99;
    overflow: hidden;
    padding-left: 1.5em !important;
}



header:after {
    content: "";
    display: table;
    clear: both;
}

header .search-box, .sky-tabs .search-box {
    margin-top: 0.5625rem;
    margin-bottom: 0.5625rem;
    text-align: left;
    -webkit-transition: width 1s ease-in;
    -moz-transition: width 1s ease-in;
    -o-transition: width 1s ease-in;
    transition: width 1s ease-in;
    padding-right: 0;
    z-index: 10;
}



    header .search-box input, .sky-tabs .search-box input {
        flex: 1 1 0;
        width: 100%;
        padding: 0.25rem 0.625rem;
        z-index: 3;
        border-radius: 0;
        color: #333;
        border: none;
        background-color: #fff;
        transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
        margin: 0;
        font-size: 1rem;
        line-height: 1.125rem;
        outline: none;
    }

    header .search-box button, .sky-tabs .search-box button {
        background: #ebedf0;
        color: #4b4f56;
        height: 100%;
        cursor: pointer;
        border-radius: 0;
        font-size: 0;
        border: none;
        margin: 0;
        padding: 0 0.375rem;
    }

        header .search-box button svg, .sky-tabs .search-box button svg {
            width: 15px;
            height: 15px;
        }
/*bs utils for foundation base pages*/
.input-group {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

.input-group-append {
    margin-left: -1px;
    display: flex;
}


.twitter-typeahead {
    display: flex !important;
    width: 100%;
}

.twitter-typeahead, .tt-menu, header .tt-dataset .tt-suggestion span.s, .sky-tabs .tt-dataset .tt-suggestion span.s {
    flex: 1 1 0;
}

header .tt-dataset .tt-suggestion, .sky-tabs .tt-dataset .tt-suggestion {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: stretch;
    align-items: stretch;
}

    header .tt-dataset .tt-suggestion span, .sky-tabs .tt-dataset .tt-suggestion span {
        display: flex;
    }

header ul.top-btns {
    margin: 0 0 0 10px;
    display: none;
    float: none !important;
}


    header ul.top-btns > li > a {
        padding: 0 8px;
        line-height: 44px;
        color: #fff;
        font-size: 13px;
        -webkit-font-smoothing: antialiased;
        font-weight: bold;
    }

        header ul.top-btns > li > a.usr {
            text-transform: lowercase
        }

    header ul.top-btns a:hover {
        background-color: #00778f;
        opacity: 1;
    }

header nav ul.mainNav {
    background: #00778f;
    overflow: hidden;
    padding-left: 0.9375rem !important;
    padding-right: 0.9375rem !important;
}


.heading_bootom {
    position: relative;
    height: auto;
    background: #014f5b;
    overflow: hidden;
}

    .heading_bootom h1 {
        font-size: 14px;
        color: #fff;
        font-weight: 700;
        margin: 0;
        line-height: 50px;
    }

    .heading_bootom ul.subnav {
        display: none;
        position: relative;
        max-height: 30px;
        margin: 0;
        /*overflow: hidden;*/
        padding: 0;
        transition: max-height 0.3s ease-in;
    }

        .heading_bootom ul.subnav li {
            display: block;
        }

            .heading_bootom ul.subnav li.toggle input {
                z-index: 2;
                width: 30px;
                height: 30px;
                opacity: 0;
                margin-top: -30px;
                float: right;
                cursor: pointer;
            }

            .heading_bootom ul.subnav li a {
                background: #00778f;
                line-height: 1.875rem;
                display: block;
                text-align: left;
                color: #fff;
                text-transform: uppercase;
                font-weight: 700;
                font-size: 0.75rem;
                padding: 0 0.9375rem;
                box-shadow: 2px -2px 2px #032b34;
            }

    .heading_bootom ul.pe-subnav li a {
        padding: 0 0.625rem !important;
    }

    .heading_bootom ul.subnav li a.active {
        background: #e6ecef;
        color: #014f5b;
    }

    .heading_bootom input.sub-toggle {
        position: absolute;
        right: 15px;
        top: 0;
        width: 30px;
        height: 30px;
        cursor: pointer;
        z-index: 10;
        opacity: 0;
        margin: 0;
    }

        .heading_bootom input.sub-toggle:checked ~ ul.subnav {
            max-height: 999px;
        }

        .heading_bootom input.sub-toggle ~ .toggle-ico {
            position: absolute;
            right: 15px;
            top: 0;
            width: 30px;
            height: 30px;
            color: #014f5b;
            line-height: 30px;
            width: 30px;
            font-size: 14px;
            z-index: 1;
            text-align: center;
        }


footer {
    padding-top: 50px;
    color: #fff;
    margin: 0 !important;
    text-shadow: 0 0 0 #014f5b, 1px 1px 1px #012c32;
}

    footer .row, .widget_quicklinks .row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    footer p {
        text-align: justify;
        font-size: 0.9375rem;
        color: #ccc;
        text-shadow: none;
        line-height: 1.5em;
        margin: 0;
    }

        footer p.last {
            padding-bottom: 1em;
            font-size: 12px;
        }

    footer .headset {
        float: left;
        display: inline-block;
        width: 5.75rem;
        height: 4.875rem;
        fill: #ccc;
        fill: rgba(204,204,204,0.43);
    }

    footer .cc-line1 {
        font-size: 0.75rem;
        line-height: 0.75rem;
    }

    footer .cc-line2 {
        font-size: 1.5625rem;
    }

        footer .cc-line2 a {
            color: #fd971d;
        }

    footer .cc-line3 {
        font-size: 0.875rem;
        color: #ddd;
    }

    footer .attention {
        margin-top: 1rem;
        margin-bottom: 1rem;
    }

    footer .h-group {
        margin-bottom: 20px;
        padding-bottom: 20px;
    }

        footer .h-group.xs-full {
            border-bottom: none;
            padding-bottom: 10px;
        }

        footer .h-group h4 {
            font-size: 0.875rem;
            text-transform: uppercase;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            font-weight: 700;
            margin-bottom: 0.5rem;
            padding-bottom: 0.25rem;
            margin-top: 0;
            opacity: .7;
        }



        footer .h-group ul {
            list-style-type: none;
            padding: 0;
            margin: 0;
            display: -webkit-flex; /* Safari */
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
            flex-wrap: wrap;
            flex-direction: row;
        }

            footer .h-group ul li {
                flex: 0 0 50%;
            }
                footer .h-group ul li.initial {
                    flex-basis: initial;
                }

                footer .h-group.xs-full ul li {
                    flex: 0 0 100%;
                }


        footer .h-group ul li a {
            color: #fff;
            text-decoration: none;
        }

            footer .h-group ul li a:hover {
                text-decoration: underline;
            }


    footer .item, footer .item p {
        background-color: transparent;
        text-align: center;
        font-size: 12px;
        margin-bottom: 0;
        padding-bottom: 10px
    }

        footer .item a {
            color: #fd971d
        }

    footer .appDetail {
        padding-top: 30px;
    }

        footer .appDetail .item {
            flex: 0 0 100%;
        }

    footer .item p + p {
        margin-top: -1em;
    }

.loading {
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -32px !important;
    width: 64px;
    height: 64px;
    z-index: 999;
}

    .loading:after {
        content: " ";
        display: block;
        border-radius: 50%;
        width: 0;
        height: 0;
        margin: 6px;
        box-sizing: border-box;
        border: 26px solid #00778f;
        border-color: #00778f transparent #00778f transparent;
        animation: lds-hourglass 1.2s infinite;
    }

@-webkit-keyframes blink-animation {
    from {
        background-color: rgba(247,148,29,0);
    }

    to {
        background-color: rgba(247,148,29,1);
    }
}

@keyframes lds-hourglass {
    0% {
        transform: rotate(0);
        animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    }

    50% {
        transform: rotate(900deg);
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

    100% {
        transform: rotate(1800deg);
    }
}

@media (orientation: landscape) {
    .at-share-dock.atss-bottom.at-shfs-small {
        display: none !important;
    }
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {
    footer .h-group.xs-full ul li {
        flex: 0 0 50%
    }
}

@media (min-width: 768px) {
    header nav a.amar-android {
        display: inline-block;
        height: 44px;
        margin-left: 1.25rem;
    }

        header nav a.amar-android > img {
            max-width: 100%;
            max-height: 100%;
        }

    #ThemeChooser {
        display: inline-block;
    }

    #MobileApp {
        display: none;
    }

    .col-md-1 {
        -ms-flex: 0 0 8.333333%;
        flex: 0 0 8.333333%;
        max-width: 8.333333%;
    }

    .col-md-3 {
        -ms-flex: 0 0 25%;
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-4 {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }

    .col-md-8 {
        -ms-flex: 0 0 66.666667%;
        flex: 0 0 66.666667%;
        max-width: 66.666667%;
    }

    .col-md-11 {
        -ms-flex: 0 0 91.666667%;
        flex: 0 0 91.666667%;
        max-width: 91.666667%;
    }

    .heading_bootom ul.subnav {
        max-height: 999px;
        display: block;
    }

        .heading_bootom ul.subnav li {
            display: inline-block;
        }

            .heading_bootom ul.subnav li + li {
                margin-left: 0.125rem;
            }

            .heading_bootom ul.subnav li a {
                text-align: center;
            }

    body.srcopen header .navbar-header {
        display: flex
    }


    footer .appDetail {
        display: -webkit-flex; /* Safari */
        display: flex;
    }

        footer .appDetail .item {
            flex: 1;
        }
}
/*tablet portrait*/
@media only screen and (min-width: 1024px) {
    header {
        position: relative;
    }

        header .navbar-header {
            margin-left: 0;
            -webkit-box-flex: 0;
            max-width: 10.625rem;
            margin-right: 1.25rem
        }

    body.fullWidth header nav.full .menuToggle {
        top: 0;
        position: relative;
    }

    body.Dark.fullWidth header nav.full .menuToggle {
        background-color: transparent;
    }

    body.srcopen header .menuToggle {
        display: initial;
    }

    header ul.top-btns, header .tt-suggestion .full, .sky-tabs .tt-suggestion .full {
        display: inline-block;
    }

    header nav .menuToggle:before {
        display: none;
    }

    header nav .menuToggle .burger, header nav .menuToggle .burger span {
        display: none;
    }

    header nav ul {
        float: left;
        max-height: 999px;
        width: auto;
        overflow: visible;
        padding: 0;
    }

        header nav ul li {
            line-height: 40px;
            position: relative;
            display: inline-block;
        }

            header nav ul li.has-dropdown > a {
                padding-right: 1rem;
            }

                header nav ul li.has-dropdown > a:after {
                    position: absolute;
                    content: "";
                    display: block;
                    border: inset 5px;
                    border-color: rgba(255, 255, 255, 0.4) transparent transparent transparent;
                    border-top-style: solid;
                    top: 45%;
                    right: 2px;
                }

            header nav ul li.has-dropdown:hover > .dropdown {
                display: block;
            }

            header nav ul li a:hover {
                color: #fd971d;
                text-decoration: none;
            }

        header nav ul.mainNav li + li {
            margin-left: 0.625rem;
        }

        header nav ul.mainNav {
            overflow: visible;
            background-color: transparent;
        }

        header nav ul.dropdown {
            float: none;
            display: none;
            position: absolute;
            z-index: 99;
            background-color: #00778f;
            white-space: nowrap;
            max-height: 999px;
            padding: 0 !important;
            overflow: initial;
        }

            header nav ul.dropdown li {
                display: block;
            }

                header nav ul.dropdown li:hover {
                    background: #074e68;
                }

                header nav ul.dropdown li a {
                    padding: 0 10px;
                }

                header nav ul.dropdown li + li {
                    margin-left: 0;
                    border-top: 1px solid #09454f;
                }

        header nav ul.top-border {
            border-color: transparent;
        }

        header nav ul.dropdown ul.dropdown {
            left: 100%;
            top: 0;
        }

    header nav .menuToggle input, .heading_bootom input.sub-toggle, .heading_bootom .toggle-ico {
        display: none;
    }

    .heading_bootom {
        padding-top: 0.625rem;
    }


    .d-sm-none {
        display: none !important;
    }

    footer .h-group ul li {
        flex: 0 0 25%;
    }

    footer .h-group.xs-full ul li {
        flex: 0 0 33.33%;
    }

        footer .h-group.xs-full ul li:last-child {
            text-align: right
        }
}

@media only screen and (min-width: 1137px) {
    .search-section {
        max-width: 600px;
    }
}

@media only screen and (min-width: 1200px) {
    header nav ul li {
        font-size: 0.9375rem;
    }
}



.bg-darkgreen, .bgg0 {
    background: #014f5b;
}


.navc {
    box-shadow: 1px 1px 1px #022b31;
}

.bg-green {
    background: #00778f;
}

.pb50 {
    padding-bottom: 50px !important;
}

.bgb0, footer .appDetail {
    background: #231f20;
}



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



.tt-menu {
    width: 100%;
    padding: 0;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.2);
    -webkit-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 5px 10px rgba(0,0,0,.2);
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
    border-top: none;
}

.tt-suggestion {
    padding: 0.625rem 1.25rem !important;
    border-bottom: 1px solid #ddd !important;
}

    .tt-suggestion:hover {
        cursor: pointer;
        background-color: #e0f0ff;
    }

    .tt-suggestion.tt-cursor {
        color: #fff;
        background-color: #F68933;
    }

    .tt-suggestion p {
        margin: 0;
    }

    .tt-suggestion .full {
        display: none;
    }

        .tt-suggestion .full strong {
            font-weight: normal;
        }

    .tt-suggestion .s .tt-highlight {
        color: #014f5b;
    }

.gist {
    font-size: 14px;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.widget_quicklinks {
    background: #fff;
    padding: 0.9375rem 0;
}

    .widget_quicklinks h3 {
        font-size: 18px;
        color: #000;
        margin: 0;
        line-height: 40px;
    }

    .widget_quicklinks ul {
        display: block;
        padding: 0;
        margin: 0;
        text-align: center;
    }

        .widget_quicklinks ul li {
            display: inline-block;
            font-size: 0;
            margin: 0.1875rem;
        }


            .widget_quicklinks ul li a {
                margin-left: 0;
                text-transform: uppercase;
                display: block;
                min-width: 2.0625rem;
                font-weight: 400;
                font-size: 0.875rem;
            }

                .widget_quicklinks ul li a:hover {
                    background: #014f5b;
                    color: #fff;
                }

.page-link {
    position: relative;
    display: block;
    padding: 0.3125rem 0.46875rem;
    margin-left: -1px;
    color: #014f5b;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

footer .logo {
    margin-top: 1.875rem;
    margin-bottom: 1.875rem;
}

footer .hotline-row {
    display: flex;
    gap: 1.875rem;
}

footer .logo .gl {
    float: left;
    width: 60%;
    max-width: 12.5rem;
    margin-top: -11px;
    margin-left: -10px;
}

footer .logo .apple img {
    width: 157px;
    height: 53px;
}

footer .social {
    list-style: none;
    margin: 7px 0 0;
    padding: 0;
    float: right;
    line-height: 1;
}

footer .appLink {
    margin-bottom: 1.25rem;
}

    footer .appLink > a {
        text-align: center;
        max-width: 12.5rem;
        display: inline-block;
    }

        footer .appLink > a.gl {
            margin-left: -10px;
        }

footer .social li {
    display: inline-block;
}

footer .social a {
    display: block;
    color: #fff;
    opacity: 0.8;
    border: 1px solid #fff;
    font-weight: bold;
    font-size: 0;
    float: left;
    width: 32px;
    text-align: center;
}

    footer .social a i {
        font-size: 18px;
        line-height: 32px;
        text-align: center;
        display: inherit;
    }

    footer .social a:hover {
        opacity: .9;
        text-decoration: none;
        background-color: rgba(255,255,255,0.2);
    }

    footer .social a + a {
        margin-left: 6px;
    }

.bg-1 {
    background: #dbe2d2;
}

.bg-2 {
    background: #e2d5cd;
}

.market-status {
    font-size: 0.6875rem;
    color: white;
    text-align: right;
    line-height: 1.2;
}

.circle {
    height: 0.75rem;
    width: 0.75rem;
    background-color: #73fb5c;
    border-radius: 50%;
    display: inline-block;
}

.updatedStatus {
    margin-right: 5px;
}

.RedIcon {
    background-color: #f76161 !important;
}

.marketStausRed {
    color: #f38b8b !important;
}

.statusGreen {
    color: #73fb5c;
}

.greenIcon {
    background-color: #73fb5c !important;
}
/* ============================================================================
   Dark theme — AmarStock v3
   Palette and structural choices ported from D:/THEME/AmarStock v3/AmarStock Dark.html.
   The page background is a deep blue-black (not pure #000), cards sit one step
   lighter, and the main navigation keeps a teal hue so the brand reads through
   into the dark theme instead of collapsing to flat black.
   ============================================================================ */

body.Dark {
    /* surfaces */
    --amar-bg-color: #0a0d12;
    --amar-bg-2: #0f141b;
    --amar-secondary-bg: #131a23; /* card */
    --amar-card-2: #182230; /* tab head, table head row */
    --amar-elev: #1c2735; /* hover / elevated */
    --amar-surface-hover: #1c2735;
    --amar-border-color: #243040;
    --amar-secondary-border: #2c394b;
    /* brand teal kept for nav + footer so the page still feels like AmarStock */
    --amar-teal: #0e3d4a;
    --amar-teal-2: #0a2f3a;
    --amar-teal-3: #134b5a;
    --amar-teal-accent: #15a3b6;
    /* status accents — referenced by the footer (hotline icon, copy-row name
       links, disclaimer second paragraph) and a few other dark-only surfaces */
    --amar-blue: #4ab8ff;
    --amar-yellow: #f5c84b;
    --amar-red: #ff5577;
    /* text */
    --amar-text-color: #aab3c0;
    --amar-text-strong: #e5e9ef;
    --amar-color-highlight: #e5e9ef;
    --amar-color-table-head: #7c8694;
    --amar-text-dim: #5b6470;
}

body.Dark,
body.Dark select {
    color: var(--amar-text-color);
}

body.Dark {
    background-color: var(--amar-bg-color);
}

body.Dark .bgg0,
body.Dark .widget_quicklinks {
    background-color: transparent;
}

body.Dark .bg-green {
    background-color: var(--amar-teal) !important;
}

body.Dark header ul.top-btns a:hover {
    background-color: var(--amar-teal-3);
}

body.Dark .navc {
    box-shadow: none;
}

body.Dark .widget_quicklinks .page-link {
    color: #fff;
    background-color: var(--amar-secondary-bg);
    border-color: var(--amar-border-color);
}

body.Dark .widget_quicklinks ul li a:hover {
    background-color: var(--amar-elev);
    color: var(--amar-teal-accent);
}

body.Dark footer p {
    color: var(--amar-text-color);
}

body.Dark header .search-box button {
    background-color: var(--amar-elev);
    color: #fff;
    stroke: #fff;
}

body.Dark input,
body.Dark header nav ul > li:hover,
body.Dark header nav ul.dropdown {
    background-color: var(--amar-bg-2);
}

body.Dark header .search-box {
    margin-top: 0.4375rem;
    margin-bottom: 0.4375rem;
}

body.Dark header .search-box input {
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}

body.Dark header .search-box button {
    padding-right: 0.625rem;
    padding-left: 0.625rem;
}

body.Dark #bottomTabs #tab3 ul li span:last-child {
    color: #fff;
}

@media only screen and (min-width: 1024px) {
    body.Dark header nav ul.dropdown,
    body.Dark header nav ul.dropdown li:hover {
        background-color: var(--amar-teal-2);
    }

    body.Dark header nav ul.dropdown li + li {
        border-top-color: var(--amar-border-color);
    }
}

/* ---------- top bar (header.bgg0) -----------------------------------------
   Sits at the very top of every page. Use the slightly elevated background
   so it reads as its own band against the page bg. */
body.Dark header,
body.Dark header.bgg0 {
    background-color: var(--amar-bg-2) !important;
    border-bottom: 1px solid var(--amar-border-color);
}

body.Dark header ul.top-btns > li > a {
    color: var(--amar-text-strong);
}

/* ---------- main navigation (.bg-green.navc + dropdowns) ------------------
   The main nav keeps the AmarStock teal so the brand identity stays intact. */
body.Dark .bg-green.navc {
    background-color: var(--amar-teal) !important;
    border-bottom: 1px solid #000;
}

body.Dark header nav ul li a {
    color: #cfe6ec;
    text-shadow: none;
}

body.Dark header nav ul li:hover > a,
body.Dark header nav ul li a:hover {
    background-color: var(--amar-teal-3);
    color: #fff;
}

body.Dark header nav ul.dropdown {
    background: var(--amar-teal-2);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
}

body.Dark header nav ul.dropdown li a {
    color: #cfe6ec;
    text-shadow: none;
}

body.Dark header nav ul.dropdown li:hover > a {
    background-color: var(--amar-teal-3);
    color: #fff;
}

body.Dark header nav ul li.has-dropdown > a::after {
    border-color: #cfe6ec transparent transparent transparent;
}

/* ---------- secondary band: DSE Today / Birds Eye View + market status ---- */
body.Dark .heading_bootom {
    background: var(--amar-bg-color) !important;
    box-shadow: none !important;
}

body.Dark .heading_bootom h1 {
    color: var(--amar-text-strong);
}

body.Dark .heading_bootom .market-tab,
body.Dark .market-tab span,
body.Dark .market-tab #marketstatus,
body.Dark .market-tab #dateTime,
body.Dark .market-tab #fundamental {
    color: var(--amar-text-color);
}

body.Dark .exchangetitle a {
    background: var(--amar-card-2) !important;
    color: var(--amar-text-color) !important;
    box-shadow: none !important;
}

body.Dark .exchangetitle a:hover {
    background: var(--amar-elev) !important;
    color: var(--amar-color-highlight) !important;
}

body.Dark .exchangetitle .active,
body.Dark .exchangetitle span.active {
    background: var(--amar-teal-3) !important;
    color: #fff !important;
    box-shadow: none !important;
}

/* ---------- containarea (page content wrapper) ---------------------------- */
/* Used both as the main-page wrapper AND inside the footer, so paint the
   page-bg here and re-clear it in the footer block below. */
body.Dark .containarea,
body.Dark .container.containarea {
    background: var(--amar-bg-color);
}

/* ---------- sky-tabs (cards used for every widget) -----------------------
   Three states to handle:
     * unselected tab label  -> page-bg coloured so it sits "below" the card
     * active tab label      -> teal so it visually pops, matches design
     * hover tab label       -> elevated surface
   The card body (ul > li) uses the card surface. */
body.Dark .sky-tabs > ul > li,
body.Dark .boxBorder,
body.Dark .large-12.columns.boxBorder {
    border: none !important;
    box-shadow: none !important;
}

body.Dark .sky-tabs > ul > li {
    background: var(--amar-secondary-bg);
    color: var(--amar-text-color);
}

body.Dark .sky-tabs li {
    box-shadow: none !important;
}

body.Dark .sky-tabs .typography {
    background: transparent;
    color: var(--amar-text-color);
}

body.Dark .sky-tabs .tab_nameShow,
body.Dark .sky-tabs h3,
body.Dark .sky-tabs h4,
body.Dark .sky-tabs h5 {
    color: var(--amar-color-highlight);
}

body.Dark .sky-tabs > label,
body.Dark .sky-tabs > label span,
body.Dark .sky-tabs > label span span,
body.Dark .sky-tabs > label.col12 span,
body.Dark .sky-tabs > label.col2 span,
body.Dark .sky-tabs > label.col22 span,
body.Dark .sky-tabs > label.col3 span,
body.Dark .sky-tabs > label.col5 span {
    background: var(--amar-card-2) !important;
    color: var(--amar-text-color) !important;
    border-top-color: transparent !important;
    box-shadow: none !important;
}

body.Dark .sky-tabs > input:checked + label,
body.Dark .sky-tabs > input:checked + label span,
body.Dark .sky-tabs > input:checked + label span span,
body.Dark .sky-tabs > input:checked + label span span span.mn {
    background: var(--amar-teal-3) !important;
    color: #fff !important;
    border-top-color: transparent !important;
}

body.Dark .sky-tabs > label:hover span,
body.Dark .sky-tabs > label:hover span span,
body.Dark .sky-tabs label span span:hover {
    background: var(--amar-elev) !important;
    color: var(--amar-color-highlight) !important;
    border-top-color: transparent !important;
}

/* ---------- index-value-status (DSEX/DSES/DS30 hero block) ---------------- */
body.Dark .index-value-status .box_title {
    background: var(--amar-secondary-bg);
    border-top: none !important;
    color: var(--amar-text-color);
}

body.Dark .index-value-status ul.subnav li a {
    background: var(--amar-card-2) !important;
    color: var(--amar-text-color) !important;
    box-shadow: none !important;
}

body.Dark .index-value-status ul.subnav li a.active {
    background: var(--amar-teal-3) !important;
    color: #fff !important;
}

body.Dark .index-value-status h1,
body.Dark .index-value-status .box_title p {
    color: var(--amar-color-highlight) !important;
}

/* ---------- alphabet picker (between content and footer) ------------------ */
body.Dark .widget_quicklinks {
    background: var(--amar-secondary-bg) !important;
    border: none;
    box-shadow: none;
}

body.Dark .widget_quicklinks h3 {
    color: var(--amar-color-highlight);
}

body.Dark .widget_quicklinks ul li a {
    background-color: var(--amar-card-2);
    color: var(--amar-text-color);
    border-color: var(--amar-border-color);
}

body.Dark .widget_quicklinks ul li a:hover {
    background: var(--amar-elev);
    color: var(--amar-color-highlight);
}

body.Dark .widget_quicklinks ul li a.active {
    background: var(--amar-teal-3);
    color: #fff;
}

body.Dark .page-link {
    background-color: var(--amar-card-2);
    border-color: var(--amar-border-color);
    color: var(--amar-text-color);
}

/* ---------- tables ------------------------------------------------------- */
body.Dark table.stack {
    background: transparent;
    color: var(--amar-text-color);
}

body.Dark table.stack th {
    background: var(--amar-card-2);
    color: var(--amar-color-table-head);
    border-bottom: 1px solid var(--amar-border-color);
}

body.Dark table.stack td {
    border-bottom: 1px solid var(--amar-border-color);
    color: var(--amar-text-color);
}

body.Dark table.stack tbody tr:nth-of-type(even) {
    background-color: rgba(255, 255, 255, 0.02);
}

body.Dark table.stack tbody tr:hover,
body.Dark table.stack tbody tr:hover td {
    background-color: var(--amar-elev) !important;
    color: var(--amar-color-highlight);
}

/* ---------- search / typeahead ------------------------------------------- */
body.Dark .tt-menu {
    background-color: var(--amar-secondary-bg);
    border-color: var(--amar-border-color);
    color: var(--amar-text-color);
}

body.Dark .tt-suggestion {
    border-bottom-color: var(--amar-border-color) !important;
    color: var(--amar-text-color);
}

body.Dark .tt-suggestion:hover {
    background-color: var(--amar-elev);
}

body.Dark header .search-box input,
body.Dark .sky-tabs .search-box input {
    background-color: var(--amar-secondary-bg);
    color: var(--amar-color-highlight);
}

/* ---------- generic boxes still using white in light theme ---------------- */
body.Dark .box.box_full_width.box_margin_bottom {
    background: var(--amar-secondary-bg);
    border-color: var(--amar-border-color);
}

body.Dark .box_title {
    color: var(--amar-color-highlight);
}

body.Dark .loading:after {
    border-color: var(--amar-teal-accent) transparent var(--amar-teal-accent) transparent;
}

/* ---------- Highcharts (covers every chart on the page) ------------------ */
body.Dark .highcharts-background,
body.Dark .highcharts-plot-background {
    fill: var(--amar-secondary-bg) !important;
}

body.Dark .highcharts-grid-line {
    stroke: var(--amar-border-color) !important;
}

body.Dark .highcharts-axis-line,
body.Dark .highcharts-tick {
    stroke: var(--amar-border-color) !important;
}

body.Dark .highcharts-axis-labels text,
body.Dark .highcharts-yaxis-labels text,
body.Dark .highcharts-xaxis-labels text,
body.Dark .highcharts-title,
body.Dark .highcharts-subtitle,
body.Dark .highcharts-legend-item text {
    fill: var(--amar-text-color) !important;
}

body.Dark .highcharts-credits {
    fill: #555 !important;
}

body.Dark .highcharts-tooltip-box,
body.Dark .highcharts-tooltip text {
    fill: var(--amar-secondary-bg) !important;
}

body.Dark .highcharts-tooltip text tspan {
    fill: var(--amar-text-color) !important;
}

/* ---------- footer -------------------------------------------------------
   Whole footer (top columns AND copyright row) lives on the teal-2 surface
   per the design. The live markup is <footer class="bgg0">, which the
   generic .bgg0 rule makes transparent — re-paint it here. */
body.Dark footer,
body.Dark footer.bgg0 {
    background: var(--amar-teal-2) !important;
    color: #cfe6ec;
    text-shadow: none;
}

/* Override the generic .container.containarea rule (two classes -> higher
   specificity than `footer .containarea`). Match the same two-class
   specificity so the footer's wrapper stays transparent and the teal-2
   footer surface shows through. */
body.Dark footer .container.containarea,
body.Dark footer.bgg0 .containarea {
    background: transparent;
}

body.Dark footer p,
body.Dark footer .cc-line1,
body.Dark footer .cc-line2,
body.Dark footer .cc-line2 a,
body.Dark footer .cc-line3 {
    color: #cfe6ec;
}

body.Dark footer .h-group {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.Dark footer .h-group h4 {
    color: #cfe6ec;
    opacity: 1;
    letter-spacing: 1px;
}

body.Dark footer .h-group ul li a {
    color: #cfe6ec;
}

body.Dark footer .h-group ul li a:hover {
    color: var(--amar-teal-accent);
}

body.Dark footer .headset {
    fill: rgba(207, 230, 236, 0.55);
}

body.Dark footer .headset svg path {
    fill: currentColor;
}

body.Dark .appDetail,
body.Dark footer .appDetail,
body.Dark .bgb0 {
    background: var(--amar-teal-2) !important;
    color: #9fb4bc;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body.Dark footer .item p,
body.Dark footer .item a {
    color: #cfe6ec;
}

/* ----------------------------- DARK THEME ------------------------------- */
body.Dark footer {
    text-shadow: none;
}

body.Dark footer .h-group h4 {
    color: #cfe6ec;
}

body.Dark footer .h-group ul li a {
    color: #cfe6ec;
}

body.Dark footer .h-group ul li a:hover {
    color: var(--amar-teal-accent);
}

body.Dark footer .hotline-row .headset {
    color: var(--amar-blue, #4ab8ff);
}

body.Dark footer .cc-line1,
body.Dark footer .cc-line3 {
    color: #9fb4bc;
}


body.Dark footer .attention {
    color: #9fb4bc;
}

body.Dark footer .attention b {
    color: #cfe6ec;
}

body.Dark footer .store-badge {
    border-color: var(--amar-elev, #1c2735);
}

body.Dark footer .store-badge:hover {
    border-color: var(--amar-teal-accent);
}

body.Dark footer .appDetail {
    background: var(--amar-teal-2) !important;
    color: #9fb4bc;
}

body.Dark footer .appDetail .item p {
    color: #9fb4bc;
}

/* Yellow accent on the company-name link in each copy-row cell */
body.Dark footer .appDetail .item p a {
    color: var(--amar-yellow, #f5c84b);
    text-decoration: none;
}

body.Dark footer .appDetail .item p a:hover {
    text-decoration: underline;
}

body.Dark footer .bgb0 {
    background: var(--amar-teal-2) !important;
}

body.Dark footer .bgb0 p,
body.Dark footer .bgb0 p.last {
    color: #7e9097;
}

/* The second disclaimer paragraph ("In no event…") renders in red in the
   design. The markup carries no class for it; target the second <p>. */
body.Dark footer .bgb0 p + p {
    color: var(--amar-red, #ff5577);
}


/* Legacy footer_section / footer_botton classes (used by some older pages) */
body.Dark .footer_section {
    background: var(--amar-teal-2) !important;
    border-top: 1px solid var(--amar-teal-3) !important;
    color: #cfe6ec;
}

body.Dark .footer_top a,
body.Dark .footer_nav ul li a,
body.Dark .weiget h4 {
    color: #cfe6ec;
}

body.Dark .footer_nav ul li a:hover {
    color: var(--amar-teal-accent);
}

body.Dark .footer_botton {
    background: var(--amar-teal-2);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body.Dark .footer_botton .text_area p,
body.Dark .copyright p,
body.Dark .bottom_text .text_area p {
    color: #9fb4bc;
}

/* ---------- UserSetting / theme picker page ------------------------------ */
body.Dark .bakcground_white,
body.Dark .background_white {
    background: var(--amar-bg-color);
    color: var(--amar-text-color);
}

body.Dark #UserSettings .side-nav {
    border-color: var(--amar-border-color);
}

body.Dark #UserSettings .side-nav li + li {
    border-top-color: var(--amar-border-color);
}

body.Dark #UserSettings .side-nav .item,
body.Dark .side-nav li .item,
body.Dark .side-nav li a.item {
    color: var(--amar-text-color);
    background: transparent;
}

body.Dark #UserSettings .side-nav .item:hover,
body.Dark .side-nav li .item:hover,
body.Dark .side-nav li a.item:hover {
    background: var(--amar-elev);
    color: var(--amar-color-highlight);
}

body.Dark #UserSettings .side-nav .item.active,
body.Dark .side-nav li .item.active,
body.Dark .side-nav li a.item.active {
    background: var(--amar-teal-3);
    color: #fff;
}

body.Dark .panel {
    background: var(--amar-secondary-bg);
    border-color: var(--amar-border-color);
    color: var(--amar-text-color);
}

body.Dark .panel h3 {
    color: var(--amar-color-highlight);
    border-bottom-color: var(--amar-border-color);
}

body.Dark .form-control,
body.Dark input.form-control,
body.Dark select.form-control,
body.Dark textarea.form-control {
    background-color: var(--amar-secondary-bg);
    color: var(--amar-color-highlight);
    border-color: var(--amar-border-color);
}

body.Dark .form-control::placeholder {
    color: var(--amar-text-dim);
}

/* ---------- alert / button utilities ------------------------------------- */
body.Dark .alert-box.warning {
    background: #3a2d10;
    color: #f7d57a;
    border-color: #6e561e;
}

body.Dark .alert-box.success {
    background: #0e2a18;
    color: #a8e6c0;
    border-color: #1f5234;
}

body.Dark .button.secondary {
    background: var(--amar-elev);
    color: var(--amar-text-color);
}