*{
  box-sizing: border-box;
  max-width: 100%;
}

body{
  margin: 0;
  padding: 0;
  background-color: #e8e8e8;
  /*background: radial-gradient(circle, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 50%, rgba(0,130,154,1) 100%);*/
  /*background-color: #74b9ff;*/
  font-family: 'Poppins', sans-serif;

  margin-bottom: 5vh;
}

.d-none{
  display: none !important;
}

main{
  margin-top: 20px;
}


/*===================================== HEADER =====================================*/

#header{
  padding: 10px 15px;
  background-color: white;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0px 2px 5px #000a;
}
#header img{
  width: auto;
  height: 75px;
  padding: 5px;
  margin-right: 15px;
  background-color: white;
  border-radius: 5px;
}
#headerLogo{
  display: flex;
  align-items: center;
}
#header a{
  text-decoration: none;
  color: #051923;

  margin: 0;
  font-weight: 700;
  font-size: 1.8rem;
  display: block;
  /*width: 150px;*/
  text-align: center;
}

#header-div-logo2{

  display: flex;

}

#voltar-action{
  font-size: 1.2rem !important;
  padding-right: 15px;
  display: flex !important;
  justify-content: space-between;
  align-items: center;
}
#voltar-action svg{
  margin-right: 10px;
  padding: 5px;
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background-color: #051923;
  color: white;
}

/* ===================================== CARREGAMENTO ===================================== */
/* .carregamento{
  top: 0px;
  left: 0px;
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.loader {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #3498db;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
} */

.carregamento{
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
position: absolute;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.7);
}
.loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}

.jimu-primary-loading:before,
.jimu-primary-loading:after {
position: absolute;
top: 0;
content: '';
}

.jimu-primary-loading:before {
left: -19.992px;
}

.jimu-primary-loading:after {
left: 19.992px;
-webkit-animation-delay: 0.32s !important;
animation-delay: 0.32s !important;
}

.jimu-primary-loading:before,
.jimu-primary-loading:after,
.jimu-primary-loading {
background: #076fe5;
-webkit-animation: loading-keys-app-loading 0.8s infinite ease-in-out;
animation: loading-keys-app-loading 0.8s infinite ease-in-out;
width: 13.6px;
height: 32px;
}

.jimu-primary-loading {
text-indent: -9999em;
margin: auto;
position: absolute;
right: calc(50% - 6.8px);
top: calc(50% - 16px);
-webkit-animation-delay: 0.16s !important;
animation-delay: 0.16s !important;
}

@-webkit-keyframes loading-keys-app-loading {

0%,
80%,
100% {
  opacity: .75;
  box-shadow: 0 0 #076fe5;
  height: 32px;
}

40% {
  opacity: 1;
  box-shadow: 0 -8px #076fe5;
  height: 40px;
}
}

@keyframes loading-keys-app-loading {

0%,
80%,
100% {
  opacity: .75;
  box-shadow: 0 0 #076fe5;
  height: 32px;
}

40% {
  opacity: 1;
  box-shadow: 0 -8px #076fe5;
  height: 40px;
}
}

/* .loader {
width: 8em;
height: 8em;
}

.loader__eye1,
.loader__eye2,
.loader__mouth1,
.loader__mouth2 {
animation: eye1 3s ease-in-out infinite;
}

.loader__eye1,
.loader__eye2 {
transform-origin: 64px 64px;
}

.loader__eye2 {
animation-name: eye2;
}

.loader__mouth1 {
animation-name: mouth1;
}

.loader__mouth2 {
animation-name: mouth2;
visibility: hidden;
}

@media (prefers-color-scheme: dark) {
:root {
--bg: hsl(var(--hue), 90%, 10%);
--fg: hsl(var(--hue), 90%, 90%);
}
}

@keyframes eye1 {
from {
transform: rotate(-260deg) translate(0, -56px);
}

50%,
60% {
animation-timing-function: cubic-bezier(0.17, 0, 0.58, 1);
transform: rotate(-40deg) translate(0, -56px) scale(1);
}

to {
transform: rotate(225deg) translate(0, -56px) scale(0.35);
}
}

@keyframes eye2 {
from {
transform: rotate(-260deg) translate(0, -56px);
}

50% {
transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1);
}

52.5% {
transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1, 0);
}

55%,
70% {
animation-timing-function: cubic-bezier(0, 0, 0.28, 1);
transform: rotate(40deg) translate(0, -56px) rotate(-40deg) scale(1);
}

to {
transform: rotate(150deg) translate(0, -56px) scale(0.4);
}
}

@keyframes eyeBlink {
from,
25%,
75%,
to {
transform: scaleY(1);
}

50% {
transform: scaleY(0);
}
}

@keyframes mouth1 {
from {
animation-timing-function: ease-in;
stroke-dasharray: 0 351.86;
stroke-dashoffset: 0;
}

25% {
animation-timing-function: ease-out;
stroke-dasharray: 175.93 351.86;
stroke-dashoffset: 0;
}

50% {
animation-timing-function: steps(1, start);
stroke-dasharray: 175.93 351.86;
stroke-dashoffset: -175.93;
visibility: visible;
}

75%,
to {
visibility: hidden;
}
}

@keyframes mouth2 {
from {
animation-timing-function: steps(1, end);
visibility: hidden;
}

50% {
animation-timing-function: ease-in-out;
visibility: visible;
stroke-dashoffset: 0;
}

to {
stroke-dashoffset: -351.86;
}
} */


/*==================================== BUSCA ====================================*/

.search-form{
  grid-column-start: 1;
  grid-column-end: 3;

  display: flex;
  justify-content: space-between;

  padding: 10px;
  background-color: white;
  border-radius: 0.75rem;
  height: fit-content;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,.1),
  0 2px 4px -2px rgba(0,0,0,.1);

  border: 1px solid transparent;

  margin: 5vh 0 20px 0;
}

.search-form:hover{
  border: 1px solid rgb(33 150 243);
  transition: all .2s ease-out;
}

.search-form #busca{
  width: 95%;
  height: 5vh;

  border: none;

  font-weight: 300;
  font-size: 1.2rem;
  font-family: 'Poppins', sans-serif;
}

.search-form #busca:focus{
  outline: none;
}

.search-form button{
  width: 4%;
  border: none;
  background-color: inherit;

  font-size: 1.5rem;
}

.search-form button:hover{
  color: rgb(33 150 243);
  cursor: pointer;
  transition: all .2s ease-out;
}

/*================= Error message ===================*/

.error-alert{
  width: 100%;
  height: 7vh;

  text-align: center;
  background-color: #e74c3c;
  color: white;

  display: flex;

  font-weight: 700;
  font-family: 'Poppins', sans-serif;
}
.error-alert p{
  margin: auto;
}







/*==================== Mobile ====================*/

/* tablet, landscape iPad, lo-res laptops ands desktops */
@media (max-width: 801px) {

  #header{
      flex-direction: column;
      font-size: 1.5rem;
  }

  .search-form #busca{
      width: 90%;
  }

  .search-form button{
      width: 10%;
  }

  #voltar-action{
      margin-top: 20px !important;
  }

}

/* smartphones, Android phones, landscape iPhone */
@media (max-width: 480px) {

  #header a{

      font-size: 1.4rem;

  }

  #header img{

      width: auto;
      height: 75px;

  }

  #header-div-logo2{

      flex-direction: column;
      justify-content: center;

  }

  #voltar-action{
      justify-content: center;
  }

  .search-form #busca{
      width: 85%;
  }

  .search-form button{
      width: 15%;
  }


}