/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


* {
    margin: 0;
}




#transcripts {
  display: flex;
  flex-wrap: nowrap;     /* keep them in one row */
  gap: 20px;             /* space between boxes */
  overflow-x: auto;      /* scroll horizontally if needed */
  padding: 10px;
}





.right { float: right; }

.header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Spreads the 3 slots across the page */
  height: 60px;
  padding: 0 20px;
  background-color: #f4f4f4;
}

.side-slot {
  flex: 1; /* Both side slots take up equal available space */
  display: flex;
}

.center-slot {
  flex: 0; /* Only takes up as much space as the content needs */
  white-space: nowrap;
}

.right-align {
  justify-content: flex-end; /* Pushes the button inside the right slot to the edge */
}
.left-align {
  justify-content: flex-start; /* Pushes the button inside the right slot to the edge */
}

.container-right {
  display: flex;
  justify-content: flex-end;
  margin-right: 12px;
}

.text-green {
  color: green;
}

.text-red {
  color: red;
}