/* Hide scrollbar for Chrome, Safari, and Edge */
body::-webkit-scrollbar {
    width: 0; /* Hide vertical scrollbar */
}

body::-webkit-scrollbar-thumb {
    background: transparent; /* Hide the scrollbar thumb */
}

/* General Styles */
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto; /* Allow scrolling */
	overflow-x: none; 
}


/* tree window size */
#graph-div{
	position: fixed;
	top:180px;
	left:220px;
	right:0px;
	bottom:20px;
	cursor: pointer;
}

#new-div {
    position: relative; 
    top: 850px;
    left: 220px;
    width: 500px;
    height: 300px;
    /* background-color: #ccc; */
    border: 2px solid #accbf0;
    bottom: 800px;
    z-index: 50; /* Ensure a higher z-index */
	/* overflow: scroll; */
}

/* Fix the header at the top */
#header {
  position: fixed; /* Keep the header fixed at the top */
  top: 0;
  left: 0;
  width: 100%;
  background-color: #7a0019;
  height: 100px;
  z-index: 100; /* Ensure the header stays above all content */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px; /* Add padding for better spacing */
  box-sizing: border-box; /* Ensure padding and width are calculated properly */
}

/* Logo and SPRAT alignment */
#logo-text {
  display: flex;
  align-items: center; /* Align SPRAT and logo vertically */
  flex-grow: 1; /* Allow this section to take up available space */
}

#logo {
	margin-right: 20px; /* Space between logo and SPRAT */
	height: 70px;
	width: 120px;
  /* margin-top: -30px; Adjust logo position */
  margin-bottom: 70px; /* Adjust logo position */
}

/* Ensure content doesn't overlap with the fixed header */
body {
 padding-top: 138px;  /* Matches the header height to prevent overlap */
}

/* Align SPRAT and subtitle */
/* Display SPRAT and Salmonella Predictive Risk Assessment Tool next to each other */
#header-text {
  display: flex;
  flex-direction: row; /* Stack SPRAT and subtitle vertically */
  align-items: flex-end; /* Align subtitle with the bottom of SPRAT */
  flex-grow: 1; /* Allow this section to grow and take up available space */
  max-width: 100%; /* Allow the text to take up as much width as possible */
}

/* SPRAT styling */
#sprat {
  font-weight: bold;
  font-size: 5.5em;
  color: #ffcc33;
  text-decoration: none; /* Remove underline from the link */
  margin-right: 20px; /* Space between SPRAT and the tool name */
  margin-bottom: 10px;
}

#sprat:hover {
  text-decoration: underline; /* hover effect */
}

/* Subtitle styling */
#subtitle {
  font-size: 1.5em;
  color: #f1f1f1;
  white-space: nowrap; /* Prevent text from wrapping */
  overflow: hidden; /* Hide overflow if text overflows */
  /* text-overflow: ellipsis; Add ellipsis (...) if text is too long */
  margin-bottom: 40px; /* Space between subtitle and the menu */
}

/* Menu container */
#menu-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  height: 100%; /* Ensure the container takes up the full height of the header */
  justify-content: space-between;
}

/* Top menu: Align the links horizontally */
#menu-top {
  display: flex;
  gap: 20px; /* Space between links */
  align-items: flex-start;
}

#menu-top a {
  color: #f1f1f1;
  text-decoration: none;
  font-size: 1.2em;
}

#menu-top a:hover {
  text-decoration: underline;
  color: #007bff; /* Hover color */
}

/* Bottom menu: Align the text at the bottom */
#menu-bottom p {
  margin: 0;
  color: #f1f1f1;
  font-size: 1em;
  text-align: right;
}

/* Responsive behavior for smaller screens */

@media screen and (max-width: 1084px) {
  #header-text {
    max-width: 100%; /* Ensures the header-text takes up available space */
  }

  #logo {
    margin-right: 10px; /* Space between logo and SPRAT */
    /* height: 80px;
    width: 126px; */
    height: 70px;
    width: 120px;
    margin-top: 10px; /* Adjust logo position */
    margin-bottom: 77px;
  }

  #sprat {
    font-size: 4em; /* Adjust SPRAT font-size for smaller screens */
    margin-top: 10px;
  }

  #subtitle {
    font-size: 1.2em; /* Adjust subtitle font-size for smaller screens */
    max-width: 100%; /* Ensure subtitle doesn't overflow */
    white-space: normal; /* Allow wrapping */
    word-wrap: break-word; /* Break words if necessary */
    margin-top: 10px;
  }
}



@media screen and (max-width: 768px) {
  #header-text {
    max-width: 100%; /* Ensures the header-text takes up available space */
  }

  #logo {
    display: none; /* Hide the logo */
    margin-bottom: 75px;
  }

  #sprat {
    font-size: 3em; /* Adjust SPRAT font-size for smaller screens */
    margin-top: 10px;
  }

  #subtitle {
    font-size: 1.0em; /* Adjust subtitle font-size for smaller screens */
    max-width: 100%; /* Ensure subtitle doesn't overflow */
    white-space: normal; /* Allow wrapping */
    word-wrap: break-word; /* Break words if necessary */
    margin-top: 30px;
  }
}


/* CSS for the menu line */
#menu-line {
    background-color: #e9ecef;
    padding: 10px; /* Size of the menu */
    margin-top: -37px;
}

#menu-line nav {
    display: flex;
    justify-content: left;
    gap: 40px; 	/* space between links*/
	
}
#menu-line nav a {
    text-decoration: none;
    color: black;
}

/* styles for hover effects */
#menu-line nav a:hover {
    text-decoration: underline;
    color: #007bff; /* hover color */
}


/* ---  END OF Base.html --- */

#menu a:hover a:active

#legend-svg {
	cursor: default; 
}

/* GrapeTree sidebar */
#sidebar {
	position: absolute;
	top:160px;
	bottom:0px;
	width:226px;
	margin-top:17px;
	margin-left:5px;
	overflow-y:auto;
	overflow-x: hidden;
}


.brush.extent {
stroke: #fff;
fill-opacity: .125;
shape-rendering: crispEdges;
}
.selected{
	background-color:blue;
}


.graph-selection-indicator {
position: absolute;
background: transparent;
border: 1px solid orange;
}
.slider-class{
	float: left;
	clear: left;
	width: 90px;
	height:5px;
	margin: 5px;
}
.slider-class .ui-slider-handle {
	height:12px;
}

.mst-element {
cursor:move;
}

.mst-menu-title {

	cursor:pointer;

}
.panel-body {
display:none;
}
.panel-body label{
	margin-bottom:1px;
	margin-top:4px;

}
.zoom-icon{
	cursor:pointer;
	font-size:22px;

}
.upload-download-icon{
	cursor:pointer;
	font-size:22px;

}
.add-data-icon{
	cursor:pointer;
	float:right;
}

.mst-menu-title span{
	display:block;
	float:right;
}
.panel-default{
	margin-bottom:2px;
}
div.tooltip {
	position: absolute;
	text-align: center;
	height: 28px;
	padding: 2px;
	font: 16px sans-serif;
	background: lightsteelblue;
	border: 0px;
	border-radius: 8px;
	pointer-events: none;
}


#handler {
padding:10px 10px;
background-color:#f1f1f1;
width:100%;
height:auto;
border-radius:5px;
border: 0px solid transparent;
}
#handler .glyphicon,input[type=checkbox] {
zoom:1.5;
}
#handler .glyphicon {
margin-right:15px
}

#handler .glyphicon span {
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 0.8em;
top:-2px;
position:relative;
}
.slick-headerrow-columns .slick-headerrow-column input {
height:100%;
width:100%;
}
.cell-title {
font-weight: bold;
}
.cell-effort-driven {
text-align: center;
}
.slick-header.ui-state-default {
height: 24px
}
.slick-header .ui-state-default.slick-header-column {
height: 24px
}

.ui-dialog-titlebar {
background: #337ab7;
border: 0;
color: #fff;
font-weight: normal;
}
.slick-row.active .slick-cell {
 background-color: #FFB;
}

.slick-row.odd {
background: #ffffcc;
}
.slick-row.even {
background: #ccffcc;
}
.slick-cell {
border-right: 1px solid silver;
}
.navbar-nav > li > a {
padding-top: 5px;
height: 30px;
}
.slick-column-name {
color: #505050;
}
.navbar {
min-height:30px;
margin-bottom:0px
}
.grid-canvas >.odd >.uneditable-cell {
background: #e5e5b7;
}
.grid-canvas >.even >.uneditable-cell {
background: #b7e5b7;
}

.sub-panel {
margin-left: 10px;
}
.spin-group {
width:25px;
height:15px;
}

.panel button {
margin-top: 8px;
}


/* dashboard  */


#shiny-dashboard-container {
    transition: margin-top 0.3s ease; /* Smooth transition for margin change */
}

#shiny-frame {
    width: 100%;
    height: 100%;
    border: none;
}

.fullscreen-container {
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

#shiny-frame-2 {
    width: 100%;
    height: 100%;
    border: none;
}
.fullscreen-container-2 {
    width: 100%;
    height: calc(100vh - 150px); 
    padding-top: 450px;
    box-sizing: border-box;
    overflow: hidden;
}


/******************************************************************* -- INDEX page --  ****************************************************************/
/******************************************************************************************************************************************************/
/** page structure **/

/* mouse over */
/* ::selection { background: #c41fa0; color: #fff; } */
::-moz-selection { background: #c19917; color: #fff; }
/* ::-webkit-selection { background: #777677; color: #fff; } */

br { display: block; line-height: 1.6em; } 

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }


.d-flex.justify-content-center {
  width: 100%; /* Ensure the container spans the full width */
  text-align: center; /* Align content in the center */
}

.sprat-image {
  max-width: 400px; /* Limit the size of the images */
  width: 100%; /* Ensure the image spans the full width */
  height: auto; /* Maintain aspect ratio */
}

/* spacing between images */
.mx-3 {
  margin-left: 1rem;
  margin-right: 1rem;
}

/* Adjust the image size and spacing on smaller screens */
@media (max-width: 576px) {
  .sprat-image {
    max-width: 150px; /* Smaller size for small screens */
  }
}

/* Additional hover effects for links */
a img:hover {
  transform: scale(1.05); /* Slight zoom effect */
  transition: transform 0.3s ease; /* Smooth transition */
}


input, textarea { 
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  outline: none; 
}

blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong, b { font-weight: bold; } 

table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }

/* Data Summary */
#h1-index { 
  font-family: 'Amarante', Tahoma, sans-serif;
  font-weight: bold;
  font-size: 1.6em;
  line-height: 1.3em;
  margin-bottom: 10px;
  margin-left: 5px;
  background-color: #777677;
  color: #f1f1f1;
}

#h2-index { 
  font-family: 'Amarante', Tahoma, sans-serif;
  font-weight: bold;
  font-size: 1em;
  line-height: .5em;
  margin-bottom: 8px;
  margin-left: 5px;
  /* text-align: center; */
}

/* top div */
#wrapper-top {
  margin-left: 0;
  margin-right: 0;
  margin-top: 20px;
  padding-left: 17px;
  padding-right: 17px;

  /* display: block;
  display: inline;
  width: 100%; */
  /* width: 100%; */
  /* background: #fff;
  margin: 3px;
  padding: 10px 17px;
  padding-top: 2px;
  padding-bottom: 1px; */
  /* border-style: 2px; */
  /* border: 3px solid rgb(240, 239, 238); */
}
/* wrapper-top */
#wrapper-top p{
  font-size: 17px;
}

/* table div */
#wrapper {
  /* width: 100%;
  margin-top: 0px;
  background: #fff;
  /* margin: 5px; */
  /* margin-left: auto;
  margin-right: auto;
  padding: -7px 17px;
  padding: 5px; */

  width: 100% !important;
  margin: 0 auto !important;
  padding: 10px 17px !important;
  background: #fff !important;
}

/* Ensure the headings align to the left */
#h1-index, #h2-index {
  margin-left: 0;
}

.table-responsive {
	/* margin-left: 2px; */
  margin-left: 0;
  margin-right: 0;
}

/* Breakdown... */
.box-table {
  overflow-x: auto;
  max-width: 100%;
  padding: 8px; 
  display: inline-block;
  /* border: 3px solid rgb(240, 239, 238); */
}

/* table */
#keywords {
  /* margin-left: 160px; */
  font-size: 1.0em;
  margin-top: 1px;
  border: 3px solid rgb(240, 239, 238);
}

#h2-table{
  font-family: 'Amarante', Tahoma, sans-serif;
  font-weight: bold;
  font-size: 1em;
  line-height: .5em;
  /* margin-right: 0; */
  margin-bottom: 8px;
  /* margin-left: 4px; */
  /* text-align: center; */
  display: inline-block; 
  vertical-align: top; 
}

/* table: headers */
#keywords thead {
  cursor: pointer;
  /* background: #c9dff0; */
  background: #ffde7a;
}

#keywords thead tr th { 
  font-weight: bold;
  padding: 10px 4px;
  padding-left: 42px;
}

#keywords thead tr th span { 
  padding-right: 13px;
  background-repeat: no-repeat;
  background-position: 100% 100%;
}

/* #keywords thead tr th.headerSortUp, #keywords thead tr th.headerSortDown {
  background: #e62107;
} */

#keywords tbody tr { 
  color: #555;
}

#keywords tbody tr td {
  text-align: center;
  padding: 15px 10px;
}

#keywords tbody tr td.lalign {
  text-align: left;
}


#keywords thead th {
	font-weight: bold !important;
	background-color: #ffde7a !important;
  }

  /* Style the wrapper */
#wrapper {
	width: 98% !important;
	background: #fff !important;
	margin: 5px !important;
	margin-right: 30px;
	padding: 10px 17px !important;
  }



/******************** ---  ABOUT PAGE --- **************************/


/* Adjust spacing and alignment */
.container h1 {
  text-align: center; /* Center align headings */
}

.container h2 {
  text-align: left; /* Center align headings */
}

h1 {
  font-size: 2rem; /* Smaller title */
}

h2 {
  font-size: 1.25rem; /* Adjust subtitle size */
  font-weight: bold;
  margin-bottom: 0.5rem;
  color: #333; /* Darker shade for contrast */
}


.container p {
  line-height: 1.6; /* Improve readability with line spacing */
}


/* Section Spacing */
.mb-4 {
  margin-bottom: 1.5rem; /* Adds space below each section */
}

/* Italicize Scientific Text */
i {
  font-style: italic;
}

/* Link Styling */
a {
  color: #007bff;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  color: #0056b3; /* Darker blue link color on hover */
}