@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap');

  :root {
    --login-primary: #111827;
    --login-primary-dark: #030712;
    --login-primary-hover: #374151;
    --login-primary-light: #6b7280;
    --login-primary-soft: #d1d5db;
    --login-primary-soft-bg: #f3f4f6;
    --login-surface: #ffffff;
    --login-text: #111827;
    --login-muted: #6b7280;
    --login-border: rgba(17, 24, 39, 0.12);
    --login-shadow: rgba(17, 24, 39, 0.16);
  }
  
  .push{
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
    
  .push:hover {
    -webkit-transform: scale(1.1) !important;
    transform: scale(1.04) !important;
  }
  
  
  .size__icon{
    width: 180px;
    height: 110px;
  }
  
  .bg__grey{
    background-color: #374151;
  }
  
  .nav__responsive{
    margin: 20px;
  }
  
  .nav__button{
    margin: 16px;
  }
  /* Fin Pantalla Login */
  
  /* Incio Pantalla welcome */
  .link__nav{
    margin-right: 10px;
    outline: none;
    text-decoration: none;
    padding: 2px 1px 0;
   color: #f8f8f8;
  }
  
  .link__nav:hover {
    outline: none;
    text-decoration: none;
    text-shadow: 5px 5px 2px rgba(237, 237, 237, 0.152);
    color: rgb(193, 193, 193);
    letter-spacing: 1px;
  }
  

  .with_basic{
    width: 340px!important;
  }
  
    @media screen and (max-width:600px) {
    .nav__responsive{
      margin: 55px;
    }
      .with_basic{
        width: 210px!important;
      }
  }
  
/* form login */
  body{
    margin:0;
    color:var(--login-text);
    background-image: url(../Images/3.png);
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    font:600 16px/18px 'Open Sans',sans-serif;
    font-family: "Poppins", sans-serif!important;
    }

    *,:after,:before{box-sizing:border-box}
    .clearfix:after,.clearfix:before{content:'';display:table}
    .clearfix:after{clear:both;display:block}
    a{color:inherit;text-decoration:none;font-family: "Poppins", sans-serif!important;}
    
    .login-wrap{
      width:100%;
      margin:auto;
      max-width:525px;
      height: 100vh;
      min-height:670px;
      position:relative;
      background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.92), transparent 34%),
        linear-gradient(135deg, #ffffff 0%, #f3f4f6 45%, #d1d5db 100%);
      /* background-image: url(../Images/portada2.png);
      background-repeat: no-repeat;
      background-attachment: fixed; */
      border-right:1px solid var(--login-border);
      box-shadow:0 18px 42px -24px var(--login-shadow);
    }

    @media screen and (min-width: 768px) {
      .login-wrap{
        max-width:600px;
        margin: 0 auto 0 0;
      }
    }

    .login-html{
      width:100%;
      height:100%;
      position:absolute;
      padding:50px 70px 50px 70px;
      background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.74) 0%, rgba(249, 250, 251, 0.58) 48%, rgba(209, 213, 219, 0.54) 100%);
      backdrop-filter: blur(6px);
    }
    .login-html .sign-in-htm,
    .login-html .sign-up-htm{
      top:0;
      left:0;
      right:0;
      bottom:0;
      position:absolute;
      transform:rotateY(180deg);
      backface-visibility:hidden;
      transition:all .4s linear;
    }
    .login-html .sign-in,
    .login-html .sign-up,
    .login-form .group .check{
      display:none;
    }
    .login-html .tab,
    .login-form .group .label,
    .login-form .group .button{
      text-transform:uppercase;
    }
    .login-html .tab{
      font-size:22px;
      margin-right:15px;
      padding-bottom:5px;
      margin:0 15px 10px 0;
      display:inline-block;
      border-bottom:2px solid transparent;
      color:var(--login-muted);
    }
    .login-html .sign-in:checked + .tab,
    .login-html .sign-up:checked + .tab{
      color:var(--login-primary-dark);
      border-color:var(--login-primary);
    }
    .login-form{
      min-height:345px;
      position:relative;
      perspective:1000px;
      transform-style:preserve-3d;
    }
    .login-form .group{
      margin-bottom:15px;
    }
    .login-form .group .label,
    .login-form .group .input,
    .login-form .group .button{
      
      color:var(--login-text);
      display:block;
    }
    .login-form .group .input,
    .login-form .group .button{
      border:1px solid var(--login-border);
      padding:15px 20px;
      border-radius:25px;
      background:#fff;
      box-shadow:0 10px 24px -22px var(--login-shadow);
    }
    .login-form .group input[data-type="password"]{
      text-security:circle;
      -webkit-text-security:circle;
    }
    .login-form .group .label{
      color:var(--login-muted);
      font-size:12px;
    }
    .login-form .group .button{
      background:linear-gradient(135deg, var(--login-primary-dark) 0%, var(--login-primary) 58%, var(--login-primary-light) 100%);
      color:#fff;
      border:0;
    }
    .login-form .group .button:hover{
      background:linear-gradient(135deg, var(--login-primary) 0%, var(--login-primary-hover) 100%);
    }
    .login-form .group .input:focus{
      border-color:var(--login-primary-light);
      box-shadow:0 0 0 4px rgba(17, 24, 39, 0.10);
    }
    .login-form .group label .icon{
      width:15px;
      height:15px;
      border-radius:2px;
      position:relative;
      display:inline-block;
      background:#fff;
      border:1px solid var(--login-border);
    }
    .login-form .group label .icon:before,
    .login-form .group label .icon:after{
      content:'';
      width:10px;
      height:2px;
      background:var(--login-primary);
      position:absolute;
      transition:all .2s ease-in-out 0s;
    }
    .login-form .group label .icon:before{
      left:3px;
      width:5px;
      bottom:6px;
      transform:scale(0) rotate(0);
    }
    .login-form .group label .icon:after{
      top:6px;
      right:0;
      transform:scale(0) rotate(0);
    }
    .login-form .group .check:checked + label{
      color:var(--login-primary-dark);
    }
    .login-form .group .check:checked + label .icon{
      background:var(--login-primary);
    }
    .login-form .group .check:checked + label .icon:before{
      transform:scale(1) rotate(45deg);
    }
    .login-form .group .check:checked + label .icon:after{
      transform:scale(1) rotate(-45deg);
    }
    .login-form .group .check:checked + label .icon:before,
    .login-form .group .check:checked + label .icon:after{
      background:#fff;
    }
    .login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
      transform:rotate(0);
    }
    .login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
      transform:rotate(0);
    }
    
    .hr{
      height:2px;
      margin:60px 0 50px 0;
      background:var(--login-border);
    }
    .foot-lnk{
      text-align:center;
      color:var(--login-primary);
    }
    
    input:focus{
      outline: none;
    }