@media screen and (min-width: 0px) {
  html body .view-container .view-frame .detailsWindow {
    top: 50px;
    left: 0px;
    width: 100%;
  }
  html body .view-container .view-frame .followedShip {
    bottom: 50px;
    left: 85px;
    font-size: 8pt;
  }
  html body .view-container .view-frame .eMapContainer {
    margin-top: 50px;
  }
  html body .view-container .view-frame #textContainer2 {
    position: absolute !important;
    top: 50px;
    bottom: 0;
    z-index: 0;
    right: 0;
    left: 0;
    padding-left: 0px;
    background: #F2F0F0;
  }
  html body .view-container .view-frame #textContainer2 .tmCont {
    float: left;
    width: 100%;
    height: 100%;
    overflow-x: auto;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmTitle {
    font-size: 20pt !important;
    font-weight: 700;
    color: #2a2929;
    margin-left: -15px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmExportData {
    float: right;
    margin-right: 10px;
    height: 25px;
    margin-top: -3px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmExportData button {
    border: none /*border-radius: 30px;*/;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmExportData button:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmExportData button:focus {
    outline: none;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .filterWrap {
    float: left;
    margin-right: 0%;
    margin-top: -3px;
    margin-left: 50px;
    margin-bottom: 15px;
    width: 200px;
    height: 25px;
    border: 1px solid #C2C1BA;
    border-radius: 30px;
    padding-left: 8px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .filterWrap .searchFilter {
    float: left;
    height: 12px;
    width: 15px;
    margin-top: 5px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .filterWrap .searchField {
    margin-left: 10px;
    height: 100%;
    width: calc(100% - 15px);
    float: left;
    background: none;
    border: none;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .filterWrap .searchField:focus {
    outline: none;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap {
    float: left;
    width: 100%;
    display: block;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable {
    float: left;
    width: 100%;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable .extraInfo {
    display: none;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable thead .tmTableTitle {
    width: 100%;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable thead .tmTableTitle th {
    border-top: 2px solid #E0DCDC;
    border-bottom: 2px solid #E0DCDC;
    padding: 7px;
    height: 30px;
    cursor: pointer;
    color: #525150;
    font-size: 7pt;
    font-weight: bold;
    padding: 3px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffd65e+0,febf04+100;Yellow+3D+%232 */
    background: #ffd65e;
    /* Old browsers */
    background: -moz-linear-gradient(top, #ffd65e 0%, #febf04 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffd65e), color-stop(100%, #febf04));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #ffd65e 0%, #febf04 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #ffd65e 0%, #febf04 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #ffd65e 0%, #febf04 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #ffd65e 0%, #febf04 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd65e', endColorstr='#febf04', GradientType=0);
    /* IE6-9 */
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable thead .tmTableTitle th .sortorder {
    font-size: 7pt;
    margin-left: 2px;
    margin-top: -10px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable thead .tmTableTitle th .sortorder:after {
    content: '\25b2';
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable thead .tmTableTitle th .sortorder.reverse:after {
    content: '\25bc';
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable tbody {
    width: 100%;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable tbody .tmRows {
    font-size: 8pt;
    height: 25px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable tbody .tmRows .tmCols {
    background: #F2F0F0;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable tbody .tmRows .tmCols .countryImgCols {
    width: 18px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable tbody .tmRows .tmEriLink {
    width: 30px;
    height: 30px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable tbody .tmRows .tmEriLink .tmEriLinkImg {
    width: 20px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable tbody .tmRows .tmColsWarning {
    width: 20px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable tbody .tmRows .tmColsWarning .tmWarning {
    margin-left: 5px;
    width: 18px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable tbody .tmRows:hover {
    cursor: pointer;
    /* font-weight: bold;
                                                font-size: 8pt;*/
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable tbody .tmRows:hover .tmCols {
    background: #E8E8E8;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable tbody .tmRows:hover .tmColsWarning {
    cursor: help;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable tbody .tmRows:hover .tmColsWarning .tmWarning {
    margin-left: 5px;
    width: 18px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .tmWrap .tmTable tbody .tmRowsEven .tmCols {
    border-top: 1px solid #999999;
    border-bottom: 1px solid #999999;
    background: #F0EBEB;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .myPagination {
    float: left;
    margin-top: 10px;
    margin-bottom: 40px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .myPagination .paginationButton {
    float: left;
    margin: 0px 3px 0px 3px;
    background: none;
    border: none;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .myPagination .paginationButton .paginationImg {
    width: 15px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .myPagination .paginationButton .paginationImg:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .myPagination .paginationButton:focus {
    outline: none;
  }
  html body .view-container .view-frame #textContainer2 .tmCont .myPagination .paginationText {
    font-weight: bold;
    font-size: 10pt;
    float: left;
    margin: 4px 10px 0px 10px;
    color: #737372;
  }
  html body .view-container .view-frame #textContainer .tmCont .positionRow {
    float: left;
  }
  html body .view-container .view-frame #textContainer .tmCont .positionRow .posText {
    margin: 0;
    margin-top: 3px;
    float: left;
  }
  html body .view-container .view-frame #textContainer .tmCont .positionRow .posDate {
    margin: 0;
    float: right;
    margin-right: 15px;
  }
  html body .view-container .view-frame #textContainer .tmCont .positionRow .typeImg {
    float: left;
    cursor: pointer;
    width: 30px;
    height: 30px;
    padding: 4px;
    margin: 0;
    margin-left: 0px;
    margin-right: 10px;
    border-radius: 10px;
  }
  html body .view-container .view-frame #textContainer .tmCont .positionRow .goToWrap {
    float: right;
    margin-right: 5px;
    cursor: pointer;
    width: 34px;
    height: 34px;
    padding: 4px;
    margin: 0;
    margin-top: -5px;
    border-radius: 10px;
  }
  html body .view-container .view-frame #textContainer .tmCont .positionRow .goToWrap .goToImg {
    width: 26px;
  }
  html body .view-container .view-frame #textContainer .tmCont .positionRow .goToWrap:hover {
    background: #e9e9e9;
  }
  html body .view-container .view-frame #textContainer .tmCont .card-body {
    padding: 5px 0px;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont .simTop .releaseDate {
    float: right;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont .simTop .releaseDate .relLabel {
    float: left;
    font-size: 11pt;
    margin-right: 8px;
    margin-top: 5px;
    font-weight: bold;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont .simTop .releaseDate .relDatePicker {
    cursor: pointer;
    float: left;
    width: 100px;
    font-size: 10pt;
    text-align: right;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont .table thead tr th .siTxt {
    display: none;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont .table thead tr th .siImg {
    width: 20px;
    display: inline-block;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont .table thead tr .thAlign {
    text-align: right;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont .table tbody tr td {
    font-size: 9pt;
    vertical-align: central;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont .table tbody .trAlign {
    text-align: right;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont .table .dot {
    height: 10px;
    width: 10px;
    margin-left: 5px;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont #simOverview .updateInfo {
    float: right;
    color: #525150;
    width: 300px;
    height: 100px;
    margin-bottom: 5px;
    border: dotted 1px #d1d1d1;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont #simOverview .updateInfo .updateInfoColumn2 {
    width: 300px;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont #simOverview .updateInfo .updateInfoColumn2 .relDatePicker {
    float: left;
    width: 130px;
    font-size: 10pt;
    text-align: center;
    margin: 3px 10px;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont #simOverview .updateInfo .updateInfoColumn2 .relVers {
    float: left;
    width: 100px;
    font-size: 10pt;
    text-align: center;
    margin: 3px 10px;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont #simOverview .updateInfo .updateInfoColumn2 .updateInfoBtns {
    float: left;
    width: 100px;
    margin: 2px 10px;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont #simOverview .updateInfo .updateInfoColumn2 .updateInfoBtns .updateInfoBtn {
    float: left;
    width: 28px;
    margin: 1px 6px;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont #simOverview .updateInfo .updateInfoColumn2 .updateInfoBtns .updateInfoBtn .updateInfoImg2 {
    width: 20px;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont #simOverview .updateInfo .updateInfoColumn {
    float: left;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont #simOverview .updateInfo .updateInfoColumn .updateInfoLabel {
    float: left;
    font-size: 7pt;
    font-weight: bold;
    width: 142px;
    text-align: right;
    margin: 2px 5px 2px 0px;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont #simOverview .updateInfo .updateInfoColumn .updateInfoVal {
    float: left;
    font-size: 8pt;
    width: 145px;
    text-align: left;
    margin: 2px 0px 2px 0px;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont #simOverview .updateInfo .updateInfoBtn {
    float: right;
    margin: -37px 10px 0 0;
    cursor: pointer;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont #simOverview .updateInfo .updateInfoBtn .updateInfoImg {
    width: 25px;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont #simOverview .updateInfo .updateInfoBtn:hover .updateInfoImg {
    opacity: 0.7;
  }
  html body .view-container .view-frame #systemInfoContainer .simCont #simOverview .updateInfo .updateInfoBtn:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame #historyContainer .historyWrapped {
    margin-top: 5px;
    height: 511px;
  }
  html body .view-container .view-frame #historyContainer .historyWrapped .hisCont .hisRow .hisLabel {
    font-size: 14pt;
  }
  html body .view-container .view-frame #historyContainer .historyWrapped .hisCont .hisRow .searchWrap .searchShip {
    font-size: 12pt;
  }
  html body .view-container .view-frame #historyContainer .historyWrapped .hisCont .hisRow .searchWrap .searchMMSI {
    margin-top: 40px;
  }
  html body .view-container .view-frame #historyContainer .historyWrapped .hisCont .hisRow .searchWrap .searchMMSI .activeShipItem {
    font-size: 11pt;
    cursor: pointer;
    width: 100%;
    padding: 6px 10px 6px 10px;
    color: #4a4a4a;
    border-bottom: 1px solid #f5f5f5;
  }
  html body .view-container .view-frame #historyContainer .historyWrapped .hisCont .hisRow .hisDatePicker {
    font-size: 12pt;
  }
  html body .view-container .view-frame .playHistory {
    position: absolute;
    top: 45px;
    left: 30%;
    background: #4A4A4A;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    padding-left: 10px;
    padding-right: 10px;
    width: 230px;
    height: 60px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
    background: #45484d;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(69, 72, 77, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(69, 72, 77, 0.7)), color-stop(100%, rgba(0, 0, 0, 0.7)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, rgba(69, 72, 77, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, rgba(69, 72, 77, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, rgba(69, 72, 77, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
    /* IE10+ */
    background: linear-gradient(135deg, rgba(69, 72, 77, 0.7) 0%, rgba(0, 0, 0, 0.7) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#45484d', endColorstr='#000000', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
  }
  html body .view-container .view-frame .playHistory .buttonsWrap {
    width: 100%;
    float: left;
  }
  html body .view-container .view-frame .playHistory .buttonsWrap .playButtons {
    float: left;
    width: 25px;
    margin: 5px;
    cursor: pointer;
  }
  html body .view-container .view-frame .playHistory .buttonsWrap .playButtons:hover {
    opacity: 0.8;
  }
  html body .view-container .view-frame .playHistory .buttonsWrap .playButtons:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .playHistory .buttonsWrap .playButtonsBlocked {
    opacity: 0.4;
    cursor: default;
  }
  html body .view-container .view-frame .playHistory .buttonsWrap .playButtonsBlocked:hover {
    opacity: 0.4;
  }
  html body .view-container .view-frame .playHistory .buttonsWrap .playButtonsBlocked:active {
    position: relative;
    top: 0px;
  }
  html body .view-container .view-frame .playHistory .historyText {
    color: #f2f2f2;
    width: 100%;
    text-align: center;
    margin-top: 5px;
    float: left;
    font-size: 9pt;
  }
  html body .view-container .view-frame .playHistory .historyText .playDate {
    float: left;
    width: 10px;
    margin-top: 3px;
    margin-right: 5px;
    margin-left: 20px;
  }
  html body .view-container .view-frame .playHistory .historyText .historyDate {
    float: left;
    margin-right: 10px;
  }
  html body .view-container .view-frame .playHistory .historyText .historyTime {
    float: left;
  }
  html body .view-container .view-frame .leftInfobarShowHide {
    position: absolute;
    display: inline;
    left: 0;
    top: 130px;
    z-index: 102;
    height: 50px;
    width: 50px;
    background: rgba(22, 22, 22, 0.7);
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    cursor: pointer;
  }
  html body .view-container .view-frame .leftInfobarShowHide .leftInfobarShowHideImg {
    padding: 10px;
    width: 50px;
    height: 50px;
  }
  html body .view-container .view-frame .leftInfobarShowHide:hover {
    background: #2B2B2B;
  }
  html body .view-container .view-frame .infobarHideBtn {
    display: none;
  }
  html body .view-container .view-frame .infobar {
    width: 100%;
    min-width: 100%;
    position: absolute !important;
    padding-top: 50px;
    top: 0;
    left: 0;
    height: 100%;
    min-height: 250px;
    z-index: 2;
    background: rgba(22, 22, 22, 0.9);
    box-shadow: 5px 0px 25px #888888;
    overflow: hidden;
  }
  html body .view-container .view-frame .infobar .searchWrap {
    background: #eff4f4;
    margin: 8px;
    margin-left: 3%;
    margin-right: 3%;
    width: 80%;
    height: 28px;
    float: left;
    border-radius: 10px;
    padding-left: 10px;
  }
  html body .view-container .view-frame .infobar .searchWrap .searchMagnifier {
    float: left;
    height: 15px;
    width: 15px;
    margin-top: 7px;
    cursor: pointer;
  }
  html body .view-container .view-frame .infobar .searchWrap .searchField {
    margin-left: 10px;
    height: 100%;
    width: calc(100% - 15px);
    float: left;
    background: none;
    border: none;
  }
  html body .view-container .view-frame .infobar .searchWrap .searchField:focus {
    outline: none;
  }
  html body .view-container .view-frame .infobar .searchWrap .searchMMSI {
    background: #FFFFFF;
    border: solid 1px #6E6E6E;
    width: 78%;
    max-height: 300px;
    position: absolute;
    margin-top: 30px;
    margin-left: -10px;
    opacity: 0;
    -moz-transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    overflow-y: auto;
    display: none;
    z-index: 1;
    margin-left: 1%;
  }
  html body .view-container .view-frame .infobar .searchWrap .searchMMSI .activeShipItem {
    font-size: 11pt;
    cursor: pointer;
    width: 100%;
    padding: 6px 10px 6px 10px;
    color: #4a4a4a;
    border-bottom: 1px solid #f5f5f5;
  }
  html body .view-container .view-frame .infobar .searchWrap .searchMMSI .activeShipItem:hover {
    background: #6357E6;
    color: #EBEBF0;
  }
  html body .view-container .view-frame .infobar .searchWrap .searchMMSI .noActiveShipItem {
    font-weight: bold;
    font-size: 10pt;
    padding: 8px 10px 3px 10px;
    border-bottom: 1px solid #d8d8d8;
  }
  html body .view-container .view-frame .infobar .searchWrap .searchMMSI:active {
    display: block;
    opacity: 1;
  }
  html body .view-container .view-frame .infobar .searchWrap .searchField:focus + .searchMMSI {
    display: block;
    opacity: 1;
  }
  html body .view-container .view-frame .infobar .leftInfoBarHide {
    float: right;
    width: 14%;
    height: 44px;
    cursor: pointer;
    border-left: 1px solid #fef4cb;
  }
  html body .view-container .view-frame .infobar .leftInfoBarHide .leftInfobarHideImg {
    float: right;
    width: 24px;
    margin-right: 8px;
    margin-top: 10px;
  }
  html body .view-container .view-frame .infobar .leftInfoBarHide:hover {
    background: #2B2B2B;
  }
  html body .view-container .view-frame .infobar .leftInfoBarHide:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems {
    float: left;
    width: 100%;
    height: 30px;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItem {
    margin-left: 1%;
    float: left;
    background-color: #323131;
    width: 32%;
    height: 100%;
    cursor: pointer;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItem .infobarMiImage {
    float: left;
    width: 100%;
    height: 100%;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItem .infobarMiImage .infobarNr {
    float: left;
    width: 13px;
    height: 13px;
    margin-left: 53%;
    margin-top: 15px;
    padding-top: 2px;
    background: #ed1c24;
    border-radius: 15px;
    color: #ffffff;
    text-align: center;
    font-size: 5pt;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItem #mniDashboard {
    background: url('../../img/infobar/dashboard.png') no-repeat;
    background-size: 18px;
    background-position: center;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItem #mniAlarm {
    background: url('../../img/infobar/alarm.png') no-repeat;
    background-size: 18px;
    background-position: center;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItem #mniMessage {
    background: url('../../img/infobar/message.png') no-repeat;
    background-size: 18px;
    background-position: center;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItem:hover {
    background: #3B3939;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItem:hover #mniDashboard {
    background: url('../../img/infobar/dashboardOrange.png') no-repeat;
    background-size: 18px;
    background-position: center;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItem:hover #mniAlarm {
    background: url('../../img/infobar/alarmOrange.png') no-repeat;
    background-size: 18px;
    background-position: center;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItem:hover #mniMessage {
    background: url('../../img/infobar/messageOrange.png') no-repeat;
    background-size: 18px;
    background-position: center;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItemDouble {
    margin-left: 1%;
    width: 49%;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItemSingle {
    margin-left: 1%;
    width: 98%;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItemSelected {
    background-color: #4e4c4c;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItemSelected #mniDashboard {
    background: url('../../img/infobar/dashboardOrange.png') no-repeat;
    background-size: 18px;
    background-position: center;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItemSelected #mniAlarm {
    background: url('../../img/infobar/alarmOrange.png') no-repeat;
    background-size: 18px;
    background-position: center;
  }
  html body .view-container .view-frame .infobar .infobarMenuItems .infobarMenuItemSelected #mniMessage {
    background: url('../../img/infobar/messageOrange.png') no-repeat;
    background-size: 18px;
    background-position: center;
  }
  html body .view-container .view-frame .infobar .infobarContent {
    position: absolute !important;
    top: 128px;
    bottom: 0px;
    margin-top: 0px;
    float: left;
    width: 98%;
    margin-left: 1%;
    overflow-y: auto;
    overflow-x: hidden;
    height: calc(100%-100px);
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion {
    border-radius: 3px;
    margin-bottom: 2px;
    color: #f4f4f4;
    float: left;
    width: 100%;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .infobarAccordionTitlebar {
    float: left;
    width: 100%;
    height: 32px;
    cursor: pointer;
    padding: 5px;
    background: #525152;
    background-image: -webkit-linear-gradient(top, #525152, #383838);
    background-image: -moz-linear-gradient(top, #525152, #383838);
    background-image: -ms-linear-gradient(top, #525152, #383838);
    background-image: -o-linear-gradient(top, #525152, #383838);
    background-image: linear-gradient(to bottom, #525152, #383838);
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .infobarAccordionTitlebar .infobarAccordionIcon {
    float: left;
    width: 13px;
    margin-left: 10px;
    margin-top: 5px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .infobarAccordionTitlebar .infobarAccordionTitle {
    font-weight: bold;
    font-size: 10pt;
    float: left;
    margin-top: 0px;
    margin-left: 7px;
    color: #f4f4f4;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .infobarAccordionTitlebar .infobarAccordionArrow {
    float: right;
    width: 9px;
    margin-right: 5px;
    margin-top: 6px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .chartInfoCl {
    float: left;
    padding: 5px;
    margin-top: 6px;
    width: 100%;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .chartInfoCl .ciRow {
    float: left;
    width: 100%;
    height: 24px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .chartInfoCl .ciRow .ciLabel {
    float: left;
    color: #939387;
    font-weight: bold;
    font-size: 10pt;
    margin-left: 20px;
    text-transform: uppercase;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .chartInfoCl .ciRow .ciValue {
    float: right;
    color: #fef4cb;
    font-size: 12pt;
    margin-right: 20px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl {
    float: left;
    width: 100%;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap {
    padding: 10px;
    float: left;
    width: 100%;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coNavigationBtn {
    float: right;
    margin-bottom: -15px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coNavigationBtn .coNavImgWrap {
    float: left;
    margin-right: 9px;
    cursor: pointer;
    border: 2px solid #4A4A49;
    border-radius: 3px;
    padding: 5px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,131313+100 */
    background: #4c4c4c;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #4c4c4c), color-stop(12%, #595959), color-stop(25%, #666666), color-stop(39%, #474747), color-stop(50%, #2c2c2c), color-stop(100%, #131313));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* IE10+ */
    background: linear-gradient(135deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coNavigationBtn .coNavImgWrap .coNavImg {
    width: 18px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coNavigationBtn .coNavImgWrap:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coNavigationBtn .coNavImgWrap:hover {
    opacity: 0.85;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coNavigationBtn .coNavImgWrapDisabled {
    opacity: 0.4;
    cursor: default;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coNavigationBtn .coNavImgWrapDisabled:hover {
    opacity: 0.4;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coNavigationBtn .coNavImgWrapDisabled:active {
    top: 0px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coTitle {
    color: #ffd001;
    border-bottom: 1px dotted #fdfce7;
    width: 100%;
    padding-bottom: 5px;
    font-size: 8pt;
    font-weight: bold;
    float: left;
    margin-top: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont {
    float: left;
    width: 50%;
    margin-top: 15px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .coContLabel {
    float: left;
    color: #939387;
    font-weight: bold;
    font-size: 10pt;
    margin-top: 0px;
    text-transform: uppercase;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .selectNightWrapper select {
    display: none;
    /*hide original SELECT element: */
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .selectNightWrapper {
    float: right;
    margin-right: 10px;
    line-height: 20px;
    font-size: 11pt;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
    color: #d6d6cb;
    background: none;
    border: none;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .selectNightWrapper:active {
    outline: none !important;
    border: none !important;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .selectNightWrapper select:focus {
    outline: none;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .selectNightWrapper:focus {
    outline: none;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .selectNightOption {
    padding: 15px 18px;
    border: none;
    box-shadow: none;
    background: transparent;
    background-image: none;
    -webkit-appearance: none;
    background: #595959;
    font-size: 12pt;
    color: #f4f4f4;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .selectNightOption:hover {
    background: #383838 !important;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .switchWrapper {
    float: right;
    margin-right: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .switchWrapper .onoffswitch {
    position: relative;
    width: 50px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .switchWrapper .disabledOnMobile {
    opacity: 0.4;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .switchWrapper .onoffswitchDisabled {
    opacity: 0.4;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .switchWrapper .onoffswitch-checkbox {
    display: none;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .switchWrapper .onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .switchWrapper .onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .switchWrapper .onoffswitch-inner:before,
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .switchWrapper .onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 18px;
    padding: 2px;
    line-height: 14px;
    font-size: 9px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
    background-clip: padding-box;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .switchWrapper .onoffswitch-inner:before {
    content: "ON";
    padding-left: 8px;
    background-color: #52514E;
    color: #fef5ce;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .switchWrapper .onoffswitch-inner:after {
    content: "OFF";
    padding-right: 7px;
    background-color: #52514E;
    color: #C9C7C7;
    text-align: right;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .switchWrapper .onoffswitch-switch {
    display: block;
    width: 25px;
    margin: 0px;
    background: #A1A1A1;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 30px;
    transition: all 0.3s ease-in 0s;
    -webkit-box-shadow: inset 3px 3px 10px 0px #000000;
    -moz-box-shadow: inset 3px 3px 10px 0px #000000;
    box-shadow: inset 3px 3px 10px 0px #000000;
    border-radius: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .switchWrapper .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .coCont .switchWrapper .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
    background-color: #ffcb32;
    -webkit-box-shadow: inset 3px 3px 10px 0px #000000;
    -moz-box-shadow: inset 3px 3px 10px 0px #000000;
    box-shadow: inset 3px 3px 10px 0px #000000;
    border-radius: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra {
    float: left;
    width: 90%;
    margin-left: 5%;
    border-left: dashed 1px #939387;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont {
    float: left;
    margin-left: 2%;
    width: 98%;
    margin-top: 15px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .coContLabel {
    float: left;
    color: #939387;
    font-weight: bold;
    font-size: 7pt;
    margin-top: 2px;
    width: 60px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .switchWrapper {
    float: left;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .switchWrapper .onoffswitch {
    position: relative;
    width: 50px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .switchWrapper .onoffswitchDisabled {
    opacity: 0.4;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .switchWrapper .onoffswitch-checkbox {
    display: none;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .switchWrapper .onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .switchWrapper .onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .switchWrapper .onoffswitch-inner:before,
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .switchWrapper .onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 18px;
    padding: 2px;
    line-height: 14px;
    font-size: 9px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
    background-clip: padding-box;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .switchWrapper .onoffswitch-inner:before {
    content: "ON";
    padding-left: 8px;
    background-color: #52514E;
    color: #fef5ce;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .switchWrapper .onoffswitch-inner:after {
    content: "OFF";
    padding-right: 7px;
    background-color: #52514E;
    color: #C9C7C7;
    text-align: right;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .switchWrapper .onoffswitch-switch {
    display: block;
    width: 25px;
    margin: 0px;
    background: #A1A1A1;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 30px;
    transition: all 0.3s ease-in 0s;
    -webkit-box-shadow: inset 3px 3px 10px 0px #000000;
    -moz-box-shadow: inset 3px 3px 10px 0px #000000;
    box-shadow: inset 3px 3px 10px 0px #000000;
    border-radius: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .switchWrapper .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .switchWrapper .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
    background-color: #ffcb32;
    -webkit-box-shadow: inset 3px 3px 10px 0px #000000;
    -moz-box-shadow: inset 3px 3px 10px 0px #000000;
    box-shadow: inset 3px 3px 10px 0px #000000;
    border-radius: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper {
    float: left;
    /*hide the outline behind the border*/
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper .rangeValue {
    float: right;
    font-size: 8pt;
    font-weight: bold;
    width: 35px;
    margin-left: 8px;
    margin-right: 0px;
    text-align: right;
    color: #737373;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper .inputRange:focus {
    outline: none;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper input[type='range'] {
    float: left;
    /*removes default webkit styles*/
    -webkit-appearance: none;
    /*fix for FF unable to apply focus style bug */
    /*required for proper track sizing in FF*/
    width: 120px;
    margin-top: 2px;
    /* margin-top: -12px;
                                                        -webkit-appearance: none;
                                                        border-radius: 5px;*/
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper input[type=range]::-webkit-slider-runnable-track {
    width: 110px;
    height: 5px;
    background: #6E6E6E;
    border: none;
    border-radius: 3px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #A8A8A8;
    margin-top: -4px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper input[type=range]:focus {
    outline: none;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper input[type=range]:focus::-webkit-slider-runnable-track {
    background: #ccc;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper input[type=range]::-moz-range-track {
    width: 110px;
    height: 5px;
    background: #6E6E6E;
    border: none;
    border-radius: 3px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper input[type=range]::-moz-range-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #A8A8A8;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper input[type=range]:-moz-focusring {
    outline: 1px solid white;
    outline-offset: -1px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper input[type=range]::-ms-track {
    width: 110px;
    height: 5px;
    /*remove bg colour from the track, we'll use ms-fill-lower and ms-fill-upper instead */
    background: transparent;
    /*leave room for the larger thumb to overflow with a transparent border */
    border-color: transparent;
    border-width: 6px 0;
    /*remove default tick marks*/
    color: transparent;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper input[type=range]::-ms-fill-lower {
    background: #777;
    border-radius: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper input[type=range]::-ms-fill-upper {
    background: #6E6E6E;
    border-radius: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper input[type=range]::-ms-thumb {
    border: none;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    background: #A8A8A8;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper input[type=range]:focus::-ms-fill-lower {
    background: #888;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont .sliderWrapper input[type=range]:focus::-ms-fill-upper {
    background: #ccc;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont2 {
    float: left;
    margin-left: 2%;
    width: 48%;
    margin-top: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .ChartOptionsCl .chartOptionsWrap .labelsExtra .coCont2 .onoffswitch-checkbox2 {
    margin-top: -5px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .pickReportCl .prNoPos {
    float: left;
    font-size: 8pt;
    font-weight: bold;
    margin-left: 20px;
    margin-top: 15px;
    margin-bottom: 15px;
    color: #F24646;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .pickReportCl .logList {
    float: left;
    padding-top: 5px;
    padding-bottom: 5px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .pickReportCl .logList .listItem {
    list-style-type: none;
    float: left;
    width: 100%;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .pickReportCl .logList .listItem .chartItem {
    color: #ffd001;
    font-weight: bold;
    font-size: 9pt;
    margin: 0px;
    margin-top: 10px;
    float: left;
    width: 100%;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .pickReportCl .logList .listItem .chartItemFeatures {
    margin-left: 10px;
    font-size: 9pt;
    float: left;
    width: 100%;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .pickReportCl .logList .listItem .chartItemFeatures .chartItemAttributes {
    margin-left: 10px;
    float: left;
    width: 100%;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .pickReportCl .logList .listItem .chartItemFeatures .chartItemAttributes .chartItemAttributesVal {
    color: #939387;
    font-weight: bold;
    padding-right: 5px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .pickReportCl .logList .listItem .chartItemFeatures .chartItemAttributes .chartItemAttributesDes {
    color: #fef4cb;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl {
    float: left;
    padding: 10px;
    width: 100%;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl .prNoTar {
    float: left;
    font-size: 8pt;
    font-weight: bold;
    margin-left: 10px;
    margin-top: 8px;
    color: #F24646;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl .tiTitle {
    color: #ffd001;
    border-bottom: 1px dotted #fdfce7;
    width: 100%;
    padding-bottom: 5px;
    font-size: 10pt;
    font-weight: bold;
    float: left;
    margin-top: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl .tiNavigationBtn {
    float: right;
    margin-bottom: -15px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl .tiNavigationBtn .tiNavImgWrap {
    float: left;
    margin-left: 8px;
    cursor: pointer;
    border: 2px solid #4A4A49;
    border-radius: 3px;
    padding: 5px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,131313+100 */
    background: #4c4c4c;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #4c4c4c), color-stop(12%, #595959), color-stop(25%, #666666), color-stop(39%, #474747), color-stop(50%, #2c2c2c), color-stop(100%, #131313));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* IE10+ */
    background: linear-gradient(135deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl .tiNavigationBtn .tiNavImgWrap .tiNavImg {
    width: 20px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl .tiNavigationBtn .tiNavImgWrap:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl .tiNavigationBtn .tiNavImgWrap:hover {
    opacity: 0.85;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl .tiNavigationBtn .tiNavImgWrapDisabled {
    opacity: 0.4;
    cursor: default;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl .tiNavigationBtn .tiNavImgWrapDisabled:hover {
    opacity: 0.4;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl .tiNavigationBtn .tiNavImgWrapDisabled:active {
    top: 0px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl .tiRow {
    float: left;
    width: 100%;
    margin-bottom: 5px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl .tiRow .tiCol {
    float: left;
    width: 100%;
    padding-right: 10px;
    padding-top: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl .tiRow .tiCol .tiR {
    float: left;
    width: 100%;
    margin-bottom: 3px;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl .tiRow .tiCol .tiR .tiLabel {
    color: #939387;
    font-weight: bold;
    font-size: 10pt;
    width: 45%;
    float: left;
    margin-top: 1px;
    text-transform: uppercase;
  }
  html body .view-container .view-frame .infobar .infobarContent #dashboardTab .infobarAccordion .targetInfoCl .tiRow .tiCol .tiR .tiValue {
    color: #fef4cb;
    font-size: 11pt;
    width: 55%;
    float: right;
    text-align: right;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .alarmAccordionTitlebar {
    float: left;
    width: 100%;
    height: 32px;
    cursor: pointer;
    padding: 5px;
    background: #525152;
    background-image: -webkit-linear-gradient(top, #525152, #383838);
    background-image: -moz-linear-gradient(top, #525152, #383838);
    background-image: -ms-linear-gradient(top, #525152, #383838);
    background-image: -o-linear-gradient(top, #525152, #383838);
    background-image: linear-gradient(to bottom, #525152, #383838);
    margin-bottom: 2px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .alarmAccordionTitlebar .alarmAccordionIcon {
    float: left;
    width: 13px;
    margin-left: 10px;
    margin-top: 5px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .alarmAccordionTitlebar .alarmAccordionTitle {
    font-weight: bold;
    font-size: 8pt;
    float: left;
    margin-top: 4px;
    margin-left: 7px;
    color: #f4f4f4;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .alarmAccordionTitlebar .alarmAccordionArrow {
    float: right;
    width: 9px;
    margin-right: 5px;
    margin-top: 6px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm {
    margin-bottom: 2px;
    float: left;
    width: 100%;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .drawAlarmWrapper {
    float: left;
    width: 100%;
    margin-left: 0%;
    margin-top: 15px;
    margin-bottom: 15px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .drawAlarmWrapper .dAlarmImgWrap {
    float: left;
    width: 50%;
    max-width: 160px;
    margin-left: 25%;
    margin-bottom: 10px;
    cursor: pointer;
    border: 2px solid #4A4A49;
    border-radius: 3px;
    padding: 8px 16px 8px 16px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,131313+100 */
    background: #4c4c4c;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #4c4c4c), color-stop(12%, #595959), color-stop(25%, #666666), color-stop(39%, #474747), color-stop(50%, #2c2c2c), color-stop(100%, #131313));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* IE10+ */
    background: linear-gradient(135deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .drawAlarmWrapper .dAlarmImgWrap .dAlarmImg {
    float: left;
    width: 40%;
    margin-left: 30%;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .drawAlarmWrapper .dAlarmImgWrap .dAlarmTxt {
    float: left;
    width: 100%;
    text-align: center;
    color: #fef4cb;
    margin-top: 8px;
    font-size: 9pt;
    font-weight: bold;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .drawAlarmWrapper .dAlarmImgWrap:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .drawAlarmWrapper .dAlarmImgWrap:hover {
    opacity: 0.85;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .drawAlarmWrapper .dAlarmImgWrapDisabled {
    opacity: 0.4;
    cursor: default;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .drawAlarmWrapper .dAlarmImgWrapDisabled:hover {
    opacity: 0.4;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .drawAlarmWrapper .dAlarmImgWrapDisabled:active {
    top: 0px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper {
    float: left;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .noAlarms {
    float: left;
    width: 100%;
    font-size: 8pt;
    font-weight: bold;
    margin: 8px;
    color: #fef4cb;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmzonesTitle {
    float: left;
    padding: 6px 13px 6px 13px;
    background: #2E2E2E;
    color: #DED9C1;
    margin-left: 3px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    /*  border-bottom-right-radius: 5px;
                                    border-bottom-left-radius: 5px;*/
    border-top: solid 1px #383838;
    border-left: solid 1px #383838;
    border-right: solid 1px #383838;
    cursor: default;
    font-size: 9pt;
    font-weight: bold;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmZone {
    float: left;
    width: 97%;
    margin-left: 1%;
    color: #fef4cb;
    background: #2E2E2E;
    padding: 3px 10px 5px 10px;
    margin-bottom: 1px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmZone .alarmZoneFirstRow {
    cursor: pointer;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmZone .alarmZoneRow {
    float: left;
    width: 100%;
    margin-top: 3px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmZone .alarmZoneRow .azRegisterImg {
    float: left;
    width: 12px;
    margin-top: 3px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmZone .alarmZoneRow .azRegisterImgUnreg {
    opacity: 0.2;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmZone .alarmZoneRow .azName {
    float: left;
    margin-left: 10px;
    margin-top: 1px;
    font-size: 9pt;
    font-weight: bold;
    color: #DBB409;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmZone .alarmZoneRow .azButtons {
    float: right;
    margin-right: 8px;
    margin-top: -3px;
    color: #DED9C1;
    width: 18px;
    height: 18px;
    text-align: center;
    cursor: pointer;
    font-weight: bold;
    font-size: 10pt;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmZone .alarmZoneRow .azButtons .azEditButtons {
    width: 15px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmZone .alarmZoneRow .azButtons:hover {
    opacity: 0.8;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmZone .alarmZoneRow .azButtons:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmZone .alarmZoneRow .alarmZoneCol {
    width: 95%;
    margin-left: 5%;
    margin-top: 1px;
    margin-bottom: 1px;
    float: left;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmZone .alarmZoneRow .alarmZoneCol .alarmZoneLabel {
    width: 45%;
    float: left;
    color: #939387;
    font-weight: bold;
    font-size: 7pt;
    text-transform: uppercase;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmZone .alarmZoneRow .alarmZoneCol .alarmZoneValue {
    width: 55%;
    float: left;
    color: #fef4cb;
    font-size: 8pt;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmZone .alarmZoneSecondRow {
    margin-top: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmZonesWrapper .alarmZoneEven {
    background: #454545;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper {
    float: left;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper .noAlarms {
    float: left;
    width: 100%;
    font-size: 8pt;
    font-weight: bold;
    margin: 8px;
    color: #fef4cb;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper .alarmsClear {
    float: right;
    margin-right: 12px;
    cursor: pointer;
    width: 20px;
    height: 20px;
    padding: 2.5px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper .alarmsClear .alarmsClearImg {
    width: 16px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper .alarmsTitle {
    float: left;
    padding: 6px 13px 6px 13px;
    background: #2E2E2E;
    color: #DED9C1;
    margin-left: 3px;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    /*  border-bottom-right-radius: 5px;
                                    border-bottom-left-radius: 5px;*/
    border-top: solid 1px #383838;
    border-left: solid 1px #383838;
    border-right: solid 1px #383838;
    cursor: default;
    font-size: 9pt;
    font-weight: bold;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper .sortAlarms {
    float: right;
    margin-top: 4px;
    margin-right: 5px;
    cursor: pointer;
    width: 75px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper .alarm {
    float: left;
    width: 97%;
    margin-left: 1%;
    color: #fef4cb;
    background: #2E2E2E;
    padding: 3px 10px 5px 10px;
    margin-bottom: 1px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper .alarm .alarmRow {
    float: left;
    width: 100%;
    margin-top: -18px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper .alarm .alarmRow .alarmCol {
    float: left;
    width: 100%;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper .alarm .alarmRow .alarmCol .alarmLabel {
    float: left;
    width: 45%;
    color: #939387;
    font-weight: bold;
    font-size: 7pt;
    text-transform: uppercase;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper .alarm .alarmRow .alarmCol .alarmValue {
    float: left;
    width: 55%;
    color: #fef4cb;
    font-size: 8pt;
    margin-top: -3px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper .alarm .alarmRow .alarmClear {
    float: right;
    cursor: pointer;
    padding: 2.5px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper .alarm .alarmRow .alarmClear .alarmsClearImg {
    width: 15px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper .alarm .alarmRow .alarmColLast {
    width: 100%;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper .alarm .alarmRow .alarmColLast .alarmLabel {
    width: 50%;
    text-transform: uppercase;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .alarmsWrapper .alarmEven {
    background: #454545;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew {
    float: left;
    width: 100%;
    margin-bottom: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow {
    float: left;
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
    padding-top: 15px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .dAlarmNewLabel {
    float: left;
    width: 30%;
    color: #939387;
    font-weight: bold;
    font-size: 8pt;
    margin-top: 3px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .dAlarmNewInput {
    float: left;
    width: 70%;
    height: 25px;
    border: none;
    border-bottom: solid 2px #6E6E6E;
    background: transparent;
    color: #fef4cb;
    padding-left: 3px;
    margin-top: -3px;
    font-size: 9pt;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .dAlarmNewInput:focus {
    outline: none;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .dAlarmNewDdl {
    float: left;
    width: 70%;
    height: 25px;
    background: transparent;
    color: #fef4cb;
    font-size: 9pt;
    border: none;
    border-bottom: solid 2px #6E6E6E;
    background-image: url("../../img/message/corner.png");
    background-position: right bottom;
    /*Positioning*/
    background-repeat: no-repeat;
    /*Prevent showing multiple background images*/
    background-size: 8px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .dAlarmNewDdl .dAlarmDdButton {
    padding-left: 3px;
    width: 100%;
    height: 100%;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .dAlarmNewDdl .dAlarmDdWrap {
    border-radius: 0;
    width: 100%;
    padding: 0;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .dAlarmNewDdl .dAlarmDdWrap .ddOption {
    color: #61615F;
    padding-left: 5px;
    padding: 2px;
    font-size: 11pt;
    cursor: pointer;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .dAlarmNewDdl .dAlarmDdWrap .ddOption:hover {
    background-color: dodgerblue;
    color: white;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .dAlarmNewDdl:focus {
    outline: none;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .saveAlarmZoneWrapper {
    float: right;
    margin-top: 0px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .saveAlarmZoneWrapper .sAZImgWrap {
    float: left;
    margin-left: 10px;
    cursor: pointer;
    border: 2px solid #4A4A49;
    border-radius: 3px;
    padding: 2px 6px 2px 6px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#4c4c4c+0,595959+12,666666+25,474747+39,2c2c2c+50,131313+100 */
    background: #4c4c4c;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #4c4c4c), color-stop(12%, #595959), color-stop(25%, #666666), color-stop(39%, #474747), color-stop(50%, #2c2c2c), color-stop(100%, #131313));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* IE10+ */
    background: linear-gradient(135deg, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #131313 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c', endColorstr='#131313', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .saveAlarmZoneWrapper .sAZImgWrap .sAZImg {
    width: 15px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .saveAlarmZoneWrapper .sAZImgWrap .sAZTxt {
    margin-left: 5px;
    font-size: 8pt;
    font-weight: bold;
    color: #fef4cb;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .saveAlarmZoneWrapper .sAZImgWrap:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .saveAlarmZoneWrapper .sAZImgWrap:hover {
    opacity: 0.85;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .saveAlarmZoneWrapper .sAZImgWrapDisabled {
    opacity: 0.4;
    cursor: default;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .saveAlarmZoneWrapper .sAZImgWrapDisabled:hover {
    opacity: 0.4;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .saveAlarmZoneWrapper .sAZImgWrapDisabled:active {
    top: 0px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .sAZPoint .sAZImgWrap {
    background: none;
    border: none;
    padding: 0;
    margin-left: 20px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .switchWrapper {
    float: left;
    margin-right: 20px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .switchWrapper .onoffswitch {
    position: relative;
    width: 60px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .switchWrapper .onoffswitch-checkbox {
    display: none;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .switchWrapper .onoffswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .switchWrapper .onoffswitch-inner {
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .switchWrapper .onoffswitch-inner:before,
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .switchWrapper .onoffswitch-inner:after {
    display: block;
    float: left;
    width: 50%;
    height: 20px;
    padding: 2px;
    line-height: 16px;
    font-size: 10px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    box-sizing: border-box;
    background-clip: padding-box;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .switchWrapper .onoffswitch-inner:before {
    content: "ON";
    padding-left: 10px;
    background-color: #52514E;
    color: #fef5ce;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .switchWrapper .onoffswitch-inner:after {
    content: "OFF";
    padding-right: 7px;
    background-color: #52514E;
    color: #C9C7C7;
    text-align: right;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .switchWrapper .onoffswitch-switch {
    display: block;
    width: 30px;
    margin: 0px;
    background: #A1A1A1;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 30px;
    transition: all 0.3s ease-in 0s;
    -webkit-box-shadow: inset 3px 3px 10px 0px #000000;
    -moz-box-shadow: inset 3px 3px 10px 0px #000000;
    box-shadow: inset 3px 3px 10px 0px #000000;
    border-radius: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .switchWrapper .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
    margin-left: 0;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .switchWrapper .onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
    right: 0px;
    background-color: #ffcb32;
    -webkit-box-shadow: inset 3px 3px 10px 0px #000000;
    -moz-box-shadow: inset 3px 3px 10px 0px #000000;
    box-shadow: inset 3px 3px 10px 0px #000000;
    border-radius: 10px;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRow .alarmError {
    float: left;
    color: #f00;
    font-weight: bold;
    font-size: 8pt;
    margin-left: 30%;
  }
  html body .view-container .view-frame .infobar .infobarContent #alarmTab .drawAlarm .dAlarmNew .dAlarmNewRowLast {
    margin-top: 15px;
  }
  html body .view-container .view-frame .infobar .weatherContainer {
    position: absolute !important;
    width: 100%;
    bottom: -90px;
    height: 85px;
    background: #303030;
    border-top: 1px solid #757474;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#45484d+0,000000+100;Black+3D+%231 */
    background: #45484d;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #45484d 0%, #000000 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #45484d), color-stop(100%, #000000));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #45484d 0%, #000000 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #45484d 0%, #000000 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #45484d 0%, #000000 100%);
    /* IE10+ */
    background: linear-gradient(135deg, #45484d 0%, #000000 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#45484d', endColorstr='#000000', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow1 {
    height: 40%;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow2 {
    height: 60%;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow {
    float: left;
    width: 100%;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherImg {
    float: left;
    width: 38px;
    margin-left: 8px;
    margin-top: -2px;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherLocation {
    float: left;
    margin-left: 8px;
    margin-top: 0px;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherLocation .weatherLocationCity {
    margin: 0;
    font-size: 10pt;
    font-weight: bold;
    color: #fef4cb;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherLocation .weatherLocationCountry {
    margin: 0;
    font-size: 9pt;
    color: #999090;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherDegrees {
    float: left;
    margin-top: -5px;
    margin-left: 5px;
    font-size: 23pt;
    color: #fef4cb;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherWorldContainer {
    float: right;
    width: 28px;
    height: 28px;
    margin-top: 5px;
    margin-right: 8px;
    border-radius: 5px;
    border: 1px solid #595757;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
    background: #7d7e7d;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #7d7e7d 0%, #0e0e0e 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #7d7e7d), color-stop(100%, #0e0e0e));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #7d7e7d 0%, #0e0e0e 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #7d7e7d 0%, #0e0e0e 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #7d7e7d 0%, #0e0e0e 100%);
    /* IE10+ */
    background: linear-gradient(135deg, #7d7e7d 0%, #0e0e0e 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    cursor: pointer;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherWorldContainer .weatherWorld {
    width: 100%;
    height: 100%;
    background: url('../../img/weather/worldWeather.png') no-repeat center center;
    background-size: 15px;
    float: right;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherCrossHairContainer {
    float: right;
    width: 28px;
    height: 28px;
    margin-top: 5px;
    margin-right: 8px;
    border-radius: 5px;
    border: 1px solid #595757;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7d7e7d+0,0e0e0e+100;Black+3D */
    background: #7d7e7d;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #7d7e7d 0%, #0e0e0e 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #7d7e7d), color-stop(100%, #0e0e0e));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #7d7e7d 0%, #0e0e0e 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #7d7e7d 0%, #0e0e0e 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #7d7e7d 0%, #0e0e0e 100%);
    /* IE10+ */
    background: linear-gradient(135deg, #7d7e7d 0%, #0e0e0e 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#7d7e7d', endColorstr='#0e0e0e', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    cursor: pointer;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherCrossHairContainer .weatherCrosshair {
    width: 100%;
    height: 100%;
    background: url('../../img/weather/crosshair.png') no-repeat center center;
    background-size: 15px;
    float: right;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherCrossHairContainer:hover {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#0e0e0e+0,7d7e7d+100 */
    background: #0e0e0e;
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, #0e0e0e 0%, #7d7e7d 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #0e0e0e), color-stop(100%, #7d7e7d));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(-45deg, #0e0e0e 0%, #7d7e7d 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(-45deg, #0e0e0e 0%, #7d7e7d 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(-45deg, #0e0e0e 0%, #7d7e7d 100%);
    /* IE10+ */
    background: linear-gradient(135deg, #0e0e0e 0%, #7d7e7d 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0e0e0e', endColorstr='#7d7e7d', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherCrossHairContainer:active {
    opacity: 0.6;
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherCrossHairContainerPressed {
    opacity: 0.5;
    border: 1px solid #C2C0C0;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherImg2 {
    float: left;
    width: 18px;
    margin-top: 5px;
    margin-left: 12px;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherInfo {
    float: left;
    margin-left: 10px;
    margin-right: 3px;
    margin-top: 3px;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherInfo .weatherValue {
    margin-top: -1px;
    margin-bottom: 0px;
    font-size: 8pt;
    font-weight: bold;
    color: #fef4cb;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherInfo .weatherLabel {
    margin-top: -2px;
    font-size: 8pt;
    color: #999090;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherDateTime {
    float: right;
    width: 100%;
    margin-right: 8px;
    margin-top: 0px;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherDateTime .weatherDate {
    float: left;
    text-align: right;
    margin-top: 2px;
    margin-right: -10px;
    margin-left: 15px;
    font-size: 8pt;
    font-weight: bold;
    color: #999090;
  }
  html body .view-container .view-frame .infobar .weatherContainer .weatherRow .weatherDateTime .weatherTime {
    float: right;
    text-align: right;
    margin-top: -1px;
    margin-bottom: 0px;
    margin-right: 5px;
    margin-left: 5px;
    font-size: 10pt;
    font-weight: bold;
    color: #BFB6B6;
  }
  html body .view-container .view-frame .infobarSmallscreen {
    display: none;
  }
  html body .view-container .view-frame .navigationBar {
    width: 35px;
    height: 170px;
    background: #2a2929;
    position: absolute;
    top: 30%;
    right: 0;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    padding-top: 15px;
    padding-bottom: 5px;
  }
  html body .view-container .view-frame .navigationBar .navigationSelected {
    background-color: #424242;
  }
  html body .view-container .view-frame .navigationBar .zoomBorder {
    opacity: 0.2;
  }
  html body .view-container .view-frame .navigationBar .navigationItem {
    float: left;
    width: 96%;
    margin-left: 2%;
    height: 35px;
    border-radius: 5px;
  }
  html body .view-container .view-frame .navigationBar .navigationItem .navigationItemImg {
    width: 100%;
    height: 100%;
  }
  html body .view-container .view-frame .navigationBar .navigationItem #navPositionImg {
    background: url('../../img/navigation/navigation.png') no-repeat;
    background-size: 20px;
    background-position: center;
  }
  html body .view-container .view-frame .navigationBar .navigationItem #navSelectImg {
    background: url('../../img/navigation/selectHand.png') no-repeat;
    background-size: 20px;
    background-position: center;
  }
  html body .view-container .view-frame .navigationBar .navigationItem #navGoToImg {
    background: url('../../img/navigation/bullseye.png') no-repeat;
    background-size: 20px;
    background-position: center;
  }
  html body .view-container .view-frame .navigationBar .navigationItem #navZoomInImg {
    background: url('../../img/navigation/zoomIn.png') no-repeat;
    background-size: 20px;
    background-position: center;
  }
  html body .view-container .view-frame .navigationBar .navigationItem #navZoomOutImg {
    background: url('../../img/navigation/zoomOut.png') no-repeat;
    background-size: 20px;
    background-position: center;
  }
  html body .view-container .view-frame .navigationBar .navigationItem #navDragImg {
    background: url('../../img/navigation/drag.png') no-repeat;
    background-size: 20px;
    background-position: center;
  }
  html body .view-container .view-frame .navigationBar .navigationItem:hover {
    background: #3D3D3D;
    cursor: pointer;
  }
  html body .view-container .view-frame .navigationBar .navigationSeparator {
    float: left;
    width: 100%;
    border-top: 1px solid #e6d9d9;
    height: 1px;
  }
  html body .view-container .view-frame .popupChangePassword {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 290px;
    /* adjust as per your needs */
    height: 250px;
    /* adjust as per your needs */
    margin-left: -145px;
    /* negative half of width above */
    margin-top: -125px;
    background: #2a2929;
    border-radius: 3px;
    border: solid 1px #a4a07d;
    padding: 2px;
    z-index: 102;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent {
    background: white;
    height: 245px;
    padding: 10px 20px 10px 20px;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent .cpTitle {
    font-size: 8pt;
    font-weight: bold;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent .cpRow {
    width: 100%;
    float: left;
    margin-top: 10px;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent .cpRow .cpLabel {
    float: left;
    width: 40%;
    font-size: 8pt;
    color: #6E6E6E;
    margin-top: 3px;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent .cpRow .cpInput {
    float: left;
    width: 60%;
    background: #F7F7F7;
    padding: 0px 5px 0px 5px;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent .cpRow .cpInput:focus {
    outline: none;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent .cpRow .cpSuccess {
    color: #71CF13;
    font-weight: bold;
    font-size: 9pt;
    margin: 0;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent .cpRow .cpError {
    color: #ef1717;
    font-weight: bold;
    font-size: 9pt;
    margin: 0;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent .cpRow .cpSaveButton {
    float: left;
    position: relative;
    left: 15%;
    bottom: 0px;
    width: 100px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #428041), color-stop(1, #68D969));
    background: -moz-linear-gradient(center top, #428041 5%, #68D969 100%);
    background-color: #428041;
    border-radius: 4px;
    border: 1px solid #84F385;
    padding: 3px 8px 3px 8px;
    color: #F5F5F5;
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent .cpRow .cpSaveButton:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68D969), color-stop(1, #428041));
    background: -moz-linear-gradient(center top, #68D969 5%, #428041 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#68D969', endColorstr='#428041');
    background-color: #68D969;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent .cpRow .cpSaveButton:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent .cpRow .cpSaveButton:focus {
    outline: none;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent .cpRow .cpCloseButton {
    float: left;
    position: relative;
    left: 20%;
    bottom: 0px;
    width: 100px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #416180), color-stop(1, #68a0d9));
    background: -moz-linear-gradient(center top, #416180 5%, #68a0d9 100%);
    background-color: #416180;
    border-radius: 4px;
    border: 1px solid #84bbf3;
    padding: 3px 8px 3px 8px;
    color: #F5F5F5;
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent .cpRow .cpCloseButton:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a0d9), color-stop(1, #416180));
    background: -moz-linear-gradient(center top, #68a0d9 5%, #416180 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a0d9', endColorstr='#416180');
    background-color: #68a0d9;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent .cpRow .cpCloseButton:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .popupChangePassword .changePasswordContent .cpRow .cpCloseButton:focus {
    outline: none;
  }
  html body .view-container .view-frame .popupConfiguration {
    position: absolute;
    top: 40px;
    left: 0px;
    width: 100%;
    /* adjust as per your needs */
    height: 90%;
    /* adjust as per your needs */
    min-height: 230px;
    max-height: 400px;
    margin-left: 0px;
    /* negative half of width above */
    margin-top: 0px;
    background: #2a2929;
    border-radius: 3px;
    border: solid 1px #a4a07d;
    padding: 2px;
    z-index: 104;
    overflow: auto;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent {
    background: white;
    height: 99%;
    min-height: 400px;
    padding: 10px;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent #measuringDiv {
    width: 1in;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .confTitle {
    font-size: 8pt;
    font-weight: bold;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conDescription {
    font-size: 8pt;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conActualProperties {
    float: left;
    width: 100%;
    border: solid 1px #4a4a4a;
    border-radius: 5px;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conActualProperties .conAPTitle {
    margin: 0;
    margin-top: 3px;
    margin-left: 5px;
    float: left;
    width: 100%;
    font-size: 8pt;
    font-weight: bold;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conActualProperties .conAPRow {
    float: left;
    width: 100%;
    margin-top: 5px;
    margin-bottom: 5px;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conActualProperties .conAPRow .conAPLabel {
    float: left;
    margin: 0;
    width: 40%;
    margin-left: 10%;
    font-size: 8pt;
    font-weight: bold;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conActualProperties .conAPRow .conAPValue {
    float: left;
    margin: 0;
    font-size: 8pt;
    width: 50%;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conManSettingsRow {
    float: left;
    width: 100%;
    margin: 5px 0px 0px 0px;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conManSettingsRow .manSettingsChbxLbl {
    display: none;
    font-size: 9pt;
    font-weight: bold;
    width: 100%;
    float: left;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conManSettingsRow .manSettingsChbxLbl input {
    margin-right: 10px;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conManualSettings {
    width: 100%;
    float: left;
    border: solid 1px #4a4a4a;
    border-radius: 5px;
    padding: 5px;
    height: 300px;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conManualSettings .conManualSettingsTitle {
    font-size: 9pt;
    font-weight: bold;
    width: 100%;
    float: left;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conManualSettings .conMsRow {
    float: left;
    width: 50%;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conManualSettings .conMsRow .conMsLabel {
    float: left;
    margin: 0;
    width: 40%;
    margin-left: 10%;
    font-size: 8pt;
    font-weight: bold;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conManualSettings .conMsRow .conMsInput {
    float: left;
    width: 30%;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conManualSettings #canvasRow {
    height: 220px;
    width: 100%;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conManualSettings .conMsRowBottom {
    width: 100%;
    font-size: 8pt;
    text-decoration: underline;
    margin-bottom: 60px;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conPresets {
    width: 100%;
    float: left;
    border: solid 1px #4a4a4a;
    border-radius: 5px;
    padding: 10px;
    height: 100px;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conPresets .conPresetsTitle {
    font-size: 9pt;
    font-weight: bold;
    width: 100%;
    float: left;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conPresets .conPresetsRow {
    float: left;
    width: 100%;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conPresets .conPresetsRow .conPresetsLabel {
    margin-left: 0px;
    float: left;
    font-size: 8pt;
    font-weight: bold;
    width: 100%;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conPresets .conPresetsRow .conPresetsSelect {
    float: left;
    width: 110px;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conPresets .conPresetsRow .conPresetsSelect:focus {
    outline: none;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conPresets .conPresetsRow .conPresetsDetectButton {
    margin-left: 20px;
    margin-top: 0px;
    float: left;
    width: 120px;
    position: relative;
    bottom: 0px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #428041), color-stop(1, #68D969));
    background: -moz-linear-gradient(center top, #428041 5%, #68D969 100%);
    background-color: #428041;
    border-radius: 4px;
    border: 1px solid #84F385;
    padding: 3px 8px 3px 8px;
    color: #F5F5F5;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conPresets .conPresetsRow .conPresetsDetectButton:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68D969), color-stop(1, #428041));
    background: -moz-linear-gradient(center top, #68D969 5%, #428041 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#68D969', endColorstr='#428041');
    background-color: #68D969;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conPresets .conPresetsRow .conPresetsDetectButton:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conPresets .conPresetsRow .conPresetsDetectButton:focus {
    outline: none;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conButtonsRow {
    float: left;
    width: 100%;
    margin-top: 10px;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conButtonsRow .conApplyButton {
    float: right;
    margin-right: 8px;
    width: 85px;
    position: relative;
    bottom: 0px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #428041), color-stop(1, #68D969));
    background: -moz-linear-gradient(center top, #428041 5%, #68D969 100%);
    background-color: #428041;
    border-radius: 4px;
    border: 1px solid #84F385;
    padding: 3px 8px 3px 8px;
    color: #F5F5F5;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conButtonsRow .conApplyButton:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68D969), color-stop(1, #428041));
    background: -moz-linear-gradient(center top, #68D969 5%, #428041 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#68D969', endColorstr='#428041');
    background-color: #68D969;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conButtonsRow .conApplyButton:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conButtonsRow .conApplyButton:focus {
    outline: none;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conButtonsRow .conResetButton {
    float: right;
    margin-right: 8px;
    width: 85px;
    position: relative;
    bottom: 0px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #B53E3E), color-stop(1, #D96868));
    background: -moz-linear-gradient(center top, #B53E3E 5%, #D96868 100%);
    background-color: #B53E3E;
    border-radius: 4px;
    border: 1px solid #F38484;
    padding: 3px 8px 3px 8px;
    color: #F5F5F5;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conButtonsRow .conResetButton:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #D96868), color-stop(1, #B53E3E));
    background: -moz-linear-gradient(center top, #D96868 5%, #B53E3E 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#D96868', endColorstr='#B53E3E');
    background-color: #D96868;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conButtonsRow .conResetButton:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conButtonsRow .conResetButton:focus {
    outline: none;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conButtonsRow .conCloseButton {
    float: right;
    position: relative;
    width: 85px;
    bottom: 0px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #416180), color-stop(1, #68a0d9));
    background: -moz-linear-gradient(center top, #416180 5%, #68a0d9 100%);
    background-color: #416180;
    border-radius: 4px;
    border: 1px solid #84bbf3;
    padding: 3px 8px 3px 8px;
    color: #F5F5F5;
    font-size: 0.75em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conButtonsRow .conCloseButton:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a0d9), color-stop(1, #416180));
    background: -moz-linear-gradient(center top, #68a0d9 5%, #416180 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a0d9', endColorstr='#416180');
    background-color: #68a0d9;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conButtonsRow .conCloseButton:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .popupConfiguration .configurationContent .conButtonsRow .conCloseButton:focus {
    outline: none;
  }
  html body .view-container .view-frame .popupAbout {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    /* adjust as per your needs */
    height: 160px;
    /* adjust as per your needs */
    margin-left: -125px;
    /* negative half of width above */
    margin-top: -130px;
    background: #2a2929;
    border-radius: 3px;
    border: solid 1px #a4a07d;
    padding: 2px;
  }
  html body .view-container .view-frame .popupAbout .aboutContent {
    background: white;
    height: 155px;
    padding: 20px;
  }
  html body .view-container .view-frame .popupAbout .aboutContent .aboutLogo {
    width: 100%;
  }
  html body .view-container .view-frame .popupAbout .aboutContent .aboutTxt {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 12pt;
    font-weight: bold;
    text-align: center;
    width: 100%;
  }
  html body .view-container .view-frame .popupAbout .aboutContent .aboutBottom {
    position: absolute;
    bottom: 0;
    width: 85%;
    margin-bottom: 20px;
  }
  html body .view-container .view-frame .popupAbout .aboutContent .aboutBottom .closeBtn {
    position: relative;
    left: 50%;
    bottom: 0px;
    margin-left: -50px;
    width: 100px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #416180), color-stop(1, #68a0d9));
    background: -moz-linear-gradient(center top, #416180 5%, #68a0d9 100%);
    background-color: #416180;
    border-radius: 4px;
    border: 1px solid #84bbf3;
    padding: 3px 8px 3px 8px;
    color: #F5F5F5;
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
  }
  html body .view-container .view-frame .popupAbout .aboutContent .aboutBottom .closeBtn:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a0d9), color-stop(1, #416180));
    background: -moz-linear-gradient(center top, #68a0d9 5%, #416180 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a0d9', endColorstr='#416180');
    background-color: #68a0d9;
  }
  html body .view-container .view-frame .popupAbout .aboutContent .aboutBottom .closeBtn:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .popupLegend {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    /* adjust as per your needs */
    margin-left: -125px;
    /* negative half of width above */
    margin-top: -150px;
    background: #2a2929;
    border-radius: 3px;
    border: solid 1px #a4a07d;
    padding: 2px;
    z-index: 102;
  }
  html body .view-container .view-frame .popupLegend .legendContent {
    float: left;
    background: white;
  }
  html body .view-container .view-frame .popupLegend .legendContent .legendTitle {
    font-size: 12pt;
    font-weight: bold;
    margin-left: 20px;
    margin-top: 10px;
    text-transform: uppercase;
  }
  html body .view-container .view-frame .popupLegend .legendContent .legendInnerContent {
    overflow: auto;
    max-height: 300px;
    padding: 10px 20px 10px 20px;
  }
  html body .view-container .view-frame .popupLegend .legendContent .legendInnerContent .legendRow {
    float: left;
    width: 100%;
    margin-bottom: 20px;
  }
  html body .view-container .view-frame .popupLegend .legendContent .legendInnerContent .legendRow .legendImg {
    float: left;
    margin-right: 20px;
    width: 25px;
  }
  html body .view-container .view-frame .popupLegend .legendContent .legendInnerContent .legendRow .legendTxt {
    float: left;
    width: 142px;
    font-weight: bold;
    color: #7d7e7d;
    font-size: 10pt;
    text-transform: uppercase;
    margin-top: 3px;
  }
  html body .view-container .view-frame .popupLegend .legendContent .legendBottom {
    float: left;
    width: 100%;
    margin-top: 15px;
    margin-bottom: 5px;
  }
  html body .view-container .view-frame .popupLegend .legendContent .legendBottom .closeBtn {
    position: relative;
    left: 50%;
    bottom: 0px;
    margin-left: -50px;
    width: 100px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #416180), color-stop(1, #68a0d9));
    background: -moz-linear-gradient(center top, #416180 5%, #68a0d9 100%);
    background-color: #416180;
    border-radius: 4px;
    border: 1px solid #84bbf3;
    padding: 3px 8px 3px 8px;
    color: #F5F5F5;
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
  }
  html body .view-container .view-frame .popupLegend .legendContent .legendBottom .closeBtn:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a0d9), color-stop(1, #416180));
    background: -moz-linear-gradient(center top, #68a0d9 5%, #416180 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a0d9', endColorstr='#416180');
    background-color: #68a0d9;
  }
  html body .view-container .view-frame .popupLegend .legendContent .legendBottom .closeBtn:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .popupLanguages {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 250px;
    /* adjust as per your needs */
    height: auto;
    /* adjust as per your needs */
    margin-left: -125px;
    /* negative half of width above */
    margin-top: -155px;
    background: #2a2929;
    border-radius: 3px;
    border: solid 1px #a4a07d;
    padding: 2px;
    z-index: 102;
  }
  html body .view-container .view-frame .popupLanguages .languagesContent {
    background: white;
    height: auto;
    padding: 10px 20px;
  }
  html body .view-container .view-frame .popupLanguages .languagesContent .langTitle {
    font-size: 8pt;
    font-weight: bold;
  }
  html body .view-container .view-frame .popupLanguages .languagesContent .langWrap {
    width: 100%;
    margin-top: 5px;
    cursor: pointer;
    padding: 1px 0;
  }
  html body .view-container .view-frame .popupLanguages .languagesContent .langWrap .langImg {
    display: inline;
    width: 15px;
    margin-right: 10px;
    margin-left: 35px;
  }
  html body .view-container .view-frame .popupLanguages .languagesContent .langWrap .langTxt {
    display: inline;
    text-transform: uppercase;
  }
  html body .view-container .view-frame .popupLanguages .languagesContent .langWrap:hover {
    border-top: solid 1px #D6D4D4;
    border-bottom: solid 1px #D6D4D4;
    background: #F7F7F7;
  }
  html body .view-container .view-frame .popupLanguages .languagesContent .languagesBottom {
    position: static;
    bottom: 0;
    width: 100%;
    margin: 10px 0 0 0;
  }
  html body .view-container .view-frame .popupLanguages .languagesContent .languagesBottom .closeBtn {
    position: relative;
    left: 50%;
    bottom: 0px;
    margin-left: -50px;
    width: 100px;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #416180), color-stop(1, #68a0d9));
    background: -moz-linear-gradient(center top, #416180 5%, #68a0d9 100%);
    background-color: #416180;
    border-radius: 4px;
    border: 1px solid #84bbf3;
    padding: 3px 8px 3px 8px;
    color: #F5F5F5;
    font-size: 0.9em;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
  }
  html body .view-container .view-frame .popupLanguages .languagesContent .languagesBottom .closeBtn:hover {
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #68a0d9), color-stop(1, #416180));
    background: -moz-linear-gradient(center top, #68a0d9 5%, #416180 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#68a0d9', endColorstr='#416180');
    background-color: #68a0d9;
  }
  html body .view-container .view-frame .popupLanguages .languagesContent .languagesBottom .closeBtn:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame .RightBottomPopUpWindow {
    position: absolute;
    bottom: 83px;
    right: 25px;
    max-width: 200px;
  }
  html body .view-container .view-frame .RightBottomPopUpWindow .newMessagePopUp {
    float: right;
    width: 90px;
    height: 90px;
    background: rgba(41, 41, 41, 0.4);
    border-radius: 5px;
    box-shadow: 5px 5px 20px grey;
    border: 1px solid #8C8C8C;
    cursor: pointer;
  }
  html body .view-container .view-frame .RightBottomPopUpWindow .newMessagePopUp .newMessageImg {
    float: left;
    width: 40px;
    margin-left: 25px;
    margin-right: 25px;
    margin-top: 3px;
  }
  html body .view-container .view-frame .RightBottomPopUpWindow .newMessagePopUp .newMessageNr {
    position: absolute;
    background: red;
    margin-left: 50px;
    margin-top: 25px;
    padding: 0px 4px 0px 4px;
    border-radius: 10px;
    color: #E1E1E1;
    font-size: 9pt;
  }
  html body .view-container .view-frame .RightBottomPopUpWindow .newMessagePopUp .newMessageTxt {
    float: left;
    width: 100%;
    margin-top: 3px;
    text-align: center;
    font-size: 7pt;
    font-weight: bold;
    color: #E1E1E1;
    text-transform: uppercase;
  }
  html body .view-container .view-frame .RightBottomPopUpWindow .historyPopUp {
    float: right;
    width: 60px;
    height: 50px;
  }
  html body .view-container .view-frame .RightBottomPopUpWindow .historyPopUp .historyItems {
    float: right;
    width: 60px;
    height: 50px;
    margin: 5px;
    background: rgba(41, 41, 41, 0.4);
    border-radius: 5px;
    box-shadow: 5px 5px 20px grey;
    border: 1px solid #8C8C8C;
    cursor: pointer;
  }
  html body .view-container .view-frame .RightBottomPopUpWindow .historyPopUp .historyItems .historyImg {
    float: left;
    width: 24px;
    margin-left: 18px;
    margin-right: 18px;
    margin-top: 4px;
  }
  html body .view-container .view-frame .RightBottomPopUpWindow .historyPopUp .historyItems .historyTxt {
    float: left;
    width: 100%;
    margin-top: 5px;
    text-align: center;
    font-size: 6pt;
    font-weight: bold;
    color: #E1E1E1;
    text-transform: uppercase;
  }
  html body .view-container .view-frame .RightBottomPopUpWindow .historyPopUp .historyItems:hover {
    opacity: 0.8;
  }
  html body .view-container .view-frame .RightBottomPopUpWindow .historyPopUp .historyItems:active {
    position: relative;
    top: 1px;
  }
  html body .view-container .view-frame #waterwayContainer {
    position: absolute !important;
    top: 0;
    bottom: 0;
    z-index: 0;
    right: 0;
    left: 0;
    background: #F2F0F0;
    overflow-x: auto;
  }
  html body .view-container .view-frame #waterwayContainer .wwNoSupport {
    font-size: 16pt;
    padding: 80% 20%;
    height: 100%;
  }
  html body .view-container .view-frame #waterwayContainer .wwEtaBoxWrapper {
    display: none;
  }
  html body .view-container .view-frame #waterwayContainer .wwCont {
    display: none;
  }
  html body .view-container .view-frame .waterwayContainerInfobarCollapsed {
    padding-left: 0 !important;
  }
}