html,
body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

/* Smooth slide for the content panel and its arrow toggle */
#layerContainer {
  transition: margin-left 0.35s ease;
}
#sidebar_arrow {
  transition: left 0.35s ease;
}

.defaultIcon {
  color: #4b42f5;
}

.coloredIcon {
  color: #39ab35;
}
#slider {
    display: none;
    position: absolute;
    left: 50%;
    top: 0px;
    background-color: #d3d3d3;
    width: 5px;
    height: 100%;
    z-index: 999999;
}

#sliderIcon {
    position: absolute;
    z-index: 100000000;
    width: 28px;
    height: 28px;
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    top: 50%;
    right: -12px;
}

#slider:hover {
    cursor: ew-resize;
}

#left_part {
    display: none;
    position: absolute;
    background-color: white;
    color: black;
    left: 30%;
    top: 0px;
    z-index: 999999;
}

#right_part {
    display: none;
    position: absolute;
    background-color: white;
    color: black;
    right: 30%;
    top: 0px;
    z-index: 999999;
}

/* On narrow / touch screens the compare dropdowns go to opposite screen edges */
@media (max-width: 600px) {
  #left_part  { left: 4px !important; right: auto !important; }
  #right_part { right: 4px !important; left: auto !important; }
  #left_part select, #right_part select { font-size: 11px; max-width: 140px; }
}