.main-table {
    font-family: "Helvetica Neue", Helvetica, Arial;
    display: flex;
    flex-direction: column;
}

.search-container {
    display: grid;
    grid-row-gap: 10%;
    padding-bottom: 1em;
}

.slider-containers{
    display:grid;
    grid-template-areas: 'header header' '. .';
}

.slider-containers .selection-header{
    grid-area:header; 
}


#regexString {
    width: 100%;
    font-size: 16px;
    padding: 12px 20px;
    border: 1px solid #ddd;
}

/* For bubble message */
.tooltipRegex .tooltiptextRegex {
    visibility: hidden;
    width: 120px;
    background-color: #6da7c3b3;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltipRegex:hover .tooltiptextRegex {
    visibility: visible;
}

.tooltipRegex .tooltiptextRegex::after {
    content: " ";
    position: absolute;
    top: 50%;
    right: 100%;
    /* To the left of the tooltip */
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent rgba(103, 203, 222, 0.9) transparent transparent;
}


/*  The loader Spinner */
.spinner-grow {
    width: 40 !important;
    height: 40 !important;
}

input {
    border-radius: 5px;
}

#resultTab {
    border-collapse: collapse;
}

#resultTab > tr {
    border-bottom: 1px solid #9e9e9e3d;
}

.global-header > th:nth-child(3) {
    padding-left:10px;
}


.table-sort-icon {
    vertical-align: middle;
    /* transition: transform .3s ease; */
}

.table-sort-icon.ascending {
    transform: rotate(180deg);
}

.table-sort-icon.highlighted {
    color: rgba(239, 71, 111);
}

.seq-header {
    background-color: #DCDCDC;
}

.seq-header > td:nth-child(1) {
    padding: 5px 0 5px 5px;
}

.seq-header > td:nth-child(2) {
    padding: 5px 0;
}

.seq-header > td:nth-child(3) {
    padding: 5px 5px 5px 0;
    text-align: center;
}

.sg-occ{
    text-align:center;
}

.sgrna-organism {
    padding: 3px;
    width:80%; 
}

.organism-line:hover{
    background-color: lightgray;
}

.organism-line.click-selected{
    background-color:lightblue;
}

.organism-line.click-selected:hover{
    background-color:lightblue; 
}

.organism-line.checkbox-selected{
    background-color:#f2f2f2;
}

.organism-line.checkbox-selected:hover{
    background-color:lightgray;
}

.pagination{
    display:grid; 
    grid-template-columns: max-content max-content;
    grid-column-gap: 1.3rem;
}

 /* Pagination links */
 .page-field {
    color: black;
    text-decoration: none;
    padding:5px 5px; 
    transition: background-color .3s;
    text-align:center; 
    cursor:pointer;
  }

  .pagination-select-page{
    padding-top:2px;
  }
  
  /* Style the active/current link */
  .page-field.active {
    background-color: dodgerblue;
    color: white;
  }
  
  /* Add a grey background color on mouse-over */
  .page-field:hover:not(.active) {background-color: #ddd;} 

  .page-field.disabled{
      color:grey;
  }

  .page-numbering{
      display:flex; 
  }

  .pagination-select-entries{
      padding-top:5px; 
  }

  .selection-header{
    display:inline-block;
    margin-bottom: 0.5rem; 
    font-weight: bold;
  
  }

  .sgrna-search-container{
      display:grid; 
      grid-template-areas: "header header" "filter close";
      grid-template-columns: auto min-content;
  }

  .sgrna-search-container .selection-header{
      grid-area:header; 
  }

  .close-icon{
      align-self:center; 
      margin-left:0.5em; 
      cursor: pointer; 
  }

  .close-icon:hover{
      font-weight: bold;
  }