input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

#header, .content, #output, #error-output {
    width:100%;
    border: 1.5px solid black;
    background: #ffffda;
    box-sizing: border-box;
    border-radius: 10px;
}

.content, #output, #error-output {
    padding:10px;
}

#error-output {
    color: red;
}

/* Start out hidden. */
#output-wrapper {
    display:none; 
}

#header-wrapper, .content_wrapper, #output-wrapper, #error-output-wrapper {
    padding:10px;
}

.content_wrapper, #output-wrapper, #error-output-wrapper {
    padding-top:0px;
}

#header > table {
    width:100%;
}

.header_spacer {
    width: 20px;
}

.output_error {
    color: red;
}
.output_note {
    color: orange;
}

.output_success {
    color: green;
}

.header_col {
    width:0%;
    white-space: nowrap;
    vertical-align: middle;
}

button {
    padding: 4px;
    font-size: 100%;
    border: 1.5px solid black;
    border-radius: 5px;
    cursor: pointer;
    background-color: rgb(239, 239, 239);
}

body {
    font-family: "Noto Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0px;
    font-size: 20px;
    /* padding:5px; */
    box-sizing: border-box;
    /* border: 1.5px solid #735c42; */
}

#staleness-indicator {
    font-weight: 900;
}

.example_row {
    cursor: pointer;
    text-align: left;
    overflow-x: scroll;
    border:1px solid black;
    margin-bottom: 5px;
}

.example_row math-div {
    margin:10px;
}

.example_row:hover {
    background-color: rgba(0, 0, 255, .25);
}

.characteristic_input, .d_input {
    width:24px;
    font-size: 24px;
}

.d_input {
    
    position: relative;
    top:15px;
    margin-right:10px;
}

.header_col .input_desc {
    display:inline-block;
    margin-left:10px;
    font-size: 150%;
    font-weight: 800;
}

.module_name, .result_name {
    margin-right:5px;
    font-size: 150%;
    font-weight: 800;
    /* width:180.123px; */
}

.result_name {
    padding-bottom: 3.5px;
    border-bottom: 2px solid black;
}

.result_name_unbolded {
    font-weight: normal;
}

.header_col input {
    display:inline-block;
    font-size: 120%;
    width:30px;
}
.equation_cell {
    /* display: flex;
    flex-direction: column;
    align-items: stretch;
    padding: 0; */

    height:100%;
    padding: 0;
    height:0;
}

.equation_wrapper {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    min-height:100%;
}

.equation {
    width:100%;
    padding:10px;
    box-sizing: border-box;
    border:1.5px solid black;
    min-height:80px;
    margin-bottom: 0px;
    
    flex: 1 0 auto;
}

.trigger-border-fade-red {
  animation: fadeOutRedBorder 1.5s ease-in-out forwards;
}

.trigger-border-fade-orange {
  animation: fadeOutOrangeBorder 1.5s ease-in-out forwards;
}

.trigger-border-fade-green {
  animation: fadeOutGreenBorder 1.5s ease-in-out forwards;
}

@keyframes fadeOutGreenBorder {
  0% {
    box-shadow: 0 0 15px 5px green;
  }
  100% {
    box-shadow: 0 0 15px 5px transparent;
  }
}

@keyframes fadeOutOrangeBorder {
  0% {
    box-shadow: 0 0 15px 5px orange;
  }
  100% {
    box-shadow: 0 0 15px 5px transparent;
  }
}

@keyframes fadeOutRedBorder {
  0% {
    box-shadow: 0 0 15px 5px red;
  }
  100% {
    box-shadow: 0 0 15px 5px transparent;
  }
}

.ordinal {
    font-weight: 600;
}

#recalc-button {
    margin-right:5px;
}

body {
    background-color: RGBA(193,238,254,1.0);
}

pre {
    border: 1.5px solid black;
    box-sizing: border-box;
    margin:0px;
    margin-left:0px;
    padding:10px;
    font-size: 75%;
    background-color: #EEEEEE;
    max-height:160px;
    overflow-y: scroll;
    overflow-x: auto;
}

ul {
    margin:0px;
    padding-left:10px;
}

.spacer_row_col {
    height:40px;
}

.spacer_row_col_very_tiny {
    height:2px;
    padding:0px;
}

.spacer_row_col_tiny {
    height:10px;
}

.spacer_row_col_small {
    height:20px;
}

.spacer_row_col_inner {
    border-top:2px dotted black;
}

.results_row {
    padding-left:20px;
}

input {
    border: 1.5px solid black;
    padding-left:5px;
}

.auto-size-table {
    width: 0%;
    white-space: nowrap; /* Prevents text from wrapping within cells */
    border-collapse: collapse; /* Optional: for cleaner borders */
}

.auto-size-table th,
.auto-size-table td {
    padding: 0px;
    text-align: left;
    /* border: 1px solid #ddd; */
    border:3px solid black;
    width: 1%; /* Forces columns to be as small as possible initially, respecting content length */
}

.r_by_r_zero {
    color: grey
}

.r_matrix td {
    container-type: inline-size;
}

.r_matrix .r_by_r_equation_cell, .r_matrix .r_by_r_zero_cell {
    background: white;
}

.r_matrix .r_by_r_equation_cell:hover, .r_matrix .r_by_r_zero_cell:hover {
    background-color: lightskyblue
}

.r_matrix td span {
    display: flex;
    align-items: center;
    justify-content: center;
}

.r_matrix td math-span {
    /* display: flex; */
    align-items: center;
    justify-content: center;
}

#results-e-matrices-by-degrees td {
    /* display: flex; */
    align-items: center;
    vertical-align: middle;
    text-align: center;
}

.result_name_header {
    margin-left:10px;
    margin-right:10px;
}

.reduction_td {
    cursor:pointer;
}

.reduction_pop_up {
    width:100vw;
    height:100vh;
    z-index:1000;
    position:static;
    display:none;
    border:2px solid black;
    box-shadow: 0 0 10px #4a90e2, 
                0 0 20px #4a90e2, 
                0 0 40px #4a90e2;
}

/* 1. Full-Screen Backdrop Overlay */
#loading-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.6); /* Semi-transparent black */
  z-index: 9999; /* Ensures it sits above all other elements */
  
  /* Centering Layout */
  display: flex;
  justify-content: center;
  align-items: center;

  flex-flow: column;
  
  /* Visibility Toggle Configuration */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Class to trigger visibility via JavaScript */
#loading-modal.active {
  opacity: 1;
  visibility: visible;
}

.flag_breakdown_table {
    border-collapse: collapse;
}

.flag_breakdown_table td {
    padding:10px;
}

.flag_breakdown_title {
    font-weight: bold;
}

.flag_breakdown_title_td {
   text-align: center;
}

.flag_breakdown_td_bottom_border {
    border-bottom: 2.375px solid black;
}

.flag_breakdown_td_right_border {
   border-right: 2.375px solid black;
}

/* 2. The Animated Spinner Component */
.loading_modal_spinner {
  width: 60px;
  height: 60px;
  border: 6px solid #f3f3f3; /* Light gray base track */
  border-top: 6px solid #3498db; /* Blue accent spinning line */
  border-radius: 50%; /* Transforms square into a circle */
  animation: spin 1s linear infinite;
}

.clickable_math_elem {
    color:blue;
    pointer-events:none;
}

/* 3. Infinite Rotation Keyframes */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#staleness-indicator {
    color: red;
}

#yes-no-dialog-wrapper {
    width:100%;
    height:100%;
    /* position:fixed; */
    /* overflow: scroll; */
    top:0;
    left: 0;
}

#yes-no-dialog-wrapper, #map-container {
    z-index: 1656;
}

#yes-no-dialog-background, #map-container {
    background-color: rgba(0, 0, 0, .7);
}

#yes-no-dialog {
    background:white;
    padding:20px;
    border:1.5px solid black;
    border-radius: 10px;
    display: inline-block;
    font-size:20px;
    max-width:33%;
    margin:20px;
}

#yes-no-dialog math-div {
    margin-top: 10px;
    display: block;
}

.r_by_r_entry {
    pointer-events: none;
    /* width:100%;
    height:100%; */
}

#metrics-table {
    border-collapse: collapse;
}

#metrics-table tr:first-child td:first-child {
  border:none;
}

#metrics-table td {
    border: 3px solid black;
    padding: 8px;
}

.metrics_table_value {
    background-color: white;
    text-align: right;
}

.metrics_table_value_name, .metrics_table_header {
    background-color: lightgray;
    font-weight: bold;
}

.metrics_table_header {
    text-align: center;
}

.r_by_r_entry_wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 8px; /* Apply your original TD padding here */
  box-sizing: border-box;
  position:relative;
}

.tippy-box {
    font-size:32px;
}

.tippy-box[data-theme~="left-arrow"][data-placement^="bottom"] .tippy-arrow {
  left: 15px !important;
  right: auto !important;
  transform: none !important;
}



.latex {
    width:100%;
    /* margin-top:5px; */
    height:80px;
    box-sizing: border-box;
    border:1.5px solid black;
    padding: 10px 124px 10px 10px;
    min-width:100%;
    font-size:13.3333px;
}

.textarea-container textarea {
    display: block;
    margin-bottom:5px;
}

.textarea-container {
  position: relative;
  width: 100%;
  /* max-width: 500px; */
}

.textarea-container-auto-expand {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    box-sizing: border-box;
    padding-top: 1px;
    padding-bottom: 1px;
}

/* textarea {
  width: 100%;
  height: 150px;
  padding: 40px 12px 12px 12px;
  box-sizing: border-box;
  resize: vertical;
} */

.button-group {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  /* margin-top:5px; */
}

.button-group button {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
}

.button-group button:hover {
  background-color: #e0e0e0;
}

.preprocessing_related > td {
    padding-left:30px;
}

.r_matrix, .r_matrix_latex_wrapper {
    margin-left: 30px;
}

.r_matrix_rendered {
    font-size:24px;
    display: inline-block;
}

.preprocessing_related > .results_row {
    padding-left:55px;
}

.r_by_r_label {
    background-color: lightgray;
}

.checkbox_container, .checkbox_container > label, .checkbox_container > input {
    cursor: pointer;
}

.checkbox_container > input {
    width:24px;
    height:24px;
}

.checkbox_container {
    margin:20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.export_option_row {
    margin:20px;
    display: block;
}

.export_option_row_wrapper {
    display: block;
    align-items: center;
    gap: 10px;
}

.options_chooser_math {
    pointer-events: none;
}

.content, #header {
    overflow-x: scroll;
}

.content {
    position:relative;
    padding-top:0px;
}

.sticky_content_row {
    position: sticky;
    left: 0
}

.r_matrix_latex_wrapper {
    margin-top:10px;
}

.r_matrix table tr:first-child td:first-child {
  border:none !important;
}

.input-table {
    width: 100%;
    max-width: 100%;
    table-layout: fixed;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.input-table tr th:first-child,
.input-table tr td:first-child {
   width:180.123px;
}

.equation_simplified_wrapper {
    position:relative;
    z-index:2;
}

#stale-indicator {
    background-color: rgba(0, 0, 0, .7);
}


math-div .katex .vlist-t {
  display: inline-table !important;
}
math-div .katex .vlist-r {
  display: table-row !important;
}
math-div .katex .vlist-s {
  display: table-cell !important;
}