input[type=text] {
  border: 2px solid steelblue;
  border-radius: 8px;
  padding:8px;
  margin:4px;
  width: 50%;
}
.dashed{
   stroke-dasharray: 2,2; 
}
h1{
   font-family: Arial;
   font-weight: bold;
   text-align: center;
   font-size:24px;
}
a.focusable{
   tabindex:"0"
}
body{
   background-color: #eaeaea;
   font-family: Arial;
   font-size: 12;
}
/* Dropdown Button */
.dropbtn {
  background-color: #04AA6D;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  background-color: #3e8e41;
}

#word_gradients_text .wordgradient_container{
   margin:10px;
}
#word_gradients_text .wordgradient_heading{
   font-weight: bolder;
   font-size: 12px;
   margin:4px;
   margin-top:16px;
}
#word_gradients_text .wordgradient_word{
   font-weight: bold;
   font-size: 10px;
/*   margin:4px;*/
   margin-top:8px;
   padding:2px;
  border-radius: 5px;
}
#word_gradients_text .wordgradient_date{
   font-weight: bold;
   font-size: 10px;
   margin-top:8px;
   padding:2px;
  border-radius: 5px;
}
/* The search field */
#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}
#dropdown_searchbar::placeholder {
  text-transform: none;
}
#dropdown_searchbar{
   text-transform: uppercase;
}
/* The search field when it gets focus/clicked on */
#myInput:focus {outline: 3px solid #ddd;}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  border: 1px solid #ddd;
  z-index: 1;
  overflow-y:scroll;
  max-height:400px;
  margin-left:20%;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-family:arial;
}
.dropdown-content:hover{
   cursor:pointer;
}

a.selected{
   background-color:wheat;
}
td.rowheader{
   font-weight: bold;
   background-color: #d0d0d0;
}
td.rowheader:hover{
   cursor:pointer;
}
td.selected{
   background-color:#F2D297;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown-content a.selected:hover {background-color: #F2D297}
span.tag:hover {background-color: #F2D297}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

span.label {
  font-family:arial;
  font-size:14px;
  font-weight:bold;
  padding:4px;
}
span.tag, span.statictag{
  user-select: none;
  border-radius: 5px;
  background-color:coral;
  padding: 4px;
  padding-right:8px;
  padding-left:8px;
  margin-right:2px;
  margin-left:4px;
  width: 100px;
  height: 100px;
  font-family:arial;
  font-size:12px;
}
span.statictag{
  background-color:lightsteelblue;
}
span.statictag:hover{
  background-color:steelblue;
}
span.tag::after, span.statictag::after{
   content: "⨯";
   font-weight:bolder;
   color:darkslategray;
   margin-left: 4px;
   padding:2px;
}
span.tag:hover, span.statictag:hover{
   cursor:pointer;
}
#selected_stocks_display{
   padding-top:10px;
   padding-bottom:10px;
   text-wrap:wrap;
   max-width: 80%;
}
.table-wrap{
   font-family:Arial;
   font-size:14px;
   margin:10px;
   margin-top:20px;
   overflow-y:scroll;
  max-height:400px;
}
.scrollbar_x{
  overflow-x:scroll;
}

.sr-only {
  position: absolute;
  top: -30em;
}

table.sortable td,
table.sortable th {
  padding: 0.125em 0.25em;
  width: 8em;
}

table.sortable th {
  font-weight: bold;
  border-bottom: thin solid #888;
  position: relative;
}

table.sortable th.no-sort {
  padding-top: 0.35em;
}

table.sortable th:nth-child(5) {
  width: 10em;
}

table.sortable th button {
  padding: 4px;
  margin: 1px;
  font-size: 100%;
  font-weight: bold;
  background: transparent;
  border: none;
  display: inline;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  text-align: left;
  outline: none;
  cursor: pointer;
}

table.sortable th button span {
  position: absolute;
  right: 4px;
}

table.sortable th[aria-sort="descending"] span::after {
  content: "▼";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

table.sortable th[aria-sort="ascending"] span::after {
  content: "▲";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

table.show-unsorted-icon th:not([aria-sort]) button span::after {
  content: "♢";
  color: currentcolor;
  font-size: 100%;
  position: relative;
  top: -3px;
  left: -4px;
}

table.sortable td.num {
  text-align: right;
}

table.sortable tbody tr:nth-child(odd) {
  background-color: #ddd;
}

/* Focus and hover styling */

table.sortable th button:hover {
  padding: 2px;
  border: 2px solid currentcolor;
  background-color: #e5f4ff;
}

table.sortable th button:focus span,
table.sortable th button:hover span {
  right: 2px;
}

table.sortable th:not([aria-sort]) button:focus span::after,
table.sortable th:not([aria-sort]) button:hover span::after {
  content: "▼";
  color: currentcolor;
  font-size: 100%;
  top: 0;
}

#header {
    width: 100%;
/*    background-color: red;*/
    height: 30px;
}

#container {
    width: 1200px;
    height:600px;
/*    background-color: yellow;*/
    margin: auto;
}
#first {
    width: 800px;
    float: left;
    height: 600px;
/*    background-color: blue;*/
  border-bottom:2px solid darkslategray;
}
#second {
    width: 380px;
    float: left;
    height: 600px;
/*    background-color: green;*/
    text-wrap:wrap;
  overflow-y:scroll;
  overflow-x:hidden;
  border-bottom:2px solid darkslategray;
/*  border-radius: 8px;
  border-width: 4px;
  border-style: solid;
  border-color: darkslategray;
*/}
#clear {
    clear: both;
}
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
/*  border-bottom: 1px dotted black; /* Add dots under the hoverable text */
  cursor: pointer;
}

/* Tooltip text */
.tooltiptext {
  visibility: hidden; /* Hidden by default */
  width: 80px;
  background-color: black;
  color: white;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  position: absolute;
  z-index: 1; /* Ensure tooltip is displayed above content */
  top: 200%;
  left: 50%;
  margin-left: -40px; /* Use half of the width (130/2 = 65), to center the tooltip */
}
.tooltiptext::after {
  content: " ";
  position: absolute;
  bottom: 100%;  /* At the top of the tooltip */
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
/* Show the tooltip text on hover */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
div .disclaimer{
  font-size:12px;
  margin-top:40px;
  padding-top:10px;
  border-top:1px solid black;
  text-align:justify;
}
#loadingtext{
  position:absolute;
  left:50%;
  bottom:50%;
  text-align:center;
}