@font-face { font-family: 'Aleo'; src: url('/static/webapp/fonts/Aleo-Regular.woff') format('woff'); }
@font-face { font-family: 'Lato'; src: url('/static/webapp/fonts/Lato-Regular.woff') format('woff'); }
@font-face { font-family: 'LatoBold'; src: url('/static/webapp/fonts/Lato-Bold.woff') format('woff'); }

body {
    font-family: 'Arial Narrow';
}


div.content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: justify;
}

div.header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 10mm;
    margin-bottom: 5mm;
}
div.logo {
}

div.header > p {
    font-weight: bold;
    color: #808080;
}
div.logo > img {
    width: 5cm
}

div.actionDiv {
    padding: 4mm 5mm 3mm 5mm;
    color: #808080;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 8cm;
}

.actionBtn {
    background: #304080;
    color: #ffffff;
    border: 0pt;
    padding: 0;
    width: 100%;
    height: 13mm;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 11pt;
    font-weight: bold;
    font-family: 'Helvetica';
    
    cursor: pointer;
    box-shadow: 2pt 2pt 4pt #808080;
    border-radius: 3pt;
}

.actionBtn:hover {
    opacity: 0.9;
}

input#img {
    display: none;
}

div.infoDiv {

    color: #808080;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 10cm;
}


div#privacy-box {
    position: fixed;
    right: 0; bottom: 0; margin: 3pt; padding: 5pt;
    max-width: 5cm;
    font-size: 8pt;
    color: #a0a0a0;
    border-radius: 1pt;
    background-color: rgba(255,255,255,0.80);
}
    

div#scanning, div#sending {
    position: fixed;
    background: rgba(255,255,255,0.7);
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
}
div#sending {
    text-align: center;
}


div#scanning button {
    position: relative;
    height: 20pt;
    border: 0px;
    border-radius: 20pt;
    background: rgba(255,255,255,0.0);
    font-size: 10pt;
    font-weight: bold;
    text-shadow: 0px 0px 3pt white;
    color: #000000;
    z-index: 1000;
}

div#scanForm {
    display: none;
}

div#scanning div#scanMedia {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;    
}

div#scanning video#scanVideo {
    display: none;
}
div#scanning img#scanImage {
    display: none;
}
div#scanning canvas#scanCanvas {
    position: absolute;
    border-radius: 20px;
}



div.guideDiv a {
    cursor: pointer;
    margin-bottom: 5mm;
    font-size: smaller;
}
div.guideDiv a:hover {
    color: black;
}

div.guideDiv > div#guide {
    flex-direction: column;
    align-items: center;
    display: none;
    margin-bottom: 2cm;
}


p.uploadAnim {
	margin-top: 20mm;
    display: inline-block;
    padding: 10mm 10mm 10mm 10mm;
    font-size: 12pt;
    font-weight: bold;
    border-radius: 2mm;
    box-shadow: 1mm 1mm 3mm #808080;
    background: #ffffff
}


.footer {
    margin-bottom: 5cm;
}

/*


input[type="file"] {
    display: none;
}
input[type="submit"] {
    background-color: #004088;
    color: white;
}
label {
    padding: 3mm 5mm 3mm 5mm;
    background-color: #004088;
    color: white;
    text-align: center;
    border: 0mm solid rgba(0,64,136,0.5);
    border-radius: .5mm;
    text-shadow: -.5pt -.5pt 0.2pt rgba(0,0,0,0.5);
    box-shadow: 1.5pt 1.5pt 1pt rgba(0,0,0,0.5);
}
label:hover {
    opacity: 0.9;
}
label:active {
    opacity: 0.7;
    box-shadow: 0.5pt 0.5pt 1pt rgba(0,0,0,0.9);
}
/*
div.uploadBtn {
    display: inline-block;
    width: 60mm;
    font-family: 'Arial Narrow';
    font-weight: bold;
}
*/