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

    /*   ---- MAPA ---- */

	.home-map {
		width: 100%;
		height: 60vh;
	}

    main#graph{
        height: 80vh;
    }

    main#timeline > div{
        position: relative;
    }
    main#timeline #controls{
        position: sticky;
        top: 6em;
        width: max-content;
        margin-left: auto;
    }

	#graph-container{
		position: relative;
	}
	svg#graph-stage{
		width: 100%;
        height: 80vh;
	}

    line {
        stroke: var(--color-gray-400);
        stroke-opacity: 0;
        transition: stroke .2s ease;

    }

    .node-group {

        & circle {
            fill: var(--color-white);
            stroke: var(--color-gray-400);
            pointer-events: all;
            transition: fill .3s ease, stroke .3s ease;
            cursor: pointer;            
        }

        & rect {
            display: none;
            fill: #00000088;
            transition: fill .3s ease, stroke .3s ease;
            pointer-events: none;
            user-select: none;
            /* rx: 1; ry: 1; rounded corners */
        }

        & text {
            text-anchor: middle;
            fill: var(--color-black);
            cursor: pointer;
            font-weight: 400;
        }
    }

    .node-group:hover {
        & circle {
            stroke: var(--color-black);
        }
        & rect {
            fill: #000000;
        }
        & text {
            fill: #000000;
        }
    }
    
    .related circle{
        fill: var(--color-theme) !important;
        stroke: var(--color-theme);
    }
    
    .relatedByLink circle{
        fill: var(--color-theme) !important;
        stroke: var(--color-black);
    }
/*     
    .faded {
        opacity: .2;
    } */
    
    line.highlighted{
        stroke-opacity: .8;
    }
    line.faded{
        stroke-opacity: 0;
    }