@charset 'UTF-16';

/* alert */

.alert
{
	font-weight: bold;
}
.alert-success
{
	color: #5683FF;
}
.alert-error
{
	color: red;
}

/* standard elements */
html, body
{
	width: 100%;
	height: 100%;
}

body
{
	margin: 0;
	padding: 0;
	/*font-family: 'Open Sans', sans-serif; */
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    
	font-size: 14px;
	color: #5c6476;
	overflow: hidden;
}

/* standard colors */
.background-color-lightgray {
	background-color: lightgray !important;
}

.background-color-transparent {
	background-color: transparent !important;
}

.color-gray {
	color: gray;
}

.color-darkgray {
	color: dimgray;
}

.color-orange {
	color: orange;
}

/* inherit font for input elements */
input, select, textarea, button
{
	font-family: inherit;
	/*color: #4C4C4C; */
}


/* Top level container. Sets padding and margins. */
.body-frame
{
	height: 100%;
}

/* disable decoration for links */
a {
	color: inherit;
	text-decoration: none;
}

.backg-gray {
	/*background: url('../images/Gray-background2.jpg')*/
	/* background: linear-gradient(left, #E7E7F0 20%, #0B4C5A 80%); 
	background: #E7E7F0;*/
	background-color: lightgray;
}

.backg-purple {
	/*background: url('../images/Gray-background2.jpg')  */
	background: linear-gradient(left, #5683FF 20%, #3855A5 80%); 
	/*background: #E7E7F0; 
	background-color: #25396E; */
}


h1, h1A, h2, h3, h4, h5, h6, h10, htbl {
	font-weight: 400;
	line-height: 1.5em;
}

h11 {
	font-weight: 400;
	line-height: 1em;
	font-size: .7em;
	letter-spacing: 1px;
}

h1, h1A, h2, h3 {
	text-transform: uppercase;
}

h1 a, h1A a, h2 a, h3 a, h4 a, h5 a, h6 a {
	color: inherit;
	text-decoration: none;
}

h2 {
	font-size: 1.5em;
	letter-spacing: 5px;
}

h3, h4 {
	font-size: 1.2em;
	letter-spacing: 2px;
}

htbl {
	font-size: 1.5em;
	letter-spacing: 1px;
}

h4 {
	color: #FFFFFF;
}

h5, h6, h10 {
	font-size: 1.1em;
	letter-spacing: 1px;
}

abe-txt {
	font-size: .8em;
	letter-spacing: 1px;
	font-weight: 300;
}

hh3 {
	font-size: .7em;
	letter-spacing: 2px;
	line-height: 1em;
	text-transform: uppercase;
	font-weight: 300;
}

hh3 a {
	color: inherit;
	text-decoration: none;
}

.dashfilter li {
	margin-left: 0.5em;
}

/* Button */
input[type="button"], input[type="submit"], input[type="reset"], .button
	{
	-webkit-appearance: none;
	position: relative;
	display: inline-block;
	border: 0;
	/*background: #35b88f; 
			color: #fff;*/
	text-shadow: 0 0 0.1px rgba(255, 255, 255, 0.25);
	cursor: pointer;
	text-decoration: none;
	outline: 0;
	/*
			padding: 1em 3em 1em 3em;
			*/
	padding: .3em 1em .3em 1em;
	text-align: center;
	/*
			border-radius: 3em;
			*/
	border-radius: 1em;
	font-weight: 400;
	-moz-transition: background-color 0.35s ease-in-out, color 0.35s
		ease-in-out;
	-webkit-transition: background-color 0.35s ease-in-out, color 0.35s
		ease-in-out;
	-o-transition: background-color 0.35s ease-in-out, color 0.35s
		ease-in-out;
	-ms-transition: background-color 0.35s ease-in-out, color 0.35s
		ease-in-out;
	transition: background-color 0.35s ease-in-out, color 0.35s ease-in-out;
}

input[type="button"].style2, input[type="submit"].style2, input[type="reset"].style2,
	.button.style2 {
	color: #3a3939;
	background: #fff;
	box-shadow: inset 0 0 0 1px #fff;
}

input[type="button"].style2:hover, input[type="submit"].style2:hover,
	input[type="reset"].style2:hover, .button.style2:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff !important;
	text-shadow: 0 0 0.5px rgba(255, 255, 255, 0.25) !important;
}

input[type="button"].style3, input[type="submit"].style3, input[type="reset"].style3,
	.button.style3 {
	background: none;
	color: #3a3939;
	box-shadow: inset 0 0 0 1px #dad9d9;
}

input[type="button"].style3:hover, input[type="submit"].style3:hover,
	input[type="reset"].style3:hover, .button.style3:hover {
	background: rgba(58, 57, 57, 0.025);
}

/* datagrid */

.datagrid-title
{
	font-weight: bold;
}



/* iPad */
.no-transition {
	transition: none;
	opacity: 1;
	visibility: visible;
	display: none;
}

/* KG Selector */
.select1, .select1 ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.select1 {
	width: 98%;
	margin: 1%;
	border: 1px solid #ffffff;
	background-color: #f2f2f2;
	background-image: linear-gradient(#f2f2f2, #b2b2b2);
	border-radius: .5em;
	box-shadow: 0 1px 1px #777;
}

.select1:before, .select1:after {
	content: "";
	display: table;
}

.select1:after {
	clear: both;
}

.select1 {
	zoom: 1;
}

.select1 li {
	float: center;
	border-right: none;
	box-shadow: 1px 0 0 #f2f2f2;
	position: relative;
}

.select1 a {
	float: left;
	padding: 12px 30px;
	/*color: #999; */
	color: #2E466B;
	/*text-transform: uppercase; */
	/*font: bold 12px Arial, Helvetica; */
	text-decoration: none;
	/*text-shadow: 0 1px 0 #000; */
}

.select1 li:hover>a {
	/*color: #fafafa; */
	color: #000000;
}

* html .select1 li a:hover { /* IE6 only */
	color: #000000;
}

.select1 ul {
	margin: 1em 0 0 0;
	_margin: 0; /*IE6 only*/
	opacity: 0;
	visibility: hidden;
	position: absolute;
	top: 3em;
	left: 0;
	z-index: 1;
	background: #f2f2f2;
	background: linear-gradient(#f2f2f2, #e1e1e1);
	box-shadow: 0 -1px 0 rgba(255, 255, 255, .3);
	border-radius: 3px;
	transition: all .2s ease-in-out;
}

.select1 li:hover>ul {
	opacity: 1;
	visibility: visible;
	margin: 0;
}

.select1 ul ul {
	top: 1em;
	left: 1em;
	margin: 0 0 0 1.1em;
	_margin: 0; /*IE6 only*/
	box-shadow: -1px 0 0 rgba(255, 255, 255, .3);
}

.select1 ul li {
	float: none;
	display: block;
	border: 0;
	_line-height: 0; /*IE6 only*/
	box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}

.select1 ul li:last-child {
	box-shadow: none;
}

.select1 ul a {
	padding: .5em;
	width: auto;
	_height: 10px; /*IE6 only*/
	display: block;
	white-space: nowrap;
	float: none;
	text-transform: none;
}

.select1 ul a:hover {
	background-color: #f47c20;
	background-image: linear-gradient(#f2f2f2, #f47c20);
	color: #000000;
	/*color: #fef4e9; */
}

.select1 ul li:first-child>a {
	border-radius: 3px 3px 0 0;
}

.select1 ul li:first-child>a:after {
	content: '';
	position: absolute;
	left: 40px;
	top: -6px;
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-bottom: 6px solid #444;
}

.select1 ul ul li:first-child a:after {
	left: -6px;
	top: 50%;
	margin-top: -6px;
	border-left: 0;
	border-bottom: 6px solid transparent;
	border-top: 6px solid transparent;
	border-right: 6px solid #f2f2f2;
}

.select1 ul li:first-child a:hover:after {
	border-bottom-color: #f2f2f2; /* test */
}

.select1 ul ul li:first-child a:hover:after {
	border-right-color: #0299d3;
	border-bottom-color: transparent;
}

.select1 ul li:last-child>a {
	border-radius: 0 0 3px 3px;
}

.container-scroll-vertical
{
	overflow-y: auto;
}

img
{
	border: none;
}

/* dashboard */
.dashboard-content-table {
	display: table;
	width: 100%;
}

.dashboard-content-row-spacer, .dashboard-content-row {
	display: table-row;
}

/* Vertical space between tiles. */
.dashboard-content-row-spacer {
	height: 1vw;
}

.dashboard-content-row {
	
}

.dashboard-content-cell {
	display: table-cell;
}

.dashboard-stripe-table {
	display: table;
	width: 100%;
	height: 100%;
}

.dashboard-stripe-row {
	display: table-row;
}

.dashboard-stripe-cell-spacer, .dashboard-stripe-cell {
	display: table-cell;
}

.dashboard-stripe-cell {
	vertical-align: middle;
	text-align: center;
}

/* Horizontal space between tiles. */
.dashboard-stripe-cell-spacer {
	width: 1vw;
}

/* Tiles. Sets heigth for all tiles, round corners, shadow. */
.dashboard-tile-single, .dashboard-tile-double {
	box-sizing: border-box;
	height: 12vw;
	padding: 0;
	vertical-align: middle;
	text-align: center;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-moz-box-shadow: 5px 5px 5px black;
	-webkit-box-shadow: 5px 5px 5px black;
	box-shadow: 5px 5px 5px black;
}

/* Width of single width tile. */
.dashboard-tile-single {
	width: 12vw;
}

/* Width of double width tile. */
.dashboard-tile-double {
	width: 24vw;
}

/* Image round corners should have same radius as tile! */
.dashboard-tile-image {
	width: 100%;
	height: 100%;
	-moz-border-radius: 5px;
	border-radius: 5px;
}

/* Special properties for tile containing text. Sets padding and font properties. */
.dashboard-tile-text-container {
	padding: 0.5vw;
	font-weight: bold;
}

.dashboard-metric-value {
	color: blue;
	font-weight: bold;
}

.dashColor-menu {
	background-color: #667793;
	color: #ffffff;
}

.dashColor-gold-bkg {
	background-color: #dd914f;
	color: #ffffff;
}

.dashColor-project {
	background-color: #cacaca;
	color: #000000;
}

.dashColor-metamodel {
	background-color: #29606c;
	color: #ffffff;
}

.dashColor-referencesgray {
	background-color: #eaeded;
	color: #666c6c;
}

.dashColor-referencesheader {
	background-color: #606666;
	color: #ffffff;
}

.dashColor-changemanagement {
	background-color: #273473;
	color: #ffffff;
}

.dashColor-strategy {
	/*background-color:#8f8f8f;*/
	background-color: #0b76de;
	color: #ffffff;
}

.dashColor-object_details {
	background-color: #0b506d;
	color: #ffffff;
}

.dashColor-portfoliomanagement {
	background-color: #5d5d5d;
	color: #ffffff;
}

.dashColor-ra {
	background-color: #1e1e1c;
	color: #ffffff;
}

.dashColor-maroon {
	background-color: #c25754;
	color: #ffffff;
}

.dashColor-darklilac {
	background-color: #6f1d95;
	color: #ffffff;
}

.dashColor-teal {
	background-color: #4a9da9;
	color: #ffffff;
}

.dashColor-verylightblue {
	background-color: #6bdff5;
	color: #244349;
}

.dashColor-verylightgray {
	background-color: #f3f3f3;
	color: #153745;
}

.dashColor-lightyellow {
	background-color: #fff9d5;
	color: #3e3b2b;
}

.dashColor-lightgreen {
	background-color: #bdf49c;
	color: #335220;
}

.dashColor-verydarkgreen {
	background-color: #292a28;
	color: #fcfcd7;
}

.dashColor-refresh-pic {
	/* background-color:#005c5c; */
	background-color: #016573;
	color: #ffffff;
}

.dashColor-verydarkblue {
	background-color: #175268;
	color: #ffffff;
}

.dashColor-eapm {
	background-color: #017b7c;
	color: #ffffff;
}

.dashColor-portfoliorationalization {
	background-color: #062d34;
	/*color:#ffffff;*/
	color: lightgray;
}

.dashColor-blueprint-blue {
	background-color: #0087c3; /* in the header it shall be 082d41  */
	color: #ffffff;
}

.dashColor-blueprint {
	background-color: #16485c;
	color: #ffffff;
}

.dashColor-standards {
	background-color: #1d1e1e;
	color: #ffffff;
}

.dashColor-infoflow {
	background-color: #1e1e1c;
	color: #ffffff;
}

.dashColor-depend {
	background-color: #000000;
	color: #ffffff;
}

.dashColor-kpi {
	background-color: #0c0b07;
	color: #ffffff;
}

.dashColor-exec_dash_blue {
	background-color: #0a2d4e;
	color: #ffffff;
}

.dashColor-darkteal {
	background-color: #1e5f69;
	color: #ffffff;
}

.dashColor-lilac {
	background-color: #924ab3;
	color: #ffffff;
}

.dashColor-blue {
	background-color: #1c4a96;
	color: #ffffff;
}

.dashColor-standingblue {
	background-color: #8ca0ff;
	color: #323232;
}

.dashColor-standinggreen {
	background-color: #70da70;
	color: #323232;
}

.dashColor-standingyellow {
	background-color: #ffff96;
	color: #323232;
}

.dashColor-standingred {
	background-color: #f55555;
	color: #323232;
}

.dashColor-orange {
	background-color: #F9BB62;
	color: #132651;
}

.dashColor-green {
	background-color: #79b900;
	color: #ffffff;
}

.dashColor-red {
	background-color: #d74e2a;
	color: #ffffff;
}

.dashColor-darkorange {
	background-color: #fa9d04;
}

.dashColor-white {
	background-color: #ffffff;
	color: #323232;
}

.dashColor-black {
	background-color: #000000;
	color: #323232;
}

.dashColor-gray {
	background-color: #7b7b8b;
	color: #ffffff;
}

.dashColor-darkblue {
	background-color: #11346d;
	color: #ffffff;
}

.dashColor-lightblue {
	background-color: #2672ec;
	color: #323232;
}

.dashColor-seablue {
	background-color: #05869b;
	color: #ffffff;
}

.dashColor-lightgray {
	background-color: #b6b6c4;
	color: #1e1e33;
}

.dashColor-darkgray {
	background-color: #727272;
	color: #ffffff;
}

.dashInsideBox {
	height: 20em;
	background-color: #ffffff;
	border: 1px #646464;
}

.dashBorder-green {
	/*border-color:#086e56; */
	border-color: #687A8D;
	border-width: medium;
}

.dashBorder-darkorange {
	border-color: #fa9d04;
	border-width: medium;
}

/* regualr page */
.div-table {
	display: table;
}

.table-layout-fixed {
	table-layout: fixed;
}

.div-table-header-group {
	display: table-header-group;
}

.div-table-row-group {
	display: table-row-group;
}

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

.div-table-cell {
	display: table-cell;
}

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

.label-header
{
}

.label-inline
{
	margin-right: 4px;
	vertical-align: middle;
	border: none;
}

/* colored box */
.coloredBox {
	display: inline-block;
	vertical-align: baseline;
	margin: 1px 2px;
	margin-left: 5px;
	/*
	border: solid 1px gray;
	*/
	text-align: center;
	text-decoration: none;
	font-weight: bold;
	padding: 4px 5px;
	white-space: nowrap;
}

.legend-box {
	padding-top: 0;
    padding-bottom: 0;
    padding-left:0.5em;
    padding-right:0.5em;
}

.legend-title-text {
	font-size: 1.1em;
    font-style: italic;
    font-weight: 700;
    margin-right: 2em;
    margin-left: 0.5em;
}

.legend-text {
	background: none;
    margin-right: 2em;
    color: #404040;
}

/* fixed width */
.datagridColoredCell
{
	width1: 200px;
	/* more margins on a right an and on a bottom to accomodate shadow */
	margin: 0 8px 8px 0;
	border: solid 1px #979797;
	text-align: center;
	text-decoration: none;
	font-weight: normal;
	-moz-border-radius: 4px 4px 4px 4px;
	-webkit-border-radius: 4px 4px 4px 4px;
	border-radius: 4px 4px 4px 4px;
	-moz-box-shadow: 4px 4px 4px #2f323a;
	-webkit-box-shadow: 4px 4px 4px #2f323a;
	box-shadow: 4px 4px 4px #2f323a;
	font-size: 1.1em;
}
.datagridColoredCellHeader, .datagridColoredCellBody
{
	box-sizing: content-box;
	padding: 8px;
}
/* line-height 18px, 2 lines of text */
.datagridColoredCellHeader
{
	height: 36px;
	background-color: #ffffff;
	opacity: 0.6;
}
/* line-height 18px, 2 lines of text */
.datagridColoredCellBody
{
	height: 54px;
}
.datagridColoredCellClipRectangle
{
	height: 100%;
	overflow: hidden;
}

.datagridColoredCellClipRectangleShort {
	height: 60%;
	overflow: hidden;
}
.datagridColoredCell .datagridColoredCellObjectAttribute
{
	margin-bottom: 4px;
	width:100%;
}

.BusinessArchitecture-datagridColoredCellObjectAttribute {
	
	width:100%;
	display: none;
	color: #444444;
}



.BusinessArchitecture-objectAttribute {
	
	width:100%;
	display: block;
}


.Blueprint-datagridColoredCellObjectAttribute {
	
	width:100%;
	display: none;
}

.Blueprint-objectAttribute {
	
	width:100%;
	display: block;
}
.BlueprintView-datagridColoredCellObjectAttribute {
	
	width:100%;
	display: none;
}

.BlueprintView-objectAttribute {
	
	width:100%;
	display: block;
}

.DataMap-datagridColoredCellObjectAttribute {
	
	width:100%;
	display: none;
	color: #444444;
}
.DataMap-objectAttribute {
	
	width:100%;
	display: block;
}

.InformationFlow-datagridColoredCellObjectAttribute {
	
	width:100%;
	display: none;
}
.InformationFlow-objectAttribute {
	
	width:100%;
	display: block;
}

.InformationFlow-dataBox {
	
	visibility:hidden;
}

.TechnicalBlueprint-datagridColoredCellObjectAttribute {
	
	width:100%;
	display: none;
	color: #444444;
}
.TechnicalBlueprint-objectAttribute {
	
	width:100%;
	display: block;
}

.SecurityApplicationLandscape-datagridColoredCellObjectAttribute {
	
	width:100%;
	display: none;
	color: #444444;
}
.SecurityApplicationLandscape-objectAttribute {
	
	width:100%;
	display: block;
}

.SetDataClass-datagridColoredCellObjectAttribute {
	
	width:100%;
	display: none;
	color: #444444;
}
.SetDataClass-objectAttribute {
	
	width:100%;
	display: block;
}

/* attribute color legend */
.attributeLegend {
	
}
/* padding is 1px less than usual to compensate for box margins */
.attributeLegendBoxes
{
	padding: -4px;
}

/* KG made changes */
.attributeLegendBoxes>.coloredBox
{
	display: inline-block;
	vertical-align: baseline;
	margin: 4px;
	
	/* old version
	border: solid 2px #c1c9d9;
	-moz-border-radius: 18px;
	-webkit-border-radius: 18px;
	border-radius: 18px;
	padding: 1px 1px;
	text-align: center;
	font-weight: normal;
	*/
	border: none;
	text-decoration: none;
	white-space: nowrap;
	height: 6px;
}

.objectTypeLegendBoxesHeader
{
	padding: 12px 12px 0 12px;
	font-size: large;
	font-style: italic;
	color:#404040;
	margin-top:10px;
	margin-bottom:10px;
}
.objectTypeLegendBoxes
{
	padding: 4px;
}
.objectTypeColoredBox
{
	margin: 4px;
	border: solid 1px #c1c9d9;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	padding: 4px 16px;
	overflow: hidden;
	text-align: left;
	text-decoration: none;
	font-size: small;
	font-weight: normal;
	white-space: nowrap;
}

/* hidden tab header */
.hidden-tabs-header>.tabs-header {
	height: 0;
	padding: 0;
	border: none;
}

/* SmartAdmin styles */
.selected {
	background-color: #5093e1;
	color: #ffffff;
}

.header-bar
{
	width: 100%;
	height: 48px;
	overflow: hidden;
	background-color: #101A35;
	white-space: nowrap;
}

.header-bar .div-table-cell
{
	vertical-align: middle;
}

.header-logo
{
	width: 150px;
	padding: 0 8px;
}


.header-title
{
	width: 100%;
	padding: 0 8px;
	font-size: 20px;
}

.page-path-0
{
	color: #331E65;
}

.page-path-separator
{
	color: #dbdfe8;
}

.page-path-1
{
	color: #5c6476;
	font-weight: 400;
}

.header-button
{
	/*
	width: 200px;
	padding: 0 0px;
	*/
	width:7em;
	padding: 0.2em;
	
}


.l-btn-header {
	
	background:transparent;
	color:#ffffff;
	font-size:0.9em;
	border:none;
}
.l-btn-header:hover {
	
	background:transparent;
	color:#ffffff;
	font-size:0.9em;
	border:none;
}

.l-btn-header:visited {
	
	background:transparent;
	color:#ffffff;
	font-size:0.9em;
	border:none;
}


.header-menu-pulldown{
	
}
/* NEW COLOR - light blue  */
.header-menu-pulldown:hover{
	background-color:#ACCFFF; 
}

.header-user
{
	width: 200px;
	padding: 0;
	text-align: right;
	margin-right:0.2em;
}
.header-user .l-btn-text
{
	width: 200px;
	text-align: left;
}





.header-user .l-btn-text
{
	width: 200px;
	text-align: left;
}

.user-menu-button
{
	border-color: #ffffff;
}

/* menu */
body>.layout-panel-west {
	background-color: #262930;
}

body>.layout-panel-west>.panel-header {
	background-color: black;
}

body>.layout-panel-west>.panel-header {
	background-image: none;
}

body>.layout-panel-west>.panel-header, body>.layout-panel-west>.panel-body
	{
	border: none;
}

body>.layout-expand-west {
	background-color: #262930;
}

body>.layout-expand-west>.panel-header, body>.layout-expand-west>.panel-body
	{
	border: none;
}

/*  KG background color for the left side menu  */

#menu {
	background-color: #101A35;
	font-size: 10px;
}

.menu-pane {
	height: 100%;
	font-size: 10px;
}

.menu-pane .tree-hit, .menu-pane .tree-indent, .menu-pane .tree-icon {
	display: none;
}

.menu-pane .tree-node {
	display: table;
	width: 100%;
	height: 36px;
	padding-left: 10px;
	color: #cacfe0;
}

/*  KG - color of a picked row in the menu */
/* NEW COLOR  */
.menu-pane .tree-node-hover {
	background-color: #4B74E0;
	color: #ffffff;
}

/*  KG - color of a selected row in the menu */
/* NEW COLOR  */
.menu-pane .tree-node-selected {
	background-color: #5683FF;
	color: #ffffff;
}

.menu-pane .tree-node .tree-title {
	display: table-row;
	height: 100%;
	line-height: normal;
	vertical-align: middle;
	font-size: 16px;
}

.menu-pane .tree-node .menu-item-icon, .menu-pane .tree-node .menu-item-text
	{
	display: table-cell;
	height: 100%;
	vertical-align: middle;
}

.menu-pane .tree-node .menu-item-icon {
	width: 28px;
}

.menu-pane .tree-node .menu-item-text {
	padding-left: 10px;
}

.menu-pane .tree-node
.menu-pane .tree-node .menu-item-line-top, .menu-pane .tree-node .menu-item-line-bottom,
	.menu-pane .tree-node .menu-item-line-top-left, .menu-pane .tree-node .menu-item-line-top-right,
	.menu-pane .tree-node .menu-item-line-bottom-left, .menu-pane .tree-node .menu-item-line-bottom-right
	{
	box-sizing: border-box;
}

.menu-pane .tree-node .menu-item-line-top {
	height: 50%;
}

.menu-pane .tree-node .menu-item-line-bottom {
	height: 50%;
}

.menu-pane .tree-node .menu-item-line-top-left, .menu-pane .tree-node .menu-item-line-bottom-left
	{
	width: 12px;
}

.menu-pane .menu-item-line-top-right {
	border-left: 1px solid #5683FF;
	border-bottom: 1px solid #5683FF;
}

.menu-pane .menu-item-line-bottom-right {
	border-left: 1px solid #5683FF;
}

.menu-pane .tree-node-hover .menu-item-line-top-right, .menu-pane .tree-node-hover .menu-item-line-bottom-right
	{
	border-color: #ffffff;
}

.menu-pane .tree-node-selected .menu-item-line-top-right, .menu-pane .tree-node-selected .menu-item-line-bottom-right
	{
	border-color: #ffffff;
}

a.menu-item.selected {
	color: #ffffff;
}

a.menu-item.menu-item-expanded {
	padding: 10px 10px;
}

a.menu-item.menu-item-collapsed {
	padding: 10px 0px;
	border: none;
}

.menu-titlebar {
	text-align: center;
}

/* page */
.page-frame
{
	width: 100%;
	height: 100%;
	padding: 8px;
}

.page-background
{
	background-color: #F2F2F2;
}

.group-background {
	background-color: #ffffff;
}

.page-title {
	padding: 4px;
	font-size: x-large;
}

.page-subtitle {
	
}

.dashboard-content {
	min-height: 100%;
	padding: 16px;
	background-color: #edeff5;
}

.dashboard-content .panel-body {
	background-color: initial;
}

.dashboard-responsive-row {
	margin: 0 !important;
}

.dashboard-responsive-cell
{
}

.dashboard-responsive-box {
	width: 100%;
	border: 1px solid #dbdfe8;
	background-color: #FFFFFF;
}

.dashboard-chart {
	width: 100%;
	height: 100%;
	cursor: pointer;
}

.dashboard-chart-box {
	height: 200px;
	border: 1px solid #dbdfe8;
}

.dashboard-chart-box-short {
	height: 150px;
	border: 1px solid #dbdfe8;
}

.dashboard-metric-chart {
	width: 50%;
	height: 80px;
	font-size: 1.5em;
    vertical-align: middle;
    padding-left: 0.5em;
    color: #112C63;
    font-weight: 500;
}

.dashboard-metric-label {
	box-sizing: border-box;
	height: 60px;
	padding: 0px 4px;
	align: left;
	vertical-align: middle;
	font-size: 1em;
	color: blue;
	padding-left: 1em;
}

@media only screen and (min-width: 1000px) {
	.dashboard-metric-label {
	box-sizing: border-box;
	height: 60px;
	padding: 0px 4px;
	align: left;
	vertical-align: middle;
	font-size: 1.1em;
	color: blue;
	padding-left: 2em;
	}
}

.dashboard-metric-label-text {
	height: 60px;
	overflow: hidden;
}

.padded
{
	padding: 12px !important;
}

.div-table-padded-cells
{
	/*padding: 6px;
	padding: 10px;
    padding-top: 35px; */
}
.div-table-padded-cells>.div-table-row>.div-table-cell,
.div-table-padded-cells>.div-table-header-group>.div-table-row>.div-table-cell,
.div-table-padded-cells>.div-table-row-group>.div-table-row>.div-table-cell
{
	padding: 6px;
}

.div-table-padded-cells-inner>.div-table-row>.div-table-cell
{
	padding: 6px;
}
.div-table-padded-cells-inner>.div-table-row:first-of-type>.div-table-cell
{
	padding-top: 0;
}
.div-table-padded-cells-inner>.div-table-row:last-of-type>.div-table-cell
{
	padding-bottom: 0;
}
.div-table-padded-cells-inner>.div-table-row>.div-table-cell:first-of-type
{
	padding-left: 0;
}
.div-table-padded-cells-inner>.div-table-row>.div-table-cell:last-of-type
{
	padding-right: 0;
}

.div-analytics-header {
	padding-top: 0;
	pdding-bottom:0;
}

.div-table-align-middle>.div-table-row>.div-table-cell,
.div-table-align-middle>.div-table-header-group>.div-table-row>.div-table-cell,
.div-table-align-middle>.div-table-row-group>.div-table-row>.div-table-cell,
.table-padded-cells>tbody>tr>th, .table-padded-cells>tbody>tr>td
{
	vertical-align: middle
}

.padded-half
{
	padding: 6px !important;
}

.padded-side {
	padding: 0 4px !important;
}

.separator-vertical-section
{
	height: 12px;
}

.separator-vertical-label
{
	height: 4px;
}

.separator-vertical-background
{
	height: 2px;
	background-color: #edeff5;
}

.separator-horizontal-background
{
	width: 2px;
	background-color: #edeff5;
}

.separator-horizontal
{
	width: 12px;
}

span.separator-horizontal
{
	display: inline-block;
}

.separator-horizontal-label
{
	width: 4px;
}

.separator-horizontal-large
{
	width: 25px;
}

.clipped
{
	overflow: hidden;
}

/* hide check all checkbox in datagrid header */
.hide-check-all-checkbox .datagrid-header-check {
	visibility: hidden;
}

.cursor-pointer {
	cursor: pointer;
}

.highcharts-container {
	height: 100%;
	overflow: hidden;
}

.panel-no-border .panel-header {
	
}

/* border separator lines between layout elements */

.border-top
{
	border-top: 1px solid /*border color*/ /*border color*/ #dbdfe8;
}

.border-bottom
{
	border-bottom: 1px solid /*border color*/ /*border color*/ #dbdfe8;
}

.border-right
{
	border-right: 1px solid /*border color*/ /*border color*/ #dbdfe8;
}

.border-left
{
	border-left: 1px solid /*border color*/ /*border color*/ #dbdfe8;
}

.layout-separator-vertical-background
{
	width: 100%;
	height: 1px;
	background-color: #dbdfe8;
}

.layout-separator-horizontal-background
{
	width: 2px;
	height: 100%;
	background-color: #dbdfe8;
}

.datagrid-header {
	display1: inline-block;
	margin1: 10px;
}

.datagrid-header-inner {
	padding1: 10px;
}

.datagrid-btable1 {
	border-collapse: separate;
	border-spacing: 0 10px;
}

/* abe colors */
/*
#dbdfe8 border-color
#F4F4F4 toolbar background - doesn't change
#ffffff default background
#ffffff default control
#5093e1 selected control
*/
.datagrid-td-vertical-align-top {
	height: 100%;
}

.datagrid-td-vertical-align-top .datagrid-body td {
	vertical-align: top;
}

/* description text */
.description-text
{
	/*height: 60px;*/
    overflow-y: auto;
    /* border-top: solid 1px #979797; */
    border-bottom: solid 1px #979797;
    font-size: small;
    font-style: italic;
    color: #351F6A;
}
.description
{
	color: gray;
	font-style: italic;
}

/* splash */
.splash
{
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: #191f26;
	text-align: center;
	vertical-align: middle;
	/*
	background-repeat: no-repeat;
	background-position: center center;
	background-image: url(../images/loading.png);
	*/
}

.splash-image
{
	text-align: center;
	vertical-align: middle;
}

/* loader screen */

#loader
{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: #222222;
    z-index: 1000;
    
}
 
.copyright {
	text-align: center;
	font-size: xx-small;
	opacity: 0.7;
	color: #989dad;
}

/* login page */
.login-page {
	background-color: #edeff5;
}

.login-page div {
	background-color: initial;
}

div.context-menu {
	width: 16px;
	height: 16px;
	vertical-align: middle;
	cursor: pointer;
}

/* heatmap */
.heatmap .datagrid-row {
	background-color: #ffffff;
}

.heatmap .datagrid-header, .heatmap .datagrid-footer, .heatmap .datagrid-body
{
	border-bottom: solid 1px #edeff5;
}

.heatmap .datagrid-header td, .heatmap .datagrid-footer td, .heatmap .datagrid-body td
{
	border-right: solid 1px #a2a2a2;
	border-bottom: solid 1px #edeff5;
}

.heatmap .datagrid-group
{
	display: table;
	width: 100%;
	height: 52px;
	padding: 8px;
	border: none;
	vertical-align: middle;
}

.heatmap .datagrid-group .datagrid-group-expander, .heatmap .datagrid-group .datagrid-group-title
{
	display: table-cell;
	vertical-align: middle;
	background-color: #edeff5;
}

.heatmap .datagrid-group .datagrid-group-expander {
	-moz-border-radius: 4px 0 0 4px;
	-webkit-border-radius: 4px 0 0 4px;
	border-radius: 4px 0 0 4px;
}

.heatmap .datagrid-group .datagrid-group-title {
	-moz-border-radius: 0 4px 4px 0;
	-webkit-border-radius: 0 4px 4px 0;
	border-radius: 0 4px 4px 0;
}

.heatmap .datagrid-group .datagrid-group-expander span {
	vertical-align: middle;
}

.width-full
{
	width: 100%;
}

.height-full
{
	height: 100%;
}



.width-200 {
	width: 200px;
}

/* window */
.window .window-header {
	padding: 0;
	border-bottom: solid 2px #edeff5;
	background-color: #ffffff;
	/* added for HELP */
	height: 40px;
}

/* KG replaced height 66px with a new value */

.window .window-header .panel-title {
	height: 100px;
	background: none;
	line-height: 30px;
	font-size: 20px;
	color: #4B74E0;
	text-align:center;
}


.panel-title {
	/*height: 100px;*/
	background: none;
	/*line-height: 30px;
	font-size: 20px;*/
	color: #000;
	text-align:center;
	font-size: 1.5em;
}

/*
.window .window-header .panel-tool {
	
	width: 10%;
    height: 50px;
  
    top: -2px;
    margin: 0;
	
}


.window .window-header .panel-tool {
	
	background-size: 50%;
	width: 26px;
	height: 26px;
	margin: 0;
	float: right;
} */

.panel-tool a {
    width: 32px;
}

.panel-tool-close {
	background: url(../images/x-purple.svg) no-repeat center center;
	background-size: 50%;
	width: 26px;
	height: 26px;
	margin: 0;
	float: right;
}

.panel-tool-max {
	background: url(../images/maximize-purple.svg) no-repeat center center;
	background-size: 50%;
	width: 26px;
	height: 26px;
	margin: 0;
	float: right;
}

.panel-tool-restore {
    background: url(../images/minimize-purple.svg) no-repeat center center;
    background-size: 50%;
	width: 26px;
	height: 26px;
	margin: 0;
	float: right;
}

/* textarea textbox */
textarea.textbox-text {
	overflow-y: auto;
}

.textbox-readonly {
	
	border: none;
}

/* label */
.label-nowrap {
	white-space: nowrap;
}

/* buttons */

.button-wide
{
	width: 200px;
}

.button-medium
{
	width: 150px;
}

.button-narrow
{
	width: 100px;
}

/* checkbox style */

input[type=checkbox]
{
	-moz-appearance:none;
	-webkit-appearance:none;
	-o-appearance:none;
	/*
	width: 18px;
	height: 18px;
	border: 1px solid #ffffff;
	*/
	width: 18px;
	height: 18px;
	border: none;
}
input[type=checkbox]:focus
{
	outline: 0;
}
input[type=checkbox]:checked
{
	background-image: url(../images/checkbox-checked.png);
	background-repeat: no-repeat;
	background-size: 80%;
	
}
input[type=checkbox]:not(:checked)
{
	background-image: url(../images/checkbox-unchecked.png);
	background-repeat: no-repeat;
	background-size: 80%;
	
}
input[type=checkbox]:checked:disabled
{
	background-image: url(../images/checkbox-checked-disabled.svg);
	background-repeat: no-repeat;
	width: 45%;
}
input[type=checkbox]:not(:checked):disabled
{
	background-image: url(../images/checkbox-unchecked-disabled.png);
	background-repeat: no-repeat;
	width: 45%;
}



/* dialog */

.dialogHeader
{
	font-size: 16px;
	padding: 5px;
}



.headerTextLight
{
	color: #565656;
    font-weight: 500;
}

.headerTextHeavy
{
	/*font-weight: bold;*/
	font-size:1em;
	color: #565656;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
	overflow:hidden;
}

.headerTextHeavyWhite
{
	font-weight: bold;
	font-size:1em;
	color: #ffffff;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}

.dialog-separator-vertical-section
{
	height: 20px;
}

.dialog-button-text-align-center .dialog-button
{
	text-align: center;
}

/* Architecture by layers */

.al-button
{
	border: none !important;
	-moz-box-shadow: 4px 4px 4px black;
	-webkit-box-shadow: 4px 4px 4px black;
	box-shadow: 4px 4px 4px black;
}

.al-button.l-btn
{
	background: #912B87;
	/*
	background: -moz-linear-gradient(left, rgba(51,102,102,1) 0%, rgba(10,39,57,1) 24%, rgba(77,127,192,1) 47%, rgba(33,122,190,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(51,102,102,1)), color-stop(24%, rgba(10,39,57,1)), color-stop(47%, rgba(77,127,192,1)), color-stop(100%, rgba(33,122,190,1)));
	background: -webkit-linear-gradient(left, rgba(51,102,102,1) 0%, rgba(10,39,57,1) 24%, rgba(77,127,192,1) 47%, rgba(33,122,190,1) 100%);
	background: -o-linear-gradient(left, rgba(51,102,102,1) 0%, rgba(10,39,57,1) 24%, rgba(77,127,192,1) 47%, rgba(33,122,190,1) 100%);
	background: -ms-linear-gradient(left, rgba(51,102,102,1) 0%, rgba(10,39,57,1) 24%, rgba(77,127,192,1) 47%, rgba(33,122,190,1) 100%);
	background: linear-gradient(to right, rgba(51,102,102,1) 0%, rgba(10,39,57,1) 24%, rgba(77,127,192,1) 47%, rgba(33,122,190,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#336666', endColorstr='#217abe', GradientType=1 );
*/
}

.al-button.l-btn:hover,
.al-button.l-btn.l-btn-selected,
.al-button.l-btn.l-btn-selected:hover
{
	/* KG test 3-25-19
	background: #C12AC3;
	*/
	background: -moz-linear-gradient(left, rgba(167,184,184,1) 0%, rgba(136,167,184,1) 24%, rgba(170,197,230,1) 47%, rgba(156,196,224,1) 100%);
	background: -webkit-gradient(left top, right top, color-stop(0%, rgba(167,184,184,1)), color-stop(24%, rgba(136,167,184,1)), color-stop(47%, rgba(170,197,230,1)), color-stop(100%, rgba(156,196,224,1)));
	background: -webkit-linear-gradient(left, rgba(167,184,184,1) 0%, rgba(136,167,184,1) 24%, rgba(170,197,230,1) 47%, rgba(156,196,224,1) 100%);
	background: -o-linear-gradient(left, rgba(167,184,184,1) 0%, rgba(136,167,184,1) 24%, rgba(170,197,230,1) 47%, rgba(156,196,224,1) 100%);
	background: -ms-linear-gradient(left, rgba(167,184,184,1) 0%, rgba(136,167,184,1) 24%, rgba(170,197,230,1) 47%, rgba(156,196,224,1) 100%);
	background: linear-gradient(to right, rgba(167,184,184,1) 0%, rgba(136,167,184,1) 24%, rgba(170,197,230,1) 47%, rgba(156,196,224,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a7b8b8', endColorstr='#9cc4e0', GradientType=1 );
	
}

.al-button
{
	text-align: left;
 	white-space: normal;
}

.al-button .div-table
{
	height: 15vh;
}

.al-button .div-table-cell
{
	text-align: center;
	vertical-align: middle;
	white-space: normal;
}

.al-button-image
{
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
}

.al-button-title
{
	max-height: 100%;
	overflow: hidden;
	text-align: center;
	line-height: normal;
	font-size: normal;
}

.al-link .div-table-cell
{
	text-align: left;
	vertical-align: middle;
}

.al-button-description
{
	font-size: normal;
}

.al-header
{
	height: 100px;
}

.al-header-image
{
	width: 150px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

.al-tab-title
{
	text-align: left;
	vertical-align: top;
}

.al-tab-title-header
{
	font-size: large;
}

.al-tab-description
{
	font-size: small;
}

.al-link-box
{
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}

.al-link
{
	width: 300px;
	margin: 20px;
}

.al-link-cell-image
{
	width: 15vw;
}

.al-link-title
{
	height: 1.5em;
	overflow: hidden;
	font-size: normal;
	font-weight: bold;
}

.al-link-description
{
	height: 3.0em;
	overflow: hidden;
	font-size: normal;
}

.al-link-image
{
	display: block;
	height: 200px;
	border: 1px solid #b7d2ff;
}

.al-link-image>span
{
	display: block;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}


.tooltip {
    display: inline-block;
    color: inherit;
    /*border: none; */
    background: transparent;
    position: relative;
    font-family: inherit;
    font-size: inherit;
    text-align: inherit;
    font-style: inherit;
    font-weight: inherit;
    line-height: inherit;
    
}

/* Portfolio Builder header */
.pb-inner-header {
	font-size: 1.1em;
    text-align: center;
    /*color: #9420C2; */
    text-decoration: none;
    font-weight: 500;
    width: 80%;
    text-transform: capitalize;
    display: block;
    width: 100%;
	
}

@media only screen and (min-width: 1000px) {
	.pb-inner-header {
		font-size: 1.5em;
    	font-weight: 300;
	}
}

.pb-inner-flag {
	font-size: 1.4em;
    color: #2F5597;
    font-weight: 700;
}

.pb-section-flag-header {
	background-color: #f4f4f4; 
	margin-top: 10%; 
	margin-left: 1em;
	height:7%;
	font-size: 0.7em;
    padding: 0;
}

.pb-section-flag-check {
	margin-top:100%;
}
@media only screen and (min-width: 560px) {
	.pb-section-flag-check {
		margin-top:80%;
	}
}
@media only screen and (min-width: 980px) {
	.pb-section-flag-header {
		height:10%;
		font-size: 0.8em;
	    padding: 0.8em;
	}
	.pb-section-flag-check {
		margin-top:30%;
	}
}
@media only screen and (min-width: 1100px) {
	.pb-section-flag-check {
		margin-top:15%;
	}
}
@media only screen and (min-width: 1200px) {
	.pb-section-flag-check {
		margin-top:8%;
	}
}
@media only screen and (min-width: 1300px) {
	.pb-section-flag-header {
		height:10%;
		font-size: 1em;
	    padding: 0.9em;
	}
	.pb-section-flag-check {
		margin-top:5%;
	}
	
	.pb-inner-flag {
	font-size: 1.1em;
	}
}

@media only screen and (min-width: 1590px) {
	.pb-section-flag-header {
		height:10%;
		font-size: 1em;
	    padding: 1em;
	}
	.pb-section-flag-check {
		margin-top: 5%;
	}
}

.compact-inner-header {
	font-size: 1em;
    color: #3855A5;
    text-decoration: none;
    font-weight: 700;
    
    text-transform: capitalize;
    display: block;
    margin:0;
    margin-left:1%;
    border: none;
    
	
}

.pb-step {
	margin: 0;
	padding: 0;
	padding-right: 0.9em;
	font-size: 0.9em;
	height: 15em;
	width: 100%;
	float: left;
	clear: none;
}

@media only screen and (min-width: 576px) {
	.pb-step {
		width: 49%;
		padding-right: 1%;
	}
}

@media only screen and (min-width: 768px) {
	.pb-step {
		width: 32%;
		padding-right: 1%;
	}
}


@media only screen and (min-width: 992px) {
	.pb-step {
		width: 24.5%;
		padding-right: 0.5%;
	}
}

@media only screen and (min-width: 1200px) {
	.pb-step {
		width: 16.5%;
		padding-right: 0.5%;
	}
}



.tabs-header-title {
    color: #351F6A;
    font-size: 1.2em;
    text-align: center;
    text-decoration: none;
    font-weight: 400;
    width: 100%;
    display: block;
    padding: 0;
    margin: 0;
    padding-bottom: 0.2em;
}
.flex-height {
	
	height:45%;
}

.flex-margin {
	
	margin-top:4em;
}

@media only screen and (min-width: 995px) {

		.flex-height {
	
			height:95%;
		}
		.flex-margin {
	
			margin-top:0;
		}
		
}

.checkbox-text {
	font-size: 1em;
	font-weight:480;
	padding-left: 0.2em;
    margin-right: 1em;
}

@media only screen and (min-width: 481px) {
	.checkbox-text {
		font-size: 1.2em;
		font-weight:500;
		padding-left: 0.3em;
    	margin-right: 1.7em;
	}
}

@media only screen and (min-width: 1020px) {
	.checkbox-text {
		font-size: 1.3em;
		font-weight:500;
		padding-left: 0.5em;
    	margin-right: 2em;
	}
}


/* dialogs */
.dialog-inner-header {
	font-size: 1.5em;
    text-align: center;
    color: #3855A5;
    text-decoration: none;
    font-weight: 500;
    margin-left: 10%;
    width: 80%;
    text-transform: capitalize;
    display: block;
}

.dialog-half-panel {
	width:100%;
	margin:0;
	padding:0;
}

.dialog-top-label {
	width:100%;
	float:left;
	color: #3855A5;
	font-size:1.2em;
	font-weight:480;
	
}
.dialog-top-selection {
	width:100%;
	float:right;
	color: #3855A5;
	font-size:1.2em;
	font-weight:480;
	font-style: italic;
}
@media only screen and (min-width: 481px) {
	
	.dialog-top-label {
		width:20%;
		margin-right:1%;
	}
	.dialog-top-selection {
		width:77%;
		margin-left:1%;
		margin-right:1%;
	}
}

/* landing page */

.landing-page-frame 
{
	width: 100%;
	height: 100%;
	overflow: auto;
}

.landing-page-table
{
	/*width: 1008px;*/
	border-collapse: collapse;
	/*
	background-image: url(../images/landing-background.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	*/
}

.landing-page-table .div-table-row
{
	border: 1px solid #979797;
	position: relative;
}

.landing-page-table a
{
	text-decoration: underline;
}

.landing-page-column-phase
{
	/*width: 200px;*/
	padding: 0 32px;
	text-align: center;
	vertical-align: middle;
	font-size: xx-large;
	font-weight: normal;
}

.landing-page-column-image
{
	width: 100px;
	text-align: center;
	vertical-align: middle;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}
.landing-page-column-image img
{
	width: auto;
	height: auto;
	vertical-align: middle;
}

.landing-page-column-image-stem
{
	width: 2px;
}

.landing-page-column-image-cell-image
{
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
}

.landing-page-column-image-stem-height
{
	height: 36px;
}

.landing-page-column-image-border-height
{
	height: 12px
}

.landing-page-column-image-image-height
{
	height: 80px;
}

.landing-page-column-image-border
{
	width: 12px;
}

.landing-page-column-text
{
	/*width: 706px;*/
	padding: 0 32px;
	text-align: left;
	vertical-align: top;
}

.landing-page-column-text-header
{
	font-size: normal;
	font-weight: bold;
}

.landing-page-column-text-content
{
}

.landing-page-background-line
{
	background-color: #979797;
}

/*
.landing-page-row1 .landing-page-background-phase
{
	background-color: #c2cdd9;
}
.landing-page-row1 .landing-page-background-text
{
	background-color: #d5dfe9;
}
.landing-page-row1 .landing-page-background-line
{
	background-color: #485b72;
}
.landing-page-row2 .landing-page-background-phase
{
	background-color: #dab460;
}
.landing-page-row2 .landing-page-background-text
{
	background-color: #dad0b2;
}
.landing-page-row2 .landing-page-background-line
{
	background-color: #da8912;
}
.landing-page-row3 .landing-page-background-phase
{
	background-color: #36CADD;
}
.landing-page-row3 .landing-page-background-text
{
	background-color: #BAEDF3;
}
.landing-page-row3 .landing-page-background-line
{
	background-color: #187B88;
}
.landing-page-row4 .landing-page-background-phase
{
	background-color: #3399FF;
}
.landing-page-row4 .landing-page-background-text
{
	background-color: #D3E8F0;
}
.landing-page-row4 .landing-page-background-line
{
	background-color: #0A5AB2;
}
*/
.landing-page-row1
{
	background-color: #eff0e7;
}
.landing-page-row2
{
	background-color: #eefa87;
}
.landing-page-row3
{
	background-color: #aafa87;
}
.landing-page-row4
{
	background-color: #87cafa;
}

/* login */

.login-body
{
	/*
	background-image: url(../images/login_background.jpg);
	background-size: cover;
	*/
}

.login-container
{
	/* width with registration box */
	/*width: 1040px;*/
	width: 460px;
	height: 580px;
	
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
}

.login-box
{
	width: 460px;
	height: 550px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
	-moz-box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.5);
	box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.5);
}

.login-box-separator
{
	width: 120px;
}

.login-box .textbox .textbox-text
{
	padding: 16px 20px;
}

.login-box-header-row
{
	height: 50px;
}

.login-box-header-cell
{
	-moz-border-radius: 8px 8px 0 0;
	-webkit-border-radius: 8px 8px 0 0;
	border-radius: 8px 8px 0 0;
	background-color: #ffffff;
	background-image: url(../images/logo-yurika.svg);
	background-repeat: no-repeat;
	background-position: center center;
}

.login-box-content-cell
{
	-moz-border-radius: 0 0 8px 8px;
	-webkit-border-radius: 0 0 8px 8px;
	border-radius: 0 0 8px 8px;
	background-color: #edeff5;
	padding-top: 20px;
	padding-bottom: 20px;
	padding-left: 20px;
	padding-right: 20px;
}

.login-box-content-cell-header
{
	font-size: x-large;
	text-align: center;
}

.login-box-forgotPasswordCell
{
	text-align: right;
	color: #25396E;
	font-size: normal;
	font-weight: bold;
	border: none;
	background-color: transparent;
}

.login-buttonCell
{
	text-align: center;
	font-size: large;
}

.login-button
{
	width: 200px;
}

/* easyui tooltip */

.easyui-tooltip
{
	cursor: help;	
}

.tooltip-table
{
	border-collapse: collapse;
}

.tooltip-table th,
.tooltip-table td
{
	border: solid 1px #979797;
	padding: 4px; 
}

/* datagrid nocheckbox */
.datagrid-nocheckbox input[type="checkbox"]
{
	visibility: hidden;
}

/* wizard */

.wizard-button .l-btn
{
	/*
	
	width: 120px;
	height:30px;
	border-radius:8px;
	border-color: #E6B6C4;
	border-width: 2px;
	background-color: #ffffff;
	margin-left: 25px;
	margin-right:55px;
	text-align: center;
	color: #AB71C4;
	*/
}

.wizard-button .l-btn:hover
{
	/*
	background-color: #E6C7C4;
	border-color: #AB71C4;
	color: #7030A0;
	*/
}

.wizard-header
{
	height: 5em;
}

.wizard-header .div-table-cell
{
	vertical-align: top;
}

/* Portfolio Builder header start */

/* Portfolio Builder header Basic - left side */

/* mobile version */
.wizard-header-guide
{
	width: 98%;
	height: 3.5em;
	background-color: #F4F4F4;
	margin: 1%;
	margin-bottom: 0.5%;
	padding:1%;
	float: left;
	display: block;
	clear: none;
}

.wizard-header-help
{
	width: 10%;
	margin: 10px;
	padding:10px;
}

.wizard-header-upgrade
{
	width: 98%;
	height: 3.7em;
	background-color: #FFF2C5;
	margin: 1%;
	margin-top: 0.5%;
	padding:1%;
	border: none;
	float: left;
	display: block;
	clear: none;
	position: relative;
}

.wizard-header-guide-reverse {
	
}
.wizard-header-upgrade-reverse {
	
}


.wizard-header-text {
	
	font-size: 0.7em;
	float: left;
	display: block;
	clear: none;
	position: relative;
}

.upgrade-button 
{
	background-color: #932B89;
	color: #ffffff;
	position: absolute;
  	bottom: 8px;
  	left:12px;
  	font-size: 1em;
	
}

.wizard-read-more-button 
{
	background-color: 0;
	border:none;
	/*
	border-color: #932B89;
	*/
	color: #932B89;
	
	position: absolute;
  	bottom: 8px;
  	left:12px;
  	/*
  	position: relative;
  	*/
	
}

.wizard-read-more-button:hover 
{
	background-color: #D43ECD;
	color: #ffffff;
	
	
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

/*Sizes are 481px, 768px, 1020px */

@media only screen and (min-width: 481px) {
	
	.wizard-header-guide
	{
	width: 98%;
	height: 6.2em;
	}

.wizard-header-help
	{
	width: 10%;
	margin: 10px;
	padding:10px;
	}

.wizard-header-upgrade
	{
	width: 98%;
	height: 6.2em;
	}
.wizard-header-text 
	{
	
	font-size: 0.8em;
	}
	
.upgrade-button 
	{
	
  	font-size: 0.9em;
	
	}
	
}
	
/* Desktop Layout: 768px+. Inherits styles from: Tablet Layout. */

@media only screen and (min-width: 768px) {
.wizard-header-guide
	{
	width: 62%;
	height: 10em;
	margin: 1%;
	margin-right: 0.5%;
	/*margin-left: 3%;*/
	padding: 0.5%;
	}

.wizard-header-help
	{
	width: 10%;
	margin: 10px;
	padding:10px;
	}

.wizard-header-upgrade
	{
	width: 35%;
	height: 10em;
	margin: 1%;
	margin-left: 0.5%;
	padding: 0.5%;
	}
	
.wizard-header-guide-reverse {
	width: 30%;
}
.wizard-header-upgrade-reverse {
	width: 62%;
}

.wizard-header-text 
	{
	
	font-size: 1em;
	}

.upgrade-button 
	{
	
  	font-size: 1.2em;
	
	}
	
}

/* Desktop Layout: large screen 1020px+.  */

@media only screen and (min-width: 1020px) {
	.wizard-header-text 
	{
	
	font-size: 1.3em;
	}
	
}

/* end of Basic version for Portfolio Builder Header */

/* Portfolio Builder Header Premium does not include upgrade section and expands guide to full screen 

Note that the class to be used for premium is called wizard-header-guide-premium

*/


/* mobile version  */
.wizard-header-guide-premium
{
	width: 96.5%;
	height: 90%;
	background-color: #F4F4F4;
	margin: 1%;
	padding:1%;
	padding-right:0.5%;
	float: left;
	display: block;
	clear: none;
}



/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */
/*
@media only screen and (min-width: 481px) {
	
	.wizard-header-guide-premium
	{
	height: 6.2em;
	}

	
} */
	
/* Desktop Layout: 768px+. Inherits styles from: Tablet Layout. */
/*
@media only screen and (min-width: 768px) {
.wizard-header-guide-premium
	{
	height: 12.5em;
	
	}

} */

/* Portfolio Builder Header Premium ends */

/* Portfolio Builder Header ends */


.datagrid-cell-addButton
{
	margin-bottom: 8px;
}

/* KG used in MapBusinessSolutions.jp and MapDataToBusinessSolutions.js as remove button

.datagrid-cell-deleteButton
{
}

/* easyui-datagrid */

.datagrid-header-row
{
	font-weight: bold;
}

.panel-header {
	background: none;
	/* height:1.5em; */
	border: none !important;
	
}

/* Chart Legend  */

.chart-legend {
	float: left;
	display: block;
	clear: none;
	position: relative;
	
}

.chart-legend-box {
	width:20%;
	height:10px
}
.chart-legend-text {
	width:70%;
	height:25px;
	font-size:14px;
	overflow: hidden;
	
}

/* Colors */

/* Color scheme:

regular button -----

background: none
text:#A988AA
border:#F0EEEF

hover---
background:none
text:#A672AA
border:#896C8A


disabled button ------
background: none
text: #E2E2E2
border: none
icon color: #A48CA4

Focus button (button that we want to bring to focus)-----
background:#902D88
text: #F1E8E9
border: none

hover----
background: none
text: #902D88
border: #902D88

Table cell----------
background: while or F4F4F4
text:#5E5E5E
border:none

selected-----
background: #896C8A
text: white
border: none

checkbox in the table
background: none
border: #F1F8F6
text: F7ADF7

checkbox in the header row
background: #8C2C86
border: #EDA4EA
text: F7ADF7

checkbox in selected table cell
background: #ffffff
border: #f2f2f2
text: #AF57AD


light color : #E1DEFF
medium color: #BBB8D8
dark color: #03E1A76
*/

/* KG color of the top menu bar when hover 
removed background color for this in easy ui style
*/
.panel-tool a:hover {
  /*background-color: #351F6A; */
}

.panel-header,
.panel-body {
  border-color: #ACCFFF;;
}

.panel-body {
  background-color: #ffffff;
  color: #101A35;
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    
}
.panel-title {
  
  /*font-size: 16px;
    font-weight: bold; */
    color: #112C63;
    /*height: 50px;
    line-height: 26px;*/
    width: 95%;
  
}
.panel-footer {
  border: 1px solid #BBB8D8;
  overflow: hidden;
  background: #F4F4F4;
}

.accordion {
  background: #ffffff;
  border-color: #BBB8D8;
}
.accordion .accordion-header {
  background: #E4F0FF;
  filter: none;
}
.accordion .accordion-header-selected {
  background: #ffffff;
}
.accordion .accordion-header-selected .panel-title {
  color: #101A35;
}

.window,
.window .window-body {
  border-color: #BBB8D8;
   /* added for HELP */
   margin-top:12px;
}

.window {
  background-color: #E1DEFF;
  /*
  background: -webkit-linear-gradient(top,#E1DEFF 0,#BBB8D8 100%);
  background: -moz-linear-gradient(top,#E1DEFF 0,#BBB8D8 100%);
  background: -o-linear-gradient(top,#E1DEFF 0,#BBB8D8 100%);
  background: linear-gradient(to bottom,#E1DEFF 0,#BBB8D8 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#E1DEFF,endColorstr=#BBB8D8,GradientType=0);
*/
}
.window-proxy {
  border: 1px dashed #BBB8D8;
}
.window-proxy-mask,
.window-mask {
  background: #ccc;
}
.window .panel-footer {
  border: 1px solid #BBB8D8;
  position: relative;
  top: -1px;
}

.dialog-tool-separator {
  float: left;
  height: 24px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #fff;
  margin: 2px 1px;
}

.dialog-toolbar,
.dialog-button {
  background: #F4F4F4;
  border-width: 1px;
  border-style: solid;
}
.dialog-toolbar {
  border-color: #BBB8D8 #BBB8D8 #dddddd #BBB8D8;
}
.dialog-button {
  border-color: #dddddd #BBB8D8 #BBB8D8 #BBB8D8;
}
.window-thinborder .dialog-toolbar {
  border-left: transparent;
  border-right: transparent;
  border-top-color: #F4F4F4;
}
.window-thinborder .dialog-button {
  top: 0px;
  padding: 5px 8px 8px 8px;
  border-left: transparent;
  border-right: transparent;
  border-bottom: transparent;
}
.l-btn {
  text-decoration: none;
  display: inline-block;
  overflow: hidden;
  margin: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
  text-align: center;
  vertical-align: middle;
  line-height: normal;
}
.l-btn-plain {
  border-width: 0;
  /* padding: 1px; */
}
.l-btn-left {
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin: 0;
  margin-top: -0.15em;
  padding: 0;
  vertical-align: top;
}


#map-btn-add {
	background: url(../images/add-normal.svg) no-repeat center center;
	background-size:50%;
	background-color:transparent;
	border:none;
}
#map-btn-add:hover {
	background: url(../images/add-hover.svg) no-repeat center center;
	background-color:#f2f2f2;
	background-size:50%;
}

#map-btn-remove {
	background: url(../images/delete-normal.svg) no-repeat center center;
	background-size:45%;
	background-color:transparent;
	border:none;
	margin-left:0;
}

#map-btn-remove:hover {
	background: url(../images/delete-hover.svg) no-repeat center center;
	background-color:#f2f2f2;
	background-size:45%;
}

/*Sizes are 481px, 768px, 1020px 

@media only screen and (min-width: 481px) {
	#map-btn-remove {
		margin-left:2em;
	}
	#map-btn-remove:hover {
		margin-left:2em;
	}
}

@media only screen and (min-width: 768px) {
	#map-btn-remove {
		margin-left:8em;
	}
	#map-btn-remove:hover {
		margin-left:8em;
	}
}

@media only screen and (min-width: 1020px) {
	#map-btn-remove {
		margin-left:10em;
	}
	#map-btn-remove:hover {
		margin-left:10em;
	}
}

@media only screen and (min-width: 1200px) {
	#map-btn-remove {
		margin-left:12em;
	}
	#map-btn-remove:hover {
		margin-left:12em;
	}
}
*/

/* System of Record / Copy radio buttons  */

.MapDataToBusinessSolutions-dataTable-dataAssetFunctionButton {
	
	margin-left: 10px;
}

.MapDataToBusinessSolutions-dataTable-deleteButton {
	padding: 4px;
}

.MapDataToBusinessSolutions-dataTable-dataAssetFunctionButton {
	padding: 4px;
}

.l-btn-icon-right {
	
	/*background-color: #C12AC2;*/
	background-color: transparent;
}
.l-btn-icon-right:hover {
	
	/*background-color: #9420C2;*/
}

/* MapBusinessSolutions combo area - make media size dependent  */

/* large text for the main combo box in Map Business Solutions  */
.large-combo-label {
	width:100%; 
	font-size:1.5em; 
	color:#565656; 
	padding-top: 0.5em;
	padding-bottom: 1em;
}
.filter-btn {
	padding-left: 1em;
	padding-right: 1em;
	
	font-size: 20px;
    color: #3855A5;
    border: 1px solid #3855A5;
}

.filter-btn:hover {
	background-color: #3855A5;
    color: #ffffff;
}

/*
#MapBusinessSolutions-setFilterButton {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    
}



#MapBusinessSolutions-setFilterButton:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/filter-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}



#PortfolioRationalization-setFilterButton {
	
    border-color: #3855A5;
    font-size: 20px;
    color: #3855A5;
    
}

#PortfolioRationalization-setFilterButton:hover {
	
    background-color: #3855A5;
    color: #ffffff;
    background-image: url(../images/filter-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}

#PortfolioRationalization-buttonExport {
	
    border-color: #3855A5;
    font-size: 20px;
    color: #3855A5;
    background-image: url(../images/export-purple.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 20%;
    background-repeat: no-repeat;
    
}

#PortfolioRationalization-buttonExport:hover {
	
    background-color: #3855A5;
    color: #ffffff;
    background-image: url(../images/export-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}

#ArchitectureRefresh-setFilterButton {
	
    border-color: #3855A5;
    font-size: 20px;
    color: #3855A5;
    
}

#ArchitectureRefresh-setFilterButton:hover {
	
    background-color: #3855A5;
    color: #ffffff;
    background-image: url(../images/filter-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}



#ArchitectureRefresh-buttonExport {
	
    border-color: #3855A5;
    font-size: 20px;
    color: #3855A5;
    background-image: url(../images/export-purple.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 20%;
    background-repeat: no-repeat;
    
}

#ArchitectureRefresh-buttonExport:hover {
	
    background-color: #3855A5;
    color: #ffffff;
    background-image: url(../images/export-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}

#Standards-setFilterButton {
	
    border-color: #3855A5;
    font-size: 20px;
    color: #3855A5;
    
}

#Standards-setFilterButton:hover {
	
    background-color: #3855A5;
    color: #ffffff;
    background-image: url(../images/filter-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}


#Standards-buttonExport {
	
    border-color: #3855A5;
    font-size: 20px;
    color: #3855A5;
    background-image: url(../images/export-purple.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 20%;
    background-repeat: no-repeat;
    
}

#Standards-buttonExport:hover {
	
    background-color: #3855A5;
    color: #ffffff;
    background-image: url(../images/export-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}



#BusinessArchitecture-setFilterButton {
	
	
    
}

#BusinessArchitecture-setFilterButton:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/filter-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}



#BusinessArchitecture-setFilterButton-no-text {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    background-position-x: center;
    background-position-y: center;
    
}

#BusinessArchitecture-setFilterButton-no-text:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/filter-white.svg);
   
    background-position-x: center;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}


#BusinessArchitecture-buttonExport {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    background-image: url(../images/export-purple.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 20%;
    background-repeat: no-repeat;
    float: right;
    
}

#BusinessArchitecture-buttonExport:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/export-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}


#BusinessArchitecture-buttonExport-no-text {
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    background-image: url(../images/export-purple.svg);
    background-position-x: center;
    background-position-y: center;
    background-size: 50%;
    background-repeat: no-repeat;
    
    
}



#BusinessArchitecture-buttonExport-no-text:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/export-white.svg);
   
    background-position-x: center;
    background-position-y: center;
    background-size: 40%;
    background-repeat: no-repeat;
}



#InformationFlow-buttonExport {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    background-image: url(../images/export-purple.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 20%;
    background-repeat: no-repeat;
    
    padding-left: 2.5em;
    
}

#InformationFlow-buttonExport:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/export-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}

/*
#Blueprint-setFilterButton {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    
}

#Blueprint-setFilterButton:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/filter-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}


#Blueprint-buttonExport {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    background-image: url(../images/export-purple.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 20%;
    background-repeat: no-repeat;
    
}

#Blueprint-buttonExport:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/export-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}


#SecurityApplicationLandscape-setFilterButton {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    
}

#SecurityApplicationLandscape-setFilterButton:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/filter-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}


#SecurityApplicationLandscape-buttonExport {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    background-image: url(../images/export-purple.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 20%;
    background-repeat: no-repeat;
    
}

#SecurityApplicationLandscape-buttonExport:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/export-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}



#TechnicalBlueprint-setFilterButton {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    
}

#TechnicalBlueprint-setFilterButton:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/filter-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}


#TechnicalBlueprint-buttonExport {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    background-image: url(../images/export-purple.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 20%;
    background-repeat: no-repeat;
    
}

#TechnicalBlueprint-buttonExport:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/export-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}



#SecurityTools-setFilterButton {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    
}

#SecurityTools-setFilterButton:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/filter-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}


#SecurityTools-buttonExport {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    background-image: url(../images/export-purple.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 20%;
    background-repeat: no-repeat;
    
}

#SecurityTools-buttonExport:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/export-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}



#DataMap-setFilterButton {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    
}

#DataMap-setFilterButton:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/filter-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}


#DataMap-buttonExport {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    background-image: url(../images/export-purple.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 20%;
    background-repeat: no-repeat;
    
}

#DataMap-buttonExport:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/export-white.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}

#InformationFlow-setFilterButton {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    
}

#InformationFlow-setFilterButton:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/criteria-white.svg);
   
    background-position-x: 0.4rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}

#InformationFlow-buttonBookmarks {
	
    border-color: #9420C2;
    font-size: 20px;
    color: #9420C2;
    
}

#InformationFlow-buttonBookmarks:hover {
	
    background-color: #9420C2;
    color: #ffffff;
    background-image: url(../images/bookmark-white.svg);
   
    background-position-x: 0.4rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
}

*/

.l-btn-text {
  display: inline-block;
  vertical-align: top;
  width: auto;
  padding: 0;
  margin: 0;
  /*line-height: 1.5em; */
}
.l-btn-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  line-height: 16px;
  position: absolute;
  top: 50%;
  margin-top: -8px;
  font-size: 1px;
}
.l-btn span span .l-btn-empty {
  display: inline-block;
  margin: 0;
  width: 16px;
  height: 24px;
  font-size: 1px;
  vertical-align: top;
}
.l-btn span .l-btn-left {
  padding: 0 0 0 20px;
  background-position: left center;
}
.l-btn span .l-btn-icon-right {
  padding: 0 20px 0 0;
  background-position: right center;
}
.l-btn-icon-left .l-btn-text {
  margin: 0 4px 0 24px;
}
.l-btn-icon-left .l-btn-icon {
  left: 4px;
}
.l-btn-icon-right .l-btn-text {
  margin: 0 24px 0 4px;
}
.l-btn-icon-right .l-btn-icon {
  right: 4px;
}
.l-btn-icon-top .l-btn-text {
  margin: 20px 4px 0 4px;
}
.l-btn-icon-top .l-btn-icon {
  top: 4px;
  left: 50%;
  margin: 0 0 0 -8px;
}
.l-btn-icon-bottom .l-btn-text {
  margin: 0 4px 20px 4px;
}
.l-btn-icon-bottom .l-btn-icon {
  top: auto;
  bottom: 4px;
  left: 50%;
  margin: 0 0 0 -8px;
}
.l-btn-left .l-btn-empty {
  margin: 0 4px;
  width: 16px;
}
.l-btn-plain:hover {
  padding: 0;
}
.l-btn-focus {
  outline: #BBB8D8 dotted thin;
}
.l-btn-large .l-btn-text {
  /*line-height: 40px; */
}
.l-btn-large .l-btn-icon {
  width: 32px;
  height: 32px;
  line-height: 32px;
  margin-top: -16px;
}
.l-btn-large .l-btn-icon-left .l-btn-text {
  margin-left: 40px;
}
.l-btn-large .l-btn-icon-right .l-btn-text {
  margin-right: 40px;
}
.l-btn-large .l-btn-icon-top .l-btn-text {
  margin-top: 36px;
  line-height: 24px;
  min-width: 32px;
}
.l-btn-large .l-btn-icon-top .l-btn-icon {
  margin: 0 0 0 -16px;
}
.l-btn-large .l-btn-icon-bottom .l-btn-text {
  margin-bottom: 36px;
  line-height: 24px;
  min-width: 32px;
}
.l-btn-large .l-btn-icon-bottom .l-btn-icon {
  margin: 0 0 0 -16px;
}
.l-btn-large .l-btn-left .l-btn-empty {
  margin: 0 4px;
  width: 32px;
}

/* KG 

light color : #E1DEFF
medium color: #BBB8D8
dark color for text: #03E1A76

regular button -----

background: none
text:#A988AA
border:#F0EEEF

hover---
background:none
text:#A672AA
border:#896C8A


disabled button ------
background: none
text: #E2E2E2
border: none
icon color: #A48CA4

Focus button (button that we want to bring to focus)-----
background:#902D88
text: #F1E8E9
border: none

hover----
background: none
text: #902D88
border: #902D88

Need to implement tooltip


*/

/* Custom buttons  */


.login-button {
	
	color: #ffffff;
  background: #4B74E0;
  border-color: #5683FF;
  border-size: 1px;
  -moz-border-radius: 4px 4px 4px 4px;
  -webkit-border-radius: 4px 4px 4px 4px;
  border-radius: 4px 4px 4px 4px;
  
  padding: 4px;
  
  font-size: 9px;
}

.l-btn-control{
  color: #ffffff;
  background: #4B74E0;
  border-color: #5683FF;
  border-size: 1px;
  -moz-border-radius: 4px 4px 4px 4px;
  -webkit-border-radius: 4px 4px 4px 4px;
  border-radius: 4px 4px 4px 4px;
  
  padding: 4px;
  
  font-size: 9px;
}

.login-button {
	
	color: #ffffff;
  background: #4B74E0;
  border-color: #5683FF;
  border-size: 1px;
  -moz-border-radius: 4px 4px 4px 4px;
  -webkit-border-radius: 4px 4px 4px 4px;
  border-radius: 4px 4px 4px 4px;
  
  padding: 4px;
  
  font-size: 9px;
}

.l-btn-control:hover{
  color: #ffffff;
  background: #5683FF;
}

.login-button:hover{
  color: #ffffff;
  background: #5683FF;
}

.l-btn-prev-next{
  color: #ffffff;
  
  background-image: linear-gradient(135deg, #101A35 0%, #5683FF 100%);	
  border-color: #5683FF;
  border-size: 1px;
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  
  font-size: 9px;
  
  padding: 4px;
  margin:0;
  margin-left: 5px;
  margin-right: 8px;
  
}
.l-btn-next {
	background-image: linear-gradient(135deg, #5683FF 0%, #101A35 100%);
}


.l-btn-prev-next:hover{
  color: #ffffff;
  /*background: #C12AC3; */
  background-image: linear-gradient(135deg, #5683FF 0%, #4B74E0 100%);
  
}

.l-btn-next:hover {
	background-image: linear-gradient(135deg, #4B74E0 0%, #5683FF 100%);
	
}

/* never gets to this. when disabled style assigned is l-btn-disabled */
.l-btn-control-disabled .l-btn-control-disabled:hover{
  color: #ffffff;
  background: #f2f2f2;
  border-color: #444;
}

.l-btn-refresh {
	
	background: transparent;
	border:none;
}
#PortfolioRationalization-buttonExport {
	border-color: #4B74E0;
	
}

.l-btn-export {
	
	background: transparent;
    font-size: 20px;
    color: #4B74E0;	
    padding-left: 1em;
	padding-right: 1em;
	border-color: #4B74E0;
	border-size: 1px;
	background-image: url(../images/export-purple.svg);
   
    background-position-x: 0.9rem;
    background-position-y: center;
    background-size: 24%;
    background-repeat: no-repeat;
}

.l-btn-export:hover {
	background-color: #4B74E0  ;
    color: #ffffff;
    background-image: url(../images/export-white.svg);
   
    background-position-x: 0.5rem;
    background-position-y: center;
    background-size: 31%;
    background-repeat: no-repeat;
	
}


.l-btn-menu{
  color: #902B8E;
  background: transparent;
  
  padding: 2px;
  
  font-size: 9px;
}

.l-btn-menu:hover{
  color: #5683FF;
}

.l-btn-menu-disabled{
  color: #f2f2f2;
}

.l-btn-readmore{
  color: #902B8E;
  background: transparent;
  
  padding: 2px;
  
  font-size: 6px;
  font-style: italic;
  
  /*position: absolute;
  bottom: 2px;
  right:2px; */
  
  float: left;
	display: block;
	clear: none;
	position: relative;
}

.l-btn-readmore:hover{
  color: #5683FF;
}

.l-btn-upgrade{
  color: #ffffff;
  background: #902B8E;
  -moz-border-radius: 2px 2px 2px 2px;
  -webkit-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
  
  padding: 2px;
  
  font-size: 7px;
  
  position: absolute;
  bottom: 2px;
  right:2px;
  
}

.l-btn-upgrade:hover{
  background: #5683FF;
  color:#ffffff;
}

.l-btn-toolbar{
  color: #ffffff;
  background: #35206A;
  -moz-border-radius: 1px 1px 1px 1px;
  -webkit-border-radius: 1px 1px 1px 1px;
  border-radius: 1px 1px 1px 1px;
  
  padding: 2px;
  
  font-size: 6px;
}

.l-btn-toolbar:hover{
  color: #ffffff;
  background: #5683FF;
}

.l-btn-toolbar-disabled{
  color: #ffffff;
  background: #f2f2f2;
  background: #444;
}

.report-management-width {
	width: 47%;
	padding: 2%;
	float: left;
}

@media (min-width: 1350px) {
	.report-management-width {
		width: 47%;
		padding: 2%;
	}
}


.report-tile{
	width: 92%;
    height: 80%;
    background-color: #ffffff;
    border-color: #DBDFE8;
    border-size: 1px;
    color: #25396E;
    height: 10em;
}

.report-tile-left{
    margin-left: 7%;
    margin-right: 1%;
}
.report-tile-right{
    margin-left: 1%;
    margin-right: 10%;
}

.report-tile:hover{
	
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
    
}

.report-text{
	font-size: 0.7em;
}

@media (min-width: 576px) {
	.report-text{
		font-size: 0.8em;
	}
}

@media (min-width: 992px) {
	.report-text{
		font-size: 1em;
	}
}

@media (min-width: 1200px) {
	.report-text{
		font-size: 1.2em;
	}
}

.report-label{
	font-size: 1.5em;
    color: #5684FF;
}



/* validation  */
.validation-failed {
	color: #EE0C0C;
	font-weight: 700;
	
}

.validation-ok {
	color: #101A35;
	font-weight: 600;
	
}

.l-btn-reports{
	line-height: 3em;
    padding: 0.4em;
    padding-left: 1em;
    padding-right: 1em;
    border: 1px solid #3855A5;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
    margin-left: 10%;
}

.l-btn-reports:hover{
  	color: #ffffff;
  	/*background: #C12AC3; */
  	background-image: linear-gradient(135deg, #5683FF 0%, #4B74E0 100%);
	background-image: linear-gradient(135deg, #4B74E0 0%, #5683FF 100%);
	text-decoration: none;
}

.FixBrokenProcess-add{
	
	line-height: 3em;
    padding: 0.4em;
    padding-left: 1em;
    padding-right: 1em;

	border: 1px solid #3855A5;
	-moz-border-radius: 5px 5px 5px 5px;
	-webkit-border-radius: 5px 5px 5px 5px;
	border-radius: 5px 5px 5px 5px;
	
    margin-left: 10%;
	
}

.FixBrokenProcess-add:hover{
	background-image: linear-gradient(135deg, #4B74E0 0%, #5683FF 100%);
	text-decoration: none;
}

.l-btn-enable {
    background-color: #3855A5;
    color: #ffffff;
    
    line-height: 3em;
    padding: 0.4em;
    padding-left: 1em;
    padding-right: 1em;
    border: 1px solid #3855A5;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

.l-btn-enable:hover {
    background-color: #5684FF;
    color: #ffffff;
    text-decoration: none;
}

.l-btn-disable {
    background-color: #ffffff;
    color: #3855A5;
    
    line-height: 3em;
    padding: 0.4em;
    padding-left: 1em;
    padding-right: 1em;
    border: 1px solid #3855A5;
    -moz-border-radius: 5px 5px 5px 5px;
    -webkit-border-radius: 5px 5px 5px 5px;
    border-radius: 5px 5px 5px 5px;
}

.l-btn-disable:hover {
    background-color: #FFFFBD;
    color: #111111;
    text-decoration: none;
    border: 1px solid #000000;
}






/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.l-btn-control{
 
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
  
  padding: 6px;
  
  font-size: 12px;
}

.login-button{
 
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
  
  padding: 6px;
  
  font-size: 12px;
  background-color: #4B74E0;
}


.l-btn-prev-next{
  
  -moz-border-radius: 6px 6px 6px 6px;
  -webkit-border-radius: 6px 6px 6px 6px;
  border-radius: 6px 6px 6px 6px;
  
  font-size: 12px;
  
  padding: 3px;
  padding-left: 20px;
  padding-right:20px;
  margin:0;
  margin-left: 8px;
  margin-right: 12px;
  
}


.l-btn-menu{
  
  padding: 3px;
  
  font-size: 12px;
}


.l-btn-readmore{
  
  padding: 2px;
  
  font-size: 10px;

}


.l-btn-upgrade{
  
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border-radius: 7px 7px 7px 7px;
  border-radius: 7px 7px 7px 7px;
  
  padding: 4px;
  padding-left:16px;
  padding-right:16px;
  font-size: 10px;
  
  bottom: 3px;
  right:5px;
  
}

.l-btn-toolbar{
  
  -moz-border-radius: 2px 2px 2px 2px;
  -webkit-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
  
  padding: 3px;
  
  font-size: 8px;
	
}

	
}

/* Desktop Layout: 768px+. Inherits styles from: Tablet Layout. */

@media only screen and (min-width: 768px) {
	
	.l-btn-control{
 
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  
  padding: 5px;
  
  font-size: 12px;
}

.login-button{
 
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  
  padding: 5px;
  
  font-size: 12px;
}


.l-btn-prev-next{
  
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  
  font-size: 14px;
  
  padding: 4px;
  padding-left: 30px;
  padding-right:30px;
  margin:0;
  margin-left: 10px;
  margin-right: 15px;
  
}


.l-btn-menu{
  
  padding: 2px;
  
  font-size: 12px;
}


.l-btn-readmore{
  
  padding: 2px;
  
  font-size: 12px;

}


.l-btn-upgrade{
  
  -moz-border-radius: 4px 4px 4px 4px;
  -webkit-border-radius: 4px 4px 4px 4px;
  border-radius: 4px 4px 4px 4px;
  
  padding: 4px;
  
  font-size: 12px;
  padding-left:20px;
  padding-right:20px;
  
  bottom: 8px;
  right:12px;
  
}

.l-btn-toolbar{
  
  -moz-border-radius: 2px 2px 2px 2px;
  -webkit-border-radius: 2px 2px 2px 2px;
  border-radius: 2px 2px 2px 2px;
  
  padding: 2px;
  
  font-size: 11px;
	
}

}

/* Desktop Layout: 1020px+. Inherits styles from: Tablet Layout. */

@media only screen and (min-width: 1020px) {
	
.l-btn-control{
 
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border-radius: 7px 7px 7px 7px;
  border-radius: 7px 7px 7px 7px;
  
  padding: 7px;
  
  font-size: 14px;
}

.login-button{
 
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border-radius: 7px 7px 7px 7px;
  border-radius: 7px 7px 7px 7px;
  
  padding: 7px;
  
  font-size: 14px;
}

.login-register-link {
	text-align: center;
    color: #476CD1;
    font-size: 1.2em;
    font-weight: 200;
    padding: 0.5em;
    background-color: transparent;
    border: none;
}

.login-register-forms {
	background-color: rgb(255, 255, 255);
    width: 50%;
    margin-left: 30%;
    margin-top: 10%;
    float: left;
    text-align: center;
    vertical-align: middle;
    
}

.l-btn-prev-next{
  
  -moz-border-radius: 7px 7px 7px 7px;
  -webkit-border-radius: 7px 7px 7px 7px;
  border-radius: 7px 7px 7px 7px;
  
  font-size: 16px;
  
  padding: 6px;
  padding-left: 35px;
  padding-right:35px;
  
}









.l-btn-menu{
  
  padding: 4px;
  
  font-size: 16px;
}


.l-btn-readmore{
  
  padding: 3px;
  
  font-size: 12px;

}


.l-btn-upgrade{
  
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  border-radius: 9px 9px 9px 9px;
  
  padding: 7px;
  
  font-size: 14px;
  padding-left: 30px;
  padding-right: 30px;
    
  bottom: 12px;
  right:18px;
  
}

.l-btn-toolbar{
  
  -moz-border-radius: 3px 3px 3px 3px;
  -webkit-border-radius: 3px 3px 3px 3px;
  border-radius: 3px 3px 3px 3px;
  
  padding: 5px;
  
  font-size: 14px;
}

	
}

/* end of desktop */

.l-btn {
	
	box-shadow: 1px 1px 10px 0 rgba(0,0,0,1);
    /*border: 1px solid rgba(0,0,0,0); */
    text-decoration: none;
    /*color: #757575; */
    border-radius: 5px;
    /*padding: 10px 45px;
    font-size: 14px; */
    font-weight: 400;
    /* margin-left: 45px; */
    transition: all 0.2s ease-in;
    /*background: transparent; */
	
	/*
  color: #ffffff;
  background: #902B8E;
  
  background-repeat: repeat-x;

  border: 1px solid #902B8E;
  padding: 7px;
  font-size: 18px;
  /*
  background: -webkit-linear-gradient(top,#ffffff 0,#eeeeee 100%);
  background: -moz-linear-gradient(top,#ffffff 0,#eeeeee 100%);
  background: -o-linear-gradient(top,#ffffff 0,#eeeeee 100%);
  background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#eeeeee,GradientType=0);
  
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  border-radius: 9px 9px 9px 9px;
  
  font-size: 18px;
  */
  
}
.l-btn:hover {

  /*background: transparent;
  
  color: #ffffff;
  border: none;
  filter: none;
  */
}

.l-btn-action {
	
	background-image: linear-gradient(135deg, #5683FF 0%, #101A35 100%);
	/* background-image: linear-gradient(135deg, #67d690 0%, #00a99d 100%); */
	
    /*font-size: 16px; */
    font-weight: 500;
    color: #ffffff;
    margin:0;
    /* padding: 10px 50px;  */
    padding: 10px 45px;
    font-size: 14px;
    margin-left:45px;
    border-radius: 35px;
    text-decoration: none;
    box-shadow: 0px 15px 51px 0px rgba(0,0,0,0.24);
}

.l-btn-action-small {
	background-image: linear-gradient(135deg, #5683FF 0%, #101A35 100%);
    font-weight: 500;
    color: #ffffff;
    margin: 0;
   
    width: 90%;
    padding-top: 1em;
    padding-bottom: 1em;
    font-size: 14px;
    margin-left: 10%;
    margin-top: 4%;
    border-radius: 9px;
    text-decoration: none;
    box-shadow: 0px 15px 51px 0px rgba(0,0,0,0.24);
    
}
/* KG - implement hover for each type of buttons separately */

.l-btn-action:hover {
	
	background-image: linear-gradient(135deg, #5683FF 0%, #4B74E0   100%);
    color: #ffffff;
	
}

.l-btn-action-small:hover {
	
	background-image: linear-gradient(135deg, #5683FF 0%, #4B74E0   100%);
    color: #ffffff;
	
}

.l-btn-action-compact {
	background-image: linear-gradient(135deg, #5683FF 0%, #101A35 100%);
    color: #ffffff;
    padding: 3px 25px;
    text-decoration: none;
    box-shadow: 0px 15px 51px 0px rgba(0,0,0,0.24);
    width: 100%;
    margin: 0;
}
@media (min-width: 576px) {
	.l-btn-action-compact {
    	width: 90%;
    	margin-left: 5%;
	}
}

@media (min-width: 768px) {
	.l-btn-action-compact {
    	width: 80%;
    	margin-left: 10%;
	}
}

@media only screen and (min-width: 992px) {
	.l-btn-action-compact {
    	width: auto;
    	margin-left: 0;
	}
}
.l-btn-action-compact-noStretch {
	background-image: linear-gradient(135deg, #5683FF 0%, #101A35 100%);
    color: #ffffff;
    padding: 3px 25px;
    text-decoration: none;
    box-shadow: 0px 15px 51px 0px rgba(0,0,0,0.24);
}

.l-btn-action-compact:hover {
	
	background-image: linear-gradient(135deg, #5683FF 0%, #4B74E0   100%);
    color: #ffffff;
	
}
.l-btn-action-compact-noStretch:hover {
	
	background-image: linear-gradient(135deg, #5683FF 0%, #4B74E0   100%);
    color: #ffffff;
	
}

.l-btn-plain {
  /*background: #ffffff;*/
  color: #25396E;
  border: none;
  filter: none;
  font-size: 13px;
  padding-left: 0.5em;
  padding-right: 0.5em;
}


.l-btn-outline {
  border-width: 1px;
  border-color: #BBB8D8;
  padding: 0;
}
.l-btn-plain:hover {
 
  color: #ffffff;
  background-color: #5683FF;
  border: none;
  padding-left: 0.5em;
  padding-right: 0.5em;
  
  
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  
}
.l-btn-disabled,
.l-btn-disabled:hover {
  opacity: 0.1; 
  /*cursor: default;
  /*background: #896C8A;
  color: #FFFFFF;
  /*
  background: -webkit-linear-gradient(top,#ffffff 0,#eeeeee 100%);
  background: -moz-linear-gradient(top,#ffffff 0,#eeeeee 100%);
  background: -o-linear-gradient(top,#ffffff 0,#eeeeee 100%);
  background: linear-gradient(to bottom,#ffffff 0,#eeeeee 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#eeeeee,GradientType=0);
  */
}
.l-btn-disabled .l-btn-text,
.l-btn-disabled .l-btn-icon {
  filter: alpha(opacity=50);
}
.l-btn-plain-disabled,
.l-btn-plain-disabled:hover {
  /*background: #CEA3D2;*/
  filter: alpha(opacity=50);
}
.l-btn-selected,
.l-btn-selected:hover {
  filter: none;
  background: #565656;
  color: #ffffff;
  border-radius: 1px;
}
.l-btn-plain-selected,
.l-btn-plain-selected:hover {
  /*background: #902B8E;*/
}
.textbox {
  position: relative;
  /*border: none;
  border-bottom: 2px solid #331E65; */
  background-color: #fff;
  background-color: #f2f2f2;
  vertical-align: middle;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  /*
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  */
}
.textbox .textbox-text {
 /* font-size: 14px;
  */
  border: 0;
  margin: 0;
  padding: 4px;
  white-space: normal;
  vertical-align: top;
  outline-style: none;
  resize: none;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}

.textbox .textbox-text::-ms-clear,
.textbox .textbox-text::-ms-reveal {
  display: none;
}
.textbox textarea.textbox-text {
  white-space: pre-wrap;
}
.textbox .textbox-prompt {
  font-size: 12px;
  color: #aaa;
}
.textbox .textbox-bgicon {
  background-position: 3px center;
  padding-left: 21px;
}
.textbox .textbox-button,
.textbox .textbox-button:hover {
  position: absolute;
  top: 0;
  padding: 0;
  vertical-align: top;
  -moz-border-radius: 0 0 0 0;
  -webkit-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
}
.textbox .textbox-button-right,
.textbox .textbox-button-right:hover {
  right: 0;
  border-width: 0 0 0 1px;
  background-color: #3855A5;
  padding-left: 0.7em;
  padding-right: 0.7em;
  color: #ffffff;
}
.textbox .textbox-button-left,
.textbox .textbox-button-left:hover {
  left: 0;
  border-width: 0 1px 0 0;
}
.textbox .textbox-button-top,
.textbox .textbox-button-top:hover {
  left: 0;
  border-width: 0 0 1px 0;
}
.textbox .textbox-button-bottom,
.textbox .textbox-button-bottom:hover {
  top: auto;
  bottom: 0;
  left: 0;
  border-width: 1px 0 0 0;
}
.textbox-addon {
  position: absolute;
  top: 0;
}
.textbox-label {
  display: inline-block;
  width: 80px;
  height: 22px;
  line-height: 22px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 0;
  padding-right: 5px;
}
.textbox-label-after {
  padding-left: 5px;
  padding-right: 0;
}
.textbox-label-top {
  display: block;
  width: auto;
  padding: 0;
}
.textbox-disabled,
.textbox-label-disabled {
  opacity: 0.6;
  filter: alpha(opacity=60);
}
.textbox-icon {
  display: inline-block;
  width: 18px;
  height: 20px;
  overflow: hidden;
  vertical-align: top;
  background-position: center center;
  cursor: pointer;
  opacity: 0.6;
  filter: alpha(opacity=60);
  text-decoration: none;
  outline-style: none;
  background-size: 32%;
}
.textbox-icon-disabled,
.textbox-icon-readonly {
  cursor: default;
}
.textbox-icon:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
}
.textbox-icon-disabled:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
}
.textbox-focused {
	
  border-color: #6b9cde;
  -moz-box-shadow: 0 0 3px 0 #95B8E7;
  -webkit-box-shadow: 0 0 3px 0 #95B8E7;
  box-shadow: 0 0 3px 0 #95B8E7;
  
  color: #35206A;
}
.textbox-invalid {
  border-color: #ffa8a8;
  background-color: #fff3f3;
}

/*
.passwordbox-open {
  background: url('images/passwordbox_open.png') no-repeat center center;
}
.passwordbox-close {
  background: url('images/passwordbox_close.png') no-repeat center center;
}
*/

.filebox .textbox-value {
  vertical-align: top;
  position: absolute;
  top: 0;
  left: -5000px;
  font-size: 12px;
}
.filebox-label {
  display: inline-block;
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: pointer;
  left: 0;
  top: 0;
  z-index: 10;
  background: url('images/blank.gif') no-repeat;
}
.l-btn-disabled .filebox-label {
  cursor: default;
}
.combo-arrow {
  width: 18px;
  height: 20px;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  opacity: 0.6;
  filter: alpha(opacity=60);
  background: url(../images/drop-down-arrow.svg) no-repeat center center;
  background-size: 35%;
  
  
}
.combo-arrow-hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
}
.combo-panel {
  overflow: auto;
}
/*
.combo-arrow {
  background: url('images/combo_arrow.png') no-repeat center center;
}
*/
.combo-panel {
  background-color: #ffffff;
}
.combo-arrow {
  background-color: transparent;
}
.combo-arrow-hover {
  background-color: #eaf2ff;
}
.combo-arrow:hover {
  background-color: #eaf2ff;
}
.combo .textbox-icon-disabled:hover {
  cursor: default;
}
.combobox-item,
.combobox-group,
.combobox-stick {
	
	font-size: 14px;
    padding: 1px;
    padding-left: 1em;
    margin-top: 0.3em;
    margin-bottom: 0.4em;
    color: #25396E;
    border-bottom: 2px solid #E6EEF8;
    
  /*font-size: 12px;
  padding: 1px;
  margin-bottom: 2px;
  color: #25396E;
  border-bottom: 2px solid #E6EEF8; */

}
.combobox-item-disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.combobox-gitem {
  padding-left: 10px;
}
.combobox-group,
.combobox-stick {
  font-weight: bold;
}
.combobox-stick {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  background: inherit;
}
.combobox-item-hover {
  background-color: #D4E8FF;
  color: #000000;
}
.combobox-item-selected {
  background-color: #25396E;
  color: #ffffff;
}
.combobox-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  margin-right: 2px;
}

/* Kate - this is just a test  */
.textbox-text .validatebox-text  {
	
	width:30px;
}


.layout {
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
  z-index: 0;
}
.layout-panel {
  position: absolute;
  overflow: hidden;
}
.layout-body {
  min-width: 1px;
  min-height: 1px;
}
/* KG color of the top menu bar */
.layout-panel-east,
.layout-panel-west {
  z-index: 2;
  
}

.menu-panel-background {
	background-color: #101A35;
	
}

.layout-panel-north,
.layout-panel-south {
  z-index: 3;
}
.layout-expand {
  position: absolute;
  padding: 0px;
  font-size: 1px;
  cursor: pointer;
  z-index: 1;
}
.layout-expand .panel-header,
.layout-expand .panel-body {
  background: transparent;
  filter: none;
  overflow: hidden;
}
.layout-expand .panel-header {
  border-bottom-width: 0px;
  height: 100%;
  /* background-color: #253A6F; */
}
.layout-expand .panel-body {
  position: relative;
}
.layout-expand .panel-body .panel-icon {
  margin-top: 0;
  top: 0;
  left: 50%;
  margin-left: -8px;
}
.layout-expand-west .panel-header .panel-icon,
.layout-expand-east .panel-header .panel-icon {
  display: none;
}
.layout-expand-title {
  position: absolute;
  top: 0;
  left: 21px;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-transform: rotate(90deg);
  -webkit-transform-origin: 0 0;
  -moz-transform: rotate(90deg);
  -moz-transform-origin: 0 0;
  -o-transform: rotate(90deg);
  -o-transform-origin: 0 0;
  transform: rotate(90deg);
  transform-origin: 0 0;
}
.layout-expand-with-icon {
  top: 18px;
}
.layout-expand .panel-body-noheader .layout-expand-title,
.layout-expand .panel-body-noheader .panel-icon {
  top: 5px;
}
.layout-expand .panel-body-noheader .layout-expand-with-icon {
  top: 23px;
}
.layout-split-proxy-h,
.layout-split-proxy-v {
  position: absolute;
  font-size: 1px;
  display: none;
  z-index: 5;
}
.layout-split-proxy-h {
  width: 5px;
  cursor: e-resize;
}
.layout-split-proxy-v {
  height: 5px;
  cursor: n-resize;
}
.layout-mask {
  position: absolute;
  background: #fafafa;
  filter: alpha(opacity=10);
  opacity: 0.10;
  z-index: 4;
}


/* replace png buttons with svg */

.layout-button-up {
  background: url('../images/arrow-up.svg') no-repeat center center;
}
.layout-button-down {
  background: url('../images/arrow-down.svg') no-repeat center center;
}
.layout-button-left {
  background: url('../images/arrow-left.svg') no-repeat center center;
}
.layout-button-right {
  background: url('../images/arrow-right.svg') no-repeat center center;
}

.layout-expand-east {
	background-color: #253A6F;
    height: 30em;
}

.help-icon {
	background: url('../images/info.svg') no-repeat center center;
}
/*
.layout-button-up {
  background: url('images/layout_arrows.png') no-repeat -16px -16px;
}
.layout-button-down {
  background: url('images/layout_arrows.png') no-repeat -16px 0;
}
.layout-button-left {
  background: url('images/layout_arrows.png') no-repeat 0 0;
}
.layout-button-right {
  background: url('images/layout_arrows.png') no-repeat 0 -16px;
}
*/
.layout-split-proxy-h,
.layout-split-proxy-v {
  background-color: #aac5e7;
}
.layout-split-north {
  border-bottom: 5px solid #E6EEF8;
}
.layout-split-south {
  border-top: 5px solid #E6EEF8;
}
.layout-split-east {
  border-left: 5px solid #E6EEF8;
}
.layout-split-west {
  border-right: 5px solid #E6EEF8;
}
/* KG color of the top bar when menu is collapsed - use easy ui color
.layout-expand {
  background-color: #D3D3D3;
} */
.layout-expand-over {
  /*background-color: #E0ECFF;  */
}
.tabs-container {
  overflow: hidden;
}
.tabs-header {
  border-width: 1px;
  border-style: solid;
  border-bottom-width: 0;
  position: relative;
  padding: 0;
  padding-top: 2px;
  overflow: hidden;
}
.tabs-scroller-left,
.tabs-scroller-right {
  position: absolute;
  top: auto;
  bottom: 0;
  width: 18px;
  font-size: 1px;
  display: none;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
}
.tabs-scroller-left {
  left: 0;
}
.tabs-scroller-right {
  right: 0;
}
.tabs-tool {
  position: absolute;
  bottom: 0;
  padding: 1px;
  overflow: hidden;
  border-width: 1px;
  border-style: solid;
}
.tabs-header-plain .tabs-tool {
  padding: 0 1px;
}
.tabs-wrap {
  position: relative;
  left: 0;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}
.tabs-scrolling {
  margin-left: 18px;
  margin-right: 18px;
}
.tabs-disabled {
  opacity: 0.3;
  filter: alpha(opacity=30);
}
.tabs {
  list-style-type: none;
  height: 26px;
  margin: 0px;
  padding: 0px;
  padding-left: 4px;
  width: 50000px;
  border-style: solid;
  border-width: 0 0 1px 0;
}
.tabs li {
  float: left;
  display: inline-block;
  margin: 0 4px -1px 0;
  padding: 0;
  position: relative;
  border: 0;
}
.tabs li a.tabs-inner {
  display: inline-block;
  text-decoration: none;
  margin: 0;
  padding: 0 10px;
  height: 25px;
  line-height: 25px;
  text-align: center;
  white-space: nowrap;
  border-width: 1px;
  border-style: solid;
  -moz-border-radius: 5px 5px 0 0;
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  text-transform: uppercase;
}
.tabs li.tabs-selected a.tabs-inner {
  font-weight: bold;
  outline: none;
}
.tabs li.tabs-selected a:hover.tabs-inner {
  cursor: default;
  pointer: default;
}
.tabs li a.tabs-close,
.tabs-p-tool {
  position: absolute;
  font-size: 1px;
  display: block;
  height: 12px;
  padding: 0;
  top: 50%;
  margin-top: -6px;
  overflow: hidden;
}
.tabs li a.tabs-close {
  width: 12px;
  right: 5px;
  opacity: 0.6;
  filter: alpha(opacity=60);
}
.tabs-p-tool {
  right: 16px;
}
.tabs-p-tool a {
  display: inline-block;
  font-size: 1px;
  width: 12px;
  height: 12px;
  margin: 0;
  opacity: 0.6;
  filter: alpha(opacity=60);
}
.tabs li a:hover.tabs-close,
.tabs-p-tool a:hover {
  opacity: 1;
  filter: alpha(opacity=100);
  cursor: hand;
  cursor: pointer;
}
.tabs-with-icon {
  padding-left: 18px;
}
.tabs-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 10px;
  top: 50%;
  margin-top: -8px;
}
.tabs-title {
  font-size: 1em;
}
.tabs-closable {
  padding-right: 8px;
}
.tabs-panels {
  margin: 0px;
  padding: 0px;
  border-width: 1px;
  border-style: solid;
  border-top-width: 0;
  overflow: hidden;
}
.tabs-header-bottom {
  border-width: 0 1px 1px 1px;
  padding: 0 0 2px 0;
}
.tabs-header-bottom .tabs {
  border-width: 1px 0 0 0;
}
.tabs-header-bottom .tabs li {
  margin: -1px 4px 0 0;
}
.tabs-header-bottom .tabs li a.tabs-inner {
  -moz-border-radius: 0 0 5px 5px;
  -webkit-border-radius: 0 0 5px 5px;
  border-radius: 0 0 5px 5px;
}
.tabs-header-bottom .tabs-tool {
  top: 0;
}
.tabs-header-bottom .tabs-scroller-left,
.tabs-header-bottom .tabs-scroller-right {
  top: 0;
  bottom: auto;
}
.tabs-panels-top {
  border-width: 1px 1px 0 1px;
}
.tabs-header-left {
  float: left;
  border-width: 1px 0 1px 1px;
  padding: 0;
}
.tabs-header-right {
  float: right;
  border-width: 1px 1px 1px 0;
  padding: 0;
}
.tabs-header-left .tabs-wrap,
.tabs-header-right .tabs-wrap {
  height: 100%;
}
.tabs-header-left .tabs {
  height: 100%;
  padding: 4px 0 0 2px;
  border-width: 0 1px 0 0;
}
.tabs-header-right .tabs {
  height: 100%;
  padding: 4px 2px 0 0;
  border-width: 0 0 0 1px;
}
.tabs-header-left .tabs li,
.tabs-header-right .tabs li {
  display: block;
  width: 100%;
  position: relative;
}
.tabs-header-left .tabs li {
  left: auto;
  right: 0;
  margin: 0 -1px 4px 0;
  float: right;
}
.tabs-header-right .tabs li {
  left: 0;
  right: auto;
  margin: 0 0 4px -1px;
  float: left;
}
.tabs-justified li a.tabs-inner {
  padding-left: 0;
  padding-right: 0;
}
.tabs-header-left .tabs li a.tabs-inner {
  display: block;
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
}
.tabs-header-right .tabs li a.tabs-inner {
  display: block;
  text-align: left;
  padding-left: 10px;
  padding-right: 10px;
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
}
.tabs-panels-right {
  float: right;
  border-width: 1px 1px 1px 0;
}
.tabs-panels-left {
  float: left;
  border-width: 1px 0 1px 1px;
}
.tabs-header-noborder,
.tabs-panels-noborder {
  border: 0px;
}
.tabs-header-plain {
  border: 0px;
  background: transparent;
}
.tabs-pill {
  padding-bottom: 3px;
}
.tabs-header-bottom .tabs-pill {
  padding-top: 3px;
  padding-bottom: 0;
}
.tabs-header-left .tabs-pill {
  padding-right: 3px;
}
.tabs-header-right .tabs-pill {
  padding-left: 3px;
}
.tabs-header .tabs-pill li a.tabs-inner {
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
.tabs-header-narrow,
.tabs-header-narrow .tabs-narrow {
  padding: 0;
}
.tabs-narrow li,
.tabs-header-bottom .tabs-narrow li {
  margin-left: 0;
  margin-right: -1px;
}
.tabs-narrow li.tabs-last,
.tabs-header-bottom .tabs-narrow li.tabs-last {
  margin-right: 0;
}
.tabs-header-left .tabs-narrow,
.tabs-header-right .tabs-narrow {
  padding-top: 0;
}
.tabs-header-left .tabs-narrow li {
  margin-bottom: -1px;
  margin-right: -1px;
}
.tabs-header-left .tabs-narrow li.tabs-last,
.tabs-header-right .tabs-narrow li.tabs-last {
  margin-bottom: 0;
}
.tabs-header-right .tabs-narrow li {
  margin-bottom: -1px;
  margin-left: -1px;
}
.tabs-scroller-left {
  background: #ffffff url('images/tabs_icons.png') no-repeat 1px center;
}
.tabs-scroller-right {
  background: #ffffff url('images/tabs_icons.png') no-repeat -15px center;
}
.tabs li a.tabs-close {
	/*
  background: url('images/tabs_icons.png') no-repeat -34px center;
  */
}
.tabs li a.tabs-inner:hover {
	/*
  background: #eaf2ff;
  color: #000000;
  filter: none;
  */
}
.tabs li.tabs-selected a.tabs-inner {
  background-color: #ffffff;
  color: #565656;
  background-color: #E5E4FB;
  /*
  background: -webkit-linear-gradient(top,#EFF5FF 0,#ffffff 100%);
  background: -moz-linear-gradient(top,#EFF5FF 0,#ffffff 100%);
  background: -o-linear-gradient(top,#EFF5FF 0,#ffffff 100%);
  background: linear-gradient(to bottom,#EFF5FF 0,#ffffff 100%);
  background-repeat: repeat-x;
  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFF5FF,endColorstr=#ffffff,GradientType=0);
  */
}
.tabs-header-bottom .tabs li.tabs-selected a.tabs-inner {
	background-color: #E5E4FB;
	/*
  background: -webkit-linear-gradient(top,#ffffff 0,#EFF5FF 100%);
  background: -moz-linear-gradient(top,#ffffff 0,#EFF5FF 100%);
  background: -o-linear-gradient(top,#ffffff 0,#EFF5FF 100%);
  background: linear-gradient(to bottom,#ffffff 0,#EFF5FF 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#EFF5FF,GradientType=0);
  */
}
.tabs-header-left .tabs li.tabs-selected a.tabs-inner {
	background-color: #E5E4FB;
	/*
  background: -webkit-linear-gradient(left,#EFF5FF 0,#ffffff 100%);
  background: -moz-linear-gradient(left,#EFF5FF 0,#ffffff 100%);
  background: -o-linear-gradient(left,#EFF5FF 0,#ffffff 100%);
  background: linear-gradient(to right,#EFF5FF 0,#ffffff 100%);
  background-repeat: repeat-y;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFF5FF,endColorstr=#ffffff,GradientType=1);
  */
}
.tabs-header-right .tabs li.tabs-selected a.tabs-inner {
	background-color: #E5E4FB;
	/*
  background: -webkit-linear-gradient(left,#ffffff 0,#EFF5FF 100%);
  background: -moz-linear-gradient(left,#ffffff 0,#EFF5FF 100%);
  background: -o-linear-gradient(left,#ffffff 0,#EFF5FF 100%);
  background: linear-gradient(to right,#ffffff 0,#EFF5FF 100%);
  background-repeat: repeat-y;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#EFF5FF,GradientType=1);
  */
}
.tabs li a.tabs-inner {
  color: #101A35;
  background-color: #EEF0F6;
	/*
  background: -webkit-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
  background: -moz-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
  background: -o-linear-gradient(top,#EFF5FF 0,#E0ECFF 100%);
  background: linear-gradient(to bottom,#EFF5FF 0,#E0ECFF 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EFF5FF,endColorstr=#E0ECFF,GradientType=0);
  */
}
.tabs-header,
.tabs-tool {
  background-color: #E5E4FB;
	
}
.tabs-header-plain {
  background: transparent;
}
.tabs-header,
.tabs-scroller-left,
.tabs-scroller-right,
.tabs-tool,
.tabs,
.tabs-panels,
.tabs li a.tabs-inner,
.tabs li.tabs-selected a.tabs-inner,
.tabs-header-bottom .tabs li.tabs-selected a.tabs-inner,
.tabs-header-left .tabs li.tabs-selected a.tabs-inner,
.tabs-header-right .tabs li.tabs-selected a.tabs-inner {
  border-color: #101A35;
}
.tabs-p-tool a:hover,
.tabs li a:hover.tabs-close,
.tabs-scroller-over {
  background-color: #CAB0FB;
}
.tabs li.tabs-selected a.tabs-inner {
  border-bottom: 1px solid #ffffff;
}
.tabs-header-bottom .tabs li.tabs-selected a.tabs-inner {
  border-top: 1px solid #ffffff;
}
.tabs-header-left .tabs li.tabs-selected a.tabs-inner {
  border-right: 1px solid #ffffff;
}
.tabs-header-right .tabs li.tabs-selected a.tabs-inner {
  border-left: 1px solid #ffffff;
}
.tabs-header .tabs-pill li.tabs-selected a.tabs-inner {
  background: #ffe48d;
  color: #000000;
  filter: none;
  border-color: #896C8A;
}
.datagrid .panel-body {
  overflow: hidden;
  position: relative;
}
.datagrid-view {
  position: relative;
  overflow: hidden;
}
.datagrid-view1,
.datagrid-view2 {
  position: absolute;
  overflow: hidden;
  top: 0;
}
.datagrid-view1 {
  left: 0;
}
.datagrid-view2 {
  right: 0;
}
.datagrid-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  filter: alpha(opacity=30);
  display: none;
}
.datagrid-mask-msg {
  position: absolute;
  top: 50%;
  margin-top: -20px;
  padding: 10px 5px 10px 30px;
  width: auto;
  height: 16px;
  border-width: 2px;
  border-style: solid;
  display: none;
}
.datagrid-empty {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 25px;
  line-height: 25px;
  text-align: center;
}
.datagrid-sort-icon {
  padding: 0;
  display: none;
}
.datagrid-toolbar {
  height: auto;
  padding: 1px 2px;
  border-width: 0 0 1px 0;
  border-style: solid;
}
.datagrid-btn-separator {
  float: left;
  height: 24px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #fff;
  margin: 2px 1px;
}
.datagrid .datagrid-pager {
  display: block;
  margin: 0;
  border-width: 1px 0 0 0;
  border-style: solid;
}
.datagrid .datagrid-pager-top {
  border-width: 0 0 1px 0;
}
.datagrid-header {
  overflow: hidden;
  cursor: default;
  border-width: 0 0 1px 0;
  border-style: solid;
}
.datagrid-header-inner {
  float: left;
  width: 10000px;
}
.datagrid-header-row,
.datagrid-row {
  height: 25px;
}
.datagrid-header td,
.datagrid-body td,
.datagrid-footer td {
  border-width: 0 1px 1px 0;
  border-style: dotted;
  margin: 0;
  padding: 0;
}
.datagrid-cell,
.datagrid-cell-group,
.datagrid-header-rownumber,
.datagrid-cell-rownumber {
  margin: 0;
  padding: 0 4px;
  white-space: nowrap;
  word-wrap: normal;
  /*overflow: overlay; */
  height: 22px;
  line-height: 16px;
  font-size: 10px;
  
  overflow-x: hidden
;
  
}
.datagrid-header .datagrid-cell {
  height: auto;
  text-transform: uppercase;
  text-align:center;
}
.datagrid-header .datagrid-cell span {
  font-size: 0.8em;
}
.datagrid-cell-group {
  text-align: left;
  text-overflow: ellipsis;
  background-color: #fff;
}
.datagrid-header-rownumber,
.datagrid-cell-rownumber {
  width: 30px;
  text-align: center;
  margin: 0;
  padding: 0;
}
.datagrid-body {
  margin: 0;
  padding: 0;
  overflow: auto;
  zoom: 1;
}
.datagrid-view1 .datagrid-body-inner {
  padding-bottom: 20px;
}
.datagrid-view1 .datagrid-body {
  overflow: hidden;
}
.datagrid-footer {
  overflow: hidden;
}
.datagrid-footer-inner {
  border-width: 1px 0 0 0;
  border-style: solid;
  width: 10000px;
  float: left;
}
.datagrid-row-editing .datagrid-cell {
  height: auto;
}
.datagrid-header-check,
.datagrid-cell-check {
  padding: 0;
  width: 27px;
  height: 18px;
  font-size: 1px;
  text-align: center;
  overflow: hidden;
}
.datagrid-header-check input,
.datagrid-cell-check input {
  margin: 0;
  padding: 0;
  width: 15px;
  height: 18px;
}
.datagrid-resize-proxy {
  position: absolute;
  width: 1px;
  height: 10000px;
  top: 0;
  cursor: e-resize;
  display: none;
}
.datagrid-body .datagrid-editable {
  margin: 0;
  padding: 0;
}
.datagrid-body .datagrid-editable table {
  width: 100%;
  height: 100%;
}

/* highlighted cell */
.datagrid-body .datagrid-editable td {
  border: 0;
  margin: 0;
  padding: 0;
}
.datagrid-view .datagrid-editable-input {
  margin: 0;
  padding: 2px 4px;
  border: 1px solid #95B8E7;
  font-size: 12px;
  outline-style: none;
  -moz-border-radius: 0 0 0 0;
  -webkit-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
}
.datagrid-view .validatebox-invalid {
  border-color: #ffa8a8;
}
.datagrid-sort .datagrid-sort-icon {
  display: inline;
  padding: 0 13px 0 0;
  background: url('images/datagrid_icons.png') no-repeat -64px center;
}
.datagrid-sort-desc .datagrid-sort-icon {
  display: inline;
  padding: 0 13px 0 0;
  background: url('images/datagrid_icons.png') no-repeat -16px center;
}
.datagrid-sort-asc .datagrid-sort-icon {
  display: inline;
  padding: 0 13px 0 0;
  background: url('images/datagrid_icons.png') no-repeat 0px center;
}
.datagrid-row-collapse {
  background: url('../images/datagrid-collapse.png') no-repeat center center;
  background-size: 100%;
  /*
  background: url('images/datagrid_icons.png') no-repeat -48px center;
  */
}
.datagrid-row-expand {
  background: url('../images/datagrid-expand.png') no-repeat center center;
  background-size: 100%;
  /*
  background: url('images/datagrid_icons.png') no-repeat -32px center;
  */
}
.datagrid-mask-msg {
  background: #ffffff url('images/loading.gif') no-repeat scroll 5px center;
}
.datagrid-header,
.datagrid-td-rownumber {
  background-color: #efefef;
  background: -webkit-linear-gradient(top,#F9F9F9 0,#efefef 100%);
  background: -moz-linear-gradient(top,#F9F9F9 0,#efefef 100%);
  background: -o-linear-gradient(top,#F9F9F9 0,#efefef 100%);
  background: linear-gradient(to bottom,#F9F9F9 0,#efefef 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#F9F9F9,endColorstr=#efefef,GradientType=0);
}
.datagrid-cell-rownumber {
  color: #000000;
}
.datagrid-resize-proxy {
  background: #aac5e7;
}
.datagrid-mask {
  background: #ccc;
}
.datagrid-mask-msg {
  border-color: #95B8E7;
}
.datagrid-toolbar,
.datagrid-pager {
  background: #F4F4F4;
}
.datagrid-header,
.datagrid-toolbar,
.datagrid-pager,
.datagrid-footer-inner {
  border-color: #dddddd;
}

/* not selected cell */
.datagrid-header td,
.datagrid-body td,
.datagrid-footer td {
  border-color: #ccc;
}
.datagrid-htable,
.datagrid-btable,
.datagrid-ftable {
  color: #000000;
  border-collapse: separate;
}
.datagrid-row-alt {
  background: #fafafa;
}
.datagrid-row-over,
.datagrid-header td.datagrid-header-over {
  background: #eaf2ff;
  color: #000000;
  cursor: default;
}
.datagrid-row-selected {
  background: #E4F0FF;
  color: #000000;
}
.datagrid-row-editing .textbox,
.datagrid-row-editing .textbox-text {
  -moz-border-radius: 0 0 0 0;
  -webkit-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
}
.propertygrid .datagrid-view1 .datagrid-body td {
  padding-bottom: 1px;
  border-width: 0 1px 0 0;
}
.propertygrid .datagrid-group {
  height: 21px;
  overflow: hidden;
  border-width: 0 0 1px 0;
  border-style: solid;
}
.propertygrid .datagrid-group span {
  font-weight: bold;
}
.propertygrid .datagrid-view1 .datagrid-body td {
  border-color: #dddddd;
}
.propertygrid .datagrid-view1 .datagrid-group {
  border-color: #E0ECFF;
}
.propertygrid .datagrid-view2 .datagrid-group {
  border-color: #dddddd;
}
.propertygrid .datagrid-group,
.propertygrid .datagrid-view1 .datagrid-body,
.propertygrid .datagrid-view1 .datagrid-row-over,
.propertygrid .datagrid-view1 .datagrid-row-selected {
  background: #E0ECFF;
}
.datalist .datagrid-header {
  border-width: 0;
}
.datalist .datagrid-group,
.m-list .m-list-group {
  height: 25px;
  line-height: 25px;
  font-weight: bold;
  overflow: hidden;
  background-color: #efefef;
  border-style: solid;
  border-width: 0 0 1px 0;
  border-color: #ccc;
}
.datalist .datagrid-group-expander {
  display: none;
}
.datalist .datagrid-group-title {
  padding: 0 4px;
}
.datalist .datagrid-btable {
  width: 100%;
  table-layout: fixed;
}
.datalist .datagrid-row td {
  border-style: solid;
  border-left-color: transparent;
  border-right-color: transparent;
  border-bottom-width: 0;
}
.datalist-lines .datagrid-row td {
  border-bottom-width: 1px;
}
.datalist .datagrid-cell,
.m-list li {
  width: auto;
  height: auto;
  padding: 2px 4px;
  line-height: 18px;
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.datalist-link,
.m-list li>a {
  display: block;
  position: relative;
  cursor: pointer;
  color: #000000;
  text-decoration: none;
  overflow: hidden;
  margin: -2px -4px;
  padding: 2px 4px;
  padding-right: 16px;
  line-height: 18px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.datalist-link::after,
.m-list li>a::after {
  position: absolute;
  display: block;
  width: 8px;
  height: 8px;
  content: '';
  right: 6px;
  top: 50%;
  margin-top: -4px;
  border-style: solid;
  border-width: 1px 1px 0 0;
  -ms-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.m-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.m-list li {
  border-style: solid;
  border-width: 0 0 1px 0;
  border-color: #ccc;
}
.m-list li>a:hover {
  background: #eaf2ff;
  color: #000000;
}
.m-list .m-list-group {
  padding: 0 4px;
}
.pagination {
  zoom: 1;
}
.pagination table {
  float: left;
  height: 30px;
}
.pagination td {
  border: 0;
}
.pagination-btn-separator {
  float: left;
  height: 24px;
  border-left: 1px solid #ccc;
  border-right: 1px solid #fff;
  margin: 3px 1px;
}
.pagination .pagination-num {
  border-width: 1px;
  border-style: solid;
  margin: 0 2px;
  padding: 2px;
  width: 2em;
  height: auto;
}
.pagination-page-list {
  margin: 0px 6px;
  padding: 1px 2px;
  width: auto;
  height: auto;
  border-width: 1px;
  border-style: solid;
}
.pagination-info {
  float: right;
  margin: 0 6px 0 0;
  padding: 0;
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
.pagination span {
  font-size: 12px;
}
.pagination-link .l-btn-text {
  width: 24px;
  text-align: center;
  margin: 0;
}
.pagination-first {
  background: url('images/pagination_icons.png') no-repeat 0 center;
}
.pagination-prev {
  background: url('images/pagination_icons.png') no-repeat -16px center;
}
.pagination-next {
  background: url('images/pagination_icons.png') no-repeat -32px center;
}
.pagination-last {
  background: url('images/pagination_icons.png') no-repeat -48px center;
}
.pagination-load {
  background: url('images/pagination_icons.png') no-repeat -64px center;
}
.pagination-loading {
  background: url('images/loading.gif') no-repeat center center;
}
.pagination-page-list,
.pagination .pagination-num {
  border-color: #95B8E7;
}
.calendar {
  border-width: 1px;
  border-style: solid;
  padding: 1px;
  overflow: hidden;
}
.calendar table {
  table-layout: fixed;
  border-collapse: separate;
  font-size: 12px;
  width: 100%;
  height: 100%;
}
.calendar table td,
.calendar table th {
  font-size: 12px;
}
.calendar-noborder {
  border: 0;
}
.calendar-header {
  position: relative;
  height: 22px;
}
.calendar-title {
  text-align: center;
  height: 22px;
}
.calendar-title span {
  position: relative;
  display: inline-block;
  top: 2px;
  padding: 0 3px;
  height: 18px;
  line-height: 18px;
  font-size: 12px;
  cursor: pointer;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
.calendar-prevmonth,
.calendar-nextmonth,
.calendar-prevyear,
.calendar-nextyear {
  position: absolute;
  top: 50%;
  margin-top: -7px;
  width: 14px;
  height: 14px;
  cursor: pointer;
  font-size: 1px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
.calendar-prevmonth {
  left: 20px;
  background: url('images/calendar_arrows.png') no-repeat -18px -2px;
}
.calendar-nextmonth {
  right: 20px;
  background: url('images/calendar_arrows.png') no-repeat -34px -2px;
}
.calendar-prevyear {
  left: 3px;
  background: url('images/calendar_arrows.png') no-repeat -1px -2px;
}
.calendar-nextyear {
  right: 3px;
  background: url('images/calendar_arrows.png') no-repeat -49px -2px;
}
.calendar-body {
  position: relative;
}
.calendar-body th,
.calendar-body td {
  text-align: center;
}
.calendar-day {
  border: 0;
  padding: 1px;
  cursor: pointer;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
.calendar-other-month {
  opacity: 0.3;
  filter: alpha(opacity=30);
}
.calendar-disabled {
  opacity: 0.6;
  filter: alpha(opacity=60);
  cursor: default;
}
.calendar-menu {
  position: absolute;
  top: 0;
  left: 0;
  width: 180px;
  height: 150px;
  padding: 5px;
  font-size: 12px;
  display: none;
  overflow: hidden;
}
.calendar-menu-year-inner {
  text-align: center;
  padding-bottom: 5px;
}
.calendar-menu-year {
  width: 50px;
  text-align: center;
  border-width: 1px;
  border-style: solid;
  outline-style: none;
  resize: none;
  margin: 0;
  padding: 2px;
  font-weight: bold;
  font-size: 12px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
.calendar-menu-prev,
.calendar-menu-next {
  display: inline-block;
  width: 21px;
  height: 21px;
  vertical-align: top;
  cursor: pointer;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
.calendar-menu-prev {
  margin-right: 10px;
  background: url('images/calendar_arrows.png') no-repeat 2px 2px;
}
.calendar-menu-next {
  margin-left: 10px;
  background: url('images/calendar_arrows.png') no-repeat -45px 2px;
}
.calendar-menu-month {
  text-align: center;
  cursor: pointer;
  font-weight: bold;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
.calendar-body th,
.calendar-menu-month {
  color: #4d4d4d;
}
.calendar-day {
  color: #000000;
}
.calendar-sunday {
  color: #CC2222;
}
.calendar-saturday {
  color: #00ee00;
}
.calendar-today {
  color: #0000ff;
}
.calendar-menu-year {
  border-color: #95B8E7;
}
.calendar {
  border-color: #95B8E7;
}
.calendar-header {
  background: #E0ECFF;
}
.calendar-body,
.calendar-menu {
  background: #ffffff;
}
.calendar-body th {
  background: #F4F4F4;
  padding: 2px 0;
}
.calendar-hover,
.calendar-nav-hover,
.calendar-menu-hover {
  background-color: #eaf2ff;
  color: #000000;
}
.calendar-hover {
  border: 1px solid #b7d2ff;
  padding: 0;
}
.calendar-selected {
  background-color: #ffe48d;
  color: #000000;
  border: 1px solid #ffab3f;
  padding: 0;
}
.datebox-calendar-inner {
  height: 180px;
}
.datebox-button {
  padding: 0 5px;
  text-align: center;
}
.datebox-button a {
  line-height: 22px;
  font-size: 12px;
  font-weight: bold;
  text-decoration: none;
  opacity: 0.6;
  filter: alpha(opacity=60);
}
.datebox-button a:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
}
.datebox-current,
.datebox-close {
  float: left;
}
.datebox-close {
  float: right;
}
.datebox .combo-arrow {
  background-image: url(../images/calendar.svg);
  background-position: center center;
  background-size: 80%;
}
.datebox-button {
  background-color: #F4F4F4;
}
.datebox-button a {
  color: #444;
}
.spinner-arrow {
  background-color: #E0ECFF;
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin: 0;
  padding: 0;
  opacity: 1.0;
  filter: alpha(opacity=100);
  width: 18px;
}
.spinner-arrow-up,
.spinner-arrow-down {
  opacity: 0.6;
  filter: alpha(opacity=60);
  display: block;
  font-size: 1px;
  width: 18px;
  height: 10px;
  width: 100%;
  height: 50%;
  color: #444;
  outline-style: none;
}
.spinner-arrow-hover {
  background-color: #eaf2ff;
  opacity: 1.0;
  filter: alpha(opacity=100);
}
.spinner-arrow-up:hover,
.spinner-arrow-down:hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
  background-color: #eaf2ff;
}
.textbox-icon-disabled .spinner-arrow-up:hover,
.textbox-icon-disabled .spinner-arrow-down:hover {
  opacity: 0.6;
  filter: alpha(opacity=60);
  background-color: #E0ECFF;
  cursor: default;
}
.spinner .textbox-icon-disabled {
  opacity: 0.6;
  filter: alpha(opacity=60);
}
/*
.spinner-arrow-up {
  background: url('images/spinner_arrows.png') no-repeat 1px center;
}
.spinner-arrow-down {
  background: url('images/spinner_arrows.png') no-repeat -15px center;
}
.spinner-button-up {
  background: url('images/spinner_arrows.png') no-repeat -32px center;
}
.spinner-button-down {
  background: url('images/spinner_arrows.png') no-repeat -48px center;
}

*/
.progressbar {
  border-width: 1px;
  border-style: solid;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  overflow: hidden;
  position: relative;
}
.progressbar-text {
  text-align: center;
  position: absolute;
}
.progressbar-value {
  position: relative;
  overflow: hidden;
  width: 0;
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
}
.progressbar {
  border-color: #95B8E7;
}
.progressbar-text {
  color: #000000;
  font-size: 12px;
}
.progressbar-value .progressbar-text {
  background-color: #ffe48d;
  color: #000000;
}
.searchbox-button {
  width: 18px;
  height: 20px;
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  cursor: pointer;
  opacity: 0.6;
  filter: alpha(opacity=60);
}
.searchbox-button-hover {
  opacity: 1.0;
  filter: alpha(opacity=100);
}
.searchbox .l-btn-plain {
  border: 0;
  padding: 0;
  vertical-align: top;
  opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-border-radius: 0 0 0 0;
  -webkit-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
}
.searchbox .l-btn-plain:hover {
  border: 0;
  padding: 0;
  opacity: 1.0;
  filter: alpha(opacity=100);
  -moz-border-radius: 0 0 0 0;
  -webkit-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
}
.searchbox a.m-btn-plain-active {
  -moz-border-radius: 0 0 0 0;
  -webkit-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
}
.searchbox .m-btn-active {
  border-width: 0 1px 0 0;
  -moz-border-radius: 0 0 0 0;
  -webkit-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
}
.searchbox .textbox-button-right {
  border-width: 0 0 0 1px;
}
.searchbox .textbox-button-left {
  border-width: 0 1px 0 0;
}
.searchbox-button {
  background: url('images/searchbox_button.png') no-repeat center center;
}
.searchbox .l-btn-plain {
  background: #E0ECFF;
}
.searchbox .l-btn-plain-disabled,
.searchbox .l-btn-plain-disabled:hover {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.slider-disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.slider-h {
  height: 22px;
}
.slider-v {
  width: 22px;
}
.slider-inner {
  position: relative;
  height: 6px;
  top: 7px;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
}
.slider-handle {
  position: absolute;
  display: block;
  outline: none;
  width: 20px;
  height: 20px;
  top: 50%;
  margin-top: -10px;
  margin-left: -10px;
}
.slider-tip {
  position: absolute;
  display: inline-block;
  line-height: 12px;
  font-size: 12px;
  white-space: nowrap;
  top: -22px;
}
.slider-rule {
  position: relative;
  top: 15px;
}
.slider-rule span {
  position: absolute;
  display: inline-block;
  font-size: 0;
  height: 5px;
  border-width: 0 0 0 1px;
  border-style: solid;
}
.slider-rulelabel {
  position: relative;
  top: 20px;
}
.slider-rulelabel span {
  position: absolute;
  display: inline-block;
  font-size: 12px;
}
.slider-v .slider-inner {
  width: 6px;
  left: 7px;
  top: 0;
  float: left;
}
.slider-v .slider-handle {
  left: 50%;
  margin-top: -10px;
}
.slider-v .slider-tip {
  left: -10px;
  margin-top: -6px;
}
.slider-v .slider-rule {
  float: left;
  top: 0;
  left: 16px;
}
.slider-v .slider-rule span {
  width: 5px;
  height: 'auto';
  border-left: 0;
  border-width: 1px 0 0 0;
  border-style: solid;
}
.slider-v .slider-rulelabel {
  float: left;
  top: 0;
  left: 23px;
}
.slider-handle {
  background: url('images/slider_handle.png') no-repeat;
}
.slider-inner {
  border-color: #95B8E7;
  background: #E0ECFF;
}
.slider-rule span {
  border-color: #95B8E7;
}
.slider-rulelabel span {
  color: #000000;
}
.menu {
  position: absolute;
  margin: 0;
  padding: 2px;
  border-width: 1px;
  border-style: solid;
  overflow: hidden;
}
.menu-inline {
  position: relative;
}
.menu-item {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  cursor: pointer;
  border-width: 1px;
  border-style: solid;
}
.menu-text {
  height: 20px;
  line-height: 20px;
  float: left;
  padding-left: 28px;
}
.menu-icon {
  position: absolute;
  width: 16px;
  height: 16px;
  left: 2px;
  top: 50%;
  margin-top: -8px;
}
.menu-rightarrow {
  position: absolute;
  width: 16px;
  height: 16px;
  right: 0;
  top: 50%;
  margin-top: -8px;
}
.menu-line {
  position: absolute;
  left: 26px;
  top: 0;
  height: 2000px;
  font-size: 1px;
}
.menu-sep {
  margin: 3px 0px 3px 25px;
  font-size: 1px;
}
.menu-noline .menu-line {
  display: none;
}
.menu-noline .menu-sep {
  margin-left: 0;
  margin-right: 0;
}
.menu-active {
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
.menu-item-disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
  cursor: default;
}
.menu-text,
.menu-text span {
  font-size: 12px;
}
.menu-shadow {
  position: absolute;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
  background: #ccc;
  -moz-box-shadow: 2px 2px 3px #cccccc;
  -webkit-box-shadow: 2px 2px 3px #cccccc;
  box-shadow: 2px 2px 3px #cccccc;
  filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2,MakeShadow=false,ShadowOpacity=0.2);
}
.menu-rightarrow {
  background: url('images/menu_arrows.png') no-repeat -32px center;
}
.menu-line {
  border-left: 1px solid #ccc;
  border-right: 1px solid #fff;
}
.menu-sep {
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #fff;
}
.menu {
  background-color: #fafafa;
  border-color: #ddd;
  color: #444;
}
.menu-content {
  background: #ffffff;
}
.menu-item {
  border-color: transparent;
  _border-color: #fafafa;
}
.menu-active {
  border-color: #b7d2ff;
  color: #000000;
  background: #eaf2ff;
}
.menu-active-disabled {
  border-color: transparent;
  background: transparent;
  color: #444;
}
.m-btn-downarrow,
.s-btn-downarrow {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 16px;
  font-size: 1px;
  right: 0;
  top: 50%;
  margin-top: -8px;
}
.m-btn-active,
.s-btn-active {
  background: #eaf2ff;
  color: #000000;
  border: 1px solid #b7d2ff;
  filter: none;
}
.m-btn-plain-active,
.s-btn-plain-active {
  background: transparent;
  padding: 0;
  border-width: 1px;
  border-style: solid;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
.m-btn .l-btn-left .l-btn-text {
  margin-right: 20px;
}
.m-btn .l-btn-icon-right .l-btn-text {
  margin-right: 40px;
}
.m-btn .l-btn-icon-right .l-btn-icon {
  right: 20px;
}
.m-btn .l-btn-icon-top .l-btn-text {
  margin-right: 4px;
  margin-bottom: 14px;
}
.m-btn .l-btn-icon-bottom .l-btn-text {
  margin-right: 4px;
  margin-bottom: 34px;
}
.m-btn .l-btn-icon-bottom .l-btn-icon {
  top: auto;
  bottom: 20px;
}
.m-btn .l-btn-icon-top .m-btn-downarrow,
.m-btn .l-btn-icon-bottom .m-btn-downarrow {
  top: auto;
  bottom: 0px;
  left: 50%;
  margin-left: -8px;
}
.m-btn-line {
  display: inline-block;
  position: absolute;
  font-size: 1px;
  display: none;
}
.m-btn .l-btn-left .m-btn-line {
  right: 0;
  width: 16px;
  height: 500px;
  border-style: solid;
  border-color: #aac5e7;
  border-width: 0 0 0 1px;
}
.m-btn .l-btn-icon-top .m-btn-line,
.m-btn .l-btn-icon-bottom .m-btn-line {
  left: 0;
  bottom: 0;
  width: 500px;
  height: 16px;
  border-width: 1px 0 0 0;
}
.m-btn-large .l-btn-icon-right .l-btn-text {
  margin-right: 56px;
}
.m-btn-large .l-btn-icon-bottom .l-btn-text {
  margin-bottom: 50px;
}
.m-btn-downarrow,
.s-btn-downarrow {
  background: url('images/menu_arrows.png') no-repeat 0 center;
}
.m-btn-plain-active,
.s-btn-plain-active {
  border-color: #b7d2ff;
  background-color: #eaf2ff;
  color: #000000;
}
.s-btn:hover .m-btn-line,
.s-btn-active .m-btn-line,
.s-btn-plain-active .m-btn-line {
  display: inline-block;
}
.l-btn:hover .s-btn-downarrow,
.s-btn-active .s-btn-downarrow,
.s-btn-plain-active .s-btn-downarrow {
  /*border-style: solid;
  border-color: #aac5e7;
  border-width: 0 0 0 1px;*/
}
.messager-body {
  padding: 10px 10px 30px 10px;
  overflow: auto;
  /* KG added padding-top */
  padding-top: 4em;
  text-align:center;
}
.messager-button {
  text-align: center;
  padding: 5px;
}
.messager-button .l-btn {
  width: 70px;
}
.messager-icon {
  float: left;
  /* changed from 32px to 1em 
  width: 1em;
  height: 1em;  */
  margin: 0 10px 10px 0;
}
.messager-error {
  background: url('../images/error-icon.svg') no-repeat scroll 0 0;
  background-size: 100%;
}
.messager-info {
  background: url('images/messager_icons.png') no-repeat scroll 0 0;
}
.messager-question {
  background: url('images/messager_icons.png') no-repeat scroll -32px 0;
}
.messager-warning {
  background: url('images/messager_icons.png') no-repeat scroll -96px 0;
}
.messager-progress {
  padding: 10px;
}
.messager-p-msg {
  margin-bottom: 5px;
}
.messager-body .messager-input {
  width: 100%;
  padding: 4px 0;
  outline-style: none;
  border: 1px solid #95B8E7;
}
.window-thinborder .messager-button {
  padding-bottom: 8px;
}

/* KG change messager title */
.messager-window .panel-title {
	
	color:#565656;
	font-size: 1em;
	font-weight: 400;
}


.tree {
  margin: 0;
  padding: 0;
  list-style-type: none;
  overflow: hidden;
}
.tree li {
  white-space: nowrap;
}
.tree li ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
.tree-node {
  height: 30px;
  white-space: nowrap;
  cursor: pointer;
  margin-left: 10px;
}
.tree-hit {
  cursor: pointer;
}
.tree-expanded,
.tree-collapsed,
.tree-folder,
.tree-file,
.tree-checkbox,
.tree-indent {
  display: inline-block;
  width: 16px;
  height: 25px;
  vertical-align: top;
  overflow: hidden;
  margin-bottom: 5px;
  margin-right: 5px
}

/* Tree icons  */

.tree-expanded {
  background: url('../images/arrow-right-dark.svg') no-repeat;
  background-size: 70%;
  /* -18px 0px  */
}
.tree-expanded-hover {
  background: url('../images/arrow-right-light.svg') no-repeat;
  background-size: 70%;
  /*  -50px 0px */
}
.tree-collapsed {
  background: url('../images/arrow-center-right-blue.svg') no-repeat;
  background-size: 70%;
  /*  0px 0px  */
}

.tree-lines .tree-expanded,
.tree-lines .tree-root-first .tree-expanded {
  background: url('images/tree_icons.png') no-repeat -144px 0;
}
.tree-lines .tree-collapsed,
.tree-lines .tree-root-first .tree-collapsed {
  background: url('images/tree_icons.png') no-repeat -128px 0;
}
.tree-lines .tree-node-last .tree-expanded,
.tree-lines .tree-root-one .tree-expanded {
  background: url('images/tree_icons.png') no-repeat -80px 0;
}
.tree-lines .tree-node-last .tree-collapsed,
.tree-lines .tree-root-one .tree-collapsed {
  background: url('images/tree_icons.png') no-repeat -64px 0;
}
.tree-line {
  background: url('images/tree_icons.png') no-repeat -176px 0;
}
.tree-join {
  background: url('images/tree_icons.png') no-repeat -192px 0;
}
.tree-joinbottom {
  background: url('images/tree_icons.png') no-repeat -160px 0;
}
.tree-folder {
  background: url('../images/folder-closed.svg') no-repeat;
  /* -208px 0 */
}
.tree-folder-open {
	
  background: url('../images/folder-open.svg') no-repeat;
  
  /*   -224px 0
  display: block;
  
  width: 10px;
  height: 10px;
  background: url(images/add.svg);
  background-size: 10px 10px;
  margin:0;
  margin-left: -5px;
  */
}
.tree-folder-open-hover {
	background: url('../images/folder-open-pink.svg') no-repeat;
	
}

.tree-file {
  background: url('../images/single-doc.svg') no-repeat;
  /*  -240px 0  */
}
.tree-loading {
  background: url('images/load-pink.svg') no-repeat center center;
}
.tree-checkbox0 {
  /*background: url('images/tree_icons.png') no-repeat -208px -18px;*/
  background: url('../images/checkbox-unchecked.png') no-repeat center center;
  background-size:90%;
  margin-top: -1px;
}
.tree-checkbox1 {
  /*background: url('images/tree_icons.png') no-repeat -224px -18px;*/
  background: url('../images/checkbox-checked.png') no-repeat center center;
  background-size:90%;
  margin-top: -1px;
}
.tree-checkbox2 {
  background: url('../images/checkbox-checked-some.svg') no-repeat;
}
.tree-title {
  font-size: 12px;
  display: inline-block;
  text-decoration: none;
  vertical-align: top;
  white-space: nowrap;
  padding: 0 2px;
  height: 18px;
  line-height: 25px;
  margin:0;
  /*overflow: scroll;*/
  
}
.tree-node-proxy {
  font-size: 12px;
  line-height: 20px;
  padding: 0 2px 0 20px;
  border-width: 1px;
  border-style: solid;
  z-index: 9900000;
}
.tree-dnd-icon {
  display: inline-block;
  position: absolute;
  width: 16px;
  height: 18px;
  left: 2px;
  top: 50%;
  margin-top: -9px;
}
.tree-dnd-yes {
  background: url('images/tree_icons.png') no-repeat -256px 0;
}
.tree-dnd-no {
  background: url('images/tree_icons.png') no-repeat -256px -18px;
}
.tree-node-top {
  border-top: 1px dotted red;
}
.tree-node-bottom {
  border-bottom: 1px dotted red;
}
.tree-node-append .tree-title {
  border: 1px dotted red;
}
.tree-editor {
  border: 1px solid #95B8E7;
  font-size: 12px;
  line-height: 16px;
  padding: 0 4px;
  margin: 0;
  width: 80px;
  outline-style: none;
  vertical-align: top;
  position: absolute;
  top: 0;
}
.tree-node-proxy {
  background-color: #ffffff;
  color: #000000;
  border-color: #95B8E7;
}
.tree-node-hover {
  background: #eaf2ff;
  color: #000000;
}
.tree-node-selected {
/*  background: #FFF2C5;
old yellow color */
/* NEW light blue */
  background: #DBEAFF;
  
  color: #331D65;
}
.tree-node-hidden {
  display: none;
}
.validatebox-invalid {
  border-color: #ffa8a8;
  background-color: #fff3f3;
  color: #000;
}

/* top bar with hidden upload  */
.bar-element-sizes {
	margin: 0; 
	padding: 0; 
	padding-top: 0.3em; 
	padding-bottom: 0.3em;
}

.bar-hidden-area {
	visibility: hidden;
	height: 0;
	width: 0;
	margin:0;
	padding:0;
}


/*
.tooltip {
  position: absolute;
  display: none;
  z-index: 9900000;
  outline: none;
  opacity: 1;
  filter: alpha(opacity=100);
  padding: 5px;
  border-width: 1px;
  border-style: solid;
  border-radius: 5px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
.tooltip-content {
  font-size: 12px;
}
.tooltip-arrow-outer,
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  font-size: 0;
  border-style: solid;
  border-width: 6px;
  border-color: transparent;
  _border-color: tomato;
  _filter: chroma(color=tomato);
}
.tooltip-arrow {
  display: none \9;
}
.tooltip-right .tooltip-arrow-outer {
  left: 0;
  top: 50%;
  margin: -6px 0 0 -13px;
}
.tooltip-right .tooltip-arrow {
  left: 0;
  top: 50%;
  margin: -6px 0 0 -12px;
}
.tooltip-left .tooltip-arrow-outer {
  right: 0;
  top: 50%;
  margin: -6px -13px 0 0;
}
.tooltip-left .tooltip-arrow {
  right: 0;
  top: 50%;
  margin: -6px -12px 0 0;
}
.tooltip-top .tooltip-arrow-outer {
  bottom: 0;
  left: 50%;
  margin: 0 0 -13px -6px;
}
.tooltip-top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin: 0 0 -12px -6px;
}
.tooltip-bottom .tooltip-arrow-outer {
  top: 0;
  left: 50%;
  margin: -13px 0 0 -6px;
}
.tooltip-bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin: -12px 0 0 -6px;
}
.tooltip {
    display: inline-block;
}
.tooltip-right .tooltip-arrow-outer {
  border-right-color: #95B8E7;
}
.tooltip-right .tooltip-arrow {
  border-right-color: #ffffff;
}
.tooltip-left .tooltip-arrow-outer {
  border-left-color: #95B8E7;
}
.tooltip-left .tooltip-arrow {
  border-left-color: #ffffff;
}
.tooltip-top .tooltip-arrow-outer {
  border-top-color: #95B8E7;
}
.tooltip-top .tooltip-arrow {
  border-top-color: #ffffff;
}
.tooltip-bottom .tooltip-arrow-outer {
  border-bottom-color: #95B8E7;
}
.tooltip-bottom .tooltip-arrow {
  border-bottom-color: #ffffff;
}

*/


.switchbutton {
  text-decoration: none;
  display: inline-block;
  overflow: hidden;
  vertical-align: middle;
  margin: 0;
  padding: 0;
  cursor: pointer;
  background: #bbb;
  border: 1px solid #bbb;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
.switchbutton-inner {
  display: inline-block;
  overflow: hidden;
  position: relative;
  top: -1px;
  left: -1px;
}
.switchbutton-on,
.switchbutton-off,
.switchbutton-handle {
  display: inline-block;
  text-align: center;
  height: 100%;
  float: left;
  font-size: 12px;
  -moz-border-radius: 5px 5px 5px 5px;
  -webkit-border-radius: 5px 5px 5px 5px;
  border-radius: 5px 5px 5px 5px;
}
.switchbutton-on {
  background: #FFF2CC;
  color: #000;
  font-size: 1em;
  font-weight:500;
}
.switchbutton-off {
  background-color: #5683FF;
  color: #ffffff;
  font-size: 1em;
  font-weight:500;
}
.switchbutton-on,
.switchbutton-reversed .switchbutton-off {
  -moz-border-radius: 5px 0 0 5px;
  -webkit-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
}
.switchbutton-off,
.switchbutton-reversed .switchbutton-on {
  -moz-border-radius: 0 5px 5px 0;
  -webkit-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
}
.switchbutton-handle {
  position: absolute;
  top: 0;
  left: 50%;
  background-color: #ffffff;
  color: #000000;
  border: 1px solid #bbb;
  -moz-box-shadow: 0 0 3px 0 #bbb;
  -webkit-box-shadow: 0 0 3px 0 #bbb;
  box-shadow: 0 0 3px 0 #bbb;
}
.switchbutton-value {
  position: absolute;
  top: 0;
  left: -5000px;
}
.switchbutton-disabled {
  opacity: 0.5;
  filter: alpha(opacity=50);
}
.switchbutton-disabled,
.switchbutton-readonly {
  cursor: default;
}

/* Additional styles for working with large images */
.build-business-architecture{
	width:90%;
	background: url('images/roadmap1-test.svg') no-repeat;
	height: 1000px;
}

.pi-home-tile {
	background-color: #f2f2f2;
	text-align:center;
	height:auto;
}


.pageTitle {
	
	border:none;
	border-bottom: 1px solid /*border color*/ /*border color*/ #dbdfe8;
	background:#fff;
	font-size: 2em;
	text-align:center;
	line-height:2em;
	color:#6B3B90;
	font-weight: 800;
}

.welcome-message {
	width:100%;
	/*border: 1px solid #565656;
	background: #FFF2C5;*/
	font-size: 1em;
	line-height:2em;
	/*color:#6B3B90; */
	margin:0;
	padding:0;
	padding-left:1em;
	padding-right:1em;
	font-weight: 300;
	
	float: left;
    margin-bottom: 0.5em;
    
    
    
    
}

.artifacts-legend-box {
	min-height:42px;
}

.dashboard-tile {
	height:5em;
	
}

.dashboard-efficiency {
	height: 70%;
	background-image: url(../images/business-layer3.svg);
	background-repeat: no-repeat;
	
}
.dashboard-tile-head {
	
	height:30%;
	font-size: 1em;
	line-hight:1em;
	text-align: center;
	overflow: hidden;
}


/* Extra small devices (portrait phones, less than 576px) */
@media only screen and (max-width: 383.98px) {
	
	.pageTitle {
	
		font-size: 1em;
		line-height:2em;
	}
	
	.welcome-message {
		font-size: 0.7em;
		line-height:1.2em;
	}
	
	.dashboard-tile {
		height:4em;
	}
	
	
}

@media only screen and (min-width: 383.99px) and (max-width: 575.98px) {
	
	.pageTitle {
	
		font-size: 1.2em;
		line-height:2em;
	}
	
	.welcome-message {
		font-size: 0.9em;
		line-height:1.2em;
	}
	
	.headerTextHeavy {
		font-size: 1em;
		line-height:1.5em;
	}
	
	.dashboard-tile {
		height:5em;
	}
	
}

/* Small devices (landscape phones, less than 768px) */
@media only screen and (min-width: 575.99px) and (max-width: 767.98px) {
	
	.pageTitle {
	
		font-size: 1.3em;
		line-height:1.9em;
	}
	
	.welcome-message {
		font-size: 1em;
		line-height:1.5em;
	}
	
	.headerTextHeavy {
		font-size: 1em;
		line-height:1.5em;
	}
	
	.dashboard-tile {
		height:7em;
	}
	
}

/* Medium devices (tablets, less than 992px) */
@media only screen and (min-width: 767.99px) and (max-width: 991.98px) {
	
	.pageTitle {
	
		font-size: 1.5em;
		line-height:2em;
	}
	.welcome-message {
		font-size: 1.1em;
		line-height:1.8em;
	}
	
	.headerTextHeavy {
		font-size: 1.2em;
		line-height:1.5em;
	}
	
	.pi-home-tile {
		height:14rem;
	}
	
	
	.dashboard-tile {
		height:7em;
	}
}

/* Large devices (desktops, less than 1200px) */
@media only screen and (min-width: 991.99px) and (max-width: 1199.98px) {
	
	.pageTitle {
	
		font-size: 1.5em;
		line-height:2.2em;
	}
	
	.welcome-message {
		font-size: 1.1em;
		line-height:1.9em;
	}
	
	.headerTextHeavy {
		font-size: 1.2em;
		line-height:1.5em;
	}
	
	.pi-home-tile {
		height:12rem;
	}
	.dashboard-tile {
		height:7em;
	}
}

.artifacts-legend-text {
		font-size: 1em;
		
}

@media only screen and (min-width: 1199.99px) {
	
	.pageTitle {
	
		font-size: 2em;
		line-height:3em;
	}
	
	.welcome-message {
		font-size: 1.4em;
		line-height:1.9em;
	}
	
	.artifacts-legend-text {
		font-size: 0.65em;
		
	}
	
	.headerTextHeavy {
		font-size: 1em;
		line-height:2em;
	}
	
	.pi-home-tile {
		height:10rem;
	}
	.dashboard-tile {
		height:7em;
	}
}

@media only screen and (min-width: 1300px) {
	.artifacts-legend-text {
		font-size: 0.7em;
		
	}
	
}
@media only screen and (min-width: 1400px) {
	.artifacts-legend-text {
		font-size: 0.8em;
		
	}
	
}
@media only screen and (min-width: 1500px) {
	.artifacts-legend-text {
		font-size: 0.85em;
		
	}
	
}
@media only screen and (min-width: 1600px) {
	.artifacts-legend-text {
		font-size: 0.9em;
		
	}
	
}
@media only screen and (min-width: 1700px) {
	.artifacts-legend-text {
		font-size: 1em;
		
	}
	
}



/* test inline svg - styles  */
.icon {
	display: inline-block;
	color: #444444;
  width: 1em;
	height: 1em;
	fill: currentColor;
}
.icon-home {
  /* Using currentColor above lets
  us use `color` for changing the color
  of our icons: */
  color: red;
  
  /* The width and height of the SVG
  was previously set to 1em.
  This allows us to use `font-size`
  to change the size of our icon: */
  font-size: 48px;
}

.dialog-button .l-btn {
    
    background: #3855A5;
    color: #fff;
    
}

.dialog-button .l-btn:hover {
    
    background: #5683FF;
    color: #fff;
    
}

.subtitle {
	width: 100%;
    color: #101A35;
    
    font-size: 1.6em;
    font-weight: 500;
    line-height: 1.1em;
    /* line-height: 3em;
    /* text-transform: uppercase; 
    
    margin-top: 20px;
    margin-bottom: 10px; 
    margin: .67em 0;
    */
    text-align: center;
    
    border: none;
}

.subtitle1 {
	
    color: #655596;
    font-size: 0.9em;
    font-weight: 600;
    line-height: 0.9em;
    text-transform: uppercase;
    text-align: center;
    border: none;
}

.subtitle-control-bar {
	
    color: #351F6A; 
    font-size: 0.9em;
    font-weight: 600;
    line-height: 0.9em;
    text-transform: uppercase;
    text-align: center;
    border: none;
}

.menu-header {
	height:18px;
}

.page-panel-header {
	height: 3em;
}
.panel-title {
	font-size: 0.7em;
    font-weight: 600;
    line-height: 1.1em;
    /*text-transform: uppercase; */
    text-align: center;
    border: none;
    /*
    padding-top:0.1em;
    height:2.5em; */
}

.message-title {
	width: 100%;
    color: #3C2378;
    font-size: 1em;
    font-weight: 500;
    line-height: 1.1em;
    text-transform: uppercase;
    margin:0;
    margin-top: 0.5em;
    margin-bottom: 0.1em;
    text-align: center;
    border: none;
}

/* Show and hide dependning on screen size */
.subtitle-small-screen {
	/* hide for screens larger or equal to 1200px (bootstrap large) */
	display: block;
}

.subtitle-large-screen {
	/* hide for screens smaller than  1200px (bootstrap large) */
	display: none;
}

.action-button-look {
    border-color: #25396e;
    color: #ffffff;
    font-size: 3em;
    font-weight: 900;
    text-transform: uppercase;
    max-height: 0.8em;
    margin: 0;
    padding: 0.3em;
    background-color: #25396e;
    background-repeat: no-repeat;
    height: 5em;
}

.action-button-look:hover {
	
	background-color: #4B74E0;
    color: #ffffff;
    
}

.header-button-look {
	border: 1px solid #3855A5;
    color: #25396e;
    font-size: 3em;
    font-weight: 600;
    text-transform: uppercase;
    max-height: 1em;
    margin: 0;
    padding: 0.3em;
    padding-top: 0;
    padding-bottom: 0.1em;
    /* padding-left: 1.2em; */
    background-color: #ffffff;
    background-repeat: no-repeat;
    vertical-align: top;
    height: 5em;
}

.header-button-look:hover {
	
	background-color: #4B74E0;
    color: #ffffff;
    
}

.header-button-large-screen {
	
	display: none;
	
	/* included in header-button-look
	border-color: #9420C2;
    color: #9420C2;
    
    font-size: 3em;
    font-weight: 800;
    text-transform: uppercase;
    
    max-height: 1.2em;
    
    margin: 0;
    padding: 0.5em;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 1.4em;
    
    background-color: #ffffff;
    background-repeat: no-repeat;
    */
}

.header-button-large-screen:hover {
	/* included in header-button-look
	background-color: #9420C2;
    color: #ffffff;
    */
}

.reportManage-button {
	border: 1px solid #3855A5;
    color: #25396e;
    font-size: 3em;
    font-weight: 600;
    text-transform: uppercase;
    max-height: 1em;
    margin: 0;
    padding: 0.6em;
    padding-left: 0.2em;
    padding-right: 0.2em;
    padding-bottom: 0.3em;
    background-color: #ffffff;
    background-repeat: no-repeat;
    vertical-align: top;
    height: 5em;
    width: max-content;
}

.reportManage-button:hover {
	background-color: #3855A5;
    color: #ffffff;
}

.metaModel-button {
	border-color: #25396e;
    color: #25396e;
    font-size: 3em;
    font-weight: 600;
    text-transform: uppercase;
    max-height: 1em;
    margin: 0.3em;
    padding: 0.3em;
    padding-top: 0.1em;
    padding-bottom: 0.1em;
    /* padding-left: 1.2em; */
    background-color: #ffffff;
    background-repeat: no-repeat;
    vertical-align: middle;
    height: 5em;
    width: 90%;
}

.metaModel-button:hover {
	
	background-color: #4B74E0;
    color: #ffffff;
    
}

.header-button-small-screen {
	
	display: inline-block;
	max-height: 2em;
	border-color: #4B74E0;
    font-size: 2em;
    color: #4B74E0;
    background-position-x: center;
    background-position-y: center;
    background-color: #ffffff;
    background-repeat: no-repeat;
    padding: 0.3em;
}

/* Button icons */
.header-filter-button {
	background-image: url(../images/filter-purple.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 20%;
    background-repeat: no-repeat;
	
	
}

.header-filter-button:hover {
	background-image: url(../images/filter-white.svg);	
	background-position-x: 1rem;
    background-position-y: center;
    background-size: 25%;
    background-repeat: no-repeat;
}

.header-filter-button-no-text {
	background-image: url(../images/filter.svg);
    background-size: 35%;
}

.header-filter-button-no-text:hover {
	background-image: url(../images/filter-white.svg);	
}

.header-selectBusinessSolution-button {
	background-image: url(../images/business-solution.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 12%;
    background-repeat: no-repeat;
	
	
}

.header-selectBusinessSolution-button:hover {
	background-image: url(../images/business-solution-white.svg);	
}

.header-selectBusinessSolution-button-no-text {
	background-image: url(../images/business-solution.svg);
    background-size: 35%;
}

.header-selectBusinessSolution-button-no-text:hover {
	background-image: url(../images/business-solution-white.svg);	
}

.header-setCriteria-button {
	background:url('../images/criteria.svg') no-repeat center center;
	background-size: 80%;
	
    background-position-x: 1rem;
    background-position-y: center;
    background-repeat: no-repeat;
	
	
}

.header-setCriteria-button:hover {
	background:url('../images/criteria-white.svg') no-repeat center center;
}

.header-setCriteria-button-no-text {
	background:url('../images/criteria.svg') no-repeat center center;
	background-size: 80%;
}

.header-setCriteria-button-no-text:hover {
	background:url('../images/criteria-white.svg') no-repeat center center;
}

.header-export-button {
	background-image: url(../images/export-purple.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
    float: right;
	
}

.header-export-button:hover {
	background-image: url(../images/export-white.svg);
}

.header-export-button-no-text {
	background-image: url(../images/export-purple.svg);
    background-size: 50%;
    float: right;
	
}

.header-export-button-no-text:hover {
	background-image: url(../images/export-white.svg);
}

/* Control Bar that is included on top of a heat map */
.control-bar {
	background-color: #FFF2C5;
	color: #351F6A;
	
}
.pb-control-bar-txt-left {
	font-size: 0.9em; 
	margin-right: 0.5em; 
	float: right; 
	font-style: italic;
	padding-top: 0.5em;
}
.pb-control-bar-txt-right {
	font-size: 0.7em; 
	margin-left: 0.5em; 
	float: left; 
	font-style: italic;
	padding-top: 0.5em;
}

.pb-control-bar {
	height: 7.5em;
	margin-top: 2.2em;
}

@media (min-width: 1000px) {
	.pb-control-bar {
		height: 4.5em;
	}
	.pb-control-bar-txt-left {
		font-size: 1em; 
		margin-right: 0.8em; 
	}
	.pb-control-bar-txt-right {
		font-size: 0.8em; 
		margin-left: 0.8em; 
	}
}

@media (min-width: 1440px) {
	.pb-control-bar {
		height: 4em;
	}
	.pb-control-bar-txt-left {
		font-size: 1.2em; 
		margin-right: 1em; 
	}
	.pb-control-bar-txt-right {
		font-size: 1.2em; 
		margin-left: 0.9em; 
	}
}

/* checkbox color cannot be changed. Checkboxes used throught are purple.
Control bar section has to be white if there are check boxes placed there */

.control-bar-white {
	background-color: #ffffff;
    color: #676767;
    padding: 1.2em;
}

.header-start-button {
	background-image: url(../images/start-purple.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 20%;
    background-repeat: no-repeat;
    
    padding-left: 3em;
    
	
	
}

.header-start-button:hover {
	background-image: url(../images/start-white.svg);	
	background-position-x: 1rem;
    background-position-y: center;
    background-size: 25%;
    background-repeat: no-repeat;
    
    padding-left: 3em;
    
}

.header-save-button {
	background-image: url(../images/save-purple.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 32%;
    background-repeat: no-repeat;
    
    padding-left: 3em;
    
	
}

.header-save-button:hover {
	background-image: url(../images/save-white.svg);	
	background-position-x: 1rem;
    background-position-y: center;
    background-size: 32%;
    background-repeat: no-repeat;
    
    padding-left: 3em;
    
}

.header-cancel-button {
	background-image: url(../images/x-purple.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
    
    padding-left: 3em;
    
	
}

.header-cancel-button:hover {
	background-image: url(../images/x-white.svg);	
	background-position-x: 1rem;
    background-position-y: center;
    background-size: 18%;
    background-repeat: no-repeat;
    padding-left: 3em;
    
}

.header-edit-buttons {
	background-color: #fff;
	border-color: #c2c2c2;
	color: #25396e;
}
.header-edit-buttons:hover {
	background-color: #25396e;
	border-color: #ffffff;
	color: #ffffff;
}

.header-button-small-screen:hover {
	
	background-color: #4B74E0;
    color: #ffffff;
}

.color-code-by-combobox {
	width:100px;
}

/* Buttons included in embedded panel like in ManageReferenceModels - Your selected Model panel */
.panel-button {
    background-position-x: 1rem;
    background-position-y: center;
    background-repeat: no-repeat;
    float: left;
    
    height: 1em;
    width: 3em;
    margin-left: 0.2em;
    padding-left: 1.3em;
}

.panel-button-no-text {
    float: left;
    height: 1.2em;
    margin: 0.2em;
    padding:0;
}

.panel-export-button {
	background-image: url(../images/export-purple.svg);
    background-size: 25%;
}

.panel-export-button:hover {
	background-image: url(../images/export-white.svg);
}

.panel-export-button-no-text {
	background-image: url(../images/export-purple.svg);
    background-size: 50%;
}

.panel-export-button-no-text:hover {
	background-image: url(../images/export-white.svg);
}

.panel-upload-button {
	background-image: url(../images/upload-purple.svg);
    background-size: 25%;
}

.panel-upload-button:hover {
	background-image: url(../images/upload-white.svg);
}

.panel-upload-button-no-text {
	background-image: url(../images/upload-purple.svg);
    background-size: 50%;
}

.panel-upload-button-no-text:hover {
	background-image: url(../images/upload-white.svg);
}


/* create large text for main combo selection */ 
.main-text-large {
	font-size: 1.2em;
	color: #565656;
}

/* create text for file selector */
.file-select-text {
	font-size: 1.1em;
    color: #4B74E0;
    font-style: italic;
}

/* progressively change sizes, flip subtitles, show buttons with text for larger screens */

@media (min-width: 240px) {
	.page-panel-header {
		height: 4em;
    	padding-top: 0;
	}
	.panel-title {
    	font-size: 1em;
    	height: 1em;
	}
	.subtitle1 {
    	font-size: 1em;
	}
	.subtitle-control-bar {
		font-size: 1em;
	}
	.color-code-by-combobox {
		width:150px;
	}
	.main-text-large {
		font-size: 1em;
	}
}

@media (min-width: 480px) {
	.page-panel-header {
		height: 4.2em;
    	padding-top: 0;
	}
	.panel-title {
    	font-size: 1.4em;
    	/* padding-top: 0.5em; */
    	height: 1em;
	}
	.subtitle1 {
    	font-size: 1.1em;
	}
	.subtitle-control-bar {
		font-size: 1.1em;
	}
	.color-code-by-combobox {
		width:280px;
	}
	.main-text-large {
		font-size: 1.1em;
	}
	
}
@media (min-width: 860px) {
	.page-panel-header {
		height: 4.2em;
	}
	.panel-title {
    	font-size: 1.3em;
    	/* padding-top: 0.7em; */
    	
	}
	.subtitle1 {
    	font-size: 1.2em;
	}
	.subtitle-control-bar {
		font-size: 1.2em;
	}
	.header-button-large-screen {
	
		display: inline-block;
	}

	.header-button-small-screen {
	
		display: none;
	}
	.color-code-by-combobox {
		width:300px;
	}
	.main-text-large {
		font-size: 1.2em;
	}
}
@media (min-width: 992px) {
	.page-panel-header {
		height: 4em;
	}
	.panel-title {
    	font-size: 1.4em;
	}
	.subtitle1 {
    	font-size: 1.3em;
	}
	.subtitle-control-bar {
		font-size: 1.3em;
	}
	.color-code-by-combobox {
		width:350px;
	}
	.main-text-large {
	/*	font-size: 1.4em;  */
	}
}
@media (min-width: 1020px) {
	.page-panel-header {
		height: 4.5em;
	}
	.panel-title {
    /* added for HELP */
    /*	
    	font-size: 1.7em;
    	*/
	}
	.subtitle1 {
    	font-size: 1.4em;
	}
	.subtitle-control-bar {
		font-size: 1.4em;
	}
	.subtitle-small-screen {
		/* hide for screens larger or equal to 1200px (bootstrap large) */
		display: none;
	}
	.subtitle-large-screen {
		/* hide for screens smaller than  1200px (bootstrap large) */
		display: block;
	}
	.color-code-by-combobox {
		width:450px;
	}
	.main-text-large {
	/*	font-size: 1.5em;  */
	}
}
@media (min-width: 1400px) {
	.page-panel-header {
		height: 5.2em;
	}
	.panel-title {
    	font-size: 1.5em;
    	
	}
	.color-code-by-combobox {
		width:500px;
	}
	.main-text-large {
		font-size: 1.5em;
	}
}

 /* added for HELP */
.panel-icon {
	width:30px;
	height:30px;
}
.help-intro {
	font-size: 1.2em;
	padding-left:2em
}

.y-main-text {
	font-size: 2em;
	color: #331D65;
	font-weight:700;
	
	
}

/* Landing and control pages */
.home-tile {
	
	width: 98%;
	margin:1%;
	box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  	transition: all 0.3s cubic-bezier(.25,.8,.25,1);
	border: none;
	font-size: 1em;
	background-color: #e2e1e0;
	background-color: #25396E;
	
	
}
.no-padding {
	
	padding:0;
}

.card {
  background: #fff;
  border-radius: 2px;
  display: inline-block;
  
  margin: 2%;
  position: relative;
  width: 96%;
  height: 30em;
}

.card-with-help {
	height: 50em;
}

@media (min-width: 1000px) {
	.card-with-help {
	height: 35em;
	}
}

@media (min-width: 1400px) {
	.card-with-help {
	height: 30em;
	}
}

.card_title {
	text-align: center;
    font-size:1.5em;
	margin-bottom: 1.2em;
}

.card-1 {
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}

.card-1:hover {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-2 {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.card-3 {
  box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}

.card-4 {
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

.card-5 {
  box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}

.home-card-pic {
	background-size: 90%;
	height: 100%;
	margin:0;
	font-weight: 600;
    padding-bottom: 1em;
}

.card-top
{
	min-height: 12em;
}

@media (min-width: 760px) {
	.card-top
	{
		min-height: 14em;
	}
}

@media (min-width: 980px) {
	.card-top
	{
		min-height: 20em;
	}
}

@media (min-width: 1260px) {
	.card-top
	{
		min-height: 15em;
	}
}


.card-bottom
{
	min-height: 7em;
}

.portfolio-stats-separator
{
	height: 1px;
	width: 94%;
	margin: 3%;
	background-color: #565656;
	margin-top: 7%;
}
.portfolio-level-label 
{
	font-weight:700;
	color: #565656;
	font-size: 1.2em;
	margin-top: 1.5em;
}

.portfolio-levels
{
	background-size: 70%;
	height: 5em;
}
.portfolio-level0 {
	background: url(../images/layers-level0.svg) no-repeat center center;
}
.portfolio-level1 {
	background: url(../images/layers-level1.svg) no-repeat center center;
}
.portfolio-level2 {
	background: url(../images/layers-level2.svg) no-repeat center center;
}
.portfolio-level3 {
	background: url(../images/layers-level3.svg) no-repeat center center;
}

.home-card-portfolioBuilder {
	background: url(../images/PortfolioBuilder.svg) no-repeat center center;
	
}
.home-card-analytics {
	background: url(../images/Analytics.svg) no-repeat center center;
	
}
.home-card-artifacts {
	background: url(../images/Artifacts.svg) no-repeat center center;
	
}
.home-card-reports {
	background: url(../images/Reports.svg) no-repeat center center;
	
}
.home-card-portfolioManagement {
	background: url(../images/PortfolioManagement.svg) no-repeat center center;
	background-size: 90%;
}
.home-card-admin {
	background: url(../images/Admin.svg) no-repeat center center;
	
}

/* Home for the New Portfolio */

.home-new-portfolio-title {
	color:#ffffff; 
	font-size: 2.7em; 
	padding-top: 10%;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 100;
    margin-left: 5%;
    margin-right: 5%;
    text-align: center;
}

/* display for large screen only  */
@media (min-width: 1000px) {
	.home-new-portfolio-title {
		font-size: 3em; 
	}

}

.home-new-portfolio-subtitle {
	color:#ffffff; 
	font-size: 1.5em; 
	padding-top: 15%;
    margin-left: 10%;
    margin-right: 5%;
    text-align: center;
    display:none;
    line-height: 1.5em;
}

/* display for large screen only  */
@media (min-width: 1380px) {
	.home-new-portfolio-subtitle {
    	display:inline-block;
    	overflow: hidden;
	}

}

.home-new-portfolio {
	margin:0; 
	margin-top: 8%; 
	width:95%; 
	height:80%; 
}

.home-new-portfolio-left {
	margin-left: 5%; 
	background-color: #5381F8; 
	border-top-left-radius: 3em;
	border-bottom-left-radius: 3em;
}

.home-new-portfolio-right {
	margin-right: 5%; 
	background-color: #D9DCE3; 
}

.home-new-portfolio-img {
	/*background: url(../images/HomePage-New.svg) no-repeat center center; 
	background: url(../images/front-page.png) no-repeat center center; */
	background: url(../images/newportfolio.svg) no-repeat center center;
	background-size: 70%;
    width: 100%;
    height: 80%;
    /* margin: 20%; */
    margin-top: 5%;
    margin-left: 0;
    padding: 0;
}

.home-action-div {
	margin-left: 18%;
	margin-right: 18%;
    margin-top: 5%;
    color: #ffffff;
    text-align: center;
}

.l-btn-home-action {
    font-weight: 500;
    margin: 0;
    padding: 10px 25px 4px 25px;
    border-radius: 25px;
    border: 1px solid #ffffff;
    text-decoration: none;
    background-color: #F3F6FF;
    color: #5381F8;
}
.l-btn-home-gettingStartedGuide {
    color: #5381F8;
}

.l-btn-home-gettingStartedGuide:hover {
	color: #2F5597;
	cursor: pointer;
}

/* display for large screen  */
@media (min-width: 1200px) {
	.l-btn-home-action {
	    font-weight: 800;
	}
	.home-action-div {
		margin-left: 28%; 
		margin-right: 28%;
	}
	

}

.l-btn-home-action:hover {
	
	background-color: #FFFB97;
}

.l-btn-home-action .l-btn-text {
	font-size: 20px;
	font-weight: 300;
}

/* Action Button for portfolio Builder */
.pb-markComplete-btn {
	width: 70%;
	margin-left: 0;
	
	font-size: 1.1em;
	font-weight: 500;
	text-align: center;
	border: 1px solid #217F8E;
	background: #2EB3CB;
	background: -moz-linear-gradient(left, #2EB3CB 0%, #279EB5 47%, #217F8E 100%);
	background: -webkit-linear-gradient(left, #2EB3CB 0%, #279EB5 47%, #217F8E 100%);
	background: linear-gradient(to right, #2EB3CB 0%, #279EB5 47%, #217F8E 100%);
	color: #ffffff;
}

.pb-markComplete-btn:hover {
	background: #3EE5FF;
	color: #000;
	
}

.pb-markComplete-btn {
  position: relative;
  display: block;
  width: 2.5em;
  height: 2.5em;
  text-align: center;
  line-height: 2.5em;
  background: #2894A5;
  border-radius: 50%;
  font-size: 1em;
  font-weight: 700;
  color: #ffffff;
  transition: .5s;
  margin-left: 0;
  float: right;
  margin-right: 65%;
  padding-bottom: 0.8em;
}

.pb-markComplete-btn:before {
  content: '';
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:50%;
  background: #31B2C5;
  transition: .5s;
  transform: scale(.9);
  z-index: -1;
}

.pb-markComplete-btn:hover:before {
  transform: scale(1.2);
  box-shadow: 0 0 15px #31B2C5;
  filter: blur(3px);
}

.pb-markComplete-btn:hover {
  box-shadow: 0 0 15px #31B2C5;
  text-shadow: 0 0 15px #31B2C5;
}

.pb-markComplete-txt {
  color: #2894A5;
  margin-top: 1.1em;
  text-align: center;
  line-height: 20px;
  font-size: 1em;
  font-weight: 700;
}

@media (min-width: 1020px) {
	.pb-markComplete-btn {
  	/*	margin-left: 10%; */
	}
}

/* Landing page styles */


.landing-tile-pic {
	margin:0;
	height: 0;
    margin-top: 1em;
    height: 0;
}

.admin-tile-pic {
	margin:0;
	height: 0;
    margin-top: 4em;
}

@media (min-width: 1500px) {
	.admin-tile-pic {
    height: 15%;
	}
}

@media (min-width: 1950px) {
	.admin-tile-pic {
    height: 20%;
	}
}

@media (min-width: 1200px) {
	.landing-tile-pic {
    	height: 20%;
	}
}


/* welcome message tiles */
.landing-tile-home {
	background: url(../images/PortfolioIntelligence.svg) no-repeat center center;
	background-size: 25%;
}

.landing-tile-tutorial {
	background: url(../images/Learning.svg) no-repeat center center;
	
}

/* home page tiles */
.landing-tile-portfolioBuilder {
	background: url(../images/Home-PortfolioBuilder.svg) no-repeat center center;
	
}

.landing-tile-portfolioManagement {
	background: url(../images/Home-PortfolioManagement.svg) no-repeat center center;
	
}
.landing-tile-analysis {
	background: url(../images/Home-Analytics.svg) no-repeat center center;
	
}

.landing-tile-artifacts {
	background: url(../images/Home-Artifacts.svg) no-repeat center center;
	
}

/* Portfolio Management  */

.portfoioManagement-tile {
	
	background-color: #EDEFF5;
	overflow: hidden;
	/*height: 48em;*/
}

.portfolioManagement-configure {
	background: url(../images/artifacts-layer-business.svg) no-repeat top center;
	/*background: url(../images/PortfolioManagement-configure-bright.svg) no-repeat top center;
	/* 8% if icon */
	background-size: 20%; 
}

.portfolioManagement-populate {
	background: url(../images/artifacts-layer-data.svg) no-repeat top center;
	/*background: url(../images/PortfolioManagement-populate-bright.svg) no-repeat top center; */
	background-size: 20%;
}

.portfolioManagement-present {
	background: url(../images/artifacts-layer-performance.svg) no-repeat top center;
	/*background: url(../images/PortfolioManagement-present-bright.svg) no-repeat top center; */
	background-size: 20%;
}

.elasticMetaModel-metaClasses {
	background: url(../images/MetaClasses.svg) no-repeat top center;
	/* 8% if icon */
	background-size: 30%; 
}

.elasticMetaModel-relations {
	background: url(../images/Relations.svg) no-repeat top center;
	background-size: 30%;
}

.elasticMetaModel-attributes {
	background: url(../images/Attributes.svg) no-repeat top center;
	background-size: 30%;
}

.portfolioManagement-subtitle {
	width: 100%;
    color: #101A35;
    text-align: left;
    padding-left: 2em;
    font-size: 1.2em;
    font-weight: 400;
    line-height: 1.1em;
    border: none;
}

.portfolioManagement-about {
	margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 2em;
    margin-top: 0;
    font-size: 1.2em;
    height: 40%;
}

.admin-about {
	margin-left: 1em;
    margin-right: 1em;
    margin-bottom: 2em;
    margin-top: 2em;
    font-size: 1.5em;
    font-weight: 200;
    height: 20%;
}

@media (min-width: 1020px) {
	.portfolioManagement-about {
    height: 20%;
	}
}

.coreMetaModel-pic {
	background: url(../images/CoreMetaModel6.svg) no-repeat top center;
}

/*
.coreMetaModel-pic {
	background: url(../images/MetaModel-bubbles.jpg) no-repeat top center;
}
*/

.coreMetaModel-size {
	background-size: 100%;
}

.pic-popup {
	background-size: 90%;
}

@media (min-width: 900px) {
	.coreMetaModel-size {
		background-size: 95%;
	}
}
@media (min-width: 1020px) {
	.coreMetaModel-size {
		background-size: 93%;
	}
}
@media (min-width: 1065px) {
	.coreMetaModel-size {
		background-size: 87%;
	}
}
@media (min-width: 1100px) {
	.coreMetaModel-size {
		background-size: 86%;
	}
}
@media (min-width: 1163px) {
	.coreMetaModel-size {
		background-size: 75%;
	}
}
@media (min-width: 1260px) {
	.coreMetaModel-size {
		background-size: 65%;
	}
}
@media (min-width: 1400px) {
	.coreMetaModel-size {
		background-size: 55%;
	}
}
@media (min-width: 1470px) {
	.coreMetaModel-size {
		background-size: 50%;
	}
}
@media (min-width: 1744px) {
	.coreMetaModel-size {
		background-size: 45%;
	}
}
@media (min-width: 2022px) {
	.coreMetaModel-size {
		background-size: 40%;
	}
}


@media (min-width: 1020px) {
	.portfoioManagement-tile {
		/*height: 54em;*/
	}
	/*
	.portfolioManagement-configure {
		background-size: 40%;
	}

	.portfolioManagement-populate {
		background-size: 40%;
	}

	.portfolioManagement-present {
		background-size: 40%;
	}
	*/
	.portfolioManagement-subtitle {
		font-size: 1.5em;
	}
	.elasticMetaModel-metaClasses {
		background-size: 40%; 
	}

	.elasticMetaModel-relations {
		background-size: 40%;
	}

	.elasticMetaModel-attributes {
		background-size: 40%;
	}
}

.portfolioManagement-link {
	
	text-decoration:none;
	color:#3855A5;
}
.portfolioManagement-link:hover {
	color: #AE1F90;
	text-decoration:none;
}



@media (min-width: 1200px) {
	.portfoioManagement-tile {
		height: 65em;
	}
	/*
	.portfolioManagement-configure {
		background-size: 90%;
	}

	.portfolioManagement-populate {
		background-size: 90%;
	}

	.portfolioManagement-present {
		background-size: 90%;
	}
	*/
	.elasticMetaModel-metaClasses {
		background-size: 90%; 
	}

	.elasticMetaModel-relations {
		background-size: 90%;
	}

	.elasticMetaModel-attributes {
		background-size: 90%;
	}
	
	.landing-tile-pic {
		/*height: 45%; */
	}
}

@media (min-width: 1570px) {
	
	.portfolioManagement-about {
    	font-size: 1.5em;
    	font-weight: 300;
	}
	
}

.portfolioManagement-classifications {
	background: url(../images/PortfolioManagement-ReferenceModels.svg) no-repeat center center;
	
}
.portfolioManagement-objectTypes {
	background: url(../images/Home-Analytics.svg) no-repeat center center;
	
}

.portfolioManagement-objects {
	background: url(../images/PortfolioManagement-Objects.svg) no-repeat center center;
	
}

.portfolioManagement-attributes {
	background: url(../images/PortfolioManagement-Attributes.svg) no-repeat center center;
	
}

.portfolioManagement-mapping {
	background: url(../images/PortfolioManagement-Mapping.svg) no-repeat center center;
	
}
.portfolioManagement-objectClassificaton {
	background: url(../images/Home-PortfolioManagement.svg) no-repeat center center;
	
}

.administration-user {
	/*background: url(../images/Admin-User.svg) no-repeat center center; */
	background: url(../images/user.svg) no-repeat center center;
}

.administration-role {
	/*background: url(../images/Admin-Account.svg) no-repeat center center; */
	background: url(../images/roles.svg) no-repeat center center;
	
}


/* other landing pages */
.landing-tile {
	
	background-color: #EDEFF5;
	overflow: hidden;
	height: 12em;
}
.admin-tile {
	
	background-color: #F7F8FB;
	overflow: hidden;
	/* height: 28em; */
}



.artifacts-open-button {
	height: 2.5em;
    color: #fff;
    /* font-weight: 700; */
    text-align: center;
    vertical-align: middle;
    text-decoration: none;
    background-color: #24B59A;
    overflow-x: hidden;
    border-radius: 0.4em;
    border-color: #000000;
    border-size: 1px;
    border: thick;
    padding: 0.5em;
    text-transform: capitalize;
}

.artifacts-open-button:hover {
	color: #ffffff;
    background-color: #4B74E0;
	
}

.artifacts-button-text {
	
}

.artifacts-button-text:hover {
	
	color: #ffffff;
    text-decoration: none;
}

.artifacts-url-text {
	
	color: #5F3FC0;
	
}

.artifacts-url-text:hover {
	
	color: #4B74E0;
    text-decoration: none;
}

.landing-tile-inner {
	
	border:none;
	
}


.landing-tile-title {
	
	font-size: 1em;
    text-align: center;
    /*text-transform: uppercase; */
    font-weight: 200;
    text-decoration: none;
}

.artifacts-tile-title {
	
	font-size: 0.65em;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    /*background-color: #6e3fe1;
    color: #fff; */
    width: 100%;
    margin-top: 6em;
}

.usecases-tile-title {
	font-size: 0.65em;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
    text-decoration: none;
    width: 100%;
    margin:0;
}

.usecases-tile-descr {
	
	font-size: 1em;
    text-align: center;
    font-weight: 400;
    text-decoration: none;
    /*background-color: #6e3fe1;
    color: #fff; */
    width: 100%;
    padding:0.5em;
}

.landing-tile-descr {
	
	font-size: 0.9em;
	line-height: 1.4em;
    text-align: center;
    text-decoration: none;
  
}

.landing-tile-portfoliobuilder-title {
		font-size: 1.1em;
		height: 3.5em;
		padding-left: 1em;
		display: none;
	}
	
.portfoliobuilder-title-comment-row {
	height:12em;
}
	
.builder-comment-tile {
	min-height: 5em;
	overflow:hidden;
	font-size: 1em;
    line-height: 1.5em;
}

.portfolio-builder-h2 {
    font-size: 1em;
    font-weight: 500;
    color: #565656;
    text-transform: capitalize;
}

.artifacts-icons-row {
	min-height: 2em;
}

.artifacts-tile {
	width: 98%;
	height:8em;
	margin: 0.8%;
	padding:0;
}

.analytics-tile {
	height:12em;
}

.usecases-tile {
	width: 98%;
	height:10em;
	margin: 0.8%;
	padding:0;
	vertical-align: top;
	
}

.usecases-tile-color {
	background-color: #F7F8FB;
}

.usecases-tile-color:hover {
	background-color:#ddd;
}

.usecase-row {
	background-color: #ffffff; 
	width:100%; 
	float:left; 
	height:auto;
	overflow: hidden;
}

.usecase-step-tile {
	margin-top: 1%;
	padding-top: 1.5em;
	height:98%;
	margin-left: 5%;
	margin-right: 5%;
	width: 90%;
}

/* media - medium height 15em, large and xl 11 em 
https://www.w3schools.com/bootstrap4/bootstrap_grid_medium.asp
*/

@media (min-width: 992px) {
	.usecase-row {
	height:15em;
	}
}

@media (min-width: 1200px) {
	.usecase-row {
	height:11em;
	}
}

.usecases-pic-Rationalization {
	background: url(../images/UseCases-Rationalization.svg) no-repeat center center;
}
.usecases-pic-DMRA {
	background: url(../images/UseCases-DMRA.svg) no-repeat center center;
}
.usecases-pic-Integration {
	background: url(../images/UseCases-Integration.svg) no-repeat center center;
}
.usecases-pic-Executive {
	background: url(../images/UseCases-Executive.svg) no-repeat center center;
}
.usecases-pic-usecases-pic-Merger {
	background: url(../images/UseCases-Merger.svg) no-repeat center center;
}
.usecases-pic-Migration {
	background: url(../images/UseCases-DataCenter.svg) no-repeat center center;
}
.usecases-pic-Merger {
	background: url(../images/UseCases-Merger.svg) no-repeat center center;
}
.usecases-pic-SolutionArchitecture {
	background: url(../images/UseCases-SolutionArchitecture.svg) no-repeat center center;
}
.usecases-pic-IAM {
	background: url(../images/UseCases-IAM.svg) no-repeat center center;
}

.usecases-pic-size {
	background-size: 10%;
}
@media (min-width: 786px) {
	.usecases-pic-size {
		background-size: 35%;
	}
}


.usecases-tile-inner-top {
	width:100%; 
	height:48%; 
	margin:0; 
	margin-top: 0.5%; 
	padding:3%;
}

.usecases-tile-inner-bottom {
	width:100%; 
	height:50%; 
	margin:0; 
	padding:3%;
}


.artifacts-tile-inner {
	
	background-color: #ffffff;
    overflow: hidden;
    text-align: center;
    text-decoration:none;
    border: 1px solid #E2E2E2;
    box-shadow: 1px 1px 3px 1px #B6B6B6; 
    height:100%;
    
}


.tile-image-section {
	
	box-shadow: 1px 1px 3px 1px #B6B6B6; 
	height:100%
}

.tile-image-businessArchitecture {
	/*background: url(../images/Artifacts-BusinessArchitecture.svg) no-repeat center center; */
	background: url(../images/artifact1.svg) no-repeat center center;
	background-size: cover;
}
.tile-image-blueprint {
	/*background: url(../images/Artifacts-Blueprint.svg) no-repeat center center; */
	background: url(../images/artifact4.svg) no-repeat center center;
	background-size: cover;
	background-size: cover;
}
.tile-image-dataMap {
	/*background: url(../images/Artifacts-DataMap.svg) no-repeat center center; */
	background: url(../images/artifact7.svg) no-repeat center center;
	background-size: cover;
}
.tile-image-informationFlow {
	/*background: url(../images/Artifacts-InformationFlow.svg) no-repeat center center; */
	background: url(../images/artifact5.svg) no-repeat center center;
	background-size: cover;
}
.tile-image-dataDictionary {
	/*background: url(../images/Artifacts-DataDictionary.svg) no-repeat center center; */
	background: url(../images/artifact8.svg) no-repeat center center;
	background-size: cover;
}
.tile-image-solutionDecomposition {
	/*background: url(../images/Artifacts-SolutionDecomposition.svg) no-repeat center center; */
	background: url(../images/artifact3.svg) no-repeat center center;
	background-size: cover;
}
.tile-image-technicalBlueprint {
	/*background: url(../images/Artifacts-TechnicalBlueprint.svg) no-repeat center center; */
	background: url(../images/artifact9.svg) no-repeat center center;
	background-size: cover;
}
.tile-image-securityBlueprint {
	/*background: url(../images/Artifacts-SecurityBlueprint.svg) no-repeat center center;  */
	background: url(../images/artifact6.svg) no-repeat center center;
	background-size: cover;
}
.tile-image-references {
	/*background: url(../images/Artifacts-References.svg) no-repeat center center;  */
	background: url(../images/artifact2.svg) no-repeat center center;
	background-size: cover;
}
.tile-image-roadmap {
	/*background: url(../images/Artifacts-Roadmap.svg) no-repeat center center;  */
	background: url(../images/artifact11.svg) no-repeat center center;
	background-size: cover;
}
.tile-image-technologyManagement {
	/*background: url(../images/Artifacts-TechnologyManagement.svg) no-repeat center center; */
	background: url(../images/artifact10.svg) no-repeat center center;
	background-size: cover;
}
.tile-image-useCases {
	/*background: url(../images/Artifacts-UseCases.svg) no-repeat center center; */
	background: url(../images/artifact-green.svg) no-repeat center center;
	background-size: cover;
}

.tile-image-execDash {
	background: url(../images/Home-Analytics.svg) no-repeat center center;
	background-size: cover;
}
.tile-image-rational {
	background: url(../images/Home-Artifacts.svg) no-repeat center center;
	background-size: cover;
}
.tile-image-standard {
	background: url(../images/Home-PortfolioBuilder.svg) no-repeat center center;
	background-size: cover;
}
.tile-image-refresh {
	background: url(../images/Home-PortfolioManagement.svg) no-repeat center center;
	background-size: cover;
}

@media (min-width: 468px) {
	.artifacts-tile-title 
	{
		font-size: 0.8em;
    	margin-top: 6em;
    	overflow-wrap: break-word;
	}
}


@media (min-width: 786px) {
	.artifacts-tile {
		width: 47.5%;
		height:10em;
	}
	
	.analytics-tile {
		height:14em;
	}

	.artifacts-tile-title 
	{
		font-size: 1em;
    	margin-top: 3.5em;
	}
	
	.usecases-tile {
		width: 47.5%;
		height:16em;
	}
	
@media (min-width: 1020px) {
	.usecases-tile {
		height:22em;
	}
	
}
	
	.usecases-tile-title 
	{
		font-size: 1em;
	}
}

@media (min-width: 1100px) {
	.artifacts-tile {
		width: 31%;
	}
	.analytics-tile {
		width: 47%;
	}
	.artifacts-tile-title {
    	margin-top: 5.5em;
	}
	.usecases-tile {
		width: 31%;
	}
}

@media (min-width: 1400px) {
	.artifacts-tile {
		width: 31%;
	}
	.analytics-tile {
		width: 47%;
	}
	.usecases-tile {
		width: 23%;
	}
	
}



.artifacts-tile-disabled {
	
	background-color: #EDEFF5;
    overflow: hidden;
    text-align: center;
    text-decoration:none;
    border: 1px solid #E2E2E2;
    height: 10em;
    filter: opacity(40%);
    
} 

.artifacts-tile-disabled:hover {
	/* filter: alpha(opacity=80);  */
	
}





.builder-comment-tile-pic-business {
	background: url(../images/Portfolio-Builder-BusinessArchitecture.svg) no-repeat center center;
	height:5em;
}

.artifacts-pic-business {
	background: url(../images/artifacts-layer-business.svg) no-repeat center center;
	height:3em;
}

.builder-comment-tile-pic-app {
	background: url(../images/Portfolio-Builder-BusinessSolution.svg) no-repeat center center;
	height:4.2em;
}

.artifacts-pic-app {
	background: url(../images/artifacts-layer-app.svg) no-repeat center center;
	height:3em;
}

.builder-comment-tile-pic-data {
	background: url(../images/Portfolio-Builder-DataArchitecture.svg) no-repeat center center;
	height:5em;
}

.builder-comment-tile-pic-technical {
	background: url(../images/Portfolio-Builder-TechnicalArchitecture.svg) no-repeat center center;
	height:4.2em;
}

.builder-comment-tile-pic-assess {
	background: url(../images/assessment-dark.svg) no-repeat center center;
	height:4.2em;
}

.artifacts-pic-data {
	background: url(../images/artifacts-layer-data.svg) no-repeat center center;
	height:3em;
}

.artifacts-pic-performance {
	background: url(../images/artifacts-layer-performance.svg) no-repeat center center;
	height:3em;
}

.artifacts-pic-security {
	background: url(../images/artifacts-layer-security.svg) no-repeat center center;
	height:3em;
}

.artifacts-pic-technology {
	background: url(../images/artifacts-layer-tech.svg) no-repeat center center;
	height:3em;
}

.artifacts-pic-security {
	background: url(../images/artifacts-layer-security.svg) no-repeat center center;
	height:3em;
}

/* Portfolio Analysis  */
.portfolioAnalysis-tile-header {
	
	width: 100%;
    height: 3em;
    margin: 0;
    padding: 5px;
    font-size: 1.2em;
    background-color: #4B74E0;
    color: #ffffff;
    font-weight: 550;
    text-transform: uppercase;
}

@media (min-width: 992px) {
	
	.builder-comment-tile {
	/*
		height:2.8em;
	*/
	}
	.artifacts-icons-row {
		height:2.8em;
	}
}

/* Responsive design for Label, Combo, Buttons section  */
.control-section-label {
	width: 15.9%;
	margin:0;
	padding:0;
	font-size: 1em;
	padding-right: 0.1%;
	padding-top:1.1%;
	float:left;
	color: #565656;
	font-size:1em;
}
.control-section-combo {
	width: 80%;
	margin:0;
	padding:0;
	font-size: 1em;
	padding-top:1.5%;
	float:left;
	color: #565656;
	font-size:1em;
}
.control-section-buttons {
	width: 100%;
	margin:0;
	padding:0;
	font-size: 1em;
	text-align: left;
	margin-top: 0.5em;
	float:left;
}

/* Responsive design for Label, Combo, Buttons section for PortfolioBuilder */
.pb-control-section-label {
	width: 15.9%;
	margin:0;
	padding:0;
	font-size: 1em;
	padding-right: 0.1%;
	padding-top:1.1%;
	float:left;
	color: #565656;
	font-size:1em;
}

.pb-control-section-label-text {
	color: #565656;
	bordr:none;
	font-size: 1em;
}

.pb-control-section-combo {
	width: 80%;
	margin:0;
	padding:0;
	font-size: 1em;
	padding-top:1.5%;
	float:left;
	color: #565656;
	font-size:1em;
}
.pb-control-section-buttons {
	width: 100%;
	margin:0;
	padding:0;
	font-size: 1em;
	text-align: left;
	margin-top: 0.5em;
	float:left;
}

.control-filter-button {
	background-image: url(../images/filter.svg);
   
    background-position-x: 1rem;
    background-position-y: center;
    background-size: 45%;
    background-repeat: no-repeat;
	
	
}

.control-filter-button:hover {
	background-image: url(../images/filter-white.svg);	
	background-position-x: 1rem;
    background-position-y: center;
    background-size: 55%;
    background-repeat: no-repeat;
}

@media only screen and (min-width: 481px) {
	
	.control-section-label {
		width: 18.9%;
		font-size: 1.2em;
	}
	.control-section-combo {
		width: 75%;
		font-size: 1.1em;
	}
	.control-section-buttons {
		width: 70%;
    	font-size: 1em;
    	padding-top: 0.5em;
	}
	
	.pb-control-section-label {
		width: 25%;
    	font-size: 0.8em;
	}
	.pb-control-section-combo {
		width: 50%;
    	font-size: 1em;
	}
	.pb-control-section-buttons {
		width: 70%;
    	font-size: 0.7em;
    	padding-top: 0.5em;
	}
	
}

@media only screen and (min-width: 600px) {
	
	.control-section-label {
		width: 31.9%;
		font-size: 1.2em;
	}
	.control-section-combo {
		width: 56%;
		font-size: 1.2em;
	}
	.control-section-buttons {
		width: 80%;
    	font-size: 1em;
	}
	
	.pb-control-section-label {
		width: 20%;
		font-size: 1em;
	}
	.pb-control-section-combo {
		width: 60%;
		font-size: 1.2em;
	}
	.pb-control-section-buttons {
		width: 10%;
    	font-size: 0.8em;
    	margin-top: -0.5em;
	}
	
}

@media only screen and (min-width: 768px) {
	
	.control-section-label {
		width: 25%;
		font-size: 1.4em;
		padding-right: 0.2%;
		margin-bottom: 0.6em;
	}
	.control-section-combo {
		width: 45%;
		font-size: 1.4em;
		margin-top: -0.2em;
	}
	.control-section-buttons {
		width: 33%;
		margin-left:1%;
	}
	
	.pb-control-section-label {
		width: 30%;
    	font-size: 1.2em;
    	padding-right: 0.2%;
    	margin-bottom: 0.6em;
	}
	.pb-control-section-combo {
		width: 45%;
    	font-size: 1.4em;
    	margin-top: -0.2em;
	}
	.pb-control-section-buttons {
		width: 10%;
    	margin-left: 1%;
    	/*margin-top: 0.2em; */
	}
	
}

@media only screen and (min-width: 950px) {
	
	.control-section-label {
		width: 17.9%;
		
		font-size: 1.2em;
		padding-right: 0.2%;
	}
	.control-section-combo {
		width: 41%;
		font-size: 1.2em;
	}
	.control-section-buttons {
		width: 40%;
		margin-left:1%;
	}
	
	.pb-control-section-label {
		width: 25%;
		
		font-size: 1.2em;
		padding-right: 0.2%;
	}
	.pb-control-section-combo {
		width: 41%;
		font-size: 1.2em;
	}
	.pb-control-section-buttons {
		width: 19%;
    	font-size: 1em;
    	margin-top: -0.1em;
	}
	
}

@media only screen and (min-width: 1020px) {
	
	.control-section-label {
		width: 22%;
		font-size: 1.5em;
		padding-right: 0.2%;
	}
	.control-section-combo {
		width: 45%;
		font-size: 1.5em;
	}
	.control-section-buttons {
		width: 37%;
		margin-left:1%;
	}
	
	.pb-control-section-label {
		width: 25%;
    	font-size: 1.1em;
    	padding-right: 0.2%;
	}
	.pb-control-section-combo {
		width: 45%;
    	font-size: 1.3em;
	}
	.pb-control-section-buttons {
		/*width: 10%; */
    	margin-left: 1%;
    	/*margin-top: 0.5em; */
	}
	
}

.portfolioBuilder-tile {
	height: 40em;
	vertical-align:top;
	padding-right: 1%;
    padding-left: 1%;
    margin: 0em;
    margin-left: 1%;
    margin-right: 1%;
    width: 96%;
    margin-top: 1em;
    background-color: #EDEFF5;
}
.portfolioBuilder-tile-footer {
	height: 2em;
    padding-left: 0.5%;
    padding-right: 0.5%;
    margin-left: 0.5%;
    margin-right: 0.5%;
    width: 98%;
    background-color: #FFFFFF;
    margin-top: 1em;
}   
    
.portfolio-builder-link-to-page {
	font-size: 1em;
	font-weight:500;
	text-decoration:none;
	color:#3855A5;
	padding-top:0.7em;
}
.portfolio-builder-link-to-page:hover {
	color: #AE1F90;
	text-decoration:none;
}

/* Different text sizes */
/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

.renew-message {
	color: #C71F65;
    font-weight: 600;
    font-size: 1.2em;
    text-align: center;
    
}

.renew-message-section {
    	width: 100%;
    	height: 50%;
	}

.renew-section {
	/* height: 30em; */
	border: 1px solid #dbdfe8;
    background-color: #F7F8FB;
}

/* Bootstrap size: small starts at 768; medium starts at 992; large starts at 1200 */
@media only screen and (min-width: 481px) {
	
	.landing-tile-title {
		font-size: 2em;
	}
	
	.landing-tile-descr {
		font-size: 1em;
		line-height: 1.5em;
	}
	
	.renew-message {
    	font-size: 1.5em;
	}
	
	.renew-message-section {
    	height: 18%;
	}
}
	
/* Desktop Layout: 768px+. Inherits styles from: Tablet Layout. */
@media only screen and (min-width: 768px) {
.wizard-header-guide

	.landing-tile-title {
		/*font-size: 1.2em; */
	}
	.landing-tile-descr {
		font-size: 1em;
    	line-height: 1.4em;
	}
	.renew-message {
    	font-size: 1.6em;
	}
	
	.renew-message-section {
    	height: 12%;
	}
}

/* Desktop Layout: large screen 1020px+.  */
@media only screen and (min-width: 1020px) {
	
	.landing-tile-title {
	/*	font-size: 1.5em; */
		padding-top: 1em;
	}
	.landing-tile-portfoliobuilder-title {
		height: 5em;
		padding-top: 1em;
		padding-left: 20%;
		
	}
	.landing-tile-descr {
		font-size: 1.1em;
		line-height: 1.5em;
	}
	.landing-tile {
		height: 42em;
	}
	.portfolioBuilder-tile {
		height: 41em;
	}
	.admin-tile {
		/* height: 40em; */
	}
	
	.renew-section {
	/* height: 50em; */
	overflow: hidden;
	}
	.renew-message {
    	font-size: 1.8em;
	}
	
	.renew-message-section {
    	height: 10%;
	}
}

.portfolioBuilder-footer-message {
	
	color: #25396E;
    font-weight: 600;
    font-size: 1.3em;
    text-decoration: none;
}




/* end of text sizes  */


/* dialog box sizes */
.detail-dialog {
	width:4em;
	height:40em;
}

@media only screen and (min-width: 1020px) {
	.detail-dialog {
		width:20em;
		height:40em;
}
}

/* Loader */

.lds-default {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.lds-default div {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: #263766;
  border-radius: 50%;
  animation: lds-default 1.2s linear infinite;
}
.lds-default div:nth-child(1) {
  animation-delay: 0s;
  top: 29px;
  left: 53px;
}
.lds-default div:nth-child(2) {
  animation-delay: -0.1s;
  top: 18px;
  left: 50px;
}
.lds-default div:nth-child(3) {
  animation-delay: -0.2s;
  top: 9px;
  left: 41px;
}
.lds-default div:nth-child(4) {
  animation-delay: -0.3s;
  top: 6px;
  left: 29px;
}
.lds-default div:nth-child(5) {
  animation-delay: -0.4s;
  top: 9px;
  left: 18px;
}
.lds-default div:nth-child(6) {
  animation-delay: -0.5s;
  top: 18px;
  left: 9px;
}
.lds-default div:nth-child(7) {
  animation-delay: -0.6s;
  top: 29px;
  left: 6px;
}
.lds-default div:nth-child(8) {
  animation-delay: -0.7s;
  top: 41px;
  left: 9px;
}
.lds-default div:nth-child(9) {
  animation-delay: -0.8s;
  top: 50px;
  left: 18px;
}
.lds-default div:nth-child(10) {
  animation-delay: -0.9s;
  top: 53px;
  left: 29px;
}
.lds-default div:nth-child(11) {
  animation-delay: -1s;
  top: 50px;
  left: 41px;
}
.lds-default div:nth-child(12) {
  animation-delay: -1.1s;
  top: 41px;
  left: 50px;
}
@keyframes lds-default {
  0%, 20%, 80%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

/* Analytics pages header sizes */
.analytics-page-left {
	width:100%;
}
.analytics-page-center {
	width:100%;
}

@media only screen and (min-width: 1000px) {
	
	.analytics-page-left {
		width:30%;
	}
	.analytics-page-center {
		width:40%;
	}
	
}

.highlight-bar {
	
    background-color: #425866;
    color: #ffffff;
	width: 100%;
	float:left; 
	border:none;
}

.page-loading{
			position: absolute;
			top: 200px;
			width: 200px;
			left: 50%;
			margin-left: -100px;
			padding: 50px;
			font-size: 25px;
			text-align: center;
			background: #4B74E0;
			/*
			background: rgb(2,0,36);
			background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 54%, rgba(148,32,194,1) 100%);
			
			background: rgb(51,29,101);
			background: radial-gradient(circle, rgba(51,29,101,1) 0%, rgba(46,9,121,1) 34%, rgba(148,32,194,1) 100%);
			*/
			visibility: visible;
			color:#ffffff;
		}
		
/* Pre-loader CSS */
.page-loader{
    width: 100%;
    height: 100vh;
    position: absolute;
    background: #272727;
    z-index: 1000;
    .txt{
        color: #666;
        text-align: center;
        top: 40%;
        position: relative;
        text-transform: uppercase;
        letter-spacing: 0.3rem;
        font-weight: bold;
        line-height: 1.5;
    }
}

/* Spinner animation */
.spinner {
  position: relative;
  top: 35%;
  width: 80px;
  height: 80px;
  margin: 0 auto;
  background-color: #fff;
  border-radius: 100%;  
  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
  animation: sk-scaleout 1.0s infinite ease-in-out;
}

@-webkit-keyframes sk-scaleout {
  0% { -webkit-transform: scale(0) }
  100% {
    -webkit-transform: scale(1.0);
    opacity: 0;
  }
}

@keyframes sk-scaleout {
  0% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 100% {
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
    opacity: 0;
  }
}
		
.test-red {
	background-color: red;
	
}

.onScreen-message {
	font-size: 1.5em;
    padding-bottom: 0.5em;
    padding-top: 0.5em;
	border: none;
	color: #4B74E0;
	background-color: #ffffff;
}

.margin-top-bottom {
	
	margin-top: 1em;
	margin-bottom: 1em;
	font-size:1.2em;
}

.editor-style-test
{
	
	background: #000000;
	color: #ffffff;
}

/*
ReportManagement
*/

.reportManagement-authorities
{
	width: 98%;
    margin-left: 1%;
    margin-right: 1%;
    margin-top: 2em;
}

/* ponted bubble  */

.bubble {
  position: relative;
  width: 120px;
  height: 80px;
  background: #32557f;
  border-radius: 10px;
}

.bubble1 {
  position: relative;
  width: 120px;
  height: 80px;
  background: #32557f;
  border-radius: 10px;
}
.bubble1::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 13px solid transparent;
    border-right-color: #32557f;
    border-left: 0;
    margin-top: -13px;
    margin-left: -13px;
 }


.bubble2 {
  position: relative;
  width: 120px;
  height: 80px;
  background: #4B74E0;
  border-radius: 10px;
}

.bubble2::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 13px solid transparent;
    border-left-color: #4B74E0;
    border-right: 0;
    margin-top: -13px;
    margin-right: -13px;
 }


.bubble3 {
  position: relative;
  width: 120px;
  height: 80px;
  background: #32557f;
  border-radius: 10px;
}

.bubble3::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 13px solid transparent;
    border-bottom-color: #32557f;
    border-top: 0;
    margin-left: -13px;
    margin-top: -13px;
 }


.bubble4 {
  position: relative;
  width: 120px;
  height: 80px;
  background: #32557f;
  border-radius: 10px;
}

.bubble4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border: 13px solid transparent;
    border-top-color: #32557f;
    border-bottom: 0;
    margin-left: -13px;
    margin-bottom: -13px;
 }
 
 /*=======================================*/
 /* Bibbles used in Portfolio Builder page   */
 
 .bubble-round {
  	position: relative;
  	width: 95%;
  	height: 80px;
  	border-radius: 10px;
}
 
 .bubble-right {
  	position: relative;
  	width: 80%;
  	height: 80px;
  	border-radius: 10px;
}

.bubble-right::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 13px solid transparent;
    border-right: 0;
    margin-top: -13px;
    margin-right: -13px;
 }
 
 .bubble-test {
  	background: #F6F7FB;
	background: -moz-linear-gradient(left, #F6F7FB 0%, #DFE1E7 100%);
	background: -webkit-linear-gradient(left, #F6F7FB 0%, #DFE1E7 100%);
	background: linear-gradient(to right, #F6F7FB 0%, #DFE1E7 100%);
}
 .bubble-business {
  	background: #647BB2;
	background: -moz-linear-gradient(left, #647BB2 0%, #374566 100%);
	background: -webkit-linear-gradient(left, #647BB2 0%, #374566 100%);
	background: linear-gradient(to right, #647BB2 0%, #374566 100%);
}

.bubble-business::after {
    border-left-color: #374566;
 }
 
 .bubble-app {
  	background: #6FB4FD;
	background: -moz-linear-gradient(left, #6FB4FD 0%, #2383FD 100%);
	background: -webkit-linear-gradient(left, #6FB4FD 0%, #2383FD 100%);
	background: linear-gradient(to right, #6FB4FD 0%, #2383FD 100%);
}

.bubble-app::after {
    border-left-color: #2383FD;
 }
 
 .bubble-data {
  	background: #2EB3CB;
	background: -moz-linear-gradient(left, #2EB3CB 0%, #279EB5 47%, #217F8E 100%);
	background: -webkit-linear-gradient(left, #2EB3CB 0%, #279EB5 47%, #217F8E 100%);
	background: linear-gradient(to right, #2EB3CB 0%, #279EB5 47%, #217F8E 100%);
}

.bubble-data::after {
    border-left-color: #217F8E;
 }
 
 .bubble-tech {
  	background: #BD84F0;
	background: -moz-linear-gradient(left, #BD84F0 0%, #7030A0 100%);
	background: -webkit-linear-gradient(left, #BD84F0 0%, #7030A0 100%);
	background: linear-gradient(to right, #BD84F0 0%, #7030A0 100%);
}

.bubble-tech::after {
    border-left-color: #7030A0;
 }
 
 .portfolioBuilder-legend-bubble {
 	border-radius: 10px;
    height: 2em;
    color: white;
    font-size: 1.2em;
    text-align: center;
    padding-top: 7%;
 }
 
 @media only screen and (min-width: 1200px) {
 
 	.portfolioBuilder-legend-bubble {
    	font-size: 1.7em;
 }
}
 
 .bubble2-gray {
  position: relative;
  width: 120px;
  height: 80px;
  background: #697DAD;
  border-radius: 10px;
}

.bubble2-gray::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 0;
    height: 0;
    border: 13px solid transparent;
    border-left-color: #697DAD;
    border-right: 0;
    margin-top: -13px;
    margin-right: -13px;
 }
 
  .bubble-oval {
  position: relative;
  width: 120px;
  height: 80px;
  background: #31B2C5;
  border-radius: 10px;
}
    
/* end of bubbles */

/* value stream chevron */
.chevron {
  width: 17em;
  height: 50px;
  background: #32557f;
  position: relative;
}
.chevron:after {
    content: '';
    position: absolute;
    left: 0; bottom: 0; width: 0; height: 0;
    border-left: 25px solid #ffffff;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
}

.chevron:before {
    content: '';
    position: absolute;
    right: -25px;
    bottom: 0;
    width: 0;
    height: 0;
    border-left: 25px solid #32557f;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
 }

.bubble-text {
	padding-top: 0.1em;
    padding-left: 0.1em;
    font-weight: 500;
    color: #ffffff;
    line-height: 1.5em;
    font-size: 1em;
}
.bubble-title {
	font-size: 1.2em;
	font-weight: 700;
}

@media only screen and (min-width: 1200px) {
	.bubble-text {
    	font-size: 1em;
	}
}

@media only screen and (min-width: 2000px) {
	.bubble-text {
    	font-size: 1.3em;
	}
}

.bubble-test-text {
	padding-top: 0.1em;
    font-weight: 500;
    color: #2C4D87;
}

/* Report Management */

/* default */
.chainReportRelation {
		width: 90%;
    	margin-left: 5%;
    	margin-right: 5%;
    	font-size: 1.1em;
    	font-weight: 500;
    	margin-top: 1.1em;
    	border: none;
    	text-align: center;
}
.chainReportRelation-btn {
		width: 90%;
    	margin-left: 5%;
    	margin-right: 5%;
    	border: 1px solid #3855A5;
}
.chainReportRelation-btn:hover {
	background-color: #3855A5;
    color: #ffffff;
}

.chainReport-text {
	font-size: 0.7em;
	color: blue;
}

.chainReportSummaryRelationType {
	color: #1F56F0;
	font-style: italic;
}

@media only screen and (min-width: 992px) {
	.chainReportRelation {
		width: 80%;
    	margin-left: 10%;
    	margin-right: 10%;
    	font-size: 1.1em;
    	font-weight: 500;
    	margin-top: 1.1em;
    	
    	text-align: center;
	}
	.chainReportRelation-btn {
		width: 40%;
    	margin-left: 30%;
    	margin-right: 30%;
	}
}

.legend-section {

    margin-top: 1em;
    border: 1px solid #f2f2f2;
    background-color: #ffffff;
    margin-bottom: 2em;
    height: 17em;
    overflow: hidden;
	}

.pb-font-size {
	font-size: 0.8em;
}
	
@media only screen and (min-width: 992px) {
	.pb-font-size {
	font-size: 0.9em;
	}
}
@media only screen and (min-width: 1020px) {
	.pb-font-size {
	font-size: 1em;
	}
}

.pb-status-section {
	width: 80%;
	height: 3em; 
	padding: 0; 
	text-align: center;
}


.pb-markComplete-section {
	width: 100%; 
	height: 2em; 
	padding: 0;
	text-align: center;
}

.datagrid-table {
	width: 100%;
	height: 80%;
	/*
	height: 80%;
	margin-bottom: 3em;
    margin-top: -3em;
    */
}

.roleRightContainer {
	width:80%;
	height: 50%;
	margin:10%;
	margin-top: 0.5em;
	margin-bottom: 1em;
	background-color: #f2f2f2;
	text-align: center;
}

.roleViewEnabled {
	/*
	background-color: #C5DFFF;
    color: #284A83;
    */
    background-color: #284A83;
    color: #ffffff;
}

.roleViewDisabled {
	background-color: #f2f2f2;
	color: #000000;
}

.roleRightHeader {
	width:100%;
	margin:0;
	height: 20%;
	padding: 1em;
	
	font-weight: 400;
	font-size: 1.2em;
}
.roleRightAction {
	width:100%;
	margin:0;
	height: 20%;
	padding: 1em;
	
	font-weight: 200;
	font-size: 1.2em;
}
.roleRightDescription {
	width:100%;
	margin:0;
	height: 60%;
	padding: 1em;
	
	font-weight: 500;
	font-size: 1em;
	overflow: hidden;
}

.pageInfo {
	visibility: hidden;  
}

.show_guide {
	visibility: visible;
}

.disabledDescription {
	background-color: #f2f2f2;
	color: #0F1A35;
	font-size: 1.2em;
}

#Roadmap-Container {
    max-width: 1000px;
    margin: 1em auto;
}

.highcharts-label-icon {
    opacity: 0.5;
}

.objectViewDetailsDiv {
	background-color: gray;
    color: white;
    border-bottom-color: #ffffff;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    float: left;
    width: 95%;
}

.objectViewDetailsTitle {
	font-weight: 500;
	font-size: 1.2em;
}

.objectViewDetailsSection {
	width: 100%;
    padding: 1%;
    float: left;
    font-weight: 700;
    font-size: 0.9em;
    
    border-bottom: solid;
    border-bottom-width: 1px;

}

.objectViewDetailsTable {
	width: 100%;
    padding: 1%;
    float: left;
}

.objectViewDetails-wrapper {
        width: 100%;
        display: block;
        position: relative;
    }
    .objectViewDetails-wrapper:before, .objectViewDetails-wrapper:after{
      clear:both;
      display:table;
      content:"";
    }

.objectViewDetailsName {
	width: 30%;
    padding: 1%;
    float: left;
}
.objectViewDetailsDescr {
	width: 60%;
    padding: 1%;
    float: left;
}