body{
    font-family: 'Inter';
    padding: 0;
    margin: 0;
}

:root{
    --preto: #000;
    --branco: #fff;
    --cinza: #d0d0d0;
    --cinza-claro: #fdfdfd;
    --grafite: #3c3c3c;
    --laranja: #ff9900;
    --vermelho: #ff0000;
    --azul: #1967DA;
    --azul-escuro: #00004e;
    --verde: #00FF00;
    --verde-escuro: #0dcc0d;
    --verde-claro: #d8fdd8;
    --vermelho-claro: #fdd8d8;
}

::-webkit-scrollbar{
    height: 8px;
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #9494943e;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #757575;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}

h1{
    font-size: 2em;
    font-weight: bold;
}

.btn-ativo{
    border: none;
    background-color: var(--cinza);
    padding: 3px 15px;
    border-radius: 8px;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 700;
    transition: .3s;
}

.btn-ativo:hover{
    background-color: var(--laranja);
}

.btn-reset{
    border: none;
    background-color: var(--branco);
    cursor: pointer;
    transition: .3s;
}

.btn-reset:hover{
    color: var(--laranja);
}

.btn-disable{
    cursor: default;
}

.btn-img{
    font-size: .7em;
    width: 255px;
}


input[type="password"] {
    -webkit-text-security: disc;
}


input, select, textarea{
    width: 100%;
    margin-bottom: 10px;
    font-size: .9em;
    padding: 6px 8px;
    box-sizing: border-box;
    border: none;
    border-radius: 8px;
    border: 1px solid var(--cinza);
}

input:focus, select:focus, textarea:focus{
    outline: none;
    border: 1px solid var(--laranja);
}

.radio-opcao {
    display: flex;
    padding-left: 12px;
    width: 300px;
}


.radio-opcao div{
    display: flex;
    align-items: center;
}

.radio-opcao div input{
    margin-top: 4px;
}

textarea{
    font-family: 'Inter';
}
/* PÁGINA - LOGIN */

.box-login{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

.header-login{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.header-login h1{
    font-size: 4em;
}

.header-login hr{
    margin: 0 5px 0 15px;
    height: 80px;
    border: 1px solid #000;
}

.header-login img{
    max-width: 300px;
    max-height: 300px;
    width: auto;
    height: auto;
}

form#form-login{
    width: 33%;
    padding: 20px;
    box-sizing: border-box;
    color: var(--preto);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

form#form-login input{
    border: 1px solid transparent;
    border-bottom: 1px solid var(--cinza);
    border-radius: 0;
}

form#form-login input:focus{
    outline: none;
    border: 1px solid var(--laranja);
    border-radius: 8px;
}

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



.recuperar-senha{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #0000005a;
    display: none;
    justify-content: center;
    align-items: center;
}


.box-recuperar-senha{
    background-color: var(--branco);
    box-sizing: border-box;
    padding: 20px;
    border-radius: 20px;
}

.box-recuperar-senha p{
    text-align: center;
    font-size: 1.6em;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.box-recuperar-senha input{
    margin-top: 5px;
}

.btn-rec-senha{
    display: flex;
    justify-content: space-between;
}


.alerta-senha-atualizada{
    position: absolute;
    top: -40px;
    left: 45%;
    display: flex;
    align-items: center;
    background-color: #008000;
    color: var(--branco);
    padding: 10px ;
    box-sizing: border-box;
    border-radius: 20px;
    transition: .3s;
}

.alerta-senha-atualizada p{
    margin: 0;
}

.alerta-senha-atualizada i{
    margin-right: 10px;
}

/* PAGINA INICIAL */
.pagina-inicial{
    display: flex;
    width: 100%;
}

header{
    max-width: 15%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-content: center;
    background-color: var(--cinza-claro);
    border: 1px solid var(--cinza);
    z-index: 10;
}

#menu-mobile{
    position: absolute;
    left: 5px;
    top: 5px;
    font-size: 2em;
    display: none;
}

#logo-menu-lateral{
    display: block;
}

.nav-principal img{
    max-width: 230px;
    max-height: 200px;
    width: auto;
    height: auto;
    margin-bottom: 20px;
}

.nav-principal hr{
    margin-top: 10px;
    margin-bottom: 10px;
    width: 95%;
    border: 1px solid var(--cinza);
}

.nav-links{
    display: flex;
    flex-direction: column;
    width: 100%;
}

.nav-links a{
    text-decoration: none;
    color: var(--preto);
    font-weight: 600;
    text-transform: uppercase;
    margin: 3px 0 3px 13px;
    box-sizing: border-box;
    transition: .3s;
    font-size: 1em;
}

.nav-links a:hover{
    color: var(--laranja);
}

.nav-links i{
    min-width: 25px;
}

.links-usuario, .links-processos, .links-externo{
    display: flex;
    flex-direction: column;
}

.modal-nova-solicitcao{
    display: none;
}

.box-logout{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: absolute;
    bottom: 30px;
    width: 12.5%;
}


.box-logout button{
    margin-top: 10px;
    width: 80%;
}


.box-info-login{
    width: 100%;
    text-align: center;
    font-size: .9em;
}

.box-info-login #campo-nome-perfil{
    font-weight: 700;
}


/*  */

.body-home{
    padding: 40px;
    padding-left: 60px;
    box-sizing: border-box;
    width: 100%;
}

.premiacao{
    display: flex;
    flex-direction: column;
    padding: 10px;
    box-sizing: border-box;
}

.premiacao h4{
    margin: 0;
    margin-bottom: 10px;
    text-align: center;
}


.premiacao .card-bonus-va{
    width: 40%;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.img-bonus-va {
    max-width: 200px;
    max-height: 200px;
    border-radius: 20px;
    transition: transform 0.3s ease;
    transform-origin: center;
    display: block;
    margin: 0 auto;
}

.img-bonus-va:hover {
    transform: scale(1.5);
    z-index: 10;
}

.premiacao .card-bonus-va .card-img-bonus-va div{
    display: flex;
}

.premiacao .card-bonus-va .card-img-bonus-va img{
    margin-right: 10px;
}


.premiacao .ranking-atendimento{
    width: 100%;
    padding: 10px;
    box-sizing: border-box;

}

.premiacao h3{
    text-align: center;
    color: var(--cinza);
    font-size: 2em;
    font-weight: 600;
    margin: 10px 0;
}

.premiacao .tabelas-ranking{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

.premiacao table{
    width: 97%;
    text-align: center;
}

.premiacao table img{
    width: 30px;
}

.titulo-premiacao{
    display: flex;
}

.box-tabela-ranking-semanal, .box-tabela-ranking-mensal, .box-tabela-ranking-anual{
    width: 375px;
    min-width: 300px;
}

.premiacao .box-tabela-ranking-semanal table thead{
    background-color: var(--vermelho);
    color: var(--branco);
    font-weight: 600;  
}

.premiacao table thead tr th{
    width: 250px;
    height: 30px;
}


.premiacao table thead tr th:last-child{
    width: 150px;
}

.premiacao table thead tr th:first-child{
    width: 20px;
    border-radius: 10px 0 0 0;
}

.premiacao table thead tr th:last-child{
    border-radius: 0 10px 0 0;
}

.premiacao table tbody tr td{
    height: 50px;
}

.premiacao table tbody tr:hover{
    transition: .3s;
    background-color: var(--cinza);
}


.premiacao .box-tabela-ranking-mensal table thead{
    background-color: var(--laranja);
    color: var(--branco);
    font-weight: 600;
}


.subtitulo-ranking{
    display: flex;
    justify-content: center;
}

.mes-atual, .ano-atual, .mes-bonus-va, .semana-atual{
    text-transform: capitalize;
    color: var(--cinza);
    font-weight: 700;
    margin-left: 10px;
}


#aviso-ranking{
    color: var(--preto);
    font-size: .6em;
    font-weight: 500;
    margin-top: 5px;
}


.premiacao .box-tabela-ranking-anual table thead{
    background-color: var(--azul);
    color: var(--branco);
    font-weight: 600;
}


.td-img-ranking{
    width: 70px;
    text-align: right;
}


/* MASSIVAS */

.body-massivas{
    padding: 40px;
    padding-left: 60px;
    box-sizing: border-box;
    width: 100%;
}

form#massivas-form{
    width: 40%;
}

.body-massivas h1{
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 1.7em;
}

.titulo-massiva{
    display: flex;
    align-items: center;
}



.body-massivas .informar-massiva{
    display: none;
    flex-direction: column;
}


.btn-adicionar-gpon{
    display: none;
    margin-bottom: 5px;
}

.box-btns-massiva{
    display: none;
    flex-direction: column;
}

.box-btns-massiva button{
    width: 12%;
    margin-bottom: 8px;
}

.atualizar-massiva-ativa, .encerrar-massiva-ativa{
    display: none;
    width: 40%;
}

.fa-trash{
    color: #737373;
    cursor: pointer;
    transition: .3s;
}

.fa-trash:hover{
    color: #ff0000;
}

form#massivas-form button{
    width: 32%;
}

#select-rota select{
    width: 95%;
    margin-right: 5px;
}

#select-rota{
    display: none;
    flex-direction: column;
    margin-bottom: 5px;
}

.btn-select-rota{
    margin-bottom: 5px;
}


.alerta-massiva-enviada,
.alerta-massiva-atualizada,
.alerta-massiva-encerrada{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00000029;
    width: 100%;
    height: 100vh;
    z-index: 10;
}

/* .alerta-massiva-enviada{
    display: none;
}

.alerta-massiva-atualizada{
    display: none;
}

.alerta-massiva-encerrada{
    display: none;
} */

.alerta-massiva-enviada .box-alerta i{
    color: #ff0000;
}

.alerta-massiva-atualizada .box-alerta i{
    color: #e5ff00;
}

.alerta-massiva-encerrada .box-alerta i{
    color: #00FF00;
}


.box-alerta{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--branco);
    padding: 50px;
    box-sizing: border-box;
    border-radius: 10px;
    box-shadow: 5px 5px 10px #0000003a;
    font-size: 2em;
}

.box-alerta span{
    margin-top: 15px;
    font-size: .5em;
}

.box-alerta div{
    display: flex;
}

.box-alerta i{
    margin-right: 10px;
}

.box-massivas-ativas{
    display: none;
}

.box-massivas-ativas h2{
    color: var(--cinza);
    font-weight: 700;
    font-size: 1.3em;
}

.tabela-massivas-ativas table{
    width: 100%;
    margin: 5px 0 15px 0;
}

.tabela-massivas-ativas table thead tr{
    font-size: .7em;
    height: 30px;
    background-color: var(--cinza);
}

.tabela-massivas-ativas table thead th:first-child{
    border-radius: 10px 0 0 0;
 }


.tabela-massivas-ativas table thead th:last-child{
    border-radius: 0 10px 0 0;
}

.tabela-massivas-ativas table tbody td{
    height: 30px;
    max-width: 150px;
    white-space: nowrap;
    font-size: .7em;
    text-align: center;
    border-bottom: 1px solid var(--cinza);
    overflow-x: auto;
    overflow-y: auto;
}

.tabela-massivas-ativas table tbody td:first-child{
    border-left: 1px solid var(--cinza);
}

.tabela-massivas-ativas table tbody td:last-child{
    border-right: 1px solid var(--cinza);
}

.tabela-massivas-ativas table tbody td.td-ponto-acesso{
    text-align: left;
}

.tabela-massivas-ativas table ::-webkit-scrollbar{
    height: 4px;
    width: 4px;
    color: var(--laranja);
}

.tabela-massivas-ativas table ::-webkit-scrollbar-thumb {
    background-color: var(--laranja);
    border-radius: 5px;
}


#edit-massiva{
    margin-right: 10px;
    cursor: pointer;
    transition: .3s;
}

#edit-massiva:hover{
    color: var(--laranja);
}


.box-editar-massiva{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    z-index: 20;
    background-color: #00000089;
    justify-content: center;
    align-items: center;
}

.box-editar-massiva form{
    background-color: var(--branco);
    width: 40%;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 20px;
}


.box-editar-massiva form input{
    margin-top: 5px;
}


.box-editar-massiva form h3{
    color: var(--cinza);
    font-size: 1.4em;
    margin-bottom: 8px;
}

#box-btn-editar-massiva{
    display: flex;
    justify-content: space-between;
}


#box-enviar-notificao{
    display: flex;
    margin-bottom: 10px;
}

#box-enviar-notificao p{
    margin: 0;
}

#box-enviar-notificao input[type="checkbox"]{
    margin: 0;
    width: 30px;
}


.box-portas-massiva div{
    display: flex;
    justify-content: left;
    margin-bottom: 3px;
    width: 100%;
}

.box-portas-massiva label{
    display: flex;
    font-size: .8em;
    width: 50px;
}


.box-portas-massiva input[type="checkbox"]{
    margin: 0;
    margin-right: 3px;
    width: 20px;
}

.box-portas-massiva p{
    margin-bottom: 10px;
    color: var(--cinza);
}

/* BATIDA DE CTO */

.body-cto{
    padding: 40px;
    padding-left: 60px;
    box-sizing: border-box;
    width: 100%;
}

.body-cto h1{
    font-weight: 700;
    font-size: 1.7em;
    margin-bottom: 10px;
}

.body-cto h3{
    color: var(--cinza);
    font-size: 2em;
    margin-top: 15px;
    margin-bottom: 15px;
}

.titulo-cto{
    display: flex;
    align-items: center;
}

#p-cto{
    margin-left: 10px;
    margin-bottom: 5px;
    border-radius: 10px;
    padding: 5px 10px;
    font-weight: 500;
}

.body-cto #modo-cto{
    width: 30%;
}

.body-cto .cabecalho-form-cto{ 
    width: 90%;
    display: flex;
}

.cto-sos, .cto-sn{
    display: flex;
    align-items: center;
    width: 15%;
    margin-bottom: 10px;
}

.cto-sos p, .cto-sn p{
    font-size: .7em;
}

.info-cto{
    display: flex;
    flex-direction: column;
}

.info-cto input, .info-cto select{
    width: 42%;
}

.info-cto input[type="checkbox"]{
    margin: 0;
    height: 15px;
}


.info-cto p, .info-cto p{
    margin: 0;
}

.cto1x8, .cto1x16{
    display: none;
    flex-direction: column;
    width: 54%;
    margin: 10px 0;
}

.cto1x16{
    overflow-x: auto;
    max-height: 374px;
    padding-right: 5px;
    box-sizing: border-box;
}

.cto1x16 textarea{
    min-height: 50px;
}


#p-cto{
    margin-left: 10px;
    margin-bottom: 5px;
    border-radius: 10px;
    padding: 5px 10px;
    font-weight: 500;
    text-transform: uppercase;
}

.info-cto{
    display: none;
    margin-top: 5px;
    width: 60%;
}


.info-cto .info-os-tecnico, .info-cto .info-os-cto, .info-cto .info-olt-cto{
    display: flex;
    gap: 5px;
}

.info-olt-cto select{
    width: 33%;
}

.cto-registrada table tr#info-cto td{
    vertical-align: middle;
    text-align: center;
    height: 30px;
}

.cto-registrada table tr.btns-info-cto td{
    height: 30px;
    vertical-align: middle;
}

#btn-enviar-cto{
    display: none;
    margin-bottom: 10px;
}

/* REGISTRO DE CTOS */

.body-registro-cto{
    padding: 40px;
    padding-left: 60px;
    box-sizing: border-box;
    width: 100%;
}

.head-body-registro-cto{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.head-body-registro-cto h1{
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 1.7em;
}

.icon-search{
    display: flex;
    align-items: center;
}

.icon-search i{
    position: relative;
    right: 20px;
    color: var(--cinza);
}

.icon-search input{
    border: 1px solid transparent;
    padding: 5px;
    padding: 5px 23px 5px 5px;
}

.icon-search input:focus{
    outline: none;
    text-align: start;
    border-bottom: 1px solid var(--laranja);
}

.cto-registrada:first-child{
    margin-top: 20px;
}

.ctos-registradas{
    overflow-y: auto;
    max-height: 600px;
    display: flex;
    flex-direction: column;
    padding-right: 5px;
    box-sizing: border-box;
}

.cto-registrada{
    margin-bottom: 5px;
}

.titulo-cto-registrada{
    display: flex;
    align-items: center;
    align-content: center;
}

.titulo-cto-registrada h2{
    font-size: 1.3em;
    font-weight: 600;
    margin-right: 7px;
    min-width: 105px;
}

i.fa-arrow-up-long{
    display: none;
    cursor: pointer;
}

i.fa-arrow-down{
    cursor: pointer;
}

i.fa-arrow-up-long:hover, i.fa-arrow-down:hover{
    transition: .3s;
    color: var(--laranja);
}

.cto-registrada .endereco-cto{
    font-weight: 600;
    color: #737373;
    margin-bottom: 5px;
    display: none;
}

.cto-registrada tbody{
    border: 1px solid var(--cinza);
    display: none;
}

.cto-registrada table{
    width: 100%;
}

.cto-registrada tr.cabecalho-cto-registrada th{
    height: 25px;
    vertical-align: middle;
    width: 280px;
    font-weight: 700;
    color: #737373;
    background-color: #f6f6f6;
}

.cto-registrada td.btn-ver-clientes{
    color: #737373;
    text-align: left;
    position: relative;
    left: 5px;
    font-size: .8em;
    text-decoration: underline;
    cursor: pointer;
}

.cto-registrada td.btn-esconder-clientes{
    color: #737373;
    position: relative;
    left: 5px;
    font-size: .8em;
    text-decoration: underline;
    cursor: pointer;
    display: none;
}

.portas-pon{
    display: none;
    flex-direction: column;
    text-align: left;
}

.portas-pon th{
    margin-left: 5px;
    margin-bottom: 5px;
}


/* NOVO SURVEY */

.bg-novo-survey{
    width: 80%;
    padding: 30px 30px;
}

.bg-novo-survey h1{
    font-size: 2.5em;
    color: #000;
    font-weight: 700;
    margin-bottom: 40px;
}

.bg-novo-survey #form-novo-survey{
    display: flex;
    flex-direction: column;
    width: 40%;
}

.bg-novo-survey #form-novo-survey input{
    margin-bottom: 10px;
    padding: 6px 8px;
    border: none;
    border-radius: 8px;
    border: 1px solid var(--cinza);
}

.bg-novo-survey #form-novo-survey input[type="file"]{
    font-size: .8em;
}

.bg-novo-survey #form-novo-survey #enviar-survey{
    cursor: pointer;
    background-color: #d5d5d5;
    border: none;
    border-radius: 10px;
    color: #000000;
    font-weight: 600;
    padding: 5px;
    cursor: pointer;
    transition: .3s;
}

.bg-novo-survey #form-novo-survey #enviar-survey:hover{
    background-color: #a5a5a5;
}


.bg-novo-survey #form-novo-survey #reset{
    background-color: transparent;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    color: #a5a5a5;
    transition: .3s;
}

.bg-novo-survey #form-novo-survey #reset:hover{
    color: #000;
}

/* SURVEY ENVIADO */

.box-msg-enviada{
    color: #000;
    background: rgb(255,62,1);
    background: linear-gradient(90deg, rgba(255,62,1,1) 0%, rgba(249,209,1,1) 100%);
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.box-conteudo-msg{
    background-color: #fff;
    width: 70%;
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    box-shadow: 5px 5px 10px #434343b8;
}

.titulo-msg{
    display: flex;
    align-items: center ;
}

.titulo-msg h1{
    font-size: 4.5em;
}

.titulo-msg img{
    max-width: 200px;
    max-height: 200px;
    width: auto;
    height: auto;
}



.cto1x16 textarea{
    height: 100px;
}

.cabecalho-telefonia th{
    background-color: #f6f6f6;
    font-weight: 700;
    height: 25px;
    vertical-align: middle;
}

tr.linha-telefonia td{
    height: 45px;
    overflow-x: auto;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    max-width: 250px;
}

.cabecalho-telefonia th, tr.linha-telefonia td{
    width: 250px;
}

.cabecalho-telefonia th:last-child, tr.linha-telefonia td:last-child{
    width: 60px;
}

.edit-numero-ativo{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #0000009a;
    justify-content: center;
    align-items: center;
}

.edit-numero-ativo form{
    background-color: #fff;
    display: flex;
    flex-direction: column;
    width: 30%;
    padding: 50px 30px;
    border-radius: 20px;
}

.edit-numero-ativo .fechar-modal{
    background-color: #ff0000;
    color: #fff;
    height: 20px;
    width: 20px;
    text-align: center;
    vertical-align: middle;
    border-radius: 50%;
    padding: 5px;
    font-weight: 800;
    position: relative;
    top: -140px;
    left: 35px;
    cursor: pointer;
    transition: .3s;
}

.edit-numero-ativo .fechar-modal:hover{
    background-color: #d30000;
}

.salvar-num-ativo{
    width: 30%;
    margin-top: 15px;
    background-color: var(--cinza);
    color: var(--preto);
    transition: .3s;
    border: none;
    margin: 0 auto;
    padding: 5px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
}

.salvar-num-ativo:hover{
    background-color: #939393;
}



/* MUDANÇA DE TITULARIDADE */

.mudanca-titularidade, .reativacao, .upgrade, .ativacao-apps{
    display: none;
    flex-direction: column;
    width: 34.7%;
    margin-bottom: 5px;
}

.apps-selecionados{
    display: flex;
    margin: 5px;
}

form#nova-solicitacao input{
    border: 1px solid var(--cinza);
    border-radius: 6px;
    padding: 5px;
    margin-bottom: 5px;
}

form#nova-solicitacao .check-telefonia-mudanca-titularidade{
    display: flex;
    margin: 5px 0;
}

.mensagem-setor{
    font-size: 1.3em;
    color: #939393;
    font-weight: 600;
}

.warning-text{
    font-weight: 700; color: #f00000;
}


/* PÁGINA - ATENDIMENTO NOC */

.body-atendimento-noc{
    padding: 40px;
    padding-left: 60px;
    box-sizing: border-box;
    width: 100%;
}


.body-atendimento-noc h1{
    margin-bottom: 30px;
}

.body-atendimento-noc p{
    margin: 10px 0;
}


input[type="radio"]{
    width: 20px;
    margin: 0;
}

#atendimento-noc, .resolvido-sim, .resolvido-nao{
    flex-direction: column;
    width: 50%;
}

.resolvido-sim textarea, .resolvido-nao textarea{
    width: 610px;
    height: 150px;
}

#processo{
    display: none;
}

.data-processo{
    display: none;
}

.processo-alias-name-u2000, .atendimento-whatsapp, .atendimento-tecnico, .processo-controle-qualidade, .processo-troca-eqp, .verificacao-porta-pon, .processo-cadastro-int6{
    display: none;
    flex-direction: column;
    margin-top: 5px;
}

.atendimento-tecnico input:first-child{
    margin-top: 12px;
}

.atendimento-tecnico select{
    margin-bottom: -8px;
}

.atendimento-cliente{
    flex-direction: column;
}

#sinal-degradado{
    margin-top: 5px;
}

#sinais-porta-pon{
    display: none;
}



#atendimento-enviado{
    display: flex;
    align-items: center;
    background-color: #008000;
    color: var(--branco);
    font-size: .7em;
    padding: 1px 5px;
    box-sizing: border-box;
    border-radius: 20px;
}

#atendimento-enviado i{
    margin-right: 3px;
}

.box-btn-processo-default{
    display: flex;
    align-items: center;
}


#campo-vazio{
    color: var(--vermelho);
    margin: 0;
    margin-left: 5px;
    display: none;
}

#retorno-enviando{
    margin: 0;
    margin-left: 5px;
}

#atendimento-enviado i{
    margin-right: 3px;
}

.processo-controle-qualidade input, .processo-controle-qualidade select{
    margin-top: 5px;
}

.opcao-controle-qualidade{
    border: 1px solid var(--cinza);
}

.processo-controle-qualidade fieldset{
    border: 1px solid var(--cinza);
    border-radius: 7px;
    margin-bottom: 5px;
}

.processo-controle-qualidade legend{
    margin-left: 10px;
    padding: 5px;
    box-sizing: border-box;
}

.box-numero-atendimento{
    display: none;
}

.box-numero-atendimento h2{
    font-size: 1.5em;
    font-weight: 600;
    color: var(--cinza);
    margin-bottom: 5px;
}

.box-numero-atendimento select{
    width: 24%;
}

.box-tabela-atendimento table{
    text-align: center;
    font-size: .8em;
    margin: 5px 0 15px 0;
    width: 100%;
}

.box-tabela-atendimento table thead th{
    height: 25px;
    background-color: var(--cinza);
    width: 90px;
}

.box-tabela-atendimento table thead th:first-child{
    border-radius: 10px 0 0 0;
}

.box-tabela-atendimento table thead th:last-child{
    border-radius: 0 10px 0 0;
}


.box-tabela-atendimento table tbody td{
    height: 25px;
    border-bottom: 1px solid var(--cinza);
    
}

.box-tabela-atendimento table tbody td:first-child{
    border-left: 1px solid var(--cinza);
}

.box-tabela-atendimento table tbody td:last-child{
    border-right: 1px solid var(--cinza);
}

/* MEDALHAS */

.body-medalhas{
    display: flex;
    flex-direction: column;
    padding: 40px;
    padding-left: 60px;
    box-sizing: border-box;
}

.body-medalhas h1{
    margin-bottom: 30px;
    color: var(--cinza);
}

.quadro-medalhas{
    margin-bottom: 20px;
}

.titulo-medalhas{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.titulo-medalhas i{
    color: var(--cinza);
    font-weight: 600;
    margin-left: 5px;
    margin-top: 5px;
    cursor: pointer;
}

.informacao{
    width: 140px;
    font-size: .6em;
    background-color: var(--cinza);
    padding: 3px;
    border-radius: 5px;
    position: relative;
    left: 2px;
}

.body-medalhas h2{
    font-weight: 700;
    font-size: 1.2em;

}

.quadro-medalhas table{
    text-align: center;
}


.quadro-medalhas table thead tr{
    background-color: var(--preto);
    color: var(--branco);
    font-weight: 700;
    height: 25px;
}

.quadro-medalhas table tbody tr:hover{
    transition: .3s;
    background-color: var(--cinza);
}

.quadro-medalhas table thead tr th:first-child{
    border-radius: 10px 0 0 0;
}


.quadro-medalhas table thead tr th:last-child{
    border-radius: 0 10px 0 0;
}


.quadro-medalhas table thead tr th{
    width: 80px;
}

.quadro-medalhas table thead tr th:first-child{
    width: 120px;
}


.quadro-medalhas table tbody td{
    height: 25px;
}

.tabela-ranking-mensais{
    text-align: center;
}


.rankings-mensal{
    max-height: 400px;
    overflow: auto;
    padding-right: 3px;
    margin-top: 3px;
    box-sizing: border-box;
}


.tabela-ranking-mensais{
    margin-bottom: 10px;
}

.tabela-ranking-mensais thead tr th{
    width: 80px;
    background-color: var(--preto);
    color: var(--branco);
}

.tabela-ranking-mensais thead tr th{
    width: 200px;
    height: 25px;
}

.tabela-ranking-mensais thead tr th:first-child{
    width: 60px;
}

.tabela-ranking-mensais tbody tr:hover{
    transition: .3s;
    background-color: #f3f3f3;
}

.tabela-ranking-mensais thead tr th:first-child{
    border-radius: 10px 0 0 0;
}


.tabela-ranking-mensais thead tr th:last-child{
    border-radius: 0 10px 0 0;
}

.tabela-ranking-mensais tbody td{
    height: 25px;
}


.titulo-mes{
    font-size: .8em;
    margin-bottom: 3px;
    font-weight: 700;
    color: var(--cinza);
}




/* DEMANDAS */

.body-meus-atendimentos{
    padding: 40px;
    padding-left: 60px;
    box-sizing: border-box;
    width: 100%;
}

.demandas{
    display: flex;
    flex-direction: column;
}

.box-card-demanda{
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 15px;
}

.demandas h2{
    font-size: 1.5em;
    font-weight: 600;
    color: var(--cinza);
}


.header-demandas{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.card-demanda-diaria{
    display: flex;
    flex-direction: column;
    background-color: var(--cinza);
    padding: 15px 10px;
    box-sizing: border-box;
    border-radius: 7px;
    border: 1px solid #c7c7c7;
    transition: .3s;
    width: 250px;
    height: 140px;
}

.card-demanda-diaria:hover{
    background-color: #c7c7c7;
    border: 1px solid var(--cinza);
}

.card-demanda-diaria .etiquetas-demanda{
    display: flex;
}

.card-demanda-diaria .etiquetas-demanda p{
    font-size: .6em;
    margin-right: 5px;
}

.card-demanda-diaria .etiquetas-demanda p.etiqueta-semana{
    background-color: var(--cinza-claro);
    padding: 3px 5px;
    box-sizing: border-box;
    border-radius: 6px;
}

.card-demanda-diaria .etiquetas-demanda p.etiqueta-nivel{
    color: var(--branco);
    padding: 3px 5px;
    box-sizing: border-box;
    border-radius: 6px;
}

.card-demanda-diaria .etiquetas-demanda p.etiqueta-tipo{
    background-color: var(--preto);
    color: var(--branco);
    padding: 3px 5px;
    box-sizing: border-box;
    border-radius: 6px;
}


.card-demanda-diaria .titulo-demanda h3{
    font-size: 1em;
    font-weight: 600;
    margin: 20px 0;
    height: 20px;
}

.card-demanda-diaria .data-demanda{
    display: flex;
    font-size: .7em;
    position: relative;
}

.card-demanda-diaria .data-demanda span{
    margin: 0 3px;
}

.card-demanda-diaria .box-info-demanda{
    display: flex;
    justify-content: space-between;
    padding-right: 10px;
    box-sizing: border-box;
    margin-top: 5px;
}

.card-demanda-diaria .box-info-demanda i{
    color: var(--cinza-claro);

    transition: .3s;
}
.box-txt-info-demanda{
    position: absolute;
    width: 100%;
    height: 100vh;
    display: flex;
    top: 0;
    left: 0;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #000000b4;
}

.txt-info-demanda{
    background-color: var(--branco);
    color: var(--preto);
    font-size: .7em;
    font-family: 'Inter';
    width: 60%;
    padding: 20px;
    box-sizing: border-box;
    font-weight: normal;
}

.card-demanda-diaria .box-info-demanda i:hover{
    color: var(--laranja);
}


.imagem-demanda img{
    max-height: 20px;
    max-width: 20px;
    height: auto;
    width: auto;

}

.box-atendimentos-registrados h2{
    font-size: 1.5em;
    font-weight: 600;
    color: var(--cinza);
    margin-bottom: 10px;
}

.box-atendimentos-registrados .atendimento-interno{
    overflow-y: auto;
    max-height: 300px;
    display: flex;
    flex-direction: column;
    width: 60%;
}

.box-atendimentos-registrados .atendimento-interno table{
    text-align: start;

}

.box-atendimentos-registrados .atendimento-interno table thead{
    font-weight: 600;
    height: 25px;
    background-color: var(--cinza);
}

.box-atendimentos-registrados .atendimento-interno table tbody td{
    border: 1px solid var(--cinza);
    height: 20px;
    font-size: .8em;
}

#modal-nova-demanda{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #0000009a;
    display: none;
    justify-content: center;
    align-items: center;
}

.box-nova-demanda{
    padding: 30px;
    width: 60%;
    box-sizing: border-box;
    background-color: var(--branco);
    border-radius: 15px;
    box-shadow: 5px 5px 10px #0000003a;
}


.box-nova-demanda form{
    margin-left: 60px;
}

.box-nova-demanda select,.box-nova-demanda input,.box-nova-demanda textarea{
    width: 90%;
}

.box-nova-demanda #add-responsavel{
    margin-bottom: 10px;
    font-size: .8em;
}

.datas-demanda{
    display: flex;
    gap: 20px;
    width: 50%;
}

.datas-demanda label{
    font-size: .8em;
    color: var(--cinza);
}

.box-nova-demanda h2{
    text-align: center;
    margin-bottom: 15px;
    font-weight: 700;
    font-size: 1.5em;
}

.btns-nova-demanda{
    display: flex;
    justify-content: space-between;
    width: 90%;
}




/* CONQUISTAS */

.body-conquistas{
    padding: 40px;
    padding-left: 60px;
    box-sizing: border-box;
    width: 100%;
}

.box-bonus-va h2{
    font-size: 1.5em;
    color: var(--cinza);
    font-weight: 700;
    margin: 10px 0;
}


.meus-bonus{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.card-bonus{
    background-image: url(/img/fundo-supermercado.png);
    background-size: cover;
    background-color: var(--azul);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
}

.card-bonus .titulo-bonus p{
    font-size: 2em;
    font-weight: 700;
    color: var(--verde);
    text-align: center;
    text-shadow:
        -1px -1px 0 #0000ff,
         1px -1px 0 #0000ff,
        -1px  1px 0 #0000ff,
         1px  1px 0 #0000ff;
}


.card-bonus .box-data-bonus{
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    margin-top: 20px;
    color: var(--branco);
    font-weight: 700;
    font-size: .7em;
    text-transform: uppercase;
    width: 100%;
    padding-right: 20px;
    box-sizing: border-box;
}

.card-bonus .box-imagem-bonus{
    display: flex;
    justify-content: center;
    margin-top: -30px;
}

.card-bonus .box-imagem-bonus img{
    width: auto;
    height: auto;
    max-width: 100px;
    max-height: 100px;
    border-radius: 50%;
    border: 2px solid var(--verde);
}

.card-bonus .box-nome-bonus{
    margin-top: -36px;
    text-align: center;
    margin-bottom: 20px;
}

.card-bonus .box-nome-bonus p{
    color: var(--branco);
    font-weight: 700;
    text-transform: uppercase;
    position: relative;
    margin-top: -37px;
        text-shadow:
        -1px -1px 0 var(--verde-escuro),
         1px -1px 0 var(--verde-escuro),
        -1px  1px 0 var(--verde-escuro),
         1px  1px 0 var(--verde-escuro);
}

.card-bonus .box-nome-bonus img{
    max-width: 230px;
}

.card-bonus .box-icon-empresa{
    display: flex;
    justify-content: center;
    margin-top: 10px;
}


.card-bonus .box-icon-empresa img{

    width: auto;
    height: auto;
    max-width: 90px;
    max-height: 90px;
}


/* ADMINISTRAÇÃO */

.body-administracao{
    padding: 40px;
    padding-left: 60px;
    box-sizing: border-box;
    width: 100%;
}


.modo-administracao #modo-admin{
    width: 240px;
}



.body-administracao h2{
    font-size: 1.5em;
    color: var(--cinza);
    font-weight: 700;
    margin: 10px 0;
}

.body-administracao table{
    width: 500px;
    text-align: left;
}

.body-administracao table thead{
    background-color: var(--cinza);
}


.body-administracao table thead th{
    padding-left: 10px;
    height: 30px;
}

.body-administracao table tbody td{
    padding-left: 10px;
    height: 25px;
}

.body-administracao table thead th:first-child{
    border-radius: 10px 0 0 0; 
}


.body-administracao table thead th:last-child{
    border-radius: 0 10px 0 0; 
}


.body-administracao table tbody tr{
    border-bottom: 1px solid var(--cinza);
}


.box-cadastro-usuario, .box-cadastro-tecnico, .box-cadastro-olt{
    position: absolute;
    width: 100%;
    height: 100vh;
    left: 0;
    top: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background-color: #0000009a;
    z-index: 10;
}


.body-administracao .cabecalho-modal-cadastro{
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 25px;
}

.cabecalho-modal-cadastro h1{
    font-size: 1.5em;
    margin: 0;
}

.body-administracao form.form-cadastro{
    display: flex;
    width: 40%;
    border-radius: 20px;
    padding: 20px;
    box-sizing: border-box;
    flex-direction: column;
    align-items: center;
    background-color: var(--branco);    
}

.fechar-modal-cadastro{
    background-color: #ff0000;
    width: 20px;
    height: 20px;
    padding: 4px;
    border-radius: 50%;
    color: #fff;
    font-weight: 900;
    text-align: center;
    justify-content: center;
    cursor: pointer;
    transition: .3s;
}

.fechar-modal-cadastro:hover{
    background-color: #c20000;
}




/* RELATÓRIOS */

.box-relatorio{
    padding: 40px;
    padding-left: 60px;
    box-sizing: border-box;
    width: 100%;
}

.box-relatorio h1{
    margin-bottom: 20px;
}

.box-relatorio select,
.box-relatorio input{
    width: 20%;
}

.body-relatorio{
    display: none;
    flex-direction: column;
    overflow-y: auto;
    max-height: 560px;
    padding-right: 5px;
    box-sizing: border-box;
}

.body-relatorio table{
    width: 100%;
    font-size: .7em;
    text-align: center;
}

.body-relatorio table thead th{
    background-color: var(--cinza);
    height: 30px;
    border: 1px solid var(--cinza-claro);
}

.body-relatorio table thead th:first-child{
    border-radius: 10px 0 0 0;
}

.body-relatorio table thead th:last-child{
    border-radius: 0 10px 0 0;
}

.body-relatorio table tbody td{
    height: 25px;
    border-bottom: 1px solid var(--cinza);
    border-left: 1px solid var(--cinza-claro);
    border-right: 1px solid var(--cinza-claro);
}

/* PORTABILIDADE */

.body-portabilidade{
    padding: 40px;
    padding-left: 60px;
    box-sizing: border-box;
    width: 100%;
}


.tabela-portabilidade{
    margin-top: 20px;
}

.tabela-portabilidade h2,
#modal-edicao h2{
    color: var(--cinza);
    font-weight: 700;
    font-size: 1.3em;
    margin-bottom: 10px;
}

.tabela-portabilidade table thead{
    background-color: var(--cinza);
    color: var(--preto);
    font-weight: 600;  
}

.tabela-portabilidade table thead tr th{
    min-width: 150px;
    height: 30px;
}

.tabela-portabilidade table thead tr th:first-child{
    width: 20px;
    border-radius: 10px 0 0 0;
}

.tabela-portabilidade table thead tr th:last-child{
    border-radius: 0 10px 0 0;
}

.tabela-portabilidade table tbody tr td{
    text-align: center;
    align-items: center;
    height: 30px;
    padding: 5px;
    font-size: .8em;
    border-bottom: 1px solid var(--cinza);
}


.tabela-portabilidade table tbody tr td.td-acoes{
    display: flex;
    justify-content: space-evenly;
}

.tabela-portabilidade table tbody tr td.td-cliente{
    max-width: 250px;
    white-space: nowrap;
    font-size: .7em;
    text-align: center;
    border-bottom: 1px solid var(--cinza);
    overflow-x: auto;
    overflow-y: auto;
}

.tabela-portabilidade table tbody tr td .editar,
.tabela-portabilidade table tbody tr td .concluir,
.tabela-portabilidade table tbody tr td .fechar{
    font-weight: 700;
    padding: 3px;
    min-width: 15px;
    min-height: 15px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .3s;
}

.tabela-portabilidade table tbody tr td .editar{
    font-size: .8em;
}

.tabela-portabilidade table tbody tr td .editar:hover{
    background-color: var(--laranja);
    font-size: .8em;
}

.tabela-portabilidade table tbody tr td .concluir:hover{
    background-color: var(--verde-escuro);
}

.tabela-portabilidade table tbody tr td .fechar:hover{
    background-color: var(--vermelho);
}


.modal {
    display: none;
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background: rgba(0,0,0,0.5);
    justify-content: center;
    align-items: center;
    z-index: 100;
}

.modal-conteudo {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 400px;
    position: relative;

}
.fechar-modal {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 20px;
}


#modal-edicao label{
    color: var(--cinza);
}

.modal input, .modal select {
    width: 100%;
    margin-bottom: 10px;
    padding: 5px;
    margin-top: 3px;
}

/* TELEFONIA */



.btns-telefonia{
    margin-top: 10px;
}

.btns-telefonia button{
    background-color: transparent;
    border: none;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--grafite);
    cursor: pointer;
    padding: 5px;
    border-radius: 10px;
}

.btns-telefonia .planilha-selecionada{
    background-color: var(--laranja);
    color: var(--branco);
}

.body-telefonia{
    padding: 40px;
    padding-left: 60px;
    box-sizing: border-box;
    width: 100%;
}

.tabela-telefonia-ativa{
    margin-top: 15px;
    overflow-y: auto;
    max-height: 650px;
}

.head-tabela-telefonia{
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}


.tabela-telefonia-ativa h2{
    color: var(--cinza);
    font-weight: 700;
    font-size: 1.3em;
    margin-right: 10px;
    margin-bottom: 5px;
}


.tabela-telefonia-ativa table thead{
    background-color: var(--cinza);
    color: var(--preto);
    font-weight: 600;  
}

.tabela-telefonia-ativa table thead tr th{
    min-width: 150px;
    height: 30px;
}

.tabela-telefonia-ativa table thead tr th:first-child{
    width: 20px;
    border-radius: 10px 0 0 0;
}

.tabela-telefonia-ativa table thead tr th:last-child{
    border-radius: 0 10px 0 0;
}

.tabela-telefonia-ativa table tbody tr td{
    text-align: center;
    align-items: center;
    height: 30px;
    padding: 5px;
    font-size: .8em;
    border-bottom: 1px solid var(--cinza);
}

.tabela-telefonia-ativa table tbody tr td.td-acoes{
    display: flex;
    justify-content: space-evenly;
}

.tabela-telefonia-ativa table tbody tr td.td-cliente{
    max-width: 250px;
    white-space: nowrap;
    font-size: .7em;
    text-align: center;
    border-bottom: 1px solid var(--cinza);
    overflow-x: auto;
    overflow-y: auto;
}

.tabela-telefonia-ativa table tbody tr td .editar,
.tabela-telefonia-ativa table tbody tr td .concluir,
.tabela-telefonia-ativa table tbody tr td .fechar{
    font-weight: 700;
    padding: 3px;
    min-width: 15px;
    min-height: 15px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: .3s;
}

.tabela-telefonia-ativa table tbody tr td .editar{
    font-size: .8em;
}

.tabela-telefonia-ativa table tbody tr td .editar:hover{
    background-color: var(--laranja);
    font-size: .8em;
}

.tabela-telefonia-ativa table tbody tr td .concluir:hover{
    background-color: var(--verde-escuro);
}

.tabela-telefonia-ativa table tbody tr td .fechar:hover{
    background-color: var(--vermelho);
}


.modal-edicao {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 999;
}

.modal-conteudo {
  background: #fff;
  padding: 20px 30px;
  border-radius: 12px;
  width: 400px;
  max-width: 90%;
  position: relative;
}

.modal-conteudo h2 {
  margin-bottom: 15px;
  text-align: center;
}

.form-grupo {
  margin-bottom: 12px;
}

.form-grupo label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
}

.form-grupo input,
.form-grupo select {
  width: 100%;
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
}

.btn-salvar {
  width: 100%;
  background: #007bff;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 6px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.3s;
}

.btn-salvar:hover {
  background: #0056b3;
}

.fechar-modal {
  position: absolute;
  right: 12px;
  top: 8px;
  font-size: 22px;
  cursor: pointer;
  color: #888;
}