.snapapp-icon {
 color: black;
}

.handwritten-icon {
 color: yellow;
}

/* Styles for the container that establishes positioning context */


.qrcode-snap-container {

    padding-bottom: 0.5rem;
    padding-top: 0.5rem;
    background: #f3f4f6;
}


/* Styles for the absolutely positioned block containing QR code and indicator */
.qrcode-content {
    position: absolute; /* Positioned relative to the nearest positioned ancestor */
    top: 0;            /* Align to the top edge of the container */
    right: 0;          /* Align to the right edge of the container */
    z-index: 10;       /* Ensure it appears above other content */

    /* Styling for the border and appearance */
    border: 2px solid #007bff; /* Example: A blue border */
    padding: 10px;     /* Space inside the border around content */
    background-color: #ffffff; /* White background behind the QR code */
    box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15); /* Optional subtle shadow */
    text-align: center; /* Center content horizontally within this block */
    max-width: 150px; /* Prevent the QR code block from getting too wide */
    /* Adjust max-width based on your QR code size and desired look */
}

/* Styles for the "Snap Quiz" indicator (text or icon) */
.qrcode-content .snap-quiz-indicator {
    display: block;    /* Make it take up its own line */
    font-size: 0.9em;  /* Slightly smaller font size */
    color: #007bff;    /* Match the border color */
    margin-bottom: 8px; /* Space between the indicator and the QR code */
    font-weight: bold; /* Make the text bold */
    text-transform: uppercase; /* Optional: Make text uppercase */

    /* If using an icon font (like Font Awesome): */
    /* You would use the appropriate icon class in the HTML like:
       <span class="snap-quiz-indicator"><i class="fas fa-puzzle-piece"></i> Snap Quiz</span>
       And ensure the icon font library is loaded on your page. */
}

/* Styles for the QR code image */
.qrcode-content img {
    display: block;    /* Helps remove potential extra space below the image */
    max-width: 100%;   /* Ensure the image scales down if needed within its container */
    height: auto;      /* Maintain aspect ratio */
    margin: 0 auto;    /* Center the image horizontally within the .qrcode-content block */
}

.fraction {
    display: inline-block;
    text-align: center;
    vertical-align: middle;
    margin: 0 3px;
}
.fraction .top {
    border-bottom: 1px solid #000;
    display: block;
    padding: 0 4px;
}
.fraction .bottom {
    display: block;
    padding: 0 4px;
}
.problem {
    margin-bottom: 60px;
}