* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

a {
  white-space: pre-wrap;
  word-wrap: break-word;  /* not working */
  overflow-wrap: break-word; /* not working */
}

/* This is how to select all elements with a specific attribute, in this case contenteditable */
[contenteditable] {
  outline: 0px solid transparent;
}

html, body {
  height: 100%;
  margin: 0;
  scroll-behavior: smooth;
}

#nav {
  height: 5%;
  background-color: white;
  border-bottom: 1px solid black;
  width: 100%;
}

#nav h3 {
  display: inline-block;
  position: absolute;
  margin: 0 auto;
  border: 1px solid black;
  text-align: center;
  font-size: x-large;
}
.savebar {
  position: relative;
  display: inline-block;
  width: 20%;
  /* right: 5%; */
  float: right;
  border: 1px solid #000;
}

.savedata {
  position: relative;
  display: inline-block;
  width: 20%;
  font-weight: bold;
  font-size: 0.5em;
  left: 0%;
  border: 1px solid #000;
}

/* To get dashboard to occupy vertical heights properly (ie to come to exact bottom), need to set html, and body to height:100%, margin:0; */
/* we dont want absolute positioning of child elements (tablecontents and diseasedisplay) if we have relative position of parent bc the children occupy no space and this can cause parents size to be erraneous unless minimum is specified. */
#dashboard {
  /* background-color: #cce6ff; */
  background-color: white;
  position: fixed;
  width: 100%;
  height: 95%;
  margin: 0 auto;
}

.tablecontents {
  /* border: 1px solid #000; */
  display: inline-block;
  position: relative;
  left: 0px;
  width: 15%;
  height: 100%;
}
.TOCcommand{
  width:100%;
  height: 10%;
  position: relative;
  padding: 2%;
  
}
.TOCtitle {
  font-weight: bold;
  font-size: 1em;
  text-align: center;
  margin-bottom: 2%;
}
.TOCcollapse, .TOCexpand {
  /* width: 25%; */
  /* display: inline-block; */
  font-size: 0.7em;
  margin: 2%;
  width: 25%;
  border: 1px solid black;
  background-color: #999;
}
#TOClist {
  width: 100%; 
  height: 90%;  /*to use height 100%, want to use relative position so it knows it is relative to parent box
  /* border: 1px solid black; */
  position: relative;
  display: inline-block;
  overflow-y: scroll;  /*to use scrollbar, must set height*/
  overflow-x: hidden;
  padding-right: 10%;
  margin-right: 5%;
}
#TOClist::-webkit-scrollbar {  /* these are for Chrome browsers */
  width: 4px;
  background: transparent;
}
#TOClist::-webkit-scrollbar-thumb {
  background: #999;
}

.chapter-links{
  padding-left: 5%;
  font-size: 0.8em;
}
.disease-links{
  padding-left: 10%;
  font-size: 0.6em;
}
.chapter-links a, .disease-links a {
  text-decoration: underline; 
  cursor: pointer;
}

#diseaseconsole {
  /* border: 1px solid #000; */
  float: right;
  display: inline-block;
  position: relative;
  width: 85%;
  height: 100%;
  padding: 0% 2%;
  /* scroll-behavior: smooth;   */
  /*smooth scroll-behavior utilizes CSS only but it is somewhat slow for large documents, however we can implement similar thing using JS  https://stackoverflow.com/questions/635706/how-to-scroll-to-an-element-inside-a-div  see POST about 3 methods*/
  /*overflow: scroll;  /* if we use overflow-x is hidden, then we don't to specifically set overflow: scroll as it becomes assumed that overflow-y is present*/
  overflow-x: hidden;
  /* since we set width to screenwidth, don't need worry about scrolling in x-axis (if we just use overflow: scroll, this adds a small horizontal bar at the bottom). 
  https://wiki.stillh.art/page/SJ4yEEClg/Transparent-Scrollbar-over-Content */
  -ms-overflow-style: none;  /* this is to allow scrollbar to disappear on IE */
}
#diseaseconsole::-webkit-scrollbar {  /* these are for Chrome browsers */
  width: 7px;
  background: transparent;
}
#diseaseconsole::-webkit-scrollbar-thumb {
  /* background: #003566; */
  background: #999;
}

.happy-parent {
  position: relative;
  border: 1px solid #000;
  /* width: 100px; */
  height: 30%;
  /* max-width: 100%;
  max-height: 100%; */
  background-image: url('../static/images/cover1.png');
  background-position: left-bottom;
  background-size: cover;
}

.happyexploring {
  /* margin: 2% auto; */
  text-align: center;
  position: absolute;
  width: 20%;
  top: 10px;
  border: 1px solid #000;
  font-weight: bold;
  right: 200px;
}

.exploring-response {
  text-align: center;
  position: absolute;
  bottom: 40%;
  right: 20%;
  visibility: hidden;
  /* border: 1px solid #000; */
}

.exploring-textarea {
  position: absolute;
  top: 10%;
  right: 0%;
  border: 1px solid #000;
}

.chaptercard {
  font-size: 2em;
  font-weight: bold;
  text-align: center;
  margin-top: 1.5%;
  margin-bottom: 0.5%;
}

.carddivider {
  /* border: 1px solid #000; */
  
  cursor: pointer;
  text-align: center;
  font-size: 0.5em;
  font-weight: bold;
  color: cadetblue;
  height: 1.0em;
  border-radius: 0.3em;
}
.carddivider:hover {
  background-color: azure; 
  border-color: cadetblue;
  border-style: dotted;
  border-width: 0.2em;
}

.card-title, .card-edit {
  display: inline-block;
}
.card-edit {
  float: right;
}
.cssbutton {
  cursor: pointer;
  display: inline-block;
  padding: 0.2em;
  margin: 0.2em;
  font-size: 0.6em;
  font-weight: bold;
  border-style: solid;
  border-color: black;
  border-width: 0.1em;
  border-radius: 0.2em;
  background-color: rgb(214, 224, 252);
}
.cssbutton:hover {
  background-color: azure; 
  border-color: cadetblue;
}

.diseasecard {
  /* border: 1px solid #000; */
  padding: 0.1%;
  margin-bottom: 0.5%;
  /* box-shadow: -2px 0px 5px #999; */
}

table {
  border: 1px solid #111;
  border-collapse: collapse;
  width: 100%;  
  /* need to specify width at table to make div alignment work properly */
}
td {
  border: 1px solid #111;
  border-collapse: collapse;
  /* position: relative; in tables this doesn't have any effect*/
  padding: 5px;
  text-align: left;
  font-size: 0.8em;
  margin: 0 auto;
  vertical-align: top;
}
.editorWindow {
  /* white-space: pre; */
  /* word-wrap: break-word; */
}
.card-heading {
  font-size: 1em;
}
.card-chapter {
  font-size: 0.6em;
}
.clinical-column {
  width: 25%;
}
.description-column {
  width: 20%;
}
.associated-column {
  width: 15%;
}
.testing-column {
  width: 15%;
}
.treatment-column {
  width: 25%;
}

.column-content {
  position: relative;
}
/* .column-content-text {  position cannot be set to absolute b/c then it takes up no space and parent box becomes small. An alternative is to use Flexbox and another alternative is to use JS to set parent boxes height
  border: 1px solid black;
  position: relative;
  margin-top: 0px;
  top: 0px;
  width: 100%;
} */
.column-box {
  position: absolute;
  right: 0px;
  bottom: 0px;
  width: 10%;
  /* float: right; */
  border: 1px solid #000;
}

.editPane {
  border: 1px solid #000;
  visibility: visible;
  position: absolute;
  right: 101%;
  top: 5%;
  height: 12em;
  width: 3em;
  z-index: 1;
  background-color: white;
  border-color: rgb(149, 156, 177);
  box-shadow: -2px 2px 5px #999;
  border-radius: 5px ;
  -webkit-animation: fadeIn 0.3s;
  animation: fadeIn 0.3s;
  cursor: default;
}
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeIn {
  from {opacity: 0;}
  to {opacity:1 ;}
}

#editPane-bold, #editPane-italics, #editPane-underline, #editPane-highlight, #editPane-addImage {
  position: relative;
  height: 20px;
  width: 20px;
  border: 1px solid #000;
  margin: 5% auto;
  text-align: center;
  background-color: rgb(214, 224, 252);
  border-color: rgb(149, 156, 177);
  opacity: 1;
  /* z-index: 2; */

}
#editPane-bold {
  font-weight: bold;
  margin-top: 10%;
  cursor: pointer;
}
#editPane-italics {
  font-style: italic;
  cursor: pointer;
}
#editPane-underline {
  text-decoration: underline;
  cursor: pointer;
}
#editPane-highlight {
  background-color: yellow;
  cursor: pointer;
}
#editPane-addImage {
  background-image: url('../static/images/addImageIcon.png');
  text-decoration: underline;
  border: none;
  cursor: pointer;
}
/* #editPane-bold:hover, #editPane-italics:hover, #editPane-underline:hover, #editPane-highlight:hover {
  background-color: rgb(174, 183, 207);
} */

#imagebox-container {
  width: 10em;
  margin: 1em;
}
#imagebox-label {
  display: block;
  width:100%;
  border: 1px black;
  background-color: azure;
  color:cadetblue;
  text-transform: uppercase;
  text-align: center;
  width:auto;
  font-weight: bold;
  font-size: x-large;
  cursor:pointer;
}
#imagebox-input {
  display:none;
}
#imagebox-image {
  display:none;
  margin: 0 auto;
  border: 1px black;
  width: 10em;
}
#imagebox-caption {
  background-color: azure;
  display:none;
  text-align: center;
}