body{
	margin: 0;
	padding: 0;
	background: #FFF;
	color: #333;
	font-family: "Roboto", sans-serif;
  	font-weight: 400;
 	font-style: normal;
 	min-height: 100vh;
 	width: 100vw;
 	height: 100vh;
}

ul, li{
	margin: 0;
	padding: 0;
	list-style-type: none;
}

.container {
    display: flex; /* Usa o display flex para o container */
    height: 100%; /* Altura total da página */
}

.box{
	position: relative;
}
	
	.box.prompts{
		width: 360px;
		height: 100%;
		background-color: #F9F9F9;
		overflow: hidden;
	}	

		.box.prompts .credenciais{
			height: 320px;
			border-bottom: 2px solid #F1F1F0;
		}

		.box.prompts .credenciais img{
			width: 200px;
			border-radius: 200px;
			margin: 20px 0 0 80px;
		}

		.box.prompts .credenciais h2{
			font-size: 1.5em;
			padding: 0 10px;
			margin: 10px 0 0 0;
			text-align: center;
		}

			.box.prompts .credenciais p{
				padding: 0 20px;
				margin: 5px;
				text-align: center;
			}

		.box.prompts .listaPerguntas{
			overflow: auto;
			height: 60vh;
		}

		.box.prompts ul{
			margin: 20px 10px 20px;

		}

			.box.prompts ul li{
				margin: 10px 0;
				padding: 5px;
				
				cursor: pointer;
			}

				.box.prompts ul li:hover{
					background-color: #ECECEC;
				}

	.popup {
	    position: fixed;
	    padding: 5px 10px;
	    background: black;
	    color: white;
	    border-radius: 5px;
	    display: none;
	    z-index: 1000;
	    font-size: 14px;
	}	

	.box.bot{
		flex-grow: 1; 
		height: 98%;
		margin-left: ;
	}

		

		.box.bot iframe{
			width: 100%;
			height: 100%;
		}

	.box .marca{
		position: absolute;
		bottom: 0;
		width: 100%;
		height: 30px;
		background-color: #FFF;
	}

footer{
	position: absolute;
	right: 0;
	bottom: 0;
	margin: 0 2vw 0 0;
	text-align: right;
}

footer img{
	width: 3vh;
	height: auto;
	font-weight: 100;
	vertical-align: middle;
}

@media only screen and (max-width: 700px) {
  	

  

	.box.prompts {
    	display: none;
	}

	
}

/* Estiliza a barra de rolagem para todos os elementos e a janela viewport */
::-webkit-scrollbar {
    width: 8px;  /* largura da barra de rolagem */
}

/* Trilha da barra de rolagem */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* cor de fundo da trilha */
}

/* Manipulador da barra de rolagem */
::-webkit-scrollbar-thumb {
    background: #888; /* cor do manipulador */
    border-radius: 4px; /* bordas arredondadas do manipulador */
}

/* Estado de hover do manipulador da barra de rolagem */
::-webkit-scrollbar-thumb:hover {
    background: #555; /* cor do manipulador quando mouse está sobre */
}