/*colocando a fonte Raleway como principal*/

body {
   font-family: 'Raleway', sans-serif;
}

/*NECESSÁRIO PARA O CABECALHO DO SITE ACOMPANHAR HORIZONTALMENTE A TELA QUE TIVER UM OVERFLOW*/

#container {
   overflow: auto;
   height: 100vh;
}

#cabecalho {
   position: sticky;
   left: 0;
   width: 100%;
}

/*estilos reutilizáveis de fonte*/

.raleway {
   font-family: 'Raleway', sans-serif !important;
}

.arial {
   font-family: Arial, Helvetica, sans-serif !important;
}

.transparente {
   color: transparent;
}

.center {
   text-align: center !important;
}

.right {
   text-align: right !important;
}

.justify {
   text-align: justify !important;
}

.left {
   text-align: left !important;
}

.abnt {
   font-size: 12px;
   font-family: Arial, Helvetica, sans-serif;
   line-height: 1.5;
   margin: 0;
   color: black;
}

.fonte-pequena {
   font-size: 9px;
}

/*cursor*/

.pointer {
   cursor: pointer;
}

/*CONFIGURAÇÃO DE LINKS*/

.link-decorado {
   text-decoration: underline;
   color: rgb(70, 70, 70);
}

.link-decorado:hover {
   color: rgb(114, 114, 114);
   text-decoration: underline;
}

/*POSICIONAR ELEMENTOS NO CENTRO DA TELA (HORIZONTALMENTE)*/

.align-center {
   display: block !important;
   margin-left: auto !important;
   margin-right: auto !important;
}

/*DIV PRINCIPAL DO PORTAL PARA PÁGINAS COM CONTEÚDO*/

.conteudo-principal {
   max-width: 85%;
   margin-left: 7.5%;
}

/*LINHAS HORIZONTAIS*/

.hr-padrao {
   border: 0.5px solid lightgray;
   width: 90%;
}

/*POSICIONAMENTO DE DIVS*/

.direita {
   float: right;
   margin-left: 10px;
}

/*Títulos das páginas*/

.titulo-submenu {
   font-size: 30px;
   color: gray;
}

/*TAMANHOS REUTILIZÁVEIS PARA LARGURA (WIDTH)*/

.pequeno {
   width: 100px !important;
}

.medio {
   width: 300px !important;
}

.grande {
   width: 500px !important;
}

.gigante {
   width: 700px !important;
}

.gigante-percent {
   width: 90% !important;
}

/*PADRÕES*/

.escondido {
   display: none;
}

.border {
   border: 1px solid rgb(167, 167, 167);
}

.noborder {
   border: none;
}

.arredondado {
   border-radius: 5px;
}

.padding-pequeno {
   padding: 5px;
}

.afastado {
   margin-left: 10px;
}

.margin-left-pequena {
   margin-left: 20px;
}

.nomargin{
   margin: 0 !important;  
}

/*SELECT PADRÃO*/

.select-padrao {
   padding: 7px;
   border-radius: 5px;
   border: 1px solid lightgray;
   cursor: pointer;
   max-width: 90%;
}

.select-padrao:hover {
   background-color: rgb(237, 237, 237);
   cursor: pointer;
}

.select-padrao option {
   cursor: pointer;
}

/*TÍTULO PADRÃO*/

.titulo-padrao {
   color: gray;
   font-weight: 600;
   font-size: 25px;
   padding-bottom: 20px;
   margin-top: 30px;
}

/*INPUT*/

.input-padrao {
   padding: 5px;
   margin-left: 10px;
   border-radius: 5px;
   border: 1px solid lightgray;
}

.input-padrao:hover {
   background-color: #E3E3E3;
}

/*BOTÃO PADRÃO PEQUENO*/

.btn-padrao {
   padding: 5px 10px;
   border-radius: 4px;
   background-color: lightgrey;
   cursor: pointer;
}

.btn-padrao:hover {
   background-color: rgb(223, 223, 223);
   color: gray;
}

/*CABEÇALHO*/

.cabecalho {
   background-image: linear-gradient(to right, #b9b9b9, rgb(228, 228, 228), #b9b9b9);
   padding-top: 10px;
   padding-bottom: 10px;
   width: 100%;
   box-shadow: 1px 2px 10px #b9b9b9;
   margin-right: 0;
   max-height: 90px;
}

.cabecalho a {
   color: black;
}

.titulopagina {
   font-size: 16px;
   font-weight: 600;
   color: black;
}

.img-cabecalho:hover {
   width: 32px;
   height: auto;
   margin-top: -2px;
   transition: 0.10s;
}

/*botão de alterar a senha NO CABEÇALHO*/

.btn-alterar-senha {
   float: right;
   font-weight: 300;
   margin-right: 50px;
   margin-top: -70px;
   color: black;
}

.btn-alterar-senha:hover {
   color: rgb(112, 112, 112);
}

.btn-criar-usuario {
   float: left;
   height: 100px;
   width: 100px;
   margin-top: -70px;
   color: transparent;
}

.btn-criar-usuario:hover {
   color: transparent
}

/*ESTILIZAÇÃO PARA A TABELA TER O TAMANHO AJUSTÁVEL*/

table {
   border-collapse: collapse;
   border-spacing: 0px;
}

.tabela-ajustavel {
   resize: horizontal;
   overflow: auto;
   width: 120px;
   height: 120px;
   margin: 0px;
   padding: 0px;
   border: 1px solid black;
   display: block;
}

th .tabela-ajustavel {
   border: 0;
   width: 100%;
   height: auto;
   min-width: 100px;
   position: relative;
   z-index: 1;
}

.tabela {
   border-collapse: collapse;
   text-align: center;
   overflow: auto;
   font-size: 12px;
   margin-bottom: 20px;
   font-family: Arial, Helvetica, sans-serif;
}

.tabela td {
   overflow: auto;
   text-align: left;
   padding: 5px;
}

.tabela td, .tabela th {
   border: 1px solid #ddd;
   overflow: visible;
}

.td-sticky {
   /*TD QUE FUNCIONA COMO UM TH, MAS SEM INTERFERIR NO FILTRO EXCEL*/
   position: sticky;
   top: 0;
   z-index: 1 !important;
}

.tabela tr:nth-child(even) {
   background-color: #DCDCDC;
}

.tabela tr:hover {
   background-color: silver;
}

.tabela th {
   padding: 10px 5px 10px 5px;
   text-align: center;
   background-color: lightgray;
   color: Black;
   cursor: pointer;
   position: sticky;
   top: 0;
   z-index: 1;
   /* necessário para o cabeçalho da tabela fixar no topo da tabela ao rolar a tela para baixo*/
}

.tabela th:hover {
   background-color: silver;
}

/*Conteúdo principal das páginas com tabelas*/

.conteudo-principal {
   max-width: 95%;
   overflow: visible;
   margin-top: 20px;
   margin-left: 2.5%;
}

/*fim*/

/*Tirando a decoração dos links*/

a {
   text-decoration: none;
}

a:hover {
   text-decoration: none;
}

/*div que possui as divs dos ícones*/

.div-inicial {
   max-width: 70%;
   overflow: visible;
   margin-top: 20px;
   margin-left: 15%;
   margin-right: 15%;
}

/*div que possui as divs dos ícones na página principal*/

.div-icones {
   max-width: 80%;
   overflow: visible;
   margin-top: 10px;
   margin-left: 10%;
   margin-right: 10%;
   font-size: 15px;
}

/*div com configuração para um ícone na mesma linha*/

.div-um-icone {
   margin-top: 10px;
   width: 20%;
   margin-left: 39.7%;
   max-width: 30%;
   display: inline-block;
   text-align: center;
   color: black;
}

.div-um-icone div {
   width: 100%;
   max-width: 80%;
   border-radius: 5px;
   box-shadow: 1px 2px 10px #CFCFCF;
   padding: 20px;
   text-decoration: none;
}

.div-um-icone div:hover {
   background-image: linear-gradient(to right, lightgrey, #E8E8E8, lightgrey);
   color: gray;
   margin-left: -2.5%;
   max-width: 85%;
   width: 105%;
   max-height: 100%;
   transition: 0.25s;
}

/*div com configuração para dois ícones na mesma linha*/

.div-dois-icones {
   margin-top: 10px;
   width: 30%;
   margin-left: 13%;
   max-width: 35%;
   display: inline-block;
   text-align: center;
   color: black;
}

.div-dois-icones div {
   width: 100%;
   max-width: 80%;
   border-radius: 5px;
   box-shadow: 1px 2px 10px #CFCFCF;
   padding: 30px;
   text-decoration: none;
}

.div-dois-icones div:hover {
   background-image: linear-gradient(to right, lightgrey, #E8E8E8, lightgrey);
   color: gray;
   margin-left: -2.5%;
   width: 105%;
   max-width: 85%;
   max-height: 100%;
   transition: 0.25s;
}

/*div com configuração para três ícones na mesma linha*/

.div-tres-icones {
   margin-top: 10px;
   width: 30%;
   margin-left: 2.4%;
   display: inline-block;
   text-align: center;
   color: black;
}

.div-tres-icones div {
   width: 100%;
   border-radius: 5px;
   max-width: 80%;
   box-shadow: 1px 2px 10px #CFCFCF;
   padding: 30px;
   text-decoration: none;
   margin-right: -20px;
}

.div-tres-icones div:hover {
   background-image: linear-gradient(to right, lightgrey, #E8E8E8, lightgrey);
   color: gray;
   width: 105%;
   margin-left: -2.5%;
   max-width: 85%;
   max-height: 100%;
   transition: 0.25s;
}

/*div com configuração para quatro ícones na mesma linha*/

.div-quatro-icones {
   margin-top: 10px;
   width: 19.4%;
   margin-left: 3.8%;
   display: inline-block;
   text-align: center;
   color: black;
}

.div-quatro-icones div {
   width: 100%;
   border-radius: 5px;
   max-width: 80%;
   max-height: 140px;
   padding: 20px;
   box-shadow: 1px 2px 10px #CFCFCF;
   text-decoration: none;
}

.div-quatro-icones div:hover {
   background-image: linear-gradient(to right, lightgrey, #E8E8E8, lightgrey);
   color: gray;
   width: 105%;
   margin-left: -2.5%;
   max-width: 85%;
   max-height: 140px;
   transition: 0.25s;
}

/*div com configuração para cinco ícones na mesma linha
/*div que possui as divs dos ícones na página principal*/

.div-cinco-icones {
   margin-top: 10px;
   width: 16%;
   margin-left: 2.5%;
   display: inline-block;
   text-align: center;
   color: black;
}

.div-cinco-icones div {
   width: 100%;
   border-radius: 5px;
   max-width: 80%;
   max-height: 100px;
   box-shadow: 1px 2px 10px #CFCFCF;
   padding: 20px;
   text-decoration: none;
}

.div-cinco-icones div:hover {
   background-image: linear-gradient(to right, lightgrey, #E8E8E8, lightgrey);
   color: gray;
   width: 105%;
   margin-left: -2.5%;
   max-width: 85%;
   max-height: 100px;
   transition: 0.25s;
}

/*Configuração das imagens dos ícones*/

.img-icone {
   opacity: 0.60;
   filter: grayscale(1);
   position: relative;
   z-index: 0;
   /*deixa os icones com efeito preto e branco*/
}

.div-um-icone div:hover .img-icone {
   transition: 0.25s;
   opacity: 0.40;
}

.div-dois-icones div:hover .img-icone {
   transition: 0.25s;
   opacity: 0.40;
}

.div-tres-icones div:hover .img-icone {
   transition: 0.25s;
   opacity: 0.40;
}

.div-quatro-icones div:hover .img-icone {
   transition: 0.25s;
   opacity: 0.40;
}

.div-cinco-icones div:hover .img-icone {
   transition: 0.25s;
   opacity: 0.40;
}

/*estilização exclusiva da página minha equipe*/

/*botão que vai abrir o menu para trocar o supervisor*/

.botao-abrir-alternar {
   cursor: pointer;
   background: none;
   border: none;
}

/*div que fica escondida antes de clicar no botão de abrir

/*div em que o botão fica*/

.trocar_supervisor {
   position: relative;
   display: inline-block;
}

/* o menu que fica escondido antes de passar o cursor pelo botão */

.div-trocar-Supervisor {
   width: 430px;
   height: 50px;
   position: absolute;
   background-color: white;
   display: none;
   border-radius: 10px;
   padding: 30px;
   box-shadow: 1px 2px 10px gray;
   z-index: 1;
}

/* faz o menu escondido aparecer ao passar o mouse por cima do botão de alternar*/

.trocar_supervisor:hover .div-trocar-Supervisor {
   display: block;
}

/*muda a cor do botão-alternar quando o mouse passa por cima, e também enquanto o menu está ativo*/

.trocar_supervisor:hover .botao-abrir-alternar {
   background-color: lightgray;
}

/*estilização exlusiva da pagina Sodexo*/

.botao-abrir-filtroempresa {
   /*botão que abre o menu*/
   cursor: pointer;
   border: none;
   border-radius: 5px;
}

/*menu que fica escondido antes de clicar*/

.div-filtroempresa {
   width: 210px;
   height: 80px;
   position: absolute;
   background-color: white;
   display: none;
   border-radius: 10px;
   padding: 30px;
   box-shadow: 1px 2px 10px gray;
   margin-top: 30px;
}

.btn-empresa {
   margin-top: 20px;
}

.botao-supervisor {
   padding: 5px 10px;
   border-radius: 4px;
   background-color: lightgrey;
   border: 0;
   cursor: pointer;
}

.botao-supervisor:hover {
   background-color: silver;
}

/*DIV DE ALTERAR SENHA*/

.div-alterar-senha {
   min-width: 25%;
   margin-left: 36.5%;
   margin-right: 36.5%;
   text-align: center;
   padding: 1%;
   border-radius: 0 0 5px 5px;
   -webkit-box-shadow: 0px 11px 19px -1px #CCCCCC;
   box-shadow: 0px 11px 19px -1px #CCCCCC;
   z-index: 10;
}

.div-alterar-senha input {
   border-radius: 10px;
   border: 1px solid #d6d6d6;
   margin-top: 10px;
   margin-bottom: 10px;
   padding: 5px;
   width: 80%;
}

.div-alterar-senha input:hover {
   border: 1px solid #c7c7c7;
   margin-top: 10px;
   margin-bottom: 10px;
   padding: 5px;
   background-color: rgb(237, 237, 237);
}

#placeholder::-webkit-input-placeholder {
   color: #A9A9A9;
   font-size: 15px;
   text-align: center;
}

.titulo-div-alterar-senha {
   margin-top: 20px;
   min-width: 25%;
   margin-left: 36.5%;
   margin-right: 36.5%;
   text-align: center;
   padding: 1%;
   border-radius: 5px 5px 0 0;
   background-color: rgb(220, 220, 220);
   -webkit-box-shadow: 0px -8px 19px -1px #CCCCCC;
   box-shadow: 0px -8px 19px -1px #CCCCCC;
   z-index: -1;
}

.titulo-div-alterar-senha h1 {
   color: #525252;
   font-size: 20px;
}

.btn_alterar {
   border: none;
   padding: 5px;
   color: #525252;
   background-color: rgb(220, 220, 220);
   ;
   border-radius: 5px;
   cursor: pointer;
   text-decoration: none;
   font-size: 17px;
   width: 80%;
}

.btn_alterar:hover {
   color: #525252;
   background-color: rgb(230, 230, 230);
}

/*PÁGINA DE LOGIN*/

.body-login {
   background-image: linear-gradient(to right, #A9A9A9, white, #A9A9A9);
   font-family: 'Raleway', sans-serif;
}

.input-login {
   border-radius: 10px;
   border: 1px solid #B5B5B5;
   margin-top: 10px;
   margin-bottom: 10px;
   padding: 5px;
}

.input-login:hover {
   background-color: #e8e8e8;
}

.login {
   margin: auto;
   width: 20%;
   margin-top: 8%;
   background-color: white;
   box-shadow: 1px 2px 10px #B5B5B5;
   border-radius: 10px;
   border: 1px solid lightgrey;
}

.form_login {
   width: 270px;
   margin: auto;
   background-color: white;
   padding: 20px;
   border-radius: 0 0 10px 10px;
   box-shadow: 1px 2px 10px #4F4F4F;
   text-align: center;
   font-weight: 400;
   font-size: 17px;
   color: #696969;
}

.botao-login {
   border: none;
   padding: 5px 113px;
   color: white;
   background-color: #828282;
   ;
   border-radius: 5px;
   cursor: pointer;
   text-decoration: none;
   font-size: 17px;
}

.botao-login:hover {
   background-color: #A8A8A8;
}

.headerlogin {
   width: 270px;
   margin: auto;
   padding: 30px 20px 10px 20px;
   /* superior | direita | inferior | esquerda */
   background-color: #828282;
   ;
   color: white;
   margin-top: 7%;
   border-radius: 10px 10px 0 0;
   box-shadow: 1px 2px 10px #4F4F4F;
}

#placeholder::-webkit-input-placeholder {
   color: #A9A9A9;
   font-size: 15px;
   text-align: center;
}

.form_login a {
   margin-top: 15px;
}

/*tela de avisos*/

.botao-avisos {
   box-shadow: 1px 2px 10px #bababa;
   background-color: lightgrey;
   color: black;
   cursor: pointer;
   padding: 5px;
   width: 100%;
   border-radius: 5px;
   font-weight: 600;
}

.botao-avisos:hover {
   background-color: rgb(221, 221, 221);
   padding: 5px;
   transition: 0.25s;
   color: rgb(70, 70, 70);
}

/* BOTÃO DE ENVIAR ARQUIVO NUM INPUT */

.label-file {
   padding: 10px;
   border-radius: 7px 0 0 7px;
   background-color: lightgrey;
   cursor: pointer;
   font-size: 16px;
}

.label-file:hover {
   background-color: rgb(223, 223, 223);
   color: gray;
}

.file-chosen {
   /*ARQUIVO ESCOLHIDO*/
   margin-left: -5px;
   border: 1px solid silver;
   border-radius: 0 7px 7px 0;
   padding: 11px;
   font-family: sans-serif;
   font-weight: 600;
   font-size: 16px;
   background-color: rgb(237, 237, 237);
}

/*BOTÃO PARA IMPRIMIR A PÁGINA*/

#btn-imprimir {
   /*TODO BOTÃO PARA IMPRIMIR DEVE TER O 'id="btn-imprimir"'*/
   margin-left: 30%;
   margin-right: 30%;
   width: 40%;
}

@media print {
   #btn-imprimir {
      display: none;
   }
}

/*DIV DE ESCOLHAR O FUNCIONARIO NA TELA DE DESLIGAMENTO*/

.div-alterar-funcionario {
   min-width: 50%;
   margin-left: 24%;
   margin-right: 24%;
   text-align: center;
   padding: 1%;
   border-radius: 0 0 5px 5px;
   -webkit-box-shadow: 0px 11px 19px -1px #CCCCCC;
   box-shadow: 0px 11px 19px -1px #CCCCCC;
   z-index: 10;
}

.titulo-div-funcionario {
   margin-top: 80px;
   min-width: 50%;
   margin-left: 24%;
   margin-right: 24%;
   text-align: center;
   padding: 1%;
   border-radius: 5px 5px 0 0;
   background-color: rgb(220, 220, 220);
   -webkit-box-shadow: 0px -8px 19px -1px #CCCCCC;
   box-shadow: 0px -8px 19px -1px #CCCCCC;
   z-index: -1;
}

.titulo-div-funcionario h1 {
   color: #525252;
   font-size: 20px;
}

/*RESPONSIVIDADE PARA CELULARES E/OU QUAISQUER DISPOSITIVOS COM TELAS MENORES*/

@media screen and (max-width: 800px) {
   .div-icones {
      min-width: 100%;
      margin-left: 0;

   }
   .div-inicial {
      min-width: 100%;
      margin-left: 0%;
   }
   .div-alterar-funcionario {
      min-width: 80%;
      margin-left: 9%;
   }
   .titulo-div-funcionario {
      min-width: 80%;
      margin-left: 9%;
   }
}

/*Texto tela quati_quest.php*/

.label_especial {
   font-weight: bold;
}