.pretao
{
	position:fixed!important; 
	top:0; 
	left:0; 
	background-color:rgba(17,17,17,0.7);
	/*background-color:#000;*/
	width:100%; 
	height:100%;  
	animation: myAnim1 0.5s ease 0s 1 normal forwards;
	z-index:1001;
	
	display: none;
	justify-content: center;
	align-items: center;	
}

@supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
  .pretao {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  
@keyframes myAnim1
{
	0% 
	{
		opacity: 0;
	}
	100% 
	{
		opacity: 1;
	}
}

@keyframes myAnim2
{
	0% 
	{
		opacity: 1;
	}
	100% 
	{
		opacity: 0;
	}
}

@keyframes abre_janela1
{
	0% 
	{
		transform: scale(0);
	}
	100% 
	{
		transform: scale(1);
	}
}

@keyframes abre_janela2
{
	0% 
	{
		transform: scale(1);
	}
	100% 
	{
		transform: scale(0);
	}
}

.janela_basica
{
	position:relative;
	width:calc(100% - 40px);
	background-color:#f5f7ff;
	border-radius:8px;
	box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
	border-left:10px solid #4A6CF7;
	
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size:16px;
	color:#212529;
	text-align:justify;
	overflow:hidden;
	display:none;
	
	animation: abre_janela1 0.5s ease 0s 1 normal forwards;
}

.janela_basica_alerta
{
	position:relative;
	width:calc(100% - 40px);
	background-color:#f5f7ff;
	border-radius:8px;
	box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
	border-left:10px solid #E0A800;
	
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size:16px;
	color:#212529;
	text-align:justify;
	overflow:hidden;
	display:none;
	
	animation: abre_janela1 0.5s ease 0s 1 normal forwards;
}

.janela_basica_perigo
{
	position:relative;
	width:calc(100% - 40px);
	background-color:#f5f7ff;
	border-radius:8px;
	box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
	border-left:10px solid #DC3545;
	
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size:16px;
	color:#212529;
	text-align:justify;
	overflow:hidden;
	display:none;
	
	animation: abre_janela1 0.5s ease 0s 1 normal forwards;
}

.janela_basica_sucesso
{
	position:relative;
	width:calc(100% - 40px);
	background-color:#f5f7ff;
	border-radius:8px;
	box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
	border-left:10px solid #28a745;
	
	font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	font-size:16px;
	color:#212529;
	text-align:justify;
	overflow:hidden;
	display:none;
	
	animation: abre_janela1 0.5s ease 0s 1 normal forwards;
}

.bt_fechar_janelas
{
	position:absolute;
	right:10px;
	top:10px;
	width:30px;
	height:30px;
	border-radius: 50%;
	cursor:pointer;
	background-color:#f5f7ff;
	
	outline:0;
	border:0;
	margin:0;
	
	background-image:url(../img/fechar.png);
	background-position:center;
	background-repeat:no-repeat;
	background-size:55%;
	
	-webkit-transition: var(--transition);
	transition: var(--transition);
	transform-origin: center center;
	will-change: transform;
	backface-visibility: hidden;
}

.barra_sair
{
	position:absolute; 
	height:100%; 
	width:88%; 
	background-color:#4A6CF7; 
	top:0; 
	left:0;
	animation: deslizarBarra 2.0s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* HTML: <div class="loader"></div> */
.loader 
{
	width: 50px;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 8px solid #0000;
	/*border-right-color: #21883897;*/
	border-right-color: #FFFFFF97;
	position: relative;
	animation: l24 .8s infinite linear;
}

.loader2 
{
	width: 50px;
	aspect-ratio: 1;
	border-radius: 50%;
	border: 8px solid #0000;
	/*border-right-color: #21883897;*/
	border-right-color: #21252997;
	position: relative;
	animation: l24 .8s infinite linear;
}

.loader:before,
.loader:after,
.loader2:before,
.loader2:after 
{
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: inherit;
	animation: inherit;
	animation-duration: 2s;
}
.loader:after, .loader2:after 
{
	animation-duration: 4s;
}
@keyframes l24 
{
	100% {transform: rotate(1turn)}
}

.janela_loader
{
	display:none;
	color:#FFF;
	font-size:15px;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
	
	-webkit-transition: var(--transition);
	transition: var(--transition);
	transform-origin: center center;
	will-change: transform;
	backface-visibility: hidden;
	animation: abre_janela1 0.5s ease 0s 1 normal forwards;
}

@keyframes deslizarBarra 
{
	from { width: 0%; }
}

@media screen and (min-width: 961px) and (max-width: 1119px)
{
	.janela_basica
	{
		position:relative;
		width:500px;
		background-color:#f5f7ff;
		border-radius:8px;
		box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
		
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		font-size:16px;
		color:#212529;
		text-align:justify;
		overflow:hidden;
		display:none;
		
		border-left:10px solid #4A6CF7;
		
		animation: abre_janela1 0.5s ease 0s 1 normal forwards;
	}
	
	.janela_basica_alerta
	{
		position:relative;
		width:500px;
		background-color:#f5f7ff;
		border-radius:8px;
		box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
		
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		font-size:16px;
		color:#212529;
		text-align:justify;
		overflow:hidden;
		display:none;
		
		border-left:10px solid #E0A800;
		
		animation: abre_janela1 0.5s ease 0s 1 normal forwards;
	}
	
	.janela_basica_perigo
	{
		position:relative;
		width:500px;
		background-color:#f5f7ff;
		border-radius:8px;
		box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
		
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		font-size:16px;
		color:#212529;
		text-align:justify;
		overflow:hidden;
		display:none;
		
		border-left:10px solid #DC3545;
		
		animation: abre_janela1 0.5s ease 0s 1 normal forwards;
	}
	
	.janela_basica_sucesso
	{
		position:relative;
		width:500px;
		background-color:#f5f7ff;
		border-radius:8px;
		box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
		
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		font-size:16px;
		color:#212529;
		text-align:justify;
		overflow:hidden;
		display:none;
		
		border-left:10px solid #28a745;
		
		animation: abre_janela1 0.5s ease 0s 1 normal forwards;
	}
	
	.bt_fechar_janelas
	{
		position:absolute;
		right:10px;
		top:10px;
		width:30px;
		height:30px;
		border-radius: 50%;
		cursor:pointer;
		background-color:#f5f7ff;
		
		outline:0;
		border:0;
		margin:0;
		
		background-image:url(../img/fechar.png);
		background-position:center;
		background-repeat:no-repeat;
		background-size:55%;
		
		-webkit-transition: var(--transition);
		transition: var(--transition);
		transform-origin: center center;
		will-change: transform;
		backface-visibility: hidden;
	}


	.bt_fechar_janelas:hover
	{
		/*background-color:#FF6B6B;*/
		background-size:70%;
	}
}

@media screen and (min-width: 1120px)
{
	.janela_basica
	{
		position:relative;
		width:500px;
		background-color:#f5f7ff;
		border-radius:8px;
		box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
		
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		font-size:16px;
		color:#212529;
		text-align:justify;
		overflow:hidden;
		display:none;
		
		border-left:10px solid #4A6CF7;
		
		animation: abre_janela1 0.5s ease 0s 1 normal forwards;
	}
	
	.janela_basica_alerta
	{
		position:relative;
		width:500px;
		background-color:#f5f7ff;
		border-radius:8px;
		box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
		
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		font-size:16px;
		color:#212529;
		text-align:justify;
		overflow:hidden;
		display:none;
		
		border-left:10px solid #E0A800;
		
		animation: abre_janela1 0.5s ease 0s 1 normal forwards;
	}
	
	.janela_basica_perigo
	{
		position:relative;
		width:500px;
		background-color:#f5f7ff;
		border-radius:8px;
		box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
		
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		font-size:16px;
		color:#212529;
		text-align:justify;
		overflow:hidden;
		display:none;
		
		border-left:10px solid #DC3545;
		
		animation: abre_janela1 0.5s ease 0s 1 normal forwards;
	}
	
	.janela_basica_sucesso
	{
		position:relative;
		width:500px;
		background-color:#f5f7ff;
		border-radius:8px;
		box-shadow: 0 0px 20px rgba(0, 0, 0, 0.5);
		
		font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
		font-size:16px;
		color:#212529;
		text-align:justify;
		overflow:hidden;
		display:none;
		
		border-left:10px solid #28a745;
		
		animation: abre_janela1 0.5s ease 0s 1 normal forwards;
	}

	.bt_fechar_janelas
	{
		position:absolute;
		right:10px;
		top:10px;
		width:30px;
		height:30px;
		border-radius: 50%;
		cursor:pointer;
		background-color:#f5f7ff;
		
		outline:0;
		border:0;
		margin:0;
		
		background-image:url(../img/fechar.png);
		background-position:center;
		background-repeat:no-repeat;
		background-size:55%;
		
		-webkit-transition: var(--transition);
		transition: var(--transition);
		transform-origin: center center;
		will-change: transform;
		backface-visibility: hidden;
	}


	.bt_fechar_janelas:hover
	{
		/*background-color:#FF6B6B;*/
		background-size:70%;
	}
}