a {

   color: white;
   text-align: center;

   text-decoration: none;
 }

 a:hover {
   background-color: #F1F7F7;
   color: black;
   text-decoration: none;

 }

 .a2 {

   color: white;
   text-align: center;
   text-decoration: none;
   display: inline-block;
 }

 .a2:hover {

   color: #0B192C;
 }

 .a3 {
   color: white;
   text-align: center;
   text-decoration: none;
   display: inline-block;
 }

 .a3:hover {

   color: #0B192C;
 }

 .a3:active {
   background-color: none;
 }

 .active {
   background-color: #ffffff;
 }



 body {
   font-family: "Kanit"
 }

 body,
 html {
   height: 100%;
   line-height: 1.8;
 }

 /* Full height image header */

 .bg-1 {
   background-color: #ECF8F8;

 }

 .bg-2 {
   background-color: #9cadce;

 }

 .border-hr {
   border-top: 1px solid #ccc;
   margin-top: 10px;
   margin-bottom: 5px;
 }


 .w3-bar .w3-button {
   padding: 16px;
 }

 #text1 {
   display: none;
   color: red
 }

 .login_oueter {
   width: 360px;
   max-width: 100%;
 }

 .logo_outer {
   text-align: center;
 }

 .logo_outer img {
   width: 120px;
   margin-bottom: 40px;
 }

 .colornv {
   background: linear-gradient(135deg, #2a9bd0 10%, #bc81b4);
   color: white;
 }

 .color-dash-blue,
 .color-dash-blue:hover {
   color: #295F98 !important
 }

 .colornv2 {
   background: linear-gradient(135deg, #ccd8fd 10%, #fcfdfd);
 }

 .color1 {
   background: #f1f1f1;
 }

 .color2 {
   background: #ffffff;
 }

 .color3 {
   color: #000000;
 }

 .theme-d1 {
   background-color: #c7e5f7 !important;
   font-family: Kanit;
 }

 .theme-d2 {
   background-color: #a0dcff !important;
   font-family: Kanit;
 }

 .theme-d3 {
   background-color: #36468D !important;
   font-family: Kanit;
 }

 .color4 {
   background: linear-gradient(135deg, #36468D 10%, #70A1FF);
 }

 .color5 {

   background: linear-gradient(135deg, #70A1FF 10%, #36468D);

 }

 .color6 {
   background-color: rgba(211, 211, 211, 0.9);
 }

 .color6_1 {
   background-color: #004182;
 }

 .color7 {
   /*background-color: rgba(52, 56, 91, 0.9);*/
   background-color: #F3D6CE;
   border: 0px;
   border-radius: 2px;
   padding: 4px;
   color: #2E3136;

 }

 .color7_1 {
   /*background-color: rgba(52, 56, 91, 0.9);*/
   background-color: #F3D6CE;
   color: #2E3136;

 }

 .color8 {
   /*background-color: rgba(52, 56, 91, 0.9);*/
   background-color: #E4F1EE;
   border: 0px;
   border-radius: 2px;
   padding: 4px;
   color: #2E3136;

 }

 .color9 {
   /*background-color: rgba(52, 56, 91, 0.9);*/
   background-color: #FCF4DD;
   border: 0px;
   border-radius: 2px;
   padding: 4px;
   color: #2E3136;

 }

 .color10 {
   /*background-color: rgba(52, 56, 91, 0.9);*/
   background-color: #52b2cf;
   border: 0px;
   border-radius: 2px;
   padding: 4px;
   color: #2E3136;

 }

 .color10_1 {
   /*background-color: rgba(52, 56, 91, 0.9);*/
   background-color: #52b2cf;
   color: #2E3136;

 }

 .color11 {
   /*background-color: rgba(52, 56, 91, 0.9);*/
   background-color: #F2A490;

   color: #FFFFFF;


 }

 .cfont1 {
   color: #013d5a;
 }

 #div2 {

   background-color: white;
   width: 200px;
   height: 100px;
   position: relative;
   top: 140px;
   left: 20px;
   padding: 20px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
   border-radius: 12px;
   opacity: 0.4;
 }

 #div1 {

   position: relative;
   left: 50px;
   padding: 20px;

   width: 200px;
   height: 100px;

 }



 .active {
   background-color: #04AA6D;
 }

 .style1 {
   font-size: 13px;
   font-weight: normal;
   text-align: center;


 }

 .style2 {
   font-size: 14px;
   font-weight: normal;
   text-align: right;

 }

 .style3 {
   font-size: 14px;
   font-weight: normal;
 }

 .style4 {
   font-size: 16px;
   font-weight: normal;
 }


 .middle {
   vertical-align: middle;
 }

 span a {
   display: block;

   text-align: center;
   color: #ffffff;
   /*color:#534145;*/

   text-decoration: none;
 }

 span a:hover:not(.active) {

   color: #E7E7E7;
 }

 .table1 {
   width: 100%;
   border-collapse: collapse;
 }

 .text1 {
   text-align: right;

 }

 .text2 {
   text-align: center;
 }

 .text3 {
   font-size: 14px;
   font-weight: normal;

 }

 .textbox_transparent {
   background-color: transparent;
   border: 0px;
 }

 .th1 {
   position: sticky;
   top: -1px;
   background-color: #DEEDF0;

   color: #354259;

 }

 .outer-wrapper {
   box-shadow: 0px 0px 5px #87A7B3;
   border-radius: 0px;

 }

 /* Modal styles */
 .modal {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   display: none;
   align-items: center;
   justify-content: center;
 }

 .modal-dialog {
   max-width: 60%;
   max-height: 50%;
 }

 .modal-content {
   width: 100%;
   background-color: white;
   border-radius: 8px;
   padding: 20px;
 }

 .modal-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .modal-title {
   width: 100%;

 }

 .modal-footer {
   display: flex;
   justify-content: flex-end;
   padding-top: 10px;
 }

 .icon-container {
   display: flex;
   justify-content: center;
   /* จัดไอคอนทั้งหมดให้อยู่ตรงกลาง */
   align-items: center;
   /* จัดให้ไอคอนและข้อความอยู่ตรงกลางในแนวตั้ง */
   flex-wrap: wrap;
   /* หากเนื้อหามากเกินไปจะไปแถวถัดไป */
 }

 .icon-item {
   display: flex;
   flex-direction: column;
   /* จัดให้ไอคอน, ข้อความอยู่ในแนวตั้ง */
   align-items: center;
   /* จัดให้ไอคอนและข้อความอยู่ตรงกลาง */


 }

 .line1 {
   width: 100px;
   /* ความยาวของเส้น */
   height: 5px;
   /* ความหนาของเส้น */
   background-color: gray;
   /* สีของเส้น */
   margin-left: 0;
   /* ระยะห่างจากไอคอนแต่ละอัน */
   margin-right: 0;
   /* ระยะห่างจากไอคอนแต่ละอัน */

 }

 .line2 {
   width: 100px;
   /* ความยาวของเส้น */
   height: 5px;
   /* ความหนาของเส้น */
   background-color: green;
   /* สีของเส้น */
   margin-left: 0;
   /* ระยะห่างจากไอคอนแต่ละอัน */
   margin-right: 0;
   /* ระยะห่างจากไอคอนแต่ละอัน */

 }

 /* ปรับหัวตารางให้ดูทันสมัย */
 /* เส้นขอบตาราง */
 #employee_data {
   border-collapse: separate;
   border-spacing: 0;
   border: 1px solid #dee2e6;
   border-radius: 1px;
   overflow: hidden;
 }

 /* เส้นขอบของ cell */
 #employee_data th,
 #employee_data td {
   border-bottom: 0px solid #dee2e6;
   border-right: 1px solid #dee2e6;
 }

 /* ลบขอบขวาของ cell สุดท้าย */
 #employee_data th:last-child,
 #employee_data td:last-child {
   border-right: none;
 }

 /* ขอบบนของแถวหัวตาราง */
 #employee_data thead th {
   background-color: #aecdf5;
   color: #1a5276;
   text-align: center;
   vertical-align: middle;
   border-right: 1px solid #87b9fa;
   border-bottom: 1px solid #87b9fa;
 }

 /* แถวสลับสี */
 #employee_data tbody tr:nth-child(even) {
   background-color: #f9f9f9;
 }

 #employee_data tbody tr:nth-child(odd) {
   background-color: #ffffff;
 }

 /* Hover effect */
 #employee_data tbody tr:hover {
   background-color: #e3f2fd;
 }

 /* ช่องข้อมูล */
 #employee_data td {
   padding: 8px;
   vertical-align: middle;
   /*font-size: 13px;*/
 }

 /* ป้ายสถานะ */
 .badge {
   font-size: 12px;
   padding: 5px 10px;
   border-radius: 10px;
 }

 /* ลิงก์ */
 a.viewFileLink,
 a[href*="printpmform.php"] {
   margin-left: 5px;
   font-size: 13px;
   color: #0d6efd;
   text-decoration: none;
 }

 a.viewFileLink:hover {
   text-decoration: underline;
 }

 #downloadFrame {
   display: none;
 }