/* CSS Template for Shiny app*/





/* app title styling */
h1, .title {
    font-size: 28px; /* Adjust size as needed */
    font-family: "Owners-Regular", sans-serif; /* Was Arial */
    font-weight: bold;
    text-align: left; color: white;/* Center the title */
}

body {
  height: 90%;
  margin-top: auto;
  margin-bottom: 0;
  background: white;
  padding: 8 8 8 8;
  font-family: "Owners-Regular", sans-serif; /* Was Arial */ 
  font-size: 16px;
}

/* tile headers (card headers) */
.card-header {
    font-size: 18px;  /* Adjust the font size */
    color: black;   /* Change the text color */
    background-color: #EAEAEA; /* Background color of the headers */
    font-weight: bold; /* Optional: Make it bold */
    text-align: left; /* Optional: Center the text */
    font-family: "Owners-Regular", sans-serif; /* Was Arial */ 
}

/* tile boarders (card border) */
.card {
    border: .5px solid #266093; /* Change to your desired border color */
    border-radius: 10px; /* Optional: Adjust rounded corners */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2); /* Optional: Adds subtle shadow */
}

/* CSS to change the border color of the tabs */
.nav-tabs {
  border-bottom-color: #266093 !important; /* Change the bottom border color of the tab container */
}

.nav-tabs .nav-item .nav-link {
  border-color: #266093 !important; /* Change the border color of the tab links */
  color: black; /* Text color of the tab links */
}

.nav-tabs .nav-item .nav-link.active {
  border-color: #266093 !important; /* Change the border color of the active tab */
  background-color: #266093; /* Background color of the active tab */
  color: white; /* Text color of the active tab */
}

/* Change background color of the sidebar */
.sidebar {
  background-color: white !important;
  border: .5px solid #266093 !important; /* Adjust thickness and color */
  border-radius: 10px; /* Optional: Rounds the corners */
}

/* Change background and text color when dropdown is open */
.selectize-dropdown {
  background-color: red;  
  color: #266093;  /* text color */
  font-family: "Owners-Regular-Regular" sans-serif;
}

/* Change hover color of dropdown options */
.selectize-dropdown .selectize-dropdown-content .option:hover {
  background-color:  #266093; /* hover color */
}

/* CSS to change the box outline color of the state and MSA filter box when focused */
#sidebar .selectize-dropdown {
  border-color: #266093 !important; /* Border color of the dropdown menu */
}

/* CSS to change the text color of the dropdown menu items */
#sidebar .selectize-dropdown .selectize-dropdown-content .option {
  color: black !important; /* Text color of the dropdown menu items */
}

/* CSS to change the background color and text color of the selectize input boxes */
#sidebar .selectize-input {
  background-color: #EAEAEA; /* Default background color */
  border-color: #266093; /* Default border color */
}

/* CSS to change the text color of the selected items in the input box */
#sidebar .selectize-input .item {
  color: black !important; /* Text color of the selected items */
}

/* sidebar input labels */
.shiny-input-container label {
    font-size: 18px;  /* Adjust the font size */
    color: black;   /* Change the text color */
    font-weight: bold; /* Optional: Make it bold */
    font-family: "Owners-Regular", sans-serif;
}

/* sidebar slider - one for each tab*/
.js-irs-0 .irs-single, .js-irs-0 .irs-bar-edge, .js-irs-0 .irs-bar {
  background: #266093; /*colors for the actual bar*/
    border-top: 1px solid #266093;
  border-bottom: 1px solid #266093;
}

.irs-from, .irs-to, .irs-single { 
    background: #266093; 
}

.js-irs-0 .irs-to,.js-irs-0 .irs-from {
  background: #EAEAEA; /*background color for the labels*/
  color: black; /*text color for the labels*/
}

/* Hide minor tick marks on the slider */
.irs-grid-pol.small {
  display: none;
}

/* Change color of major tick marks */
.irs-grid-pol {
  background-color: #266093 !important;
}

/* Change color of cirlces in the slide bar */
.irs-handle {
  background-color: #F1F3F4 !important;
  border-color: #266093 !important;
}

/* CSS to change the color and amount of table grid lines */
table {
  border-collapse: collapse;
}

th, td {
  border-bottom: 1px solid black !important;
}

th:first-child, td:first-child {
  border-left: none !important;
}

th:last-child, td:last-child {
  border-right: none !important;
}

/* Footer container */
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f1f1f1;  /* Change this to the footer's background color */
  padding: 10px;
  text-align: right;  /* Align logo to the right side */
  z-index: 9999;  /* Ensure it stays on top of other content */
}

/* Logo inside the footer */
footer img {
  position: absolute;
  right: 20px;  /* Adjust as needed */
  bottom: 10px; /* Adjust as needed */
  width: 100px; /* Adjust size of your logo */
}