/**************************************************************************
General Elements - Alphabetically
**************************************************************************/
a#AccountDropDownLink {
	color: white;
}

/**************************************************************************
General Classes - Alphabetically
**************************************************************************/

.ProjectPrint_Banner {
	background-color: #990000 !important;
}

.ProjectPrint_OuterPage {
	width: 100% !important;
}

.HeaderMinorTabRow {
    background-color: #cacaca;
}

.HeaderMajorTabRow .HeaderTabContents A.Selected {
    background-color: #cacaca;
	border-bottom: 1px solid #cacaca;
}

.RoomComponent {
	padding: 0;
}

.TobBarUpperBorder {
    height: 0;
    border-bottom: 0;
}

.TopNavAreaLeft {
    background-Color: #990000;
}

.TopNavAreaRight, .TopNavAreaRight > a {
    background-Color: #990000;
	color: white !important;
}

.TopNavTabArea {
	background-color: #333333;
}

.TopNavTitleText {
	color: white !important;
}

/***
  Navigational tabs (History, Amendments, Approved, All Protocols, etc.)
**/
.NavigationTabControl a {
	background: #333333;
    color: #ffffff !important;
}
.NavigationTabControl a.active {
	color: #405767 !important;
}
.NavigationTabControl a:hover {
	background: #5a5a5a;
}
.NavigationTabSpacer, td.TabOff {
    background-color: #333333;
}
.TabOff a {
    /*
    color: #ffffff !important;
    */
}

/* Security Policy Menu */
.ToolArea {
	background-color: #cfdae5;
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: #ffffff;
}

.currentState {
    border: 1px solid #990000;
    text-align: center;
    padding: 5px;
}


.SFid {
    font-weight: bold;
    vertical-align: top;
    width: 32px;
}


table.SFtableQuestions {
    padding: 0 20px;
}


/**************************************************************************
Default  Component Style 
**************************************************************************/


/**************************************************************************
Text Title Component Styles 
**************************************************************************/


/**************************************************************************
Custom Layout Classes
**************************************************************************/



/* Begin Progress Bar */
.progressBarContainer {
	display: flex;
    padding: 20px 50px 40px 50px;
}
.progressBarLine {
    background-color: #dadada;
    width: 100px;
    height: 5px;
    margin: 15px -5px;
    border: 2px solid transparent;
    display: flex;
    }


.progressBarLine.green {
    background-color: #007849;
}


.progressBarText {
    display: block;
    width: 105px;
    text-align: center;
    -webkit-transform: translateX(calc(-50% + 17px));
    transform: translateX(calc(-50% + 17px));
    position: absolute;
}
.progressBarCircle {
    font-size: 40px;
    z-index: 100;
    position: relative;
	
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -ms-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.progressBarCircle.green:hover {
	color: #009600;
}
.progressBarCircle.lightgray:hover {
	color: #a0a0a0;
}



.progressBarCircle.lightorange:hover {
	color: #ff8f27;
}


.progressBarCircle.yellow {
	color: #ffbe00;
}
.progressBarCircle.yellow:hover {
	color: #ff9b00;
}
.progressBarCircle:hover {
    cursor: pointer;
}



.progressBarVerticalLine {
	vertical-align: super;
	border-left: 2px solid green; 
	height: 10px; 
	position: relative; 
	left: 15px; 
}

.progressBarVerticalLine.green {
    background-color: #007849;
}



.statusDisplayGrey {
	border-radius:20px;
	padding: 2px 2px 2px 2px;
	position:relative;
	right: 23px;
	text-align: center;
	color: white;	
	background-color:green;
	border: 2px solid green;  
	white-space: nowrap;
}


.statusDisplayReviewGrey {
	border-radius:20px; 
	padding:2px 15px 2px 15px; 
	float:left;
	display: inline-block;
	text-align: center;
	color: white;	
	background-color:grey; 
	border: 2px solid grey; 
	white-space: nowrap;	
}


.statusDisplayReviewGreen {
	border-radius:20px; 
	padding:2px 15px 2px 15px; 
	float:left;
	display: inline-block;
	text-align: center;
	color: white;	
	background-color:green; 
	border: 2px solid green; 
	white-space: nowrap;	
}


.statusDisplayReviewRed {
	border-radius:20px; 
	padding:2px 15px 2px 15px; 
	float:left;
	display: inline-block;
	text-align: center;
	color: white;	
	background-color:Red; 
	border: 2px solid Red; 
	white-space: nowrap;	
}


.statusDisplayReviewBlue {
	border-radius:20px; 
	padding:2px 15px 2px 15px; 
	float:left;
	display: inline-block;
	text-align: center;
	color: white;	
	background-color:#5A8CE4; 
	border: 2px solid #5A8CE4;
	white-space: nowrap;	
}


.statusDisplayReviewClear {
	border-radius:20px; 
	padding:2px 15px 2px 15px; 
	float:left;
	white-space: nowrap;	
	margin: 0 10px 10px 0;
	border: 2px solid black; 
}


.statusDisplay {
	border-radius: 20px; 
	padding: 4px 15px; 
	float: left;	
	white-space: nowrap;
}

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


/***
.statusDisplayNoColor {
	border: 2px solid black; 
}
***/




.statusDisplayNoColor {
	border-radius:20px; 
	padding:2px 15px 2px 15px; 
	float:left;
	display: inline-block;
	text-align: center;
	border: 2px solid black; 
	white-space: nowrap;	
}













/* End Progress Bar */















/** new custom css to show font awesome external link symbol  **/
.icon-link-ext:after {
   font-family: FontAwesome;
   font-size: 15px;
   content: "\f08e";
   display: inline-block;
   padding-right: 10px;
   vertical-align: middle;
   width: 12px;
 
   }
/** end new custom css to show font awesome phone pic **/

/** new custom css to show font awesome email symbol  **/
.icon-email:before {
   font-family: FontAwesome;
   font-size: 15px;
   content: "\f0e0";
   display: inline-block;
   padding-right: 10px;
   vertical-align: middle;
   width: 12px;
 
   }
/** end new custom css to show font awesome email pic **/


.footerContainerBox {
		 font: 8pt Arial, Helvetica, sans-serif;				
}

.GlobalNavigation.footerContainerBox {}

/**************************************************************************
Custom View Classes
**************************************************************************/
.DisplayHead 
{
	background-color: #eeeeee;
	font-family: Arial;
	font-size: 13px;
}
.DisplayHeadSort
{
	background-color: #eeeeee;
	font-weight : bold;
}

A.DisplayHead:hover, A.DisplayHeadSort:hover{
	color: #990000;
}
.DisplayHead a:hover{
	color: #990000;
}
.DisplayHeadSort a:hover{
	color: #990000;
}

/* used for the main study workspace name */
h1.workspaceTitle {
	font-size: 20px;
}

/* used for the main study workspace id */
h3.workspaceID {
	font-size: 15px;
}

.SummaryTitle {
	font-size: medium;
	color: #990000;
	font-weight : bold;
}
.SummaryLegend{
	color: #990000;
	font-weight : bold;
}
.SummaryID {
	background-color: #EEE;
	font-weight : bold;
	text-align : center;
}
.SummaryType{
	background-Color: #FFCC00;
	font-weight : bold;
	text-align : center;
}

.yellowdiv {
	border: 1px solid #ffcc00; 
	background-color: #ffffdd;
	margin-top: 5px;
	padding: 5px;
}

.warningdiv {
	background-color: #dc3545;
    color: white;
    padding: 15px;
}

.bttn {
	color: white !important;
	height: 50px;
	padding: 0 2rem;
	font-size: 20px;
	border: none;
	transition: .2s ease-out;
	display: inline-block;
	line-height: 47px;
	text-decoration: none;
	cursor: pointer;
}
.bttn-black {
	background-color: black;
}
.bttn-black:hover {
	background-color: rgba(0, 0, 0, 0.7);
	color: white;
	text-decoration: none;
}
.bttn-black:active {
	background-color: rgba(0, 0, 0, 0.4);
	color: white;
	text-decoration: none;
}

.bttn-red {
	background-color: #990000;
}
.bttn-red:hover {
	background-color: rgba(153, 0, 0, 0.7);
}
.bttn-red:active {
	background-color: rgba(153, 0, 0, 0.4);
}

.bttn-blue {
	background-color: #2E6DDD;
}
.bttn-blue:hover {
	background-color: rgba(0, 0, 0, 0.7);
}
.bttn-blue:active {
	background-color: rgba(0, 0, 0, 0.4);
}

.bttn-darkblue {
	background-color: #405767;
}
.bttn-darkblue:hover {
	background-color: rgba(0, 0, 0, 0.7);
}
.bttn-darkblue:active {
	background-color: rgba(0, 0, 0, 0.4);
}

.bttn-workspace {
	display: block;
	width: 180px;
	margin-top: 1px;
	font-size: 12px;
	color: white;
}

.greenIcon {
	color: green;
	font-size: 25px;
}

.font25 {
	font-size: 25px;
}

.prewrap {
	white-space: pre-wrap;
}

.center {
    text-align: center;
}

.black {
	color: black;
}
.green {
	color: green;
}
.red {
	color: red;
}
.yellow {
	color: yellow;
}
.white {
	color: white;
}

.lightgray {
	color: #bbbbbb;
}


.lightorange {
	color: #eb7200;
}


.pad3 {
	padding: 3px;
}
.padLeft30 {
	padding-left: 30px;
}

.showAltText {
	position: absolute;
	z-index: 9999;
	
	color: black;
	background-color: white;
	
	border: 1px solid #aaa;
	border-width: 2px;
	
	padding: 8px;
	max-width: 300px;
	
	box-shadow: 0 0 5px #aaa;
	-webkit-box-shadow: 0 0 5px #aaa;
}

.dashboardUserRole {
	width: 200px;
    font-size: 17px;
    padding: 3px;
    font-weight: bold;
    border-bottom: 1px solid grey;
    border-top: 1px solid gray;
}


/**************************************************************************
Grid Classes - used on the Personnel grid for read only inputs
**************************************************************************/


/**************************************************************************
Scalable Fonts Fix
**************************************************************************/
.hidden{
	display:none;
}


/******************************/
/*CSS for chart */
/******************************/
#timeContainer {
	width: 600px;
	margin: 0 auto;
}
#timeChart, #timeChartData {
	border: 1px solid #333;
}
#timeChart {
	display: block;
	margin: 0 0 20px 0;
	float: left;
	cursor: pointer;
}
#timeChartData {
	width: 200px;
	margin: 0 20px 10px 0;
	float: left;
	border-collapse: collapse;
	box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.5);
	background-position: 0 -60px;
}
#timeChartData th, #timeChartData td {
	padding: 0.5em;
	border: 1px dotted #666;
	text-align: left;
}
#timeChartData th {
	border-bottom: 2px solid #333;
	text-transform: uppercase;
}
#timeChartData td {
	cursor: pointer;
}
#timeChartData td.highlight {
	background: #e8e8e8;
}
#timeChartData tr:hover td {
	background: #f0f0f0;
}
/***************************/
/*CSS for Tooltip*/
/***************************/
#tooltip {
	position: absolute;
	z-index: 3000;
	border: 1px solid #111;
	background-color: #eee;
	padding: 5px;
	opacity: 0.95;
}
#tooltip h3, #tooltip div { margin: 0; }