/* Step 1: Common Duotone Properties: All required to make icons render reliably */
.icon-duotone {
    position: relative;
    padding-left: 1.25em; /* make space for the width of the absolutely positioned icon */
  }
  
  /* Step 2: Set the font-family and font-weight for this style */
  .icon-duotone::before,
  .icon-duotone::after {
    font-family: "Font Awesome 5 Duotone";
    font-weight: 900;
  
    /* position both layers of the icon to the left, set our fixed-width width, horizontally center layers, and then vertically align them so they flex with different line heights */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.25em;
    text-align: center;
  }
  
  /* Step 3: Set the default opacity levels and colors for each layer */
  .icon-duotone::before {
    color: var(--fa-primary-color, rgb(32, 32, 32));
    opacity: 1;
    opacity: var(--fa-primary-opacity, 1.0);
  }
  
  .icon-duotone::after {
    color: var(--fa-secondary-color, rgb(128, 128, 128));
    opacity: var(--fa-secondary-opacity, 0.7);
  }

.leaflet-control-gridview-toggle {
    white-space: nowrap;
    width: 26px;
    height: 26px;
    display: inline-block !important;
    font-size: 22px;
    color: rgb(31, 35, 36);
}



.leaflet-control-pdf-toggle {
    white-space: nowrap;
    width: 26px;
    height: 26px;
    font-size: 22px;
    display: inline-block !important;
}



.leaflet-control-imagebnt-toggle {
    white-space: nowrap;
    width: 26px;
    height: 26px;
    font-size: 22px;
    display: inline-block !important;
}



.leaflet-control-info-toggle {
    white-space: nowrap;
    width: 26px !important;
    height: 26px !important;
    display: inline-block !important;
    font-size: 22px;
    /* line-height: 12px !important;  */
}