/* VARS*/

:root {
    --modal-fundo: rgba(0, 0, 0, 0.5); 
	--fundo-branco-suave: #F5F9F8;
	--azul-escuro-header:#203864;
	--azul-fundo: radial-gradient(circle, #B1C5E6, #527DC8, #27467B);
	--vermelho-cancelar: #E94D4D;
	--verde-bootstrap: #57B15A;
}




/* RESPONSIVIDADE */
@media screen and (max-width: 1920px) and (max-height: 1080px) {
	.div-tabela td{
		font-size: x-small;
	}

	.div-tabela th{
		font-size: smaller;
	}
	body{
		background-color:red;
	}

	
	
}

/* ============ ELEMENTOS GERAIS ==================================================== */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
	height: 100vh;
    background-image: radial-gradient(circle, #B1C5E6, #527DC8, #27467B);
}

/*===================== MENU ========================================*/
.nav-menu{	
	background-color: #203864;
	justify-content: space-between;
	width: 100%;
	height: 10%;
	display: flex;
	align-items: center;
	padding: 1%;
}

.nav-logo{
	width: 15%;
	height: 100%;
	display: flex;
	align-items: center;
	padding-left: 2%;
}

.nav-logo img{
	max-height: 100%;
	max-width: 80%;
	display: block;
}

.nav-itens{
	display: flex;
	width: 85%;
	height: 100%;
	justify-content: space-evenly;
	list-style: none;
	align-items: center;
	margin: 0;
}

.nav-font{
	font-family: "Atkinson Hyperlegible", sans-serif;
  	font-weight: 400;
  	font-style: normal;
  	font-size: 112%;
	color: white;
}

.nav-itens li{
	width: auto;
	max-height: 100%;
	margin-left: 2%;
}

.nav-itens a{
	text-decoration: none;
}


.nav-itens a:hover{
	color: #E52726;
	text-decoration: underline;
}
/*===========================================TITULOS E REMESSA ESTRUTURA========================================*/


.container-principal{
	width: 100%;
	height: 90%;
	padding: 2% 3%;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}


.div-estrutura{
	border: 2px solid #203864;
	border-radius: 2%;
	width: 40%;
	height: 100%;
	font-size: small;	
}

.seta{
	max-height: 10%;
	margin-top: 10%;
}

/* ========================= ESTRUTURA INTERNA ====================================*/

.div-conteudo{
	height: 98%;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	padding: 1% 1% 0% 1%;
	flex-direction: column;
	text-align: center;
	margin-top: 1%;
	justify-content: space-between;
}

.div-conteudo h2{
	color: white;
	font-family: "Baskervville SC", serif;
  	font-weight: 400;
  	font-style: normal;
  	text-decoration: underline;
}

/* ===========FORM PESQUISA ================ */
.form-pesquisa{
	display: flex;	
	font-family: arial;
}

.form-pesquisa input[type="text"]{
	width: 60%;
	padding-left: 1%;
	outline: none;
}

.form-pesquisa input[type="text"]:focus{
	border: 1px solid #0050d1;;
    box-shadow: 0 0 8px #0050d1;
}

.form-pesquisa select{
	width: 25%;
	border: none;
	outline: none;
	background-color: #203864;
    color: white;
	text-align: center;
}

.form-pesquisa option{
	padding: 20%;
}

.form-pesquisa button{
	width: 15%;
	overflow: hidden;
	border: none;
	padding: 1%;
	outline: none;
    text-align: center;
    color: white;
    background-color: #4472C4;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
    border-top-right-radius: 4%;
}

#buscar_titulos:hover{
	background-color: #203864;
}
/*=======================================================================--==========================================================
========================================================== TABELAS ============================================================ 
===================================================================================================================================== */

.div-tabela{
	margin-top: 1%;
	margin-bottom: 1%;
	height: 100%;
	overflow: auto;
}

.div-tabela table{
	width: 100%;
	font-size: medium;
}

th{
	min-width: 50px;
	position: sticky;
	top: 0;
}

.div-tabela td{
	font-size: x-small;
}

tbody tr:nth-child(even) {
    background-color: white; 
}


tbody tr:nth-child(odd) {
    background-color: #D9D9D9; 
} 

/* =================== BTNS =================== */
.remover{
	cursor: pointer;
}


.remover:hover{
	text-decoration: underline;
	color: darkred;
}

.form-pesquisa button:hover{
	background-color: #203864;
}

.div-btns-titulos{
	width: 100%;
	display: flex;
	justify-content: space-between;
}

.div-btns-titulos button{
	text-decoration: none;
    display: inline-block;
    cursor: pointer;
    border-radius: 4px;
	font-size: small;
	padding: 1%;
    text-align: center;
	transition: box-shadow 0.3s ease-in-out;
	color: #fff;
	border: none;
}

.btn-alocar-tudo{
	width: 30%;
	background-color: #203864;
}

.btn-alocar{
	width: 15%;
	background-color: #4472C4;   
}

.div-btns-titulos button:hover{
	box-shadow: 0 0 3px 1px rgb(171, 171, 171);
}

.btn-retornar-tudo{
	background-color: #203864;
	width: 30%;
}

.btn-protestar{
	background-color: #E52726;
	width: auto;
}

/* =============================== js ===============================*/
.selecionar-todos-titulos, .selecionar-todos-remessa{
	cursor: pointer;
}

/* =============================== modais ===============================*/
.modais{
	width: 80%;
	max-width: 1000px;
   	height: 80%;
	max-height: 900px;
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -100%);
	transition: transform 1 ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}


.modais-confirmacao{
	width: 80%;
    max-width: 500px;
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 5px;
    position: fixed;
    top: 50%;
    left: 50%;
	transform: translate(-50%, -100%);
	transition: transform 1 ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.modais::backdrop {
    background-color: rgba(0, 0, 0, 0.5); 
}

.modais[open] {
    transform: translate(-50%, -50%);
}

.btn-detalhes-modal-close{
	width: 5%;
	border: none;
	color: #2B2B2B;
	background-color: transparent;
}

.div-btn-fechar-modal{
	display: flex;
	justify-content: end;
	margin-top: 1%;
}

.modalContentTitulos{
	display: flex;
	border: 1px solid darkgray;
	height: 90%;
	padding: 1%;
	justify-content: space-between;
	overflow: auto;
	text-align: center;
}

.modalContentTitulos p{
	padding: 5px;
	font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

.field-conjunto{
	height: 100%;
	width: 50%;
	padding: 1%;
} 

.field-md{
	border: 1px solid #ccc;
    border-radius: 5px;
	padding: 1%;
	display: flex;
	height: 48%;
	width: 100%;
	flex-direction: column;
	overflow: auto;
}

.field-md-baixo{
	margin-top: 4%;
}

.field-md legend{
	font-size: 1em;
	font-weight: bold;
	color: #333;
}

.field-md div{
	width: 100%;
	text-align:start;
	margin-top: 2%;
}





.cs-modal-permissao-negada{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgba(65, 59, 59, 0.45);
	display: none;
}

.cs-container-permissao-negada{
	width: 40%;
	height: 40%;
	background-color: white;
	border-radius: 2%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}

.cs-container-permissao-negada img{
	width: 15%;
}


/*=======================================================================--==========================================================
========================================================== TELA DE PROTESTADOS ============================================================ 
===================================================================================================================================== */
.container-titulos-protestados{
	height: 90%;
	width: 100%;
	display: flex;
	flex-direction: column;
	padding: 2% 3% 1% 3%;
}


.filtro-busca-titulos-protestados{
	display: flex;
	justify-content: space-between;
}

.select-titulos-protestados{
	width: 30%;
}

.container-tabela-titulos-protestados{
	margin-top: 1%;
	width: 100%;
	height: 90%;
	overflow: auto;
	text-align: center;
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

.container-tabela-titulos-protestados th{
	font-size: large;
}

.container-tabela-titulos-protestados td{
	font-size: medium;
} 


.container-btns-titulos-protestos{
	width: 100%;
	max-height: 10%;
	display: flex;
	margin-top: 1%;
}

.container-btns-titulos-protestos button{
	padding: 5px;
	border: 1px solid black;

}

.container-btns-titulos-protestos *{
	height: 100%;
}

.container-btns-desistencia{
	display: flex;
	justify-content: end;
	width: 50%;
}

.container-btns-desistencia button{
	background-color: #E94D4D;
	color: #fff;
}

.container-btn-voltar{
	width: 50%;
}

#btn_autorizar_cancelamento{
	margin-right: 10%;
}

#btn-voltar{
	width: 30%;
	background-color: #4472C4;
	color: #fff;
	border-radius: 3%;
}


/*=======================================================================--==========================================================
========================================================== TELA DE LOGIN ============================================================ 
===================================================================================================================================== */

.container-login{
	width: 100%;
	height: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}


.login-parte-interna {
	width: 60%;
	height: 40%;
	display: flex;
	align-items: center;
	border-radius: 5px;
	/* border: 4px solid transparent; */
	background-color:white;
}


.login-logo{
	/* background-color: #484848; */
	background-image: radial-gradient(circle, #B1C5E6, #527DC8, #27467B);
	background-size: 400% 400%;
	animation: logo-animation 10s ease infinite;

	width: 50%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.login-div-form{
	width: 50%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.login-div-form form{
	width: 100%;
	height: 70%;
}

.login-div-form input:focus {
	outline: none;
	background-color:  rgb(232, 232, 232);
  }
  

.login-div-h4{
	margin: 0 auto;
	height: 30%;
	padding-top: 5%;
	display: flex;
	align-items: center;
}


.login-div-h4 h4{
	font-family: sans-serif;
	font-size: 25px;
	color: #333333cc;	
	
}


.login-div-form span{
	display: flex;
	justify-content: space-between;
	padding: 2%;
}

.login-div-form span input{
	border: black solid 1px;
	border-radius: 1%;
	background-color: rgb(242, 242, 242);
	width: 90%;
	padding: 1%;
}

.login-div-form span i{
	margin-left: 5%;
	padding-top: 2%;
	padding-left: 2%;
	background-color: lightgray;
	width: 7%;
	
}

.div-btn-logar{
	display: flex;
	justify-content: space-between;
	margin-left: 5%;
	padding: 2%;
}

.div-btn-logar button{
	padding: 2px;
	width: 25%;
	border: #D3D3D3 solid 1px;
	background-color: #428BCA;
	border-radius: 3px;
	color: white;
}



.circunferencia-logo{
	background-image: radial-gradient(circle, #B1C5E6, #527DC8, #27467B);
	background-size: 400% 400%;
	animation: logo-animation 10s ease infinite;
	height: 85%;
	width: 60%;
	border-radius: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

  @keyframes logo-animation {
	0% {
	  background-position: 100% 0%;
		}
		50% {
	  background-position: 0% 100%;
	}
	100% {
	  background-position: 100% 0%;
	}
  } 

.circunferencia-logo img{
	width: 90%;
}

.login-logo img{
	width: 60%;
}



/*=======================================================================--==========================================================
========================================================== TELA DE LOADING ============================================================ 
===================================================================================================================================== */
.tela-loading{
	height: 100%;
	background-color: rgba(65, 59, 59, 0.45);
	width: 100%;
	position: absolute;
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.tela-loading h1{
	font-family: sans-serif;
	font-size: 50px;
	color: white;
	opacity: 0;
	animation: 2s fadeIN ease-in-out infinite;
}

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

}

.progress-bar {
    width: 20%;
    height: 20px;
    border-radius: 10px;
	background-color:#CECECE ;
}

.progress {
    width: 0%;
    height: 100%;
    animation: load 8s infinite;
	background-color: white;
} 

@keyframes load {
    0% { width: 0%; }
    50% { width: 50%; }
    100% { width: 100%; }
}



/*=======================================================================--==========================================================
========================================================== MODAL DE CONFIRMACAO ===================================================== 
===================================================================================================================================== */

.md-dialog-confirmar{
	width: 100%;
	height: 100%;
	background: var(--modal-fundo);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 9999;
}


.md-confirmar-div-container{
	width: 30%;
	height: 30%;
	padding: 1%;
	border: rgb(15, 56, 218) 2px solid;
	box-shadow: 0 0 8px 1px rgba(255, 255, 255, 0.8); 
	border-radius: 1%;
	background-color: var(--fundo-branco-suave);
}



.md-confirmar-div-content{
	height: 85%;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.md-confirmar-div-titulo-icon{
    display: flex;
	justify-content: center;
	width: 100%;
}

.md-confirmar-div-titulo-icon h2{
	width: 75%;
	padding-left: 6%;
	padding-top: 3%;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	color:var(--azul-escuro-header);
}

.md-confirmar-div-icon{
	width: 25%;
	padding-left: 3%;
}

.md-confirmar-div-titulo-icon div i{
	color: #d80606be;
	font-size: 60px;
}

.md-confirmar-div-content p{
	font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
	font-size: large;
	padding-top: 5%;
	text-align: center;
}

.md-confirmar-div-btns{
	display: flex;
	justify-content: space-between;
}

.md-confirmar-div-btns button{
	padding: 1.3%;
	cursor:pointer;
	border: solid var(--azul-escuro-header) 1px;
	border-radius: 5%;
	color: white;
}

.btn-md-confirmar-cancelar{
	background-color: var(--vermelho-cancelar);
	width: 25%;
}

.btn-md-confirmar-confirmar{
	width: 35%;
	background-color: var(--verde-bootstrap);
}

.btn-md-confirmar-confirmar:hover{
	background-color: var(--azul-escuro-header);
	transition: 2s;
}

.btn-md-confirmar-cancelar:hover{
	background-color: rgb(77, 1, 1);
	transition: 2s;
}