/* LOGIN / POPUP */
	
	dialog{
		box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
		border-radius: 5px;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	dialog::backdrop{
		background-color: #1e1e1edd;
	}

	dialog#modalBoxContainer{
		padding: 0; 
		border: 0;
		background-color: transparent;
		box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
		overflow: hidden;
	}
    
	dialog #dialogClose{
        display: block;
		position: absolute;
        z-index: 9999;
		top: 0;
		right: 0;
		border: 0;
		outline: 0;
		margin: .5em;
		cursor: pointer;
        content: '';
        width: 1.5rem;
        height: 1.5rem;
        background-color: transparent;
        background-image: url("data:image/svg+xml;utf8,<svg id='Layer_1' xmlns='http://www.w3.org/2000/svg' version='1.1' viewBox='0 0 50 50'> <path id='Caminho_1' d='M5.71,39.79l4.57,4.57L44.29,10.35l-4.57-4.57L5.71,39.79Z'/> <path id='Caminho_11' d='M10.28,5.78l-4.57,4.57,34.01,34.01,4.57-4.57L10.28,5.78Z'/> </svg>");
        background-size: contain;
        background-repeat: no-repeat;
	}
    
    dialog #dialogClose:has(+ #map) {
                filter: invert(1);
    }


/* MAP / POPUP */

    dialog#dialog{
		width: 85%;
		height: 85%;
		padding: 0; 
		border: 0;
		box-shadow: rgba(0, 0, 0, 0.3) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px;
		overflow: hidden;
	}

	#map-loader.visible{
		position: absolute;
		inset: 0 0 0 0;
		content: '';
		z-index: 5;
	}
	#map-loader.visible{
		position: absolute;
		inset: 0 0 0 0;
		content: '';
		z-index: 5;
	}
	
    .map{
        position: relative;
    }
    .map::before{
        content: '';
        display: block;
        position: absolute;
        inset: 0 0 0 0;
        background-color: #00000099;
        z-index: 9999;
        opacity: 1;
        transition: opacity .2s ease;
    }
    .map::after{
        content: '';
        position: absolute;
        width: 4em;
        height: 4em;
        left: 50%;
        top: 50%;
        border-color: #fff transparent #fff transparent ;
        border-width: 3px;
        border-style: solid;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: 10000;
        transition: opacity .2s ease;
		animation: rotateLoader .75s linear;
		animation-iteration-count: infinite;
    }

    .map.loaded::before,
    .map.loaded::after{
        opacity: 0;
        pointer-events: none;
    }

    #map{
        width: 100%;
        height: 100%;
        background-color: var(--color-gray-200);
    }
	
   #map-alert{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #map-alert::before{
        content: 'visualização indisponível';
        color: var(--color-gray-400);
        font-size: 2.5em;
        font-weight: 600;
    }

    .leaflet-popup-content-wrapper{
        padding: 0;
        margin: 0;
        border-radius: 5px !important;
    }
    .leaflet-popup-content{
        padding: .5em 1em .5em .5em !important;
        margin: 0 !important;
        display: flex;
        gap: .75em;
        font-size: 1em;
        align-items: center;
    }
    .leaflet-popup-content .popup-type{
        text-transform: uppercase;
        font-size: 0.7em;
        font-weight: 600;
        color: var(--color-theme);
        letter-spacing: .5px;
    }
    .leaflet-popup-content a{
        color: var(--color-gray-900) !important;
        font-weight: 800;
        font-size: 1.1em;
        line-height: 1 !important;
    }
    .leaflet-popup-content a .total{
        color: var(--color-gray-400) !important;
        font-weight: 300;
        font-size: .8em;
    }
    .leaflet-popup-content a:hover{
        text-decoration: none;
        /* color: var(--color-theme) */
    }
    .leaflet-popup-content img{
        width: 100px;
    }

	@keyframes rotateLoader {
		0% { transform: translateY(-50%) rotate(0turn); }
		100% { transform: translateY(-50%) rotate(1turn); }
	}

    .leaflet-touch .leaflet-control-layers,
    .leaflet-touch .leaflet-bar {
        padding: 1em;
        display: flex;
        gap: .5em;
        border: 0 !important;
       
    }
    
    .leaflet-container .leaflet-control-attribution {
        background: transparent !important;
    }

    .leaflet-top,
    .leaflet-bottom{
         z-index: 99999 !important;
	}

    .leaflet-touch .leaflet-bar a{
        border-radius: 50% !important;
        border: 0 !important;
    }

    .leaflet-touch .leaflet-bar a:not(.leaflet-disabled):hover {
        background-color: var(--color-theme);
    }

    #timeline{
        font-family: inherit !important;
    }
    
    .tl-timeline p,
    .tl-timeline h1, 
    .tl-timeline h2,
    .tl-timeline h3,
    .tl-timeline h4,
    .tl-timeline h5,
    .tl-timeline h6 {
        font-family: inherit !important;
        text-transform: none !important;
    }
    
    .tl-timeline .tl-headline-date,
    .tl-timeline h3.tl-headline-date {
        color: var(--color-theme);
        font-family: inherit !important;
    }

    .tl-text h2.tl-headline-title, 
    .tl-text h2.tl-headline {
        font-size: 2em !important;
        line-height: 1em !important;
    }
    .tl-slide .tl-slide-scrollable-container {
        display: flex !important;
        align-items: center ;
        height: 100%;
    }

    .tl-slide .tl-slide-content-container {
        display: flex !important;
        align-items: center ;
        height: 100%;
    }
    
    .tl-slide .tl-slide-content {
        display: flex !important;
        gap: 2em;
        max-height: 100%;
        align-items: center;
    }
    
    .tl-slide .timeline-link:link,
    .tl-slide .timeline-link:visited,
    .tl-slide .timeline-link:active {
        background-color: var(--color-gray-300);
        color: var(--color-gray-500);
        display: inline-block;
        padding: .25em 1em;
        margin-top: 1em;
        font-weight: 600;
        text-decoration: none;
        transition: all .3s ease;
        font-size: 0.9em;
    }
    
    .tl-slide .timeline-link span{
        display: none;
    }
    
    .tl-slide .timeline-link::before{
        content: 'ver detalhes';
    }
    
    .tl-slide .timeline-link:hover {
        background-color: var(--color-theme);
        color: var(--color-white);
        text-decoration: none;
    }

    .tl-media-shadow {
        box-shadow: none !important;
    }

    		.mycluster {
			width: 40px;
			height: 40px;
			background-color: greenyellow;
			text-align: center;
			font-size: 24px;
		}