body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    background-image: url('.img/iQR.AU.qrbg.png');
    background-repeat: repeat;
    background-size: 76px;
    padding: 10px; /* Added padding for better edge spacing on mobile */
}

mainlogo,a.mainlogo {
    display: block;
    font-family: 'Orbitron', sans-serif;
    font-size: 100px;
    color: #000000;
    max-width: 100%;
    text-decoration: none;
    text-align: center;
        justify-content: center;
        align-items: center;
}


a {
}

.container {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.75);
    text-align: center;
    max-width: 600px; /* Maximum width for larger screens */
    min-width: 325px;
    margin: auto;
}

h1 {
    color: #333;
    margin-bottom: 20px;
}

.input-group {
    position: relative;
    margin-top: 10px;
    margin-bottom: 15px;
    text-align: center;
}

footer {
    color: #a0a0a0;
    font-size: 0.8em;
}

.terms {
    font-size: 0.8em;
    text-align: left;
}
    
button:hover,#submitbutton:hover,input[type="button"]:hover,input[type="submit"]:hover {
    background-color: #0056b3;
}

.contactbutton:hover{
    background-color: #ff0000;
}

.ep {
   color: #f00000;
}

.report {
    background-color: #FFE0E0;
}

.edit {
    background-color: #FFFFE0;
}

input[type="text"],
input[type="email"],
textarea {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 80%; /* Adjusted for full-width in a form */
    font-size: 16px;
    margin-bottom: 10px; /* Added margin */
    text-align: center;
}

#dynamicqr, {
    text-align: center;
}

#urlInput, {
    text-align: center;
}

textarea {
    resize: vertical; /* Allows vertical resize only */
}

input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus {
    border-color: #0056b3; /* Focus color */
    outline: none;
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

button,#submitbutton {
    padding: 12px 15px;
    background-color: #000000;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    /* width: 80%; Full width button */
    box-sizing: border-box; /* Ensures padding doesn't affect width */
    margin-top: 10px; /* Added margin */
}

.qrcode-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 15px;
    height: 200px;
    width: 100%;
    min-height: 100px;
    max-height: 500px;
}

.download-link,link {
    display: block;
    margin-top: 15px;
    color: #007bff;
    text-decoration: none;
    font-size: 16px;
}

/* Responsive Design Adjustments */
@media screen and (max-width: 600px) {
    .container {
        width: 90%;
        padding: 10px;
        justify-content: center; 
        align-items: center;
    }

    h1 {
        font-size: 24px; /* Smaller font size for h1 on smaller screens */
    }

    mainlogo,a.mainlogo {
	font-size: 72px;
    }

    .input-group input[type="text"] {
        width: 80%;
        margin: 5px 0; 
    }

    .qrcode-container {
        width: 100%;
        height: auto; 
        justify-content: center; 
        align-items: center;
    }

    input[type="text"],
    input[type="email"],
    textarea,
    button {
        width: 80%;
    }
}

.logo {
    max-width: 90%; /* ensures logo is not wider than its container */
    height: auto; /* maintains aspect ratio */
    display: block; /* centers the logo in its container */
    margin: 0 auto; /* adds equal margin on both sides */
    padding: 10px 0; /* adds some padding above and below the logo */
}

.options-toggle, .static-dynamic-toggle {
    cursor: pointer;
    padding: 5px;
    /*background-color: #ffffff;*/
    /*margin-top: 20px;*/
    color: #a0a0a0;
}

.options-menu, .dynamic-menu {
    border-top: none; /* Seamless connection with toggle */
    transition: max-height 0.5s ease-out; /* Smooth transition */
    overflow: hidden;
    max-height: 0; /* Initial max-height */
}

.options-menu label, .dynamic-menu label {
    /*margin-bottom: 10px;*/
    display: block;
}

.options-menu input,
.options-menu select,
.dynamic-menu input,
.dynamic-menu select
 {
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
}

#bgColor, #fgColor {
    padding: 2px;
}

#errorpanel,error {
    overflow: hidden;
    transition: all 2s ease-out; /* Transition for the shrinking effect */
    height: auto;
    width: 100%;
    text-color: #c00000;
    padding: 10px;
}

.shrink {
    height: 0;
    width: 0;
    padding: 0;
    margin: 0;
    opacity: 0; /* Optional: for a fade-out effect */
}

.fade-out {
    opacity: 0;
    visibility: hidden; /* The element will become invisible and unclickable */
}


.highlighted {
    background-color: #ffcc00; /* Bright, attention-grabbing color */
    color: #000000; /* Contrasting text color for readability */
    padding: 5px 10px; /* Adequate padding to make the highlight noticeable */
    border-radius: 8px; /* Rounded corners for a modern, button-like look */
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    font-weight: bold; /* Optional: make text bold for extra emphasis */
}

.normal {
    color: #a0a0a0; /* A standard, readable color */
    padding: 2px 5px; /* Less padding than highlighted text */
    border-radius: 4px; /* Slightly rounded corners, optional */
    /* No box-shadow to keep the focus on highlighted text */
    font-weight: normal; /* Regular font weight */
}

#thumb {
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}

.newlocation {
    background-color: #ffcc00;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
    font-size: 16px;
    justify-content: center;
    align-items: center;
}

.faq {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border-radius: 5px;
}

.faq h2 {
    color: #333;
    margin-bottom: 10px;
}

.faq p {
    color: #666;
    line-height: 1.6;
}

.tessellating-background {
    background-image: url('.img/iQRi.AU.qrbg.png');
    background-repeat: repeat;
}

.mid {
    display:flex;
    justify-content: center;
    text-align: center;
}

.d {
    background-color: white; /* White background */
    top: 0;                 /* Align to the top */
    left: 0;                /* Align to the left */
    width: 100%;            /* Full width */
    padding: 20px;          /* Padding of 20 pixels */
    box-sizing: border-box; /* Include padding in width/height */
    z-index: 1000;          /* Ensure it stays on top of other elements */
}

.tooltip {
    font-size: 16px;
    position: absolute;
    background-color: darkgreen;
    color: white;
    padding: 5px;
    border-radius: 5px;
    z-index: 1000;
    transition: all 0.5s ease;
}

.trust-score {
    position: absolute;
    right: 12%;
    transform: translate(50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px; /* Adjust as needed */
    max-width: 40px;
    x-index: 50;
}

.circle {
    position: absolute;
    width: 40px; /* Size of the circle */
    height: 40px; /* Size of the circle */
}

.number {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1em; /* Adjust as needed */
}

.circular-chart {
    width: 100;
    height: 100;
}

.circle-bg {
    fill: #ffffff;
    stroke: #eee;
    stroke-width: 3.8;
}

.percentage {
    fill: black;
    font-family: sans-serif;
    font-size: 0.25em; /* Adjust as needed */
    text-anchor: middle;
    alignment-baseline: middle;
}

.dtscircle {
    top: -10px;
    left: -10px;
    width: 60px; /* Adjusted for a smaller circle */
    height: 60px; /* Adjusted for a smaller circle */
    position: absolute;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    animation: rotate 20s linear infinite;
    font-size: 5px;
    /*background-color: #fc0;*/
    z-index: 1;
    display: block;
    font-family: sans-serif;
}

.dtscircle span {
    top: 25px;
    left: 30px;
    position: absolute;
    transform-origin: 0 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dtscircle span {
    transform: rotate(var(--rotate)) translate(27px) rotate(var(--rotate-additional));
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); } /* Adjusted for clockwise rotation */
}

.asset-body, .asset-meta {
    text-align: justify
}

.loader {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: black;
    position: relative;
    animation: loadrotate 1s infinite linear;
}

@keyframes loadrotate {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}