/* 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;
	}



/* 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::after{
		background-color: transparent;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
		content: '';
		border-width: 5px;
		border-style: solid;
		border-color: #CCC transparent #CCC transparent;
		border-radius: 50%;
		width: 2rem;
		height: 2rem;
		z-index: 5;
		
		animation: rotateLoader .75s linear;
		animation-iteration-count: infinite;
	}
	
    #map{
        width: 100%;
        height: 100%;
        background-color: var(--color-gray-200);
    }
	
    #map #map-alert{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #map #map-alert::before{
        content: 'visualização indisponível';
        color: var(--color-gray-400);
        font-size: 2.5em;
        font-weight: 600;
    }

    #map .leaflet-popup-content-wrapper{
        padding: 0;
        margin: 0;
        border-radius: 0;
    }
    #map .leaflet-popup-content{
        padding: 0;
        margin: 0;
        display: flex;
        font-size: 1em;
    }
    #map .leaflet-popup-content img{
        width: 100px;
    }

    #map .leaflet-popup-content .content{
        padding: 1.5em 2.5em 1em 1.5em;
    }

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

    #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%;
    }
    
    .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 item';
    }
    
    .tl-slide .timeline-link:hover {
        background-color: var(--color-theme);
        color: var(--color-white);
        text-decoration: none;
    }