/**
Program: models.css
@date 8/11/2020
@author Stephan K Eisenbarth
@organization: VA CART
Bleeding Risk: Colin O'Donnell
Syntax Scrore: Thomas Glorioso
30-Day Mortality: Colin O'Donnell
Description: Page contains the style code for the various CART predicitve models (Bleeding Risk, Syntax Score, 30-Day Mortality)
*/

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++ GENERAL STYLE ++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* Style assocated with the table <table> of the page */
#hdrTbl {
	width: 100%;
	padding:0;
	margin:0;
	border-collapse: collapse;
}

/* Style assocated with the table row <tr> of the page */
#hdrTblRow {
	padding:0;
	margin:0;
	border-collapse: collapse;
}

/* Style assocated with elements that should appear on the left of other items */
td#hdrLft {
	text-align:left;
	overflow: hidden;
	vertical-align: top;
	white-space: nowrap;
	width: 100px;
	padding-left:5px;
	padding-top:5px;
	margin:0;
	border-collapse: collapse;
}

#pipe {
	margin-right: 5px;
	margin-top: 8px;
	text-align: left;
	background-color:#606060;
	width: 3px;
	height: 69px;
	border-collapse: collapse;
}

/* Style for the top text containing "VA Clincal Assessment, Reporting and Tracking Program" */
#topText {
	font-weight: lighter;
	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	color: #606060;
	overflow: hidden;
	font-size: 4em;
	vertical-align: top;
}

#quality {
	font-weight: lighter;
	color: silver;
}

/* Style for the horizontal line that separetes the top and bottom text */
#logoBar {
	width: 645px;
	height: 1px;
	text-align: left;
	margin-left: 0;
	border: none;
	color: rgb(154, 154, 154);
	background-color: rgb(154, 154, 154); 
}

/* Style for the bottom text containing "Safety Programs: Adverse Event Review" */
#bottomText {
	font-weight: lighter;
	font-family: Calibri,Candara,Segoe,Segoe UI,Optima,Arial,sans-serif;
	color: #606060;
	overflow: hidden;
	font-size: 1.2em;
	font-style: italic;
}

/* ID Style for the CART Application version area */
#cartAppVerArea {
	display: none;
}

/* CLASS Style Main header/logo element style used in the model results area */
.titleTxt {
	font-size: 1.1em;
	font-weight: bolder;
	margin-left: 60px;
	padding: 0;
}

/* ID Style for the type of model name display area */
#typeOModelArea {
	font-size: 1.5em;
	font-weight: bolder;
	margin-top: 10px 0px 5px 0px;
}

/* CLASS Style for the user input form areas */
.formAreas {
	width: 680;
	min-width: 680;
	background-color: white;
	margin: 10px;
	padding: 5px 0px 15px 15px;
	border: solid 2px black;
	border-radius: 34px;
	position: relative;
	left: 50%;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

/* CLASS Style for the user input form general table data <td> element style */
.frmTbl td { 
	text-align: center;
	padding: 6px;
	white-space: nowrap;
}

/* CLASS Style label for user input */
.lbl {
	font-weight: bold;
}

/* CLASS Style for main button container (which contains the Next, Previous, Clear, Submit buttons) */
.btnArea {
	width: 53vw;
	margin: 10px;
	padding: 5px 0px 5px 10px;
	position: relative;
	left: 55%;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
}

/* CLASS Style for yes-no switch <label> element style */
.switch {
	position: relative;
	display: inline-block;
	width: 60px;
	height: 34px;
}

/* CLASS Style for main slider yes-no <span> element style */
.sliderround {
	position: absolute;
	cursor: pointer;
	border-radius: 34px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
}

/* CLASS Style for slider yes-no <span> before element style */
.sliderround:before {
	position: absolute;
	content: "";
	height: 26px;
	width: 26px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	border-radius: 50%;
	-webkit-transition: .4s;
	transition: .4s;
}

/* INPUT Style for the input associated with yes-no slider <span> element is checked (not empty) style */
input:checked + .sliderround {
	background-color: #2196F3;
}

/* INPUT Style for the input associated with yes-no slider <span> element has focus within webpage style */
input:focus + .sliderround {
	outline: thin dotted;
	box-shadow: 0 0 1px #2196F3;
}

/* INPUT Style for the input associated with yes-no slider <span> before element before style is applied*/
input:checked + .sliderround:before {
	-webkit-transform: translateX(26px);
	-ms-transform: translateX(26px);
	transform: translateX(26px);
}

/* CLASS Style for text NO or YES for slider style */
.slideVal {
	font-size: .8em;
	padding-top: 6px;
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	line-height: normal;
	white-space: nowrap;
}

/* CLASS Style for the individual results area title style */
.resLbl {
	font-weight: bold;
	font-size: 1.3em;
	margin: 20px;
}

/* CLASS Style color for when 'No' is selected on slider */
span.NoLbl {
	color: red;
}

/* CLASS Style color for when 'Yes' is selected on slider */
span.YesLbl {
	color: green;
	visibility: hidden;
}

/* CLASS Style to change color of text to red or SVG DOM items has been selected*/
.red {
	color: red;
}

/* Class to change color of text to green */
.green {
	color: green;
}

/* ID Style for the resulting calculation input fields background */
input#perc, input#bleedingRisk {
	background-color: #d9d9d9;
	font-weight: bold;
	font-size: 1.5em;
}

/* CLASS Style for foot note area(s) containing descriptive text */
.footNote {
	font-size: .75em;
	padding-left: 20px;
	font-style: italic;
}

/* ID Style for table header <TH> in the Results display table */
#resMetaTbl th {
	text-align: center;
	border-bottom: 1px solid;
}

/* ID Style for table data <TD> in the Results display table */
#resMetaTbl td {
	vertical-align: top;
	text-align: left;
}

/* CLASS Style for the meta results table, every even row <TR>*/
#resMetaTbl tr:nth-child(even){
  background-color: lightgrey;
}

/* ID Style for the parent results table <TABLE>*/
#resTbl {
	width: 98%;
	border-collapse:separate;
	border-spacing:0 15px;
	margin: 0px;
	padding: 0px;
}

/* CLASS Style for the parent results table rows <TR>*/
.resRow  {
	font-size: 1.2em;
	text-align: left;
}

/* CLASS Style for results table information that appears outside of actual results table*/
.resExtraInfo  {
	font-size: 1.2em;
	text-align: left;
}

/* ID Style for Syntax left side reuslts area */
#leftResPane {
	width: 910px;
	margin-top: .5vw;
	margin-right: .5vw;
}

/* ID Style for Syntax right side reuslts area */
#rightPane {
	float: right;
}

/* Style for all SVG path items */
.svgPath {
	transition: .6s fill;
	fill: #D3D3D3;
}

/* Style for all SVG path items when mouse hovers over  */
.svgPath:hover {
	fill: #22aa22;
}

/* Style for the  */
.svgPath_Chosen {
	transition: .6s fill;
	fill: #red;
}

/* TD Style for the all generic table data cells <TD> items  */
td {
	vertical-align: top;
	text-align: left;
}

/* Style for the formula source referenced journal */
#ref {
	font-size: .75em;
}

/* CLASS Style for Question mark label used to show hint */
.hint {
	font-size: 0.8em;
	font-weight: bold;
	background: black;
	color: white;
	padding: 1px 5px;
	margin-left: 5px;
	border-radius: 90%;
}

/* ID Style for hint areas initially style (so hidden/not visible) */
#hintArea {
	display: none;
	background-color: #ccc;
	width: 240px;
	max-width: 240px;
	padding: 5px;
	margin: 5px;
	position: fixed;
	text-align: left;
	white-space: normal;
	overflow-wrap: break-word;
	word-break: break-word;
	word-wrap:break-word;
}

/* ID Style for the Syntax score results graphic parent table */
#resGraphTbl {
	margin-left: 45px;
}

/* CLASS Style for the Syntax score results graphic parent table headers <TH> */
#resMetaTbl th {
	text-align: center;
	padding-right: 15px;
}

/* CLASS Style for the Syntax score results graphic parent table rows <TR> */
#resMetaTbl td {
	vertical-align: top;
	text-align: center;
	padding-right: 20px;
}

/* SVG Style for the Scalable Vector Graphics <SVG> */
svg {
	overflow: visible;
}

/* ID Style for the Syntax Score graph parent container */
#graphHolder {
	height: 100px;
	width: 100px;
}

/* Style for the Syntax Score actual graph */
#graphPad {
	padding: 0px;
	margin: 0px;
	/*padding-left:20px;*/
}

/* ID Style for the Procedureal Complications Parent Area */
#procComplicaArea {
	display: none;
}

/* ID Style for the Procedural Mortality Parent Area */
#procMortalArea {
	display: none;
}

/* Hide labels visually but allow accessibility devices to see it (508 compliance) style */
.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* Text input <input type="text"> element style */
input[type=text] {
	border: 1px solid black;
	text-indent: 2px;
}

/* Text input <input type="text"> element style */
select {
	border: 1px solid black;
}

/* Style for the test results table <TABLE>*/
.testRow{
	border: 1px solid black;
}

/* Style for DIV that contains the progress bar sub-DIV*/
#progArea {
	top: 50%;
	left: 30%;
	position:fixed;
	display: none;
	background-color: lightblue;
	padding: 10px;
	border-left: solid 1px grey;
	border-bottom: solid 1px grey;	
}

/* Style for DIV that contains the actual progress bar*/
#myBar {
	width: 1%;
	height: 20px;
	background-color: #4CAF50;
	border-left: solid 1px green;
	border-bottom: solid 1px green;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++ ONLOAD BLEEDING RISK STYLE +++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ID Style for the on webpage load bleeding risk parent input area */
#bleeding_Area {
	display: block;
}

/* ID Style for the on webpage load bleeding risk results area */
#resultsArea_bleedingRisk {
	display: none;
}

/* ID Style Bleeding risk button style */
#bleedingBtn {
	border-top: solid 1px;
	border-right: solid 1px;
	border-left: solid 2px;
	border-bottom: solid 2px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++ ONLOAD SYNTAX STYLE +++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ID Style for the on webpage load VA Syntax Score parent input area */
#syntax_Area {
	display: none;
}

/* ID Style for the on webpage load VA Syntax Score results area */
#resultsArea_syntax {
	display: none;
}

/* ID Style Syntax Score button style */
#syntaxBtn {
	border: solid 1px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
++++++++++++++++ ONLOAD 30 DAY MORTALITY AFTER PCI RISK STYLE ++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ID Style for the on webpage load 30 Day Mortality Risk After PCI parent input area */
#mortality_Area {
	display: none;
}

/* ID Style 30 Day Mortality After PCI Risk button style */
#mortalityBtn {
	border: solid 1px;
}

/*++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+++++++++++++++++++++++++++++++++ ONLOAD CIN STYLE +++++++++++++++++++++++++++++++++++++++
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
/* ID Style for the on webpage load CIN parent input area */
#cin_Area {
	display: none;
}

/* ID Style 30 Day Mortality After PCI Risk button style */
#cinBtn {
	border: solid 1px;
}