: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 {
  height: 100%;
}
body {
  padding: 40px 0;
  height: calc(100% - 80px);
  background: var(--body-bg);
  /*font-family: Helvetica, Arial, Helvetica, sans-serif;*/
}

/* grid =========================================*/
html,
body {
  height: 100%;
  padding: 0;
  margin: 0;
}
.app-grid {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: 40px auto 50px;
  grid-row-gap: 15px;
  grid-template-areas:
    "navbar"
    "main" "footer";
  height: 100%;
  height: calc(100% - 20px);
  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: 420px;
  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;
}

#eyeSenha, #eyeSenhaExpresso {
  cursor: pointer;
  padding: 0.5rem 0rem;  
  height: 30px;
  width: 100%;
}

#icone-senha {
    background: none;
    border: none;
    border-bottom: 1px solid #333;
    border-radius: 0;
    padding: 0;
}

.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-logo {
  display: flex;
  width: 80%;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  border-radius: 0.5rem;
  margin: 0 auto 32px auto;
  background: #ffffff;
  max-height: 250px;
  padding: 1rem;
}
#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 =========================================*/

#box-botoes {padding: 0 2rem; transition: all .5s ease-in; overflow: hidden;}
#box-botoes.loading {height:0; opacity: 0;}
#box-botoes.active {height:auto;}
#box-botoes svg {max-width: 25px; max-height: 25px; margin-right: 0.5rem;}

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

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

.box-info {
  background-color: #f4f4f4;
  padding: 1rem;
}
.box-info h2 {
  color: #20a0dd;
  font-size: 1rem !important;
  font-weight: bold;
}

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

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

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

/* loading =========================================*/
.loader-container {display: flex; justify-content: center; align-items: center; height:0; transition: all .5s ease-in; opacity: 0;}
.loader-container.active {height:90px; opacity: 1;}
.loader-container.loaded {height: 0; opacity: 0; overflow: hidden;}
.v1 .custom-loader {width: 50px; height: 50px; display: grid; animation: s4 2s infinite;}
.v1 .custom-loader::before, .v1 .custom-loader::after {content:""; grid-area: 1/1; border:8px solid; border-radius: 50%; border-color:#99CA3C #99CA3C #0000 #0000; mix-blend-mode: darken; animation: s4 1s infinite linear;}
.v1 .custom-loader::after {border-color:#0000 #0000 #1699B8 #1699B8; animation-direction: reverse;}
.v2 .custom-loader {width:50px; height:50px; border-radius:50%; border:8px solid; border-color:#1699B8; border-right-color: #99CA3C; animation:s2 1s infinite linear;}
.v3 .custom-loader {width: 50px; height: 50px; border-radius: 50%; background: radial-gradient(farthest-side,#99CA3C 94%,#0000) top/8px 8px no-repeat,conic-gradient(#0000 30%,#99CA3C); -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0); animation:s3 .5s infinite linear;}
.loader-container.disabled .custom-loader {animation: none;}
@keyframes s2 {to{transform: rotate(1turn)}}
@keyframes s3{100%{transform: rotate(1turn)}}
@keyframes s4{100%{transform: rotate(1turn)}}

/* 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;
}

.btn-primary.focus,.btn-primary:focus,
.btn-secondary.focus, .btn-secondary:focus {
	color: #000;
	background-color: #5a6268;
	border-color: #545b62;
	box-shadow: 0 0 0 .2rem rgba(130,138,145,.5);
	font-weight: bold;
}

.btn-govbr-primary.focus,.btn-govbr-primary:focus,
.btn-govbr-secondary.focus, .btn-govbr-secondary:focus {
	color: #1351b4;
	box-shadow: 0 0 0 .2rem rgba(130,138,145,.5);
	font-weight: bold;
}

label {
  font-size: 0.8rem;
  display: inline-block;
  margin-bottom: 0;
}

.govbr-label {
  font-size: 1.2rem;
  font-weight: bold !important;
  letter-spacing: -0.09rem;
}

.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,
.btn-secondary,
.btn-primary,
.btn-success,
.btn-opcoes {
  border: 1px solid #c1b6b6 !important;
  background-color: transparent !important;
  color: #100808;
  font-size: 0.9rem;
}

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

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

.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-govbr:hover,
.btn-govbr-secondary:hover,
.btn-govbr-primary:hover,
.btn-govbr-success:hover,
.btn-govbr-opcoes:hover {
  border: 1px solid #100808 !important;
  color: #1351b4 !important;
}

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

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

.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; line-height: 120%;
}
.logo-celepar {
  width: 100px;
}

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

.tit-opcoes-login {
    left: 160px;
    top: -25px;
    color: #2b475b;
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    font-size: 0.8rem;
}