/* Import Google font - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap");
body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /*background: url(../img00/login02000.jpg);*/
  background-size:cover;
  background-repeat: no-repeat;
  opacity: 85%;    
}

h2{
    text-decoration: none;
    
    font-size: 15px;
    text-align: center;
    color: #fff;
    font-weight: 800;
    font-style: italic;
}

.nivel00login02 {
  position: relative;
 height: 550px;
  max-width: 470px;
  width: 100%;
  border-radius: 12px;
  padding: 20px
    30px
    120px;
  background: var(--fondos003);
  box-shadow: 0
    5px
    10px
    rgba(
      0,
      0,
      0,
      0.1
    );
  overflow: hidden;
}
.nivel01alogin02.nivel01clogin02 {
  
 position: absolute;
  left: 50%;
  bottom: 15px;
  transform: translateX(
    -50%
  );
  width: calc(
    100% +
      220px
  );
  padding: 20px
    140px;
  border-radius: 50%;
/*  height: 100%;*/
  background: #fff;
  transition: all
    0.6s
    ease;
}
.nivel00login02.active
  .nivel01alogin02.nivel01clogin02 {
  bottom: -15%;
  border-radius: 35%;
  box-shadow: 0 -5px
    10px rgba(0, 0, 0, 0.1);
}
.nivel01alogin02
  header {
  font-size: 30px;
  text-align: center;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}
.nivel01alogin02.nivel01blogin02
  header {
  width: 50%;
  margin: auto;      
  color: #fff;
  border-style: solid;
  border-radius: 10px;
  box-shadow: 0px 3px 0px 3px;      
}
.nivel01alogin02.nivel01clogin02
  header {
  width: 50%;
  margin: auto;      
  color: var(--letra003);
  border-style: solid;
  border-radius: 10px;
  box-shadow: 0px 3px 0px 3px;      
}
.nivel00login02.active
  .nivel01alogin02.nivel01clogin02
  header {
  opacity: 1;
}
.nivel00login02.active
  .signup
  header {
  opacity: 0.6;
}
.nivel00login02
  form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 40px;
}
form
  input, select {
  height: 25px;
  outline: none;
  border: none;
  padding: 0
    15px;
  font-size: 16px;
  font-weight: 400;
  color: var(--letra002);
  border-radius: 8px;
  background: #fff;
}

form select {
  height: 25px;
  outline: none;
  border-style: solid;
  border-color: var(--letra002);
  border-width: 1px;    
 
  color: var(--letra002);
  border-radius: 8px;
  background: #fff;
}

.nivel01alogin02.nivel01clogin02
  input {
  border: 1px
    solid
    #aaa;
}
.nivel01alogin02.nivel01clogin02
  input:focus {
  box-shadow: 0
    1px 0
    #ddd;
}
/*form
  .checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
}
.checkbox
  input[type="checkbox"] {
  height: 16px;
  width: 16px;
  accent-color: #fff;
  cursor: pointer;
}
form
  .checkbox
  label {
  cursor: pointer;
  color: #fff;
} **/
form a {
  color: var(--letra001);
  text-decoration: none;
}
form
  a:hover {
  text-decoration: underline;
}
form
  input[type="submit"] {
  margin: auto;      
  width: 60%;
  margin-top: 15px;
  padding: none;
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}

.nivel01alogin02.nivel01blogin02
  input[type="submit"] {
  background: var(--fondos003);
  height: 50px; 
  color: #fff;
  border-style: solid;
  border-radius: 10px;
  box-shadow: 0px 1px 0px 1px; 
  border-color:var(--fondos000);     
        
}

.nivel01alogin02.nivel01clogin02
  input[type="submit"] {
  background: var(--fondos001);
  height: 30px;
  width: 40%;
  color: #fff;
  font-size: 16px;
  border-style: solid;
  border-radius: 10px;
  box-shadow: 0px 1px 0px 1px; 
  border-color:var(--fondos003);     
}

.alerta01{
    font-family: 'Arial';
    font-size: 20px;
    text-align: center;
    
}

#btnact{
  background: #ff6c00;
  margin: auto;
  height: 30px;
  width: 40%;
  font-size: 16px;
  color: #fff;
  border-style: solid;
  border-radius: 10px;
  box-shadow: 0px 1px 0px 1px; 
  border-color:#fde6b2;     
  font-weight: 800;
}

/******************/

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

.nivel01alogin02.nivel01clogin02 header, .nivel01alogin02.nivel01blogin02 header {
    width: 90%;
 
}
     
#btnact, .nivel01alogin02.nivel01clogin02
  input[type="submit"] {
  width: 80%;
  
}
    
}