#data-in-scene::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -10px;
  margin-top: -10px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

.measure {
}

.measure::after {
  content: "";
  position: absolute;
  top: -50%;
  left: -30px;
  margin-top: 16px;
  border-width: 16px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}

#data-in-scene td {
    padding: 0 5px 0 5px;
}

#data-in-scene th {
    padding: 0 5px 0 5px;
    background-color: #000;
}



.filterWrapper {
  /* position: absolute; */
  width: 100%;
  height: 450px;
  z-index: 50;
  top: -450px;
  left: -15px;
}

.filterWrapper .layer {
  position: absolute;
  width: 100%;
  background: rgba(150, 150, 150, 0.473);
  z-index: 60;
}

.filterWrapper .tick {
  position: absolute;
  width: 100%;
  height: 8px;
  background: transparent;
  border-style: solid;
  border-color: black;
  z-index: 60;
  cursor: move;
}

.filterWrapper .layer.top {
  top: 0;
}

.filterWrapper .tick.top {
  top: 0;
  transform: translateY(-4px);
}

.filterWrapper .layer.bottom {
  bottom: 0;
}

.filterWrapper .tick.bottom {
  top: 100%;
  transform: translateY(-4px);
}

.tableContainer {
  height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.tableContainer ::-webkit-scrollbar {
  width: 5px;
}

.tableContainer table thead th {
  top: 0;
  position: sticky;
  background-color: white;
}

tr:hover{
  cursor: pointer;
}

.tableAlert {
  width: 40% !important;
  position: absolute;
  bottom: 0;
  right: 0;
}

.contentContainer {
  height: 630px;
}

.sensorsTableContainer{
  height: 50%;
}

.sensorsChartContainer {
  height: 50%;
  position: fixed;
}

tr.selected {
  border: solid;
  border-color: black;
  border-width: '15px' ;
}

.topHalf{
  height: 50%;
}

.bottomHalf {
  height: 50%;
  position: fixed;
}

.comparison-filter {
  padding-top: 50px;
  /* padding-top: 30px; */
}

.designRatioTableContanier {
  padding-left: 50px;
}

.riskTableContainer{
  height: 50%;
  padding-right: 40px;
}
/* Risk levels */
.riskTableContainer td{
  padding: 2px;
  text-align: center;
}

.riskTableContainer tr{
  height: 20%;
}

.riskTableContainer tr td:first-of-type{
  background-color: rgb(197, 197, 197);
  width: 120px; /* Set the desired width */
  flex: 0 0 120px;
}


.riskTableContainer th:not(:first-child) {
  background-color:  rgb(197, 197, 197);
  text-align: center;
  
}

.riskTableContainer td:first-child {
  font-weight: bold; /* Makes the first column bold */
  /*text-align: left;   Aligns the text to the left for better readability (optional) */
}

.bottomHalfRisk {
  height: 50%;
  width: 100%;
  padding-top: 15%;
  /*padding-right: 20px;*/
  text-align: center;
}

.low {
  background-color: #6dab6a;
}

.medium {
  background-color: #fece00;
}

.high {
  background-color: #fc831f;
}

.extreme {
  background-color: #dc232b;
}

.box-in-matrix {
  max-height: 100px;
  text-align: 'center';
  padding: 0;
  border: 0.25px solid #8080805e;
  max-width: 100%;
}

.probabilityTableContainer {
  padding-right: 25px;
  /*margin-right: -15px;*/
  width: 100%;
  margin-left: 15px;
}

.probabilityTableContainer .row {
  height: 15%;
}

.probabilityTableContainer .row > div {
  display: flex; /* Enable Flexbox on each column */
  align-items: center; /* Vertically center the text */
  justify-content: center; /* Horizontally center the text */
  text-align: center; /* Align the text inside */
  height: 100%; /* Ensure the div takes the full height of its row */
  padding: 10px; /* Optional: Add padding for better spacing */
}

.probabilityTableContainer .row > div:first-child {
  width: 120px; /* Set the desired width */
  flex: 0 0 120px; /* Ensure the width is fixed */
  background-color:  rgb(197, 197, 197);
  font-weight: bold;
  padding: 0;
}

.probabilityTableContainer .row > div:not(:first-child) {
  flex: 1; /* Make other columns flexible */
}

.probabilityTableContainer .row:last-child > div:first-child {
  background-color: #ffffff00; /* Example: Light red background */
  color: #000; /* Optional: Text color */
  border: 1px solid #ffffff00;
}

.probabilityTableContainer .row:last-child {
  height: 50px; /* Set a new height for the last row */
}

.green {
  background-color: #6dab6a;
}
.probabilityTableContainer > div:last-child > div:not(:first-child) {
  background-color:  rgb(197, 197, 197);
  font-weight: bold;
}

.yellow {
  background-color: yellow;
}

.orange {
  background-color: #fece00;
}

.red {
  background-color: #dc232b;
}

.comparison-select {
  font-size: 1em;
  margin-top: 2em;
}

.options-col {
  list-style-type:none;
  margin:25px 0 0 0;
  padding:0;
}

.options-col input[type="radio"] {
  display: none;
}

.options-col label {
  padding: 5px;
  border-radius: 3px;
  width: 100%;
  text-align: center;
  border: 1px solid #CCC;
  cursor: pointer;
  z-index: 90;
}

.options-col input[type="radio"]:checked+label,
.Checked+label {
  background: #939393;
  color: white;
}

.options-col label:hover {
  background: #DDD;
}

.padding-top {
  padding-top: 50px;
}

.custom-table {
  /* width: 100%;*/
   border-collapse: collapse;
 }
 
.custom-table th {
  border-top: 1px solid #5F5F5F; /* Top border */
  border-bottom: 1px solid #5F5F5F; /* Bottom border */
  text-align: center;
  padding: 10px; /* Adjust padding as needed */
  background-color: #F7F7F7; /* Light gray background */
  text-transform: capitalize;
}

.custom-table th:first-child {
  border-left: none; /* Remove left border */
}

.custom-table th:last-child {
  border-right: none; /* Remove right border */
}

/* Optional: Add hover effect for better UX */
.custom-table th:hover {
  background-color: #e9e9e9;
}

/* Table Row Styling */
.custom-table tbody tr {
  border-bottom: 1px solid #ddd; /* Light grey border between rows */
}

/* Alternate Row Colors */
.custom-table tbody tr:nth-child(even) {
  background-color: #f9f9f9; /* Light grey background for even rows */
}

.custom-table tbody tr:nth-child(odd) {
  background-color: #fff; /* White background for odd rows */
}

/* Padding and Alignment for Cells */
.custom-table tbody td {
  padding: 5px; /* Padding inside cells */
  text-align: center; /* Left-align text */
}

/* Hover Effect for Rows */
.custom-table tbody tr:hover {
  background-color: #f1f1f1; /* Slightly darker grey background on hover */
  cursor: pointer; /* Pointer cursor to indicate interactivity */
}