/* Minification failed. Returning unminified contents.
(558,35): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(724,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(725,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-border'
(733,32): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-border'
(745,48): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-border'
(751,48): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-border'
(763,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(764,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(765,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(766,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(767,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(768,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(769,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(770,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(772,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(773,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(774,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(775,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(778,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(779,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(780,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(782,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(783,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(784,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(785,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(786,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(791,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(795,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-bg-color'
(804,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal'
(808,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(817,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(818,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(822,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(823,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-accent'
(827,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(831,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(839,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-bg-2'
(864,32): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(868,32): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(877,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-bg-2'
(878,35): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(882,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-strong'
(888,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal'
(899,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(904,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(914,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(924,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-bg-color'
(929,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-strong'
(937,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(941,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-card-2'
(942,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(947,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(948,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(953,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(963,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-bg-color'
(980,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(981,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(990,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(997,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1008,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-card-2'
(1009,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1018,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(1026,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1027,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1033,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1035,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1039,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-card-2'
(1040,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1045,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(1051,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1056,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1062,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1066,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-card-2'
(1067,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1068,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1072,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1073,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1077,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(1082,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-card-2'
(1083,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1084,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1090,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1094,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-card-2'
(1095,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-table-head'
(1096,35): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1100,35): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1101,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1110,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1111,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1116,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1117,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1118,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1122,31): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1123,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1127,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1132,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1133,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1138,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1139,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1143,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1147,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-accent'
(1147,60): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-accent'
(1153,16): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1157,18): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1162,18): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1171,16): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1180,16): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1184,16): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1193,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(1230,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-accent'
(1244,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(1268,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-accent'
(1272,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-blue'
(1290,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1294,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-accent'
(1298,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(1308,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-yellow'
(1317,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(1328,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-red'
(1334,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(1335,32): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(1346,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-accent'
(1350,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-2'
(1363,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-bg-color'
(1364,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1368,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1372,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1378,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1385,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1386,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1392,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-teal-3'
(1397,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1398,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1399,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1403,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1404,31): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1411,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1412,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1413,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1417,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-dim'
(1434,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-elev'
(1435,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1439,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1440,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1441,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1442,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1443,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1444,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1445,5): run-time error CSS1062: Expected semicolon or closing curly-brace, found '-'
(1446,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-bg-color'
(1479,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-bg-color'
(1516,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1520,33): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1523,32): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1533,35): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1546,16): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1553,32): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1554,34): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1555,35): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1580,35): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1648,32): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1658,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1674,16): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1677,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1678,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1679,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-highlight'
(1695,32): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1723,36): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1730,20): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1733,35): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1736,35): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1741,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1745,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1746,17): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1762,21): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1775,34): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1787,33): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1788,35): run-time error CSS1039: Token not allowed after unary operator: '-amar-border-color'
(1796,15): run-time error CSS1039: Token not allowed after unary operator: '-amar-text-color'
(1809,16): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1810,18): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1833,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1834,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-border'
(1840,32): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-border'
(1850,48): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-border'
(1855,48): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-border'
(1887,28): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-bg'
(1890,24): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-border'
(1916,16): run-time error CSS1039: Token not allowed after unary operator: '-amar-color-table-head'
(1919,22): run-time error CSS1039: Token not allowed after unary operator: '-amar-secondary-border'
 */
/*kendu table*/
table thead {
    background-color: transparent;
    text-transform: uppercase;
}

.k-grid {
    border-top: 1px solid #d5d5d5;
}

    .k-grid tr:hover, .hover-highlight {
        background-color: #e0f0ff !important;
    }

    .k-grid .k-grid-header td, .k-grid-header th.k-header {
        text-align: right;
        background-image: none;
        text-transform: uppercase;
        color: #313131;
    }
        .k-grid .k-grid-header td:first-child{
            text-align:left;
        }

        .k-autocomplete, .k-autocomplete.k-state-hover, .k-block, .k-button, .k-draghandle, .k-dropdown-wrap, .k-dropdown-wrap.k-state-hover, .k-grid-header, .k-grouping-header, .k-header, .k-link.k-state-hover, .k-numeric-wrap, .k-numeric-wrap.k-state-hover, .k-pager-wrap, .k-picker-wrap, .k-picker-wrap.k-state-hover, .k-tabstrip-items .k-item, .k-textbox, .k-textbox:hover, .k-toolbar, .k-tooltip {
            background-repeat: repeat;
            background-position: 0 center
        }

.k-link:hover {
    text-decoration: none
}

.k-block, .k-draghandle, .k-inline-block, .k-widget {
    border-style: solid;
    border-width: 1px;
    -webkit-appearance: none
}

.k-block, .k-widget {
    line-height: normal;
    outline: 0
}

.k-link {
    cursor: pointer;
    outline: 0;
    text-decoration: none
}

.k-column-menu .k-sprite, .k-drop-hint, .k-gantt-views > .k-current-view > .k-link:after, .k-grid-mobile .k-resize-handle-inner:after, .k-grid-mobile .k-resize-handle-inner:before, .k-grouping-dropclue, .k-icon, .k-pager-numbers .k-current-page .k-link:after, .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view > .k-link:after, .k-tool-icon {
    background-image: url('/Content/Default/sprite.png');
    border-color: transparent;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.2),only screen and (min-device-pixel-ratio:1.2) {
    .k-callout, .k-column-menu .k-sprite, .k-drop-hint, .k-grouping-dropclue, .k-icon:not(.k-i-loading), .k-icon:not(.k-loading), .k-mobile-list .k-check:checked, .k-mobile-list .k-edit-field [type=checkbox]:checked, .k-mobile-list .k-edit-field [type=radio]:checked, .k-state-active .k-tool-icon, .k-state-active.k-state-hover .k-tool-icon, .k-state-hover .k-tool-icon, .k-state-selected .k-tool-icon, .k-state-selected.k-state-hover .k-tool-icon, .k-tool-icon {
        background-image: url('/Content/Default/sprite_2x.png');
        -webkit-background-size: 340px 336px;
        background-size: 340px 336px
    }
}

.k-icon, .k-sprite, .k-tool-icon {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    overflow: hidden;
    background-repeat: no-repeat;
    font-size: 0;
    line-height: 0;
    text-align: center;
    -ms-high-contrast-adjust: none
}

:root * > .k-icon, :root * > .k-sprite, :root * > .k-tool-icon {
    vertical-align: middle
}

.k-icon, .k-sprite {
    background-color: transparent
}

.k-cancel, .k-denied, .k-i-cancel, .k-i-denied {
    background-position: -32px -48px
}

.k-add, .k-i-add, .k-i-plus {
    background-position: -32px -64px
}

.k-i-seek-w:before {
    content: "\e607";
}

.k-i-seek-w {
    background-position: 0 -112px;
}

.k-i-arrow-w {
    background-position: 0 -48px;
}

.k-drag-clue {
    position: absolute;
    z-index: 10003;
    border-style: solid;
    border-width: 1px;
    font-size: .9em;
    padding: .2em .4em;
    white-space: nowrap;
    cursor: default
}

.k-drag-status {
    margin-top: -3px;
    margin-right: 4px;
    vertical-align: middle
}

.k-reorder-cue {
    position: absolute;
    width: 1px;
    overflow: visible
}

    .k-reorder-cue .k-icon {
        position: absolute;
        left: -4px;
        width: 8px;
        height: 4px
    }

    .k-reorder-cue .k-i-arrow-s {
        top: -4px;
        background-position: -4px -166px
    }

    .k-reorder-cue .k-i-arrow-n {
        bottom: -4px;
        background-position: -4px -134px
    }

.k-animation-container, .k-animation-container *, .k-animation-container :after, .k-block .k-header, .k-list-container, .k-widget, .k-widget *, .k-widget :before {
    -webkit-box-sizing: content-box;
    box-sizing: content-box
}

.input-group .form-control {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

.k-grid, .k-listview {
    position: relative;
    zoom: 1
}

    .k-grid table {
        min-width: 100%;
        margin: 0;
        max-width: none;
        border-collapse: separate;
        border-spacing: 0;
        empty-cells: show;
        border-width: 0;
        outline: 0
    }

    .k-grid.k-widget table {
        width: 100%;
    }

.k-header.k-drag-clue {
    overflow: hidden
}

.k-filter-row th, .k-grid-header th.k-header {
    position: relative;
    border-style: solid;
    border-width: 0 0 1px 1px;
    border-color: #c5c5c5;
    padding: 0.5rem 0.375rem;
    font-weight: 400;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    line-height: 1.6;
}

.k-grid-header th.k-header {
    vertical-align: bottom;
    font-size: 0.85rem;
    text-align:center;
    font-weight:bold;
}

    .k-grid-header th.k-header > .k-link {
        display: block;
        margin: -0.3125rem -0.375rem -0.25rem 0;
        padding: 0.1875rem 0.3125rem;
        text-overflow: ellipsis
    }

    .k-grid-header th.k-header .k-icon {
        position: static
    }

.k-grid-header th > .k-link > .k-icon {
    vertical-align: text-top
}

.k-grid td {
    border-style: solid;
    border-width: 0 0 0 1px;
    padding: 0.25rem 0.375rem;
    overflow: hidden;
    line-height: 2;
    vertical-align: middle;
    text-overflow: ellipsis;
}

.k-grid .k-grid-content td {
    text-align: right;
}

    .k-grid .k-grid-content td:first-child:not(.ob-right) {
        text-align: left;
    }

.k-grid td .button {
    margin-bottom: 0;
    padding: 5px 10px;
    font-size: 0.875rem;
}

.k-grid td.ob-right {
    text-align: right;
}

.k-grid td.ob-center {
    text-align: center;
}

.k-grid-footer-wrap, .k-grid-header-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-style: solid;
    border-width: 0 1px 0 0;
    zoom: 1
}

div.k-grid-footer, div.k-grid-header {
    padding-right: 1.0625rem;
    border-bottom-style: solid;
    border-bottom-width: 1px;
    zoom: 1
}

.k-grid-header-locked > table, .k-grid-header-wrap > table {
    margin-bottom: -1px
}

.k-grid-content {
    position: relative;
    width: 100%;
    overflow: auto;
    overflow-x: auto;
    overflow-y: scroll;
    zoom: 1;
    min-height: 0
}

    .k-grid-content table, .k-grid-content-locked > table, .k-grid-footer table, .k-grid-header table {
        table-layout: fixed
    }

.k-grid-lockedcolumns {
    white-space: nowrap
}

.k-grid-content, .k-grid-content-locked, .k-pager-wrap {
    white-space: normal
}

.k-grid-content-locked, .k-grid-footer-locked, .k-grid-header-locked {
    display: inline-block;
    vertical-align: top;
    overflow: hidden;
    position: relative;
    border-style: solid;
    border-width: 0 1px 0 0
}

    .k-grid-content-locked + .k-grid-content, .k-grid-footer-locked + .k-grid-footer-wrap, .k-grid-header-locked + .k-grid-header-wrap {
        display: inline-block;
        vertical-align: top
    }

.k-filter-row > th:first-child, .k-grid tbody td:first-child, .k-grid tfoot td:first-child, .k-grid-header th.k-header:first-child {
    border-left-width: 0;
}

.k-block, .k-content, .k-grid, .k-header-column-menu, .k-panelbar, .k-slider, .k-splitter, .k-treeview, .k-widget {
    outline: 0;
    -webkit-tap-highlight-color: rgba(0,0,0,0)
}

.k-block, .k-calendar, .k-grid-header .k-link, .k-header-column-menu, .k-pager-wrap, .k-slider, .k-splitbar, .k-treeview {
    -webkit-touch-callout: none
}



.k-block, .k-widget {
    background-color: #fff
}

.k-autocomplete, .k-block, .k-button-group .k-tool, .k-calendar th, .k-colorpicker .k-i-arrow-s, .k-content, .k-dropdown-wrap, .k-dropzone-active, .k-editable-area, .k-editor-dialog .k-tabstrip-items, .k-filter-row > th, .k-footer-template td, .k-grid td, .k-grid td.k-state-selected, .k-grid-content-locked, .k-grid-footer, .k-grid-footer-locked, .k-grid-footer-wrap, .k-grid-header, .k-grid-header-locked, .k-grid-header-wrap, .k-group, .k-group-footer td, .k-grouping-header, .k-grouping-header .k-group-indicator, .k-header, .k-input, .k-pager-refresh, .k-pager-wrap, .k-pager-wrap .k-link, .k-panel > .k-item > .k-link, .k-panelbar .k-content, .k-panelbar .k-panel, .k-panelbar > .k-item > .k-link, .k-popup.k-align .k-list .k-item:last-child, .k-separator, .k-slider-track, .k-splitbar, .k-state-default, .k-state-default .k-select, .k-state-disabled, .k-textbox, .k-textbox > input, .k-tiles, .k-toolbar, .k-tooltip, .k-treemap-tile, .k-upload-files, .k-widget {
    border-color: #d5d5d5
}

.k-alt, .k-pivot-layout > tbody > tr:first-child > td:first-child, .k-resource.k-alt, .k-separator {
    background-color: #f1f1f1
}



.k-autocomplete, .k-button, .k-draghandle, .k-dropdown-wrap, .k-grid-header, .k-grouping-header, .k-header, .k-numeric-wrap, .k-pager-wrap, .k-panelbar .k-tabstrip-items .k-item, .k-picker-wrap, .k-progressbar, .k-state-highlight, .k-tabstrip-items .k-item, .k-textbox, .k-toolbar, .km-pane-wrapper > .km-pane > .km-view > .km-content {
    background-image: none,-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.6)),to(rgba(255,255,255,0)));
    background-image: none,-webkit-linear-gradient(top,rgba(255,255,255,.6) 0,rgba(255,255,255,0) 100%);
    background-image: none,linear-gradient(to bottom,rgba(255,255,255,.6) 0,rgba(255,255,255,0) 100%);
    background-position: 50% 50%;
    background-color: #eae8e8
}

.k-block, .k-button, .k-draghandle, .k-grid-header, .k-grouping-header, .k-header, .k-pager-wrap, .k-toolbar, .k-treemap-tile, html .km-pane-wrapper .k-header {
    background-color: #eae8e8
}

.k-column-menu .k-state-active .k-sprite, .k-column-menu .k-state-hover .k-sprite, .k-icon:hover, .k-pager-numbers .k-current-page .k-link:hover:after, .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view.k-state-hover > .k-link:after, .k-state-focused .k-icon, .k-state-hover .k-icon, .k-state-selected .k-icon {
    opacity: 1
}

.k-column-menu .k-sprite, .k-icon, .k-pager-numbers .k-current-page .k-link:after, .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view > .k-link:after, .k-state-disabled .k-icon {
    opacity: .9
}

.k-column-menu .k-sprite, .k-drop-hint, .k-gantt-views > .k-current-view > .k-link:after, .k-grid-mobile .k-resize-handle-inner:after, .k-grid-mobile .k-resize-handle-inner:before, .k-grouping-dropclue, .k-icon, .k-pager-numbers .k-current-page .k-link:after, .k-scheduler-toolbar > ul.k-scheduler-views > li.k-current-view > .k-link:after, .k-tool-icon {
    background-image: url('/Content/Default/sprite.png');
    border-color: transparent
}

.k-button, .k-widget {
    -webkit-box-shadow: none;
    box-shadow: none
}

.k-grid tr:hover {
    background-color: #bdb4af;
    background-image: none,-webkit-gradient(linear,left top,left bottom,from(rgba(255,255,255,.4)),to(rgba(255,255,255,0)));
    background-image: none,-webkit-linear-gradient(top,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%);
    background-image: none,linear-gradient(to bottom,rgba(255,255,255,.4) 0,rgba(255,255,255,0) 100%);
    background-position: 50% 50%
}

.k-autocomplete, .k-block, .k-button, .k-calendar .k-link, .k-calendar td, .k-calendar-container, .k-colorpicker, .k-combobox, .k-datepicker, .k-datetimepicker, .k-drag-clue, .k-dropdown, .k-dropdown-wrap, .k-editor-inline, .k-gantt-views > .k-current-view, .k-grid .k-filter-options, .k-grouping-header .k-group-indicator, .k-inline-block, .k-list-container, .k-multiselect, .k-notification, .k-numeric-wrap, .k-numerictextbox, .k-picker-wrap, .k-slider-selection, .k-slider-track, .k-split-button .k-gantt-views, .k-textbox, .k-tile, .k-timepicker, .k-tooltip, .k-touch-scrollbar, .k-treeview .k-in, .k-upload, .k-window, .k-window-action, .k-window-titleless .k-window-content {
    border-radius: 4px
}

.k-gantt-toolbar .k-state-default, .k-grid .k-grouping-header, .k-grid-header, .k-grid-header-wrap, .k-grouping-header .k-group-indicator, .k-header, .k-pager-wrap, .k-pager-wrap .k-link, .k-pager-wrap .k-textbox {
    border-color: #c5c5c5
}

.k-grid-content {
    overflow-y: hidden;
}

.k-grid-header {
    padding-right: 0px !important;
}

.k-grid-content table, .k-grid-header-wrap table {
    width: 100% !important;
}

.fixed-header {
    top: 0;
    position: fixed;
    width: auto;
    z-index: 1;
}

.k-grid-content-locked {
    height: 100% !important;
}

.k-grid-header th.k-header .k-icon.k-i-arrow-n, .k-grid-header th.k-header .k-icon.k-i-arrow-s {
    background-image: none;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-bottom: 3px solid #00778f;
    width: 100%;
    display: block;
    height: 0;
    overflow: visible;
}

.k-grid-header th.k-header .k-icon.k-i-arrow-s {
    top: -1px;
    bottom: initial;
}

.k-grid-header th.k-header .k-i-arrow-n:before, .k-grid-header th.k-header .k-i-arrow-s:before {
    content: " ";
    width: 0;
    height: 0;
    border-style: solid;
    position: absolute;
    bottom: -1px;
}

.k-grid-header th.k-header .k-i-arrow-n:before {
    border-width: 0 4px 4px 4px;
    border-color: transparent transparent #00778f transparent;
}

.k-grid-header th.k-header .k-i-arrow-s:before {
    border-width: 4px 4px 0 4px;
    border-color: #00778f transparent transparent transparent;
    bottom: -7px;
}

.k-grid-header .columnMenu {
    position: absolute;
    right: 0;
    margin: 0;
    top: 0;
    height: 33px;
    width: 25px;
    font-size: 0;
    padding: 0;
    background-color: #00778f;
    border-left: 1px solid #c5c5c5;
    background-position: -214px -44px;
    opacity: 0.9;
}

[id^="columnDrop"] {
    padding: 0.625rem;
    max-height: 540px;
    overflow: auto;
}

    [id^="columnDrop"] li {
        margin-bottom: 0.3125rem;
    }

.k-pager-wrap {
    clear: both;
    overflow: hidden;
    position: relative;
    border-style: solid;
    border-width: 1px;
    line-height: 2em;
    padding: .333em 0 .333em .25em;
}

    .k-pager-wrap > .k-link {
        float: left;
        margin: 0 .08333em;
        height: 2em;
        line-height: 2em;
        border-radius: 1.0833em;
        cursor: pointer;
        text-align: center;
    }
.k-pager-numbers {
    margin: 0 2px;
}
    .k-pager-numbers .k-link, .k-pager-numbers .k-state-selected, .k-pager-wrap > .k-link {
        min-width: 2em;
    }

    .k-pager-wrap > .k-link {
        border-style: solid;
        border-width: 1px;
    }

.k-pager-numbers .k-link {
    text-align: center;
    line-height: 2em;
    border-style: solid;
    border-width: 1px;
    border-radius: 1.0833em;
}
.k-pager-numbers li {
    float: left;
}
.k-grid .k-pager-numbers, .k-pager-numbers .k-link, .k-pager-numbers .k-state-selected {
    display: inline-block;
    vertical-align: top;
    margin-right: 1px;
}

.k-grid .k-pager-numbers {
    float: left;
    cursor: default;
}
.k-state-disabled {
    opacity: .7;
}
.k-widget.k-grid .k-pager-numbers {
    position: relative;
}
.k-pager-numbers .k-current-page {
    display: none;
}
.k-pager-numbers .k-state-selected {
    color: #fff;
    min-width: 1.875rem;
    line-height: 1.875rem;
    background-color: #00778f;
    text-align: center;
    border-radius: 1.0833em;
}
.k-pager-wrap .k-link:hover{
    color: #2e2e2e;
    background-color: #bcb4b0;
    border-color: #b6b6b6;
}
.k-link:link, .k-link:visited, .k-nav-current.k-state-hover .k-link {
    color: #2e2e2e;
}
.k-pager-info {
    float: right;
    padding: 0 1.333em;
}
.k-i-arrow-e {
    background-position: 0 -16px;
}
.k-i-seek-e {
    background-position: 0 -80px;
}
select#AmarSymbols {
    background: transparent;
    position: relative;
    font-size: 1rem;
    margin: 0;
    padding: 0.875rem 0.625rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    border-bottom: 2px solid var(--amar-border-color,#ddd);
    outline: none;
}

ul.AmrStockList {
    padding: 0;
    margin: 0;
}
    ul.AmrStockList li {
        margin: 0;
        border-bottom: 1px solid #e0e3eb;
    }
    ul.AmrStockList li.head {
        display: flex;
        flex: 1 1 auto;
        min-width: 100%;
        color: #4a4a4a;
        padding-top: 0.25rem;
        padding-bottom: 0.25rem;
        border-bottom: 2px solid #e6ecef;
        font-size: 0.8125rem;
    }
    
    ul.AmrStockList li .s0, ul.AmrStockList li .s1, ul.AmrStockList li .s2, ul.AmrStockList li .s3, ul.AmrStockList li .s4 {
        display: flex;
        min-width: 0;
        max-width: 100%;
        height: 1.3125rem;
        padding-top: 3px;
        padding-bottom: 3px;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        justify-content: flex-end;
    }
    ul.AmrStockList li .s0 {
        padding-left: 0.3125rem;
    }
    ul.AmrStockList li .s1 {
        justify-content: flex-start;
        padding-right: 4px;
        padding-left: 0.625rem;
        flex-grow: 1;
        flex-shrink: 0;
    }
    ul.AmrStockList li .s4 {
        flex: 0 1 4.0625rem;
        padding-right: 0.54688rem;
    }

    ul.AmrStockList li a {
        padding: 0.27344rem 0;
        display: flex;
        flex: 1 1 auto;
        min-width: 100%;
        color: #4a4a4a;
        font-size: 0.875rem;
    }
#addNewWatchList input{
    max-width:100%;
}
#addNewWatchList input, #addNewWatchList button {
    height: 1.875rem;
}

#addNewWatchList .postfix.button {
    padding: 0.3125rem;
}

.flex {
    display: flex;
    flex: 1 1 auto;
    min-width: 100%;
}

    .flex .s1 {
        justify-content: flex-start;
        flex-grow: 1;
        flex-shrink: 0;
    }
.AmarWatchlist .wlist {
    height: 2.0625rem;
}
.AmarWatchlist .ctrl {
    width: 2.0625rem;
    height: 2.0625rem;
    border-top: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    color: #787b86;
    padding:0;
    background:transparent;
}


#watchlistChooser .srcWrap {
    padding: 0.1875rem 0.625rem;
    border-bottom: 1px solid #ddd;
    width:100%;
}

    #watchlistChooser .srcWrap input {
        border: none;
        background: #fff url(/Content/img/search-icon.png) no-repeat scroll left center;
        font-size: 1rem;
        background-size: 1.25rem;
        background-position-x: 0.1875rem;
        padding: 0.3125rem 0.625rem 0.3125rem 1.5625rem !important;
        margin-bottom: 0;
        box-shadow: none;
        width:100%;
        max-width:100%;
    }

#watchlistChooser .list, #deleteWatchList .list {
    width: 100%;
}

    #watchlistChooser .list ul, #deleteWatchList .list ul {
        margin: 0;
        width: 100%;
    }

    #watchlistChooser .list li, #deleteWatchList .list li {
        border-bottom: 1px solid #ddd;
        display: block;
        align-items: center;
        padding: 0.375rem 1.25rem 0.375rem;
        font-size: 0.9375rem;
    }

        #watchlistChooser .list li a {
            display: flex;
            color: initial;
        }

        #watchlistChooser .list li:hover {
            background-color: #f0f3fa;
        }

        #watchlistChooser .list li .code {
            flex-grow: 0;
            width: 9.375rem;
        }

        #watchlistChooser .list li .name {
            flex: 1 1 auto;
        }

        #watchlistChooser .list li i {
            line-height: 1.5rem;
        }

        #deleteWatchList .list li input {
            margin-right: 0.625rem;
        }

.f-dropdown li.divider {
    border-top: 1px solid #ddd;
}

.f-dropdown li a {
    padding: 0.625rem
}

ul#dropSettings {
    background-color: var(--amar-secondary-bg,#fff);
    border-color: var(--amar-secondary-border,#ddd);
}

    ul#dropSettings li {
        cursor: initial;
    }

        ul#dropSettings li.divider {
            border-color: var(--amar-secondary-border,#ddd);
        }

    ul#dropSettings.open {
        width: 12.5rem;
        right: 0;
        left: initial !important;
    }

#dropSettings::before {
    left: initial;
    right: 15px;
    border-color: transparent transparent var(--amar-secondary-border,#fff) transparent;
}

#dropSettings::after {
    left: initial;
    right: 14px;
    border-color: transparent transparent var(--amar-secondary-border,#ccc) transparent;
}
/* ============================================================================
   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;
    background-color: var(--amar-bg-color,#fff);
    min-width:1024px;
}
ul {
    margin: 0;
}
table {
    width: 100%;
    background-color: transparent;
    border:none;
}
    table thead{
        background-color:transparent;
    }
        table thead tr th {
            padding: 0;
            font-weight: normal;
        }
    table tr td{
        padding:0;
    }
    table tr.even, table tr.alt, table tr:nth-of-type(even) {
        background-color: transparent;
    }

        .mt-4 {
            margin-top: 1.25rem;
        }
#main {
    margin-top: 0.3125rem;
    min-height: 100%;
    height: 100vh;
    padding: 0 0.625rem;
    background-color: var(--amar-bg-color,#fff);
}
#depthBar{
    height:1.5625rem;
}
.flex {
    display: flex;
    flex-grow: 0;
}
#leftMain {
    flex: 1 1 auto;
}


select{
    margin:0;
    cursor:pointer;
}
#scrip {
    font-size: 1.25rem;
    background-color: transparent;
    border: none;
    width: initial;
    padding: 0.3125rem 0.5rem;
}
    #scrip:focus{
        outline:none;
    }

#tv_container {
    flex-grow: 1;
}
.container-fluid {
    padding-left: 0.9375rem;
    padding-right: 0.9375rem;
}
.border {
    border: 2px solid var(--amar-border-color,#0C0C0C);
}

.border-l {
    border-left: 2px solid var(--amar-border-color,#0C0C0C);
}
.border-t {
    border-top: 2px solid var(--amar-border-color,#0C0C0C);
}
.flex-grow{
    flex-grow:1;
}
.part1 {
    width: 300px;
}
#details {
    width: 100%;
    border-bottom: 2px solid var(--amar-border-color,#0C0C0C);
    padding-top: 0.3125rem;
    padding-bottom:0.3125rem;
}
    #details .part1{
        align-items:center;
    }
#scrip-Ltp {
    flex-grow: 1;
    text-align: right;
    margin-right: 0.9375rem;
    font-size: 1.25rem;
    color:#fff;
    color:var(--amar-color-highlight,#fff);
}

#aside {

    width: 270px;
    flex-shrink: 0;
    border-top: 2px solid var(--amar-border-color,#0C0C0C);
    border-right: 2px solid var(--amar-border-color,#0C0C0C);
    border-bottom: 2px solid var(--amar-border-color,#0C0C0C);
    flex-direction:column;
    display:none;
}
#details .tt {
    font-size: 0.8125rem;
    line-height: 1;
}
#details .vl {
    font-weight: 700;
}
body.Dark #details .vl {
    color:#fff;
}
#centerCol{
    display:block;
}
.ml-3,
.mx-3 {
    margin-left: 0.625rem !important;
}
#depth {
    display:flex;
    flex-grow:1;
    padding-top: 0.1875rem;
    border-bottom: 2px solid var(--amar-border-color,#0C0C0C);
}
    .blockHead {
        text-align: center;
        color: #433;
        font-size: 0.9375rem;
        font-weight: 700;
        margin:0.3125rem 0;
    }

#depth table {
    width: 100%;
    padding: 0;
    margin: 0 0 0.3125rem;
    border-spacing: 0;
    border: none;
    background: transparent;
    table-layout:fixed;
}
#depth>div{
    width:100%;
    display:block;
    overflow:hidden;
}
#depth table thead {
    background: transparent;
}
    #depth table  tr{
        background-color: transparent;
    }
    #depth table thead tr th {
        line-height: 1.8;
        padding: 0 0.9375rem;
        font-size: 0.875rem;
        font-weight: normal;
        background-color:transparent;
    }
#depth table thead tr th.bgreen {
    background-color: #048215;
    color: #fff;
    text-align: center;
}
    #depth table thead tr th.bred {
        background-color: #cc075a;
        color: #fff;
        text-align: center;
    }
    #depth table tbody td {
        line-height: 1.7;
        text-align:right;
        padding:0;
    }
    #depth table tbody td.l {
        padding-right:0.9375rem;
    }
#leftAside {
    display: block;
    flex-direction: column;
    width: 300px;
    overflow: hidden;
    flex-shrink: 0;
}
#vpaChart {
    flex-grow:1;
    overflow:auto;
}

#bottomTabs {
    border-top: 2px solid var(--amar-border-color,#0C0C0C);
    width: 100%;
    height: 17.625rem;
    overflow: hidden;
}
    #bottomTabs .loaderCont {
        position: relative;
        height: 100%;
    }
#bottomTabs .tabs-content {
    background-color: var(--amar-secondary-bg,#0a0a0a);
    margin: 0;
    flex-grow: 1;
    overflow: hidden;
}
    
.tabs-content > .content {
    position:relative;
    float: none;
    height: 100%;
    overflow: hidden;
}
.tabs .tab-title > a {
    background-color: transparent;
    border-top: 2px solid transparent;
    padding: 0.3125rem 1.25rem;
    color:var(--amar-text-color,#433);
}
.tabs .tab-title.active a {
    background-color: var(--amar-secondary-bg,#0a0a0a);
    color: var(--amar-text-color, #b2b5be);
    border-color: var(--amar-color-highlight,#fff);
}

#tab1{
    padding:0.625rem 1.25rem;
}
#newsList {
    width: 100%;
    display: block;
    margin: 0;
    padding-left: 0.625rem;
    height: 100%;
    overflow: auto;
}

#newsList li + li {
    border-top: 2px solid var(--amar-border-color,#ddd);
    padding-top: 0.3125rem;
}



#tab3 ul {
    flex-grow: 1;
    margin: 0;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
}
    #tab3 ul li {
        display: flex;
        line-height: 2;
    }
#tab3 ul li span:first-child{
    flex-grow: 1;
}

#aside .tbs ul {
    display: block;
    white-space: nowrap;
}
    #aside .tbs ul li {
        display: inline-block;
    }
    #aside .tbs ul li+li {
        border-left:2px solid var(--amar-border-color,#ddd)
    }
    #aside .tbs ul li a{
        display: block;
        font-size: 1rem;
        padding:0.6875rem;
        color:#433;
        color:var(--amar-text-color,#433);
    }
ul.AmrStockList li.head {
    border-bottom: 2px solid var(--amar-border-color,#ddd);
}
ul.AmrStockList li {
    border-bottom: 2px solid var(--amar-border-color,#ddd);
}

.neutral {
    color: #433 !important;
    color: var(--amar-text-color,#433) !important;
}

#aside .tbs ul li.active{
    background-color: var(--amar-secondary-bg,#0a0a0a);
    color: var(--amar-text-color, #b2b5be);
}
#aside .rel-block {
    overflow: hidden;
    height:100%;
    display:block;
    background:gold;
}
#stockList {
    max-height: 100%;
}
.overflow-a{
    overflow:auto;
}
    #stockList li a {
        color: #433;
        color: var(--amar-text-color,#433);
    }

select#AmarSymbols {
    background:transparent;
    position:relative;
    font-size: 1rem;
    margin: 0;
    padding: 0.875rem 0.625rem;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border:none;
    border-bottom:2px solid var(--amar-border-color,#ddd);
    outline:none;
}
    select#AmarSymbols:focus {
        outline: none;
    }


#aside button.dropdown {
    margin: 0;
    height: 2.9375rem;
    background: transparent;
    border-left: 2px solid var(--amar-border-color,#ddd);
    border-bottom: 2px solid var(--amar-border-color,#ddd);
    text-align: center;
    padding: 0.4375rem 0.6875rem;
}
#aside button.dropdown:after{
    display:none;
}
#aside button.dropdown svg{
    fill:var(--amar-text-color,#ddd)
}
.toggleButton {
    display: none;
    align-items: center;
    justify-content: center;
}
.toggleButton .cont {
    display: block;
    transition: fill 60ms ease,stroke 60ms ease;
}
    
.toggleButton .bg {
    fill: var(--amar-secondary-bg,#fff);
    stroke: var(--amar-secondary-bg,#e0e3eb);
}
.toggleButton .arr {
    stroke: #9db2bd;
}

    .toggleButton.close svg {
        transform: rotate( 180deg );
    }
#leftMain .toggleButton.close .cont {
    margin-right: -10px;
}
.toggleButton .cont:hover .bg {
    fill: #fff;
}
.toggleButton .cont:hover .arr {
    stroke: #433;
}

.relative{
    position:relative;
}
ul#dropSettings {
    background-color: var(--amar-secondary-bg,#fff);
    border-color: var(--amar-secondary-border,#ddd);
}
    ul#dropSettings li{
        cursor:initial;
    }
        ul#dropSettings li.divider {
            border-color: var(--amar-secondary-border,#ddd);
        }
    ul#dropSettings.open {
        width: 12.5rem;
        right: 0;
        left: initial !important;
    }
#dropSettings::before {
    left: initial;
    right: 15px;
    border-color: transparent transparent var(--amar-secondary-border,#fff) transparent;
}
#dropSettings::after {
    left: initial;
    right: 14px;
    border-color: transparent transparent var(--amar-secondary-border,#ccc) transparent;
}
#themeChangeWrap{
    padding:0.3125rem 0;
    text-align:center;
}
    #themeChangeWrap .switch {
        display:inline-block;
    }
    #themeChangeWrap .switch input:checked + label {
        background-color: #39393D;
    }
    #themeChangeWrap .switch label {
        display: flex;
        justify-content: space-between;
        padding: 5px;
    }
        #themeChangeWrap .switch label svg {
            width: 16px
        }

#tab4, #tab5 {
    padding: 0;
    border-color: transparent;
}
.k-block, .k-widget {
    background-color: transparent;
}
.k-grid .k-grid-content {
    overflow-y: auto;
}
.k-header {
    background-color: var(--amar-secondary-bg,#ddd);
}
.k-grid-header,.k-grid td, .k-filter-row th, .k-grid-header th.k-header {
    border-color: var(--amar-secondary-border,#ddd);
}
    .k-grid-header th.k-header{
        border-bottom-width:0;
    }
    .k-grid .k-grid-content::-webkit-scrollbar, .tabs-content > .content::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

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

    .k-grid .k-grid-content::-webkit-scrollbar-thumb, .tabs-content > .content::-webkit-scrollbar-thumb {
        border: 1px solid;
        border-color: #f1f3f6;
        border-radius: 3px;
        background-color: #d1d4dc;
    }

    .k-grid .k-grid-content::-webkit-scrollbar-track, .tabs-content > .content::-webkit-scrollbar-track {
        background-color: transparent;
        border-radius: 3px;
    }
.k-link:link, .k-link:visited, .k-nav-current.k-state-hover .k-link{
    color:var(--amar-color-table-head,#433);
}
.k-grid tr:hover, .hover-highlight {
    background: var(--amar-secondary-border,#ddd)!important;
}


@media only screen and (min-width: 1024px) {
    #aside{
        display:flex;
    }
    #leftAside{
        display:flex;
    }
    .toggleButton{
        display:flex;
    }
    #centerCol{
        display:flex;
    }
}