html, body {
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: sans-serif;
  color: rgb(43, 43, 43);
}

/* #region PANEL LEFT CONTAINERS*/
#panel-left {
  position: absolute;
  top: 0;
  z-index: 4;

  background-color: #798daa;
  opacity: 0.8;
  
  padding: 20px;
  padding-top: 15px;
  width: 400px;
  max-height: 100vh;
  border-radius: 0px 0px 5px 0px;

  transition: transform 0.3s ease;

  overflow: auto;
  box-sizing: border-box;
}

#panel-left:hover {
  opacity: 0.9; 
}

.section {
  margin-top: 10px;
}

.grid_main {
  position: relative;
  display: grid;
  grid-template-columns: 8% 46% 46%;
  width: inherit;
  margin-bottom: 10px;
  /* column-gap: 20px; */
}

.grid_main::after {
  content: "";
  position: absolute;
  height: 100%;

  left: 54%; /* Places the line at the horizontal center */
  width: 2px;
  background-color: rgb(0, 0, 0);
  transform: translateX(-50%); /* Centers the 2px width perfectly */
}

.grid_3{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid_2{
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.grid_2_gap{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 30px;
  margin: 0px 20px 0px 20px;
}
/* #endregion */

/* #region PANEL LEFT REST */
h2 {
  margin: 0px;
  display: inline-block;
}

p {
  margin: 5px 0px;
}

.large_text {
  font-size: large;
  font-weight: bold;
}

.bold {
  font-weight: bold;
}

.small_text {
  font-size: 10pt;
}

.underline {
  text-decoration: underline;
}

a {
  color: rgb(0, 201, 201);
}

.icon {
  height: 25px;
  transform: translateY(25%);
  margin-left: 6px;
}

.impressum{
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.impressum p {
  font-size: x-small;
  margin: 0px;
  color: rgb(80, 80, 80);
}

.rightbound {
  text-align: right;
}

.centered {
  text-align: center;
}

.triangle_section {
  width: 0;
  height: 0;
  display: inline-block;
  
  border-top: 8px solid #333;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;

  transition: rotate 0.3s ease;
}

.triangle_main {
  position: absolute;
  width: 0;
  height: 0;
  display: inline-block;
  rotate: 0deg;
  top: 20px;
  left: 385px;
  /* transform: translateX(10px); */
  
  border-right: 9px solid #333;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;

  transition: rotate 0.3s ease;
}


/* #endregion */

/* #region INPUT BASEMAP */
.radio_img {
  height: 40px;
  padding: 3px;
  border: 2px solid rgba(0, 201, 201, 0);
  border-radius: 15%;
  cursor: pointer;
}

/* IF CHECKED */
.radioButton_img:checked + img {
  border-color: rgb(0, 201, 201);
}

/* HIDE RADIO BUTTONS */
.radioButton_img { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkBox_img { 
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkBox_img:checked + img {
  border-color: rgb(255, 230, 0);
}
/* #endregion */

/* #region INPUT IMAGE MODE */
.radio_group {
    position: relative;
    display: inline; /* Keeps it in line with other radios */
    width: fit-content;
}

.info_box {
    position: absolute;
    bottom: 100%;      /* Places it above the label */
    left: 65%;
    transform: translateX(-50%); /* Centers it horizontally */
    width: 120px;

    /* Styling for the box */
    background: #333;
    color: white;
    padding: 10px;

    border-radius: 4px;
    font-size: 12px;
    text-align: justify;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out; /* Smooth fade effect */
    pointer-events: auto;
}

.info_box_big {
    position: absolute;
    bottom: 100%;      /* Places it above the label */
    left: 65%;
    transform: translateX(-55%); /* Centers it horizontally */
    width: 200px;

    /* Styling for the box */
    background: #333;
    color: white;
    padding: 10px;

    border-radius: 4px;
    font-size: 12px;
    text-align: justify;

    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out; /* Smooth fade effect */
    pointer-events: auto;
}

.radio_group .underline:hover ~ .info_box,
.radio_group .underline:hover .info_box,
.radio_group .info_box:hover {
    opacity: 1;
    visibility: visible;
}

.radio_group .underline:hover ~ .info_box_big,
.radio_group .underline:hover .info_box_big,
.radio_group .info_box_big:hover {
    opacity: 1;
    visibility: visible;
}
/* #endregion */

/* #region COMPARISON CANVAS */
#comparison-container {
  position: relative;
  width: 100vw;
  height: 100vh;
  user-select: none; 
}

.comparison_image {
  width: 100vw;   
  height: 100vh;  
  object-fit: cover; 
  object-position: 50% 20%;
  display: block;
  position: absolute;
  
  pointer-events: none;
}

#overlay_img{
  width: 100vw;   
  height: 100vh;  
  object-fit: cover; 
  object-position: 50% 20%;
  display: block;
  position: absolute;
  z-index: 3;
  
  pointer-events: none;
}

#wrapper_left {
  position: absolute;
  width: 50%;     
  height: 100%;
  overflow: hidden;
  z-index: 2; 
}
/* #endregion */

/* #region COMPARISON HANDLE */
/* The Vertical Line */
#handle {
    position: absolute;
    top: 0;
    left: 50%; /* Matches wrapper width */
    height: 100%;
    width: 3px;
    background: #666666cb;
    z-index: 3;
    transform: translateX(-50%);
    cursor: col-resize;
}

/* The Circle centered on the line */
#handle::after {
    content: "";
    position: absolute;
    top: 78%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 12px;
    background: rgb(207, 207, 207);
    border: 2px solid #666;
    border-radius: 30%;
}

/* CSS Border Triangles for Arrows */
.arrow-left, .arrow-right {
    position: absolute;
    top: 78%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    z-index: 3;
}

.arrow-left {
    left: -6px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-right: 6px solid #666;
}

.arrow-right {
    right: -6px;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    border-left: 6px solid #666;
}
/* #endregion */

/* #region SIZE COMPARISON */
.SC_button {
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid #333;
  width: 100%;
  aspect-ratio: 1.5 / 1;
  padding: 5px;
  margin: 6px 0px 1px 0px;
  cursor: pointer;
}

.SC_button_image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.SC_shape {
  position: absolute;
  z-index: 3;

  transform: translate(-50%, -50%);
  cursor: pointer;

  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}


/* #endregion */

/* #region SCALEBAR */
#scalebar_container {
  background-color: #798daa;
  opacity: 0.4;
  border-radius: 3px 0px 0px 0px;
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  transform: translateX(15%); /* might not be the best solution */
  padding: 3px;
}

#scalebar_container:hover {
  opacity: 0.9; /* reduce maybe */
}

#scalebar_labels {
  /* width controlled by display scale */
  font-size: small;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  margin-bottom: 4px;
  color: black;
}

#scalebar_bars {
  /* width controlled by display scale */
  border: 2px solid black;
  height: 5px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.scalebar_black {
  background-color: black;
}

.scalebar_white {
  background-color: whitesmoke;
}

/* #endregion */