/*
Styling for the QuARC GUI.
Styling HTML buttons beyond default aesthetics.
Media queries to alter button and text sizing for smaller browser windows
and devices.
*/
/*
button {
   height: 60px !important;
}
*/

.stats { display:flex; flex-wrap:wrap; gap:1.5rem; margin:1rem 0 1.5rem; font-size:0.95rem; color:slategray; }

.stats span { font-weight:600; color:midnightblue; }

.axis text { fill:slategray; font-size:14px; }

.axis path, .axis line { stroke:lightsteelblue; }

.axis-label { fill:slategray; font-size:14px; font-weight:600; }

.grid line { stroke:lavender; }

.grid path { display:none; }

.bar { rx:4; ry:4; }
/* .bar.positive { fill:#2563eb; } blue */
.bar.positive { fill: cornflowerblue; }  
/* .bar.negative { fill:#ef4444; } red */
.bar.negative { fill: mediumspringgreen; }

#chart path#lineOverlay { stroke: deepskyblue; stroke-width: 1.5; fill: none; }

/* Start/stop design, created by Simon */
 
.daqbutton {
   display: inline-block;
   padding: 1ex 1em;
   border: none;
   color: white;
   text-align: center;
   text-decoration: none;
   font-size: 18pt;
/*    font-size: 24px; */
/*    width: 210px; */
   border-radius: 5px;
   cursor: pointer;
   outline: none;
   box-shadow: 0 9px grey;
}

.daqbuttonfixed {
/*    width: 210px; */
   position: absolute;
   top: 100px;
   left: 40px;
   z-index: 2;
}

.daqbutton:active {
/*   background-color: #0f0; */
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

/* Copying style of tog button for DAQ button */

#DAQbuttonOld {
    display: inline-block;
    padding: 1.5vw 2.5vw; /* Changed padding to relative units */
    border: none;
    color: white;
    text-align: center;
    text-decoration: none;
    font-size: 1.5vw;
    border-radius: 1.5vw; /* Using a relative unit for the border radius as well */
    cursor: pointer;
    outline: none;
    box-shadow: 0 0.5vw #999;
}
.DAQbuttonfixedOld { /* When fixed it was at 210px, 100px and 40px;*/
   width: 14vw;
   position: absolute;
   top: 11%;
   left: 3%;
}

.DAQbuttonOld:active {
  background-color: #0f0;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

/* Potentially obsolete: taken from Sonia */

.overlaybox {
    width: 200px;
/*     height: 100%; */
    position: absolute;
    top: 50px;
    right: 50px;
    z-index: 10;
}

.dropdown-container {
    text-align: center;
}

#freqInput {
    text-align: right;
}

#sendButton {
   display: inline-block;
   padding: 15px 25px;
   border: none;
   color: white;
   text-align: center;
   text-decoration: none;
   font-size: 24px;
   border-radius: 15px;
   cursor: pointer;
   outline: none;
   box-shadow: 0 9px #999;
}

.sendButtonFixed {
   width: 210px;
   position: absolute;
   top: 100px;
   left: 40px;
}

#sendButton:active {
  background-color: #00f; /* Blue */
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

#REPLAYbutton {
   display: inline-block;
   padding: 15px 25px;
   border: none;
   color: white;
   text-align: center;
   text-decoration: none;
   font-size: 24px;
   border-radius: 15px;
   cursor: pointer;
   outline: none;
   box-shadow: 0 9px #999;
}

.togbuttonfixed {
   width: 210px;
   position: absolute;
   top: 100px;
   left: 40px;
}

#REPLAYbutton {
   left: 700px; /* Position 100px to the right of DAQbutton */
}

#REPLAYbutton:active {
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


/* Board dropdown */



#reverseInput {
  display: inline-block;
  font-size: 24px;
  position: absolute;
  top: 160px;
  left: 1110px;
  background-color: #f2f2f2; /* Greyish background */
  color: black; /* Black text */
  border: black;
  border-radius: 15px;
  cursor: pointer;

}

#FSRInput{
  font-size: 24px;
  margin: 5px;
  width: 80px;
  position: absolute;
  top: 100px;
  left: 1100px;
  background-color: #f2f2f2; /* Greyish background */
  color: black; /* Black text */
  border: black;
  border-radius: 15px;
  cursor: pointer;
}

#measInput{
  font-size: 24px;
  margin: 5px;
  width: 180px;
  position: absolute;
  top: 160px;
  left: 900px;
  background-color: #f2f2f2; /* Greyish background */
  color: black; /* Black text */
  border: black;
  border-radius: 15px;
  cursor: pointer;
}


#tINTInput{
  font-size: 24px;
  margin: 5px;
  width: 120px;
  position: absolute;
  top: 100px;
  left: 1200px;
  background-color: #f2f2f2; /* Greyish background */
  color: black; /* Black text */
  border: black;
  border-radius: 15px;
  cursor: pointer;
}

#error-tINT {
    color: red;
    font-size:24px;
   position: absolute;
    top: 100px;
    left: 1350px;
}

#boardsInput{
  font-size: 24px;
  margin: 5px;
  width: 80px;
  position: absolute;
  top: 100px;
  left: 1360px;
  background-color: #f2f2f2; /* Greyish background */
  color: black; /* Black text */
  border: black;
  border-radius: 15px;
  cursor: pointer;
}

#measTimeInput{
  font-size: 24px;
  margin: 5px;
  width: 120px;
  position: absolute;
  top: 160px;
  left: 1200px;
  background-color: #f2f2f2; 
  color: black; 
  border: black;
  border-radius: 15px;
  cursor: pointer;
}

#refInput{
  font-size: 24px;
  margin: 5px;
  width: 80px;
  position: absolute;
  top: 160px;
  left: 990px;
  background-color: #f2f2f2; /* Greyish background */
  color: black; /* Black text */
  border: black;
  border-radius: 15px;
  cursor: pointer;
}

#fileName{
  font-size: 24px;
  margin: 5px;
  width: 180px;
  position: absolute;
  top: 100px;
  left: 900px;
  background-color: #f2f2f2; /* Greyish background */
  color: black; /* Black text */
  border: black;
  border-radius: 15px;
  cursor: pointer;
}

#freqInput
{
  font-size: 24px;
  margin: 5px;
  width: 120px;
  position: absolute;
  top: 160px;
  left: 1200px;
  background-color: #f2f2f2; /* Greyish background */
  color: black; /* Black text */
  border: black;
  border-radius: 15px;
  cursor: pointer;
}


/* Start, Stop buttons */
.func-btn {
  width: 120px; /* changed from 100px to 120px */
  height: 80px;
  text-align: center;
  background-color: #bbeaff;
  margin: 5px;
  font-size: 24px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 5px;
}

#number {
  height: 3em;
  width: 3em;
}

#boardsBox {
  position: fixed;
  top: 9%; /* Adjust the distance from the top */
            left: 50%; /* Adjust the distance from the left */
            width: 25vw;
            height: 10vh;
}

/* Spacing for board */
#boardsBox p {
    margin: 0;            /* Removes default margin */
    padding: 0;           /* Removes default padding */
    line-height: 1.2;     /* Adjusts line spacing */
     font-size: 13px;
    white-space: pre-wrap; /* Preserves whitespace and line breaks */
}

.saturationBox {
  width: 320px; /* Or whatever fixed width you need */
  height: 170px; /* Or whatever fixed height you need */
  border: 4px solid #ccc; /* A visible border to represent the "box" */
  padding: 10px;
  box-sizing: border-box; /* Ensures padding and border are included in the width/height */
  display: block; /* The default display state is block */ 
  position: absolute;
  top: 68%;
  left: 72.5%;
}


#line1 {
  position: fixed;
  top: 560px; /* Adjust the distance from the top */
            left: 1130px; /* Adjust the distance from the left */
            width: 1000px;
            height: 200px;
}
#line2 {
  position: fixed;
  top: 590px; /* Adjust the distance from the top */
            left: 1130px; /* Adjust the distance from the left */
            width: 280px;
                       height: 200px;
}
#line3 {
  position: fixed;
  top: 650px; /* Adjust the distance from the top */
            left: 1130px; /* Adjust the distance from the left */
            width: 280px;
            height: 200px;
}



/* Entry boxes alignement: WET and PD */
.WETnum{
  font-size: 1.2vw ; /* 18px; */
  margin: 5px;
  position: absolute;
  top: 12%;
  left: 30.5%;
}

labelWET {
    color: black;
    font-size: 1.2vw; /* 20 px when fixed */
     margin: 5px;
      position: absolute;
        top: 12%;
      left: 19%;
}

/* No longer necessary, textbox updates automatically without having to click this button
.func-enter {
  margin: 5px;
  margin-top: 0px;
  margin-bottom: 70px;
  position: absolute;
  top: 13%;
  left: 36%;
}
*/

.upperYnum{
font-size: 1.2vw ; /* 18px; */
  margin: 5px;
  position: absolute;
  top: 16%;
  left: 30.5%;
}

labelupperY{
 font-size: 1.2vw; /* 20 px when fixed */
     margin: 5px;
      position: absolute;
        top: 16%;
      left: 19%;
}

/* .func-enter2 {
margin: 5px;
  margin-top: 0px;
  margin-bottom: 70px;
  position: absolute;
  top: 17%;
  left: 36%;
} */

#statusMessage {
    color: red;
    font-size:42px;
   position: absolute;
    top: 300px;
    left: 450px;
}

/* Photodiodes, Curves, Error Bar buttons */
.type-btn {
  width: 170px;
  height: 80px;
  text-align: center;
  background-color: #779ecb;
  margin: 5px;
  font-size: 24px;
  margin-top: 20px;
  margin-bottom: 70px;
}



.beamParam1 {
  width: 420px;
  height: 3ex;
  text-align: center;
  background-color: white;
  outline-color: white ;
  font-size: 18px;
  border-color: white;

  position: absolute;
  top: 310px;
  left: 111px;

  display: none; 

} 

.checkbox_bck {
  position: absolute;
  top: 210px;
  left: 910px;
  font-size: 19px; /* Adjust text size */
}

.checkbox_bck input[type="checkbox"] {
  -webkit-appearance: checkbox; /* Use the default checkbox appearance */
  appearance: checkbox;
  width: 18px;
  height: 18px;
  background-color: lightgrey; /* Light grey background */
  border: 1px solid black; /* Border for the checkbox */
  cursor: pointer; /* Pointer cursor on hover */
}

.checkbox_bck input[type="checkbox"]:checked {
  background-color: lightgrey; /* Keep background light grey when checked */
}

.labelbck {
  color: black;
  font-size: 19px;
  position: absolute;
  top: 210px;
  left: 943px;
}



/* Style for beam energy */
.beamParam2 {
  width: 420px;
  height: 3ex;
  text-align: center;
  background-color: white;
  border-color: white;
  font-size: 18px;
  position: absolute;
  top: 340px;
  left: 111px;
  display: none; 

}


/* Checkboxes position*/
.checkbox_PD{
  width: 18px;
  height: 18px;
  position: absolute;
  top: 204px;
  left: 70px;
    z-index: 999; /* Bring it to the front to ensure it's clickable */
  pointer-events: auto;
}


labelPD {
    color: black;
    font-size: 17px;
      margin-top: -60px;
      position: absolute;
      top: 265px;
      left: 103px;
}

.checkbox_EB{
  width: 18px;
  height: 18px;
  position: absolute;
  top: 204px;
  left: 230px;
    z-index: 999; /* Bring it to the front to ensure it's clickable */
  pointer-events: auto;
}

labelEB {
    color: black;
    font-size: 17px;
      margin-top: -60px;
      position: absolute;
      top: 265px;
      left: 260px;
}

.checkbox_Ke{
  width: 18px;
  height: 18px;
  position: absolute;
  top: 204px;
  left: 380px;
    z-index: 999; /* Bring it to the front to ensure it's clickable */
  pointer-events: auto;
}

labelKe {
    color: black;
    font-size: 17px;
      margin-top: -60px;
      position: absolute;
      top: 265px;
      left: 415px;
}

.checkbox_Bor{
  width: 18px;
  height: 18px;
  position: absolute;
  top: 204px;
  left: 550px;
    z-index: 999; /* Bring it to the front to ensure it's clickable */
  pointer-events: auto;
}

labelBor {
    color: black;
    font-size: 17px;
      margin-top: -60px;
      position: absolute;
      top: 265px;
      left: 580px;
}

label {
    color: black;
    font-size: 18px;
}





.curve-type-btn {
  width: 155px;
  height: 60px;
  text-align: center;
  background-color: #779ecb;
  margin-top: -60px;
  font-size: 24px;
  font-weight: 600;
  border-color: black;
  border-width: 5px;
}


.flex-parent {
  display: flex;
}

.jc-center {
  justify-content: center;
}

#secondRowBtns {
  padding: 0px;
  margin-bottom: -18px;
}



/* Checkboxes for part 2 */
/* Checkboxes position*/
.checkbox_PD_b{
  width: 18px;
  height: 18px;
  position: absolute;
  top: 244px;
  left: 70px;
  z-index: 999; /* Bring it to the front to ensure it's clickable */
  pointer-events: auto;
}


labelPD_b{
    color: black;
    font-size: 17px;
      margin-top: -60px;
      position: absolute;
      top: 305px;
      left: 103px;
}

.checkbox_EB_b{
  width: 18px;
  height: 18px;
  position: absolute;
  top: 244px;
  left: 230px;
  z-index: 999; /* Bring it to the front to ensure it's clickable */
  pointer-events: auto;
}

labelEB_b {
    color: black;
    font-size: 17px;
      margin-top: -60px;
      position: absolute;
      top: 305px;
      left: 260px;
}

.checkbox_Ke_b{
  width: 18px;
  height: 18px;
  position: absolute;
  top: 244px;
  left: 380px;
  z-index: 999; /* Bring it to the front to ensure it's clickable */
  pointer-events: auto;
}

labelKe_b {
    color: black;
    font-size: 17px;
      margin-top: -60px;
      position: absolute;
      top: 305px;
      left: 415px;
}

.checkbox_Bor_b{
  width: 18px;
  height: 18px;
  position: absolute;
  top: 244px;
  left: 550px;
  z-index: 999; /* Bring it to the front to ensure it's clickable */
  pointer-events: auto;
}

labelBor_b {
    color: black;
    font-size: 17px;
      margin-top: -60px;
      position: absolute;
      top: 305px;
      left: 580px;
}







/*Highlighting plot type button currently selected with black border*/
#btn-curve-clicked, #btn-photodiodes-clicked, #btn-errorbars-clicked {
  width: 165px;
  height: 80px;
  text-align: center;
  background-color: #779ecb;
  border-color: black;
  border-width: 4px;
  margin: 5px;
  margin-bottom: -5px;
  margin-top: 20px;
  font-size: 24px;
  font-weight: bold;
}

/*Highlighting photodiode button currently selected*/
#pd-16:focus, #pd-32:focus, #pd-48:focus, #pd-64:focus, #pd-80:focus {
  width: 70px;
  height: 80px;
  text-align: center;
  background-color: #bbeaff;
  margin: 5px;
  font-size: 24px;
  margin-bottom: -5px;
  border-color: black;
  border-width: 5px;
  margin-top: 20px;
}


/* Kill button - testing only */

#KILLbutton {
  width: 80px; /* Adjust width as needed */
  height: 50px; /* Adjust height as needed */
  position: absolute;
  top: 304px;
  left: 450px;
}



#LIVEbutton {
   display: inline-block;
   padding: 15px 25px;
   border: none;
   color: white;
   text-align: center;
   text-decoration: none;
   font-size: 24px;
/*    width: 210px; */
   border-radius: 15px;
   cursor: pointer;
   outline: none;
   box-shadow: 0 9px #999;
}

.LIVEbuttonfixed {
   width: 210px;
   position: absolute;
   top: 100px;
   left: 40px;
}

.LIVEbutton:active {
  background-color: #0f0;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}


/* ************************* RESPONSIVITY ****************************** */
/* This section focuses on the rescaling of all HTML elements to ensure
   they remain accessible at all browser and device widths               */


/* COLLAPSE POINT 1: CHROME */


@media screen and (max-width: 1615px) {
  .type-btn, #btn-curve-clicked, #btn-photodiodes-clicked,
  #btn-errorbars-clicked
   {
    margin: 5px;
    margin-bottom: -5px;
}
}
@media screen and (max-width: 1615px) {
  #pd-16, #pd-16:focus
   {
    margin-left: 5px;
    margin-bottom: -5px;
}
}
@media screen and (max-width: 1615px) {
  #pd-64, #pd-64:focus
   {
    margin-right: 5px;
    margin-bottom: -5px;
}
}
/* COLLAPSE POINT 2: CHROME */

@media screen and (max-width: 1525px) {
  .type-btn, #btn-curve-clicked, #btn-photodiodes-clicked,
  #btn-errorbars-clicked
   {
    width: 150px;
    height: 100px;
    margin: 5px;
    font-size: 18px;
    margin-bottom: -5px;
}
}
@media screen and (max-width: 1525px) {
  .func-btn
   {
    margin: 5px;
    font-size: 18px;
    margin-bottom: -5px;
}
}
@media screen and (max-width: 1525px) {
  .PD-btn, .PD-btn:focus
   {
    font-size: 18px;
    margin-bottom: -5px;
}
}
@media screen and (max-width: 1525px) {
  #pd-16:focus, #pd-32:focus, #pd-48:focus, #pd-64:focus
   {
     font-size: 18px;
}
}
/* COLLAPSE POINT 3: CHROME */

@media screen and (max-width: 1375px) {
  .type-btn, #btn-curve-clicked, #btn-photodiodes-clicked,
  #btn-errorbars-clicked
   {
    width: 130px;
    height: 70px;
    margin: 5px;
    font-size: 18px;
    margin-bottom: -5px;
}
}
@media screen and (max-width: 1375px) {
  .func-btn
   {
    height: 70px;
    margin: 5px;
    font-size: 18px;
    margin-bottom: -5px;
}
}
@media screen and (max-width: 1375px) {
  .PD-btn
   {
    height: 70px;
    margin-bottom: -5px;
}
}
@media screen and (max-width: 1375px) {
  #btn-curve-clicked, #btn-photodiodes-clicked, #btn-errorbars-clicked
   {
     border-color: black;
     border-width: 5px;
     margin-bottom: -5px;
}
}
@media screen and (max-width: 1375px) {
  #pd-16:focus, #pd-32:focus, #pd-48:focus, #pd-64:focus
   {
     font-size: 18px;
     width: 110px;
     height:70px;
}
}
/* COLLAPSE POINT 4: CHROME */

@media screen and (max-width: 1320px) {
  .type-btn, #btn-curve-clicked, #btn-photodiodes-clicked,
  #btn-errorbars-clicked
   {
    width: 100px;
    height: 50px;
    margin: 3px;
    font-size: 14px;
    margin-bottom: -5px;
}
}
@media screen and (max-width: 1320px) {
  .func-btn
   {
    height: 50px;
    width: 80px;
    margin: 3px;
    font-size: 14px;
    margin-bottom: -5px;
}
}
@media screen and (max-width: 1320px) {
  .PD-btn
   {
    height: 50px;
    font-size: 14px;
    margin: 3px;
    text-align: center;
    margin-bottom: -5px;
}
}
@media screen and (max-width: 1320px) {
  #btn-curve-clicked, #btn-photodiodes-clicked, #btn-errorbars-clicked
   {
     border-color: black;
     border-width: 5px;
     margin-bottom: -5px;
}
}
@media screen and (max-width: 1320px) {
  #pd-16:focus, #pd-32:focus, #pd-48:focus, #pd-64:focus
   {
     height: 50px;
     width: 110px;
     font-size: 14px;
     margin-bottom: -5px;
}
}
/* COLLAPSE POINT 5: CHROME */

@media screen and (max-width: 1100px) {
  .PD-btn
   {
    height: 50px;
    width: 50px;
    font-size: 14px;
    margin: 3px;
    text-align: center;
    margin-bottom: -5px;
}
}
@media screen and (max-width: 1100px) {
  #pd-16:focus, #pd-32:focus, #pd-48:focus, #pd-64:focus
   {
     height: 50px;
     width: 50px;
     font-size: 14px;
}
}
/* COLLAPSE POINT 6: CHROME */

@media screen and (max-width: 860px) {
  .PD-btn
   {
    width: 30px;
}
}
@media screen and (max-width: 860px) {
  .func-btn
   {
    width: 70px;
}
}
@media screen and (max-width: 860px) {
  #pd-16:focus, #pd-32:focus, #pd-48:focus, #pd-64:focus
   {
     width: 30px;
}

}
/**********************************************