body,
td,
th {
  font-size: 1rem;
  color: #333;
}

body {
  margin: 0;
  border: 0 none;
  padding: 0;
  font-size: 1rem;
  font-family: "Kanit", sans-serif;
  background-color: #F2F2F2;
}
/* สำหรับ Chrome, Safari และ Edge */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active  {
    transition: background-color 5000s ease-in-out 0s;
    background-color: transparent !important;  
}

/* สำหรับ Firefox */
input:-moz-autofill,
input:-moz-autofill:hover, 
input:-moz-autofill:focus, 
input:-moz-autofill:active {
    background-color: transparent !important;
}
hr.hr-blurry {
  border: 0;
  height: 0.1rem;
  background-image: linear-gradient(to right, rgba(222, 226, 230, 0), #adadad 25%, #adadad 75%, rgba(222, 226, 230, 0));
  background-size: 100% 1px;
  background-repeat: repeat-x;
}

/* Main Custom */
.border_red {
  border: 1px solid #f00;
}
.border_yellow {
  border: 1px solid #ff0;
}
.main_width {
  max-width: 800px;
  margin: 0 auto;
  background-color: #FFF;
}
.text-gray {
  color: #666;
}
.space {
  margin-bottom: 0.3rem;
}
.iconsize {
  font-size: 1.5rem !important;
}
.btn-line {
  background-color: #00b900;
  color: #fff;
}
#countdown {
  margin: 0;
  padding: 0;
  width: 100%;
  border-radius: 5px;
  background-color: #830000;
}

/*** floating label ***/
.form-floating .form-control ~ label {
    color: #909090; /* เปลี่ยนเป็นสีที่ต้องการ */
}
/*** End floating label ***/

/*** form control ***/

input:disabled {
    background-color: #FCFCFC !important; /* คุณสามารถเปลี่ยนสีนี้เป็นสีที่คุณต้องการ */
    color: #777; /* สามารถปรับสีข้อความได้เช่นกัน */
}

.form-control.success-focus:focus {
    border-color: rgba(25, 135, 84, 0.1) !important; /* สีขอบที่ต้องการเมื่อโฟกัส */
     box-shadow: 0 0 0.20rem rgba(25, 135, 84, 0.4); /* ตัวอย่างเป็นสีเขียวพร้อมความโปร่งใส */
}

/*** Opacity Custom ***/
.bg-success-5 {
  --bs-bg-opacity: 0.001;
  background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important;
}
/*** End Opacity Custom ***/

/**** Radio Custom ****/
.success-radio .form-check-input {
    border-color: var(--bs-success) !important; /* กำหนดสีขอบ */
}

.success-radio .form-check-input:checked {
    background-color: var(--bs-success) !important; /* กำหนดสีพื้นหลังเมื่อเลือก */
    border-color: var(--bs-success) !important ; /* กำหนดสีขอบเมื่อเลือก */
    box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.1); /* ใช้สีเขียวของ bg-success และ alpha 0.1 สำหรับความโปร่งใส */
}

/****** End Radio Custom *****/

/****** font-size *****/
.pds-5 {
  padding-left: 5%;
}
.pds-10 {
  padding-left: 10%;
}
.pds-15 {
  padding-left: 15%;
}
.pds-20 {
  padding-left: 20%;
}
.pde-5 {
  padding-right: 5%;
}
.pde-10 {
  padding-right: 10%;
}
.pde-15 {
  padding-right: 15%;
}
.pde-20 {
  padding-right: 20%;
}
.fsw-2-2 {
  font-size: clamp(16px, 2.2vw, 24px);
}
.fsw-2-5 {
  font-size: clamp(16px, 2.5vw, 28px);
}
.fsw-3 {
  font-size: clamp(16px, 3vw, 32px);
}
.fsw-3-2 {
  font-size: clamp(16px, 3.2vw, 32px);
}
.fsw-3-5 {
  font-size: clamp(16px, 3.5vw, 32px);
}
.fsw-3-8 {
  font-size: clamp(18px, 3.8vw, 36px);
}
.fsw-4 {
  font-size: clamp(20px, 4vw, 38px);
}
.fsw-4-5 {
  font-size: clamp(22px, 4.5vw, 42px);
}
.fsw-5 {
  font-size: clamp(23px, 5vw, 50px);
}
.font38-w-100-15 {
  font-size: clamp(16px, 3.8vw, 32px);
  padding-left: 0%;
  padding-right: 5%;
}
.fs-7
{
  font-size: 0.875rem;
}

/***** Color *****/  

.cur_green {
  color: #81b400;
}
.cur-gray-300 {
  color: #c0c0c0;
}
.dark_green {
  color: #2a9c00;

}
.line_color {
  color: #0ac900;
}
.line_color:hover {
  color: #00ba0c;
}
.youtube_color {
  color: #f00000;
}
.youtube_color:hover {
  color: #c60000;
}
.black-green {
  color: #1c2c23;
}
.yellow {
  color: #ff0;
}
/***** End Color *****/
.trash_color {
  color: #cacaca;
}
.trash_color:hover {
  color: rgb(255, 132, 132);
}
.header_line {
  display: block;
  width: 100%;
  height: 5px;
  background-color: #709c00;
}
.text-red {
  color: #f00;
}
.bg_cur_green {
  background-color: #73a100;
}
.bg-black-green {
  background-color: #1c2c23;
}
.bg-light-yellow {
  background-color: #fffff1;
}
/* Button */

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

.button-container .btn {
    flex-grow: 1;  /* ทำให้ทุกปุ่มขยายเต็มพื้นที่ที่เหลืออยู่ */
}
.button {
  flex-grow: 1;
  width: 100%;
  padding: 1vw 2vw; /* ปรับค่าตามต้องการ */
  white-space: nowrap;
  font-size: 2dvh; /* ปรับค่าตามต้องการ */
  aspect-ratio: 5/1; /* ตั้งอัตราส่วนความกว้างต่อความสูงของปุ่ม */
}
.flex-larger {
    flex-grow: 2;  /* ปุ่มนี้จะใช้พื้นที่มากกว่าปุ่มอื่น 2 เท่า */
}
.blink-button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  animation: blinker 0.4s steps(1, end) infinite;
}

@keyframes blinker {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.85;
  }
  100% {
    opacity: 1;
  }
}

/* End Button */

.Exp {
  color: #000;
  font-weight: bold;
  font-size: 2rem;
}
.link {
  text-decoration: none;
}
.svg-icon-radio {
  margin-top: 1rem;
  vertical-align: middle;
  fill: #d7d7d7;
}
input:checked + .svg-icon-radio {
  fill: #709c00;
}
.svg-icon-radio-2 {
  margin-top: 1rem;
  vertical-align: middle;
  fill: #fff;
}
input:checked + .svg-icon-radio-2 {
  fill: #ff8521;
}
.form-control::placeholder {
    color: #d6d6d6; /* สีเทาอ่อน สามารถเปลี่ยนเป็นสีที่ต้องการ */
    opacity: 1; /* ทำให้สีไม่โปร่งใส */
}