/* Mar.26-27,2025 */

h1 { font-size:42px; line-height:17px }
h2 { color:#800000; text-align:left; }
h3 { color:#708000; font-family:sans-serif; font-style:oblique }
h4 { color:#800000 }
p { text-align:justify; margin:0.5em 0em }
table.head { background-color:#d0c870 }
table.foot { background-color:#d0c870 }
.right { text-align:right }
.cen { text-align:center }

tt { font-family:Courier,monospace; font-size:15px; transform:scaleX(0.85); display:inline-block; }

div#main {
    width: 97%;		/* of the screen width */
    max-width: 700px;	/* Prevents it from getting too big */
    margin: 0 auto;
}

.table1-group {
	justify-content: center;	/* Centers tables horizontally */
	align-items: flex-start;	/* Keeps natural cell-height */
	display: flex;		/* Tables side by side */
	flex-wrap: wrap;	/* Allows items to stack if needed */
	gap: 5px;
}
.table1-container {
	border-collapse:collapse; width:320px;
}
@media (min-width: 640px) {	/* When screen is wide enough, stack tables side by side */
  .tables-container { flex-direction: row; }
}
@media (max-width: 639px) {	/* When screen is too narrow, stack tables vertically */
  .tables-container { flex-direction: column; }
}
.table1-container th, .table1-container td {
	text-align:left; padding-left:5px; border:1px solid #aaa; height:20px;
}

.bpm-wrapper input {
    width: 35px;
	text-align:right;
    padding: 6px;  margin: 5px;
    border: 1px solid #cdc;  border-radius: 10px;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
	overflow: none;
}

.textarea-wrapper {
	overflow-x: auto;	/* Enables horizontal scrolling */
    display: flex;		/* Align textareas side by side */
	width: 600px;
	max-width: 90%;
    gap: 0px;		/* Space between textareas */
}
.textarea-wrapper textarea {
    height: 220px;		/* Fixed height for both textareas */
    font-family: Courier,monospace; font-size: 15px;
    line-height: 1.3;
    border: 1px solid #cdc;
    resize: none;
    overflow: auto;		/* Enable scrollbars if content overflows */
}
#lineNumbers {
    width: 35px;
    background-color: #eee;
	transform:scaleX(0.85);
	transform-origin: right;	/*against scaling transform */
	margin-left: -6px;		/* Adjust based on scaleX (35*0.85 = 6) */
    text-align: right;
    padding-right: 5px;
    overflow: hidden;		/* Hide scrollbar */
}
#sandboxEditor {
    padding-left: 5px;
	transform:scaleX(0.85);
	transform-origin: left;		/*against scaling transform*/
	width:117.65%;		 		/*Take the rest of the available space 100%/0.85 = 118 */
	margin-right: -15%; 	/* Adjust based on scaleX (100%-85% = 15%) */
	min-width: 0;			/* Allow flex item to shrink */
}

.buttons button { text-align:center; margin-top:5px; font-size:14px; line-height:1.5; }
.audio-player { text-align:center; margin-top:20px; }
.message-area {
	margin-top:10px; padding:10px; border:1px solid #ccc; background:#eeb;
	max-width:400px; height:80px; overflow:auto; text-align:left;    
    font-family: Courier,monospace; font-size: 15px; transform:scaleX(0.85);
}