/*
    QuickQR App Scanning Page

    Author: Josiah Riley
    Date: Spring 2022

    Decription: This is the CSS for the scanning page of the QuickQR 
    application. This page allows the user to scan QR codes which link to a 
    spreadsheet, and display the linked data.  
*/

h1 {
    font-family: 'Montserrat', sans-serif;
    color: black;
}


/* CSS styling for main div (which includes the QR reader) */
.vertical-flex-container {
    border-radius: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: lightgray;
    z-index: 9;
}

#btn-scan-qr {
    cursor: pointer;
}

#qr-canvas {
    margin: auto;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    max-width: 300px;
    max-height: 300px;
}

#qrReader {
    width: 150px;
}

/* CSS styling for button/arrow icon below main div */
.button {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(32, 42, 68);
    border-radius: 25px;
    width: 80%;
    height: 20%;
    margin: auto;
    opacity: 0;
}

#button1 {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgb(32, 42, 68);
    border-radius: 25px;
    width: 80%;
    height: 20%;
    margin: auto;
}

#arrow {
    margin: auto;
    width: 50px;
    opacity: 0;
}

/* ***********************************************************************/
/* CSS styling for popup form */

/* The popup form - hidden by default */
.form-popup {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 7;
}

/* Add styles to the form container */
.form-container {
    position: relative;
    border-radius: 25px;
    padding: 10px;
    background-color: rgb(82, 85, 86);
}

/* Full-width input fields */
.form-container input[type=text] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: white;
}

/* When the inputs get focus, do something */
.form-container input[type=text]:focus{
    background-color: #ddd;
    outline: none;
}

/* Set a style for the submit button */
.form-container .btn {
    background-color: rgb(32, 42, 68);
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom:10px;
    opacity: 0.8;
    border-radius: 25px;
}

/* Set a style for the close form button */
.form-container .btn2 {
    background-color: lightgray;
    color: black;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    margin-bottom:10px;
    opacity: 0.8;
    border-radius: 25px;
}

/* Sizing and positioning for x-button that closes guide popup */
#closeGuideButton {
    width: 50px;
    position: absolute;
    top: 0px;
    right: 0px;
}

/* ***********************************************************************/