/*
 * Copyright (c) 2005-2015 Silver Peak Systems, Inc.
 * All rights reserved.
 */
 

/* get rid of webkit outlines */
@-viewport {width:device-width;}
*:focus {outline:none}

A {
  text-decoration : none ; 
  color : #5555AA
}

A.link {
  text-decoration : underline ; 
  color : #0000FF
}

A:hover {
  text-decoration : none ;
  color : #666;
}

A.tabs { 
  text-decoration : none ; 
  color : #000000 
}

A.tabs:hover { 
  text-decoration : none ; 
  color : #AA0000 
}

A.sidebar_sel { 
  text-decoration : none ; 
  color : #FFFFFF 
}

A.sidebar_sel:hover { 
  text-decoration : none ; 
  color : #FFFFFF 
}

A.sidebar_unsel { 
  text-decoration : none ; 
  color : #000000 
}

A.sidebar_unsel:hover { 
  text-decoration : none ; 
  color : #AA0000 
}

H2 { 
  font-size: 14pt;
  margin-bottom: 5px 
}

H3 { 
  font-size: 12pt;
  margin-bottom: 5px 
}

FORM { 
  padding-top: 0px; padding-bottom: 0px; 
  border-top: 0px; border-bottom: 0px; 
  margin-top: 3px; margin-bottom: 3px; 
}

body.print {
  margin: 8px;
  background: #FFFFFF;
}

p,li,td,th {
  font-size: 11px;
}

p.tbl_hdr {
  color: #FFFFFF;
  font-size: 11px;
  font-weight: bold;
}

p.tbl_data {
  font-size: 11px;
}

p {margin:0px;}
/*layout helpers: spacers*/
.margin_top10 {
  margin-top:10px;
}
.margin_top20 {
    margin-top:20px;
}
.margin_top5 {
  margin-top:5px;
}
.margin_top2 {
  margin-top:2px;
}
.margin_bottom10 {
  margin-bottom:10px;
}
.margin_left10 {
  margin-left:10px;
}
.margin_left20 {
  margin-left:20px;
}
.margin_left30 {
    margin-left:30px;
}
.padding_left30 {
  padding-left: 30px;
}
.padding_left5 {
  padding-left:5px;
}
.padding_btm_5 {
  padding-bottom:5px
}
.padding_top_5 {
    padding-top:5px
}
.margin_right20 {
  margin-right: 20px;
}
.margin_right30 {
  margin-right: 30px;
}
.content_pane_title {
  font-family: arial, helvetica, sans-serif, tahoma;
  font-size: 12pt;
  font-weight: bold;
  padding:0px 0px 5px 20px;
  color:#545454;
}
.sectionTitle, .pageTitle {
    margin: 10px 0 10px 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5em;
    color: #545454;
    font-weight: bold;
    overflow: visible;
}

.inlineContainer {
    display:inline-block;
    vertical-align: top;
}
/*for table layout*/
.table {
  display:table;
  border-top:1px solid #bbb;
  border-left:1px solid #bbb;  
 }
 .th {
   display:table-header-group;
}
.tr {
  display:table-row;
}
.td {
  display:table-cell;
  border-right:1px solid #bbb;
  border-bottom:1px solid #bbb;
  padding: 2px;
}
tr.hdr {
  background: #053868;
}

input,select, textarea {
  font-size: 11px;
  border:1px solid #aaa;
  border-radius: 2px;
  margin-bottom: 2px;
  vertical-align: middle;
}
input {
  padding-left:4px;
  
}
input[type=file] {
  padding:0;
  border:none;
}
select::-ms-expand { /* style IE arrow button  */
  border: none;
  width: 12px;
  margin-left: 4px;
  color: #333;
  background:none;
}
input[type='checkbox'], .pointer {cursor:pointer;}
input[type='checkbox'] + label, input[type='radio'] + label {
  border-radius:2px;
  padding:0 5px;
  cursor:pointer;
}
/*remove placeholder text on focus*/
input:focus::-webkit-input-placeholder { color:transparent; }
input:focus:-moz-placeholder { color:transparent; }
input:focus::-moz-placeholder { color:transparent; }
input:focus:-ms-input-placeholder { color:transparent; }

label {
  display: inline-table;
  line-height: 24px;
  vertical-align: middle;
}
.lightLabel {
  color:#777;
}
/* exceptions where we don't want as much vertical spacing */
.ui-multiselect-checkboxes label, .appList label, td label {
  line-height:normal !important;
}
.label_xxsmall{
  width:50px;
}
.label_xsmall{
  width:80px;
}
.label_small {
  width:100px;
}
.label_med {
  width:160px;
}
.label_large {
  width:200px;
}
.chkLabel {
  border-radius:2px;
  padding:0;
  cursor:pointer;
}
input[type='checkbox'][role!='button'] + label:hover,  input[type='radio'][role!='button'] + label:hover, .chkLabel:hover {
  background:#DEEEFD;
}
/* put any labels here that shouldn't be vertically spaced and assigned widths */
.ui-multiselect-checkboxes label, .mega-menu label, .appCheckbox ~ label, #customizeTable label {
  line-height:normal !important;
  vertical-align:inherit !important;
  display:inline !important;
}
/* Main Menu customizations */
.menu {
  background-color:#f1f1f1;
} 
.mega-menu > li > a {
  background:none !important;
  padding-top: 6px !important;
}
.mega-menu > li:hover {
  background:#e5e5e5;
}
 /*override megamenu*/
.mega-menu li {
  white-space:nowrap;
}
.megaSubHeading {
  font-size:.8em;
  color:#555;
  margin-left:5px;
}
.mega-menu li .sub {
padding: 0px 8px !important; 
}
.megaSubIndent {
  margin-left:10px
}
.mega-hdr-a {
  cursor:default !important;
}
.mega-menu li .sub li.mega-hdr {
  margin: 8px 5px 0 5px !important; 
  padding-bottom: 5px;
}
.separator-after {
  border-bottom:1px solid #ccc;
  margin-bottom:3px !important;
  padding-bottom:3px !important;
 }
form {
  margin: 0px;
}


div.dividerline { background-color: #999999; height: 1px}

.navtbl {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  background-color: #fbfcfd;
  border: 1px solid #9faab1;
  padding-bottom: 12px;
}
.rowlinet {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #999999;
}
.rowlineb {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: #999999;
}

div.nav {
  font-family: Verdana, Arial, sans-serif;
  line-height: 160%;
  font-size: 11px;
}
div.nav ul {
  margin: 0 0 10px 0;
  padding: 0;
  list-style-type: none;
}
div.nav li {
  margin: 0 0 0 0;
  padding: 0;
  list-style-type: none;
  display: inline;
}

div.nav li.active{
     display:block;
     width:16em;
  font-weight: bold;
     font-size: 10px;
  background-color: #C9D0E0;
}

div.nav li.title {
  display: block;
  color: #ffffff;
  font-weight: bold;
  padding: 1px 0 1px 6px;
  margin: 0;
  background-color: #5979a5;
}
div.nav a:link, div.nav a:visited {
  padding: 0 0 0 16px;
  margin: 0;
  color: #434d68;
  text-decoration: none;
  display: block;
}

div.nav a:hover, div.nav a:visited:hover {
  color: #434d68;
  background-color: #C9D0E0;
}

div.monitorhelp {
   font-size: 14px;
   font-weight: bold ;
   color: #0000aa;
   background: #ffffff;
   padding: 4 3 3 5;
   width: 600;
}


td.white {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
    padding: 4 3 3 5;
    background: #ffffff;
}

td.whitenopadding {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  font-weight: normal;
    background: #ffffff;
}

td.tabval {
  font-family: verdana,helvetica;
  color: #000000;
  background-color: #ffffff;
  font-weight: plain;
  font-size: 10pt;
}

td.tabhead {
  font-family: verdana,helvetica;
  color: #ffffff;
  font-weight: bold;
  font-size: 10pt;
}


/* TABLE--------------------------------------------------------------*/
.panelTable{width:100%; cellpadding:0px; cellspacing:0px; border:0px; background-color:#FBFCFD;}
.panelTable1{cellpadding:0px; cellspacing:0px; border:0px; background-color:#FBFCFD;}

/* GLOBAL DEFINITIONS---from Beth---------------------------------------------------------*/
body {
  FONT-SIZE: 11px; 
  FONT-FAMILY: tahoma, arial, helvetica, sans-serif; 
  MARGIN: 0px; 
  line-height: 1.2em;
  position:absolute;
  top:0;
  right:0;
  bottom:60px;
  left:0;
  color: #444;
}
/* override jquery fonts, buttons */
.ui-widget {
    font-family:Tahoma,Verdana,Arial,sans-serif;
    font-size:1.1em;
}
.ui-widget .ui-widget {
    font-size:1em;
}
.ui-widget input, .ui-widget select, .ui-widget textarea, .ui-widget button {
    font-family:Tahoma,Verdana,Arial,sans-serif;
    font-size:1em;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
    border-bottom-right-radius: 2px;
}
.ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
    border-bottom-left-radius: 2px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
    border-top-right-radius: 2px;
}
.ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
    border-top-left-radius: 2px;
}

/* SITE hEADER DEFINITIONS-------------------------------------------------------*/
.siteheader{width:100%; min-width:1015px; height:60px; background-image:url(../images/header.png); position:fixed; z-index:60;}
.loginHeader {position: static !important}
.loginTitle {margin: 10px 0 0 20px; font-size:1.8em !important; font-style:italic;}
.headerlinks{float:right; margin-top:5px; margin-bottom:5px}
.headerLabel {font-size:11px; color:#fff; text-wrap:none; padding:0px 5px 0px 15px;}
.headerData {font-size:11px; color:#000; text-wrap:none; padding-right:5px; color:#fff; font-weight:bold;}
.headerData a {color:#53A9FF}
.btn-save-reboot {background: orange; font-weight:bold; border-radius:3px; border:1px solid #bbb; z-index:20; padding:3px; position:relative; top:30px; right:-5px; cursor:pointer;}

.ui-dialog .ui-resizable-se {
  width: 16px;
  height: 16px;
  right: 0px; /*-5px;*/
  bottom: 0px; /*-5px;*/
  /* background-position: 16px 16px;*/
}
.ui-icon-gripsmall-diagonal-se {
  background-position: -80px -224px !important;
}

/* Alarm Panal ----------------------------*/
.alarmLabel,.alarmN,.alarmC,.alarmMa,.alarmMi,.alarmW, .alarmWnorm {width:65px; height:25px; border-right:1px solid #aaa; cursor:pointer; text-align:center; float:left; overflow:hidden; display:table-cell; vertical-align:middle;}
.alarmLabel {background-color:#E5E5E5; border-left:1px solid #999; font-size:12px;}
.alarmN {color:#888; background-color:#E5E5E5;}
.alarmC {color:#fff; background-color:red; font-weight:bold;}
.alarmMa {color:#000; background-color:orange; font-weight:bold;}
.alarmMi {color:#000; background-color:yellow; font-weight:bold;}
.alarmW {color:#000; background-color:cyan; font-weight:bold;}
.alarmWnorm {color:#888; background-color:#E5E5E5; border-right:none;} 
.alarmPanel {height:25px; float:right;}
.alarmTxt {line-height:22px;}
form[action="alarm.php"] td {vertical-align:top;}

/* MENU DEFINITIONS--------------------------------------------------------------*/
/*     if z-index for .menutable is changed to a higher number, you will
 *     need to change dhtml dialog's z-index as well so menu item will
 *     not be accessible when dhtml dialog is popped up.
 */
.menutable{min-width:1015px; height:25px; cellpadding:0px; cellspacing:0px; padding:0px; background-color:#e5e5e5; border:1px solid #999; width:100%; position:fixed; top:60px; z-index:60;}
.menulinks{border:0px}
.menu{background-color:#e5e5e5;} /* border-bottom:1px solid #999999; border-right:1px solid #053868;*/
/*.menu{width:100%; background-color:#ffffff; border-bottom:0px solid #999999; border-right:0px solid #ffffff;} */
.hostname {font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; color: #000000;padding-right: 10px; padding-left: 10px;}

/* PAGE HEADER DEFINITIONS-------------------------------------------------------*/
.page_table {width:98%;border-bottom:1px solid #CCCCCC; margin:10 10 0 10px;}
.page_title {FONT-WEIGHT: bold; FONT-SIZE: 10pt; FONT-FAMILY: arial, helvetica, sans-serif, tahoma}

/* CONTENT_LAYOUT DEFINITIONS--------------------------------------------------*/
.main_content_title {
  font-family: arial, helvetica, sans-serif, tahoma;
  font-size: 12pt;
  font-weight: bold;
  padding:4px 0px 5px 20px;
  color:#545454;
  background-color: #fff;
}

.title_section {
  background-color: #fff;
  padding-bottom:10px;
}

.main_content_container {
  padding:5px 0 20px 20px;
  background-color: #fff;
  min-height:calc(100% - 165px);
}
.outer_container {
  background-color: #fff;
  min-height:calc(100% - 165px);
}
/*#wizard .outer_container {
  height:100%;
}*/
FIELDSET {border:1px solid #cccccc; margin:5px 5px 0 0; padding:5px;}
/* for dialogs, supress border */
.sp_dlg_content fieldset {border-width:0; margin:0px 5px 5px 5px; padding:4px 5px 20px 5px;}
LEGEND {color:#000000;  padding:1; FONT-WEIGHT: bold; font-size:12px;}
.sp_dlg_content LEGEND {margin-left: -8px;}
.sp_dlg_content .data_label {color:#777; padding-right:15px;}
.label_color {color:#606060;}

INPUT {FONT-SIZE: 11px;}
SELECT {FONT-SIZE: 11px;}
TEXTAREA {FONT-SIZE: 11px;}
FORM {MARGIN: 0px}
.buttons {margin:10px 20px; padding:5px;}
.label_norm {padding: 5px;}
.label_bold {FONT-WEIGHT: bold; padding: 5px;}
.logs{margin:5 0 0 20; padding:5}

/* DATA TABLE LAYOUT DEFINITIONS-------------------------------------------------*/
TR.hdr {BACKGROUND: #0966BE}
P.tbl_hdr {FONT-WEIGHT: bold; COLOR: #ffffff}
P.tbl_data {FONT-SIZE: 11px}

/* MESSAGING DEFINITIONS-------------------------------------------------------*/
.info_large {color: #009900;font-weight: bold;font-size: xx-large;}
.info_small {color: #009900;font-weight: bold;font-size:12px;}
.warning_large {color: #FF0000;font-weight: bold;font-size: xx-large;}
.warning_small {color: #FF0000;font-weight: bold;font-size:12px;}

.important {color:#f00;}

/* FOOTER DEFINITIONS------------------------------------------------------------*/

/* QoS - Route Maps DEFINITIONS------------------------------------------------------------*/
.lineqos {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #cccccc;
}


.linediv {BACKGROUND: #ffffff}


.reportbars {
  border: 1px solid #cccccc;
}

/* sorting table */
.sortable thead th {
        background-color: #0966BE;      
        font-size: 11px;
        font-weight: bold;
}

table.sortable tr.odd td{
        background-color: #DEEEFD;
}
                                                                                                                                             
table.sortable tr.even td{
        background-color: #FFFFFF;
}

table.sortable tr.pink td{
        background-color: #FFC0CB;
}

table.sortable tr.orange td{
        background-color: #fdc084;
}

table.sortable tr.yellow td{
        background-color: #ffff82;
}

td.numeric,
th.numeric {
        text-align: right;
}

.widgetTitle {
  font-family:Arial, Helvetica, sans-serif;
  font-size:1.5em;
  color:#545454;
  font-weight:bold;
  overflow:visible;
  margin-bottom:3px;
    clear: both;    
}

.title_sm {
  font-size:1em;
}

.widgetTitleLink {
  color:#545454;
}

.legendRow {
  margin-left:5px;
  vertical-align:middle;
}

.widgetLegend {
  margin:0 10px 0 0;
  float:right;
  vertical-align:middle;
}

.widget_link {
  font-size:12px;
  color:blue !important;
  cursor:pointer;
}

.small_widget_link {
  font-size:10px;
  color:blue !important;
  cursor:pointer;
}

#flowInfo .small_widget_link {
  font-size:1em;
}

.small_widget_link:hover {color:blue;}

.sub_nav_links {
  display:inline;
  position: absolute;
  left: 250px;
  top: 106px;
  font-weight:normal;
}
.dynRadio {
  margin-left:15px;}
  
.tFlowsTypeLabel {
  color:#777;
 }
 a.flowAction { color:#00f;}

.data_unavail {  
   position:absolute;
  top:95px;
  left:165px;
  z-index:10;
  font-size:16px; 
  color:#555; 
  background-color:rgba(255,255,255,.9);
  padding:2px 5px 2px 10px;
  text-align:center;
  border-radius:4px;

}

.app_data_unavail { 
    position:absolute;
    top:150px;
    left:300px;
    z-index:10;
    font-size:16px;
    color:#555; 
    width:100px;
    background-color:rgba(255,255,255,.9);
}

.flow_data_unavail { 
    position:absolute;
    top:40%;
    left:40%;
    z-index:10;
    font-size:16px; 
    color:#555; 
    width:100px;
  padding:2px 5px 2px 10px;
    background-color:rgba(255,255,255,.9);
}

.data_unavail_box {
  height:190px;
  width:343px;
  margin-left:48px;
  margin-top:20px; 
  border:1px solid #777;
  clear:both;
  position:relative;
}
.rArrows {font-size:18px;}
.rArrows:hover {color:#666;}

.wizSummary {
  font-size:11px;
  height:170px;
  width:600px;
  overflow:scroll;
  font-family:Arial, Helvetica, sans-serif;
  color:#333333;
  font-weight:bold;
  float:left;
  border:1px solid #ccc;
}

.wizSumSel {
  width:70px;
  height:20px;
  font-size:10px;
  float:left;
  margin-top:3px;
}

.wizSumLabel {
  color:#333333;
  float:left;
  margin-left:10px;
  width:140px;
  clear:both;
  font-style:italic;
  
}

.wizSumData {
  color:#000;
  float:left;
  margin-left:10px;
}

.legendColorBox {padding: 0px;}
.legendLabel {padding: 0px 2px 0px 1px;}
td.legendColorBox > div, td.legendColorBox:hover {border:none; border-radius: 3px;}
td.legendColorBox > div > div {border-radius:2px; border-width:7px !important;}

.rebootText {
  font-size:16px;
  font-style:italic;
  font-weight:bold;
}

.rebootTextSmall {
  font-size:12px;
  font-style:italic;
  font-weight:bold;
}

.loginMsg {
  font-family:Arial, Helvetica, sans-serif;
  font-size:16px;
  font-weight:bold;
  line-height:1.1em;
}

.footer {
  color:#666;
  padding:5px 10px 5px 10px;
  z-index:-1000;
  position: fixed;
  bottom: 0;
  width: calc(100% - 20px);
  text-align: center;
}

.validationMessage {
  color: red;
  margin-left: 5px
}

.validationOkMessage {
  color: blue;
}

/* override jquery styling */
.ui-widget-header {
    background: none;
}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
    border: 1px solid #aaa;
    color: #333;
    background: rgb(241,241,241);
}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active {
    background: #fff;
}
.ui-state-hover,.ui-widget-content .ui-state-hover,.ui-widget-header .ui-state-hover,.ui-state-focus,.ui-widget-content .ui-state-focus,.ui-widget-header .ui-state-focus{
    border:1px solid rgb(0,176,240);
    background:#fff;
    color:rgb(0,176,240);
}
.ui-accordion .ui-accordion-header {
    display:inline;
}
.ui-button .ui-button-text {
    line-height: 1.4em;
}

/* from spd */
/*table .ui-widget-content {border-color:#e1e1e1; border-width:0 0 1px 1px;}*/
tr .ui-widget-header {border-width:0 1px 1px 0;}
.portlet > .ui-widget-header {border-width:0 0 1px 0;}
#menutabs > ul {background:none; border-width:0 0 1px 0;}
#editlink {text-decoration:none; color:blue;}  
.portlet th {background:none; font-size:10px; font-weight:normal;}
.portlet > .ui-widget-header {border-width:0 0 1px 0;}
.ui-widget-header:last-child {border-width:0 0 1px 0;}
.ui-dialog .ui-widget-header {border-width:0 0 1px 0;}
.chartlet {padding-bottom:10px;}
.ui-dialog {
-webkit-box-shadow: 0 5px 9px rgba(0, 0, 0, 0.5);
   -moz-box-shadow: 0 5px 9px rgba(0, 0, 0, 0.5);
  -ms-box-shadow: 0 5px 9px rgba(0, 0, 0, 0.5);
   -o-box-shadow: 0 5px 9px rgba(0, 0, 0, 0.5);
    box-shadow: 0 5px 9px rgba(0, 0, 0, 0.5);
    border-color:#aaa !important;
    width:auto;
    padding: 0;
}
.ui-widget, .ui-widget .ui-widget {
  font-size:11px !important;
}
.ui-widget-content a {
    color:blue;
}
.help-content a {
    color:blue !important;
}
.medInput {
  width:120px;
}

.largeInput {
    width:350px;
}
.smInput {
  width:4em;
}
.xSmInput {
  width:3em;
}

.sp_dlg_ftr {
  height:25px;
  margin:5px 0 0 0;
  padding:10px 15px;
  border-top:1px solid #ccc;
}

.btn_container {
  float:right;
}

.sp_dlg_ftr_btn {
  padding:3px 10px;
}

.ui-dialog-content {
  padding:0 !important;
}

.sp_dlg_content {
  padding:15px;
}
.license_hdr_txt {
  position:absolute; 
  margin:5px 0 0 225px; 
  width:300px; 
  color:#fff; 
  font-size:11px; 
  font-weight:bold;
}

/* button sets */
.ui-button-text {
  font-size: 11px !important;
}

.ui-buttonset .ui-button-text-only .ui-button-text, .ui-button .ui-button-text, input.ui-button {
padding: .1em .6em !important;
}

.ui-buttonset .ui-button {
  margin-right: -.4em !important;
}
.ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { 
  padding: .4em !important;
  text-indent: -9999999px;
}
.ui-button-text-only .ui-button-text {
  padding: .2em .7em !important;
}
input.ui-button {
  padding: .2em .7em !important;
}
.ui-button-icon-only .ui-icon-arrowrefresh-1-e + .ui-button-text{
  padding: 0em !important;
  text-indent: -9999999px;
}

/* Use these classes for linked button set. Eg of linked button set: Time periods [10d, 24hr, 60m] in Appliance Application Dashboard view */
.linkBtnSet .ui-state-default {border:none; background:none; color:blue;}
.linkBtnSet .ui-state-hover {background:#efefef;}
.linkBtnSet .ui-state-active {color:#333;}
.linkBtnSet .ui-button-text-only .ui-button-text {padding:0 .3em;}

.noBorderBtn {
  border:none !important;
  background:none !important;
}
.smallIconBtn .ui-icon, .smallIconBtn.ui-icon{
  padding:1px !important;
  background-image: url(images/ui-icons_btn_blue.png) !important;
  cursor:pointer;
}
.ui-state-hover .ui-icon {
    background-image: url(images/ui-icons-256-240-454545.png) !important;
}
.ui-state-focus .ui-icon, .ui-state-active .ui-icon {
    background-image: url(images/ui-icons_888888_256x240.png);
}
.lighterIcon {
    background-image: url(images/ui-icons_888888_256x240.png) !important;
}
.ui-icon, .ui-widget-content .ui-icon {
    background-image: url(images/ui-icons-256-240-606060.png);
}

.placeholder {
  color: #aaa;
}

.report_container {
  margin:15px 0 0 15px;
}

.page_content_padding {
  padding:5px 0 20px 20px;
  background-color: #fff;
/*  min-height: calc(100% - 220px);
*/}

.table_title {
        font-size:16px;
        color:#333;
}

.table_container {
        margin:10px 0 0 0;
}

.ui-progressbar {
  position:relative;
  width: 100%;
  height: 1.6em /*!important*/;
  margin-top:5px;
}

.progressbarLabel {
  position: absolute;
  left:calc(50% - 25px);
  -moz-left:calc(50% - 25px);
  width:50px;
  text-align:center;
  top: -15px;
}

.progressbar {
  width: 200px;
  z-index:20;
  height: 5px !important;
  overflow:visible !important;
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 20px);
}

.grid-header .progressbar {
  position: absolute;
  left:calc(50% - 100px);
  -moz-left:calc(50% - 100px);
  top: 13px;
  z-index:20;
  height: 5px !important;
  overflow:visible !important;
}

.progressbar .ui-progressbar-value {
  background-color: #36F !important;
}

.pblabel {
  position: absolute;
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.7em;
}
.ui-progressbar-value {
  overflow: hidden;
  margin:0 !important;
  background-color:#C4E1FF !important;
  border:none !important;
}
.ui-progressbar-value .pblabel {
  position: relative;
  font-weight: normal;
  color:blue;
}

input[disabled] {color:#999;}

.cell_right{
  text-align: right;
}

.cell_left{
  text-align: left;
}

.cell_center{
  text-align: center;
}

.cell_readOnly{
  color: #888;
}

.cell_right_readOnly {
  color: #888;
  text-align: right;
}

.in_container {
  height:18px;
  width: 160px;  font-family:Tahoma, Geneva, sans-serif;
  color:#333;
  margin:1px 0 1px;
  overflow:hidden;
  float:right;
  line-height: 14px;
}
.slick-cell .in_container {
  margin:1px -4px 1px;
}
#app_placeholder .in_container, #app_placeholder .out_container {
  width: 120px;
  height:14px;
}
.out_container {
  height:18px;
  width: 160px;
  font-family:Tahoma, Geneva, sans-serif;
  color:#333;
  margin:1px 0 1px;
  overflow:hidden;
  float:left;
  line-height: 14px;
}
.slick-cell .out_container {
  margin:1px 0 1px -4px;
}
#app_placeholder .in_container, #app_placeholder .out_container {
    width: 120px;
  height:16px !important;
  /*margin:2px 0 0 0;*/
}

.inbound {
  float:right;
}
.in_float {
  float:right;
  margin:-1px -1px 0 0;
}
.out_float {
  float:left;
  margin:-1px 0 0 -1px;
}
.outbound {
  float:left;
}
.lan {
  background-color: rgba(80,158,255,.4);
  height:16px;
  border:1px solid rgba(80,158,255,1);
}
.wan {
  background-color: rgba(0,0,153,.4);
  height:100%;
  border:1px solid rgba(0,0,153,1);
  z-index:10;
}

#app_placeholder .lan, #app_placeholder .wan {
  height:12px;
}

.in_label {
  float:right;
  z-index:11;
  color:#000;
  margin:2px 3px 0 2px;
  font-size:10px !important;

}
#app_placeholder .out_label, #app_placeholder .in_label {
  margin-top:0 !important;
}
#app_placeholder .lan .in_label, #app_placeholder .lan .out_label {
  margin-top:-1px !important;
}
.out_label {
  float:left;
  z-index:11;
  color:#000;
  margin:2px 2px 0 3px;
  font-size:10px !important;  
}
.lan .in_label, .lan .out_label {margin-top:1px;}

.inbound_td:not(th) {
  padding:1px 1px 1px 0 !important;
  height:20px;
  text-align: right;
}

.outbound_td:not(th) {
  padding:1px 1px 1px 0 !important;  
  padding:1px 0 1px 0;
  height:20px;
  text-align: left;
}
.inbound_td.slick-cell, .outbound_td.slick-cell {
  padding-left: 4px !important;
  padding-right: 4px !important;
}

#app_placeholder .inbound_td:not(th), #app_placeholder .outbound_td:not(th) {
  height: 16px;
  padding:1px 0 0 0 !important;
}

#top_flows_table_wrapper .fg-toolbar {
  height:0px;
  padding:0px;
  border-bottom:hidden;
}
/* for more settings drop downs */
.more_settings_btn {
  background:url(../images/more_settings.png) no-repeat 90% rgb(245,245,245);
  height:14px; 
  width:50px; 
  border-radius:2px; 
  cursor:pointer;
  padding:1px 1px 1px 5px;
  border:1px solid #888;   
}

.less_state {
  background:url(../images/less_settings.png) no-repeat 90% rgb(245,245,245);
}

.settings_btn {
  background:url(../img/settings.png) no-repeat center rgb(245,245,245);
  opacity:.4; 
  height:18px; 
  width:40px; 
  border:1px solid #888; 
  border-radius:2px; 
  cursor:pointer;
}
.settings_container {
   float:left;
  margin: 0 0 2px 0px;
}
.settings {
  border:1px solid #ccc;
  position:absolute;
  border-radius:2px; 
  padding: 8px; 
  background-color:rgba(255, 255, 255, .9); 
   z-index:200;
}
.more_set_item {
  /*margin:0 3px 3px 0px;*/
}
#rt_connection_filter td {padding:0 10px 5px 0; vertical-align:bottom;}
#rt_flow_operations fieldset, #networkRoutesContainer fieldset {border-color:#FFF}
#flowCorrectionDlg {max-width:500px;}
#flowCorrectionDlg a {color:#00f; font-size:1em;}

.attention {color:#F00; font-size:1.2em;}
.attn_td_bg {background-color:#ffb;}

.dijitTooltipData td {max-width:250px;}

.no-wrap {
  white-space:nowrap;
}

.tip-name {
  height:12px;
  font-weight:normal;
}

.tip-val{
  height:12px;
  font-weight:bold;
  padding: 0px 0px 0px 10px;
}

.tip-title {
  height:12px;
  font-weight:bold;
  text-align:center;
}

/* shaper*/
#TC_table input:focus {
  box-shadow: 0px 0px 1px 1px #999;
}

#TC_table input {padding: 1px 0px 1px 3px;}
#TC_table td {padding:2px 8px 2px 8px;}
#TC_table label {color:#777;}

.hideDisplay{
  display:none;
}

.disabledOpacity {
  opacity: .15;
}

.validationElement {
  border: solid 2px red;
}
.optional {
  font-style: italic;
  color:#888;
}

.opt-on-off-btn {
    height: 18px;
    margin-top: 1px;
    padding: 0 !important;
    width: 40px;
}

.help-link {
  border:none !important;
  background:#6CABFF !important;
  margin-left: 3px !important;
  color: #fff !important;
  border-radius: 50% !important;
  padding:0px 5px 2px 5px !important;
  font-size: 12px !important;
}
.help-content {
  margin-top:5px !important;
  margin-bottom: 3px !important;
  line-height:1.5em !important;
  max-width:700px;
  border: 2px solid rgb(230, 230, 230) !important;
  background: rgb(251, 251, 251) !important;
  display:none;
  position: relative;
  white-space:normal;
  color: #6a6a6a !important;
  font-weight:normal;
  z-index:20;
}
.help-content, .help-content p, .help-content li, .help-content ol {
  font-size: 12px !important;
}
.help-close {
  cursor:pointer;
  float: right;
  margin: -5px -12px 0 0;
}

.help-content ol, .help-content ul { margin-left:20px; margin-top:2px; padding:0px;}
.helpTerm { font-weight:bold;}
.helpDef {}
.help_title {}

#dash_optimization .help-link {vertical-align:middle;}
#widget_controls #dash_optimization {position:absolute; top:95px; left: 890px;}


/* Global Messaging System */
.notify {
    position:fixed;
    bottom: 5px;
    background: #FFF5A9;
    padding:7px 10px;
    width: 90%;
    left:0;
    margin-left:4%;
    text-align:center;
    z-index: 10000;
    border-radius:2px;
    font-size:1.1em;
}
.notify_info {
    background: #FFF5A9;
}
.notify_success {
    background:#67F067;
}
.notify_problem {
    background:#ff4040;
    color:#fff;
}
.notify_cell_invalid {
  border-color:red;
}

#msgClose {
    float:right;
    padding:0 3px;
    height:16px;
    border:none;
    background:none;
}
.notify_problem #msgClose span:first-of-type {
    background-image: url(images/ui-icons_ffffff_256x240.png)
}

.invalidInput {
    border: solid 1px red;
}

/* For use in knockout css binding*/
.fontColorRed{
    color: red;
}

/* Global Messaging System end */

/* slick grid changes, grouping, column picker, etc. */
.slick-row:last-child {border-bottom:1px solid #eee !important;}

.slick-cell select {
  max-width:100%;
}
.slick-second-header-columns {
  text-align:center;
}
.slick-header-columns {
  background: ;
    /*border-bottom: 1px solid silver;*/
}

.slick-header-column {
  background: ;
  border-right: 1px solid silver;
  text-align: center;
}

.slick-header-column:hover, .slick-header-column-active {
  background: white ;
}

.ui-dialog .ui-dialog-title {
    line-height: 1.1;
}

button.ui-dialog-titlebar-close {
    border:none !important;
    background:none !important;
}

.slick-nodata {
    text-align: center;
    padding-top: 3px;
}

.subSettings {
    font-weight:bold;
    font-size:1em;
}

.slick-preheader-panel {
    border-width: 1px 0 0 0;
    color: #767676;
    box-sizing: border-box;
    padding: 0;
}
.slick-preheader-panel .ui-droppable {
}

.slick-preheader-panel .ui-droppable.ui-state-hover {
    background: white !important;
}

.slick-preheader-panel .ui-droppable.ui-sortable.ui-state-default {
    border: none;
    background: none;
}
.slick-group-toggle {
    cursor: pointer;
}
.slick-group-toggle-all.expanded {
    background: url(../images/collapse.gif) no-repeat center center;
    width: 9px;
    height: 9px;
    position: absolute;
    display: inline-block;
    right: 10px;
}
.slick-dropped-grouping {
    display: inline-block;
    margin-right: 15px;
    vertical-align: middle;
    cursor: pointer;
}
.slick-groupby-remove {
    padding: 0px 10px 4px 2px;
    vertical-align: middle;
}
/*.slick-groupby-remove:hover {
    border: 1px solid #aaa;
}*/
.slick-cell, .slick-headerrow-column {
    border-bottom-color: #eee;
}
.slick-cell, .slick-headerrow-column, .slick-footerrow-column {
    border-right: 1px solid #ddd;
    border-bottom-color: #eee;
}
.slick-cell.active {
    border-color: #c7c7c7;
}

.slick-columnpicker {
  border: 1px solid #ccc;
  background: #fff;
  padding: 10px;
  -moz-box-shadow: 2px 2px 2px #aaa;
  -webkit-box-shadow: 2px 2px 2px #aaa;
  min-width: 100px;
  cursor: default;
  position:absolute;
  z-index:900;
  overflow:auto;
  resize: both;
}

.slick-columnpicker > .close {
  float: right;
  cursor: pointer;
}
.slick-columnpicker > .close:hover {
  border: 1px solid rgb(0,176,240);
  background:#fff;
  color:rgb(0,176,240);
  box-shadow: none;
}

.slick-columnpicker .title {
  font-size: 16px;
  width: 60%;
  border-bottom: none;
  margin-bottom: 15px;
}

.slick-columnpicker li {
  list-style: none;
  margin: 0;
  padding: 0;
  background: none;
}

.slick-columnpicker li:hover, .slick-columnpicker li label:hover {
  background: #DEEEFD;
}

.slick-columnpicker li label {
  cursor: pointer;
  width: 100%;
}

.slick-columnpicker input {
  margin: 4px;
}

.slick-columnpicker li a {
  display: block;
  padding: 4px;
  font-weight: bold;
}

.slick-columnpicker li a:hover {
  background: white;
}
/* end slick-grid */


/* Refresh Button */
.refreshButton {
    display:inline-block;
    position: relative;
    text-align:center;
    margin-left:300px;
}

#refreshButton .refreshButton {
  margin-left: 0;
}

.refreshButton .ui-menu  {
    position: absolute;
    width: 150px;
}

.refreshButton span, .refreshButton abbr {
    font-size: 9px;
    color: #777;
    text-decoration: none;
}

.ui-progressbar {
    position:relative;
    width: 100%;
    height: 1.6em /*!important*/;
    margin-top:5px;
}

.progressbarLabel {
    position: absolute;
    left:calc(50% - 25px);
    -moz-left:calc(50% - 25px);
    width:50px;
    text-align:center;
    top: -15px;
}

.progressbar {
    width: 120px;
    position: absolute;
    left: calc(50% - 62px);
    -moz-left: calc(50% - 100px);
    top: 6px;
    z-index: 20;
    height: 5px !important;
    overflow: visible !important;
}

.progressbar .ui-progressbar-value {
    background-color: #36F !important;
}

.pblabel {
    position: absolute;
    display: block;
    width: 100%;
    text-align: center;
    line-height: 1.7em;
}
.ui-progressbar-value {
    overflow: hidden;
    margin:0 !important;
    background-color:#C4E1FF !important;
    border:none !important;
}
.ui-progressbar-value .pblabel {
    position: relative;
    font-weight: normal;
    color:blue;
}

.stop-scrolling {
    height: 100%;
    overflow: hidden;
}

/* super fish menu override */
.sf-menu a {
    padding-top: .25em !important;
    padding-bottom: .25em !important;
}

.ui-autocomplete {
    height: 200px;
    overflow-y: scroll;
    overflow-x: hidden;
}

.ui-autocomplete a {
    color:#000;
    border:none !important;
    border-radius:0;
}
.ui-autocomplete .ui-state-focus {
    background: #C4E1FF !important;
}

.autocomplete-bg-color {
    background-color: #ffe;
}

.cell-red-border {
    border-color: red;
}
.info_message_large_Text {
    padding: 80px;
    font-size:1.6em;
    color:#999;
    font-style:italic;
    line-height:2em;
}

.sg_incell_label {
  margin-right: 3px;
}

.sg_incell_data {
  font-size: 12px;
  color: #0000cc;
}

.matchCriteriaDiv {
  cursor: pointer;
}

.slick-cell.disabled > .matchCriteriaDiv {
  cursor: default;
}

.slick-cell.disabled .sg_incell_data {
  font-size: 12px;
  color: #666;
}

.slick-cell.disabled > .matchCriteriaDiv > .matchEditIcon {
  display: none;
}

.noDataTextContainer {
  height: 200px;
  text-align:center;
  line-height:200px;
  font-size:12px;
  color:#555;
  background-color:rgba(255,255,255,.8);
  border-radius:4px;
}

.warningTxtOrange {
  color: darkOrange;
}

.tip-name, .topo-tip-name {
  height: 12px;
  font-weight: normal;
}
.tip-val, .topo-tip-val {
  height: 12px;
  font-weight: bold;
  padding: 0px 0px 0px 10px;
}
.tip-title {
  height: 12px;
  font-weight: bold;
  text-align: center;
}

.toggleOn{
    border: 1px solid rgb(0,176,240) !important;
    color: rgb(0,176,240);
    border-radius: 0 !important;

}

.toggleOff{
    border: 1px solid !important;
    background-color: #fbfbfb;
    border-radius: 0 !important;


}

.toggleDiv {
    background-color:#fff;
    border-color: #ddd;
    border-style: solid;
    border-width: 1px;

}

.terminal {
  float: left;
  border: #000 solid 5px;
  font-family: "DejaVu Sans Mono", "Liberation Mono", monospace;
  font-size: 14px;
  color: #f0f0f0;
  background: #000;
}
.terminal-cursor {
  color: #000;
  background: #f0f0f0;
}


/* Toggle Button */
/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 12px;
    margin: 5px 0 10px 0;
}

/* Hide default HTML checkbox */
.switch input {display:none;}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    -webkit-transition: .4s;
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 8px;
    width: 8px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    -webkit-transition: .4s;
    transition: .4s;
}

input:checked + .slider {
    background-color: #2196F3;
}

input:checked + .slider:before {
    -webkit-transform: translateX(18px);
    -ms-transform: translateX(18px);
    transform: translateX(18px);
}

/* Rounded slider */
.slider.round {
    border-radius: 34px;
}

.slider.round:before {
    border-radius: 50%;
}

/*units or helper text*/
.input_help_txt{
  font-size: 11px;
  color: #888;
}

/*link status used in grid cell*/


span.status_bg_colors{
    width: 100%;
    height: 100%;
    text-align: center;
    float: left;
    display: table-cell;
    vertical-align: middle;
    font-weight: bold;
    box-sizing: border-box;
    border-radius: 2px;
}

span.statusEstablished {
    color: #fff !important;
    background-color: #0daf0d;
}

span.statusNotEstablished {
    color: #fff !important;
    background-color: red;
}

span.statusAdminDown {
    color: #000 !important;
    background-color: orange;
}

span.statusNotActive {
    color: #000 !important;
}

div.specialRule {
  color: darkorange;
}

div.orchTmpRuleLegend {
  background-color: darkorange;
  height: 12px !important;
  width: 20px !important;
  vertical-align: middle;
  border-radius: 2px;
}

.spGridDraggable {
  cursor: pointer !important;
}

/* Tooltip info icon */
.tooltipInfo {
  position: relative;
  display: inline-block;
}
.tooltipInfoText {
  display: none;
  text-align: start;
  word-wrap: normal;
  font-size: 11px;
  color: #999;
  width: 160px;
  background-color: white;
  border: 1px solid #aaa;
  border-radius: 5px;
  padding: 6px 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.1s;
  line-height: normal;
}
.tooltipInfoText::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 35%;
  border: 5px solid;
  border-color: #aaa transparent transparent;
}
.tooltipInfoIcon {
  width: 14px;
  height: 14px;
}
.tooltipInfoIcon:hover ~ .tooltipInfoText {
  display: block;
  opacity: 1;
}
/* Adjust tooltip information position from showing above icon to below icon */
.tooltipInfoTextBelowIcon{
  left: 5px;
  top: 21px;
  height: 53px;
}
.tooltipInfoTextBelowIcon::after {
  top: -20%;
  left: 33%;
  transform: rotate(180deg);
}