:root {
    --font-family-primary: -apple-system, -apple-system, BlinkMacSystemFont, 'Barlow Condensed', sans-serif;
    --background-color: #05294b;
    --primary-color: #fff;
    --button-bg-color: #003a76;
    --button-text-color: #fff;
    --font-size-large: 20px;
    --font-size-medium: 15px;
    --padding-standard: 1em;
    --margin-large: 2em;
    --margin-xlarge: 7em;
    --padding-top: 60px;
    --padding-bottom: 100px;
    --z-index-top: 99999;
    --color-orange: #b56037;
    --color-destacado: #b56037;
    --color-yellow: yellow;
    --color-green: green;
    --color-white: white;
    --color-red: #05294b;
    --color-blue: #0b6893;
}

html {
    height: 100%;
    width: 100%;
    background-color: var(--background-color);
    overflow: hidden;
}

body {
    font-family: var(--font-family-primary);
    background-color: var(--background-color);
    color: var(--primary-color);
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom);
    height: 100%;
    width: 100%;
    margin: 0;
    overflow: hidden;
    font-size: 20px !important;
}

#viewport {
    height: 100vh !important;
    width: 100vw !important;
    top: 0;
    left: 0;
    position: fixed;
    overflow: hidden;
}

#reader {
    border: 0 !important;
}

#barcode-title {
    margin-top: 2em;
}

#barcode-title i {
    font-style: normal;
    color: var(--color-destacado);
}

#reader__dashboard_section_csr {
    text-align: left !important;
    padding-left: 1.5em !important;
    color: var(--color-destacado);
}

/* Personalizacion del codigo */
#reader__dashboard_section_csr button {
    padding: 0 !important;
    font-size: 0 !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
}

#reader__camera_selection {
    -webkit-appearance: none;
    font-size: 15px;
    padding: 1em 1em 1em 0;
    margin: 0;
    border: 0;
    width: 85vw;
    margin-top: .5em;
    background: none;
    color: #fff;
    border: 0;
    border-bottom: 1px solid #0a5b85;
    display: block;
}


#reader__dashboard_section_csr button::before {
    content: "Leer Código";
}

.btn-regreso,
#reader__dashboard_section_csr button::before,
#volver-al-inicio {
    display: block;
    position: fixed;
    border: 0;
    bottom: 0;
    font-size: var(--font-size-large);
    color: var(--button-text-color);
    cursor: pointer;
    background-color: var(--button-bg-color);
    width: 100%;
    left: 0;
    padding: var(--padding-standard) 0;
    border-radius: 0;
    margin-top: var(--margin-large);
    font-size: 15px;
    padding-bottom: 5vh;
}

#reader__dashboard_section_swaplink {
    margin-top: 20px;
    display: block;
    font-size: 0;
}

#reader__dashboard_section_swaplink::before {
    content: "Abrir imagen";
    display: block;
    font-size: var(--font-size-large);
    text-align: center;
    margin-top: var(--margin-xlarge);
    display: none;
}

#reader__dashboard_section_csr>span:nth-child(1) {
    font-size: 0;
}

#reader__dashboard_section_csr>span:nth-child(1)::before {
    content: "Selecciona una cámara: ";
    font-size: var(--font-size-medium);
}


.return-202 {
    background-color: var(--color-green);
    color: var(--color-white);
}

.return-404 {
    background-color: var(--color-red);
    color: var(--color-yellow);
}

#barcode-title {
    display: block;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-index-top);
}

.signature-pad {
    position: absolute;
    left: 0;
    width: 100vw;
    height: 200px;
    background-color: #fff;
}

#signa-sms {
    padding: 10vw;
}

#signa-sms i {
    color: var(--color-destacado);
    font-style: normal;
}

#grid-firmas {
    position: relative;
}

#btnLimpiar {
    position: absolute;
    top: 1em;
    right: 1em;
    z-index: 9999;
    opacity: .3;
}

#btnLimpiar svg {
    width: 20px;
}

#garabato-sign {
    color: var(--background-color);
    position: absolute;
    z-index: 9999;
    font-weight: normal;
    font-size: .8em;
    text-align: center;
    width: 100%;
    margin-top: 19vh;
    animation: parpadeo 5s infinite;
}

/* Aplicacion lector QR */
#reader__scan_region {
    min-height: 520px !important;
}

#reader__scan_region img {
    margin-top: 15vh !important;
    width: 190px !important;
    height: 190px !important;
}




/* Animacion icono */
@keyframes agitado {
    0% {
        transform: rotate(10deg);
    }

    50% {
        transform: rotate(-10deg);
    }

    100% {
        transform: rotate(10deg);
    }
}

#reader__scan_region img {
    animation: agitado 2s infinite;
}



@keyframes parpadeo {
    0% {
        opacity: .1;
    }

    50% {
        opacity: .6;
    }

    100% {
        opacity: .1;
    }
}


.btn-regreso,
#volver-al-inicio {
    text-align: center;
    text-decoration: none;
}

#helper {
    position: fixed;
    width: 100vw;
    margin: auto;
    text-align: center;
    padding: 4vw;
    top: 70vh;
    font-size: 13px;
    color: var(--color-blue);
}

#btn-iniciar {
    top: 75vh;
    position: fixed;
    width: 100vw;
    text-align: center;
}

#btn-iniciar span {
    background-color: var(--color-destacado);
    color: var(--background-color);
    font-weight: bold;
    display: inline-block;
    border-radius: 1em;
    padding: 1em 1.5em !important;
}


#completado-steps {
    text-align: center;
    margin-top: 5em;
}

#completado-steps h2 {
    color: var(--color-destacado);
}

#btn-atras {
    background-color: var(--button-bg-color);
    display: inline-block;
    padding: 1.2em 20px;
    border-radius: 0 1em 0;
    padding-bottom: 5vh;
    position: fixed;
    bottom: 0;
    border-right: 1px solid var(--background-color);
}

#datos-registro {
    text-align: left;
    list-style: none;
    margin: 0 2em;
    padding: 0;
}

#datos-registro li {
    padding: .5em;
}

#datos-registro li strong {
    color: var(--color-orange);
}

#box-registro {
    margin-top: 2em;
    text-align: left;
    margin: 2em 2em 0;
}

.menu-principal a {
    background-color: var(--color-blue);
    text-decoration: none;
    display: block;
    padding: .5em;
    color: var(--button-text-color);
}

.listas a {
    background-color: var(--color-destacado);
    color: var(--button-text-color);
    display: block;
    text-decoration: none;
    padding: .5em;
    margin: .5em 0;
}

.registro-coches  {
    width: 90%;
    margin: 1em auto;
}

.registro-coches input {
    display: block;
    padding: .5em;
    font-size: 1.5em;
}

.botones {
    background-color:var(--color-destacado);
    color:var(--button-text-color);
    border: 0;
    font-size: 1.2em;
    padding: .7em 1em;
    margin-top: 1em;
}

#switch-registro {
    position: fixed;
    right: 0;
    background-color: var(--background-color);
    z-index: 5;
    text-decoration: none;
    padding: .2em 1em .4em;
    color: #fff;
    border-radius: 0 0 0 1em;
    text-transform: uppercase;
    font-size: .9em;
  }