:root {
  --net-primary: #10326e;
  --net-secondary: #FFC107;

  --net-black: #000;
  --net-black-20: rgba(0, 0, 0, 0.2);
  --net-black-40: rgba(0, 0, 0, 0.4);
  --net-black-50: rgba(0, 0, 0, 0.5);
  --net-black-85: rgba(0, 0, 0, 0.85);
  --net-white: #fff;
  --net-gray: #6c757d;
  --net-gray-dark: #343a40;
  --net-success: #28a745;
  --net-info: #17a2b8;
  --net-warning: #ffac07;
  --net-danger: #dc3545;
  --net-light: #f8f9fa;
  --net-dark: #343a40;
}

::placeholder {
  color: var(--net-black-20) !important;
}

::ms-input-placeholder {
  color: var(--net-black-20) !important;
}

.bg-primary-light {
  background-color: #81affe !important;
}

.bg-grey {
  background-color: #eee !important;
}

label b {
  color: var(--net-danger) !important;
  font-weight: bold;
}


.btn-hover-to-blue:focus,
.btn-hover-to-blue:hover {
  background-color: var(--net-primary) !important;
  text-decoration: none;
}

.btn-hover-to-black:focus,
.btn-hover-to-black:hover {
  background-color: var(--net-black) !important;
  text-decoration: none;
}

.btn-hover-to-amber:focus,
.btn-hover-to-amber:hover {
  color: var(--net-black) !important;
  background-color: var(--net-secondary) !important;
  text-decoration: none;
}

/*
* Áreas de Atuação Home
*/
.areas-atuacao {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: start;
  justify-content: center;
  gap: 14px;
}

.areas-atuacao .item {
  width: 120px;
  overflow: hidden;
}

.areas-atuacao .item h6 {
  text-align: center;
}

.areas-atuacao .item img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/*
* Clientes Home
*/
.clientes-home {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.clientes-home .logo,
.clientes-home .logo-cliente {
  border: solid 2px #eee !important;
  border-radius: 8px;
  width: 9%;
  overflow: hidden;
}

.clientes-home .logo-cliente {
  width: 19%;
}

.clientes-home .logo img,
.clientes-home .logo-cliente img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}


/*
* Contato
*/
.primary-bg {
  background-color: var(--net-primary);
}

.warning-bg {
  background-color: var(--net-warning);
}

.success-bg {
  background-color: var(--net-success);
}

.error-bg {
  background-color: var(--net-danger);
}

.info-bg {
  background-color: var(--net-info);
}

#modal-mensagem {
  display: none;
  position: fixed;
  align-items: center;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: var(--net-black);
  background-color: var(--net-black-40);
  transition: 0.5s;
}

#modal-mensagem .modal-mensagem-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  background-color: var(--net-light);
  color: #000;
  border-radius: 8px;
  padding: 16px;

  overflow: hidden;

  transition: 0.5s;
  -webkit-animation: zoom 0.6s;

  animation: zoom 0.6s;

  box-shadow: 3px 3px 10px var(--net-black-50);
}

#modal-mensagem .modal-mensagem-titlebar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: -16px -16px 16px -16px;
  padding: 8px 16px;
  color: #fff;

  height: 40px;
}

#modal-mensagem .modal-mensagem-titlebar span {
  font-weight: bold;
  font-size: 1.2em;
  text-align: left;
}

#modal-mensagem .modal-mensagem-btn-close {
  cursor: pointer;
  font-size: 1.8em;
  font-weight: bold;
}

#modal-mensagem .modal-mensagem-text {
  font-size: 1.1em;
}

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes zoom {
  from {
    -webkit-transform: scale(0);
    transform: scale(0);
  }

  to {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/*
* Ouvidoria
*/
#denuncia {
  display: block;
}

#denuncia label {
  font-weight: bold !important;
}

#div-identificacao {
  overflow: hidden;
  transition: 0.5s;
}

.outro {
  overflow: hidden;
  transition: 0.5s;
  padding: 0 4px;
}

#formOuvidoria .form-group select {
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAHCAYAAAD9NeaIAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA+hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NDkxMSwgMjAxMy8xMC8yOS0xMTo0NzoxNiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDE1LTA0LTE3VDE3OjEyOjQyKzAyOjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxNS0wNC0yMFQxNzoxNjoyNCswMjowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAxNS0wNC0yMFQxNzoxNjoyNCswMjowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTU4MjBDRURERjVCMTFFNEEzN0FCODBEM0I5MTExMjkiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTU4MjBDRUVERjVCMTFFNEEzN0FCODBEM0I5MTExMjkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo2RUVFRDJCNkREQzMxMUU0QTM3QUI4MEQzQjkxMTEyOSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpFNTgyMENFQ0RGNUIxMUU0QTM3QUI4MEQzQjkxMTEyOSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuShL/sAAABeSURBVHjaYszOzjZnYGDYCcT8DMSBv0AcP2XKlKVEqmdgAuKTQOwOxB+JtQCIibYAZgkDkRaRZQGyJYQsItsCdEtwWUSRBdgsQbeIYgtAgAWHOMwiJSBezkAhAAgwAJSTG/DI0S9VAAAAAElFTkSuQmCC");
  background-position: 100% 50%;
  background-repeat: no-repeat;
  background-size: auto 15%;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

#formOuvidoria .form-group select,
#formOuvidoria .form-group input,
#formOuvidoria .form-group textarea {
  background-color: #fbfbfb !important;
  color: #555 !important;
}

#formOuvidoria .form-group select:focus,
#formOuvidoria .form-group input:focus,
#formOuvidoria .form-group textarea:focus {
  background-color: #ddd !important;
  color: #555 !important;
}


/*
* Clientes
*/
.clientes-logo .logo {
  display: flex;
  align-items: center;
  justify-content: center;

  padding: 30px;
}

.clientes-logo .logo img {
  width: 100%;
  max-width: 280px;
}

/*
* Curriculo / Vagas
*/
.curriculo-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--net-black-85);

  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  z-index: 100;
}

.curriculo-container .btn-fechar {
  position: absolute;
  top: 10px;
  right: 20px;
}

.curriculo-container .btn-fechar button {
  background-color: transparent;
  border: none;
  color: var(--net-white);
}

.curriculo-container h2 {
  color: var(--net-white) !important;
}

.curriculo-container h1 {
  color: var(--net-secondary) !important;
}

.curriculo-container .curriculo-form {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  max-width: 800px;

  margin-top: 16px;
  padding: 16px;
  border-radius: 12px;

  background-color: var(--net-secondary);
}

#formOuvidoria .form-group,
.curriculo-form .form-group {
  margin-top: 8px;
}

.curriculo-form label {
  color: var(--net-white);
  font-weight: bold;
  font-weight: 14px;
}

.curriculo-form .btn.bg-primary:hover {
  background-color: var(--net-black) !important;
}

.vaga-item a:hover,
.vaga-item a:focus {
  text-decoration: underline;
}

.mensagens,
.mensagens .alert {
  width: 100% !important;
}

.msg-erro,
.msg-campo {
  font-size: 12px;
  font-weight: bold;
  padding: 4px;
  margin-top: 4px;
}

.msg-erro {
  color: red;
}

.msg-campo {
  color: #000;
}

.input-erro {
  border: 1px solid red;
  background: #ffe8e8 !important;
}

.font-size-12 {
  font-size: 12px;
}

.font-size-14 {
  font-size: 14px;
}

.font-size-16 {
  font-size: 16px;
}

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

.font-size-20 {
  font-size: 20px;
}

.font-size-22 {
  font-size: 22px;
}

.font-size-24 {
  font-size: 24px;
}

.font-size-26 {
  font-size: 26px;
}

.font-size-28 {
  font-size: 28px;
}

.font-size-30 {
  font-size: 30px;
}

/*
* Footer link
*/

.footer .footer-link a {
  color: #fff;
  text-decoration: none;
  transition: all 300ms ease-in-out;
}

.footer .footer-link a:hover {
  color: #ffac07 !important;
  font-weight: bold;
}

/*
* Tabela lgpd
*/
.tbl-lgpd {
  width: 100%;
  border-collapse: collapse;
}

.tbl-lgpd td {
  padding: 8px;
  border: 1px solid #ddd;
}

/*
* PAGINACAO
*/
.paginacao {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
  gap: 4px;
}

.paginacao .pagina {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  width: 35px;
  height: 40px;

  color: var(--net-white);

  background-color: var(--net-primary);
}

.paginacao .pagina:hover {
  cursor: pointer;
  color: var(--net-white);

  background-color: var(--net-gray);
}

.paginacao .pagina.active {
  color: var(--net-black);
  font-weight: 600;

  background-color: var(--net-secondary);
}

.paginacao .pagina.anterior,
.paginacao .pagina.proxima {
  color: var(--net-white);
  background-color: var(--net-black);
  font-weight: 600;

  margin-right: 16px;
}

.paginacao .pagina.proxima {
  margin-right: 0;
  margin-left: 16px;
}

.paginacao .pagina.anterior:hover,
.paginacao .pagina.proxima:hover {
  color: var(--net-black);
  font-weight: 600;

  background-color: var(--net-secondary);
}

.paginacao .pagina.anterior.disabled,
.paginacao .pagina.proxima.disabled {
  cursor: not-allowed;
  color: var(--net-black);
  background-color: var(--net-light);
  font-weight: 600;
}

.paginacao .pagina a {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  color: var(--net-white);
  text-decoration: none;
}



@media screen and (max-width: 480px) {
  .clientes-home .logo {
    width: 30%;
  }

  .clientes-home .logo-cliente {
    width: 30%;
  }

  .curriculo-container .curriculo-form {
    max-width: 90%;
  }

  .logo-topo img {
    max-width: 250px;
  }
}