/* ============================================= */
.legendImg{
   background:#ffffff url('/images/stack/legend.svg') no-repeat right top;
}
.gridStyle {
   border: 1px solid rgb(212,212,212);
   width:auto;
   height: 500px;
}
.btnSearch{
   margin: 0 -5px 15px 0 !important;
   float: right;

}
.iconSearch{
   border-radius:0;
   -webkit-border-radius:0;
   -moz-border-radius: 0;
}
.myActive
{
   color: #ffffff !important;
   background-color: #3b73b9 !important;
}

/* Traffic Light */
.trafficLight {
   width: 100%;
   height: 20px;
}
.light {
   width: 10px;
   height: 10px;
   float: left;
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   margin-right: 5px;
   margin-top: 6px;
}

.true{
   background-color: #76b900;
}

.false {
   background-color: #ef8000;
}
.noData{
   border-radius: 10px;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border: 1px solid #7f7f7f;
   width:8px;
   height:8px;
   background-color:#E0E0E0;
}

.noDataData{
   background-color:#E0E0E0;
}

.podMatchLight {
   width: 10px;
   height: 10px;
   float: left;
   border-radius: 10px;
   -webkit-border-radius: 6px;
   -moz-border-radius: 6px;
   background-color: #76b900;
   margin-top: 5px;
   margin-right: 5px;
}
.centerDivContent{
   margin: 0;
   padding: 0;
   text-align: center;
}

/* global page header */
.userBtnDiv{
   margin-right:0px;
}
.podText{
   font-size:12px;
   color:white;
   padding-top:10px;
}
.podTextValue{
   font-size:12px;
   color:white;
}
.podMatch{
   margin-left:10px;
   margin-top:10px;
}

/* dashboard screen - bopStack widget */
.bopHealthLabel{
   width:155px;
   text-align:center;
   padding-right:0px;
   padding-left:0px;
}
.bopImage{
   margin-right:30px;
   margin-left:10px;
   margin-top:10px;
}
.bopHealthLabelsDiv{
   margin-right: 50px;
   margin-bottom: 20px;
   width: 150px;
}
.dashboardLabelsSmall{
   font-size: 12px;
}


/* dashboard screen - subsystem widgets */
.healthLabelFirst{
   width:100%;
   text-align:center;
   margin-bottom:5px;
   padding-right:0px;
   padding-left:0px;"
}
.healthLabel{
   width:100%;
   text-align:center;
   padding-right:0px;
   padding-left:0px;
}
.firstRowGauges{
   width:50%;
   margin-bottom:20px;
}
.secondRowGauges{
   width:50%;
}


/* power screen */
.semNav{
   width:15%;
   margin-right:30px;
}
.semGraphArea{
   border:1px solid #ccc;
   width:80%;
}
.semContent{
   padding:10px;
}
.powerLabel{
   width:100%;
   text-align:center;
   margin-bottom:0px;
   padding-right:0px;
   padding-left:0px;
}
.successLabel{
   background-color:#76b900;
}
.errorLabel{
   background-color:#ef8000;
}
.noDataLabel{
   background-color:#E0E0E0;
   color:#000000;
}
.emptyLabel{
   background-color:#ffffff;
}
/* communication screen */
/*
.commNav{
   width:100px;
   margin-right:10px;
   float:left;
}
.commContent{
   width:400px;
   float:left;
}
*/


/* hydraulics screen */
.hydroNav{
   width:15%;
   margin-right:30px;
}
.hydroContent{
   width:80%;
}

/* surface to sea screen */

.diverterTables{
   margin-right:40px;
   margin-bottom:10px;
   border:1px solid #ccc;
}


/* pod-solenoids screen */
.podGlobalInfo{
   margin-right:40px;
   margin-bottom:10px;
}


/* maintenance screen */
.viewFormMargin{
   margin:0px;
}
.maintenanceTables{
   width:200px;
   height:150px;
   margin-right:20px;
   border:1px solid #ccc;
}
.labelMarginRightSmall{
   margin-right:5px;
}
.labelMarginRightBig{
   margin-right:10px;
}
.daysWidth{
   width:30px;
}



/* events screen */
.filterTrayMargin{
   margin-right:15px;
   margin-bottom:30px;
}
.filterTrayFormMargin{
   margin:0px;
}
.filterLabelGray{
   color:gray;
}

.filterLabelWhite{
   color:white;
}

div.Logout
{
   color:#D3D3D3;
   cursor:pointer;
   font-size:0.85em;
   position:absolute;
   right:0.5em;
   top:1.6em;
}

div.Logout:hover
{
   background-color:#3b73b9;
   color:#fff;
}

div.Login
{
   height:92%;
   width:100%;
}

div.Login div.LoginWrapper
{
   margin:1em 5em;
   float:left;
   width:100%;

}

div.Login div.LoginWrapper div.LoginInfo
{
   float:left;
   padding:0 1em;
   background-color:#FFFFFF;
   border-radius:.3em;
   -webkit-border-radius: .3em;
   -moz-border-radius: .3em;
   width:40%;
   min-width:200px;
   max-width:500px;
   height:300px;
   margin:1em;
}

div.Login div.LoginWrapper div.LoginInfo > h3,h4,p
{
   padding:.7em;
   white-space:nowrap;
}

div.Login div.LoginWrapper img
{
   float:left;
   padding:1em;
}

div.Login div.LoginWrapper form
{
   float:left;
   padding:0 1em;
   background-color:#FFFFFF;
   border-radius:.3em;
   -webkit-border-radius: .3em;
   -moz-border-radius: .3em;
   width:40%;
   min-width:200px;
   max-width:500px;
   height:300px;
   margin:1em;
}

div.Login div.LoginWrapper form >h3
{
   padding:.5em;
   white-space:nowrap;
}
div.Login div.LoginWrapper form >label
{
   padding:.5em;
   white-space:nowrap;
}
div.Login div.LoginWrapper form input:not([type="checkbox"])
{
   margin:0 0 2em .5em;
   padding:.5em;
   display:block;
}
div.Login div.LoginWrapper form input[type="checkbox"]
{

}

div.Login div.LoginWrapper form label
{
   display:block;
   margin-bottom:5px;
}

div.Login div.LoginWrapper input.LoginBtn
{
   background:#000;
   border:solid 1px #D3D3D3;
   border-radius:4px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   color:#fff;
   float:right;
   font-size:1em;
   height:2.5em;
   width:6em;
}

div.Login div.LoginWrapper input.LoginBtn:hover
{
   background:#3b73b9;
   color:#fff;
}
div.Login form span.error
{
   display:inline-block;
   font-size:1.2em;
   margin-top:1.2em;
}

div.Login form a.disabled {
   pointer-events: none;
   cursor: default;
   color:#B3B3B3;
}
.setTopMargin{
   margin-top:20px;
}
/* global tree nav */
.ulOne{
   list-style-type:none;
   margin-left:0px;
}
.ulTwo{
   list-style-type:none;
   margin-left:10px;
}
.selectedTreeItem{
   font-weight:bold;
}
.box {
   border:1px solid #bfc2c5;
   border-top:0;
   height:150px;
}
.input {
   background-color: transparent;
   border-style: solid;
   border-width: 0px 0px 0px 0px;
   width: 100px;
}
.trans{
   background-color: transparent;
   border-width: 0px 0px 0px 0px;
}
.data-value { display:block;float:right; width:45%; margin-left:10px;}

.data-input { float:right}
.data-text {float:left;}
#loaderDiv {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1100;
   background-color: white;
   opacity: .6;
}

.ajax-loader {
   position: absolute;
   left: 50%;
   top: 50%;
   margin-left: -32px; /* -1 * image width / 2 */
   margin-top: -32px; /* -1 * image height / 2 */
   display: block;
}
#loading {width: 100%;height: 100%;top: 0px;left: 0px;position: fixed;display: block; z-index: 99}

#loading-image {position: absolute;top: 40%;left: 45%;z-index: 100}

/*smart-table css*/
/* app css stylesheet */

.menu {
   list-style: none;
   border-bottom: 0.1em solid black;
   margin-bottom: 2em;
   padding: 0 0 0.5em;
}

.menu:before {
   content: "[";
}

.menu:after {
   content: "]";
}

.menu > li {
   display: inline;
}

.menu > li:before {
   content: "|";
   padding-right: 0.3em;
}

.menu > li:nth-child(1):before {
   content: "";
   padding: 0;
}

.smart-table-data-row.selected {
/*background: lightblue;*/
}

.header-content:before {
   content: ' ';
   position: relative;
   left: -5px;
}

/*.sort-ascent:before {
   content: "\25B4";
}

.sort-descent:before {
   content: "\25BE";
}*/

.pagination {
   text-align: center;
   cursor: pointer;
}

/*.smart-table th {
   width: 120px;
   padding: 0 20px;
}*/

.control-label .pos{
   padding-top: 0px;
}

/* SMART TABLES OVERRIDES
**************************************************/

tr.smart-table-header-row th.sortable {
/*
   background-image: url('/images/sort-both.png');
*/
   background-repeat: no-repeat;
   background-position: right center;
}

tr.smart-table-header-row th.sortable.sort-ascent {
   background-image: url('/images/sort-asc.png');
}

tr.smart-table-header-row th.sortable.sort-descent {
   background-image: url('/images/sort-desc.png');
}

.fixed-table {
		position: relative;
		width: 100%; /*FIX THE HEIGHT YOU NEED*/
		height: 540px;
		overflow-x: hidden;
 		overflow-y: hidden; 
}

.fixed-module {
		height: 500px;
}

  .chart .highcharts-tooltip > span{ width: 175px;float: left; margin: 0 }
  .chart .highcharts-tooltip .header{ font-weight: bold; width: 154px!important; height: auto!important; float: left; border-bottom: 1px solid #bebebe;  margin: 1px 0 5px 1px!important; padding: 5px 10px;background-color: rgba(255,255,255,1);
      -webkit-border-top-left-radius: 5px;
      -webkit-border-top-right-radius: 5px;
      -moz-border-radius-topleft: 5px;
      -moz-border-radius-topright: 5px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;}
  .chart .highcharts-tooltip .circle{width: 12px; height: 12px; border-radius: 24px; float: left;  margin: 2px 5px 5px 10px;clear: left}
  .chart .highcharts-tooltip p.country{float: left; margin-right: 0}
  .chart .highcharts-tooltip p{float: right; font-size: 12px; margin-right: 10px;}
  
 .select-page {
  width: 50px;
  text-align: center;
}

.pagination li a input {
  padding: 0;
  margin: -5px 0;
}

@media (min-width: 768px) {
  .form-inline .form-group {
    display: inline-block;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .form-control {
    display: inline-block;
    width: auto;
    vertical-align: middle;
  }
  .form-inline .input-group > .form-control {
    width: 100%;
  }
  .form-inline .control-label {
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .radio,
  .form-inline .checkbox {
    display: inline-block;
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
    vertical-align: middle;
  }
  .form-inline .radio input[type="radio"],
  .form-inline .checkbox input[type="checkbox"] {
    float: none;
    margin-left: 0;
  }
  .form-inline .has-feedback .form-control-feedback {
    top: 0;
  }
}
.form-horizontal .control-label,
.form-horizontal .radio,
.form-horizontal .checkbox,
.form-horizontal .radio-inline,
.form-horizontal .checkbox-inline {
  padding-top: 7px;
  margin-top: 0;
  margin-bottom: 0;
}
.form-horizontal .radio,
.form-horizontal .checkbox {
  min-height: 27px;
}
.form-horizontal .form-group {
  margin-right: -15px;
  margin-left: -15px;
}
.form-horizontal .form-control-static {
  padding-top: 7px;
}
@media (min-width: 768px) {
  .form-horizontal .control-label {
    text-align: right;
  }
}
.form-horizontal .has-feedback .form-control-feedback {
  top: 0;
  right: 15px;
}

.panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
          box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
}
.panel-body {
  padding: 15px;
}
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel-heading > .dropdown .dropdown-toggle {
  color: inherit;
}
.panel-title {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 16px;
  color: inherit;
}
.panel-title > a {
  color: inherit;
}
.panel-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.panel > .list-group {
  margin-bottom: 0;
}
.panel > .list-group .list-group-item {
  border-width: 1px 0;
  border-radius: 0;
}
.panel > .list-group:first-child .list-group-item:first-child {
  border-top: 0;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel > .list-group:last-child .list-group-item:last-child {
  border-bottom: 0;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.panel-heading + .list-group .list-group-item:first-child {
  border-top-width: 0;
}
.panel > .table,
.panel > .table-responsive > .table {
  margin-bottom: 0;
}
.panel > .table:first-child,
.panel > .table-responsive:first-child > .table:first-child {
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:first-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:first-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:first-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:first-child {
  border-top-left-radius: 3px;
}
.panel > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child td:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child td:last-child,
.panel > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > thead:first-child > tr:first-child th:last-child,
.panel > .table:first-child > tbody:first-child > tr:first-child th:last-child,
.panel > .table-responsive:first-child > .table:first-child > tbody:first-child > tr:first-child th:last-child {
  border-top-right-radius: 3px;
}
.panel > .table:last-child,
.panel > .table-responsive:last-child > .table:last-child {
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:first-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:first-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:first-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:first-child {
  border-bottom-left-radius: 3px;
}
.panel > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child td:last-child,
.panel > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tbody:last-child > tr:last-child th:last-child,
.panel > .table:last-child > tfoot:last-child > tr:last-child th:last-child,
.panel > .table-responsive:last-child > .table:last-child > tfoot:last-child > tr:last-child th:last-child {
  border-bottom-right-radius: 3px;
}
.panel > .panel-body + .table,
.panel > .panel-body + .table-responsive {
  border-top: 1px solid #ddd;
}
.panel > .table > tbody:first-child > tr:first-child th,
.panel > .table > tbody:first-child > tr:first-child td {
  border-top: 0;
}
.panel > .table-bordered,
.panel > .table-responsive > .table-bordered {
  border: 0;
}
.panel > .table-bordered > thead > tr > th:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:first-child,
.panel > .table-bordered > tbody > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:first-child,
.panel > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:first-child,
.panel > .table-bordered > thead > tr > td:first-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:first-child,
.panel > .table-bordered > tbody > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:first-child,
.panel > .table-bordered > tfoot > tr > td:first-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:first-child {
  border-left: 0;
}
.panel > .table-bordered > thead > tr > th:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > th:last-child,
.panel > .table-bordered > tbody > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > th:last-child,
.panel > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > th:last-child,
.panel > .table-bordered > thead > tr > td:last-child,
.panel > .table-responsive > .table-bordered > thead > tr > td:last-child,
.panel > .table-bordered > tbody > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tbody > tr > td:last-child,
.panel > .table-bordered > tfoot > tr > td:last-child,
.panel > .table-responsive > .table-bordered > tfoot > tr > td:last-child {
  border-right: 0;
}
.panel > .table-bordered > thead > tr:first-child > td,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > td,
.panel > .table-bordered > tbody > tr:first-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > td,
.panel > .table-bordered > thead > tr:first-child > th,
.panel > .table-responsive > .table-bordered > thead > tr:first-child > th,
.panel > .table-bordered > tbody > tr:first-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:first-child > th {
  border-bottom: 0;
}
.panel > .table-bordered > tbody > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > td,
.panel > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > td,
.panel > .table-bordered > tbody > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tbody > tr:last-child > th,
.panel > .table-bordered > tfoot > tr:last-child > th,
.panel > .table-responsive > .table-bordered > tfoot > tr:last-child > th {
  border-bottom: 0;
}
.panel > .table-responsive {
  margin-bottom: 0;
  border: 0;
}
.panel-group {
  margin-bottom: 20px;
}
.panel-group .panel {
  margin-bottom: 0;
  overflow: hidden;
  border-radius: 4px;
}
.panel-group .panel + .panel {
  margin-top: 5px;
}
.panel-group .panel-heading {
  border-bottom: 0;
}
.panel-group .panel-heading + .panel-collapse .panel-body {
  border-top: 1px solid #ddd;
}
.panel-group .panel-footer {
  border-top: 0;
}
.panel-group .panel-footer + .panel-collapse .panel-body {
  border-bottom: 1px solid #ddd;
}
.panel-default {
  border-color: #ddd;
}
.panel-default > .panel-heading {
  color: #333;
  background-color: #f5f5f5;
  border-color: #ddd;
}
.panel-default > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #ddd;
}
.panel-default > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #ddd;
}
.panel-primary {
  border-color: #428bca;
}
.panel-primary > .panel-heading {
  color: #fff;
  background-color: #428bca;
  border-color: #428bca;
}
.panel-primary > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #428bca;
}
.panel-primary > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #428bca;
}
.panel-success {
  border-color: #d6e9c6;
}
.panel-success > .panel-heading {
  color: #3c763d;
  background-color: #dff0d8;
  border-color: #d6e9c6;
}
.panel-success > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #d6e9c6;
}
.panel-success > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #d6e9c6;
}
.panel-info {
  border-color: #bce8f1;
}
.panel-info > .panel-heading {
  color: #31708f;
  background-color: #d9edf7;
  border-color: #bce8f1;
}
.panel-info > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #bce8f1;
}
.panel-info > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #bce8f1;
}
.panel-warning {
  border-color: #faebcc;
}
.panel-warning > .panel-heading {
  color: #8a6d3b;
  background-color: #fcf8e3;
  border-color: #faebcc;
}
.panel-warning > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #faebcc;
}
.panel-warning > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #faebcc;
}
.panel-danger {
  border-color: #ebccd1;
}
.panel-danger > .panel-heading {
  color: #a94442;
  background-color: #f2dede;
  border-color: #ebccd1;
}
.panel-danger > .panel-heading + .panel-collapse .panel-body {
  border-top-color: #ebccd1;
}
.panel-danger > .panel-footer + .panel-collapse .panel-body {
  border-bottom-color: #ebccd1;
}

.formHeader{
    text-align:center;
    background-color:#313337;
    color: #ffffff;
    width:100%;
    height:20px;
    margin-top: 20px;
}

.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;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}

.sortable {
    cursor: pointer;
}

.st-sort-ascent:before{
    content: '\25B2';   
    float: right;
  }

  .st-sort-descent:before{
    content: '\25BC';
     float: right;
  }
  
 .ctooltip {
	visibility: visible;
    position: absolute;
     z-index: 1030;
    display: block;
    font-size: 11px;
  	line-height: 1.0;
/*   opacity: 0; */
  	filter: alpha(opacity=0);
}

.ctooltip.cright {
 margin-left: 3px;
  padding: 0 5px;
}

.ctooltip.cleft {
  margin-left: -3px;
  padding: 0 5px;
}

/* Tooltip text */
.ctooltip .ctooltiptext {    
	width: 50px;
   max-width: 200px;
  padding: 8px;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  background-color: #000000;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
}

.ctooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}

.ctooltip.cleft .ctooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000000;
}

.ctooltip.cright .ctooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000000;
}