@charset "IBM437";
/* 

# MCGREGORBFA TOUCH APP.
THEME: DARK
VER: 1.1

 
*/

:root {
    --primary-bg-color: #1A1F4D;
    --secondary-bg-color: #212453;
    --tertiary-bg-color: #3A3A64;
    --primary-font-color: #ffffff;
    --secondary-font-color: #23F0C7;
    --tertiary-font-color: #CC68FA;
    --primary-btn-color: #7356E3;
    --secondary-btn-color: #5D3FD6;
    --tertiary-btn-color: #4F32B8;
    --primary-input-bg-color: #222351
}

html, body {
    font-family: "ArialMT", Arial, Helvetica, sans-serif;
    letter-spacing: 0.05em;
    line-height: 1.5;
    font-size: 16px;
}

h1, h2, h3, h4, h5, h6 {
    line-height: 22px;
    word-spacing: -0.125em;
    font-weight: bold;
    position: relative;
}

body, .breadcrumb li, .tabbar-sub li a, table.c-datagrid tr > *, table.c-datagrid.viewtype-table-pivoted tbody tr > *, .w-metalist dl, .w-metalist.columns > .content .desc, .w-table table .btn.btn-action, .c-ratiobar table th, .w-filter .header h3, .kgHeaderContainer {
    text-shadow: 0 1px 0 black;
}

ul.striped li:nth-child(2n+1) {
    background: rgba(0, 0, 0, 0.1);
}

.flushLeft, .btn.flushLeft, .btn.flushLeft:link, .btn.flushLeft:visited, .c-dateSelect.date-single fieldset label + input[type=submit] {
    -moz-border-radius-topleft: 0;
    -webkit-border-top-left-radius: 0;
    border-top-left-radius: 0;
    -moz-border-radius-bottomleft: 0;
    -webkit-border-bottom-left-radius: 0;
    border-bottom-left-radius: 0;
}

.flushRight, .btn.flushRight, .btn.flushRight:link, .btn.flushRight:visited, .flushRight .btn-group li:last-child .btn, .btn-group.flushRight li:last-child .btn {
    -moz-border-radius-topright: 0;
    -webkit-border-top-right-radius: 0;
    border-top-right-radius: 0;
    -moz-border-radius-bottomright: 0;
    -webkit-border-bottom-right-radius: 0;
    border-bottom-right-radius: 0;
}

.btn, .btn:link, .btn:visited, .w-datagrid .dataTables_wrapper .paging_full_numbers a {
    display: inline-block;
    width: auto;
    color: var(--primary-font-color);
    font-size: 11px;
    text-decoration: none;
    padding: 4px 13px;
    line-height: 14px;
    cursor: pointer;
    text-align: center;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

    .btn:hover, .btn:active, .btn.active {
        color: var(--primary-font-color);
        text-decoration: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

.disabled .btn:hover, .disabled .btn:active, .disabled .btn.active {
    opacity: 0.5;
    cursor: default;
}

.btn-default, .disabled .btn-default,
.disabled .btn-default:hover, .w-datagrid .dataTables_wrapper .paging_full_numbers a {
    background: var(--primary-btn-color);
    background: -moz-linear-gradient(top, #2b2b2b 0%, #2b2b2b 50%, #1f1f1f 52%, #1f1f1f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(50%, #2b2b2b), color-stop(52%, #1f1f1f), color-stop(100%, #1f1f1f));
    background: -webkit-linear-gradient(top, #2b2b2b 0%, #2b2b2b 50%, #1f1f1f 52%, #1f1f1f 100%);
    background: -o-linear-gradient(top, #2b2b2b 0%, #2b2b2b 50%, #1f1f1f 52%, #1f1f1f 100%);
    background: -ms-linear-gradient(top, #2b2b2b 0%, #2b2b2b 50%, #1f1f1f 52%, #1f1f1f 100%);
    background: linear-gradient(to bottom, var(--secondary-btn-color) 0%, var(--secondary-btn-color) 50%, var(--primary-btn-color) 52%, var(--primary-btn-color) 100%);
    text-shadow: 0 1px 0 black;
    border: 1px solid var(--primary-bg-color);
    color: var(--primary-font-color);
    -webkit-box-shadow: inset 0 1px 1px var(--primary-btn-color);
    -moz-box-shadow: inset 0 1px 1px var(--primary-btn-color);
    box-shadow: inset 0 1px 1px var(--primary-btn-color);
}

.btn-action-login, .btn-action, .btn-action:link, .btn-action:visited {
    background: var(--primary-btn-color);
    text-shadow: 0 1px 0 rgba(0, 27, 57, 0.8);
    border: 1px solid var(--secondary-btn-color);
    font-weight: normal;
    font-size: 12px;
    box-shadow: inset 0 1px 1px var(--primary-btn-color);
}

.i-arrow_right_small, .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .content .fieldsubcategories li:after {
    background-position: -150px -80px;
    width: 5px;
    height: 10px;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
    display: block;
}

audio,
canvas,
video {
    display: inline-block;
}

    audio:not([controls]) {
        display: none;
        height: 0;
    }

[hidden] {
    display: none;
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    background: #0e0e0e;
    color: var(--primary-font-color);
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
}

html, body, section.main, section.main > div {
    height: 100%;
}

    body .page {
        background: transparent;
    }

a:focus {
    outline: thin dotted;
}

a:active,
a:hover {
    outline: 0;
}

h1 {
    font-size: 2em;
    margin: 0.67em 0;
}

abbr[title] {
    border-bottom: 1px dotted;
}

strong {
    font-weight: bold;
}

b {
    font-weight: normal;
}

dfn {
    font-style: italic;
}

hr {
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    height: 0;
}

mark {
    background: #ff0;
    color: #000;
}

code,
kbd,
pre,
samp {
    font-family: monospace, serif;
    font-size: 1em;
}

pre {
    white-space: pre-wrap;
    font-size: 11px;
    font-family: monospace;
}

q {
    quotes: "\201C" "\201D" "\2018" "\2019";
}

small {
    font-size: 80%;
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

img {
    border: 0;
}

svg:not(:root) {
    overflow: hidden;
}

figure {
    margin: 0;
}

fieldset {
    border: 1px solid #555;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

legend {
    border: 0;
    padding: 0;
}

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    margin: 0;
}

button,
input {
    line-height: normal;
}

button,
select {
    text-transform: none;
}

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
    -webkit-appearance: button;
    cursor: pointer;
}

    button[disabled],
    html input[disabled] {
        cursor: default;
    }

input[type="checkbox"],
input[type="radio"] {
    box-sizing: border-box;
    padding: 0;
    position: relative;
    z-index: 1;
}

input[type="search"] {
    -webkit-appearance: textfield;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

    input[type="search"]::-webkit-search-cancel-button,
    input[type="search"]::-webkit-search-decoration {
        -webkit-appearance: none;
    }

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

textarea {
    overflow: auto;
    vertical-align: top;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* #Typography */
/* 

##Headings
```
<h1>I am an H1 heading. I rule them all.</h1>
<h2>I'm an H2, I usually head up panels</h2>
<h3>H3 here, wazzup? I usually headup widgets</h3>
<h4>I'm an H4, you'll find me as subheaders in widgets mostly.</h4>
```

##Paragraphs, links and inline
```
<p>I'm a paragraph. Just a para- ara- ara- aragraph. <strong>Strong</strong> and <em>emphasized</em>.</p>

<a href="#">I'm a link, I'll take you places.</a>
```

*/
body {
    color: var(--primary-font-color);
}

h1, h2 {
    margin-bottom: 18px;
}

h1, h2, h3, h4 {
    margin-top: 18px;
}

h4, h5, h6 {
    line-height: 18px;
}

h1 {
    font-size: 17px;
    top: 5px;
}

h2 {
    font-size: 14px;
    top: 8px;
    color: var(--primary-font-color);
    text-transform: uppercase;
}

h3 {
    font-size: 15px;
    top: 1px;
    font-weight: normal;
}

h4 {
    font-size: 11px;
    top: 2px;
}

h5 {
    font-size: 11px;
    top: 4px;
}

h6 {
    font-size: 11px;
    top: 5px;
}

h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child {
    margin-top: 0;
}

p, pre, address {
    margin: 15px 0;
    position: relative;
    text-shadow: none;
}

p {
    word-spacing: 0.125em;
    hyphenate: auto;
    hyphenate-lines: 3;
}

a:link, a:visited,
a:hover, a:active {
    color: var(--secondary-font-color);
}

a:link, a:visited {
    text-decoration: none;
}

a:hover, a:active {
    text-decoration: underline;
}

small {
    font-size: 11px;
    color: var(--primary-font-color);
    text-shadow: none;
    display: block;
    line-height: 13px;
}

del {
    text-decoration: line-through;
}

abbr, acronym {
    font-size: 85%;
    text-transform: uppercase;
    letter-spacing: .1em;
}

blockquote {
    padding: 1.5em;
}

ul, ol {
    margin-left: 1.5em;
}

ul {
    list-style: disc outside;
}

ol {
    list-style: decimal outside;
}

ul li {
    text-shadow: 0 1px 0 black;
}

ul, ol, dl, dialog {
    position: relative;
    margin-top: 18px;
    margin-bottom: 18px;
}

    li ul, li ol, ul ul, ol ol {
        top: 0;
        margin-top: 0;
        margin-bottom: 0;
    }

li h1, li h2, li h3,
li h4, li h5, li h6,
li p {
    top: 0;
}

dt {
    font-size: 13px;
    color: #787878;
}

dd {
    font-size: 16px;
    color: var(--primary-font-color);
}

abbr, code, kbd, samp, small, var {
    line-height: 15px;
}

/* 
#Forms

##Standard Elements
```
<style>
.showofftheformitemslist {list-style:none; margin:0; padding:0;}
</style>
<form>
    <legend>We are form and I am legend</legend>
    <fieldset>
        <ul class="showofftheformitemslist">
            <li><a href="#">I'm a link in a form</a></li>
            <li>
                <label>
                    I'm a label for an input. 
                    <input type="text" placeholder="I'm an input. The label's for me." style="width:300px;" />
                </label>
            </li>
            <li>
                <label>
                    <input type="checkbox" />
                    <span> select me. </span>
                </label>
            </li>
            <li style="background:#222; padding:5px;">
                <dl class="dropDownList" style="width: 200px;">
                    <dt><span>Annual Published</span><i class="icon icon-showmore"></i></dt>
                </dl>
            </li>
        </ul>
    </fieldset>
</form>
```

*/
form, form legend, form label {
    font-size: 16px;
    line-height: 24px;
}

.styledSelect {
    position: relative;
}

    .styledSelect:after {
        content: '>';
        font: bold 11px "Consolas", monospace;
        color: gray;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        right: 8px;
        top: 2px;
        padding: 0 0 2px;
        position: absolute;
        pointer-events: none;
    }

    .styledSelect:before {
        content: '';
        right: 6px;
        top: 0px;
        width: 20px;
        height: 20px;
        position: absolute;
        pointer-events: none;
        display: block;
    }

    .styledSelect select {
        padding: 3px;
        margin: 0;
        color: #888;
        outline: none;
        display: inline-block;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        cursor: pointer;
        background: #1e1e1e;
        border: none;
        color: gray;
    }

        .styledSelect select:active {
            outline: none;
        }

        .styledSelect select option {
            border: var(--primary-bg-color) solid 1px;
        }

dl.dropDownList {
    margin: 0;
    display: inline-block;
    z-index: 10;
    text-align: left;
}

    dl.dropDownList dt {
        cursor: pointer;
        font-size: 12px;
        padding-left: 7px;
        padding-right: 20px;
        -webkit-border-radius: 2px;
        -moz-border-radius: 2px;
        -ms-border-radius: 2px;
        -o-border-radius: 2px;
        border-radius: 2px;
        color: var(--primary-font-color);
    }

        dl.dropDownList dt i.icon-showmore {
            position: absolute;
            top: 10px;
            right: 3px;
        }

    dl.dropDownList dd {
        background: var(--tertiary-bg-color);
        width: 100%;
        margin: 0;
        padding: 0 0 5px;
        position: absolute;
        -webkit-border-radius: 0 0 5px 5px;
        -moz-border-radius: 0 0 5px 5px;
        -ms-border-radius: 0 0 5px 5px;
        -o-border-radius: 0 0 5px 5px;
        border-radius: 0 0 5px 5px;
    }

    dl.dropDownList ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    dl.dropDownList li {
        float: none;
        width: 100%;
        color: var(--primary-font-color);
        line-height: 25px;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
    }

        dl.dropDownList li a {
            display: block;
            padding: 0 7px;
            cursor: pointer;
            text-decoration: none;
            font-size: 12px;
            line-height: 25px;
        }

        dl.dropDownList li:hover a {
            color: var(--primary-font-color);
            background: var(--secondary-bg-color);
        }

    dl.dropDownList.isActive dt {
        background: transparent;
    }

[type="checkbox"]:not(:checked) + span:before, [type="checkbox"]:checked + span:before {
    content: '';
    position: absolute;
    top: 4px;
    left: 0;
    background: var(--primary-bg-color);
    width: 12px;
    height: 12px;
    border: 1px solid var(--tertiary-bg-color);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

[type="checkbox"]:not(:checked) + span:after, [type="checkbox"]:checked + span:after {
    content: '';
    position: absolute;
    top: 0px;
    left: 3px;
    background: url("../images/dark_sprites.png?v=1.12") no-repeat;
    background-position: -210px -100px;
    width: 10px;
    height: 8px;
    transition: all .2s;
}

[type="checkbox"] {
    /*checkbox aspect*/
}

    [type="checkbox"]:not(:checked) {
        position: absolute;
        left: -9999px;
    }

    [type="checkbox"]:checked {
        position: absolute;
        left: -9999px;
    }

    [type="checkbox"] + span {
        padding-left: 20px;
    }

    [type="checkbox"]:not(:checked) + span:before {
        background: transparent;
    }

    [type="checkbox"]:not(:checked) + span:after {
        opacity: 0;
        transform: scale(0);
    }

    [type="checkbox"]:checked + span:after {
        opacity: 1;
        transform: scale(1);
    }

    [type="checkbox"]:checked::focus + span:before {
        border: 1px solid #787878;
    }

    [type="checkbox"] :not(:checked):focus + span:before {
        border: 1px solid #787878;
    }

.w-table label.f-customCheckbox {
    position: relative;
    display: block;
    cursor: pointer;
    width: 16px;
    height: 22px;
}

    .w-table label.f-customCheckbox [type="checkbox"]:checked + span:before {
        top: 50%;
        left: 0;
        margin-top: -7px;
    }

    .w-table label.f-customCheckbox [type="checkbox"]:checked + span:after {
        top: 50%;
        left: 3px;
        margin-top: -4px;
    }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    .styledSelect select {
        padding-right: 20px;
    }
}

form legend {
    position: relative;
    top: 5px;
    background-break: bounding-box;
}

form fieldset li {
    border-top: 1px solid #e5e5e5;
    padding: 10px;
}

    form fieldset li:first-child {
        border-top: none;
    }

form label {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 30%;
    margin-right: 5%;
    display: inline-block;
    color: var(--primary-font-color);
    font-weight: bold;
    text-shadow: 0 0 0 transparent;
    position: relative;
}

form input {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-border-radius: 1;
    -moz-border-radius: 1;
    -ms-border-radius: 1;
    -o-border-radius: 1;
    border-radius: 1;
    width: 65%;
    display: inline-block;
    padding: 8px 15px;
    border: 1px solid #ccc;
    font-size: 16px;
}

.floatlabel-wrapper label.label-floatlabel {
    line-height: 14px;
    font-size: 12px !important;
}

.floatlabel-wrapper input {
    padding-top: 8px !important;
}

/* 
##Toggle switch

## - Standard Switch

```
<label for="imaswitch">Flick the switch</label>
<div class="togglebox">
    <input id="imaswitch" type="checkbox" />
    <label for="imaswitch"><b></b></label>
</div>
```

## - Yes/No Switch
```
<label for="imaquestion">But do you lift?</label>
<div class="togglebox yesno">
    <input id="imaquestion" checked="checked" type="checkbox" />
    <label for="imaquestion"><b></b></label>
</div>
```
*/
.togglebox {
    -webkit-border-radius: 9px;
    -moz-border-radius: 9px;
    -ms-border-radius: 9px;
    -o-border-radius: 9px;
    border-radius: 9px;
    -webkit-box-shadow: 0 0 3px #cccccc;
    -moz-box-shadow: 0 0 3px #cccccc;
    box-shadow: 0 0 3px #cccccc;
    display: inline-block;
    border: 1px solid #BBB;
    width: 76px;
    height: 30px;
    position: relative;
    top: 8px;
    left: 10px;
    color: var(--primary-font-color);
    font-weight: bold;
    overflow: hidden;
}

    .togglebox input {
        display: block;
        position: absolute;
        visibility: hidden;
    }

        .togglebox input:checked ~ label {
            left: -3px;
        }

    .togglebox label {
        -webkit-border-radius: 10px 10px;
        -moz-border-radius: 10px / 10px;
        border-radius: 10px / 10px;
        -webkit-transition-duration: 0.12s;
        -moz-transition-duration: 0.12s;
        -o-transition-duration: 0.12s;
        transition-duration: 0.12s;
        width: 200%;
        height: 100%;
        font-size: 17px;
        line-height: 30px;
        position: absolute;
        top: 0;
        left: -47px;
        z-index: 1;
        cursor: pointer;
    }

        .togglebox label::before {
            -webkit-box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.3) inset;
            -moz-box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.3) inset;
            box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.3) inset;
            content: 'ON';
            color: var(--primary-font-color);
            background: #961418;
            text-shadow: 0 0 6px rgba(255, 255, 255, 0.15);
            width: 50px;
            line-height: 28px;
            text-align: center;
            float: left;
            margin-right: -16px;
            padding-left: 1px;
            padding-right: 12px;
            padding-top: 1px;
        }

        .togglebox label::after {
            -webkit-box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.3) inset;
            -moz-box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.3) inset;
            box-shadow: 0 4px 5px -2px rgba(0, 0, 0, 0.3) inset;
            content: 'OFF';
            width: 50px;
            line-height: 28px;
            float: left;
            margin-left: -15px;
            padding-left: 13px;
            padding-top: 1px;
            text-align: center;
            color: #999;
            background: var(--primary-font-color);
        }

        .togglebox label b {
            -webkit-box-shadow: 0 4px 0 -2px #f1f1f1 inset, 0 2em 2em -2em #aaaaaa inset, 0 0 2px rgba(0, 0, 0, 0.5);
            -moz-box-shadow: 0 4px 0 -2px #f1f1f1 inset, 0 2em 2em -2em #aaaaaa inset, 0 0 2px rgba(0, 0, 0, 0.5);
            box-shadow: 0 4px 0 -2px #f1f1f1 inset, 0 2em 2em -2em #aaaaaa inset, 0 0 2px rgba(0, 0, 0, 0.5);
            display: block;
            height: 100%;
            width: 30px;
            float: left;
            position: relative;
            z-index: 1;
            border: 1px solid #AAA;
            background: #F6F6F6;
            box-shadow: 0 4px 0 -2px #f1f1f1 inset, 0 2em 2em -2em #aaaaaa inset, 0 0 2px rgba(0, 0, 0, 0.5);
            border-radius: 8px;
        }

        .togglebox label:hover b {
            background: #E5E5E5;
        }

    .togglebox span {
        position: absolute;
        right: -100px;
    }

    .togglebox.yesno label::before {
        content: 'YES';
    }

    .togglebox.yesno label::after {
        content: 'NO';
    }

.ui-widget-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.5;
    pointer-events: auto;
    -webkit-backface-visibility: hidden;
    -webkit-transition: opacity 0.1s linear;
    -moz-transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
}

.ui-dialog {
    background: var(--primary-bg-color);
    border-top: 2px solid var(--primary-bg-color);
    border-bottom: 1px solid var(--primary-bg-color);
    border-left: 0;
    border-right: 0;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    padding: 10px;
}

    .ui-dialog .ui-dialog-titlebar {
        padding: 0;
        background: #2a2a2a;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        border-radius: 0;
        border: 0;
    }

    .ui-dialog .ui-dialog-content {
        color: var(--primary-font-color);
        padding: 30px;
        background: #404040;
        font-size: 12px;
        line-height: 22px;
        font-weight: normal;
        text-shadow: none;
    }

    .ui-dialog .ui-state-default {
        background: #45264f;
        background: -moz-linear-gradient(top, #45264f 0%, #3c1e46 42%, #351b3d 82%, #351b3d 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #45264f), color-stop(42%, #3c1e46), color-stop(82%, #351b3d), color-stop(100%, #351b3d));
        background: -webkit-linear-gradient(top, #45264f 0%, #3c1e46 42%, #351b3d 82%, #351b3d 100%);
        background: -o-linear-gradient(top, #45264f 0%, #3c1e46 42%, #351b3d 82%, #351b3d 100%);
        background: -ms-linear-gradient(top, #45264f 0%, #3c1e46 42%, #351b3d 82%, #351b3d 100%);
        background: linear-gradient(to bottom, #45264f 0%, #3c1e46 42%, #351b3d 82%, #351b3d 100%);
        border: 1px solid var(--primary-bg-color);
    }

.ui-datepicker {
    margin-top: 10px;
    padding: 10px 10px 0;
    width: 200px;
    border: 1px solid var(--primary-bg-color);
    background: #f0f0f0;
    -webkit-box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5);
}

    .ui-datepicker:before {
        content: "";
        display: block;
        position: absolute;
        top: -7px;
        bottom: auto;
        left: 10px;
        width: 10px;
        height: 7px;
        background: url("../images/dark_sprites.png?v=1.6") -210px -90px no-repeat;
    }

    .ui-datepicker .ui-datepicker-header {
        padding: 4px;
        margin-bottom: 10px;
        background: gainsboro;
        border-color: #c8c8c8;
    }

        .ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
        .ui-datepicker .ui-datepicker-header .ui-datepicker-next {
            width: 18px;
            height: 18px;
            top: 4px;
        }

            .ui-datepicker .ui-datepicker-header .ui-datepicker-prev.ui-state-hover, .ui-datepicker .ui-datepicker-header .ui-datepicker-prev:hover,
            .ui-datepicker .ui-datepicker-header .ui-datepicker-next.ui-state-hover,
            .ui-datepicker .ui-datepicker-header .ui-datepicker-next:hover {
                background: #f0f0f0;
                border-color: #f0f0f0;
                width: 18px;
                height: 18px;
            }

            .ui-datepicker .ui-datepicker-header .ui-datepicker-prev span,
            .ui-datepicker .ui-datepicker-header .ui-datepicker-next span {
                opacity: 0.6;
            }

        .ui-datepicker .ui-datepicker-header .ui-datepicker-title {
            overflow: hidden;
            margin: 0 20px;
            line-height: 18px;
        }

            .ui-datepicker .ui-datepicker-header .ui-datepicker-title select {
                -webkit-border-radius: 2px;
                -moz-border-radius: 2px;
                -ms-border-radius: 2px;
                -o-border-radius: 2px;
                border-radius: 2px;
                font-size: 11px;
                display: block;
                float: left;
            }

                .ui-datepicker .ui-datepicker-header .ui-datepicker-title select:first-child {
                    margin-right: 2px;
                }

    .ui-datepicker .ui-datepicker-calendar {
        border-collapse: separate;
    }

        .ui-datepicker .ui-datepicker-calendar th, .ui-datepicker .ui-datepicker-calendar td {
            padding: 0;
            font-size: 11px;
            background: #e6e6e6;
            border: 1px solid #d4d4d4;
            text-shadow: none;
            color: #565656;
        }

            .ui-datepicker .ui-datepicker-calendar th a, .ui-datepicker .ui-datepicker-calendar td a {
                padding: 0 2px 0 0;
                color: #565656;
                text-shadow: none;
            }

                .ui-datepicker .ui-datepicker-calendar th a.ui-state-highlight, .ui-datepicker .ui-datepicker-calendar td a.ui-state-highlight {
                    border-color: #c4c4c4;
                    background: #c4c4c4;
                }

                .ui-datepicker .ui-datepicker-calendar th a.ui-state-active, .ui-datepicker .ui-datepicker-calendar td a.ui-state-active {
                    border-color: #714082;
                    background: #714082;
                }

                .ui-datepicker .ui-datepicker-calendar th a:hover, .ui-datepicker .ui-datepicker-calendar td a:hover {
                    background: #f0f0f0;
                }

        .ui-datepicker .ui-datepicker-calendar th {
            color: #282828;
            font-weight: bold;
        }

        .ui-datepicker .ui-datepicker-calendar td.ui-state-disabled {
            opacity: 1;
            filter: Alpha(Opacity=100);
            font-size: 11px;
            background: #e6e6e6;
            border: 1px solid #f0f0f0;
            text-shadow: none;
            color: #b6b6b6;
        }

            .ui-datepicker .ui-datepicker-calendar td.ui-state-disabled span {
                color: #b6b6b6;
            }

    .ui-datepicker .ui-datepicker-buttonpane button {
        display: inline-block;
        width: auto;
        color: var(--primary-font-color);
        font-size: 11px;
        text-decoration: none;
        padding: 4px 13px;
        line-height: 14px;
        cursor: pointer;
        text-align: center;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
        background: #45264f;
        background: -moz-linear-gradient(top, #45264f 0%, #3c1e46 42%, #351b3d 82%, #351b3d 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #45264f), color-stop(42%, #3c1e46), color-stop(82%, #351b3d), color-stop(100%, #351b3d));
        background: -webkit-linear-gradient(top, #45264f 0%, #3c1e46 42%, #351b3d 82%, #351b3d 100%);
        background: -o-linear-gradient(top, #45264f 0%, #3c1e46 42%, #351b3d 82%, #351b3d 100%);
        background: -ms-linear-gradient(top, #45264f 0%, #3c1e46 42%, #351b3d 82%, #351b3d 100%);
        background: linear-gradient(to bottom, #45264f 0%, #3c1e46 42%, #351b3d 82%, #351b3d 100%);
        text-shadow: 0 1px 0 rgba(0, 27, 57, 0.8);
        border: 1px solid #41264a;
        font-weight: normal;
        font-size: 12px;
        -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
        -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
    }

        .ui-datepicker .ui-datepicker-buttonpane button.ui-datepicker-close {
            display: none;
        }

        .ui-datepicker .ui-datepicker-buttonpane button.ui-priority-secondary {
            opacity: 1;
            filter: Alpha(Opacity=100);
        }

.selectfilter {
    background: #eff0f1;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    max-width: 380px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    position: relative;
}

    .selectfilter input[type=text] {
        display: block;
        background: #eff0f1;
        padding: 3px 5px;
        font-size: 13px;
        line-height: 16px;
        position: relative;
        float: left;
        top: 0;
        width: 355px;
        border: 0;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
    }

    .selectfilter .validationMessage {
        margin-bottom: 0;
        bottom: -16px;
    }

#genericDropDownListControl .content {
    width: 380px;
    max-height: 150px;
    margin-left: -3px;
    border-top: 1px solid #eff0f1;
}

/* 
#Tables# 


##A standard table
```
<div class="w-table widget">
    <table>
        <colgroup>
            <col width="30%">
            <col width="50%">
            <col width="20%">
        </colgroup>
        <thead>
            <tr>
                <th class="title">Heading</th>
                <th class="desc">Heading</th>
                <th class="val">Heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="title">I'm a title</td>
                <td class="desc">I'm a description</td>
                <td class="val">R40.00</td>
            </tr>
            <tr>
                <td class="title">I'm a title</td>
                <td class="desc">I'm a description</td>
                <td class="val">R40.00</td>
            </tr>
            <tr>
                <td class="title">I'm a title</td>
                <td class="desc">I'm a description</td>
                <td class="val">R40.00</td>
            </tr>
        </tbody>
    </table>
</div>

```

##A striped table
```
<div class="w-table widget">
    <table class="striped">
        <colgroup>
            <col width="30%">
            <col width="50%">
            <col width="20%">
        </colgroup>
        <thead>
            <tr>
                <th class="title">Heading</th>
                <th class="desc">Heading</th>
                <th class="val">Heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="title">I'm a title</td>
                <td class="desc">I'm a description</td>
                <td class="val">R40.00</td>
            </tr>
            <tr>
                <td class="title">I'm a title</td>
                <td class="desc">I'm a description</td>
                <td class="val">R40.00</td>
            </tr>
            <tr>
                <td class="title">I'm a title</td>
                <td class="desc">I'm a description</td>
                <td class="val">R40.00</td>
            </tr>
            <tr>
                <td class="title">I'm a title</td>
                <td class="desc">I'm a description</td>
                <td class="val">R40.00</td>
            </tr>
            <tr>
                <td class="title">I'm a title</td>
                <td class="desc">I'm a description</td>
                <td class="val">R40.00</td>
            </tr>
        </tbody>
    </table>
</div>    
```

*/
table {
    background-color: transparent;
    border: none;
    border-radius: 6px;
    width: 100%;
    font-size: 13px;
    text-align: left;
}

    table caption {
        font-size: 13px;
        line-height: 18px;
        position: relative;
    }

    table tr > * {
        border-left: 1px solid #333;
    }

    table th {
        color: var(--primary-font-color);
        font-size: 12px;
        line-height: 22px;
        text-shadow: 0 1px 0 black;
        font-weight: normal;
    }

    table td {
        font-size: 18px;
        line-height: 22px;
        color: #e1e1e1;
    }

    table thead tr > * {
        border-left: 1px solid #292929;
    }

    table thead th {
        background: var(--primary-bg-color);
        color: var(--primary-font-color);
        text-shadow: none;
    }

    table thead td {
        background: transparent;
    }

    table tbody th {
        color: #848484;
        text-shadow: none;
        text-align: left;
        padding: 4px 10px;
    }

    table .val {
        text-align: right;
    }

    table .desc {
        text-align: left;
    }

    table .title {
        text-align: center;
    }

    table.padded tr * {
        padding: 5px 20px;
    }

.striped tbody tr:nth-child(odd) th,
.striped tbody tr:nth-child(odd) td {
    background: rgba(0, 0, 0, 0.1);
}

.col-striped tbody tr th:nth-child(odd),
.col-striped tbody tr td:nth-child(odd) {
    background: rgba(0, 0, 0, 0.1);
}

.striped.col-striped tbody tr:nth-child(odd) th:nth-child(odd),
.striped.col-striped tbody tr:nth-child(odd) td:nth-child(odd) {
    background: rgba(0, 0, 0, 0.2);
}

.row-groups tbody tr > * {
    border-bottom: 1px dashed #444;
}

.row-groups tbody tr:first-child > * {
    border-top: 1px solid #444;
}

.row-groups tbody tr:last-child > * {
    border-bottom: 1px solid #444;
}

.row-groups tbody .group-start * {
    border-top: 1px solid #444;
}

.row-groups tbody .group-end * {
    border-bottom: 1px solid #444;
}

.row-groups tbody .group-hidden * {
    display: none;
}

/* #Helpers
Helpers are classes that can be used to quickly enable certain functionality.

Examples are: 

*   __.pull-left__ or __.pull-right__ to quickly float elements.
*   __.v-align__ to enable a vertically-aligned element (uses display:table)
*   __.no-bg__ to force an element to have a transparent background (uses !important)
 */
/*
## Pull left/right
```
	<div class="pull-left">Container pulled left</div>
	<div class="pull-right">Container pulled right</div>
	<div class="centered clear-left">Centered (text) and cleared left.</div>

```

*/
.pull-left {
    float: left;
}

.pull-right {
    float: right;
}

.centered {
    text-align: center;
}

.clear-left {
    clear: left;
}

.clear-right {
    clear: right;
}

.scroll-view {
    overflow: auto;
    height: 100%;
    /*@include box-shadow(0 2px 5px rgba(0,0,0,0.4) inset);*/
}

.off {
    display: none;
}

.columns {
    display: table;
    width: 100%;
}

    .columns > * {
        display: table-row;
    }

    .columns .column {
        display: table-cell;
    }

/*active link */
.mouseover-pointer {
    cursor: pointer;
}

/*
## Vertical Align
Creating ability to create Table-like Vertical alignment

```
	<div class="v-align" style="width:300px; height:100px; border:1px solid #333;">
		<div>
			<div style="font-size:12px;">I am aligned vertically within the above container.</div>
		</div>	
	</div>
	
```
*/
.v-align {
    width: 100%;
    height: 100%;
}

    .v-align > * {
        position: relative;
        top: 50%;
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
    }

.no-bg {
    background: transparent !important;
}

/*

## Loading Graphic

```
	<div style="width:100%; height:100px"><div class="loading"></div></div>
```

*/
.loading {
    background-color: transparent;
    background-image: url("../images/Iress_logo_animated.gif");
    background-position: 50% 50%;
    background-size: 50px;
    background-repeat: no-repeat;
  
    min-height: 60px;
}

.loading-sml {
    background-color: transparent;
    background-image: url("../images/Iress_logo_animated.gif");
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: 50px;
    min-height: 20px;
}

ul.horiz li {
    float: left;
}

/*
## No Data class
Sets the styling for elements (charts, etc) that don't contain data

```
	<div class="nodata"style="width:100%; height:50px">This div has no data</div>
```
*/
.nodata {
    color: var(--primary-font-color);
    font-style: italic;
    font-size: 11px;
    text-shadow: none;
}

.panel > .nodata {
    margin: 20px;
}

.nodata.content {
    padding: 10px;
}

.nodata p {
    margin: 0;
}

.w-table .nodata {
    color: var(--primary-font-color);
}

.error {
    color: #777;
    font-style: italic;
    font-size: 12px;
}

.panel > .error {
    margin: 20px;
}

.error p {
    margin: 0;
}

/*

# Split Types
__For use with__ split view, tabs or any other set of elements inside a wrapper. 
The framework has a bunch of built in split types, shown below.

_Examples make use of the split view component. __.tempcontainer__ class for display purposes only._


##Split Golden
Based on the golden ratio, has a split of 61.8:38.2

```
<style>
	.tempcontainer {
		background:#222; border:1px solid #333; margin:0 0 10px; height:20px; font-size:12px;
	}
</style>
	
<div class="split-view split-golden">
	<div class="tempcontainer"></div>
	<div class="tempcontainer"></div>
</div>

```

##Split Golden (Alternative)
This is also the Golden ratio, but with the smaller portion on the left.

```
	<div class="split-view split-golden-alt">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

##Split 2
Standard 50:50 split

```
	<div class="split-view split-2">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

##Split 3 
Even split across 3 elements, so 33:33:34

```
	<div class="split-view split-3">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

##Split 4 
Even split across 4 elements. 25%x4

```
	<div class="split-view split-4">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

##Split 5 
Even split across 5 elements. 20%x5

```
	<div class="split-view split-5">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

##Split 6 
Even split across 6 elements. 16%x5, 20%

```
	<div class="split-view split-6">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

##Split 7
Even split across 7 elements. 14%x6,16%

```
	<div class="split-view split-7">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

##Split 8 
Even split across 8 elements. 12.5%x8

```
	<div class="split-view split-8">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

##Split 2:1 
2 elements split 66:34

```
	<div class="split-view split-2-1">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

##Split 1:2 
2 elements split 34:66

```
	<div class="split-view split-1-2">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

##Split 1:1:2
3 elements split 25:25:50

```
	<div class="split-view split-1-1-2">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

##Split 2:1:1 
3 elements split 50:25:25

```
	<div class="split-view split-2-1-1">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

##Split 3:1
2 elements split 75:25

```
	<div class="split-view split-3-1">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

##Split 1:3
2 elements split 25:75

```
	<div class="split-view split-1-3">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

##Split 7:3 
2 elements split 70:30

```
	<div class="split-view split-7-3">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

##Split 3:7
2 elements split 30:70

```
	<div class="split-view split-3-7">
		<div class="tempcontainer"></div>
		<div class="tempcontainer"></div>
	</div>

```

*/
.split-golden > * {
    width: 61.8%;
}

    .split-golden > *:nth-child(2n),
    .split-golden-alt > * {
        width: 38.2%;
    }

        .split-golden-alt > *:nth-child(2n) {
            width: 61.8%;
        }

.split-2 > * {
    width: 50%;
}

.split-3 > * {
    width: 33%;
}

    .split-3 > *:nth-child(3n) {
        width: 34%;
    }

.split-4 > * {
    width: 25%;
}

.split-5 > * {
    width: 20%;
}

.split-6 > * {
    width: 16%;
}

    .split-6 > *:nth-child(6n) {
        width: 20%;
    }

.split-7 > * {
    width: 14%;
}

    .split-7 > *:nth-child(7n) {
        width: 16%;
    }

.split-8 > * {
    width: 12.5%;
}

.split-2-1 > * {
    width: 66%;
}

    .split-2-1 > *:nth-child(2n) {
        width: 34%;
    }

.split-1-2 > * {
    width: 34%;
}

    .split-1-2 > *:nth-child(2n) {
        width: 66%;
    }

.split-1-1-2 > * {
    width: 25%;
}

    .split-1-1-2 > *:nth-child(3n) {
        width: 50%;
    }

.split-2-1-1 > * {
    width: 25%;
}

    .split-2-1-1 > *:nth-child(3n-2) {
        width: 50%;
    }

.split-3-1 > * {
    width: 75%;
}

    .split-3-1 > *:nth-child(2n) {
        width: 25%;
    }

.split-1-3 > * {
    width: 25%;
}

    .split-1-3 > *:nth-child(2n) {
        width: 75%;
    }

.split-7-3 > * {
    width: 70%;
}

    .split-7-3 > *:nth-child(2n) {
        width: 30%;
    }

.split-3-7 > * {
    width: 30%;
}

    .split-3-7 > *:nth-child(2n) {
        width: 70%;
    }

/*
# Set width elements #
These classes will set the width of an element to a % of its container.



##25% of container
```
<div class="w25 tempcontainer"></div>
```

##75% of container
```
<div class="w75 tempcontainer"></div>
```

##33% of container
```
<div class="w33 tempcontainer"></div>
```

##66% of container
```
<div class="w66 tempcontainer"></div>
```

##10% of container
```
<div class="w10 tempcontainer"></div>
```

##20% of container
```
<div class="w20 tempcontainer"></div>
```

##30% of container
```
<div class="w30 tempcontainer"></div>
```

##40% of container
```
<div class="w40 tempcontainer"></div>
```

##50% of container
```
<div class="w50 tempcontainer"></div>
```

##60% of container
```
<div class="w60 tempcontainer"></div>
```

##70% of container
```
<div class="w70 tempcontainer"></div>
```

##80% of container
```
<div class="w80 tempcontainer"></div>
```

##90% of container
```
<div class="w90 tempcontainer"></div>
```

##100% of container
```
<div class="w100 tempcontainer"></div>
```

*/
.w25 {
    width: 25%;
}

.w75 {
    width: 75%;
}

.w33 {
    width: 33%;
}

.w66 {
    width: 66%;
}

.w10 {
    width: 10%;
}

.w20 {
    width: 20%;
}

.w30 {
    width: 30%;
}

.w40 {
    width: 40%;
}

.w50 {
    width: 50%;
}

.w60 {
    width: 60%;
}

.w70 {
    width: 70%;
}

.w80 {
    width: 80%;
}

.w90 {
    width: 90%;
}

.w100 {
    width: 100%;
}

/* 
# 2 Column CSS layout #
Creates 2 columns using only css (no manual separation)

```
<p class="col-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, 
doloremque, saepe, rerum quas perspiciatis omnis ipsam nihil vitae impedit 
cum ea laboriosam dolorum quasi enim totam minima placeat iste cumque.</p>
``` 

*/
.col-2 {
    -webkit-column-count: 2;
    -moz-column-count: 2;
    -ms-column-count: 2;
    -o-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1px;
    -moz-column-gap: 1px;
    -ms-column-gap: 1px;
    -o-column-gap: 1px;
    column-gap: 1px;
    -webkit-column-rule: 1px solid #2e2e2e;
    -moz-column-rule: 1px solid #2e2e2e;
    -ms-column-rule: 1px solid #2e2e2e;
    -o-column-rule: 1px solid #2e2e2e;
    column-rule: 1px solid #2e2e2e;
}

.flex-view {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height: 100%;
}

.flex-split-2-1 > * {
    -webkit-box-flex: 2;
    -moz-box-flex: 2;
    -webkit-flex: 2;
    -ms-flex: 2;
    flex: 2;
}

    .flex-split-2-1 > *:nth-child(2n) {
        -webkit-box-flex: 1;
        -moz-box-flex: 1;
        -webkit-flex: 1;
        -ms-flex: 1;
        flex: 1;
    }

.flex-split-golden > * {
    -webkit-box-flex: 618;
    -moz-box-flex: 618;
    -webkit-flex: 618;
    -ms-flex: 618;
    flex: 618;
}

    .flex-split-golden > *:nth-child(2n) {
        -webkit-box-flex: 382;
        -moz-box-flex: 382;
        -webkit-flex: 382;
        -ms-flex: 382;
        flex: 382;
    }

.ie9 .flex-view {
    *zoom: 1;
}

    .ie9 .flex-view:after {
        content: "";
        display: table;
        clear: both;
    }

    .ie9 .flex-view > * {
        float: left;
    }

.ie9 .flex-split-2-1 > * {
    width: 66%;
}

    .ie9 .flex-split-2-1 > *:nth-child(2n) {
        width: 34%;
    }

.flex-view {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    height: 100%;
}

/* #Icons# */
.icon, .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .content .fieldsubcategories li:after {
    display: inline-block;
    text-indent: -999px;
    overflow: hidden;
    background-image: url("../images/dark_sprites.png?v=1.12");
    background-repeat: no-repeat;
}

/*

##Icons: 16px##

```
<p style="background:#666; padding:5px;">Arrow right: <i class="icon icon16 icon_arrow-right"></i> <small style="color:#000;">bg color on this &lt;p&gt; just to highlight the icon better</small></p>
<p>Clear: <i class="icon icon16 icon-clear"></i></p>
```
*/
.icon16 {
    width: 16px;
    height: 16px;
}

    .icon16.icon_arrow-right {
        background-position: -160px -30px;
    }

    .icon16.icon-clear {
        background-position: -260px -30px;
    }

        .icon16.icon-clear.dark {
            width: 16px;
            height: 16px;
            background-position: -240px -60px;
        }

.icon_arrow-right {
    width: 16px;
    height: 16px;
    background-position: -160px -30px;
}

.icon32 {
    width: 32px;
    height: 32px;
}

/*
##Icons: User##

```
<p class="online">Online: <i class="icon icon-user"></i></p>
<p class="offline">Offline: <i class="icon icon-user"></i></p>

```

*/
.icon-user {
    width: 45px;
    height: 45px;
    background-repeat: no-repeat;
    background-image: url("../images/Iress_icon2_user_dark.png");
    background-size: 100% 100%;
}

/*
##Icons: Switchers##

```
<p>Standard: <i class="icon icon-switcher"></i></p>
<p>Dark: <i class="icon icon-switcher-dark"></i></p>

```

*/
.icon-switcher {
    width: 10px;
    height: 16px;
    background-position: -220px -30px;
}

.icon-switcher-dark {
    width: 10px;
    height: 13px;
    background-position: -220px -50px;
}

/*
##Icons: Risk##

```
<p>Lower Risk: <i class="icon icon-lowerrisk"></i></p>
<p>Higher Risk: <i class="icon icon-higherrisk"></i></p>

```

*/
.icon-lowerrisk {
    width: 17px;
    height: 21px;
    background-position: 0 -80px;
}

.icon-higherrisk {
    width: 17px;
    height: 21px;
    background-position: -20px -80px;
}

/*
##Icons: Market Status##

```
<p class="marketstatus open">Market Open: <i class="icon icon-marketstatus"></i></p>
<p class="marketstatus closed">Market Closed: <i class="icon icon-marketstatus"></i></p>
```

*/
.icon-marketstatus {
    width: 24px;
    height: 24px;
    margin-right: 5px;
}

.marketstatus.open .icon-marketstatus {
    background-position: -310px -30px;
}

.marketstatus.closed .icon-marketstatus {
    background-position: -280px -30px;
}

/* ##Icons: Data Frequency Type##

```
<p>End of Day: <i class="icon i-eod"></i></p>
<p>Real Time: <i class="icon i-rt"></i></p>
<p>15min Delayed: <i class="icon i-15d"></i></p>

```
*/
.i-eod, .i-rt, .i-15d {
    width: 30px;
    height: 30px;
}

.i-eod {
    background-position: 0 -120px;
}

.i-rt {
    background-position: -30px -120px;
}

.i-15d {
    background-position: -60px -120px;
}

/* ##Icons: News Types##

```
<p>News-Sens: <i class="icon i-news-sens"></i></p>

```
*/
.i-news-sens {
    background-position: -280px -80px;
    width: 21px;
    height: 20px;
}

/* ##Sort Icons

*/
.i-sort {
    width: 15px;
    height: 13px;
    background-position: 0 0;
    background: url("../images/tablesort_both.png") no-repeat;
    background-size: 15px;
}

.i-sort-asc {
    width: 15px;
    height: 13px;
    background-position: 50% 50%;
    background: url("../images/tablesort_asc.png") no-repeat;
    background-size: 15px;
}

.i-sort-desc {
    width: 15px;
    height: 13px;
    background-position: 50% 50%;
    background: url("../images/tablesort_desc.png") no-repeat;
    background-size: 15px;
}

/* ##Icons: Misc##

```
<p>More: <i class="icon icon-more"></i></p>
<p>Info: <i class="icon i-info"></i></p>
<p>Download: <i class="icon icon-download"></i></p>
<p>App Settings: <i class="icon icon-appsettings"></i></p>
<p>Show More: <i class="icon icon-showmore"></i></p>

```
*/
.icon-more, .i-more {
    height: 28px;
    width: 16px;
    background-position: -340px -30px;
}

.i-info {
    height: 15px;
    width: 15px;
    background-position: -260px -80px;
}

.i-chart-line {
    height: 15px;
    width: 15px;
    background-position: -260px -100px;
}

.icon-download {
    width: 60px;
    height: 38px;
    background-position: -90px -80px;
}

.icon-appsettings {
    width: 40px;
    height: 28px;
    background-position: -40px -80px;
}

.icon-showmore,
.i-showmore {
    width: 9px;
    height: 6px;
    background-position: -230px -80px;
}

.i-datepicker {
    width: 16px;
    height: 16px;
    background: #202020 url("../images/dark_sprites.png?v=1.12") no-repeat -100px -120px;
}

/* ##Icons: Field Selection Add & Remove

```
<p>Add: <i class="icon i-add"></i></p>
<p>Remove: <i class="icon i-remove"></i></p>
```

*/
.i-add {
    width: 16px;
    height: 16px;
    background-position: -310px -80px;
}

.i-remove {
    width: 16px;
    height: 16px;
    background-position: -330px -80px;
}

.i-add-partial {
    width: 16px;
    height: 16px;
    background-position: -310px -100px;
}

.i-tree-closed {
    width: 12px;
    height: 12px;
    background-position: -180px -120px;
}

.i-tree-open {
    width: 12px;
    height: 12px;
    background-position: -200px -120px;
}

.i-grid-open {
    width: 10px;
    height: 10px;
    background-position: -220px -120px;
}

.i-grid-closed {
    width: 10px;
    height: 10px;
    background-position: -240px -120px;
}

.i-selectedTick {
    display: inline-block;
    text-indent: -999px;
    overflow: hidden;
    background-image: url("../images/dark_sprites.png?v=1.12");
    background-repeat: no-repeat;
    width: 10px;
    height: 10px;
    background-position: -230px -100px;
}

/* ##CSS-Only Close (x) ##

```
<p>Light: <i class="icon icon-x light"></i></p>
<p>Dark: <i class="icon icon-x dark"></i></p>

```
*/
.icon-x.light {
    width: 13px;
    height: 13px;
    background-position: -260px -50px;
}

/* ##CSS-Only Icons Arrows##

```
<p>Arrow Right: <i class="icon icon-arrow-right"></i></p>
```

*/
.icon-arrow-right,
.i-arrow-right {
    width: 0;
    height: 0;
    background: transparent;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    border-left: 5px solid;
}

/* ##Background Images##

```
<p>Speech Bubble: <i class="icon speech-bubble"></i></p>
```

*/
.speech-bubble {
    background-position: -360px 0;
    width: 140px;
    height: 100px;
    padding: 28px 0;
    font-size: 34px;
    text-align: center;
}

.i-settings-menu {
    width: 27px;
    height: 16px;
    background-position: -127px -121px;
}

.i-arrow-down-grey {
    width: 10px;
    height: 11px;
    background-position: -164px -117px;
}

/* 
#Countries (Flags)#
*/
/*
##Large Flags##
Shown on current Country Landing pages

```
<style>
.countryflaglrgliststyling li {list-style:none; padding:5px 0; color:#777; font-size:12px; line-height:18px; float: left; width:110px; margin-bottom:10px;}
.countryflaglrgliststyling li i {vertical-align:middle; padding-right:5px; display: block; margin-bottom: 5px;}
</style>
<ul class="countryflaglrgliststyling">
    <!--Row 1-->
    <li class="lrg"><i class="flag ZWE"></i> Zimbabwe</li>
    <li class="lrg"><i class="flag DZA"></i> Algeria</li>
    <li class="lrg"><i class="flag AGO"></i> Angola</li>
    <li class="lrg"><i class="flag BEN"></i> Benin</li>
    <li class="lrg"><i class="flag BWA"></i> Botswana</li>
    <li class="lrg"><i class="flag CMR"></i> Cameroon</li>
    <li class="lrg"><i class="flag COD"></i> DRC</li>
    <li class="lrg"><i class="flag EGY"></i> Egypt</li>

    <!--Row 2-->
    <li class="lrg"><i class="flag ETH"></i> Ethiopia</li>
    <li class="lrg"><i class="flag GAB"></i> Gabon</li>
    <li class="lrg"><i class="flag GHA"></i> Ghana</li>
    <li class="lrg"><i class="flag KEN"></i> Kenya</li>
    <li class="lrg"><i class="flag LSO"></i> Lesotho</li>
    <li class="lrg"><i class="flag LBY"></i> Libya</li>
    <li class="lrg"><i class="flag MWI"></i> Malawi</li>
    <li class="lrg"><i class="flag MUS"></i> Mauritius</li>
    
    <!--Row 3-->
    <li class="lrg"><i class="flag MAR"></i> Morocco</li>
    <li class="lrg"><i class="flag MOZ"></i> Mozambique</li>
    <li class="lrg"><i class="flag NAM"></i> Namibia</li>
    <li class="lrg"><i class="flag NGA"></i> Nigeria</li>
    <li class="lrg"><i class="flag RWA"></i> Rwanda</li>
    <li class="lrg"><i class="flag SEN"></i> Senegal</li>
    <li class="lrg"><i class="flag ZAF"></i> South Africa</li>
    <li class="lrg"><i class="flag SSD"></i> South Sudan</li>

    <!--Row 4-->
    <li class="lrg"><i class="flag SDN"></i> Sudan</li>
    <li class="lrg"><i class="flag SWZ"></i> Swaziland</li>
    <li class="lrg"><i class="flag TZA"></i> Tanzania</li>
    <li class="lrg"><i class="flag TUN"></i> Tunisia</li>
    <li class="lrg"><i class="flag UGA"></i> Uganda</li>
    <li class="lrg"><i class="flag ZMB"></i> Zambia</li>
</ul>

```

*/
.flag {
    display: inline-block;
    text-indent: -999px;
    overflow: hidden;
    background-image: url("../images/flags_sprite.png?v=1");
    background-repeat: no-repeat;
}

.lrg .flag {
    width: 52px;
    height: 52px;
}

    .lrg .flag.ZWE {
        background-position: 0 0;
    }

    .lrg .flag.DZA {
        background-position: -52px 0;
    }

    .lrg .flag.AGO {
        background-position: -104px 0;
    }

    .lrg .flag.BEN {
        background-position: -156px 0;
    }

    .lrg .flag.BWA {
        background-position: -208px 0;
    }

    .lrg .flag.CMR {
        background-position: -260px 0;
    }

    .lrg .flag.COD {
        background-position: -312px 0;
    }

    .lrg .flag.EGY {
        background-position: -364px 0;
    }

    .lrg .flag.ETH {
        background-position: 0 -52px;
    }

    .lrg .flag.GAB {
        background-position: -52px -52px;
    }

    .lrg .flag.GHA {
        background-position: -104px -52px;
    }

    .lrg .flag.KEN {
        background-position: -156px -52px;
    }

    .lrg .flag.LSO {
        background-position: -208px -52px;
    }

    .lrg .flag.LBY {
        background-position: -260px -52px;
    }

    .lrg .flag.MWI {
        background-position: 0 0;
    }

    .lrg .flag.MUS {
        background-position: -364px 0;
    }

    .lrg .flag.MAR {
        background-position: 0 -104px;
    }

    .lrg .flag.MOZ {
        background-position: -52px -104px;
    }

    .lrg .flag.NAM {
        background-position: -104px -104px;
    }

    .lrg .flag.NGA {
        background-position: -156px -104px;
    }

    .lrg .flag.RWA {
        background-position: -208px -104px;
    }

    .lrg .flag.SEN {
        background-position: -260px -104px;
    }

    .lrg .flag.ZAF {
        background-position: -312px -104px;
    }

    .lrg .flag.SSD {
        background-position: -364px -104px;
    }

    .lrg .flag.SDN {
        background-position: 0 -156px;
    }

    .lrg .flag.SWZ {
        background-position: -52px -156px;
    }

    .lrg .flag.TZA {
        background-position: -104px -156px;
    }

    .lrg .flag.TUN {
        background-position: -156px -156px;
    }

    .lrg .flag.UGA {
        background-position: -208px -156px;
    }

    .lrg .flag.ZMB {
        background-position: -260px -156px;
    }

/*
##Small Round Flags##
Shows up in search results

```
<style>
.countryflagsmlliststyling {margin-left: 0;padding-left: 20px;}
.countryflagsmlliststyling li {list-style:none; padding:3px 0; color:#777; font-size:12px; line-height:16px;float: left; width:33%; margin-bottom:10px;}
.countryflagsmlliststyling li i {vertical-align:middle;padding-right:5px; display: block; margin-bottom: 5px;}

</style>
<ul class="countryflagsmlliststyling">
    <!--Row 1-->
    <li><i class="flag sml flag-round DZA"></i> Algeria</li>
    <li><i class="flag sml flag-round AGO"></i> Angola</li>
    <li><i class="flag sml flag-round ARG"></i> Argentina</li>
    <li><i class="flag sml flag-round AUS"></i> Australia</li>
    <li><i class="flag sml flag-round AUT"></i> Austria</li>
    <li><i class="flag sml flag-round BHR"></i> Bahrain</li>
    <li><i class="flag sml flag-round BEL"></i> Belgium</li>
    <li><i class="flag sml flag-round BEN"></i> Benin</li>
    <li><i class="flag sml flag-round BMU"></i> Bermuda</li>
    <li><i class="flag sml flag-round BWA"></i> Botswana</li>
    <li><i class="flag sml flag-round BRA"></i> Brazil</li>
    <li><i class="flag sml flag-round BFA"></i> Burkina Faso</li>

    <!--Row 2-->
    <li><i class="flag sml flag-round BDI"></i> Burundi</li>
    <li><i class="flag sml flag-round CMR"></i> Cameroon</li>
    <li><i class="flag sml flag-round CAN"></i> Canada</li>
    <li><i class="flag sml flag-round CPV"></i> Cape Verde</li>
    <li><i class="flag sml flag-round CYM"></i> Cayman Islands</li>
    <li><i class="flag sml flag-round CAF"></i> Central African Republic</li>
    <li><i class="flag sml flag-round TCD"></i> Chad</li>
    <li><i class="flag sml flag-round CHL"></i> Chile</li>
    <li><i class="flag sml flag-round CHN"></i> China</li>
    <li><i class="flag sml flag-round COL"></i> Colombia</li>
    <li><i class="flag sml flag-round COG"></i> Congo</li>
    <li><i class="flag sml flag-round COD"></i> Congo, The Democratic Republic Of The</li>

    <!--Row 3-->
    <li><i class="flag sml flag-round CIV"></i> Côte D'Ivoire</li>
    <li><i class="flag sml flag-round DNK"></i> Denmark</li>
    <li><i class="flag sml flag-round EGY"></i> Egypt</li>
    <li><i class="flag sml flag-round GNQ"></i> Equatorial Guinea</li>
    <li><i class="flag sml flag-round ERI"></i> Eritrea</li>
    <li><i class="flag sml flag-round ETH"></i> Ethiopia</li>
    <li><i class="flag sml flag-round FIN"></i> Finland</li>
    <li><i class="flag sml flag-round FRA"></i> France</li>
    <li><i class="flag sml flag-round GAB"></i> Gabon</li>
    <li><i class="flag sml flag-round GMB"></i> Gambia</li>
    <li><i class="flag sml flag-round DEU"></i> Germany</li>
    <li><i class="flag sml flag-round GHA"></i> Ghana</li>

    <!--Row 4-->
    <li><i class="flag sml flag-round GRC"></i> Greece</li>
    <li><i class="flag sml flag-round GGY"></i> Guernsey</li>
    <li><i class="flag sml flag-round GIN"></i> Guinea</li>
    <li><i class="flag sml flag-round GNB"></i> Guinea-Bissau</li>
    <li><i class="flag sml flag-round HKG"></i> Hong Kong</li>
    <li><i class="flag sml flag-round IND"></i> India</li>
    <li><i class="flag sml flag-round IDN"></i> Indonesia</li>
    <li><i class="flag sml flag-round IRN"></i> Iran, Islamic Republic Of</li>
    <li><i class="flag sml flag-round IRL"></i> Ireland</li>
    <li><i class="flag sml flag-round IMN"></i> Isle Of Man</li>
    <li><i class="flag sml flag-round ITA"></i> Italy</li>
    <li><i class="flag sml flag-round JPN"></i> Japan</li>

    <!--Row 5-->
    <li><i class="flag sml flag-round JEY"></i> Jersey</li>
    <li><i class="flag sml flag-round KEN"></i> Kenya</li>
    <li><i class="flag sml flag-round KOR"></i> Korea, Republic Of</li>
    <li><i class="flag sml flag-round LSO"></i> Lesotho</li>
    <li><i class="flag sml flag-round LBR"></i> Liberia</li>
    <li><i class="flag sml flag-round LBY"></i> Libyan Arab Jamahiriya</li>
    <li><i class="flag sml flag-round LUX"></i> Luxembourg</li>
    <li><i class="flag sml flag-round MDG"></i> Madagascar</li>
    <li><i class="flag sml flag-round MWI"></i> Malawi</li>
    <li><i class="flag sml flag-round MYS"></i> Malaysia</li>
    <li><i class="flag sml flag-round MDV"></i> Maldives</li>
    <li><i class="flag sml flag-round MLI"></i> Mali</li>

    <!--Row 6-->
    <li><i class="flag sml flag-round MRT"></i> Mauritania</li>
    <li><i class="flag sml flag-round MUS"></i> Mauritius</li>
    <li><i class="flag sml flag-round MEX"></i> Mexico</li>
    <li><i class="flag sml flag-round MAR"></i> Morocco</li>
    <li><i class="flag sml flag-round MOZ"></i> Mozambique</li>
    <li><i class="flag sml flag-round NAM"></i> Namibia</li>
    <li><i class="flag sml flag-round NLD"></i> Netherlands</li>
    <li><i class="flag sml flag-round NZL"></i> New Zealand</li>
    <li><i class="flag sml flag-round NER"></i> Niger</li>
    <li><i class="flag sml flag-round NGA"></i> Nigeria</li>
    <li><i class="flag sml flag-round NOR"></i> Norway</li>
    <li><i class="flag sml flag-round PNG"></i> Papua New Guinea</li>

    <!--Row 7-->
    <li><i class="flag sml flag-round PRY"></i> Paraguay</li>
    <li><i class="flag sml flag-round PER"></i> Peru</li>
    <li><i class="flag sml flag-round POL"></i> Poland</li>
    <li><i class="flag sml flag-round PRT"></i> Portugal</li>
    <li><i class="flag sml flag-round QAT"></i> Qatar</li>
    <li><i class="flag sml flag-round REU"></i> Réunion</li>
    <li><i class="flag sml flag-round RUS"></i> Russian Federation</li>
    <li><i class="flag sml flag-round RWA"></i> Rwanda</li>
    <li><i class="flag sml flag-round STP"></i> Sao Tome And Principe</li>
    <li><i class="flag sml flag-round SAU"></i> Saudi Arabia</li>
    <li><i class="flag sml flag-round SEN"></i> Senegal</li>
    <li><i class="flag sml flag-round SYC"></i> Seychelles</li>

    <!--Row 8-->
    <li><i class="flag sml flag-round SLE"></i> Sierra Leone</li>
    <li><i class="flag sml flag-round SGP"></i> Singapore</li>
    <li><i class="flag sml flag-round ZAF"></i> South Africa</li>
    <li><i class="flag sml flag-round SSD"></i> South Sudan</li>
    <li><i class="flag sml flag-round ESP"></i> Spain</li>
    <li><i class="flag sml flag-round SDN"></i> Sudan</li>
    <li><i class="flag sml flag-round SWZ"></i> Swaziland</li>
    <li><i class="flag sml flag-round SWE"></i> Sweden</li>
    <li><i class="flag sml flag-round CHE"></i> Switzerland</li>
    <li><i class="flag sml flag-round TWN"></i> Taiwan, Province Of China</li>
    <li><i class="flag sml flag-round TZA"></i> Tanzania, United Republic Of</li>
    <li><i class="flag sml flag-round THA"></i> Thailand</li>

    <!--Row 9-->
    <li><i class="flag sml flag-round TGO"></i> Togo</li>
    <li><i class="flag sml flag-round TUN"></i> Tunisia</li>
    <li><i class="flag sml flag-round TUR"></i> Turkey</li>
    <li><i class="flag sml flag-round UGA"></i> Uganda</li>
    <li><i class="flag sml flag-round ARE"></i> United Arab Emirates</li>
    <li><i class="flag sml flag-round GBR"></i> United Kingdom</li>
    <li><i class="flag sml flag-round USA"></i> United States</li>
    <li><i class="flag sml flag-round URY"></i> Uruguay</li>
    <li><i class="flag sml flag-round VEN"></i> Venezuela, Bolivarian Republic Of</li>
    <li><i class="flag sml flag-round VGB"></i> Virgin Islands, British</li>
    <li><i class="flag sml flag-round ZMB"></i> Zambia</li>
    <li><i class="flag sml flag-round ZWE"></i> Zimbabwe</li>
</ul>
```
*/
.flag.sml.flag-round {
    display: inline-block;
    text-indent: -999px;
    overflow: hidden;
    background-image: url("../images/flags_sml_sprite.png?v=1");
    background-repeat: no-repeat;
    width: 23px;
    height: 22px;
    background-position: 1000px 1000px;
}

    .flag.sml.flag-round.DZA {
        background-position: 0 0;
    }

    .flag.sml.flag-round.AGO {
        background-position: -30px 0;
    }

    .flag.sml.flag-round.ARG {
        background-position: -60px 0;
    }

    .flag.sml.flag-round.AUS {
        background-position: -90px 0;
    }

    .flag.sml.flag-round.AUT {
        background-position: -120px 0;
    }

    .flag.sml.flag-round.BHR {
        background-position: -150px 0;
    }

    .flag.sml.flag-round.BEL {
        background-position: -180px 0;
    }

    .flag.sml.flag-round.BEN {
        background-position: -210px 0;
    }

    .flag.sml.flag-round.BMU {
        background-position: -240px 0;
    }

    .flag.sml.flag-round.BWA {
        background-position: -270px 0;
    }

    .flag.sml.flag-round.BRA {
        background-position: -300px 0;
    }

    .flag.sml.flag-round.BFA {
        background-position: -330px 0;
    }

    .flag.sml.flag-round.BDI {
        background-position: 0 -30px;
    }

    .flag.sml.flag-round.CMR {
        background-position: -30px -30px;
    }

    .flag.sml.flag-round.CAN {
        background-position: -60px -30px;
    }

    .flag.sml.flag-round.CPV {
        background-position: -90px -30px;
    }

    .flag.sml.flag-round.CYM {
        background-position: -120px -30px;
    }

    .flag.sml.flag-round.CAF {
        background-position: -150px -30px;
    }

    .flag.sml.flag-round.TCD {
        background-position: -180px -30px;
    }

    .flag.sml.flag-round.CHL {
        background-position: -210px -30px;
    }

    .flag.sml.flag-round.CHN {
        background-position: -240px -30px;
    }

    .flag.sml.flag-round.COL {
        background-position: -270px -30px;
    }

    .flag.sml.flag-round.COG {
        background-position: -300px -30px;
    }

    .flag.sml.flag-round.COD {
        background-position: -330px -30px;
    }

    .flag.sml.flag-round.CIV {
        background-position: 0 -60px;
    }

    .flag.sml.flag-round.DNK {
        background-position: -30px -60px;
    }

    .flag.sml.flag-round.EGY {
        background-position: -60px -60px;
    }

    .flag.sml.flag-round.GNQ {
        background-position: -90px -60px;
    }

    .flag.sml.flag-round.ERI {
        background-position: -120px -60px;
    }

    .flag.sml.flag-round.ETH {
        background-position: -150px -60px;
    }

    .flag.sml.flag-round.FIN {
        background-position: -180px -60px;
    }

    .flag.sml.flag-round.FRA {
        background-position: -210px -60px;
    }

    .flag.sml.flag-round.GAB {
        background-position: -240px -60px;
    }

    .flag.sml.flag-round.GMB {
        background-position: -270px -60px;
    }

    .flag.sml.flag-round.DEU {
        background-position: -300px -60px;
    }

    .flag.sml.flag-round.GHA {
        background-position: -330px -60px;
    }

    .flag.sml.flag-round.GRC {
        background-position: 0 -90px;
    }

    .flag.sml.flag-round.GGY {
        background-position: -30px -90px;
    }

    .flag.sml.flag-round.GIN {
        background-position: -60px -90px;
    }

    .flag.sml.flag-round.GNB {
        background-position: -90px -90px;
    }

    .flag.sml.flag-round.HKG {
        background-position: -120px -90px;
    }

    .flag.sml.flag-round.IND {
        background-position: -150px -90px;
    }

    .flag.sml.flag-round.IDN {
        background-position: -180px -90px;
    }

    .flag.sml.flag-round.IRN {
        background-position: -210px -90px;
    }

    .flag.sml.flag-round.IRL {
        background-position: -240px -90px;
    }

    .flag.sml.flag-round.IMN {
        background-position: -270px -90px;
    }

    .flag.sml.flag-round.ITA {
        background-position: -300px -90px;
    }

    .flag.sml.flag-round.JPN {
        background-position: -330px -90px;
    }

    .flag.sml.flag-round.JEY {
        background-position: 0 -120px;
    }

    .flag.sml.flag-round.KEN {
        background-position: -30px -120px;
    }

    .flag.sml.flag-round.KOR {
        background-position: -60px -120px;
    }

    .flag.sml.flag-round.LSO {
        background-position: -90px -120px;
    }

    .flag.sml.flag-round.LBR {
        background-position: -120px -120px;
    }

    .flag.sml.flag-round.LBY {
        background-position: -150px -120px;
    }

    .flag.sml.flag-round.LUX {
        background-position: -180px -120px;
    }

    .flag.sml.flag-round.MDG {
        background-position: -210px -120px;
    }

    .flag.sml.flag-round.MWI {
        background-position: -240px -120px;
    }

    .flag.sml.flag-round.MYS {
        background-position: -270px -120px;
    }

    .flag.sml.flag-round.MDV {
        background-position: -300px -120px;
    }

    .flag.sml.flag-round.MLI {
        background-position: -330px -120px;
    }

    .flag.sml.flag-round.MRT {
        background-position: 0 -150px;
    }

    .flag.sml.flag-round.MUS {
        background-position: -30px -150px;
    }

    .flag.sml.flag-round.MEX {
        background-position: -60px -150px;
    }

    .flag.sml.flag-round.MAR {
        background-position: -90px -150px;
    }

    .flag.sml.flag-round.MOZ {
        background-position: -120px -150px;
    }

    .flag.sml.flag-round.NAM {
        background-position: -150px -150px;
    }

    .flag.sml.flag-round.NLD {
        background-position: -180px -150px;
    }

    .flag.sml.flag-round.NZL {
        background-position: -210px -150px;
    }

    .flag.sml.flag-round.NER {
        background-position: -240px -150px;
    }

    .flag.sml.flag-round.NGA {
        background-position: -270px -150px;
    }

    .flag.sml.flag-round.NOR {
        background-position: -300px -150px;
    }

    .flag.sml.flag-round.PNG {
        background-position: -330px -150px;
    }

    .flag.sml.flag-round.PRY {
        background-position: 0 -180px;
    }

    .flag.sml.flag-round.PER {
        background-position: -30px -180px;
    }

    .flag.sml.flag-round.POL {
        background-position: -60px -180px;
    }

    .flag.sml.flag-round.PRT {
        background-position: -90px -180px;
    }

    .flag.sml.flag-round.QAT {
        background-position: -120px -180px;
    }

    .flag.sml.flag-round.REU {
        background-position: -150px -180px;
    }

    .flag.sml.flag-round.RUS {
        background-position: -180px -180px;
    }

    .flag.sml.flag-round.RWA {
        background-position: -210px -180px;
    }

    .flag.sml.flag-round.STP {
        background-position: -240px -180px;
    }

    .flag.sml.flag-round.SAU {
        background-position: -270px -180px;
    }

    .flag.sml.flag-round.SEN {
        background-position: -300px -180px;
    }

    .flag.sml.flag-round.SYC {
        background-position: -330px -180px;
    }

    .flag.sml.flag-round.SLE {
        background-position: 0 -210px;
    }

    .flag.sml.flag-round.SGP {
        background-position: -30px -210px;
    }

    .flag.sml.flag-round.ZAF {
        background-position: -60px -210px;
    }

    .flag.sml.flag-round.SSD {
        background-position: -90px -210px;
    }

    .flag.sml.flag-round.ESP {
        background-position: -120px -210px;
    }

    .flag.sml.flag-round.SDN {
        background-position: -150px -210px;
    }

    .flag.sml.flag-round.SWZ {
        background-position: -180px -210px;
    }

    .flag.sml.flag-round.SWE {
        background-position: -210px -210px;
    }

    .flag.sml.flag-round.CHE {
        background-position: -240px -210px;
    }

    .flag.sml.flag-round.TWN {
        background-position: -270px -210px;
    }

    .flag.sml.flag-round.TZA {
        background-position: -300px -210px;
    }

    .flag.sml.flag-round.THA {
        background-position: -330px -210px;
    }

    .flag.sml.flag-round.TGO {
        background-position: 0 -240px;
    }

    .flag.sml.flag-round.TUN {
        background-position: -30px -240px;
    }

    .flag.sml.flag-round.TUR {
        background-position: -60px -240px;
    }

    .flag.sml.flag-round.UGA {
        background-position: -90px -240px;
    }

    .flag.sml.flag-round.ARE {
        background-position: -120px -240px;
    }

    .flag.sml.flag-round.GBR {
        background-position: -150px -240px;
    }

    .flag.sml.flag-round.USA {
        background-position: -180px -240px;
    }

    .flag.sml.flag-round.URY {
        background-position: -210px -240px;
    }

    .flag.sml.flag-round.VEN {
        background-position: -240px -240px;
    }

    .flag.sml.flag-round.VGB {
        background-position: -270px -240px;
    }

    .flag.sml.flag-round.ZMB {
        background-position: -300px -240px;
    }

    .flag.sml.flag-round.ZWE {
        background-position: -330px -240px;
    }

/*
##Mini Maps##
On Country Landing Summary

```
<style>
.countryminimapliststyling {margin-left: 0;padding-left: 20px;}
.countryminimapliststyling li {list-style:none; padding:3px 0; color:#777; font-size:12px; line-height:16px; overflow:hidden; float:left; width:20%; margin-bottom:10px;}
.countryminimapliststyling li i {vertical-align:middle; display:block; margin-bottom: 5px;}




</style>
<ul class="countryminimapliststyling">
    <!--Row 1-->
    <li><i class="minimap DZA"></i> Algeria</li>
    <li><i class="minimap SSD"></i> South Sudan</li>
    <li><i class="minimap COD"></i> DRC</li>
    <li><i class="minimap CMR"></i> Cameroon</li>
    <li><i class="minimap GAB"></i> Gabon</li>
    <li><i class="minimap ETH"></i> Ethiopia</li>

    <!--Row 2-->
    <li><i class="minimap LBY"></i> Libya</li>
    <li><i class="minimap NGA"></i> Nigeria </li>
    <li><i class="minimap SDN"></i> Sudan </li>
    <li><i class="minimap RWA"></i> Rwanda </li>
    <li><i class="minimap MOZ"></i> Mozambique </li>
    <li><i class="minimap ZMB"></i> Zambia </li>

    <!--Row 3-->
    <li><i class="minimap EGY"></i> Egypt</li>
    <li><i class="minimap UGA"></i> Uganda</li>
    <li><i class="minimap MAR"></i> Morocco</li>
    <li><i class="minimap ZAF"></i> South Africa </li>
    <li><i class="minimap KEN"></i> Kenya</li>
    <li><i class="minimap GHA"></i> Ghana</li>

    <!--Row 4-->
    <li><i class="minimap MWI"></i> Malawi</li>
    <li><i class="minimap TZA"></i> Tanzania</li>
    <li><i class="minimap SEN"></i> Senegal</li>
    <li><i class="minimap BEN"></i> Benin</li>
    <li><i class="minimap AGO"></i> Angola</li>
    <li><i class="minimap TUN"></i> Tunisia</li>

    <!--Row 5-->
    <li><i class="minimap ZWE"></i> Zimbabwe</li>
    <li><i class="minimap NAM"></i> Namibia</li>
    <li><i class="minimap BWA"></i> Botswana</li>
    <li><i class="minimap LSO"></i> Lesotho</li>
    <li><i class="minimap SWZ"></i> Swaziland</li>
    <li><i class="minimap MUS"></i> Mauritius</li>
</ul>
```    
*/
.minimap {
    display: inline-block;
    text-indent: -999px;
    overflow: hidden;
    background-image: url("../images/minimap_sprites.png?v=1");
    background-repeat: no-repeat;
    float: left;
    width: 150px;
    height: 126px;
    -webkit-border-radius: 20px 20px;
    -moz-border-radius: 20px / 20px;
    border-radius: 20px / 20px;
    border: 1px solid #555;
    margin-right: 15px;
}

    .minimap.DZA {
        background-position: 0 0;
    }

    .minimap.SSD {
        background-position: -151px 0;
    }

    .minimap.COD {
        background-position: -302px 0;
    }

    .minimap.CMR {
        background-position: -453px 0;
    }

    .minimap.GAB {
        background-position: -604px 0;
    }

    .minimap.ETH {
        background-position: -755px 0;
    }

    .minimap.LBY {
        background-position: 0 -127px;
    }

    .minimap.NGA {
        background-position: -151px -127px;
    }

    .minimap.SDN {
        background-position: -302px -127px;
    }

    .minimap.RWA {
        background-position: -453px -127px;
    }

    .minimap.MOZ {
        background-position: -604px -127px;
    }

    .minimap.ZMB {
        background-position: -755px -127px;
    }

    .minimap.EGY {
        background-position: 0 -254px;
    }

    .minimap.UGA {
        background-position: -151px -254px;
    }

    .minimap.MAR {
        background-position: -302px -254px;
    }

    .minimap.ZAF {
        background-position: -453px -254px;
    }

    .minimap.KEN {
        background-position: -604px -254px;
    }

    .minimap.GHA {
        background-position: -755px -254px;
    }

    .minimap.MWI {
        background-position: 0 -381px;
    }

    .minimap.TZA {
        background-position: -151px -381px;
    }

    .minimap.SEN {
        background-position: -302px -381px;
    }

    .minimap.BEN {
        background-position: -453px -381px;
    }

    .minimap.AGO {
        background-position: -604px -381px;
    }

    .minimap.TUN {
        background-position: -755px -381px;
    }

    .minimap.ZWE {
        background-position: 0 -508px;
    }

    .minimap.NAM {
        background-position: -151px -508px;
    }

    .minimap.BWA {
        background-position: -302px -508px;
    }

    .minimap.LSO {
        background-position: -453px -508px;
    }

    .minimap.SWZ {
        background-position: -604px -508px;
    }

    .minimap.MUS {
        background-position: -755px -508px;
    }

/* 
#Indicators# 

##Small Indicators
```
<p class="sml mover_positive">Positive: <i class="indicator"></i></p>
<p class="sml mover_negative">Negative: <i class="indicator"></i></p>
<p class="sml mover_none">None: <i class="indicator"></i></p>

```

##Large Indicators
```
<p class="lrg mover_positive">Positive: <i class="indicator"></i></p>
<p class="lrg mover_negative">Negative: <i class="indicator"></i></p>
<p class="lrg mover_none">None: <i class="indicator"></i></p>

```
*/
.indicator {
    display: inline-block;
    text-indent: -999px;
    overflow: hidden;
    background-image: url("../images/dark_sprites.png?v=1.12");
    background-repeat: no-repeat;
    background-position: -9999999px -9999999px;
}

.sml .indicator {
    width: 18px;
    height: 25px;
}

.lrg .indicator {
    width: 29px;
    height: 43px;
}

.sml.mover_positive .indicator, .sml .mover_positive .indicator {
    background-position: -60px 0;
}

.lrg.mover_positive .indicator, .lrg .mover_positive .indicator {
    background-position: 0 -30px;
}

.sml.mover_negative .indicator, .sml .mover_negative .indicator {
    background-position: -80px 0;
}

.lrg.mover_negative .indicator, .lrg .mover_negative .indicator {
    background-position: -30px -30px;
}

.sml.mover_none .indicator, .sml .mover_none .indicator {
    background-position: -100px 0;
}

.lrg.mover_none .indicator, .lrg .mover_none .indicator {
    background-position: -60px -30px;
}

/* 

#Buttons

##Default button

```
<a class="btn btn-default">I'm a default button</a>
```

##Action button
```
<a class="btn btn-action">I'm a call to action</a>
```

##Large Action button

```
<a class="btn btn-action btn-lrg">I'm a big action button</a>  
```

##33% width of container
```
   <a class="btn btn-action w33">I take up 1/3 of my avail space</a> 
```

##Back button##
```
<a class="btn btn-back">Back</a>
```

##Previous & Next buttons##
```
<a class="btn btn-prev">Prev</a> <a class="btn btn-next">Next</a>
```

*/
.btn-action-secondary {
    background: #c5272d;
    background: -moz-linear-gradient(top, #c5272d 0%, #aa1b20 48%, #961418 50%, #961418 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c5272d), color-stop(48%, #aa1b20), color-stop(50%, #961418), color-stop(100%, #961418));
    background: -webkit-linear-gradient(top, #c5272d 0%, #aa1b20 48%, #961418 50%, #961418 100%);
    background: -o-linear-gradient(top, #c5272d 0%, #aa1b20 48%, #961418 50%, #961418 100%);
    background: -ms-linear-gradient(top, #c5272d 0%, #aa1b20 48%, #961418 50%, #961418 100%);
    background: linear-gradient(to bottom, #c5272d 0%, #aa1b20 48%, #961418 50%, #961418 100%);
    text-shadow: 0 0px 0 rgba(112, 14, 17, 0.75);
    border: 1px solid #961418;
    font-weight: normal;
    font-size: 12px;
    padding: 6px 28px;
    letter-spacing: 0;
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.btn-action-login {
    width: 95%;
    padding: 10px 20px 10px 20px;
    font-size: 13px;
    margin: 10px 0 0 0;
    text-shadow: 0 1px 0 black;
    letter-spacing: 0;
    background: var(--secondary-btn-color)
}

.btn-action-secondary:hover {
    background: var(--primary-btn-color);
}

.btn-action-secondary:active, .btn-action-secondary.active {
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-action-secondary:visited {
    color: var(--primary-font-color);
}

.btn-back, .btn-back:link {
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    background: url("../images/dark_sprites.png?v=1.12") no-repeat -120px 0;
    width: 54px;
    text-align: center;
    line-height: 19px;
    padding: 5px 5px 5px 13px;
}

.btn.w33 {
    width: 33%;
}

.btn.btn-lrg {
    font-size: 16px;
    line-height: 23px;
    padding: .6em 25px;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
}

.btn.btn-right {
    float: right;
    margin-left: 100px;
}

.btn.rnd-left {
    -webkit-border-radius: 5px 0 0 5px;
    -moz-border-radius: 5px 0 0 5px;
    -ms-border-radius: 5px 0 0 5px;
    -o-border-radius: 5px 0 0 5px;
    border-radius: 5px 0 0 5px;
}

.btn.rnd-right {
    -webkit-border-radius: 0 5px 5px 0;
    -moz-border-radius: 0 5px 5px 0;
    -ms-border-radius: 0 5px 5px 0;
    -o-border-radius: 0 5px 5px 0;
    border-radius: 0 5px 5px 0;
}

.btn input {
    background: transparent;
    border: none;
    padding: 0;
    display: block;
    width: auto;
    height: 17px;
    color: inherit;
    text-shadow: inherit;
}

.btn-default:hover {
    background: var(--secondary-btn-color);
    border: 1px solid var(--secondary-btn-color);
}

.btn-default:active, .btn-default.active {
    background: var(--secondary-btn-color);
    border: 1px solid var(--secondary-btn-color);
    -webkit-box-shadow: inset 0 -2px 4px rgba(124, 124, 124, 0.5);
    -moz-box-shadow: inset 0 -2px 4px rgba(124, 124, 124, 0.5);
    box-shadow: inset 0 -2px 4px rgba(124, 124, 124, 0.5);
}

.btn-action:hover {
    background: var(--tertiary-btn-color);
    text-shadow: 0 0px 0 #562f63;
    border: 1px solid #562f63;
    font-weight: normal;
    -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
    -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
}

.btn-action:active, .btn-action.active {
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

.btn-action:visited {
    color: var(--primary-font-color);
}

.btn-back:hover, .btn-back:active {
    background: url("../images/dark_sprites.png?v=1.12") -180px 0;
    border: none;
}

.btn.btn-prev {
    background: url("../images/dark_sprites.png?v=1.12") no-repeat -120px 0;
    border: none;
    width: 54px;
    text-align: center;
    line-height: 19px;
    padding: 5px 5px 5px 13px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

    .btn.btn-prev:hover, .btn.btn-prev:active {
        background: url("../images/dark_sprites.png?v=1.12") no-repeat -180px 0;
    }

.btn.btn-next {
    background: url("../images/dark_sprites.png?v=1.12") no-repeat -240px 0;
    border: none;
    width: 54px;
    text-align: center;
    line-height: 19px;
    padding: 5px 13px 5px 5px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

    .btn.btn-next:hover, .btn.btn-next:active {
        background: url("../images/dark_sprites.png?v=1.12") no-repeat -300px 0;
    }

.disabled .btn.btn-prev:hover, .disabled .btn.btn-prev:active {
    background: url("../images/dark_sprites.png?v=1.12") no-repeat -120px 0;
}

.disabled .btn.btn-next:hover, .disabled .btn.btn-next:active {
    background: url("../images/dark_sprites.png?v=1.12") no-repeat -240px 0;
}

.btn-default-sml {
    width: 16px;
    height: 16px;
    background: var(--secondary-bg-color);
    border: 1px solid var(--primary-bg-color);
    padding: 0 2px;
    top: 2px;
    position: relative;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
    -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

    .btn-default-sml i.icon {
        top: 0;
        margin-right: 0;
    }

/* 

#Button Groups

##Standard Button group
```
	<ul class="btn-group">
      <li>
        <a class="btn btn-default">Button</a>
      </li>
      <li class="current">
        <a class="btn btn-default">Active</a>
      </li>
      <li>
        <a class="btn btn-default">Button</a>
      </li>
    </ul>

```

##Separated group (Action style)
```
	<ul class="btn-group separate">
      <li>
        <a class="btn btn-action">Button</a>
      </li>
      <li>
        <a class="btn btn-action">Button</a>
      </li>
      <li>
        <a class="btn btn-action">Button</a>
      </li>
    </ul>

```
*/
.btn-group {
    list-style: none;
    padding: 0;
    margin: 0;
    *zoom: 1;
}

    .btn-group:after {
        content: "";
        display: table;
        clear: both;
    }

    .btn-group li {
        float: left;
        margin: 0;
    }

        .btn-group li:first-child .btn {
            -webkit-border-radius: 4px 0 0 4px;
            -moz-border-radius: 4px 0 0 4px;
            -ms-border-radius: 4px 0 0 4px;
            -o-border-radius: 4px 0 0 4px;
            border-radius: 4px 0 0 4px;
        }

        .btn-group li:first-child .btn-default {
            border-left: 1px solid var(--primary-bg-color);
        }

        .btn-group li:last-child .btn {
            -webkit-border-radius: 0 4px 4px 0;
            -moz-border-radius: 0 4px 4px 0;
            -ms-border-radius: 0 4px 4px 0;
            -o-border-radius: 0 4px 4px 0;
            border-radius: 0 4px 4px 0;
        }

        .btn-group li:last-child .btn-default {
            border-right: 1px solid var(--primary-bg-color);
        }

        .btn-group li:last-child .btn_reset {
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            -o-border-radius: 4px;
            border-radius: 4px;
        }

.flushRight .btn-group li:last-child .btn-default {
    border-right: 1px solid var(--primary-bg-color);
}

.btn-group li.current .btn-default {
    background: var(--tertiary-btn-color);
    border: 1px solid var(--tertiary-btn-color);
    color: var(--primary-font-color);
    -webkit-box-shadow: inset 0 2px 5px var(--tertiary-btn-color);
    -moz-box-shadow: inset 0 2px 5px var(--tertiary-btn-color);
    box-shadow: inset 0 2px 5px var(--tertiary-btn-color);
}

.btn-group .btn {
    border-left: none;
    display: block;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}

    .btn-group .btn:hover {
        border-left: none;
    }

.btn-group.flushRight {
    float: left;
}

    .btn-group.flushRight li:last-child .btn-default {
        border-right: 1px solid var(--primary-bg-color);
    }

.btn-group.separate li .btn, .btn-group.separate li:first-child .btn, .btn-group.separate li:last-child .btn {
    border-left-width: 1px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
}

.btn-group.separate li {
    float: left;
    margin: 0 5px;
}

.centered .c-pager {
    text-align: center;
}

    .centered .c-pager .btn-group {
        display: inline-block;
    }

.c-pager .btn-group .btn {
    padding-left: 7px;
    padding-right: 7px;
    min-width: 24px;
}

/* #Breadcrumb

```
<ul class="breadcrumb">
    <li class="primary">Industry: <span>Community</span> </li>
    <li class="sub">Sector: <span>Radio & Television</span></li>
</ul>

```
 */
.breadcrumb {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

    .breadcrumb li {
        float: left;
        list-style: none;
        font-size: 12px;
        line-height: 24px;
        height: 24px;
    }

    .breadcrumb .primary {
        background: var(--tertiary-bg-color);
        color: var(--primary-font-color);
        padding-left: 10px;
        -moz-border-radius-topleft: 5px;
        -webkit-border-top-left-radius: 5px;
        border-top-left-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        -webkit-border-bottom-left-radius: 5px;
        border-bottom-left-radius: 5px;
    }

    .breadcrumb .sub {
        background: #262626;
        position: relative;
        padding-right: 10px;
        padding-left: 20px;
        -moz-border-radius-topright: 5px;
        -webkit-border-top-right-radius: 5px;
        border-top-right-radius: 5px;
        -moz-border-radius-bottomright: 5px;
        -webkit-border-bottom-right-radius: 5px;
        border-bottom-right-radius: 5px;
    }

        .breadcrumb .sub:before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 13px;
            height: 24px;
            
        }

/* 
#Navbar 

```
<div class="header appheader">
    <div class="navbar">
        <ul>
            <li><a>Markets</a></li>
            <li>
                <a id="nav_watchlist" class="trigger">Watchlist</a>
            </li>
            <li><a >Insights</a></li>
            <li><a >AfricaInc</a></li>

        </ul>
    </div>
</div>    
```

*/
.navbar ul {
    list-style: none;
    padding: 0;
    margin: 0;
    top: 0;
    *zoom: 1;
}

    .navbar ul:after {
        content: "";
        display: table;
        clear: both;
    }

.navbar li {
    float: left;
    margin: 8px 2px 4px;
    cursor: pointer;
}

    .navbar li a {
        display: block;
        padding: 6px;
        text-decoration: none;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
    }

    .navbar li.active {
        cursor: default;
    }

/*

#Tabbars
## Main Tabbar
This is the main tab menu 

```
<ul class="tabbar split-8 tabs-countrylanding">
	<li class="current" style="width: 16.666666666666668%;">
		<a>Active</a>
	</li>
	<li class="" style="width: 16.666666666666668%;">
		<a>Clickable</a>
	</li>
	<li class="" style="width: 16.666666666666668%;">
		<a>Clickable</a>
	</li>
	<li class="" style="width: 16.666666666666668%;">
		<a>Clickable</a>
	</li>
	<li class="" style="width: 16.666666666666668%;">
		<a>Clickable</a>
	</li>
	<li class="" style="width: 16.666666666666668%;">
		<a>Clickable</a>
	</li>
</ul>
```		
*/
.tabbar li a:active, .tabbar li.current a, .tabbar li.current a:hover {
    background: var(--primary-bg-color);
    border-top: 1px solid var(--primary-bg-color);
    color: var(--primary-font-color);
    position: relative;
    -webkit-box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.8);
}

.no-cssgradients.no-svg .tabbar li a:active, .tabbar li .no-cssgradients.no-svg a:active, .no-cssgradients.no-svg .tabbar li.current a, .tabbar li.current .no-cssgradients.no-svg a {
    filter: none;
}

.tabbar {
    margin: 0;
    padding: 0 0 7px;
    background: transparent;
    border-bottom: 1px solid var(--primary-bg-color);
    overflow: hidden;
}

    .tabbar li {
        padding: 0;
        margin: 0;
        list-style: none;
        float: left;
        color: var(--primary-font-color);
        border-top: 1px solid var(--primary-bg-color);
        cursor: pointer;
    }
    
    .tabbar li a {
            padding: 10px 5px;
            display: block;
            font-size: 12px;
            letter-spacing: 0.1em;
            cursor: pointer;
            color: var(--primary-font-color);
            font-weight: bold;
            text-transform: uppercase;
            text-align: center;
            text-decoration: none;
            text-shadow: 1px 1px 1px black;
            border-left: 1px solid var(--primary-bg-color);
            border-top: 1px solid var(--primary-bg-color);
            border-bottom: 1px solid var(--primary-bg-color);
            background: #141F4D;
            background: linear-gradient(to bottom, var(--tertiary-bg-color) 0%, var(--primary-input-bg-color) 50%, var(--secondary-bg-color) 51%, var(--primary-bg-color) 100%);
        }

            .tabbar li a:hover {
                background: #141F4D;
                border-top: 1px solid #141F4D;
                color: var(--primary-font-color);
            }

.no-cssgradients.no-svg .tabbar li a:hover {
    filter: none;
}

.tabbar li:first-child a {
    border-left: none;
}

.tabbar li.current a:after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 50%;
    margin-left: -8px;
    width: 16px;
    height: 8px;
}

.tabbar.compact li a {
    font-size: 11px;
    letter-spacing: 0;
    padding: 10px 5px;
}

/*
## Sub Tabbar
This is the sub main tab menu 

```
<ul class="tabbar-sub">
	<li class="current">
		<a>Active</a>
	</li>
	<li class="">
		<a>Clickable</a>
	</li>
	<li class="">
		<a>Clickable</a>
	</li>
</ul>

```
*/
.tabbar-sub li a:active, .tabbar-sub li.current a {
    background: var(--primary-bg-color);
    color: var(--primary-font-color);
    position: relative;
    -webkit-box-shadow: inset 0 1px 0 var(--primary-bg-color);
    -moz-box-shadow: inset 0 1px 0 var(--primary-bg-color);
    box-shadow: inset 0 1px 0 var(--primary-bg-color);
    border: 1px solid var(--primary-bg-color);
    border-bottom: 4px solid var(--primary-bg-color);
    z-index: 1;
}

.tabbar-sub {
    *zoom: 1;
    margin: 0;
    padding: 8px 0 0 0;
    background: var(--secondary-bg-color);
    border-bottom: 1px solid var(--primary-bg-color);
    position: relative;
    width: 100%;
    z-index: 1;
    -webkit-box-shadow: inset 0 -1px 0 var(--primary-bg-color);
    -moz-box-shadow: inset 0 -1px 0 var(--primary-bg-color);
    box-shadow: inset 0 -1px 0 var(--primary-bg-color);
}

    .tabbar-sub:after {
        content: "";
        display: table;
        clear: both;
    }

    .tabbar-sub.with-lip {
        padding-bottom: 7px;
        border-bottom: none;
    }

        .tabbar-sub.with-lip:before {
            content: "";
            width: 100%;
            background: var(--primary-bg-color);
            height: 5px;
            border-top: 1px solid var(--primary-bg-color);
            position: absolute;
            bottom: 0;
            left: 0;
        }

    .tabbar-sub li {
        padding: 0;
        margin: 0 1px;
        list-style: none;
        float: left;
        text-align: center;
        position: relative;
        top: 2px;
        cursor: pointer;
    }

        .tabbar-sub li a {
            padding: 8px 18px;
            display: block;
            font-size: 12px;
            color: var(--primary-font-color);
            font-weight: bold;
            text-transform: uppercase;
            text-align: center;
            text-decoration: none;
            width: 100%;
            cursor: pointer;
            border-left: 1px solid transparent;
            border-right: 1px solid transparent;
        }

        .tabbar-sub li:first-child {
            margin-left: 10px;
        }

.in-page {
    border-top: 1px solid var(--primary-bg-color);
}

.tabbed .panel .header {
    height: 38px;
    border-top: 1px solid var(--tertiary-bg-color);
}

    .tabbed .panel .header h2 {
        padding: 6px 5px 6px 10px;
        font-size: 14px;
        line-height: 24px;
        top: 0;
        float: left;
    }

.tabbed .panel .dark {
    background: var(--primary-bg-color);
}

.tabbed .panel .content td {
    padding: 6px 10px;
    line-height: 16px;
}

.tabbed .w-table table thead th {
    padding: 5px 10px;
}

.tabbed .w-table table tbody tr > * {
    border-bottom: 1px solid var(--tertiary-bg-color);
}

.tabbed .widget .header {
    padding-top: 0;
}

    .tabbed .widget .header h4 {
        font-size: 12px;
        font-weight: normal;
        margin: 0 30px;
        padding: 5px 0;
    }

.tabbed .w-chart {
    border-top: 1px solid var(--secondary-bg-color);
    border-bottom: 1px solid var(--secondary-bg-color);
    padding-bottom: 30px;
}

    .tabbed .w-chart:first-child {
        border-right: 1px solid var(--secondary-bg-color);
    }

/* 
#Slide Select
```
<div class="nav">            
    <ul class="slideselect viewtype-risk split-5">
        
        <li id="risk-nav-low">
            <a>
                <i class="risk-indicator"></i>
                <span>Low</span>
                <i class="current-indicator"></i>
            </a>
        </li>
        <li id="risk-nav-lowmod">
            <a>
                <i class="risk-indicator"></i>
                <span>Low to Moderate</span>
                <i class="current-indicator"></i>
            </a>
        </li>
        <li id="risk-nav-mod" class="current">
            <a>
                <i class="risk-indicator"></i>
                <span>Moderate</span>
                <i class="current-indicator"></i>
            </a>
        </li>
        <li id="risk-nav-modhigh" >
            <a>
                <i class="risk-indicator"></i>
                <span>Moderate to High</span>
                <i class="current-indicator"></i>
            </a>
        </li>
        <li id="risk-nav-high">
            <a>
                <i class="risk-indicator"></i>
                <span>High</span>
                <i class="current-indicator"></i>
            </a>
        </li>
    </ul>
</div>
```	   
*/
.slideselect {
    padding: 0;
    margin: 5px 20px 20px;
    *zoom: 1;
}

    .slideselect:after {
        content: "";
        display: table;
        clear: both;
    }

    .slideselect li {
        float: left;
        list-style: none;
        cursor: pointer;
    }

        .slideselect li a {
            display: block;
            position: relative;
            padding-top: 15px;
            text-decoration: none;
            text-shadow: 0 1px 0 black;
            font-size: 16px;
            font-weight: bold;
        }

            .slideselect li a span {
                display: block;
                text-align: center;
            }

        .slideselect li:first-child a {
            padding-left: 5px;
        }

        .slideselect li:last-child a {
            padding-right: 5px;
        }

    .slideselect .current .current-indicator {
        width: 15px;
        height: 28px;
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -7px;
        background: url("../images/dark_sprites.png?v=1.12") -240px -30px no-repeat;
    }

    .slideselect .risk-indicator {
        width: 100%;
        height: 10px;
        display: block;
        margin: 0 0 15px;
        border-left: 1px solid #404040;
        -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
        -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
    }

    .slideselect.viewtype-risk.split-5 li:nth-child(1) a {
        color: #93b340;
    }

    .slideselect.viewtype-risk.split-5 li:nth-child(1) .risk-indicator {
        background: #93b340;
        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzkzYjM0MCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2JiYzkyZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
        background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #93b340), color-stop(100%, #bbc92f));
        background: -webkit-linear-gradient(left, #93b340, #bbc92f);
        background: -moz-linear-gradient(left, #93b340, #bbc92f);
        background: -o-linear-gradient(left, #93b340, #bbc92f);
        background: linear-gradient(left, #93b340, #bbc92f);
        -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
        -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
        -webkit-border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        -ms-border-radius: 5px 0 0 5px;
        -o-border-radius: 5px 0 0 5px;
        border-radius: 5px 0 0 5px;
    }

    .slideselect.viewtype-risk.split-5 li:nth-child(2) a {
        color: #dfd51f;
    }

    .slideselect.viewtype-risk.split-5 li:nth-child(2) .risk-indicator {
        background: #bbc92f;
        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYzkyZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VjZDUxOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
        background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #bbc92f), color-stop(100%, #ecd518));
        background: -webkit-linear-gradient(left, #bbc92f, #ecd518);
        background: -moz-linear-gradient(left, #bbc92f, #ecd518);
        background: -o-linear-gradient(left, #bbc92f, #ecd518);
        background: linear-gradient(left, #bbc92f, #ecd518);
        -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
        -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0;
    }

    .slideselect.viewtype-risk.split-5 li:nth-child(3) a {
        color: #fbd510;
    }

    .slideselect.viewtype-risk.split-5 li:nth-child(3) .risk-indicator {
        background: #ecd518;
        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VjZDUxOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZiYmMwYSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
        background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ecd518), color-stop(100%, #fbbc0a));
        background: -webkit-linear-gradient(left, #ecd518, #fbbc0a);
        background: -moz-linear-gradient(left, #ecd518, #fbbc0a);
        background: -o-linear-gradient(left, #ecd518, #fbbc0a);
        background: linear-gradient(left, #ecd518, #fbbc0a);
        -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
        -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0;
    }

    .slideselect.viewtype-risk.split-5 li:nth-child(4) a {
        color: #fba008;
    }

    .slideselect.viewtype-risk.split-5 li:nth-child(4) .risk-indicator {
        background: #fbbc0a;
        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZiYmMwYSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2VlNjEwNCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
        background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #fbbc0a), color-stop(100%, #ee6104));
        background: -webkit-linear-gradient(left, #fbbc0a, #ee6104);
        background: -moz-linear-gradient(left, #fbbc0a, #ee6104);
        background: -o-linear-gradient(left, #fbbc0a, #ee6104);
        background: linear-gradient(left, #fbbc0a, #ee6104);
        -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
        -moz-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0;
    }

    .slideselect.viewtype-risk.split-5 li:nth-child(5) a {
        color: #de1601;
    }

    .slideselect.viewtype-risk.split-5 li:nth-child(5) .risk-indicator {
        background: #ee6104;
        background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iNTAlIiB4Mj0iMTAwJSIgeTI9IjUwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlNjEwNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RlMTYwMSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
        background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ee6104), color-stop(100%, #de1601));
        background: -webkit-linear-gradient(left, #ee6104, #de1601);
        background: -moz-linear-gradient(left, #ee6104, #de1601);
        background: -o-linear-gradient(left, #ee6104, #de1601);
        background: linear-gradient(left, #ee6104, #de1601);
        -webkit-border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
        -ms-border-radius: 0 5px 5px 0;
        -o-border-radius: 0 5px 5px 0;
        border-radius: 0 5px 5px 0;
    }

/* 
#Slide View
The navigation for the slide view

_**Note:**This has been deprecated as a navigation control due to us moving away from a primarily touch-based interface_

```
<div class="slide-nav">
    <ul>
        <li><a href="#"></a></li>
        <li><a href="#"></a></li>
        <li class="current"><a href="#"></a></li>
        <li><a href="#"></a></li>
    </ul>
</div>

```
 */
.slide-nav {
    clear: both;
}

.view .slide-nav {
    border-bottom: 0;
}

.slide-nav ul {
    list-style: none;
    margin: 0 auto;
    padding: 10px;
    width: 80px;
    min-height: 0;
    *zoom: 1;
}

    .slide-nav ul:after {
        content: "";
        display: table;
        clear: both;
    }

.slide-nav li {
    float: left;
    margin: 0 3px;
}

    .slide-nav li a {
        width: 10px;
        height: 10px;
        position: relative;
        display: block;
        overflow: hidden;
        text-indent: -999px;
        background: #787878;
        border: 3px solid #787878;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        -webkit-transition: 0.3s all;
        -moz-transition: 0.3s all;
        -o-transition: 0.3s all;
        transition: 0.3s all;
    }

        .slide-nav li a:hover {
            background: var(--primary-font-color);
            border: 3px solid var(--primary-font-color);
        }

    .slide-nav li.current a {
        background: var(--primary-font-color);
        border: 3px solid var(--primary-font-color);
    }

/* 
#Navtree Widget
Found on Countries Navigation/Region page (3rd slider tab)

```
<style>
.codedemo .w-navtree {overflow:hidden; padding:20px;}
</style>
<div class="panel">
    <div class="widget w-navtree">
        <div class="content">
            <ul class="nodes nodes-parent">
                <li class="current">Parent Country</li>
                <li class="">Parent Country</li>
                <li class="">Parent Country</li>
                <li class="">Parent Country</li>
                <li class="">Parent Country</li>
            </ul>
            <ul class="nodes nodes-child">
                <li>
                    <a>Child Country</a>
                </li>
                <li>
                    <a>Child Country</a>
                </li>
                <li>
                    <a>Child Country</a>
                </li>
            </ul>
        </div>    
    </div>
</div>
```
*/
/* Navigation: Navtree */
/* Nav List Widget 
 * Found on Countries Navigation/Region page (3rd slider tab)
 */
.nodes-parent .current, .nodes-parent .current:hover, .nodes-parent .current:active {
    color: var(--tertiary-bg-color);
    font-weight: bold;
    background: #acacac;
    text-shadow: none;
    padding: 10px;
}

.widget.w-navtree {
    background: var(--secondary-bg-color);
    border-top: 1px solid #444444;
    border-bottom: 1px solid #0c0c0c;
}

    .widget.w-navtree .content {
        margin-top: 40px;
        font-size: 16px;
    }

        .widget.w-navtree .content ul {
            border-bottom: none;
        }

.nodes {
    float: left;
}

    .nodes li {
        color: var(--primary-font-color);
        font-weight: normal;
        padding: 8px 10px;
        text-shadow: none;
        position: relative;
        cursor: pointer;
    }

        .nodes li:hover, .nodes li:active {
            color: var(--primary-font-color);
            background: rgba(0, 0, 0, 0.2);
        }

        .nodes li a:hover, .nodes li a:active {
            color: var(--primary-font-color);
            text-decoration: none;
        }

.nodes-parent {
    border-right: 1px solid #acacac;
}

    .nodes-parent li {
        padding: 10px 20px;
        min-width: 160px;
    }

    .nodes-parent .current::after {
        display: block;
        position: absolute;
        top: 50%;
        margin-top: -5px;
        right: -6px;
        content: "";
        width: 0;
        height: 0;
        border-left: 5px solid #acacac;
        border-top: 5px solid transparent;
        border-bottom: 5px solid transparent;
        background: transparent;
    }

.nodes-child {
    border-left: 1px solid #acacac;
    position: relative;
    left: -1px;
}

    .nodes-child li {
        margin-left: 30px;
    }

html {
    background-repeat: no-repeat;
    background-color: var(--primary-bg-color);
    background-image: url("../images/iress_gradient_dark_RGB_1.png");
    background-size: 100% 100%;
}

    html.landscape {
        min-height: 768px;
    }

#applicationHost {
    width: 100%;
    height: 100%;
}

    #applicationHost > div {
        width: 100%;
        height: 100%;
    }

.app_dropdowns_container {
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    overflow: visible;
}


.ie9 {
    height: 100%;
}

.bgimg {
    background-image: url("../images/dark_sprites.png?v=1.12");
}

.view {
    padding: 0 10px 10px 10px;
    position: relative;
    *zoom: 1.09;
    min-width: 980px;
    max-width: 1360px;
    width: 100%;
    border-radius: 6px;
    background-color: var(--primary-bg-color);
    margin: 0 auto;
}

    .view:after {
        content: "";
        display: table;
        clear: both;
    }

.viewtype-fullscreen-whead > .content > .panel {
    height: 618px;
}

    .viewtype-fullscreen-whead > .content > .panel .widget {
        height: 100%;
    }

.viewtype-fullscreen-whead > .content.flex-view > .panel {
    height: auto;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

    .viewtype-fullscreen-whead > .content.flex-view > .panel .widget {
        height: auto;
    }

.viewtype-fullscreen > .panel {
    height: 667px;
}

    .viewtype-fullscreen > .panel .w-contentlist {
        height: 100%;
    }

        .viewtype-fullscreen > .panel .w-contentlist .content {
            height: 625px;
        }

.viewtype-tabscreen-whead > .content > .panel .widget {
    height: 100%;
}

.viewtype-tabscreen-whead > .content > .panel:last-child .content {
    height: 100%;
}

.viewtype-tabscreen > .panel {
    height: 623px;
}

    .viewtype-tabscreen > .panel .widget {
        height: 623px;
    }

        .viewtype-tabscreen > .panel .widget .content {
            height: 572px;
        }

.viewtype-tabscreen .w-contentview.viewtype-bycountry {
    height: 623px;
}

    .viewtype-tabscreen .w-contentview.viewtype-bycountry .content {
        height: 623px;
    }

.viewtype-tabscreen > .content > .panel:last-child .content .content,
.viewtype-tabscreen-whead > .content > .panel:last-child .content .content {
    height: auto;
}

.viewtype-fullscreen-noslide > .panel {
    height: 709px;
}

    .viewtype-fullscreen-noslide > .panel .w-contentlist {
        border-radius: 6px;
        margin: 0 0 0 10px;
        background: var(--secondary-bg-color);
        height: 100%;
    }

        .viewtype-fullscreen-noslide > .panel .w-contentlist .content {
            height: 668px;
        }

/*

#Appheader

This is the main header of the application
```
<div class="header appheader" data-role="header" data-position="static" style="">
    <img class="mcgregor logo" src="/Images/dark_mlogo.png">
    <div class="navbar">
        <ul>
        <li><a>Markets</a></li>
        <li>
        <a id="nav_watchlist" class="trigger">Watchlist</a>
        </li>
        <li><a>Insights</a></li>
        </ul>
    </div>
    <div class="searchbar">
        <div class="searchfilter dropdown_container">
            <a id="nav_searchfilter" class="trigger btn rnd-left btn-action">
                <span>All</span>
                <i class="icon icon-showmore"></i>
            </a>
        </div>
            <input id="search_results" type="text">
            <span id="search_button" class="btn rnd-right btn-action">
                <input type="submit" value="Search">
            </span>
    </div>
    <div class="settings dropdown_container">
            <a id="nav_usersettings" class="trigger online">
            <i class="icon icon-user"></i>
            </a>
    </div>
</div>
```
*/
/*

## Top Navigation
This is the top navigation red bar.
```
<div class="header appheader" data-role="header" data-position="static">
<div class="navbar">
    <ul>
        <li>
            <a>Markets</a>
        </li>
        <li>
            <a id="nav_watchlist" class="trigger" >Watchlist</a>
        </li>
        <li>
            <a>Insights</a>
        </li>
    </ul>
</div>
</div>
```
*/
/*
## Top Search Bar
This is the top search bar.
```
<div class="searchbar">
    <div class="searchfilter dropdown_container">
        <a id="nav_searchfilter" class="trigger btn rnd-left btn-action" style="transition: all 0.5s ease-in-out; -webkit-transition: all 0.5s ease-in-out;">
            <span>All</span>
            <i class="icon icon-showmore"></i>
        </a>
    </div>
    <input id="search_results" type="text" placeholder="Search for name or ticker code">
    <span id="search_button" class="btn rnd-right btn-action">
    <input type="submit" value="Search">
    </span>
</div>
```
*/
.appheader .navbar li a:hover, .appheader .navbar li.active a {
    background: var(--tertiary-btn-color);
    -webkit-box-shadow: inset 0 4px 8px var(--tertiary-btn-color);
    -moz-box-shadow: inset 0 4px 8px var(--tertiary-btn-color);
    box-shadow: inset 0 4px 8px var(--tertiary-btn-color);
}

.appheaderwrap {
    border-top: 1px solid var(--primary-bg-color);
    border-bottom: 1px solid var(--primary-bg-color);
    color: var(--primary-font-color);
    font-weight: bold;
    text-shadow: 0 0 0 transparent;
    background: var(--primary-bg-color);
    opacity: 0.8;
    width: 100%;
}

.appheader {
    border-bottom: 1px solid black;
    min-width: 980px;
    max-width: 1360px;
    width: 100%;
    margin: 0 auto;
    position: relative;
    *zoom: 1;
}

    .appheader:after {
        content: "";
        display: table;
        clear: both;
    }

    .appheader .logo {
        height: 45px;
        border-right: 0;
        position: absolute;
        left: 0;
        top: 0;
        padding: 0 6px;
        margin: 4px 0 3px;
        z-index: 10;
    }

    .appheader .navbar {
        float: left;
        margin-left: 35px;
    }

        .appheader .navbar li {
            white-space: nowrap;
        }

            .appheader .navbar li a {
                color: var(--primary-font-color);
                font-size: 17px;
                font-weight: normal;
                line-height: 1.35;
                text-shadow: none;
            }

                .appheader .navbar li a:active {
                    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
                    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
                    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
                }

            .appheader .navbar li.nav-droptrigger a {
                padding-right: 9px;
            }

    .appheader .searchbar {
        min-width: 150px;
        height: 28px;
        float: right;
        margin-top: 9px;
        margin-right: 70px;
    }

        .appheader .searchbar .searchfilter.btn {
            line-height: 16px;
        }

        .appheader .searchbar input[type=text] {
            width: 235px;
            padding: 4px 0;
            text-indent: 5px;
        }

        .appheader .searchbar .icon-clear,
        .appheader .searchbar .loading-indicator {
            right: 70px;
        }

    .appheader .settings {
        margin-top: 0;
        position: absolute;
        right: 0;
        top: 0;
        border-left: 0;
    }

        .appheader .settings a {
            display: block;
            padding: 0 5px 0;
            border-left: 0;
            height: 45px;
            cursor: pointer;
            margin-top: 1px;
            border-radius: 10px;
            border: 4px solid var(--primary-bg-color);
        }

            .appheader .settings a:hover {
                background: var(--tertiary-btn-color);
                text-decoration: none;
            }

            .appheader .settings a .icon-showmore {
                position: relative;
                top: 55%;
                vertical-align: top;
                margin-top: -3px;
                left: -4px;
            }
            .appheader .settings a:link, a:visited, a:active {
                color: transparent;
            }

    #appheader #appHeaderSearchControl_input {
        background: var(--primary-input-bg-color);
        width: 235px;
    }

#appHeaderSearchControl_input_results {
    width: 232px;
    max-height: 570px;
    height: auto;
    padding-bottom: 0;
    margin-left: 0;
}

    #appHeaderSearchControl_input_results .content {
        max-height: 500px;
        height: auto;
        margin-top: -1px;
        margin-left: -3px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0;
    }

#header_search_filter {
    margin-top: 10px;
}

#content_header_add-to-watchlist .watchlist_list .list_options {
    max-height: 350px;
}

#content_header_add-to-watchlist .watchlist_create .content {
    height: 110px;
}

    #content_header_add-to-watchlist .watchlist_create .content .form_inline input {
        width: 70%;
    }

/*
# Panel

The Panel element makes up the main building blocks of a page. They are containers for widgets.

The standard children elements of Panels are:

+ Header
+ Content
+ (and occassionally) Footer

In the event that there is no Header or Footer element, the need for a content element falls away and the widgets can be nested directly inside a panel without the need for a content wrapper.

##Panel with header.
Panel also has a 'highlight' class wrapping it, which adjusts the background colour of the panel wrapper (in this case, a panelset). 
```
<div class="panelset highlight">
<div class="panel">
    <div class="header">
        <h2>Economic Structure</h2>
    </div>
    
    <div class="content">
        <div id="chart_statistics_GDPComposition" class="widget w-chart" data-bind="with: economicStatistics">
            <div class="header">
                <h3 data-bind="text: structureTitle">GDP Composition</h3>
            </div>
            <div class="content split-2">
                <div class="chart-group pull-left">
                    <div class="chart" data-bind="pieChart: industries" style="width: 295px; height: 350px;" data-highcharts-chart="12"><div class="highcharts-container" id="highcharts-48" style="position: relative; overflow: hidden; width: 235px; height: 340px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 12px;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="235" height="340"><desc>Created with Highstock 1.3.7</desc><defs><clipPath id="highcharts-49"><rect fill="none" x="0" y="0" width="215" height="230"></rect></clipPath></defs><rect rx="5" ry="5" fill="var(--secondary-bg-color)" x="0" y="0" width="235" height="340"></rect><g class="highcharts-series-group" zIndex="3"><g class="highcharts-series highcharts-tracker" visibility="visible" zIndex="0.1" transform="translate(10,10) scale(1 1)" style="cursor:pointer;"><path fill="var(--secondary-font-color)" d="M 107.48370614370438 35.00000165931097 A 80 80 0 0 1 165.98054915064 60.41039136392734 L 126.68893019005375 97.08778466628866 A 26.25 26.25 0 0 0 107.494653578403 88.75000054446141 Z" stroke="#414141" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"></path><path fill="#71A1B0" d="M 166.03510950990568 60.46889919813327 A 80 80 0 0 1 158.90245297208935 176.30079794302958 L 124.36642988146683 135.1143243250566 A 26.25 26.25 0 0 0 126.7068328079378 97.10698254938748 Z" stroke="#414141" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"></path><path fill="#005991" d="M 158.8411264831388 176.3521697370382 A 80 80 0 0 1 95.92448299588179 194.15811648900808 L 103.70178348302372 140.97375697295578 A 26.25 26.25 0 0 0 124.34630712727991 135.13118069496565 Z" stroke="#414141" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"></path><path fill="#009844" d="M 95.84533068034384 194.14650139487827 A 80 80 0 0 1 107.38888160495428 35.000077170647955 L 107.46353927662562 88.75002532161886 A 26.25 26.25 0 0 0 103.67581162948782 140.96994577019444 Z" stroke="#414141" stroke-width="1" stroke-linejoin="round" transform="translate(0,0)"></path></g><g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(10,10) scale(1 1)"></g></g><g class="highcharts-legend" zIndex="7" transform="translate(54,250)"><rect rx="0" ry="0" fill="#323232" x="0.5" y="0.5" width="126" height="74" stroke="#323232" stroke-width="1" visibility="visible"></rect><g zIndex="1"><g><g class="highcharts-legend-item" zIndex="1" transform="translate(8,3)"><text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#767676;fill:#767676;" text-anchor="start" zIndex="2"><tspan x="21">Agriculture</tspan></text><rect rx="2" ry="2" fill="var(--secondary-font-color)" x="0" y="4" width="16" height="12" zIndex="3"></rect></g><g class="highcharts-legend-item" zIndex="1" transform="translate(8,19)"><text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#767676;fill:#767676;" text-anchor="start" zIndex="2"><tspan x="21">Industry</tspan></text><rect rx="2" ry="2" fill="#71A1B0" x="0" y="4" width="16" height="12" zIndex="3"></rect></g><g class="highcharts-legend-item" zIndex="1" transform="translate(8,35)"><text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#767676;fill:#767676;" text-anchor="start" zIndex="2"><tspan x="21">Manufacturing</tspan></text><rect rx="2" ry="2" fill="#005991" x="0" y="4" width="16" height="12" zIndex="3"></rect></g><g class="highcharts-legend-item" zIndex="1" transform="translate(8,51)"><text x="21" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;cursor:pointer;color:#767676;fill:#767676;" text-anchor="start" zIndex="2"><tspan x="21">Services</tspan></text><rect rx="2" ry="2" fill="#009844" x="0" y="4" width="16" height="12" zIndex="3"></rect></g></g></g></g><g class="highcharts-tooltip" zIndex="8" style="cursor:default;padding:0;white-space:nowrap;" transform="translate(-73,160)" opacity="0" visibility="hidden"><rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="298" height="32" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></rect><rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="298" height="32" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></rect><rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="298" height="32" fill-opacity="0.85" isShadow="true" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></rect><rect rx="3" ry="3" fill="rgb(255,255,255)" x="0.5" y="0.5" width="298" height="32" fill-opacity="0.85" stroke="#005991" stroke-width="1" anchorX="258.9704475337568" anchorY="43.62500111013651"></rect><text x="8" y="21" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#333333;fill:#333333;" zIndex="1"><tspan x="8">Manufacturing: </tspan><tspan style="font-weight:bold" dx="0">13.418370505290845%</tspan></text></g></svg></div></div>
                </div>
                <div class="chart-content scroll-view pull-right" data-bind="text: structureDescription">Morocco’s economy is relatively well diversified compared to its regional peers; however, it remains vulnerable in two main areas. Firstly, its external position is highly reliant on the euro zone, as most of its exports, foreign investments, tourism, and remittances inflows come from that region. Secondly, private consumption is overly dependent on the agricultural sector, with 40% of total employment in agriculture. Since the weather tends to be erratic in Morocco, growth in the agricultural sector – and therefore also in the economy as a whole – tends to be volatile.

Morocco is a very popular destination for international tourism and the sector is an important contributor to the economy. Visitors are attracted by the country’s rich cultural heritage, ancient towns, and beach resorts. In addition, Morocco has eight UNESCO World Heritage sites, including the archaeological site of Volubilis and the Historic City of Meknes. According to the World Travel and Tourism Council (WTTC), the tourism industry contributed 8.7% directly and 18.7% overall to GDP in 2012 and directly supported 829,000 jobs (7.6% of total employment). The sector has shown strong growth in recent years, with the number of tourists visiting Morocco increasing from 5.8 to over 9.3 million between 2005 and 2010 and the sector garnering foreign investment of around $30bn in this period. 

Phosphates represent Morocco’s most significant mineral product with the state-owned Chérifien des Phosphates (OCP) being the country’s sole producer. Morocco holds around 75% of the world’s phosphate reserves and it is the third largest producer (after US and China) as well as being one of the largest exporters in the world. The mineral is also vital to Morocco’s trade balance, accounting for a quarter of merchandise export earnings. Higher revenues from the export of phosphates have helped to slow the rise of the country’s trade deficit, despite higher crude oil and grain imports. 

Agriculture is a vital part of the Moroccan economy, accounting for between 13% and 18% of GDP (depending on rainfall) and around 40% of total employment. Furthermore, more than 80% of the rural population’s livelihood depends on the agricultural sector. The country is largely self-sufficient in meat, fruit and vegetables, but imports most other foods, most notably wheat, maize and sugar.</div>
            </div>
        </div>
    </div>
</div>
</div>
```

##Panel, no header
Example of a Panel without a header (or footer). As a result, no content wrapper was required.
```    
<div class="panel">
    <div class="widget w-metalist" id="metalist_instrument_statistics">
        <dl class="striped">
            <dt class="meta_close">Data Title</dt>
            <dd class="meta_close">000,000.00</dd>

            <dt class="meta_open">Data Title</dt>
            <dd class="meta_open">000,000.00</dd>

            <dt class="meta_vol">Data Title</dt>
            <dd class="meta_vol">000,000.00</dd>

            <dt class="meta_buy">Data Title</dt>
            <dd class="meta_buy">000,000.00</dd>

            <dt class="meta_sell">Data Title</dt>
            <dd class="meta_sell">000,000.00</dd>

            <dt class="meta_1w">Data Title</dt>
            <dd class="meta_1w">000,000.00</dd>
        </dl>
    </div>
</div>
```
*/
.panel > .header h1, .panel > .header h2 {
    line-height: 24px;
    margin: 0;
    padding: 0 20px;
    font-size: 12px;
    color: var(--primary-font-color);
}

#panel_insights_africanmarkets .w-inslist.sml {
    border-bottom: 1px solid #4c4c4c;
}

.panel {
    *zoom: 1;
}

    .panel:after {
        content: "";
        display: table;
        clear: both;
    }

    .panel > .header {
        height: 44px;
        background: var(--primary-bg-color);
        border-top: 1px solid var(--primary-bg-color);
    }

        .panel > .header > * {
            position: relative;
        }

            .panel > .header > * * {
                top: 0;
            }

        .panel > .header h2 .icon-switcher {
            position: relative;
            top: 4px;
            left: 5px;
        }

        .panel > .header span {
            font-size: 11px;
            padding-top: 4px;
        }

        .panel > .header.nobg {
            background: transparent;
            border-top: none;
        }

        .panel > .header.sectionhead {
            background: var(--primary-bg-color);
            border-top: none;
            overflow: hidden;
        }

        .panel > .header > .component {
            margin-top: 7px;
        }

        .panel > .header > .providedby {
            float: right;
            margin-right: -10px;
        }

            .panel > .header > .providedby > a {
                color: #787878;
            }

        .panel > .header > .time {
            float: left;
            margin-left: 10px;
        }

    .panel > .content, .panel .genericWrap > .content {
        position: relative;
        background-color: var(--primary-bg-color);
        border-bottom: none;
    }

        .panel > .content .panel:last-child .content, .panel .genericWrap > .content .panel:last-child .content {
            border-bottom: none;
        }

        .panel > .content > .header, .panel .genericWrap > .content > .header {
            padding: 10px 0;
        }

        .panel > .content .header h1, .panel > .content .header h2, .panel .genericWrap > .content .header h1, .panel .genericWrap > .content .header h2 {
            float: left;
            margin: 0;
            font-size: 14px;
        }

        .panel > .content .header small.meta, .panel .genericWrap > .content .header small.meta {
            float: right;
            line-height: 22px;
        }

        .panel > .content .header.centered h1, .panel > .content .header.centered h2, .panel .genericWrap > .content .header.centered h1, .panel .genericWrap > .content .header.centered h2 {
            float: none;
            margin: 0;
        }

        .panel > .content a:not(.btn), .panel .genericWrap > .content a:not(.btn) {
            color: var(--secondary-font-color);
        }

    .panel.sidebar {
        background: #0c0c0c;
    }

.withdivider .panel {
    border-right: 1px solid var(--primary-bg-color);
}

    .withdivider .panel:last-child {
        border-right: none;
    }

.withdivider.columns .panel {
    border-left: 6px solid var(--primary-bg-color);
    border-right: none;
    position: relative;
}

    .withdivider.columns .panel:last-child {
        border-right: none;
    }

    .withdivider.columns .panel:nth-child(1) {
        left: 0;
        border-left: none;
    }

    .withdivider.columns .panel:nth-child(2) {
        left: -1px;
    }

    .withdivider.columns .panel:nth-child(3) {
        left: -2px;
    }

    .withdivider.columns .panel:nth-child(4) {
        left: -3px;
    }

    .withdivider.columns .panel:nth-child(5) {
        left: -4px;
    }

.columns {
    display: table;
    table-layout: fixed;
}

    .columns > .content {
        display: table-row;
    }

        .columns > .content > .panel {
            display: table-cell;
            float: none;
            vertical-align: top;
        }

/*
#Panelsets
Panelsets are wrapper elements that contain 2 or more panels.  
Panelsets are usually paired with a split-view, allowing the inner panels to be layed out in specific ways, based on the split types. Eg: split-2, split-2-1, split-golden, etc.


## 2 Column Panelset (2-1 Split)
This is panel set of 2 columns as on the Talking Points or Article view
```
        <div class="content panelset split-view split-2-1">
            <div class="panel contentview">
                <div class="content scroll-view">
                        <small class="time">00 Month 0000 00:00:00</small>
                        <h1>Article Heading</h1>
                    <div>
                        <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                        when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
                        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
                        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
                        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                        </p>
                        <p>
                        Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
                        Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
                        when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
                        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
                        It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, 
                        and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
                        </p>
                    </div>
                </div>
            </div>
            <div class="panel">
                <div class="widget w-contentlist">
                    <div class="content scroll-view">
                        <ul>
                            <li class="current">
                                <small class="time">00 Month 0000 00:00:00</small>
                                <h3>Country Name</h3>
                                <p data-bind="text: synopsis">Excerpt text</p>
                            </li>
                            <li class="">
                                <small class="time">00 Month 0000 00:00:00</small>
                                <h3>Country Name</h3>
                                <p>Excerpt text</p>
                            </li>
                            <li class="">
                                <small class="time">00 Month 0000 00:00:00</small>
                                <h3>Country Name</h3>
                                <p>Excerpt text</p>
                            </li>
                            <li class="">
                                <small class="time">00 Month 0000 00:00:00</small>
                                <h3>Country Name</h3>
                                <p>Excerpt text</p>
                            </li>
                            <li class="">
                                <small class="time">00 Month 0000 00:00:00</small>
                                <h3>Country Name</h3>
                                <p>Excerpt text</p>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
```        
*/
/*
## 3 Column Panelset (1-1-2 Split)
This is a Content Container Split 1-1-2 with 3 content panels and example data similar to the instrument landing page
```
<div class="content panelset split-view split-1-1-2">
    <div class="panel">
        <div class="widget w-metalist" id="metalist_instrument_statistics">
            <dl class="striped">
                <dt class="meta_close">Data Title</dt>
                <dd class="meta_close">000,000.00</dd>

                <dt class="meta_open">Data Title</dt>
                <dd class="meta_open">000,000.00</dd>

                <dt class="meta_vol">Data Title</dt>
                <dd class="meta_vol">000,000.00</dd>

                <dt class="meta_buy">Data Title</dt>
                <dd class="meta_buy">000,000.00</dd>

                <dt class="meta_sell">Data Title</dt>
                <dd class="meta_sell">000,000.00</dd>

                <dt class="meta_1w">Data Title</dt>
                <dd class="meta_1w">000,000.00</dd>
            </dl>
        </div>
        </div>
    <div class="panel">
        <div class="widget w-chart">
                <div class="header">
                    <h3>5-Day Market Cap</h3>
                </div>
        </div>
    </div>
    <div class="panel">
        <div class="widget w-chart">
            <div class="header">
                <h3><span>1 Month</span> Price Chart</h3>
            </div>
        </div>
    </div>
</div>
```
*/
.panelset {
    min-height: 0;
    *zoom: 1;
}

    .panelset:after {
        content: "";
        display: table;
        clear: both;
    }

    .panelset.slide-view {
        position: relative;
        display: inline-block;
        width: 100%;
    }

        .panelset.slide-view .slide {
            display: inline-block;
            width: 100%;
        }

.highlight {
    background: #282828;
    border-top: 1px solid var(--secondary-bg-color);
}

.split-view {
    *zoom: 1;
}

    .split-view:after {
        content: "";
        display: table;
        clear: both;
    }

    .split-view > * {
        float: left;
    }

        .split-view > *:last-child {
            float: right;
        }

/* 
#Panel Headers
As the name applies Headers contain the title and often actions or other meta information for a panel. There are currently 3 different types of headers.
The standard header, the sub-header (or secondary header) and the action bar, which is primarly for actions and doesn't contain a heading title element.

##Header
This is the article header, example taken from the Talking Points section

```
<div class="panel">
    <div class="header centered">
        <small class="providedby">Provided by Company Name</small>
        <a href="#" class="btn btn-default btn-back left">Back</a>
        <h2>Talking Points</h2>
    </div>
</div>


```

*/
.header {
    margin: 0;
    position: relative;
    *zoom: 1;
}

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

    .header small {
        float: right;
        line-height: 29px;
        display: block;
        top: 5px;
        position: relative;
        padding-right: 20px;
    }

    .header .providedby span {
        top: -8px;
        right: 5px;
        position: relative;
    }

        .header .providedby span a {
            color: var(--secondary-font-color);
        }

    .header .btn {
        top: 5px;
        right: 5px;
        position: relative;
        float: right;
        z-index: 1;
    }

    .header .btn-back {
        float: left;
        right: auto;
        left: 5px;
    }

    .header .tools {
        float: right;
        position: relative;
        top: 10px;
        right: 5px;
    }

        .header .tools .btn {
            top: 0;
        }

        .header .tools .btn-group {
            left: auto;
            top: 0;
            padding-right: 10px;
            float: right;
        }

    .header .btn-group {
        position: relative;
        top: 5px;
        left: 15px;
    }

        .header .btn-group .btn {
            top: 0;
            right: auto;
        }

    .header .pull-right .btn-group {
        left: auto;
    }

    .header.centered h2 {
        text-align: center;
        padding-right: 5px;
    }

    .header.centered .btn {
        float: left;
        right: auto;
        left: 15px;
    }

        .header.centered .btn.pull-right {
            float: right;
            left: auto;
            right: 5px;
        }

    .header.centered ul.tools {
        float: right;
        left: auto;
        right: 5px;
        padding-right: 10px;
    }

.panel .content .header h1,
.panel .content .header h2 {
    float: left;
    margin: 0;
    font-size: 14px;
}

/*
## Subheader
This is the instrument landing sub header panel with date metadata

```
<div class="panel">
    <div class="sub-header">
        <div class="meta" style="text-align: left">
            <i class="icon i-eod" title="eod"></i>
            <small class="time">Updated: <span>08/01/2014 at 13:13</span>
            </small>
        </div>
        <div class="tools">
            <a id="btn_add_to_watchlist" class="btn btn-action btn_add-to-watchlist trigger">Add</a>
        </div>
        <ul class="breadcrumb">
            <li class="primary">Idustry: xxxx</li>
            <li class="sub">Sector: xxxxx</li>
        </ul> 
    </div>
</div>
```
*/
.sub-header {
    *zoom: 1;
    background: var(--primary-bg-color);
    padding: 10px 15px;
    text-align: center;
    position: relative;
    min-height: 49px;
}

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

.panel > .sub-header {
    border-bottom: 1px solid #4c4c4c;
}

.sub-header .meta {
    position: absolute;
    top: 10px;
    left: 15px;
    padding-left: 40px;
}

    .sub-header .meta .icon, .sub-header .meta .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .content .fieldcategories .sub-header .meta li:after, .sub-header .meta .c-fieldselect .content .fieldsubcategories li:after, .c-fieldselect .content .fieldsubcategories .sub-header .meta li:after {
        position: absolute;
        top: 0;
        left: 0;
    }

    .sub-header .meta small {
        display: block;
        line-height: 30px;
    }

.sub-header .tools {
    position: absolute;
    top: 10px;
    right: 15px;
}

.sub-header .breadcrumb {
    display: inline-block;
    top: 3px;
}

/* 
##Actionbar 

```
<div class="actionbar">
    <div class="component c-frequency">
        <ul class="breadcrumb">
            <li class="primary"><label>Statement:</label></li>
            <li class="sub" data-bind="with: reportTypeDropDown">
                <dl class="dropDownList" style="width: 200px;">
                    <dt><span>Annual Published</span><i class="icon icon-showmore"></i></dt>
                </dl>
            </li>
        </ul>    
    </div><div class="component c-dateSelect with-custom">
      <ul class="btn-group">
        <li>
          <a class="btn btn-default">1Y</a>
        </li>
        <li class="current">
          <a class="btn btn-default">3Y</a>
        </li>
        <li>
          <a class="btn btn-default">5Y</a>
        </li>
        <li>
          <a class="btn btn-default">Custom</a>
        </li>
      </ul>
    </div>
</div>
```    
*/
.actionbar {
    *zoom: 1;
    background: var(--primary-bg-color);
    padding: 10px 15px;
    text-align: center;
    position: relative;
}

    .actionbar:after {
        content: "";
        display: table;
        clear: both;
    }

.panel > .actionbar {
    border-bottom: 1px solid var(--primary-bg-color);
}

.actionbar > * {
    margin-left: 10px;
}

    .actionbar > *:first-child {
        margin-left: 0;
    }

.actionbar .meta {
    position: absolute;
    top: 10px;
    left: 15px;
    padding-left: 40px;
}

    .actionbar .meta .icon, .actionbar .meta .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .content .fieldcategories .actionbar .meta li:after, .actionbar .meta .c-fieldselect .content .fieldsubcategories li:after, .c-fieldselect .content .fieldsubcategories .actionbar .meta li:after {
        position: absolute;
        top: 2px;
        left: 0;
    }

    .actionbar .meta small {
        display: block;
        line-height: 14px;
    }

.actionbar .tools {
    position: absolute;
    top: 10px;
    right: 15px;
}

.actionbar .breadcrumb {
    display: inline-block;
    top: 3px;
}

.actioncomponents {
    background: var(--secondary-bg-color);
    border-bottom: 1px solid #0c0c0c;
}

/* #Popover/ Dropdown
The popover is the current modal/menu/popup control. The styling immitates a standard iOS popover, 
although this is changing with the apps move away from being a tablet-only app.
```
<style>
.codedemo #header_nav_watchlist {
    position:relative;
    margin-bottom:20px;
}
</style>
<div id="header_nav_watchlist" class="dropdown left top" style="display: block; top: 20px; left: 0; position:relative;">
    <i class="dropdown_arrow"></i>
    <div class="view watchlist_list">
        <div class="header">
            <a class="btn btn-default btn-edit">Edit</a>
            <h3>Watchlist</h3>
        </div>
        <div class="content">
            <ul class="list_options">
                <li><a ><span >Test</span></a></li>
                <li class="action highlight"><a >Create new watchlist <i class="icon icon_arrow-right"></i></a></li> 
            </ul>
        </div>
    </div>
</div>
```
*/
.dropdown {
    display: none;
    position: absolute;
    z-index: 1000;
    overflow: visible;
    height: auto;
    width: 240px;
    padding: 0;
    letter-spacing: 0;
    background: transparent;
    border: 1px solid #000;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

    .dropdown .dropdown_arrow {
        display: block;
        position: absolute;
        top: -7px;
        bottom: auto;
        left: 10px;
        width: 10px;
        height: 7px;
        background: url("../images/dark_sprites.png?v=1.12") -210px -90px no-repeat;
        z-index: 1000;
    }

    .dropdown.right .dropdown_arrow {
        left: auto;
        right: 10px;
    }

    .dropdown.centered .dropdown_arrow {
        left: 50%;
        margin-left: -17px;
    }

    .dropdown.bottom .dropdown_arrow {
        top: auto;
        bottom: -6px;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .dropdown .content {
        height: auto;
        padding-top: 0;
        overflow: auto;
        text-align: left;
        background: var(--tertiary-bg-color);
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        -ms-border-radius: 6px;
        -o-border-radius: 6px;
        border-radius: 6px;
        -webkit-box-shadow: 0 2px 3px rgba(148, 148, 148, 0.7) inset;
        -moz-box-shadow: 0 2px 3px rgba(148, 148, 148, 0.7) inset;
        box-shadow: 0 2px 3px rgba(148, 148, 148, 0.7) inset;
    }

        .dropdown .content.withFooter {
            -webkit-border-radius: 6px 6px 0 0;
            -moz-border-radius: 6px 6px 0 0;
            -ms-border-radius: 6px 6px 0 0;
            -o-border-radius: 6px 6px 0 0;
            border-radius: 6px 6px 0 0;
        }

    .dropdown ul {
        margin: 0;
    }

        .dropdown ul li {
            font-size: 12px;
            line-height: 26px;
            font-weight: normal;
            color: var(--tertiary-bg-color);
        }

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

        .dropdown ul.list_options {
            list-style: none;
            padding: 2px 0 0;
        }

            .dropdown ul.list_options li {
                position: relative;
                border-bottom: 1px solid var(--primary-bg-color);
                float: none;
                margin: 0;
                padding: 0;
            }

                .dropdown ul.list_options li.highlight {
                    border-top: none;
                }

                    .dropdown ul.list_options li.highlight a {
                        background: var(--primary-font-color);
                    }

                        .dropdown ul.list_options li.highlight a:hover {
                            background: #f3e2e2;
                        }

                .dropdown ul.list_options li.selected {
                    background: #cccccc;
                }

                .dropdown ul.list_options li:active {
                    background: rgba(0, 0, 0, 0.05);
                }

                .dropdown ul.list_options li.action {
                    padding: 0;
                }

                .dropdown ul.list_options li.category {
                    background: #c4c4c4;
                    color: #505050;
                    text-shadow: none;
                    font-size: 10px;
                    text-transform: uppercase;
                    padding: 0 5px;
                    line-height: 16px;
                    border-bottom: 1px solid #a4a4a4;
                }

                    .dropdown ul.list_options li.category:hover {
                        background: var(--secondary-bg-color);
                    }

                    .dropdown ul.list_options li.category a {
                        padding: 0;
                        position: absolute;
                        top: 2px;
                        right: 5px;
                        display: block;
                        width: 10px;
                        height: 10px;
                        min-height: 10px;
                        -webkit-border-radius: 100%;
                        -moz-border-radius: 100%;
                        -ms-border-radius: 100%;
                        -o-border-radius: 100%;
                        border-radius: 100%;
                    }

                .dropdown ul.list_options li a {
                    . text-decoration: none;
                    display: block;
                    text-shadow: 0 0 0 transparent;
                }

                    .dropdown ul.list_options li a:not(.btn):hover {
                        background: var(--secondary-bg-color);
                        text-decoration: none;
                        color: var(--primary-font-color);
                    }

                    .dropdown ul.list_options li a.btn {
                        top: 0;
                        padding: 5px 10px;
                        display: inline-block;
                        color: var(--primary-font-color);
                        width: 25%;
                    }

                    .dropdown ul.list_options li a i.icon_arrow-right {
                        width: 10px;
                        height: 14px;
                        position: absolute;
                        top: 7px;
                        right: 10px;
                    }

                .dropdown ul.list_options li label span {
                    padding-left: 10px;
                }

                .dropdown ul.list_options li ul {
                    list-style: none;
                    padding-left: 0;
                }

                    .dropdown ul.list_options li ul li {
                        border-bottom: 0;
                    }

                        .dropdown ul.list_options li ul li a {
                            clear: both;
                            overflow: hidden;
                        }

                            .dropdown ul.list_options li ul li a:hover {
                                background: var(--secondary-bg-color);
                            }

                        .dropdown ul.list_options li ul li h3 {
                            text-transform: uppercase;
                            text-shadow: none;
                            font-weight: bold;
                            padding: 0 10px;
                            margin-bottom: 0;
                            margin-top: 2px;
                            color: var(--primary-font-color);
                        }

                        .dropdown ul.list_options li ul li i {
                            top: 8px;
                            left: 6px;
                            position: relative;
                        }

            .dropdown ul.list_options .disabled:active {
                background: transparent;
            }

            .dropdown ul.list_options .disabled > * {
                color: #cccccc;
                padding: 0 10px;
                text-shadow: none;
            }

            .dropdown ul.list_options .disabled span {
                cursor: default;
            }

            .dropdown ul.list_options .isSelected i.i-selectedTick {
                padding: 0;
                top: 1px;
                margin-left: 4px;
            }

            .dropdown ul.list_options .isSelected span {
                display: inline-block;
                padding-left: 5px;
                overflow: visible;
                width: auto;
            }

            .dropdown ul.list_options .isSelected a {
                display: inline-block;
                padding-left: 5px;
                overflow: visible;
                width: auto;
            }

            .dropdown ul.list_options .nodata {
                padding: 5px 15px;
            }

            .dropdown ul.list_options span {
                display: block;
                padding-left: 0;
                font-size: 12px;
                color: var(--primary-font-color);
                line-height: 26px;
            }

                .dropdown ul.list_options span:before {
                    left: auto;
                    right: 12px;
                    top: 8px;
                    background: #f8f8f8;
                    border-color: #9c9c9c;
                }

                .dropdown ul.list_options span:after {
                    left: auto;
                    top: 11px;
                    right: 13px;
                    background-position: -220px -100px;
                }

            .dropdown ul.list_options [type="checkbox"]:checked + span {
                background: var(--primary-bg-color);
            }

                .dropdown ul.list_options [type="checkbox"]:checked + span:before {
                    background: #707070;
                    border-color: var(--secondary-bg-color);
                }

            .dropdown ul.list_options .optiontoggle .i-selectedTick {
                left: 0;
            }

            .dropdown ul.list_options .optiontoggle > label {
                display: inline-block;
                padding: 10px 0 10px 30px;
                width: 60%;
            }

            .dropdown ul.list_options .optiontoggle span.label {
                padding-left: 0;
                line-height: 26px;
            }

                .dropdown ul.list_options .optiontoggle span.label.disabled {
                    font-style: italic;
                }

            .dropdown ul.list_options .optiontoggle .btn-dropdown {
                color: var(--secondary-font-color);
                text-shadow: none;
                position: absolute;
                top: 0;
                right: 10px;
                font-size: 12px;
                opacity: 0;
                transition: all 0.35s;
                text-decoration: underline;
            }

                .dropdown ul.list_options .optiontoggle .btn-dropdown:hover {
                    opacity: 1;
                }

            .dropdown ul.list_options .optiontoggle:hover .btn-dropdown {
                opacity: 1;
            }

            .dropdown ul.list_options.edit_mode li {
                border-color: var(--primary-bg-color);
                padding: 5px 10px;
                font-weight: bold;
                font-size: 16px;
                position: relative;
            }

            .dropdown ul.list_options li a {
                color: var(--primary-font-color);
            }

            .dropdown ul.list_options.edit_mode li a.btn {
                margin-right: 0;
                margin-top: 4px;
                padding: 2px 4px;
                width: auto;
                float: right;
                border: none;
                background: var(--primary-btn-color);
                color: var(--primary-font-color);
                text-decoration: none;
                font-size: 12px;
                -webkit-border-radius: 3px;
                -moz-border-radius: 3px;
                -ms-border-radius: 3px;
                -o-border-radius: 3px;
                border-radius: 3px;
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
            }

            .dropdown ul.list_options.edit_mode li.action {
                padding: 0;
            }

            .dropdown ul.list_options.results {
                padding-top: 5px;
            }

                .dropdown ul.list_options.results li {
                    border-bottom: 1px solid var(--primary-bg-color);
                }

                    .dropdown ul.list_options.results li:hover {
                        background: transparent;
                    }

                    .dropdown ul.list_options.results li a {
                        padding: 8px 15px;
                    }

                        .dropdown ul.list_options.results li a:hover {
                            background: rgba(0, 0, 0, 0.15);
                        }

                    .dropdown ul.list_options.results li .result_name {
                        font-weight: normal;
                    }

                    .dropdown ul.list_options.results li .result_ticker {
                        font-weight: normal;
                        color: #787878;
                        font-size: 12px;
                        display: block;
                    }

            .dropdown ul.list_options.noindicator li > *:not(.togglebox, ul) {
                padding-left: 10px;
            }

        .dropdown ul.striped li:nth-child(2n+1) {
            background: rgba(200, 200, 200, 0.2);
        }

    .dropdown label {
        font-weight: bold;
        font-size: 16px;
        line-height: 24px;
        color: var(--primary-font-color);
        text-shadow: 0 0 0 transparent;
        min-height: 30px;
    }

    .dropdown input {
        padding: 4px 5px 2px;
        line-height: 22px;
        font-size: 12px;
        color: var(--primary-font-color);
        font-weight: normal;
        line-height: 16px;
        background: var(--primary-input-bg-color);
        border: 1px solid var(--secondary-bg-color);
        width: 75%;
        -webkit-transition: all 0.25s;
        -moz-transition: all 0.25s;
        -o-transition: all 0.25s;
        transition: all 0.25s;
    }

        .dropdown input:focus {
            border: 1px solid var(--secondary-bg-color);
            outline: none;
            background: var(--primary-input-bg-color);
            color: var(--primary-font-color);
            -webkit-border-radius: 2px;
            -moz-border-radius: 2px;
            -ms-border-radius: 2px;
            -o-border-radius: 2px;
            border-radius: 2px;
            -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
            box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
        }

    .dropdown .form_inline {
        padding: 10px 15px 20px;
        border-bottom: none;
    }

        .dropdown .form_inline h3 {
            text-shadow: none;
            display: block;
            word-spacing: 0.07em;
            width: 100%;
            padding: 0;
            text-transform: uppercase;
            text-shadow: none;
            font-weight: bold;
            margin-bottom: 10px;
            margin-top: 0;
            color: var(--primary-font-color);
        }

        .dropdown .form_inline label {
            padding-left: 0;
            padding-top: 0;
            width: 27%;
            display: inline-block;
            font-size: 12px;
            font-weight: normal;
            line-height: 22px;
            min-height: 22px;
        }

        .dropdown .form_inline input {
            padding: 4px 10px 2px;
        }

        .dropdown .form_inline small.error_msg {
            color: var(--secondary-font-color);
            padding: 2px 5px;
            display: block;
            text-align: center;
            margin-top: 5px;
            background: transparent;
        }

        .dropdown .form_inline.type_number label {
            width: 53%;
        }

        .dropdown .form_inline.type_number input {
            width: 44%;
        }

    .dropdown footer {
        overflow: hidden;
        background: var(--primary-bg-color);
        padding: 10px;
        border-top: 1px solid var(--primary-bg-color);
        -webkit-border-radius: 0 0 6px 6px;
        -moz-border-radius: 0 0 6px 6px;
        -ms-border-radius: 0 0 6px 6px;
        -o-border-radius: 0 0 6px 6px;
        border-radius: 0 0 6px 6px;
        -webkit-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.4);
    }

    .dropdown.no_chrome {
        background: transparent;
        padding: 0;
        border: none;
        z-index: 1000;
        -webkit-border-radius: 0 0 8px 8px;
        -moz-border-radius: 0 0 8px 8px;
        -ms-border-radius: 0 0 8px 8px;
        -o-border-radius: 0 0 8px 8px;
        border-radius: 0 0 8px 8px;
    }

        .dropdown.no_chrome .content {
            padding-top: 5px;
            -webkit-box-shadow: inset 0px -2px 3px rgba(148, 148, 148, 0.7);
            -moz-box-shadow: inset 0px -2px 3px rgba(148, 148, 148, 0.7);
            box-shadow: inset 0px -2px 3px rgba(148, 148, 148, 0.7);
            -webkit-border-radius: 0 0 8px 8px;
            -moz-border-radius: 0 0 8px 8px;
            -ms-border-radius: 0 0 8px 8px;
            -o-border-radius: 0 0 8px 8px;
            border-radius: 0 0 8px 8px;
        }

/* 
#Widgets
Widgets typically contain repeatable "boxed" functionality. We have defined a few different widget types to handle the different functionality and styling requirements of the app. 
The styling for each widget type is more specifically defined in their individual context. The general styling is kept bare by design to enable greater flexibility with styling on the child widgets.

Widgets are found within panels, and specifically within content wrappers inside panels. Widgets will not reside in a header element.  
They differ from 'components' in that their functionlity is self-contained, whereas a component will offer assistive functionality to other panels or widgets.
```
<div class="widget">
    <div class="header">
        <h3>Widget Header</h3>
    </div>
    <div class="content">
        <p>Widget content</p>
    </div>
</div>

```

*/
.widget {
    border-top: none;
    border-bottom: none;
}

    .widget > .header {
        min-height: 0;
        *zoom: 1;
    }

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

        .widget > .header > * {
            padding: 5px 10px;
            line-height: 29px;
            top: 0;
            margin: 0;
        }

        .widget > .header h2 {
            color: var(--primary-font-color);
            padding-right: 5px;
        }

        .widget > .header h3 {
            text-shadow: none;
        }

        .widget > .header small {
            float: right;
        }

        .widget > .header .num {
            position: absolute;
            right: -2px;
            top: -2px;
        }

        .widget > .header .btn {
            line-height: 19px;
        }

    .widget > .content {
        *zoom: 1;
    }

        .widget > .content:after {
            content: "";
            display: table;
            clear: both;
        }

        .widget > .content > * {
            padding: 10px 30px 20px 30px;
        }

        .widget > .content .nodata {
            padding: 10px 30px 20px 10px;
        }

        .widget > .content ul {
            list-style: none;
            margin: 0;
            padding: 0;
            border-bottom: 0;
        }

        .widget > .content.nodata > * {
            padding: 10px 10px 20px;
        }

        .widget > .content .heat-legend-vertical {
            margin-left: 51px;
        }

.highlight .panel .widget {
    border-left: 1px solid var(--secondary-bg-color);
}

.highlight .panel:first-child .widget {
    border-left: 0 solid transparent;
}

.highlight .widget .header {
    padding-top: 10px;
}

    .highlight .widget .header > * {
        padding: 5px 0;
        margin: 0 20px;
        line-height: 29px;
        top: 0;
    }

.highlight.split-2 .panel:nth-child(2) .widget:first-child,
.highlight.split-2 .panel:nth-child(1) .widget:first-child {
    border-top: 0 solid transparent;
}

/* 
#Modal Styles

```

*/
/* Modal Styles */
.messageBox {
    width: 500px;
    background: var(--secondary-bg-color);
}

    .messageBox a.sign-in {
        font-size: 12px;
        text-shadow: 0 0 1px black;
        padding: 4px 15px;
        letter-spacing: 0;
    }

    .messageBox .modal-countdown {
        min-height: 280px;
        text-shadow: none;
        text-align: center;
        margin: 10px;
        background: var(--tertiary-bg-color);
        height: auto;
        overflow-y: hidden;
    }

        .messageBox .modal-countdown .modal-timer {
            width: 170px;
            padding: 15px 15px 12px 15px;
            background: var(--primary-bg-color);
            -webkit-border-radius: 5px 5px 5px 5px;
            -moz-border-radius: 5px 5px 5px 5px;
            -ms-border-radius: 5px 5px 5px 5px;
            -o-border-radius: 5px 5px 5px 5px;
            border-radius: 5px 5px 5px 5px;
            margin: 0 auto 0;
        }

            .messageBox .modal-countdown .modal-timer .flip-clock-wrapper {
                margin: 0 auto 0;
                width: 140px;
            }

        .messageBox .modal-countdown p {
            width: 90%;
            line-height: 1.3em;
            padding: 20px 0;
            margin: 0 auto 0;
            display: block;
            font-size: 16px;
        }

    .messageBox .modal-disclaimer {
        min-height: 280px;
        text-shadow: none;
        text-align: center;
        margin: 10px;
        background: var(--tertiary-bg-color);
        height: auto;
        overflow-y: hidden;
    }

        .messageBox .modal-disclaimer p {
            font-size: 12px;
            padding: 30px 0;
            text-align: left;
            width: 90%;
            margin: 0 auto 0;
        }

    .messageBox .modal-alert {
        min-height: 280px;
        text-shadow: none;
        text-align: center;
        margin: 10px;
        background: var(--tertiary-bg-color);
        height: auto;
        overflow-y: hidden;
    }

        .messageBox .modal-alert p {
            width: 90%;
            line-height: 1.3em;
            padding-top: 80px;
            margin: 0 auto 0;
            display: block;
            font-size: 16px;
        }

    .messageBox .modal-content-scroll {
        max-height: 280px;
        overflow-y: scroll;
        padding: 0px;
        margin: 10px;
        background: var(--tertiary-bg-color);
        height: auto;
    }

    .messageBox .content {
        max-height: 280px;
    }

    .messageBox .modal-body {
        padding: 0px;
        margin: 10px;
        background: var(--tertiary-bg-color);
        height: auto;
        overflow-y: hidden;
    }

        .messageBox .modal-body .actionbar {
            background: #404040;
            padding: 10px 15px;
        }

        .messageBox .modal-body .split-2 {
            border-top: 1px solid black;
        }

        .messageBox .modal-body .full-width {
            padding: 0;
            height: 170px;
        }

            .messageBox .modal-body .full-width tr td {
                padding: 2px;
            }

        .messageBox .modal-body .widget {
            padding: 5px 10px 5px 10px;
            border-left: 1px solid black;
            border-bottom: 0;
        }

            .messageBox .modal-body .widget:first-child {
                border-left: 0px solid black;
                padding: 5px 10px 5px 10px;
            }

            .messageBox .modal-body .widget .content {
                height: 100px;
            }

                .messageBox .modal-body .widget .content form {
                    padding: 0;
                }

                    .messageBox .modal-body .widget .content form label {
                        width: 100%;
                        text-align: center;
                    }

            .messageBox .modal-body .widget .radio li {
                display: block;
                border-bottom: 0;
                list-style: none;
                float: left;
                width: 50%;
            }

            .messageBox .modal-body .widget small {
                display: inline-table;
            }

        .messageBox .modal-body table tr {
            margin-bottom: 10px;
        }

        .messageBox .modal-body table td {
            font-size: 11px;
            border-left: 0;
            line-height: 14px;
            text-shadow: none;
            vertical-align: top;
        }

        .messageBox .modal-body table .desc {
            width: 120px;
            padding-bottom: 6px;
        }

        .messageBox .modal-body .copy {
            margin: 0;
            padding: 0 15px 5px 0;
            font-size: 11px;
            color: #acacac;
            line-height: 14px;
        }

        .messageBox .modal-body .modal-save {
            padding: 15px;
        }

        .messageBox .modal-body .modal-edit {
            background: var(--primary-bg-color);
            padding: 15px;
            border-bottom: 1px solid var(--secondary-bg-color);
        }

            .messageBox .modal-body .modal-edit input {
                border: 1px solid var(--primary-bg-color);
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                -ms-border-radius: 4px;
                -o-border-radius: 4px;
                border-radius: 4px;
                background: var(--secondary-bg-color);
                min-width: 330px;
                font-size: 13px;
                padding: 5px;
                margin: 0 0 10px 0;
            }

            .messageBox .modal-body .modal-edit textarea {
                border: 1px solid var(--primary-bg-color);
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                -ms-border-radius: 4px;
                -o-border-radius: 4px;
                border-radius: 4px;
                background: var(--secondary-bg-color);
                min-width: 358px;
                min-height: 75px;
                font-size: 13px;
                padding: 5px;
            }

            .messageBox .modal-body .modal-edit button {
                position: relative;
                right: 10px;
                float: right;
                clear: right;
                margin-top: 0;
            }

        .messageBox .modal-body ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

            .messageBox .modal-body ul .highlight {
                border-bottom: 0;
            }

            .messageBox .modal-body ul li {
                border-bottom: 1px solid var(--secondary-bg-color);
                padding: 1px 0 8px 0;
            }

                .messageBox .modal-body ul li h3 {
                    display: inline-block;
                    padding-right: 4px;
                    padding-left: 15px;
                }

                .messageBox .modal-body ul li i {
                    display: inline-block;
                    float: right;
                    margin-right: 5px;
                    margin-top: 5px;
                }

                    .messageBox .modal-body ul li i.i-settings-menu {
                        cursor: pointer;
                    }

                .messageBox .modal-body ul li small {
                    display: inline-block;
                    padding-right: 4px;
                }

                .messageBox .modal-body ul li p {
                    margin: 0;
                    padding: 0 15px 5px 15px;
                    font-size: 11px;
                    color: #acacac;
                }

                .messageBox .modal-body ul li button {
                    margin-left: 15px;
                }

        .messageBox .modal-body textarea {
            border: 1px solid black;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            -o-border-radius: 4px;
            border-radius: 4px;
            background: #eff0f1;
            min-width: 380px;
            min-height: 100px;
            font-size: 13px;
        }

        .messageBox .modal-body h3 {
            text-shadow: none;
            margin-bottom: 5px;
            padding: 0;
        }

        .messageBox .modal-body .no_chrome {
            width: 380px;
        }

    .messageBox .modal-header {
        background: var(--primary-bg-color);
        font-weight: bold;
        border-top: 2px solid var(--primary-bg-color);
        border-bottom: 1px solid var(--primary-bg-color);
        line-height: 32px;
    }

        .messageBox .modal-header h3 {
            font-weight: bold;
            font-size: 14px;
            margin: 5px 15px;
            line-height: 22px;
        }

            .messageBox .modal-header h3 small.modal-header-title-sub {
                display: inline-block;
                color: #d4d4d4;
                font-weight: normal;
                font-size: 12px;
            }

    .messageBox .modal-thankyou {
        margin: 125px 0 200px 0;
    }

    .messageBox .modal-body p {
        font-size: 12px;
        border-bottom: 1px solid var(--tertiary-bg-color);
        margin: 12px 15px;
        padding: 16px 0;
        letter-spacing: 0;
    }

        .messageBox .modal-body p.msg {
            font-size: 18px;
            text-align: center;
            border: 0;
            padding: 0;
        }

        .messageBox .modal-body p.error {
            background: #f0f0f0;
            color: #961418;
            padding: 7px 10px;
            font-style: normal;
            font-weight: bold;
        }

    .messageBox .modal-body .m-fixed {
        min-height: 280px;
    }

        .messageBox .modal-body .m-fixed input {
            margin-left: 0;
        }

    .messageBox .modal-body input {
        border: 1px solid var(--primary-bg-color);
        color: var(--primary-font-color);
        padding: 3px 0 3px 10px;
        font-size: 13px;
        background: var(--secondary-bg-color);
        width: 80%;
        margin: 5px 0 5px 10px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
    }

    .messageBox .modal-body .selectfilter input[type=text] {
        border: 0;
        padding: 3px 5px;
        background: #eff0f1;
        width: 355px;
        margin: 0;
    }

    .messageBox .modal-body h4 {
        text-align: center;
        font-size: 28px;
        margin-bottom: 0;
        font-weight: normal;
    }

    .messageBox .modal-body fieldset {
        border: 0;
        width: 80%;
        margin: 12px auto 0;
    }

        .messageBox .modal-body fieldset ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

            .messageBox .modal-body fieldset ul li label {
                display: block;
                font-size: 12px;
                font-weight: bold;
                color: var(--primary-font-color);
                padding-left: 0;
            }

                .messageBox .modal-body fieldset ul li label span {
                    float: right;
                    font-size: 11px;
                    color: #868686;
                    font-weight: normal;
                    letter-spacing: 0;
                    text-shadow: none;
                }

            .messageBox .modal-body fieldset ul li input {
                -webkit-border-radius: 4px;
                -moz-border-radius: 4px;
                -ms-border-radius: 4px;
                -o-border-radius: 4px;
                border-radius: 4px;
                border: 1px solid black;
                color: #626262;
                padding: 3px 0 3px 10px;
                font-size: 13px;
                background: #f0f0f0;
                width: 100%;
                margin-bottom: 10px;
            }

            .messageBox .modal-body fieldset ul li:last-child a {
                margin: 30px 0;
            }

    .messageBox .modal-body .modal-buttons {
        background: #2a2a2a;
        padding-top: 10px;
    }

    .messageBox .modal-body .edit li {
        border-bottom: 0;
    }

    .messageBox .modal-body .listing {
        height: 280px;
    }

        .messageBox .modal-body .listing li {
            padding: 1px 0 2px 0;
        }

            .messageBox .modal-body .listing li .checkbox {
                position: relative;
                left: 10px;
            }

                .messageBox .modal-body .listing li .checkbox [type="checkbox"]:not(:checked) + span:after, .messageBox .modal-body .listing li .checkbox [type="checkbox"]:checked + span:after {
                    top: 6px;
                }

                .messageBox .modal-body .listing li .checkbox span {
                    font-size: 12px;
                    text-transform: capitalize;
                    text-shadow: none;
                }

            .messageBox .modal-body .listing li [type="checkbox"]:not(:checked) + span:before, .messageBox .modal-body .listing li [type="checkbox"]:checked + span:before {
                top: 3px;
            }

        .messageBox .modal-body .listing .modal-buttons {
            background: #404040;
        }

    .messageBox .modal-body.modal-body_withFieldSelect {
        background-color: transparent;
    }

    .messageBox .modal-body .c-fieldselect {
        padding: 0;
        border-top: none;
        background-color: transparent;
    }

        .messageBox .modal-body .c-fieldselect .split-2 {
            border-top: none;
        }

        .messageBox .modal-body .c-fieldselect .content > div .content {
            height: 300px;
        }

        .messageBox .modal-body .c-fieldselect ul li {
            padding-bottom: 0;
            padding-top: 0;
            background: transparent;
        }

            .messageBox .modal-body .c-fieldselect ul li ul li .i-tree-closed {
                left: 11px;
                position: absolute;
                top: 8px;
            }

            .messageBox .modal-body .c-fieldselect ul li ul li .i-tree-open {
                left: 11px;
                position: absolute;
                top: 10px;
            }

            .messageBox .modal-body .c-fieldselect ul li .icon, .messageBox .modal-body .c-fieldselect ul li .content .fieldcategories li:after, .messageBox .modal-body .c-fieldselect .content .fieldcategories ul li li:after, .messageBox .modal-body .c-fieldselect ul li .content .fieldsubcategories li:after, .messageBox .modal-body .c-fieldselect .content .fieldsubcategories ul li li:after {
                margin-top: 0;
                float: none;
            }

            .messageBox .modal-body .c-fieldselect ul li ul li {
                background: var(--secondary-bg-color);
            }

        .messageBox .modal-body .c-fieldselect .availablefields .fields {
            height: 220px;
        }

    .messageBox .modal-body .c-fieldselect-searchbar {
        padding: 5px;
    }

        .messageBox .modal-body .c-fieldselect-searchbar input {
            width: 95%;
        }

        .messageBox .modal-body .c-fieldselect-searchbar span {
            border-top: 0;
        }

    .messageBox .modal-body.c-compareto {
        border-top: none;
    }

    .messageBox .modal-footer {
        background: var(--primary-bg-color);
        text-align: center;
        border-top: 1px solid var(--primary-bg-color);
        padding: 15px 0;
    }

.modal-createNewWatchlist .modal-body .form_inline {
    display: flex;
}

    .modal-createNewWatchlist .modal-body .form_inline label {
        font-size: 12px;
        text-shadow: none;
        line-height: 23px;
        margin-top: 5px;
        margin-left: 10px;
        margin-right: 10px;
        white-space: nowrap;
    }

    .modal-createNewWatchlist .modal-body .form_inline input {
        margin-right: 10px;
    }

table.c-datagrid {
    color: var(--primary-font-color);
    font-size: 12px;
    padding: 14px 0 14px 10px;
    letter-spacing: 0;
    border-bottom: 1px solid var(--tertiary-bg-color);
    /* Johanna table-layout: fixed; */
    width: auto;
    clear: both;
    margin-right: 1px;
}

    table.c-datagrid tr > * {
        border-top: none;
        border-bottom: none;
        padding: 3px 10px 3px 8px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

        table.c-datagrid tr > *:last-child {
            border-right: 1px solid #181818;
        }

    table.c-datagrid tr th, table.c-datagrid tr td {
        border-top: 1px solid #222222;
    }

        table.c-datagrid tr th .title-dropdow, table.c-datagrid tr td .title-dropdow {
            background: black;
        }

        table.c-datagrid tr th .cell_nowrap, table.c-datagrid tr td .cell_nowrap {
            max-width: 100%;
            text-overflow: ellipsis;
            -ms-text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block;
            position: relative;
        }

            table.c-datagrid tr th .cell_nowrap a, table.c-datagrid tr td .cell_nowrap a {
                width: 130px;
                display: inline-flex;
                max-width: 100%;
                text-overflow: ellipsis;
                -ms-text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            table.c-datagrid tr th .cell_nowrap.with_sort, table.c-datagrid tr td .cell_nowrap.with_sort {
                padding-right: 20px;
                color: var(--primary-font-color);
            }

                table.c-datagrid tr th .cell_nowrap.with_sort a .icon, table.c-datagrid tr th .cell_nowrap.with_sort a .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .content .fieldcategories table.c-datagrid tr th .cell_nowrap.with_sort a li:after, table.c-datagrid tr th .cell_nowrap.with_sort a .c-fieldselect .content .fieldsubcategories li:after, .c-fieldselect .content .fieldsubcategories table.c-datagrid tr th .cell_nowrap.with_sort a li:after, table.c-datagrid tr td .cell_nowrap.with_sort a .icon, table.c-datagrid tr td .cell_nowrap.with_sort a .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .content .fieldcategories table.c-datagrid tr td .cell_nowrap.with_sort a li:after, table.c-datagrid tr td .cell_nowrap.with_sort a .c-fieldselect .content .fieldsubcategories li:after, .c-fieldselect .content .fieldsubcategories table.c-datagrid tr td .cell_nowrap.with_sort a li:after {
                    position: absolute;
                    right: 0;
                    margin-right: 0;
                }

        table.c-datagrid tr th .with_sort, table.c-datagrid tr td .with_sort {
            cursor: pointer;
        }

    table.c-datagrid tr th {
        border-left: 0;
        font-weight: normal;
        text-shadow: 0 1px 0 black;
    }

        table.c-datagrid tr th.val {
            text-align: right;
        }

        table.c-datagrid tr th.coltitle {
            text-align: right;
            font-weight: bold;
            font-size: 14px;
            background: #1c1c1c;
            color: var(--primary-font-color);
            border-left: 0;
        }

        table.c-datagrid tr th.val {
            width: 120px;
        }

        table.c-datagrid tr th.coltitle {
            width: 120px;
        }

        table.c-datagrid tr th.sorting, table.c-datagrid tr th.sorting_asc, table.c-datagrid tr th.sorting_desc {
            cursor: pointer;
        }

        table.c-datagrid tr th a {
            padding-left: 0;
            font-size: 12px;
        }

        table.c-datagrid tr th small.meta {
            display: inline-block;
            vertical-align: baseline;
        }

    table.c-datagrid tr td {
        font-size: 11px;
        border-left: 0;
        text-shadow: none;
        line-height: 14px;
        padding: 8px 10px;
        color: var(--primary-font-color);
    }

        table.c-datagrid tr td:first-child {
            text-align: left;
        }

        table.c-datagrid tr td:nth-child(2) {
            padding-left: 10px;
        }

        table.c-datagrid tr td span.pull-left {
            color: #1c1c1c;
            font-size: 11px;
        }

    table.c-datagrid tr .title-dropdown {
        text-align: left;
        font-weight: bold;
        font-size: 14px;
        background: #1c1c1c;
        color: var(--primary-font-color);
        min-width: 265px;
    }

    table.c-datagrid tr .with-tooltip {
        position: relative;
        display: block;
        line-height: 16px;
    }

        table.c-datagrid tr .with-tooltip .icon, table.c-datagrid tr .with-tooltip .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .content .fieldcategories table.c-datagrid tr .with-tooltip li:after, table.c-datagrid tr .with-tooltip .c-fieldselect .content .fieldsubcategories li:after, .c-fieldselect .content .fieldsubcategories table.c-datagrid tr .with-tooltip li:after {
            position: absolute;
            top: 1px;
        }

            table.c-datagrid tr .with-tooltip .icon + *, table.c-datagrid tr .with-tooltip .c-fieldselect .content .fieldcategories li:after + *, .c-fieldselect .content .fieldcategories table.c-datagrid tr .with-tooltip li:after + *, table.c-datagrid tr .with-tooltip .c-fieldselect .content .fieldsubcategories li:after + *, .c-fieldselect .content .fieldsubcategories table.c-datagrid tr .with-tooltip li:after + * {
                margin-left: 20px;
            }

        table.c-datagrid tr .with-tooltip span {
            margin-left: 0px;
        }

        table.c-datagrid tr .with-tooltip .cell-data {
            margin-left: 20px;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

    table.c-datagrid tr.table_group_row .with-tooltip .icon, table.c-datagrid tr.table_group_row .with-tooltip .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .content .fieldcategories table.c-datagrid tr.table_group_row .with-tooltip li:after, table.c-datagrid tr.table_group_row .with-tooltip .c-fieldselect .content .fieldsubcategories li:after, .c-fieldselect .content .fieldsubcategories table.c-datagrid tr.table_group_row .with-tooltip li:after {
        display: inline-block;
        position: relative;
        top: 0;
        margin-top: 1px;
    }

        table.c-datagrid tr.table_group_row .with-tooltip .icon + *, table.c-datagrid tr.table_group_row .with-tooltip .c-fieldselect .content .fieldcategories li:after + *, .c-fieldselect .content .fieldcategories table.c-datagrid tr.table_group_row .with-tooltip li:after + *, table.c-datagrid tr.table_group_row .with-tooltip .c-fieldselect .content .fieldsubcategories li:after + *, .c-fieldselect .content .fieldsubcategories table.c-datagrid tr.table_group_row .with-tooltip li:after + * {
            margin-left: 0;
            float: right;
        }

    table.c-datagrid thead {
        border-bottom: none;
        border-top: none;
    }

        table.c-datagrid thead tr:nth-child(odd) td {
            background: #222222;
            border-top: #363636;
            padding: 4px 10px;
        }

        table.c-datagrid thead tr:nth-child(odd):first-child td:first-child {
            background: transparent;
            border-top: none;
            border-bottom: none;
            border-left: none;
        }

            table.c-datagrid thead tr:nth-child(odd):first-child td:first-child.coltitle {
                background: #222222;
            }

        table.c-datagrid thead th {
            height: 44px;
            background: var(--primary-bg-color);
            border: none;
            border-top: 1px solid var(--tertiary-bg-color);
            border-left: 1px solid var(--tertiary-bg-color);
            padding: 10px;
            font-weight: bold;
            color: var(--primary-font-color);
            font-size: 12px;
            text-align: left;
           
        }

            table.c-datagrid thead th:last-child {
                -webkit-box-shadow: inset -1px 1px 0 var(--tertiary-bg-color);
                -moz-box-shadow: inset -1px 1px 0 var(--tertiary-bg-color);
                box-shadow: inset -1px 1px 0 var(--tertiary-bg-color);
            }

            table.c-datagrid thead th .icon, table.c-datagrid thead th .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .content .fieldcategories table.c-datagrid thead th li:after, table.c-datagrid thead th .c-fieldselect .content .fieldsubcategories li:after, .c-fieldselect .content .fieldsubcategories table.c-datagrid thead th li:after {
                position: relative;
                top: 3px;
                margin-right: 5px;
            }

        table.c-datagrid thead td {
            font-size: 10px;
            color: #7a7a7a;
            background: #222222;
            text-align: right;
            right: 0;
        }

            table.c-datagrid thead td:first-child {
                background: transparent;
                border-top: none;
                border-left: none;
            }

                table.c-datagrid thead td:first-child:after {
                    content: "";
                    width: 1px;
                    height: 1px;
                    background: transparent;
                    border-right: 1px solid var(--tertiary-bg-color);
                    border-bottom: 1px solid var(--tertiary-bg-color);
                    position: absolute;
                    top: 0;
                    left: 200px;
                }

                table.c-datagrid thead td:first-child + th {
                    -webkit-box-shadow: inset 0 1px 0 var(--tertiary-bg-color), inset 1px 0 0 var(--tertiary-bg-color), inset -1px 0 0 var(--tertiary-bg-color);
                    -moz-box-shadow: inset 0 1px 0 var(--tertiary-bg-color), inset 1px 0 0 var(--tertiary-bg-color), inset -1px 0 0 var(--tertiary-bg-color);
                    box-shadow: inset 0 1px 0 var(--tertiary-bg-color), inset 1px 0 0 var(--tertiary-bg-color), inset -1px 0 0 var(--tertiary-bg-color);
                }

        table.c-datagrid thead .colgroup-parents th a {
            font-size: 11px;
        }

        table.c-datagrid thead .colgroup-children > th {
            padding: 0;
            height: auto;
        }

            table.c-datagrid thead .colgroup-children > th:first-child {
                -webkit-box-shadow: none;
                -moz-box-shadow: none;
                box-shadow: none;
            }

            table.c-datagrid thead .colgroup-children > th:not(:first-child) {
                -webkit-box-shadow: inset -1px 0 0 var(--tertiary-bg-color);
                -moz-box-shadow: inset -1px 0 0 var(--tertiary-bg-color);
                box-shadow: inset -1px 0 0 var(--tertiary-bg-color);
                text-align: center;
                font-weight: normal;
                color: #989898;
                background: var(--primary-bg-color);
                font-size: 11px;
                padding: 0 5px;
                text-shadow: none;
            }

            table.c-datagrid thead .colgroup-children > th:nth-child(2) {
                -webkit-box-shadow: inset 1px 0 0 var(--tertiary-bg-color), inset -1px 0 0 var(--tertiary-bg-color);
                -moz-box-shadow: inset 1px 0 0 var(--tertiary-bg-color), inset -1px 0 0 var(--tertiary-bg-color);
                box-shadow: inset 1px 0 0 var(--tertiary-bg-color), inset -1px 0 0 var(--tertiary-bg-color);
            }

            table.c-datagrid thead .colgroup-children > th.colgroup-emptychild {
                background: #1c1c1c;
            }

    table.c-datagrid tbody th {
        border-top: 1px solid var(--tertiary-bg-color);
        font-weight: bold;
        text-shadow: none;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    table.c-datagrid tbody td {
        border-top: 1px solid var(--tertiary-bg-color);
        text-shadow: none;
    }

        table.c-datagrid tbody td:nth-child(odd) {
            border-top-color: var(--tertiary-bg-color);
        }

    table.c-datagrid tbody tr.table_group_row > th {
        background: var(--primary-bg-color);
        padding: 7px 8px;
        font-size: 14px;
        font-weight: bold;
        color: var(--primary-font-color);
        border-top-color: var(--primary-bg-color);
        -webkit-box-shadow: inset 0 1px 0 var(--primary-bg-color);
        -moz-box-shadow: inset 0 1px 0 var(--primary-bg-color);
        box-shadow: inset 0 1px 0 var(--primary-bg-color);
    }

        table.c-datagrid tbody tr.table_group_row > th.table_group_header {
            cursor: pointer;
        }

        table.c-datagrid tbody tr.table_group_row > th span {
            font-size: 12px;
        }

    table.c-datagrid tbody tr.table_group_row th:last-child {
        -webkit-box-shadow: inset 0 1px 0 var(--primary-bg-color), inset -1px 0 0 var(--primary-bg-color);
        -moz-box-shadow: inset 0 1px 0 var(--primary-bg-color), inset -1px 0 0 var(--primary-bg-color);
        box-shadow: inset 0 1px 0 var(--primary-bg-color), inset -1px 0 0 var(--primary-bg-color);
        border-bottom: none;
    }

    table.c-datagrid tbody tr.table_group_row:first-child > th.table_group_header_spacer {
        width: 100%;
    }

    table.c-datagrid tbody tr.table_group_row:first-child > th:first-child {
        -webkit-box-shadow: inset 0 1px 0 var(--primary-bg-color);
        -moz-box-shadow: inset 0 1px 0 var(--primary-bg-color);
        box-shadow: inset 0 1px 0 var(--primary-bg-color);
        border-top: var(--primary-bg-color) 1px solid;
    }

    table.c-datagrid tbody tr.loading_cells > td {
        padding: 0;
        height: 60px;
    }

    table.c-datagrid tbody .with_sort a {
        color: var(--primary-font-color);
    }

    table.c-datagrid tbody tr.currencybar th, table.c-datagrid.striped tbody tr.currencybar th {
        padding: 3px 5px;
        font-size: 10px;
        color: var(--primary-font-color);
        background: var(--primary-input-bg-color);
        text-align: right;
        right: 0;
        letter-spacing: 0.05em;
        font-weight: normal;
    }

    table.c-datagrid.striped.col-striped tbody tr.table_group_row > th {
        background: var(--primary-bg-color);
    }

    table.c-datagrid .actions {
        vertical-align: top;
    }

        table.c-datagrid .actions > * {
            margin-top: 5px;
        }

        table.c-datagrid .actions .c-dateSelect.date-single fieldset label {
            border-right: none;
        }

            table.c-datagrid .actions .c-dateSelect.date-single fieldset label span {
                margin-right: 10px;
            }

            table.c-datagrid .actions .c-dateSelect.date-single fieldset label input {
                width: 85px;
            }

            table.c-datagrid .actions .c-dateSelect.date-single fieldset label .icon, table.c-datagrid .actions .c-dateSelect.date-single fieldset label .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .content .fieldcategories table.c-datagrid .actions .c-dateSelect.date-single fieldset label li:after, table.c-datagrid .actions .c-dateSelect.date-single fieldset label .c-fieldselect .content .fieldsubcategories li:after, .c-fieldselect .content .fieldsubcategories table.c-datagrid .actions .c-dateSelect.date-single fieldset label li:after {
                top: 1px;
            }

    table.c-datagrid.full-width {
        width: 100%;
    }

    table.c-datagrid.viewtype-table-pivoted thead th a {
        color: var(--primary-font-color);
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
        white-space: nowrap;
    }

    table.c-datagrid.viewtype-table-pivoted thead th.val {
        text-align: right;
    }

    table.c-datagrid.viewtype-table-pivoted thead td {
        background-color: transparent;
    }

    table.c-datagrid.viewtype-table-pivoted thead .table_group_row th {
        border-left: 1px solid #181818;
        border-top: 1px solid #181818;
        -webkit-box-shadow: inset 0 1px 0 var(--tertiary-bg-color), inset 1px 0 0 var(--tertiary-bg-color);
        -moz-box-shadow: inset 0 1px 0 var(--tertiary-bg-color), inset 1px 0 0 var(--tertiary-bg-color);
        box-shadow: inset 0 1px 0 var(--tertiary-bg-color), inset 1px 0 0 var(--tertiary-bg-color);
    }

    table.c-datagrid.viewtype-table-pivoted thead .table_group_row .table_group_header.group_collapsed {
        -webkit-box-shadow: inset 0 1px 0 var(--tertiary-bg-color), inset 1px 0 0 var(--tertiary-bg-color), inset -1px 0 0 var(--tertiary-bg-color);
        -moz-box-shadow: inset 0 1px 0 var(--tertiary-bg-color), inset 1px 0 0 var(--tertiary-bg-color), inset -1px 0 0 var(--tertiary-bg-color);
        box-shadow: inset 0 1px 0 var(--tertiary-bg-color), inset 1px 0 0 var(--tertiary-bg-color), inset -1px 0 0 var(--tertiary-bg-color);
    }

        table.c-datagrid.viewtype-table-pivoted thead .table_group_row .table_group_header.group_collapsed + th:not(.group_collapsed):before {
            content: "";
            width: 2px;
            height: 2px;
            border-right: 1px solid var(--tertiary-bg-color);
            border-bottom: 1px solid var(--tertiary-bg-color);
            position: relative;
            top: 34px;
            left: -12px;
            display: block;
        }

    table.c-datagrid.viewtype-table-pivoted thead .table_group_sub_row td {
        height: 44px;
        background: #1c1c1c;
        border: none;
        border-top: 1px solid #181818;
        padding: 10px;
        -webkit-box-shadow: inset 0 1px 0 var(--tertiary-bg-color);
        -moz-box-shadow: inset 0 1px 0 var(--tertiary-bg-color);
        box-shadow: inset 0 1px 0 var(--tertiary-bg-color);
    }

    table.c-datagrid.viewtype-table-pivoted tbody th {
        overflow: hidden;
        text-overflow: ellipsis;
        -ms-text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 100%;
    }

    table.c-datagrid.viewtype-table-pivoted tbody tr > * {
        border-top: none;
        border-bottom: none;
        line-height: 20px;
        padding: 3px 10px 3px 8px;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

.c-autocomplete fieldset {
    display: inline-block;
    border: 1px solid var(--primary-bg-color);
    background: var(--tertiary-bg-color);
    height: 24px;
    padding: 0;
    width: 100%;
    position: relative;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

.c-autocomplete input {
    background-color: transparent;
    border: none;
    padding: 1px 20px 1px 10px;
    color: var(--primary-font-color);
    width: 100%;
    height: 19px;
    font-size: 11px;
}

    .c-autocomplete input:focus {
        outline: none !important;
    }

.c-autocomplete button.show-all {
    padding: 4px;
    background-color: transparent;
    border: none;
    position: absolute;
    top: 0;
    right: 0;
}

    .c-autocomplete button.show-all:focus {
        outline: none !important;
    }

    .c-autocomplete button.show-all .icon, .c-autocomplete button.show-all .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .content .fieldcategories .c-autocomplete button.show-all li:after, .c-autocomplete button.show-all .c-fieldselect .content .fieldsubcategories li:after, .c-fieldselect .content .fieldsubcategories .c-autocomplete button.show-all li:after {
        top: 0;
        margin-right: 0;
    }

.ui-autocomplete li.ui-menu-item a.ui-state-hover, .ui-autocomplete li.ui-menu-item a:hover, .ui-autocomplete li.ui-menu-item:hover a {
    color: var(--primary-font-color);
    background: rgba(30, 30, 30, 0.85);
    border: none;
}

.ui-autocomplete {
    background: var(--tertiary-bg-color);
    margin: 0;
    padding: 10px;
    border: none;
    font-size: 12px;
    border-radius: 0 5px 5px 5px;
}

    .ui-autocomplete li.ui-menu-item {
        float: none;
        width: 100%;
        color: var(--primary-font-color);
        border-bottom: 1px solid var(--primary-bg-color);
        line-height: 25px;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
    }

        .ui-autocomplete li.ui-menu-item a {
            display: block;
            padding: 0 7px;
            cursor: pointer;
            text-decoration: none;
            font-size: 11px;
            line-height: 25px;
            font-weight: normal;
            color: var(--primary-font-color);
            font-family: "ArialMT", Arial, Helvetica, sans-serif;
            letter-spacing: 0;
        }

            .ui-autocomplete li.ui-menu-item a.ui-state-focus {
                margin: 0;
                background: none;
                border: none;
            }

            .ui-autocomplete li.ui-menu-item a.ui-corner-all {
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                -ms-border-radius: 0;
                -o-border-radius: 0;
                border-radius: 0;
            }

        .ui-autocomplete li.ui-menu-item:hover {
            background: none;
            border: none;
        }

/* 
#Content View Panel
The __Content View__ panel is simply a panel that contains text/article content.  


##Standard with SENS formatting
Shown here, the __News panel__ on the Instrument Landing page.
```
<style>
.codedemo .contentview {padding-top:1px;}
</style>
<div class="panel contentview">
    <div class="content">
        <small class="time">Source: SENS - 09 December 2013, 3:03:00 pm</small>
        <h2>Dealings by Company Secretary</h2>
        <div><!--?xml version="1.0" encoding="utf-16"?-->
<pre>
Dealings by Company Secretary

NASPERS LIMITED
(Incorporated in the Republic of South Africa)
(Registration number 1925/001431/06)
Share code: NPN ISIN: ZAE000015889
LSE ADS code: NPSN ISIN: US 6315121003
(‘Naspers’ or ‘the company’)


  In compliance with Rules 3.63 – 3.74 of the JSE Listings Requirements, the following
                               information is disclosed:-


Company Secretary:                       Mrs G Kisbey-Green
Company:                                 Naspers Limited
Transaction date:                        6 December 2013
Nature of transaction:                   on market sale
Number of shares:                        16 695 Naspers shares
Class of shares:                         N ordinary
Total value of transaction:              R16 760 056,49
Average price per share:                 R1 003,90
Highest price per share:                 R1 010,13
Lowest price per share:                  R1 000,52
Date of vesting in the group
share-based incentive plan:              Mrs Kisbey-Green sold vested shares held in the
                                         Naspers Share Trust with the following vesting
                                         dates: 1 722 shares on 22 September 2012 and 1 724
                                         shares on 22 September 2013 ; and
                                         MIH Holdings Share Trust with the following
                                         vesting dates: 3 725 shares on 28 June 2012; 4 762
                                         shares on 12 March 2012; 4 762 shares on 12 March
                                         2013.
Nature of transaction:                   Sale of vested shares held in the Naspers Share
                                         Incentive Trust and the MIH Holdings Share Trust
Nature of interest:                      Beneficial
Clearance:                               Clearance has been received in terms of paragraph
                                         3.66 of the JSE Listings Requirements

Cape Town
9 December 2013
Sponsor: Investec Bank Limited

Date: 09/12/2013 03:00:00 Produced by the JSE SENS Department. The SENS service is an information dissemination service administered by the JSE Limited ('JSE'). 
The JSE does not, whether expressly, tacitly or implicitly, represent, warrant or in any way guarantee the truth, accuracy or completeness of
 the information published on SENS. The JSE, their officers, employees and agents accept no liability for (or in respect of) any direct, 
indirect, incidental or consequential loss or damage of any kind or nature, howsoever arising, from the use of SENS or the use of, or reliance on,
 information disseminated through SENS.
</pre>

        </div>
    </div>
</div>
```
*/
.panel.contentview {
    background: var(--secondary-bg-color);
    font-size: 16px;
}

    .panel.contentview .content {
        background: var(--secondary-bg-color);
        padding: 0 20px 20px;
        font-size: 16px;
    }

        .panel.contentview .content > * {
            padding: 0;
            margin: 0;
        }

        .panel.contentview .content .time {
            font-size: 13px;
            color: var(--primary-font-color);
            margin: 20px 0 5px;
        }

        .panel.contentview .content h1 {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 12px;
            text-transform: uppercase;
            text-shadow: none;
        }

        .panel.contentview .content h2 {
            font-size: 19px;
            font-weight: bold;
            text-transform: none;
            padding-bottom: 15px;
            text-shadow: none;
        }

        .panel.contentview .content p {
            font-size: 16px;
            font-weight: normal;
            margin: 20px 0;
        }

        .panel.contentview .content img {
            padding: 0;
            margin: 0 20px 12px 0;
        }

        .panel.contentview .content a {
            color: #21f5a8;
        }

/* 
#Panel Views: 

## Notice
The Notice panel is used to notify a user of an event (in these cases, that they don't have access to the content or to thank them for upgrading.

## Notice: Upgrade
This template of the Notice view is used to display an upgrade path for the user.
```
<div class="panel type-notice">
    <div class="header centered" data-bind="with: unlicensed">
        <a href="#" class="btn btn-back">Back</a>
    </div>
    <div class="content full-report-error">
        <h1><i class="speech-bubble bgimg">Oops,</i><span> looks like your subscription does not give you access to this full report.</span></h1>
        <p>Why not take a look at the requested report sample.<p>
        <p>When you are ready to upgrade your subscription, click on the button below and one of our consultants will contact you to arrange the required level of access.</p>
        <div class="actions" data-bind="with: unlicensed">
            <p><a href="#" data-bind="click: upgradeAccount" class="btn btn-action w33">Please contact me, I'm interested in upgrading my subscription</a></p>
            <p><a data-bind="click: viewReportSample, clickBubble: false" class="btn btn-action">View Report Sample</a></p>
        </div>
    </div>
</div>
```


## Notice: Thank you
This Thank You template of the Notice view is used to display a thank you note once the user has requested an access upgrade.
```
<div class="panel type-notice ">
    <div class="header centered" data-bind="with: contactus">
        <a href="#" data-bind="click: navigateBack" class="btn btn-back">Back</a>
        <h2></h2>
    </div>
    <div class="content full-report-thank-you">
        <h1 class=" centered"><i class="speech-bubble bgimg">Thanks,</i></h1>
        <h3> A consultant will be in contact shortly to discuss upgrading your level of access.</h3>
        <div class="actions" data-bind="with: contactus">
            <p><a data-bind="click: viewReportSample, clickBubble: false, visible: isVisible" class="btn btn-action">View Report Sample</a></p>
        </div>
    </div>
</div>
```

*/
.type-notice .header {
    background: var(--tertiary-bg-color);
}

.type-notice .content {
    background: #0c0c0c;
    height: 640px;
}

.type-notice h1 {
    margin-bottom: 60px;
    font-size: 22px;
    font-weight: normal;
}

    .type-notice h1 span {
        z-index: 10;
        position: relative;
        left: 80px;
    }

    .type-notice h1 .speech-bubble {
        font-weight: bold;
    }

.type-notice h3 {
    font-size: 24px;
    text-align: center;
    padding: 40px 80px 0;
    line-height: 1.4;
}

.type-notice p {
    font-size: 18px;
    text-align: center;
}

.type-notice .actions {
    margin-top: 50px;
    border-top: 1px solid #565656;
    padding-top: 50px;
    text-align: center;
}

    .type-notice .actions .btn {
        font-size: 14px;
        margin: 10px auto;
    }

.full-report-error {
    padding: 125px 100px 0;
}

    .full-report-error .speech-bubble {
        position: absolute;
        top: -60px;
        left: 0;
        z-index: 1;
    }

.full-report-thank-you {
    padding: 125px 100px 0;
}

    .full-report-thank-you .speech-bubble {
        position: absolute;
        top: -60px;
        margin-left: -70px;
        left: 50%;
        font-size: 30px;
    }

/* 
##Alert View
The Alert view, as its name suggests, is used to alert the user of a pressing issue, and will usually block the user from accessing the rest of the site until the modal is confirmed.

```
<div class="panel type-alert" data-bind="visible: !config.offlineStorageUnavailable()">
    <div class="content centered">
        <i class="icon icon-download"></i>
        <h2>For the best application performance we default to use your device's cache.</h2>
        <div class="actions">
            <ul class="horiz">
                <li><a data-bind="click: acceptOfflineStoragePopup" class="btn btn-action">Continue</a></li>
            </ul>
            <p class="withicon">This setting can be changed under the user profile menu <i class="icon icon-appsettings"></i></p>
        </div>
    </div>
</div>
<div class="panel type-alert" data-bind="visible: config.offlineStorageUnavailable()">
	<div class="content centered">
    	<i class="icon icon-download"></i>
        <h2>The application is unable to create enough storage space for offline viewing. This may be due to the lack of available space on your device.
Offline access will be disabled until there is at least 10MB available to save data.</h2>
		<div class="actions">
        	<ul class="horiz">
                <li><a data-bind="click: cancelOfflineStoragePopup" class="btn btn-action">Ok</a></li>
            </ul>
        </div>
    </div>
</div>
```

*/
.page.type-notification {
    position: relative;
    height: 100%;
}

    .page.type-notification .view {
        margin: 0 0 inherit 0;
        padding-top: 60px;
    }

.panel.type-alert .content {
    background-color: #eeae02;
    /* Old browsers */
    background-image: -moz-linear-gradient(top, #f4c955 0%, #eeae02 100%) !important;
    /* FF3.6+ */
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4c955), color-stop(100%, #eeae02)) !important;
    /* Chrome,Safari4+ */
    background-image: -webkit-linear-gradient(top, #f4c955 0%, #eeae02 100%) !important;
    /* Chrome10+,Safari5.1+ */
    background-image: -o-linear-gradient(top, #f4c955 0%, #eeae02 100%) !important;
    /* Opera 11.10+ */
    background-image: -ms-linear-gradient(top, #f4c955 0%, #eeae02 100%) !important;
    /* IE10+ */
    background-image: linear-gradient(to bottom, #f4c955 0%, #eeae02 100%) !important;
    /* W3C */
    background-position: 0 0;
    color: #2e2e2e;
    padding: 20px;
    -webkit-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
}

.panel.type-alert h2 {
    text-transform: none;
    color: #2e2e2e;
    text-shadow: 0 1px 0 #f4e0a9;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
    top: 0;
}

.panel.type-alert p {
    text-transform: none;
    color: #2e2e2e;
    text-shadow: 0 1px 0 #f4e0a9;
    font-size: 13px;
    font-weight: normal;
}

    .panel.type-alert p.withicon {
        line-height: 28px;
        vertical-align: top;
    }

.panel.type-alert .actions ul {
    margin: 20px auto 30px;
    list-style: none;
    padding: 0;
    width: 80px;
    *zoom: 1;
}

    .panel.type-alert .actions ul:after {
        content: "";
        display: table;
        clear: both;
    }

.panel.type-alert .actions li {
    width: 50%;
    text-align: center;
}

.panel.type-alert .actions .btn {
    width: 80px;
}

.ie9 .panel.type-alert p .icon-appsettings {
    position: relative;
    top: 9px;
}

/* 
##Settings View
_This was used in the now-defunct Africa Inc section, will add an example if it's re-included in the project_
*/
.type-settings {
    border-bottom: 1px solid #787878;
}

    .type-settings .header {
        background: var(--tertiary-bg-color);
    }

    .type-settings .content {
        background: #282828;
        padding: 20px 30px;
    }

        .type-settings .content .actions {
            padding-top: 30px;
        }

        .type-settings .content h3 {
            font-size: 17px;
            font-weight: bold;
            margin-left: 10px;
            margin-bottom: 8px;
        }

        .type-settings .content ul {
            background: #eaeaea;
            margin: 0;
            padding: 0;
            list-style: none;
            border: 1px solid #1c1c1c;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            -ms-border-radius: 12px;
            -o-border-radius: 12px;
            border-radius: 12px;
            -webkit-box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.4);
            -moz-box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.4);
            box-shadow: inset 0 3px 3px rgba(0, 0, 0, 0.4);
        }

        .type-settings .content li {
            border-top: 1px solid #1c1c1c;
            padding: 10px 10px;
            text-shadow: none;
            *zoom: 1;
        }

            .type-settings .content li:after {
                content: "";
                display: table;
                clear: both;
            }

            .type-settings .content li:first-child {
                border-top: none;
            }

            .type-settings .content li > * {
                line-height: 30px;
                height: 30px;
            }

            .type-settings .content li > label {
                font-size: 17px;
                font-weight: bold;
                color: #040404;
                float: left;
            }

            .type-settings .content li .value {
                font-size: 17px;
                font-weight: regular;
                color: #606060;
                float: right;
            }

                .type-settings .content li .value span {
                    display: inline-block;
                    line-height: 30px;
                }

            .type-settings .content li .icon-switcher-dark {
                position: relative;
                top: 2px;
            }

            .type-settings .content li .togglebox {
                top: 0;
                left: 0;
            }

    .type-settings .actions {
        background: #282828;
        padding: 0 15px 15px;
    }

        .type-settings .actions .btn {
            padding: 5px 20px;
        }

.panel.p-datagrid {
    border-top: none;
}

.p-datagrid .actionbar {
    border: none;
}

.p-datagrid .content {
    background-color: var(--secondary-bg-color);
}

    .p-datagrid .content.loading {
        background-color: #282828;
    }

.p-datagrid .searchbar input[type=text] {
    width: 200px;
}

/*
# Meta List
The __Metalist__ is a widget traditionally containing title:value pairs of meta information pertaining to an object, 
be it an instrument (found on the Instrument Summary tab) 
or the Company information found on the Company tab on the Instrument landing page.

##Standard Metalist
This is a list of meta-information with row striping.
```    
<div class="widget w-metalist">
    <dl class="striped">
        <dt class="meta_close">Data Title</dt>
        <dd class="meta_close">000,000.00</dd>

        <dt class="meta_open">Data Title</dt>
        <dd class="meta_open">000,000.00</dd>

        <dt class="meta_vol">Data Title</dt>
        <dd class="meta_vol">000,000.00</dd>

        <dt class="meta_buy">Data Title</dt>
        <dd class="meta_buy">000,000.00</dd>

        <dt class="meta_sell">Data Title</dt>
        <dd class="meta_sell">000,000.00</dd>

        <dt class="meta_1w">Data Title</dt>
        <dd class="meta_1w">000,000.00</dd>
    </dl>
</div>
```
*/
.w-metalist {
    background: var(--secondary-bg-color);
}

    .w-metalist:first-child {
        border-top: none;
    }

    .w-metalist .metakey p {
        font-size: 11px;
        color: #888888;
        text-shadow: 0 1px 0 black;
    }

    .w-metalist:last-child {
        border-bottom: none;
    }

    .w-metalist .widget {
        border-bottom: 0;
    }

    .w-metalist .header {
        background: #282828;
        color: var(--primary-font-color);
    }

    .w-metalist .content .metalist {
        margin: 0;
        padding: 0;
        border-bottom: none;
    }

    .w-metalist .metalist {
        border-left: 1px solid #2e2e2e;
        position: relative;
        left: -1px;
    }

        .w-metalist .metalist .metakey {
            border-top: none;
            font-size: 11px;
            color: #888888;
            text-shadow: 0 1px 0 black;
            padding-left: 30px;
            border-top: none;
        }

            .w-metalist .metalist .metakey span {
                font-weight: bold;
                font-size: 13px;
                color: var(--primary-font-color);
                display: block;
                float: left;
                padding-right: 20px;
                width: 50px;
            }

        .w-metalist .metalist:first-child {
            border-right: 1px solid #2e2e2e;
            left: 0;
        }

        .w-metalist .metalist li {
            padding: 10px;
            border-top: 1px solid #2e2e2e;
        }

        .w-metalist .metalist h4 {
            color: var(--primary-font-color);
            font-size: 11px;
            font-weight: bold;
            margin: 0;
        }

        .w-metalist .metalist .desc {
            margin: 0;
            padding: 0;
            font-size: 13px;
            font-weight: normal;
            line-height: 16px;
        }

        .w-metalist .metalist.metatype-primary .desc {
            font-size: 15px;
            font-weight: bold;
        }

    .w-metalist dl {
        color: var(--primary-font-color);
        line-height: 22px;
        overflow: hidden;
        margin: 0;
    }

    .w-metalist .striped dt {
        border-bottom: 1px solid var(--primary-bg-color);
    }

        .w-metalist .striped dt:nth-child(4n+3) {
            background: var(--tertiary-bg-color);
        }

    .w-metalist .striped dd {
        border-bottom: 1px solid var(--primary-bg-color);
    }

        .w-metalist .striped dd:nth-child(4n+4) {
            background: var(--tertiary-bg-color);
        }

    .w-metalist .compact {
        padding-left: 20px;
    }

        .w-metalist .compact dt {
            padding: 0;
            width: 22%;
            clear: both;
        }

        .w-metalist .compact dd {
            padding: 0;
            text-align: left;
            width: 78%;
            font-size: 12px;
        }

            .w-metalist .compact dd div {
                margin-bottom: 8px;
            }

                .w-metalist .compact dd div p {
                    line-height: 1.4em;
                    margin-bottom: 5px;
                }

            .w-metalist .compact dd p {
                margin: 0;
            }

    .w-metalist dt {
        color: var(--primary-font-color);
        width: 45%;
        font-size: 11px;
        padding: 14px 0 14px 10px;
        float: left;
        letter-spacing: 0;
    }

    .w-metalist dd {
        color: var(--primary-font-color);
        width: 55%;
        font-size: 13px;
        padding: 14px 10px 14px 0;
        text-align: right;
        float: left;
        margin: 0;
        clear: right;
    }

    /*
##Columned Metalist
As found on the __Company Information__ tab on the Instrument landing page.

Because of the need for columns, the html structure changes a little from the standard list,
and uses an unordered list for each column, with h4 and p.desc to stipulate the title and data elements. 

_**Aside:**This should be able to work with standard html structure, the culprit here is probably more the lack of
styleguide when this was created than any stylistic reasons. Will have to address this at some point to simplify things. (@TODO)_


```    
<div class="widget w-metalist columns">
    <div class="content split-view split-3">
        <ul class="metalist metatype-primary">
            <li>
                <h4>Country</h4>
                <p class="desc">South Africa</p>
            </li>
            <li data-bind="with: companyInfo">
                <h4>Stock Exchanges</h4>
                <p class="desc">Jse Securities Exchange</p>
            </li>
        </ul>
        <ul class="metalist metatype-primary">
            <li>
                <h4>Company Type</h4>
                <p class="desc"><span>Listed</span></p>
            </li>
        </ul>
        <ul class="metalist metatype-primary">
            <li>
                <h4>Registered Address</h4>
                <p class="desc">40 Heerengracht Cape Town 8001</p>
            </li>
            <li>
                <h4>Postal Address</h4>
                <p class="desc">PO Box 2271 Cape Town 8000</p>
            </li>
            <li>
                <h4>Tel</h4>
                <p class="desc">+27 21 406-2121</p>
            </li>
            <li>
                <h4>Fax</h4>
                <p class="desc">+27 21 406-3753</p>
            </li>
        </ul>
    </div>
</div>
```
*/
    .w-metalist.columns {
        background: var(--secondary-bg-color);
        display: table;
        border-bottom: 0;
        width: 100%;
    }

        .w-metalist.columns > .content {
            display: table-row;
        }

            .w-metalist.columns > .content.nodata {
                display: block;
            }

            .w-metalist.columns > .content > ul {
                position: relative;
                left: -1px;
                border-left: 1px solid var(--secondary-bg-color);
                border-right: 1px solid var(--secondary-bg-color);
                padding-top: 5px;
                padding-bottom: 15px;
                float: none;
                display: table-cell;
            }

                .w-metalist.columns > .content > ul:first-child {
                    border-left: none;
                    left: 0;
                }

                .w-metalist.columns > .content > ul:nth-child(3) {
                    left: -2px;
                }

                .w-metalist.columns > .content > ul:last-child {
                    border-right: none;
                }

                .w-metalist.columns > .content > ul li {
                    border: none;
                    padding: 3px 10px;
                }

                    .w-metalist.columns > .content > ul li:first-child {
                        padding-top: 7px;
                    }

            .w-metalist.columns > .content h4 {
                font-weight: normal;
            }

            .w-metalist.columns > .content .column {
                float: none;
                display: table-cell;
                vertical-align: top;
                padding: 10px 0 20px;
            }

                .w-metalist.columns > .content .column:first-child {
                    border-right: 1px solid var(--secondary-bg-color);
                }

    .w-metalist.w-table tbody td {
        font-size: 18px;
        border-left: none;
        padding: 16px 10px 16px 0;
    }

    .w-metalist.w-table tbody th {
        font-size: 12px;
        border-left: none;
        padding: 16px 0 16px 10px;
    }

    .w-metalist col.metalist-title {
        width: 45%;
    }

    .w-metalist col.metalist-desc {
        width: 55%;
    }

/* #ContentView Widget 
Like the Content View Panel, this also holds standard text/article content. 
The format is usually smaller and would traditionally sit alongside other widgets within the same panel.
```
<div class="widget w-contentview country-profile" data-bind="with: profile">
    <div class="header">
        <h3>Country Profile, published 01 December 2013</h3>
    </div>
    <div class="content scroll-view">
        <i class="minimap EGY"></i>
        <span>
            Egypt’s interim government is following a loose fiscal and monetary policy stance in an attempt to boost economic activity 
            amidst an uncertain political environment. As a result, the budget deficit and public debt have risen to dangerously high levels, 
            while price inflation has increased to its highest level in nearly four years. Investment in the economy is expected to remain 
            limited due to political and economic policy uncertainty. Meanwhile, the external position remains under threat due to low tourism 
            revenues and foreign direct investment.
        </span>
    </div>
</div>
```

*/
.w-contentview.bg2 {
    background: #282828;
}

.w-contentview .header.bg2 {
    background: #2c2c2c;
    top: 10px;
}

.w-contentview .header h2 {
    padding: 5px 5px 5px 10px;
    width: 100%;
    font-size: 13px;
}

.w-contentview .bgdark {
    background: #101010;
}

.w-contentview .content.bgdark {
    background: var(--secondary-bg-color);
}

.w-contentview .content:not(.nodata) {
    font-size: 15px;
    padding: 10px 20px;
}

    .w-contentview .content:not(.nodata) p {
        margin: 5px 0;
        font-size: 13px;
    }

.w-contentview .content ul li span {
    font-size: 11px;
}

.w-contentview .content > * {
    padding: 0;
    margin: 0;
}

.w-contentview .content i.minimap {
    margin-right: 15px;
}

.w-contentview .content img {
    padding: 0;
    margin: 0 20px 12px 0;
}

.w-contentview.viewtype-sidebar {
    background: #0c0c0c;
    border-top: 1px solid #1c1c1c;
    border-bottom: 1px solid #0c0c0c;
}

    .w-contentview.viewtype-sidebar .header {
        background: black;
        border-bottom: 1px solid #1c1c1c;
    }

        .w-contentview.viewtype-sidebar .header h2 {
            color: #787878;
            width: 50%;
        }

        .w-contentview.viewtype-sidebar .header small {
            text-align: right;
            display: inline-block;
        }

        .w-contentview.viewtype-sidebar .header span {
            display: inline-block;
            padding: 0;
            float: right;
        }

    .w-contentview.viewtype-sidebar .btn {
        float: right;
    }

    .w-contentview.viewtype-sidebar p {
        margin: 5px 0 0;
        padding: 0;
        font-size: 15px;
        font-weight: normal;
    }

    .w-contentview.viewtype-sidebar .content .time {
        display: block;
        float: none;
        margin-top: 10px;
        margin-bottom: 10px;
        line-height: 20px;
    }

    .w-contentview.viewtype-sidebar .content .providedby {
        display: block;
        float: right;
        margin-top: 10px;
        margin-bottom: 10px;
        line-height: 20px;
    }

.w-contentview.viewtype-bycountry {
    background: #0c0c0c;
}

    .w-contentview.viewtype-bycountry .content {
        padding: 0;
    }

        .w-contentview.viewtype-bycountry .content .header {
            background: black;
            -webkit-box-shadow: inset 0 -1px 0 #262626;
            -moz-box-shadow: inset 0 -1px 0 #262626;
            box-shadow: inset 0 -1px 0 #262626;
        }

            .w-contentview.viewtype-bycountry .content .header h2 {
                font-size: 18px;
                color: #e1e1e1;
                letter-spacing: 0.11em;
                line-height: 29px;
                top: 0;
                left: 15px;
                float: left;
                width: 50%;
            }

            .w-contentview.viewtype-bycountry .content .header small {
                font-size: 12px;
                font-weight: bold;
                color: var(--primary-font-color);
                float: right;
                text-transform: uppercase;
                top: 0;
                padding-top: 8px;
            }

        .w-contentview.viewtype-bycountry .content .content {
            background: #0c0c0c;
            padding: 10px 15px;
            font-size: 15px;
            height: auto;
        }

            .w-contentview.viewtype-bycountry .content .content h3 {
                font-size: 14px;
                letter-spacing: 0.11em;
                margin: 15px 0 10px;
            }

            .w-contentview.viewtype-bycountry .content .content p {
                font-size: 15px;
                line-height: 20px;
            }

/*
# Contentlist Widget
The __Content List__ displays a list of items which would open in a content view panel (usually) or widget. 
There are a few different contentlists, with data displayed in different ways.
*/
.w-contentlist {
    border-bottom: none;
    border-top: none;
}

    .w-contentlist .header {
        border-bottom: none;
    }

        .w-contentlist .header h2 {
            color: var(--primary-font-color);
        }

        .w-contentlist .header small {
            text-align: right;
            display: inline-block;
        }

    .w-contentlist .content li {
        font-size: 15px;
        border-bottom: 1px solid #1e1e1e;
        padding: 10px 15px;
        cursor: pointer;
    }

        .w-contentlist .content li:last-child {
            border-bottom: none;
        }

        .w-contentlist .content li.current {
            border-left: 3px solid #be1622;
        }

        .w-contentlist .content li a.active-area {
            display: block;
            cursor: pointer;
            color: var(--primary-font-color);
            padding: 10px 15px;
            position: relative;
            top: -10px;
            left: -15px;
            margin-bottom: -20px;
            margin-right: -30px;
        }

            .w-contentlist .content li a.active-area:hover {
                background: rgba(200, 200, 200, 0.1);
                text-decoration: none;
            }

        .w-contentlist .content li h3 {
            padding: 0;
            margin: 0;
            font-size: 16px;
            color: var(--primary-font-color);
            text-shadow: none;
            text-decoration: none;
        }

    .w-contentlist .content .market-diary h3 {
        cursor: pointer;
    }

    .w-contentlist .content .btn {
        float: right;
        position: relative;
        top: 5px;
    }

    .w-contentlist .content p {
        margin: 10px 0 0;
        padding: 0;
        font-size: 14px;
        color: var(--primary-font-color);
    }

    .w-contentlist .content .nodata {
        padding: 10px;
    }

    .w-contentlist .content .time {
        display: block;
        float: none;
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    .w-contentlist.leftAligned .content li.current {
        border-right: 3px solid #be1622;
        border-left: none;
    }

/*
##Date View
Found: __Markets Diary tab__ in the Insights section
```
<style>
  .tempcontentliststyle .content.scroll-view {height:200px;}
</style>

<div class="widget w-contentlist viewtype-bydate tempcontentliststyle">
  <div class="header filters">
    <div class="filter filter-country">
      <a id="nav_countries" href="#" class="option-selector trigger"><span>All Countries</span><i class="icon icon-switcher"></i></a>
    </div>
    <div class="filter filter-date">
      <span class=""><a href="#" class="btn btn-prev">Prev</a></span>
      <span class="disabled"><a href="#" class="btn btn-next">Next</a></span>
      <a id="nav_months" href="#" class="option-selector trigger">
        <span>January 2014 <i class="icon icon-arrows-vert"></i></span><i class="icon icon-switcher"></i></a>
    </div><!-- Ends Header: Diary Entries -->
  </div>
  <div class="content scroll-view">
  <ul>
    <li class="date-stamp">10 January 2014</li>
    <li>
      <ul>
        <li>
          <h3>Angola</h3>
          <p>Net Reserves</p>    
        </li>
        <li>
          <h3>Kenya</h3>
          <p>M3 Money Supply</p>    
        </li>
      </ul>
    </li>
    <li class="date-stamp">06 January 2014</li>
    <li>
      <ul>
        <li>
          <h3>Angola</h3>
          <p>Net Reserves</p>    
        </li>
        <li>
          <h3>Kenya</h3>
          <p>M3 Money Supply</p>    
        </li>
      </ul>
    </li>
  </ul>
  </div><!-- Ends Content: Diary Entries -->
</div>
``` 
*/
.viewtype-bydate .content li {
    cursor: auto;
}

.viewtype-bydate ul {
    margin: 0;
    list-style: none;
    padding: 0;
}

    .viewtype-bydate ul li {
        padding: 10px 15px;
        border-bottom: 1px solid #1c1c1c;
        font-size: 16px;
    }

        .viewtype-bydate ul li h3 {
            margin: 0 0 2px;
            text-transform: uppercase;
        }

        .viewtype-bydate ul li p {
            margin: 0;
        }

        .viewtype-bydate ul li.date-stamp {
            font-size: 12px;
            text-transform: uppercase;
            padding: 5px 15px;
            text-shadow: 0 1px 0 black;
            background: #1e1e1e;
            color: var(--primary-font-color);
        }

/*
##Country View
Found: As on Talking Points for __African Markets__ and __Currencies__ tabs in the Insights section

```
    <div class="widget w-contentlist viewtype-bycountry">
        <div class="header">
          <small class="providedby">Provided by NKC</small>
          <h2>Talking Points</h2>
        </div>
        <div class="content scroll-view">
          <ul>
            <li class="">
              <small class="time">00 Month 0000 00:00:00</small>
              <h3>Country</h3>
              <p>Story Title</p>
            </li>
            <li class="">
              <small class="time">00 Month 0000 00:00:00</small>
              <h3>Country</h3>
              <p>Story Title</p>
            </li>
            <li class="">
              <small class="time">00 Month 0000 00:00:00</small>
              <h3>Country</h3>
              <p>Story Title</p>
            </li>
            <li class="">
              <small class="time">00 Month 0000 00:00:00</small>
              <h3>Country</h3>
              <p>Story Title</p>
            </li>
          </ul>
        </div>
    </div>
``` 
*/
.w-contentlist.viewtype-bycountry li {
    padding: 10px 15px;
}

.w-contentlist.viewtype-bycountry .content .time {
    margin: 0;
    padding-bottom: 2px;
}

.w-contentlist.viewtype-bycountry h3 {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: bold;
}

.w-contentlist.viewtype-bycountry p {
    font-size: 13px;
    font-weight: normal;
    margin-top: 2px;
}

.w-contentlist.viewtype-bycountry .content .report-summary {
    padding: 0;
}

.w-contentlist.viewtype-bycountry .content .header {
    background: black;
    -webkit-box-shadow: inset 0 -1px 0 #262626;
    -moz-box-shadow: inset 0 -1px 0 #262626;
    box-shadow: inset 0 -1px 0 #262626;
}

    .w-contentlist.viewtype-bycountry .content .header h2 {
        font-size: 18px;
        color: #e1e1e1;
        letter-spacing: 0.11em;
        line-height: 29px;
        top: 0;
        left: 15px;
    }

    .w-contentlist.viewtype-bycountry .content .header small {
        font-size: 12px;
        font-weight: bold;
        color: var(--primary-font-color);
        float: right;
        text-transform: uppercase;
        top: 0;
    }

.w-contentlist.viewtype-bycountry .content .content {
    padding: 10px 20px 20px 20px;
    font-size: 15px;
}

/*
##News View
Found: As seen on the Instrument > __News tab__

```
<div class="widget w-contentlist viewtype-news leftAligned">
  <div class="content">
    <ul >
      <li>
        <i class="icon i-news-sens"></i>
        <h3>Dealings by Company Secretary</h3>
        <small class="time">Source: SENS - 09 December 2013, 3:03:00 pm</small>
      </li>
    
      <li>
        <i class="icon i-news-sens"></i>
        <h3>Dealing in securities by Director's associate</h3>
        <small class="time">Source: SENS - 28 November 2013, 5:38:00 pm</small>
      </li>
    
      <li class="current">
        <i class="icon i-news-sens"></i>
        <h3>The reviewed results of the Naspers group for the six months to 30 September 2013</h3>
        <small class="time">Source: SENS - 26 November 2013, 7:07:00 am</small>
      </li>
    
      <li>
        <i class="icon i-news-sens"></i>
        <h3>Trading Statement</h3>
        <small class="time">Source: SENS - 15 November 2013, 6:31:00 pm</small>
      </li>
    
      <li>
        <i class="icon i-news-sens"></i>
        <h3>Naspers Directorate Changes</h3>
        <small class="time">Source: SENS - 17 October 2013, 4:12:00 pm</small>
      </li>
    </ul>
  </div>
</div>
```
*/
.w-contentlist.viewtype-news .content li {
    position: relative;
    margin-left: 40px;
    padding-left: 0;
    padding: 12px 20px 12px 0;
}

.w-contentlist.viewtype-news .content .icon, .w-contentlist.viewtype-news .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .w-contentlist.viewtype-news .content .fieldcategories li:after, .w-contentlist.viewtype-news .c-fieldselect .content .fieldsubcategories li:after, .c-fieldselect .w-contentlist.viewtype-news .content .fieldsubcategories li:after {
    position: absolute;
    left: -30px;
    top: 15px;
}

/*
## Filters
Found primarily on the Markets Diary, Filters is a header component for the Content list Widget.

```
<div class="widget w-contentlist viewtype-bydate tempcontentliststyle">
  <div class="header filters">
    <div class="filter filter-country">
      <a id="nav_countries" href="#" class="option-selector trigger"><span>All Countries</span><i class="icon icon-switcher"></i></a>
    </div>
    <div class="filter filter-date">
      <span class=""><a href="#" class="btn btn-prev">Prev</a></span>
      <span class="disabled"><a href="#" class="btn btn-next">Next</a></span>
      <a id="nav_months" href="#" class="option-selector trigger">
        <span>January 2014 <i class="icon icon-arrows-vert"></i></span><i class="icon icon-switcher"></i></a>
    </div><!-- Ends Header: Diary Entries -->
  </div>
</div>
```
*/
.w-contentlist .filters {
    background: #2c2c2c;
    padding: 0;
    border: 0 solid transparent;
}

.filters.header {
    *zoom: 1;
}

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

    .filters.header .btn {
        top: 0;
        right: auto;
        left: auto;
    }

.filters .filter {
    float: left;
    border-left: 1px solid var(--secondary-bg-color);
    padding: 10px 10px;
    font-size: 16px;
    font-weight: bold;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    *zoom: 1;
}

    .filters .filter:after {
        content: "";
        display: table;
        clear: both;
    }

    .filters .filter .icon-switcher {
        position: relative;
        top: 4px;
        left: 5px;
    }

    .filters .filter a.option-selector {
        display: block;
        color: var(--primary-font-color);
        text-shadow: none;
        text-decoration: none;
        text-align: center;
        white-space: nowrap;
        line-height: 29px;
    }

    .filters .filter a.btn-prev {
        float: left;
    }

    .filters .filter a.btn-next {
        float: right;
    }

    .filters .filter #nav_months {
        position: relative;
        margin: 0;
    }

    .filters .filter.filter-country {
        width: 38.2%;
    }

    .filters .filter.filter-date {
        width: 61.8%;
    }

    .filters .filter:first-child {
        float: left;
        border-left: 1px solid #1e1e1e;
    }

.w-listview:first-child {
    border-right: 1px solid var(--secondary-bg-color);
    vertical-align: top;
}

.w-listview .content ul {
    margin: 10px;
}

.w-listview .content li {
    font-size: 11px;
    text-shadow: none;
    padding: 3px 0;
}

/*
# Table Widget
## Striped table with header ##
  
This is tabular data with header and row striping as found on the key financials page
    
        <div class="widget w-table w-datagrid ">
            <table>
                <colgroup>
                    <col>
                    <col>
                    <col>
                    <col>
                </colgroup>
                <thead>
                    <tr>
                        <th class="desc w70">
                            <a class="btn btn-sort btn-sort-up">Title</a>
                        </th>
                        <th class="desc w10">
                            <a class="btn btn-sort btn-sort-up">Type</a>
                        </th>
                        <th class="desc w10">
                            <a class="btn btn-sort btn-sort-up">Date</a>
                        </th>
                        <th class="desc w10"></th>
                    </tr>
                </thead>
                    <tfoot>
                    </tfoot>
                <tbody>
                    <tr>
                        <td class="desc">COMPANY NAME - Description</td>
                        <td class="desc">Description</td>
                        <td class="desc">00/00/0000</td>
                        <td class="desc">
                            <a class="btn btn-action">Download</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="desc">COMPANY NAME - Description</td>
                        <td class="desc">Description</td>
                        <td class="desc">00/00/0000</td>
                        <td class="desc">
                            <a class="btn btn-action">Download</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="desc">COMPANY NAME - Description</td>
                        <td class="desc">Description</td>
                        <td class="desc">00/00/0000</td>
                        <td class="desc">
                            <a class="btn btn-action">Download</a>
                        </td>
                    </tr>
                    <tr>
                        <td class="desc">COMPANY NAME - Description</td>
                        <td class="desc">Description</td>
                        <td class="desc">00/00/0000</td>
                        <td class="desc">
                            <a class="btn btn-action">Download</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

*/
/*
## Dividend Table Widget ##
  
This is the dividend table widget as found on the instrument landing summary page

```
<div id="widget_dividendsSummary" class="widget w-chart w-table">
    <div class="header">
        <h3>Dividends Heading / Title</h3>
    </div>
    <div class="content">
        <div>
            <table>
                <thead>
                    <tr>
                        <th class="desc">
                            <span>Year</span>
                        </th>
                        <th class="val">
                            <span>Special</span>
                        </th>
                        <th class="val">
                            <span>Interim</span>
                        </th>
                        <th class="val">
                            <span>Final</span>
                        </th>
                        <th class="val">
                            <span>Total</span>
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td class="desc">0000</td>
                        <td class="val">0.00</td>
                        <td class="val">0.00</td>
                        <td class="val">000.00</td>
                        <td class="val">000.00</td>
                    </tr>
                    <tr>
                        <td class="desc">0000</td>
                        <td class="val">0.00</td>
                        <td class="val">0.00</td>
                        <td class="val">000.00</td>
                        <td class="val">000.00</td>
                    </tr>
                    <tr>
                        <td class="desc">0000</td>
                        <td class="val">0.00</td>
                        <td class="val">0.00</td>
                        <td class="val">000.00</td>
                        <td class="val">000.00</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
```
*/
/* Table Widget Styling */
.w-table {
    background: var(--secondary-bg-color);
}

    .w-table .saindices th div span {
        display: block;
    }

    .w-table table {
        /* Johanna Fix table-layout: fixed; */
    }

        .w-table table tr > * {
            color: var(--primary-font-color);
            border-bottom: none;
            border-left: 0;
            padding: 8px 10px;
            white-space: normal;
        }

           /* .w-table table tr > *:first-child {
                background: var(--primary-bg-color);
                border-left: 0 solid transparent;
            }*/

        .w-table table td {
            font-size: 11px;
            padding: 3px 5px;
            text-shadow: none;
            line-height: 1.4;
        }

            .w-table table td a {
                color: var(--primary-font-color);
                text-decoration: none;
            }

            .w-table table td.val span.val-with-key {
                width: 50px;
                display: block;
                float: right;
            }

            .w-table table td.val i.val-with-key {
                float: right;
            }

tfoot .w-table table td {
    font-size: 12px;
    background: #2e2e2e;
    border-top: 1px solid var(--primary-bg-color);
    border-bottom: 1px solid var(--primary-bg-color);
}

.w-table table td.bolded {
    font-weight: 700;
    color: var(--primary-font-color);
}

.w-table table thead th {
    font-size: 14px;
    padding: 5px 5px;
    background: var(--primary-bg-color);
}

    .w-table table thead th .i-sort,
    .w-table table thead th .i-sort-asc,
    .w-table table thead th .i-sort-desc {
        float: right;
        position: relative;
        top: 4px;
    }

.w-table table thead tr > * {
    border-top: none;
}

.w-table table thead tr:first-child > * {
    border-top: none;
}

.w-table table .btn.btn-action {
    font-size: 11px;
    padding: 1px 12px;
    border: 1px solid var(--secondary-btn-color);
    background: var(--primary-btn-color);
    color: var(--primary-font-color);
}

.w-table table a.btn-action {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    font-weight: normal;
    background: #303030;
}

    .w-table table a.btn-action:hover {
        background: #101010;
    }

.w-table .c-resultsPerPage {
    background: var(--secondary-bg-color);
    border: 0px solid var(--secondary-bg-color);
    padding: 4px 8px;
    color: var(--primary-font-color);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    float: left;
    font-size: 11px;
}

    .w-table .c-resultsPerPage .resultLabel {
        display: inline-block;
        clear: none;
        position: relative;
    }

    .w-table .c-resultsPerPage .resultsDropDown {
        display: inline-block;
        clear: none;
        position: relative;
    }

        .w-table .c-resultsPerPage .resultsDropDown dt {
            font-size: 11px;
            color: var(--secondary-font-color);
        }

    .w-table .c-resultsPerPage dt {
        color: var(--secondary-font-color);
        font-size: 11px;
    }

    .w-table .c-resultsPerPage .icon-showmore {
        top: 7px;
        right: 6px;
    }

.w-table .c-pager {
    float: left;
}

.w-table .table-actions {
    padding: 10px 10px 12px;
    border-top: 1px solid var(--primary-bg-color);
    background: var(--primary-bg-color);
    -webkit-box-shadow: 0 2px 0 var(--tertiary-bg-color) inset;
    -moz-box-shadow: 0 2px 0 var(--tertiary-bg-color) inset;
    box-shadow: 0 2px 0 var(--tertiary-bg-color) inset;
    *zoom: 1;
}

    .w-table .table-actions:after {
        content: "";
        display: table;
        clear: both;
    }

    .w-table .table-actions .component {
        margin-right: 20px;
    }

    .w-table .table-actions small {
        float: right;
        display: block;
        line-height: 22px;
    }

/* 
#DataGrid Widget 

```
<div class="widget w-table w-datagrid ">
    <table>
        <colgroup>
            <col><!-- Title -->
            <col><!-- Type -->
            <col><!-- Date -->
            <col><!-- Document Button -->
        </colgroup>
        <thead>
            <tr>
                <th class="desc w70"><a class="btn btn-sort btn-sort-up" >Title</a></th>
                <th class="desc w10"><a class="btn btn-sort btn-sort-up" >Type</a></th>
                <th class="desc w10"><a class="btn btn-sort btn-sort-up" >Date</a></th>
                <th class="desc w10"></th>
            </tr>
        </thead>
        <tfoot></tfoot>
        <tbody>
            <tr>
                <td class="desc">NPN - NASPERS LIMITED - Dealings by Company Secretary</td>
                <td class="desc">Announcement</td>
                <td class="desc">09/12/2013</td>
                <td class="desc"><a class="btn btn-action">Download</a></td>
            </tr>
        
            <tr>
                <td class="desc">NPN - NASPERS LIMITED - Dealing in securities by Director's associate</td>
                <td class="desc">Announcement</td>
                <td class="desc">28/11/2013</td>
                <td class="desc"><a class="btn btn-action">Download</a></td>
            </tr>
        
            <tr>
                <td class="desc">NPN - NASPERS LIMITED - The reviewed results of the Naspers group
for the six months to 30 September 2013</td>
                <td class="desc">Announcement</td>
                <td class="desc">26/11/2013</td>
                <td class="desc"><a class="btn btn-action">Download</a></td>
            </tr>
        
            <tr>
                <td class="desc">NPN - NASPERS LIMITED - Trading Statement</td>
                <td class="desc">Announcement</td>
                <td class="desc">15/11/2013</td>
                <td class="desc"><a class="btn btn-action">Download</a></td>
            </tr>
        
            <tr>
                <td class="desc">NPN - NASPERS LIMITED - Naspers Directorate Changes</td>
                <td class="desc">Announcement</td>
                <td class="desc">17/10/2013</td>
                <td class="desc"><a class="btn btn-action">Download</a></td>
            </tr>
        </tbody>
    </table>
</div>
```
*/
table.c-datagrid tr th.val, table.c-datagrid tr th.desc {
    font-size: 14px;
    background: var(--primary-bg-color);
    color: var(--primary-font-color);
    border-top: 1px solid var(--primary-bg-color);
    -webkit-box-shadow: inset 0 1px 0 var(--tertiary-bg-color);
    -moz-box-shadow: inset 0 1px 0 var(--tertiary-bg-color);
    box-shadow: inset 0 1px 0 var(--tertiary-bg-color);
}

.w-datagrid {
    width: 100%;
    position: relative;
    clear: both;
}

    .w-datagrid .btn-pivot {
        position: absolute;
        right: 10px;
        top: 10px;
        z-index: 1;
    }

    .w-datagrid .hscroll {
        width: 100%;
        overflow-x: auto;
    }

    .w-datagrid .table_group_header .icon, .w-datagrid .table_group_header .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .content .fieldcategories .w-datagrid .table_group_header li:after, .w-datagrid .table_group_header .c-fieldselect .content .fieldsubcategories li:after, .c-fieldselect .content .fieldsubcategories .w-datagrid .table_group_header li:after {
        top: 0;
    }

    .w-datagrid .icon, .w-datagrid .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .content .fieldcategories .w-datagrid li:after, .w-datagrid .c-fieldselect .content .fieldsubcategories li:after, .c-fieldselect .content .fieldsubcategories .w-datagrid li:after {
        top: 5px;
        position: relative;
        margin-right: 4px;
    }

    .w-datagrid .dataTables_wrapper {
        position: relative;
        clear: both;
        min-height: 0;
        width: 100%;
        margin: 0 auto;
    }

        .w-datagrid .dataTables_wrapper .dataTables_processing {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 250px;
            height: 30px;
            margin-left: -125px;
            margin-top: -15px;
            padding: 14px 0 2px 0;
            border: 1px solid #ddd;
            text-align: center;
            color: #999;
            font-size: 14px;
            background-color: var(--primary-font-color);
        }

        .w-datagrid .dataTables_wrapper .paginate_disabled_previous {
            background: url("../images/back_disabled.png") no-repeat top left;
        }

        .w-datagrid .dataTables_wrapper .paginate_enabled_previous {
            background: url("../images/back_enabled.png") no-repeat top left;
        }

            .w-datagrid .dataTables_wrapper .paginate_enabled_previous:hover {
                background: url("../images/back_enabled_hover.png") no-repeat top left;
            }

        .w-datagrid .dataTables_wrapper .paginate_disabled_next {
            background: url("../images/forward_disabled.png") no-repeat top right;
        }

        .w-datagrid .dataTables_wrapper .paginate_enabled_next {
            background: url("../images/forward_enabled.png") no-repeat top right;
        }

            .w-datagrid .dataTables_wrapper .paginate_enabled_next:hover {
                background: url("../images/forward_enabled_hover.png") no-repeat top right;
            }

        .w-datagrid .dataTables_wrapper .sorting_asc {
            background: url("../images/tablesort_asc.png") no-repeat 99% center;
            background-size: 15px;
        }

        .w-datagrid .dataTables_wrapper .sorting_desc {
            background: url("../images/tablesort_desc.png") no-repeat 99% center;
            background-size: 15px;
        }

        .w-datagrid .dataTables_wrapper .sorting {
            background: url("../images/tablesort_both.png") no-repeat 99% center;
            background-size: 15px;
        }

        .w-datagrid .dataTables_wrapper .sorting_asc_disabled {
            background: url("../images/tablesort_asc_disabled.png") no-repeat 99% center;
        }

        .w-datagrid .dataTables_wrapper .sorting_desc_disabled {
            background: url("../images/tablesort_desc_disabled.png") no-repeat 99% center;
        }

        .w-datagrid .dataTables_wrapper .dataTables_scroll {
            clear: both;
        }

        .w-datagrid .dataTables_wrapper .dataTables_scrollBody {
            *margin-top: -1px;
            -webkit-overflow-scrolling: touch;
        }

        .w-datagrid .dataTables_wrapper .clear {
            clear: both;
        }

        .w-datagrid .dataTables_wrapper .dataTables_length {
            padding: 10px;
            font-size: 11px;
            float: left;
            width: 40%;
        }

            .w-datagrid .dataTables_wrapper .dataTables_length label {
                background: var(--secondary-bg-color);
                border: 1px solid var(--secondary-bg-color);
                padding: 3px 10px;
                color: var(--primary-font-color);
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                -o-border-radius: 5px;
                border-radius: 5px;
                float: left;
            }

            .w-datagrid .dataTables_wrapper .dataTables_length select {
                background: var(--primary-bg-color);
                border: 1px solid var(--tertiary-bg-color);
                color: var(--primary-font-color);
                text-shadow: 0 1px 0 black;
                cursor: pointer;
            }
            }

        .w-datagrid .dataTables_wrapper .dataTables_filter {
            padding: 10px;
            font-size: 11px;
            height: 44px;
            width: 50%;
            float: right;
            text-align: right;
        }

            .w-datagrid .dataTables_wrapper .dataTables_filter label {
                background: var(--primary-bg-color);
                border: 1px solid var(--primary-bg-color);
                padding: 3px 10px;
                height: 26px;
                line-height: 20px;
                display: block;
                float: right;
                color: var(--primary-font-color);
                text-shadow: 0 1px 0 black;
                cursor: pointer;
                -webkit-border-radius: 5px;
                -moz-border-radius: 5px;
                -ms-border-radius: 5px;
                -o-border-radius: 5px;
                border-radius: 5px;
            }

        .w-datagrid .dataTables_wrapper .dataTables_filter input {
            color: var(--primary-font-color);
            background: var(--secondary-bg-color);
            border: 1px solid var(--secondary-bg-color);
            border-radius: 6px;
            line-height: 18px;
            box-shadow: rgba(148, 148, 148, 0.7) 0px 2px 3px inset;
            height: 20px;
        }

        .w-datagrid .dataTables_wrapper .dataTables_info {
            width: 60%;
            float: left;
            padding: 10px;
            font-size: 11px;
            line-height: 24px;
            background: var(--primary-bg-color);
            border-top: 1px solid var(--tertiary-bg-color);
            border-bottom: 1px solid var(--tertiary-bg-color);
            margin-top: 1px;
            height: 50px;
        }

        .w-datagrid .dataTables_wrapper .dataTables_paginate {
            float: right;
            text-align: right;
            line-height: 24px;
            background: var(--primary-bg-color);
            border-top: 1px solid var(--tertiary-bg-color);
            border-bottom: 1px solid var(--tertiary-bg-color);
            height: 50px;
        }

        .w-datagrid .dataTables_wrapper .paging_full_numbers {
            padding: 10px;
            width: 40%;
        }

            .w-datagrid .dataTables_wrapper .paging_full_numbers a {
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                -ms-border-radius: 0;
                -o-border-radius: 0;
                border-radius: 0;
                border-left: none;
            }

                .w-datagrid .dataTables_wrapper .paging_full_numbers a:first-child {
                    -webkit-border-radius: 4px 0 0 4px;
                    -moz-border-radius: 4px 0 0 4px;
                    -ms-border-radius: 4px 0 0 4px;
                    -o-border-radius: 4px 0 0 4px;
                    border-radius: 4px 0 0 4px;
                    border-left: 1px solid var(--primary-bg-color);
                }

                .w-datagrid .dataTables_wrapper .paging_full_numbers a:last-child {
                    -webkit-border-radius: 0 4px 4px 0;
                    -moz-border-radius: 0 4px 4px 0;
                    -ms-border-radius: 0 4px 4px 0;
                    -o-border-radius: 0 4px 4px 0;
                    border-radius: 0 4px 4px 0;
                    border-right: 1px solid var(--primary-bg-color);
                }

                .w-datagrid .dataTables_wrapper .paging_full_numbers a:hover, .w-datagrid .dataTables_wrapper .paging_full_numbers a:active, .w-datagrid .dataTables_wrapper .paging_full_numbers a.paginate_active {
                    background: #0c0c0c;
                    border: 1px solid #0e0e0e;
                    border-left: 0;
                    -webkit-box-shadow: inset 0 2px 5px black;
                    -moz-box-shadow: inset 0 2px 5px black;
                    box-shadow: inset 0 2px 5px black;
                }

            .w-datagrid .dataTables_wrapper .paging_full_numbers span a:first-child, .w-datagrid .dataTables_wrapper .paging_full_numbers span a:last-child {
                -webkit-border-radius: 0;
                -moz-border-radius: 0;
                -ms-border-radius: 0;
                -o-border-radius: 0;
                border-radius: 0;
                border-left: none;
            }

        .w-datagrid .dataTables_wrapper .dataTable thead {
            border-top: 1px solid var(--tertiary-bg-color);
            background: var(--secondary-bg-color);
            border-bottom: none;
        }

        .w-datagrid .dataTables_wrapper .dataTable th {
            font-size: 12px;
            color: var(--primary-font-color);
            line-height: 15px;
            padding: 10px 10px;
        }

            .w-datagrid .dataTables_wrapper .dataTable th.val {
                padding-right: 20px;
            }

    .w-datagrid .freeze-left {
        padding-left: 334px;
        width: 100%;
    }

        .w-datagrid .freeze-left .freeze-left-viewport {
            overflow-y: visible;
            overflow-x: auto;
            width: 100%;
        }

        .w-datagrid .freeze-left .c-datagrid tr > *:first-child {
            position: absolute;
            width: 334px;
            left: 0;
            top: auto;
            padding-top: 7px;
            padding-bottom: 7px;
            height: 31px;
        }

        .w-datagrid .freeze-left .c-datagrid tbody tr.table_group_row > th:first-child {
            height: 38px;
        }

@-moz-document url-prefix() {
    .w-datagrid .freeze-left .c-datagrid tr > *:first-child {
        margin-top: -1px;
    }
}

/*
#ItemHead Widget 
_This was used in the now-defunct Africa Inc section (Director page), will add an example if it's re-included in the project_
*/
.w-itemhead {
    background: var(--primary-bg-color);
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM4MzgzOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, var(--primary-bg-color)), color-stop(100%, var(--secondary-bg-color)));
    background: -webkit-linear-gradient(top, var(--primary-bg-color), var(--secondary-bg-color));
    background: -moz-linear-gradient(top, var(--primary-bg-color), var(--secondary-bg-color));
    background: -o-linear-gradient(top, var(--primary-bg-color), var(--secondary-bg-color));
    background: linear-gradient(top, var(--primary-bg-color), var(--secondary-bg-color));
    border-top: 1px solid var(--primary-bg-color);
    border-bottom: 1px solid var(--secondary-bg-color);
    text-shadow: 0 1px 0 black;
    color: var(--primary-font-color);
    padding: 20px 15px;
}

    .w-itemhead .header h2 {
        font-size: 22px;
        line-height: 25px;
        text-transform: none;
        padding: 0;
        position: relative;
        top: 2px;
    }

    .w-itemhead .header small {
        font-size: 12px;
        line-height: 16px;
        display: inline-block;
        padding: 0;
        position: relative;
        top: -2px;
        color: var(--primary-font-color);
        float: none;
    }

.c-fieldselect {
    background: var(--secondary-bg-color);
    padding: 10px 30px;
    border-top:none;
    border-bottom:none;
    position: relative;
    clear: both;
}

    .c-fieldselect .header h3 {
        font-size: 11px;
        text-transform: uppercase;
        color: #d4d4d4;
        margin-bottom: 5px;
        margin-left: 10px;
        text-align: left;
        line-height: 16px;
    }

    .c-fieldselect .content {
        *zoom: 1;
    }

        .c-fieldselect .content:after {
            content: "";
            display: table;
            clear: both;
        }

        .c-fieldselect .content ul {
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: left;
            height: 100%;
            color: var(--primary-font-color);
        }

            .c-fieldselect .content ul li {
                padding-left: 10px;
                line-height: 26px;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                cursor: pointer;
            }

                .c-fieldselect .content ul li small {
                    display: inline-block;
                }

                .c-fieldselect .content ul li.fieldcategory-title {
                    height: auto;
                    line-height: 18px;
                    font-size: 10px;
                    text-transform: uppercase;
                    color: var(--primary-font-color);
                    background: var(--secondary-bg-color);
                    border: none;
                    padding-right: 0;
                }

                    .c-fieldselect .content ul li.fieldcategory-title:after {
                        display: none;
                    }

                    .c-fieldselect .content ul li.fieldcategory-title ul {
                        height: auto;
                        margin-left: -10px;
                        border-bottom: 1px solid var(--tertiary-bg-color);
                    }

                        .c-fieldselect .content ul li.fieldcategory-title ul li {
                            border-top: none;
                            border-left: none;
                            background-color: transparent;
                            text-transform: none;
                            margin-left: 10px;
                            padding-right: 15px;
                        }

                            .c-fieldselect .content ul li.fieldcategory-title ul li:first-child {
                                border-top: none;
                            }

                            .c-fieldselect .content ul li.fieldcategory-title ul li:last-child {
                                border-bottom: none;
                            }

                            .c-fieldselect .content ul li.fieldcategory-title ul li.current {
                                margin-left: 0;
                                padding-left: 20px;
                            }

                .c-fieldselect .content ul li.field-group {
                    padding-left: 0;
                }

                    .c-fieldselect .content ul li.field-group > span {
                        background: #242424;
                        border-top: 1px solid var(--tertiary-bg-color);
                        display: block;
                        line-height: 26px;
                        padding-left: 8px;
                    }

                    .c-fieldselect .content ul li.field-group ul {
                        border-top: 1px solid var(--tertiary-bg-color);
                        margin-left: 0;
                    }

                        .c-fieldselect .content ul li.field-group ul li {
                            margin-left: 10px;
                            padding-left: 25px;
                            position: relative;
                        }

                            .c-fieldselect .content ul li.field-group ul li > span {
                                background: #040404;
                                border-top: 0;
                                border-bottom: 1px solid #1c1c1c;
                                display: block;
                                padding-left: 8px;
                            }

                            .c-fieldselect .content ul li.field-group ul li ul {
                                border-top: 0;
                            }

                .c-fieldselect .content ul li ul {
                    margin-left: 24px;
                }

            .c-fieldselect .content ul > ul li.field-group:last-child > span {
                border-bottom: 1px solid var(--tertiary-bg-color);
            }

            .c-fieldselect .content ul > ul li.field-group:last-child ul {
                border-top: none;
            }

        .c-fieldselect .content > div .content {
            border: 5px solid var(--secondary-bg-color);
            border-radius: 6px;
            margin-right: 5px;
            background: var(--primary-bg-color);
            height: 400px;
        }

        .c-fieldselect .content .icon, .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .content .fieldsubcategories li:after {
            position: relative;
            top: 4px;
            margin-right: 5px;
        }

            .c-fieldselect .content .icon.i-tree-closed, .c-fieldselect .content .fieldcategories li.i-tree-closed:after, .c-fieldselect .content .fieldsubcategories li.i-tree-closed:after {
                margin-right: 0;
                top: 2px;
                left: 3px;
            }

            .c-fieldselect .content .icon.i-tree-open, .c-fieldselect .content .fieldcategories li.i-tree-open:after, .c-fieldselect .content .fieldsubcategories li.i-tree-open:after {
                margin-right: 0;
                top: 5px;
                left: 0;
            }

        .c-fieldselect .content .fieldcategories {
            z-index: 10;
            background: var(--tertiary-bg-color);
        }

            .c-fieldselect .content .fieldcategories li {
                font-size: 12px;
                background: var(--primary-bg-color);
                border-top: 1px solid var(--tertiary-bg-color);
                border-left: 1px solid var(--tertiary-bg-color);
                border-bottom: 1px solid var(--tertiary-bg-color);
                position: relative;
                padding-right: 15px;
            }

                .c-fieldselect .content .fieldcategories li:first-child {
                    border-top: 1px solid var(--tertiary-bg-color);
                }

                .c-fieldselect .content .fieldcategories li.current {
                    background: var(--primary-bg-color);
                    z-index: 10;
                    border: 1px solid var(--primary-bg-color);
                    border-right: none;
                    -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3) inset;
                    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3) inset;
                    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3) inset;
                }

                .c-fieldselect .content .fieldcategories li:after {
                    position: absolute;
                    content: "";
                    top: 50%;
                    right: 0;
                    margin-top: -4px;
                }

        .c-fieldselect .content .fieldsubcategories {
            border-left: 1px solid var(--primary-bg-color);
            border-top: 1px solid var(--primary-bg-color);
        }

            .c-fieldselect .content .fieldsubcategories li {
                font-size: 11px;
                background: var(--secondary-bg-color);
                border-top: 1px solid var(--tertiary-bg-color);
                border-bottom: 1px solid var(--tertiary-bg-color);
                position: relative;
                padding-right: 15px;
            }

                .c-fieldselect .content .fieldsubcategories li.fieldcategory-title {
                    font-size: 10px;
                }

                .c-fieldselect .content .fieldsubcategories li.current {
                    background: var(--primary-bg-color);
                    z-index: 10;
                    border: 1px solid var(--primary-bg-color);
                    border-right: none;
                    -webkit-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3) inset;
                    -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3) inset;
                    box-shadow: 0 2px 0 rgba(0, 0, 0, 0.3) inset;
                }

                .c-fieldselect .content .fieldsubcategories li:after {
                    position: absolute;
                    content: "";
                    top: 50%;
                    right: 0;
                    margin-top: -4px;
                }

        .c-fieldselect .content .fields {
            border-radius: 6px;
            background: var(--primary-bg-color);
        }

            .c-fieldselect .content .fields li {
                font-size: 12px;
            }

    .c-fieldselect .availablefields .content {
        border-right: 5px solid #484848;
    }

    .c-fieldselect .availablefields .fields {
        position: relative;
        left: -1px;
    }

        .c-fieldselect .availablefields .fields li li {
            border-bottom: 1px solid var(--tertiary-bg-color);
        }

    .c-fieldselect .actions {
        margin-top: 15px;
        margin-bottom: 10px;
        *zoom: 1;
    }

        .c-fieldselect .actions:after {
            content: "";
            display: table;
            clear: both;
        }

        .c-fieldselect .actions * {
            float: right;
        }

.c-compareto {
    padding: 0 30px;
    border-bottom:none;
    border-top: none;
}

    .c-compareto .c-fieldselect {
        padding-left: 0;
        padding-right: 0;
        border-top-color: #323232;
        overflow: hidden;
        border-bottom: none;
    }

        .c-compareto .c-fieldselect .content {
            width: 100%;
        }

            .c-compareto .c-fieldselect .content > ul > li {
                padding-left: 0;
            }

                .c-compareto .c-fieldselect .content > ul > li > span,
                .c-compareto .c-fieldselect .content > ul > li > div > span {
                    display: block;
                    line-height: 26px;
                    padding-left: 10px;
                    padding-right: 60px;
                    text-shadow: none;
                    overflow: hidden;
                    white-space: nowrap;
                    cursor: pointer;
                    white-space: nowrap;
                    overflow: hidden;
                    -ms-text-overflow: ellipsis;
                    -o-text-overflow: ellipsis;
                    text-overflow: ellipsis;
                }

            .c-compareto .c-fieldselect .content ul li.fieldcategory-title {
                margin-bottom: 5px;
            }

                .c-compareto .c-fieldselect .content ul li.fieldcategory-title ul {
                    padding-top: 5px;
                    padding-bottom: 5px;
                }

                    .c-compareto .c-fieldselect .content ul li.fieldcategory-title ul li {
                        margin-left: 0;
                    }

        .c-compareto .c-fieldselect .availablefields .content .fields {
            left: 0;
            border-color: black;
        }

            .c-compareto .c-fieldselect .availablefields .content .fields > li > span,
            .c-compareto .c-fieldselect .availablefields .content .fields > li > div > span {
                /*border-top: 1px solid $g34;*/
                background: var(--secondary-bg-color);
            }

        .c-compareto .c-fieldselect .selectedfields .content .fields > li {
            border-bottom: none;
        }

            .c-compareto .c-fieldselect .selectedfields .content .fields > li > span,
            .c-compareto .c-fieldselect .selectedfields .content .fields > li > div > span {
                background: transparent;
                border-top: none;
            }

/*
# Custom Select Component

## Frequency Select
As used in the document type dropdown select 

_**Note:** The image is merely a representation of how the dropdown will look once built out in an application. The dropdown will not work within this documentation_

```    
<div class="component c-frequency">
    <ul class="breadcrumb">
        <li class="primary"><label>Document Type:</label></li>
        <li class="sub">
            <dl class="dropDownList" style="width: 120px;">
            <dt><span>All</span><i class="icon icon-showmore"></i></dt>
                <dd style="display: none;">
                    <ul>
                        <li>
                            <a>All</a>
                        </li>
                        <li>
                            <a>Announcement</a>
                        </li>
                        <li>
                            <a>Annual Report</a>
                        </li>
                        <li>
                            <a>Circular</a>
                        </li>
                        <li>
                            <a>Interim</a>
                        </li>
                        <li>
                            <a>Other</a>
                        </li>
                        <li>
                            <a>Prelim</a>
                        </li>
                        <li>
                            <a>Prospectus</a>
                        </li>
                        </ul>
                    </dd>
                </dl>
        </li>
    </ul>     
</div>
<br><br>
<img class="mcgregor logo" src="/Images/doctype-dropdown.png">
```        
*/
.c-frequencydateSelect {
    *zoom: 1;
    margin-top: 10px;
}

    .c-frequencydateSelect:after {
        content: "";
        display: table;
        clear: both;
    }

.header .c-frequencydateSelect {
    margin: 0 10px;
}

    .header .c-frequencydateSelect .btn,
    .header .c-frequencydateSelect .btn-group {
        right: auto;
        left: auto;
        top: auto;
        bottom: auto;
    }

.c-frequencydateSelect label {
    color: var(--primary-font-color);
}

.c-frequency {
    float: left;
}

    .c-frequency + div {
        margin-left: 10px;
        float: left;
    }

    .c-frequency .breadcrumb {
        top: 1px;
        overflow: visible;
    }

        .c-frequency .breadcrumb li {
            height: 25px;
            line-height: 25px;
        }

        .c-frequency .breadcrumb .sub {
            background: var(--primary-input-bg-color);
            padding-right: 5px;
            padding-left: 15px;
            box-shadow: rgba(148, 148, 148, 0.7) 0px 2px 3px inset;
        }

/*
## Custom date selection tool
This is a custom date selection tool as found on the summary landing page
```
<div class="component c-dateSelect with-custom">
    <ul class="btn-group">
        <li class="">
            <a class="btn btn-default">1W</a>
        </li>
        <li class="current">
            <a class="btn btn-default">1M</a>
        </li>
        <li class="">
            <a class="btn btn-default">6M</a>
        </li>
        <li class="">
            <a class="btn btn-default">1Y</a>
        </li>
        <li class="">
            <a class="btn btn-default">5Y</a>
        </li>
        <li class="">
            <a class="btn btn-default">Custom</a>
        </li>
    </ul>
</div>
```
*/
.c-dateSelect {
    float: left;
}

    .c-dateSelect.with-custom .btn-group {
        float: left;
        top: 0;
    }

    .c-dateSelect.with-custom .btn {
        display: block;
        top: 0;
    }

    .c-dateSelect.with-custom .custom-date-select {
        *zoom: 1;
    }

        .c-dateSelect.with-custom .custom-date-select:after {
            content: "";
            display: table;
            clear: both;
        }

        .c-dateSelect.with-custom .custom-date-select .btn {
            float: left;
            left: auto;
            right: auto;
        }

            .c-dateSelect.with-custom .custom-date-select .btn:first-child {
                -webkit-border-radius: 5px 0 0 5px;
                -moz-border-radius: 5px 0 0 5px;
                -ms-border-radius: 5px 0 0 5px;
                -o-border-radius: 5px 0 0 5px;
                border-radius: 5px 0 0 5px;
            }

            .c-dateSelect.with-custom .custom-date-select .btn:last-child {
                -webkit-border-radius: 0 5px 5px 0;
                -moz-border-radius: 0 5px 5px 0;
                -ms-border-radius: 0 5px 5px 0;
                -o-border-radius: 0 5px 5px 0;
                border-radius: 0 5px 5px 0;
            }

        .c-dateSelect.with-custom .custom-date-select .date-select {
            background: var(--tertiary-bg-color);
            padding: 1px 7px;
            float: left;
            height: 24px;
            border: 1px solid var(--primary-bg-color);
            color: var(--primary-font-color);
            font-size: 11px;
            font-weight: bold;
            line-height: 17px;
        }

            .c-dateSelect.with-custom .custom-date-select .date-select div {
                float: left;
                padding: 0;
                position: relative;
            }

            .c-dateSelect.with-custom .custom-date-select .date-select > div {
                top: 1px;
            }

            .c-dateSelect.with-custom .custom-date-select .date-select .date-select-to {
                padding: 0 4px;
            }

            .c-dateSelect.with-custom .custom-date-select .date-select label {
                position: relative;
                top: 0;
                display: block;
                float: left;
            }

                .c-dateSelect.with-custom .custom-date-select .date-select label:first-child {
                    margin-right: 2px;
                }

                .c-dateSelect.with-custom .custom-date-select .date-select label span {
                    display: inline-block;
                    padding-left: 2px;
                    padding-top: 0;
                }

                .c-dateSelect.with-custom .custom-date-select .date-select label input[type=date], .c-dateSelect.with-custom .custom-date-select .date-select label input[type=text] {
                    background: #282828;
                    font-size: 11px;
                    color: var(--primary-font-color);
                    border: none;
                    padding: 1px 3px;
                    height: 18px;
                    line-height: 18px;
                    width: 115px;
                }

                .c-dateSelect.with-custom .custom-date-select .date-select label .i-datepicker {
                    position: absolute;
                    top: 0;
                    right: 0;
                    padding: 1px;
                    background-color: transparent;
                    background-position: -99px -119px;
                    height: 18px;
                    width: 18px;
                    cursor: pointer;
                }

            .c-dateSelect.with-custom .custom-date-select .date-select dl.dropDownList dt i.icon-showmore {
                top: 6px;
            }

            .c-dateSelect.with-custom .custom-date-select .date-select dl.dropDownList dd {
                width: 102%;
                overflow: auto;
                max-height: 200px;
            }

    .c-dateSelect.with-custom .btn.flushLeft {
        float: left;
        position: relative;
    }

    .c-dateSelect.with-custom .btn.current {
        background: black;
        border: 1px solid #0c0c0c;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    }

    .c-dateSelect.date-single {
        vertical-align: top;
        margin-right: 7px;
    }

        .c-dateSelect.date-single > * {
            vertical-align: top;
        }

        .c-dateSelect.date-single fieldset {
            display: inline-block;
            border: 1px solid var(--primary-bg-color);
            background: #0c0c0c;
            height: 24px;
            padding: 0;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 2px 5px black inset;
            -moz-box-shadow: 0 2px 5px black inset;
            box-shadow: 0 2px 5px black inset;
        }

            .c-dateSelect.date-single fieldset > * {
                vertical-align: top;
            }

            .c-dateSelect.date-single fieldset label {
                line-height: 18px;
                -moz-border-radius-topright: 0;
                -webkit-border-top-right-radius: 0;
                border-top-right-radius: 0;
                -moz-border-radius-bottomright: 0;
                -webkit-border-bottom-right-radius: 0;
                border-bottom-right-radius: 0;
                border-right: 1px solid var(--primary-bg-color);
                display: inline-block;
                padding: 2px;
            }

                .c-dateSelect.date-single fieldset label span {
                    display: inline-block;
                    line-height: 18px;
                    font-size: 11px;
                    vertical-align: top;
                    margin: 0 15px 0 10px;
                }

                .c-dateSelect.date-single fieldset label input.hasDatepicker {
                    background: #282828;
                    font-size: 11px;
                    color: var(--primary-font-color);
                    border: none;
                    padding: 0 3px;
                    vertical-align: top;
                    height: 18px;
                    line-height: 18px;
                    width: 110px;
                }

                .c-dateSelect.date-single fieldset label + input[type=submit] {
                    border: none;
                }

.ins {
    *zoom: 1;
    border-radius: 6px;
}

    .ins:after {
        content: "";
        display: table;
        clear: both;
    }

    .ins .icon, .ins .c-fieldselect .content .fieldcategories li:after, .c-fieldselect .content .fieldcategories .ins li:after, .ins .c-fieldselect .content .fieldsubcategories li:after, .c-fieldselect .content .fieldsubcategories .ins li:after,
    .ins .indicator,
    .ins .flag {
        float: left;
        position: relative;
    }

    .ins small {
        display: block;
        text-shadow: 0 1px 0 black;
        font-size: 11px;
        letter-spacing: 0.1em;
    }

    .ins .ins-meta small {
        color: var(--primary-font-color);
    }

        .ins .ins-meta small.providedby {
            color: #787878;
            margin-top: 5px;
        }

.mover_positive .ins {
    color: #37eec8;
}

.mover_negative .ins {
    color: #f73b3d;
}

.mover_none .ins {
    color: #5e8d9c;
}

.mover_positive .ins-data {
    color: #37eec8;
}

.mover_negative .ins-data {
    color: #f73b3d;
}

.mover_none .ins-data {
    color: #5e8d9c;
}

.w-inslist {
    background: var(--secondary-bg-color);
    border-top: none;
}

    .w-inslist > .header {
        background: var(--primary-font-color);
    }

    .w-inslist .ins .action {
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -40px;
        padding: 26px 20px 26px 340px;
    }

    .w-inslist .inslist {
        position: relative;
        top: -1px;
    }

/*
# Large Instrument View

##Instrument Landing Heading
This is the main header with financial indicators on the instrument landing homepage, it is used to to display financial JSE data on the instrument landing page.i.e. change in
price, last price in ZAR and price ranges.
```    
<div class="widget ins lrg split-3-7 instrument-view mover_positive">
	<div class="title">
		<i class="indicator"></i>
		<h2>XXX - Company</h2>
		<span class="ins-mnemonic">XXX:XXXX:XXX</span>
		<span class="ins-isin">XXX000000000</span>
	</div>
	<ul class="oview split-3">
		<li class="todays-change">
			<dl>
				<dd class="ins-data">0,000.00 (0.00%)</dd>
				<dt>Change</dt>
			</dl>
		</li>
		<li class="last-price">
			<dl>
				<dd>000,000.00</dd>
				<dt>Last price in ZAR</dt>
			</dl>
		</li>
		<li class="days-range">
			<dl>
				<dd>000,000.00 - 000,000.00</dd>
				<dt>Day's Range</dt>
			</dl>
		</li>
	</ul>
</div>
```

/*
## Large Instrument Widget: Watchlist
This is a watchlist listing
```
<div class="widget w-inslist lrg">
    <div class="content">
        <ul class="inslist not_edit_mode">
            <li class="ins lrg split-1-3 mover_negative">
                <div class="title">
                    <i class="indicator"></i>
                    <h2> Company Name</h2>
                    <span>JSE Code</span>
                </div>
                <ul class="oview split-5">
                    <li class="todays-change">
                        <dl>
                            <dd class="ins-data">(red is minus)</dd>
                            <dt>Change</dt>
                        </dl>
                    </li>
                    <li class="last-price">
                        <dl>
                            <dd>000.00</dd>
                            <dt>Last price in ZAR</dt>
                        </dl>
                    </li>
                    <li class="days-range">
                        <dl>
                            <dd>000.00 - 000.00</dd>
                            <dt>Day's Range</dt>
                        </dl>
                    </li>
                    <li class="chart">
                        <img src="/Images/watchlist-chart.png" border="0" style="width:90%;" />
                    </li>
                </ul>
            </li>
            <li class="ins lrg split-1-3 mover_positive">
                <div class="title">
                    <i class="indicator"></i>
                    <h2> Company Name</h2>
                    <span>JSE Code</span>
                </div>

                <ul class="oview split-5">
                    <li class="todays-change">
                        <dl>
                            <dd class="ins-data">(Green is plus)</dd>
                            <dt>Change</dt>
                        </dl>
                    </li>
                    <li class="last-price">
                        <dl>
                            <dd>000.00</dd>
                            <dt>Last price in ZAR</dt>
                        </dl>
                    </li>
                    <li class="days-range">
                        <dl>
                            <dd>000.00 - 000.00</dd>
                            <dt>Day's Range</dt>
                        </dl>
                    </li>
                    <li class="chart">
                        <img src="/Images/watchlist-chart.png" border="0" style="width:90%;" />
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</div>
```
*/
.ins.lrg {
    background: var(--secondary-bg-color);
    border-top: none;
    border-bottom: 1px solid black;
    text-shadow: 0 1px 0 black;
    color: var(--primary-font-color);
}

    .ins.lrg .title {
        float: left;
        padding: 20px 10px 0;
        height: 80px;
        position: relative;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

        .ins.lrg .title h2 {
            color: var(--primary-font-color);
            margin: 0;
            top: 0;
            font-size: 20px;
            line-height: 26px;
            text-transform: none;
            padding-left: 25px;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            display: inline-block;
            width: 100%;
        }

            .ins.lrg .title h2 span {
                color: var(--primary-font-color);
                font-size: 20px;
                line-height: 26px;
                text-transform: none;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
                display: inline-block;
            }

        .ins.lrg .title span {
            display: block;
            font-size: 11px;
            line-height: 13px;
            margin-top: 0;
            padding-left: 25px;
            position: relative;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            width: 100%;
        }

            .ins.lrg .title span.ins-mnemonic {
                top: -4px;
            }

            .ins.lrg .title span.ins-isin {
                top: -4px;
                font-size: 10px;
                color: var(--primary-font-color);
            }

        .ins.lrg .title .dropdown span {
            display: block;
            padding-left: 0;
            font-size: 12px;
            color: #3c3c3c;
            line-height: 26px;
        }

        .ins.lrg .title .dropdown .isSelected span {
            display: inline-block;
            padding-left: 5px;
        }

        .ins.lrg .title i.indicator {
            position: absolute;
            top: 27px;
            left: 0;
            margin: 0;
        }

    .ins.lrg > .oview {
        float: right;
        position: relative;
        list-style: none;
        top: 0;
        padding: 0;
        margin: 0;
        font-size: 16px;
    }

        .ins.lrg > .oview > li {
            float: left;
            border-left: 1px solid var(--primary-bg-color);
            padding: 20px 10px 0;
            height: 80px;
        }

            .ins.lrg > .oview > li.chart {
                padding: 0;
            }

                .ins.lrg > .oview > li.chart small.label {
                    position: absolute;
                    bottom: -3px;
                    right: 0px;
                    z-index: 10;
                    padding: 2px;
                    text-transform: uppercase;
                    font-size: 9px;
                }

                .ins.lrg > .oview > li.chart .chart-loading {
                    position: absolute;
                    top: 40px;
                    right: 70px;
                }

        .ins.lrg > .oview dl {
            margin: 0;
        }

        .ins.lrg > .oview dt {
            font-size: 11px;
            margin-top: 0;
            line-height: 16px;
            margin: 0;
            margin-bottom: 2px;
            color: var(--primary-font-color);
        }

        .ins.lrg > .oview dd {
            font-size: 16px;
            font-weight: bold;
            line-height: 26px;
            margin: 0;
        }

@media (max-width: 1110px) {
    .ins.lrg > .oview dd {
        font-size: 14px;
    }
}

@media (min-width: 1110px) {
    .ins.lrg > .oview dd {
        font-size: 16px;
    }
}

@media (min-width: 1230px) {
    .ins.lrg > .oview dd {
        font-size: 18px;
    }
}

.ins.lrg .actions > .btn {
    position: relative;
    top: 5px;
}

.ins.lrg .todays-change {
    width: 27%;
}

.ins.lrg .last-price {
    width: 17%;
}

.ins.lrg .days-range {
    width: 33%;
}

.ins.lrg .chart {
    width: 23%;
}

.ins.lrg .delete {
    vertical-align: middle;
    display: none;
}

.ins.lrg .icon-switcher {
    top: 2px;
    float: none;
    margin-left: 10px;
}

.ins.lrg .indicator {
    top: 5px;
    left: -10px;
}

.ins.lrg .flag {
    top: -5px;
    margin-right: 10px;
}

.ins.lrg .marketstatus .icon-marketstatus {
    margin-bottom: 30px;
}

.edit_mode .ins.lrg .oview li.delete {
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    background: var(--tertiary-bg-color);
    padding: 27px 10px 28px;
    text-align: center;
}

    .edit_mode .ins.lrg .oview li.delete .btn {
        top: 0;
        right: 0;
    }

.edit_mode .ins.lrg .oview li.chart {
    display: none;
}

.ins.lrg.instrument-view .title h2 {
    padding-left: 25px;
}

.ins.lrg.instrument-view .oview .todays-change {
    width: 30%;
}

.ins.lrg.instrument-view .oview .last-price {
    width: 22%;
}

.ins.lrg.instrument-view .oview .days-range {
    width: 38%;
}

.ins.lrg.instrument-view .oview .actions {
    width: 10%;
    text-align: center;
}

/* 
# Small Instrument View

## International Indices Example
As seen on the International Indices table on the __Markets__ Tab.

```
<div class="widget w-table w-inslist sml">
            <table class="striped intindices" width="100" border="0" cellpadding="0" cellspacing="0">
                <colgroup>
                        <col class="indicator-wrap">
                        <col class="name">
                        <col class="last">
                        <col class="sinceclose">
                        <col class="chart">
                </colgroup>
                <tbody data-bind="foreach: intIndices">
                <tr class="ins mover_positive">
                    <td class="indicator-wrap"><i class="indicator"></i></td>
                    <td class="name"><span>Indices Name</span></td>
                    <td class="last val">0,000.00</td>
                    <td class="sinceclose ins-data val">00.00 (0.00%)</td>
                    <td class="chart actions">
                        <div class="chart52w" data-type="chart52w">
                            <span class="indicator" style="left:64%;"></span>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
```
*/
.w-inslist .ins.lrg .title h2, .w-inslist .ins.lrg .title h2 span, .w-inslist .ins.lrg .title dd {
    font-size: 18px;
    line-height: 24px;
}

.w-inslist .ins.lrg .title span, .w-inslist .ins.lrg .oview dt {
    font-size: 12px;
    line-height: 16px;
}

.w-inslist .ins.lrg .title h2 {
    padding-left: 25px;
}

.w-inslist .ins.lrg .title .indicator {
    top: 24px;
}

.w-inslist .inslist .ins.lrg {
    background: #2c2c2c;
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzM4MzgzOCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2c2c2c), color-stop(100%, var(--secondary-bg-color)));
    background: -webkit-linear-gradient(top, #2c2c2c, var(--secondary-bg-color));
    background: -moz-linear-gradient(top, #2c2c2c, var(--secondary-bg-color));
    background: -o-linear-gradient(top, #2c2c2c, var(--secondary-bg-color));
    background: linear-gradient(top, #2c2c2c, var(--secondary-bg-color));
    border-top: 1px solid #5c5c5c;
    border-bottom: 1px solid black;
    text-shadow: 0 1px 0 black;
    color: var(--primary-font-color);
}

.w-inslist .inslist li.chart .chart-loading {
    display: block;
    top: 0;
    color: #666666;
    padding: 0 0;
    font-size: 11px;
    text-align: center;
    text-transform: uppercase;
    line-height: 16px;
    font-style: italic;
    text-shadow: none;
    position: relative;
    top: 50%;
    margin-top: -8px;
}

.w-inslist .inslist.lrg li {
    *zoom: 1;
}

    .w-inslist .inslist.lrg li:after {
        content: "";
        display: table;
        clear: both;
    }

    .w-inslist .inslist.lrg li.chart {
        padding: 0;
    }

/*
## Small Instrument Widget: Table
Small Instrument List displayed as a table

This is a widget table as found on the markets landing page
```
        <div class="widget w-table w-inslist sml">
            <table class="striped intindices" width="100" border="0" cellpadding="0" cellspacing="0">
                <colgroup>
                        <col class="indicator-wrap">
                        <col class="name">
                        <col class="last">
                        <col class="sinceclose">
                        <col class="chart">
                </colgroup>
                <thead>
                    <tr>
                        <th class="name desc" colspan="2"><h2>Int. Indices</h2></th>
                        <th class="last val">Last</th>
                        <th class="sinceclose val">Since prev close</th>
                        <th class="graph graph-52-week actions">
                            <div class="cell_wrap">
                                <span class="pull-left">Low</span>
                                <span class="centered">Today</span>
                                <span class="pull-right">High</span>
                            </div>
                        </th>
                    </tr>
                </thead>
                <tbody data-bind="foreach: intIndices">
                <tr class="ins mover_positive">
                    <td class="indicator-wrap"><i class="indicator"></i></td>
                    <td class="name"><span>Indices Name</span></td>
                    <td class="last val">0,000.00</td>
                    <td class="sinceclose ins-data val">00.00 (0.00%)</td>
                    <td class="chart actions">
                        <div class="chart52w" data-type="chart52w">
                            <span class="indicator"></span>
                        </div>
                    </td>
                </tr>
                <tr class="ins mover_positive">
                    <td class="indicator-wrap"><i class="indicator"></i></td>
                    <td class="name"><span>Indices Name</span></td>
                    <td class="last val">0,000.00</td>
                    <td class="sinceclose ins-data val">00.00 (0.00%)</td>
                    <td class="chart actions">
                        <div class="chart52w" data-type="chart52w">
                            <span class="indicator" style="left: 93.27830188679553%;"></span>
                        </div>
                    </td>
                </tr>
                <tr class="ins mover_none">
                    <td class="indicator-wrap"><i class="indicator"></i></td>
                    <td class="name"><span>Indices Name</span></td>
                    <td class="last val">00,000.00</td>
                    <td class="sinceclose ins-data val">0 (0.00%)</td>
                    <td class="chart actions">
                        <div class="chart52w" data-type="chart52w">
                            <span class="indicator" style="left: 78.9760744673116%;"></span>
                        </div>
                    </td>
                </tr>
                <tr class="ins mover_positive">
                    <td class="indicator-wrap"><i class="indicator"></i></td>
                    <td class="name"><span>Indices Name</span></td>
                    <td class="last val">00,000.00</td>
                    <td class="sinceclose ins-data val">00.00 (0.00%)</td>
                    <td class="chart actions">
                        <div class="chart52w" data-type="chart52w">
                            <span class="indicator" style="left: 84.90295688419945%;"></span>
                        </div>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
```
*/
/*
## Small Instrument Widget: List
Small Instrument List displayed as an unordered list  

This is a widget list as found at the bottom of the markets landing page
```
<div id="markets-view">
        <div class="panel" id="panel_markets_commodities">
            <div class="widget w-inslist sml commodities">
                <div class="header">
                    <h2>Commodities</h2>
                </div>
                <div class="content">
                    <ul>
                        <li class="ins mover_negative">
                            <i class="indicator indicator_small"></i>
                            <span class="name">Commodity Type</span>
                            <span class="changeamount ins-data">-00.00 (-0.00%)</span>
                            <span class="price">00,000.00</span>
                        </li>
                        <li class="ins mover_none">
                            <i class="indicator indicator_small"></i>
                            <span class="name">Commodity Type</span>
                            <span class="changeamount ins-data">0 (0.00%)</span>
                            <span class="price">0,000.00</span>
                        </li>
                        <li class="ins mover_none">
                            <i class="indicator indicator_small"></i>
                            <span class="name">Commodity Type</span>
                            <span class="changeamount ins-data">0 (0.00%)</span>
                            <span class="price">0,000.00</span>
                        </li>
                            <li class="ins mover_none">
                            <i class="indicator indicator_small"></i>
                            <span class="name">Commodity Type</span>
                            <span class="changeamount ins-data">0 (0.00%)</span>
                            <span class="price">00.00</span>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
</div>
```
*/
/* Instrument: Instrument Item Widget - Small View */
.w-inslist.sml {
    border-radius: 6px;
}

    .w-inslist.sml .content {
        background: transparent;
        height: 100%;
        overflow: hidden;
    }

    .w-inslist.sml ul {
        border-bottom: none;
    }

    .w-inslist.sml li {
        list-style: none;
        position: relative;
        text-shadow: none;
        border-bottom: none;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
        padding: 3px 10px 0 5px;
        height: 52px;
        cursor: pointer;
        *zoom: 1;
    }

        .w-inslist.sml li:after {
            content: "";
            display: table;
            clear: both;
        }

        .w-inslist.sml li a {
            color: var(--primary-font-color);
            text-decoration: none;
            font-weight: normal;
            padding: 5px;
            display: inline-block;
        }

        .w-inslist.sml li .indicator {
            position: relative;
            left: -5px;
            top: 6px;
            float: left;
            margin-right: 5px;
        }

        .w-inslist.sml li .name {
            display: block;
            color: var(--primary-font-color);
            font-size: 13px;
            line-height: 12px;
            font-weight: normal;
            padding-top: 3px;
        }

        .w-inslist.sml li .price {
            display: block;
            color: var(--primary-font-color);
            font-size: 13px;
            line-height: 19px;
            font-weight: normal;
        }

        .w-inslist.sml li .changeamount {
            display: block;
            float: right;
            position: relative;
            top: 0;
            right: 10px;
            font-size: 14px;
            line-height: 21px;
            font-weight: normal;
        }

    .w-inslist.sml .inslist.split-2 li:last-child, .w-inslist.sml .inslist.split-2 li:nth-last-child(2) {
        float: left;
        border-bottom: none;
    }

    .w-inslist.sml .inslist.split-2 li:nth-child(2n-1) {
        border-right: 1px solid #4c4c4c;
    }

    .w-inslist.sml col.indicator-wrap {
        min-width: 20px;
        width: 3%;
    }

    .w-inslist.sml col.name {
        width: 31%;
    }

    .w-inslist.sml col.last {
        width: 17%;
        font-size: 16px;
    }

    .w-inslist.sml col.sinceclose {
        width: 28%;
        font-size: 16px;
    }

    .w-inslist.sml col.chart {
        width: 22%;
        text-align: center;
    }

    .w-inslist.sml th, .w-inslist.sml div.desc {
        background: var(--primary-bg-color);
        padding: 9px 10px 8px;
    }

        .w-inslist.sml th h2, .w-inslist.sml div.desc h2 {
            margin-bottom: 0;
            top: 0;
            text-shadow: 0 1px 0 black;
        }

    .w-inslist.sml td {
        padding: 4px 10px 5px;
        height: 32px;
        -webkit-box-sizing: content-box;
        -moz-box-sizing: content-box;
        box-sizing: content-box;
    }

        .w-inslist.sml td.indicator-wrap {
            background: var(--secondary-bg-color);
            padding-left: 0;
            padding-right: 0;
        }

            .w-inslist.sml td.indicator-wrap .indicator {
                position: relative;
                top: 3px;
            }

        .w-inslist.sml td.last {
            font-size: 13px;
            font-weight: normal;
            line-height: 21px;
        }

        .w-inslist.sml td.sinceclose {
            font-size: 13px;
            font-weight: normal;
            line-height: 21px;
            padding-left: 5px;
            padding-right: 15px;
        }

    .w-inslist.sml .name {
        border-left: none;
        font-size: 14px;
        font-weight: bold;
        line-height: 15px;
        padding-right: 0;
    }

        .w-inslist.sml .name span {
            display: block;
            width: 100%;
            line-height: 15px;
        }

    .w-inslist.sml.w-table .graph-52-week {
        padding: 8px 10px;
    }

    .w-inslist.sml.charted li .name {
        display: block;
        color: #888888;
        font-size: 11px;
        line-height: 17px;
        font-weight: bold;
        padding-top: 3px;
        white-space: nowrap;
        overflow: hidden;
        white-space: nowrap;
        overflow: hidden;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
    }

    .w-inslist.sml.charted li .price {
        display: inline-block;
        color: var(--primary-font-color);
        font-size: 14px;
        line-height: 19px;
        font-weight: bold;
        margin-right: 5px;
        padding-bottom: 4px;
    }

    .w-inslist.sml.charted li .changeamount {
        display: inline-block;
        float: none;
        font-size: 14px;
        line-height: 19px;
        font-weight: bold;
        padding-bottom: 4px;
        right: 5px;
    }

    .w-inslist.sml.charted li .chart {
        position: relative;
        float: right;
        top: -3px;
        background-size: contain;
    }

    .w-inslist.sml.charted li .chart-loading-placeholder {
        float: none;
        position: absolute;
        top: -3px;
        right: 0;
    }

        .w-inslist.sml.charted li .chart-loading-placeholder .chart-loading {
            display: block;
            position: relative;
            right: 0;
            top: 0;
            color: #666666;
            padding: 0;
            font-size: 11px;
            text-align: center;
            text-transform: uppercase;
            line-height: 51px;
            font-style: italic;
            text-shadow: none;
        }

.chart {
    line-height: 0;
}

    .chart div {
        margin: 0 auto;
    }

    /* #No Relevant Data
View for charts without data 

```
<div class="widget w-chart">
    <div class="header">
        <h3>Trend Chart</h3>
    </div>
    <div class="content">
        <div id="policy-trendchart" class="chart nodata">
            <div style="width: 469px; height: 280px; line-height: 0;"></div>
        </div>
    </div>
</div>

```
*/
    .chart.nodata {
        background: url("../images/nodata.png?v=1") 50% 50% no-repeat;
    }

.chart-group .chart {
    margin-top: 20px;
}

    .chart-group .chart:first-child {
        margin-top: 0;
    }

/*
#Chart Keys
Different available chart keys
*/
.key {
    display: inline-block;
    height: 12px;
    width: 12px;
    background: black;
    position: relative;
    vertical-align: top;
    margin-right: 5px;
    position: relative;
    top: 2px;
}

.key-usd {
    background-color: transparent;
}

.key-pound {
    background-color: transparent;
}

.key-euro {
    background-color: transparent;
}

.key-gdp {
    background-color: transparent;
}

.key-allshare {
    background-color: transparent;
}

/*
##Keys: Square
```
<style>
.chartkeystyling li {list-style:none; padding:5px 0; color:#777; font-size:12px; line-height:20px; float: left; width:110px; margin-bottom:10px;}
.chartkeystyling li i {vertical-align:middle; padding-right:5px; display: block; margin-bottom: 5px;}
</style>
<ul class="chartkeystyling">
    <li><i class="key key-red"></i> Red</li>
    <li><i class="key key-yellow"></i> Yellow</li>
    <li><i class="key key-green"></i> Green</li>
</ul>

```
*/
.key-red {
    background: #de1601;
}

.key-yellow {
    background: #fbd510;
}

.key-green {
    background: #92b340;
}

.key-blue {
    background: #8FD0FA;
}

/*
##Keys: Dash
```
<ul class="chartkeystyling">
    <li><i class="key key-dash key-dash-lblue"></i> Light Blue</li>
    <li><i class="key key-dash key-dash-blue"></i> Blue</li>
    <li><i class="key key-dash key-dash-green"></i> Green</li>
    <li><i class="key key-dash key-dash-red"></i> Red</li>
</ul>
```
*/
.key-dash {
    background-image: url("../images/dark_sprites.png?v=1.12");
    background-color: transparent;
    background-repeat: no-repeat;
    height: 3px;
    width: 10px;
    top: 7px;
}

.key-dash-lblue {
    background-position: -90px -30px;
}

.key-dash-blue {
    background-position: -90px -40px;
}

.key-dash-green {
    background-position: -90px -50px;
}

.key-dash-red {
    background-position: -90px -60px;
}

/*
##Keys: Quarter Rounds
```
<ul class="chartkeystyling">
    <li><i class="key key-qtrnd key-qtrnd-000"></i> 000</li>
    <li><i class="key key-qtrnd key-qtrnd-001"></i> 001</li>
    <li><i class="key key-qtrnd key-qtrnd-002"></i> 002</li>
    <li><i class="key key-qtrnd key-qtrnd-003"></i> 003</li>
    <li><i class="key key-qtrnd key-qtrnd-004"></i> 004</li>
    <li><i class="key key-qtrnd key-qtrnd-005"></i> 005</li>
    <li><i class="key key-qtrnd key-qtrnd-006"></i> 006</li>
    <li><i class="key key-qtrnd key-qtrnd-007"></i> 007</li>
    <li><i class="key key-qtrnd key-qtrnd-008"></i> 008</li>
    <li><i class="key key-qtrnd key-qtrnd-009"></i> 009</li>
    <li><i class="key key-qtrnd key-qtrnd-0010"></i> 0010</li>
    <li><i class="key key-qtrnd key-qtrnd-0011"></i> 0011</li>
    <li><i class="key key-qtrnd key-qtrnd-0012"></i> 0012</li>
    <li><i class="key key-qtrnd key-qtrnd-0013"></i> 0013</li>
    <li><i class="key key-qtrnd key-qtrnd-0014"></i> 0014</li>
</ul>
```
*/
.key-qtrnd {
    /*background-image: url("../images/key_sprites.png?v=1");*/
    background-color: transparent; 
}

.key-qtrnd-000 {
    color: #B2FCE0 !important;
}

.key-qtrnd-001 {
    color: #CFD5DA !important;
}

.key-qtrnd-002 {
    color: #D3CAF7 !important;
}

.key-qtrnd-003 {
    color: #70DBD1 !important;
}

.key-qtrnd-004 {
    color: #669AFF !important;
}

.key-qtrnd-005 {
    color: #CC68FA !important;
}

.key-qtrnd-006 {
    color: #669AFF !important;
}

.key-qtrnd-007 {
    color: #669AFF !important;
}

.key-qtrnd-008 {
    color: #669AFF !important;
}

.key-qtrnd-009 {
    color: #669AFF !important;
}

.key-qtrnd-0010 {
    color: #669AFF !important;
}

.key-qtrnd-0011 {
    color: #669AFF !important;
}

.key-qtrnd-0012 {
    color: #669AFF !important;
}

.key-qtrnd-0013 {
    color: #669AFF !important;
}

.key-qtrnd-0014 {
    color: #669AFF !important;
}

/*
##Keys: 1 Day Chart Alerts
```
<ul class="chartkeystyling alerts-key">
    <li><i class="key alert-long"></i> Long</li>
    <li><i class="key alert-short"></i> Short</li>
    <li><i class="key alert-buy"></i> Buy</li>
    <li><i class="key alert-sell"></i> Sell</li>
    
</ul>
```
*/
.alerts-key .key {
    background-image: url("../images/dark_sprites.png?v=1.12");
    background-repeat: no-repeat;
    display: inline-block;
    width: 9px;
    height: 3px;
    margin: 0 5px 2px 0;
    position: relative;
    top: 6px;
}

.key.alert-long {
    background-position: -90px -30px;
}

.key.alert-short {
    background-position: -90px -40px;
}

.key.alert-buy {
    background-position: -90px -50px;
}

.key.alert-sell {
    background-position: -90px -60px;
}

.chart-key {
    list-style: none;
    background: #333;
    min-height: 0;
    margin: 0;
    top: 0;
    padding: 0;
    *zoom: 1;
}

    .chart-key:after {
        content: "";
        display: table;
        clear: both;
    }

    .chart-key li {
        margin: 0 5px 0;
        padding: 5px;
        line-height: 16px;
        font-size: 14px;
        color: var(--primary-font-color);
    }

    .chart-key.horiz li {
        float: left;
        font-size: 11px;
        color: gray;
        text-shadow: none;
    }

/*
##Keys: Dividend Chart Colours
```
<ul class="chartkeystyling">
    <li><i class="key key-orange1"></i> Orange 1</li>
    <li><i class="key key-orange2"></i> Orange 2</li>
    <li><i class="key key-orange3"></i> Orange 3</li>
    <li><i class="key key-orange-total"></i> Orange Total</li>
    
</ul>
```
*/
i.key-orange1 {
    background: #48f3d0;
}

i.key-orange2 {
    background: #21f5a8;
}

i.key-orange3 {
    background: #0ba687;
}

i.key-orange-total {
    background: #48f3d0;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIzMiUiIHN0b3AtY29sb3I9IiNmZjdjNDciIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIzMyUiIHN0b3AtY29sb3I9IiNlMTRlMTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2NyUiIHN0b3AtY29sb3I9IiNlMTRlMTIiIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSI2OCUiIHN0b3AtY29sb3I9IiM5YzMzMDkiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #48f3d0 32%, #21f5a8 33%, #21f5a8 67%, #0ba687 68%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(32%, #48f3d0), color-stop(33%, #21f5a8), color-stop(67%, #21f5a8), color-stop(68%, #0ba687));
    background: -webkit-linear-gradient(top, #48f3d0 32%, #21f5a8 33%, #21f5a8 67%, #0ba687 68%);
    background: -o-linear-gradient(top, #48f3d0 32%, #21f5a8 33%, #21f5a8 67%, #0ba687 68%);
    background: -ms-linear-gradient(top, #48f3d0 32%, #21f5a8 33%, #21f5a8 67%, #0ba687 68%);
    background: linear-gradient(to bottom, #48f3d0 32%, #21f5a8 33%, #21f5a8 67%, #0ba687 68%);
}

/* 
#Ratings Table 
As found on Country Landing > Ratings page

```
<div class="widget w-contentview bg2 agency-rating">
    <div class="header" data-bind="with: selectedCountry">
        <h3>How <span data-bind="text: name">Morocco</span> is measured by the agencies</h3>
    </div>
    <div class="content" data-bind="with: selectedCountry">
        <table class="col-striped row-groups ratings">
            <colgroup>
                <col class="rating-fitch">
                <col class="rating-moody">
                <col class="rating-sp">
                <col class="rating-nkc">
                <col class="rating-desc">
            </colgroup>
            <thead>
                <tr>
                    <th>Fitch</th>
                    <th>Moody's</th>
                    <th>S&amp;P</th>
                    <th>NKC</th>
                    <th class="nobg"></th>
                </tr>
            </thead>
            <tbody data-bind="foreach: flatAgencyMeasures">
                <tr data-bind="css: groupCss" class="group-start group-end">
                    <td><span data-bind="css: fitchClass, text: fitchCode"></span></td>
                    <td><span data-bind="css: moodysClass, text: moodysCode"></span></td>
                    <td><span data-bind="css: spClass, text: spCode"></span></td>
                    <td><span data-bind="css: nkcClass, text: nkcCode"></span></td>
                    <th data-bind="text: category">PRIME</th>
                </tr>
            
                <tr data-bind="css: groupCss" class="group-start">
                    <td><span data-bind="css: fitchClass, text: fitchCode"></span></td>
                    <td><span data-bind="css: moodysClass, text: moodysCode"></span></td>
                    <td><span data-bind="css: spClass, text: spCode"></span></td>
                    <td><span data-bind="css: nkcClass, text: nkcCode"></span></td>
                    <th data-bind="text: category">HIGH GRADE</th>
                </tr>
            
                <tr data-bind="css: groupCss">
                    <td><span data-bind="css: fitchClass, text: fitchCode"></span></td>
                    <td><span data-bind="css: moodysClass, text: moodysCode"></span></td>
                    <td><span data-bind="css: spClass, text: spCode"></span></td>
                    <td><span data-bind="css: nkcClass, text: nkcCode"></span></td>
                    <th data-bind="text: category">UPPER MEDIUM GRADE</th>
                </tr>
            
                <tr data-bind="css: groupCss">
                    <td><span data-bind="css: fitchClass, text: fitchCode" class="rating rate-grade">BBB-</span></td>
                    <td><span data-bind="css: moodysClass, text: moodysCode"></span></td>
                    <td><span data-bind="css: spClass, text: spCode" class="rating rate-grade">BBB-</span></td>
                    <td><span data-bind="css: nkcClass, text: nkcCode"></span></td>
                    <th data-bind="text: category">LOWER MEDIUM GRADE</th>
                </tr>
            
                <tr data-bind="css: groupCss" class="group-end">
                    <td><span data-bind="css: fitchClass, text: fitchCode"></span></td>
                    <td><span data-bind="css: moodysClass, text: moodysCode"></span></td>
                    <td><span data-bind="css: spClass, text: spCode"></span></td>
                    <td><span data-bind="css: nkcClass, text: nkcCode"></span></td>
                    <th data-bind="text: category">NON-INVESTMENT GRADE</th>
                </tr>
            
                <tr data-bind="css: groupCss" class="group-start">
                    <td><span data-bind="css: fitchClass, text: fitchCode"></span></td>
                    <td><span data-bind="css: moodysClass, text: moodysCode" class="rating rate-speculative">Ba1</span></td>
                    <td><span data-bind="css: spClass, text: spCode"></span></td>
                    <td><span data-bind="css: nkcClass, text: nkcCode" class="rating rate-speculative">BB+</span></td>
                    <th data-bind="text: category">SPECULATIVE</th>
                </tr>
            
                <tr data-bind="css: groupCss">
                    <td><span data-bind="css: fitchClass, text: fitchCode"></span></td>
                    <td><span data-bind="css: moodysClass, text: moodysCode"></span></td>
                    <td><span data-bind="css: spClass, text: spCode"></span></td>
                    <td><span data-bind="css: nkcClass, text: nkcCode"></span></td>
                    <th data-bind="text: category">HIGHLY SPECULATIVE</th>
                </tr>
            
                <tr data-bind="css: groupCss" class="group-end">
                    <td><span data-bind="css: fitchClass, text: fitchCode"></span></td>
                    <td><span data-bind="css: moodysClass, text: moodysCode"></span></td>
                    <td><span data-bind="css: spClass, text: spCode"></span></td>
                    <td><span data-bind="css: nkcClass, text: nkcCode"></span></td>
                    <th data-bind="text: category">SUBSTANTIAL RISK</th>
                </tr>
            
                <tr data-bind="css: groupCss" class="group-hidden">
                    <td><span data-bind="css: fitchClass, text: fitchCode"></span></td>
                    <td><span data-bind="css: moodysClass, text: moodysCode"></span></td>
                    <td><span data-bind="css: spClass, text: spCode"></span></td>
                    <td><span data-bind="css: nkcClass, text: nkcCode"></span></td>
                    <th data-bind="text: category">NOT RATED</th>
                </tr>
            </tbody>
        </table>
    </div>
</div>
```
*/
table.ratings {
    background: transparent;
}

    table.ratings th {
        font-size: 9px;
        line-height: 17px;
        border-left: none;
    }

    table.ratings td {
        text-align: center;
        height: 34px;
        border-left: none;
    }

    table.ratings thead th {
        background: #323232;
    }

        table.ratings thead th.nobg {
            background: transparent;
        }

    table.ratings tbody th {
        text-transform: uppercase;
    }

.rating {
    width: 28px;
    height: 28px;
    display: block;
    color: #282828;
    background: #565656;
    border: none;
    margin: 3px auto;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 11px;
    line-height: 28px;
    text-align: center;
    text-shadow: none;
    letter-spacing: -0.1em;
    -webkit-border-radius: 14px;
    -moz-border-radius: 14px;
    -ms-border-radius: 14px;
    -o-border-radius: 14px;
    border-radius: 14px;
}

.rate-prime {
    background-color: #94b323;
}

.rate-grade {
    background-color: #fad500;
}

.rate-speculative {
    background-color: #db2300;
}

/* #Chart Panel 

```
<div class="panel full-chart">
    <div class="header">
        <div data-bind="with: chartSelection">

            <div class="component c-frequency">
                <ul class="breadcrumb">
                    <li class="primary"><label>Frequency</label></li>
                    <li class="sub">
                        <dl class="dropDownList" style="width: 100px;">
                            <dt><span>Daily</span><i class="icon icon-showmore"></i></dt>
                        </dl>
                    </li>
                </ul>    
            </div>
            <div class="component c-dateSelect with-custom">
                <ul class="btn-group">
                    <li>
                        <a class="btn btn-default">1W</a>
                    </li>
                
                    <li class="current">
                        <a class="btn btn-default">1M</a>
                    </li>
                
                    <li>
                        <a class="btn btn-default">6M</a>
                    </li>
                
                    <li>
                        <a class="btn btn-default">1Y</a>
                    </li>
                
                    <li>
                        <a class="btn btn-default">5Y</a>
                    </li>
                
                    <li>
                        <a class="btn btn-default">Custom</a>
                    </li>
                </ul></div>
        </div>
        <ul class="btn-group separate pull-right">
            <li>
                <a class="btn btn-action btn_analysis trigger">Analysis</a>
            </li>
            <li>
                <a class="btn btn-action btn_chart-type trigger">Chart Type</a>
            </li>
            <li>
                <a class="btn btn-action btn_reset">Reset</a>
            </li>
        </ul>
    </div>

    <div class="content">
        <div id="chart_area" style="height: 570px; width: 100%; padding:right:20px;" class="chart" data-highcharts-chart="32"><div class="highcharts-container" id="highcharts-128" style="position: relative; overflow: hidden; width: 1335px; height: 570px; text-align: left; line-height: normal; z-index: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); font-family: 'Lucida Grande', 'Lucida Sans Unicode', Verdana, Arial, Helvetica, sans-serif; font-size: 12px;"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="1335" height="570"><desc>Created with Highstock 1.3.7</desc><defs><linearGradient x1="0" y1="0" x2="0" y2="100" gradientUnits="userSpaceOnUse" id="highcharts-129"><stop offset="0" stop-color="rgb(50,50,50)" stop-opacity="0.9"></stop><stop offset="1" stop-color="rgb(25,25,25)" stop-opacity="0.9"></stop></linearGradient><clipPath id="highcharts-130"><rect fill="none" x="0" y="0" width="1295" height="440"></rect></clipPath><linearGradient x1="0" y1="0" x2="0" y2="1" id="highcharts-133"><stop offset="0" stop-color="rgb(225,78,19)" stop-opacity="0.5"></stop><stop offset="1" stop-color="rgb(15,15,15)" stop-opacity="0.5"></stop></linearGradient></defs><rect rx="0" ry="0" fill="transparent" x="0" y="0" width="1335" height="570"></rect><path fill="#111" d="M 30 490 L 1325 490 1325 427 30 427"></path><path fill="#111" d="M 30 364 L 1325 364 1325 301 30 301"></path><path fill="#111" d="M 30 239 L 1325 239 1325 176 30 176"></path><path fill="#111" d="M 30 113 L 1325 113 1325 50 30 50"></path><text x="30" y="15" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#666;display:none;fill:#666;"><tspan x="30">Zoom</tspan></text><g class="highcharts-grid" zIndex="1"></g><g class="highcharts-grid" zIndex="1"><path fill="none" d="M 30 427.5 L 1325 427.5" stroke="#222" stroke-width="1" zIndex="1" opacity="1"></path><path fill="none" d="M 30 364.5 L 1325 364.5" stroke="#222" stroke-width="1" zIndex="1" opacity="1"></path><path fill="none" d="M 30 301.5 L 1325 301.5" stroke="#222" stroke-width="1" zIndex="1" opacity="1"></path><path fill="none" d="M 30 239.5 L 1325 239.5" stroke="#222" stroke-width="1" zIndex="1" opacity="1"></path><path fill="none" d="M 30 176.5 L 1325 176.5" stroke="#222" stroke-width="1" zIndex="1" opacity="1"></path><path fill="none" d="M 30 113.5 L 1325 113.5" stroke="#222" stroke-width="1" zIndex="1" opacity="1"></path><path fill="none" d="M 30 49.5 L 1325 49.5" stroke="#222" stroke-width="1" zIndex="1" opacity="1"></path><path fill="none" d="M 30 490.5 L 1325 490.5" stroke="#222" stroke-width="1" zIndex="1" opacity="1"></path></g><g class="highcharts-grid" zIndex="1"><path fill="none" d="M 353.5 515 L 353.5 555" stroke="#C0C0C0" stroke-width="1" zIndex="1" opacity="1"></path><path fill="none" d="M 605.5 515 L 605.5 555" stroke="#C0C0C0" stroke-width="1" zIndex="1" opacity="1"></path><path fill="none" d="M 844.5 515 L 844.5 555" stroke="#C0C0C0" stroke-width="1" zIndex="1" opacity="1"></path><path fill="none" d="M 1036.5 515 L 1036.5 555" stroke="#C0C0C0" stroke-width="1" zIndex="1" opacity="1"></path><path fill="none" d="M 1324.5 515 L 1324.5 555" stroke="#C0C0C0" stroke-width="1" zIndex="1" opacity="1"></path><path fill="none" d="M 149.5 515 L 149.5 555" stroke="#C0C0C0" stroke-width="1" zIndex="1" opacity="1"></path></g><g class="highcharts-grid" zIndex="1"></g><g class="highcharts-axis" zIndex="2"></g><g class="highcharts-axis" zIndex="2"></g><g class="highcharts-axis" zIndex="2"></g><g class="highcharts-axis" zIndex="2"></g><g class="highcharts-series-group" zIndex="3"><g class="highcharts-series" visibility="visible" zIndex="0.1" transform="translate(30,50) scale(1 1)" clip-path="url(#highcharts-130)"><path fill="none" d="M 0 403.54285714285714 L 71.94444444444446 396.9805714285714 L 143.8888888888889 348.58057142857143 L 215.83333333333334 306.74285714285713 L 287.7777777777778 261.4605714285714 L 359.72222222222223 236.39314285714286 L 431.6666666666667 289.7714285714286 L 503.61111111111114 295.8057142857143 L 575.5555555555557 301.7142857142857 L 647.5000000000001 280.2925714285714 L 719.4444444444445 322.75885714285715 L 791.3888888888889 290.4 L 863.3333333333334 267.06742857142854 L 935.2777777777778 221.50857142857143 L 1007.2222222222223 132 L 1079.1666666666667 119.42857142857139 L 1151.1111111111113 88 L 1223.0555555555557 55.31428571428569 L 1295.0000000000002 86.44114285714284" stroke="var(--secondary-font-color)" stroke-width="2" zIndex="1" stroke-linejoin="round" stroke-linecap="round"></path><path fill="none" d="M -10 403.54285714285714 L 0 403.54285714285714 L 71.94444444444446 396.9805714285714 L 143.8888888888889 348.58057142857143 L 215.83333333333334 306.74285714285713 L 287.7777777777778 261.4605714285714 L 359.72222222222223 236.39314285714286 L 431.6666666666667 289.7714285714286 L 503.61111111111114 295.8057142857143 L 575.5555555555557 301.7142857142857 L 647.5000000000001 280.2925714285714 L 719.4444444444445 322.75885714285715 L 791.3888888888889 290.4 L 863.3333333333334 267.06742857142854 L 935.2777777777778 221.50857142857143 L 1007.2222222222223 132 L 1079.1666666666667 119.42857142857139 L 1151.1111111111113 88 L 1223.0555555555557 55.31428571428569 L 1295.0000000000002 86.44114285714284 L 1305.0000000000002 86.44114285714284" stroke-linejoin="round" visibility="visible" stroke-opacity="0.0001" stroke="rgb(192,192,192)" stroke-width="22" zIndex="2" class=" highcharts-tracker" style=""></path></g><g class="highcharts-markers highcharts-tracker" visibility="visible" zIndex="0.1" transform="translate(30,50) scale(1 1)" clip-path="none" style=""></g><g class="highcharts-series" visibility="visible" zIndex="0.1" transform="translate(30,515) scale(1 1)" clip-path="url(#highcharts-131)"><path fill="url(#highcharts-133)" d="M 0 36.666666666666664 C 0 36.666666666666664 43.16666666666667 36.666666666666664 71.94444444444446 36.03850782190133 C 100.72222222222224 35.41034897713599 115.11111111111113 33.133092659446454 143.8888888888889 31.405535499398315 C 172.66666666666669 29.677978339350176 187.05555555555557 29.068592057761727 215.83333333333334 27.40072202166065 C 244.61111111111114 25.732851985559567 259.00000000000006 24.412996389891696 287.7777777777778 23.0661853188929 C 316.55555555555554 21.719374247894102 330.94444444444446 20.666666666666664 359.72222222222223 20.666666666666664 C 388.5 20.666666666666664 402.88888888888886 25.198555956678703 431.6666666666667 25.776173285198556 C 460.44444444444446 26.35379061371841 474.83333333333337 26.1251504211793 503.61111111111114 26.35379061371841 C 532.3888888888889 26.58243080625752 546.7777777777778 26.919374247894105 575.5555555555557 26.919374247894105 C 604.3333333333334 26.919374247894105 618.7222222222224 24.868832731648617 647.5000000000001 24.868832731648617 C 676.2777777777779 24.868832731648617 690.6666666666667 28.9338146811071 719.4444444444445 28.9338146811071 C 748.2222222222223 28.9338146811071 762.6111111111111 26.902527075812277 791.3888888888889 25.836341756919374 C 820.1666666666667 24.770156438026476 834.5555555555554 24.92178098676294 863.3333333333334 23.602888086642597 C 892.1111111111111 22.283995186522265 906.5 21.827677496991576 935.2777777777778 19.24187725631769 C 964.0555555555557 16.656077015643802 978.4444444444446 11.877256317689529 1007.2222222222223 10.673886883273163 C 1036 9.470517448856796 1050.388888888889 10.312876052948253 1079.1666666666667 9.470517448856796 C 1107.9444444444446 8.628158844765341 1122.3333333333335 7.689530685920578 1151.1111111111113 6.462093862815884 C 1179.8888888888891 5.234657039711191 1194.2777777777778 3.3333333333333286 1223.0555555555557 3.3333333333333286 C 1251.8333333333335 3.3333333333333286 1295.0000000000002 6.312876052948255 1295.0000000000002 6.312876052948255 L 1295.0000000000002 40 L 0 40" zIndex="0"></path><path fill="none" d="M 0 36.666666666666664 C 0 36.666666666666664 43.16666666666667 36.666666666666664 71.94444444444446 36.03850782190133 C 100.72222222222224 35.41034897713599 115.11111111111113 33.133092659446454 143.8888888888889 31.405535499398315 C 172.66666666666669 29.677978339350176 187.05555555555557 29.068592057761727 215.83333333333334 27.40072202166065 C 244.61111111111114 25.732851985559567 259.00000000000006 24.412996389891696 287.7777777777778 23.0661853188929 C 316.55555555555554 21.719374247894102 330.94444444444446 20.666666666666664 359.72222222222223 20.666666666666664 C 388.5 20.666666666666664 402.88888888888886 25.198555956678703 431.6666666666667 25.776173285198556 C 460.44444444444446 26.35379061371841 474.83333333333337 26.1251504211793 503.61111111111114 26.35379061371841 C 532.3888888888889 26.58243080625752 546.7777777777778 26.919374247894105 575.5555555555557 26.919374247894105 C 604.3333333333334 26.919374247894105 618.7222222222224 24.868832731648617 647.5000000000001 24.868832731648617 C 676.2777777777779 24.868832731648617 690.6666666666667 28.9338146811071 719.4444444444445 28.9338146811071 C 748.2222222222223 28.9338146811071 762.6111111111111 26.902527075812277 791.3888888888889 25.836341756919374 C 820.1666666666667 24.770156438026476 834.5555555555554 24.92178098676294 863.3333333333334 23.602888086642597 C 892.1111111111111 22.283995186522265 906.5 21.827677496991576 935.2777777777778 19.24187725631769 C 964.0555555555557 16.656077015643802 978.4444444444446 11.877256317689529 1007.2222222222223 10.673886883273163 C 1036 9.470517448856796 1050.388888888889 10.312876052948253 1079.1666666666667 9.470517448856796 C 1107.9444444444446 8.628158844765341 1122.3333333333335 7.689530685920578 1151.1111111111113 6.462093862815884 C 1179.8888888888891 5.234657039711191 1194.2777777777778 3.3333333333333286 1223.0555555555557 3.3333333333333286 C 1251.8333333333335 3.3333333333333286 1295.0000000000002 6.312876052948255 1295.0000000000002 6.312876052948255" stroke="var(--secondary-font-color)" stroke-width="1" zIndex="1" stroke-linejoin="round" stroke-linecap="round"></path></g><g class="highcharts-markers" visibility="visible" zIndex="0.1" transform="translate(30,515) scale(1 1)" clip-path="url(#highcharts-132)"></g></g><g class="highcharts-navigator" zIndex="3"><rect fill="rgb(15,15,15)" x="30" y="515" width="0" height="40" fill-opacity="0.6"></rect><rect fill="rgb(15,15,15)" x="1325" y="515" width="0" height="40" fill-opacity="0.6"></rect><path fill="none" stroke="#222" stroke-width="1" d="M 30 515.5 L 30.5 515.5 30.5 555.5 M 1324.5 555.5 L 1324.5 515.5 1325 515.5"></path></g><g style="cursor:e-resize;" zIndex="3" transform="translate(1325,527)"><rect rx="3" ry="3" fill="#999" x="-4.5" y="0.5" width="8" height="15" stroke="#111" stroke-width="1"></rect><path fill="#999" d="M -1.5 4 L -1.5 12 M 0.5 4 L 0.5 12" stroke="#111" stroke-width="1"></path></g><g style="cursor:e-resize;" zIndex="4" transform="translate(30,527)"><rect rx="3" ry="3" fill="#999" x="-4.5" y="0.5" width="8" height="15" stroke="#111" stroke-width="1"></rect><path fill="#999" d="M -1.5 4 L -1.5 12 M 0.5 4 L 0.5 12" stroke="#111" stroke-width="1"></path></g><g class="highcharts-axis-labels" zIndex="7"><text x="52.40625" y="505" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="middle" opacity="1"><tspan x="52.40625">23. Dec</tspan></text><text x="149.90740740740742" y="505" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="middle" opacity="1"><tspan x="149.90740740740742">26. Dec</tspan></text><text x="245.83333333333334" y="505" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="middle" opacity="1"><tspan x="245.83333333333334">30. Dec</tspan></text><text x="389.72222222222223" y="505" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="middle" opacity="1"><tspan x="389.72222222222223">2. Jan</tspan></text><text x="509.6296296296297" y="505" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="middle" opacity="1"><tspan x="509.6296296296297">5. Jan</tspan></text><text x="605.5555555555557" y="505" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="middle" opacity="1"><tspan x="605.5555555555557">7. Jan</tspan></text><text x="749.4444444444445" y="505" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="middle" opacity="1"><tspan x="749.4444444444445">9. Jan</tspan></text><text x="869.351851851852" y="505" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="middle" opacity="1"><tspan x="869.351851851852">12. Jan</tspan></text><text x="965.2777777777778" y="505" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="middle" opacity="1"><tspan x="965.2777777777778">14. Jan</tspan></text><text x="1109.1666666666667" y="505" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="middle" opacity="1"><tspan x="1109.1666666666667">16. Jan</tspan></text><text x="1229.0740740740741" y="505" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="middle" opacity="1"><tspan x="1229.0740740740741">19. Jan</tspan></text><text x="1304.59375" y="505" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="middle" opacity="1"><tspan x="1304.59375">21. Jan</tspan></text></g><g class="highcharts-axis-labels" zIndex="7"><text x="32" y="296.42857142857144" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="start" opacity="1"><tspan x="32">110000</tspan></text><text x="0" y="-9999" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="start"><tspan x="0">120000</tspan></text><text x="32" y="485" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="start" opacity="1"><tspan x="32">102500</tspan></text><text x="32" y="422.1428571428571" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="start" opacity="1"><tspan x="32">105000</tspan></text><text x="32" y="359.2857142857143" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="start" opacity="1"><tspan x="32">107500</tspan></text><text x="32" y="233.57142857142856" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="start" opacity="1"><tspan x="32">112500</tspan></text><text x="32" y="170.71428571428572" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="start" opacity="1"><tspan x="32">115000</tspan></text><text x="32" y="107.85714285714283" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:none;fill:#666;" text-anchor="start" opacity="1"><tspan x="32">117500</tspan></text></g><g class="highcharts-axis-labels" zIndex="7"><text x="152.90740740740742" y="565" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:0 1px 3px rgba(0,0,0,0.4);fill:#666;" text-anchor="start" opacity="1"><tspan x="152.90740740740742">26. Dec</tspan></text><text x="356.75000000000006" y="565" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:0 1px 3px rgba(0,0,0,0.4);fill:#666;" text-anchor="start" opacity="1"><tspan x="356.75000000000006">1. Jan</tspan></text><text x="608.5555555555557" y="565" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:0 1px 3px rgba(0,0,0,0.4);fill:#666;" text-anchor="start" opacity="1"><tspan x="608.5555555555557">7. Jan</tspan></text><text x="848.3703703703704" y="565" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:0 1px 3px rgba(0,0,0,0.4);fill:#666;" text-anchor="start" opacity="1"><tspan x="848.3703703703704">11. Jan</tspan></text><text x="1040.2222222222222" y="565" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:0 1px 3px rgba(0,0,0,0.4);fill:#666;" text-anchor="start" opacity="1"><tspan x="1040.2222222222222">15. Jan</tspan></text><text x="1328.0000000000002" y="565" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:11px;color:#666;cursor:default;line-height:14px;font-weight:normal;text-shadow:0 1px 3px rgba(0,0,0,0.4);fill:#666;" text-anchor="start" opacity="1"><tspan x="1328.0000000000002">21. Jan</tspan></text></g><g class="highcharts-axis-labels" zIndex="7"></g><g class="highcharts-tooltip" zIndex="8" style="cursor:default;padding:0;white-space:nowrap;" transform="translate(0,-999)"><rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="16" height="16" isShadow="true" stroke="black" stroke-opacity="0.049999999999999996" stroke-width="5" transform="translate(1, 1)"></rect><rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="16" height="16" isShadow="true" stroke="black" stroke-opacity="0.09999999999999999" stroke-width="3" transform="translate(1, 1)"></rect><rect rx="3" ry="3" fill="none" x="0.5" y="0.5" width="16" height="16" isShadow="true" stroke="black" stroke-opacity="0.15" stroke-width="1" transform="translate(1, 1)"></rect><rect rx="3" ry="3" fill="url(#highcharts-129)" x="0.5" y="0.5" width="16" height="16"></rect><text x="8" y="21" style="font-family:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, Verdana, Arial, Helvetica, sans-serif;font-size:12px;color:#ccc;text-shadow:0 1px 2px rgba(0,0,0,0.4);fill:#ccc;" zIndex="1"></text></g></svg></div></div>
    </div>
</div>
```
*/
.panel.full-chart > .header {
    background: #2e2e2e;
    height: auto;
    position: relative;
    padding: 15px 20px;
    border-bottom: 1px solid var(--primary-bg-color);
}

    .panel.full-chart > .header > * {
        top: auto;
        left: auto;
    }

.panel.full-chart > .content {
    padding-right: 20px;
    padding-bottom: 20px;
    background: var(--secondary-bg-color);
    border-radius: 6px;
    border: 1px solid var(--tertiary-bg-color);
}

/*
## Chart Widget ##
  
This is a chart widget with chart 
```
<div class="widget w-chart" style="">
    <div class="header">
        <h3>52 Week Range</h3>
    </div>
    <div class="content">
        <div class="chart key-tight">
            <div class="chart52w" data-type="chart52w">
                <span class="indicator" style="left: 80%;"></span>
            </div>
        </div>
        <div class="chart-key key-integrated">
            <ul>
                <li>
                    <span class="value">0</span>
                </li>
                <li>
                    <span class="value">100</span>
                </li>
            </ul>
        </div>
    </div>
</div>
```
*/
/* Charts: Chart Widget */
.w-chart {
    background: var(--secondary-bg-color);
    border-bottom: 6px solid var(--primary-bg-color);
    border-radius: 0 20px 20px 0;
}

    .w-chart .header {
        padding-top: 10px;
    }

        .w-chart .header h3 {
            padding: 0 30px;
        }

    .w-chart .meta dt {
        width: 7%;
        float: left;
        clear: both;
        margin: 0 0 10px 0;
        text-transform: uppercase;
        color: var(--primary-font-color);
        font-size: 12px;
    }

    .w-chart .meta dd {
        width: 90%;
        float: left;
        margin: 0 0 10px 0;
        color: var(--primary-font-color);
        font-size: 11px;
        text-shadow: none;
    }

    .w-chart .meta p {
        color: var(--primary-font-color);
        font-size: 11px;
    }

    .w-chart .chart {
        margin: 0 30px;
        padding: 0 0 15px;
        background: var(--secondary-bg-color);
    }

        .w-chart .chart.horiz li {
            text-transform: uppercase;
        }

        .w-chart .chart.key-tight + .chart-key {
            padding-top: 0;
        }

    .w-chart .table-legend thead td {
        padding: 5px 0 5px 5px;
        font-size: 10px;
        font-weight: bold;
    }

        .w-chart .table-legend thead td.desc {
            font-size: 11px;
        }

    .w-chart .table-legend tbody td {
        padding: 5px 0 5px 5px;
        font-size: 10px;
    }

        .w-chart .table-legend tbody td.desc {
            font-size: 11px;
        }

    .w-chart .table-legend tfoot td {
        padding: 5px 0 5px 5px;
        font-size: 10px;
        font-weight: bold;
    }

        .w-chart .table-legend tfoot td.desc {
            font-size: 11px;
        }

    .w-chart.chart-marketcap .content.nodata p {
        margin-left: 20px;
        margin-right: 20px;
    }

.chart-key.key-integrated {
    background: transparent;
}

    .chart-key.key-integrated li {
        position: relative;
        margin: 0;
        padding: 6px 0 0;
        line-height: 22px;
        display: block;
    }

        .chart-key.key-integrated li:first-child {
            float: left;
            text-align: left;
        }

            .chart-key.key-integrated li:first-child:before {
                content: "";
                position: absolute;
                top: 0;
                left: 0;
                width: 10px;
                height: 7px;
            }

        .chart-key.key-integrated li:last-child {
            float: right;
            text-align: right;
        }

            .chart-key.key-integrated li:last-child:before {
                content: "";
                position: absolute;
                top: 0;
                right: 0;
                width: 10px;
                height: 7px;
            }

        .chart-key.key-integrated li span {
            display: block;
        }

        .chart-key.key-integrated li .value {
            color: #e1e1e1;
            font-size: 16px;
            font-weight: bold;
            text-shadow: 0 1px 0 black;
        }

        .chart-key.key-integrated li .time {
            color: rgba(204, 204, 204, 0.5);
            font-size: 11px;
            text-shadow: none;
            line-height: 12px;
        }

.alerts-key {
    padding: 13px 0;
    text-shadow: 0 1px 0 black;
    font-size: 11px;
    color: rgba(204, 204, 204, 0.5);
    *zoom: 1;
}

    .alerts-key:after {
        content: "";
        display: table;
        clear: both;
    }

    .alerts-key ul {
        float: left;
        margin: 0 20px 0 0;
    }

    .alerts-key li {
        text-shadow: none;
    }

.set-alerts {
    float: right;
}

.alert_type {
    float: left;
    width: 65px;
}

.alert_date {
    float: left;
    width: 100px;
    text-transform: uppercase;
}

.instrumentcomparison .chart {
    margin: 0;
}

.instrumentcomparison .chartlegend {
    padding: 0;
    width: 21%;
    height: 215px;
    padding-bottom: 25px;
    float: left;
    background: #404040;
    position: relative;
}

    .instrumentcomparison .chartlegend table td.legendLabel {
        font-size: 10px;
        line-height: 14px;
        text-transform: uppercase;
        color: #a4a4a4;
        text-shadow: none;
        letter-spacing: 0;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    .instrumentcomparison .chartlegend table td.legendColorBox {
        padding-left: 10px;
        width: 30px;
    }

    .instrumentcomparison .chartlegend table tr > * {
        border-left: 0;
    }

.instrumentcomparison .chartlegend-msg {
    font-size: 10px;
    padding: 5px;
    text-shadow: none;
    color: #949494;
    text-align: right;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.chartlegend {
    background: var(--secondary-bg-color);
    margin: 0 20px 0 0;
}

    .chartlegend li {
        font-size: 11px;
        text-shadow: none;
        padding: 3px 0;
        text-align: center;
    }

.heat-legend-horiz {
    background: #93b340;
    /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzkzYjM0MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iI2VlZDUxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQyJSIgc3RvcC1jb2xvcj0iI2VlZDUxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYyJSIgc3RvcC1jb2xvcj0iI2VlZDUxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgyJSIgc3RvcC1jb2xvcj0iI2VlNjAwNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZTE3MDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(left, #93b340 0%, #eed517 28%, #eed517 42%, #eed517 62%, #ee6004 82%, #de1701 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, #93b340), color-stop(28%, #eed517), color-stop(42%, #eed517), color-stop(62%, #eed517), color-stop(82%, #ee6004), color-stop(100%, #de1701));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, #93b340 0%, #eed517 28%, #eed517 42%, #eed517 62%, #ee6004 82%, #de1701 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, #93b340 0%, #eed517 28%, #eed517 42%, #eed517 62%, #ee6004 82%, #de1701 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, #93b340 0%, #eed517 28%, #eed517 42%, #eed517 62%, #ee6004 82%, #de1701 100%);
    /* IE10+ */
    background: linear-gradient(to right, #93b340 0%, #eed517 28%, #eed517 42%, #eed517 62%, #ee6004 82%, #de1701 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93b340', endColorstr='#de1701',GradientType=1 );
    /* IE6-8 */
    height: 7px;
}

.legend-label {
    text-transform: uppercase;
    color: var(--primary-font-color);
    font-size: 9px;
    text-shadow: none;
}

#dra_type_chart .heat-legend-wrapper {
    position: absolute;
    top: 318px;
    width: 44%;
    margin: 0 20px;
}

    #dra_type_chart .heat-legend-wrapper li {
        display: block;
        float: left;
        height: 7px;
        line-height: 0;
        border-right: 1px solid var(--secondary-bg-color);
        cursor: pointer;
    }

#dra_risk_chart .heat-legend-vertical {
    background: #93b340;
    /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzkzYjM0MCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjI4JSIgc3RvcC1jb2xvcj0iI2VlZDUxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQyJSIgc3RvcC1jb2xvcj0iI2VlZDUxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYyJSIgc3RvcC1jb2xvcj0iI2VlZDUxNyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgyJSIgc3RvcC1jb2xvcj0iI2VlNjAwNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNkZTE3MDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-linear-gradient(top, #93b340 0%, #eed517 28%, #eed517 42%, #eed517 62%, #ee6004 82%, #de1701 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #93b340), color-stop(28%, #eed517), color-stop(42%, #eed517), color-stop(62%, #eed517), color-stop(82%, #ee6004), color-stop(100%, #de1701));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #93b340 0%, #eed517 28%, #eed517 42%, #eed517 62%, #ee6004 82%, #de1701 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #93b340 0%, #eed517 28%, #eed517 42%, #eed517 62%, #ee6004 82%, #de1701 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #93b340 0%, #eed517 28%, #eed517 42%, #eed517 62%, #ee6004 82%, #de1701 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #93b340 0%, #eed517 28%, #eed517 42%, #eed517 62%, #ee6004 82%, #de1701 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#93b340', endColorstr='#de1701',GradientType=0 );
    /* IE6-8 */
    width: 7px;
    height: 260px;
    margin-left: 51px;
    margin-top: -2px;
}

    #dra_risk_chart .heat-legend-vertical li {
        width: 7px;
        line-height: 0;
        border-bottom: 1px solid var(--secondary-bg-color);
        cursor: pointer;
    }

#dra_risk_chart .top-label {
    float: left;
    width: 40px;
    position: absolute;
    left: 40px;
}

#dra_risk_chart .bottom-label {
    width: 40px;
    position: absolute;
    left: 40px;
    top: 240px;
}

#dra_risk_chart .legend-label {
    text-transform: uppercase;
    color: var(--primary-font-color);
    font-size: 9px;
    text-shadow: none;
}

#dra_risk_chart .vertical {
    position: absolute;
    top: 32px;
}

/*
# ChartList Widget
This is the chart view of the __Key Financials__ tab on the Instrument Landing view. The charts are example images to represent what populated data will look like
```    
<div class="widget w-chartlist">
    <div class="content">
        <ul class="ratios chartlist split-5">
            <li class="content">
                <h3>Chart Title</h3>
                <img src="/Images/ratio-chart.jpg" border="0" style="width:90%;">
            </li>
            <li class="content">
                <h3>Chart Title</h3>
                <img src="/Images/ratio-chart.jpg" border="0" style="width:90%;">
            </li>
            <li class="content">
                <h3>Chart Title</h3>
                <img src="/Images/ratio-chart.jpg" border="0" style="width:90%;">
            </li>

            <li class="content">
                <h3>Chart Title</h3>
                <img src="/Images/ratio-chart.jpg" border="0" style="width:90%;">
            </li>

            <li class="content">
                <h3>Chart Title</h3>
                <img src="/Images/ratio-chart.jpg" border="0" style="width:90%;">
            </li>

            <li class="content">
                <h3>Chart Title</h3>
                <div class="chart" style="width: 100%; height: 87px; line-height: 0;"></div>
                <div class="chart nodata" style="width: 100%; height: 87px; line-height: 0;"></div>
            </li>

            <li class="content">
                <h3>Chart Title</h3>
                <div class="chart" style="width: 100%; height: 87px; line-height: 0;"></div>
                <div class="chart nodata" style="width: 100%; height: 87px; line-height: 0;"></div>
            </li>

            <li class="content">
                <h3>Chart Title</h3>
                <div class="chart" style="width: 100%; height: 87px; line-height: 0;"></div>
                <div class="chart nodata" style="width: 100%; height: 87px; line-height: 0;"></div>
            </li>

            <li class="content">
                <h3>Chart Title</h3>
                <div class="chart" style="width: 100%; height: 87px; line-height: 0;"></div>
                <div class="chart nodata" style="width: 100%; height: 87px; line-height: 0;"></div>
            </li>

            <li class="content">
                <h3>Chart Title</h3>
                <div class="chart" style="width: 100%; height: 87px; line-height: 0;"></div>
                <div class="chart nodata" style="width: 100%; height: 87px; line-height: 0;"></div>
            </li>

        </ul>
    </div>
</div>
```
*/
.chartlist {
    *zoom: 1;
}

    .chartlist:after {
        content: "";
        display: table;
        clear: both;
    }

    .chartlist .header > * {
        padding: 0;
    }

    .chartlist .header h3 {
        float: left;
    }

    .chartlist .content {
        *zoom: 1;
    }

        .chartlist .content:after {
            content: "";
            display: table;
            clear: both;
        }

        .chartlist .content > * {
            padding: 0;
        }

    .chartlist li {
        padding: 20px;
        border-top: 1px solid var(--primary-bg-color);
    }

        .chartlist li li {
            float: none;
            width: auto;
            border: none;
            padding: 3px 0 3px 10px;
            margin-right: 0;
            *zoom: 1;
        }

            .chartlist li li:after {
                content: "";
                display: table;
                clear: both;
            }

    .chartlist .value {
        float: right;
        text-align: right;
    }

    .chartlist .chart-key {
        background: transparent;
    }

    .chartlist.split-2 li:nth-child(2n+1) {
        border-right: 1px solid var(--secondary-bg-color);
    }

    .chartlist.split-2 .chart-key li {
        border-right: none;
    }

    .chartlist.split-2 > li:last-child {
        float: left;
    }

    .chartlist.split-5 li {
        padding: 10px 15px 20px 15px;
        border-right: 1px solid var(--secondary-bg-color);
        background: var(--secondary-bg-color);
        float: left;
        -webkit-box-shadow: inset 0 2px 0 rgba(200, 200, 200, 0.1);
        -moz-box-shadow: inset 0 2px 0 rgba(200, 200, 200, 0.1);
        box-shadow: inset 0 2px 0 rgba(200, 200, 200, 0.1);
    }

        .chartlist.split-5 li h3 {
            font-size: 11px;
            line-height: 14px;
            height: 28px;
        }

        .chartlist.split-5 li:nth-child(5n) {
            border-right: none;
        }

.w-chartlist {
    background: #282828;
    border-bottom: 0;
}

    .w-chartlist > .header {
        background: #1e1e1e;
    }

    .w-chartlist > .content ul {
        border-bottom: 1px solid var(--primary-bg-color);
    }

    .w-chartlist > .content .chart-key {
        border-bottom: none;
    }

    .w-chartlist .chartlist .header {
        padding-bottom: 0;
    }

.ratios .chart {
    height: 100px;
}

.ratios .overview-chart {
    height: 87px;
    max-width: 220px;
    width: 100%;
}

.highcharts-container text tspan {
    color: #777;
    font-style: italic;
    font-size: 11px;
    font-family: ArialMT, Arial, Helvetica, sans-serif;
    text-shadow: none;
}

/* 
#Ratiobar Widget
_This is still in development_
*/
.w-ratiobar {
    border-radius: 20px;
    background: var(--secondary-bg-color);
}

    .w-ratiobar .header {
        padding-top: 10px;
    }

        .w-ratiobar .header h3 {
            padding: 0 30px;
        }

    .w-ratiobar .content .c-ratiobar {
        padding-top: 0;
    }

.c-ratiobar table th {
    width: 20%;
    background: var(--secondary-bg-color);
    font-size: 11px;
    padding: 0 10px;
    line-height: 22px;
    height: 22px;
    color: var(--primary-font-color);
}

.c-ratiobar table td {
    width: 80%;
    padding: 0 65px 0 5px;
    color: var(--primary-font-color);
    text-shadow: none;
    font-size: 11px;
    line-height: 22px;
    background: var(--primary-bg-color);
    border: 1px solid var(--secondary-bg-color);
}

.c-ratiobar table .ratiobar-container {
    position: relative;
    width: 100%;
    height: 22px;
}

    .c-ratiobar table .ratiobar-container .ratiobar-bar {
        position: absolute;
        height: 22px;
    }

        .c-ratiobar table .ratiobar-container .ratiobar-bar.mover_positive {
            background: transparent;
            border-right: 1px solid var(--secondary-font-color);
            border-top: 1px solid var(--secondary-font-color);
            border-bottom: 1px solid var(--secondary-font-color);
        }

        .c-ratiobar table .ratiobar-container .ratiobar-bar.mover_negative {
            background: transparent;
            border-left: 1px solid var(--tertiary-font-color);
            border-top: 1px solid var(--tertiary-font-color);
            border-bottom: 1px solid var(--tertiary-font-color);
        }

        .c-ratiobar table .ratiobar-container .ratiobar-bar.mover_none {
            background: transparent;
        }

    .c-ratiobar table .ratiobar-container .ratiobar-value {
        position: absolute;
        right: -60px;
        width: 55px;
        text-align: left;
    }

/*
## Map Insights Africa ##
  
This is the insights map of africa (Map is an image to represent what the map will look like once generated.)
```    
<div class="panel viewtype-map">
            <div class="header nobg">
                <h2>Report Publication Date Friday, 10 January 2014</h2>
            </div>
            <div class="content">
                
                <div class="mapkey">
                    <ul>
                        <li><i class="key key-red"></i> Key Red</li>
                        <li><i class="key key-yellow"></i> Key Yellow</li>
                        <li><i class="key key-green"></i> Key Green</li>
                    </ul>
                </div>
                <small class="providedby">Provided by Company Name</small>
                <div id="mapPoliticalRisk">
                    <center>
                        <img src="/Images/africa-map.png" border="0" style="width:100%; max-width:505px;"/>
                    </center>
                </div>
            </div>
</div> 
```
*/
/* Charts: Map */
.viewtype-map {
    background: #393939;
    overflow: hidden;
    position: relative;
    border-top: 1px solid #454545;
    border-bottom: 1px solid #0c0c0c;
    height: 100%;
}

    .viewtype-map svg {
        display: block;
        margin: 0 auto;
        top: -25px;
        left: -12px;
        position: relative;
    }

    .viewtype-map .providedby {
        position: absolute;
        bottom: 10px;
        left: 10px;
    }

    .viewtype-map .mapkey + .providedby {
        bottom: 45px;
    }

.viewtype-tabscreen-whead .viewtype-map svg {
    top: -45px;
    left: -12px;
}

#mapConflictZones svg {
    top: -25px;
    left: 25px;
}

#mapRegions svg {
    top: -40px;
    left: 30px;
}

#mapPoliticalRisk {
    height: 574px;
}

    #mapPoliticalRisk svg {
        top: -65px;
    }

.mapkey {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 100;
    background: #333;
    border-top: #292929;
    width: 100%;
}

    .mapkey ul {
        list-style: none;
        margin: 0;
        padding: 5px 0;
        background: #323232;
        border-top: 1px solid #292929;
        *zoom: 1;
    }

        .mapkey ul:after {
            content: "";
            display: table;
            clear: both;
        }

        .mapkey ul li {
            float: left;
            text-transform: uppercase;
            font-size: 11px;
            color: #ccc;
            padding: 5px 10px;
        }

/*
#52 Week Chart

```
<div class="widget w-chart">
    <div class="header">
        <h3>52 Week Range</h3>
    </div>
    <div class="content">
        <div class="chart key-tight">
            <div class="chart52w" data-type="chart52w">
                <span class="indicator" style="left: 80%;"></span>
            </div>
        </div>
        <div class="chart-key key-integrated">
            <ul>
                <li>
                    <span class="value">0</span>
                </li>
                <li>
                    <span class="value">100</span>
                </li>
            </ul>
        </div>
    </div>
</div>
```

*/
.w-chart .chart.chart52w_wrap {
    margin: 0;
    padding: 0;
}

.chart52w {
    background: var(--tertiary-bg-color);
    height: 10px;
    width: 100%;
    position: relative;
}

    .chart52w .chart {
        margin: 0 30px;
        padding: 0 0 15px;
        background: #2c2c2c;
    }

        .chart52w .chart.horiz li {
            text-transform: uppercase;
        }

        .chart52w .chart.key-tight + .chart-key {
            padding-top: 0;
        }

    .chart52w .indicator {
        height: 10px;
        width: 0;
        background: none;
        display: block;
        position: absolute;
        top: 0;
        border-right: 2px solid #e14e12;
        color: #e14e12;
        font-size: 10px;
        line-height: 16px;
        text-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
    }

        .chart52w .indicator.text-left {
            padding-right: 5px;
        }

        .chart52w .indicator.text-right {
            border-left: 2px solid #e14e12;
            border-right: none;
            padding-left: 5px;
        }

/* 
#Search
There are a few search components spread throughout the app. 

The advanced search page is still in development. This styleguide will be updated with those items as they're built
*/
a.btn-cancel.btn-in-input {
    background: #787878;
    color: #d4d4d4;
    padding: 0 5px;
    text-align: center;
    text-transform: uppercase;
    display: block;
    font-size: 8px;
    line-height: 16px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    -o-border-radius: 10px;
    border-radius: 10px;
}

    a.btn-cancel.btn-in-input:hover {
        background: #5e5e5e;
    }

.w-filter {
    background: var(--tertiary-bg-color);
    border-top: 2px solid var(--secondary-bg-color);
    border-bottom: 1px solid var(--primary-bg-color);
}

    .w-filter .header {
        background: var(--secondary-bg-color);
        border-bottom: 1px solid var(--primary-bg-color);
        height: 35px;
    }

        .w-filter .header.isCollapsed {
            border-bottom: none;
        }

        .w-filter .header h3 {
            font-size: 14px;
            line-height: 22px;
            padding: 5px;
        }

        .w-filter .header.header-mToggle h3 {
            float: left;
        }

        .w-filter .header .btn-toggle {
            float: left;
            padding: 0 2px;
            top: 9px;
            margin-left: 10px;
            margin-right: 5px;
            line-height: 16px;
            z-index: 1;
        }

        .w-filter .header .btn-action {
            float: left;
            font-size: 16px;
            line-height: 14px;
            padding: 0 4px;
            top: 11px;
            right: auto;
            margin-left: 8px;
            margin-right: 5px;
            border: 1px solid var(--primary-bg-color);
            background: var(--tertiary-bg-color);
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: inset 0 1px 1px #a4a4a4;
            -moz-box-shadow: inset 0 1px 1px #a4a4a4;
            box-shadow: inset 0 1px 1px #a4a4a4;
        }

            .w-filter .header .btn-action:hover {
                background: #2b2b2b;
            }

        .w-filter .header .actions-mInline {
            float: left;
            line-height: 22px;
            padding: 5px 0;
        }

            .w-filter .header .actions-mInline a {
                font-size: 11px;
            }

    .w-filter .content {
        padding: 3px 0;
        overflow: hidden;
        font-size: 11px;
        width: 100%;
    }

        .w-filter .content .content-hasNoItems {
            padding: 2px 10px;
            margin: 0;
        }

        .w-filter .content a.show-more {
            font-size: 10px;
            color: var(--primary-font-color);
            text-transform: uppercase;
            padding: 0;
            display: block;
            clear: both;
            margin-bottom: 5px;
            margin-top: 10px;
        }

    .w-filter .filter-opts li {
        font-size: 11px;
        line-height: 15px;
        color: var(--primary-font-color);
        position: relative;
        margin: 0 0 5px;
        padding: 0 8px 5px;
        border-bottom: 0 solid #333;
        text-shadow: none;
    }

        .w-filter .filter-opts li .i-remove {
            position: absolute;
            cursor: pointer;
        }

        .w-filter .filter-opts li span {
            padding: 0 60px 0 20px;
            display: block;
            overflow: hidden;
            white-space: nowrap;
            cursor: pointer;
            line-height: 16px;
            white-space: nowrap;
            overflow: hidden;
            -ms-text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-overflow: ellipsis;
        }

        .w-filter .filter-opts li small.num {
            position: absolute;
            color: var(--primary-font-color);
            top: 0;
            right: 8px;
        }

    .w-filter .actions {
        border-top: 1px solid #404040;
        position: relative;
    }

        .w-filter .actions a:not(.btn) {
            font-size: 10px;
            color: var(--primary-font-color);
            text-transform: uppercase;
            padding: 0;
            display: block;
            clear: both;
            margin-bottom: 10px;
            margin-top: 10px;
        }

        .w-filter .actions a.btn-in-input {
            position: absolute;
            top: 14px;
            right: 6.2%;
        }

        .w-filter .actions input {
            line-height: 15px;
            font-size: 11px;
            padding: 3px 4px;
            background: #d4d4d4;
            color: #101010;
            border: 1px solid var(--primary-bg-color);
            width: 95%;
            margin-top: 10px;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            -ms-border-radius: 5px;
            -o-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: inset 0 2px 3px rgba(148, 148, 148, 0.75);
            -moz-box-shadow: inset 0 2px 3px rgba(148, 148, 148, 0.75);
            box-shadow: inset 0 2px 3px rgba(148, 148, 148, 0.75);
        }

.searchcontrol {
    position: relative;
    padding: 18px 0 10px;
}

    .searchcontrol .meta.pull-right {
        position: absolute;
        right: 10px;
        top: 0;
        padding-top: 18px;
        line-height: 26px;
    }

.searchbar {
    position: relative;
}

    .searchbar .searchfilter {
        display: block;
        float: left;
        width: 55px;
    }

        .searchbar .searchfilter.btn {
            padding: 4px 5px;
            line-height: 14px;
            display: block;
            font-size: 11px;
        }

        .searchbar .searchfilter .icon-showmore {
            position: relative;
            top: 0;
            left: 1px;
        }

    .searchbar input[type=text] {
        -webkit-box-shadow: rgba(148, 148, 148, 0.7) 0px 2px 3px inset;
        -moz-box-shadow: rgba(148, 148, 148, 0.7) 0px 2px 3px inset;
        box-shadow: rgba(148, 148, 148, 0.7) 0px 2px 3px inset;
        -webkit-appearance: textfield;
        display: block;
        background-color: var(--secondary-bg-color);
        color: var(--primary-font-color);
        padding: 3px 5px;
        font-size: 13px;
        line-height: 16px;
        position: relative;
        float: left;
        top: 0;
        border: 0 solid transparent;
        border-top: 1px solid #202555;
        border-bottom: 1px solid #202555;
    }

        .searchbar input[type=text]:focus {
            outline: none;
        }

    .searchbar .btn-search-add {
        position: relative;
        display: block;
        float: left;
        height: 24px;
    }

    .searchbar .btn-search {
        position: relative;
        display: block;
        float: left;
        overflow: hidden;
        min-width: 45px;
        height: 26px;
    }

        .searchbar .btn-search.btn-notext:before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            background: url("../images/dark_sprites.png?v=1.12") no-repeat -240px -80px;
            width: 14px;
            height: 16px;
            margin-left: -8px;
            margin-top: -8px;
        }

    .searchbar .icon-clear,
    .searchbar .loading-indicator {
        position: absolute;
        top: 5px;
        right: 51px;
        z-index: 1;
    }

.dropdown.search_results .content {
    padding-top: 0;
    border-top: 1px solid var(--primary-bg-color);
    max-height: 350px;
    -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    -moz-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}

.dropdown.search_results ul.list_options.results {
    padding-top: 0;
}

    .dropdown.search_results ul.list_options.results li {
        cursor: pointer;
        border-bottom-color: var(--primary-bg-color);
        word-wrap: break-word;
    }

        .dropdown.search_results ul.list_options.results li span {
            left: auto;
            right: auto;
            top: auto;
            background: transparent;
            border-color: transparent;
            line-height: inherit;
        }

        .dropdown.search_results ul.list_options.results li a {
            padding: 5px 35px 5px 5px;
            position: relative;
            display: block;
            line-height: 15px;
            min-height: 40px;
        }

        .dropdown.search_results ul.list_options.results li .result_name {
            color: var(--primary-font-color);
            font-size: 12px;
        }

        .dropdown.search_results ul.list_options.results li .result_ticker {
            color: #666666;
            font-size: 11px;
        }

            .dropdown.search_results ul.list_options.results li .result_ticker b {
                color: var(--tertiary-bg-color);
            }

        .dropdown.search_results ul.list_options.results li .flag {
            position: absolute;
            top: 50%;
            right: 5px;
            margin-top: -11px;
        }

        .dropdown.search_results ul.list_options.results li.category {
            background: var(--primary-bg-color);
            color: #505050;
            text-shadow: none;
            font-size: 10px;
            text-transform: uppercase;
            padding: 0 5px;
            line-height: 16px;
            border-bottom: 1px solid var(--primary-bg-color);
        }

            .dropdown.search_results ul.list_options.results li.category:hover {
                background: var(--secondary-bg-color);
            }

            .dropdown.search_results ul.list_options.results li.category a {
                padding: 0;
                position: absolute;
                top: 2px;
                right: 5px;
                display: block;
                width: 10px;
                height: 10px;
                min-height: 10px;
                -webkit-border-radius: 100%;
                -moz-border-radius: 100%;
                -ms-border-radius: 100%;
                -o-border-radius: 100%;
                border-radius: 100%;
            }

            .dropdown.search_results ul.list_options.results li.category span {
                font-size: 10px;
                color: var(--primary-font-color);
                line-height: 16px;
            }

.dropdown.search_results .search_results-loadMore {
    position: absolute;
    height: 40px;
    line-height: 40px;
    bottom: -40px;
    left: -3px;
    background: var(--primary-bg-color);
    width: 235px;
    text-align: center;
    border-top: var(--primary-bg-color) 1px solid;
}

.azlist .title, .w-table .azlist.striped .title {
    background: #0c0c0c;
    padding: 9px 10px;
    margin: 0;
    font-weight: bold;
    font-size: 14px;
    line-height: 16px;
    text-align: left;
    top: 0;
}

.type-searchbar.panel > .header {
    padding: 15px;
    border-top: 1px solid #5c5c5c;
    border-bottom: 1px solid var(--secondary-bg-color);
    height: auto;
    z-index: 1;
    background: var(--secondary-bg-color);
    background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjUwJSIgeTE9IjAlIiB4Mj0iNTAlIiB5Mj0iMTAwJSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzM4MzgzOCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzJjMmMyYyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, var(--secondary-bg-color)), color-stop(100%, #2c2c2c));
    background: -webkit-linear-gradient(top, var(--secondary-bg-color), #2c2c2c);
    background: -moz-linear-gradient(top, var(--secondary-bg-color), #2c2c2c);
    background: -o-linear-gradient(top, var(--secondary-bg-color), #2c2c2c);
    background: linear-gradient(top, var(--secondary-bg-color), #2c2c2c);
    -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.5);
}

    .type-searchbar.panel > .header .btn {
        top: 0;
    }

.type-searchbar > .header .searchbar {
    width: 40%;
    height: 31px;
    top: 0;
    min-width: 280px;
    padding: 2px 2px 2px 10px;
    border: 1px solid #1c1c1c;
    background: var(--primary-font-color);
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

    .type-searchbar > .header .searchbar input, .type-searchbar > .header .searchbar input#search_results {
        border: none;
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
        -webkit-appearance: textfield;
        display: block;
        float: left;
        width: 270px;
        width: calc(100% - 100px);
        background-color: var(--primary-font-color);
        padding: 4px 5px;
        font-size: 13px;
        line-height: 16px;
        position: relative;
        top: 1px;
    }

    .type-searchbar > .header .searchbar .btn-search {
        float: right;
        top: auto;
        left: auto;
        right: auto;
    }

.type-searchbar > .centered .searchbar {
    margin: 0 auto;
}

.type-searchbar .searchbar input {
    float: left;
    width: 70%;
    top: 1px;
}

.type-searchbar > .content {
    min-height: 573px;
    background: var(--tertiary-bg-color);
    border-bottom: 1px solid #7a7a7a;
}

.type-searchbar .actions {
    padding: 10px 0;
}

.azlist ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.searchresults.w-table {
    position: relative;
    top: -1px;
    z-index: 10;
}

    .searchresults.w-table .content table {
        padding: 0;
    }

    .searchresults.w-table thead th {
        padding: 9px 10px;
        font-size: 12px;
        line-height: 16px;
        text-align: left;
        text-shadow: 0 1px 0 black;
    }

    .searchresults.w-table td {
        padding: 9px 10px;
        font-size: 14px;
        line-height: 16px;
        text-shadow: none;
        cursor: pointer;
    }

    .searchresults.w-table tbody tr:first-child td {
        border-top: 1px solid rgba(0, 0, 0, 0.5);
    }

.searchresults.azlist .w-metalist {
    border-top-color: black;
}

    .searchresults.azlist .w-metalist .header h3 {
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
        letter-spacing: 0.1em;
    }

    .searchresults.azlist .w-metalist .content {
        background: #282828;
    }

    .searchresults.azlist .w-metalist .metalist {
        border-bottom: 1px solid var(--secondary-bg-color);
    }

    .searchresults.azlist .w-metalist li:nth-child(1),
    .searchresults.azlist .w-metalist li:nth-child(2) {
        padding-top: 10px;
    }

    .searchresults.azlist .w-metalist li:nth-child(3),
    .searchresults.azlist .w-metalist li:nth-child(4) {
        padding-bottom: 10px;
    }

.searchresults.azlist .metalist li * {
    text-shadow: 0 1px 0 black;
}

.searchresults.azlist .metalist h4 {
    color: var(--primary-font-color);
    font-size: 12px;
}

.searchresults.azlist .metalist p {
    font-weight: bold;
}

/*
## Searchbar Component ##
Search component used in headers and content
    
        <div class="component c-searchbar pull-left">
            <input type="text">
            <a class="btn btn-action">Search</a>
        </div>
*/
.c-searchbar {
    background: var(--primary-input-bg-color);
    border: 1px solid var(--primary-bg-color);
    height: 26px;
    z-index: 10;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

    .c-searchbar input {
        display: inline-block;
        line-height: 15px;
        font-size: 11px;
        padding: 3px 4px;
        background: var(--primary-input-bg-color);
        color: var(--primary-font-color);
        border: none;
        box-shadow : rgba(148, 148, 148, 0.7) 0px 2px 3px inset;
        float: left;
        position: relative;
        top: 4px;
        width: 200px;
    }

        .c-searchbar input:focus {
            outline: none;
        }

.header .c-searchbar {
    margin: 0 10px;
}

    .header .c-searchbar input {
        top: 2px;
    }

.c-searchbar .btn {
    float: right;
    padding: 3px 5px;
    right: 1px;
    top: 1px;
}

.c-fieldselect-searchbar {
    background: var(--primary-bg-color);
    padding: 10px 5px;
    height: 50px;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
    -webkit-box-shadow: "0 2px 5px rgb(0,0,0) inset";
    -moz-box-shadow: "0 2px 5px rgb(0,0,0) inset";
    box-shadow: "0 2px 5px rgb(0,0,0) inset";
}

    /*.c-fieldselect-searchbar input {
        background: #eeeeee;
        height: 21px;
        line-height: 21px;
        font-size: 12px;
        color: #989898;
        padding: 0 5px;
        top: 0;
        width: 100%;
        margin: 0;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: "0 2px 3px rgba(147,147,147,0.7) inset";
        -moz-box-shadow: "0 2px 3px rgba(147,147,147,0.7) inset";
        box-shadow: "0 2px 3px rgba(147,147,147,0.7) inset";
    }*/

/* 
#Toastr Library 
Toastr handles the popup error messages on the site
```
<style>
.randomwrapper {position: relative;}
.randomwrapper #toast-container.toast-top-full {top: 0; left: 0; position: relative;}
</style>
<div class="randomwrapper">
    <div id="toast-container" class="toast-top-full">
        <div class="toast toast-success">
            <div class="toast-message">Offline data has been cleared.</div>
        </div>
    </div>
</div>
```
*/
.toast-title {
    font-weight: bold;
}

.toast-message a {
    color: var(--primary-font-color);
}

    .toast-message a:hover {
        color: #CCC;
        text-decoration: none;
    }

.toast-message label {
    color: var(--primary-font-color);
}

.toast-top-left {
    top: 12px;
    left: 12px;
}

.toast-bottom-right {
    right: 12px;
    bottom: 12px;
}

.toast-bottom-left {
    left: 12px;
    bottom: 12px;
}

#toast-container {
    position: fixed;
    z-index: 9999;
}

    #toast-container > div {
        background-position: 15px center;
        background-repeat: no-repeat;
        -moz-border-radius: 3px 3px 3px 3px;
        -webkit-border-radius: 3px 3px 3px 3px;
        border-radius: 3px 3px 3px 3px;
        -moz-box-shadow: 0 0 12px #999999;
        -webkit-box-shadow: 0 0 12px #999999;
        -o-box-shadow: 0 0 12px #999999;
        box-shadow: 0 0 12px #999999;
        color: var(--primary-font-color);
        margin: 0 0 6px;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        filter: alpha(opacity=80);
        -moz-opacity: 0.8;
        opacity: 0.8;
        padding: 15px 15px 15px 50px;
        width: 300px;
    }

    #toast-container > :hover {
        -moz-box-shadow: 0 0 12px #000000;
        -webkit-box-shadow: 0 0 12px #000000;
        -o-box-shadow: 0 0 12px #000000;
        box-shadow: 0 0 12px #000000;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        opacity: 1;
        cursor: pointer;
    }

    #toast-container > .toast-info {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGwSURBVEhLtZa9SgNBEMc9sUxxRcoUKSzSWIhXpFMhhYWFhaBg4yPYiWCXZxBLERsLRS3EQkEfwCKdjWJAwSKCgoKCcudv4O5YLrt7EzgXhiU3/4+b2ckmwVjJSpKkQ6wAi4gwhT+z3wRBcEz0yjSseUTrcRyfsHsXmD0AmbHOC9Ii8VImnuXBPglHpQ5wwSVM7sNnTG7Za4JwDdCjxyAiH3nyA2mtaTJufiDZ5dCaqlItILh1NHatfN5skvjx9Z38m69CgzuXmZgVrPIGE763Jx9qKsRozWYw6xOHdER+nn2KkO+Bb+UV5CBN6WC6QtBgbRVozrahAbmm6HtUsgtPC19tFdxXZYBOfkbmFJ1VaHA1VAHjd0pp70oTZzvR+EVrx2Ygfdsq6eu55BHYR8hlcki+n+kERUFG8BrA0BwjeAv2M8WLQBtcy+SD6fNsmnB3AlBLrgTtVW1c2QN4bVWLATaIS60J2Du5y1TiJgjSBvFVZgTmwCU+dAZFoPxGEEs8nyHC9Bwe2GvEJv2WXZb0vjdyFT4Cxk3e/kIqlOGoVLwwPevpYHT+00T+hWwXDf4AJAOUqWcDhbwAAAAASUVORK5CYII=") !important;
    }

    #toast-container > .toast-error {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAHOSURBVEhLrZa/SgNBEMZzh0WKCClSCKaIYOED+AAKeQQLG8HWztLCImBrYadgIdY+gIKNYkBFSwu7CAoqCgkkoGBI/E28PdbLZmeDLgzZzcx83/zZ2SSXC1j9fr+I1Hq93g2yxH4iwM1vkoBWAdxCmpzTxfkN2RcyZNaHFIkSo10+8kgxkXIURV5HGxTmFuc75B2RfQkpxHG8aAgaAFa0tAHqYFfQ7Iwe2yhODk8+J4C7yAoRTWI3w/4klGRgR4lO7Rpn9+gvMyWp+uxFh8+H+ARlgN1nJuJuQAYvNkEnwGFck18Er4q3egEc/oO+mhLdKgRyhdNFiacC0rlOCbhNVz4H9FnAYgDBvU3QIioZlJFLJtsoHYRDfiZoUyIxqCtRpVlANq0EU4dApjrtgezPFad5S19Wgjkc0hNVnuF4HjVA6C7QrSIbylB+oZe3aHgBsqlNqKYH48jXyJKMuAbiyVJ8KzaB3eRc0pg9VwQ4niFryI68qiOi3AbjwdsfnAtk0bCjTLJKr6mrD9g8iq/S/B81hguOMlQTnVyG40wAcjnmgsCNESDrjme7wfftP4P7SP4N3CJZdvzoNyGq2c/HWOXJGsvVg+RA/k2MC/wN6I2YA2Pt8GkAAAAASUVORK5CYII=") !important;
    }

    #toast-container > .toast-success {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVEhLY2AYBfQMgf///3P8+/evAIgvA/FsIF+BavYDDWMBGroaSMMBiE8VC7AZDrIFaMFnii3AZTjUgsUUWUDA8OdAH6iQbQEhw4HyGsPEcKBXBIC4ARhex4G4BsjmweU1soIFaGg/WtoFZRIZdEvIMhxkCCjXIVsATV6gFGACs4Rsw0EGgIIH3QJYJgHSARQZDrWAB+jawzgs+Q2UO49D7jnRSRGoEFRILcdmEMWGI0cm0JJ2QpYA1RDvcmzJEWhABhD/pqrL0S0CWuABKgnRki9lLseS7g2AlqwHWQSKH4oKLrILpRGhEQCw2LiRUIa4lwAAAABJRU5ErkJggg==") !important;
    }

    #toast-container > .toast-warning {
        background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAGYSURBVEhL5ZSvTsNQFMbXZGICMYGYmJhAQIJAICYQPAACiSDB8AiICQQJT4CqQEwgJvYASAQCiZiYmJhAIBATCARJy+9rTsldd8sKu1M0+dLb057v6/lbq/2rK0mS/TRNj9cWNAKPYIJII7gIxCcQ51cvqID+GIEX8ASG4B1bK5gIZFeQfoJdEXOfgX4QAQg7kH2A65yQ87lyxb27sggkAzAuFhbbg1K2kgCkB1bVwyIR9m2L7PRPIhDUIXgGtyKw575yz3lTNs6X4JXnjV+LKM/m3MydnTbtOKIjtz6VhCBq4vSm3ncdrD2lk0VgUXSVKjVDJXJzijW1RQdsU7F77He8u68koNZTz8Oz5yGa6J3H3lZ0xYgXBK2QymlWWA+RWnYhskLBv2vmE+hBMCtbA7KX5drWyRT/2JsqZ2IvfB9Y4bWDNMFbJRFmC9E74SoS0CqulwjkC0+5bpcV1CZ8NMej4pjy0U+doDQsGyo1hzVJttIjhQ7GnBtRFN1UarUlH8F3xict+HY07rEzoUGPlWcjRFRr4/gChZgc3ZL2d8oAAAAASUVORK5CYII=") !important;
    }

.toast {
    background-color: #030303;
}

.toast-success {
    background-color: #51A351;
}

.toast-error {
    background-color: #BD362F;
}

.toast-info {
    background-color: #2F96B4;
}

.toast-warning {
    background-color: #F89406;
}

.toast-top-right {
    top: 12px;
    right: 12px;
}

#toast-container.toast-top-full {
    width: 100%;
    top: 44px;
    position: absolute;
}

#login #toast-container.toast-top-full {
    top: 0;
}

#toast-container .toast {
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    font-size: 18px;
    opacity: 1;
    width: 100%;
    margin: 0;
    padding-left: 15px;
    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.28), inset 0 2px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.28), inset 0 2px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.28), inset 0 2px 0 rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}

    #toast-container .toast.toast-success, #toast-container .toast.toast-info, #toast-container .toast.toast-warning, #toast-container .toast.toast-error {
        background-color: #eeae02;
        background-image: -moz-linear-gradient(top, #f4c955 0%, #eeae02 100%) !important;
        background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f4c955), color-stop(100%, #eeae02)) !important;
        background-image: -webkit-linear-gradient(top, #f4c955 0%, #eeae02 100%) !important;
        background-image: -o-linear-gradient(top, #f4c955 0%, #eeae02 100%) !important;
        background-image: -ms-linear-gradient(top, #f4c955 0%, #eeae02 100%) !important;
        background-image: linear-gradient(to bottom, #f4c955 0%, #eeae02 100%) !important;
        background-position: 0 0;
        color: black;
        text-shadow: 0 1px 0 #e0e0a9;
    }

    #toast-container .toast .toast-message {
        padding-left: 35px;
        position: relative;
    }

        #toast-container .toast .toast-message:after {
            background-image: url("../images/dark_sprites.png?v=1.12");
            background-repeat: no-repeat;
            background-color: transparent;
            content: "";
            width: 30px;
            height: 20px;
            position: absolute;
            top: 0;
            left: 0;
        }

    #toast-container .toast.toast-success .toast-message:after {
        background-position: -100px -50px;
    }

    #toast-container .toast.toast-info .toast-message:after {
        background-position: -160px -50px;
    }

    #toast-container .toast.toast-warning .toast-message:after {
        background-position: -130px -50px;
    }

    #toast-container .toast.toast-error .toast-message:after {
        background-position: -130px -50px;
    }

#flotTip, div.ui-tooltip {
    padding: 10px;
    background: var(--primary-font-color);
    margin-left: -25px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid var(--primary-bg-color);
    position: relative;
    -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 0 6px, rgba(148, 148, 148, 0.7) 0 -2px 3px inset;
    -moz-box-shadow: rgba(0, 0, 0, 0.25) 0 0 6px, rgba(148, 148, 148, 0.7) 0 -2px 3px inset;
    box-shadow: rgba(0, 0, 0, 0.25) 0 0 6px, rgba(148, 148, 148, 0.7) 0 -2px 3px inset;
    z-index: 200000 !important;
    text-shadow: none;
    opacity: 1 !important;
}

    #flotTip:before, div.ui-tooltip:before {
        content: "";
        position: absolute;
        top: -7px;
        left: 10px;
        width: 10px;
        height: 10px;
        background: url("../images/dark_sprites.png?v=1.12") -210px -90px no-repeat;
    }

    #flotTip span, div.ui-tooltip span {
        display: block;
    }

    #flotTip .pt-val, #flotTip .ui-tooltip-content, div.ui-tooltip .pt-val, div.ui-tooltip .ui-tooltip-content {
        font-size: 14px;
        color: var(--primary-bg-color);
    }

    #flotTip .pt-date, #flotTip .ui-tooltip-content, div.ui-tooltip .pt-date, div.ui-tooltip .ui-tooltip-content {
        font-size: 10px;
        color: gray;
    }

    #flotTip.tip_offsetRight, div.ui-tooltip.tip_offsetRight {
        margin-left: 10px;
    }

        #flotTip.tip_offsetRight:before, div.ui-tooltip.tip_offsetRight:before {
            left: auto;
            right: 5px;
        }

.ui-tooltip-content {
    font-family: ArialMT, Arial, Helvetica, sans-serif;
}

.flot-x-axis {
    margin-top: 5px;
}

.flot-text .flot-tick-label {
    color: #565656;
    text-shadow: none;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0;
    padding-top: 5px;
}

div.ui-tooltip.right:before {
    right: 10px;
    left: auto;
}

div.ui-tooltip.bottom {
    -webkit-box-shadow: rgba(0, 0, 0, 0.25) 0 0 6px, rgba(148, 148, 148, 0.7) 0 2px 3px inset;
    -moz-box-shadow: rgba(0, 0, 0, 0.25) 0 0 6px, rgba(148, 148, 148, 0.7) 0 2px 3px inset;
    box-shadow: rgba(0, 0, 0, 0.25) 0 0 6px, rgba(148, 148, 148, 0.7) 0 2px 3px inset;
}

    div.ui-tooltip.bottom:before {
        bottom: -10px;
        top: auto;
        background-position: -210px -80px;
    }

div.flot-x1-axis {
    left: -11px !important;
}

.flot-overlay {
    cursor: pointer;
}

.kglabel {
    display: block;
    float: left;
    font-weight: bold;
    padding-right: 5px;
}

.kgNoSelect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.koGrid {
    background-color: #404040;
    border-top: 1px solid var(--secondary-bg-color);
}

.kgGroupPnel {
    background-color: #2e2e2e;
    overflow: hidden;
    border-bottom: 1px solid #d4d4d4;
}

.kgGroupPanelDescription {
    margin-top: 5px;
    margin-left: 5px;
}

.kgGroupList {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.kgGroupItem {
    float: left;
}

.kgGroupElement {
    float: left;
    height: 100%;
    width: 100%;
}

.kgGroupName {
    background-color: #f7f7f7;
    border: 1px solid #d4d4d4;
    padding: 3px 10px;
    float: left;
    margin-left: 0;
    margin-top: 2px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    font-weight: bold;
}

.kgGroupItem:first-child {
    margin-left: 2px;
}

.kgRemoveGroup {
    width: 5px;
    float: right;
    -moz-opacity: 0.4;
    opacity: 0.4;
    margin-top: -1px;
    margin-left: 5px;
}

    .kgRemoveGroup:hover {
        color: black;
        text-decoration: none;
        cursor: pointer;
        -moz-opacity: 0.7;
        opacity: 0.7;
    }

.kgGroupArrow {
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 6px solid black;
    margin-top: 10px;
    margin-left: 5px;
    margin-right: 5px;
    float: right;
}

.kgTopPanel {
    position: relative;
    background-color: #2e2e2e;
    border-bottom: 1px solid #0e0e0e;
    z-index: 5;
    height: 35px;
}

.kgHeaderContainer {
    position: relative;
    overflow: hidden;
    font-size: 12px;
    line-height: 22px;
    padding: 7px 10px;
}

.kgHeaderScroller {
    position: absolute;
}

.kgHeaderSortColumn {
    position: absolute;
    overflow: hidden;
}

.kgHeaderCell {
    border-left: 1px solid #2e2e2e;
    position: absolute;
}

    .kgHeaderCell::first-child {
        border-left: 0;
    }

    .kgHeaderCell:last-child {
        border-right: 1px solid #2e2e2e;
    }

.kgSortButtonUp {
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border-color: gray transparent;
    border-style: solid;
    border-width: 0 5px 5px 5px;
    height: 0;
    width: 0;
    z-index: 2;
}

    .kgSortButtonUp:before {
        position: absolute;
        top: -2px;
        left: -2px;
        width: 10px;
        height: 10px;
        content: "";
        background: #000;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        z-index: 1;
    }

.kgSortButtonDown {
    position: absolute;
    top: 3px;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    border-color: gray transparent;
    border-style: solid;
    border-width: 5px 5px 0 5px;
    height: 0;
    width: 0;
}

    .kgSortButtonDown:before {
        position: absolute;
        top: -2px;
        left: -2px;
        width: 10px;
        height: 10px;
        content: "";
        background: #000;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        border-radius: 50%;
        z-index: 1;
    }

.kgHeaderGrip {
    cursor: col-resize;
    width: 10px;
    right: -5px;
    top: 0;
    height: 100%;
    position: absolute;
    z-index: 5;
}

.kgHeaderText {
    padding: 0;
    box-sizing: border-box;
    white-space: nowrap;
    -ms-text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    overflow: hidden;
}

.kgViewport {
    overflow: auto;
    min-height: 20px;
}

.kgCanvas {
    position: relative;
}

.kgRow {
    position: absolute;
    border-bottom: 1px solid var(--tertiary-bg-color);
}

    .kgRow.selected {
        background-color: var(--tertiary-bg-color);
    }

    .kgRow.even {
        background-color: #404040;
    }

        .kgRow.even.selected {
            background-color: var(--secondary-bg-color);
        }

    .kgRow.odd {
        background-color: var(--secondary-bg-color);
    }

        .kgRow.odd.selected {
            background-color: var(--tertiary-bg-color);
        }

.kgCell {
    overflow: hidden;
    position: absolute;
    border-left: 0;
}

    .kgCell:first-child {
        border-left: 0;
    }

    .kgCell.last-child {
        border-right: 0;
    }

    .kgCell .kgCellText {
        padding: 4px 10px;
        font-size: 11px;
        line-height: 16px;
        box-sizing: border-box;
        white-space: nowrap;
        -ms-text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .kgCell input[type="checkbox"] {
        margin: 0;
        padding: 0;
    }

    .kgCell input {
        vertical-align: top;
    }

.kgSelectionHeader {
    position: absolute;
    top: 11px;
    left: 6px;
}

.kgSelectionCell {
    margin-top: 9px;
    margin-left: 6px;
}

.kgNoSort {
    cursor: default;
}

.kgFooteranel {
    background-color: #eaeaea;
    padding: 0;
    border-top: 1px solid #d4d4d4;
    position: relative;
}

.kgTotalSelectContainer {
    float: left;
    margin: 5px;
    margin-top: 7px;
}

.kgFooterSelectedItems {
    padding: 2px;
}

.kgFooterTotalItems {
    padding: 2px;
}

    .kgFooterTotalItems.kgnoMultiSelect {
        padding: 0 !important;
    }

.kgAggHeader {
    position: absolute;
    border: none;
}

.kgAggregate {
    position: absolute;
    background-color: #b3bfbc;
    border-bottom: 1px solid beige;
    overflow: hidden;
    top: 0;
    bottom: 0;
    right: -1px;
    left: 0;
}

.kgAggregateText {
    position: absolute;
    left: 27px;
    top: 5px;
    line-height: 20px;
    white-space: nowrap;
}

.kgAggArrowExpanded {
    position: absolute;
    left: 8px;
    bottom: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 0 9px 9px;
    border-color: transparent transparent #000000 transparent;
}

.kgAggArrowCollapsed {
    position: absolute;
    left: 8px;
    bottom: 10px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
}

.kgHeaderButton {
    position: absolute;
    right: 2px;
    top: 8px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    z-index: 5;
    background-color: #b3bfbc;
    cursor: pointer;
}

.kgHeaderButtonArrow {
    position: absolute;
    top: 4px;
    left: 3px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6.5px 4.5px 0 4.5px;
    border-color: #000 transparent transparent transparent;
}

.kgColMenu {
    right: 2px;
    padding: 5px;
    top: 25px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-color: #BDD0CB;
    position: absolute;
    border: 2px solid #d4d4d4;
    z-index: 5;
}

.kgMenuText {
    position: relative;
    top: 2px;
    left: 2px;
}

.kgColList {
    list-style-type: none;
}

.kgColListItem {
    position: relative;
    right: 17px;
    top: 2px;
    white-space: nowrap;
}

.kgColListCheckbox {
    position: relative;
    right: 3px;
    top: 4px;
}

.kgPagerButton {
    height: 25px;
    min-width: 26px;
}

.kgPagerFirstTriangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 8.7px 5px 0;
    border-color: transparent #000000 transparent transparent;
    margin-left: 2px;
}

.kgPagerFirstBar {
    width: 10px;
    border-left: 2px solid black;
    margin-top: -6px;
    height: 12px;
    margin-left: -3px;
}

.kgPagerLastTriangle {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8.7px;
    border-color: transparent transparent transparent #000000;
    margin-left: -1px;
}

.kgPagerLastBar {
    width: 10px;
    border-left: 2px solid black;
    margin-top: -6px;
    height: 12px;
    margin-left: 1px;
}

.kgPagerPrevTriangle {
    margin-left: 0;
}

.kgPagerNextTriangle {
    margin-left: 1px;
}

.kgGroupIcon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAEFJREFUKFNjoAhISkr+h2J5JDZODNXGwGBsbPwfhIGAA8bGh6HaGBiAGhxAGJmND4M1gQCSM0adCsVQbcPcqQwMALWDGyDvWPefAAAAAElFTkSuQmCC);
    background-repeat: no-repeat;
    height: 15px;
    width: 15px;
    position: absolute;
    right: -2px;
    top: 2px;
}

.kgGroupedByIcon {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAANCAYAAACZ3F9/AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAadEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjEwMPRyoQAAAElJREFUKFNjoAhISkr+R8LyaHwMDNXGwGBsbPwfhoGAA5mPDUO1oWpE52PDYE0gALTFAYbR+dgwWBMIoPlh1I9ADNU2NPzIwAAAFQYI9E4OLvEAAAAASUVORK5CYII=);
    background-repeat: no-repeat;
    height: 15px;
    width: 15px;
    position: absolute;
    right: -2px;
    top: 2px;
}

.kgGroupingNumber {
    position: absolute;
    right: -10px;
    top: -2px;
}

.modalBlockout {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0;
    pointer-events: auto;
    -webkit-backface-visibility: hidden;
    -webkit-transition: opacity 0.1s linear;
    -moz-transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
}

.modalHost {
    top: 50%;
    left: 50%;
    position: fixed;
    opacity: 0;
    -webkit-backface-visibility: hidden;
    -webkit-transition: opacity 0.1s linear;
    -moz-transition: opacity 0.1s linear;
    -o-transition: opacity 0.1s linear;
    transition: opacity 0.1s linear;
}

.messageBox {
    background-color: var(--secondary-bg-color);
    border: 1px solid var(--primary-bg-color);
    border: 1px solid rgba(0, 0, 0, 0.3);
    outline: none;
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding-box;
    background-clip: padding-box;
    min-width: 300px;
}

.durandal-view-404 {
    color: red;
    margin: 8px 0;
    padding: 8px;
    border: 1px solid #989898;
    border: 1px solid rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
}

#busyindicator {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -8px;
    margin-left: -8px;
    z-index: 10001;
}

#loader {
    width: 100%;
    height: 100%;
    display: table;
    position: absolute;
    top: 0;
    left: 0;
    background: #0e0e0e url("../images/dark_contentbg.jpg");
    z-index: 10000;
}

    #loader .loading_container_wrap {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
    }

    #loader .loading_container {
        position: absolute;
        top: 200px;
        left: 50%;
        width: 169px;
        height: 177px;
        margin-left: -92px;
        margin-top: -150px;
        background: rgba(0, 0, 0, 0.8) url("../images/loading-m.png") 20px 20px no-repeat;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        border-radius: 8px;
    }

        #loader .loading_container img {
            position: relative;
            display: block;
            margin: 0 auto;
            top: 140px;
        }

/* 
# Login

This is the main login tab

```
<style>
	.codedemo #login-view {height:600px;}
</style>
<div data-role="page" id="login-view" class="page view-active" style="display: block; margin-left: 0px; margin-right: 0px; opacity: 1; visibility: visible;">
	<div class="panelset split-view split-golden">
		<div class="panel">
			<div class="widget splash v-align">
				<h1><img src="/Images/mcgregor-logo-login.png" width="401" height="273" class="mcgregor-logo-big" alt="McGregorBFA Expert App Login Form"></h1>
			</div>
		</div>
		<div class="panel">
			<form class="v-align">
				<div class="widget login-form v-align-pseudo">
					<div>
						<div class="access-paid">
							<div class="header">
								<h2>Sign in to access IRESS Expert</h2>
							</div>
							<div class="content">
								<fieldset>
									<ul>
										<li data-role="fieldcontain"><label for="username">Email</label>
										<input type="email" id="username" name="username" placeholder="Email"><span class="validationMessage" style="display: none;"></span>
										</li>
										<li data-role="fieldcontain"><label for="password">Password</label>
										<input type="password" id="password" name="password" placeholder="Password"><span class="validationMessage" style="display: none;"></span>
										</li>
									</ul>
								</fieldset>
								<input class="btn btn-action" type="submit" value="Sign in">
							</div>
						</div>
						<div class="access-free">
							<div class="header">
								<h2>Try <strong>Expert</strong> for free</h2>
							</div>
							<div class="content">
								<input class="btn btn-action"type="button" value="Evaluate">
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
```

*/
#logon-view {
    height: 100%;
    width: 100%;
}

    #logon-view .panelset,
    #logon-view .panel {
        height: 100%;
        position: relative;
    }

    #logon-view .access-paid .header h2 {
        font-size: 20px;
        font-weight: bold;
        color: var(--primary-font-color);
        text-transform: none;
        padding-left: 10px;
    }

    #logon-view .btn-action {
        font-size: 16px;
        line-height: 23px;
        border: 1px solid #961418;
        border-top: 1px solid rgba(255, 255, 255, 0.3);
        padding: .6em 25px;
        display: block;
        font-weight: bold;
        color: var(--primary-font-color);
        text-shadow: none;
        letter-spacing: 0;
        background: #45264f;
        background: -moz-linear-gradient(top, #45264f 0%, #714182 42%, #351b3d 82%, #351b3d 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #45264f), color-stop(42%, #714182), color-stop(82%, #351b3d), color-stop(100%, #351b3d));
        background: -webkit-linear-gradient(top, #45264f 0%, #714182 42%, #351b3d 82%, #351b3d 100%);
        background: -o-linear-gradient(top, #45264f 0%, #714182 42%, #351b3d 82%, #351b3d 100%);
        background: -ms-linear-gradient(top, #45264f 0%, #714182 42%, #351b3d 82%, #351b3d 100%);
        background: linear-gradient(to bottom, #45264f 0%, #714182 42%, #351b3d 82%, #351b3d 100%);
        text-shadow: 0 0px 0 #562f63;
        border: 1px solid #562f63;
        font-weight: bold;
        -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
        -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }

    #logon-view form {
        padding: 0;
        width: 100%;
    }

    #logon-view .access-free {
        margin-top: 30px;
    }

.splash {
    width: 100%;
    height: 100%;
    background: var(--tertiary-bg-color);
    background: rgba(255, 255, 255, 0.1);
}

    .splash h1 {
        text-align: center;
        margin: 0;
    }

    .splash .login-box {
        height: 300px;
    }

        .splash .login-box img {
            margin-top: 91px;
        }

    .splash img {
        display: block;
        margin: 0 auto;
    }

.login-form {
    background: rgba(20, 20, 20, 0.8);
    width: 100%;
    height: 100%;
}

    .login-form .header {
        margin-left: 20px;
    }

    .login-form .content {
        margin: 0 20px;
    }

        .login-form .content ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

    .login-form fieldset {
        padding: 0;
        margin: 10px 0;
        background: var(--primary-font-color);
        border: 1px solid #cccccc;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

        .login-form fieldset li {
            border-top: 1px solid #e6e6e6;
            padding: 10px;
        }

            .login-form fieldset li:first-child {
                border-top: none;
            }

        .login-form fieldset label {
            font-size: 18px;
            width: 30%;
            margin-right: 3%;
            display: inline-block;
            color: #1e1e1e;
            font-weight: bold;
            text-shadow: 0 0 0 transparent;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .login-form fieldset input[type="text"],
        .login-form fieldset input[type="password"],
        .login-form fieldset input[type="email"] {
            width: 65%;
            display: inline-block;
            padding: 8px 15px;
            border: 0 solid transparent;
            font-size: 16px;
            background: #f6f6f6;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            -o-border-radius: 4px;
            border-radius: 4px;
        }

.validationMessage {
    background: #f3e2e2;
    padding: 2px 5px;
    width: 92%;
    display: block;
    text-align: left;
    color: #cd2b36;
    margin: 0 auto 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 1px 1px white;
    font-size: 11px;
    position: absolute;
    bottom: -17px;
    left: 9px;
    line-height: 12px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    text-shadow: 0 1px 1px white;
}

.login-page {
    height: 100%;
    width: 100%;
    padding-top: 100px;
    background-repeat: no-repeat;
    background-color: transparent;
    background-image: url("../images/iress_gradient_dark_RGB_1.png");
    background-size: 100% 100%;
}

    .login-page h1 {
        margin: 10px 0 50px 0;
    }

    .login-page p {
        font-size: 11px;
        letter-spacing: 0;
    }

        .login-page p span {
            font-weight: bold;
        }

        .login-page p a {
            color: var(--primary-font-color);
            font-size: 11px;
            text-decoration: underline;
        }

        .login-page p.loginmsg {
            font-size: 12px;
            margin: 25px 0;
            line-height: 16px;
        }

.login-block h2 {
    font-size: 14px;
    color: #323232;
    text-transform: none;
}

    .login-block h2 span {
        font-size: 20px;
        color: #242424;
        text-transform: none;
        display: block;
        font-weight: normal;
        text-shadow: none;
        letter-spacing: 0;
    }

.login-block .error {
    background: #f3e2e2;
    margin: 25px 10px 10px;
    font-style: normal;
    color: #961418;
    text-shadow: none;
    padding: 10px;
    line-height: 1.3em;
}

    .login-block .error p {
        padding: 10px;
        color: #961418;
    }

    .login-block .error a {
        color: var(--secondary-font-color);
        font-weight: normal;
    }

.login-block p a {
    color: var(--secondary-font-color);
    font-weight: bold;
    text-decoration: underline;
    font-size: 12px;
}

.login-block fieldset {
    border: 0;
}

    .login-block fieldset ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

        .login-block fieldset ul li {
            border: 0;
            padding: 0px 10px 0 10px;
            position: relative;
        }

            .login-block fieldset ul li input[type="email"], .login-block fieldset ul li input[type="password"], .login-block fieldset ul li input[type="text"] {
                width: 95%;
                padding: 8px 0 8px 10px;
                margin-top: 20px;
                border: 1px solid white;
                background: transparent !important;
                color: var(--primary-font-color);
                font-size: 13px;
                border-radius: 6px;
            }

.login-block label {
    color: var(--primary-font-color);
    width: 100%;
    text-align: left;
    font-size: 12px;
    font-weight: bold;
    padding-left: 5px;
    font-weight: bold;
    letter-spacing: 0;
}

input::placeholder {
    color: var(--primary-font-color);
}

.login-block .login-border-title {
    border-top: 1px solid #aaa;
    border-bottom: none;
    border-left: none;
    border-right: none;
    display: block;
    text-align: center;
    margin: 0 20px;
}

    .login-block .login-border-title legend {
        padding: 5px 10px;
        color: #242424;
    }

.login-box {
    align-content: center;
    background: var(--primary-bg-color);
    border-radius: 6px;
    width: 450px;
    height: 550px;
    margin: 0 auto 0;
}

    .login-box .logo {
        background-image: url("../images/IRESS_Primary_Logo.png");
        background-size: 195px;
        height: 140px;
        background-position: 55% 50%;
        background-repeat: no-repeat;
    }

    .login-box .forgot-password {
        color: #D3CAF7;
        font-size: 14px;
    }

/* 
# Login

This is the main login tab

```
<style>
	.codedemo #login-view {height:600px;}
</style>
<div data-role="page" id="login-view" class="page view-active" style="display: block; margin-left: 0px; margin-right: 0px; opacity: 1; visibility: visible;">
	<div class="panelset split-view split-golden">
		<div class="panel">
			<div class="widget splash v-align">
				<h1><img src="/Images/mcgregor-logo-login.png" width="401" height="273" class="mcgregor-logo-big" alt="McGregorBFA Expert App Login Form"></h1>
			</div>
		</div>
		<div class="panel">
			<form class="v-align">
				<div class="widget login-form v-align-pseudo">
					<div>
						<div class="access-paid">
							<div class="header">
								<h2>Sign in to access IRESS Expert</h2>
							</div>
							<div class="content">
								<fieldset>
									<ul>
										<li data-role="fieldcontain"><label for="username">Email</label>
										<input type="email" id="username" name="username" placeholder="Email"><span class="validationMessage" style="display: none;"></span>
										</li>
										<li data-role="fieldcontain"><label for="password">Password</label>
										<input type="password" id="password" name="password" placeholder="Password"><span class="validationMessage" style="display: none;"></span>
										</li>
									</ul>
								</fieldset>
								<input class="btn btn-action" type="submit" value="Sign in">
							</div>
						</div>
						<div class="access-free">
							<div class="header">
								<h2>Try <strong>Expert</strong> for free</h2>
							</div>
							<div class="content">
								<input class="btn btn-action"type="button" value="Evaluate">
							</div>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>
</div>
```

*/
#logon-view {
    height: 100%;
    width: 100%;
}

    #logon-view .panelset,
    #logon-view .panel {
        height: 100%;
        position: relative;
    }

    #logon-view .access-paid .header h2 {
        font-size: 20px;
        font-weight: bold;
        color: var(--primary-font-color);
        text-transform: none;
        padding-left: 10px;
    }

    #logon-view .btn-action:active {
        background: var(--secondary-btn-color);
    }

    #logon-view .btn-action:hover {
        background: var(--tertiary-btn-color);
        text-shadow: 0 0px 0 #562f63;
        border: 1px solid #562f63;
        font-weight: bold;
        -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
        -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
        box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
    }

    #logon-view form {
        padding: 0;
        width: 100%;
    }

    #logon-view .access-free {
        margin-top: 30px;
    }

.splash {
    width: 100%;
    height: 100%;
    background: var(--tertiary-bg-color);
    background: rgba(255, 255, 255, 0.1);
}

    .splash h1 {
        text-align: center;
        margin: 0;
    }

    .splash .login-box {
        height: 300px;
    }

        .splash .login-box img {
            margin-top: 91px;
        }

    .splash img {
        display: block;
        margin: 0 auto;
    }

.login-form {
    background: rgba(20, 20, 20, 0.8);
    width: 100%;
    height: 100%;
}

    .login-form .header {
        margin-left: 20px;
    }

    .login-form .content {
        margin: 0 20px;
    }

        .login-form .content ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

    .login-form fieldset {
        padding: 0;
        margin: 10px 0;
        background: var(--primary-font-color);
        border: 1px solid #cccccc;
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        border-radius: 8px;
        -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }

        .login-form fieldset li {
            border-top: 1px solid #e6e6e6;
            padding: 10px;
        }

            .login-form fieldset li:first-child {
                border-top: none;
            }

        .login-form fieldset label {
            font-size: 18px;
            width: 30%;
            margin-right: 3%;
            display: inline-block;
            color: #1e1e1e;
            font-weight: bold;
            text-shadow: 0 0 0 transparent;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }

        .login-form fieldset input[type="text"],
        .login-form fieldset input[type="password"],
        .login-form fieldset input[type="email"] {
            width: 65%;
            display: inline-block;
            padding: 8px 15px;
            border: 0 solid transparent;
            font-size: 16px;
            background: #f6f6f6;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            -o-border-radius: 4px;
            border-radius: 4px;
        }

.validationMessage {
    background: #f3e2e2;
    padding: 2px 5px;
    width: 92%;
    display: block;
    text-align: left;
    color: #cd2b36;
    margin: 0 auto 15px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
    text-shadow: 0 1px 1px white;
    font-size: 11px;
    position: absolute;
    bottom: -17px;
    left: 9px;
    line-height: 12px;
    -webkit-border-radius: 0 0 5px 5px;
    -moz-border-radius: 0 0 5px 5px;
    -ms-border-radius: 0 0 5px 5px;
    -o-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
    text-shadow: 0 1px 1px white;
}


.login-page h1 {
    margin: 10px 0 50px 0;
}

.login-page p {
    font-size: 11px;
    letter-spacing: 0;
}

    .login-page p span {
        font-weight: bold;
    }

    .login-page p a {
        color: var(--primary-font-color);
        font-size: 11px;
        text-decoration: underline;
    }

    .login-page p.loginmsg {
        font-size: 12px;
        margin: 25px 0;
        line-height: 16px;
    }

.login-block {
    background: Transparent;
}

    .login-block .welcome {
        color: var(--primary-font-color);
        font-size: 20px;
    }

    .login-block h2 {
        font-size: 14px;
        color: #323232;
        text-transform: none;
    }

        .login-block h2 span {
            font-size: 20px;
            color: #242424;
            text-transform: none;
            display: block;
            font-weight: normal;
            text-shadow: none;
            letter-spacing: 0;
        }

    .login-block .error {
        background: Transparent;
        margin: 25px 10px 10px;
        font-style: normal;
        color: var(--secondary-font-color);
        text-shadow: none;
        padding: 10px;
        line-height: 1.3em;
    }

        .login-block .error p {
            padding: 10px;
            color: var(--tertiary-font-color);
        }

        .login-block .error a {
            color: var(--secondary-font-color);
            font-weight: normal;
        }

    .login-block p a {
        color: var(--secondary-font-color);
        font-weight: bold;
        text-decoration: underline;
        font-size: 12px;
    }

    .login-block fieldset {
        border: 0;
    }

        .login-block fieldset ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

            .login-block fieldset ul li {
                border: 0;
                padding: 0;
                position: relative;
            }

    .login-block .login-border-title {
        border-top: 1px solid #aaa;
        border-bottom: none;
        border-left: none;
        border-right: none;
        display: block;
        text-align: center;
        margin: 0 20px;
    }

        .login-block .login-border-title legend {
            padding: 5px 10px;
            color: #242424;
        }

#storageconfirmation-view .view {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

#markets-view .w-inslist .header {
    background: #2c2c2c;
}

    #markets-view .w-inslist .header h2 {
        color: #787878;
    }

#markets-view .w-inslist td,
#markets-view .w-inslist th {
    border-left: none;
}

#markets-view .w-inslist.sml li {
    border-top: none;
}

#markets-view .panelset .w-inslist.commodities {
    border-bottom: none;
}

#markets-view .panelset .w-inslist.currencies {
    border-right: none;
    border-bottom: none;
}

    #markets-view .panelset .w-inslist.currencies .content {
        background: var(--secondary-bg-color);
    }

#panel_summary {
    float: left;
    border-bottom: 1px solid #767676;
}

    #panel_summary .w-metalist {
        padding-bottom: 2px;
    }

        #panel_summary .w-metalist.w-table {
            padding-bottom: 0;
        }

#metalist_instrument_statistics dt.meta_1w,
#metalist_instrument_statistics dt.meta_1m,
#metalist_instrument_statistics dt.meta_3m {
    width: 29%;
}

#metalist_instrument_statistics dd.meta_1w,
#metalist_instrument_statistics dd.meta_1m,
#metalist_instrument_statistics dd.meta_3m {
    width: 71%;
}

#metalist_instrument_statistics dt.meta_ratio {
    width: 55%;
}

#metalist_instrument_statistics dd.meta_ratio {
    width: 45%;
}

#metalist_instrument_statistics dt.meta_ratio,
#metalist_instrument_statistics dd.meta_ratio {
    border: none;
}

#i-landing-tabpanels {
    min-height: 50vh;
}

#instrumentLanding-view .content .searchbar {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    width: 405px;
}

    #instrumentLanding-view .content .searchbar input[type=text] {
        width: 300px;
    }

#instrumentLanding-view .content small {
    float: right;
}

#instrumentLanding-view .content .c-fieldselect li small {
    float: none;
    display: inline-block;
}

#instrumentLanding-view .content table.c-datagrid tr th small.meta {
    float: none;
}

#instrumentLanding-view .dropdown.theme_expertWeb .form_inline small.error_msg {
    float: none;
}

#instrumentLanding-view .contentview .content .time {
    float: none;
}

#instrumentLanding-view .w-contentlist .content .time {
    float: none;
}

#instrumentLanding-view .w-contentlist {
    border-bottom: none;
}

#instrumentLanding-view .oview .todays-change {
    width: 34%;
}

#instrumentLanding-view .oview .last-price {
    width: 25%;
}

#instrumentLanding-view .oview .days-range {
    width: 41%;
}

#instrumentLanding-view .chart_company-info {
    background: #2c2c2c;
    border-top: 1px solid #5c5c5c;
    border-bottom: #787878;
    *zoom: 1;
}

    #instrumentLanding-view .chart_company-info:after {
        content: "";
        display: table;
        clear: both;
    }

#instrumentLanding-view .col-coinfo-invest-country {
    width: 14%;
}

    #instrumentLanding-view .col-coinfo-invest-country th.desc {
        background: var(--primary-font-color);
    }

#instrumentLanding-view .col-coinfo-invest-name {
    width: 32%;
}

#instrumentLanding-view .col-coinfo-invest-sector {
    width: 36%;
}

#instrumentLanding-view .col-coinfo-invest-percentage {
    width: 9%;
}

#instrumentLanding-view .col-coinfo-invest-type {
    width: 9%;
}

#instrumentLanding-view .tabbar.split-8 li:nth-child(1) {
    width: 9.4%;
}

#instrumentLanding-view .tabbar.split-8 li:nth-child(2) {
    width: 15.3%;
}

#instrumentLanding-view .tabbar.split-8 li:nth-child(3) {
    width: 11.7%;
}

#instrumentLanding-view .tabbar.split-8 li:nth-child(4) {
    width: 5.9%;
}

#instrumentLanding-view .tabbar.split-8 li:nth-child(5) {
    width: 14.7%;
}

#instrumentLanding-view .tabbar.split-8 li:nth-child(6) {
    width: 7.5%;
}

#instrumentLanding-view .tabbar.split-8 li:nth-child(7) {
    width: 16.2%;
}

#instrumentLanding-view .tabbar.split-8 li:nth-child(8) {
    width: 19.3%;
}

#panel_instrumentSummary .content.nodata p {
    padding: 10px;
    margin-left: 10px;
}

#panel_keyFinancials .actionbar {
    background: #282828;
}

#panel_keyFinancials .panel > .header {
    background: #282828;
    height: 54px;
    padding-top: 13px;
}

    #panel_keyFinancials .panel > .header h2 {
        float: left;
        font-size: 14px;
        padding: 0 10px;
    }

    #panel_keyFinancials .panel > .header .tools {
        top: 7px;
        right: 20px;
    }

#panel_keyFinancials .btn_export {
    float: right;
}

#panel_keyFinancials .content .nodata,
#panel_keyFinancials .content.nodata {
    padding: 20px;
}

#panel_keyFinancials .searchbar {
    margin: 0 auto;
    width: 465px;
    overflow: hidden;
}

    #panel_keyFinancials .searchbar .icon-clear {
        position: absolute;
        right: 54px;
        top: 6px;
    }

    #panel_keyFinancials .searchbar .loading-indicator {
        position: absolute;
        right: 54px;
        top: 6px;
    }

    #panel_keyFinancials .searchbar input[type=text] {
        -webkit-box-shadow: 0 2px 3px inset rgba(148, 148, 148, 0.7);
        -moz-box-shadow: 0 2px 3px inset rgba(148, 148, 148, 0.7);
        box-shadow: 0 2px 3px inset rgba(148, 148, 148, 0.7);
        -webkit-appearance: textfield;
        display: block;
        background-color: var(--primary-font-color);
        padding: 4px 0;
        text-indent: 5px;
        font-size: 13px;
        line-height: 16px;
        position: relative;
        float: left;
        top: 1px;
        border: 0 solid transparent;
        width: 360px;
        float: left;
    }

#panel_keyFinancials .c-datagrid th small {
    float: none;
}

#keyFinancialsSearchControl_input_results {
    width: 300px;
}

    #keyFinancialsSearchControl_input_results .content {
        position: relative;
        left: -3px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0;
    }

#panel_coinfo_investments .content {
    overflow: auto;
}

#panel_coinfo_investments .ivest_country {
    width: 15%;
}

#panel_coinfo_investments .ivest_name {
    width: 20%;
}

#panel_coinfo_investments .ivest_sector {
    width: 48%;
}

#panel_coinfo_investments .ivest_percent {
    width: 9%;
}

#panel_coinfo_investments .ivest_type {
    width: 8%;
}

#panel-coinfo-shareholders .content .w-table {
    max-height: 300px;
    min-height: 300px;
    overflow: auto;
    min-width: 300px;
    padding: 0;
}

#panel-coinfo-directors .content {
    overflow: auto;
}

#instrument_5daymarketcap .content .chart {
    width: 210px;
    margin: 0 auto;
    padding: 0;
}

#instrument_5daymarketcap .content .key-integrated {
    width: 210px;
    margin: 0 auto;
    padding: 0 0 20px;
}

#candle_chart {
    margin: 0 auto;
    padding: 0;
}

#oneDayChart {
    margin: 0 auto;
    padding: 0 0 20px;
}

#widget_dividendsSummary .chart {
    padding-left: 50px;
}

#widget_dividendsSummary .table-legend {
    width: 190px;
}

    #widget_dividendsSummary .table-legend .chart-dividends-key {
        width: 17px;
    }

    #widget_dividendsSummary .table-legend .chart-dividends-name {
        width: 53px;
    }

    #widget_dividendsSummary .table-legend .chart-dividends-yr1 {
        width: 40px;
    }

    #widget_dividendsSummary .table-legend .chart-dividends-yr2 {
        width: 40px;
    }

    #widget_dividendsSummary .table-legend .chart-dividends-yr3 {
        width: 40px;
    }

#widget_dividendsSummary table th {
    line-height: 16px;
    font-size: 11px;
    padding: 3px 10px;
}

    #widget_dividendsSummary table th.desc {
        background: var(--primary-bg-color);
        border-left: 0;
        font-size: 11px;
    }

#widget_dividendsSummary table td {
    line-height: 16px;
    font-size: 11px;
    padding: 3px 10px;
}

    #widget_dividendsSummary table td.desc {
        background: var(--tertiary-bg-color);
    }

    #widget_dividendsSummary table td.val {
        background: var(--secondary-bg-color);
        border-left: 0;
    }

        #widget_dividendsSummary table td.val:last-child {
            background: var(--tertiary-bg-color);
        }

#widget_dividendsSummary table thead th {
    border-left: 0;
    font-size: 11px;
}

#widget_dividendsSummary table i {
    margin-top: 0;
}

#widget_dividendsSummary .nodata {
    height: 110px;
}

#panel_keyFinancials .actionbar {
    background: #282828;
}

#panel_keyFinancials > .content {
    border-bottom: none;
}

#panel_keyFinancials .c-datagrid.full-width thead th {
    height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 13px;
    font-weight: bold;
}

#panel_keyFinancials .c-datagrid.full-width th {
    border-left: none;
    -webkit-box-shadow: inset 0 1px 0 var(--tertiary-bg-color);
    -moz-box-shadow: inset 0 1px 0 var(--tertiary-bg-color);
    box-shadow: inset 0 1px 0 var(--tertiary-bg-color);
}

#panel_documents .c-datagrid.full-width thead th {
    height: auto;
    padding-top: 6px;
    padding-bottom: 6px;
    font-size: 13px;
    font-weight: bold;
}

#panel_documents .c-datagrid.full-width th {
    border-left: none;
    -webkit-box-shadow: inset 0 1px 0 var(--tertiary-bg-color);
    -moz-box-shadow: inset 0 1px 0 var(--tertiary-bg-color);
    box-shadow: inset 0 1px 0 var(--tertiary-bg-color);
}

.d-wrapper {
    float: left;
    width: 100%;
    background: #282828;
}

    .d-wrapper .header {
        border-bottom: 0px solid var(--primary-bg-color);
    }

        .d-wrapper .header h2 {
            float: left;
        }

.chart-button {
    display: block;
    padding: 0;
    float: right;
    text-align: right;
    position: relative;
}

#chart_trendChart .chart-button {
    padding-bottom: 0;
    margin-top: 10px;
}

#panel_instrumentNews .panelset {
    background: var(--tertiary-bg-color);
}

#panel_instrumentNews .panel.contentview {
    min-height: 301px;
}

#panel_instrumentNews .w-contentlist .c-pager {
    margin-top: 10px;
    padding: 15px 10px;
    background: var(--tertiary-bg-color);
}

#panel_fullChart .dropdown ul.list_options.edit_mode li {
    overflow: hidden;
}

#panel_fullChart .dropdown ul.list_options.edit_mode label {
    font-weight: bold;
    font-size: 12px;
    line-height: 22px;
    color: black;
    text-shadow: 0 0 0 transparent;
    min-height: 30px;
    float: left;
    padding: 4px 5px 4px 0;
}

#panel_fullChart .dropdown ul.list_options.edit_mode input {
    background: #f0f0f0;
    color: #565656;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: bold;
    line-height: 14px;
    float: right;
    margin: 4px 0;
    width: 40%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;
}

#panel_historicalData #fieldSelection {
    clear: both;
}

#panel_historicalData .dataTable thead th {
    height: auto;
    font-weight: normal;
}

#panel_historicalData .dataTable th {
    text-align: right;
    border-left: none;
    -webkit-box-shadow: inset 0 1px 0 var(--tertiary-bg-color);
    -moz-box-shadow: inset 0 1px 0 var(--tertiary-bg-color);
    box-shadow: inset 0 1px 0 var(--tertiary-bg-color);
}

    #panel_historicalData .dataTable th:first-child {
        text-align: left;
    }

#panel_historicalData .w-ratiobar {
    height: 235px;
}

#panel_historicalData .panel > .actionbar {
    border-bottom: 1px solid #181818;
}

#panel_historicalData .panel > .header {
    background: var(--primary-bg-color);
    border-top: 1px solid var(--tertiary-bg-color);
    height: 39px;
}

    #panel_historicalData .panel > .header > * {
        top: 0;
    }

    #panel_historicalData .panel > .header h2 {
        font-size: 14px;
        line-height: 39px;
    }

    #panel_historicalData .panel > .header span {
        padding-top: 10px;
    }

#panel-coinfo-shareholders .w-chart {
    padding-bottom: 0;
    border-bottom: 0;
}

#panel_coinfo_riskmanagement .w-chart:first-child {
    border-right: 1px solid black;
    border-bottom: 0;
}

#panel_coinfo_riskmanagement .w-chart:last-child {
    border-bottom: 0;
}

#panel_coinfo_riskmanagement .chartlegend {
    margin: 0 30px;
}

#panel_coinfo_riskmanagement .nodata-chart {
    width: 610px;
    max-width: 610px;
    height: 300px;
    padding-left: 260px;
    padding-top: 140px;
}

#panel_coinfo_riskmanagement .header h2 small.providedby {
    text-transform: none;
    font-weight: normal;
    font-size: 11px;
    color: #606060;
    height: 23px;
}

    #panel_coinfo_riskmanagement .header h2 small.providedby span {
        display: inline-block;
        line-height: 23px;
        top: 0;
        vertical-align: top;
        padding: 0;
    }

    #panel_coinfo_riskmanagement .header h2 small.providedby a {
        color: #606060;
        text-decoration: underline;
    }

    #panel_coinfo_riskmanagement .header h2 small.providedby img {
        padding-left: 5px;
    }

#watchlist-view .ins.lrg .title {
    cursor: pointer;
}

#watchlist-view .watchlist_header-title {
    padding-right: 5px;
}

#watchlist-view .watchlist_header-name {
    text-transform: uppercase;
    top: 8px;
    font-size: 12px;
    line-height: 24px;
    padding-top: 0;
}

#watchlist-view .watchlist-search {
    width: 380px;
    margin: 0 auto 0;
}

    #watchlist-view .watchlist-search .searchbar .icon-clear, #watchlist-view .watchlist-search .searchbar .loading-indicator {
        right: 127px;
    }

#watchlistSearchControl_input {
    width: 200px;
}

#watchlistSearchControl_input_results {
    width: 197px;
}

#searchResultContent {
    margin-left: -3px;
}

#watchlist_Results li {
    border-bottom: 0;
    padding: 0;
    height: auto;
}

#watchlist_Results .w-inslist.sml td {
    padding: 2px 5px 2px 4px;
}

#watchlist_Results .w-inslist.sml th {
    padding: 6px 4px 6px;
}

    #watchlist_Results .w-inslist.sml th .i-sort {
        float: right;
    }

    #watchlist_Results .w-inslist.sml th.val span {
        padding-right: 5px;
    }

    #watchlist_Results .w-inslist.sml th.val .i-sort {
        float: right;
    }

#watchlist_Results .w-inslist.sml li a {
    padding: 5px 7px 3px 7px;
}

#view_instrumentComparison #instrument_comparison_chart_control > .content {
    border-bottom: none;
}

#view_instrumentComparison #instrument_comparison_chart_control .w-chart {
    border-bottom: none;
}

#view_instrumentComparison table.c-datagrid tr th, #view_instrumentComparison table.c-datagrid tr td {
    width: 200px;
}

    #view_instrumentComparison table.c-datagrid tr th .cell_nowrap, #view_instrumentComparison table.c-datagrid tr td .cell_nowrap {
        max-width: 100%;
    }

#view_instrumentComparison table.c-datagrid tr > *:first-child {
    width: 300px;
}

#view_instrumentComparison .c-compare {
    width: 445px;
    margin: 0 auto;
}

    #view_instrumentComparison .c-compare a {
        float: left;
        margin-left: 8px;
    }

#view_instrumentComparison #instrumentComparisonSearchControl_input {
    background: var(--primary-input-bg-color);
    width: 200px;
}

#view_instrumentComparison .w-datagrid .hscroll {
    height: 480px;
}

#instrumentComparisonSearchControl_input_results {
    width: 200px;
}

    #instrumentComparisonSearchControl_input_results .content {
        position: relative;
        left: -3px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0;
    }

#view_instrumentComparisonClean .p-datagrid > .content {
    padding: 20px;
}

#view_instrumentComparisonClean .searchbar {
    margin: 0 auto;
    width: 405px;
    overflow: hidden;
}

    #view_instrumentComparisonClean .searchbar .icon-clear {
        position: absolute;
        right: 54px;
        top: 6px;
    }

    #view_instrumentComparisonClean .searchbar .loading-indicator {
        position: absolute;
        right: 54px;
        top: 6px;
    }

    #view_instrumentComparisonClean .searchbar input[type=text] {
        -webkit-box-shadow: 0 2px 3px inset rgba(148, 148, 148, 0.7);
        -moz-box-shadow: 0 2px 3px inset rgba(148, 148, 148, 0.7);
        box-shadow: 0 2px 3px inset rgba(148, 148, 148, 0.7);
        -webkit-appearance: textfield;
        display: block;
        background-color: var(--primary-font-color);
        padding: 4px 0;
        text-indent: 5px;
        font-size: 13px;
        line-height: 16px;
        position: relative;
        float: left;
        top: 1px;
        border: 0 solid transparent;
        width: 300px;
        float: left;
    }

    #view_instrumentComparisonClean .searchbar input.btn-action {
        float: left;
        border-left: 1px solid #41264a;
    }

#view_instrumentComparisonClean .search_results {
    width: 297px;
}

#comparisonPageCleanSearchControl_input_results {
    width: 300px;
}

    #comparisonPageCleanSearchControl_input_results .content {
        position: relative;
        left: -3px;
        -webkit-border-radius: 0;
        -moz-border-radius: 0;
        -ms-border-radius: 0;
        -o-border-radius: 0;
        border-radius: 0;
    }

#panel_technicalCharts {
    margin: 0;
}

#content_chart_analysis .list_options {
    max-height: 350px;
}

.searchScreener_header-title {
    padding-right: 5px;
    top: 10px;
    color: var(--primary-font-color);
}

.searchScreener_header-search {
    position: relative;
    top: 9px;
    width: 40%;
    color: var(--primary-font-color);
    font-size: 11px;
}

    .searchScreener_header-search .c-searchbar {
        margin-left: 5px;
    }

        .searchScreener_header-search .c-searchbar input {
            color: var(--primary-font-color);
        }

    .searchScreener_header-search .btn {
        padding: 5px 10px;
        right: -1px;
        top: -1px;
    }

.searchScreener_header-actions {
    position: absolute;
    right: 8px;
    top: 8px;
}

    .searchScreener_header-actions .btn-group {
        top: 0;
        left: auto;
    }

.searchScreener_filters {
    width: 250px;
    height: 100%;
    margin: 0;
    background: #2a2a2a;
    border-top: 1px solid #181818;
    align-self: flex-start;
}

.searchScreener_results {
    width: calc(100% - 250px);
    height: 100%;
    margin: 0;
    border-left: 1px solid #181818;
    align-self: flex-start;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

#searchScreener-view .searchScreener_header-title {
    padding-right: 5px;
    top: 10px;
}

#searchScreener-view ul.w-filterSearch_content-hasItems {
    padding-top: 8px;
}

#searchScreener-view .searchScreener_header-search {
    top: 9px;
}

#searchScreener-view .searchScreener_header-actions {
    top: 8px;
}

#searchScreener-view .w-filterSearch_header-btnToggle {
    padding: 0 2px;
    top: 9px;
    line-height: 16px;
    margin-left: 10px;
}

#searchScreener-view .w-filterSearch_header-title {
    line-height: 22px;
    padding: 6px 5px 5px 2px;
}

#searchScreener-view .w-filterSearch_header-actions {
    line-height: 22px;
    padding: 5px 0;
}

    #searchScreener-view .w-filterSearch_header-actions a {
        font-size: 11px;
    }

#searchScreener-view .w-filterSearch_content-hasNoItems {
    padding: 2px 10px 2px;
    margin: 0;
}

#searchScreener_Results {
    /*.col-advsearch-actions {width: 10%;} */
}

    #searchScreener_Results .w-table {
        border-top: 1px solid var(--primary-bg-color);
        border-bottom: 1px solid var(--primary-bg-color);
        min-height: 650px;
        position: relative;
        padding-bottom: 43px;
    }

        #searchScreener_Results .w-table .table-actions {
            position: fixed;
            left: 0;
            bottom: 0;
            width: 100%;
            margin: 0 auto 0;
        }

            #searchScreener_Results .w-table .table-actions .table-actions-wrapper {
                width: 100%;
                max-width: 1340px;
                /*padding-left: 250px;*/
                margin: 0 auto 0;
            }

            #searchScreener_Results .w-table .table-actions dd {
                bottom: 100%;
            }

            #searchScreener_Results .w-table .table-actions .display-left {
                float: left;
                width: 230px;
                height: 25px;
                line-height: 25px;
                margin-right: 20px;
            }

        #searchScreener_Results .w-table .c-resultsPerPage .resultsDropDown {
            position: fixed;
            z-index: 1000;
        }

        #searchScreener_Results .w-table .c-resultsPerPage .resultLabel-result {
            padding-left: 50px;
        }

    #searchScreener_Results table {
        width: 100%;
        border-top: 1px solid var(--primary-bg-color);
        border-bottom: 1px solid var(--primary-bg-color);
    }

    #searchScreener_Results .col-advsearch-select {
        width: 30px;
    }

    #searchScreener_Results .col-advsearch-name {
        width: 22%;
    }

    #searchScreener_Results .col-advsearch-ticker {
        width: 11%;
    }

    #searchScreener_Results .col-advsearch-isin {
        width: 13%;
    }

    #searchScreener_Results .col-advsearch-type {
        width: 14%;
    }

    #searchScreener_Results .col-advsearch-exchange {
        width: 12%;
    }

    #searchScreener_Results .col-advsearch-country {
        width: 11%;
    }

    #searchScreener_Results .col-advsearch-listing {
        width: 10%;
    }

    #searchScreener_Results thead th {
        border-top: 2px solid var(--tertiary-bg-color);
        padding-top: 6px;
        padding-bottom: 6px;
        padding-left: 8px;
    }

    #searchScreener_Results td {
        padding-left: 8px;
    }

#searchScreener_HelpOverlay {
    background: url("../images/searchscreener_help_overlay.png") no-repeat;
    background-clip: border-box;
    background-size: contain;
    width: 100%;
    min-height: 380px;
    height: 100%;
}

#panel_insights_countries .viewtype-fullscreen-whead {
    background: var(--secondary-bg-color);
}

#panel_insights_countries .genericWrap, #panel_insights_countries .panel {
    height: 618px;
}

#panel_insights_countries .widget {
    height: 100%;
}

.regionnames {
    position: relative;
    width: 580px;
    left: 30px;
    margin: 0 auto;
}

    .regionnames li {
        position: absolute;
        z-index: 5;
        list-style: none;
        letter-spacing: 0.05em;
        color: #cccccc;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
    }

#region-northernafrica {
    top: 110px;
    left: 171px;
}

#region-westernafrica {
    top: 205px;
    left: 50px;
}

#region-centralafrica {
    top: 298px;
    left: 207px;
}

#region-easternafrica {
    top: 355px;
    left: 357px;
}

#region-southernafrica {
    top: 485px;
    left: 190px;
}

#countryLanding-view .pagetab {
    border-bottom: 1px solid #787878;
}

#countryLanding-view .panel > .header {
    height: 39px;
    background: #1e1e1e;
    border-top: none;
}

    #countryLanding-view .panel > .header * {
        padding: 5px 10px;
        line-height: 29px;
        top: 0;
        margin: 0;
    }

    #countryLanding-view .panel > .header h2 {
        color: var(--primary-font-color);
    }

#countryLanding-view .ins.lrg {
    border-bottom: none;
}

    #countryLanding-view .ins.lrg .title h2 {
        width: auto;
        top: 5px;
    }

#countryLanding-view .ratingsummary {
    height: 540px;
}

#countryLanding-view .widget {
    border-bottom: none;
}

#content_header_select-country .list_options {
    max-height: 350px;
}

#policyTab {
    background: #0c0c0c;
}

    #policyTab .country-profile {
        height: 350px;
    }

        #policyTab .country-profile .content {
            height: 285px;
        }

    #policyTab .trendchart .content {
        height: 300px;
        overflow: hidden;
    }

    #policyTab .chartlist .chart {
        border-bottom: 1px solid #565656;
    }

#ratingsTab {
    background: #0c0c0c;
}

    #ratingsTab .ratings col.rating-fitch,
    #ratingsTab .ratings col.rating-moody,
    #ratingsTab .ratings col.rating-sp,
    #ratingsTab .ratings col.rating-nkc {
        width: 38px;
    }

    #ratingsTab .ratings td .rating {
        text-shadow: none;
        border: none;
    }

#ratingsummary .content {
    padding: 20px;
    height: 508px;
}

#statisticsTab {
    background: #0c0c0c;
}

    #statisticsTab .w-chartlist {
        background: var(--secondary-bg-color);
    }

    #statisticsTab .w-chart {
        background: var(--secondary-bg-color);
    }

        #statisticsTab .w-chart .chart-content {
            height: 350px;
        }

    #statisticsTab .highlight {
        background: var(--secondary-bg-color);
    }

        #statisticsTab .highlight .panel .widget {
            border-left: 1px solid #2e2e2e;
        }

    #statisticsTab col.stats-provider {
        width: 180px;
    }

#chart_ratings_peerAnalysis .chart div {
    margin: 0 auto;
}

#growthdescription .content {
    height: 1339px;
}

#marketsTab .chartlist li h3 {
    height: 36px;
    line-height: 16px;
}

#marketsTab .panel {
    *zoom: 1;
}

    #marketsTab .panel:after {
        content: "";
        display: table;
        clear: both;
    }

    #marketsTab .panel > .header {
        height: 44px;
        background: #282828;
        border-top: 1px solid #282828;
    }

        #marketsTab .panel > .header > .providedby {
            float: right;
            margin-right: -10px;
        }

            #marketsTab .panel > .header > .providedby > a {
                color: #787878;
            }

#chart_markets_fullchart .content * {
    padding: 0;
}

#conflictzones-view {
    height: 623px;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #0c0c0c;
    background: #282828;
}

    #conflictzones-view .header {
        background: var(--secondary-bg-color);
        height: 49px;
    }

        #conflictzones-view .header h2 {
            top: 15px;
        }

    #conflictzones-view .content {
        position: relative;
    }

        #conflictzones-view .content .header {
            background: #2e2e2e;
            height: 42px;
            padding: 0;
            *zoom: 1;
        }

            #conflictzones-view .content .header:after {
                content: "";
                display: table;
                clear: both;
            }

            #conflictzones-view .content .header h2 {
                top: 0;
                line-height: 32px;
            }

    #conflictzones-view .footer {
        background: var(--secondary-bg-color);
        padding: 10px 30px;
        text-align: right;
        margin-bottom: 10px;
        position: absolute;
        bottom: 79px;
        right: 0;
        width: 100%;
    }

        #conflictzones-view .footer .providedby {
            float: left;
            text-align: left;
        }

    #conflictzones-view .viewtype-map {
        position: absolute;
        top: 0;
        left: 50%;
        width: 580px;
        height: 100%;
        z-index: 10;
        background: transparent;
        border: 0 solid transparent;
        margin-left: -290px;
        cursor: pointer;
    }

    #conflictzones-view .nav {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background: #282828;
        z-index: 100;
    }

    #conflictzones-view .widget {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
    }

        #conflictzones-view .widget .content {
            z-index: 0;
        }

.w-conflicts {
    border-bottom: none;
}

.panel .content .w-conflicts .risk-less {
    float: left;
    width: 30%;
    padding-left: 50px;
}

.panel .content .w-conflicts .risk-more {
    float: right;
    width: 30%;
    padding-left: 8%;
}

.panel .content .w-conflicts .countryrisk-low {
    color: #92b340;
}

.panel .content .w-conflicts .countryrisk-lowmod {
    color: #dfd41f;
}

.panel .content .w-conflicts .countryrisk-mod {
    color: #fad410;
}

.panel .content .w-conflicts .countryrisk-modhigh {
    color: #fa9f07;
}

.panel .content .w-conflicts .countryrisk-high {
    color: #de1501;
}

.w-conflicts ul {
    margin: 0;
    padding: 15px 0 0 15px;
}

    .w-conflicts ul li {
        font-size: 16px;
        font-weight: bold;
        position: relative;
    }

        .w-conflicts ul li .icon-lowerrisk {
            margin-right: 5px;
            position: absolute;
            left: -25px;
            top: 6px;
        }

        .w-conflicts ul li .icon-higherrisk {
            margin-left: 5px;
            display: inline-block;
            position: relative;
            top: 6px;
        }

        .w-conflicts ul li div {
            display: inline-block;
            line-height: 29px;
            position: relative;
            top: 0;
        }

#marketing-hero {
    background: var(--primary-bg-color);
    padding-top: 55px;
    white-space: nowrap;
}

    #marketing-hero .panel img {
        background-image: url("../images/marketing_sprites.png?v=1");
        background-repeat: no-repeat;
        height: 310px;
    }

    #marketing-hero .panel:nth-child(1) img {
        background-position: center -320px;
    }

    #marketing-hero .panel:nth-child(2) img {
        background-position: center 0;
    }

    #marketing-hero .panel:nth-child(3) img {
        background-position: center -640px;
    }

    #marketing-hero .panel .content {
        padding-left: 20px;
        position: relative;
        font-weight: bold;
    }

        #marketing-hero .panel .content * {
            white-space: normal;
        }

        #marketing-hero .panel .content:before {
            content: "";
            position: absolute;
            top: 17px;
            left: 0;
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid #be1622;
        }

    #marketing-hero #marketing1 img {
        background-position: center -320px;
    }

    #marketing-hero #marketing2 img {
        background-position: center 0;
    }

    #marketing-hero #marketing3 img {
        background-position: center -640px;
    }

#marketing-features {
    background: var(--secondary-bg-color);
    padding: 0;
}

    #marketing-features .header {
        height: 40px;
        border-bottom: 1px solid var(--tertiary-bg-color);
    }

        #marketing-features .header h2 {
            line-height: 25px;
        }

    #marketing-features ul {
        list-style: none;
        margin: 0;
        padding: 0;
        *zoom: 1;
    }

        #marketing-features ul:after {
            content: "";
            display: table;
            clear: both;
        }

        #marketing-features ul li {
            padding: 22px 10px 20px 40px;
            border-left: 1px solid var(--tertiary-bg-color);
            min-height: 100px;
            height: 130px;
        }

            #marketing-features ul li ul {
                display: list-item;
                list-style-position: outside;
            }

                #marketing-features ul li ul li {
                    font-size: 14px;
                    list-style-type: disc;
                    display: list-item;
                    list-style-position: outside;
                    padding: 0;
                    border-left: none;
                    padding-left: 10px;
                    height: auto;
                    min-height: 10px;
                }

            #marketing-features ul li:first-child {
                border-left: none;
            }

    #marketing-features img {
        background-image: url("../images/marketing_sprites.png?v=1");
        background-repeat: no-repeat;
        width: 70px;
        height: 70px;
    }

    #marketing-features li:nth-child(1) img {
        background-position: 0 -960px;
    }

    #marketing-features li:nth-child(2) img {
        background-position: -70px -960px;
    }

    #marketing-features li:nth-child(3) img {
        background-position: -140px -960px;
    }

    #marketing-features p {
        float: left;
        font-size: 14px;
        width: 77%;
        padding-left: 10px;
        margin: 0;
        min-width: 270px;
    }

#marketing-actions {
    background: var(--primary-bg-color);
    padding: 35px 0;
    *zoom: 1;
}

    #marketing-actions:after {
        content: "";
        display: table;
        clear: both;
    }

    #marketing-actions p {
        font-size: 11px;
    }

    #marketing-actions .content {
        background: black;
    }

#excelAddIn-view .flex-view {
    background: black;
}

#excelAddIn-view .component-image {
    width: 30%;
    height: 100%;
    min-width: 200px;
    margin: 80px 120px;
}

#excelAddIn-view .component-text {
    margin: 80px 100px;
}

    #excelAddIn-view .component-text p {
        font-weight: bold;
    }

#excelAddIn-view h2 {
    font-size: 14px;
}

#excelAddIn-view #marketing-hero {
    padding: 85px;
}

    #excelAddIn-view #marketing-hero .panel .content:before {
        border-left: 10px solid var(--primary-bg-color);
    }

    #excelAddIn-view #marketing-hero .panel .content {
        background: transparent;
    }

        #excelAddIn-view #marketing-hero .panel .content P {
            padding-right: 50px;
        }

    #excelAddIn-view #marketing-hero .panel img {
        width: 200px;
        height: 200px;
        margin-left: 80px;
    }

#africaUnlicensed-view .flex-view {
    background: black;
}

#africaUnlicensed-view h2 {
    font-size: 14px;
}

#africaUnlicensed-view .component-image {
    width: 30%;
    height: 100%;
    min-width: 200px;
    margin: 80px 120px;
}

#africaUnlicensed-view .component-text {
    margin: 80px 100px;
}

    #africaUnlicensed-view .component-text p {
        font-weight: bold;
    }

#africaUnlicensed-view #marketing-hero {
    padding-bottom: 55px;
    padding-top: 10px;
}

    #africaUnlicensed-view #marketing-hero .panel .content:before {
        border-left: 10px solid var(--primary-bg-color);
    }

    #africaUnlicensed-view #marketing-hero .panel .content {
        background: transparent;
    }

        #africaUnlicensed-view #marketing-hero .panel .content P {
            padding-right: 50px;
            font-weight: normal;
        }

    #africaUnlicensed-view #marketing-hero .panel img {
        width: 200px;
        height: 200px;
        margin-left: 140px;
        background-image: none;
    }

    #africaUnlicensed-view #marketing-hero .header h2 {
        text-transform: none;
        font-size: 16px;
        margin-left: 10px;
        margin-right: 10px;
    }

    #africaUnlicensed-view #marketing-hero .tagline {
        height: 60px;
    }

#insightsUnlicensed-view .type-info {
    background: #010101;
}

#insightsUnlicensed-view .panel .content:before {
    border-left: 10px solid var(--primary-bg-color);
}

#tab_key-political-developments .w-contentlist > .content {
    height: 700px;
}

#tab_key-political-developments .viewtype-bycountry {
    height: 702px;
    overflow-x: hidden;
}

#panel_insights_africanmarkets .panelset .panel {
    height: 574px;
}

    #panel_insights_africanmarkets .panelset .panel .w-contentlist .content {
        height: 534px;
    }

#panel_insights_africanmarkets .scroll-view {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

#panel_insights_currencies .panelset .panel {
    height: 728px;
}

    #panel_insights_currencies .panelset .panel .w-contentlist .content {
        height: 689px;
    }

#header_nav_countries .list_options, #header_nav_months .list_options {
    max-height: 350px;
}

.hero.panelset {
    background: #181818;
    padding-top: 55px;
}

    .hero.panelset .panel img {
        background-image: url("../images/marketing_sprites.png?v=1");
        background-repeat: no-repeat;
        height: 310px;
    }

    .hero.panelset .panel .content {
        padding-left: 20px;
        position: relative;
        font-weight: bold;
    }

        .hero.panelset .panel .content * {
            white-space: normal;
        }

        .hero.panelset .panel .content:before {
            content: "";
            position: absolute;
            top: 17px;
            left: 0;
            width: 0;
            height: 0;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
            border-left: 10px solid #be1622;
        }

#wow_marketing-hero .panel img {
    background-position: center -1040px;
}

.marketing-features {
    background: var(--secondary-bg-color);
    padding: 0 10px;
}

    .marketing-features ul {
        list-style: none;
        margin: 0;
        padding: 0;
        *zoom: 1;
    }

        .marketing-features ul:after {
            content: "";
            display: table;
            clear: both;
        }

    .marketing-features li {
        padding: 20px 10px;
        border-left: 1px solid var(--tertiary-bg-color);
    }

        .marketing-features li:nth-child(1) {
            border-left: none;
        }

            .marketing-features li:nth-child(1) img {
                background-position: 0 -960px;
            }

        .marketing-features li:nth-child(2) img {
            background-position: -70px -960px;
        }

        .marketing-features li:nth-child(3) img {
            background-position: -140px -960px;
        }

    .marketing-features p {
        float: left;
        font-size: 14px;
        width: 77%;
        padding-left: 10px;
        margin: 0;
    }

    .marketing-features img {
        background-image: url("../images/marketing_sprites.png?v=1");
        background-repeat: no-repeat;
        width: 70px;
        height: 70px;
    }

.marketing-actions {
    background: #2e2e2e;
    padding: 35px 0;
    *zoom: 1;
}

    .marketing-actions:after {
        content: "";
        display: table;
        clear: both;
    }

#director-view .header.centered {
    background: var(--primary-bg-color);
    border-top: 1px solid var(--primary-bg-color);
    border-bottom: 1px solid var(--primary-bg-color);
}

#director-view .w-table .header {
    background: #1c1c1c;
}

    #director-view .w-table .header h2 {
        font-size: 14px;
        letter-spacing: 0.1em;
    }

#director-view .w-table table {
    padding: 0;
}

#director-view table tr > * {
    padding: 5px 10px;
}

#director-view table th,
#director-view table td {
    text-overflow: ellipsis;
    overflow: hidden;
}

#director-view .col-activedir-company {
    width: 14%;
}

#director-view .col-activedir-type {
    width: 12%;
}

#director-view .col-activedir-position {
    width: 11%;
}

#director-view .col-activedir-appointed {
    width: 10%;
}

#director-view .col-activedir-resigned {
    width: 10%;
}

#director-view .col-activedir-shareholding {
    width: 13%;
}

#director-view .col-activedir-year1 {
    width: 15%;
}

#director-view .col-activedir-year2 {
    width: 15%;
}

#director-view .col-inactivedir-company {
    width: 14%;
}

#director-view .col-inactivedir-type {
    width: 12%;
}

#director-view .col-inactivedir-position {
    width: 11%;
}

#director-view .col-inactivedir-appointed {
    width: 10%;
}

#director-view .col-inactivedir-resigned {
    width: 10%;
}

#director-view .col-inactivedir-shareholding {
    width: 13%;
}

#director-view .col-inactivedir-year1 {
    width: 15%;
}

#director-view .col-inactivedir-year2 {
    width: 15%;
}

#header_dd_country_criteria h3 {
    margin: 5px 50px;
}

/*@ sourceMappingURL=style.css.map */