:root{
    --bs-primary: #459AEF;
    /*--bs-primary-rgb: 56, 128, 255;*/
    --bs-primary-rgb: 69, 154, 239;
    --bs-blue: #459AEF;
}

.btn-primary{
    --bs-btn-bg: #459AEF;
    --bs-btn-border-color: #459AEF;
    --bs-btn-disabled-bg: #459AEF;
    --bs-btn-disabled-border-color: #459AEF;
}

.btn-outline-primary {
    --bs-btn-color: #459AEF;
    --bs-btn-border-color: #459AEF;
    --bs-btn-hover-bg: #459AEF;
    --bs-btn-hover-border-color: #459AEF;
    --bs-btn-active-bg: #459AEF;
    --bs-btn-active-border-color: #459AEF;
    --bs-btn-disabled-color: #459AEF;
    --bs-btn-disabled-border-color: #459AEF;
  }

footer{
    background-image: url("/web/assets/images/InnoCyto-Footer.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    color: white;
}
footer .nav-link{
    color: white !important;
}
footer #bottom-bar{
    background-color: black;
}
footer > div > div > div.col > ul.nav {
    padding-top:25px;
}

#home-carousel{
    /*height: 390px;*/
    /*background-image: url("/web/assets/images/banner/banner_4.jpg");*/
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center; 
    
    color: white;
}

.carousel-indicators{
    margin-bottom: 5px;
}
.carousel-indicators .active {
    background-color: #fac748;
}

.carousel-indicators [data-bs-target]{
    width: 12px;
    height: 12px;
    border-radius: 100%;
}
div.carousel-indicators > button {
    opacity: 100% !important;
}
.serif {
    font-family: "Times New Roman", "Roboto", "Arial", "sans-serif";
}

div.card {
    border: none;
    background: none;
}

.card-index > .card-img-top {
    height: 250px;
    overflow: hidden;
}

.inno-card-img-top {
    /*height: 250px;*/
    width: 150px;
    display: block;
    margin: 0 auto;
}
.round-image{
    border-radius: 75px;
}

.square-image {
    border-radius: 25px;
}
.inno-shadow {
    border-radius: 5px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
}
.card-index {
    width: 330px;
    margin: auto;
}
.card-index > .card-body > .card-title{
    font-size: 18px;
}
.card-title > a:hover {
    color: #D03690;
}
.banner_products {
    height: 260px;
    background-image: url("/web/assets/images/products/Products-Overview-header.png");
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center;
}
.banner_antibodies {
    height: 260px;
    background-image: url("/web/assets/images/products/Antibodies-header-narrow.png");
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center;
}
.banner_ancillary {
    height: 260px;
    background-image: url("/web/assets/images/products/Ancillary-Products-header.png");
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center;
}
.banner_cell {
    height: 260px;
    background-image: url("/web/assets/images/services/Custom-Cell-based-assays-header.png");
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center;
}
.banner_recombinant_proteins {
    height: 260px;
    background-image: url("/web/assets/images/products/Products-Recombinant-Header.png");
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center;
}
.banner_protocols {
    height: 260px;
    background-image: url("/web/assets/images/Protocols-header.png");
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center;
}
.banner_literature {
    height: 260px;
    background-image: url("/web/assets/images/Literature-header.png");
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center;
}
.banner_protocols_gradient {
    height: 160px;
    background: #3880FF;
    background: linear-gradient(90deg,rgba(56, 128, 255, 1) 60%, rgba(208, 54, 144, 1) 100%);
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center;
}
.banner_services_recombinant {
    height: 260px;
    background-image: url("/web/assets/images/services/Services-Recombinant-header-background.png");
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center; 
}
.banner_1 {
    height: 260px;
    background-image: url("/web/assets/images/banner/banner_1.jpg");
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center;
}

.banner_1_new {
    height: 260px;
    background-image: url("/web/assets/images/services/Custom-Services-header.png");
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center;
}

.banner_2 {
    height: 260px;
    background-image: url("/web/assets/images/banner/banner_2.jpg");
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center; 
}
.banner_2_new {
    height: 260px;
    background-image: url("/web/assets/images/banner/AdobeStock_1374930371-wide.png");
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center;
}
.banner_3 {
    height: 260px;
    background-image: url("/web/assets/images/banner/banner_3.jpg");
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center; 
} 
.banner_conjugations {
    height: 260px;
    background-image: url("/web/assets/images/services/Service-Conjugation-header-wide-blue.png");
    align-items: center;
    display: flex;
    background-size: cover;
    background-position: center;
}
.page_banner h1 {
    font-weight: 700;
    color: white;
    font-size: 48px;
    text-shadow: 5px 5px 5px black;
    margin-left: 1rem;
} 
#scrollToTab {
    scroll-margin-top: 40px;
}
.nav-item {
  padding: 0.5rem 0xp;
}

#conjugation_tabs {
    background-color: #f2f2f2;
}

#conjugation_tabs .nav-item button{
    color: black;
    background-color: white;
    border: 3px outset #0d6efd;
    height: 50px;
    min-width: 180px;
    font-size: 14px;
    margin-right: 2px;
}
#conjugation_tabs .nav-item button.active{
    background-color: #3880ff; 
    color: white;
    font-weight: bold;
}

#conjugation_tabs .nav-item button:hover{
    font-weight: bold;
    background-color: #f2f2f2;
}
#conjugation_tabs .nav-item button.active:hover{
    background-color: #4854e0; 
}

.dropdown-menu{
    min-width: 16rem;
}

.dropdown-menu-mega{
    width: fit-content;
    white-space: nowrap;
}

a{
    text-decoration: none;
}
#megamenu_products > * li > a{
    font-size: 14px;
    color: black;
}
#megamenu_services > * li > a{
    font-size: 14px;
    color: black;
}

.filter_section {
    max-height: 150px; 
    overflow-y: auto;
}

#top_button {
  display: none;
  position: fixed;
  bottom: 30px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #3880ff;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#top_button:hover {
  background-color: #4a0587;
  transition-duration: 0.25s;
}



div.dtsp-verticalContainer{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}
 
div.dtsp-verticalContainer div.dtsp-verticalPanes,
div.dtsp-verticalContainer div.container{
    width: 30%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 0;
}
 
div.dtsp-verticalContainer div.dtsp-verticalPanes{
        flex-grow: 0;
        flex-shrink: 1;
        flex-basis: 20%;
        max-width: 20%;
}
 
div.dtsp-verticalPanes {
    margin-right: 20px;
}
 
div.dtsp-title {
    margin-right: 0px !important;
    margin-top: 13px !important;
}
 
input.dtsp-search {
    min-width: 0px !important;
    padding-left: 0px !important;
    margin: 0px !important;
}
 
div.dtsp-verticalContainer div.dtsp-verticalPanes div.dtsp-searchPanes{
    flex-direction: column;
    flex-basis: 0px;
}
 
div.dtsp-verticalContainer div.dtsp-verticalPanes div.dtsp-searchPanes div.dtsp-searchPane{
    flex-basis: 0px;
}
 
div.dtsp-verticalContainer div.container{
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 60%;
}
 
div.dtsp-panesContainer {
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 1em !important;
}
 
div.dtsp-titleRow {
  display: none;
}
 
div.dtsp-titleRow div.dtsp-title {
  margin-top: 0 !important;
  padding-top: 0;
}
 
html.dark div.dtsp-panesContainer {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

div.dtsp-panesContainer div.dtsp-searchPanes div.dtsp-searchPane{
    margin-top: 0 !important;
    margin-bottom:15px !important;
}
div.dtsp-panesContainer div.dtsp-searchPane div.dtsp-topRow{
    margin-top: 0;
}
table.dataTable th.dt-type-numeric, table.dataTable th.dt-type-date, table.dataTable td.dt-type-numeric, table.dataTable td.dt-type-date{
    text-align: left;
}

.dt-scroll-body{
    height: unset !important;
}

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

.gray-section {
    background-color: #f0f1fe;
}
.purple-section {
    background-color: #e2e5fe;
}
.inno-product-category {
    background-color: #f0f1fe;
    padding: 20px;
    margin-bottom: 20px;
}
.purple-line {
    border-top: 3px solid #7471ff;
    min-width: 15%;
    margin: 1.25rem 1.25rem 0 1.25rem;
}
.inline {
    display: inline-block;
    vertical-align: middle;
}
.accent {
    color: #d03690;
    font-size: 1.25rem;
}
.inno-btn {
    color: #2031b4;
    background-color: #ffffff;
    padding: 12px;
    border-radius: 8px;
    border: 2px solid #fac748;
    white-space: nowrap;
    margin-left: 10%;
    display: inline-block;
}
.inno-btn:hover {
    background-color: #fac748;
}
.red-arrow:after {
    content: "";
    display: inline-block;
    vertical-align: bottom;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
    border-left: 18px solid #f40000;
}
.blue-arrow:after {
    content: "";
    display: inline-block;
    vertical-align: bottom;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #296efd;
    margin-right: 4px;
}
i.fa {
    color: #0d6efd;
}
.inno-blue-heading {
    font-size: 1.4rem;
    font-weight: 600;
    color: #0d6efd;
}
.inno-button {
    color: #0d6efd;
    white-space: nowrap;
    height: 32px;
    margin-top: 10px;
    margin-bottom: 20px;
    background-color: #FFFFFF;
}
.inno-button:hover > .blue-arrow:after {
    content: "";
    display: inline-block;
    vertical-align: bottom;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 16px solid #FFFFFF;
    margin-right: 4px;
}
.mr-10 {
    margin-right: 10px;
}
.ml-10 {
    margin-left: 10px;
}
#inno-mobile-menu {
    display: none;
}

#innoLinks > li.nav-item.dropdown > a {
    padding-left: 0 !important;
}
.blurred-image {
    position: absolute;
    margin-left: 27%;
}
.blurred-image:hover {
    filter: blur(5px);
    margin-left: 28%;
}
.inno-about-heading {
    color: #0d6efd;
    font-size: 1.25rem;
}
.inno-icon-img {
    max-width: 180px;
    height: 100%;
    padding-right: 20px;
}
.inno-service-icon {
    width: auto;
    height: 70px;
}
.inno-service-icon-process {
    width: auto;
    height: 40px;
    margin: 3px 5px 2px 10px;
}
.inno-check {
    color: #0d6efd;
    font-size: 1.25rem;
    margin: 5px 12px 5px 2px;
}
#myTab {
    margin-left: 2rem !important;
}
.inno-subheading {
    font-size: 1.125rem;
    font-style: italic;
}
#inno-video {
    position: absolute;
    top: 240px;
    left: 50%;
    transform: translate(-50%, -50%);
    /*right: 29%;*/
    /*right: 0;*/
    /*bottom: 0;*/
    /*min-width: 100%;*/
    /*min-height: 100%;*/
    height: 260px;
    opacity: 0.6;
}
div.dtsp-verticalPanes-toggle {
    display:none;
}
@media (max-width: 640px) {
    .banner_protocols_gradient {
        height: 200px;
    }
    .banner_protocols_gradient > div > h1 {
        font-size: 32px;
    }
    #inno-video {
        top: 326px;
    }
    #innoLinks > li.nav-item.dropdown > a {
        padding-left: 1.5rem !important;
    }
    #innoLinks {
        display: none;
        margin-top: 25px;
    }
    #inno-mobile-menu {
        display: block;
        position: absolute;
        top: 12px;
        left: 10%;
    }
    #home-carousel-div > div.carousel-inner > div.carousel-item > a > img {

    }
    body > footer > div > div.row.pt-4 > div:nth-child(2) {
        padding: 20px;
        margin-top: 70px;
    }
    body > footer > div > div.row.pt-4 > div:nth-child(1) > a > img {
        min-width: 340px;
    }
    body > footer > div > div.row.pt-4 > div:nth-child(1) {
        min-width: 53% !important;
    }
    .purple-line{
        min-width: 60%;
    }
    .inno-service-icon {
        height: 40px;
        display: block !important;
    }
    .inno-about-heading {
        font-size: 1.125rem;
    }
    .inno-rotate-90 {
        transform: rotate(90deg);
    }
    div.dtsp-verticalPanes {
        display: none;
    }
    #product_table > tbody > tr > td:nth-child(2), #product_table > tbody > tr > td:nth-child(3), #product_table > tbody > tr > td:nth-child(4), #product_table > tbody > tr > td:nth-child(8),
    #product_table > thead > tr > th:nth-child(2), #product_table > thead > tr > th:nth-child(3), #product_table > thead > tr > th:nth-child(4) {
        display: none;
    }
    div.dtsp-verticalPanes-toggle {
        display:block;
    }
}