/* My colors
dark-grey for text: #2c2e35 /  #424949 
*/

.arimo-<uniquifier> {
  font-family: "Arimo", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background: linear-gradient(135deg, #004880, #007cc1);
    font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
    overflow: auto;
}

.topbar {
    width: 100%;
    height: 75px;
    color: white;
    font-family: "Arimo", sans-serif;
    font-size: 25px;
    padding: 10px 0px 10px 30px;
    display: flex;
    /*flex-direction: column;*/
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.topbar .logo {
    height: 65px;
    margin-right: 15px;
}

#title_chemical {
    font-weight: bold;
}


.topbar li {
    display: inline;
    list-style-type: none;
    margin: 0;
    padding-left: 20px;
}
.topbar a {
    color: #f0f0f0;
    font-size: 60%;
    font-weight: bolder;
    text-decoration: none;
    position: relative;
  }

.topbar a:hover {
    color: white;
}
.topbar a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px; /* Adjust the thickness of the underline */
    background-color: white; /* Underline color */
    left: 0;
    bottom: -2px; /* Adjusts the position of the underline */
    transition: width 0.3s ease-in-out; /* Animation effect */
}

.topbar a:hover::after {
    width: 100%; /* Full width on hover */
}


.tab {
    overflow: hidden;
    display: flex;
    justify-content: left;
    color: white;
}

.tab button {
    background-color: #6396bd;
    width: 125px;
    border: none;
    border-radius: 6px 6px 0 0;
    outline: none;
    cursor: pointer;
    padding: 10px 10px;
    margin-left: 10px;
    color: #424949;
    font-size: 16px;
    font-weight: bolder;
    transition: background-color 0.3s;
}

.tab button:hover {
    background-color: #424949;
    color: white;
    font-weight: bolder;
}

.tab button.active {
    background-color: white;
    color: #2c2e35;
    font-weight: bolder;
}

.tabcontent {
    display: none;
    /*padding: 20px;*/
    border-top: none;
    height: 100%;
    max-height: calc(100vh - 75px); /* Adjusts height to fit within viewport, minus the topbar height */
}

.tabcontent.active {
    display: block;
}

.container {
    display: flex;
    height: 100%;
    max-height: calc(100vh - 130px); /* Example adjustment if there's more padding needed */
    overflow-y: auto;
    background-color: white;
}

.side-panel {
    width: 18%; /* Adjust this width as needed */
    margin-left: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f0f0f0; /* Optional: Background color for the side panel */
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.1); 
    overflow-y: auto; /* Allows scrolling if content overflows */
    border: #9a999a 1px solid;
    border-radius: 5px;
    font-size: 14px;
    font-weight: bolder;
    color: #2c2e35;
}

.button-group {
    margin: 10px 0;
    display: flex;
    flex: 1 1 0px;
    gap: 10px;
    margin-bottom: 15px;
}

.classification-btn {
    flex: 1 1 0px;
    display: flex; /* Use flexbox to align icon and text */
    align-items: center; /* Vertically center icon and text */
    justify-content: center; /* Horizontally center content */
    padding: 5px; /* Adjust padding as needed */
    background-color: white;
    border: 1px solid #172d4a;
    box-shadow: 3px 3px #172d4a;
    text-align: center;
    border-radius: 5px;
    font-weight: bold;
    color: #172d4a;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, filter 0.3s; /* Added filter transition for icon hover effect */
}

.classification-btn:hover {
    background-color: #424949;
    color: white;
}

.classification-btn.active {
    background-color: #424949;
    color: white;
}

.classification-btn:hover .btn-icon {
    filter: brightness(0) invert(1); /* Makes the icon white */
}
.classification-btn.active .btn-icon {
    filter: brightness(0) invert(1); /* Makes the icon white */
}

/* Style for the icons inside the buttons */
.classification-btn .btn-icon {
    width: 30px; /* Adjust size */
    height: 30px;
    margin-right: 5px; /* Space between icon and text */
}

.dropdown {
    margin-bottom: 15px; /* Adds consistent spacing between dropdown sections */
}

.dropdown label {
    display: block; /* Ensure the label takes full width and is above the dropdown */
    margin-bottom: 5px; /* Adds spacing between label and dropdown */
    font-weight: bold;
}

/* Styling for the dropdown menu */
.dropdown select {
    width: 100%; /* Make the dropdown take the full width of the container */
    padding: 8px; /* Adjust the padding for a better look */
    border: 1px solid #172d4a;
    border-radius: 5px; /* Rounded corners for the dropdown */
    background-color: white; /* Background color */
    color: #2c2e35; /* Text color */
    font-size: 14px;
    cursor: pointer;
    appearance: none; /* Removes the default arrow in some browsers */
}

.dropdown select:hover {
    background-color: #e0e0e0; /* Slightly darker on hover */
}

.dropdown select:focus {
    outline: none;
    border-color: #172d4a; /* Change border color when focused */
    box-shadow: 0 0 5px rgba(0, 124, 193, 0.5); /* Optional: shadow on focus */
}

/* Style for the dropdown options */
.dropdown select option {
    color: #2c2e35; /* Text color of dropdown options */
}

/* Additional spacing and alignment for input ranges (like sliders) */
.dropdown input[type="range"] {
    width: 100%;
    margin-top: 5px;
}

/* General slider styling for all browsers */
input[type="range"] {
    -webkit-appearance: none; /* Remove default styling */
    width: 100%; /* Full width */
    height: 8px; /* Bar height */
    background: #ddd; /* Default background color of the slider bar */
    border-radius: 5px; /* Rounded corners for the bar */
    outline: none; /* Remove default focus outline */
    opacity: 0.7; /* Slight transparency */
    transition: opacity 0.2s;
}

/* Style the slider thumb (handle) */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; /* Remove default appearance */
    appearance: none;
    width: 20px; /* Thumb width */
    height: 20px; /* Thumb height */
    background: #172d4a; /* Thumb color */
    border-radius: 50%; /* Rounded thumb */
    cursor: pointer; /* Pointer cursor on hover */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* Optional shadow */
}

input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: #172d4a;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

/* Style the slider track (the bar itself) */
input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #007cc1, #004880); /* Gradient color for the bar */
    border-radius: 5px;
}

input[type="range"]::-moz-range-track {
    width: 100%;
    height: 8px;
    background: linear-gradient(90deg, #007cc1, #004880);
    border-radius: 5px;
}

/* Style when the slider is hovered or focused */
input[type="range"]:hover {
    opacity: 1;
}

input[type="range"]:focus {
    outline: none; /* Remove focus outline */
    box-shadow: 0 0 10px rgba(0, 124, 193, 0.5); /* Optional shadow when focused */
}

#reset-button, #dl-btn{
    width: 100%;
    padding: 10px; /* Adjust padding as needed */
    background-color: white;
    border: 1px solid #172d4a;
    box-shadow: 3px 3px #172d4a;
    text-align: center;
    border-radius: 5px;
    font-weight: bold;
    color: #172d4a;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s, filter 0.3s; /* Added filter transition for icon hover effect */
}
#reset-button:hover, #dl-btn:hover {
    background-color: #CCC;
}


#dl-content {
    display: none;
    /* display: flex; */
    flex-direction: row; /* Align buttons in a single line */
    justify-content: space-between; /* Add space between buttons */
    gap: 10px; /* Optional: Adjust space between buttons */
    margin-top: 10px;
}
.dl-btn-pic {
    flex: 1; /* Allow buttons to grow and take equal space */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background-color: white;
    border: 1px solid #172d4a;
    border-radius: 5px;
    font-weight: bold;
    color: #172d4a;
    cursor: pointer;
    box-shadow: 2px 2px #172d4a;
    transition: background-color 0.3s, color 0.3s;
}
.dl-btn-pic i {
    margin-right: 8px; /* Add space between the icon and the text */
}
.dl-btn-pic:hover {
    background-color: #9a999a;
    color: white;
}


.main-panel {
    width: 80%; /* Takes the remaining space */
    height: 100%;
    flex-grow: 2;
    position: relative;
    background-color: white;
}

#network-container {
    border-radius: 10px;
}

.cytoscape-container{
    position: absolute;
    width: 100%;
    height: 100%;
}

.dropdown {
    margin: 10px;
}
.dropdown select {
    font-size: 12px; /* Adjust the font size as needed */
}

.tools-widget {
  position: relative;
  /*display: inline-block;*/
  margin-top: 5px;
  margin-left: 5px;
}
.zoom-widget {
  position: relative;
  display: table;
  margin-left: 5px;
}
.zoom-tools-row {
  display: table-row;
}
.my-btn {
  border: none;
  border-radius: 3px;
  width: 40px;
  height: 40px;
  font-size: 20px;
  background: none;
  color: #2e6694;
  cursor: pointer;
}
.my-btn:hover {
  color: #9a999a;
}
#help-btn {
  background-color: #2e6694;
  color: #fff;
}
#help-btn:hover {
  background-color: #9a999a;
}


/* qTip content styling */
.qtip-wide {
     max-width: none !important;
}

.qtip-content .field {
    display: inline-block;
    width: 180px; /* Adjust width as needed */
    text-align: right;
    color: #004880;
}

.qtip-content .field-edge-use {
    display: inline-block;
    width: 75px;
    text-align: right;
}

.qtip-content .field-edge-tox {
    display: inline-block;
    width: 95px;
    text-align: right;
}

.qtip-content .compound {
    color: #172d4a;
}

.qtip-content .ptx_code {
      color: #004880;
}

.qtip-content .cas_number {
    color: #007cc1;
}

.qtip-content .dsstox_id {
    color: #8E44AD;
}

.qtip-content .formula {
    color: #da3a1d;
}

.qtip-content .smiles {
    color: #E67E22;
}

.qtip-content .inchi {
    color: #F1C40F;
}

.qtip-content .drugbank_id {
    color: #dd009c;
}

.qtip-content .prop {
    color: black;
}

/* Styles for Chemical Info Section */
.chem-info-section, .category-info-section {
    /* max-width: 100%; */
    /* margin-top: 20px; */
    max-width: 80%;
    margin: 20px auto; 
    padding: 20px;
    background-color: white; /* rgba(254, 254, 254, 0.913); */
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow-x: auto; /* Allow horizontal scrolling if content is too wide */
    display: flex;
    flex-direction: column;
    align-items: center;
}

.category-header {
    position: relative; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    padding: 5px;
}
.category-header-background {
    position: absolute; 
    left: 0; 
    right: 0; 
    height: 40px;
}
.category-header-image {
    width: 50px;
    height: 50px;
    z-index: 1;
    /* border-radius: 5px;
    margin-right: 10px; */
}
.category-header h2 {
    color: white; 
    margin: 0; 
    line-height: 1; 
    z-index: 1;
}
.chem-associated-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}
.chem-associated-table th,
.chem-associated-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.chem-associated-table th {
    background-color: #9a999a;
    color: white;
    font-weight: bold;
}
.chem-associated-table tr:nth-child(even) {
    background-color: #f9f9f9; /* Light background for even rows */
}

.chem-associated-table tr:hover {
    background-color: #e0f7fa;
}

/* Increase font size and adjust row height */
#category-chem-table td {
    font-size: 16px; /* Adjust font size */
    padding: 5px 10px; /* Reduce padding to decrease row height */
}

#category-chem-table th {
    font-size: 16px; /* Adjust font size for header cells */
    padding: 8px 10px; /* Adjust padding for header cells */
}

/* Optional: Set a fixed height for table rows */
#category-chem-table tr {
    height: 30px; /* Set the desired row height */
}


/* General Info Layout */
.chem-info-content {
    display: flex;
    gap: 20px;
    
}
.chem-general-info {
    flex: 1; /* Takes the remaining space */
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chem-info-row {
    display: flex;
    justify-content: space-between;
}

.chem-label {
    flex: 0 0 150px;
    text-align: right;
    font-weight: bold;
    color: #333;
    border-right: 3px solid #2e6694;
    padding-right: 10px;
}

.chem-value {
    flex: 1;
    text-align: left;
    color: #555;
    padding-left: 10px;
}

#chem-structure {
    flex: 0 0 25%; /* Fixed to 25% width */
    display: flex;
    justify-content: center;
    align-items: center;
}

#chem-structure img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
}

.table-tabs {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 2px;
    margin-top: 20px;
    margin-bottom: 10px;
}

.table-tab-btn {
    flex: 0 0 auto;
    padding: 10px 20px;
    background-color: #f0f0f0;
    border: 1px solid #172d4a;
    border-radius: 5px;
    color: #172d4a;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.table-tab-btn:hover {
    background-color: #424949;
    color: #fff;
}

.table-tab-btn.active {
    background-color: #424949;
    color: #fff;
}

.chem-table-container {
    display: flex;
    justify-content: center;
    width: 100%; /* Full width of the section */
}

/* Table Styles for Physico-chemical Properties */
.chem-data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    margin: 0 auto;
    font-size: 14px;
    border: 1px solid #ddd;
}

.chem-data-table th,
.chem-data-table td {
    padding: 8px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

.chem-data-table th {
    background-color: #004880;
    color: white;
    font-weight: bold;
}

.chem-data-table td {
    color: #333;
}

.chem-data-table tr:hover {
    background-color: #f0f8ff; /* Change this color to your preferred choice */
    transition: background-color 0.3s ease; /* Optional: Smooth transition effect */
}

.chem-data-table tr:nth-child(even) {
    background-color: #f9f9f9; /* Light background for even rows */
}

.chem-data-table tr:hover {
    background-color: #e0f7fa; /* Background color on hover */
}

/* Apply styles to the first column of the Physico-chemical Properties table */
#phys-properties-table td:first-child {
    color: #004880; /* Change this color to your preferred choice */
    font-weight: bold; /* Optional: make the text bold */
}

/* Apply styles to the first column of the Baseline Toxicity table */
#baseline-tox-table td:first-child {
    color: #004880; /* Change this color to your preferred choice */
    font-weight: bold; /* Optional: make the text bold */
}

/* Responsive Design */
@media (max-width: 768px) {
    .chem-label {
        flex: 0 0 100px;
    }
}


#chem-list{
    background-color: #e0e0e0;
}

/* Set a background color for the entire tab content area */
#chem_list.tabcontent {
    background-color: white; /* Light gray background for the whole tab */
    padding: 10px; /* Optional: adds spacing around the table */
    height: 100%; /* Ensure it covers the full height */
    box-sizing: border-box; /* Include padding in the element's height */
    overflow-y: auto; /* Enable scrolling within the tab content if needed */
}

/* Make sure DataTable stretches fully within the tab */
#chem-table {
    width: 100%; /* Ensures the table takes full width */
    border-radius: 4px; /* Optional: rounded corners for the table */
}
#chem_list .dataTables_wrapper {
    max-height: calc(100vh - 150px); /* Adjust based on available space */
    overflow-y: auto; /* Ensures the table and footer stay within tab boundaries */
}
/* DataTable header (column headers) background color */
.dataTables_wrapper .dataTables_scrollHead thead {
    background: linear-gradient(90deg, #004880, #007cc1) !important;
}
.dataTables_wrapper .dataTables_scrollHead th {
    color: white;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    text-align: left !important;
    padding-right: 25px; /* Ensure enough padding for sorting icons */
    /* white-space: nowrap; / */
}
.dataTables_wrapper tbody {
    font-size: 12px;
}
.dataTables_wrapper tbody tr {
    height: 50px; /* Adjust this value to your preferred row height */
}
.dataTables_wrapper tbody td {
    max-width: 250px; /* Adjust to fit within your desired table width */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; /* Prevents text from wrapping to multiple lines */
}
.dataTables_wrapper .dataTables_info {
    font-size: 12px; /* Set to desired font size */
    color: #333; /* Optional: set color */
}