*{box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; position:relative;}
html, body{margin:0; padding:0; width: 100%; height: 100%;}
a{text-decoration: none; color: white;}
button{background:none; border:1px solid rgba(0,0,0,0.6); border-radius:5px; padding:7px 10px; cursor:pointer; font-weight: 600;}
input, select, textarea{ border-radius: 5px; border:1px solid rgba(0,0,0,0.1); padding:8px 10px;}
i{display:inline-block; vertical-align: middle;}

/* ================================================= */
.baenvicor{ width: 100%; height: 100vh; position:fixed; top:0; left: 0; background:rgba(0,0,0,0.6); display:none;}
.baenvicor > div{ width: 300px; height: auto; background:white; margin:50px auto; border-radius:5px; box-shadow:0 0 15px 0 black; padding:15px;}
.baenvicor > div > div.a{ font-weight: 600; margin-bottom: 15px; font-size: 20px; letter-spacing: 0.5px;}
.baenvicor > div > div.b{ color:rgba(0,0,0,0.8); margin-bottom: 10px;}
.baenvicor > div > input{ width: 100%; border:1px solid rgba(0,0,0,0.6); margin-bottom: 10px;}
.baenvicor > div > div.c{ display:flex; justify-content: flex-end;}
.baenvicor > div > div.c > button{ margin:0 3px;}
.baenvicor > div > div.c > button.b{ border:none; background:blue; color:white; }
.baenvicor > div > div.c > button:active{ background:rgba(0,0,0,0.8);}

/* ================================================= */
.baregiexi{width: 100%; height: 100vh; position:fixed; top:0; left: 0; background: rgba(0,0,0,0.6); z-index: 5; display:none;}
.baregiexi > div{width: 400px; height: auto; margin:30px auto 0; background:white; box-shadow:0 0 15px 3px rgba(255,255,255,1); border-radius:5px; display:flex; justify-content: center; align-items: center; flex-direction:column; padding:20px 0 20px; position:relative; overflow: hidden;}
.baregiexi > div > i.a{ width: 50px; height: 50px; color:rgba(100, 243, 64, 0.6); border:1px solid rgba(100, 243, 64, 0.5); border-radius:50%;  display:flex; justify-content: center; align-items: center; font-size: 25px;}
.baregiexi > div > i.b{ width: 50px; height: 50px; color:rgba(243, 64, 64, 0.6); border:1px solid rgba(243, 64, 64, 0.5); border-radius:50%;  display:flex; justify-content: center; align-items: center; font-size: 25px;}
.baregiexi > div > h3{ color:rgba(0,0,0,0.8); margin-top:15px; position:relative; text-align: center;}
.baregiexi > div > div.a{ width: 100%; height: auto; margin:20px 0 5px; text-align: center;}
.baregiexi > div > div.b{ width: 100%; height: auto; padding:0 15px; text-align: justify; color:rgba(0,0,0,0.6); font-size: 14px;}
.baregiexi > div > div.b > span.ba{display:block; margin:5px 0; text-align: center; color:black; }
.baregiexi > div > div.b > span.bb{display:block; color:blue; text-decoration: underline; cursor:pointer; margin:5px 0; position:relative; }
.baregiexi > div > div.b > span.bb > i{ color:black; position: absolute; top:93%; left: 70%; transform: rotate(-25deg);}
.baregiexi > div > button{ margin-top: 10px;}
.baregiexi > div > button:hover{ background: greenyellow; color:white; border:none;}
.baregiexi > div > div.c{ padding:10px; font-size: 14px; color:rgba(0, 0, 255, 0.658); display:none;}

/* ============================================== */
.conbaninise{ width: 100%; height: 100vh; position:fixed; top:0; left: 0;  overflow: hidden; background:black; }
.conbaninise > img{ width: 100%; height: auto; position:absolute; top:0; left: 0; }
.conbaninise > div{ width: 350px; height: auto; background:rgba(0,0,0,0.6); margin:50px auto; display:flex; justify-content: center; flex-direction: column; align-items: center; padding:20px; border-radius:5px; box-shadow:0 0 15px 0 rgba(0,0,0,1);}
.conbaninise > div > img{width: 200px; height: auto; margin-bottom:30px;}
.conbaninise > div > div{ width: 300px; display:flex; flex-direction:column; }
.conbaninise > div > div > div{ width: 100%;  display:flex; justify-content: space-between; align-items: center; flex-wrap: wrap;}
.conbaninise > div > div > div > input{border:none; width: 100%; border:1px solid rgba(0, 0, 0, 0.157); padding:10px; border-radius:5px; box-shadow:0 0 10px 0 rgba(0,0,0,1); background:rgb(204, 214, 222); color:rgb(10, 10, 10);}
.conbaninise > div > div > div > input:focus{border:1px solid rgba(0, 0, 0, 0.575);}
.conbaninise > div > div > div i{position: absolute; right: 10px; cursor: pointer;}
.conbaninise > div > div > div i.ur-eye{display:none;}
.conbaninise > div > div > div.cuentexist{ font-size:12px; color:rgba(255, 0, 0, 0.466); font-weight: 600; padding:5px 10px 0 10px; display:initial; text-align: left; display:none;}
.conbaninise > div > div > div.cuentexist button{border:none; background: none; color:rgb(168,207,69); font-weight: 12px; font-weight: 600; margin-left:5px; cursor:pointer;}
.conbaninise > div > div > div.pssamar{ margin:20px 0;}
.conbaninise > div > div > button.btnurentr{ border:none; background: rgb(34,42,62); color:white; font-weight:600; padding:10px 0; border-radius:5px; margin-top:10px; cursor: pointer;}
.conbaninise > div > div > span{ display:block; margin-top:30px; cursor:pointer; text-align: center; color:white;}

/* =============================================== */
.prompt { background-image: url('../images/launcher-icon-4x.png'); background-position-x: 1rem; background-position-y: 1.5rem; background-repeat: no-repeat; background-size: auto 40%; background-color: #ffffff; box-shadow: 0 20px 40px 0 rgba(91, 107, 174, 0.15); padding: 1.5rem 1rem 0.5rem 5rem; position: fixed; transition: all 0.5s ease-in-out; width: 100vw; z-index: 9;}
.prompt .tex1{font-weight: 600; font-size:14px;}
.prompt > small{font-size:12px;}
.prompt button{border:none; background: none; font-weight: 600; margin:0 15px; cursor:pointer;}
.prompt .add{ color:royalblue; }
.prompt .boto{text-align: right; padding:5px 20px 20px 0px;}
.prompt.show {transition-delay: 3s; bottom: 0; opacity: 1;}
.prompt.hide { bottom: -100%; opacity: 0;}
/* ==================================================================================== */

.baenvcor{ width: 100%; height: 100vh; position:fixed; top:0; left: 0; background:rgba(0,0,0,0.6); display:flex; justify-content: center; align-items: center; flex-direction: column; display:none;}
.baenvcor > img{ width: 150px; height: auto; margin-bottom: 20px;}
.baenvcor > span{ font-weight: 600; color:white;}

/* ================ */

.desbloque{ width: 100%; height: 100vh; position:fixed; top:0; left:0; background:rgba(0,0,0,0.6);}
.desbloque > div{ width: 300px; height: auto; margin:100px auto; background:white; box-shadow: 0 0 15px 0 rgba(255,255,255,1); padding:10px; display:flex; flex-direction: column; align-items: center; flex-wrap: wrap; }
.desbloque > div > i{ color:green; font-size: 30px; width: 60px; height: 60px; border:1px solid green; border-radius:50%; display:flex; justify-content: center; align-items: center; margin:20px 0; }
.desbloque > div > span{ text-align: center; color:rgba(0,0,0,0.7); letter-spacing: 1.2px;}
.desbloque > div > a{ margin-top:20px; background:green; color:white; padding:10px 15px; cursor:pointer; border-radius:5px; }