@charset "utf-8";

@font-face {
  font-family: 'binary-itc-std-light';
  src        : url('font/binary-itc-std-light.otf') format('truetype');
  font-weight: 300;
  font-style : normal;
}

body {
  margin   : 0;
  max-width: 100%;
  font-family: sans-serif;
}

.central {
  width: 1200px;
}

.w100 {
  width: 100%
}

.formDivLogin {
  justify-content: center;
  align-items    : center;
  display        : flex;
}

.contentTelaLogin {
  overflow        : hidden;
  margin-top      : 44px;
  background-color: white;
  padding         : 27px 7px 44px 7px;
  box-shadow      : rgb(0 0 0 / 35%) 0px 5px 15px;
  /* border       : 2px solid #313865; */
  width:          276px;
}

.inputLoginSenha input {
  border       : none;
  margin-bottom: 14px;
  padding      : 10px 0px;
  width        : 83%;
  border-bottom: 1px solid black;
  outline      : 0;
  font-size    : 12px;
  padding-top  : 18px;
}

.inputLoginSenha input:focus::placeholder {
  font-size : 9px;
  transform : translateY(-185%);
  transition: transform 150ms ease-out, font-size 150ms ease-out;
  color     : black;
}

.inputLoginSenha input:hover::placeholder {
  font-size : 9px;
  transform : translateY(-185%);
  transition: transform 150ms ease-out, font-size 150ms ease-out;
  color     : black;
}

.inputLoginSenha input::placeholder {
  border   : none;
  font-size: 12px;
}

.logoTelaLogin {
  margin-bottom: 10px;
}

.logoTelaLogin p {
  color        : #232A2C;
  font-size    : 39px;
  margin-top   : 0px;
  font-family  : 'binary-itc-std-light';
  margin-bottom: 8px;
}

.logoTelaLogin img {
  width: 40%;
}

.ButtonSubmit input {
  padding         : 11px;
  width           : 83%;
  border          : none;
  cursor          : pointer;
  background-color: #232A2C;
  color           : white;
  box-shadow      : rgb(50 50 93 / 25%) 0px 2px 5px -1px, rgb(0 0 0 / 30%) 0px 1px 3px -1px;
  margin-top      : 28px;
  font-weight: bold;
}

.ButtonSubmit input:hover {
  background-color: #d19c42 !important;
  transition      : 0.3s;
}

.topoHeaderSistema {
  background-color: #232A2C;
  overflow        : hidden;
  padding         : 10px 0px;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
  position        : fixed;
  width           : 100%;
  z-index         : 999999;
  height: 58px;
}

.distanciaTopoParaConteudo {
  padding-bottom: 59px;
}

.ladoEsquerdoTopoHeader {
  float: left;
}

.ladoEsquerdoTopoHeader i {
  color    : white;
  font-size: 34px;
  cursor   : pointer;
}

.ladoDireitoTopoHeader {
  float: right;
}

.ladoDireitoTopoHeader p {
  margin        : auto;
  display       : inline-block;
  color         : #F1E3B6 !important;
  margin-right  : 20px;
  vertical-align: middle;
}

.ladoDireitoTopoHeader {
  float     : right;
  text-align: right;
}

.ladoDireitoTopoHeader img {
  min-width       : 155px !important;
  height: 20px;
  border-left : 2px solid #F1E3B6 !important;
  padding-left: 0px;
}

.ladoDireitoTopoHeader span {
  margin        : auto;
  display       : inline-block;
  color         : white;
  margin-right  : 20px;
  vertical-align: middle;
  text-transform: uppercase;
  font-size     : 30px;
}

.ccontentInicioSystem {
  overflow: hidden;
}

.ccontentInicioSystem ul {
  padding: 35px 0px 83px 0px;
  margin : 0px 39px;
  display: grid;
  grid-template-columns: 23.5% 23.5% 23.5% 23.5%;
  grid-gap: 20px;
  justify-content: space-around;
}

.ccontentInicioSystem ul li {
  overflow     : hidden;
  box-shadow   : #F1E3B6 2px 2px 2px 2px;
  transition   : 0.3s;
  border-radius: 6px;
  /*background-color: #F1E3B6;*/
}

.ccontentInicioSystem ul li:hover {
  cursor    : pointer;
  transition: 0.3s;
  box-shadow: rgb(0 0 0 / 0%) 0px 1px 2px, rgb(0 0 0 / 0%) 0px 2px 4px, rgb(0 0 0 / 47%) 0px 4px 8px, rgb(0 0 0 / 0%) 0px 8px 16px, rgb(0 0 0 / 0%) 0px 16px 32px, rgb(0 0 0 / 0%) 0px 32px 64px;
  transform : translateY(-10px);

}

.categoriasInicioSystem p {
  text-align   : center;
  margin-top   : 0px;
  font-weight  : bold;
  margin-bottom: 10px;
  font-size    : 11px;
  font-family  : Arial;
}

.categoriasInicioSystem i {
  text-align: center;
  font-size : 49px;
  transition: 0.3s;
}

.categoriasInicioSystem {
  text-align: center;
  padding   : 10px 28px;
  overflow  : hidden;
  color     : #232A2C;
}

.ContentcategoriaFormPermissao {
  text-align: left;
  overflow  : hidden;
}

.ContentcategoriaFormPermissao p {
  font-weight: bold;
  font-size  : 15px;
  color      : #232A2C;
  margin     : 12px 0;
}

.categoriaFormPermissao {
  padding      : 7px 20px;
  cursor       : pointer;
  width        : 20%;
  margin-bottom: 10px;
  box-shadow   : rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  margin-left  : 1px;
}

.categoriaFormPermissao p {
  margin     : auto;
  color      : black;
  font-weight: inherit;
  font-size  : 12px;
}

.EstiloPermUserk button i {
  margin-right: 5px;
}

.EstiloPermUserk button {
  display         : inline-block;
  color           : #eacd19;
  background-color: white;
  color           : #232A2C;
  border          : none;
  box-shadow      : rgb(0 0 0 / 15%) 2.4px 2.4px 3.2px;
  padding         : 3px 9px;
  cursor          : pointer;
  margin-right    : 10px;
  border-radius   : 2px;
  font-size       : 14px;
  border          : 1px solid #232A2C;
}

.ContentcategoriaFormPermissao button i {
  margin-right: 5px;
}

.ContentcategoriaFormPermissao button {
  display         : inline-block;
  color           : #eacd19;
  background-color: white;
  color           : #232A2C;
  border          : none;
  box-shadow      : rgb(0 0 0 / 15%) 2.4px 2.4px 3.2px;
  padding         : 3px 9px;
  cursor          : pointer;
  margin-right    : 10px;
  border-radius   : 2px;
  font-size       : 14px;
  border          : 1px solid #232A2C;
  margin-top      : 10px;
}

.contentTexto {
  padding-top: 11px !important;
}

.FormButtonUsuarioPerm button {
  border          : none;
  background-color: #232A2C;
  margin-top      : 30px;
  color           : white;
  padding         : 10px 30px;
}

.buttonFiltroAdmin1 button {
  border          : none;
  margin-left     : 6px;
  background-color: #ffffff;
  color           : #232A2C;
  text-align      : center;
  font-size       : 15px;
  cursor          : pointer;
  padding         : 5px 17px;
  vertical-align  : baseline;
  border-radius   : 3px;
}

.newuserInput input {
  border          : none;
  background-color: #232A2C;
  margin-top      : 30px;
  color           : white;
  padding         : 10px 30px;
  cursor          : pointer;
}

.estyleAvaliacaoCriacaoChamados a {
  color     : #989898;
  font-style: italic;
  font-size : 14px;
}

.estyleAvaliacaoCriacaoChamados {
  padding-left: 50px;
}

.TextoDeAvaliacaoparaNovaPagina p {
  color: #000000 !important;
  font-size: 12px !important;
}

.TextoDeAvaliacaoparaNovaPagina span {
  color: #000000 ;
  font-size: 18px ;
  vertical-align: sub;
}


@media screen and (min-width:1920px) {

  .contentTelaLogin {
    width: 371px;
  }

}


@media screen and (max-width:1222px) {

  .central {
    width: 98%
  }

  .ImagemInicio img {
    width: 51%;
  }

}

@media screen and (max-width:1024px) {

  .central {
    width: 98%
  }

  .listGraficos ul li {
    width: 18.5%;
  }

  .listGraficos ul {
    width: 98%;
  }

  .logoTelaLogin img {
    width: 45%;
  }

  .ccontentInicioSystem ul {
    margin: 0px 25px;
  }

}


@media screen and (max-width:900px) {

  .listGraficos ul li {
    width: 23.4%;
  }

  .topoFaturamento ul li:first-child {
    float        : inherit;
    margin-bottom: 10px;
  }

  .topoFaturamento ul li {
    display      : inherit;
    margin-bottom: 10px;
  }

  .topoFaturamento ul li:last-child {
    float        : inherit;
    margin-bottom: 0px;
  }

  .categoriaDGVLMENU li:first-child {
    float: inherit;
  }

  .categoriaDGVLMENU li {
    text-align     : center;
    display        : flex;
    justify-content: center;
    align-items    : center;
  }

  .categoriaDGVLMENU li:last-child {
    float        : inherit;
    margin-bottom: 12px;
  }

  .ltr {
    width: inherit !important;
  }

}

@media screen and (max-width:768px) {

  .central {
    width: 96%
  }

  .sidenav a,
  .dropdown-btn {
    padding: 9px 8px 9px 3px;
  }

  .SubSubclasse {
    padding: 9px 0px 9px 80px;
  }

  .listGraficos ul li {
    width: 100%;
  }

  .listGraficos ul {
    text-align: center;
    width     : 96%;
  }

  .topoFaturamento ul li:first-child p {
    font-family: Tahoma, Geneva, sans-serif;
    font-size  : 28px;
  }

  .topoFaturamento {
    width: 96%;
  }

  .logoTelaLogin img {
    width: 48%;
  }

  .ccontentInicioSystem ul {
    display: grid;
    grid-gap: 22px;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  }

  .categoriaFormPermissao {
    width: 100%;
    text-align: center;
  }


}

@media screen and (max-width:700px) {


}

@media screen and (max-width:683px) {

  .topoFaturamento ul li input {
    margin-bottom: 12px;
  }
}

@media screen and (max-width:574px) {
  .topoFaturamento ul li p {
    margin-bottom: 2px;
    display      : inherit;
  }

  .topoFaturamento ul li input {
    width        : 84%;
    margin-bottom: 12px;
  }

  .topoFaturamento ul li button {
    display         : inline-block;
    background-color: white;
    border          : 1px solid #0000001f;
    padding         : 3px 10px;
  }
}

@media screen and (max-width:512px) {

  .ladoDireitoTopoHeader {
    float: inherit;
  }

  #customers input {
    width: 93%;
  }

  #customers button {
    margin-left: 0px;
    width      : 19%;
    margin-top : 10px;
  }

  .buttonPlus button {
    padding: 5px 3px;
    width  : 34% !important;
  }


}

@media screen and (max-height: 450px) {

  .sidenav {
    padding-top: 15px;
  }

  .sidenav a {
    font-size: 18px;
  }

}

@media screen and (max-width:400px) {

  #customers td,
  #customers th {
    border : 1px solid #ddd;
    padding: 3px;
  }

  .topoFaturamento ul li p {
    margin-bottom: 2px;
    display      : inherit;
  }

  .topoFaturamento ul li input {
    width        : 81%;
    margin-bottom: 12px;
  }

  .topoFaturamento ul li button {
    display         : inline-block;
    background-color: white;
    border          : 1px solid #0000001f;
    padding         : 3px 10px;
  }
  @media screen and (max-width:365px) {
    #myBtn{
      display: none;
    }
  }
}