body {
  display: flex;
}

.grid-stack {
  /* background: #e9ecef; */
  background: #FFFFFF;
  min-height: -moz-calc(100vh - 510px);
  min-height: -webkit-calc(100vh - 510px);
  min-height: -o-calc(100vh - 510px);
  min-height: calc(100vh - 510px);
}

.grid-stack > .grid-stack-item[gs-x="1"]  { left: 4%}
.grid-stack > .grid-stack-item[gs-x="2"]  { left: 8% }
.grid-stack > .grid-stack-item[gs-x="3"]  { left: 12% }
.grid-stack > .grid-stack-item[gs-x="4"]  { left: 16% }
.grid-stack > .grid-stack-item[gs-x="5"]  { left: 20% }
.grid-stack > .grid-stack-item[gs-x="6"]  { left: 24% }
.grid-stack > .grid-stack-item[gs-x="7"]  { left: 28% }
.grid-stack > .grid-stack-item[gs-x="8"]  { left: 32% }
.grid-stack > .grid-stack-item[gs-x="9"]  { left: 36% }
.grid-stack > .grid-stack-item[gs-x="10"]  { left: 40% }
.grid-stack > .grid-stack-item[gs-x="11"]  { left: 44% }
.grid-stack > .grid-stack-item[gs-x="12"]  { left: 48% }
.grid-stack > .grid-stack-item[gs-x="13"]  { left: 52% }
.grid-stack > .grid-stack-item[gs-x="14"]  { left: 56% }
.grid-stack > .grid-stack-item[gs-x="15"]  { left: 60% }
.grid-stack > .grid-stack-item[gs-x="16"]  { left: 64% }
.grid-stack > .grid-stack-item[gs-x="17"]  { left: 68% }
.grid-stack > .grid-stack-item[gs-x="18"]  { left: 72% }
.grid-stack > .grid-stack-item[gs-x="19"]  { left: 76% }
.grid-stack > .grid-stack-item[gs-x="20"]  { left: 80% }
.grid-stack > .grid-stack-item[gs-x="21"]  { left: 84% }
.grid-stack > .grid-stack-item[gs-x="22"]  { left: 88% }
.grid-stack > .grid-stack-item[gs-x="23"]  { left: 92% }
.grid-stack > .grid-stack-item[gs-x="24"]  { left: 96% }
.grid-stack > .grid-stack-item[gs-x="25"]  { left: 100% }

.grid-stack > .grid-stack-item[gs-w="1"]  { width: 4% }
.grid-stack > .grid-stack-item[gs-w="2"]  { width: 8% }
.grid-stack > .grid-stack-item[gs-w="3"]  { width: 12% }
.grid-stack > .grid-stack-item[gs-w="4"]  { width: 16% }
.grid-stack > .grid-stack-item[gs-w="5"]  { width: 20% }
.grid-stack > .grid-stack-item[gs-w="6"]  { width: 24% }
.grid-stack > .grid-stack-item[gs-w="7"]  { width: 28% }
.grid-stack > .grid-stack-item[gs-w="8"]  { width: 32% }
.grid-stack > .grid-stack-item[gs-w="9"]  { width: 36% }
.grid-stack > .grid-stack-item[gs-w="10"]  { width: 40% }
.grid-stack > .grid-stack-item[gs-w="11"]  { width: 44% }
.grid-stack > .grid-stack-item[gs-w="12"]  { width: 48% }
.grid-stack > .grid-stack-item[gs-w="13"]  { width: 52% }
.grid-stack > .grid-stack-item[gs-w="14"]  { width: 56% }
.grid-stack > .grid-stack-item[gs-w="15"]  { width: 60% }
.grid-stack > .grid-stack-item[gs-w="16"]  { width: 64% }
.grid-stack > .grid-stack-item[gs-w="17"]  { width: 68% }
.grid-stack > .grid-stack-item[gs-w="18"]  { width: 72% }
.grid-stack > .grid-stack-item[gs-w="19"]  { width: 76% }
.grid-stack > .grid-stack-item[gs-w="20"]  { width: 80% }
.grid-stack > .grid-stack-item[gs-w="21"]  { width: 84% }
.grid-stack > .grid-stack-item[gs-w="22"]  { width: 88% }
.grid-stack > .grid-stack-item[gs-w="23"]  { width: 92% }
.grid-stack > .grid-stack-item[gs-w="24"]  { width: 96% }
.grid-stack > .grid-stack-item[gs-w="25"]  { width: 100% }

.grid-title {
  text-align: center;
  width: 100%;
}

.draggable {
  cursor: move;
}

.bg-light-blue {
  /* background-color: #82B7DC !important; */
  /* background-color: #dbe2e4 !important; */
  background-color: #f4f7fd !important;
  /* background-color: #d6e2f6 !important; */
  box-shadow: 1px 1px 5px 1px rgba(20,20,20,0.4);
  color: #555555 !important;
}

.bg-settings-light-grey {
  background-color: #f8f9fa !important;
  border-color: rgba(0,0,0,.125) !important;
  width: 99.9%;
  border: 1px solid;
  margin-left: 1px !important;
  margin-right: 1px !important;
}

.bg-white-custom{
  background-color: #FFFFFF !important;
  margin-left: 1px !important;
  margin-right: 1px !important;
}

.btn-close-custom {
  background: none !important;
}

.btn-close-custom > i {
  margin: -.2em;
  font-size: 28px;
}

.sidebar {
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  /* background-color: #111; */
  background-color: #f4f7fd !important;
  color: #555555 !important;
  padding-top: 60px;
  overflow-x: hidden;
  border-style: none solid none none;
  border-color: #d6d8dc;
}

#main {
  transition: margin-left 0.5s;
  padding: 0 16px 16px;
}

@media screen and (max-height: 450px) {
  .sidebar {
    padding-top: 15px;
  }
  .sidebar a {
    font-size: 18px;
  }

  hr { display: block; height: 1px;
    border: 0; border-top: 1px solid #ccc;
    margin: 1em 0; padding: 0; }
}

.loader {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #3498db; /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  margin: auto;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.index-ctr {
  width: 100%;
}

.clickable {
  cursor: pointer;
}

#NGCHM-fullscreen {
  display: none;
}

#NGCHM-fullscreen:fullscreen {
  display: block;
}

/* Sidebar */
.text-icon {
  font-size: inherit;
  line-height: inherit;
  vertical-align: top;
}

.img-rounded {
  border-radius: 10px;
}

.collapsible-content {
  padding: 5px 10px;
  background-color: #41464b;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

.collapsible-container {
  border: 1px solid #41464b;
  border-radius: 12px;
}
.sidebar {
  width: 250px;
  height: 100vh;
}
/* End Sidebar */

/* Visualization Settings */

.form-label-middle {
  vertical-align: middle;
}

.switch {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 30px;

}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f0ad4e;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) inset, 0 6px 20px 0 rgba(0, 0, 0, 0.19) inset;
  -webkit-transition: .6s;
  transition: .6s;
   border-radius: 4px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 28px;
  width: 10px;
  left: 0px;
  bottom: 1px;
  background-color: white;
  -webkit-transition: .6s;
  transition: .6s;
  border-radius: 4px;
}

input:checked + .slider {
  background-color: #5cb85c;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(190px);
}

/*------ ADDED CSS ---------*/
.slider:after
{
 content:'Correlation coefficient';
 color: white;
 display: block;
 position: absolute;
 /*transform: translate(-50%,-50%);
 top: 50%;
 left: 10%;*/
 font-size: 16px;
 font-family: "Helvetica Neue";
 padding-bottom: 4px;
 padding-left: 20px;
 padding-top: 4px;
}

input:checked + .slider:after
{
  content:'Samples';
  padding-left: 60px;
}


/* Multi study pie chart slider */
.slider_piechart {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #808588;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) inset, 0 6px 20px 0 rgba(0, 0, 0, 0.19) inset;
  -webkit-transition: .6s;
  transition: .6s;
   border-radius: 4px;
   width: 80px;
   height: 20px;
}

.slider_piechart:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 10px;
  left: 1px;
  bottom: 1px;
  background-color: white;
  -webkit-transition: .6s;
  transition: .6s;
  border-radius: 4px;
}

input:checked + .slider_piechart {
  background-color: #bebdb8;
  width: 80px;
  height: 20px;
}

input:focus + .slider_piechart {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider_piechart:before {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(68px);
}

/*------ ADDED CSS ---------*/
.slider_piechart:after
{
 content:'Bar chart';
 color: white;
 display: block;
 position: absolute;
 /*transform: translate(-50%,-50%);
 top: 50%;
 left: 10%;*/
 font-size: 12px;
 font-family: "Helvetica Neue";
 padding-bottom: 4px;
 padding-left: 12px;
 padding-top: 4px;
}

input:checked + .slider_piechart:after
{
  content:'Pie chart';
  padding-left: 12px;
  font-size: 12px
}

/*-----------------------------*/

/*--------- END --------*/

.nav-button{
  /*background-color: #c9ccd1;*/
  /*background-color: #41464b;*/
  /*background-color: #212529;*/
  border: 0px;
  /*color: #000000;*/
  /*color: #fff;*/
  display: block;
  padding-top: 4px;
  padding-bottom: 4px;
  text-decoration: none;
  /*transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;*/
  text-align: left;
  background-color: #FFFFFF !important;
  color: #555555 !important;
}

.nav-button-active, .nav-button:hover {
  background-color: #f4f7fd; /* Green */
  color: #555555;
  border: 0px;
  padding-top: 4px;
  padding-bottom: 4px;
  font-weight: bold;
}

.btn:hover{
  font-weight: bold;
  color: #555555;
}


.dropdown-menu .dropdown-submenu {
display: none;
margin-left: 20px;
background-color: grey;
/*position: absolute;
left: 100%;
top: 100px;*/
}

.dropdown-item .dropdown-submenu{
  display: none;
  margin-left: 20px;
  background-color: grey;
}
.dropdown-menu .dropdown-submenu-left {
right: 100%;
left: auto;
}
.dropdown-menu > li:hover > .dropdown-submenu {
display: block;
}

.dropdown-item:hover > .dropdown-submenu {
display: block;
}

.clear-btn{
  display: inline-block;
  font-size: 10px;
  padding-top: 2px;
  padding-bottom: 2px;
  background-color: grey;
  border: black;

}


#filtered_studies_table {
    font-size: 12px;
    /*table-layout: fixed*/
}

.form-control-search-field{
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0.25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.navbar-search-field{
  position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    margin-left: 0px;
}

.container-fluid-search-field{
  width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: auto;
    margin-left: auto;
}

.sidebar-metadata{
  background-color:#f4f7fd;
}

.filter-title{
  color:black
}

/* End Visualization Settings */
table.dataTable td {
  font-size: 14px;
  text-align: justify;
}

table.dataTable th {
  font-size: 14px;
  text-align: justify;
}

table.dataTable thead tr {
  background-color: rgb(208, 211, 214);
}