*{
    margin:0;
    padding:0;
}

body {
    background: rgb(255, 255, 255);
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(237, 241, 247, 1) 55%, rgba(237, 241, 247, 1) 100%);
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
    font-family: 'Titillium Web';
}

::-webkit-scrollbar {
    display: none;
}

.navportal{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin:10px 0 0 0;
    padding:0 20px;
}

.navportal .logorecovery{
    width:125px;
    padding-right:10px;
    border-right:1px solid #aaa
}

.navportal .logoitau{
    width:38px;
}

.navportal .logointervalor{
    width:100px;
}

.navportal .txtnav{
    margin:0 10px;
    padding:0;
    font-weight:bold;
    font-size:18px
}

#loading{
    display:none;
    background-color:rgba(255,255,255,0.7);
    position:fixed;
    top:0px;
    left:0;
    width:100%;
    height:100%;
    z-index:100000;
}

.loader {
    border: 5px solid rgba(255, 255, 255, 0.0);
    border-radius: 50%;
    border-top: 5px solid #264d7d;
    width: 130px;
    height: 130px;
    -webkit-animation: spin 0.7s linear infinite;
    animation: spin 0.7s linear infinite;
    margin-top:200px;
}


@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.divTransitionHome {
    -webkit-animation: fadeEffect 2s;
    animation: fadeEffect 2s;
}

/* Fade in tabs */
@-webkit-keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.titulo{
    color:#6a6f7a;
    font-size:24px;
    font-weight:bold;
    text-align:center;
    margin:100px 0 0;
    padding:0;
}

.subTitulo{
    color:#6a6f7a;
    font-size:20px;
    text-align:center;
    margin:0;
    padding:0;
}

#containerBox {
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(4, 1fr); /* 4 colunas */
    justify-content: center; /* Centraliza os itens */
    place-items: center;
    width:600px;
    margin-top:50px;
}

.box {
    cursor: pointer;
    width: 120px;
    height: 120px;
    box-shadow: 0px 2px 20px #dce4ef;
    border-radius: 10px;
    transition: 1s;
    background-color: #ccc;
    background-image: linear-gradient(to top, #fff, #fff);
    padding-top:25px;
}

.box-inativo {
    cursor: no-drop;
    width: 120px;
    height: 120px;
    box-shadow: 0px 2px 20px #dce4ef;
    border-radius: 10px;
    transition: 1s;
    background-color: #ccc;
    background-image: linear-gradient(to top, #fff, #fff);
    padding-top:25px;
    opacity:0.4
}

.box img,
.box-inativo img{
    height:40px;
}

.box .img2,
.box-inativo .img2{
    display:none;
}

.box:hover {
    width: 120px;
    height: 120px;
    border-radius: 0.3em;
    background-image: linear-gradient(139deg, rgba(1, 162, 173, 1) 0%, rgba(52, 48, 127, 1) 94%);
    transition: visibility 0.3s linear, opacity 0.5s ease-out;
    color:white;
}

.box:hover .img1{
    display:none;
}

.box:hover .img2{
    display:block;
}

.box p,
.box-inativo p{
    position: relative;
    z-index: 3;
    font-size:14px
}

#consultarCliente{
    width:300px;
    max-width:95%;
    margin:30px auto 0;
}

#consultarCliente .txtForm{
    font-size:16px;
    font-weight:bold;
    text-align:center;
    margin:0;
    padding:0;
    color:#6a6f7a;
}

#consultarCliente #documento{
    margin-top:5px;
}

#sendConsultarCliente{
    width: 100%;
    height: 40px;
    font-size: 16px;
    background-color: #2cc461;
    border-color: none;
    border:none;
    font-weight:bold;
    color:white;
    border-radius:8px;
    margin-top:20px;
}

#sendEnviarToken{
    width: 250px;
    height: 40px;
    font-size: 16px;
    background-color: #2cc461;
    border-color: none;
    border:none;
    font-weight:bold;
    color:white;
    border-radius:8px;
    display:block;
    margin:20px auto 0 auto;
}

#sendValidarToken{
    width: 250px;
    height: 40px;
    font-size: 16px;
    background-color: #2cc461;
    border-color: none;
    border:none;
    font-weight:bold;
    color:white;
    border-radius:8px;
    display:block;
    margin:20px auto 0 auto;
}

#erroConsulta,
#erroTokenInvalido,
#erroToken{
    margin-top:20px;
    width:100%;
    text-align:center;
    background-color:#fa9893;
    padding:5px 0;
    color:#d6140a;
    display:none;
}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    top: 0%;
    left: 0%;
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
    cursor:default;
}

/* Modal Content/Box TODAS IMAGENS */
.modal-content {
    background-color: #FFF;
    color: #616161;
    width: 450px;
    max-width:95%;
    padding: 20px;
    border-radius: 25px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.inputNum{
    text-align: center;
    border: 1px solid grey;
    border-radius: 5px;
    font-size:18px;
    width:30px;
    margin-right:10px;
    height:40px
}

#confirmaFinalTel{
    font-size:18px;
}

input[type=number]::-webkit-inner-spin-button { 
	-webkit-appearance: none;			
}

input[type=number] { 
	-moz-appearance: textfield;
	appearance: textfield;
}

.conteudoNegociacao{
    width:80%;
    margin:0 auto;
}

.modal-content-negociacao {
    background-color: #FFF;
    color: #616161;
    width: 500px;
    max-width:95%;
    border-radius: 10px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0px 0px 12px #0061b780;
    max-height:98%;
    overflow:auto
}

.modal-content-negociacao::-webkit-scrollbar {
    display: none;
}

#divAddEmailAcordo,
#addTelAcordo{
    margin-top:-10px;
}

#snackbar {
	visibility: hidden;
	min-width: 250px;
	margin-left: -125px;
	background-color: #008000;
	color: #fff;
	text-align: center;
	border-radius: 2px;
	padding: 16px;
	position: fixed;
	z-index: 300000;
	left: 50%;
	bottom: 30px;
	font-size: 17px;
}

#snackbar.show {
	visibility: visible;
	-webkit-animation: fadein 0.5s, fadeout 0.5s 10s;
	animation: fadein 0.5s, fadeout 0.5s 10s;
}

#snackbarError {
	visibility: hidden;
	min-width: 250px;
	margin-left: -125px;
	background-color: #ed4337;
	color: #fff;
	text-align: center;
	border-radius: 2px;
	padding: 16px;
	position: fixed;
	z-index: 300000;
	left: 50%;
	bottom: 30px;
	font-size: 17px;
}

#snackbarError.show {
	visibility: visible;
	-webkit-animation: fadein 0.5s, fadeout 0.5s 10s;
	animation: fadein 0.5s, fadeout 0.5s 10s;
}

@-webkit-keyframes fadein {
	from {
		bottom: 0;
		opacity: 0;
	}

	to {
		bottom: 30px;
		opacity: 1;
	}
}

@keyframes fadein {
	from {
		bottom: 0;
		opacity: 0;
	}

	to {
		bottom: 30px;
		opacity: 1;
	}
}

@-webkit-keyframes fadeout {
	from {
		bottom: 30px;
		opacity: 1;
	}

	to {
		bottom: 0;
		opacity: 0;
	}
}

@keyframes fadeout {
	from {
		bottom: 30px;
		opacity: 1;
	}

	to {
		bottom: 0;
		opacity: 0;
	}
}

@media (max-width: 1110px) {
    .conteudoNegociacao{
        width:95%;
        margin:0 auto;
    }
}

@media (max-width: 830px) {
    .divTabela{
        overflow:auto;
    }
}

@media (max-width: 570px) {
    #containerBox {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas por linha */
        width:50%;
        gap:20px;
    }

    .navportal{
        display:block;
        width:100%;
    }

    .navportal div{
        width:100%;
        justify-content: center;
    }

    .navportal .logointervalor{
        display:block;
        margin:10px auto 0;
    }

    .titulo{
        margin-top:50px;
    }

    .box{
        margin-top:10px;
    }
}

@media (max-width: 200px) {
    #containerBox {
        grid-template-columns: repeat(1, 1fr); /* 1 coluna por linha */
    }
}