/* ปุ่ม X */
		.modal-close {
		   position: absolute;
		   right: 15px;
		   top: 0;
		   cursor: pointer;
		   font-size: 22px;
		}

		.btn {
		   background-color: #82E0AA;
		   border: none;
		   color: white;
		   padding: 15px 32px;
		   text-align: center;
		   text-decoration: none;
		   display: inline-block;
		   font-size: 18px;
		   font-weight: bold;
		   margin: 4px 2px;
		   cursor: pointer;
		   border-radius: 12px;
		}

		.btn:hover {
		   background-color: #239B56;
		   font-weight: bold;
		   color: white;
		}



		body {
		   background-color: #CCCCCC;
		   margin-left: 0px;
		   margin-top: 0px;
		   margin-right: 0px;
		   margin-bottom: 0px;
		}

		input[type="number"]::-webkit-inner-spin-button,
		input[type="number"]::-webkit-outer-spin-button {
		   -webkit-appearance: none;
		   margin: 0;
		}

		input[type="number"] {
		   -moz-appearance: textfield;
		}

		.file-btn {
		   border-radius: 5px;
		   border: 0;
		   padding: 10px;
		   background-color: #04d658;
		   color: white;
		}

		.slip-btn {
		   width: 100%;
		   font-size: 12px;
		   cursor: pointer;
		   border-radius: 5px;
		   border: 0;
		   padding: 3px;
		   background-color: #04d658;
		   color: white;
		   transition: color 0.3s ease, transform 0.3s ease;
		   box-sizing: border-box;
		   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
		}

		.slip-btn:hover {
		   transform: scale(1.05);
		   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
		   background-color: #00bc4b;
		   color: blue;
		}

		.slip-btn2 {
		   width: 20%;
		   font-size: 12px;
		   cursor: pointer;
		   border-radius: 5px;
		   border: 0;
		   padding: 3px;
		   background-color: #04d658;
		   color: white;
		   transition: color 0.3s ease, transform 0.3s ease;
		   box-sizing: border-box;
		   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
		}

		.slip-btn2:hover {
		   transform: scale(1.05);
		   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
		   background-color: #00bc4b;
		   color: blue;
		}

		.slip-btn3 {
		   display: inline-block;
		   width: 35vh;
		   font-size: 14px;
		   /* font-weight: bold; */
		   /* white-space: nowrap; */
		   cursor: pointer;
		   border-radius: 5px;
		   border: 0;
		   padding: 9px;
		   background-color: #04d658;
		   color: white;
		   transition: color 0.3s ease, transform 0.3s ease;
		   box-sizing: border-box;
		   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
		}

		.slip-btn3:hover {
		   transform: scale(1.05);
		   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
		   background-color: #00bc4b;
		   color: blue;
		}

		.editSlip-btn {
		   width: 100%;
		   font-size: 12px;
		   cursor: pointer;
		   border-radius: 5px;
		   border: 0;
		   padding: 3px;
		   background-color: #fec641;
		   color: black;
		   transition: color 0.3s ease, transform 0.3s ease;
		   box-sizing: border-box;
		   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
		}

		.editSlip-btn:hover {
		   transform: scale(1.05);
		   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
		   background-color: #f8ad01;
		   color: white;
		}

		.editslip-btn2 {
		   width: 20%;
		   font-size: 12px;
		   cursor: pointer;
		   border-radius: 5px;
		   border: 0;
		   padding: 3px;
		   background-color: #fec641;
		   color: black;
		   transition: color 0.3s ease, transform 0.3s ease;
		   box-sizing: border-box;
		   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
		}

		.editslip-btn2:hover {
		   transform: scale(1.05);
		   box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7);
		   background-color: #f8ad01;
		   color: white;
		}

		/* The container */
		.container {
		   display: block;
		   position: relative;
		   padding-left: 35px;
		   margin-bottom: 12px;
		   cursor: pointer;
		   -webkit-user-select: none;
		   -moz-user-select: none;
		   -ms-user-select: none;
		   user-select: none;
		}

		/* Hide the browser's default radio button */
		.container input {
		   position: absolute;
		   opacity: 0;
		   cursor: pointer;
		}

		/* Create a custom radio button */
		.checkmark {
		   position: absolute;
		   top: 0;
		   left: 0;
		   height: 25px;
		   width: 25px;
		   background-color: #eee;
		   border-radius: 50%;
		}

		/* On mouse-over, add a grey background color */
		.container:hover input~.checkmark {
		   background-color: #ccc;
		}

		/* When the radio button is checked, add a blue background */
		.container input:checked~.checkmark {
		   background-color: #2196F3;
		}

		/* Create the indicator (the dot/circle - hidden when not checked) */
		.checkmark:after {
		   content: "";
		   position: absolute;
		   display: none;
		}

		/* Show the indicator (dot/circle) when checked */
		.container input:checked~.checkmark:after {
		   display: block;
		}

		/* Style the indicator (dot/circle) */
		.container .checkmark:after {
		   top: 9px;
		   left: 9px;
		   width: 8px;
		   height: 8px;
		   border-radius: 50%;
		   background: white;
		}

		/* Add shadow to the image preview */
		.preview img {
		   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		   /* Adjust the values as needed */
		}

		.image-preview-container {
		   display: inline-block;
		   overflow: auto;
		   justify-content: center;
		   align-items: center;
		   margin-top: 20px;
		}

		.image-preview-container img {
		   margin-right: 10px;
		   width: 200px;
		   height: 200px;
		   margin-bottom: 20px;
		   object-fit: contain;
		   transition: all 0.3s ease-in-out;
		}

		.image-preview-container img:hover {
		   box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		   cursor: pointer;
		   width: 220px;
		   height: 220px;
		}



		/* The Modal (background) */
		.modal {
		   display: none;
		   /* Hidden by default */
		   position: fixed;
		   /* Stay in place */
		   z-index: 1;
		   /* Sit on top */
		   padding-top: 50px;
		   padding-bottom: 50px;
		   /* Location of the box */
		   left: 0;
		   top: 0;
		   width: 100%;
		   /* Full width */
		   height: 120%;
		   /* Full height */
		   overflow: auto;
		   /* Enable scroll if needed */
		   background-color: rgb(0, 0, 0);
		   /* Fallback color */
		   background-color: rgba(0, 0, 0, 0.4);
		   /* Black w/ opacity */
		}

		/* Modal Content */
		.modal-content {
		   background-color: #fefefe;
		   margin-top: auto;
		   margin-bottom: 300px;
		   margin-left: auto;
		   margin-right: auto;
		   padding: 20px;
		   border: 1px solid #888;
		   width: 40%;
		   overflow: auto;
		   max-width: 80%;
		}

		.bg-modal {
		   display: none;
		   position: fixed;
		   z-index: 1;
		   padding-top: 50px;
		   padding-bottom: 50px;
		   left: 0;
		   top: 0;
		   width: 100%;
		   height: 100%;
		   overflow: auto;
		   background-color: rgb(0, 0, 0);
		   background-color: rgba(0, 0, 0, 0.4);
		}

		.bg-modal-content {
		   background-color: #fefefe;
		   margin-top: auto;
		   margin-bottom: 300px;
		   margin-left: auto;
		   margin-right: auto;
		   padding: 20px;
		   border: 1px solid #888;
		   width: 50%;
		   overflow: auto;
		   max-width: 80%;
		}

		.slip-modal {
		   display: none;
		   position: fixed;
		   z-index: 1000;
		   left: 0;
		   top: 0;
		   width: 100%;
		   height: 100%;
		   overflow: auto;
		   background-color: rgb(0, 0, 0);
		   background-color: rgba(0, 0, 0, 0.3);
		   justify-content: center;
		   align-items: center;
		}

		.slip-modal-content {
		   background-color: #fefefe;
		   margin: auto;
		   display: block;
		   width: 80%;
		   max-width: 50%;
		}


		/* The Close Button */
		.close {
		   color: #aaaaaa;
		   float: right;
		   font-size: 28px;
		   font-weight: bold;
		}

		.close:hover,
		.close:focus {
		   color: #000;
		   text-decoration: none;
		   cursor: pointer;
		}

		.loader {
		   margin: 100px auto;
		   font-size: 25px;
		   width: 1em;
		   height: 1em;
		   border-radius: 50%;
		   position: relative;
		   text-indent: -9999em;
		   -webkit-animation: load5 1.1s infinite ease;
		   animation: load5 1.1s infinite ease;
		   -webkit-transform: translateZ(0);
		   -ms-transform: translateZ(0);
		   transform: translateZ(0);
		}

		/* Apply styles to the form container */
		.form-container {
		   max-width: 400px;
		   margin: auto;
		   padding: 20px;
		   background-color: #f9f9f9;
		   border: 1px solid #ddd;
		   border-radius: 5px;
		   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		}

		/* Style the form labels */
		.form-container label {
		   display: block;
		   margin-bottom: 8px;
		   font-weight: bold;
		}

		/* Style the input fields */
		.form-container input[type="number"],
		.form-container select,
		.form-container input[type="text"] {
		   width: 100%;
		   padding: 10px;
		   margin-bottom: 15px;
		   box-sizing: border-box;
		   border: 1px solid #ccc;
		   border-radius: 4px;
		   background-color: #fff;
		   transition: border-color 0.3s;
		}

		/* Add focus styles to input fields */
		.form-container input[type="number"]:focus,
		.form-container select:focus,
		.form-container input[type="text"]:focus {
		   border-color: #1fd0ec;
		   /* Change to your desired focus color */
		   outline: none;
		}

		/* Style the file input button */
		.form-container input[type="file"] {
		   display: none;
		   /* Hide the default file input */
		}

		.form-container .button {
		   background-color: #1fd0ec;
		   color: #fff;
		   padding: 10px 15px;
		   border: none;
		   border-radius: 4px;
		   cursor: pointer;
		   transition: background-color 0.3s;
		}

		.form-container .button:hover {
		   background-color: #04d658;
		   /* Change to your desired hover color */
		}


		@-webkit-keyframes load5 {

		   0%,
		   100% {
		      box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
		   }

		   12.5% {
		      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
		   }

		   25% {
		      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
		   }

		   37.5% {
		      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
		   }

		   50% {
		      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
		   }

		   62.5% {
		      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
		   }

		   75% {
		      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
		   }

		   87.5% {
		      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
		   }
		}

		@keyframes load5 {

		   0%,
		   100% {
		      box-shadow: 0em -2.6em 0em 0em #ffffff, 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.5), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7);
		   }

		   12.5% {
		      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.7), 1.8em -1.8em 0 0em #ffffff, 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5);
		   }

		   25% {
		      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.5), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.7), 2.5em 0em 0 0em #ffffff, 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
		   }

		   37.5% {
		      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.5), 2.5em 0em 0 0em rgba(255, 255, 255, 0.7), 1.75em 1.75em 0 0em #ffffff, 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
		   }

		   50% {
		      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.5), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.7), 0em 2.5em 0 0em #ffffff, -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.2), -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
		   }

		   62.5% {
		      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.5), 0em 2.5em 0 0em rgba(255, 255, 255, 0.7), -1.8em 1.8em 0 0em #ffffff, -2.6em 0em 0 0em rgba(255, 255, 255, 0.2), -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
		   }

		   75% {
		      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.5), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.7), -2.6em 0em 0 0em #ffffff, -1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2);
		   }

		   87.5% {
		      box-shadow: 0em -2.6em 0em 0em rgba(255, 255, 255, 0.2), 1.8em -1.8em 0 0em rgba(255, 255, 255, 0.2), 2.5em 0em 0 0em rgba(255, 255, 255, 0.2), 1.75em 1.75em 0 0em rgba(255, 255, 255, 0.2), 0em 2.5em 0 0em rgba(255, 255, 255, 0.2), -1.8em 1.8em 0 0em rgba(255, 255, 255, 0.5), -2.6em 0em 0 0em rgba(255, 255, 255, 0.7), -1.8em -1.8em 0 0em #ffffff;
		   }
		}

		.row {
		   /* border: 1px solid red; */
		   display: flex;
		   flex-wrap: wrap;
		   justify-content: center;
		   align-items: center;
		   /* margin: 15px 15px; Adjusts for spacing between columns */
		}

		.column {
		   /* border: 1px solid green; */
		   padding: 0 5px;
		}

		/* Ensure the image is responsive */
		#logo {
		   max-width: 100%;
		   height: auto;
		}

		/* Responsive layout for small screens */
		@media screen and (max-width: 768px) {
		   .column {
		      flex: 0 0 100%;
		      /* Stack columns on smaller screens */
		   }
		}

		/* Responsive for smaller laptops and large tablets (1024px and below) */
		@media screen and (max-width: 1024px) {
		   .column {
		      flex: 0 0 50%;
		      /* 50% width for medium screens like tablets */
		   }
		}

		/* Responsive for very large screens (1200px and above) */
		@media screen and (min-width: 1200px) {
		   .column {
		      flex: 0 0 45%;
		      /* 33.33% width on very large screens (3 columns) */
		   }
		}