/* กำหนดพื้นหลังและฟอนต์ให้กับทั้งหน้า */
body {
    font-family: "Sarabun", sans-serif;
    background-color:#ffffff; /* พื้นหลังของหน้า */
    color: #333; /* สีฟอนต์ */
    min-height: 100vh;
    font-size: 19px;
    margin: 8px;
    padding: 0;
  }
  html, body {
    height: 100%;
    margin: 0;
  }
  
  main {
    flex: 1;
  }
  
  footer {
    color: #ffffff;
    
  }

  table:not(.table) > tbody > tr > td {
  	border-bottom: solid 1px;
  	border-top: solid 1px;
  	border-left: solid 1px;
  	border-right: solid 1px;
  }
  /* ------------------------------------------------------------------------------------- */
  
  nav[value="menu"]{
    background-color: #ffffff; /* สีbackground ของ nav */
    padding: 12px; 
  }
  .navbar-brand {
    color: #000000 !important; /* สีของ ตัวหลังสือ nav */
  }
  body .navbar-nav .nav-link {
    color: #000000;  /* สีของ ตัวหลังสือ nav */
    font-family: 'Kanit', sans-serif;
    margin: 5px;
    font-size: 20px;
  }

  body .navbar-nav .nav-link:hover{
    background-color: #f2efef;
    border-radius: 8px;
    transition: 0.5s;
  }

  .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover {
    background-color: #ffdada  /* สีเวลาเม้าชี้ */
    ;
  }

  #home{
    color: #000000;
  }

#logout{
 padding: 10px 15px;
 margin: 8px;
 border: unset;
 border-radius: 15px;
 color: #ffffff;
 z-index: 1;
 background: #46A637;
 position: relative;
 font-size: 17px;
 transition: all 250ms;
 overflow: hidden;
 font-family: 'Kanit', sans-serif;
}

#logout:hover{
    background-color: #59af6c;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
}
  /* ------------------------------------------------------------------------------------- */
  /* ตกเเต่งปุ่มในตรางโดยสามารถกำหนดได้อิสระ */
  /* การตกแต่งตาราง */
hr{
  border-width: 0.15em;
}
 img{
  height: 40px;
 }

 input[value="Edit"] {
 padding: 8px 15px;
 margin: 8px;
 border: unset;
 border-radius: 15px;
 color: #ffffff;
 z-index: 1;
 background: #F2CD13;
 position: relative;
 font-size: 18px;
 transition: all 250ms;
 overflow: hidden;
 font-family: 'Kanit', sans-serif;
}

input[value="Detail"] {
  padding: 8px 15px;
  margin: 8px;
  border: unset;
  border-radius: 15px;
  color: #ffffff;
  z-index: 1;
  background: #2C87BF;
  position: relative;
  font-size: 18px;
  transition: all 250ms;
  overflow: hidden;
  font-family: 'Kanit', sans-serif;
}

input[value="In-Active"] {
 padding: 8px 15px;
 margin: 8px;
 border: unset;
 border-radius: 15px;
 color: #ffffff;
 z-index: 1;
 background: #ef8a2b;
 position: relative;
 font-size: 18px;
 transition: all 250ms;
 overflow: hidden;
 font-family: 'Kanit', sans-serif;
  }
  input[value="Active"] {
 padding: 8px 15px;
 margin: 8px;
 border: unset;
 border-radius: 15px;
 color: #ffffff;
 z-index: 1;
 background: #46A637;
 position: relative;
 font-size: 17px;
 transition: all 250ms;
 overflow: hidden;
 font-family: 'Kanit', sans-serif;
  }
  
  input[value="Delete"] {
 padding: 8px 15px;
 margin: 8px;
 border: unset;
 border-radius: 15px;
 color: #ffffff;
 z-index: 1;
 background: #F24957;
 position: relative;
 font-size: 17px;
 transition: all 250ms;
 overflow: hidden;
 font-family: 'Kanit', sans-serif;
  }
  input[value="History"] {
 padding: 8px 15px;
 margin: 8px;
 border: unset;
 border-radius: 15px;
 color: #ffffff;
 z-index: 1;
 background: #F2A30F;
 position: relative;
 font-size: 18px;
 transition: all 250ms;
 overflow: hidden;
 font-family: 'Kanit', sans-serif;
  }
  input[value="Sync"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #009d24; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  input[value="Unsync"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #c80700; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  input[value="Add"] {
 padding: 8px 15px;
 margin: 8px;
 border: unset;
 border-radius: 15px;
 color: #ffffff;
 z-index: 1;
 background: #2C87BF;
 position: relative;
 font-size: 17px;
 transition: all 250ms;
 overflow: hidden;
 font-family: 'Kanit', sans-serif;
  }

input[value="Search"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #cb4700; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
}
  input[value="Print"] {
 padding: 8px 15px;
 margin: 8px;
 border: unset;
 border-radius: 15px;
 color: #ffffff;
 z-index: 1;
 background: #46A637;
 position: relative;
 font-size: 17px;
 transition: all 250ms;
 overflow: hidden;
 font-family: 'Kanit', sans-serif;
  }
  input[value="Save"] {
  padding: 8px 15px;
 margin: 8px;
 border: unset;
 border-radius: 15px;
 color: #ffffff;
 z-index: 1;
 background: #46A637;
 position: relative;
 font-size: 17px;
 transition: all 250ms;
 overflow: hidden;
 font-family: 'Kanit', sans-serif;
  }
  input[value="Back"] {
 padding: 8px 15px;
 margin: 8px;
 border: unset;
 border-radius: 15px;
 color: #ffffff;
 z-index: 1;
 background: #5f5d5d;
 position: relative;
 font-size: 17px;
 transition: all 250ms;
 overflow: hidden;
 font-family: 'Kanit', sans-serif;
  }
input[value="Login"] {
  padding: 8px 200px; /* ขนาดปุ่ม */
  border: unset;
  border-radius: 15px;
  color: #ffffff;
  z-index: 1;
   background: #60ae52;
   position: relative;
   font-weight: 1000;
   font-size: 17px;
   -webkit-box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
   box-shadow: 4px 8px 19px -3px rgba(0,0,0,0.27);
   transition: all 250ms;
   overflow: hidden;
   font-family: 'Kanit', sans-serif;
  }
  input[value="Show"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #3562e4; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  
  }
  input[value="Link"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #825747; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  input[value="Clone"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #02e6ff; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  input[value="Create"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #009d24; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  input[value="Create Project"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #009d24; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  input[value="Working"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #02e6ff; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 5px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    margin-bottom: 10px;
    border-radius: 10px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  input[value="Evaluate"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #009d24; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  input[value="BackUp"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #e4601a; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  input[value="Add Sub"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #08b3c3; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  input[value="Action"] {
 padding: 8px 15px;
 margin: 8px;
 border: unset;
 border-radius: 15px;
 color: #ffffff;
 z-index: 1;
 background: #F2CD13;
 position: relative;
 font-size: 18px;
 transition: all 250ms;
 overflow: hidden;
 font-family: 'Kanit', sans-serif;
  }

  input[value="View PL"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #0076fd; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  input[value="View Comment"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #825747; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  input[value="View WP"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #0076fd; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  input[value="Hide"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #3562e4; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  input[value="Send"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #009d24; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
    input[value="New"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #02e6ff; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  input[value="Follow"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #ffcc00; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

  a.btn.btn-primary.btn-sm {
    padding: 7px 7px;
    font-size: 16px;
    background-color: #009d24;
    color: rgb(255, 255, 255);
    border: none;
    margin: 0 10px;
    border-radius: 7px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}
input[value="Report"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #009d24; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }

    input[value="Empty"] {
    padding: 7px 7px; /* ขนาดปุ่ม */
    font-size: 16px; /* ขนาดฟร้อน */
    background-color: #ea1212; /* สีพื้นหลัง */
    color: rgb(255, 255, 255); /* สีตัวหนังสือในปุ่ม */
    border: none; /* ไม่มีเส่นขอบ */
    margin: 0 10px; /* กำหนด margin ซ้ายและขวาเป็น 10px */
    border-radius: 7px; /* กำหนดขอบมน */
    cursor: pointer; /* เปลี่ยนรูปแบบของเมาส์ให้เป็นมือชี้เมื่อวางเมาส์บนปุ่ม */
    transition: background-color 0.3s ease, transform 0.3s ease;
  }



  /* ------------------------------------------------------------------------------------- */
  
  /* เมื่อเอาเมาส์ไปชี้ปุ่ม */
  input:hover[value="Edit"] {
    background-color: #e8e684;
    color: #000000;
    transform: scale(1.2); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Detail"] {
    background-color: #8ef0ff;
    color: #000000;
    transform: scale(1.2); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="In-Active"] {
    background-color: #ff823f;
    color: #000000;
    transform: scale(1.2); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Active"] {
    background-color: #59af6c;
    color: #000000;
    transform: scale(1.2); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Delete"] {
    background-color: #EF4444;
    color: #000000;
    transform: scale(1.2); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="History"] {
    background-color: #facb83;
    color: #000000;
    transform: scale(1.2); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Add"] {
    background-color: #aaf6ff;
    color: #000000;
    transform: scale(1.2); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Search"] {
    background-color: #aa0000;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Save"] {
    background-color: #59af6c;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Back"] {
    background-color: #1b1b1b;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Login"] {
    background-color: #59af6c;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Sync"] {
    background-color: #59af6c;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Unsync"] {
    background-color: #ed5959;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Show"] {
    background-color: #8eabff;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Link"] {
    background-color: #806860;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Print"] {
    background-color: #59af6c;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Clone"] {
    background-color: #dd5757;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }

  input:hover[value="Create Project"] {
    background-color: #59af6c;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Working"]{
    background-color: #aaf6ff;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Create"]{
    background-color: #59af6c;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Evaluate"]{
    background-color: #59af6c;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="BackUp"]{
    background-color: #ff823f;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Add Sub"]{
    background-color: #8ed2ca;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Action"]{
    background-color: #f5d86f;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="View PL"] {
    background-color: #8eabff;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="View Comment"] {
    background-color: #806860;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="View WP"] {
    background-color: #8eabff;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Hide"] {
    background-color: #8eabff;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Send"] {
    background-color: #59af6c;
    color: #000000;
    transform: scale(1.12); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
    input:hover[value="New"] {
    background-color: #aaf6ff;
    color: #000000;
    transform: scale(1.2); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
    input:hover[value="Follow"] {
    background-color: #f5d86f;
    color: #000000;
    transform: scale(1.2); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
   a.btn.btn-primary.btn-sm:hover {
    background-color: #59af6c;
    color: #000000;
    transform: scale(1.2); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  input:hover[value="Report"] {
    background-color: #59af6c;
    color: #000000;
    transform: scale(1.2); /* ปรับขนาดเล็กน้อยเมื่อเมาส์ชี้ */
  }
  
  
  /* ------------------------------------------------------------------------------------- */
  
  /* เมื่อปุ่มถูกกด */
  input button:active {
    background-color: #000000;
  }
  
  /* ------------------------------------------------------------------------------------- */
  
  /* เพิ่มความยืดหยุ่นในการแสดงผลบนมือถือ */
  @media (max-width: 768px) {
    table, form {
        width: 100%;
        font-size: 0.9rem;
    }
    
    form input[type="text"],
    form input[type="submit"],
    form input[type="button"] {
        width: 100%;
    }
  }
  /* ------------------------------------------------------------------------------------- */
  #prelim_menu {
    border: 3px rgb(0, 0, 0);
    padding: 8px;
    
  }
  #prelim_menu a{
    color: #000000;
    text-decoration: none;
  }

  #prelim_menu a:hover{
    color: #ea1212;
  }

#prelim_menu tbody{
  background-color: #e7e7e7;
}

  #footer {
  position: static;
  bottom: 0;
  width: 100%;
  background-color: #f5f5f5;
}

html, body {
  height: 100%;
  margin: 0;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%; /* ทำให้ wrapper ขยายเต็มหน้าจอ */
}
        /* ส่วนของเนื้อหาหลัก */
main {
  flex: 1; /* เนื้อหาจะขยายให้เต็มพื้นที่ */
}

/* ฟุตเตอร์ */
footer {
  background: #e7e7e7;
  padding: 10px 20px;
  margin-top: auto; /* ฟุตเตอร์จะอยู่ที่ด้านล่างสุด */
}

#prelim-menu{
  background-color: #6bae4b;
  border-radius: 0 0 10px 10px;
  padding: 2px;
  color: #ffffff;
}

#prmlim-menu a .nav-link :hover{
  background-color: #e0dddd;
  transform: scale(1.2);

}

.back-to-top {
    position: fixed;
    bottom: 90px; /* ปรับจาก 10px เป็น 60px เพื่อให้ลอยเหนือ footer */
    right: 30px;
    background-color: #000000;
    color: white;
    padding: 1rem 1.5rem;
    text-decoration: none;
    border-radius: 7px;
    font-size: 1rem;
    z-index: 999;
    transition: 0.5s;
}
.back-to-top:hover {
    background-color: #b4afaf;
    color: #000000;
}

a.nav-link{
  color: #ffffff;
  font-family: 'Kanit', sans-serif;
}

a.nav-link:hover{
  background-color: #d6efba;
  color: #000000;
  transition: 0.5s;
}
 .nav-item{
  color: #000000;
}

.nav.nav-tabs{
  background-color: #979B9F;
  border-radius: 7px 7px 0 0;
}

a#at1.nav-link:hover{
  background-color: #f5efa7;
  color: #000000;
  transition: 0.5s;
}

a#at2.nav-link:hover{
  background-color: #f5efa7;
  color: #000000;
  transition: 0.5s;
}

a#at3.nav-link:hover{
  background-color: #f5efa7;
  color: #000000;
  transition: 0.5s;
}

a#at4.nav-link:hover{
  background-color: #f5efa7;
  color: #000000;
  transition: 0.5s;
}

a#at5.nav-link:hover{
  background-color: #f5efa7;
  color: #000000;
  transition: 0.5s;
}

a#at6.nav-link:hover{
  background-color: #f5efa7;
  color: #000000;
  transition: 0.5s;
}
/*------------------------------------------------------------------------*/

.left-side {
  flex: 1;
  background-image: url('img/j.png'); /* เปลี่ยนเป็น path รูปภาพของคุณ */
  background-size: cover;
  background-position: center;
}

.login-wrapper {
  display: flex;
  height: 100vh;
}

.right-side {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 3rem;
  color: #000000;
  font-family: 'Sarabun', sans-serif;
}
.form-container {
  width: 100%;
  max-width: 400px;
  text-align: center;
}
img.login-logo {
  width:90px;
  height: 180px;
}

.login-wrapper {
  display: flex;
  height: 100vh;
}

#login input[name="user"],
#login input[type="password"] {
  width: 100%;
  box-sizing: border-box; /* ทำให้ padding ไม่ล้นกรอบ */
  padding: 8px;           /* ปรับให้พอดี */
  font-size: 20px;        /* ขนาดอักษรพอดี */
  overflow: hidden;       /* ป้องกันการล้น */
}