html {
    box-sizing: border-box; 
}

*, *:before, *:after {
    box-sizing: inherit; 
}

.no-gutters {
    margin-left: 0;
    margin-right: 0;
	padding-left: 0;
    padding-right: 0;
}

.no-gutters p {
    margin-left: 15px;
	padding-left: 5px;
}

.composition-header {
    width: 100%;
	/*width: 600px;*/
    overflow: scroll; /* Allow scrolling if content exceeds container size */
    border: 1px solid #ccc; /* Optional: to visualize the boundary */
	
    font-family: monospace;
    font-size: 14px; 
	white-space: nowrap;
}

#Composition {
    width: 100%;
	/*width: 600px;*/
    height: 300px; /* Set a fixed height */
    overflow: scroll; /* Allow scrolling if content exceeds container size */
    border: 1px solid #ccc; /* Optional: to visualize the boundary */
	
    font-family: monospace;
    font-size: 14px; 
	font-weight: bold;
	white-space: nowrap;
}

.fragment-names {
    overflow: hidden; /* Prevents overflow */
}
.fragment-names p {
    margin: 0;  /* Remove the gap for fragment names */
}

.sequences p {
    margin: 0;  /* Remove the gap for fragment names */
}

.header-label {
  /*background: red;*/
  background: #8b1d05;
  color: white;
}

.header-sequence {
  background-color: #6231a9;
  color: white;
}

.fragment-sequence {
  background-color: #3164a9;
  color: white;
}

.fragment-sequence a {
  color: inherit; /* Inherit the color of the parent element */
  text-decoration: none; /* Remove underline */
  cursor: pointer; /* Change the pointer to default cursor */
}

.move-cursor {
    cursor: move; /* You can change this to a custom cursor URL if desired */
}