@font-face {font-family: 'Roboto'; src: url('images/fontroboto.ttf') format('truetype'); font-weight: normal; font-style: normal;}

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

body {display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; height: 100vh;
    font-family: 'Roboto', sans-serif; position: relative; background-image: url('images/background.svg'); background-size: cover;
    background-repeat: no-repeat; background-position: center; background-attachment: fixed; margin: 0; padding: 0; box-sizing: border-box;}

.logo {width: 65vw; max-width: 400px; position: fixed; top: 40px; left: 50%; transform: translateX(-50%); z-index: 1;}

footer {position: fixed; bottom: 10px; width: 100%; text-align: center; font-size: 4vw; max-width: 400px; color: #e0e0e0;}

@media (min-width: 600px) {footer {font-size: 24px;}}

.custom-swal-popup {min-width: 200px;}

/* Heading Styles */
h1, h2, h3, h4, h5, h6 {margin-top: 2px; margin-bottom: 2px;}

/* Change color of h4 heading */
h4 {color: #1e68bd;}

.container {position: relative; z-index: 2; display: none;}

.square {width: 80vw; max-width: 450px; background-color: #ffffff; border: 1px solid #ccc; border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); position: relative; top: 55%; left: 50%; transform: translate(-50%, -50%);
    z-index: 1; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;}
/* Relative Z-Index Styles */
.relative-z1 {position: relative; z-index: 2; /* Ensure elements are above the square */}
/* Input Container Styles */
.input-container {margin-top: 10px; margin-bottom: 10px; position: relative; z-index: 2;width: fit-content;}
/* Input Field Styles */
.input-field {padding: 10px; font-size: 25px; border: 2px solid #ccc; border-radius: 10px; width: 70%; max-width: none;
    position: relative; z-index: 2; text-align: center; font-weight: bold; letter-spacing: 2px; margin-bottom: 6px;}

.validation-message {font-size: 14px; margin-top: 10px; text-align: center; z-index: 2;}

.submit-button {padding: 10px 20px; font-size: 18px; font-weight: bold; color: #fff; background-color: #229954;
    border: none; border-radius: 4px; cursor: pointer; margin-top: 10px; margin-bottom: 0px; position: relative;}

.submit-button:hover {background-color: #316346;}
/* Centered error message */
.error-message {text-align: center; color:black; font-weight: bold; font-size: 16px;}

.submit-button:disabled {background-color: grey; cursor: not-allowed;}

.not-allowed {cursor: not-allowed;}

#message {display: block; text-align: center; margin-top: -100px; color:black; font-weight: bold; font-size: 16px;}

#dev-id-text {font-weight: bold; color:white;}