html, body {
    overflow-x: auto;
    overflow-y: hidden;
    margin: 0px !important;
    padding: 0px !important;
    height: 100%;
    background-color: #e8e8e8;
    font-family: Helvetica, Arial, 'DejaVu Sans', 'Liberation Sans', Freesans, sans-serif;
}


.HoverTreeNode {
    cursor: pointer
}

.SelectedTreeNode {
    background: #d0d0d0;
    background: -webkit-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
    background: linear-gradient(to bottom, #beebff 0%, #a8e4ff 100%);
}

.Login {
    background-color: #3f4454;
}

.UserLoginHeader {
    background-color: #485164
}

#wrapperForm {
    overflow-y: hidden;
    margin: 0px;
    padding: 0px;
    width: 99%;
    width: 99.99%;
    height: 100%;
}

#wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: hidden;
    min-width: 1200px;
}

#content {
    position: absolute;
    top: 41px;
    right: 1px;
    bottom: 19px;
    left: 1px;
    overflow: hidden;
    margin: 5px 0 5px 5px;
}

    #content.noSidebar {
        margin: 5px 0 5px 0px;
    }
/* Center Content Area */
#userContent-Center {
    position: absolute;
    right: 0;
    bottom: 1px;
    left: 0;
    margin-top: 4px;
    margin-right: 5px;
    margin-left: 5px;
}

    #userContent-Center.noTop {
        margin-top: 0;
    }


#userContent-Top {
    position: absolute;
    top: 0;
    right: 0px;
    bottom: 0;
    margin-right: 5px;
    margin-left: 5px;
    /* margin-top: 5px; */
}

    #userContent-Top > .row > .col-md-3 > h6 {
        display: block;
        color: #666666;
    }

.footer-help {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    z-index: 5000;
}

.footer-help-blue {
    width: 26px;
    height: 20px;
    text-align: left;
    margin-left: 5px;
    float: left;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: -moz- linear-gradient( top, rgba(179,196,241,1) 0%, rgba(98,131,223,1) 4%, rgba(72,97,164,1) 100%);
    background: -ms- linear-gradient( top, rgba(179,196,241,1) 0%, rgba(98,131,223,1) 4%, rgba(72,97,164,1) 100%);
    background: -o- linear-gradient( top, rgba(179,196,241,1) 0%, rgba(98,131,223,1) 4%, rgba(72,97,164,1) 100%);
    background: -webkit- linear-gradient( top, rgba(179,196,241,1) 0%, rgba(98,131,223,1) 4%, rgba(72,97,164,1) 100%);
    background: linear-gradient( to bottom, rgba(179,196,241,1) 0%, rgba(98,131,223,1) 4%, rgba(72,97,164,1) 100%);
    color: #dadfe8;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6283df', endColorstr='#4861a4', GradientType=0 );
}

.footer-help-icon {
    text-align: left;
    margin-left: 3px;
    margin-top: 2px;
    float: left;
    width: 20px;
    height: 16px;
    cursor: pointer;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

#footer {
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: auto;
    margin-left: auto;
    width: 100%;
    background: -moz-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(221,221,221,1) 100%);
    background: -ms-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(221,221,221,1) 100%);
    background: -o-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(221,221,221,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(201,201,201,1)), color-stop(100%, rgba(221,221,221,1)));
    background: -webkit-linear-gradient(top, rgba(201,201,201,1) 0%, rgba(221,221,221,1) 100%);
    background: linear-gradient(to bottom, rgba(201,201,201,1) 0%, rgba(221,221,221,1) 100%);
    background: rgba(201,201,201,1);
    text-align: center;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#c9c9c9', endColorstr='#dddddd', GradientType=0 );
    font-family: verdana;
}

.wihe100 {
    width: 100%;
    height: 100%;
}

    .wihe100.chart-size {
        position: absolute;
        top: 45px;
        bottom: 0;
        padding: 10px 10px 10px 10px;
        width: 100%;
    }

#userSelectionColapsableContent {
    display: none;
    position: absolute;
    font-size: 11px;
    left: 0;
    right: 0;
    margin: 10px 0px 0px 30px;
}

.userSelectionLable {
    width: 135px;
}

.userSelectionSelectionElent {
    width: 200px;
}

#ei_bandingArea {
    margin-right: auto;
    margin-left: auto;
    padding: 2em;
    width: 80%;
    height: 100%;
}

#ei_loader {
    width: 100%;
    position: absolute;
    z-index: 1000;
}

.searchDiv {
    padding: .5em;
    padding-right: 0em;
    padding-top: 0.5em;
    padding-bottom: 0em;
}

.searchDivTrend {
    padding: .5em;
    padding-right: 0em;
    padding-bottom: 0em;
}

.absoluteFill {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
}

.tree_no_checkbox > i.jstree-checkbox {
    display: none;
}

.tree_virtual {
    color: red;
}

.col-offset-300 {
    padding-left: 350px;
}

.promoBlock {
    margin: auto;
    width: 100%;
}

.sideBarLeft {
    float: left;
    padding-left: 0px;
    width: 50px;
    height: 100%;
    border-right: 1px solid #D8D8D8;
}  

    #buttonCollapseUserContentTop.Expanded {
        margin-top: -14px;
        margin-right: -16px;
    }


#buttonCollapseUtilityGrid1, #buttonCollapseUtilityGrid2 {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: -moz-linear-gradient(top, rgba(179,196,241,1) 0%, rgba(98,131,223,1) 4%, rgba(72,97,164,1) 100%);
    background: -ms-linear-gradient(top, rgba(179,196,241,1) 0%, rgba(98,131,223,1) 4%, rgba(72,97,164,1) 100%);
    background: -o-linear-gradient(top, rgba(179,196,241,1) 0%, rgba(98,131,223,1) 4%, rgba(72,97,164,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(179,196,241,1)), color-stop(4%, rgba(98,131,223,1)), color-stop(100%, rgba(72,97,164,1)));
    background: -webkit-linear-gradient(top, rgba(179,196,241,1) 0%, rgba(98,131,223,1) 4%, rgba(72,97,164,1) 100%);
    background: linear-gradient(to bottom, rgba(179,196,241,1) 0%, rgba(98,131,223,1) 4%, rgba(72,97,164,1) 100%);
    color: #dadfe8;
    font-size: 12px;
    line-height: 1.5;
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3c4f1', endColorstr='#4861a4', GradientType=0 );
}

    #buttonCollapseUtilityGrid1.Collapsed, #buttonCollapseUtilityGrid2.Collapsed {
        position: static;
        background: none;
        color: #5A79CE;
    }

    #buttonCollapseUtilityGrid1.Expanded {
    }

.userSelectionTop {
    height: 0;
    border-bottom: 1px solid #D8D8D8;
}

#userSelectionColapsableContent > .row {
    margin-right: 0;
    margin-left: 0;
    padding-bottom: 3px;
}

/* Class to be used on the button in the user content*/
#submitButton {
    padding-right: 40px;
}

.accountRow {
    padding-bottom: 2px;
}

.showHideTransision {
    /*
    Removed Transisions    
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    -webkit-transition: all 0.5s ease;
    transition: all 0.5s ease;*/
}

.fade {
    opacity: 1;
    -moz-transition: opacity .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out;
    -o-transition: opacity .25s ease-in-out;
    transition: opacity .25s ease-in-out;
}

.promoContent {
}

.form-control {
    display: block;
    width: 100%;
    height: 25px;
    border: 1px solid #cececf;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #f4f4f4;
    background-image: none;
    -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    color: #555;
    font-size: 11px;
    line-height: 1.42857143;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.styled-select select {
    padding: 5px;
    width: 110%;
    height: 25px;
    border: 1px solid #cececf;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: transparent;
    background-color: #f4f4f4;
    background-image: none;
    -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    color: #555;
    font-size: 11px;
    line-height: 1.42857143;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.styled-select {
    overflow: hidden;
    width: 100%;
    border: 1px solid #cececf;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #f4f4f4;
    background-image: url(../../../Image/dropD_arrow.gif);
    background-position: right;
    background-repeat: no-repeat;
    color: #555;
}

.styled-select-s select {
    padding: 5px;
    width: 120%;
    height: 25px;
    border: 1px solid #cececf;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: transparent;
    background-color: #f4f4f4;
    background-image: none;
    -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    color: #555;
    font-size: 11px;
    line-height: 1.42857143;
    -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
    -moz-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.styled-select-s {
    overflow: hidden;
    width: 100%;
    border: 1px solid #cececf;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #f4f4f4;
    background-image: url(../../../Image/dropD_arrow.gif);
    background-position: right;
    background-repeat: no-repeat;
    color: #555;
}

.navbar-default {
    -webkit-box-shadow: 0px 3px 0px 0px rgba(72,97,164,1);
    -moz-box-shadow: 0px 3px 0px 0px rgba(72,97,164,1);
    box-shadow: 0px 1px 0px 0px rgba(0,0,0,.1);
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    border-radius: 0;
}

.navbar.navbar-default.navbar-static-top {
    margin-bottom: 200px;
    background-color: #e9e9e9;
    font-size: small;
}

.navbar-brand {
    height: 40px;
    padding-top: 5px !important;
    padding-right: 2px;
}

.navbar {
    position: relative;
    min-height: 40px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}

.nav .navbar-brand > img {
    margin-top: -.7em;
}

.nav {
    background: #e9e9e9;
    height: 37px;
    font-size: 12px;
}

.navbar-default .navbar-nav > li > a {
    color: #51576F;
}

.nav .navbar-nav {
    background: #fff;
}

.navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px;
    line-height: 20px;
}

.nav > li > a {
    position: relative;
    display: block;
    padding: 10px 15px;
}

#BootStrapMenu_mnuAccount, #BootStrapMenu_mnuDashboard, #BootStrapMenu_mnuTrend, #BootStrapMenu_mnuReport, #BootStrapMenu_mnuTariff, #BootStrapMenu_mnuPQS, #BootStrapMenu_mnuCost, #BootStrapMenu_mnuUtilityAccount, #BootStrapMenu_mnuLoadCurtailmentDash, #BootStrapMenu_mnuAlarm, #BootStrapMenu_mnuUserAdmin, #BootStrapMenu_mnuLogout, .eiNavItem {
    -webkit-box-shadow: -1px 0px 0px 0px rgba(231,231,231,1);
    -moz-box-shadow: -1px 0px 0px 0px rgba(231,231,231,1);
    box-shadow: -2px 0px 0px 0px rgba(231,231,231,1);
    box-shadow: -1px 0px 0px 0px rgba(206,206,206,1);
}

.navbar-default .navbar-nav > li > a:hover {
    background: rgba(224,224,224,1);
    background: -moz-linear-gradient(top, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 52%, rgba(217,217,217,1) 98%, rgba(240,240,240,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(224,224,224,1)), color-stop(52%, rgba(255,255,255,1)), color-stop(98%, rgba(217,217,217,1)), color-stop(100%, rgba(240,240,240,1)));
    background: -webkit-linear-gradient(top, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 52%, rgba(217,217,217,1) 98%, rgba(240,240,240,1) 100%);
    background: -o-linear-gradient(top, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 52%, rgba(217,217,217,1) 98%, rgba(240,240,240,1) 100%);
    background: -ms-linear-gradient(top, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 52%, rgba(217,217,217,1) 98%, rgba(240,240,240,1) 100%);
    background: linear-gradient(to bottom, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 52%, rgba(217,217,217,1) 98%, rgba(240,240,240,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#f0f0f0', GradientType=0 );
    -webkit-box-shadow: 0px 3px 0px 0px rgba(72,97,164,1);
    -moz-box-shadow: 0px 3px 0px 0px rgba(72,97,164,1);
    box-shadow: 0px 3px 0px 0px rgba(72,97,164,1);
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    background: rgba(224,224,224,1);
    background: -moz-linear-gradient(top, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 52%, rgba(217,217,217,1) 98%, rgba(240,240,240,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(224,224,224,1)), color-stop(52%, rgba(255,255,255,1)), color-stop(98%, rgba(217,217,217,1)), color-stop(100%, rgba(240,240,240,1)));
    background: -webkit-linear-gradient(top, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 52%, rgba(217,217,217,1) 98%, rgba(240,240,240,1) 100%);
    background: -o-linear-gradient(top, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 52%, rgba(217,217,217,1) 98%, rgba(240,240,240,1) 100%);
    background: -ms-linear-gradient(top, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 52%, rgba(217,217,217,1) 98%, rgba(240,240,240,1) 100%);
    background: linear-gradient(to bottom, rgba(224,224,224,1) 0%, rgba(255,255,255,1) 52%, rgba(217,217,217,1) 98%, rgba(240,240,240,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e0e0e0', endColorstr='#f0f0f0', GradientType=0 );
    -webkit-box-shadow: 0px 3px 0px 0px rgba(72,97,164,1);
    -moz-box-shadow: 0px 3px 0px 0px rgba(72,97,164,1);
    box-shadow: 0px 3px 0px 0px rgba(72,97,164,1);
}

.nav-collapse, .nav-collapse.collapse {
    overflow: visible;
}

.navbar .btn-navbar {
    display: none;
}

.userSelectionExpanded {
    position: relative;
    padding: 1em;
    border: 1px solid rgba(66,71,88,0.13);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    /* margin: 1em 1em 1em 1em; */
}

.userSelectionCollapsed {
    position: relative;
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 1px;
    height: 20px !important;
    border: 1px solid rgba(66,71,88,0.13);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    box-shadow: 1px 1px 1px 0px #EFEFEF, 0px 1px 1px 0px rgba(0,0,0,0.3);
}

.userSelectionBtnCollapsed {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    width: 100%;
}

.userSelectionBtnExpanded {
    margin-right: 0;
    margin-left: 0;
    padding-right: 0;
    padding-left: 0;
    width: 100%;
}

.btn-contain-user {
    position: absolute;
    right: 50%;
    bottom: -.1em;
}

.btn.btn-transparent.userBtn {
    width: 3em;
    height: 2em;
    border: 1px solid #d2d4dc;
    -moz-border-radius: 6px 6px 0 0;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0;
    background-color: #dadada;
    color: #4B64A9;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    transition: all 0.5s;
}

    .btn.btn-transparent.userBtn:hover {
        border: 1px solid rgba(89, 119, 202, 1);
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        background: rgba(89, 119, 202, 1);
        -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
        -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
        box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
        color: #dadada;
        color: #dadfe8;
    }

#userContent-Left {
}

.sideBarExpanded {
    bottom: 0;
    margin: 0;
    height: 100%;
    border: 1px solid rgba(66,71,88,0.13);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
}

.sideBarCollapsed {
    -moz- box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
    -webkit- box-shadow: 0px 3px 4px 0px rgba(0,0,0,0.3);
    position: absolute;
    top: 0px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    padding-top: 0px;
    width: 20px !important;
    height: 100%;
    border: 1px solid rgba(66,71,88,0.13);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: inset 1px 1px 1px 0px #EFEFEF, 0px 1px 1px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: inset 1px 1px 1px 0px #EFEFEF, 0px 1px 1px 0px rgba(0,0,0,0.3);
    box-shadow: inset 1px 1px 1px 0px #EFEFEF, 0px 1px 1px 0px rgba(0,0,0,0.3);
}

#treeCollapsed {
    width: 35px;
}

html input[type=button]:hover{
    background: rgba(255,255,255,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(112,150,255,1) 4%, rgba(72,117,163,1) 100%);
    background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(112,150,255,1) 4%, rgba(72,117,163,1) 100%);
    background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(112,150,255,1) 4%, rgba(72,117,163,1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(4%, rgba(112,150,255,1)), color-stop(100%, rgba(72,117,163,1)));
    background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(112,150,255,1) 4%, rgba(72,117,163,1) 100%) !important;
    background: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(112,150,255,1) 4%, rgba(72,117,163,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#4875a3', GradientType=0 );
}

#treeColapse {
    -moz-transition: all 1s ease;
    -ms-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
    height: 37px;
}

#trendTab {
    padding: 0 0 0 1em;
}

li .active {
}

.nav-tabs > li {
    display: inline;
    float: left;
}

    .nav-tabs > li > a {
        padding: 1em 0 0 1.2em;
        border: 0;
        line-height: 2em;
    }

    .nav-tabs > li.active > a,
    .nav-tabs > li.active > a:hover,
    .nav-tabs > li.active > a:focus {
        margin-left: .5em;
        padding: 1em 0 0 1.5em;
        width: 117px;
        border: 0;
        background-color: rgba(0,0,0,0);
        background-image: url(../../../Image/tab-graphic.png);
        background-position: left bottom;
        background-repeat: no-repeat;
        cursor: pointer;
        /* margin: 0; */
    }

    .nav-tabs > li.active > a {
        outline: 0;
        border: 0;
    }

    .nav-tabs > li > a:hover {
        border-color: rgba(0,0,0,0);
        background-color: rgba(0,0,0,0);
    }

.btn.btn-transparent {
    border: none;
    background-color: transparent;
    color: #eee;
}

.btn-transparent:hover {
    border: none;
    background-color: transparent;
    color: #ffffff;
}

.btn:focus {
    outline: none;
}

.treeHeader {
    -moz- transition: all 1s ease;
    -ms- transition: all 1s ease;
    -o- transition: all 1s ease;
    -webkit- transition: all 1s ease;
    display: block;
    float: left;
    padding: 10px 0 0 10px;
    padding-bottom: 0em;
    padding-top: 5px;
    width: 100%;
    height: auto;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;  
    -moz-opacity: 1;
    -webkit-opacity: 1;
    opacity: 1; 
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    transition: all 1s ease;
}

.treeHeader-text {
    float: left;
    padding-top: 4px;
}

.treeHeader-text-hide {
    display: none;
    -moz-opacity: 0;
    -webkit-opacity: 0;
    opacity: 0;
}

.treeContainer {
    height: 100%;
}

.extra-container {
    width: 100%;
    height: calc(100% - 5.6em);
}

.extra-container-trend {
    width: 100%;
    height: calc(100% - 5.6em);
}

.extra-container-nontab {
    width: 100%;
    height: calc(100% - 2.6em);
}

.extra-container-nontab-trend {
    width: 100%;
    height: calc(100% - 5.1em);
}

.treePlaceholder {
    overflow: auto;
    font-size: 11.5px;
    width: 100%;
    height: 100%;
}

#Favourites_and_trend_tabd {
    height: 100%;
}

#trendTabContnet {
    height: 100%;
}

#treeContent {
    height: 100%;
}

#trendChannels {
    height: 100%;
}

#treeCollapsableContent {
    height: calc(100% - 70px);
}

.tree-footer {
    width: 100%;
    height: 33px;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px; 
}

.icontip, .icontip2, .icontip3, .icontip4, .icontip5, .icontip6 {
    position: absolute;
    padding: 1px 4px 1px 4px;
    height: 25px;
    border: 1px solid #c5c5c5;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #e3e3e3;
    background-color: #eee;
    -moz-box-shadow: 0 2px 1px rgba(0,0,0,.5);
    -webkit-box-shadow: 0 2px 1px rgba(0,0,0,.5);
    box-shadow: 0 2px 1px rgba(0,0,0,.5);
    color: #4C66AC;
}

.icontip {
    top: -25px;
    left: 25px;
}

.icontip2 {
    top: -25px;
    left: 70px;
}

.icontip3 {
    top: -25px;
    left: 115px;
}

.icontip4 {
    top: -25px;
    left: 160px;
}

.icontip5 {
    position: absolute;
    top: -25px;
    left: 195px;
}

.icontip6 {
    top: -25px;
    left: 45px;
}

    .icontip:before, .icontip2:before, .icontip3:before, .icontip4:before, .icontip5:before, .icontip6:before {
        position: absolute;
        top: 24px;
        left: 5px;
        border: 5px solid #c5c5c5;
        border-color: #c5c5c5 transparent transparent #c5c5c5;
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        border-radius: 1px;
        content: '';
    }

    .icontip:after, .icontip2:after, .icontip3:after, .icontip4:after, .icontip5:after, .icontip6:after {
        position: absolute;
        top: 23px;
        left: 6px;
        border: 4px solid #c5c5c5;
        border-color: #e3e3e3 transparent transparent #e3e3e3;
        -moz-border-radius: 1px;
        -webkit-border-radius: 1px;
        border-radius: 1px;
        content: '';
    }

.icon-nav {
    margin-right: auto;
    margin-left: auto;
    width: 95%;
    height: 100%;
}

.icon-nav-wrapper {
    position: absolute;
    width: 100%;
}

.btn-move {
    margin: .2em 0 .2em .8em;
}

.treeFooterButton {
    float: left;
    margin-top: 4px;
    margin-left: 5px;
    width: 31px;
    height: 26px;
    cursor: pointer;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

#subscribeBtn {
    float: left;
    width: 31px;
    height: 26px;
    background-image: url(../../../Image/subscribe-btn.png);
    cursor: pointer;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

    #subscribeBtn:hover {
        background-image: url(../../../Image/subscribeH-btn.png);
        cursor: pointer;
    }

#unsubscribeBtn {
    float: left;
    width: 31px;
    height: 26px;
    background-image: url(../../../Image/unsub-btn.png);
    cursor: pointer;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

    #unsubscribeBtn:hover {
        background-image: url(../../../Image/unsubH-btn.png);
        cursor: pointer;
    }

#openBtn {
    float: left;
    width: 31px;
    height: 26px;
    background-image: url(../../../Image/open-btn.png);
    cursor: pointer;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

    #openBtn:hover {
        background-image: url(../../../Image/openH-btn.png);
        cursor: pointer;
    }

#saveBtn {
    float: left;
    width: 31px;
    height: 26px;
    background-image: url(../../../Image/save-btn.png);
    cursor: pointer;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

    #saveBtn:hover {
        background-image: url(../../../Image/saveH-btn.png);
        cursor: pointer;
    }

#helpBtn {
    float: left;
    width: 31px;
    height: 26px;
    background-image: url(../../../Image/help-btn.png);
    cursor: pointer;
    -moz-transition: all .5s ease;
    -o-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
}

    #helpBtn:hover {
        background-image: url(../../../Image/helpH-btn.png);
        cursor: pointer;
    }

.pull-right {
    /* margin-top: -5px; */
    /* margin-bottom: 2px; */
    margin-left: 8px
}

.userCharts-contain {
    position: absolute;
    top: 0;
    right: 0px;
    bottom: 0px;
    left: 0;
    overflow: auto;
    min-height: 40%;
    border: 1px solid rgba(66,71,88,0.13);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background-color: #e8e8e8;
    -moz-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    -webkit-box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
    box-shadow: 0px 1px 1px 0px rgba(0,0,0,0.3);
}

.userCharts-heading {
    padding: 5px;
    width: 100%;
    border-bottom: 1px solid rgba(66,71,88,0.13);
    -moz-border-radius: 5px 4px 0 0;
    -webkit-border-radius: 4px 4px 0 0;
    border-radius: 4px 4px 0 0;
    background-color: #e3e3e3;
}

    .userCharts-heading h3 {
        float: left;
        margin: 0;
        padding: 0;
        width: 10%;
        color: #666666;
        font-size: 1.5em;
    }

        .userCharts-heading h3:after {
            float: none;
        }

.btns-contain {
    margin: 0 0 0 7%;
    width: 100%;
}

.btn-contain {
    float: left;
    margin-left: 1em;
    min-width: 15%;
    border: 1px solid rgba(66,71,88,0.13);
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    background-color: #dadada;
    color: #dadada;
}

.btn-group .btn-group + .btn-group {
    margin-left: 1em !important;
}

.btn-contain .btn.btn-transparent {
    width: 100%;
    color: #7a8093;
    -moz-transition: color 0.5s;
    -o-transition: color 0.5s;
    -webkit-transition: color 0.5s;
    transition: color 0.5s;
}

    .btn-contain .btn.btn-transparent:hover {
        color: #2f2f2d;
    }

    .btn-contain .btn.btn-transparent:active {
        color: #000;
    }

.btn .caret {
    margin-left: 10%;
}

.btn-contain .btn-group.open .dropdown-toggle {
    width: 100%;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
}

.btn-contain .btn-transparent:focus,
.btn-contain .btn-transparent.focus,
.open > .dropdown-toggle.btn-transparent {
    width: 100%;
    border-color: #adadad;
    background-color: #e6e6e6;
    -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    -moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    color: #333;
}

#chart_area {
    height: auto;
}

@media (min-width: 2px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

@media (min-width: 1200px) {
    .container {
        width: 1170px;
    }
}

.container-fluid {
    margin-right: auto;
    margin-left: auto;
    padding-right: 15px;
    padding-left: 15px;
    background-color: #e7e7e7;
}

.rowI {
    display: block;
    float: left;
    margin-right: -15px;
    margin-left: -15px;
    width: 100%;
    height: 35px;
}

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

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
    position: relative;
    padding-right: 15px;
    padding-left: 15px;
    min-height: 1px;
}

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
    float: left;
}

.col-xs-12 {
    width: 100%;
}

.col-xs-11 {
    width: 91.66666667%;
}

.col-xs-10 {
    width: 83.33333333%;
}

.col-xs-9 {
    width: 75%;
}

.col-xs-8 {
    width: 66.66666667%;
}

.col-xs-7 {
    width: 58.33333333%;
}

.col-xs-6 {
    width: 50%;
}

.col-xs-5 {
    width: 41.66666667%;
}

.col-xs-4 {
    width: 33.33333333%;
}

.col-xs-3 {
    width: 25%;
}

.col-xs-2 {
    width: 16.66666667%;
}

.col-xs-1 {
    width: 8.33333333%;
}

.col-xs-pull-12 {
    right: 100%;
}

.col-xs-pull-11 {
    right: 91.66666667%;
}

.col-xs-pull-10 {
    right: 83.33333333%;
}

.col-xs-pull-9 {
    right: 75%;
}

.col-xs-pull-8 {
    right: 66.66666667%;
}

.col-xs-pull-7 {
    right: 58.33333333%;
}

.col-xs-pull-6 {
    right: 50%;
}

.col-xs-pull-5 {
    right: 41.66666667%;
}

.col-xs-pull-4 {
    right: 33.33333333%;
}

.col-xs-pull-3 {
    right: 25%;
}

.col-xs-pull-2 {
    right: 16.66666667%;
}

.col-xs-pull-1 {
    right: 8.33333333%;
}

.col-xs-pull-0 {
    right: auto;
}

.col-xs-push-12 {
    left: 100%;
}

.col-xs-push-11 {
    left: 91.66666667%;
}

.col-xs-push-10 {
    left: 83.33333333%;
}

.col-xs-push-9 {
    left: 75%;
}

.col-xs-push-8 {
    left: 66.66666667%;
}

.col-xs-push-7 {
    left: 58.33333333%;
}

.col-xs-push-6 {
    left: 50%;
}

.col-xs-push-5 {
    left: 41.66666667%;
}

.col-xs-push-4 {
    left: 33.33333333%;
}

.col-xs-push-3 {
    left: 25%;
}

.col-xs-push-2 {
    left: 16.66666667%;
}

.col-xs-push-1 {
    left: 8.33333333%;
}

.col-xs-push-0 {
    left: auto;
}

.col-xs-offset-12 {
    margin-left: 100%;
}

.col-xs-offset-11 {
    margin-left: 91.66666667%;
}

.col-xs-offset-10 {
    margin-left: 83.33333333%;
}

.col-xs-offset-9 {
    margin-left: 75%;
}

.col-xs-offset-8 {
    margin-left: 66.66666667%;
}

.col-xs-offset-7 {
    margin-left: 58.33333333%;
}

.col-xs-offset-6 {
    margin-left: 50%;
}

.col-xs-offset-5 {
    margin-left: 41.66666667%;
}

.col-xs-offset-4 {
    margin-left: 33.33333333%;
}

.col-xs-offset-3 {
    margin-left: 25%;
}

.col-xs-offset-2 {
    margin-left: 16.66666667%;
}

.col-xs-offset-1 {
    margin-left: 8.33333333%;
}

.col-xs-offset-0 {
    margin-left: 0;
}

@media (min-width: 768px) {
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
        float: left;
    }

    .col-sm-12 {
        width: 100%;
    }

    .col-sm-11 {
        width: 91.66666667%;
    }

    .col-sm-10 {
        width: 83.33333333%;
    }

    .col-sm-9 {
        width: 75%;
    }

    .col-sm-8 {
        width: 66.66666667%;
    }

    .col-sm-7 {
        width: 58.33333333%;
    }

    .col-sm-6 {
        width: 50%;
    }

    .col-sm-5 {
        width: 41.66666667%;
    }

    .col-sm-4 {
        width: 33.33333333%;
    }

    .col-sm-3 {
        width: 25%;
    }

    .col-sm-2 {
        width: 16.66666667%;
    }

    .col-sm-1 {
        width: 8.33333333%;
    }

    .col-sm-pull-12 {
        right: 100%;
    }

    .col-sm-pull-11 {
        right: 91.66666667%;
    }

    .col-sm-pull-10 {
        right: 83.33333333%;
    }

    .col-sm-pull-9 {
        right: 75%;
    }

    .col-sm-pull-8 {
        right: 66.66666667%;
    }

    .col-sm-pull-7 {
        right: 58.33333333%;
    }

    .col-sm-pull-6 {
        right: 50%;
    }

    .col-sm-pull-5 {
        right: 41.66666667%;
    }

    .col-sm-pull-4 {
        right: 33.33333333%;
    }

    .col-sm-pull-3 {
        right: 25%;
    }

    .col-sm-pull-2 {
        right: 16.66666667%;
    }

    .col-sm-pull-1 {
        right: 8.33333333%;
    }

    .col-sm-pull-0 {
        right: auto;
    }

    .col-sm-push-12 {
        left: 100%;
    }

    .col-sm-push-11 {
        left: 91.66666667%;
    }

    .col-sm-push-10 {
        left: 83.33333333%;
    }

    .col-sm-push-9 {
        left: 75%;
    }

    .col-sm-push-8 {
        left: 66.66666667%;
    }

    .col-sm-push-7 {
        left: 58.33333333%;
    }

    .col-sm-push-6 {
        left: 50%;
    }

    .col-sm-push-5 {
        left: 41.66666667%;
    }

    .col-sm-push-4 {
        left: 33.33333333%;
    }

    .col-sm-push-3 {
        left: 25%;
    }

    .col-sm-push-2 {
        left: 16.66666667%;
    }

    .col-sm-push-1 {
        left: 8.33333333%;
    }

    .col-sm-push-0 {
        left: auto;
    }

    .col-sm-offset-12 {
        margin-left: 100%;
    }

    .col-sm-offset-11 {
        margin-left: 91.66666667%;
    }

    .col-sm-offset-10 {
        margin-left: 83.33333333%;
    }

    .col-sm-offset-9 {
        margin-left: 75%;
    }

    .col-sm-offset-8 {
        margin-left: 66.66666667%;
    }

    .col-sm-offset-7 {
        margin-left: 58.33333333%;
    }

    .col-sm-offset-6 {
        margin-left: 50%;
    }

    .col-sm-offset-5 {
        margin-left: 41.66666667%;
    }

    .col-sm-offset-4 {
        margin-left: 33.33333333%;
    }

    .col-sm-offset-3 {
        margin-left: 25%;
    }

    .col-sm-offset-2 {
        margin-left: 16.66666667%;
    }

    .col-sm-offset-1 {
        margin-left: 8.33333333%;
    }

    .col-sm-offset-0 {
        margin-left: 0;
    }
}

@media (min-width: 992px) {
    .col-md-3 {
        width: 13%;
    }

    .col-md-3-select {
        float: left;
        width: 20%;
    }

    .col-md-3-select-s {
        float: left;
        width: 10%;
    }
}

#ei_loaderGIF {
    width: 100%;
    position: absolute;
    z-index: 1000;
}

#loaderGIF {
    position: relative;
    z-index: 50000;
    width: 100px;
    height: 100px;
}

#loader {
    position: relative;
    z-index: 50000;
    margin-top: 3em;
    margin-left: 30em;
    width: 80px;
    height: 80px;
    border: 3px solid transparent;
    border-top-color: #829FEF;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -webkit-animation: spin 2s linear infinite;
    -moz-animation: spin 2s linear infinite;
    -o-animation: spin 2s linear infinite;
    -ms-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}

    #loader:before {
        position: absolute;
        top: 5px;
        right: 5px;
        bottom: 5px;
        left: 5px;
        border: 3px solid transparent;
        border-top-color: #5D7CD3;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        content: "";
        -moz-animation: spin 3s linear infinite;
        -o-animation: spin 3s linear infinite;
        -ms-animation: spin 3s linear infinite;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
        /* #loader, #loader:before, #loader:after */
        /* copy and paste the animation inside all 3 elements */
    }

    #loader:after {
        position: absolute;
        top: 15px;
        right: 15px;
        bottom: 15px;
        left: 15px;
        border: 3px solid transparent;
        border-top-color: #3e62bf;
        -webkit-animation: spin 1.5s linear infinite;
        -moz-border-radius: 50%;
        -webkit-border-radius: 50%;
        border-radius: 50%;
        content: "";
        -moz-animation: spin 1.5s linear infinite;
        -o-animation: spin 1.5s linear infinite;
        -ms-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
        /* #loader, #loader:before, #loader:after */
        /* copy and paste the animation inside all 3 elements */
    }

/* include this only once */
@-ms-keyframes spin {
    0% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        /* Firefox 16+, IE 10+, Opera */
        /* IE 9 */
    }

    100% {
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        /* Firefox 16+, IE 10+, Opera */
        /* IE 9 */
    }
}

/* include this only once */
@-webkit-keyframes spin {
    0% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        /* Firefox 16+, IE 10+, Opera */
        /* IE 9 */
    }

    100% {
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        /* Firefox 16+, IE 10+, Opera */
        /* IE 9 */
    }
}

@keyframes spin {
    0% {
        -ms-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        /* Firefox 16+, IE 10+, Opera */
        /* IE 9 */
    }

    100% {
        -ms-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
        /* Chrome, Opera 15+, Safari 3.1+ */
        /* Firefox 16+, IE 10+, Opera */
        /* IE 9 */
    }
}

    .Grid {
        border: 1px solid #919191;
        background-color: #FFFFFF;
        cursor: default;
    }

    .GridClass {
        CURSOR: default;
    }

    .HeadingCell {
        background-color: #E1E7F7;
        padding: 3px;
        padding-right: 1px;
        padding-bottom: 3px;
        background-image: url(../../../Image/Grid/header_bg.gif);
        text-align: center;
    }

    .HeadingCellTrend {
        background-color: #c5cfea;
        border: 1px solid #c5cfea;
        border-right-color: #c5cfea;
        padding: 3px;
    }

    .HeadingCellHover {
        background-color: #E1E7F7;
        border: 1px solid #FFFFFF;
        border-right-color: #E1E7F7;
        border-bottom-color: #E1E7F7;
        padding: 3px;
    }

    .HeadingCellActive {
        padding: 3px;
        padding-right: 0px;
        padding-bottom: 3px;
        border-right: 1px solid #808099;
        background-image: url(../../../Image/Grid/header_activeBg.gif);
        text-align: center;
    }

    .HeadingCellText {
        padding-right: 5px;
        text-align: center;
        font-size: 10px;
        white-space: normal !important;
    }

    .HeadingCellTextTrend {
        font-family: verdana;
        font-size: 9px;
        font-weight: bold;
        text-align: left;
        white-space: normal !important;
    }

    .DataRow {
        background-color: #f0f2f8;
    }

    .DataRow td.FirstDataCell {
        padding-left: 3px;
    }
    /* Alarm */
    .RedRow {
        background-color: #ffd1d1 !important;
        cursor: default;
    }

    .RedRow td.DataCell {
        PADDING-RIGHT: 4px;
        border-bottom: 1px solid #ddecfe;
        font-size: 10px;
    }

    .GreenRow {
        background-color: #eceed0;
        cursor: default;
    }

    .GreenRow td.DataCell {
        PADDING-RIGHT: 4px;
        border-bottom: 1px solid #ddecfe;
        font-size: 10px;
    }

    .AcknowledgedButton {
        cursor: pointer;
        background-repeat: no-repeat;
        background-position: center;
        height: 21px;
        text-align: center;
        line-height: 15px;
        font-size: 11px;
        border-style: solid;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        border-radius: 10px;
        border-color: white;
        background-color: white;
        margin: 1px;
    }

    .AcknowledgedButton:hover {
        border-color: rgb(197, 207, 234);
        background-color: rgb(197, 207, 234);
    }

    .Row {
        background-color: #FFFFFF;
    }

    .gridItem,
    .Row td.DataCell {
        padding: 3px;
        padding-top: 2px;
        padding-bottom: 2px;
        font-size: 10px;
        cursor: default;
    }

    .SortedDataCell {
        background-color: #F5F5F5;
    }


    .Row td.LastDataCell {
        background-color: #EFEFF4;
    }

    .SelectedRowTrend {
    }

    .SelectedRowTrend td.DataCell {
        background-color: #C4D5FF;
        cursor: default;
        padding: 2px;
        padding-left: 3px;
        padding-bottom: 3px;
        padding-top: 3px;
        font-family: verdana;
        font-size: 9px;
        /*border-bottom: 1px solid #4B4B6F; 
  border-top: 1px solid #4B4B6F;*/
        border-right: #D0D0D0 1px solid;
    }

    .SelectedRowClass {
    }

    .gridSelect,
    .SelectedRowClass td.DataCell {
        /*padding: 2px;*/
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 3px;
        border-right: #D0D0D0 1px solid;
        background-color: #C4D5FF;
        /*font-size: 9px;*/
    }

    .SelectedRowClass td.SelectorCell {
        background-color: #C4D5FF;
    }

    .SelectedRowClass td.FirstDataCell {
        padding-right: 3px;
        padding-left: 2px;
        border-right: 0px;
        border-left: 1px solid #4B4B6F;
        background-color: #FFEEC2;
    }

    .SelectedRowClass td.LastDataCell {
        border-right: 1px solid #4B4B6F;
        background-color: #FFEEC2;
    }

    .GridFooter {
        cursor: default;
        padding: 5px;
    }

    .GridFooter a {
        color: Black;
        font-weight: bold;
    }

    .PagerText {
        font-family: verdana;
        font-size: 11px;
    }

    .ScrollBar {
        background-image: url('../../../Image/Grid/scroller_bg.gif');
    }

    .ScrollGrip {
        background-image: url('../../../Image/Grid/scroll_gripBg.gif');
    }

    .ScrollPopup {
        height: 23px;
        border: 1px solid #666666;
        border-right-width: 2px;
        border-bottom-width: 2px;
        background-color: #FFFFFF;
    }

    .gridRow,
    .RowClass {
        BACKGROUND-COLOR: #f0f2f8;
    }

    .DataCell {
        cursor: default;
        padding: 5px;
        border-right: #D0D0D0 1px solid;
        font-family: verdana;
        font-size: 11px;
    }

    .DataCellTrend {
        cursor: default;
        padding: 3px;
        border-right: #D0D0D0 1px solid;
        font-family: verdana;
        font-size: 9px;
    }

    .gridAltRow,
    .AlternatingRowClass {
        BACKGROUND-COLOR: #E1E7F7;
    }

    .AlternatingRowTrend {
        cursor: default;
    }

    .AlternatingRowTrend td.DataCell {
        background-color: #e1e7f7;
        border-right: #D0D0D0 1px solid;
        font-family: verdana;
        font-size: 9px;
        cursor: default;
    }

    #Grid1_header {
        font-family: verdana;
        font-size: 13px;
        padding-right: 3px;
        padding-bottom: 0.5em;
        padding-top: 0.5em;
        height: 6%;
    }

    #uaDetailGrid_header {
        font-family: verdana;
        font-size: 13px;
        padding-right: 3px;
        height: 6%;
    }

    .HeaderClass {
        font-weight: bold;
        font-size: 10px;
        font-family: verdana;
    }

    .HeadingCellClass {
        padding-right: 10px;
        padding-left: 4px;
        height: 20px;
    }

    .HeadingTextClass {
        padding-left: 5px;
        color: rgb(102, 102, 102);
        white-space: normal !important;
        font-weight: bold;
        font-size: 10px;
        font-family: verdana;
    }

    .HeadingRowClass {
        background-color: #C5CFEA;
    }

    .SelectorCell {
        height: 20px;
        border-top: 0px;
        border-right: 0px;
        border-bottom: 0px;
        border-left: 0px;
    }

    .IndentCell {
        height: 20px;
        border-right: 0px;
    }

    .ToolBarSpace {
        padding: 3.5px
    }

    .EditDataCell {
        padding: 0px !important;
        border-width: 0px !important;
        background-color: #E2E2E2;
    }

    .EditDataField {
        padding: 0px;
        padding-left: 1px;
        width: 98% !important;
        height: 13px;
        font-size: 10px;
        font-family: verdana;
    }

    .FooterClass_PagerInfo {
        width: 60px;
        height: 20px;
        font-weight: bold;
        font-size: 10px;
        font-family: verdana;
    }

    .FooterClass_Pager {
        width: 60px;
        height: 15px;
        border: solid 1px #4e69b1;
        background-image: url(../../../Image/gradient_up.png);
        font-weight: bold;
        font-size: 10px;
        font-family: verdana;
    }

    .FooterClass img {
        margin-left: 3px;
    }

    .table-bordered th,
    .table-bordered td {
        border: 1px solid #BEBEBE !important;
        text-align: left;
        font-size: 12px !important;
    }


    .table-ei {
        background-color: rgb(251, 252, 254);
    }

    table > thead > tr > td.active, .table > tbody > tr > td.active, .table > tfoot > tr > td.active, .table > thead > tr > th.active, .table > tbody > tr > th.active, .table > tfoot > tr > th.active, .table > thead > tr.active > td, .table > tbody > tr.active > td, .table > tfoot > tr.active > td, .table > thead > tr.active > th, .table > tbody > tr.active > th, .table > tfoot > tr.active > th {
        background-color: #D4D8E3;
    }

    .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {
        padding: 2px 2px 2px 8px;
        line-height: 1.42857143;
        border-top: 1px solid #ddd;
    }

    /*Alarm modal styles*/
    .AcknowledgeDetails_Bold {
        font-weight: bold;
        text-decoration: underline;
        text-align: left;
        font-size: 12px;
        padding-left: 0px;
    }

    /*Alarm modal styles*/
    .AcknowledgeDetails {
        font-size: 12px;
        text-align: left;
        width: 180px;
        padding-left: 10px;
    }

    /*Alarm modal styles*/
    .AcknowledgeDetailsContent {
        padding-left: 5px;
        padding-right: 5px;
        padding-Top: 5px;
        padding-bottom: 5px;
        background-color: #E8E8E8;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        /*Actual width of the modal*/
        width: 390px;
    }

    /*Alarm modal styles*/
    .AcknowledgeHeader {
        padding-top: 2px;
    }

    /*Center modal on screen*/
    .modal {
        text-align: center;
    }

        /*Center modal on screen*/
        .modal:before {
            display: inline-block;
            vertical-align: middle;
            content: " ";
            height: 100%;
        }

    /*Center modal on screen*/
    .modal-dialog {
        display: inline-block;
        text-align: left;
        vertical-align: middle;
    }

    .RealTimeAdd-content {
        padding: 10px 10px 10px 10px;
        font-size: 11px;
    }

    .RealTimeAdd-header {
        text-align: left;
        height: 20px;
        padding-bottom: 2px;
        font-weight: bold;
    }

    .RealTimeAdd-left {
        text-align: left;
        height: 20px;
        padding-bottom: 2px;
        width: 25%;
    }

    .RealTimeAdd-right {
        text-align: left;
        height: 20px;
        padding-bottom: 2px;
        width: 75%;
    }

    .RealTimeAdd-ButtonAdd {
        float: right;
    }


    /* Comboboxes used in Component art */

    .comboBox {
        font-size: 11px;
        border: 1px solid #A6A7AA;
        background-color: white;
    }

    .noClear::-ms-clear {
        display: none;
    }

    .comboBoxHover {
        border: 1px solid #555555;
        background-color: white;
    }

    .comboDropDown {
        border: 1px solid #868686;
        background-color: white;
        padding: 1px;
        padding-right: 0px;
        cursor: default;
    }

    .comboTextBox {
        font-size: 11px;
        border: 0px;
        padding-left: 2px;
        padding-right: 2px;
    }

    .comboItem {
        font-size: 11px;
        padding: 3px;
        padding-top: 2px;
        padding-bottom: 2px;
    }

    .comboItemHover {
        background-color: #3e62bf;
        font-size: 11px;
        padding: 3px;
        padding-top: 2px;
        padding-bottom: 2px;
        color: #ffffff;
    }

    .comboItemSelected {
        background: #d0d0d0;
        background: -webkit-linear-gradient(top, #beebff 0%, #a8e4ff 100%);
        background: linear-gradient(to bottom, #beebff 0%, #a8e4ff 100%);
        font-size: 11px;
        padding: 3px;
        padding-top: 2px;
        padding-bottom: 2px;
    }


    .TrendTopGroup {
        background-color: #DBD7D0;
        border: solid 0px gray;
        cursor: default;
    }

    .TrendMenuGroup {
        background-color: #F9F8F7;
        border: solid 1px #7E7E81;
        cursor: default;
    }

    .TrendTopMenuItem {
        background-color: #DBD7D0;
        color: black;
        font-size: 12px;
        border: solid 1px #DBD7D0;
        cursor: default;
    }

    .TrendTopMenuItemHover {
        background-color: #C2C5C8;
        color: black;
        font-size: 12px;
        border: solid 1px #A6A8B2;
        cursor: default;
    }

    .TrendMenuItem {
        font-size: 10px;
        cursor: default;
    }

    .TrendMenuItemHover {
        background-color: #C2C5C8;
        font-size: 10px;
        cursor: default;
    }

    .TrendMenuBreak {
        background-image: url(../../../Image/break_bg.gif);
        width: 100%;
        height: 1px;
    }

    .inputBox {
        font-size: 11px;
        border: 1px solid #A6A7AA;
        background-color: white;
        height: 18px;
        vertical-align: middle;
    }

    .divFolders {
        position: absolute;
        top: 0px;
        left: 0px;
        height: 350px;
        width: 245px;
        padding: 5px;
        vertical-align: top;
    }

    .divPresets {
        position: absolute;
        top: 0px;
        left: 245px;
        height: 350px;
        width: 455px;
        padding: 5px;
        vertical-align: top;
    }

    .divFileName {
        position: absolute;
        left: 0px;
        top: 350px;
        height: 50px;
        width: 700px;
        padding: 5px;
        vertical-align: top;
    }

    .tblFileName {
        width: 100%;
        height: 100%;
    }

    .tdHead {
        font-weight: bold;
        font-size: 8pt;
        padding-left: 5px;
    }

    .tdContent {
        padding: 0px 5px 0px 5px;
    }

    .divTree {
        background-color: White;
        width: 100%;
        height: 300px;
        border: solid 1px #888;
        overflow: auto;
    }

    .divGrid {
        background-color: White;
        width: 100%;
        height: 300px;
        border: solid 1px #888;
    }

    .tblsContent {
        width: 100%;
    }

    .popupFilename {
        width: 100%;
    }

    .grdPresets {
        font-size: 10pt;
    }

    .grdPresetsEditCell {
        font-size: 10pt;
    }

    .tvnRoot {
        font-weight: bold;
        color: Red;
        cursor: pointer;
    }

    .TrendAnalysisTimeOrderedInput {
        background-color: #e6e6e6;
        border-color: gray;
        font-size: 11px;
        border: none;
    }

    .LogoLeft {
        width: 250px;
        valign: top;
    }

    .div-centered {
        /*This centers the div in the middle of the screen*/
        position: absolute;
        top: 50%;
        left: 50%;
        -ms-transform: translate(-50%, -50%); /* IE 9 */
        -webkit-transform: translate(-50%, -50%); /* Safari */
        -moz-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        overflow: hidden;
    }

    .login-simple-content-right {
        float: left;
        width: 30%;
    }

    .login-simple-content-left {
        float: left;
        margin: 2em 0 0 2em;
        text-align: right;
        width: 60%;
    }

    .login-simple-logo-main {
        background-image: url('../../../Image/logo-main.jpg');
        width: 467px;
        height: 185px;
    }

    .login-simple-login-contain {
        margin: 2.2em auto auto 3em;
        width: 217px;
        height: 178px;
        float: none;
    } 

    .login-simple-tagline {
        color: #424758;
        margin-left: auto;
        margin-right: auto;
        /*margin-right: 7em;*/
        text-shadow: 0px 1px 1px #fff;
    }

    .login-simple-loginBoxes {
        padding: 3px 0px 3px 3px;
        margin: 5px 1px 7px 0px;
        height: 16px;
    }

    .login-simple-forgotten_link {
        text-decoration: none;
        color: #CCCACA;
        position: absolute;
        margin-top: .5em;
        vertical-align: bottom;
        letter-spacing: normal;
        word-spacing: normal;
        font-size: .9em;
        padding-bottom: 2em;
    }

    .login-simple-forgotten_link a {
        position: relative;
        top: .5em;
        left: 0em;
        color: #CCCACA;
        text-decoration: none;
    }

    .login-simple-forgotten_link a:hover {
        color: #87abff;
    }

    .grdFooter {
        display: none;
    }

    .gridHeader {
        background-image: url(../../../Image/colnameback.png);
        border-bottom: solid 1px #888;
        border-right: solid 1px #888;
        padding: 0px 5px 0px 5px;
    }

    .AdminUserInfo-content {
        margin-top: 25px;
    }

    .AdminUserInfo-left {
        text-align: right;
    }

    .AdminUserInfo-right {
        text-align: left;
        padding-left: 10px;
        padding-bottom: 3px;
    }

    .AdminUserInfo-buttonarea {
        text-align: right;
        padding-left: 10px;
        padding-bottom: 3px;
    }

    .SubscriptionForm-email {
        color: Blue;
    }

    .SubscriptionForm-email:hover {
        color: Blue;
    }

    .SubscriptionForm-email:visited {
        color: Blue;
    }

    .SubscriptionForm-email:active {
        color: Blue;
    }

    .SubscriptionForm {
        padding: 10px 10px 10px 10px;
    }

    .SubscriptionForm-tr1 {
        height: 40%;
        vertical-align: top;
    }

    .SubscriptionForm-tr2 {
        vertical-align: top;
    }

    .SubscriptionForm-tr3 {
        height: 5%;
    }

    .SubscriptionForm-tr4 {
        height: 5%;
    }

    .SubscriptionForm-valignTop {
        vertical-align: top;
    }

    .SubscriptionForm-Table {
        width: 100%;
    }

    .SubscriptionForm-header {
        border-bottom: solid 1px #444444;
        text-align: center;
        font-weight: bold;
    }

    .SubscriptionForm-left {
        padding-top: 3px;
        width: 30%;
    }

    .SubscriptionForm-addPadding {
        padding-top: 3px;
    }

    .SubscriptionForm-slctFormat {
        height: 20px;
        width: 143px;
        font-size: 8pt;
    }

    .SubscriptionForm-smallText {
        color: #999999;
        font-size: 7pt;
    }

    .SubscriptionForm-textbox {
        height: 20px;
        font-size: 8pt;
        width: 100%;
        cursor: text;
    }

    .SubscriptionForm-textbox-time {
        width: 18px;
    }

    .SubscriptionForm-textbox-repeatDelay {
        width: 25px;
        text-align: center;
    }

    .SubscriptionForm-rbSchedule {
        vertical-align: middle;
        margin: 0px 0px 0px 0px !important;
    }

    .SubscriptionForm-rbSpacer {
        width: 15px;
    }

    .SubscriptionForm-tdSelections {
        background-color: #ECE9D8;
        color: Black;
        border: solid 1px #ECE9D8;
        width: 20px;
        height: 15px;
        cursor: pointer;
        text-align: center;
        vertical-align: middle;
    }

    .SubscriptionForm-tdSelections:hover {
        background-color: #ECE9D8;
        color: Black;
        border: solid 1px #444444;
        width: 20px;
        height: 15px;
        cursor: pointer;
        text-align: center;
        vertical-align: middle;
    }

    .SubscriptionForm-tdActiveSelections {
        background-color: #444444;
        color: #ECE9D8;
        border: solid 1px #444444;
        width: 20px;
        height: 15px;
        cursor: pointer;
        text-align: center;
        vertical-align: middle;
    }

    .SubscriptionForm-slctMonthWeek {
        height: 20px;
        width: 47px;
        font-size: 8pt;
    }

    .SubscriptionForm-txtCalDaysEG {
        width: 75px;
        color: #BBBBBB;
        height: 20px;
        font-size: 8pt;
    }

    .SubscriptionForm-txtCalDaysText {
        width: 75px;
        color: Black;
        height: 20px;
        font-size: 8pt;
    }

    .SubscriptionForm-tdMessage {
        text-align: center;
        vertical-align: middle;
    }

    .SubscriptionForm-divMessage {
        border: solid 0px black;
    }

    .SubscriptionForm-lblMessage {
        font-weight: bold;
        vertical-align: top;
    }

    .SubscriptionForm-submitbtn {
        margin-right: 10px;
    }

    .SubscriptionForm-Result {
        text-align: center;
        vertical-align: middle;
    }

    .SubscriptionForm-Body {
        font-size: 8pt;
    }

    hr {
        margin-top: 20px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #D1D2D4;
    }


    .btn-info.active {
        color: #fff;
        background-color: #4E69B1;
        border-color: #4E69B1;
    }

    th#datatable {
        text-align: center;
    }

    tbody#datatable {
        line-height: 0.428571;
    }

    td#datatable {
        text-align: center;
    }

    table#datatable {
        width: 100%;
    }

    /*Has been made for utility bills and details toggle btn*/
    .btntoggle {
        float: right !important;
        border: 1px solid transparent;
        margin-left: 8px;
        border-color: #ccc;
    }

    .userSelectionLabel {
        padding-left: 10px;
        padding-top: 3px;
        width: 120px;
    }

    .userSelectionInput {
        width: 150px;
        padding-top: 3px;
    }

    .userSelectionTopLine {
        padding-top: 5px;
    }

    .userSelectionCustomDateInput {
        width: 150px;
        height: 22px;
    }