/*
html, body{
font-family: Arial, Helvetica, sans-serif;
min-height: 100%;
min-width: 100%;
}

body{
  background: linear-gradient(0deg, rgb(82, 184,148 ), rgb(56, 121, 101), rgb(23, 76, 59), rgb(56, 121, 101), rgb(82, 184,148 ));
}
*/
input, option, select, .arquivo{
  padding: 1px;
  margin: 1px;
  outline: none;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  /*font-size: 14px;*/
  font-size: 2.2vmin;
  background: #fff;
  }
  /*div, */
  form{
      padding: 0;
  margin: 0;
  outline: none;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  /*font-size: 14px;*/
  font-size: 2.2vmin;
  background: transparent;
  }
  h1, h2, h3{
      margin: 0;
      margin-top: 2px;
      color: #222;
  }
  h1 {
  font-size: 5vmin;
  }
  h2 {
    font-size: 4vmin;
  }
  h3 {
    font-size: 3vmin;
  }
  h3,h2 > font{
    margin-left: 2px;
  }
  .label-token{
    color: #222;
    padding-left:3px;
    padding-right:3px;
    border: 2px solid #2eacfb;
    background-color: transparent; /*rgba(255,255,255,0.0); */
}
  .noselect{
  display: flex;
  align-items: center;
  padding: 1px;
  margin: 1px;
  width: auto;
  outline: none;
  border: none;
  font-family: Roboto, Arial, Helvetica, sans-serif;
  font-size: 2.2vmin;
  background: #fff;
  }
  .content-home{
      overflow: auto;
      background-color: #aaa;
  }
  .main-block {
    display: block;
    position: relative;
    top: 0px;
    margin-left: auto;
    margin-right: auto;
    flex-wrap: wrap;
    justify-content: center;
    /*
    max-height: 100%;
    max-width:  100%;
    min-height: 250px;
    min-width:  90%;
    */
    width:100%;
    height: Calc(100vh - 25.2vh);
   /* height: inherit; */
  align-items: center;
  background-color: #aaa;
  /*background: transparent; */
  overflow-y: visible;
  overflow-x: auto;
  }
  form {
  width: 99%;
  padding: 3px;
  margin-left: auto;
  margin-right: auto;
  }
  .bloco-neon-sinza3{
      display: block;
      position: relative;
      top: 0px;
      left: 0px;
      height: inherit;
      background-color: #aaa;
      overflow-y: auto;
      overflow-x: auto;
  }
  .neon{
    position: relative;
    left: 0px;
    right: 0px;
    width: 100%;
    height: 100%;
    padding: 0;
    outline: none;
    background: linear-gradient(-65deg, #525252,#767676,#939393, #fff 50%, #939393,#767676,#525252);
    /*
    background: linear-gradient(-65deg, rgb(9, 152, 255),rgb(45, 178, 255),rgb(41, 157, 241),  rgb(14, 106, 255), rgb(34, 163, 255),rgb(13, 134, 255), rgb(255, 255, 255), rgb(42, 165, 253),rgb(196, 237, 252), rgb(8, 152, 255),rgb(69, 177, 255),rgb(0, 149, 255)); */
    animation: animate-neon 52s linear infinite;
    background-size: 150%;
    background-attachment: fixed;
    overflow: visible;
    border-radius: 5px;
  }
  /* ------------------------- */
  .bloco-neon{
    position:relative;
    top:2px;
    
    bottom:4px;
}
.bloco-neon > .neon{
    border-radius: 5px;
    padding:3px;
}
.bloco-neon-sinza{
    position:relative;
    top:15px;
    /* height: inherit; */
    bottom:4px;
    overflow: auto;
}
.bloco-neon-sinza > .neon{
    border-radius: 5px;
    background-color: #444;
    background: linear-gradient(-65deg, #525252,#767676,#939393, #fff 50%, #939393,#767676,#525252);
    animation: animate-neon-sinza 50s linear infinite;
    background-size: 150%;
    background-attachment: fixed;
    overflow: visible;
    padding:3px;
}
/* --------------------------------- */
  @keyframes animate-neon {
    100% {
      background-position: 0%;
    }
    50% {
      background-position: 150%;
    }
    0% {
      background-position: 300%;
    }
  }
  
  fieldset {
  border-style: solid;
  border-top: 0.1vmax solid;
  border-left: 0.1vmax solid;
  border-right: 0.1vmax solid;
  border-bottom: 0.1vmax solid;
  color: #fff;
  background: #aaa;
  }
  .account-details, .personal-details {
  display: flex;
  flex-wrap: wrap;
   /*justify-content: space-between;*/
  align-items: center;
  justify-content: flex-end;
  /*gap: 4px;  espaço entre as colunas */
  width: 100%;
  
  padding:3px;
  }
  .account-details >div, .personal-details >div {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 50%;
  margin-top: 7px;
  margin-bottom: 7px;
  }

  /* .arquivo, input, select     width: inherit; */
  .account-details >div input, .personal-details >div input{
   width: 60%;
  border: 2px solid #222;
  }
  
  .account-details >div > select, .personal-details >div > select{
   width: 60%;
   color:#0a0;
  border: 2px solid #222;
  }
  
  /*.account-details > div > font > select {
  .account-details > div > font:first-of-type > select {
   width: 60%;
  border: 2px solid #277eff;
  }
  .personal-details > div > font > select{
      width: 60%;
  border: 2px solid #277eff;
  }
  */
  
  
  
  
  label{
  padding: 3px;
  text-align: right;
  color:#222;
  white-space: nowrap;  /* evita quebras de linha */
  }
  
  input, .arquivo {
  padding: 2px;
  vertical-align: middle;
  }
  .checkbox {
  margin-top: auto;
  margin-bottom: auto;
  }
  select {
  /* background: transparent; */
  border: 2px solid #222;
  color:#7b7bdd;
  justify-content: center;
  align-items: center;
  }
  option {
  /* background: transparent; */
  color:#f00;
  border: 2px solid #222;
  /*
  justify-content: center;
  align-items: center;
  text-align:center;
  */
  }
  .radio{
    padding-top: 0px;
    padding-bottom:0px;
    
    min-height: 2.2vmin;
    max-height: 2.2vmax;
  }
  .radio input {
  width: auto;
  }
  .radio label {
  padding: 0 3px 0 0;
  }
  .bdate-block {
  display: flex;
  justify-content: space-between;
  padding: 0px 0;
  }
  .birthdate input {
  width: 120px;
  vertical-align: unset;
  }
  .checkbox input, .children input {
  width: auto;
  margin: -2px 10px 0 0;
  }
  .checkbox alink{
  color: #777;
  }
  .checkbox a:hover {
  color: #222;
  }
  .check{
    cursor: pointer;
  }
  
  /*
  button {
    position: relative;
    cursor: pointer;
  width: 140px;
  padding: 10px 0;
  margin: 12px auto;
  border-radius: 8px;
  border: yes;
  border-top: 2px solid;
  border-left: 2px solid;
  border-right: 2px solid;
  border-bottom: 2px solid;
  outline: none;
  font-size: 14px;
  font-weight: 600;
  color: #52B894;
  letter-spacing: 4px;
  }
  button:hover {
  background: linear-gradient(-45deg, rgb(82, 184,148 ), rgb(17,  71,54), rgb(82, 184,148 ));
  border: yes;
  border-top: 2px solid;
  border-left: 2px solid;
  border-right: 2px solid;
  border-bottom: 2px solid;
  color: #fff;
  }
  */
  .button-form{
    position: relative;
    top: 3px;
    cursor: pointer;
    width: 120px;
    /*padding: 10px 0;*/
    margin: 4px auto;
    border-radius: 0px;
    border: 2px solid;
    outline: none;
    padding: 2px;
    border-top: 2px solid;
    border-left: 2px solid;
    border-right: 2px solid;
    border-bottom: 2px solid;
    background: linear-gradient(-65deg, #333, #ddd 50%, #333);
    background-size: 400%;
    color: #ffffff;
    font-size: 22px;
    letter-spacing: 1px;
  }
  
  /*
  button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: linear-gradient(-45deg, rgb(82, 184,148 ), rgb(17,  71,54), rgb(82, 184,148 ));
    background-size: 400%;
    border-radius: 8px;
    opacity: 0;
    transition: .5s;
  }
  */
  form >button >font {
    color: #fff;
  }
  form >button:hover >font {
    color: #fff;
  }
  form >button:hover {
    animation: animate-bgbutton 8s linear infinite;
    border: solid;
    border-top: 2px solid;
    border-left: 2px solid;
    border-right: 2px solid;
    border-bottom: 2px solid;
    color: #ffffff;
  }
  form >button:hover::before {
    filter: blur(1px);
    opacity: 0.9;
    animation: animate-bgbutton 10s linear infinite;
  }
  @keyframes animate-bgbutton {
    100% {
      background-position: 0%;
    }
    50% {
      background-position: 200%;
    }
    0% {
      background-position: 400%;
    }
  }

/* Estilo para telas menores que 800px 
@media screen and (max-width: 800px) {*/

  .token{
    animation: anim-tokenbgcolor;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    background: rgb(250, 250, 250);
    /* linear-gradient(to right, rgb(17,  71,54), rgb(82, 184,148 ));*/
  }
  
  @keyframes anim-tokenbgcolor {
      0%{
          background-color: rgb(250, 250, 250); /*#efefef rgb(200, 200, 200);/*translateY(0px); */
      }45%{
            background-color: rgb(250, 250, 250);
          }50%{
                background-color:  #777; /*rgb(210, 210, 250);translateY(-150px);*/
              }55%{
                    background-color: rgb(250, 250, 250);
                  }100%{
                        background-color: rgb(250, 250, 250); /*#efefef; */
                       }
  
  }


@media screen and (max-width: 768px){
  .content-home{
      background-color: #aaa;
  }
  .main-block {
    height: Calc(100vh - 30vh);
   /* height: inherit; */
  background-color: #aaa;
  overflow-y: auto;
  overflow-x: auto;
  }
  .account-details >div input, .personal-details >div input{
      padding: 1px;
  margin: 1px;
  outline: none;
  font-family: Roboto, Arial, Helvetica, sans-serif;
   font-size: 3.2vmin;
  color:black;
  }
  .account-details >div > select, .personal-details >div > select{
      padding: 1px;
  margin: 1px;
  outline: none;
  font-family: Roboto, Arial, Helvetica, sans-serif;
   font-size: 3.2vmin;
  color:red;
  }
  .account-details >div > label, .personal-details >div > label{
      padding: 1px;
  margin: 1px;
  outline: none;
  font-family: Roboto, Arial, Helvetica, sans-serif;
   font-size: 3.2vmin;
  color:#071d9b;
  }
  
  .account-details >div, .personal-details >div {
  width: 100%;
  }
  label {
  width: 40%;
  }
  input, option, select{
  width: 50%;
  background: #fff;
  border: 2px solid #277eff;
  border-top: 2px solid;
  border-left: 2px solid;
  border-right: 2px solid;
  border-bottom: 2px solid;
  }
  .children{
    padding: 4px 0;
    border: 2px;
    border-top: 2px solid;
    border-left: 2px solid;
    border-right: 2px solid;
    border-bottom: 2px solid;
    border-color: #277eff;
  }
  .radio{
    padding: 4px 0;
    border: 2px;
    border-top: 2px solid;
    border-left: 2px solid;
    border-right: 2px solid;
    border-bottom: 2px solid;
    border-color: #277eff;
  }
  #ntoken{
    display: flex;
    position: relative;
    left: 40%;
    width: 60px;
    padding: 5px;
    margin-left: 10px;
    align-items: center;
    text-align: center;
    border: 2px;
    border-radius: 10px;
    border-top: 2px solid;
    border-left: 2px solid;
    border-right: 2px solid;
    border-bottom: 2px solid;
    border-color: #0c89ff;
  }
  #ntoken:hover{
    cursor: pointer;
    content: "Trocar : ";
    background: linear-gradient(-65deg, rgb(14, 114, 255),rgb(75, 146, 226),rgb(17, 94, 188),     rgb(78, 175, 249),     rgb(16, 111, 255),rgb(95, 169, 254),rgb(56, 119, 245));
    background-size: 400%;
    animation: animate-bgbutton 8s linear infinite;
    color: #fff;
  }
  .ftrt{
    margin-left: 11px;
  }
  /* linear-gradient(to right, rgb(17,  71,54), rgb(82, 184,148 ));*/
 }