checadores/css/checador.css

body { font-family: 'indivisa-text'; background-image: url('../imagenes/fondo.webp'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover;
    background-position: center; height: 100%; overflow: hidden; }
header { height: 15vh; }
main { height: 85vh; }
#logo { max-width: 190px; width: 100%; height: 100px; }
.hora { font-size: 4rem; border-right: 2px solid var(--white); line-height: 1.1; padding-bottom: 8px; }
.fecha { font-size: 1.9rem; line-height: 1.2em; }
#ano { font-size: 1.25rem; }
.checa-box { padding: 3rem; margin: 0; border-radius: 25px; background: var(--white); -webkit-box-shadow: 10px 10px 10px 1px rgb(34 34 34 / 50%); -moz-box-shadow: 10px 10px 10px 1px rgb(34 34 34 / 50%); box-shadow: 10px 10px 10px 1px rgb(34 34 34 / 50%); }
h1, h2, h3 { letter-spacing: 1px; position: relative; margin: 0; }
.sub-bloque { padding: 1rem 10rem 3rem 10rem; }
.text-blue { color: #42BDA6; }
.text-big { font-size: 3.5rem; }
.text-warning { color: #FF891A !important; }

/***** REGISTRO *****/
.titRegistro { margin: 0; letter-spacing: 1px; font-size: 5rem; }
.inputChecar { max-width: 450px; }
#cve, #btnChecar { font-size: 2rem; }
#cve { outline: none; color: #DBDBDB; background: transparent; border: 1px solid #DBDBDB; border-radius: 10px 0 0 10px; vertical-align: middle; text-align: center;
    padding: 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
#cve:focus { border-color: #001d68; color: #001d68; }
#btnChecar { border-radius: 0 10px 10px 0; }
#formaChecador { padding: 4rem; }
#btnChecar:hover { background: #101097 !important; }
#lista-avisos>hr:last-of-type { display: none; }

/***** ICONOS *****/
.iconos { position: absolute; width: 200px; }
#icon_registro, #icon_duplicada, #icon_internet { bottom: 2rem; right: -8.5rem; }
#icon_asistencia { top: -2rem; left: -9rem; }
#icon_retardo { top: -8rem; left: 2rem; }
#icon_horario { bottom: -4rem; left: -9rem; }
#icon_error { top: -6rem; right: -4rem; }
#icon_clave { bottom: -8rem; right: -4rem; }
#icon_avisos { bottom: 1rem; left: -9rem; }