.tooltip-wrap {
    position: relative;
}
.tooltip-wrap .tooltip-content {
    display: none;
    position: absolute;
    bottom: 100%;
    left: 5%;
    right: 5%;
    width: 600px;
    background-color: #FFFFFF;
    border: 0.1px solid #F2F2F2;
    padding: .5em;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .4);
    color: #000000;
}
.tooltip-wrap:hover .tooltip-content {
    display: block;
}

.tooltip-wrap .tooltip-content-right {
    display: none;
    position: absolute;
    bottom: 100%;
    left: -500px;
    right: 5%;
    width: 500px;
    background-color: #FFFFFF;
    font-size: 0.7em;
    border: 0.1px solid #F2F2F2;
    padding: .5em;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .4);
    color: #000000;
}
.tooltip-wrap:hover .tooltip-content-right {
    display: block;
}

.odd{
    background-color: #eeeeee !important;
    border-top: 0.5em solid white;
    height: 42px;
}
.odd > *{
    border-bottom: 0.5em solid white;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.even{
    background-color: #eeeeee !important;
    border-top: 0.5em solid white;
    height: 42px;
}
.even > *{
    border-bottom: 0.5em solid white;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.left_td{
    padding-left: 0.5em; 
    padding-right: 0.5em;
}
.dt-center{
    padding-left: 0.5em; 
    padding-right: 0.5em;
    text-align: center;
}

#no-padding {
    padding: 0px;
}

table.dataTable td {
    padding: 0px;
}

.filters{
    background-color: rgb(53, 126, 199);
    border-bottom: 1em solid white;
}
.filters > *{
    background-color: #eeeeee !important;
    border-radius: 0 !important;
    padding: 3px 8px 3px 10px !important;
}
table.dataTable thead th, table.dataTable thead td{
    padding: 0px 18px 0px 10px;
    border-bottom: 1px solid #111;
}

/*tbody:before {
    content:"@";
    display:block;
    line-height: 0.5em;
    text-indent:-99999px;
}*/

table.dataTable.row-border tbody th, 
table.dataTable.row-border tbody td, 
table.dataTable.display tbody th, 
table.dataTable.display tbody td {
  border-top: none;
  border-bottom: 0.5em solid white !important;
}

.column1 {
    float: left;
    width: 50%;
    vertical-align: bottom;
    position:absolute;
    bottom:0;
    left:0;
}

.column2_info {
    float: right;
    text-align:right;
    color:grey;
    padding: 0.01em 16px;
}
.column2_legend {
    display: none;
    float: right;
    width: 40%;
    text-align:right;
    font-size: 0.7em;
    color:grey;
    border: 1px solid #ccc!important;
    padding: 0.01em 16px;
    border-radius: 16px;
}

.header_content{
    position:relative;
    line-height: 1.2em;
}
/* Clear floats after the columns */
.header_content:after {
    content: "";
    display: table;
    clear: both;
}

.input_seach_datatables {
    width: 70%;
    font-size: small;
    border: 1px solid #aaa;
    border-radius: 3px;
    padding: 5px;
    background-color: white;
}

.table_thead_tr > th{
    border-bottom: 1px solid #eeeeee !important;
}

.dataTables_filter{
    margin-bottom: 1em;
}

.dt-buttons{
    display: contents;
}

/* SPINNER */

.sk-chase {
    width: 40px;
    height: 40px;
    position: absolute;
    animation: sk-chase 2.5s infinite linear both;
    margin: 0 auto;
    z-index: 9999;
    margin-top: 2em;
    top: 5%;
    left: 50%;
  }
  
  .sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; 
    animation: sk-chase-dot 2.0s infinite ease-in-out both; 
  }
  
  .sk-chase-dot:before {
    content: '';
    display: block;
    width: 25%;
    height: 25%;
    background-color: rgb(53, 126, 199);
    border-radius: 100%;
    animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
  }
  
  .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
  .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
  .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
  .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
  .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
  .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
  .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
  .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
  .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
  .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
  .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
  .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
  
  @keyframes sk-chase {
    100% { transform: rotate(360deg); } 
  }
  
  @keyframes sk-chase-dot {
    80%, 100% { transform: rotate(360deg); } 
  }
  
  @keyframes sk-chase-dot-before {
    50% {
      transform: scale(0.4); 
    } 100%, 0% {
      transform: scale(1.0); 
    } 
  }

  .content_keywords_div{
    background-color: white;
    position: fixed;top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%; 
    height: 50%;
    font-size: small;
    overflow-y: scroll;
    border: 2px solid lightgray;
    border-radius: 15px;z-index: 99;padding: 10px;
    /*box-shadow: 5px 5px 10px 2px #333333;
    -webkit-box-shadow: 5px 5px 10px 2px #333333;
    -moz-box-shadow: 5px 5px 10px 2px #333333;*/
}

.parent {
    position: relative;
    display: inline-block;
}
.parent .child{
    visibility: hidden;
    background-color: lightGrey;
    color: black;
    width: 400px;
    clear:both;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    transition: 0s;
}
.parent:hover .child{
    visibility: visible;
    transition-delay: 0.5s;
}

.button {
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
}
.button_green{
    background-color: green;
}
.button_yellow{
    background-color: yellowgreen;
}
.button_red{
    background-color: lightsalmon;
}

.button_small {
    border: none;
    color: white;
    padding: 3px 5px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
    margin: 2px 2px;
    cursor: pointer;
    border-radius: 8px;
}

.button_grey{
    background-color: grey;
}

.member_container{
    background-color: #CCC;
    width: 60%;
    border-radius: 8px;
    margin:0 auto;
}

/* TESTING */

.up_section {
    color: #357EC7;
    font-weight: 700;
    text-align: center;
    padding: 50px 0;
    border-radius: 0.8rem;
    outline: 1px solid #C4CDD5;
    padding-left: 5em;
    padding-right: 5em;
    width: 500px;
    height: 200px;
    background-color: #e3ebf3;
    box-shadow: 1px 1px 8px 0px #888c91;
    margin: 0 auto;
    transition: all 0.2s ease-in;
  }
  
  
  .up_section_selected {
    color: #eee;
    font-weight: 700;
    text-align: center;
    padding: 50px 0;
    border-radius: 1.2rem;
    padding-left: 5em;
    padding-right: 5em;
    width: 500px;
    height: 200px;
    background-color: #6e9ac5;
    box-shadow: 1px 1px 8px 0px #888c91;
    margin: 0 auto;
    transition: all 0.2s ease-in;
  
  }
  
  strong{
    color: #357EC7 !important;
  }
  
  .choose-file {
    margin: min(1rem, 2rem);
    padding: 1em;
    border-radius: 1em;
    font-family: arial, verdana, roboto, sans-serif;
  }
  
  #input_type {
    display: grid;
    justify-content: center;
    margin: 1rem;
  }
  
  #submit_button{
    background: #357EC7;
    color: #eee;
    display: flex;
    justify-content: center;
    padding: 1em 1.3em;
    border-radius: 2.5em;
    font-weight: 600;
    border-style: none;
    box-shadow: 1px 2px 5px 0px #6b6c6d;
    margin: 1rem auto;
    text-transform: uppercase;
  }
  
  #submit_button:hover{
    background: #275d94;
  }

.header_div{
    display: flex;
    margin: 2em 2em 2em 2em;
}

.image_div{
    width: 40%;
    float:left;
    display: inline-block;
    align-self: flex-end;
}

.additional_content_div{
  width: 60%;
  float:right;
  display: inline-block;
  align-self: flex-end;
  text-align: right;
  font-size: small;
  color: grey;
}

/* SPINNER */

.sk-chase {
    width: 40px;
    height: 40px;
    position: absolute;
    animation: sk-chase 2.5s infinite linear both;
    margin: 0 auto;
    z-index: 9999;
    margin-top: 2em;
    top: 55%;
    left: 49%;
  }
  
  .sk-chase-dot {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0; 
    animation: sk-chase-dot 2.0s infinite ease-in-out both; 
  }
  
  .sk-chase-dot:before {
    content: '';
    display: block;
    width: 25%;
    height: 25%;
    background-color: #e3ebf3;
    border-radius: 100%;
    animation: sk-chase-dot-before 2.0s infinite ease-in-out both; 
  }
  
  .sk-chase-dot:nth-child(1) { animation-delay: -1.1s; }
  .sk-chase-dot:nth-child(2) { animation-delay: -1.0s; }
  .sk-chase-dot:nth-child(3) { animation-delay: -0.9s; }
  .sk-chase-dot:nth-child(4) { animation-delay: -0.8s; }
  .sk-chase-dot:nth-child(5) { animation-delay: -0.7s; }
  .sk-chase-dot:nth-child(6) { animation-delay: -0.6s; }
  .sk-chase-dot:nth-child(1):before { animation-delay: -1.1s; }
  .sk-chase-dot:nth-child(2):before { animation-delay: -1.0s; }
  .sk-chase-dot:nth-child(3):before { animation-delay: -0.9s; }
  .sk-chase-dot:nth-child(4):before { animation-delay: -0.8s; }
  .sk-chase-dot:nth-child(5):before { animation-delay: -0.7s; }
  .sk-chase-dot:nth-child(6):before { animation-delay: -0.6s; }
  
  @keyframes sk-chase {
    100% { transform: rotate(360deg); } 
  }
  
  @keyframes sk-chase-dot {
    80%, 100% { transform: rotate(360deg); } 
  }
  
  @keyframes sk-chase-dot-before {
    50% {
      transform: scale(0.4); 
    } 100%, 0% {
      transform: scale(1.0); 
    } 
  }