/*IMPORTAÇÃO DAS FONTES DO SITE DO SITE DO GOOGE FONTS */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
/*Variáveis de coloração*/
.content{--bg-clr: #bbd4ce;}/*Cor de fundo da parte de insersão de dados de login e cadastro*/
.content::before{--bg-clr: #679186;}/*Cor de fundo da parte de boas vindas*/
.title{--cor-principal: #46464E;}
.btn-second{--bg-clr: #46464E;}/*Cor do botão de Entrar/Cadastrar*/
.btn-primary:hover{--bg-clr: #bbd4ce; --clr: #2c3e50;}/*hover do botão Cadastre-se/Fazer longin*/
.btn-second:hover{--bg-clr: #679186;}/*hover do botão Entrar/Cadastre-se*/
.btn-primary{--brd: #fff;}
.description-second{--clr: #46464E;}
.password{--clr: #46464E;}
.link-protect{--clr: #46464E;}
.concordo{--clr: #46464E;}

:root {
    --cor-principal: #46464e;
	--cor-secundaria: #dfd9cd;
	--cor-alteranativa: #f5eee4;
    --cor-font-tema: #dfd9cd;
	--cor-bordas: #c9c9c9;   
}

*{
    margin: 0;
    padding: 0;
    border: none;
    font-family: 'Rubik', sans-serif;
	box-sizing: border-box;    
}

.btn{
	border-radius: 15px;
	text-transform: uppercase;
	color: #fff;
	font-size: 12px;
	padding: 15px 50px;
	cursor: pointer;
	font-weight: bold;
	width: 200px;
	align-self: center;
	border-width: 0px;
	margin-top: 0.8rem;
}
.btn-primary{
	background-color: transparent;
	border: 1px solid var(--brd);
	transition: background-color .5s;
	-webkit-box-shadow: 0px 0px 15px 1px rgba(250, 250, 250, 0.31);
	-moz-box-shadow: 0px 0px 15px 1px rgba(250, 250, 250, 0.31);
	box-shadow: 0px 0px 15px 1px rgba(250, 250, 250, 0.31);	
}
.btn-primary:hover{
	background-color: var(--bg-clr);
	color: var(--clr);
}
.btn.btn-primary i{
	color: #fff;
	font-size: 15px;
}
.btn-second{
	background-color: var(--bg-clr);
	transition: background-color .5s;
	-webkit-box-shadow: 0px 0px 15px 1px rgba(250, 250, 250, 0.91);
	-moz-box-shadow: 0px 0px 15px 1px rgba(250, 250, 250, 0.91);
	box-shadow: 0px 0px 15px 1px rgba(250, 250, 250, 0.91);
}
.btn-second:hover{
	background-color: var(--bg-clr);
	border: 0px solid #58af9b;
	color: #fff;
}
.btn.btn-second i{
	color: #fff;
	font-size: 15px;
}
.label-input{
	background-color: var(--cor-secundaria);
	display: flex;
	align-items: center;
	margin: 3px;
    border-radius: 7px;
    padding-left: 5px;
}
.icon-modify{
	color: var(--cor-principal);
	padding: 0 5px;
}
.form input{
	height: 30px;
	border: none;
	width: 100%;
	background: var(--cor-alteranativa);
	margin: 4px;
	padding-left: 5px;
	border-radius: 5px;
}
.form select{
	height: 30px;
	border: none;
	width: 100%;
	background-color: var(--cor-alteranativa);
	margin: 4px;
    padding-left: 5px;
	border-radius: 5px;
}

/* CSS básico para o modal (pode ser estilizado conforme necessário) */
.modal {
	display: none; /* Inicia oculto */
	position: fixed;
	z-index: 1;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgba(0,0,0,0.4);
}
.div-icon-av{
	margin: 20px auto;
	border: 5px solid green;
	border-radius: 38px;
	-webkit-box-shadow: 0px 0px 15px 1px rgba(200, 0, 0, 0.91);
	-moz-box-shadow: 0px 0px 15px 1px rgba(200, 0, 0, 0.91);
	box-shadow: 0px 0px 15px 1px rgba(200, 0, 0, 0.91);
	width: 56px;
	height: 56px;
	padding: 5px;
	background-color: goldenrod;
}
.div-icon-al{
	margin: 20px auto;
	border: 5px solid #FFCD07;
	border-radius: 38px;
	-webkit-box-shadow: 0px 0px 15px 1px rgba(200, 0, 0, 0.91);
	-moz-box-shadow: 0px 0px 15px 1px rgba(200, 0, 0, 0.91);
	box-shadow: 0px 0px 15px 1px rgba(200, 0, 0, 0.91);
	width: 56px;
	height: 56px;
	padding: 5px;
	background-color: blueviolet;
}
.div-icon-pe{
	margin: 20px auto;
	border: 5px solid #4646e4;
	border-radius: 38px;
	-webkit-box-shadow: 0px 0px 15px 1px rgba(200, 0, 0, 0.91);
	-moz-box-shadow: 0px 0px 15px 1px rgba(200, 0, 0, 0.91);
	box-shadow: 0px 0px 15px 1px rgba(200, 0, 0, 0.91);
	width: 56px;
	height: 56px;
	padding: 5px;
}
.div-icon-er{
	margin: 20px auto;
	border: 5px solid red;
	border-radius: 38px;
	-webkit-box-shadow: 0px 0px 15px 1px rgba(200, 0, 0, 0.91);
	-moz-box-shadow: 0px 0px 15px 1px rgba(200, 0, 0, 0.91);
	box-shadow: 0px 0px 15px 1px rgba(200, 0, 0, 0.91);
	width: 56px;
	height: 56px;
	padding: 5px;
	background-color: yellowgreen;
}
.icon-modal-av{
	font-size: 50px;
	margin: 3px;
	color: green;
}
.icon-modal-al{
	font-size: 50px;
	margin: 3px;
	color: #FFCD07;
}
.icon-modal-pe{
	font-size: 50px;
	margin: 3px;
	color: #4646e4;
}
.icon-modal-er{
	font-size: 41px;
	margin: 3px;
	color: red;
}
.modal-content {
	background-color: #fefefe;
	margin: 15% auto;
	padding: 50px;
	border: 1px solid #888;
	width: 80%;
	max-width: max-content;
	text-align: center;
	position: relative;
	border-radius: 10px;
}
#modal-ok-btn-av {
	padding: 10px 25px;
	background-color: #4CAF50;
	color: white;
	border: none;
	cursor: pointer;
	margin-top: 20px;
	border-radius: 10px;
	max-width: max-content;
	font-size: 15px;
	font-weight: bold;
}
#modal-ok-btn-av:hover {
	background-color: #45a049;
}
#modal-ok-btn-pe {
	padding: 10px 25px;
	background-color: #4CAF50;
	color: white;
	border: none;
	cursor: pointer;
	margin-top: 20px;
	border-radius: 10px;
	max-width: max-content;
	font-size: 15px;
	font-weight: bold;
}
#modal-ok-btn-pe:hover {
	background-color: #45a049;
}
#modal-ok-btn-al {
	padding: 10px 25px;
	background-color: #4CAF50;
	color: white;
	border: none;
	cursor: pointer;
	margin-top: 20px;
	border-radius: 10px;
	max-width: max-content;
	font-size: 15px;
	font-weight: bold;
}
#modal-ok-btn-al:hover {
	background-color: #45a049;
}
#modal-ok-btn-er {
	padding: 10px 25px;
	background-color: #4CAF50;
	color: white;
	border: none;
	cursor: pointer;
	margin-top: 20px;
	border-radius: 10px;
	max-width: max-content;
	font-size: 15px;
	font-weight: bold;
}
#modal-ok-btn-er:hover {
	background-color: #45a049;
}