@media (max-width: 1250px) {
	#reportWrapper {
		margin: 0px;
		padding: 40px;
	}
	
	#reportBlueContainer {
		flex-direction: column;
		align-items: center;
	}

		#reportBlueLeft,
		#reportBlueRight {
			width: 100%;
			padding: 40px 30px;
		}

		#reportFormBox {
			position: static;
			transform: none;
			margin-top: 20px;
			box-shadow: 0 0 12px rgba(0, 0, 0, 0.15);
		}
}


@media screen and (max-width: 1000px) {
    #mainMenuFoto {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: 10px auto;
        display: block;
    }
}

@media (max-width: 700px) {
	#reportWrapper {
		margin: 0px;
		padding: 20px;
	}
}

@media screen and (max-width: 500px) {
	#mainMenu.aberto #mainMenuNome,
	#mainMenu.aberto #mainMenuCargo,
	#mainMenu.aberto .mainMenuTexto {
		display: block;
	}
	
	#mainMenu.aberto .mainMenuIcon {
		margin: 0px 8px 0px 0px;
		display: inline-block;
		vertical-align: middle;
		width: 16px; /* ajuste conforme seus ícones */
	}

	#mainMenu.aberto .mainMenuTexto {
		display: inline-block;
		vertical-align: middle;
		font-size:0.8em;
	}

	
	#mainTopoLogo {
		display: flex;
		align-items: center;
		gap: 16px;
		padding:0px 10px; /* padding horizontal IGUAL nos dois lados */
	}

	#menuToggleButton {
		display: inline-block;
		font-size: 22px;
		color: white;
		cursor: pointer;
	}

	#mainTopoLogo img {
		margin-left:10px;
		height: 28px;
		display: block;
	}
	/* Overlay de fundo */
	#menuOverlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.6);
		display: none;
		z-index: 1000;
	}

	#menuOverlay.ativo {
		display: block;
	}

	/* Estilo do menu no modo mobile */
	#mainMenu {
		position: fixed;
		top: 0;
		left: 0;
		width: 220px;
		min-width: 220px;
		max-width: 220px;
		height: 100vh;
		background-color: #071b33;
		transform: translateX(-100%);
		transition: transform 0.3s ease;
		z-index: 1002;
		flex-shrink: 0;
	}

	#mainMenu.aberto {
		transform: translateX(0);
	}
	
	#reportWrapper {
		padding: 5px;
	}
}
@media screen and (max-width: 1200px) {
    #menuToggleButton {
        display: inline-block;
        font-size: 22px;
        color: white;
        cursor: pointer;
    }

    #menuOverlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.6);
        display: none;
        z-index: 1000;
    }

    #menuOverlay.ativo {
        display: block;
    }

    #mainMenu {
        position: fixed;
        top: 0;
        left: 0;
        width: 220px;
        min-width: 220px;
        max-width: 220px;
        height: 100vh;
        background-color: #071b33;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 1002;
        flex-shrink: 0;
    }

    #mainMenu.aberto {
        transform: translateX(0);
    }
    #mainMenu.aberto #mainMenuNome,
    #mainMenu.aberto #mainMenuCargo,
    #mainMenu.aberto .mainMenuTexto {
        display: block;
    }
    #mainMenu.aberto .mainMenuIcon {
        margin: 0px 8px 0px 0px;
        display: inline-block;
        vertical-align: middle;
        width: 16px;
    }
    #mainMenu.aberto .mainMenuTexto {
        display: inline-block;
        vertical-align: middle;
        font-size: 0.9em;
    }
}