/* this css file is for projects specific overides */
 /* changes here will overide h3abionet.css */

/* data tables css */

/* Change background color of DataTable pagination elements */

.pagination .current {
  background:  rgb(0, 83, 3) !important;
}
/* data tables css */

/* Make all links in the footer white */
.footer-custom-row a {
  color: #fff !important;
  transition: color 0.3s ease;
}

/* Change link color on hover */
.footer-custom-row a:hover {
  color: rgb(255, 193, 7) !important;
}

/* Remove any inline styles for footer links */
.footer-custom-row a[style] {
  color: #fff !important;
}




/* footer css */

 /* Make all navbar links white */
.navbar-nav .nav-link,
.navbar-brand {
  color: white !important;
  transition: color 0.3s ease;
}

/* Change link color on hover */
.navbar-nav .nav-link:hover,
.navbar-brand:hover {
  color: rgb(255, 193, 7) !important;
}

/* Style for active/current page link */
.navbar-nav .nav-item.active .nav-link,
.navbar-nav .nav-link.active {
  color: rgb(255, 193, 7) !important;
}

/* Override Bootstrap's default text-bigblue class */
.text-bigblue {
  color: white !important;
}

/* Make sure the Home link is also white */
.navbar-brand i.fa-home {
  color: white;
}

 /* css for buttons in data tables */
 .button {
  background-color: rgb(0, 83, 3) !important;
  color: white !important;
  border: 2px solid rgb(0, 83, 3) !important;
  transition: all 0.3s ease !important;
}

.button:hover {
  background-color: rgb(0, 83, 3) !important;
  color: white !important;
}

a {
  color: rgb(0, 83, 3) !important;
}

a:hover {
  color:rgb(0, 83, 3) !important;
}

a:active {
  color: rgb(0, 83, 3) !important;
}


 /* white circle as background of top  left logo */
 .dot {
   height: 30px;
   width: 30px;
   background-color: white;
   border-radius: 50%;
   display: inline-block;
 }

 .margin_on_top_image {
   margin-right: 5px;
 }

 .bg-mibio {
   background-color: rgb(0, 83, 3);
   border-bottom: 2px rgb(0, 83, 3) solid;
 }

 .bg-border-bottom-mibio {
 
  border-bottom: 2px rgb(0, 83, 3) solid;
}

 .text-bigblue {
   color: white;
 }

 .text-bigblue a:hover {
   color: rgb(255, 193, 7);
 }



 #logo {
   position: absolute;
   /* display:flex; */
   top: 20px;
 }

 #logotext {
   /* position: absolute; */
   /* display:flex; */
   margin-left: 50px;
 }

 .navbar-brand,
 .nav-link {
   color: #ffffff !important;
   /* font-size: 18px; */
 }

 .search {
   margin-top: 5%;
 }

 /* CHECKBOXES */
 .search_type {
   display: inline-block;
   /* text-align: center; */
   /* margin-left: 18%; */
   margin-top: 20px;
 }

 .search_type .regular-checkbox {
   background-color: #688dc157;
 }

 .search_type label {
   display: inline;
 }

 .search_type .regular-checkbox {
   display: none;
 }

 .search_type .regular-checkbox+label {
   background-color: #688dc157;
   border: 1px solid #cacece;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
   padding: 9px;
   border-radius: 3px;
   display: inline-block;
   position: relative;
 }

 .search_type .regular-checkbox+label:active,
 .regular-checkbox:checked+label:active {
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
 }

 .search_type .regular-checkbox:checked+label {
   background-color: #688dc1;
   border: 1px solid #adb8c0;
   color: #000;
 }

 .search_type .regular-checkbox:checked+label:after {
   content: '\2714';
   font-size: 10px;
   position: absolute;
   top: 0px;
   left: 3px;
   color: #fff;
 }


 .search_type .big-checkbox+label {
   padding: 18px;
   width: 96px;
   height: 80px;
   margin: 12px 37px 10px;
 }

 .search_type .big-checkbox:checked+label:after {
   font-size: 28px;
   left: 6px;
 }

 .search_type #checkbox_2_1 {
   background-image: url(../img/noun_Disease_2078983.svg);
   background-position: center;
   /* Center the image */
   background-repeat: no-repeat;
   /* Do not repeat the image */
 }

 .search_type #checkbox_2_2 {
   background-image: url(../img/noun_Drug_2227411.svg);
   background-position: center;
   /* Center the image */
   background-repeat: no-repeat;
   /* Do not repeat the image */
 }

 .search_type #checkbox_2_3 {
   background-image: url(../img/noun_choice_of_option_2765906.svg);
   background-position: center;
   /* Center the image */
   background-repeat: no-repeat;
   /* Do not repeat the image */
 }

 .search_type #checkbox_2_4 {
   background-image: url(../img/noun_genes_1767492.svg);
   background-position: center;
   /* Center the image */
   background-repeat: no-repeat;
   /* Do not repeat the image */
 }

 /* RESULTS */
 .result-container {
   border: #688dc157 1px solid;
   border-radius: 10px;
   padding: 20px;
 }

 .list-data {
   border: 2px solid white;
   border-radius: 7px;
   padding: 10px;
   width: 80%;
   margin: 10px auto;
 }

 .snippet {
   font-size: 0.9em;
   color: #27405e;
   font-weight: 200;
 }

 .title {
   font-size: 1em;
   color: #27405e;
   /* font-weight: 500; */
   margin-top: 40px;
   text-decoration: none;
 }

 .empty-section {
   margin-top: 10%;
   text-align: center;
   font-style: italic;
 }

 .page-footer {
   background-color: #f4faff;
   color: #000000;
   position: initial;
   bottom: 0;
   width: 100%;
   height: 160px;
   padding: 20px 0px 0px 100px;
   flex-shrink: 0;
   margin-top: 30px;
   font-size: 0.8em;
   border-top: 4px #337ab7 solid;
 }

 .col .footer-link {
   color: #fff;
 }

 .page-footer a {
   color: #337ab7;
 }

 #detail-table th {
   font-size: 16px;
 }

 #detail-table tr {
   font-size: 14px;
 }

 /* @media (min-width: 1200px){
  .container {
      max-width: 1140px;
      min-height: 800px;
  }
} */

 .page-footer .container-fluid,
 .page-footer .row {
   width: 100%;
   padding-right: 0px !important;
   padding-left: 0px !important;
 }

 .faqs>li {
   padding-top: 25px;
 }

 .img-responsive {
   width: 150px;
   height: auto;
 }

 /* The sidebar menu */
 .sidenav {
   /* position: fixed; */
   z-index: 1;
   margin-top: 2em;
   background: #eee;
   overflow-x: hidden;
   /* padding: 8px 0; */
 }

 .sidenav a {
   padding: 10px 60px 10px 30px;
   text-decoration: none;
   font-size: 21px;
   color: #2196F3;
   display: block;
 }

 .sidenav a:hover {
   color: #064579;
 }

 @media screen and (max-height: 450px) {
   .sidenav {
     padding-top: 15px;
   }

   .sidenav a {
     font-size: 18px;
   }
 }

 /* footer css 22october */
 .page-footer_new {
   background-color:rgb(0, 0, 0);
   color: #ffffff !important;
   position: initial;
   /* bottom: 0; */
   /* width: 100%; */
   /* height: 160px; */
   /* padding: 20px 0px 0px 100px; */
   /* flex-shrink: 0; */
   margin-top: 1rem;
   font-size: 0.8em;
 }

 .panel {
   border-radius: 0.3rem;
   padding: 0.7rem;
   margin-bottom: 0rem;
   margin-right: 1rem;
 }


 .footer_top_bg {
  position: relative; /* Required for pseudo-element positioning */
  padding-top: 15px; /* Adds space between the line and content */
}

/* Gradient line above the footer */
.footer_top_bg::before {
  content: '';
  position: absolute;
  top: -15px; /* Positions line at the TOP of the div */
  left: 0;
  right: 0;
  height: 25px; /* Thickness of the line */
  background: linear-gradient(to right, rgb(0, 189, 69), rgb(255, 205, 0), rgb(214, 0, 15));
}




 /* 
  ######## css for background image######## */
.header_top_bg_search {
  background: url("/static/img/banner5.jpeg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  min-height: 25vh;
  margin-top: 0%;
  position: relative; /* Needed for pseudo-element border */

  /* OPTION 1: Simple solid border */
  border-bottom: 5px solid #ffffff; /* White border */
  
  /* OPTION 2: Gradient border using pseudo-element (recommended) */
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 25px; /* Border thickness */
    background: linear-gradient(to right, rgb(0, 189, 69), rgb(255, 205, 0), rgb(214, 0, 15));
  }
}




 .header_top_bg_about {
   /* height: 100%; */
   background: url("/static/img/banners2.jpeg");
   /* width: 100%; */
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   /* background-attachment: fixed; */
   min-height: 25vh;
   margin-top: 0%;
   position: relative; /* Needed for pseudo-element border */

   /* OPTION 1: Simple solid border */
   border-bottom: 5px solid #ffffff; /* White border */
   
   /* OPTION 2: Gradient border using pseudo-element (recommended) */
   &::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 25px; /* Border thickness */
     background: linear-gradient(to right, rgb(0, 189, 69), rgb(255, 205, 0), rgb(214, 0, 15));
   }
 }


 .header_top_bg_summary {
   /* height: 100%; */
   background: url("/static/img/banner5.jpeg");
   /* width: 100%; */
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   /* background-attachment: fixed; */
   min-height: 25vh;
   margin-top: 0%;
   position: relative; /* Needed for pseudo-element border */

   /* OPTION 1: Simple solid border */
   border-bottom: 5px solid #ffffff; /* White border */
   
   /* OPTION 2: Gradient border using pseudo-element (recommended) */
   &::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 25px; /* Border thickness */
     background: linear-gradient(to right, rgb(0, 189, 69), rgb(255, 205, 0), rgb(214, 0, 15));
   }
 }


 .header_top_bg_resources {
   /* height: 100%; */
   background: url("/static/img/banner9.jpeg");
   /* width: 100%; */
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   /* background-attachment: fixed; */
   min-height: 25vh;
   margin-top: 0%;
   position: relative; /* Needed for pseudo-element border */

   /* OPTION 1: Simple solid border */
   border-bottom: 5px solid #ffffff; /* White border */
   
   /* OPTION 2: Gradient border using pseudo-element (recommended) */
   &::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 25px; /* Border thickness */
     background: linear-gradient(to right, rgb(0, 189, 69), rgb(255, 205, 0), rgb(214, 0, 15));
   }
 }

 .header_top_bg_help {
   /* height: 100%; */
   background: url("/static/img/banner4.jpeg");
   /* width: 100%; */
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   /* background-attachment: fixed; */
   min-height: 25vh;
   margin-top: 0%;
   position: relative; /* Needed for pseudo-element border */

   /* OPTION 1: Simple solid border */
   border-bottom: 5px solid #ffffff; /* White border */
   
   /* OPTION 2: Gradient border using pseudo-element (recommended) */
   &::after {
     content: '';
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 25px; /* Border thickness */
     background: linear-gradient(to right, rgb(0, 189, 69), rgb(255, 205, 0), rgb(214, 0, 15));
   }
 }




 /* 
######## vertically center overlay text using flexbox ######## */
 .vcenter-item {
   display: flex;
   align-items: center;
   justify-content: center;


 }

 /*
######## css for overlay text in top header ######## */
 .header_top_bg_search .text_top_bg {
   color: #fff;
   font-size: 25px;
   background: rgba(0, 0, 0, 0.4);
   padding: 11.5px !important;
   border-radius: 10px;

   margin-left: auto;
   margin-right: auto;
 }

 .header_top_bg_about .text_top_bg {
   color: #fff;
   font-size: 25px;
   font-family: Roboto;
   /* text-align: center; */
   text-transform: sentencecase;
   background: rgba(0, 0, 0, 0.4);
   padding: 11.5px !important;
   /* position: relative; */
   /* top: 23%;
   left: 50%; */
   /* -ms-transform: translateY(-50%);
   transform: translateY(-50%); */
   /* transform: translate(-50%, -50%); */
   border-radius: 10px;

   margin-left: auto;
   margin-right: auto;
 }



 .header_top_bg_summary .text_top_bg {



   color: #fff;
   font-size: 25px;
   font-family: Roboto;
   /* text-align: center; */
   text-transform: sentencecase;
   background: rgba(0, 0, 0, 0.4);
   padding: 11.5px !important;
   /* position: relative; */
   /* top: 23%;
  left: 50%; */
   /* -ms-transform: translateY(-50%);
  transform: translateY(-50%); */
   /* transform: translate(-50%, -50%); */
   border-radius: 10px;

   margin-left: auto;
   margin-right: auto;
 }

 .header_top_bg_resources .text_top_bg {



   color: #fff;
   font-size: 25px;
   font-family: Roboto;
   /* text-align: center; */
   text-transform: sentencecase;
   background: rgba(0, 0, 0, 0.4);
   padding: 11.5px !important;
   /* position: relative; */
   /* top: 23%;
 left: 50%; */
   /* -ms-transform: translateY(-50%);
 transform: translateY(-50%); */
   /* transform: translate(-50%, -50%); */
   border-radius: 10px;

   margin-left: auto;
   margin-right: auto;
 }


 .header_top_bg_help .text_top_bg {



   color: #fff;
   font-size: 25px;
   font-family: Roboto;
   /* text-align: center; */
   text-transform: sentencecase;
   background: rgba(0, 0, 0, 0.4);
   padding: 11.5px !important;
   /* position: relative; */
   /* top: 23%;
left: 50%; */
   /* -ms-transform: translateY(-50%);
transform: translateY(-50%); */
   /* transform: translate(-50%, -50%); */
   border-radius: 10px;

   margin-left: auto;
   margin-right: auto;
 }

 h3 {
   font-size: 36px !important;
   color: black !important;
 }

 .top_title_text {
   margin-top: 1.25rem;
   margin-left: 0px;
 }

 /* css for side bar and content area  */

 .page-section {
   /* height: 480px; */
   /* width: 80%;
      margin-left: 35%; */
   margin-top: 0.1rem;
   padding: 2em;
   /* background: linear-gradient(45deg, #43cea2 10%, #185a9d 90%);
  color: white; */
   /* box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.4); */
   padding: 10px;
   border: 1px solid #ccc;
   border-radius: 5px;
 }

 .navigation {
   background-color: rgb(0, 83, 3);
   
   border-radius: 5px;
   
   padding-top: 55px;
   padding-bottom: 55px;
   margin-bottom: 25px;
   
   width: 100%;
   border: 1px solid #ccc;
   /* line-height: 200%; */
   /* position: fixed; */
   /* top: 0%; */
   /* margin-left: 2%; */
   /* margin-top: 0; */
   /* background-color: lightgray; */
   /* color: #fff !important; */
   /* border-radius: 1px; */
   /* box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.4); */
 }



/* agmp previous */
 /* .navigation { */
  /* position: fixed; */
  /* top: 0%; */
  /* width: 100%; */
  /* margin-left: 2%; */
  /* margin-top: 0; */
  /* background-color: lightgray; */
  /* color: #fff !important; */
  /* background-color: rgb(51, 122, 183); */
  /* margin-bottom: 25px; */
  /* border-radius: 1px; */
  /* box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.4); */
  /* padding-top: 55px; */
  /* padding-bottom: 55px; */
  /* border: 1px solid #ccc; */
  /* border-radius: 5px; */
  /* line-height: 200%; */
/* } */



 .navigation a {
   color: white !important;
 }

 .navigation a:hover {
  color: rgb(255, 193, 7) !important;
}



 ul .no_style {
   list-style-type: none;
   color: #ccc;

 }


 .main_min_height {
   min-height: 35vh;
 }

 /* Home page css for select options and images next to options, 6 Feb 2024 */

 #id_model_selection li {
  display: inline-block; /* or 'inline' */
  margin-right: 5%; /* Optional: to add some space between items */
  list-style-type: none;
}

#id_model_selection {

  padding-bottom: 0% !important;
  padding-top: 0.8% !important;
}



.errorlist {
  display: none;
}

.center_form_contents {
text-align: center;

}



#id_search_query {              
width: 100% !important;

}

/* display gene in production */
#id_model_selection_gene{
  background-image: url("/static/img/noun_genes_1767492.svg");
  background-color: white;
  background-position: right center;
  background-repeat: no-repeat;
  -webkit-appearance: none; /* Removes default style of select in Safari */
  -moz-appearance: none; /* Removes default style of select in Firefox */
  appearance: none; /* Removes default style of select in modern browsers */


}

#id_model_selection_variant{
  background-image: url("/static/img/noun_choice_of_option_2765906.svg");
  background-color: white;
  background-position: right center;
  background-repeat: no-repeat;
  -webkit-appearance: none; /* Removes default style of select in Safari */
  -moz-appearance: none; /* Removes default style of select in Firefox */
  appearance: none; /* Removes default style of select in modern browsers */
 


}

#id_model_selection_drug{

  background-image: url("/static/img/noun_Drug_2227411.svg");
  background-color: white;
  background-position: right center;
  background-repeat: no-repeat;
  -webkit-appearance: none; /* Removes default style of select in Safari */
  -moz-appearance: none; /* Removes default style of select in Firefox */
  appearance: none; /* Removes default style of select in modern browsers */
 

}


#id_model_selection_disease{
  background-image: url("/static/img/noun_Disease_2078983.svg");
  background-color: white;
  background-position: right center;
  background-repeat: no-repeat;
  -webkit-appearance: none; /* Removes default style of select in Safari */
  -moz-appearance: none; /* Removes default style of select in Firefox */
  appearance: none; /* Removes default style of select in modern browsers */
}
/* Home page css for select options and images next to options, 6 Feb 2024 */

/* Summary page css  6 Feb 2024 */
.graph-custom-class .nav-link {
  color: rgb(0, 83, 3) !important; /* Red font color for links */
}
/* Summary page css  6 Feb 2024 */