/*** Site Template Styles ***/
/* Insipred by GitBook 3.0 and other sites that use that navigation style. */

/*** Feb 29, 2024: Temp for testing ***/

h1, h2, h3 {
    font-style: italic;
}

/*** Override Full Bootstrap Style Library Load ***/

body {
	font-family: inherit;
	overflow: hidden;
}

.tooltip {
/*	display: inline; */
	font-size: inherit;
	opacity: inherit;
}

/*** General Purpose Styles ***/

.not-bold {
    font-weight: normal;
}

/* Equivalent to <br?&nbsp;<br? */
.top-blank-line {
    margin-top: 1em;
}

/*** Page and Content Styles ***/

@font-face {
  font-family: Allbullets;
  src: url(allbullets.woff);
}

/* Set checkbox and radio button background color to grey */
input[type="checkbox"], input[type="radio"] {
/*  accent-color: grey; */
}

/* Make Chrome select option vertical spacing Firefox-like */
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select.input option {
        padding-left: 4px;
/*      padding-top: 4px; This thows off Firefox */
    }
}

button {
    cursor: pointer; 
    pointer-events: auto;
}

/*  .title {
    margin-bottom: 0px;
} */

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

.text {
    cursor: auto;
}

.heading {
    margin-bottom: 2px;
    margin-top: 17px;
}

/* Setting field and control width */
.field {
    width: 13rem;
}

.select, .list {
    float: left;
    margin-right: 20px;
}

.label {
    font-weight: bold;
    margin-top: 15px;
}

.input {
    width: 300px;
}

.list .input {
    box-sizing: content-box;
    border: 1px solid #8F8F9D;
    border-radius: 2px;
    margin: 0;
    padding: 2px 0 2px 0;
    height: 200px;
    overflow: auto;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* For Firefox, display a thicker blue border with a lightblue outer boarder */
@-moz-document url-prefix() { 
    .list .input:focus{
        border-color: blue;
        box-shadow: 0px 0px 0px 1px blue,0px 0px 8px 1px lightblue;
        outline: 2px solid lightblue;
        outline-offset: 2px;
    }
}

.list .input [role="option"] {
    list-style: none;
    margin: 0;
    padding: 2px 5px 2px 5px;
}

.select .input option:hover, 
.list .input [role="option"]:hover {
    background-color: #8080802e;
}

.selected, [aria-selected="true"] {
    background-color: #CECECE!important;
}

/* Try to mimic selected opiton focus */
.list .input:focus-within [aria-selected="true"] {
    background-color: #3399FF!important;
    color: white;
}

.buttons-1, .buttons-2 {
    display: block;
    clear: both;
}

.buttons-3 {
    margin-top: 15px;
    margin-bottom: 15px;
}

[aria-disabled="true"] {
	opacity: .5 !important;
}

/* For layout troubleshooting */
.border-thin {
    border: 1px solid black;
}

span.required { 
    font-size: 20px;
    color: red;
}

#message {
	margin-bottom: 10px;
}

/*** Legacy Page Content Styles ***/

#page-input1, #page-input2, #page-input3, #page-input4, #page-input5, 
#input-author2, #input-author2, #input-username, #input-password {
    width:206px;
    margin-bottom: 4px;
}

#input-recwordcount, #input-turns {
    width:206px;
    margin-bottom: 12px;
}

label[for="input-recwordcount"], 
label[for="input-turns"], 
label[for="input-author1"], 
label[for="input-author2"] {
    /* CSS styles for the label */
    font-weight: normal;
    margin-bottom: 0;
}

/*** Chart Graph Styles ***/

#node-assessment a {
    color: transparent;
}

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

#input-chat {
    width: 100%
}

#main-page hr {
    margin: revert;
    border: revert;
}
#main-page hr.graph {
    margin-top: 4px;
    margin-bottom: 4px;
    margin-right: 14px; }

#control-panel {
    position: absolute;
    top: 0;
	right: 0;
	bottom: 0;
	left: 0;
    padding-left: 8px;
    width: 100%;
    pointer-events: none;
}

#coord-report {
    float: right;
    border: none;
    border-radius: 4px;
    padding: 3px 6px;
    margin-right: 13px;
    background-color: white;
    text-align: center;
}

#display-panel {
    width: 480px;
}

#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; 
    border-radius: 10px;
    padding: 5px;
    padding-left: 10px;
    min-height: 32px;   /* single line height */
    background-color: rgba(255,255,255,.7);
    white-space: pre-wrap; 
    word-wrap: break-word;
}

.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 decoration in Chrome */
[contenteditable] {
  outline: 0px solid transparent;
}

.line-path {
	fill: none;
	stroke: gray;
	stroke-width: 2px; 
/*	marker-end: url(#arrow); */
}
.arrow-path {
	fill: none;
/*	stroke: gray; */
	stroke-width: 2px; 
	marker-end: url(#arrow); 
}
#arrow {
	fill: grey;
}

.node foreignObject {
    overflow: visible;  /* Prevent foreignObject clipping */
}

/*** Item yellow burst/fade ***/

.burst {
    animation: yellowburst 2.5s;
    -webkit-animation-delay: 0.25s; /* Chrome, Safari, Opera */
    animation-delay: 0.25s;
}
@keyframes yellowburst {
  from {
    background: yellow;
    box-shadow: 0 0 20px 20px rgba(255,255,0,.8);   /* yellow */
  }
  to {
    background-color: rgba(255,255,255,.7);
    box-shadow: transparent;
  }
}

.highlight {
    animation: yellowfade 2.5s;
    -webkit-animation-delay: 0.25s; /* Chrome, Safari, Opera */
    animation-delay: 0.25s;
}
@keyframes yellowfade {
  from {
    background: yellow;
  }
  to {
    background: transparent;
  }
}

/*** Notification Styles ***/

.notification-badge {
/*  margin-left: 5px; */
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 100px;
    color: #ffffff;
    background-color: #e41e3f;
    font-weight: 500;
    font-size: .8125rem;
    min-width: 19px;
    webkit-user-select: none;
    align-items: center;
    font-family: Helvetica, Arial, sans-serif;
}


/*** Find Comment Control Styles ***/

/* From tests/test-search-animated-4.html */
.find {
    box-sizing: border-box;
    position: relative;
    display: inline-block;
	pointer-events: auto;
	z-index: 0;
}

.find input {
    position: absolute;
    top: -15.5px;
    width: 25px;
    line-height: 17.5px;
    outline: 0;
    border: 0;
    font-size: 1em;
    border-radius: 4px;
    padding-left: 6px;
    z-index: 2;
    opacity: 0;
    cursor: pointer;
    transition: all 1s;
    border: 1px solid #8f8f9d;
}

.find .symbol {
    position: absolute;
    top: -14.7px;
    transition: margin-left 1s;
    z-index: 1;
/*  height: 1.54rem; trying to match the input height at all zoom settings */
}

.find input:focus {
    width: 170px;
    border-radius: 4px 0px 0px 4px;
    opacity: 1;
    cursor: text;

}

.find input:focus ~ .symbol {
    margin-left: 164px;
    padding-left: 10px;
}

/*** Tooltip Styles ***/

.tooltip {
    position: relative;
    cursor: pointer;
}
		
/* Show a dotted underline for inline tooltipped text */
span.tooltip {
    border-bottom: 1px dotted black;
    opacity: 1; /* For a span wrapper to avoid opacity */
}
		
.d3-tooltip-theme { 
    max-width: 252px;
    -webkit-transform: none;
    transform: none;
    padding: 7px 15px;
}

/* Title-like tooltip styling */
html.title .tooltip:before {
  display: block;
  bottom: 18px;
  width: 11px;
  height: 11px;
  transform: rotate(45deg);
  background-color: #ffc;
  border: none; /* cancel any previous border style */
  border-right: 1px solid rgba(0, 0, 0, 0.5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.5);
  box-shadow: 2px 2px 4px -2px rgba(0, 0, 0, 0.5);
}
html.title .tooltip[class*=" down-"]:before {
  transform: rotate(225deg);
  top: 17px;
}
html.title .tooltip:after {
  color: rgb(0, 0, 0);
  background-color: #ffd;
  border: 1px solid rgba(0, 0, 0, 0.5);
  -webkit-border-top-left-radius: 3px;
  -webkit-border-top-right-radius: 3px;
  -webkit-border-bottom-left-radius: 3px;
  -webkit-border-bottom-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  -moz-border-radius-topright: 3px;
  -moz-border-radius-bottomleft: 3px;
  -moz-border-radius-bottomright: 3px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 3px;
  -webkit-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.5);
  -moz-box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.5);
  box-shadow: 0 2px 5px -2px rgba(0, 0, 0, 0.5);
}


/*** Msgbox Styles ***/

/* A Modal Container */
.modalbox-container {
  visibility: hidden; /* Initially no display */
  position: fixed; /* Stay in place */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  z-index: 200; /* Sit on top of tooltips */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.2); /* Black w/ opacity */
}

/* A Non-Modal Container */
.infobox-container {
  position: fixed; /* Stay in place */
  z-index: 100; /* Sit on top of tooltips */
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  visibility: hidden /* allows click events to pass through */
}

/* The Box */
.msgbox {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 480px;     /* sets the msgbox max width */
  min-width: 200px;     /* sets the msgbox min width */
}

/* The Header Close Button (x) */
.msgbox .close {
	position: relative;
    font-family: "Lato", sans-serif;
    font-size: 20pt;
	font-weight: 100;
	color: #8A8A8A;
	opacity: 0.8;
	cursor: pointer;
	float: right;
	border-bottom: none;
    line-height: .5;
    /* To position any tooltip */
    padding-bottom: 0px;
    /* To wrap long header text */
    margin-bottom: 19pt;
    margin-left: 4pt;
}
.msgbox .notext {
	line-height: .04;
    /* To position any tooltip */
    padding-bottom: 6px; 
}
.msgbox .close:hover,
.msgbox .close:focus {
  color: #000;
  font-weight: 500;
  opacity: 1;
}

/* The Msgbox header */
.msgbox-header {
	text-align: left;
	position: relative;
	padding: 13px 10px 15px 20px;
	background-color: #CDE4F7;
  border-top: 1px solid #888;
  border-left: 1px solid #888;
  border-right: 1px solid #888;
	font-weight: bold;
	cursor: move;
}
.infobox .msgbox-header {
	padding: 10px 10px 12px 10px;
}

/* The Msgbox body */
.msgbox-body {
  padding: 18px 20px 19px 20px;
  min-height: 22px; /* 49px matches alert() */
  background-color: #fefefe;
  border-left: 1px solid #888;
  border-right: 1px solid #888;
}
.infobox .msgbox-body {
  padding: 8px 10px 9px 10px;
}

/* The Msgbox footer */
.msgbox-footer {
    box-sizing: content-box;
    position: relative;
  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;
  border-left: 1px solid #888;
  border-right: 1px solid #888;
  border-bottom: 1px solid #888;
	height: 22px;
}

.msgbox-buttons {
    box-sizing: content-box;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 16.5px;
    pointer-events: none;
}

.msgbox-footer a {
  margin-left: 6pt; 
  margin-right: auto;
}

/* The footer and footer buttons */

footer {
    padding-top: 10px;
    padding-bottom: 10px;
}

.pull-right {
  margin-left: 6px;
}
.pull-left {
  margin-right: 6px;
}
.app-button, .msgbox-button {
  padding: 2px 14px;
  min-width: 73px;
  border: 1px solid #3399FF; /* unselected #ACACAC */
/* border-radius: 4px; */
}
.msgbox-button {
  float: right;
  margin-left: 4px;
}
button.app-button:hover, 
button.msgbox-button:hover {
    background-color: #E3F0FC;
	border-color: #7EB4EA;
} 

/* Change styles for span and msgbox buttons on extra small screens */
@media screen and (max-width: 300px) {
  span.psw {
     display: block;
     float: none;
  }
/* .app-button, .msgbox-button {
     width: 100%;
  } */
  .app-button.tooltip:before, .msgbox-button.tooltip:before {
    left: auto;
  }
  .app-button.tooltip:after, .msgbox-button.tooltip:after {
    right: 0;
    left: auto;
  }
}


/*** diff_match_patch.js Styles ***/

ins { 
/*  font-weight: bold; */ 
    background-color: #badcf7; 
    padding: 0.2em 1px; 
}
del { 
/*  font-weight: bold; */ 
    background-color: #ffd064; 
    padding: 0.2em 1px; 
}


/*** Dark Theme Experiment ***/

.dark-theme {
  filter: invert(1) hue-rotate(180deg);
}

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