/*----------------------------------------------------------//
//  Custom CSIRO branded css script for Shiny applications 
//  built with shinydashboard and using the packages 
//  leaflet, DT (datatables), katex, shinyWidgets, plotly,
//  shinyjs
//
//  The css used to brand this application is based on the  
//  CSIRO Web Style Guide. It should be seen as an example 
//  and is not expected to suit all Shiny application design 
//  choices.
//
//  https://style-uat.csiro.au/CSIROau/Get-started/How-to-use)
//
//  Author: Louise Ord and Lauren Stevens
//  Date: 2019-01-11
//
//  Last modified by: Lauren Stevens
//  Date: 2022-03-23
//----------------------------------------------------------*/

/*--------//
    Fonts
//-------*/

/* Open Sans family, twice current size, very dark blue body text */
body {
  font-family: "Open Sans", sans-serif!important; 
  font-size: 16px;
  line-height: 1.4;
  color: #575757;
}

/* Scales font with browser width */
@media screen and (min-width: 1280px) {
  body {
    font-size: calc(16px + (20 - 16) * ((100vw - 1280px) / (2560 - 1280)));
  }
}


/* Header font */
.h1,.h2,.h3,.h4,.h5,.h6, h1, h2, h3, h4, h5, h6 {
  color: #00313c;
  font-family: Montserrat,"Open Sans",sans-serif!important;
  font-weight: 400; 
}

.h4, h4 {
  font-size: 1.1em;
}

/* verbatim text */
pre {
  font-size: 1em;
  background-color: #f9f9f9;
  border: 1px solid #D9D9D9;
}

/* link text */
a {
    color: #00596c!important;
}

a:hover {
    color: #005c97!important;
    text-decoration: underline!important;
}

/* label font */
label {
  font-size: 1.1em;
  color: #00313c;
  font-family: Montserrat,"Open Sans",sans-serif;
  font-weight: 400;
}

/* default sidebar font */
.sidebar {
    color: #575757!important;
    font-size: 17px!important;
}

/* sidebar link text */
.sidebar a {
    color: #00596c;
}

.sidebar a:hover {
    color: #005c97;
    text-decoration: underline;
}

/*---------//
    Layout 
//--------*/

/* tabs box */
.nav-tabs-custom {
    box-shadow: 0 0 0 rgba(0,0,0,.1);
}

/* tabs active border top */
.nav-tabs-custom>.nav-tabs>li.active {
    border-top-color: #00A9CE;
}

/* well */
.well {
    background-color: #f9f9f9;
    border: 1px solid #D9D9D9;
    border-radius: 0;
    font-size: 0.9em;
}

/* horizontal row */
hr {
    border-top: 1px solid #f4f4f4!important;
    margin-top: 0!important;
    margin-bottom: 0!important;
}

/*---------------------//
    Tables
//---------------------*/

.table {
    margin-bottom: 0;
}

th {
    font-weight: 200;
}

/* reduce header space in tables */
/*div.dataTables_scrollHead{
  overflow: inherit!important;  
}*/

/*tootip for datatable*/
.qtip-big { 
  font-size: 15px;
  line-height: 18px;
  /*white-space: nowrap;*/
  word-spacing: 1px;
  /*max-width: none!important;*/
  /*background-color: #FFFFFF;
  color: #000000;
  border-color: #000001;*/
}

/* float haplotype tables 'length changing input control' to the right
because the download button gets cut off on the right*/
div.haploright {
  float: right;
}
/*div.dt-buttons {
  float: right;
}*/

/*-----------------//
    Control Widgets
//-----------------*/

/* widget container width 100% (overrides 300px) */
.shiny-input-container:not(.shiny-input-container-inline) {
    width: 100%!important;
    max-width: 100%!important;
}

/* dropdown item font colour */
.selectize-dropdown,.selectize-input,.selectize-input input {
    color: #575757!important;
    font-size: 1.1em!important;
}

.dbtn {
  margin-left: 15px!important;
}

.link_button {
  /*font: bold 14px Arial;*/
  text-decoration: none;
  background-color: #white;
  color: #333333;
  padding: 2px 6px 2px 6px;
  border-top: 1px solid #333333;
  border-right: 1px solid #333333;
  border-bottom: 1px solid #333333;
  border-left: 1px solid #333333;
}

/* button */
.btn {
  padding-left: 1.5em!important;
  padding-right: 1.5em!important;
  font-family: "Montserrat","Open sans",sans-serif!important;
}

/* default button style */
.btn-default,.btn-default:active,.btn-default:focus {
    background-color: #004b87!important;
    border-color: #004b87!important;
    color: #ffffff!important;
    border-radius: 4px!important;
    transition:.2s background-color,.2s border,.3s padding!important;
    box-shadow: none!important;
    margin-right: 5px!important;
}

/* on hover default button style */
.btn-default:hover {
  color: #00313c!important;
  border-color: #f0f0f0!important;
  background-color: #f0f0f0!important;
  box-shadow: none;
}

.btn-default:active:focus {
  border-color: #004b87!important;
}

/* drop down menu */
.selectize-input {
  line-height: 1.4em!important;
  border-radius: 4px!important;
  border-color: #D9D9D9!important;
  box-shadow: none!important;
/*  height: 5em!important;*/
}

/* search input box */
div.dataTables_wrapper div.dataTables_filter input {
  height: 2em!important; 
}

/* range picker colours */
.irs-bar {
  border-top: 1px solid #00A9CE!important;
  border-bottom: 1px solid #00A9CE!important;
  background: #00A9CE!important;
}

.irs-from,.irs-to,.irs-single {
  color: #fff!important;
  background: #00A9CE!important;
}

/*-----------------//
    Shiny Widgets
//-----------------*/

/* Border of the radio buttons */
.pretty.state label:before {
  border-color: #D9D9D9!important;
}

/* Label text */
.pretty.state label {
  font-family: "Open Sans", sans-serif!important; 
  font-size: 1em!important;
  color: #575757!important;  
}

/* Modern slider styling */
.irs--modern.irs-min,.irs--modern.irs-max {
  background-color: #ededed!important;
}

/* Dropdown menus */
.bootstrap-select >.dropdown-toggle {
  background-color: white!important;
  color: #575757!important;
  font-size: 1.1em!important;
  line-height: 1.4em!important;
  border-radius: 4px!important;
  border-color: #D9D9D9!important;
  box-shadow: none!important;
  outline: 0!important;
}

.bootstrap-select.dropdown-toggle:focus,.bootstrap-select > select.mobile-device:focus +.dropdown-toggle {
  outline-color: transparent!important;
  border-color: #D9D9D9!important;
  outline-offset: -50px!important;
}

.bootstrap-select.dropdown-toggle:active:focus,.bootstrap-select > select.mobile-device:active:focus +.dropdown-toggle {
  outline-color: 0!important;
  border-color: #004b87!important;
  outline-offset: -50px!important;
}

.dropdown-menu >.active > a,.dropdown-menu >.active > a:focus {
  color: #fff!important;
  text-decoration: none;
  background-color: #00A9CE;
  outline: 0!important;
}

.dropdown-menu > li > a:hover {
  background-color: #e6e6e6!important;
  color: #005c97!important;
  text-decoration: underline!important;
}

/*--------------------//
    Font for katex
    used for formulae
//-------------------*/

.katex {
  font-size: 1em!important;
}

/*------------------//
    Shiny Dashboard 
//-----------------*/

/* Main body content vertical scroll */
.content-wrapper.container-fluid {
/*  height: 90vh; */
  overflow-y: auto!important; 
}
  
 /* Override fluid page in dynamic UI */
.container-fluid {
  padding-right: 0!important;
  padding-left: 0!important;
}

/* background colour */
.left-side,.main-sidebar,.wrapper {
  background-color: #fff!important;
}

/* sidebar */
.left-side.main-sidebar {
    background-color: #ffffff!important;
    border-right: 2px solid #f4f4f4!important;
}

/* --- Overall Header Configuration --- */
.main-header {
  height: 67px !important;
  background-color: #000000 !important;
  border-bottom: 1px solid #333333 !important; /* Optional subtle border */
  position: fixed !important;
  width: 100% !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1030 !important;
}

/* --- 2. Navbar Area (Right side - This is where we focus on alignment) --- */
.skin-blue .main-header .navbar,
.main-header .navbar {
  background-color: #000000 !important;
  height: 67px !important;
  margin-left: 230px !important; /* Space for the logo area */
  border-bottom: none !important;
  display: flex !important;         /* Make navbar a flex container */
  align-items: center !important;    /* Vertically center its direct children */
  padding: 0 !important;            /* Reset any default padding */
  position: static !important;
}

.skin-blue .main-header .logo,
.main-header .logo {
  background-color: #000000 !important;
  color: #FFFFFF !important;
  height: 67px !important;
  /* width: 230px !important; /* Adjust if vals$sidebarWidth is different */
  display: flex !important;
  align-items: center !important; /* Vertically center content */
  justify-content: flex-start !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  font-family: "Open Sans", sans-serif !important;
  font-size: 26px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  float: left !important;
  border-bottom: none !important;
}
/* In www/css/csiro-style.css, within your OzBarley custom block */
.skin-blue .main-header .logo .logo-text,
.main-header .logo .logo-text {
  color: #FFFFFF !important; /* Keep text white */
  font-size: 20px !important; /* ADJUST THIS VALUE until the title fits */
  /* Other font properties like font-family, font-weight can also be set here if needed */
}

/* --- 4. Navigation Tabs (using Flexbox for layout and alignment) --- */
.skin-blue .main-header .navbar .navbar-tab-menu,
.main-header .navbar .navbar-tab-menu { /* The div containing the ul.nav.navbar-tab */
  display: flex !important;
  align-items: center !important;
  height: 100% !important; /* Takes full height of the navbar (e.g., 67px) */
  margin-left: 0px !important; /* Adjust if more space is needed after the sidebar toggle */
  float: left !important; /* Allow tab menu to sit next to sidebar toggle if toggle is floated */
}

.skin-blue .main-header .navbar .navbar-tab-menu .nav, /* The ul element */
.main-header .navbar .navbar-tab-menu ul.nav.navbar-tab { /* More specific selector if 'nav' and 'navbar-tab' are both on ul */
  display: flex !important;        /* Lays out <li> items horizontally by default */
  align-items: center !important;  /* Vertically centers the <li> tab items */
  height: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;      /* Remove default ul padding */
  list-style: none !important;     /* Remove list bullets */
}

.skin-blue .main-header .navbar .navbar-tab-menu .nav > li,
.main-header .navbar .navbar-tab-menu ul.nav.navbar-tab > li { /* Targeting each <li> tab */
  display: flex !important;        /* Allows <a> tag within to be flex-aligned if needed */
  align-items: center !important;  /* Vertically centers the <a> tag within the <li> */
  height: 100% !important;
  margin: 0 !important;            /* Reset any li margin */
  position: relative !important;   /* CRUCIAL: For positioning the ::before pseudo-element */
}

.skin-blue .main-header .navbar .navbar-tab-menu .nav > li > a,
.main-header .navbar .navbar-tab-menu ul.nav.navbar-tab > li > a { /* Targeting the <a> link within each tab */
  color: #E0E0E0 !important;         /* Light grey for inactive tab text */
  background-color: transparent !important;
  display: flex !important;         /* To center text within the link */
  align-items: center !important;   /* Vertically center text within the <a> tag */
  height: 100% !important;          /* Link fills the height of the <li> */
  padding: 0 15px !important;       /* Horizontal padding for tab text (e.g., 15px on each side) */
  font-size: 16px !important;       /* Your desired font size for tabs */
  line-height: normal !important;   /* Reset line-height, flex handles vertical centering */
  text-decoration: none !important;
  border-right: none !important;    /* Remove any right borders if they exist */
  white-space: nowrap !important;   /* Prevent tab text from wrapping */
}

.skin-blue .main-header .navbar .navbar-tab-menu .nav > li > a:hover,
.main-header .navbar .navbar-tab-menu ul.nav.navbar-tab > li > a:hover,
.skin-blue .main-header .navbar .navbar-tab-menu .nav > li.active > a,
.main-header .navbar .navbar-tab-menu ul.nav.navbar-tab > li.active > a {
  color: #FFFFFF !important;
  background-color: #333333 !important; /* Darker background for active/hover tab */
}


.skin-blue .main-header .navbar .navbar-tab-menu .nav > li::before,
.main-header .navbar .navbar-tab-menu ul.nav.navbar-tab > li::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;                           /* Position the line at the very top of the <li> */
  left: 50% !important;                      /* Start the line from the center of the <li> */
  transform: translateX(-50%) !important;      /* Precisely center the line */
  width: 0 !important;                         /* Initially, line has no width (for non-active tabs) */
  height: 3px !important;                      /* Thickness of the line (e.g., 3px) */
  background-color: transparent !important;    /* Line is transparent for non-active tabs */
  transition: width 0.25s ease-in-out, background-color 0.25s ease-in-out !important;
}

/* Style for the ::before pseudo-element on the ACTIVE tab's <li> */
.skin-blue .main-header .navbar .navbar-tab-menu .nav > li.active::before,
.main-header .navbar .navbar-tab-menu ul.nav.navbar-tab > li.active::before {
  width: 80% !important;                         /* Line width (e.g., 80% of the tab's width) */
  background-color: #00A9CE !important;        /* Color of the line (CSIRO blue, or your choice) */
}


/* --- 5. Right-Side Image Logo Styling --- */
.skin-blue .navbar-custom-menu,
.navbar-custom-menu { /* This is the div for right-aligned items */
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin-left: auto !important; /* Pushes this block to the right of other flex items */
  padding-right: 15px !important; /* Padding from the very edge */
}

.skin-blue .navbar-custom-menu > .nav.navbar-nav, /* The ul element */
.navbar-custom-menu > .nav.navbar-nav {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  margin: 0 !important;
  padding-left: 0 !important;
  list-style: none !important;
}

.skin-blue .navbar-custom-menu > .nav.navbar-nav > li.ozbarley-logo-li,
.navbar-custom-menu > .nav.navbar-nav > li.ozbarley-logo-li {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 !important;
}

.skin-blue .navbar-custom-menu > .nav.navbar-nav > li.ozbarley-logo-li > a,
.navbar-custom-menu > .nav.navbar-nav > li.ozbarley-logo-li > a {
    display: flex !important;
    align-items: center !important; /* This centers the img */
    height: 100% !important;
    padding: 0 !important; /* Let the img margin/size control spacing */
}

.skin-blue .navbar-custom-menu > .nav.navbar-nav > li.ozbarley-logo-li > a > img,
.navbar-custom-menu > .nav.navbar-nav > li.ozbarley-logo-li > a > img {
    height: 35px !important; /* Or your desired logo height */
    width: auto !important;
}

/* --- 6. Correcting Content Overlap & Sidebar Padding --- */
.content-wrapper,
.right-side {
  padding-top: 67px !important; /* MUST MATCH your header's height */
  background-color: #fff !important;
}

.main-sidebar {
  padding-top: 67px !important; /* MUST MATCH your header's height */
}


.main-header.navbar-tab-menu li a:hover {
    color: #ffffff!important; /* Original hover color */
    background-color: #333333!important; /* ADDED: Darker background on hover for tab */
}

.main-header.navbar-tab-menu li.active a {
  color: #fff!important; /* Original active color */
  text-decoration: none!important;
  background-color: #333333!important; /* ADDED: Darker background for active tab */
}

/* This rule is for dropdowns within navbar-custom-menu, ensure OzBarley logo link doesn't get unwanted background */
.navbar-custom-menu.navbar-nav > li > a { 
  background-color: transparent!important;
  border: 0!important;
  outline: none!important;
}

/* to create border transition on active tab */
.main-header.navbar-tab-menu li::before {
  box-sizing: inherit!important;
  content: ''!important;
  position: absolute!important;
  /* margin-top: 12px!important; */ /* Original, may need adjustment if line-height/padding changed tab content position */
  /* This ::before element creates the underline. Its vertical position depends on the <a> tag's content box.
     If <a> has height 67px and line-height 67px, the text is centered.
     The underline should appear below the text.
     The original margin-top: 12px might have been for a shorter header or different text alignment.
     Let's try to position it relative to the bottom of the <li>.
  */
  bottom: 0px; /* MODIFIED: Position underline at the bottom of the li */
  left: 5%; /* MODIFIED: Use left/right instead of margin-left/right for better control with width */
  right: 5%;
  border-top: 2px solid transparent!important;
  width: 0!important; /* Initial width for transition */
  margin-left: 0!important; /* MODIFIED: Remove margin-left */
  margin-right: 0!important; /* MODIFIED: Remove margin-right */
}

.main-header.navbar-tab-menu li.active::before {
  border-color: #00A9CE!important;
  text-decoration: none!important;
  width: 90%!important; /* Target width for active tab's underline */
  transition: border-color 0.25s, width 0.25s ease-in!important;
}

/* --- 3. Sidebar Toggle Icon --- */
.skin-blue .main-header .navbar .sidebar-toggle,
.main-header .navbar .sidebar-toggle {
  color: #FFFFFF !important;
  background-color: transparent !important;
  display: flex !important;         /* Use flex to center the icon itself */
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;          /* Take full height of navbar */
  padding: 0 15px !important;       /* Horizontal padding only */
  font-size: 20px !important;
  line-height: normal !important;   /* Reset line-height */
  /* float: none !important; /* Not needed if .navbar is flex */
  border-right: none !important;
}
.skin-blue .main-header .navbar .sidebar-toggle:hover,
.main-header .navbar .sidebar-toggle:hover {
  background-color: #333333 !important;
  color: #FFFFFF !important;
}

/* ADDED: Hover for sidebar toggle */
.main-header.navbar.sidebar-toggle:hover {
  background-color: #333333!important; /* Darker background on hover */
  color: #FFFFFF!important;
}


/* body area */
.content-wrapper,.right-side {
    background-color: #fff!important;
    border: 0px!important;
}

/* space between columns */
.col-lg-1,.col-lg-10,.col-lg-11,.col-lg-12,.col-lg-2,.col-lg-3,.col-lg-4,.col-lg-5,.col-lg-6,.col-lg-7,.col-lg-8,.col-lg-9,.col-md-1,.col-md-10,.col-md-11,.col-md-12,.col-md-2,.col-md-3,.col-md-4,.col-md-5,.col-md-6,.col-md-7,.col-md-8,.col-md-9,.col-sm-1,.col-sm-10,.col-sm-11,.col-sm-12,.col-sm-2,.col-sm-3,.col-sm-4,.col-sm-5,.col-sm-6,.col-sm-7,.col-sm-8,.col-sm-9,.col-xs-1,.col-xs-10,.col-xs-11,.col-xs-12,.col-xs-2,.col-xs-3,.col-xs-4,.col-xs-5,.col-xs-6,.col-xs-7,.col-xs-8,.col-xs-9 {
    padding-right: 10px!important;
    padding-left: 10px!important;
}

/* box */
.box {
    box-shadow: 0 0 0 rgba(0,0,0,.1);
    border-top: 0!important;
}

/*-----------------//
    DT (datatables)
//-----------------*/

/* search box */
.form-control {
    border-radius: 4px!important;
    box-shadow: none!important;
    border-color: #D9D9D9!important;
/*    padding: 4px 8px 4px 8px!important;*/
    outline: none!important;
}

/* pagination text */
.pagination>li>a,.pagination>li>span {
    color: #004b87!important;
}

/* pagination active/focus text */
.pagination>.active>a,.pagination>.active>a:focus,.pagination>.active>a:hover,.pagination>.active>span,.pagination>.active>span:focus,.pagination>.active>span:hover {
    color: #fff!important;
    background-color: #004b87!important;
    border-color: #004b87!important;
}

/* pagination inactive */
.pagination>.disabled>a,.pagination>.disabled>a:focus,.pagination>.disabled>a:hover,.pagination>.disabled>span,.pagination>.disabled>span:focus,.pagination>.disabled>span:hover {
    cursor: not-allowed;
    opacity:.2;
    text-decoration: none!important;
}

/* pagination end boxes */
.pagination>li:first-child>a,.pagination>li:first-child>span, 
.pagination>li:last-child>a,.pagination>li:last-child>span {
    border-radius: 4px!important;
}

/* selected row */
.table.dataTable tbody td.active,.table.dataTable tbody tr.active td {
  color: #004b87!important;
  background-color: #e6e6e6!important;
}

/* selection box slider */
.noUi-connect {
    background: #1d2021!important;
}

/*----------//
    Leaflet 
//---------*/

.leaflet-container {
  font: 1em "Open Sans", sans-serif!important;
  color: #575757!important;
  margin-top: 10px;
  border: 2px solid #142C3F;
}

.leaflet-touch.leaflet-control-layers,.leaflet-touch.leaflet-bar {
    border: 0;
    background-clip: padding-box;
}

/* leaflet buttons */
.leaflet-touch.leaflet-control-layers,.leaflet-touch.leaflet-bar {
    border: 0!important;
}

.leaflet-touch.leaflet-bar {
  color: #00313c!important;
  border-color: #fff;
  background-color: #fff;
}

.leaflet-touch.leaflet-bar a:first-child {
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}

.leaflet-touch.leaflet-bar a:last-child {
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

.leaflet-touch.leaflet-bar a:hover {
  color: #00313c!important;
  background-color: #d9d9d9;
  transition: background-color 0.5s;
}

.leaflet-touch.leaflet-bar button {
  background-color: #ffffff;
  border-radius: 5px!important;
}

.leaflet-touch.leaflet-bar button:hover {
  background-color: #d9d9d9;
  text-decoration: underline!important;
  transition: background-color 0.5s;
}

/* icons */
.leaflet-touch.leaflet-bar.fa::before {
  color: #00313c;
}

.leaflet-touch.leaflet-bar:hover.fa::before {
  border-bottom: 2px solid #00313c;
}

/* legend */
.info {
    background: white!important;
    box-shadow: 0;
    border-radius: 5px;
}



/*----------//
    Plot.ly 
//---------*/

/* Mpdebar tooltip top arrow */
.modebar-btn:before {
    border-bottom-color: #004B87!important;
}

/* Modebar tooltip body */
.modebar-btn:after {
  background: #004B87!important;
}

/*------------------------//
    CSIRO brand layout
//------------------------*/

/* Style the login div */
div.login {
  text-align: left;
  font-weight: bold;
  position: absolute;
  top: 40%;
  left: 50%;
  margin-top: -100px;
  margin-left: -150px;
}

/* CSIRO logo image for mobile devices */
.branding {
  align-self:center;
  position:relative;
  z-index:3;
  line-height:0;
}
.branding.branding__link {
  display:block;
  position:relative;
  padding:3px;
  border:1px solid transparent;
  border-radius:300px;
}
.branding.branding__link:after {
  content:"";
  display:block;
  height: 54px;
  width:54px;
  position:absolute;
  top:-1px;
  left:-1px;
  padding:3px;
  border:1px solid #00a9ce;
  border-radius:300px;
  opacity:1;
  visibility:hidden
}
.branding.branding__link:focus,
.branding.branding__link:hover {
  border:1px solid #00a9ce
}
.branding.branding__link:focus:after,
.branding.branding__link:hover:after {
  visibility:visible;
  display:block;
  height: 65px;
  width: 65px;
  top: -7px;
  left: -7px;
  border:1px solid #00a9ce;
  transition:all.75s;
  opacity:0;
  padding:12px
}
.branding.branding__logo {
  max-height:85px;
  max-width:85px;
  height:45px;
  width:45px;
  transition:all 2s linear
}

/* CSIRO tab originally hidden */
.ct-wrapper {
  display: none; /* Keep this if you are commenting out the JS for it */
}

/* Logo text (for the main title "OzBarley Gene Explorer") */
.logo-text{
  /* margin-left: 15px; */ /* Original, but padding on.main-header.logo handles spacing now */
  color: #FFFFFF!important; /* Ensure title text is white */
  /* Font size and family are inherited from.main-header.logo */
}

/* Class to change header text font-size dynamically for desktop */
.desktop-logo {
  font-size: 24px!important;
  margin-left: auto!important;
  margin-right: auto!important;
}

/*------------------------//
    Navbar tab contents
//------------------------*/


#navbar_tab1, #navbar_tab2, #navbar_tab3, #navbar_tab4, #navbar_tab5, #navbar_tab6 {
    overflow: hidden!important;
}

pre#upload_note.shiny-text-output.noplaceholder.shiny-bound-output {
  margin: 15px;
}


.navbar-custom-menu { 
    display: flex!important; 
    align-items: center!important;
    height: 100%!important;
    float: right!important; 
    
}

.navbar-custom-menu >.nav.navbar-nav { 
    display: flex!important; 
    align-items: center!important; 
    height: 100%!important;
    margin: 0!important; 
    list-style: none!important; 
    padding-left: 0!important; 
}


.navbar-custom-menu >.nav.navbar-nav > li.ozbarley-logo-li {
    padding: 0!important; 
    display: flex!important;
    align-items: center!important;
    height: 67px!important; /* Match header height */
}

.navbar-custom-menu >.nav.navbar-nav > li.ozbarley-logo-li > a {

    padding-left: 10px!important;   
    padding-right: 15px!important;  
    display: flex!important;        
    align-items: center!important;  
    height: 100%!important;         
}

.navbar-custom-menu >.nav.navbar-nav > li.ozbarley-logo-li > a:hover,
.navbar-custom-menu >.nav.navbar-nav > li.ozbarley-logo-li > a:focus {
    background-color: transparent!important; 
}

.navbar-custom-menu >.nav.navbar-nav > li.ozbarley-logo-li > a > img {
    height: 35px!important;   
    width: auto!important;    
    display: block!important; 
}

#select.btn-default,
#unselect.btn-default,
#reset.btn-default,
.btn.dbtn,                     
#upload.btn-default,           
#get_hapmap.btn-default,
#get_abundance.btn-default,
#get_haplotype.btn-default {
    background-color: #6c757d !important;
    border-color: #5a6268 !important;
    color: #FFFFFF !important;
    border-radius: 4px !important;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s !important;
    box-shadow: none !important;
    margin-right: 5px !important;
    padding-left: 1.5em !important;
    padding-right: 1.5em !important;
    font-family: "Montserrat","Open sans",sans-serif !important;
}

/* Focus State */
#select.btn-default:focus,
#unselect.btn-default:focus,
#reset.btn-default:focus,
.btn.dbtn:focus,
#upload.btn-default:focus,
#get_hapmap.btn-default:focus,
#get_abundance.btn-default:focus,
#get_haplotype.btn-default:focus {
    background-color: #6c757d !important;
    border-color: #5a6268 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5) !important;
}

/* Hover State - Lighter Grey */
#select.btn-default:hover,
#unselect.btn-default:hover,
#reset.btn-default:hover,
.btn.dbtn:hover,
#upload.btn-default:hover,
#get_hapmap.btn-default:hover,
#get_abundance.btn-default:hover,
#get_haplotype.btn-default:hover {
    background-color: #adb5bd !important;
    border-color: #6c757d !important;
    color: #212529 !important;
}

/* Active State (when clicked) - Darker Grey */
#select.btn-default:active,
#unselect.btn-default:active,
#reset.btn-default:active,
.btn.dbtn:active,
#upload.btn-default:active,
#get_hapmap.btn-default:active,
#get_abundance.btn-default:active,
#get_haplotype.btn-default:active {
    background-color: #5a6268 !important;
    border-color: #495057 !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
}

/* Specific active:focus states */
#select.btn-default:active:focus,
#unselect.btn-default:active:focus,
#reset.btn-default:active:focus,
.btn.dbtn:active:focus,
#upload.btn-default:active:focus,
#get_hapmap.btn-default:active:focus,
#get_abundance.btn-default:active:focus,
#get_haplotype.btn-default:active:focus {
    background-color: #5a6268 !important;
    border-color: #495057 !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem rgba(108, 117, 125, 0.5) !important;
}



div.form-group:has(input#upload_trans[type="file"]) .btn.btn-default.btn-file {
    background-color: #6c757d !important;
    border-color: #5a6268 !important;
    color: #FFFFFF !important;
    border-radius: 4px !important;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s !important;
    box-shadow: none !important;
    margin-right: 0px !important; 
    padding-left: 1.5em !important;
    padding-right: 1.5em !important;
    font-family: "Montserrat","Open sans",sans-serif !important;
}

div.form-group:has(input#upload_trans[type="file"]) .btn.btn-default.btn-file:focus {
    background-color: #6c757d !important;
    border-color: #5a6268 !important;
    color: #FFFFFF !important;
    box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5) !important;
}

div.form-group:has(input#upload_trans[type="file"]) .btn.btn-default.btn-file:hover {
    background-color: #adb5bd !important;
    border-color: #6c757d !important;
    color: #212529 !important;
}

div.form-group:has(input#upload_trans[type="file"]) .btn.btn-default.btn-file:active {
    background-color: #5a6268 !important;
    border-color: #495057 !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125) !important;
}

div.form-group:has(input#upload_trans[type="file"]) .btn.btn-default.btn-file:active:focus {
    background-color: #5a6268 !important;
    border-color: #495057 !important;
    color: #FFFFFF !important;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125), 0 0 0 0.2rem rgba(108, 117, 125, 0.5) !important;
}