/* Basic Margin-Suppressing CSS Boilerplate */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /*To get vertical scrolling only (no horizontal scroll)*/
}
/*fot headline on mobile*/
.text-1dot4xl {
  font-size: 1.4rem; /* Adjust this value as needed */
}



/*custom styles*/
#watcher_wrapper_div {
  position: relative;
  width: 100%; /* 50% of the window width (can be adjusted) */
  height: 100%;/*0;*/ /* Start with 0, we will adjust this via JS */
  /*background-color: #f2f2f2;*//*lightgray*/
  /*margin: 20px auto;*/ /* Centering the wrapper */
  border: none;/*2px solid #ccc;*/
  /*border-radius: 10px;*/
  /*overflow: hidden;*/ /* Ensures that content doesn't overflow when scaling */
  /*background: url('../imgs/webpage-placeholder.svg') no-repeat center/cover;*/

}
#watcher_div {
  position: absolute; /* Position it inside the wrapper */
  /*no:width: 100%;
  height: 100%;*/
  width: 100vw; /* IMPORTANT! full viewport width */
  height: 100vh; /* IMPORTANT! full viewport height */
  transform-origin: top left; /* Keep top-left corner fixed */
  /*transition: transform 0.2s ease;*/ /* Smooth transition for scaling and translation */
/*      background-color: lightcyan;*/
  /*background-color: transparent;*//*rgba(224, 255, 255, 0.5);*//*rgba(224, 255, 255, 0.5);*/ /* REMOVE! lightcyan w/ 50% alpha */
/*pointer-events: none;*//*REMOVE!*/
  background: url('../imgs/webpage-placeholder.svg') no-repeat center/cover;

  /*border-radius: 10px;*/
}

#watcher_div iframe {
  /*border-radius: 10px;*/
  width: 100%; height: 100%; border: none; 

}
#watcher_div canvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;
}



/* Control menu */
.parameters {
/*      position: fixed;*/
  /*top: 10px;
  left: 10px;
  background: rgba(255, 255, 255, 0.8);
  padding: 10px;
  border-radius: 5px;*/
}
/*#testColormapBar {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  border: 1px solid #ccc;
}*/




/* The switch container */
.switch_container {
  width: 51px;
  height: 31px;
  position: relative;
  display: inline-block; /* Ensure it doesn't stretch */
}

/* Hide the default checkbox */
.checkbox {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.switch {
  width: 100%; /* Ensures the switch background fills the container */
  height: 100%;
  display: block;
  background-color: #e9e9eb;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease-out;
}


/* The slider (the moving part of the switch) */
.slider {
  width: 27px; /* Fixed size for the slider */
  height: 27px;
  position: absolute;
  left: calc(50% - 27px / 2 - 10px); /* Center it initially */
  top: calc(50% - 27px / 2);
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.15), 0px 3px 1px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease-out;
  cursor: pointer;
}

/* When the checkbox is checked, change the switch background color */
.checkbox:checked + .switch {
  background-color: #0974f1; /* Use the blue color */
}

/* When the checkbox is checked, move the slider */
.checkbox:checked + .switch .slider {
  left: calc(50% - 27px / 2 + 10px); /* Move slider when checked */
  top: calc(50% - 27px / 2);
}