/* ##### Custom Css ##### */
	tr.group,
	tr.group:hover {
		background-color: #E4E4E4 !important;
	}

	.toggle.ios, .toggle-on.ios, .toggle-off.ios { border-radius: 20rem; }
	.toggle.ios .toggle-handle { border-radius: 20rem; }

	.multiselect-container {
		width: 100% !important;
	}

	.has-error .select2-selection {
		border-color: #e74c3c !important;
	}

	.blink_me {
	  animation: blinker 2s linear infinite;
	}

	@keyframes blinker {
	  50% {
		opacity: 0;
	  }
	}

	.modal { overflow: auto !important; }
	.modal-body {	
		-webkit-overflow-scrolling: touch;
	}

	.bootstrap-tagsinput {
	  width: 100% !important;
	}

	.card-img-wrap {
	  overflow: hidden;
	  position: relative;
	}
	.card-img-wrap:after {
	  content: '';
	  position: absolute;
	  top: 0; left: 0; right: 0; bottom: 0;
	  background: rgba(255,255,255,0.3);
	  opacity: 0;
	  transition: opacity .25s;
	}
	.card-img-wrap img {
	  transition: transform .25s;
	  width: 100%;
	}
	.card-img-wrap:hover img {
	  transform: scale(1.2);
	}
	.card-img-wrap:hover:after {
	  opacity: 1;
	}

	.page {
	  display: none;
	  position: relative;
	}
	.page-active {
	  display: block;
	  position: relative;
	}

	.message_box { }

	#msg_loader{
		position: absolute;
		display: none;
	}

	.loader {
	  border: 16px solid #48B1D9;
	  border-radius: 50%;
	  border-top: 16px solid #3498db;
	  border-bottom: 16px solid #3498db;
	  width: 30px;
	  height: 30px;
	  -webkit-animation: spin 2s linear infinite; /* Safari */
	  animation: spin 2s linear infinite;
	}

	/* Safari */
	@-webkit-keyframes spin {
	  0% { -webkit-transform: rotate(0deg); }
	  100% { -webkit-transform: rotate(360deg); }
	}

	@keyframes spin {
	  0% { transform: rotate(0deg); }
	  100% { transform: rotate(360deg); }
	}

	.noselect {
	  -webkit-touch-callout: none; /* iOS Safari */
		-webkit-user-select: none; /* Safari */
		 -khtml-user-select: none; /* Konqueror HTML */
		   -moz-user-select: none; /* Firefox */
			-ms-user-select: none; /* Internet Explorer/Edge */
				user-select: none; /* Non-prefixed version, currently
									  supported by Chrome and Opera */
	}

	.box {
	  overflow-x: auto;
	  overflow-y: hidden;
	  width: 100%;
	  /*margin: 0px 0px 0px 0px;*/
	  margin: 1px;
	  -webkit-touch-callout: none;
	  -webkit-user-select: none;
	  -khtml-user-select: none;
	  -moz-user-select: none;
	  -ms-user-select: none;
	  user-select: none;
	}

	.iconspin {
	  animation-name: spin;
	  animation-duration: 5000ms;
	  animation-iteration-count: infinite;
	  animation-timing-function: linear; 
	  /* transform: rotate(3deg); */
	   /* transform: rotate(0.3rad);/ */
	   /* transform: rotate(3grad); */ 
	   /* transform: rotate(.03turn);  */
	}

	@keyframes spin {
		from {
			transform:rotate(0deg);
		}
		to {
			transform:rotate(360deg);
		}
	}

	.dotloading:after {
	  content: ".";
	  overflow: hidden;
	  display: inline-block;
	  vertical-align: bottom;
	  animation: ellipsis-dot 4s infinite .3s;
	  animation-fill-mode: forwards;
	}

	@keyframes ellipsis-dot {
	  10% {
		content: ".";
	  }
	  20% {
		content: "..";
	  }
	  30% {
		content: "...";
	  }
	  40% {
		content: "....";
	  }
	  50% {
		content: ".....";
	  }
	  60% {
		content: "......";
	  }
	  70% {
		content: ".......";
	  }
	  80% {
		content: "........";
	  }
	  90% {
		content: ".........";
	  }
	  100% {
		content: "..........";
	  }
	}

			.profile-pic-wrapper {

			}
			.pic-holder {
			  text-align: center;
			  position: relative;
			  border-radius: 50%;
			  width: 80px;
			  height: 80px;
			  overflow: hidden;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  margin-bottom: 20px;
			}
			.pic-holder .pic {
			  height: 100%;
			  width: 100%;
			  -o-object-fit: cover;
			  object-fit: cover;
			  -o-object-position: center;
			  object-position: center;
			}
			.pic-holder .upload-file-block,
			.pic-holder .upload-loader {
			  position: absolute;
			  top: 0;
			  left: 0;
			  height: 100%;
			  width: 100%;
			  background-color: rgba(90, 92, 105, 0.7);
			  color: #f8f9fc;
			  font-size: 12px;
			  font-weight: 600;
			  opacity: 0;
			  display: flex;
			  align-items: center;
			  justify-content: center;
			  transition: all 0.2s;
			}
			.pic-holder .upload-file-block {
			  cursor: pointer;
			}
			.pic-holder:hover .upload-file-block,
			.uploadProfileInput:focus ~ .upload-file-block {
			  opacity: 1;
			}
			.pic-holder.uploadInProgress .upload-file-block {
			  display: none;
			}
			.pic-holder.uploadInProgress .upload-loader {
			  opacity: 1;
			}




.input-size {
  padding: 12px;         /* Enough padding for finger taps */
  font-size: 16px;       /* Good font size for readability */
  border-radius: 10px;    /* Rounded corners */
  border: 1px solid #ccc; /* Light border */
  box-sizing: border-box; /* Include padding in width */
}

.btn-rounded-2 {
  border-radius: 10px;    /* Rounded corners */
}

@media (max-width: 480px) {
  .input-size {
    padding: 14px;       /* Increase padding on smaller screens */
  }
}


/* ปรับตำแหน่งให้ Processing Box อยู่ตรงกลางหน้าจอ */
.dataTables_processing {
    position: fixed !important; /* ทำให้ Processing Box ลอยอยู่กลางหน้าจอ */
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 25px;
    border-radius: 10px;
    font-size: 18px;
    font-weight: bold;
    z-index: 10000;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    min-height: 50px;
}

/* ทำให้ Processing Box อยู่ตรงกลางของ DataTable */
.dataTables_wrapper .dataTables_processing {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10;
}

/* เพิ่ม Animation ขณะโหลด */
@keyframes loadingAnimation {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

/*
.dataTables_processing {
    animation: loadingAnimation 1s infinite;
}*/

.dataTables_processing {
    animation: fadeInOut 1.5s infinite;
}
/* ##### Custom Css ##### */