:root {
  --grad-cyan-blue: linear-gradient(to right, #0f2027, #203a43, #2c5364);
  --rhino: #2b475b;
  --lochmara: #0073c0;
  --green-haze: #009c48;
  --scarlet: #ff2e17;
  --paris-daisy: #ffee64;
  --shark: #2c2e35;
  --oslo-gray: #85878b;
  --mid-gray: #595b61;
  --iron: #d8d9da;
  --primary: var(var(--green-haze));
  --escuro: #23303b;
  --claro: #eee;
  --body-bg: var(#fff);
  --text-color: var(--escuro);
  --button-border-color: var(--escuro);
  --button-bg: #0c2235;
  --opcoes-bg: linear-gradient(to right, #2eac58, #61ca64) !important;
}

html,
body {
  height: 100%;
}
body {
  padding: 50px 0;
  background: var(--body-bg);
  font-family: Arial, Helvetica, sans-serif !important;
}

h1,h2,h3,h4,h5,h6{
  font-family: Arial, Helvetica, sans-serif !important;
}

/* grid =========================================*/
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.app-grid {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 40px auto 60px;
  grid-row-gap: 15px;
  grid-template-areas:
    "navbar"
    "main" "footer";
  height: 100%;
  max-width: 460px;
  margin: 0 auto;
}

#navbar {
  grid-area: navbar;
}
#main {
  grid-area: main;
  background-color: #ffffff;
  border: 1px solid #f4f4f4;
}
#footer {
  grid-area: footer;
  z-index: 1;
  background-color: #ffffff;

  /* defs */
  display: flex;
  width: 100%;
  max-width: 460px;
  padding: 0 0.5rem;
  align-items: center;
  justify-content: center;
}
.spc {
  margin: 25px 0;
}
#logo {
  height: 200px;
  width: 200px;
  background-color: yellow;
  margin: 0 auto;
}

/* fim: grid =========================================*/

h2 {
  text-align: left;
}
.forma-autenticacao {
  font-weight: bold;
  color: #666;
  font-size: 1rem;
}
.wrapper {
  height: 100%;
  box-sizing: border-box;
  max-width: 420px;
  margin: auto;
  font-size: 0.8rem !important;
}

.scroll-v {
  overflow-y: auto;
}

.pin-code {
  font-size: 2rem !important;
  height: 60px;
  text-align: center;
  font-weight: bold;
  border: 1px solid #95989a !important;
  border-radius: 0.5rem !important;
}

.button-icon {
  display: inline-block;
  max-width: 25px;
  max-height: 25px;
  margin-right: 0.5rem;
}

.box {
	text-align: center;
	margin-bottom:15px;
}
.box .icone {
	display: inline-block;
	border-radius: 100%;
	width: 62px;
	height: 62px;
	background: #1F647E;
	color: #8FB2BF;
	font-size: 3.5em;
	text-align: center;
	line-height: 62px;
}

.box-logo {
  display: flex;
  width: 80%;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  border-radius: 0.5rem;
  margin: 0 auto 40px auto;
  background: #ffffff;
  max-height: 250px;
  padding: 1rem;
  /* border: 1px solid #c1b6b6 !important; */
  border: none;
  max-width: 250px; max-height: 250px
}
.box .box-opcoes {
	display: table;
	background:#E5E9EC;
	border-radius: 7px;
	padding:35px 15px 10px 15px;
	display: block;
	text-align: left;
	margin-top:-33px;
	width: 100%
}

.nomeusr{
	vertical-align:bottom; 
	float:right; 
	margin-top:15px;
	margin-right:15px;
	font-family: MyriadProRegular;
}

.nomeusr span{
	color: #1f647e;
}

/* esconde a div da minha_conta */
.div_invisivel{
	display: none; 
	visibility: hidden;
}

#msg-servidor,
#msgWarn {
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 330px;
  margin: 0 auto;
  box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
}

#box-botoes {
  padding: 0 2rem;
}

#box-botoes svg {
  max-width: 25px;
  max-height: 25px;
  margin-right: 0.5rem;
}

.box-info {
  background-color: #f4f4f4;
  padding: 1rem;
}
.box-info h1,	
.box-info h2 {
  color: #1777A3; /* cor anterior #20A0DD */
  font-size: 1rem !important;
  font-weight: bold;
}

.box-info p {
  color: #74787b;
}

/* texto =========================================*/

.text-primary {
  color: #20a0dd !important;
}

/* botoes =========================================*/
.btn-icon-centralseguranca {
  background-image: url(../../images/icon-color-centralseguranca.svg);
}

/* botoes =========================================*/

.form-control {
  border: none;
  border-radius: 0;
  border-bottom: 1px solid #707070;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: transparent;
  border-bottom: 1px solid #707070;
  outline: 0;
  box-shadow: none;
}

label {
  font-size: 14px;/* valor anterior 0.8rem;*/
  display: inline-block;
  margin-bottom: 0;
}

.noselect {
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -khtml-user-select: none; /* Konqueror HTML */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}

/* botoes =========================================*/

.btn {margin: .25rem}
.btn,
.btn-secondary,
.btn-primary,
.btn-success,
.btn-opcoes {
  border: 1px solid #c1b6b6 !important;
  background-color: transparent !important;
  color: #100808;
  font-size: 0.9rem;
}

.btn-foto {
  text-align: center;    
}

.link-nqmc {
  text-align: center;
  font-size: 1rem;   
  justify-content: start; 
  padding: 2rem;
}

.btn-opcoes {
  text-align: left !important;
  padding-left: 1.5rem;
}

.btn:hover,
.btn-secondary:hover,
.btn-primary:hover,
.btn-success:hover,
.btn-opcoes:hover {
  border: 1px solid #100808 !important;
  color: #100808 !important;
}

.btn:focus,
.btn-secondary:focus,
.btn-primary:focus,
.btn-success:focus,
.btn-opcoes:focus {
  color: #100808 !important;
}

.btn.disabled,
.btn:disabled {
  opacity: 0.65;
  background-color: #ccc;
  border-color: #ccc;
}

.eye {
    cursor: pointer;
    height: 30px;   
    top: 0;
    right: 15px;
    position: absolute;
}

.btn-precisa-ajuda {
  background-color: transparent !important;
  border-radius: 0 !important;
  border-color: transparent !important;
  text-align: left !important;
  text-decoration: underline;
  color: #1777A3 !important; /* cor anterior #20a0dd*/
}

.btn-voltar {
  position: absolute !important;
  top: 0.5rem;
  left: 0.5rem;
  width: 40px;
  height: 40px;
  border: none !important;
  font-size: 2rem;
  padding: 0;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: start;
  color: #97989c;
}

/* footer =========================================*/

.logo-central {
  width: 40px;
  fill: var(--escuro);
  margin-right: 0.5rem;
}
.footer-versao {
  font-size: 0.75rem;
}
.footer-titulo {
  flex-grow: 1;
}
.logo-celepar {
  width: 100px;
}

@media (max-width: 575.98px) {
  #login-footer {
    left: 0;
  }
}
@media (min-width: 576px) {
  #login-footer {
    left: unset;
  }
  .btn-voltar{
    position: absolute;
    left: calc(50% - (230px));
  }
}



/* ========================================================== */

.ui-widget {
	font-family: Arial, Helvetica, sans-serif !important;
	font-size: .9rem;
}

#termodeaceite {
	height: 300px;
	font-size: 0.857em;
	color: #858585;
	line-height: 135%;
	overflow: auto;
  border: 1px solid #c1b6b6;
}
#termodeaceite p {
	color: #757575; /* cor anterior #858585;  */
}
#termodeaceite h3 {
	color: #858585;
	font-size: 1.4em;
	font-weight: bold;
}

#concordotermo,.checkboxTermo{
  display: flex;
  align-items: center;
  margin: 1rem 0;
}

.bt-modal-cnh {
	margin-top:10px;
	font-size: 16px;
}

 .main .modal-body p {color: #858585;}


 fieldset{
   border: none;
 }


.ui-inputfield.ui-state-default, .ui-inputfield.ui-state-default[disabled], .ui-inputfield.ui-state-default[readonly] {
  border: none !important;
  border-radius: 0 !important;
  border-bottom: 1px solid #707070 !important;
  box-shadow: none;
  background: #FFF !important;
  border-radius: 0 !important;
  font-weight: bold !important;
}
.ui-inputfield.ui-state-default[disabled], .ui-inputfield.ui-state-default[readonly] {
opacity: .4;
}

.ui-helper-hidden-accessible{
display: inline-block;
}

.content{
  height:100%;
  /* background-color: yellow; */
}

fieldset, form{
  height: 100%;
}

/* .form-rowx{
  border: 2px dotted blue;
}

.stretch{
  border: 2px dotted orange;
  flex-grow: 1;
} */

* Novos estilos para a tela de Alterar E-mail */

.text-center-custom {
  text-align: center;
  margin-bottom: 1.5rem;
  line-height: 1.4;
  color: #333;
}

/* Card de Pré-requisitos */
.card-requisitos {
  background-color: #f0f2f5;
  border-radius: 1rem;
  padding: 1.2rem;
  margin: 1.5rem 0;
}

.card-title-container {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #0056b3;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.card-title-container i {
  font-size: 1.2rem;
}

.card-requisitos ul {
  margin: 0;
  padding-left: 1.2rem;
}

.card-requisitos li {
  margin-bottom: 0.3rem;
  color: #333;
}

/* Container de botões da interface nova */
.btn-container-custom {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 2rem 0 1.5rem 0;
}

/* Botão Continuar (Azul e sem as bordas cinzas antigas) */
.btn-primary-custom {
  background-color: #0056b3 !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 20px !important;
  padding: 0.6rem 2rem !important;
  font-weight: bold !important;
  font-size: 1rem !important;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.btn-primary-custom:hover {
  background-color: #004085 !important;
  color: #ffffff !important;
}

/* Botão Voltar (Branco com borda fina) */
.btn-secondary-custom {
  background-color: #ffffff !important;
  color: #0056b3 !important;
  border: 1px solid #c1b6b6 !important;
  border-radius: 20px !important;
  padding: 0.6rem 2rem !important;
  font-weight: bold !important;
  font-size: 1rem !important;
  text-align: center;
  cursor: pointer;
  width: 100%;
}

.btn-secondary-custom:hover {
  background-color: #f8f9fa !important;
  border-color: #0056b3 !important;
}

/* Link inferior centralizado */
.link-footer-container {
  text-align: center;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

.link-footer-custom {
  color: #0056b3 !important;
  font-weight: bold;
  text-decoration: underline;
  font-size: 0.75rem;
}

/* Botão Continuar (Azul Gov.br) */
.btn-govbr-primary {
  background-color: #1351b4 !important;
  border-color: #1351b4 !important;
  color: #ffffff !important;
  padding: 0.6rem 0 !important;
  font-weight: bold !important;
}

.btn-govbr-primary:hover,
.btn-govbr-primary:focus {
  background-color: #0c3c8c !important;
  border-color: #0c3c8c !important;
  color: #ffffff !important; /* mantém branco */
}

/* Botão Voltar (Branco com borda sutil) */
.btn-govbr-secondary {
  background-color: #ffffff !important;
  color: #1351b4 !important;
  border: 1px solid #c1b6b6 !important;
  padding: 0.6rem 0 !important;
  font-weight: bold !important;
}

.btn-govbr-secondary:hover,
.btn-govbr-secondary:focus {
  background-color: #f8f9fa !important;
  color: #0c3c8c !important;
  border-color: #0c3c8c !important;
}