/* Your existing CSS styles */
:root {
    --background-color: #1e1e1e; /* Background color for dark mode */
    --text-color: #f0f0f0; /* Text color for dark mode */
}

body {
    background-color: var(--background-color); /* Apply background color */
    color: var(--text-color); /* Apply text color */
}

blue-on-hover {}

.blue-on-hover:hover {
    background-color: #007bff;
}

.elm-plot {
    aspect-ratio : 3 / 1;
}

.one-percent-bound {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    padding: 1%;
}

.rounded {
    border-radius: 5px; /* Add rounded corners */
}

/* Used */
.input-default {
    width: 100%;
    height: 36px;
}

/* Default tab style */
.tab {
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
    display: block; /* Display tabs horizontally */
    background-color: #333333; /* Light background color */
    padding: 10px 0; /* Adjust padding as needed */
    border-radius: 5px; /* Add rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    color: #c0c0c0; /* Default text color */
    width: 100%;
}

/* Hover effect for tabs */
.tab:hover {
    background-color: #007bff;
}

/* Active tab style */
.tab.active {
    background-color: #007bff; /* Blue background color for active tab */
    color: #ffffff; /* White text color for inactive tab */
}

.linkButton {
    color: yellow;
}

/* Used */
.leftAlignedFlex {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 100%;
}

.rightAlignedFlex {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
}

/* Ensures tables use full div and have natural overflow */
.table-container {
    width: 100%;
    overflow-x: auto;
}

/* Used for rotations */

/* Scroll wrapper for table */
.rotation-table-scroll-wrapper {
    overflow-y: auto;
    width: 100%;
    height: 90vh; /* fill screen */
    flex-grow: 1; /* fills remaining vertical space */
}

.rotation-table {
    table-layout: fixed;
    border-collapse: collapse;
    border-spacing: 0;
}

.rotation-table th {
    padding: 8px;
    position: sticky;
    top: 0; /* stuck to top of scroll container */
    z-index: 5;
    background-color: #1a1a1a;
    color: white;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-top: none;
    /* Remove bottom border */
    border-bottom: none;
    /* Simulate sticky bottom border */
    box-shadow: inset 0 1px 0 #ccc, inset 0 -1px 0 #ccc;
}

.rotation-table td {
    border: 1px solid #ccc;
    margin: 0;
    padding: 0 4px;
}

.cell-auto {
    width: auto;
}

.cell-fill {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Used for selection tables */
.selection-table {
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    border-spacing: 0;
}

.selection-table table {
    width: 100%;
}

.selection-table th {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}

.selection-table td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}

/* general text alignment related stuff */

.table-align-left {
  text-align: left;
  justify-content: flex-start;
  font-size: 14px; /* Default font size */
}

.table-align-right {
  text-align: right;
  justify-content: flex-end;
  font-size: 14px; /* Default font size */
}

.table-align-center {
  text-align: center;
  font-size: 14px; /* Default font size */
}

th:hover {
    background-color: #007bff; /* Blue background color for hover */
}

td:hover {
    background-color: #007bff; /* Blue background color for hover */
}

.text-ellipsis {
    text-overflow: ellipsis
}

.plotly-select {
    text-overflow: ellipsis
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;
    max-width: 100%;
    width: 100%;
}

.w-20 {
    width: 20%;
}

.w-60 {
    width: 20%;
}

.w-100 {
    width: 100%;
}

.w-50 {
    width: 50%;
}