* {
  margin: 0;
  padding: 0;
  color: white;
}

html, body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#icon {
  float: left;
  position: absolute;
  top: 50%;
  left: 5px;
  transform: translate( 0%, -50%);
}

#header {
  position: relative;
  background-color: #121212;
  height: 7vh;
  margin: 0;
}

#header h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#main {
  background-color: #202020;
  height: calc( 100% - 7vh );
  /* visibility: hidden; */
  flex: 1;
}

.dataset-container {
  /* border: 5px solid #100446; */
  margin: 10px;
}

/* Style the tab */
.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #121212;
  color: white;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
  border: 1px solid #3FB449;
}

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

.tabcontent h3 {
  color: white;
  padding: 5px;
}

/* Change background color of buttons on hover */
.tab button:hover {
  background-color: #2c2e2c;
}

.unsaved {
  background-color: #3f1818; /* Highlight unsaved cells */
}

/* Create an active/current tablink class */
.tab button.active {
  background-color: #202020;
}

.delete-button {
  background-color: #5a1b1b;
  color: white;
  border: none;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.modify-button {
  background-color: #174b16;
  color: white;
  border: none;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

.discard-button {
  background-color: #420f0f;
  color: white;
  border: none;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}


.table-header {
  position: relative;
  background-color: #3d3d3d;
}

.create-button {
  padding: 5px 10px;
  border: 1px solid #25682a;
  background: #3FB449;
  background: -webkit-gradient(linear, left top, left bottom, from(#3FB449), to(#25682a));
  background: linear-gradient(to bottom, #3FB449 0%, #25682a 100%);
  color: #fff;
  font-weight: bold;
  -webkit-transition: color .3s, background .3s, opacity, .3s;
  transition: color .3s, background .3s, opacity, .3s;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0%, -50%);
}

.create-button:hover {
  border: 1px solid #328e3a;
  background: #5fc768;
  background: -webkit-gradient(linear, left top, left bottom, from(#5fc768), to(#328e3a));
  background: linear-gradient(to bottom, #5fc768 0%, #328e3a 100%);
  cursor: pointer;
  color: #000;
}

#serverInfo {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translate(0%, -50%);
}

#versionDiv h4, p {
  display: inline-block;
}

#uptime h4,p {
  display: inline-block;
}

.tab-tables {
  height: auto;
  overflow: visible;
}

.tabulator {
  background-color: #202020;
  max-width: 100%;
}

.tabulator .tabulator-header {
  border-bottom: 3px solid #3FB449;
}

/* Set background and text color for headers */
.tab-tables .tabulator-header .tabulator-col {
  background-color: #101010; /* Dark gray */
  color: #fff; /* White */
}

.tabulator-header-contents {
  background-color: #101010;
}

.tabulator-tableholder {
  background-color: #101010;
}


.tabulator-tableholder .tabulator-table {
  /* color: #fff; */
  background-color: #111111;
}

.tabulator-row {
  background-color: #151515;
}

.tabulator-row.tabulator-row-even {
  background-color: #202020;
}

/* Change column header background color to black on hover */
.tabulator .tabulator-header .tabulator-col:hover {
  background-color: #000; /* Black background color */
  color: #fff; /* Change text color to white for better visibility */
}

.tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
  background-color: #000; /* Black background color */
  color: #fff; /* Change text color to white for better visibility */
}

/* Change row color to black on hover */
.tabulator .tabulator-row:hover {
  background-color: black; /* Black background color for hover */
  color: white; /* White text color for hover */
}

.tabulator .tabulator-footer {
  background-color: #101010;
}

.tabulator .tabulator-footer .tabulator-page-size {
  color: black;
}

.tabulator .tabulator-footer .tabulator-page-size option {
  color: black;
}

.tabulator-header-filter input {
  background-color: #1f1f1f;
  color: white;
}

.inspector-link {
  display: inline-block; /* Make it behave like a button */
  padding: 10px 10px; /* Add some padding */
  background-color: #322564; /* Set background color */
  color: white; /* Set text color */
  text-decoration: none; /* Remove the underline */
  border-radius: 5px; /* Rounded corners */
  font-size: 16px; /* Adjust font size */
  font-weight: bold; /* Make the text bold */
  text-align: center; /* Center the text */
  cursor: pointer; /* Change cursor to pointer */
  margin: 10px;
}

.inspector-link:hover {
  background-color: #444477; /* Change background color on hover */
}


.render-items-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  /* position: fixed;
  top: 46px;
  bottom: 0;
  left: 0;
  right: 0; */
}


/* .modal {
  width: 50%;
} */

.items {
  width: 50%;
  height: 472px; /* height of the 3D diagram */
  overflow-y: auto;
  display: inline-block;
  vertical-align: top;
  margin-left: 10px;
}

.box-links {
  display: inline-flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: 3px solid #3FB449;
  margin-bottom: 10px;

  h4 {
    margin-top: 0px;
    margin-bottom: 0px;
  }

  a {
    margin-left: 10px;
    margin-right: 10px;
    width: 80px;
    text-align: center;
    overflow: hidden;
    white-space: nowrap;
  }
}

.box-link {
  flex: 1; /* Make all tabs the same width */
  text-align: center; /* Center text within each tab */
  padding: 10px 15px; /* Add some padding inside each tab */
  font-family: Arial, sans-serif; /* Use a clean, modern font */
  font-weight: bold; /* Make the text bold */
  color: #333; /* Set text color */
  background-color: #f4f4f4; /* Light background color for the tabs */
  border: none; /* Remove default button borders */
  border-right: 1px solid #ccc; /* Add a small border between tabs */
  cursor: pointer; /* Change cursor to pointer on hover */
  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
}

.box-link:hover {
  background-color: #aaa; /* Change background on hover */
}

.box-link.active {
  background-color: #fff; /* Different background for the active tab */
  border-bottom: 2px solid #007bff; /* Highlight active tab with a blue border */
  color: #007bff; /* Change text color for active tab */
}

.box-link:focus {
  outline: none; /* Remove the focus outline when the button is clicked */
}

.box-table {
  border: 1px dashed #ccc;
  width: 300px;
}

.box-table th, td {
  padding: 8px 16px;
  margin-bottom: 10px;
}

.box-table th {
  background-color: #333;
}

.search-box {
  width: 250px; /* Adjust the width as needed */
  margin-left: 10px; /* Add some space between the input and button */
  padding: 10px 15px;
  border: 2px solid #ccc; /* Light border color */
  border-radius: 25px; /* Rounded corners */
  background-color: #fff; /* White background */
  color: #333; /* Text color */
  font-size: 16px; /* Font size */
  transition: all 0.3s ease-in-out; /* Smooth transition */
}

.search-box:focus {
  outline: none; /* Remove default outline */
  border-color: #66afe9; /* Change border color on focus */
  box-shadow: 0 0 8px rgba(102, 175, 233, 0.6); /* Add a subtle shadow on focus */
}

.search-button {
  padding: 10px 15px;
  border: 2px solid #ccc;
  border-radius: 25px;
  background-color: #333; /* Darker background for button */
  color: #fff; /* White text color */
  cursor: pointer;
  transition: background-color 0.3s ease-in-out;
  margin-left: 10px; /* Add some space between the input and button */
}

.search-button:hover {
  background-color: #555; /* Slightly lighter on hover */
}