.cy-leaflet-toggle {
  position: absolute;
  /* left: 0; */
  /* top: 75px; */
  left: 0;
  bottom: 0;
  margin: 10px;
  z-index: 999;
  width: 30px;
  background: #fff;
  border-radius: 4px;
  border: 2px solid rgba(0, 0, 0, 0.2);
}

.cy-leaflet-toggle-button {
  height: 33px;
  cursor: pointer;
  position: relative;
  z-index: 0;
}

.cy-leaflet-toggle-button + .cy-leaflet-toggle-button {
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}

.cy-leaflet-toggle-button:hover,
.cy-leaflet-toggle-button:active {
  background-color: rgb(242, 242, 242);
}

/* custom icon -- using font awesome, swap out your own icon here
https://fontawesome.com/license/free
*/
.cy-leaflet-toggle-pan {
  background-size: 16px 16px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20448%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M372.57%20112.641v-10.825c0-43.612-40.52-76.691-83.039-65.546-25.629-49.5-94.09-47.45-117.982.747C130.269%2026.456%2089.144%2057.945%2089.144%20102v126.13c-19.953-7.427-43.308-5.068-62.083%208.871-29.355%2021.796-35.794%2063.333-14.55%2093.153L132.48%20498.569a32%2032%200%200%200%2026.062%2013.432h222.897c14.904%200%2027.835-10.289%2031.182-24.813l30.184-130.958A203.637%20203.637%200%200%200%20448%20310.564V179c0-40.62-35.523-71.992-75.43-66.359zm27.427%20197.922c0%2011.731-1.334%2023.469-3.965%2034.886L368.707%20464h-201.92L51.591%20302.303c-14.439-20.27%2015.023-42.776%2029.394-22.605l27.128%2038.079c8.995%2012.626%2029.031%206.287%2029.031-9.283V102c0-25.645%2036.571-24.81%2036.571.691V256c0%208.837%207.163%2016%2016%2016h6.856c8.837%200%2016-7.163%2016-16V67c0-25.663%2036.571-24.81%2036.571.691V256c0%208.837%207.163%2016%2016%2016h6.856c8.837%200%2016-7.163%2016-16V101.125c0-25.672%2036.57-24.81%2036.57.691V256c0%208.837%207.163%2016%2016%2016h6.857c8.837%200%2016-7.163%2016-16v-76.309c0-26.242%2036.57-25.64%2036.57-.691v131.563z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}

/* custom icon -- using font awesome, swap out your own icon here
https://fontawesome.com/license/free
*/
.cy-leaflet-toggle-edit {
  background-size: 16px 16px;
  background-position: 55% 50%;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20320%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M302.189%20329.126H196.105l55.831%20135.993c3.889%209.428-.555%2019.999-9.444%2023.999l-49.165%2021.427c-9.165%204-19.443-.571-23.332-9.714l-53.053-129.136-86.664%2089.138C18.729%20472.71%200%20463.554%200%20447.977V18.299C0%201.899%2019.921-6.096%2030.277%205.443l284.412%20292.542c11.472%2011.179%203.007%2031.141-12.5%2031.141z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
}

.cy-leaflet-toggle-active {
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.25);
  z-index: 1;
  background-color: #ddd;
}