input,
button,
p,
select,
option {
font-family: 'Prompt', Prompt;
/*font-family: 'Sarabun', sans-serif;*/
}

h2 {
line-height: 1.2;
margin: 0;
padding: 0;
font-weight: bold;
font-family: 'prompt';
/*font-family: 'Sarabun', sans-serif;*/
font-size: 22px;
margin-bottom: 12px;
}


body {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(rgba(67, 50, 231, 0.2), rgba(230, 230, 250, 0.5)),
url('../images/bg-alumni.jpg') no-repeat center center fixed;
background-size: cover; /* ปรับขนาดภาพให้ครอบคลุมทั้งหน้าจอ */
text-align: center;
margin: 0;
font-family: 'Prompt', Prompt; /* Apply Prompt font to the body */
}

h1 {
color: #333;
}

.logo {
display: block;
margin: 0 auto;
max-width: 120px; /* ปรับขนาดของรูปภาพตามต้องการ */
height: auto;
margin-bottom: 3px; /* ระยะห่างระหว่างรูปภาพกับข้อความ */
}

input {
font-size: 1em;
padding: 10px;
margin-bottom: 12px;
border: 1px solid #ccc;
border-radius: 4px;
width: 80%;
max-width: 400px;
}

input:hover {
border-color: #007BFF;
/* Blue border on hover */
background-color: #fff;
/* White background on hover */
}

input:focus {
border-color: #007BFF;
/* Blue border when focused */
box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
/* Add a subtle shadow */
outline: none;
/* Remove default outline */
}

.form-submit {
width: auto;
display: inline-block;
border: none;
background: #52a50d;
color: #ffffff;
padding: 10px;
height: 50px;
box-shadow: 0px 15px 9.9px 0.1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 15px 9.9px 0.1px rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0px 15px 9.9px 0.1px rgba(0, 0, 0, 0.15);
-o-box-shadow: 0px 15px 9.9px 0.1px rgba(0, 0, 0, 0.15);
-ms-box-shadow: 0px 15px 9.9px 0.1px rgba(0, 0, 0, 0.15);
}

.form-submit:hover {
background-color: #e6870b;
}

.submit {
width: 130px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
-o-border-radius: 25px;
-ms-border-radius: 25px;
text-transform: uppercase;
font-size: 13px;
cursor: pointer;
}

.submit-link {
border: 2px solid #fff;
text-decoration: none;
display: inline-block;
vertical-align: middle;
padding: 12px 0;
text-align: center;
color: #fff;
}

.submit-link:hover {
background: #fff;
color: #b18757;
}

.swal2-popup {
border-radius: 15px;
/* ปรับมุมให้โค้งมน */
font-family: 'Prompt', sans-serif;
/*font-family: 'Sarabun', sans-serif;*/
}


.scanner-container {
width: 100%;
max-width: 526px;
margin-top: -125px;
padding: 23px;
background-color: #f0fcffc4;
border-radius: 38px;
color: #333;
box-shadow: 0 8px 16px rgba(12, 12, 40, 0.4), inset 0 1px 3px rgba(255, 255, 255, 0.1);
text-align: center;
/* box-sizing: border-box;*/
}

.scanner-title {
color: #000000a8;
font-size: 27px;
margin-bottom: 10px;
}

.scanner-subtitle {
color: #ab69ff;
font-size: 40px;
margin-bottom: 10px;
}

.scanner-date {
color: #ab69ff;
font-size: 30px;
margin-bottom: 20px;
}

.scanner-input-container {
display: flex;
flex-direction: column;
align-items: center;
}

#student_id {
width: calc(100% - 40px);
max-width: 300px;
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 10px;
box-sizing: border-box;
}

#student_id:focus {
border-color: orange;
outline: none;
box-shadow: 0 0 5px rgba(255, 165, 0, 0.8);
}


.text-danger {
font-size: 12px;
color: red;
}

@media (max-width: 768px) {
.scanner-container {
max-width: 80%; /* ลดความกว้างของกรอบเมื่ออยู่ในโทรศัพท์ */
}

.scanner-subtitle {
font-size: 30px;
}

.scanner-date {
font-size: 18px;
}

#student_id {
font-size: 14px;
}
}

@media screen and (max-width: 430px) {
  .scanner-title {
    font-size: 24px;
    }    
  }