/* Dashboard Button Styling */

/*dashboard button universal/dynamic - New Style*/

/*tooltip on click*/

.dashHeader-tooltip-style
{
    padding:20px !important; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    border:5px solid #deebf7 !important; 
    background: url('../Images/dash_icons/content_blue_opaque.png');     
    width:300px; 
    height:auto; 
    font-size:14px; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover;
}

.dashboard-dynamic { font-size:large; float:left; position:relative; margin-top:10px; width:965px }

.dashboard-dynamic .delimeter{ float:left; padding-right:7px; padding-left:7px;}

.dashboard-dynamic .dashboardButtons{ float:left;}

.dashboard-dynamic .dashboardButtons .dashboardButton{background-color:white; float:left; position:relative;}

.dashboard-dynamic .dashboardButtons .dashboardButton .clickableDiv{position:relative;  cursor: default;}

.dashboard-dynamic .dashboardButtons .dashboardButton .dashHeader{ position:absolute; font-size: 1.3em; font-weight: 800; font-family: "Trebuchet MS"; z-index: 3; border-radius: 5px; -moz-border-radius: 5px;}
.SMGH .dashboard-dynamic .dashboardButtons .dashboardButton .dashHeader,
.Oculys .dashboard-dynamic .dashboardButtons .dashboardButton .dashHeader,
.GRH .dashboard-dynamic .dashboardButtons .dashboardButton .dashHeader,
.ESCLHIN .dashboard-dynamic .dashboardButtons .dashboardButton .dashHeader,
.NHS .dashboard-dynamic .dashboardButtons .dashboardButton .dashHeader {font-size:1.1em;}
.NHS-HSR .dashboard-dynamic .dashboardButtons .dashboardButton .dashpopder {font-size:1.2em;}

.dashboard-dynamic .dashboardButtons .dashboardButton .dashHeaderShell{border-radius: 5px; -moz-border-radius: 5px;}

.alertStatusLow { background: #A7E9A2 !important;}
.alertStatusMedium { background: #FAEDAE !important;}
.alertStatusHigh { background: #F95E5E !important;}
.alertStatusCritical { background: #404040 !important; color: #FFFFFF !important; }

.step-not-started {background: none !important}

.alertStatusLowText {color: #333333 !important; background-color:#A7E9A2;}
tr:hover .alertStatusLowText {background-color: #FBA341 !important;}
.alertStatusMediumText {color: #333333 !important; background-color: #FAEDAE;}
tr:hover .alertStatusMediumText {background-color: #FBA341 !important;}
.alertStatusHighText {color: #333333 !important; background-color: #F95E5E}
tr:hover .alertStatusHighText {background-color: #FBA341 !important;}
.alertStatusCriticalText {color: #FFFFFF !important; background-color:#000000}
tr:hover .alertStatusCriticalText {background-color: #404040 !important;} 

.alertStatusLowHeaderText {color: #000000 !important;}
.alertStatusMediumHeaderText { color: #000000 !important;}
.alertStatusHighHeaderText { color: #000000 !important;}
.alertStatusCriticalHeaderText { color: #FFFFFF !important;}
.dashHeaderShellNone {}

.dot {
    height: 20px;
    width: 20px;    
    border-radius: 50%;
    border: 1px solid black;
    display: inline-block;
    float: right;
    margin-right: 5px;
}



.reportTable td.alertStatusLow dot.alertStatusLow {
	background: green !important;	
}
.reportTable td.alertStatusMedium dot.alertStatusMedium {
    background: yellow !important
}
.reportTable td.alertStatusHigh dot.alertStatusHigh {
    background: red !important;
    color: black !important;
}

.reportTable td.alertStatusCritical dot.alertStatusCritical {
    background: black !important;
    color: black !important;
}

.dashboard-dynamic .dashboardButtons .dashboardButton .dashHeader .dashHeaderShell .dashHeaderText {
}
   
.dashboard-dynamic .dashboardButtons .dashboardButton .dashHeader .dashHeaderShell .dashHeaderText .headerMetric { border-radius: 45px; background-color: blue; font-size: 16px; height: 20px; display: inline-block; float: right; color: white; padding: 2px 7px; }

.dashboard-dynamic .dashboardButtons .dashboardButton .gridSet{position:absolute;font-family: "Trebuchet MS"; width:100%; margin-top:33px; z-index: 3;}

.dashboard-dynamic .dashboardButtons .dashboardButton .gridSet .blockContent
{
	Font-Size: medium;	
	color: #404040;
	vertical-align:bottom;
	color:Black;
	font-weight: bold;
	
	background-image: url('../Images/dash_icons/content_blue.png');
	border-radius: 5px;
    -moz-border-radius: 5px;
    z-index: 3;    
    }

.dashboard-dynamic .dashboardButtons .dashboardButton .backImage{position:absolute; opacity:0.30; z-index:1; margin-top:33px;}

/*dashboard button universal/dynamic - Retro Style*/

.dashboard-dynamicRetro { font-size:large; float:left; position:relative; margin-top:7px;}

.dashboard-dynamicRetro .delimeter{ float:left; visibility:collapse; padding-right:0px; padding-left:0px;}

.dashboard-dynamicRetro .dashboardButtons{ float:left;}

.dashboard-dynamicRetro .dashboardButtons .dashboardButton{background-color:#deebf7; float:left; position:relative; padding:5px;}

.dashboard-dynamicRetro .dashboardButtons .dashboardButton .clickableDiv{position:relative;  cursor: default;}

.dashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader{ position:absolute; font-size: 1.3em; font-weight: 800; font-family: "Trebuchet MS"; z-index: 3; text-align:left; color:Black; }
.SMGHQ .dashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader,
.SMGH .dashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader,
.Oculys .dashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader,
.GRH .dashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader,
.ESCLHIN .dashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader,
.NHS .dashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader {font-size:1.1em;}
.NHS-HSR .dashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader {font-size:1.2em;}

.dashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeaderShell{ padding-top:2px; padding-bottom:2px;}

.dashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader .dashHeaderShell .dashHeaderText{margin-left:5px;margin-right:-5px;}
                                                                   
.dashboard-dynamicRetro .dashboardButtons .dashboardButton .gridSet{position:absolute;font-family: "Trebuchet MS"; float:left; width:100%; z-index: 3; margin-top:37px; background-image: url('../Images/dash_icons/content.png'); }

.dashboard-dynamicRetro .dashboardButtons .dashboardButton .gridSet .blockContent
{
	Font-Size: 16px;
	color: #404040;		
	color:Black;
	font-weight: 800;  		
	display:inline-block;	
    float:left;
    padding:0px;
    z-index: 3;   
    
    }

.dashboard-dynamicRetro .dashboardButtons .dashboardButton .backImage{position:absolute; opacity:0.30; z-index:1;}

/* OR */

/*dashboard button universal/dynamic - Retro Style*/
.ORdashboard-dynamicRetro { font-size:large; display:block;clear:both;margin-top:1px;overflow:hidden;}

.ORdashboard-dynamicRetro .delimeter{ float:left; visibility:collapse; padding-right:0px; padding-left:0px;width:2px;}

.ORdashboard-dynamicRetro .dashboardButtons{ float:left;clear:both;}

.ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton{background-color:LightBlue; float:left; position:relative; padding:5px;}
.ORdashboard-dynamicRetro .dashboardButtons .dashboardButton{ float:left; position:relative;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.DEMO .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton     ,
.BWH .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton      ,
.ESCLHIN .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton  ,
.NHS .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton      ,
.NHS-HSR .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton  ,
.MSH .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton      ,
.SMGHQ .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton    ,
.SMGH .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton     ,
.Oculys .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton   ,
.GRH .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton      ,
.OUELLETTE .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton,
.IMAP .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton     ,
.WRHA .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton     ,
.SHS .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton     ,
.KH-MFS .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton     ,
.SJHH .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton     ,
.SJHC .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton      {border-left:1px solid white; }
.DEMO .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.BWH .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.ESCLHIN .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.NHS .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.NHS-HSR .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.MSH .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.SMGHQ .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.SMGH .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.Oculys .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.GRH .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.OUELLETTE .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.IMAP .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.WRHA .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.SHS .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.KH-MFS .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.SJHH .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child,
.SJHC .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton:first-child {border-left:none;}

.ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .clickableDiv{position:relative; cursor: default; display:block;border:5px solid lightblue;}

.ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .dashHeader{ position:absolute; font-size: 1.3em; font-weight: 800; font-family: "Trebuchet MS"; z-index: 3; text-align:center; color:Black; background-color:LightBlue;display:inline-block;}
.SMGHQ .ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .dashHeader,
.SMGH .ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .dashHeader,
.Oculys .ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .dashHeader,
.ESCLHIN .ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .dashHeadee,
.GRH .ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .dashHeadee,
.NHS .ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .dashHeader {font-size:1.1em;}
.NHS-HSR .ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .dashHeader {font-size:1.2em;}

.ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader{ font-size: 1.3em; font-weight: 800; font-family: "Trebuchet MS"; z-index: 3; text-align:center; color:Black; background-color:white;}
.SMGHQ .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader,
.SMGH .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader,
.Oculys .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader,
.GRH .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader,
.NHS .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader {font-size:1.1em;}
.NHS-HSR .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader {font-size:1.2em;}
.ESCLHIN .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader {font-size:1.3em;}

.ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .dashHeaderShell,
.ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeaderShell{ padding-top:2px; padding-bottom:2px;overflow:hidden;}

.ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .dashHeader .dashHeaderShell .dashHeaderText,
.ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader .dashHeaderShell .dashHeaderText{margin-left:1%;float:left;height:28px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%;box-sizing:border-box;}

.SMGHQ .ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .dashHeader .dashHeaderShell .dashHeaderText .headerMetric,
.SMGHQ .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .dashHeader .dashHeaderShell .dashHeaderText .headerMetric { border-radius: 100px; background-color: blue; font-size: 19px; height: 25px; display: inline-block; color: white; padding: 1px 8px; line-height:27px; }

                                                                   
.ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .gridSet,
.ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .gridSet{font-family: "Trebuchet MS"; width:100%; z-index: 3; border-top:5px solid lightblue;}

.ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .gridSet .blockContent {Font-Size: 16px;color:LightBlue;color:Black;font-weight: 800;padding:0px;z-index:3;}
.ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .gridSet .blockContent {Font-Size: 16px;color:LightBlue;color:Black;font-weight: 800;padding:0 10px 0 10px;z-index:3;}
.GRH .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .gridSet .blockContent { Font-Size: 15px;}

/* use padding here to do percentage width borders */
.ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .gridSet .blockContent tr {width:25%;display:inline-block;margin:5px 3% 5px 3%;background-color:#8dbfe5;padding:2px 1% 2px 1%;}
.ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .gridSet .blockContent td {background-color:LightBlue;width:100%;text-align:center;float:left;}

.ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .gridSet .blockContent td.dashboardMetricName {text-align:left;font-weight:500;padding-left:10px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .gridSet .blockContent td {background: url('/Images/dash_icons/content_closed.png');}
.ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .gridSet .blockContent td.dashboardMetricValue {text-align:right;font-weight:900;padding-right:10px;}
.ESCLHIN .ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .gridSet .blockContent td.dashboardMetricValue {font-size:14px;}

.ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .gridSet .blockContent td:nth-child(1) {height:20px;}
.ORdashboard-dynamicRetro .dashboardButtons .ORdashboardButton .gridSet .blockContent td:nth-child(2) {height:20px;}

.ORdashboard-dynamicRetro .dashboardButtons .dashboardButton .backImage{position:absolute; opacity:0.30; z-index:1;}

.powerFooter { font-size:11pt; text-align:right; font-family:Segoe UI; display:block; }

.dashboardPanel {margin-top:49px;display:block;}
.dashboardPanelHidden {display:none;}
.dashboardMore {padding: 0px 5px; border-radius: 50%; color: white; height:28px; font-size: 25px; font-weight: bold; text-decoration: none; float: right;border:none;width:12%;margin-right:1%;box-sizing:border-box;}

.modalPopup { background-color:lightgray;border:5px solid orange;border-radius:10px;}
.modalBackground {background-color:lightgray;opacity:0.8;}
.dashboardFrame {overflow:hidden;border:none;}
.modalPopup .clickableButton {margin:3px;}

.pencil { width: 20px; height: 20px; background-image: url("/Images/editpencil20.png")}

@keyframes spinner {to {transform: rotate(360deg);}}
.spinner:before {content: ''; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 1em; height: 1em; margin-top: -0.5em; margin-left: -0.5em; border-radius: 0.5em; border: 0.1em solid transparent; border-top-color: #07d; border-bottom-color: #07d; animation: spinner .8s ease infinite;}

.staffingMetricRow {
    display: flex;
    vertical-align: middle;
}

.staffingMetricRow.dot {
    margin-right: 10px;
}

div.dot:hover { cursor: pointer;    
}

.border-metric-container .popover-title {
    font-size: 12px;
}

.truncate {
    width: 98%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}