html,body{margin:0;padding:0;background:#7b7b7c}

body {margin: 0;padding-top: env(safe-area-inset-top); min-height:100dvh}

.error--auth{color: darkred; position: absolute; font-family: sans-serif; font-weight: 200; font-size: 0.8em; margin-top: -30px; padding: 0 20px; width: 100%; text-align: right}
.page-center{ min-height:100dvh;margin: 0; display: flex;  align-items: center; justify-content: center; padding:calc(env(safe-area-inset-top) + 20px) 16px calc(env(safe-area-inset-bottom) + 50px) 16px}

.page-center > #bg--global{position:fixed;inset:0;width:100%;height:100%;object-fit:cover; object-fit: cover;filter: brightness(0.7) contrast(0.3);z-index: 0;}

.card{width: min(92vw, 420px);   /* si adatta al mobile */max-width: 340px;position: relative;z-index: 2;overflow: hidden;border-radius: 8px;}

#bg--blur{display: none}

h3{display: inline-block;position: absolute; width: 100%; bottom: 0; padding: 30px 5px; text-align: center;  color: #444;font-family: sans-serif; font-weight: 400; font-size: 0.9em; z-index: 2}
/*.card--login > #bg--blur{z-index: -1; filter: blur(12px) ; position: absolute; top: 50%; left: 50%; margin-left: -50vw; margin-top: -50vw; height: 100vw}*/
/*.card--login > .wrapper{position: absolute; width: 100%;height: 100%; background: rgba(200,200,200,0.6); z-index: -1;}*/

.card--login h2{text-align: center;font-family: sans-serif;position: relative;font-weight: normal;width: 100%;text-align: center;font-size: 2.5em;color: #000;margin: 0;margin-bottom: 40px;padding-top: 30px}

.card--login input, .card--login button{
  padding: 10px 20px;
  border-radius: 8px;
  /*background: rgba(29,29,29,0.9);*/
  background: rgba(20,20,20,0.8);
  border: solid 2px #111;
  font-size: 0.9em;
  color: #aaa
}
.card--login button:hover{background: #121212;box-shadow: 0 0 5px 5px rgba(0,0,0,0.1)}
.card--login input::placeholder{color: #888; letter-spacing: 0.5px; font-weight: 300;}
.link--token, .link--login{display: block; width: max-content; margin: 0 auto; margin-bottom: 30px;color: #000; padding: 10px 20px; font-family: sans-serif; font-size: 0.9em}


.card--login form{width: 100%;min-width: 0;}
  .card--login input{display: block; width: 100%; margin-top: 20px}
  .card--login input,.card--login button{border-radius: 30px;}
  .card--login button{width: 100%;}
  .card--login > form > hr{margin: 30px 45%; border-color: #222; border-style: solid; border-width: 1px 0 0 0; }
  .card--login > hr{  border-bottom: 1px solid;
    border-image: linear-gradient(
      90deg,
      rgba(23, 130, 80, 1) 0%,
      rgba(16, 66, 204, 1) 50%,
      rgba(179, 36, 64, 1) 100%
    ) 1;
    margin: 10px 40%;
    margin-top: 25px
  }

  @media screen and (max-width: 900px){

    body{position: fixed; width: 100%}
  .page-center > #bg--global/*, #bg--blur*/{/*transform: scale(1.5);*/}
  /*  h3{bottom: auto;}*/
  }
  @media screen and (max-width: 620px){
    /*.card--login > #bg--blur,  .card--login > .wrapper{display: none;}*/
    .card--login{border: none; box-shadow: none;}
  .page-center > #bg--global/*, #bg--blur*/{ /*transform: scale(2);*/}

  }
  @media screen and (max-width: 540px){
    /*.card--login > #bg--blur,  .card--login > .wrapper{display: none;}*/
    .card--login{border: none; box-shadow: none;}
    .page-center > #bg--global/*, #bg--blur*/{ /*transform: scale(2.5);*/}
    .card{ width: 96vw; }

  }

  @media screen and (max-width: 900px) and (orientation : landscape){
      h2{margin-bottom: 0 !important}
      form > hr{margin: 10px !important}
      input{margin-bottom: 10px !important}
      .card > hr{margin: 0}
  }
/*----------------------------------EXTENSION---------------------------------*/

/*correction*/
.clearfix:after {visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0;}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/*inner padding*/
*,
*:before,
*:after{-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}