#mapContainer #mainContainer {
   margin-top: 2rem;
}

#mapContainer #mainContainer #map {
   height: 100vh;
   width: 100vw;
}

/* ----------------------- Estilo do Popup ----------------------*/
#mapContainer #mainContainer #popup {
   position: absolute;
   bottom: 1rem;
   left: -4rem;

   min-width: 23rem;

   padding: 1rem;

   border: 0.2rem solid var(--color-primary-darker);
   border-radius: 1rem;

   background-color: white;

   box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);
}

#mapContainer #mainContainer #popup:after,
#popup:before {
   content: ' ';

   position: absolute;
   top: 100%;

   height: 0;
   width: 0;

   border: solid transparent;

   pointer-events: none;
}

#mapContainer #mainContainer #popup:before {
   left: 4rem;
   margin-left: -1rem;

   border-width: 1rem;
   border-top: 1.2rem solid var(--color-primary-darker);
}

#mapContainer #mainContainer #popup:after {
   left: 4rem;
   margin-left: -1rem;

   border-top-color: white;
   border-width: 1rem;
}

#mapContainer #mainContainer #popup #popupContent code {
   font-size: 1.7rem;
   color: var(--color-primary-dark);
}

#mapContainer #mainContainer #popup #popupContent ul {
   line-height: 2rem;

   list-style: none;
}

#mapContainer #mainContainer #popup #popupContent ul span {
   font-weight: bold;
}

#mapContainer #mainContainer #popup #popupCloser {
   width: 2rem;
   height: 2rem;

   position: absolute;
   top: 0.2rem;
   right: 0.1rem;

   display: flex;
   justify-content: center;
   align-items: center;

   border: none;

   color: var(--color-primary-dark);
   text-decoration: none;
   font-weight: bold;

   background: transparent;

   outline: none;

   cursor: pointer;
}

#mapContainer #mainContainer #popup #popupCloser:hover {
   color: var(--color-primary-darker);
}

/*------------------------ Estilo da legenda ---------------------------------------*/

#mapContainer #mainContainer #subtitleContainer {
   flex-direction: column;
   align-items: flex-end;

   position: absolute;
   right: 1rem;
}

#mapContainer #mainContainer #subtitleContainer #toggleSubtitle {
   width: 4rem;
   margin-top: 1rem;

   justify-content: center;
   align-items: center;

   border: 0.3rem solid rgba(255, 255, 255, 0.6);

   background: var(--color-primary-dark);

   opacity: 0.85;

   transition: opacity 0.2s;
}

#mapContainer #mainContainer #subtitleContainer #toggleSubtitle:hover {
   cursor: pointer;
   opacity: 1;
}

#mapContainer #mainContainer #subtitleContainer #toggleSubtitle #toggleSubtitleIcon {
   margin: 1rem;

   color: var(--color-text-in-secondary);
}

/*------------------------ Estilo dos itens da legenda ---------------------------------------*/

#mapContainer #mainContainer #subtitleContainer #layersContainer {
   width: 30rem;

   padding: 1rem;

   flex-direction: column;
   justify-content: center;
   align-items: center;

   border-radius: 1rem;

   background: rgba(255, 255, 255, 0.4);

   list-style: none;
}

#mapContainer #mainContainer #subtitleContainer #layersContainer .layer {
   width: 28rem;
   margin-bottom: 0.5rem;
   padding: 0.2rem 0.5rem 0.3rem 0.5rem;

   border: 0.2rem solid var(--color-primary-darker);
   border-radius: 1rem;

   flex-direction: column;

   background: rgba(0, 180, 216, 0.6);
}

#mapContainer #mainContainer #subtitleContainer #layersContainer .dropArea {
   height: 8.5rem;

   border: none;
   background: transparent;
}

/*------------------------ Estilo dos itens da legenda ---------------------------------------*/

#mapContainer #mainContainer #subtitleContainer #layersContainer .layer:not(.mapLayer) .buttons {
   justify-content: center;
   align-items: center;
}

#mapContainer #mainContainer #subtitleContainer #layersContainer .layer button {
   min-width: 3rem;
   height: 3rem;
   margin: 0 0.2rem;
   padding: 0.5rem;

   display: flex;
   justify-content: center;
   align-items: center;

   border: 0.1rem solid rgba(0, 0, 0, 0.2);
   border-radius: 0.5rem;

   color: var(--color-text-in-secondary);
   background: var(--color-secondary);

   outline: none;

   transition: background 0.2s;

   cursor: pointer;
}

#mapContainer #mainContainer #subtitleContainer #layersContainer .layer button:hover {
   background: var(--color-secondary-dark);
}

#mapContainer #mainContainer #subtitleContainer #layersContainer .layer .buttons .layerVisible {
   background: var(--color-primary-dark);
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .buttons
   .layerVisible:hover {
   background: var(--color-primary-darker);
}

#mapContainer #mainContainer #subtitleContainer #layersContainer .layer button svg {
   margin: 0 0.1rem;
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .buttons
   .toggleLabelMenu
   svg {
   position: relative;
   bottom: 0.1rem;
}

#mapContainer #mainContainer #subtitleContainer #layersContainer .layer .addFilter {
   width: 4.2rem;
   height: 2.8rem;
}

#mapContainer #mainContainer #subtitleContainer #layersContainer .layer .filterContainer {
   width: 100%;

   margin-bottom: 0.3rem;

   justify-content: center;
}

#mapContainer #mainContainer #subtitleContainer #layersContainer .layer .filterContainer select,
#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .filterContainer
   input:not([type='color']) {
   max-width: 20%;

   margin-right: 0.1rem;

   font: 400 1.4rem var(--font-family-text);
   color: var(--color-text-in-primary);
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .filterContainer
   .filterTypeSelect {
   max-width: 40% !important;
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .filterContainer
   .filterColorPickersContainer {
   max-height: 3rem;

   flex-direction: column;
   align-items: center;
}

#mapContainer #mainContainer #subtitleContainer #layersContainer .layer .filterContainer button {
   display: flex;
   justify-content: center;
   align-items: center;

   transition: all 0.2s ease;
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .filterContainer
   button:hover {
   cursor: pointer;

   background: var(--color-secondary-dark);
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .filterContainer
   #filterErase {
   color: rgb(216, 32, 32);

   transition: all 0.2 ease;
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .filterContainer
   #filterErase:hover {
   color: brown;

   cursor: pointer;
}

/*------------------------ Estilo dos menus ---------------------------------------*/

#mapContainer #mainContainer #subtitleContainer #layersContainer .layer .customization .menu {
   margin-top: 0.1rem;
   min-width: 18rem;

   position: absolute;
   z-index: 1;

   border: 0.1rem solid var(--color-secondary-dark);
   border-radius: 1rem;

   flex-direction: column;

   background: var(--color-secondary-lighter);
}

#mapContainer #mainContainer #subtitleContainer #layersContainer .layer .customization .menu > * {
   width: calc(100% - 2rem);
   margin: 1rem 1rem;
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .customization
   .filterColorPickersMenu {
   right: 3%;
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .customization
   .filterColorPickersMenu
   > div
   * {
   width: 100%;
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .customization
   .filterColorPickersMenu
   > div
   span {
   font: 700 1.4rem var(--font-family-title);
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .customization
   .filterColorPickersMenu
   > div:first-child {
   margin-bottom: 0;
   padding-bottom: 1rem;

   border-bottom: 0.2rem dashed var(--color-secondary-dark);
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .customization
   .filterColorPickersMenu
   input[type='checkbox'] {
   width: 1.2rem;
   margin-right: 0.5rem;
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .customization
   .filterColorPickersMenu
   label {
   position: relative;
   bottom: 0.095rem;
}

/*--------------------- Estilização do slider ---------------------*/

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .buttons
   .customization
   .menu
   .sizePicker {
   appearance: none;

   height: 0.75rem;

   border-radius: 0.5rem;

   background: var(--color-secondary);
   outline: none;
   opacity: 0.7;

   z-index: 1;

   transition: opacity 0.2s;
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .buttons
   .customization
   .menu
   .sizePicker:hover {
   opacity: 1;
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .buttons
   .customization
   .menu
   .sizePicker::-webkit-slider-thumb {
   appearance: none;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
   background: var(--color-primary-dark);
   cursor: pointer;
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .buttons
   .customization
   .menu
   .sizePicker::-moz-range-thumb {
   appearance: none;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
   background: var(--color-primary-dark);
   cursor: pointer;
}

/* ------------------ Estilo do texto "camada: x" ------------------------ */

#mapContainer #mainContainer #subtitleContainer #layersContainer .layer .text {
   margin-top: 0.3rem;
   padding-left: 0.2rem;

   font: 400 1.6rem var(--font-family-title);
   color: var(--color-title-in-primary);

   cursor: move;
}

/* --------------------- Estilo da legenda dos filtros ------------------ */
#mapContainer #mainContainer #subtitleContainer #layersContainer .layer .filterSubtitleContainer {
   padding: 0.3rem;
   padding-right: 0;

   border: 0.2rem solid var(--color-primary-dark);
   border-radius: 0.5rem;

   background: var(--color-primary-lighter);

   list-style: none;

   font: 400 1.2rem var(--font-family-title);
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .filterSubtitleContainer
   li {
   display: grid;
   grid-template-columns: 2fr 1fr;
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .filterSubtitleContainer
   li
   div:first-child {
   display: grid;
   grid-template-columns: 1fr 1fr;
}

#mapContainer
   #mainContainer
   #subtitleContainer
   #layersContainer
   .layer
   .filterSubtitleContainer
   li
   div:last-child {
   display: flex;
   justify-content: center;
}
