.container-01-1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* แบ่งสองคอลัมน์แบบเท่ากัน */
  grid-template-rows: 330px auto;
  /* กำหนดแถวแรกสูง 110px และแถวที่สองให้สูงอัตโนมัติ */
  gap: 10px;
  /* ระยะห่างระหว่างคอลัมน์ */
  padding: 0px;
}

.container-sum-calculate {
  display: grid;
  grid-template-columns: 1fr;
  /* แบ่งสองคอลัมน์แบบเท่ากัน */
  grid-template-rows: 470px auto;
  /* กำหนดแถวแรกสูง 110px และแถวที่สองให้สูงอัตโนมัติ */
  border-color: #000000;
  border:2px;
  gap: 50px;
  /* ระยะห่างระหว่างคอลัมน์ */
  padding: 0px;
}
.container-sum-calculate2 {
  display: grid;
  grid-template-columns: 1fr;
  /* แบ่งสองคอลัมน์แบบเท่ากัน */
  grid-template-rows: 400px auto;
  /* กำหนดแถวแรกสูง 110px และแถวที่สองให้สูงอัตโนมัติ */
  border-color: #000000;
  border:2px;
  gap: 10px;
  /* ระยะห่างระหว่างคอลัมน์ */
  padding: 0px;
}

.container-01-1-02 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* แบ่งสองคอลัมน์แบบเท่ากัน */
  grid-template-rows: 660px auto;
  /* กำหนดแถวแรกสูง 110px และแถวที่สองให้สูงอัตโนมัติ */
  gap: 10px;
  /* ระยะห่างระหว่างคอลัมน์ */
  padding: 0px;
}

.container-01-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* แบ่งสองคอลัมน์แบบเท่ากัน */
  grid-template-rows: 500px auto;
  /* กำหนดแถวแรกสูง 110px และแถวที่สองให้สูงอัตโนมัติ */
  gap: 10px;
  /* ระยะห่างระหว่างคอลัมน์ */
  padding: 10px;
}

.container-01-3 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* แบ่งสองคอลัมน์แบบเท่ากัน */
  grid-template-rows: 500px auto;
  /* กำหนดแถวแรกสูง 110px และแถวที่สองให้สูงอัตโนมัติ */
  gap: 10px;
  /* ระยะห่างระหว่างคอลัมน์ */
  padding: 10px;
}

.container-01-4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* แบ่งสองคอลัมน์แบบเท่ากัน */
  grid-template-rows: 350px auto;
  /* กำหนดแถวแรกสูง 110px และแถวที่สองให้สูงอัตโนมัติ */
  gap: 10px;
  /* ระยะห่างระหว่างคอลัมน์ */
  padding: 10px;
}

.container-01-5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* แบ่งสองคอลัมน์แบบเท่ากัน */
  grid-template-rows: 700px auto;
  /* กำหนดแถวแรกสูง 110px และแถวที่สองให้สูงอัตโนมัติ */
  gap: 10px;
  /* ระยะห่างระหว่างคอลัมน์ */
  padding: 10px;
}

.container-2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  /* แบ่งเป็น 3 คอลัมน์เท่ากัน */
  grid-template-rows: 280px auto;
  /* กำหนดแถวแรกสูง 110px และแถวที่สองให้สูงอัตโนมัติ */
  gap: 10px;
  /* ระยะห่างระหว่างคอลัมน์ */
  padding: 10px;
}

.container-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 0.5fr;
  /* แบ่งเป็น 3 คอลัมน์เท่ากัน */
  grid-template-rows: 150px auto;
  /* กำหนดแถวแรกสูง 110px และแถวที่สองให้สูงอัตโนมัติ */
  gap: 20px;
  /* ระยะห่างระหว่างคอลัมน์ */
  padding: 10px;
}

/* กำหนดสีพื้นหลังสำหรับ Grid ที่ 1 */
.section-left {
  background-color: #f5f5f5;
  /* สีพื้นหลังสำหรับ Grid ที่ 1 */
  padding: 5px;
}

/* กำหนดสีพื้นหลังสำหรับ Grid ที่ 1 */
.section-left-01-2 {
  background-color: #f5f5f5;
  /* สีพื้นหลังสำหรับ Grid ที่ 1 */
  padding: 5px;
  display: flex;
  flex-direction: column; /* จัดให้อยู่ในแนวตั้ง */
  justify-content: center; /* จัดแนวกลางในแนวตั้ง */
  align-items: center; /* จัดแนวกลางในแนวนอน */
}

/* กำหนดสีพื้นหลังสำหรับ Grid ที่ 2 */
.section-right {
  background-color: #d3e0ea;
  /* สีพื้นหลังสำหรับ Grid ที่ 2 */
  padding: 5px;
}

.section-row2-variable {
  background-color: #f5f5f5;
  /* สีพื้นหลังชั่วคราว */
  padding: 10px;
}

.section-row3 {
  background-color: #f5f5f5;
  /* สีพื้นหลังชั่วคราว */
  padding: 10px;
}

.section-row1 {
  /* สีพื้นหลังชั่วคราว */
  padding: 5px;
}


body {
  font-family: Arial, sans-serif;
  background-color: #e1f5fe;
  color: #000000;
  margin: 0;
  padding: 20px;
}

.form-container {
  width: 45%;
}

.input-group {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 50%; /* ความกว้างของกรอบสี่เหลี่ยม*/
}

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

.input-group label {
  min-width: 200px;
}

.input-group input,
.input-group select {
  background-color: #ffcccc;
  /* สีแดงอ่อน */
  margin-right: 5px;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

.input-group input::placeholder {
  color: #a0a0a0;
  /* สีของข้อความเรือนลาง */
  opacity: 1;
  /* ให้ความคมชัดของข้อความเรือนลางเต็มที่ */
}

/* .input-group-2 */

.input-group-2 {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: 50%; /* ความกว้างของกรอบสี่เหลี่ยม*/
}

.input-group-2 label {
  min-width: 200px;
}

.input-group-2 input,
.input-group-2 select {
  background-color: #ffffff;
  /* สีแดงอ่อน */
  margin-right: 5px;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

/* จบส่วนของ.input-group-2 */

input[type="submit"] {
  background-color: #007bff;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #0056b3;
}

/* cssภายในเนื้อหา */

/* cssภายในกล่องข้อความ */
input[type="text"],
input[type="number"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

/* cssภายในของเนื้อหาการวาดรูป */
.canvas-container {
  width: 45%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

canvas {
  border: 1px solid black;
  display: block;
  margin: 20px auto;
  margin-left: 40px; /* ดันไปทางขวา */
}

/* cssปุ่มซูมการวาดรูป */
.zoom-buttons {
  display: flex;
  justify-content: center;
  margin-top: 10px;
  margin-left: 330px;
}

.zoom-btn {
  background-color: #dcd6faad;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  cursor: pointer;
  font-size: 16px;
}

.zoom-btn i {
  font-size: 20px; /* ขนาดของไอคอน */
  color: #333;
}


.zoom-buttons button {
  margin: 0 10px;
  padding: 1px 10px;
  font-size: 14px;
}

.search-group {
  position: relative;
  width: 100%;
}

.search-container {
  display: flex;
  align-items: center;
  position: relative;
}

#id_customer {
  width: 100%;
  padding-right: 60px;
  /* เพิ่ม padding ขวาเพื่อไม่ให้ข้อความทับไอคอน */
}

.search-icon {
  position: absolute;
  right: 10px;
  pointer-events: none;
  /* เพื่อให้ไม่สามารถคลิกไอคอนได้ */
  color: #aaa;
  font-size: 18px;
}

/* ปรับความสูงของ select2 เพื่อให้พอดีกับไอคอน */
.select2-container--default .select2-selection--single {
  height: auto;
  padding: 6px 30px 6px 8px;
  /* padding-right สำหรับไอคอน */
  border-radius: 0;
  border: 1px solid #ccc;
}