/**
 * @file   CSS for util-leaflet.js
 * @author Joseph Vrabel, U.S. Geological Survey <jvrabel@usgs.gov>
 * @preserve
 */

/*
.............................................
variables
.............................................
*/
:root {
    --util-timing-function-bounce: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/*
.............................................
helpers
.............................................
*/
.util-unselectable {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
}

/*
.............................................
control positioning
  <div id="MapId">
      <div class="leaflet-control-container">
          <div class="leaflet-top leaflet-left">
              <div class="leaflet-control"></div>
              ...more topleft controls...
          </div>
          <div class="leaflet-top leaflet-center">     <== added center position
              <div class="leaflet-control"></div>
              ...more topcenter controls...
          </div>
          <div class="leaflet-top leaflet-right">
              <div class="leaflet-control"></div>
              ...more topright controls...
          </div>
          <div class="leaflet-bottom leaflet-left">
              <div class="leaflet-control"></div>
              ...more bottomleft controls...
          </div>
          <div class="leaflet-bottom leaflet-center">  <== added center position
              <div class="leaflet-control"></div>
              ...more bottomcenter controls...
          </div>
          <div class="leaflet-bottom leaflet-right" >
              <div class="leaflet-control"></div>
              ...more bottomright controls...
          </div>
      </div>
  </div>
.............................................
*/

/* add center position */
.leaflet-center {
    left: 50%;
    transform: translateX(-50%);
}

/* adjust to use flex */
.leaflet-top,
.leaflet-bottom {
    display: flex;
    padding: 0.3125rem;
}

.leaflet-top.leaflet-left {
    align-items: start;
}

.leaflet-top.leaflet-center {
    align-items: center;
    flex-direction: column;
}

.leaflet-top.leaflet-right {
    align-items: end;
    flex-direction: column;
}

.leaflet-bottom.leaflet-left {
    align-items: start;
    flex-direction: column;
}

.leaflet-bottom.leaflet-center {
    align-items: center;
    flex-direction: column;
}

.leaflet-bottom.leaflet-right {
    align-items: end;
    flex-direction: column;
}

.leaflet-control {
    clear: initial;
    float: initial !important;
    margin: 0.3125rem !important;
}

/*
.............................................
L.Control.BasePicker
.............................................
*/
.leaflet-control-basepicker {
    background-size: cover;
    border: 0.125rem solid white;
    box-shadow: 0 0 0 1px #ccc;
    cursor: pointer;
    height: 3.269rem;
    transition: all 100ms ease;
    width: 5rem;
}

.leaflet-control-basepicker:hover {
    border: 0.25rem solid white;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.25);
    height: 6.125rem;
    width: 9.375rem;
}

/*
.............................................
L.Control.ButtonGroup
.............................................
*/
.leaflet-control-buttongroup {
    font: bold 1.1rem 'Lucida Console', Monaco, monospace;
}

/* button states */
a.leaflet-control-buttongroup-active {
    background-color: #9df;
}

a.leaflet-control-buttongroup-active:hover {
    background-color: #6cf;
}

.leaflet-control-buttongroup-busy {
    -webkit-animation: utilGeolocateBusy 1.5s ease infinite;
    animation: utilGeolocateBusy 1.5s ease infinite;
}

@-webkit-keyframes utilGeolocateBusy {
    0% {
        background-color: #cef;
    }

    50% {
        background-color: #4bf;
    }

    100% {
        background-color: #cef;
    }
}

@keyframes utilGeolocateBusy {
    0% {
        background-color: #cef;
    }

    50% {
        background-color: #4bf;
    }

    100% {
        background-color: #cef;
    }
}

/*
icons:
  1. search for icons here (search box at top, filter for free): https://www.flaticon.com/
  2. click icon to get and click [+] button => css
  3. click copy css background and paste the css "url(...)" part here
  4. if css option is not free, download 16x16 or 24x24 png image
  5. use a site like this to convert to base64 for css: https://base64.guru/converter/encode/image/png
*/
.leaflet-control-buttongroup-fullscreen {
    background: no-repeat center url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAeQAAAHkBOLWIEgAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAACWSURBVDiN1ZPLCcMwEETfGDeQKlyGfMzV3biONOJrcpJThppwC5uLQhZbYPwBk4FB0qKd0SwIYAJsxmhmeAKxcG+qgRvwBN78kFjiAbzcOQB3slI/d1wj0ANWFZw24RSBkXLmNSRgVM5z6AX/LiApSuq2NkrqJMUKaIFmh3kDtNfPoM5rkOTrycwGX8hz8lHDd3PoO38AfdJoU++/v38AAAAASUVORK5CYII=');
    background-size: 50%;
    height: 100%;
}

.leaflet-control-buttongroup-geolocate {
    background: no-repeat center url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE4LjEuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgODYgODYiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDg2IDg2OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8Zz4NCgkJPHBhdGggc3R5bGU9ImZpbGw6IzAzMDEwNDsiIGQ9Ik04NC43OTMsMS4yMDdjLTIuOTI4LTIuOTI4LTUuNzE5LTAuMTYzLTE1LjIwNSw0LjM5N0M0NC4yMjEsMTcuNzk3LDAsNDIuNTc4LDAsNDIuNTc4DQoJCQlsMzcuOTkyLDUuNDI4TDQzLjQyLDg2YzAsMCwyNC43ODMtNDQuMjIsMzYuOTc1LTY5LjU4OUM4NC45NTcsNi45MjUsODcuNzIxLDQuMTM1LDg0Ljc5MywxLjIwN3ogTTc1LjY3OCwxMC45OEw0OC4wODQsNjIuMjI2DQoJCQlsLTIuODAxLTIzLjI5TDc1LjY3OCwxMC45OHoiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==');
    background-size: 50%;
    height: 100%;
}

.leaflet-control-buttongroup-home {
    background: no-repeat center url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjUxMHB4IiBoZWlnaHQ9IjUxMHB4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEwIDUxMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGcgaWQ9ImhvbWUiPg0KCQk8cG9seWdvbiBwb2ludHM9IjIwNCw0NzEuNzUgMjA0LDMxOC43NSAzMDYsMzE4Ljc1IDMwNiw0NzEuNzUgNDMzLjUsNDcxLjc1IDQzMy41LDI2Ny43NSA1MTAsMjY3Ljc1IDI1NSwzOC4yNSAwLDI2Ny43NSANCgkJCTc2LjUsMjY3Ljc1IDc2LjUsNDcxLjc1IAkJIi8+DQoJPC9nPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=');
    background-size: 50%;
    height: 100%;
}

.leaflet-control-buttongroup-measure {
    background: no-repeat center url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgNTEyLjAyNSA1MTIuMDI1IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIuMDI1IDUxMi4wMjU7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4NCjxnPg0KCTxnPg0KCQk8Zz4NCgkJCTxwYXRoIGQ9Ik0yMjYuMzMzLDAuMDEzaC0xNjBjLTguODM3LDAtMTYsNy4xNjMtMTYsMTZ2NDgwYzAsOC44MzcsNy4xNjMsMTYsMTYsMTZoMTYwYzguODM3LDAsMTYtNy4xNjMsMTYtMTZ2LTQ4MA0KCQkJCUMyNDIuMzMzLDcuMTc2LDIzNS4xNjksMC4wMTMsMjI2LjMzMywwLjAxM3ogTTIxMC4zMzMsNDgwLjAxM2gtMTI4di00OGg4MHYtMzJoLTgwdi00OGg0OHYtMzJoLTQ4di00OGg4MHYtMzJoLTgwdi00OGg0OHYtMzINCgkJCQloLTQ4di00OGg4MHYtMzJoLTgwdi00OGgxMjhWNDgwLjAxM3oiLz4NCgkJCTxwYXRoIGQ9Ik00MzkuMTMzLDQwNC44MTNsLTUyLjgsNTIuNjRWNTQuNTczbDUyLjY0LDUyLjY0bDIyLjU2LTIyLjU2bC04MC04MGMtNi4yNDEtNi4yMDQtMTYuMzE5LTYuMjA0LTIyLjU2LDBsLTgwLDgwDQoJCQkJbDIyLjU2LDIyLjU2bDUyLjgtNTIuNjR2NDAyLjg4bC01Mi42NC01Mi42NGwtMjIuNTYsMjIuNTZsODAsODBjNi4yNDEsNi4yMDQsMTYuMzE5LDYuMjA0LDIyLjU2LDBsODAtODBMNDM5LjEzMyw0MDQuODEzeiIvPg0KCQk8L2c+DQoJPC9nPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPC9zdmc+DQo=');
    background-size: 65%;
    height: 100%;
}

/* geolocate marker */
.leaflet-control-buttongroup-geolocate-marker {
    background: none;
}

.leaflet-control-buttongroup-geolocate-marker-circle {
    background-color: #00f;
    border-radius: 9999rem;
    height: 0.9375rem;
    position: relative;
    width: 0.9375rem;
}

.leaflet-control-buttongroup-geolocate-marker-pulse {
    -webkit-animation: utilGeolocateMarkerPulse 1.2s ease-in-out infinite;
    animation: utilGeolocateMarkerPulse 1.2s ease-in-out infinite;
    background-color: #9ef;
    background-image: radial-gradient(#9ef, #09f);
    border-radius: 9999rem;
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
}

@-webkit-keyframes utilGeolocateMarkerPulse {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: scale(4);
    }
}

@keyframes utilGeolocateMarkerPulse {
    from {
        opacity: 1;
    }

    to {
        opacity: 0;
        transform: scale(4);
    }
}

/*
.............................................
L.Control.Coordinates
.............................................
*/
.leaflet-control-coordinates {
    background: rgba(255, 255, 255, 0.7);
    font-size: 80%;
    padding: 0.3rem 0.6rem;
}

/*
.............................................
L.Control.InsetMap
.............................................
*/
.leaflet-control-insetmap {
    background: white;
    border: 0.25rem solid white;
    box-shadow: 0 0 0 1px #ccc;
    box-sizing: content-box;
    cursor: move;
    transition: all 400ms;
}

.leaflet-control-insetmap a {
    background-color: rgba(255, 255, 255, 1.0);
    background-repeat: no-repeat;
    transition: all 400ms;
    transition-timing-function: var(--util-timing-function-bounce);
    z-index: 99999;
}

.leaflet-control-insetmap a.minimized-topleft,
.leaflet-control-insetmap a.minimized-topright,
.leaflet-control-insetmap a.minimized-bottomleft,
.leaflet-control-insetmap a.minimized-bottomright {
    transform: rotate(360deg);
}

.leaflet-control-insetmap-button {
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE2LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPg0KPCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCINCgkgd2lkdGg9IjMxLjYwM3B4IiBoZWlnaHQ9IjMxLjYwM3B4IiB2aWV3Qm94PSIwIDAgMzEuNjAzIDMxLjYwMyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzEuNjAzIDMxLjYwMzsiDQoJIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGQ9Ik03LjcwMywxNS45NzNjMCwwLDUuNjUxLTUuNjI1LDUuNjUxLTEwLjMyMUMxMy4zNTQsMi41MywxMC44MjQsMCw3LjcwMywwUzIuMDUyLDIuNTMsMi4wNTIsNS42NTINCgkJCUMyLjA1MiwxMC42MTQsNy43MDMsMTUuOTczLDcuNzAzLDE1Ljk3M3ogTTQuNzU4LDUuNjUyYzAtMS42MjgsMS4zMTktMi45NDYsMi45NDUtMi45NDZzMi45NDUsMS4zMTgsMi45NDUsMi45NDYNCgkJCWMwLDEuNjI2LTEuMzE5LDIuOTQ0LTIuOTQ1LDIuOTQ0UzQuNzU4LDcuMjc4LDQuNzU4LDUuNjUyeiIvPg0KCQk8cGF0aCBkPSJNMjguNTksNy42NDNsLTAuNDU5LDAuMTQ2bC0yLjQ1NSwwLjIxOWwtMC42OTIsMS4xMDZsLTAuNTAxLTAuMTZsLTEuOTUzLTEuNzZsLTAuMjg1LTAuOTE1bC0wLjM3Ny0wLjk3N0wyMC42MzksNC4yDQoJCQlsLTEuNDQ2LTAuMjgzTDE5LjE1OSw0LjU4bDEuNDE4LDEuMzg0bDAuNjk0LDAuODE3bC0wLjc4MiwwLjQwOGwtMC42MzYtMC4xODhsLTAuOTUxLTAuMzk2bDAuMDMzLTAuNzY5bC0xLjI1LTAuNTE0TDE3LjI3LDcuMTI2DQoJCQlsLTEuMjU4LDAuMjg2bDAuMTI1LDEuMDA3bDEuNjM4LDAuMzE2bDAuMjg0LTEuNjA5bDEuMzUzLDAuMjAxbDAuNjI5LDAuMzY4aDEuMDExbDAuNjksMS4zODRsMS44MzMsMS44NTlsLTAuMTM0LDAuNzIzDQoJCQlsLTEuNDc4LTAuMTg5bC0yLjU1MywxLjI4OWwtMS44MzgsMi4yMDVsLTAuMjM5LDAuOTc2aC0wLjY2MWwtMS4yMjktMC41NjZsLTEuMTk0LDAuNTY2bDAuMjk3LDEuMjYxbDAuNTItMC42MDJsMC45MTMtMC4wMjcNCgkJCWwtMC4wNjQsMS4xMzJsMC43NTcsMC4yMmwwLjc1NiwwLjg1bDEuMjM0LTAuMzQ3bDEuNDEsMC4yMjJsMS42MzYsMC40NDFsMC44MTksMC4wOTVsMS4zODQsMS41NzNsMi42NzUsMS41NzRsLTEuNzI5LDMuMzA2DQoJCQlsLTEuODI2LDAuODQ5bC0wLjY5MywxLjg4OWwtMi42NDMsMS43NjVsLTAuMjgyLDEuMDE5YzYuNzUzLTEuNjI3LDExLjc3OS03LjY5MywxMS43NzktMTQuOTUNCgkJCUMzMS4xOTQsMTMuMDM4LDMwLjIzNCwxMC4wOSwyOC41OSw3LjY0M3oiLz4NCgkJPHBhdGggZD0iTTE3LjU3MywyNC4yNTNsLTEuMTItMi4wNzhsMS4wMjgtMi4xNDZsLTEuMDI4LTAuMzExbC0xLjE1Ni0xLjE1OWwtMi41Ni0wLjU3M2wtMC44NS0xLjc3OXYxLjA1N2gtMC4zNzVsLTEuNjI1LTIuMjAzDQoJCQljLTAuNzkzLDAuOTQ5LTEuMzk1LDEuNTU1LTEuNDcsMS42MjlMNy43MiwxNy4zODRsLTAuNzEzLTAuNjc3Yy0wLjE4My0wLjE3Ni0zLjQ1OC0zLjMxNS01LjA3Ny03LjEzDQoJCQljLTAuOTY2LDIuMDA5LTEuNTIsNC4yNTItMS41Miw2LjYzYzAsOC41MDIsNi44OTEsMTUuMzk2LDE1LjM5MywxNS4zOTZjMC42NTQsMCwxLjI5Ni0wLjA1NywxLjkzMS0wLjEzNWwtMC4xNjEtMS44NjQNCgkJCWMwLDAsMC43MDctMi43NywwLjcwNy0yLjg2M0MxOC4yOCwyNi42NDYsMTcuNTczLDI0LjI1MywxNy41NzMsMjQuMjUzeiIvPg0KCQk8cGF0aCBkPSJNMTQuNTg2LDMuNzY4bDEuMTMzLDAuMTg3bDIuNzUtMC4yNThsMC43NTYtMC44MzRsMS4wNjgtMC43MTRsMS41MTIsMC4yMjhsMC41NTEtMC4wODMNCgkJCWMtMS45OTEtMC45MzctNC4yMDctMS40NzktNi41NTMtMS40NzljLTEuMDk2LDAtMi4xNiwwLjEyOC0zLjE5MSwwLjM0NWMwLjgwMSwwLjg3NSwxLjM3NywxLjk1OCwxLjYyMiwzLjE2M0wxNC41ODYsMy43Njh6DQoJCQkgTTE2LjQ1MywyLjM0M2wxLjU3My0wLjg2NWwxLjAwOSwwLjU4MmwtMS40NjIsMS4xMTNsLTEuMzk0LDAuMTQxTDE1LjU1LDIuOTA3TDE2LjQ1MywyLjM0M3oiLz4NCgk8L2c+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8Zz4NCjwvZz4NCjxnPg0KPC9nPg0KPGc+DQo8L2c+DQo8L3N2Zz4NCg==);
    background-position: center;
    background-size: 100%;
    position: absolute;
    text-align: center;
}

.leaflet-control-insetmap-button-bottomright {
    bottom: 0;
    right: 0;
}

.leaflet-control-insetmap-button-topleft {
    left: 0;
    top: 0;
}

.leaflet-control-insetmap-button-bottomleft {
    bottom: 0;
    left: 0;
}

.leaflet-control-insetmap-button-topright {
    top: 0;
    right: 0;
}

/*
.............................................
L.Control.LayerPicker
.............................................
*/

/* button show-hide */
.leaflet-control-layerpicker-btn {
    max-height: auto;
    max-width: auto;
    opacity: 1;
    transition: all 250ms;
}

.leaflet-control-layerpicker-btn.leaflet-control-layerpicker-min {
    max-height: 0;
    max-width: 0;
    opacity: 0;
    padding: 0;
    transform: rotate(180deg);
    transition: all 0ms;
}

/* panel show-hide */
.leaflet-control-layerpicker-pnl {
    max-height: 21.88rem;
    width: 22rem;
}

.leaflet-control-layerpicker-pnl.leaflet-control-layerpicker-min {
    max-height: 0;
    width: 0;
}

/* misc */
.leaflet-control-layerpicker-btn-basemaps,
.leaflet-control-layerpicker-btn-overlays {
    font-size: 0.85rem !important;
}

.leaflet-control-layerpicker-pnl img {
    height: 3.438rem;
    -o-object-fit: cover;
    object-fit: cover;
    width: 5.313rem;
}

.leaflet-control-layerpicker-pnl input {
    cursor: pointer;
}

.leaflet-control-layerpicker-pnl .nav-link:not(.active) {
    color: #777;
}

/*
.............................................
L.nwsAlerts
.............................................
*/

/* layer colors */
.util-nwsalerts-layer-warning {
    fill: #f00;
    stroke: #900;
}

.util-nwsalerts-layer-watch {
    fill: #f93;
    stroke: #c60;
}

.util-nwsalerts-layer-advisory {
    fill: #ff0;
    stroke: #cc0;
}

.util-nwsalerts-layer-statement {
    fill: #69e;
    stroke: #36c;
}

.util-nwsalerts-layer-other {
    fill: #b9f;
    stroke: #73f;
}

.util-nwsalerts-layer:hover {
    fill: #0ff;
    stroke: #077;
    stroke-opacity: 1;
}

.util-nwsalerts-layer {
    transition: stroke 300ms linear, fill 300ms linear;
}

/*
.............................................
layer legends
.............................................
*/
table.util-layer-legend svg {
    height: 0.75rem;
    width: 1.375rem;
}

table.util-layer-legend rect {
    height: 100%;
    stroke-width: 0.125rem;
    width: 100%;
}

table.util-layer-legend line {
    stroke-width: 0.1875rem;
}

caption {
    caption-side: bottom;
    text-align: left;
}

/*
.............................................
animations - usage:
  (1) add 'util-animate', 'util-animate-active', and 'util-animate-EFFECT' classes to element
  (2) after short delay (100ms), remove 'util-animate-active', and 'util-animate-EFFECT' classes
.............................................
*/
.util-animate {
    transition: transform 500ms, opacity 2000ms;
    transition-timing-function: var(--util-timing-function-bounce);
}

.util-animate.util-animate-active {
    opacity: 0;
    transition: all 0ms;
}

.util-animate-zoom {
    transform: scale(0.5);
}

.util-animate-up {
    transform: translateY(25rem);
}

.util-animate-down {
    transform: translateY(-25rem);
}

.util-animate-left {
    transform: translateX(25rem);
}

.util-animate-right {
    transform: translateX(-25rem);
}

.util-animate-rotate {
    transform: scale(0.5) rotate(-180deg);
}

.util-animate-scaleX {
    transform: scaleX(0);
}

.util-animate-scaleY {
    transform: scaleY(0);
}

.util-animate-skewX {
    transform: scale(0) skewX(60deg);
}

.util-animate-skewY {
    transform: scale(0) skewY(60deg);
}

/*
.............................................
leaflet customizations
.............................................
*/

/* bar controls */
.leaflet-bar {
    border-radius: 0;
    border-width: 1px !important;
}

.leaflet-bar a {
    border-radius: 0;
}

/* popups */
.leaflet-popup-content-wrapper {
    border-radius: 0;
}

.leaflet-popup-content {
    margin: 0.5rem;
}

/* tooltips */
.leaflet-tooltip {
    background: #343a40;
    border-radius: 0;
    color: white;
    padding: 0.3125rem 0.9375rem;
}

/*
.............................................
bootstrap
.............................................
*/

/* control pointers */
input[type=checkbox],
input[type=radio],
input[type=range],
option,
select,
.dropdown-menu li {
    cursor: pointer !important;
}

/* no input control shadows */
input:focus,
select:focus,
textarea:focus,
.btn:focus {
    box-shadow: inherit !important;
}

/* collapse speed */
.collapsing {
    transition: height 150ms linear;
}