/*--------------------------------------------------------------------------*/
/* Main style file for autoCircuits interactive solution pages              */
/*--------------------------------------------------------------------------*/


/*--------------------------------------------------------------------------*/
/* Header */

.headerStep {
	margin-left: 200px;
	height: 100px;
    padding: 0px;
    text-align: center;
    background-color: #191970;
}

.headerStep h1 {
	float: left;
    /* font-family: Arial, Helvetica, sans-serif; */
    /* font-family: "Courier"; */
    font-family: "Courier", Courier, monospace;
    font-style: italic;
    font-size: 40px;
    font-weight: bold;
    padding: 0 10px;
    background-color: #191970;
	color: white;
}


/*--------------------------------------------------------------------------*/
/* Footer */

.footerStep {
	margin-left: 200px;
    padding: 20px;
    text-align: left;
    border-top: 2px solid #FF7700;
    color: #191970;
}

/* Logbox (debug only, to be removed in production) */
.logboxStep {
	margin-left: 200px;
    padding: 20px;
    text-align: left;
    border-top: 2px solid #FF7700;
    color: #191970;
}

/*--------------------------------------------------------------------------*/
/* Circuit solution tree: nodes and edges */

.NoHighlight {stroke-width: 3; vector-effect: non-scaling-stroke}
.Highlight {stroke-width: 5; vector-effect: non-scaling-stroke}

.cirSolTreeBeginNode {stroke: #191970; fill: yellow}
.cirSolTreeEndNode {stroke: red; fill: yellow}
.cirSolTreeReadyNode {stroke: #191970; fill: yellow}
.cirSolTreeFutureNode {stroke: red; fill: yellow}
.cirSolTreeCompletedNode {stroke: #191970; fill: #191970}
.cirSolTreeActiveNode {fill: #00C000}

.cirSolTreeCompletedPath {stroke: #191970; fill: none}
.cirSolTreeFuturePath {stroke: red; fill: none}
.cirSolTreeUndefinedPath {stroke: red; stroke-dasharray: 4 4; fill: none}
/*.cirSolTreeUndefinedPath {stroke: #ccc; fill: none}*/

circle[class^="cirSolTree"]:hover {
	stroke-width: 5;
}

path[class^="cirSolTree"]:hover {
	stroke-width: 5;
}

.cirSolTreeCompletedPath:hover {
	stroke-width: 5;
}
.cirSolTreeFuturePath:hover {
	stroke-width: 5;
}

.markerVisible {
	stroke: #bbbbbb;
	fill: #bbbbbb;
}
.markerPartiallyVisible {
	stroke: #bbbbbb;
	fill: #bbbbbb;
}
.markerNotVisible {
	stroke: #dddddd;
	fill: #dddddd;
}



/*--------------------------------------------------------------------------*/
/* Container (SVG) of  autoCircuits logo and control buttons */

.cirSolLogoAndButtons{
	position:fixed;
	top:0;
	left:0;
	height:160px;
	width:200px;	
	border: none;
}


/*--------------------------------------------------------------------------*/
/* Container of circuit step status (real-time log) */

.cirStepStatus {
	position:fixed;
	top:160px;
	left:0px;
	height:60px;
	width:200px; 
	border: none;
	background-color:#dddddd;
	/*color: #191970;*/
	color: #008000;
	padding:0px;
	/*text-align: left;*/
}

.cirStepStatusIconContainer {
	float: left;
	height:60px;
	width:34px; 
	border: none;
	background-color:#dddddd;
	/*color: #191970;*/
	padding: 6px 0px 0px 10px;
}

.cirStepStatusLogContainer {
	float: left;
	height:60px;
	width: 166px; 
	border: none;
	background-color:#dddddd;
	/*color: #191970;*/
	padding:10px;
}



/*--------------------------------------------------------------------------*/
/* SVG Container of circuit solution tree */

.cirSolTreeContainer {
	position:fixed;
	top:220px; 
	left:0;
	width:200px;
	height:calc(100% - 220px);

	/* border-right: 1px solid #191970; */
	border: none;
	background-color:#dddddd;

}


/*--------------------------------------------------------------------------*/
/* Containers of circuit statements, solutions and results, and left navigation */

.NoHighlightDiv {background: none}
.NoHighlightDiv *{background: none} /* This applies style to all children, recursively */

.HighlightDiv {background: #eee}
.HighlightDiv *{background: #eee}


.div100relative {
	width: 100%;
	position: relative;
}
.div100 {
	width: 100%;
}
.divleft { /* unused */
	width: 202px;
	position: fixed;
	top: 0px;
	left: 0px;
	border: 1px solid red;
}
.divright {
	padding-left: 200px;
	width: 100%;
	min-height: 600px;
	background-color: white;
}
.divcontent {
	width: 100%;
	min-height: 200px;
	padding: 0px;
}
.divnode {
	min-height: 50px;
	width: 100%;
	padding: 10px 10px 10px 10px;
	margin-bottom: 10px;
	border-width: 2px;
	border-radius: 8px;
}
.divedge {
	min-height: 50px;
	width: 100%;
	padding: 10px 10px 10px 10px;
	margin-bottom: 10px;
	border-width: 2px;
	border-radius: 8px;
}
.divcompleted {
	border-style: solid;
	border-color: #191970;
}
.divready {
	border-style: solid;
	border-color: #191970;
}
.divactive {
	border-style: solid;
	border-color: #008000;
}
.divundefined {
	border-style: dashed;
	border-color: red;
	padding: 10px;
}
.divfuture {
	border-style: solid;
	border-color: red;
	padding: 10px;

}
.divnode:last-child {
	margin-bottom: 0px;
}

/*
.divnode:hover {
	background: #eee;
}
.divnode:hover *{
	background: #eee;
}

.divedge:hover {
	background: #eee;
}
.divedge:hover *{
	background: #eee;
}
*/

/*--------------------------------------------------------------------------*/
/* Buttons for selection of solution methods */

.methodButton {
	margin-right: 5px;
	margin-bottom: 10px;
    border-width: 1px;
    border-style: solid;
	border-radius: 5px;
    padding: 5px 10px;
    text-align: center;
    text-decoration: none;
    font-size: 16px;
    cursor: pointer;
    display: inline;
}

.methodHighPriority {
	background-color: #ffffff;
	border-color: #008000;
	color: #008000;
}
.methodHighPriority.activeMethod {
	background-color: #008000;
	border-color: #008000;
	color: #ffffff;
}
.methodHighPriority:hover {
	background-color: #008000;
	border-color: #008000;
	color: #ffffff;
}
.methodLowPriority {
	background-color: #ffffff;
	border-color: #AA0000;
	color: #AA0000;
}
.methodLowPriority.activeMethod {
	background-color: #AA0000;
	border-color: #AA0000;
	color: #ffffff;
}
.methodLowPriority:hover {
	background-color: #AA0000;
	border-color: #AA0000;
	color: #ffffff;
}
.methodNoPriority {
	background-color: #ffffff;
	border-color: #aaaaaa;
	color: #aaaaaa;
}
.methodNoPriority.activeMethod {
	background-color: #aaaaaa;
	border-color: #aaaaaa;
	color: #ffffff;
}
.methodNoPriority:hover {
	background-color: #aaaaaa;
	border-color: #aaaaaa;
	color: #ffffff;
}


/*--------------------------------------------------------------------------*/
/* Buttons for User action (Rewind, Undo, Play, RunToEnd) */

.cirSolControl {
	fill: #191970;
	stroke: #191970;
	cursor: pointer;
}

.cirSolControl:hover {
	fill: #ff0000;
	stroke: #ff0000;
}

.cirSolControlNotAllowed {
	fill: #191970;
	stroke: #191970;
}


/*--------------------------------------------------------------------------*/
/* Other text formatting elements for individual methods */
.varsTable {
	border: 1px solid #191970;
	border-collapse: collapse;
	font-size: 16px;
	color: #191970;
	text-align: center;
	padding: 2px 5px;
}

/*--------------------------------------------------------------------------*/
/* Controls for showing/hiding modal content (e.g. circuit reduction options) */

/* The Modal container (background) */
.modal-container {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 0px;
  border: none;
  width: 80%;
  height: 80%;
}

/* Modal Content (embed other web page through iframe)*/
.modal-content-iframe {
  margin: auto;
  padding: 0px;
  width: 100%;
  border: none;
  height: 100%;
}

/* The control to close (hide) modal content */
.closeMe {
  position: fixed;
  left: 10%;
  top: 70px;
  z-index: 2;
  color: #aaaaaa;
  /*float: right;*/
  font-size: 28px;
  font-weight: bold;
}

.closeMe:hover,
.closeMe:focus {
  color: #fff;
  text-decoration: none;
  cursor: pointer;
}

/* Span element to open (show) modal content */
.clickMe {
  color: #008000;
}

.clickMe:hover,
.clickMe:focus {
  color: #A1132E;
  text-decoration: none;
  cursor: pointer;
}