/*=========================== 
  Login
  =========================== */
/* import fonts Kanit */
@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@200;300;400;500&display=swap");

.kanit-extralight {
  font-family: "Kanit", serif;
  font-weight: 200 !important;
  font-style: normal;
}

.kanit-light {
  font-family: "Kanit", serif;
  font-weight: 300 !important;
  font-style: normal;
}

.kanit-regular {
  font-family: "Kanit", serif;
  font-weight: 400 !important;
  font-style: normal;
}

.kanit-medium {
  font-family: "Kanit", serif;
  font-weight: 500 !important;
  font-style: normal;
}

/* leftbox-login */
.auth-full-bg, .col-xl-6 {
  background-color: #d9d9d9 !important;
} 

/* กล่องขวา login */
.right-box {
  padding-top: 3rem;
  padding-left: 3rem;
}

/* สไตล์หัวข้อใหญ่ Login และ Sign Up */
.auth-title {
  font-size: 1.5rem;
  color: #252525;
}

/* สไตล์หัวข้อใหญ่ Login และ Sign Up */
.auth-text {
  color: #808080 !important;
  font-size: 1rem;
}

/* link ลืมรหัสผ่าน, สมัครใช้งาน */
.auth-link {
  font-size: 1rem;
  color: #1a73e8;
  text-decoration: none;
  user-select: none;
}

.auth-link:hover {
  color: #2D86FB;
}

.auth-text {
  font-size: 1rem;
  color: #252525;
}

/* กล่องกรอกจบกรอก อีเมล, รหัสผ่าน */
/* ส่วนข้อความ */
.form-label {
  padding-left: 1rem;
  font-size: 20px;
  color: #252525;
}

/* ส่วนช่องกรอก */
.form-control {
  height: 52px;
  border: 1px solid #f0f0f0 !important;
  border-radius: 10px;
  background-color: #f0f0f0 !important;
}

/* custom icon ตา */
.mdi {
  color: #858585;
  font-size: 1.25rem !important;
}

/* Background ของตา */
.btn-eye {
  background-color: #f0f0f0 !important;
}
/* จบกรอก อีเมล, รหัสผ่าน */


/* ข้อความ อยู่ระบบต่อไป */
.auth-checkbox-label {
  font-size: 1.25rem;
  color: #252525;
  user-select: none;
}

/*=========================== 
  ฺ Botton
  =========================== */

.submit-btn {
  background-color: #1a73e8 !important;
  border-radius: 10px !important;
  border: 2px solid transparent;
  transition: background-color 0.3s, color 0.3s;
}

/* ปรับสีข้อความปุ่ม*/
.submit-btn .btn {
  color: #f0f0f0;
  font-size: 1rem;
}

.btn:hover {
  color: #f0f0f0 !important; 
  background: #2D86FB;
  border-radius: 10px !important;
}

.btn-login-google .btn{
  color: #000000 !important;
  font-size: 1.25rem;
  border-radius: 10px;
  border: 1px solid #000;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-login-google .btn {
  color: #f0f0f0;
  font-size: 1.25rem;
}

.btn-next{
  color : #f0f0f0 !important;
  font-size: 1.25rem !important;
}

/* margin-top */
/* เอา position relative ออก*/
.no-relative {
  position: static !important;
  margin-bottom: 2rem !important;
}

/* checkbox */
.checkbox-custom {
  width: 1.3rem !important;
  height: 1.3rem !important;
  margin-right: 0.5rem !important;
  border: 2px solid #f0f0f0 !important;
  background-color: #f0f0f0 !important;
}

.form-check-input:checked {
  background-color: #1a73e8 !important;
  border: 2px solid #1a73e8 !important;
}

/* ข้อความยังไม่มีบัญชี */
.text-link {
  margin-top: 0rem !important;
  font-size: 1.25rem;
  color: #252525;
  padding-left: 0.5rem !important;
}

.text-link a {
  padding-left: 0.5rem !important;
}

#custom-style {
  margin-top: 1rem !important;
}
/* จบข้อความยังไม่มีบัญชี */

/*=========================== 
  Sign Up
  =========================== */

.btn-register .btn {
  margin-top: 1rem;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.flex-container {
  display: flex;
  gap: 10px; /* ระยะห่างระหว่างปุ่ม */
}

.btn-position {
  height: 56px;
  border-radius: 10px !important;
  border: 1px solid #808080 !important;
  background: #fff;
  flex-shrink: 0;
}

.btn-position i {
  color: #1a73e8;
}

.grid {
  gap: 10px; /* ระยะห่างระหว่างปุ่ม */
  grid-template-columns: repeat(2, 1fr); /* สร้าง 2 คอลัมน์ */
}

.form-check-label-signup {
  margin-top: 1rem;
  font-size: 1.125rem;
  user-select: none;
}

.checkbox-signup {
  margin-top: 1.2rem !important;
}

.btn-position.selected {
  background-color: #1a73e8; /* เปลี่ยนสีพื้นหลังเมื่อเลือก */
  color: white; /* เปลี่ยนสีตัวอักษรเมื่อเลือก */
}

/* Error แจ้งเตือน */
.error-message, .text-danger {
  display: block !important;
  color: #dc3545;
  margin-top: 0.25rem;
  font-size: 0.8rem;
  font-family: 'Kanit', sans-serif;
}

.form-control.is-invalid, .was-validated .form-control:invalid {
  background-image: none !important;
}

.invalid-feedback {
  color: #f46a6a !important;
}