html {
  font-family: sans-serif; 
/*    font-family: Georgia, serif; */
    font-size: 10pt;
}

button {
    cursor: pointer; }

.link {
	color: blue;
	text-decoration: underline;
	cursor: pointer;
}

.text {
    cursor: auto;
}

/*** Page Styles ***/

#page-input1{
 width:200px;   }

#page-input1 option{
 width:150px;   }

#page-input2{
 width:200px;   }

#page-input2 option{
 width:150px;   }

#page-input3{
 width:200px;   }

#page-input4{
 width:206px;   }

/*** Chart Graph Styles ***/

#graph-chat, #private-notes, #discussion {
	border: 2px solid black;
	overflow-y: scroll;
	width: 98.6%;
	height: 10em;
	padding-left: 4pt;
	padding-right: 4pt;
}

#graph-input {
    width: 100%
}

#graph-status {
    position: fixed;
    top: 0;
    width: 100%;
    padding-top: 6px;
    background-color: white;
}

hr.graph {
    margin-top: 4px;
    margin-bottom: 4px;
    margin-right: 14px; }

#control-panel {
    position: fixed;
    top: 32px;
    left: 8px;
}

#graph {
	height: 624px;
	width: 100%; }
	
/* .node-rect {
	fill: #fff;
	stroke: gray;
	stroke-width: 2px; }

.node-rect[data-author='0'] {
	stroke: green;
    background-color: white; }

.node-rect[data-state='1'] {
	stroke-dasharray: 15,10; 
    background-color: white; }
	
.node-rect[data-state='2'] {
	stroke-dasharray: 15,10; 
    background-color: yellow; }
	
.node-rect[data-state='3'] {
	stroke-dasharray: 15,10; 
    background-color: pink; } */

.node-hr {
    border-top: 3px dashed gray;
    border-bottom: 0px none;
}

.node-div {
	border: gray;
	border-style: dashed;
	border-width: 3px; 
    background-color: white;
    white-space: pre-wrap; }

.node-div[data-state='0'] {
	border-style: solid; }
	
.node-div[data-state='2'] {
	background-color: yellow; }

.node-div[data-state='3'] {
	background-color: pink; }

.node-title {
	font-weight: bold; }

/* Sep 30, 2020: Remove contenteditable focus board in Chrome */
[contenteditable] {
  outline: 0px solid transparent;
}

.line-path {
	fill: none;
	stroke: gray;
	stroke-width: 2px; }
	
/*** New item yellow fade ***/

@keyframes yellowfade {
  from {
    background: yellow;
  }
  to {
    background: transparent;
  }
}

.highlight {
    animation: yellowfade 2.5s;
    -webkit-animation-delay: 0.25s; /* Chrome, Safari, Opera */
    animation-delay: 0.25s;
}

/*** Tooltip Styles ***/

.tooltip{
    position: relative;
/*  display: inline-block; */
    border-bottom: 1px dotted black;
/*  font-style: italic; */
    cursor: pointer;
}
		
/* tooltip balloon */
.tooltip:hover:after{
	background: #333;
	background: rgba(0,0,0,.8);
	border-radius: 5px;
	bottom: 26px;
	color: #fff;
	content: attr(alt);

	left: 20%;
	padding: 5px 15px;
	position: absolute;
    z-index: 98;

    width: 220px;
    /* text-align: center; */

}
		
/* Tooltip down arrow */
.tooltip:hover:before{
	border: solid;
	border-color: #333 transparent;
	border-width: 6px 6px 0 6px;
	bottom: 20px;
	content: "";
	left: 50%;
	position: absolute;
	z-index: 99;
}

/*** Modal Alert/Form Styles ***/

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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.4); /* Black w/ opacity */
  padding-top: 150px;   /* modal top */
}

/* The Modal Container (modal window) */
.modal-content {
  position: fixed;      /* needed for drag */
  left: 50%;            /* absolute centering */
  margin-left: -240px;  /* must be in px for drag*/
  width: 480px;         /* Sets the modal width */
  background-color: #fefefe;
  border: 1px solid #888;
}

/* The Close Button (x) */
.close {
	position: absolute;
	right: 20px;
	top: 0;
	font-size: 1.6rem;
	font-weight: 100;
	line-height: 2;
	color: #AAAAAA;
	opacity: 0.8;
	cursor: pointer;
}
.close:hover,
.close:focus {
  color: #000;
  font-weight: 500;
  opacity: 1;
}

/* The header */
.modal-header {
	text-align: left;
	position: relative;
	padding: 16px 20px 18px 20px;
	background-color: #CDE4F7;
	font-weight: bold;
	min-height: 13px;
}

/* The body */
.modal-body {
  padding: 18px 20px 19px 20px;
  min-height: 49px; /* to match alert() */
}

/* The footer */
.modal-footer {
  padding: 16.5px;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	-ms-flex-pack: end;
	justify-content: flex-end;
	background-color:#F2F2F2;
	border-top: 1px solid #E6E6E6;
}

/* The footer buttons */
.modal-button {
  padding: 2px 14px;
  min-width: 73px;
  border: 1px solid #3399FF; /* unselected #ACACAC */
  margin-left: 9pt;
}
button.modal-button:hover {
    background-color: #E3F0FC;
	border-color: #7EB4EA;
} 

/* Add Fade-in Animation */

/* Change styles for span and modal buttons on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
  .modal-button {
     width: 100%;
  }
}


/*** End of style.css ***/