body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    padding: 20px;
    max-width: 2048px;
    display: flex;
    flex-wrap: wrap;
}
.container { display: flex; flex-direction: column; gap: 15px; }
.row { display: flex; align-items: left; gap: 10px; }
.buttonbt { padding: 8px 12px; border-radius: 6px; border: none; background-color: #007bff; color: white;  height: 40px; width: 150px; font-size: 15px; cursor: pointer; }
.buttonbt:disabled { background-color: #cccccc; cursor: not-allowed; }
#messageInput { flex-grow: 1; padding: 8px; border: 1px solid #ccc; border-radius: 6px; background-color: rgba(50,50,50,0.8); }
#log { width: 100%; height: 250px; border: 1px solid #ccc; border-radius: 6px; overflow-y: scroll; padding: 10px; background-color: rgba(50,50,50,0.8); color: #c0ffee; white-space: pre-wrap; }
#status { font-weight: bold; }

canvas {
border: 1px solid black;
left: 20px;
width: 1024px;
height: 1024px;
}
.btserialmonitor{
background-color: rgba(50,50,50,0.8);
width: 800px;
padding: 1%;
margin: 1%;
color: #c0ffee;
border-radius: 30px;
border: 1px solid white;
text-align: left;
z-index: 90;
display: block;
overflow-y: scroll;
height: 1024px;
}
#controls {
width: 40%;
padding: 1%;
margin: 1%;
}
#audiodiv {
  position:relative;
  font-size: 24px;
  width: 100%;
height: 50px;
}
form{
  height: 500px;
  overflow-y: scroll;
  padding: 3%;
  margin: 3%;
}
.wavControls {
  background-color: #333;
        border-radius: 5px;
        border: 1px solid white;
        color: #c0ffee;
        text-align: right;
        display:block;
        margin: 10px;
        margin-right: 500px;
        width: 100%;
}
  .prodiv{
background-color: rgba(50,50,50,0.8);
width: 100%;
left: 3%;
padding: 3%;
margin: 3%;
position: relative;
color: white;
border-radius: 30px;
border: 1px solid white;
top: 5px;
bottom: 5px;
height: 1080px;

text-align: left;
z-index: 90;
display:block;
overflow-y: scroll;


}

button{
background-color: rgba(50,50,50,0.8);
font-size: 75px;
width: 150px;
height: 150px;
display: inline;
color: #c0ffee;
border-radius: 30px;
border: 1px solid white;
}


.inputstyle {
        position:relative;
background-color: #111;
        border-radius: 5px;
        border: 1px solid white;
        color: #c0ffee;
  font-size: 35px;
height: 100px;
right:20px;
width:90%;

}
.slider {

-webkit-appearance: none;
width: 100%;
height: 15px;
border-radius: 5px;
border: 1px solid white;
background: #222;
outline: none;
opacity: 0.7;
-webkit-transition: .2s;
transition: opacity .2s;
}

.slider::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background: #c0ffee;
cursor: pointer;
}

.slider::-moz-range-thumb {
width: 25px;
height: 25px;
border-radius: 50%;
background: #c0ffee;
cursor: pointer;
}


    .form-input {
        background-color: #333;
        border-radius: 5px;
        border: 1px solid white;
        color: #c0ffee;
        text-align: right;
        display:block;
        margin: 10px;
        margin-right: 500px;
        width: 100%;


    }
    .dark-mode, .body-content {
        background-color: #333;
        color: #c0ffee;
    }
    .genbutton {
        width: 50%;
        height: 5%;
         background-color: #333;
        color: #c0ffee;
    }
    body{
        background-color: #111;
    }
    input[type="file"]{
        position: relative;
        height: 50px;
        top:30px;
        width:100%;
        padding-left: 20px;
outline: none;
    }
    input[type="file"]:before {

content: " Select .wav";
background: #333;
width: 210px;
height: 50px;
font-size: 35px;
display: block;
text-align: left;
position: absolute;
margin: 0px;
margin-top: -30px;
left: 0px;
border: 1px solid #c0ffee;
border-radius: 30px;

top: 1px;
padding-top: 30px;
line-height: 35px;
color: #c0ffee;
padding-left: 5px;
display: block;
}
.dro-container {
margin-top: 20px;
color: #c0ffee;
}
#dro-table {
width: 100%;
border-collapse: collapse;
}
#dro-table th, #dro-table td {
border: 1px solid #c0ffee;
padding: 8px;
text-align: left;
}
#dro-table input {
width: 100%;
background-color: #333;
color: #c0ffee;
border: none;
}
#gcode-container {
width: 100%;
display: flex;
flex-direction: column;
height: 300px;
}
#gcode-editor-container {
display: flex;
flex-direction: row;
flex-grow: 1;
}
.gcode-button {
font-size: 14px;
height: 30px;
width: 100px;
padding: 5px;
margin-bottom: 5px;
border-radius: 6px;
}
#line-numbers {
width: 40px;
padding: 10px;
background-color: #222;
color: #888;
text-align: right;
font-family: monospace;
white-space: pre;
overflow: hidden;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-right: 1px solid white;
}
#gcode-input {
flex-grow: 1;
background-color: #222;
color: #c0ffee;
border: 1px solid white;
border-radius: 5px;
padding: 10px;
font-family: monospace;
white-space: pre;
overflow: auto;
}
.gcode-line-highlight {
background-color: #444;
}
.gcode-command {
color: #ff7f7f;
}
.gcode-axis {
color: #7fff7f;
}
.gcode-value {
color: #7f7fff;
}