/****************************
 ****************************
 * normalized typography
 ***************************/
.typo-headline {font-size: 18px; font-weight: normal; line-height: 1.5; color: #005d84;}
.typo-title {font-size: 15px; font-weight: normal; line-height: 1.2; color: #555;}
.typo-body-heading {font-size: 15px; font-weight: bold; line-height: 1.2; color: #000;}
.typo-body-subheading {font-size: 15px; font-weight: normal; line-height: 1.2; color: #000;}
.typo-body-2 {font-size: 13px; font-weight: bold; line-height: 1.2; color: #000;}
.typo-body-1 {font-size: 13px; font-weight: normal; line-height: 1.2; color: #000;}
.typo-body-subtext {font-size: 13px; font-weight: normal; line-height: 1.2; color: #777;}
.typo-caption {font-size: 11px; font-weight: normal; line-height: 1.3; color: #666;}
.typo-button {font-size: 13px; font-weight: normal; line-height: 1.2; color: #555; text-transform: uppercase;}
.typo-menu-1 {font-size: 15px; font-weight: normal; line-height: 1.2; color: #777; text-transform: uppercase;}
.typo-menu-2 {font-size: 11px; font-weight: bold; line-height: 1.3; color: #000;}
.typo-menu-3 {font-size: 11px; font-weight: normal; line-height: 1.3; color: #000;}

.typo-title-padding {padding: 20px 0px 10px 0px;}
/****************************
 ****************************
 * generic element styles across the UI
 ***************************/
body, p, td, th,
input, textarea, select, button {
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 13px;
	font-weight: normal;
	line-height: 1.2;
	color: #000;
}
body {
	margin: 8px 24px;
	padding-top: 0.1px; /* trick for preventing margin collapsing */
}
/** override for popups */
body.dialog-body {
	margin: 0px 8px;
}
body.popup_error_bg
{
	background-image: url(popup_error_bg.gif);
	background-repeat: repeat-x;
}

body.certsBody {
	padding-bottom: 500px;
}

form {
	padding: 0;
	margin: 0;
}

h1 {
	font-size: 18px;
	font-weight: bold;
	color: black;
}

h2 {
	font-size: 15px;
	font-weight: bold;
	color: #676f86;
}

h3 {
	font-size: 13px;
	font-weight: bold;
	color: #676f86;
}

h4 {
	font-size : 11px;
}

/** reset the table cell padding for layout
 * !!!Would NOT do this for now
 */
/*th, td { padding: 0; }*/


/** normalized link styles */
a,
div a.contentLink {
	cursor: pointer;
	color: #2184C7;
	text-decoration: none;
}

a:hover,
div a.contentLink:hover,
a:focus,
div a.contentLink:focus {
	color: #2184C7;
	text-decoration: underline;
}

.blue_bg {
	font-size: 10px;
	color: #c1c8fa;
}
a.blue_bg {}
a.blue_bg:hover {color: #ffffff }

a.tableLink {
	color: #000;
}
span.tableLink {
	cursor: pointer;
	color: #000;
	text-decoration: none;
}
span.tableLink:hover {
	text-decoration: underline;
}

a.tableLink img,
span.tableLink img {
	vertical-align: bottom;
}

span.link {
	color: #2184C7;
	cursor: pointer;
}

span.link:hover {
	color: #2184C7;
	text-decoration: underline;
}

.rtButton {
	float: right;
}

.ltButton {
	float: left;
}

input:disabled {
	background: #EFF0F4
}
input[type=text][readonly],
textarea[readonly] {
	background-color: #eaebf2;
}
select:disabled { opacity: 0.4; }

th {
	text-align: start;
}

/* first set the default margin of select/text field to ZERO */
select, input[type=text]
{
	margin: 0px;
	font-size: 13px;	/* enforce default when browser font is non-default */
}

input[type=file]
{
	font-size: 13px;	/* enforce default when browser font is non-default */
}

input[type=password]
{
	margin: 0px;       /* enforce default when browser font is non-default */
}

hr {
	color: #EBEBF0;
	background-color: #EBEBF0;
	margin: 0;
	padding: 0;
	height: 1px;
	border:0;
	margin-top: 0;
	margin-bottom: 0;
}

div .hr hr{
	color: #EBEBF0;
	margin: 1em auto 0;
	background-color: #EBEBF0;
	line-height:0;
	padding: 0;
	height: 1px;
	border:0;
}



/****************************
 ****************************
 * component styles
 ***************************/

/**++++++++++++++++++++++++++
 * new button styles
 */
.snwl-btn {
	box-sizing: border-box;
	cursor: pointer;
	height:32px;
	padding:0 16px 0 16px;
	border-radius:2px;
	color:#555;
	background-color:#eee;
	border:1px solid #999;
	min-width:88px;
	font-size: 13px;/* force the font size */
	line-height: 1;
	text-transform: uppercase;
}
.snwl-btn-condensed {
	font-size: 11px;
	min-width: initial;
	padding: 6px 8px;
	height: auto;
}

.footerBtnBar .snwl-btn,
.tiles .snwl-btn {

	background-color:#ffffff;
	border:1px solid #ddd;
}

.snwl-btn:hover,
.snwl-btn:focus,
.footerBtnBar .snwl-btn:hover,
.footerBtnBar .snwl-btn:focus,
.tiles .snwl-btn:hover,
.tiles .snwl-btn:focus {
	color:#555;
	background-color:#ccc;
	border:1px solid #2184c7;
}

.snwl-btn:active, 
.footerBtnBar .snwl-btn:active,
.tiles .snwl-btn:active {
	color:#555;
	background-color:#bbb;
	border:1px solid #2184c7;
}

.snwl-btn:disabled,
.footerBtnBar .snwl-btn:disabled,
.tiles .snwl-btn:disabled {
	color:rgba(0, 0, 0, 0.26);
	background-color:rgba(0, 0, 0, 0.12);
	border:1px solid #ccc;
}

.snwl-btn-primary {
	color:#ffffff;
	background-color:#323232;
	border:1px solid #323232;
}

.footerBtnBar .snwl-btn-primary,
.tiles .snwl-btn-primary {
	background-color:#323232;
	border:1px solid #323232;
}

.snwl-btn-primary:hover,
.snwl-btn-primary:focus,
.footerBtnBar .snwl-btn-primary:hover,
.footerBtnBar .snwl-btn-primary:focus,
.tiles .snwl-btn-primary:hover,
.tiles .snwl-btn-primary:focus {
	color:#ffffff;
	background-color:#2a2a2a;
	border:1px solid #2184c7;
}

.snwl-btn-primary:active,
.footerBtnBar .snwl-btn-primary:active,
.tiles .snwl-btn-primary:active {
	color:#ffffff;
	background-color:#000000;
	border:1px solid #2184c7;
}

.snwl-btn-primary:disabled,
.footerBtnBar .snwl-btn-primary:disabled,
.tiles .snwl-btn-primary:disabled {
	color:rgba(0, 0, 0, 0.26);
	background-color:rgba(0, 0, 0, 0.12);
	border:1px solid #ccc;
}

.snwl-btn + .snwl-btn {
	margin-left:16px;
}

.snwl-btn-right {
	float:right;
}

.snwl-btn-left {
	float:left;
}

.snwl-btn:focus,
.snwl-btn-primary:focus {
	outline: #2184c7 auto 1px;
}

/**++++++++++++++++++++++++++
 * footer button bar
 */
.footerBtnBar {
	box-sizing: border-box;
	height:50px;
	background-color:#b0cdd9;
	position:fixed;
	bottom:0;
	left:24px;
	right:24px;
	border:1px solid #fff;
	border-bottom:none;
	border-radius:8px 8px 0 0;

	/* make this z-index very high but not higher than blocking layer,
	 * so all elements will not be overlaying on it */
	z-index: 7999;
}

.footerBtnBarInner {
	padding: 8px 16px 8px 16px;
}

/**++++++++++++++++++++++++++
 * legacy view bar
 */
div.legacyViewBar {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	box-sizing: border-box;
	clear: both;
	margin: 8px 0;
	padding: 8px;
	border-radius: 4px;
	min-width: 32px;
	background-color: #eee;
	overflow: hidden;
}

div.legacyViewBar > .fillingSpace {
	-ms-flex: 100 0 auto;
	flex: 100 0 auto;
}

div.legacyViewBar.legacyViewBarTop {
	margin-top: 0;
}

/**++++++++++++++++++++++++++
 * new tile styles
 */
div.tiles {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: stretch;
	align-items: stretch;
	width: 100%;
	min-width: 944px;
	overflow: hidden;
	margin: 0;
	padding: 0;
}
div.tiles.tilesCondensed {
	min-width: 640px;
}
div.tiles + div.tiles,
div.tiles.tilesMarginTop {
	margin-top: 24px;
}
div.tiles.tilesCondensed + div.tiles.tilesCondensed {
	margin-top: 16px;
}
div.tiles.tilesMarginBottom {
	margin-bottom: 24px;
}

[class*='tile-1-']
{	
	background: #fafafa; 
  	padding: 16px;
	border-radius: 3px;	
	border: 1px solid #ddd;
	box-sizing: border-box;
}
div.tilesCondensed > [class*='tile-1-'] {
	padding: 8px;
}

[class*='tile-c-'] > div.tiles {
	min-width: initial;
}

[class*='tile-1-'],
[class*='tile-c-'] {
	margin-left: 24px;
}
div.tilesCondensed > [class*='tile-1-'],
div.tilesCondensed > [class*='tile-c-'] {
	margin-left: 16px;
}
[class*='tile-1-']:first-of-type,
[class*='tile-c-']:first-of-type,
div.tilesCondensed > [class*='tile-1-']:first-of-type,
div.tilesCondensed > [class*='tile-c-']:first-of-type {
	margin-left: 0;
}

div.tile-1-2,
div.tile-c-2
{
	-ms-flex: 0 1 50%;
	flex: 0 1 50%;
}

div.tile-1-1,
div.tile-c-1
{
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}

div.tile-1-3,
div.tile-c-3 {
	-ms-flex: 0 1 33.33%;
	flex: 0 1 33.33%;
}

div.tiles .tileParagraph {
	margin: 0;
	padding: 0 0 16px;
}

div.tiles ol.textList,
div.tiles ul.textList {
	margin: 0;
	padding: 0 0 0 32px;
}
div.tiles ol.textList > li,
div.tiles ul.textList > li {
	padding: 0 0 16px;
}


/**++++++++++++++++++++++++++
 * breadcrumb
 */
.breadcrumb {
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 11px;
	color: #676d7f;
}
a.breadcrumb {text-decoration: none }
a.breadcrumb:visited {text-decoration: none; color: #676d7f }
a.breadcrumb:hover {text-decoration: underline; color: #676d7f }

/* breadcrumb is now disabled in
   SonicOS Enhanced UI */
#pageHeader {
	height: 24px;
	display:none;
}

#pageHeader .pgHdrGroup {
	font-family: Tahoma, Geneva, Verdana, sans-serif;
	font-size: 11px;
	color: #999;
	padding-left: .5em;
}

#pageHeader .pgHdrItem {
	font-family: Tahoma, Geneva, Verdana, sans-serif;
	font-size: 15px;
	font-weight: bold;
	color: #101446;
	padding-left: .7em;
}


/**++++++++++++++++++++++++++
 * wxa related styles
 */
.header {
	font-family: Arial, Verdana, sans-serif;
	font-size: 22px;
	color: #151516;
	line-height: 32px;
	font-weight: bold;
}

/**++++++++++++++++++++++++++
 * old stats box
 */
.box_header {
	font-size: 11px;
	font-weight: bold;
	background-color: #ccc;
}

.box_header_no_bg {
	font-size: 11px;
	font-weight: bold;
	color: #ffffff;
}

.grey_border {
	color: #c7c7cd;
	background-color: #c7c7cd;
}

.solid_grey_border {
	border:1px solid #c7c7cd;
}

.line_div {
	height: 1px;
	color: #e3e3e6;
	background-color: #e3e3e6;
}

/* make this invisible for now */
table.line_div {
	color: white;
	background-color: white;
}

.region_bg {
	background-color: #f5f5f8;
}

.box_columns {
	font-weight: bold;
	color: #333333;
}

.nav_highlight {
	color: #bacaeb;
	background-color: #bacaeb;
}

#fwl_table {
padding:1px;
}


/**++++++++++++++++++++++++++
 * form section
 */
div.sectionHeaderContainer,
div.sectionHeaderContainer.swlContentHdr {
	display: -ms-flexbox;
	display: flex;
	margin: 0;
	padding: 0;
	width: auto;
	height: auto;
	-ms-flex-pack: start;
	justify-content: flex-start;
	-ms-flex-align: end;
	align-items: flex-end;
	overflow: hidden;
}

div.sectionHeaderContainer > div,
div.sectionHeaderContainer > span {
	display: block;
	padding-bottom: 16px;
}

div.sectionHeaderContainer > .fillingSpace {
	-ms-flex: 100 0 auto;
	flex: 100 0 auto;
}

div.sectionHeaderContainer > div.marginedItem {
	margin-left: 24px;
}

.groupLabel {
	font-size: 18px;
	font-weight: normal;
	line-height: 1.5;
	color: #005d84;
	padding:32px 0 16px 0;
	vertical-align: bottom;
}

.groupLabelTop {
	padding-top:16px;
}

td.groupLabel ~ td {
	padding-bottom: 16px;
	vertical-align: bottom;
}

div.tiles div.sectionHeaderContainer:first-of-type div.groupLabel,
div.row-container div.sectionHeaderContainer:first-of-type div.groupLabel
{
	padding-top: 0;
}

div.tilesCondensed div.sectionHeaderContainer:first-of-type div.groupLabel {
	font-size: 15px;
	font-weight: bold;
	line-height: 1.2;
	color: #000;
}

div.swlTabContainer .groupLabelTop {
	padding-top: 0px;
}

.swlGroupLabel
{
	color:#003366;
	font-size : 14px;
	font-weight : bold;
}


/**++++++++++++++++++++++++++
 * calendar
 */
.calendar_month
{
color: #ffffff;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 11px;
}

.calendar_week
{
color: #4a4b4d;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 10px;
}

.calendar_day
{
color: #4a4b4d;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 10px;
}

a.calendar_day {text-decoration: none }
a.calendar_day:hover {text-decoration: underline; color: #003399 }

.calendar_day_off
{
color: #939599;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 10px;
}

a.calendar_day_off {text-decoration: none }
a.calendar_day_off:hover {text-decoration: underline; color: #003399 }

.calendar_bg_off {
	background-color: #f2f2f2;
}

.calendar_bg_on {
	background-color: #bacaeb;
}

.logo_popup
{
	background-image: url(logo_sw.png);
	border: 0;
}

/**++++++++++++++++++++++++++
 * tabs
 */
.tabLabel {
	white-space: nowrap;
}

.tab_background_off,
.tab_bkgnd_small_off
{
	color:#000000;
	background-color:#ffffff;
	border:1px solid #eee;
	border-radius:5px;
	padding:8px;
	cursor:pointer;
}
.tab_bkgnd_small_off {
	padding: 4px;
}

.tab_background_off a,
.tab_bkgnd_small_off a {
	color:#000000;
	text-decoration:none;
	font-weight:bold;
	font-size:11px;
}

.tab_background_off:hover,
.tab_bkgnd_small_off:hover
{
	color: #005d84;
	background-color: #eee;
	border-color: #005d84;
}

.tab_background_off:hover a,
.tab_bkgnd_small_off:hover a {
	color: #005d84;
}

.tab_background_on,
.tab_bkgnd_small_on
{
	color:#ffffff;
	background-color:#005d84;
	border:1px solid #005d84;
	border-radius:5px;
	padding:8px;
	cursor:pointer;
}
.tab_bkgnd_small_on {
	padding: 4px;
}

.tab_background_on a,
.tab_bkgnd_small_on a {
	color:#ffffff;
	text-decoration:none;
	font-weight:bold;
	font-size:11px;
}

.tab_left_off,
.tab_left_small_off
{
	width: 6px;
	height: 25px;
	text-indent: -2000px;
}
.tab_left_small_off {
	height: 21px;
}

.tab_left_on,
.tab_left_small_on
{
	width: 6px;
	height: 25px;
	text-indent: -2000px;
}
.tab_left_small_on {
	height: 21px;
}

.tab_right_off,
.tab_right_small_off
{
	width: 6px;
	height: 25px;
	text-indent: -2000px;
}
.tab_right_small_off {
	height: 21px;
}

.tab_right_on,
.tab_right_small_on
{
	width: 6px;
	height: 25px;
	text-indent: -2000px;
}
.tab_right_small_on {
	height: 21px;
}

.tab_grey_bg {
	font-size: 0px;
	line-height: 0;
}

.tab_lightgrey_bg {
	font-size: 0px;
	line-height: 0;
}

.tab_white_bg {
	font-size: 0px;
	line-height: 0;
}

/**++++++++++++++++++++++++++
 * tutorial
 */
.tutorial_button
{
	background-image: url(tutorial_button.gif);
	width: 223px;
	height: 49px;
	text-indent: -2000px;
}

/**++++++++++++++++++++++++++
 * in-page empty state pages
 */
#invalid {
	box-sizing: border-box;
	color: #990000;
	width: 100%;
	border: 1px solid #7f7f91;
	background-color: #eaebf2;
	padding: 0;
	margin:0;
	background-image: url(alert_bg.gif);
	background-repeat: no-repeat;
	text-align: left;
}
	
#invalid_text {
	margin-left: 45px;
	padding-top: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}


#invalid_big {
	box-sizing: border-box;
	width: 100%;
	background-color: #000000;
	margin: 0;
	color: #ffffff;
	border-radius: 8px;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	padding: 16px;
}

#invalid_text_big {
	font-size: 15px;
	font-weight: bold;
	color: #ffffff;
}

#invalid_text_big h3 {
	font-size: 15px;
	font-weight: bold;
	color: #ffffff;
	margin: 0;
}

#invalid_text_big p {
	font-size: 13px;
	margin-bottom: 0;
	color: #ffffff;
}

#invalid_text_big p a {
	font-size: 13px;
	margin-bottom: 0;
	color: #ffffff;
}

#invalid_text_big a {
	font-size: 15px;
	margin-bottom: 0;
	color: #ffffff;
	text-decoration: underline;
}

#invalid_text_big span {
	font-size: 13px;
	color: #ffffff;
	font-weight: normal;
}

#invalid_text_big span.green {
	color: #00983D;
}

#invalid_text_big ul {
	font-size: 13px;
	font-weight: normal;
	color: #ffffff;
	margin-bottom: 0px;
}

/**++++++++++++++++++++++++++
 * in-page inline notice/warning
 */

.inlineNotes_box {
    margin-bottom: 32px;
    display: table;
    width: 100%;
}
.inlineNotes_box.noteAboveTabs,
.inlineNotes_box.noteInSection
{ margin-bottom: 0; }
.inlineNotes_box.noteAboveSectionHeader { margin-bottom: 16px; }

.inlineNotes_box .row {
    display: table-row;
}

.inlineNotes_box .cell {
    display: table-cell;
	vertical-align: top;
}

.inlineNotes_box .inlineNotes {
	font-size: 13px;
	font-weight: normal;
	margin-bottom: 8px;
	color: #000000;
	text-align: left;
}
.inlineNotes_box i.icon_inline_warning {
	background: url(inline_warning.png) no-repeat;
	height: 20px;
	width: 20px;
}
.inlineNotes_box i.icon_inline_error {
	background: url(inline_error.png) no-repeat;
	height: 20px;
	width: 20px;
}
.inlineNotes_box i.icon_inline_info {
	background: url(inline_info.png) no-repeat;
	height: 20px;
	width: 20px;
}
.inlineNotes_box ul.inline_warning,
.inlineNotes_box ul.inline_info,
.inlineNotes_box ul.inline_error {
    list-style: none;
    margin: 0;
	line-height: 1.3;
	padding-left: 4px;
	padding-top: 2px;
}
.inlineNotes_box ul.inline_warning > li + li,
.inlineNotes_box ul.inline_info > li + li,
.inlineNotes_box ul.inline_error > li + li {
	padding-top: 8px;
}

	
/**++++++++++++++++++++++++++
 * image tweaks
 */
img.imgButt {
	height:21px;
	cursor: pointer;
	cursor: hand;
	padding: 0 4px 1px;
	vertical-align: middle;
}

/* Some of the small gif images have a 1-pixel border which makes them appear raised up
 * slightly when embedded in text. Use this to bring them down to align with the text. */
.textEmbedddedImg {
	vertical-align: -1px;
}

img.actionIcon, img.actionxIcon {
	border: none;
	height: 20px;
	width: 20px;
}
img.actionIcon,
img.actionxIcon,
img.clickable,
img[src^=trash],
img[src^=trashx],
img[src^=savex],
img[src^=edit],
img[src^=editx],
img[src^=statx],
img[src^=notex],
img[src^=blank],
img[src^=checkMark],
img[src="tri.gif"]
{
	vertical-align: bottom;
}

.roll, .actionIcon, 
.clickable, img.ttip,
span.ttip {
	cursor: pointer;
	cursor: hand;
}

/**++++++++++++++++++++++++++
 * general icons
 */
i.ipverMarkerV4,
i.ipverMarkerV6,
i.ipverMarkerV4V6,
i.ipverMarkerMixed
{
	display: inline-block;
	width: 17px;
	height: 17px;
	background-repeat: no-repeat;
	vertical-align: bottom;
}
i.ipverMarkerV4V6 {
	width: 20px;
	height: 20px;
}
i.ipverMarkerV4 { background-image: url('/ipv4Marker.png'); }
i.ipverMarkerV6 { background-image: url('/ipv6Marker.png'); }
i.ipverMarkerV4V6 { background-image: url('/ipv4v6Marker.png'); }
i.ipverMarkerMixed { background-image: url('/ipMixedMarker.png'); }

/**++++++++++++++++++++++++++
 * general SVG,
 * can be overrided by other components
 */
.svgIcon {
	vertical-align: bottom;
	width: 20px;
	height: 20px;
	pointer-events: none;/* Damn IE/Edge, we have to have this workaround for them */
}
.svgActionIcon {
	display: inline-block;
	vertical-align: bottom;
	fill: #666;
}
.svgActionIcon:hover {
	fill: #ff6b0b;
}

/**++++++++++++++++++++++++++
 * basic tables
 */
.listControlPopup
{
	background-color: white;
	border :1px inset;
}

/** normalize for refreshed table styles - header */
td.table_column_head,
tr.table_column_head > td,
td.tableHeader,
tr.tableHeader > td,
td.listLabel,
tr.listLabel > td,
td.listLabelPopup,
tr.listLabelPopup > td,
td.swlDblHeader,
tr.swlDblHeader > td {
	box-sizing: border-box;
	height: 30px;
	padding: 4px;
	background-color: #ccc;
	font-size: 11px;/* force the font size */
	font-weight: bold;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

td.listLabelPopup,
tr.listLabelPopup > td
{
	background-image: url(bbar_back.gif);
}

td.table_column_head:first-of-type,
tr.table_column_head > td:first-of-type,
td.tableHeader:first-of-type,
tr.tableHeader > td:first-of-type,
td.listLabel:first-of-type,
tr.listLabel > td:first-of-type,
td.listLabelPopup:first-of-type,
tr.listLabelPopup > td:first-of-type,
td.swlDblHeader:first-of-type,
tr.swlDblHeader > td:first-of-type {
	padding-left: 8px;
}
td.table_column_head:last-of-type,
tr.table_column_head > td:last-of-type,
td.tableHeader:last-of-type,
tr.tableHeader > td:last-of-type,
td.listLabel:last-of-type,
tr.listLabel > td:last-of-type,
td.listLabelPopup:last-of-type,
tr.listLabelPopup > td:last-of-type,
td.swlDblHeader:last-of-type,
tr.swlDblHeader > td:last-of-type {
	padding-right: 8px;
}

.table_column_head input[type=checkbox],
.tableHeader input[type=checkbox],
.listLabel input[type=checkbox],
.listItem input[type=checkbox],
.listItemContrast input[type=checkbox],
.listItemTrunc input[type=checkbox],
.listItemContrastTrunc input[type=checkbox],
.listItemGrey input[type=checkbox],
.listItemNoBorder input[type=checkbox],
.listItemBold input[type=checkbox],
.listItemBoldContrast input[type=checkbox],
.listItemBoldNoBorder input[type=checkbox],
.listItemHighlighted input[type=checkbox],
.tableLineDisabled input[type=checkbox],
.tableLineContrastDisabled input[type=checkbox],
.tableLine input[type=checkbox],
.tableLineContrast input[type=checkbox]
{
	margin: 0;
	vertical-align: bottom;
	width: 13px;
	height: 13px;
}

.swlDblHeader {
	background-image: url(bg_navbar_big.gif);
}
.tableHeader2 {
	color: #101446;
	font-size: 11px;/* force the font size */
	background-color: #c7c7cd;
}

/** normalize for refreshed table styles - footer */
td.listFooter,
tr.listFooter > td
{
	box-sizing: border-box;
	padding: 4px;
	background-color: transparent;
	text-align: left;
	font-size: 11px;/* force the font size */
}
tr.listFooter > td.footerAlignRight {
	text-align: right;
}

/** normalize for refreshed table styles - table */
table.listObjTreeView,
table.listControl {
	box-sizing: border-box;
	border: none;
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

table.listObjTreeVwFixed {
    table-layout: fixed;
}

/** normalize for refreshed table styles - rows */
tr.listItem > td,
tr.listItemContrast > td,
tr.listItemBold > td,
tr.listItemBoldContrast > td,
tr.listItemTrunc > td,
tr.listItemContrastTrunc > td,
tr.listItemGrey > td,
tr.listItemHighlighted > td,
tr.listItemSelected > td,
tr.listItemDropped > td,
tr.listItemModified > td,
tr.listItemSelectedDropped > td,
tr.tableLine > td,
tr.tableLineContrast > td,
tr.tableLineDisabled > td,
tr.tableLineContrastDisabled > td,
table#Sec tr:not(.table_column_head) > td
{
	border-bottom: 1px solid #eee;
}

tr.listItem > td,
tr.listItemContrast > td,
tr.listItemTrunc > td,
tr.listItemContrastTrunc > td,
tr.listItemGrey > td,
tr.listItemNoBorder > td,
tr.listItemBold > td,
tr.listItemBoldContrast > td,
tr.listItemBoldNoBorder > td,
tr.listItemHighlighted > td,
tr.listItemSelected > td,
tr.listItemDropped > td,
tr.listItemModified > td,
tr.listItemSelectedDropped > td,
tr.listBottomBar > td,
tr.tableLineDisabled > td,
tr.tableLineContrastDisabled > td,
tr.tableLine > td,
tr.tableLineContrast > td,
table#Sec tr:not(.table_column_head) > td
{
	box-sizing: border-box;
	background-color: transparent;
	empty-cells: show;
	padding: 4px;
	font-size: 11px;/* force the font size */
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal;/* override any nowrap html attribute */
}

tr.listItem > td:first-of-type,
tr.listItemContrast > td:first-of-type,
tr.listItemTrunc > td:first-of-type,
tr.listItemContrastTrunc > td:first-of-type,
tr.listItemGrey > td:first-of-type,
tr.listItemNoBorder > td:first-of-type,
tr.listItemBold > td:first-of-type,
tr.listItemBoldContrast > td:first-of-type,
tr.listItemBoldNoBorder > td:first-of-type,
tr.listItemHighlighted > td:first-of-type,
tr.listItemSelected > td:first-of-type,
tr.listItemDropped > td:first-of-type,
tr.listItemModified > td:first-of-type,
tr.listItemSelectedDropped > td:first-of-type,
tr.tableLineDisabled > td:first-of-type,
tr.tableLineContrastDisabled > td:first-of-type,
tr.tableLine > td:first-of-type,
tr.tableLineContrast > td:first-of-type,
table#Sec tr:not(.table_column_head) > td:first-of-type
{ padding-left: 8px; }

tr.listItem > td:last-of-type,
tr.listItemContrast > td:last-of-type,
tr.listItemTrunc > td:last-of-type,
tr.listItemContrastTrunc > td:last-of-type,
tr.listItemGrey > td:last-of-type,
tr.listItemNoBorder > td:last-of-type,
tr.listItemBold > td:last-of-type,
tr.listItemBoldContrast > td:last-of-type,
tr.listItemBoldNoBorder > td:last-of-type,
tr.listItemHighlighted > td:last-of-type,
tr.listItemSelected > td:last-of-type,
tr.listItemDropped > td:last-of-type,
tr.listItemModified > td:last-of-type,
tr.listItemSelectedDropped > td:last-of-type,
tr.tableLineDisabled > td:last-of-type,
tr.tableLineContrastDisabled > td:last-of-type,
tr.tableLine > td:last-of-type,
tr.tableLineContrast > td:last-of-type,
table#Sec tr:not(.table_column_head) > td:last-of-type
{ padding-right: 8px; }

tr.listItem,
tr.listItemContrast,
tr.listItemTrunc,
tr.listItemContrastTrunc,
tr.listItemGrey,
tr.listItemNoBorder,
tr.listItemBold,
tr.listItemBoldContrast,
tr.listItemBoldNoBorder,
tr.listItemHighlighted,
tr.listItemSelected,
tr.listItemDropped,
tr.listItemModified,
tr.listItemSelectedDropped,
tr.tableLineDisabled,
tr.tableLineContrastDisabled,
tr.tableLine,
tr.tableLineContrast
{
	background-color: #fff;
}
table#Sec tr:not(.table_column_head) {
	background-color: #fff !important;
}

tr.listItem:nth-of-type(odd),
tr.listItemContrast:nth-of-type(odd),
tr.listItemTrunc:nth-of-type(odd),
tr.listItemContrastTrunc:nth-of-type(odd),
tr.listItemGrey:nth-of-type(odd),
tr.listItemNoBorder:nth-of-type(odd),
tr.listItemBold:nth-of-type(odd),
tr.listItemBoldContrast:nth-of-type(odd),
tr.listItemBoldNoBorder:nth-of-type(odd),
tr.listItemHighlighted:nth-of-type(odd),
tr.tableLineDisabled:nth-of-type(odd),
tr.tableLineContrastDisabled:nth-of-type(odd),
tr.tableLine:nth-of-type(odd),
tr.tableLineContrast:nth-of-type(odd)
{
	background-color: #f5f5f5;
}
table#Sec tr:not(.table_column_head):nth-of-type(even) {
	background-color: #f5f5f5 !important;
}

/**
 * Have these zebra classes to facilitate overwriting the background color of list items,
 * as in some cases, it is not possible to leverage the nth-of-type selector for setting
 * the row background, or we need to overwrite the bg color anyway for those rows. This
 * usually happens for expandable tables. */
tr.listItemZebra-0:nth-of-type(n) {
	background-color: #f5f5f5;
}
tr.listItemZebra-1:nth-of-type(n) {
	background-color: #fff;
}

tr.listItem:hover,
tr.listItemContrast:hover,
tr.listItemTrunc:hover,
tr.listItemContrastTrunc:hover,
tr.listItemGrey:hover,
tr.listItemNoBorder:hover,
tr.listItemBold:hover,
tr.listItemBoldContrast:hover,
tr.listItemBoldNoBorder:hover,
tr.listItemHighlighted:hover,
tr.listItemSelected:hover,
tr.listItemDropped:hover,
tr.listItemModified:hover,
tr.listItemSelectedDropped:hover,
tr.tableLineDisabled:hover,
tr.tableLineContrastDisabled:hover,
tr.tableLine:hover,
tr.tableLineContrast:hover
{
	/*background-color: #c5eaef;*/
}
table#Sec tr:not(.table_column_head):hover {
	/*background-color: #c5eaef !important;*/
}


tr.listItemSpacing > td {
	box-sizing: border-box;
	height: 32px;
	background: transparent;
	empty-cells: show;
}

tr.listItemTrunc > td,
tr.listItemContrastTrunc > td
{
	overflow: hidden;
	text-overflow: ellipsis
}

tr.listItemGrey > td,
tr.tableLineDisabled > td,
tr.tableLineContrastDisabled > td
{
	color: gray;
}

a.listItemGrey
{
	color: gray;
}

tr.listItemBold > td,
tr.listItemBoldContrast > td,
tr.listItemBoldNoBorder > td
{
	font-weight : bold;
}

tr.listItemHighlighted
{
	background-color: #c1c8fa;
}

tr.listItemSelected,
tr.listItemSelectedDropped
{
	background-color: #c5eaef;
}

tr.listItemDropped > td,
tr.listItemSelectedDropped > td
{
	color: red;
}

tr.listItemModified
{ }


table td span.objItemSpacing:nth-child(n),
table th span.objItemSpacing:nth-child(n) { margin-left: 8px; }
table th span.objItemSpacing:first-child,
table td span.objItemSpacing:first-child { margin-left: 0px; }


/**++++++++++++++++++++++++++
 * error box
 */
#popup_error_box {
	background-color: #FFFFFF;
	margin: 0;
	padding: 0 0 20px;
	width: 420px;
	border: 1px solid #dbdcde;
}
#popup_box_header {
	/*
	background-image: url(popup_error_boxheader.gif);
	background-repeat: repeat;
	*/
	background:none;
	height: 54px;
	/*
	padding-top: 10px;
	padding-left: 10px;
	*/
	padding:0;
	text-align: left;
}
#popup_box_text {
	margin-left: 60px;
	margin-right: 30px;
	text-align: left;
}
#popup_box_table {
	margin-left: 0;
	margin-right: 0;
	text-align: left;
}
#popup_box_title {
	color: Black;
	text-align: center;
	padding-top: 10px;
}
#popup_box_err_msg {
	color: Black;
	font-weight: bold;
	text-align: center;
}
#popup_box_reflection {
	background-image: url(popup_error_reflection.gif);
	background-repeat: repeat-x;
	height: 30px;
	width: 400px;
}
#alert_icon {
	/*
	background-image: url(alert_icon.gif);
	background-repeat: no-repeat;
	*/
	background:none;
	height: 40px;
	width: 40px;
	margin-top:15px;
	margin-left:15px;
	float: left;
}
#popup_box_header_text {
	font-family: Arial, Tahoma, Verdana;
	font-size: 16px;
	color: #000000;
	text-align: left;
	height: 50px;
	width: 320px;
	margin-top: 0;
	margin-left: 50px;
	padding-top: 12px;

	/* don't display this anymore */
	display:none;
}
#popup_box_header_text_centered {
	font-family: Arial, Tahoma, Verdana;
	font-size: 16px;
	color: #000000;
	text-align: center;
	height: 50px;
	margin-top: 0;
	padding-top: 12px;

	/* don't display this anymore */
	display:none;
}

/**++++++++++++++++++++++++++
 * warning box
 */
#popup_warning_box 
{
	background-color: #FFFFFF;
	margin: 0;
	padding: 24px 24px 24px;
	height:250px;
	width: 400px;
	border: 1px solid #dbdcde;
	border-radius:8px;
}
#popup_warning_bar
{
	background-image: url(pop_header_bg.gif);
	width: 100%;
	height: 42px;
	margin-top:48px;
	text-align:center;
}
#popup_warning_bar img 
{
	margin-left: 0px;
}
#popup_warning_opt
{
	background-image: url(opt_bg.gif);
	width: 100%;
	height: 42px;
}
#popup_warning_header 
{
	height: 54px;
	padding-top: 10px;
	padding-left: 10px;
	text-align: left;
}
#warning_icon 
{
	background-image: url(exclamation_24.png);
	background-repeat: no-repeat;
	background-position: center;
	height: 40px;
	width: 40px;
	float: left;
	margin-left:30px;
}
#popup_warning_header_text
{
	font-family: Arial, Tahoma, Verdana;
	font-size: 13px;
	font-weight: bold;
	color: #000000;
	text-align: left;
	height: 50px;
	width: 250px;
	margin-top: 0;
	margin-left: 90px;
	padding-top: 12px;
}
#popup_warning_text {
	margin-left: 60px;
	margin-right: 30px;
	text-align: left;
	font-size: 13px;
	color: #000000;
}

div.blockUI.blockMsg.blockPage {
	border-radius:8px;
}

/**++++++++++++++++++++++++++
 * dialog branding
 */
#popup_branding_bar {
	background-image: url(pop_header_bg.gif);
	/*margin: -15px 0 0 -10px;*/
	width: 100%;
	height: 42px;
} 

#popup_branding_bar img {
	position: relative;
	top: 57%;
	transform: translateY(-43%);
	float:left;
}

#popup_branding_bar .prodName {
	float: left;
	height: 42px;
	margin-left:16px;
	position:relative;
	vertical-align:middle;
	line-height:42px;
}

body.popup_error_bg div.popup_branding_bar
{
	background: none;
}

body.popup_error_bg img.logo_popup
{
	background: none;
}


/**++++++++++++++++++++++++++
 * standalone launch
 */
#swlPageLaunch {
	display: none;
	text-decoration: none;
}

#swlPageLaunch img {
	border: 0;
}


/**++++++++++++++++++++++++++
 * old swl tables
 */
.swlTable {
	table-layout: fixed;
	width: 100%;
	border: none;
	border-spacing: 0;
	border-collapse: collapse;
}

.swlTable tr { }

/* keep row heights on FF3 when table height is fixed and limited number of rows are shown -
 * FF3 expands the row height to fill the entire table - adding an empty row at the bottom
 * of the table with the following class keeps in check FF3's unbridled expansionism.
 */
.swlTable tr.ff3TableFix {
	height: 90%;
	vertical-align: top;
}

tr.swlTblHdrRow {
	background-color: #ccc;
}

tr.swlTblHdrRow > td {
	box-sizing: border-box;
	height: 30px;
	padding: 4px;
	font-size: 11px;/* force the font size */
	font-weight: bold;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
tr.swlTblHdrRow > td:first-of-type {
	padding-left: 8px;
}
tr.swlTblHdrRow > td:last-of-type {
	padding-right: 8px;
}

.swlTblRowClickable:hover {
	background-color: #c5eaef;
	cursor: pointer;
}

.swlTblFooter {
	height: 22px;
	min-height: 22px;
	max-height: 22px;
	background-image: url(table_column_back_tall.gif);
}

.swlTblSummary {
	padding: 4px 0;
	display: none;
}

.statusBar {
	color: #ffffff;
	font-size: 11px;
	font-weight: bold;
	background-image: url("table_column_back_tall.gif");
	line-height:21px;
}

.pageSetting {
	position: relative;
	width: 20px;
	min-width: 20px;
	min-height: 40px;
}

.pageSetting img {
	cursor: pointer;
}

.itemDisable
{
	opacity: 0.2;
}
.paramGrayDisable
{
	background-color: #ffffff;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 11px;
	font-weight : normal;
	height: 20px;
	line-height: 20px;
}

.listItemNoBorder
{
	background-color: #ffffff;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 11px;
	font-weight : normal;
	empty-cells: show;
}

.swlControlBarLeft
{
	float: left;
}

.swlControlBarRight
{
	float: right;
	width: 25%;
}

.swlTabHeader { }

.swlTabHeader img {
	position: relative;
	top: 6px;
}

.swlTabHeader img:hover {
	cursor: pointer;
}

.swlInfo { }

.swlRefresh { }

.swlRefresh > span {
	padding-right: 2em;
}

.swlRefresh > span.toggleText {
	padding-right: 0;
}

img.toggleUpdate {
	border: 0;
	margin-left: 4px;
	vertical-align: bottom;
	cursor: pointer;
}

.swlListItem,
.swlListItemContrast
{
	border-left: 0;
	border-right: 0;
	border-top: 0;
	border-bottom: 1px solid #e3e3e6;
}

.swlListItemBold,
td.swlListItemCellBold
{
	font-weight : bold;
}

.swlListItemWarning,
td.swlListItemCellWarning
{
	color: #ffbb33;
}

.swlListItemWarningBold,
td.swlListItemCellWarningBold
{
	color: #ffbb33;
	font-weight : bold;
}

.swlExpiredItem
{
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 11px;
	font-weight : normal;
	color: #707070;
    text-decoration: line-through;
}
span.swlExpiredItem:hover {
	cursor: pointer;
	cursor: hand;
}

/**++++++++++++++++++++++++++
 * stats tables
 */
/** must use together with swlTable, and usually used in tiles */
table.swlStatsTable {}
table.swlStatsTable tr.swlStatsTableHeader > th,
table.swlStatsTable tr.swlStatsTableHeader > td {
	box-sizing: border-box;
	padding: 4px;
	border-bottom: 1px solid #eee;
	font-size: 11px;/* force the font size */
	font-weight: bold;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
table.swlStatsTable tr.swlStatsTableHeader > th:first-of-type,
table.swlStatsTable tr.swlStatsTableHeader > td:first-of-type {
	padding-left: 8px;
}
table.swlStatsTable tr.swlStatsTableHeader > th:last-of-type,
table.swlStatsTable tr.swlStatsTableHeader > td:last-of-type {
	padding-right: 8px;
}
table.swlStatsTable tr.swlStatsTableRow > td {
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
	background-color: transparent;
	empty-cells: show;
	padding: 4px;
	font-size: 11px;/* force the font size */
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal;/* override any nowrap html attribute */
}
table.swlStatsTable tr.swlStatsTableRow > td:first-of-type {
	padding-left: 8px;
}
table.swlStatsTable tr.swlStatsTableRow > td:last-of-type {
	padding-right: 8px;
}
table.swlStatsTable tr.swlStatsTableRow:last-of-type > td {
	border-bottom: 0;
}

table.swlStatsTable tr.swlStatsTableRow:hover {
	/*background-color: #c5eaef;*/
}

.swlStatsItem {
	color: #00983d;
}


/**++++++++++++++++++++++++++
 * netsted table in listItem
 */
table.listItemNestedTable {
	width: 100%;
	border: none;
	border-spacing: 0;
	border-collapse: collapse;
}

table.listItemNestedTable > tbody > tr > td {
	box-sizing: border-box;
	border-bottom: 1px solid #ddd;
	background-color: transparent;
	empty-cells: show;
	padding: 4px;
	font-size: 11px;/* force the font size */
	text-align: left;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	overflow-wrap: break-word;
	white-space: normal;/* override any nowrap html attribute */
	word-break: break-all;/* allow to break words anywhere since the table is not fixed-layout */
}
table.listItemNestedTable > tbody > tr:last-of-type > td {
	border-bottom: 0;
}


/**++++++++++++++++++++++++++
 * swl form layout
 */
.swlMarginL20 {
	margin-left: 20px;
}

.swlSection
{
	clear: both;
	padding: 0 6px 0 0;
}

.swlFieldSet
{
	margin: 20px 0 0;
	clear: left;
	width: 100%;
}
div.groupLabel + .swlFieldSet {
	margin-top: 0;
}

.swlFieldSet .swlRow {
	min-height:	30px;
}

.swlFieldSet .swlColOne {
	float: left;
	width: 360px;
}

.swlFieldSet .swlColTwo {
	float: left
}

.swlFieldSet .swlIndent .swlColOne {
	float: left;
	padding-left: 28px;
	width: 332px;
}

.swlFieldSet .swlRow span input[type=checkbox] {
	margin-right: 6px;
}

.swlFieldSet .swlRow input[type=button] {
	margin-left: 0;
}

.swlPanelGroup 
{
	background-color: transparent; 
	position: relative;
}

.swlPanel 
{
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 11px;
	position:absolute;
	left: 20px;
	top: 0;
	margin: 0;
	padding:6px;
}

div.swlPanelResizeCntnr {
	/*
	 * For a resizable property sheet use this for an outer <div> that holds everything
	 * (also requires a local stylesheet giving "html, body, form { height: 100%; }")
	 */
	height: auto;
	height: 100%;
	min-height: 100%;
	position: relative;
}

div.swlPanelResizeBtnBar {
	/*
	 * For a resizable property sheet use this inside the "swlPanelResizeCntnr" outer
	 * container for the <div> holding the bottom button bar which will stick to the
	 * bottom of the window
	 */
	position: absolute;
	width: 100%;
	bottom: 0;
	padding-left: 10px;
	padding-bottom: 10px;
}

.swlPanelHeader {
	background: #EFF0F4 url(table_column_back_tall.gif) no-repeat;
	color: #FFFFFF;
	width: 100%;
	font-size: 11px;
	font-weight: bold;
	min-height: 22px;
	padding-top: 6px;
	margin-bottom: 22px;
	text-align: left;
}

.swlPanelHeader span {
	margin-left: 20px;
}

.swlPanelSettingsGroup
{
	/*margin: 20px 0 0;*/
	clear: left;
	width: 100%;
	padding-left: 0;
}

.swlPanelSetting
{
	font: 12px/28px Tahoma, Arial, Verdanna, sans-serif;
	clear: left;
}

.swlPanelSetting span {
	min-height: 28px;
}

.swlPanelSetting span img {
	cursor: pointer;
	border: 0;
}

.swlPanelRow {
	font: 12px/28px Tahoma, Arial, Verdanna, sans-serif;
	clear: left;
	min-height: 28px;
}

/* use margin-left because for rounded buttons we add an img following the input 
 * and margin-right causes a gap */
.swlPanelRow input[type=button] {
	margin-left: 1em;
}

.swlPanelRow span {
	min-height: 28px;
}

.swlPanelRow span img {
	cursor: pointer;
	border: 0;
}

.swlPanelRow span:last-child {
	margin-bottom: 12px;
}

.swlPanelDependent {
	padding-left: 4em;
}

.swlPanelColOne {
	float: left;
}

.swlPanelColTwo {
	float: left;
}

.swlPanelColThree {
	float: right;
}

.swlPanelButtons {
	float: right;
	margin: 12px 20px 12px 0;
}

.swlStylizePopup .swlPanelRow span:last-child {
	margin-bottom: 0;
}

.swlPopupButtonBar {
	float: left;
	margin-top: 10px;
}

.swlPopupLeft {
	float: left;
	text-align: right;
	min-width: 45%;
	width: 45%;
	position: relative;		/* ensure this layout affects following swlPopupRight elem */
}

input.swlPopupRight {
	cursor: text;
	float: left;
	margin-left: 1em;
	width: 204px;
}

.swlPopupRight button {
	padding: 8px 0;
}

.swlPopupCbox {
	float: right;
	position: relative;
	margin-top: 6px;
}

.swlPopupCboxLabel {
	float: left;
	position: absolute;
	left: 50%;
	text-align: left;
}

.swlPopupSelect {
	text-align: left;
	width: 204px;
}

.swlRowChild {
	display: table-row;
}

.swlRowChildHidden {
	display: none;
}

.swlRowAnchorImgShown {
	background-image: url(minus.gif);
	background-repeat: no-repeat;
	text-decoration:none;
}

.swlRowAnchorImgHidden {
	background-image: url(plus.gif);
	background-repeat: no-repeat;
	text-decoration:none;
}

.swlPanelToggle {
	display: none;
}

/**++++++++++++++++++++++++++
 * error message box
 */
.swlErrorMessage  {
	font-weight: bold;	
	background-color:white;
	border : 1px inset;
	padding-left:4px;
}

/**++++++++++++++++++++++++++
 * tootip support
 */
.tt_table
{
	/*width: 200px;*/ 
	height: auto;
	color: #000;
	font-size: 11px;
	text-decoration: none;
	text-align: start;
}

.tt_table td,
.tt_table th
{
	font-size : 11px;
	text-align: start;
}

.tt_top_left
{
	background-image: url(swl_tt_top_left_corner.gif);
	background-repeat: no-repeat;
	background-position: top left;
	width: 29px;
	height: 22px;
}

.tt_top_left_caret
{
	background-image: url(swl_tt_top_left_caret.png);
	background-repeat: no-repeat;
	background-position: top left;
	width: 29px;
	height: 22px;
}

.tt_top_side
{
	background-image: url(swl_tt_top_side.gif);
	background-repeat: repeat-x;
	background-position: top left;
	/*width: 150px;*/
	height: 22px;
}

.tt_top_right
{
	background-image: url(swl_tt_top_right_corner.gif);
	background-repeat: no-repeat;
	background-position: top right;
	width: 28px;
	height: 22px;
}

.tt_top_right_caret
{
	background-image: url(swl_tt_top_right_caret.png);
	background-repeat: no-repeat;
	background-position: top right;
	width: 28px;
	height: 22px;
}

.tt_right_side
{
	background-image: url(swl_tt_right_side.gif);
	background-repeat: repeat-y;
	background-position: top right;
	background-color: #eee;
}

.tt_bottom_right
{
	background-image: url(swl_tt_bottom_right_corner.gif);
	background-repeat: no-repeat;
	background-position: top right;
	width: 28px;
	height: 22px;
}

.tt_bottom_right_caret
{
	background-image: url(swl_tt_bottom_right_caret.png);
	background-repeat: no-repeat;
	background-position: top right;
	width: 28px;
	height: 22px;
}

.tt_bottom_side
{
	background-image: url(swl_tt_bottom_side.gif);
	background-repeat: repeat-x;
	background-position: top left;
	/*width: 150px;*/
	height: 22px;
}

.tt_bottom_left
{
	background-image: url(swl_tt_bottom_left_corner.gif);
	background-repeat: no-repeat;
	background-position: top left;
	width: 29px;
	height: 22px;
}

.tt_bottom_left_caret
{
	background-image: url(swl_tt_bottom_left_caret.png);
	background-repeat: no-repeat;
	background-position: top left;
	width: 29px;
	height: 22px;
}

.tt_left_side
{
	background-image: url(swl_tt_left_side.gif);
	background-repeat: repeat-y;
	background-position: top left;
	background-color: #eee;
}

.tt_center
{
	/*
	background-image: url(swl_tt_center.gif);
	background-repeat: repeat;
	background-position: top left;
	*/
	width: 90%;
	text-align: left;
	background-color: #eee;
}

.tt_title
{
	background-image: url(swl_tt_center.gif);
	background-repeat: repeat;
	background-position: top left;
	width: 80%;
}

.tt_close
{
	background-image: url(swl_tt_center.gif);
	background-repeat: repeat;
	background-position: top left;
	width: 10%;
}

.tooltip_header,
.tooltip_header td,
.tooltip_header th
{
	color: #3661ad;
	font-size: 12px;
	line-height: 17px;
	font-weight: bold;
}

.tooltip_text
{
	color: #2E2F33;
	font-size: 11px;
	text-align: left;
}

.lrg_tooltip_tag
{
	font-size: 10px;
	font-weight: bold;
}

.lrg_tooltip_value
{
	font-size: 10px;
	font-weight: normal;
	white-space: pre-wrap; /* css-3 */
	white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
	white-space: -pre-wrap; /* Opera 4-6 */
	white-space: -o-pre-wrap; /* Opera 7 */
	word-wrap: break-word; /* Internet Explorer 5.5+ */
}

.tt_table td.lrg_tooltip_value,
.tt_table td.lrg_tooltip_tag
{
	font-size: 10px;
}

.tooltipFieldName
{
	font-weight: bold;
	font-style: normal;
}

.tooltipParamTable
{
	margin: 0 0;
	padding: 0 0;
	border: 0 none;
	display: block;
	width: 100%;
}

.tt_center_white {
	background-color: white;
}
.tt_table table.tt_outer_table {
	width: 100%;
	border-collapse: collapse;
	border-spacing: 0;
	table-layout: fixed;
    word-wrap:break-word; 
}
.tt_table table.tt_outer_table > thead > tr > th,
.tt_table table.tt_outer_table > tbody > tr > td
{
	padding: 0px;
}
.tt_table table.tt_inner_table
{
	width: 100%;
	border-collapse: collapse;
}
.tt_table table.tt_inner_table td,
.tt_table table.tt_inner_table th
{
	text-align: left;
	padding: 3px 2px;
	background-color: #eee;
}
.tt_table table.tt_inner_table th {
	background-color: #ccc;
	font-weight: bold;
}
.tt_table table.tt_inner_table td.highlighted {
	background-color: #dbe6fa;
}


/**++++++++++++++++++++++++++
 * old table helper
 */
table.nowrap td,
table.nowrap th
{
	white-space: nowrap;
}
table.border_both td,
table.border_both th,
table.border_h td,
table.border_h th
{
	border-bottom: 1px solid #ddd;
}
table.border_both td,
table.border_both th,
table.border_v td,
table.border_v th
{
	border-right: 1px solid #ddd;
}
table.border_both tr:last-child td,
table.border_h tr:last-child td
{
	border-bottom: none;
}
table.border_both tr td:last-child,
table.border_both tr th:last-child,
table.border_v tr td:last-child,
table.border_v tr th:last-child
{
	border-right: none;
}


/**++++++++++++++++++++++++++
 * swl tabs
 */
/* This makes the scrolling table work */
div.swlTabContainer {
	/* height: 310px;	table body height + table head height*/
	box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
	margin: 0px 0px;
	position: relative;
}
div.swlTabContainer.swlTabContainerNoContentHdr {
	padding-top: 32px;
}

div.swlTabContainer div.swlTableEntryHScroller {
	position: absolute;
	width: 6px;
	background: #52575e;
	border: 1px solid #101010;
	-webkit-border-radius: 4px;
	-khtml-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	filter: alpha(opacity = 50); /* IE patch */
	opacity: 0.5;
}

div.swlExclude { }
div.swlExclude:after {
	display: table;
	content: ' ';
	clear: both;
}

.swlTabFooter {
	box-sizing: border-box;
	margin: 0;
	min-height: 32px;
	overflow: hidden;
}
.swlContent > .swlTabFooter {
	padding: 4px;
}

.swlTabFooter span {
	margin: 0;
	vertical-align: baseline;
}

.swlTabFooter span.ltSpan,
.swlContentHdr span.ltSpan {
	float: left;
}

.swlContentHdr span.ltSpan {
	padding-top: 10px;
}

.swlTabFooter span.rtSpan,
.swlContentHdr span.rtSpan {
	float: right;
	white-space: nowrap;
}

span.rtSpan {
	float: right;
}


/**++++++++++++++++++++++++++
 * port status
 */
.swlPortDisabled {
	background-image: url(disabled.png);
	background-repeat: no-repeat;
	height: 14px;
}

.swlPortEnabled {
	background-image: url(checked.png);
	background-repeat: no-repeat;
	height:	18px;
}

.swlPortDisabledGrayed {
	background-image: url(disabled_gray.png);
	background-repeat: no-repeat;
	height: 14px;
}

.swlPortEnabledGrayed {
	background-image: url(checked_gray.png);
	background-repeat: no-repeat;
	height:	18px;
}


/**++++++++++++++++++++++++++
 * port status
 */
.swlPortStpDisabled {
	background-image: url(disabled.png);
	background-repeat: no-repeat;
	height: 14px;
}

.swlPortStpEnabled {
	background-image: url(checked.png);
	background-repeat: no-repeat;
	height:	18px;
}


/**++++++++++++++++++++++++++
 * swl stylize tables
 */
.swlTblContainer {
	margin: 0 0;
	padding: 0 0;
	border: 0 none;
}

/* This makes the scrolling table work */
div.swlTblContainer {
	position: relative;
	width: 100%;
	overflow: hidden;
}
 
/* set this on input, span, a, and select elements (but not on img) */
div.swlTblContainer td input,
div.swlTblContainer td span,
div.swlTblContainer td a,
div.swlTblContainer td select {
	margin: 0;
}

div.swlTblContainer td span.wrappable { }

div.swlTblContainer td img,
div.swlTblContainer td input[type=checkbox]
{
	vertical-align: bottom;
}
div.swlTblContainer td input[type=checkbox] {
	width: 13px;
	height: 13px;
}

td.swlTableItem,
td.swlTableItemBold,
td.swlTableStatsItem
{
	box-sizing: border-box;
	padding: 4px;
	font-size: 11px;/* force the font size */
	text-align: left;
	border-bottom: 1px solid #eee;
}
td.swlTableItem:first-of-type,
td.swlTableItemBold:first-of-type,
td.swlTableStatsItem:first-of-type
{ padding-left: 8px; }
td.swlTableItem:last-of-type,
td.swlTableItemBold:last-of-type,
td.swlTableStatsItem:last-of-type
{ padding-right: 8px; }

td.swlTableItemBold {
	font-weight : bold;
}


/**++++++++++++++++++++++++++
 * swl data table: unify all tables in SonicOS
 */
table.swlDataTable,/* for swlTable */
table.swlDataTablePlain/* legacy and old table-control tables */
{
	box-sizing: border-box;
	border: none;
	width: 100%;
	border-spacing: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

col.colGeneral { min-width: 80px; }

col.colCheck { width: 25px; min-width: 25px; }
col.colNum { width: 38px; min-width: 38px; }
col.colTrigger { width: 20px; min-width: 20px; }
col.colCheckNum { width: 59px; min-width: 59px; }
col.colCheckTrigger { width: 42px; min-width: 42px; }
col.colCheckNumTrigger { width: 75px; min-width: 75px; }
col.colNumTrigger { width: 54px; min-width: 54px; }

col.colDateTime { width: 110px; min-width: 110px; }
col.colUuid { width: 120px; min-width: 120px; }

col.colIpVerMarker { width: 32px; min-width: 32px; }

col.colEnable { width: 60px; min-width: 60px; }
col.colConfigure { width: 90px; min-width: 90px; }

col.colIcon1, col.colIcon2 { width: 60px; min-width: 60px; }
col.colIcon3 { width: 90px; min-width: 90px; }
col.colIcon4 { width: 100px; min-width: 100px; }

span.priorityNum { display: inline-block; min-width: 24px; }


/**++++++++++++++++++++++++++
 * logo mode labels
 */
.logoLabel {
	color: #2E2F33;
}

a.logoLabel:hover {text-decoration: underline; color: #003399 }

.logoLabelBold {
	color: #2E2F33;
	font-weight: bold;
}

.logoLink {
	text-decoration: underline;
	padding-left: 5px;
}


/**++++++++++++++++++++++++++
 * old status table
 */
.swlStatusTable{
	border-top:1px solid #e3e3e6;
	border-left:1px solid #e3e3e6;
	border-right:1px solid #e3e3e6;
	border-bottom:1px solid #e3e3e6;
}
.swlText{
	padding: 0px 4px 1px;
	vertical-align: middle;
}
.swlTextRed{
	padding: 0px 4px 1px;
	vertical-align: middle;
}


/**++++++++++++++++++++++++++
 * Layout definitions for reGetPwd.html
 */
#reGetPwdContainer {
	width: 440px;
	margin-top: 15px;
	font-family: Tahoma, Arial, Verdana, sans-serif;
	font-size: 11px;
	font-weight : normal;
	color: #2e2f33;
}
#reGetPwdTopCntnr {
	height: 45px;
}
#reGetPwdImgCntnr {
	width: 50px;
	float: left;
    background: url(exclaim.gif);
	height: 32px;
	width: 32px;
	line-height: 32px; 
}
#reGetPwdHdrCntnr {
	width: 390px;
	float: right;
	margin-top: 1px;
}
#reGetPwdMainCntnr {
	height: 50px;
}
#reGetPwdPwdBoxCntnr {
	float: left;
	padding-left: 60px;
}
#reGetPwdBtnCntnr {
	float: right;
	text-align: right;
	padding-right: 60px;
}


/**++++++++++++++++++++++++++
 * page view styling
 */
.viewActionBarBg
{
	width: 99%;
	height: 23px;
	padding: .5em;
}

.viewSeparator
{
	position:relative; 
	height:15px;
}

.pgBoxHeader {
	border: 1px solid #c7c7cd;
	padding: 4px 6px 0;
	margin-bottom: 10px;
	min-height: 22px;
	background-color: #f5f5f8;
	clear: both;
}


/**++++++++++++++++++++++++++
 * color picker
 */
div.colorIndicator {
	border: 1px solid black;
	height: 10px;
	width: 10px;
	margin: 0;
	padding: 0;
}
div.colorSelector {
}
div.colorSelector .selectorTable {
	border: 1px solid black;
	border-collapse: collapse;
}
div.colorSelector .selectorTable TD {
	padding: 0px;
	margin: 0px;
	width: 10px;
	height: 10px;
	border: 1px solid black;
	cursor: pointer;
}
div.colorSelector .selectorTable .hover {
	border: 1px solid yellow;
}

.blockLogo
{
	width:110px;
	height:38px;
	background-image: url(blockLogo.gif);
}

.actionBtn
{
	width:80px;
	height:22px;
	line-height:22px;
	border:1px solid #b8b8b8;
	background-image: url(actionBtnBg.png);
	background-repeat: repeat-x;
	font-size:11px;
	text-align:center;
	cursor:pointer;
}


/**++++++++++++++++++++++++++
 * new styles use for logo frame
 */
.header-0412 {
	width: 100%;
	min-width: 950px;
	background-image: url(header_main_back.png);
	background-position: 0 -7px;
}

.header-0412 .left {
	float: left;
	height: 60px;
	margin-left:24px;
	position:relative;
}

.header-0412 .left img {
	position: relative;
	top: 55%;
	transform: translateY(-45%);
}

.header-0412 .prodName {
	float: left;
	height: 60px;
	margin-left:15px;
	position:relative;
	vertical-align:middle;
	line-height:60px;
}

.header-0412 .right {
	box-sizing: border-box;
	float: right;
	height: 60px;
	text-align: right;
	color: #0e121f;
	padding: 22px 24px 0 0;
	background:none;
}

.header-0412 .cl {
	clear: both;
}

.header-0412 a {
	color: #0e121f;
	text-decoration: none;
	padding: 0 5px;
}

.header-0412 a:hover {
	text-decoration: underline;
}

.mode-0412 {
	padding-top: 3px;
	margin: 0 24px 0 3px;
	text-align: right;
	height: 24px
}

.mode-0412 .right2 {
	box-sizing: border-box;
	text-align: right;
	width: 210px;
	height: 100%;
	padding-top: 4px;
	float: right;
}

.mode-0412 .left2 {
	box-sizing: border-box;
	text-align: left;
	width: 300px;
	height: 100%;
	padding-top: 4px;
	float: left;
}

.mode-0412 a {
	color: #0e121f;
	text-decoration: none;
}

.mode-0412 a:hover {
	text-decoration: underline
}

.lhnBtn {
	float:left;
	cursor:pointer;
	margin-right:8px;
}


/****************************
 ****************************
 * SNWL UI Component Library
 */
/**++++++++++++++++++++++++++
 * Toggle Switch
 */
div.swlCompSwitch {
	position: relative;
	overflow: visible;
}
div.swlCompSwitch > input[type=checkbox] {
	margin: 0; padding: 0;
	width: 0; height: 0;
	display: none;
	position: absolute;
}
div.swlCompSwitch > label {
	display: block;
	position: relative;
	height: 24px;
	width: 36px;
	cursor: pointer;
}
div.swlCompSwitch-track {
	background: rgba(0,0,0,0.26);
	height: 14px;
	border-radius: 14px;
	position: relative;
	top: 5px;
}
div.swlCompSwitch > input[type=checkbox]:checked + label > div.swlCompSwitch-track {
	background: rgba(0,93,132,.6);
}
div.swlCompSwitch-thumb {
	height: 20px;
	width: 20px;
	border-radius: 50%;
	position: absolute;
	left: 0;
	top: 2px;
	background: #fafafa;
	box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 3px 1px -2px rgba(0,0,0,.2), 0 1px 5px 0 rgba(0,0,0,.12);
	transition: left 0.2s ease;
}
div.swlCompSwitch:hover > label > div.swlCompSwitch-thumb {
	background: rgb(255,107,11) !important;
}
div.swlCompSwitch > input[type=checkbox]:checked + label > div.swlCompSwitch-thumb {
	background: rgb(0,93,132);
	left: 16px;
	box-shadow: 0 3px 4px 0 rgba(0,0,0,.14), 0 3px 3px -2px rgba(0,0,0,.2), 0 1px 8px 0 rgba(0,0,0,.12);
}


/****************************
 ****************************
 * helper classes
 */
/**++++++++++++++++++++++++++
 * colors
 */
.black {
	color: #000000;
}
.allowRule,
.green {
	color: #00983D;
}
.ltgreen {
	color: #80CC9E;
}
.warning,
.amber {
	color: #ffbb33;
}
.denyRule,
.alert,
.red {
	color: #db1a20;
}
.orange { color: #ff6b0b; }
.blue { color: #005d84; }
.teal { color: #44bccc; }
.grey { color: #ddd; }

.readonly {
	background-color :#EAEBF2;
}

tr.red_text td
{
	color:#ff0000;
}


/**++++++++++++++++++++++++++
 * quick size
 */
.w60 {width: 60px !important;}
.w120 {width: 120px !important;}
.w180 {width: 180px !important;}
.w240 {width: 240px !important;}
.w300 {width: 300px !important;}
.w360 {width: 360px !important;}
.w420 {width: 420px !important;}
.w480 {width: 480px !important;}
.w540 {width: 540px !important;}


/**++++++++++++++++++++++++++
 * block utility
 */
.nopad { padding:0; }
.nomargin { margin:0; }
.hide {display: none;}
.invisible {visibility: hidden;}

.clearfix:after {
	content: ' ';
	display: table;
	clear: both;
}

.ellipsisBlock {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}

/*
 *	 Use this class with a <div> to get it centered vertically:
 *	 It also needs to be given an explict height and a top margin of
 *	-ve half that height, e.g.: style="height:70px; margin-top:-35px;"
 */
.vertCentered {
	background-color: #FFFFFF;
	position: absolute;
	top: 50%;
	width: 100%;
	margin: 0;
}

/**++++++++++++++++++++++++++
 * specific typography
 */
.label { }

.labelBold {
	font-weight : Bold;
}

.labelBig {
	font-size: 15px;
	line-height: 1.2;
	font-weight : bold;
}

.labelHeading{
	color: #005d84;
}

.swlLabel 
{ }

.swlLabelBold 
{
	font-weight : bold;
}

.gLabel {
	color: black;
	font-size: 10px;
	font-weight: normal;
}

.gLabel2 {
	color: black;
	font-size: 8px;
	font-weight: normal;
}

.alignLeft
{
	text-align:left;
}

.entryCount 
{
	font-style: italic;
	color: #95999b;
}


/**++++++++++++++++++++++++++
 * old close icon helper
 */
a.close {
	background:transparent url(close.png) repeat scroll 0%;
	height:14px;
	width:14px;
	border:0pt none;
	display:block;
	float:right;
	font-size:0px;
	line-height:0pt;
	position:relative;
	text-decoration:none;
	cursor: pointer;
}

a.close:hover {
	background:transparent url(close_hover.png) repeat scroll 0%;
}

/**++++++++++++++++++++++++++
 * table for layout
 */
table.layout,
table.layout-cp4 {
	box-sizing: border-box;
	border: none;
	border-spacing: 0;
	border-collapse: collapse;
	width: 100%;
	/*table-layout: fixed;*/
}

table.layout-cp4 > tbody > tr > td,
table.layout-cp4 > thead > tr > td,
table.layout-cp4 > thead > tr > th
{
	padding: 4px;
}

/**++++++++++++++++++++++++++
 * size for controls
 */
input:not([type="image"]), select, button, textarea {
	/* use border-box to simplify the width setting for controls accross all browsers */
	box-sizing: border-box !important;
}
input.size_tiny, select.size_tiny {width: 40px !important;}
input.size_small, select.size_small {width: 80px !important;}
input.size_normal, select.size_normal {width: 160px !important;}
input.size_medium, select.size_medium {width: 240px !important;}
input.size_large, select.size_large {width: 320px !important;}

/* for button width normalization */
input[type="button"].size_small, button.size_small {width: 80px !important;}
input[type="button"].size_large, button.size_large{width: 240px !important;}

/**++++++++++++++++++++++++++
 * size for gap/spacing
 */
span.hspc_tiny, td.hspc_tiny {padding-left: 5px !important;}
input.hspc_tiny {margin-left: 5px !important;}
span.hspc_small, td.hspc_small {padding-left: 15px !important;}
input.hspc_small {margin-left: 15px !important;}
span.hspc_medium, td.hspc_medium {padding-left: 30px !important;}
input.hspc_medium {margin-left: 30px !important;}
span.hspc_large, td.hspc_large {padding-left: 45px !important;}
input.hspc_large {margin-left: 45px !important;}

td.vspc_tiny {padding-top: 5px !important;}
td.vspc_small {padding-top: 15px !important;}

/**++++++++++++++++++++++++++
 * misc (not sure where to go)
 */
/* Use this class with <tr> and <td> to get a half-height spacing line */
.half_line_spacing {
	line-height: 6px;
	font-size: 6px;
}

.toolBar
{
	background-color: #FFFFFF;
	border : 1px inset;
}

.note_superscript
{
	background-image: url(note_superscript.png);
	width:12px;
	height:12px;
	cursor:pointer;
	margin-left:3px;
	margin-right:3px;
	vertical-alignment:top;
}

.commonStatusBtnWarning
{
	background-image: url(status-warning.png);
}

.commonStatusBtnAlert
{
	background-image: url(status-alert.png);
}

.commonStatusBtnOK
{
	background-image: url(status-OK.png);
}


/*******************************************
 * DO NOT ADD ANY STYLES ARBITRARILY HERE
 ******************************************/