*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial,Helvetica,sans-serif;

    background:#eaf4ff;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:100vh;

    padding:20px;

}

.app{

    width:100%;
    max-width:420px;

    background:white;

    border-radius:25px;

    padding:35px;

    box-shadow:0 20px 45px rgba(0,0,0,.12);

    text-align:center;

}

.logo{

    width:75px;

    margin-bottom:15px;

}

h1{

    color:#0b3f74;

    font-size:38px;

    margin-bottom:10px;

}

h2{

    color:#163b63;

    font-size:24px;

    margin-bottom:15px;

}

.subtitle{

    color:#5b6775;

    line-height:1.5;

    margin-bottom:35px;

}

button{

    width:100%;

    border:none;

    border-radius:14px;

    padding:18px;

    font-size:18px;

    font-weight:bold;

    cursor:pointer;

    margin-bottom:18px;

}
#invoiceScanButton{
    background:#ff3f4f;
    color:white;
}
#scanButton{

    background:#0d4d83;

    color:white;
    font-weight:600;

}

#galleryButton{

    background:#dbeaf8;

    color:#0d4d83;
}

/* ===========================
   Splash Screen Skyler
=========================== */

#splashScreen{

    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    background:white;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    z-index:99999;

}

.splash-logo{

    width:120px;

    margin-bottom:25px;

}

.splash-title{

    font-size:34px;

    font-weight:bold;

    color:#0d4d83;

    margin-bottom:35px;

}

.splash-loader{

    width:55px;

    height:55px;

    border:6px solid #dbeaf8;

    border-top:6px solid #0d4d83;

    border-radius:50%;

    animation:spin 1s linear infinite;

}

@keyframes spin{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

#reader {
    display: none;
    width: 300px;
    height: 300px;
    margin: 25px auto;
    background: #000;
    border: 4px solid #1f4f7a;
    border-radius: 8px;
    overflow: hidden;
    box-sizing: border-box;
    max-width: 100%;
}

#reader.scanner-active {
    display: block;
}

#reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

#status {
    display: none;
    text-align: center;
    color: #1f4f7a;
    font-weight: bold;
    margin-bottom: 20px;
}

#reader.scanner-active + #status {
    display: block;
}
/* ==========================================
   SKYLER SCAN ANIMATION
========================================== */

#reader.scanner-active {
    position: relative;
    border: 4px solid #29b6f6;
    box-shadow: 0 0 20px rgba(41,182,246,.45);
    animation: scannerGlow 1.5s ease-in-out infinite;
}

#reader.scanner-active::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    height: 3px;
    background: #29b6f6;
    box-shadow: 0 0 12px #29b6f6;
    animation: scannerLine 2s linear infinite;
    z-index: 999;
}

@keyframes scannerGlow {

    0% {
        box-shadow: 0 0 8px rgba(41,182,246,.25);
    }

    50% {
        box-shadow: 0 0 24px rgba(41,182,246,.75);
    }

    100% {
        box-shadow: 0 0 8px rgba(41,182,246,.25);
    }

}

@keyframes scannerLine {

    0% {
        top: 8px;
    }

    50% {
        top: calc(100% - 11px);
    }

    100% {
        top: 8px;
    }

}