.contentOut {
    cursor: pointer;
    display: block;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 1;
    background-color: rgb(252, 252, 252);
    border:5px solid rgb(245,245,245);
    color: black;
    margin: 5px 5px 5px 0px; 
}

.contentOver {
    cursor: pointer;
    display: block;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
    opacity: 0.7;
    background-color: rgb(252, 252, 252);
    border:5px solid rgb(245,245,245);
    color: black;
    margin: 5px 5px 5px 0px; 
}

.contentSelected {
    border:3px solid rgb(21,127,204);
}

.strokeText
{
    color: black;
    text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;  
}

div.pathButton {
  font-family: Open Sans, sans-serif;
  color: #157FCC;
  font-style: italic;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 25px;
  position: relative;
  cursor: pointer;
  user-select: none;
  background-color: #F5F5F5;
  padding: 0 5px 0 5px;
  margin: 2px 0 2px 0;
  top: 1px;
  left: 10px;
}
div.pathButton.disabledSel {
  opacity: 0.5;
  cursor: default;
}
div.pathButton:hover {
  top: -1px;
}
div.pathButton:active {
  top: 1px;
}
div.pathButton.disabledSel:hover, div.pathButton.disabledSel:active {
    top: 1px;
}
div.pathButton:before {
  left: -10px;
  border-width: 0 0 25px 10px;
  border-color: #F5F5F5 transparent;
}
div.pathButton:after {
  right: -10px;
  border-width: 25px 10px 0 0;
  border-color: #F5F5F5 transparent;
}
div.pathButton:before, div.pathButton:after {
  content: " ";
  position: absolute;
  height: 0;
  width: 0;
  border-style: solid;
}

.content-color-1{
    background-color: rgb(245,245,245);
    border:5px solid rgb(245,245,245);
    color: black;
}

.content-color-2{
    background-color: rgb(63,195,255);
    border:5px solid rgb(63,195,255);
    color: black;
}

.content-color-3{
    background-color: rgb(255,109,63);
    border:5px solid rgb(255,109,63);
    color: black;
}

.content-color-4{
    background-color: rgb(149,214,65);
    border:5px solid rgb(149,214,65);
    color: black;
}

.content-color-5{
    background-color: rgb(28,232,181);
    border:5px solid rgb(28,232,181);
    color: black;
}

.content-color-6{
    background-color: rgb(255,155,0);
    border:5px solid rgb(255,155,0);
    color: black;
}

.content-color-7{
    background-color: rgb(184,196,201);
    border:5px solid rgb(184,196,201);
    color: black;
}

.content-color-8{
    background-color: rgb(255,218,0);
    border:5px solid rgb(255,218,0);
    color: black;
}

.edit-dashpage .x-tool-gear:before {
	content: "\f040";
	font-weight: bold;
}

 
.unblock-dashpage .x-tool-refresh:before {
	content: "\f06a";
	font-weight: bold;
}
p.defaultLink {
	
	margin-bottom:3px;		
	margin-top:3px;
}

.marginLeftLink {
	margin-left: 10px; 
}

.extendedLinksPanel{
  	background-color: #7ebfe7; 
	text-align:  center;
	padding-top : 10px;
}
 

element.clickableWhite {
	transition: color 0.6s ease, text-shadow 0.6s ease;
	-webkit-transition: color 0.6s ease, text-shadow 0.6s ease;
	-moz-transition: color 0.6s ease, text-shadow 0.6s ease;
	color: #fff; 
    font-weight: 600; 
	cursor:pointer; 
}

element.clickableWhite:hover {
	color: #fff;
	font-weight: 700; 
}

hr.portletHr {
	margin-top:5px;
	border: 0; 
	height: 1px; 
	background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
	background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);

}

.dashboardMask {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
   
    cursor: default;
    z-index: 100;
    position: relative;
    width: 100%;
    height: 100%;
    top: 0 !important;
    left: 0 !important;
    background: white;
}

.dashboardMask .x-mask-msg-inner:after {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
    opacity: 0.10;
    content: '\f200';
    font-family: FontAwesome;
    font-size: 45vw; /*vw -> viewport width. e.g: 50vw = 50% of viewport width*/
    color: black;
    display: block;
    position: relative;
    text-align: center;
    background: white;
}

.data-view-pinned {
    margin: 10px;
    width : 150px;
    font-size: 20px;
    background-color:  #FCF9D8;
    display: block;
}

div.portlet-msg {
	text-align:left;
	font-weight:600;
	font-size:14px;
	margin-top:12px;
	margin-bottom:12px;
	word-wrap: break-word;
}

/** Classes to remove portlet borders */
.x-dash-panel-default {    
    border-width : 0px;   
}

.dash-panel {
    outline: none; 
    border-width : 0px;     
}
.x-dash-panel, .x-plain {
    overflow: hidden;
    position: relative;    
}
.x-dashboard-page {
	background:  rgb(236, 236, 236) !important;
}

/*Removes border line between tabs and portlets*/
.dashboard-page-body {
	border-width: 0px;
}

/** Portlets headers **/
.dash-panel-header .x-panel-header{
	background-color: transparent;
	border-width: 0px !important;
}

.dash-panel-header .x-panel-header-title{
	color: #404040 !important;
}

/*KPI Widgets*/

.info-card-item {
	text-align: center;
	background: #fff; 
	font-size: 24px;
	
}

.info-card-item.info-card-large-wrap h2 {
	font-size: 48px;
	line-height: 48px;
}

.info-card-item.info-card-large-wrap span {
	      height: 60px;
          width: 60px;
          border-radius:38px;
          color: #fff;
          font-size: 30px;
          line-height: 60px;         
          display: inline-block;
 		  background-color: #9E3FAF;
 		  text-align:  center;
 		  
          
}


.info-card-item.info-card-large-wrap .infodiv {
	font-size: 14px;
	line-height: 16px;
}


.info-card-item.info-card-large-wrap .compareDiv {
	font-size: 14px;  
	padding : 15px;
	height :50px;
	border-radius:10px;
	
	color : #808080;
	background-color: #f2f2f2;
	margin : 20px; 
	font-weight:bold;	
}
 

.info-card-item h2 {
	font-size: 30px;
	font-weight: normal;
	margin: 0;
	margin: 0;
	line-height: 32px;
}

.info-card-item div {
	line-height: 24px;
}

.info-card-item span {
	font-size: 24px;
	line-height: 24px;
}

.info-card-item:before {
	width: 100%;
	position: absolute;
	height: 3px;
	content: "";
	top: 0;
	left: 0;
}

.percentageDiv {
	font-size:15px;		
	font-weight:bold;
	border-left: solid 2px white;
    margin-left: 50%
}

.plus {
	color: green;
}

.minus {
	color: red;
}