/* 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'
(1976,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1977,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1978,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1979,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1980,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1981,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1982,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1983,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1984,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1985,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1986,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1987,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1988,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1989,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1990,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1991,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1992,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1993,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1994,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1995,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1996,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1997,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1998,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1999,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2000,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2001,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2002,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2003,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2004,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2005,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2006,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(2007,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(3440,28): 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);
}

body {
    --amar-border-color: #e0e3eb;
    --amar-text-color: #433;
    --amar-bg-color: #fff;
    --amar-secondary-bg: #D9D9D9;
    --amar-secondary-border: #b6b6b6;
    --amar-color-highlight: #000;
    --amar-color-table-head: #797979;
    --card: #ffffff;
    --card-2: #f2f5f8;
    --elev: #f8fafc;
    --border: #dfe4eb;
    --border-2: #c8d1dc;
    --teal: #0e3d4a;
    --teal-2: #0a2f3a;
    --teal-3: #134b5a;
    --teal-accent: #15a3b6;
    --t1: #1b2330;
    --t2: #4a5563;
    --t3: #7a8492;
    --t-dim: #a3aab5;
    --green: #1aa353;
    --green-2: #1f7e4d;
    --red: #e03050;
    --red-2: #c2364f;
    --blue: #1d7fd6;
    --blue-2: #2a8fd0;
    --orange: #f5821f;
    --yellow: #d4a521;
    --magenta: #c2287a;
    --bullbg-1: #e8f1f5;
    --link: #1d7fd6;
    --link-red: #e03050;
}

a {
    color: #045e7c;
    outline: none;
}

h1 {
    font-size: 1.7em;
    text-transform: uppercase;
    margin: 0;
    display: inline-block;
    word-spacing: 5px;
    color: #616161;
    text-shadow: 1px 1px 0px #fff, 2px 2px 0px rgba(0,0,0,0.15);
}
.flex {
    display: flex;
}
.flex-col {
    display: flex;
    flex-direction: column;
}
    .flex-col .scroll-y {
        flex: 1 1 auto;
        min-height: 0px;
    }
.flex-1{
    flex:1!important;
}
#chartHight {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

.blue {
    color: #079de1;
}

.box-shadow {
    box-shadow: 0 3px 4px #ccc;
}

.bakcground_white {
    background-color: #fff;
}

.reveal-modal-bg {
    position: fixed;
}

.validation-summary-errors {
    font-size: 0.9em;
}

    .validation-summary-errors ul {
        list-style: none;
        padding: 0;
    }

        .validation-summary-errors ul li {
            color: #ffa216 !important;
        }

.amarModal {
    position: fixed;
    z-index: 9999999;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: none;
    overscroll-behavior: contain;
}

    .amarModal.active {
        display: block;
    }

        .amarModal.active:before {
            content: "";
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: rgba(230, 236, 239,0.9);
        }

    .amarModal.white.active:before {
        background: rgba(0, 0, 0,0.65);
    }

    .amarModal.white {
        align-items: center;
        display: flex;
        height: 100vh;
        justify-content: center;
        left: 0;
        overflow: auto;
        position: fixed;
        top: 0;
        transition: opacity .3s ease;
        width: 100vw;
        z-index: 2147483647;
    }

    .amarModal .modal-component {
        background: #f8f8f8;
        font-size: 1rem;
        font-weight: 600;
        padding: 1.25rem;
        position: relative;
        text-align: center;
        border-radius: 0.625rem;
        margin: 0;
        width: 37.5rem;
        max-width: calc(100% - 0.9375rem);
        position: relative;
    }
    .amarModal.white .modal-component {
        background: #fff;
    }

    .amarModal .modal-header .modal-subtitle, .amarModal .modal-header .modal-title {
        font-size: 1.5rem;
        font-weight: 700;
        line-height: 1.2;
        margin-bottom: 0;
    }


.amarModal.white .modal-header .modal-title {
    background-color: transparent;
    color: #4c4847;
    text-shadow: none;
    font-size:1.25rem;
}

.modal-header .modal-subtitle {
    color: #00778f;
    margin-top: 0;
}
.modal-header h4 {
    color: #757473;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.3125rem;
}
.amarModal .modal-body {
    align-items: center;
    display: flex;
    flex-direction: column;
    margin: 0 -1.25rem;
    overflow: hidden;
    padding: 2.1875rem 0 0;
}

.modal-slideshow-component {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 21.875rem;
}

.amarModal .trial-slideshow-container {
    align-items: center;
    display: flex;
    justify-content: center;
}

.modal-body .slideshow-slide {
    align-items: center;
    background-color: #fff;
    border-radius: 0.3125rem;
    box-shadow: 0 0.125rem 0.1875rem 0 rgba(48, 45, 43, .25), 0 0 0.0625rem 0 rgba(48, 45, 43,0.15);
    color: #4c4847;
    font-size: 1.25rem;
    justify-content: center;
    overflow: hidden;
    padding: 0.625rem 0;
    margin: 0 0.625rem;
}

.modal-body .slideshow-icon {
    align-items: center;
    display: flex;
    height: 8.9375rem;
    justify-content: center;
    margin: 1.25rem auto;
    position: relative;
}

.modal-body .slideshow-slide-title {
    font-size: 1.125rem;
    font-weight: 800;
    padding: 0 0.3125rem;
}

.modal-body .slideshow-slide-subtitle {
    color: #666564;
    font-size: 1rem;
    font-weight: 600;
    padding: 0 0.625rem;
}

.modal-body .modal-trial-button {
    margin: 0 auto 0.9375rem;
    max-width: 21.875rem;
    width: 100%;
    justify-content: space-between;
    display: flex;
}

    .modal-body .modal-trial-button a {
        align-items: center;
        border: 0;
        border-radius: 0.3125rem;
        box-shadow: 0 5px 0 0 #014f5b,0 0.4375rem 0.59375rem 0.03125rem transparent;
        display: flex;
        min-height: 3.125rem;
        width: 100%;
        word-break: break-word;
        font-size: 1.375rem;
        font-weight: 800;
        line-height: 1.2;
        text-shadow: 1px 1px 0px rgb(0, 0, 0);
        justify-content: center;
        transition: all .07s;
        background-color: #00778f;
        color: #fff;
        padding: 0.3125rem 1.25rem;
        text-align: center;
    }

        .modal-body .modal-trial-button a + a {
            margin-left: 0.9375rem;
        }

        .modal-body .modal-trial-button a:hover {
            background-color: #014f5b;
            box-shadow: 0 5px 0 0 #02262c,0 0.4375rem 0.59375rem 0.03125rem transparent;
        }

        .modal-body .modal-trial-button a.gray {
            background-color: #999999;
            box-shadow: 0 5px 0 0 #737171, 0 0.4375rem 0.59375rem 0.03125rem transparent;
        }

.modal-trial-footer a {
    color: #9d9d9e;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.3125rem;
}

.slideshow-icon-bg {
    background-image: linear-gradient( 90deg,rgba(0,0,0,.1) 3.75rem,rgba(0,0,0,.1) 0),linear-gradient( 90deg,rgba(0,0,0,.1) 3.75rem,rgba(0,0,0,.1) 0);
    background-position: 0 0,0 3.75rem,0 3.75rem;
    background-repeat: repeat-x;
    background-size: 7.5rem 3.75rem;
    border-radius: 1.25rem;
    content: "";
    display: block;
    height: 7.5rem;
    position: absolute;
    transform: rotate( 45deg );
    width: 7.5rem;
}

.slideshow-icon .icon {
    background: url('/Content/img/box_icons.png') no-repeat top left;
    width: 57px;
    height: 57px;
}

.icon.ico-clock {
    background-position: -112px 0;
}

.icon.ico-chart {
    background-position: -169px 0;
    width: 206px;
    height: 53px;
}

.icon.ico-back {
    background-position: 0 0;
    width: 112px;
    height: 76px;
}

.icon.ico-corre {
    background-position: -375px 0;
    width: 180px;
    height: 68px;
}

.icon.ico-screen {
    background-position: -555px 0;
    width: 60px;
    height: 60px;
}

.icon.ico-alert {
    background-position: -615px 0;
    width: 80px;
    height: 65px;
}

.image {
    width: 100%;
    height: 200px;
}


.css-slider .radio {
    display: none;
}

.css-slider-wrap {
    overflow: hidden;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: 0.3125rem;
}

.css-slider-inner {
    width: 500%;
}

    .css-slider-inner .slide {
        width: 20%;
        float: left;
    }

    .css-slider-inner .slide,
    .css-slider .slideshow-dot,
    .css-slider .radio-btn {
        transition: all 0.5s ease-out;
    }

.slideshow-dot {
    padding: 0.9375rem 0;
    position: relative;
    align-items: center;
    display: flex;
    justify-content: center;
}
/* Move slides overflowed container */
.css-slider #slide1:checked ~ .css-slider-wrap .css-slider-inner {
    margin-left: 0;
}

.css-slider #slide2:checked ~ .css-slider-wrap .css-slider-inner {
    margin-left: -100%;
}

.css-slider #slide3:checked ~ .css-slider-wrap .css-slider-inner {
    margin-left: -200%;
}

.css-slider #slide1:checked ~ div .slideshow-dot .radio-btn:nth-child(1),
.css-slider #slide2:checked ~ div .slideshow-dot .radio-btn:nth-child(2),
.css-slider #slide3:checked ~ div .slideshow-dot .radio-btn:nth-child(3) {
    height: 0.5rem;
    width: 0.5rem;
}

.css-slider .radio-btn {
    border-radius: 50%;
    background-color: #bdbcb7;
    height: 0.3125rem;
    width: 0.3125rem;
    display: inline-block !important;
    margin: 0 0.3125rem;
    cursor: pointer;
}

.css-slider .label {
    opacity: 0;
    position: absolute;
}

@keyframes css-slider-bullet {
    0%, 33.32333333333334% {
        background-color: #666463;
        height: 0.5rem;
        width: 0.5rem;
    }

    33.333333333333336%, 100% {
        height: 0.3125rem;
        width: 0.3125rem;
    }
}

.css-slider #play1:checked ~ div .slideshow-dot .radio-btn:nth-child(1) {
    animation: css-slider-bullet 12300ms infinite -1000ms;
}

.css-slider #play1:checked ~ div .slideshow-dot .radio-btn:nth-child(2) {
    animation: css-slider-bullet 12300ms infinite 3100ms;
}

.css-slider #play1:checked ~ div .slideshow-dot .radio-btn:nth-child(3) {
    animation: css-slider-bullet 12300ms infinite 7200ms;
}

@keyframes css-slider-slide {
    0%, 25.203252032520325% {
        margin-left: 0;
    }

    33.333333333333336%, 58.53658536585366% {
        margin-left: -100%;
    }

    66.66666666666667%, 91.869918699187% {
        margin-left: -200%;
    }
}

.css-slider > #play1:checked ~ .css-slider-wrap .css-slider-inner {
    animation: css-slider-slide 12300ms infinite;
}
/*login modal*/
.amarModal .login {
    max-width: 20rem;
    margin: 0 auto;
}
    .amarModal .login .head {
        margin-top: 1.25rem;
        margin-bottom: 1.25rem;
        text-align: center;
        background-color: transparent;
        box-shadow:none;
    }
.amarModal .login .head img{
   max-width:15rem;
}
    .amarModal .login .head h3 {
        font-size: 1.125rem;
        font-weight: 700;
        text-transform: uppercase;
        margin-top: 0.625rem;
        margin-bottom: 2.5rem;
        color: #4c4847;
    }
.amarModal .login .divider {
    position: relative;
    margin-bottom: 1em;
    margin-top: 1em;
    text-align: center;
}

    .amarModal .login .divider:before, .amarModal .login .divider:after {
        position: absolute;
        content: "";
        display: block;
        border-top: 1px solid #989898;
        width: 40%;
        top: 50%;
    }

    .amarModal .login .divider:before {
        left: 0;
    }

    .amarModal .login .divider:after {
        right: 0;
    }
    
    
    .amarModal .login .btn {
        width: 100%;
        text-align: left;
        padding: 0;
        border-radius: 0;
        margin-bottom: 10px;
        line-height: 25px;
        display: block;
    }
    .amarModal .login .btn.Google {
        font-family: 'Roboto', sans-serif;
        font-size: 1rem;
        background: #4285F4;
        color: #fff;
    }

        .amarModal .login .btn.Google:hover {
            background: #3367D6
        }

    .amarModal .login .btn .fa-Google:before {
        content: "\f0d5";
    }
    .amarModal .login form .styledCheck {
        display: inline-block;
        float: left;
        position: relative;
    }

        .amarModal .login form .styledCheck input {
            opacity: 0;
            position: absolute;
            margin: 0;
            top: 0.375rem;
            left: 1px;
        }

        .amarModal .login form .styledCheck label {
            position: relative;
            cursor: pointer;
            margin-left: 0;
        }

            .amarModal .login form .styledCheck label:before {
                display: inline-block;
                content: "";
                width: 16px;
                height: 16px;
                background-color: #fafafa;
                vertical-align: middle;
                margin: -2px 10px 0 0;
                border: 1px solid #ccc;
            }

            .amarModal .login form .styledCheck label:after {
                content: "";
                position: absolute;
                top: 4px;
                left: 4px;
                background: #433;
                width: 9px;
                height: 9px;
                display: none;
            }

        .amarModal .login form .styledCheck input:checked + label:after {
            display: block;
        }

    .amarModal .login form .forgotPass {
        float: right;
        display: inline-block;
        font-size: 0.8125rem;
        cursor: pointer;
        line-height: 24px;
    }

        .amarModal .login form .forgotPass:hover {
            text-decoration: underline;
        }







.xscroll {
    overflow: hidden;
}

.xscroll .wrp {
    overflow-x: auto;
}

.xsheight {
    scrollbar-width: thin !important;
    height: 54px !important;
}

@media (pointer: fine) {
    .xscroll .wrp::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }
    .xscroll .wrp::-webkit-scrollbar-corner {
        display: none;
    }
    .xscroll .wrp::-webkit-scrollbar-thumb {
        border: 1px solid;
        border-color: #f1f3f6;
        border-radius: 3px;
        background-color: #d1d4dc;
    }
    .xscroll .wrp::-webkit-scrollbar-track {
        background-color: transparent;
        border-radius: 3px;
    }
}
.btn.loading,button.loading {
    position: initial;
    top: initial;
    left: initial;
    margin: initial !important;
    height: initial;
    width: auto;
}

    .btn.loading::after, button.loading:after {
        display: none;
    }

    .btn.loading i.fa, button.loading i.fa {
        animation: fa-spin 1s linear infinite;
    }

    button.spin svg{
        animation: fa-spin 1s linear infinite;
    }

        .btn.loading i.fa:before, button.loading i.fa:before {
            content: "\f021";
        }

.containarea.nopad {
    padding-left: 0;
    padding-right: 0;
}
/*spacing utility*/
.m-3 {
    margin: 1em !important
}

.my-3 {
    margin-top: 1em !important;
    margin-bottom: 1em !important
}
.my-5 {
    margin-top: 3em !important;
    margin-bottom: 3em !important
}
.mx-3 {
    margin-left: 1em !important;
    margin-right: 1em !important
}

.mt-3 {
    margin-top: 0.9375rem !important;
}

.mb-3 {
    margin-bottom: 0.9375rem !important
}

.mt-2, .my-2 {
    margin-top: 0.3125rem !important;
}

.p-3 {
    padding: 0.9375rem !important
}
.p-5 {
    padding: 1.875rem!important;
}
.py-3 {
    padding-top: 0.9375rem !important;
    padding-bottom: 0.9375rem !important
}

.px-3 {
    padding-left: 1em !important;
    padding-right: 1em !important
}

.pt-3 {
    padding-top: 1em !important;
}

.pt-2, .py-2 {
    padding-top: 0.3125rem !important;
}

.pb-3 {
    padding-bottom: 1em !important
}

.pb-4, .py-4 {
    padding-bottom: 0.9375rem !important;
}

.pt-4, .py-4 {
    padding-top: 0.9375rem !important;
}

.p-10px {
    padding: 10px !important
}

.py-10px {
    padding-top: 10px !important;
    padding-bottom: 10px !important
}

.px-10px {
    padding-left: 10px !important;
    padding-right: 10px !important
}

.pt-10px {
    padding-top: 10px !important;
}

.pb-10px {
    padding-bottom: 10px !important
}

.red {
    color: #cc075a !important;
}

.neutral {
    color: #1b2330 !important;
}

.green {
    color: #027d13 !important;
}

.value_icon ul {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block;
    width: 80px;
}

    .value_icon ul li {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        box-shadow: none !important;
        display: inline-block;
        list-style: outside none none;
        margin: 0 1px !important;
        padding: 0 !important;
    }

        .value_icon ul li::before {
            position: static !important;
        }

        .value_icon ul li a {
            padding: 1px;
        }

            .value_icon ul li a:hover {
                background: #00778f none repeat scroll 0 0 !important;
                color: #fff !important;
            }

            .value_icon ul li a i {
                font-size: 11px !important;
            }

.reveal-modal {
    position: fixed;
    z-index: 99999;
    padding: 0;
    top: 50% !important;
    transform: translateY(-50%);
    border-radius: 6px;
    
}
    .reveal-modal.full {
        height: 100%;
    }
    .reveal-modal .flex-col {
        height: 100%;
    }
    .reveal-modal h1 {
        margin: 0;
        border-bottom: 1px solid #e0e3eb;
        display: block;
        font-size: 1.25rem;
        text-shadow: none;
        text-transform: none;
        font-family: -apple-system,BlinkMacSystemFont,Trebuchet MS,Roboto,Ubuntu,sans-serif;
        font-weight: 600;
        padding: 0.9375rem;
        color: #131722;
    }

    .reveal-modal .tabs-content {
        padding-left: 1em;
        padding-right: 1em;
    }


    .reveal-modal .content-modal {
        padding: 0 0.9375rem;
    }

#credential_picker_container {
    top: 84px!important;
}

.panel.callout {
    border-style: solid;
    border-width: 1px;
    border-color: #b6edff;
    margin-bottom: 0.78125rem;
    padding: 0.78125rem;
    background: #ecfaff;
    color: #333333;
}

.jumpToBlock {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

    .jumpToBlock li {
        flex: 1;
        padding: 2px;
    }

        .jumpToBlock li a {
            text-align: center;
            background-color: #045e7c;
            color: #fff;
            display: block;
            padding: 2px;
            white-space: nowrap;
        }

            .jumpToBlock li a:hover {
                background-color: #0078a0;
            }

            .jumpToBlock li a i {
                margin-right: 5px;
            }

.accordion .accordion-navigation {
    position: relative;
}

    .accordion .accordion-navigation:before, .accordion .accordion-navigation:after {
        border-right: 2px solid #fff;
        content: '';
        display: block;
        height: 8px;
        margin-top: -6px;
        position: absolute;
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
        right: 14px;
        top: 14px;
        width: 0;
    }

    .accordion .accordion-navigation:after {
        margin-top: -1px;
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .accordion .accordion-navigation.active:before {
        top: 10px;
        margin-top: 0px;
        -moz-transform: rotate(135deg);
        -o-transform: rotate(135deg);
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .accordion .accordion-navigation.active:after {
        top: 10px;
        margin-top: 0px;
        margin-right: -4px;
        -moz-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }
#scrollTop {
    display: none;
    position: fixed;
    bottom: 5rem;
    border-radius: 50%;
    background-color: #00778f;
    color: #fff;
    font-size: 1.875rem;
    width: 3.125rem;
    height: 3.125rem;
    padding: 0;
    text-align: center;
    margin: 0;
    border: none;
    right: 1.25rem;
    outline: none;
    z-index: 99;
    box-shadow: 0 1px 0 1px #433;
}
    #scrollTop:active {
        box-shadow: none;
        background-color: #014f5b;
    }
    #marqueDiv {
        background-color: #fd971d;
        color: #fff;
        line-height: 1.2em;
        font-size: 1em;
    }
    #marqueDiv .container {
        position: relative;
       
    }
    #marqueDiv marquee {
        display: block;
        line-height: 1.875rem;
        height: 1.875rem;
    }

    #marqueDiv .bt {
        position: absolute;
        top: 0;
        right: 0.625rem;
        padding: 0;
        margin: 0;
        background: #c06f0d;
        font-size: 0.875rem;
        width: 1.875rem;
        height: 1.875rem;
        display: inline-block;
        line-height: 1.875rem;
    }

.StockDictionary li a:hover {
    text-decoration: underline;
}

.aspect16-9wrap {
    position: relative;
    padding-top: 56.25%;
}

.aspect16-9 {
    overflow: hidden;
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

.square-wrap {
    position: relative;
    padding-top: 100%;
}

.square {
    overflow: hidden;
    position: absolute !important;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

#UserSettings .side-nav {
    border: 1px solid #ddd;
    padding: 0;
    border-radius: 0.1875rem;
}

    #UserSettings .side-nav li {
        margin-bottom: 0;
    }

    #UserSettings .side-nav .item {
        display: block;
        padding: 0.5rem 0.625rem;
    }

        #UserSettings .side-nav .item.active {
            background-color: #e9f8ff
        }

    #UserSettings .side-nav li + li {
        border-top: 1px solid #ddd;
    }

    #UserSettings .side-nav .item i.fa {
        margin-right: 0.625rem;
    }

#UserSettings form label {
    padding-top: 0.625rem;
}

#UserSettings input {
    padding: 0.625rem;
}

#UserSettings .watchlist {
    margin: 0.625rem 0 0;
    font-size:0;
}
    #UserSettings .watchlist li {
        display: inline-block;
        width: 50%;
    } 
    #UserSettings .watchlist a {
        font-size:0.875rem;
        padding: 0.1875rem;
        color: #433;
    }

    #UserSettings .watchlist i.fa {
        margin-right: 0.625rem;
    }

#alertBox {
    position: fixed;
    bottom: 0;
    left: 0.9375rem;
    padding-right: 1.875rem;
    z-index:99999;
}

/*search bar*/
.option_grid input#symbol {
    background-size: 18px;
    background-position-x: 4px;
    font-size: 1em;
    height: 2rem;
    padding-left: 0.625rem;
    margin-bottom: 0;
}
.input-group {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    width: 100%;
}

    .input-group > .inp-cont {
        position: relative;
        -webkit-box-flex: 1;
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: 1% !important;
        margin-bottom: 0;
    }

.input-group-append, .input-group-prepend {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

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

.input-group .dropdown-menu {
    display: none;
}
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.23438rem 0.46875rem;
    font-size: 0.625rem;
    line-height: 1.5;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    text-decoration: none;
}

    .btn.dropdown-toggle {
        color: #6c757d;
        background-color: transparent;
        background-image: none;
        border-color: #d5d5d5;
        padding: 2px 4px 0;
        outline: none;
    }

        .btn.dropdown-toggle img {
            width: 100%;
        }

.dropdown-menu {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 1000;
    display: none;
    min-width: 6.25rem;
    padding: 0.3125rem 0;
    color: #212529;
    text-align: left;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.15);
}

.dropdown-item {
    display: block;
    width: 100%;
    padding: 0.625rem 0.9375rem;
    clear: both;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
    background-color: transparent;
    border: 0;
}

    .dropdown-item .fa {
        margin-right: 15px;
    }

    .dropdown-item:hover {
        background: #00778f;
        color: #fff;
    }

.dropdown-toggle.show ~ .dropdown-menu, .dropdown-toggle:hover ~ .dropdown-menu, .dropdown-menu:hover {
    display: block;
}
#columns-modal .columns-holder {
    padding: 0.9375rem;
    max-height: 400px;
    max-height: 80vh;
    overflow: hidden;
    border-bottom:1px solid #ddd;
}
#loginForm .row {
    margin-bottom: 0.625rem;
    border-color: transparent;
}

#loginForm input[type="text"],
#loginForm input[type="email"],
#loginForm input[type="password"] {
    background: #fafafa;
    display: inline-block;
    width: 100%;
    font-size: 1rem;
    height: 2rem;
    margin: 0;
    box-shadow: none;
    padding: 0.4375rem;
}
#loginForm .prefix.icon {
    height: 2rem;
    line-height: 2rem;
}

.button.primary-3d, #loginForm button[type="submit"] {
    box-shadow: inset 0px 1px 0px 0px #54a3f7;
    background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
    background-color: #007dc1;
    border-radius: 2px;
    border: 1px solid #124d77;
    font-size: 1rem;
}
    #loginForm button[type="submit"]:hover {
        background: linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);
        background-color: #0061a7;
    }

.miniSearch {
    background: #fafafa url('/Content/img/search-icon.png') no-repeat scroll left center;
    padding-left: 1.6em;
    font-size: 1rem;
    max-width: 11.25rem;
    width: 1.875rem;
    background-size: 1.25rem;
    background-position-x: 0.1875rem;
    border: 1px solid #ddd;
    border-radius: 0;
    outline: none;
    height: 1.875rem;
    background-color: #fafafa!important;
}

    .miniSearch:focus {
        outline: none;
        width: 100%;
        max-width: initial;
    }
.k-widget.k-tooltip.k-popup {
    box-shadow: 0px 0px 2px 2px #000;
    background-color:#fff;
}
.highlight {
    -webkit-animation: fadeIt1s ease-in-out 0s;
    -moz-animation: fadeIt 1s ease-in-out 0s;
    -o-animation: fadeIt 1s ease-in-out 0s;
    animation: fadeIt 1s ease-in-out 0s;
}
.appBanner {
    background-color: #000;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    width: 100%;
}
    .appBanner:after{
        content:"";
        display:table;
        clear:both;
    }
    .appBanner .close {
        float: left;
        color: #909090;
        width: 24px;
        line-height: 50px;
        text-align: center;
        font-size: 1.25rem;
    }
    .appBanner .ico {
        float: left;
        background: #014f5b url('/Content/img/logo_dark_512.png') no-repeat;
        background-size: contain;
        border-radius: 0.625rem;
        width: 3.125rem;
        height: 3.125rem;
        margin-left: 0.625rem;
        margin-right: 0.625rem;
        box-shadow: 1px 1px #000;
    }
    .appBanner .b {
        color: #fff;
        line-height: 1;
        margin-top:0.375rem;
    }
        .appBanner .b h1 {
            color: #fff;
            text-transform: inherit;
            text-shadow: none;
            font-size: 1.25rem;
            margin-bottom: 0;
            line-height: 1;
        }
        .appBanner .b h2 {
            text-transform: inherit;
            text-shadow: none;
            font-size: 1.0625rem;
            margin: 0;
            line-height: 1;
            margin-bottom: 0.25rem;
        }
    .appBanner p {
        color: #909090;
        margin: 0;
    }
    .appBanner .c {
        display: inline-block;
        float: right;
        font-weight: bold;
        margin-right: 0.9375rem;
        padding: 0.625rem;
        font-size: 1.0625rem;
        color: #fff;
        border-radius: 0.3125rem;
        line-height: 1;
        background: linear-gradient(to bottom,#007dc1 5%,#0061a7 100%);
        background-color: #007dc1;
        border: 1px solid #124d77;
        box-shadow: inset 0 1px 0 0 #54a3f7;
        margin-top: 0.3125rem;
    }

@-webkit-keyframes fadeIt {
    from {
        background: rgba(249, 163, 2, 1);
    }

    to {
        background: rgba(249, 163, 2, 0);
    }
}

@-moz-keyframes fadeIt {
    from {
        background: rgba(249, 163, 2, 1);
    }

    to {
        background: rgba(249, 163, 2, 0);
    }
}

@keyframes fadeIt {
    from {
        background: rgba(249, 163, 2, 1);
    }

    to {
        background: rgba(249, 163, 2, 0);
    }
}

@media (pointer: fine) {
    .miniscroll::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .miniscroll::-webkit-scrollbar-corner {
        display: none;
    }

    .miniscroll::-webkit-scrollbar-thumb {
        border: 1px solid;
        border-color: #f1f3f6;
        border-radius: 3px;
        background-color: #d1d4dc;
    }

    .miniscroll::-webkit-scrollbar-track {
        background-color: transparent;
        border-radius: 3px;
    }
}
@media (min-width: 576px) {
    .containarea.nopad {
        padding-left: 1em;
        padding-right: 1em;
    }
    
}
@media (min-width: 768px) {
    .appBanner{
        display:none!important;
    }

    #UserSettings .watchlist li {
        display: inline-block;
        width: 25%;
    }
}
@media (min-width: 1200px) {

    #UserSettings .watchlist li {
        display: inline-block;
        width: 20%;
    }
}

#page-preloader {
    display: none;
}
.scrollbar-y{
    max-height:100%;
    overflow-y:auto
}
.scrollbar-y::-webkit-scrollbar, .tabs-content > .content::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.scrollbar-y::-webkit-scrollbar-corner, .tabs-content > .content::-webkit-scrollbar-corner {
    display: none;
}

.scrollbar-y::-webkit-scrollbar-thumb, .tabs-content > .content::-webkit-scrollbar-thumb {
    background-color: #9598a1;
    border: 1px solid #f0f3fa;
    border-radius: 3px;
}

.scrollbar-y::-webkit-scrollbar-track, .tabs-content > .content::-webkit-scrollbar-track {
    background-color: initial;
    border-radius: 3px;
}

.over-h{
    overflow:hidden;
}
.h100{
    height:100%;
}
.flex-grow{
    flex-grow:1;
}
.modal-footer{
    border-top:1px solid #ddd;
}
.h100 {
    height: 100%;
}

.flex .grow {
    flex-grow: 1;
}
.sel-wrap {
    position: relative;
}

    .sel-wrap:before {
        position: absolute;
        top: 40%;
        right: 0.625rem;
        display: block;
        content: "";
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0.3125rem 0.3125rem 0 0.3125rem;
        border-color: var(--amar-text-color,#433) transparent transparent transparent;
    }

.scrollbar-y {
    max-height: 100%;
    overflow-y: auto;
}

.notif-bell-wrap {
    position: relative;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}

.notif-bell-btn {
    position: relative;
    display: inline-block;
    color: #fff;
    text-decoration: none;
    padding: 4px 6px;
}

    .notif-bell-btn:hover {
        color: #ffe;
    }

.notif-bell-icon {
    font-size: 18px;
}

.notif-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background: #e74c3c;
    color: #fff;
    border-radius: 50%;
    font-size: 10px;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    padding: 0 3px;
}

.notif-dropdown {
    position: absolute;
    right: 0;
    top: 2.8125rem;
    width: 18.75rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    z-index: 9999;
}

    .notif-dropdown::before,
    .notif-dropdown::after {
        content: '';
        position: absolute;
        right: 10px;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
    }

    .notif-dropdown::before {
        top: -9px;
        border-bottom: 9px solid #ddd;
    }

    .notif-dropdown::after {
        top: -8px;
        border-bottom: 8px solid #fff;
    }

.notif-header {
    padding: 0px 14px;
    font-weight: bold;
    font-size: 13px;
    border-bottom: 1px solid #eee;
    color: #333;
}

.notif-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}

    .notif-list li {
        padding: 10px 14px;
        border-bottom: 1px solid #f0f0f0;
        font-size: 12px;
        color: #444;
    }

        .notif-list li:last-child {
            border-bottom: none;
        }

        .notif-list li.notif-unread {
            background: #f0f7ff;
        }

        .notif-list li.notif-empty {
            color: #999;
            text-align: center;
        }

.notif-item-title {
    font-weight: bold;
    font-size: 12px;
    margin-bottom: 2px;
    line-height: 1.5;
}

.notif-item-msg {
    color: #555;
    line-height: 1.5;
}

.notif-item-time {
    color: #aaa;
    font-size: 10px;
    margin-top: 2px;
    line-height: 1.5;
}

.notif-item-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

    .notif-item-link:hover {
        color: #007bff;
    }

/* Alert stack — overrides single-element #alertBox in Common.css */
#alertBox {
    position: fixed;
    bottom: 0.9375rem;
    left: 0.9375rem;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 0;
    pointer-events: none;
}

    #alertBox .alert-box {
        pointer-events: auto;
        margin: 0;
    }

body {
    margin: 0;
    font-family: Arial,sans-serif;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    background-color: #fff;
    color: #433;
    direction: ltr;
}

.ob-right {
    text-align: right;
}

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

.ob-left {
    text-align: left;
}

.value_icon ul {
    list-style: outside none none !important;
    margin: 0 !important;
    padding: 0 !important;
}

    .value_icon ul li {
        background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
        box-shadow: none !important;
        display: inline-block;
        list-style: outside none none;
        margin: 0 1px !important;
        padding: 0 !important;
    }

        .value_icon ul li::before {
            /*position: unset !important;*/
            position: static !important;
        }

        .value_icon ul li a {
            padding: 1px;
        }

            .value_icon ul li a:hover {
                background: #00778f none repeat scroll 0 0 !important;
                color: #fff !important;
            }

            .value_icon ul li a i {
                font-size: 11px !important;
            }

a {
    color: #008cba;
    text-decoration: none;
    line-height: inherit;
}

    a:hover, a:focus {
        color: #007bff;
    }


    .option_search input#symbol {
        background: #fff url(/Content/img/search-icon.png) no-repeat scroll left center;
        font-size: 12px;
        height: 30px;
        /*padding-left: 25px;*/
        text-indent: 1.80em;
    }
    .option_search span.k-widget.k-autocomplete {
        width: 16.8em;
    }

#subscribe {
    background-color: #321F20;
    padding-top: 30px;
    padding-bottom: 30px;
}

    #subscribe label {
        margin-top: 5px;
        font-size: 14px;
        color: whitesmoke;
    }

    #subscribe input {
        margin-top: 5px;
        float: left;
        width: 70%;
        margin-bottom: 10px;
        border: none;
    }

    #subscribe button {
        margin-top: 5px;
        float: right;
        width: 28%;
        height: 38px;
        padding: 0 0 0 0;
        margin-bottom: 10px;
    }

#marqueDiv {
    background-color: #fd971d;
    color: #fff;
    line-height: 1.2em;
    font-size: 1em;
}
    #marqueDiv .container {
        position: relative;
    }
    #marqueDiv marquee {
        display: block;
        line-height: 2;
    }

    #marqueDiv .bt {
        position: absolute;
        top: 0;
        right: 0;
        padding: 6px 12px;
        margin-bottom: 0;
        background: #df8a25;
        border: none;
        outline: none;
        color:#fff;
    }

    .btn{
        font-size:0.875rem;
    }
.alert{
    padding:0.75rem 4rem 0.75rem 1.25rem;
}
.close{
    font-size:1.5rem;
}
.alert-dismissible .close {
    font-size: 1.5rem;
    padding: 0.75rem 1.25rem;
}
.form-control{
    font-size:1rem;
}
.dropdown-menu{
    font-size:0.875rem;
}
.dropdown-item{
    padding:0.25rem 1.5rem;
}
h4, h5 {
    font-size: 1.25rem;
}
#Modal .modal-header .modal-title {
    font-size: 1rem;
    color: #58595b;
}
.table {
    color: #58595b;
}
.table-sm td, .table-sm th {
    padding: 0.3125rem;
}