@font-face {
  font-family: ibmplex;
  src: url(../../assets/fonts/Ibmplex/IBMPlexSansThai-Regular.ttf) format('truetype');
}

@font-face {
  font-family: sukhumvit;
  src: url(../../assets/fonts/Sukhumvit/SukhumvitSet-Medium.ttf) format('truetype');
}

@font-face {
  font-family: noto;
  src: url(../../assets/fonts/Noto/NotoSansThai-Regular.ttf) format('truetype');
}

@font-face {
  font-family: sarabun;
  src: url(../../assets/fonts/Sarabun/Sarabun-Regular.ttf) format('truetype');
}

body.counting-page {
  font-family: 'ibmplex', monospace !important;
  font-size: 1.5rem;
}

body.front-end {
  font-family: 'ibmplex', monospace;
  font-size: 1.5rem;
}

body.admin-page {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	font-family: 'sukhumvit', monospace !important;
	/*font-family: 'thsarabun', monospace;*/
	/*font-family: 'mitrlight', monospace;*/
	/*font-size: 2rem;*/
}

body.patient-page {
	padding: 0 0 0 0;
	margin: 0 0 0 0;
	font-family: 'mitrlight', monospace !important;
}

body {
	font-family: 'sukhumvit', monospace !important;
}

.v-application {
  font-family: 'sukhumvit', monospace !important;
}

/* ************************************************************************** */
/* ***********************  แก้ Component ให้ไม่บังสระซ้อน  *********************** */
/* ************************************************************************** */

/* ปรับขนาดตัวอักษรและ line-height ของตัวเลือกใน Combobox */
.v-text-field input {
  line-height: 1.6 !important; /* ป้องกันสระซ้อน */
}

/* ปรับขนาดตัวอักษรใน dropdown list */
.v-list-item__title {
  line-height: 1.6 !important; /* ป้องกันสระซ้อน */
}

.v-input .v-label {
	height: 25px !important;
	line-height: 1.6 !important;
}

/* ************************************************************************** */

.full-height {
  height: 100%;
}

.full-panel {
	position: relative;
	height: 100%;
	width: 100%;
}

.stay-left-bottom {
	position: fixed;
	bottom: 15;
	left: 15;
}

.flex-box-right-bottom {
	position: fixed;
	bottom: 15;
	right: 15;
	z-index: 1;
	float: none;
	display: flex;
	flex-direction: column-reverse;
}

.non-edit {
	pointer-events: none;
}

.password-spacing {
	letter-spacing: 2px;
	font-size: 2rem;
}

.chat-msg-area {
	max-width: 80%;
	background-color: #f8f9fa !important;
	border: 1px solid #bfbfbf;
	border-radius: 10px;
	overflow-wrap: break-word;
  	word-wrap: break-word;
  	hyphens: auto;
}

.chat-msg-confirm {
	max-width: 80%;
	background-color: #ccff99 !important;
	border: 1px solid #66ff33;
	border-radius: 10px;
	overflow-wrap: break-word;
  	word-wrap: break-word;
  	hyphens: auto;
}

.sticky-top {
	position: absolute;
	top: 0px;
}

.sticky-bottom {
	position: absolute;
	bottom: 0px;
}

div.v-line-divider {
  width: 0;
  border-right: 1px solid #e3e6f0;
  height: calc(4.375rem - 2rem);
  margin: auto 1rem;
}

.x-btn-purple {
	background-color: #BA55D3;
	color: white;
	border: 3px solid #EE82EE;
	font-size: 1.5rem;
}

.x-btn-purple:hover {
	background-color: #EE82EE;
	color: black;
	border: 3px solid #BA55D3;
  	box-shadow: 0 0 15px #EE82EE;
}

.x-btn-blue {
	background-color: #0668E6;
	color: white;
	border: 3px solid #4BF1FF;
	font-size: 1.5rem;
}

.x-btn-blue:hover {
	background-color: #4BF1FF;
	color: black;
	border: 3px solid #0668E6;
  	box-shadow: 0 0 15px #4BF1FF;
}

.x-btn-red {
	background-color: #b30000;
	color: white;
	border: 3px solid #ff471a;
	font-size: 1.5rem;
}

.x-btn-red:hover {
	background-color: #ff471a;
	color: black;
	border: 3px solid #b30000;
  	box-shadow: 0 0 15px #ff471a;
}

.x-btn-white {
	background-color: #ffffff;
	color: black;
	border: 3px solid #b3b3b3;
	font-size: 1.5rem;
}

.x-btn-white:hover {
	background-color: #b3b3b3;
	color: black;
	border: 3px solid #ffffff;
  	box-shadow: 0 0 15px #ffffff;
}

.x-btn-green {
	background-color: #239023;
	color: white;
	border: 3px solid #79ff4d;
	font-size: 1.5rem;
}

.x-btn-green:hover {
	background-color: #79ff4d;
	color: black;
	border: 3px solid #239023;
  	box-shadow: 0 0 15px #79ff4d;
}

.x-btn-yellow {
	background-color: #ffff4d;
	color: black;
	border: 3px solid #e6e600;
	font-size: 1.5rem;
}

.x-btn-yellow:hover {
	background-color: #e6e600;
	color: black;
	border: 3px solid #ffff4d;
  	box-shadow: 0 0 15px #e6e600;
}

.x-btn-orenge {
	background-color: #e68a00;
	color: white;
	border: 3px solid #ffad33;
	font-size: 1.5rem;
}

.x-btn-orenge:hover {
	background-color: #ffad33;
	color: black;
	border: 3px solid #e68a00;
  	box-shadow: 0 0 15px #ffad33;
}

.x-btn-white-grayshadow {
	background-color: #ffffff;
	color: #737373;
	border: 3px solid #b3b3b3;
	font-size: 1.5rem;
}

.x-btn-white-grayshadow:hover {
	background-color: #b3b3b3;
	color: white;
	border: 3px solid #ffffff;
  	box-shadow: 0 0 15px #b3b3b3;
}

.x-card-light {
	background-color: white;
	color: black;
	border: 0px;
	/*border-top: 3px solid #e6e6e6;*/
}

.x-card-light:hover {
	background-color: #f2f2f2;
	color: black;
	/*border: 5px solid white;*/
	/*box-shadow: 0 0 10px #d9d9d9;*/
	border-radius: 10px;
}

.x-btn-pink {
	background-color: #ff6699;
	color: white;
	border: 3px solid #ff99cc;
	font-size: 1.5rem;
}

.x-btn-pink:hover {
	background-color: #ff99cc;
	color: black;
	border: 3px solid #ff6699;
  box-shadow: 0 0 15px #ff99cc;
}

.x-btn-lightgreen {
	background-color: #74b49b;
	color: white;
	border: 3px solid #acdeaa;
	font-size: 1.5rem;
}

.x-btn-lightgreen:hover {
	background-color: #acdeaa;
	color: black;
	border: 3px solid #74b49b;
  	box-shadow: 0 0 15px #acdeaa;
}

.x-btn-green-pastel {
	background-color: #39777b;
	color: white;
	border: 3px solid #8fc3af;
	font-size: 1.5rem;
	/*box-shadow: 0 0 7px #b7d3e9;*/
	border-radius: 10px;
}

.x-btn-green-pastel:hover {
	background-color: #8fc3af;
	color: #39777b;
	border: 3px solid #39777b;
  box-shadow: 0 0 20px #ccedf6;
  border-radius: 10px;
}

.x-bg-yellow {
	background-color: #ffff66 !important;
	box-shadow: 0 0 15px #ffcc00 !important;
}

.vl-purple {
	height: 95%;
	border-left: 4px solid #BA55D3;
	border-radius: 5px;
	box-shadow: 2px 2px 3px #EE82EE;
}


.vl-yellow {
	height: 95%;
	border-left: 4px solid #ffff4d;
	border-radius: 5px;
	box-shadow: 2px 2px 3px #e6e600;
}

.true-center-page {
	margin: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}

.modal-xl {
	max-width: 1100px !important;
}

p.rsp-text {
	font-size: 2vw;
}

.badge-login {
	width: 40%;
	border-radius: 10px;
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.authen-responsive-dialog {
	width: 45%;
	max-width: 45%;
}

@media screen and (max-width: 1140px) {
  .badge-login {
  	width: 40%;
  }

  .width-responsive {
  	width: 80%;
  }

  .modal-xl {
		max-width: 1100px !important;
  }

  p.rsp-text {
  	font-size: 3vw;
  }

	.authen-responsive-dialog {
		width: 45%;
		max-width: 45%;
	}
}

@media screen and (max-width: 960px) {
  .badge-login {
  	width: 60%;
  }

  .width-responsive {
  	width: 80%;
  }

  .modal-xl {
	max-width: 920px !important;
  }

   p.rsp-text {
  	font-size: 3vw;
  }

	.authen-responsive-dialog {
		width: 65%;
		max-width: 65%;
	}
}

@media screen and (max-width: 720px) {
  .badge-login {
  	width: 70%;
  }

  .width-responsive {
  	width: 90%;
  }

  .modal-xl {
	max-width: 680px !important;
  }

   p.rsp-text {
  	font-size: 4vw;
  }

	.authen-responsive-dialog {
		width: 85%;
		max-width: 85%;
	}
}

@media screen and (max-width: 540px) {
  .badge-login {
  	width: 100%;
  }

  .width-responsive {
  	width: 100%;
  }

  .modal-xl {
	max-width: 500px !important;
  }

  p.rsp-text {
  	font-size: 4vw;
  }

	.authen-responsive-dialog {
		width: 95%;
		max-width: 95%;
	}
}

.table-hover-primary > tbody > tr.selrow {
  background: #4e73df !important;/*#4e73df*/
  color: white !important;
  cursor: pointer;
}

.table-hover-primary > tbody > tr:hover {
  background: #93a9eb !important;
  color: white !important;
  cursor: pointer;
}


.table-hover-info > tbody > tr.selrow {
  background: #288b9a !important;
  color: white !important;
}

.table-hover-info > tbody > tr:hover {
  background: #36b8cb !important;
  color: white !important;
}

.table-hover-success > tbody > tr.selrow {
  background: #159165 !important;
  color: white !important;
}

.table-hover-success > tbody > tr:hover {
  background: #1cc588 !important;
  color: white !important;
}

.icon-hover-trans-gray:hover {
	color: #ffffff;
	text-shadow: 0 0 15px #262626;/*#808080*/
}

/* color of sunday*/

.card-weekday-color-sunday {
	border: 1px solid #ff0000;
	cursor: pointer;
}

.card-weekday-color-sunday:hover {
	background-color: #ffcccc;
}

.card-weekday-color-sunday > div.sdisel {
	background-color: #ffcccc !important;
}

.card-weekday-color-sunday > div.card-body > i {
	color: #ff0000;
}

.card-weekday-color-sunday > div.card-footer {
	background-color: #ff6666 !important;
	border-top: 1px solid #ff0000;
}

/* color of monday*/

.card-weekday-color-monday {
	border: 1px solid #e6e600;
	cursor: pointer;
}

.card-weekday-color-monday:hover {
	background-color: #ffffcc;
}

.card-weekday-color-monday > div.sdisel {
	background-color: #ffffcc !important;
}

.card-weekday-color-monday > div.card-body > i {
	color: #e6e600;
}

.card-weekday-color-monday > div.card-footer {
	background-color: #ffff66 !important;
	border-top: 1px solid #e6e600;
}



/* color of tuesday*/

.card-weekday-color-tuesday {
	border: 1px solid #ff1a90;
	cursor: pointer;
}

.card-weekday-color-tuesday:hover {
	background-color: #ffe6f3;
}

.card-weekday-color-tuesday > div.sdisel {
	background-color: #ffe6f3 !important;
}

.card-weekday-color-tuesday > div.card-body > i {
	color: #ff1a90;
}

.card-weekday-color-tuesday > div.card-footer {
	background-color: #ffb3d9 !important;
	border-top: 1px solid #ff1a90;
}

/* color of wednesday*/

.card-weekday-color-wednesday {
	border: 1px solid #00b300;
	cursor: pointer;
}

.card-weekday-color-wednesday:hover {
	background-color: #ccffcc;
}

.card-weekday-color-wednesday > div.sdisel {
	background-color: #ccffcc !important;
}

.card-weekday-color-wednesday > div.card-body > i {
	color: #00b300;
}

.card-weekday-color-wednesday > div.card-footer {
	background-color: #66ff66 !important;
	border-top: 1px solid #00b300;
}


/* color of thursday*/

.card-weekday-color-thursday {
	border: 1px solid #e65c00;
	cursor: pointer;
}

.card-weekday-color-thursday:hover {
	background-color: #ffe0cc;
}

.card-weekday-color-thursday > div.sdisel {
	background-color: #ffe0cc !important;
}

.card-weekday-color-thursday > div.card-body > i {
	color: #e65c00;
}

.card-weekday-color-thursday > div.card-footer {
	background-color: #ffb366 !important;
	border-top: 1px solid #e65c00;
}

/* color of friday*/

.card-weekday-color-friday {
	border: 1px solid #00cccc;
	cursor: pointer;
}

.card-weekday-color-friday:hover {
	background-color: #e6ffff;
}

.card-weekday-color-friday > div.sdisel {
	background-color: #e6ffff !important;
}

.card-weekday-color-friday > div.card-body > i {
	color: #00cccc;
}

.card-weekday-color-friday > div.card-footer {
	background-color: #99ffff !important;
	border-top: 1px solid #00cccc;
}

/* color of saturday*/

.card-weekday-color-saturday {
	border: 1px solid #990099;
	cursor: pointer;
}

.card-weekday-color-saturday:hover {
	background-color: #ffccff;
}

.card-weekday-color-saturday > div.itemsel {
	background-color: #ffccff !important;
}

.card-weekday-color-saturday > div.card-body > i {
	color: #990099;
}

.card-weekday-color-saturday > div.card-footer {
	background-color: #ff80ff !important;
	border-top: 1px solid #990099;
}

.gender-btn {
	border-radius: 10px;
	color: black;
}

.gender-btn.male {
	border: 2px solid #0668E6;
}

.gender-btn.male:hover {
	background-color: #0668E6;
	color: white;
	border: 2px solid #4BF1FF;
}

.gender-btn.male.selgender {
	background-color: #4BF1FF;
	color: black;
	border: 2px solid #0668E6;
	box-shadow: 0 0 15px #4BF1FF;
}

.gender-btn.female {
	border: 2px solid #ff1aff;
}

.gender-btn.female:hover {
	background-color: #ff1aff;
	color: white;
	border: 2px solid #ff99ff;
}

.gender-btn.female.selgender {
	background-color: #ff99ff;
	color: black;
	border: 2px solid #ff1aff;
	box-shadow: 0 0 15px #ff99ff;
}

.x-btn-ocean {
	background-color: #7a9ac6;
	color: white;
	border: 3px solid #b7d3e9;
	font-size: 1.5rem;
	/*box-shadow: 0 0 7px #b7d3e9;*/
}

.x-btn-ocean:hover {
	background-color: #ccedf6;
	color: black;
	border: 3px solid #7a9ac6;
  	box-shadow: 0 0 20px #ccedf6;
}

.btn-green-pastel {
	background-color: #77dd77;
	color: #f8f9fc; /* สีเทาสว่าง สำหรับการแสดงผล กับ สี pastel โทนเข้ม*/
	border: 1px solid #77dd77;
	border-radius: 10px;
	box-shadow: 0 0 10px #c4c4b6;
}

.btn-green-pastel:hover {
	background-color: #8be28b;
	color: #5a5c69; /* สีเทาเข้ม สำหรับการแสดงผล กับ สี pastel โทนอ่อน*/
	border: 1px solid #8be28b;
  	box-shadow: 0 0 15px #77dd77;
}

.btn-orange-pastel {
	background-color: #ffa500;
	color: #f8f9fc; /* สีเทาสว่าง สำหรับการแสดงผล กับ สี pastel โทนเข้ม*/
	border: 1px solid #ffa500;
	border-radius: 10px;
	box-shadow: 0 0 10px #c4c4b6; /* สีเทา สำหรับ shadow */
}

.btn-orange-pastel:hover {
	background-color: #ffc04d;
	color: #5a5c69; /* สีเทาเข้ม สำหรับการแสดงผล กับ สี pastel โทนอ่อน*/
	border: 1px solid #ffc04d;
  	box-shadow: 0 0 15px #ffa500;
}

.btn-ocean-pastel {
	background-color: #0077a7;
	color: #f8f9fc; /* สีเทาสว่าง สำหรับการแสดงผล กับ สี pastel โทนเข้ม*/
	border: 1px solid #0077a7;
	border-radius: 10px;
	box-shadow: 0 0 10px #c4c4b6; /* สีเทา สำหรับ shadow */
}

.btn-ocean-pastel:hover {
	background-color: #0bb8ff;
	color: #5a5c69; /* สีเทาเข้ม สำหรับการแสดงผล กับ สี pastel โทนอ่อน*/
	border: 1px solid #0bb8ff;
  	box-shadow: 0 0 15px #0077a7;
}

.btn-darkgreen-pastel {
	background-color: #02862a;
	color: #f8f9fc; /* สีเทาสว่าง สำหรับการแสดงผล กับ สี pastel โทนเข้ม*/
	border: 1px solid #02862a;
	border-radius: 10px;
	box-shadow: 0 0 10px #c4c4b6; /* สีเทา สำหรับ shadow */
}

.btn-darkgreen-pastel:hover {
	background-color: #04e748;
	color: #5a5c69; /* สีเทาเข้ม สำหรับการแสดงผล กับ สี pastel โทนอ่อน*/
	border: 1px solid #04e748;
  	box-shadow: 0 0 15px #02862a;
}

.btn-darkred-pastel {
	background-color: #8b0023;
	color: #f8f9fc; /* สีเทาสว่าง สำหรับการแสดงผล กับ สี pastel โทนเข้ม*/
	border: 1px solid #8b0023;
	border-radius: 10px;
	box-shadow: 0 0 10px #c4c4b6; /* สีเทา สำหรับ shadow */
}

.btn-darkred-pastel:hover {
	background-color: #ff0241;
	color: #5a5c69; /* สีเทาเข้ม สำหรับการแสดงผล กับ สี pastel โทนอ่อน*/
	border: 1px solid #ff0241;
  box-shadow: 0 0 15px #8b0023;
}

div.item-selector-blue:hover {
	background-color: #0085bb;
	border: 1px solid #0085bb !important;
  	box-shadow: 0 0 15px #00a1e2;
}

div.item-selector-blue:hover > h3 {
	color: #f8f9fc !important; /* สีเทาสว่าง สำหรับการแสดงผล กับ สี pastel โทนเข้ม*/
}

div.item-selector-blue.selitem {
	background-color: #005b80;
	border: 1px solid #005b80 !important;
	border-radius: 10px;
	box-shadow: 0 0 10px #00a1e2;
}

div.item-selector-blue.selitem > h3 {
	color: #f8f9fc !important; /* สีเทาสว่าง สำหรับการแสดงผล กับ สี pastel โทนเข้ม*/
}

.cursor-pointer {
	cursor: pointer;
}

.text-purple {
	color: #845ef7;
}

.text-lightgreen {
	color: #74b49b;
}

.text-white-shadow {
	color: #fff;
	text-shadow: 3px 2px 4px #000;
}

.fa-color-red {
	color: #ff6b6b;
}

.fa-color-pink {
	color: #f06595;
}

.fa-color-orange {
	color: #ff922b;
}

.fa-color-lightgreen {
	color: #51cf66;
}

.fa-color-green {
	color: #20c997;
}

.fa-color-blue {
	color: #339af0;
}

.fa-color-purple {
	color: #845ef7;
}

.fa-color-yellow {
	color: #fab005;
}

.hover-gray-on-div:hover {
	background-color: #e2e3e5;
  border-color: #d6d8db;
}

.markerpoints {
	border: 2px solid #006994;
	opacity: 0.6;
}


/* /////////////////////////// animation load /////////////////////////// */
.loading-container {
	height: 100vh;
	width: 100wh;
	overflow: hidden;
	align-items: center;
	justify-content: center;
  display: flex;
  flex-direction: column;
}

.loading-container-item {
	display: flex;
	flex-direction: row;
}

.dash {
  margin: 0 15px;
  width: 35px;
  height: 15px;
  border-radius: 8px;
  background: white !important;
  box-shadow: 0 0 10px 0 #c08fe3 !important;
}

.uno {
  margin-right: -18px;
  transform-origin: center left;
  animation: spin 3s linear infinite;  
}

.dos {
  transform-origin: center right;
  animation: spin2 3s linear infinite;
  animation-delay: .2s;
}

.tres {
  transform-origin: center right;
  animation: spin3 3s linear infinite;
  animation-delay: .3s;
}

.cuatro {
  transform-origin: center right;
  animation: spin4 3s linear infinite;
  animation-delay: .4s;
}

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

@keyframes spin2 {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-180deg);
  }
  35% {
    transform: rotate(-190deg);
  }
  40% {
    transform: rotate(-180deg);
  }
  78% {
    transform: rotate(-180deg);
  }
  95% {
    transform: rotate(-360deg);
  }
  98% {
    transform: rotate(-370deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

@keyframes spin3 {
  0% {
    transform: rotate(0deg);
  }
  27% {
    transform: rotate(0deg);  
  }
  40% {
    transform: rotate(180deg);
  }
  45% {
    transform: rotate(190deg);
  }
  50% {
    transform: rotate(180deg);
  }
  62% {
    transform: rotate(180deg);
  }
  75% {
    transform: rotate(360deg);
  }
  80% {
    transform: rotate(370deg);
  }
  85% {
    transform: rotate(360deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spin4 {
  0% {
    transform: rotate(0deg);
  }
  38% {
    transform: rotate(0deg);
  }
  60% {
    transform: rotate(-360deg);
  }
  65% {
    transform: rotate(-370deg);
  }
  75% {
    transform: rotate(-360deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

.shadow-light-blue {
	box-shadow: 0 0 10px 0 #0093cf !important;
}

.shadow-white {
	/*border: 2px solid gray !important;*/
	box-shadow: 0 0 10px 0 white !important;
}

.ocean-color {
	color : #004d6d;
}

.custom-loader {
    animation: loader 1s infinite;
  }

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

.v-label {
	margin-bottom: 0px !important;
}

.sunday-color {
	color: #ff275d;
	text-shadow: 0px 0px 6px #b7b9cc;
}

.monday-color {
	color: #ffff00;
	text-shadow: 0px 0px 6px #b7b9cc;
}

.tuesday-color {
	color: #ffacbb;
	text-shadow: 0px 0px 6px #b7b9cc;
}

.wednesday-color {
	color: #00cd00;
	text-shadow: 0px 0px 6px #b7b9cc;
}

.thursday-color {
	color: #ffa500;
	text-shadow: 0px 0px 6px #b7b9cc;
}

.friday-color {
	color: #00bfff;
	text-shadow: 0px 0px 6px #b7b9cc;
}

.saturday-color {
	color: #cd00cd;
	text-shadow: 0px 0px 6px #b7b9cc;
}

.text-shadow-white {
	text-shadow: 0px 0px 5px white;
}

.bg-light-green {
	background-color: #a0ee90;
	text-shadow: 0px 0px 5px white;
}

.bg-light-red {
	background-color: #ff6296;
	text-shadow: 0px 0px 5px white;
}

/* ********** card ocean theme ********** */
.card-ocean-theme {
	border: 1px solid #0000d8;
	cursor: pointer;
}

.card-ocean-theme:hover {
	background-color: #ebebff;
}

.card-ocean-theme > div.itemsel {
	background-color: #d8d8ff !important;
}

.card-ocean-theme > div.card-body > i {
	color: #0000d8;
}

.card-ocean-theme > div.card-footer {
	background-color: #9d9dff !important;
	border-top: 1px solid #0000d8;
}

.background-light-red {
	background-color: #f5cec6; /* #db4b30 */
	text-shadow: 3px 5px 5px white;
}

.background-light-yellow {
	background-color: #fdfdaa; /* #fcfc70 */
	text-shadow: 3px 5px 4px white;
}

.background-light-green {
	background-color: #b6edb6; /* #58d558 */
	text-shadow: 3px 5px 4px white;
}

.background-light-blue {
	background-color: #ccdbec; /* #4c80bb */
	text-shadow: 3px 5px 4px white;
}

.background-light-orange {
	background-color: #ffdca9; /* #ffb347 */
	text-shadow: 3px 5px 4px white;
}

.background-light-purple {
	background-color: #d2c6e9; /* #8463c3 */
	text-shadow: 3px 5px 4px white;
}

/* ********** card ocean theme ********** */


.bg-ocean-pastel {
	background-color: #0077a7;
	color: #f8f9fc; /* สีเทาสว่าง สำหรับการแสดงผล กับ สี pastel โทนเข้ม*/
	box-shadow: 0 0 10px #c4c4b6; /* สีเทา สำหรับ shadow */
}

.hover-ocean-pastel:hover {
	background-color: #0bb8ff;
	color: #5a5c69; /* สีเทาเข้ม สำหรับการแสดงผล กับ สี pastel โทนอ่อน*/
  box-shadow: 0 0 15px #0077a7;
}

.text-purple {
  color: #80006b !important;
}

.btn-purple-pastel {
	background-color: #790be7;
	color: #f8f9fc; /* สีเทาสว่าง สำหรับการแสดงผล กับ สี pastel โทนเข้ม*/
	border: 1px solid #790be7;
	border-radius: 10px;
	box-shadow: 0 0 10px #c4c4b6; /* สีเทา สำหรับ shadow */
}

.btn-purple-pastel:hover {
	background-color: #be83f9;
	color: #5a5c69; /* สีเทาเข้ม สำหรับการแสดงผล กับ สี pastel โทนอ่อน*/
	border: 1px solid #be83f9;
  box-shadow: 0 0 15px #790be7;
}

.x-btn-purple-pastel {
	background-color: #9b7cb0;
	color: white;
	border: 3px solid #C3ACD0;
	font-size: 1.5rem;
}

.x-btn-purple-pastel:hover {
	background-color: #C3ACD0;
	color: black;
	border: 3px solid #9b7cb0;
	box-shadow: 0 0 15px #C3ACD0;
}

.bg-ocean-pastel {
	background-color: #0077a7;
	color: #f8f9fc; /* สีเทาสว่าง สำหรับการแสดงผล กับ สี pastel โทนเข้ม*/
	box-shadow: 0 0 10px #c4c4b6; /* สีเทา สำหรับ shadow */
}

.hover-ocean-pastel:hover {
	background-color: #0bb8ff;
	color: #5a5c69; /* สีเทาเข้ม สำหรับการแสดงผล กับ สี pastel โทนอ่อน*/
  box-shadow: 0 0 15px #0077a7;
}

.text-purple {
  color: #80006b !important;
}

.text-orange {
  color: #c46c00 !important;
}

.alert-purple {
  color: #6f0ad4; 
  background-color: #efe0fe;
  border-color: #dbbafc;
}

.alert-purple hr {
  border-top-color: #b470f8;
}

.alert-orange {
  color: #ff7a00;
  background-color: #ffeac4;
  border-color: #ffc04d;
}

.alert-orange hr {
  border-top-color: #ffba3b;
}

.x-card-blue > i {
	color: #7ea6bf;
}

.x-card-blue.selitem {
	background-color: #ccedf6;
}

.badge-fa-color-red {
  color: white;
  background-color: #ff6b6b;
}

.badge-fa-color-pink {
	color: white;
	background-color: #f06595;
}

.badge-fa-color-orange {
	color: white;
	background-color: #ff922b;
}

.badge-fa-color-lightgreen {
	color: white;
	background-color: #51cf66;
}

.badge-fa-color-green {
	color: white;
	background-color: #20c997;
}

.badge-fa-color-blue {
	color: white;
	background-color: #339af0;
}

.badge-fa-color-purple {
	color: white;
	background-color: #845ef7;
}

.badge-fa-color-yellow {
	color: white;
	background-color: #fab005;
}

/* เหลืองเข้ม Code สีนี้  #fab005 */
/* เหลืองกลาง Code สีนี้  #ffd43b */

.shadow-fa-color-red {
	box-shadow: 0 0 10px 0 #ff6b6b !important;
	border: 3px solid #ff6b6b !important;
}

.shadow-fa-color-pink {
	box-shadow: 0 0 10px 0 #f06595 !important;
	border: 3px solid #f06595 !important;
}

.shadow-fa-color-orange {
	box-shadow: 0 0 10px 0 #ff922b !important;
	border: 3px solid #ff922b !important;
}

.shadow-fa-color-lightgreen {
	box-shadow: 0 0 10px 0 #51cf66 !important;
	border: 3px solid #51cf66 !important;
}

.shadow-fa-color-green {
	box-shadow: 0 0 10px 0 #20c997 !important;
	border: 3px solid #20c997 !important;
}

.shadow-fa-color-blue {
	box-shadow: 0 0 10px 0 #339af0 !important;
	border: 3px solid #339af0 !important;
}

.shadow-fa-color-purple {
	box-shadow: 0 0 10px 0 #845ef7 !important;
	border: 3px solid #845ef7 !important;
}

.shadow-fa-color-yellow {
	box-shadow: 0 0 10px 0 #fab005 !important;
	border: 3px solid #fab005 !important;
}

.shadow-fa-color-primary {
  box-shadow: 0 0 10px 0 #4e73df !important;
  border: 3px solid #4e73df !important;
}

.shadow-fa-color-success {
  box-shadow: 0 0 10px 0 #1cc88a !important;
  border: 3px solid #1cc88a !important;
}

.shadow-fa-color-info {
  box-shadow: 0 0 10px 0 #36b9cc !important;
  border: 3px solid #36b9cc !important;
}

.shadow-fa-color-warning {
  box-shadow: 0 0 10px 0 #f6c23e !important;
  border: 3px solid #f6c23e !important;
}

.shadow-fa-color-danger {
  box-shadow: 0 0 10px 0 #e74a3b !important;
  border: 3px solid #e74a3b !important;
}

.shadow-fa-color-secondary {
  box-shadow: 0 0 10px 0 #858796 !important;
  border: 3px solid #858796 !important;
}

.shadow-fa-color-dark {
  box-shadow: 0 0 10px 0 #5a5c69 !important;
  border: 3px solid #5a5c69 !important;
}

.shadow-fa-color-white {
  box-shadow: 0 0 10px 0 #ffffff !important;
  border: 3px solid #ffffff !important;
}


/* ******************************************************************** */
/* สีชุดเดียวกัน กับตระกูล fa-color แต่อ่อนกว่า เอามาทำเป็น background-lighten */
/* ******************************************************************** */

.bg-lighten-fa-color-red {
	background-color: #ffe1e1 !important;
}

.bg-lighten-fa-color-pink {
	background-color: #fce2eb !important;
}

.bg-lighten-fa-color-orange {
	background-color: #ffeddc !important;
}

.bg-lighten-fa-color-lightgreen {
	background-color: #ebf9ed !important;
}

.bg-lighten-fa-color-green {
	background-color: #ecfcf7 !important;
}

.bg-lighten-fa-color-blue {
	background-color: #eaf4fd !important;
}

.bg-lighten-fa-color-purple {
	background-color: #e8e1fd !important;
}

.bg-lighten-fa-color-yellow {
	background-color: #fef3d9 !important;
}

.bg-lighten-fa-color-primary {
  background-color: #d3dcf7 !important;
}

.bg-lighten-fa-color-success {
  background-color: #d6f9ed !important;
}

.bg-lighten-fa-color-info {
  background-color: #d2eff4 !important;
}

.bg-lighten-fa-color-warning {
  background-color: #fdf1d4 !important;
}

.bg-lighten-fa-color-danger {
  background-color: #fadbd8 !important;
}

.bg-lighten-fa-color-secondary {
  background-color: #e4e4e8 !important;
}

.bg-lighten-fa-color-dark {
  background-color: #dfdfe3 !important;
}

.accent-color-red {
	accent-color: #ff6b6b;
}

.accent-color-pink {
	accent-color: #f06595;
}

.accent-color-orange {
	accent-color: #EF6C00;
}

.accent-color-lightgreen {
	accent-color: #51cf66;
}

.accent-color-green {
	accent-color: #20c997;
}

.accent-color-blue {
	accent-color: #339af0;
}

.accent-color-purple {
	accent-color: #845ef7;
}

.accent-color-yellow {
	accent-color: #fab005;
}

.save-right-postion {
	bottom: 0;
	position: absolute;
	margin: 0 16px 16px 0;
}

.shadow-icon {
  filter: drop-shadow(5px 5px 5px white);
}

.input-fa-color-red input {
	color: #ff6b6b !important;
}

.input-fa-color-pink input {
	color: #f06595 !important;
}

.input-fa-color-orange input {
	color: #ff922b !important;
}

.input-fa-color-lightgreen input {
	color: #51cf66 !important;
}

.input-fa-color-green input {
	color: #20c997 !important;
}

.input-fa-color-blue input {
	color: #339af0 !important;
}

.input-fa-color-purple input {
	color: #845ef7 !important;
}

.input-fa-color-yellow input {
	color: #fab005 !important;
}

/* ****************************************************************************************** */
/* ****************************************************************************************** */
/* ****************************************************************************************** */

.bounce-enter-active {
  animation: bounce-in 0.5s;
}
.bounce-leave-active {
  animation: bounce-in 0.5s reverse;
}

@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(1);
  }
}

.bg-gradient-purple-lefttop {
	background-image: linear-gradient(to left bottom, #c792d8, #cea0dd, #d5ade2, #dcbae7, #e3c8ec, #e7d0ef, #ecd9f1, #f0e1f4, #f3e6f6, #f6ecf8, #f8f1fa, #fbf7fc);
}

.overflow-x-auto-2 {
	overflow-x: auto;
	white-space: nowrap;
}

.blink-gray {
  animation: blinker-gray 1s step-end 6; /* 1 วินาทีต่อรอบ, สลับทันที, ทำ 6 ครั้ง (กระพริบ 3 ครั้ง) */
}

@keyframes blinker-gray {
  50% {
    background-color: #F44336 !important; 
  }
}

.blinking-yellow-background {
  animation: blinkYellowBackgroundSmooth 4s infinite alternate;
}

@keyframes blinkYellowBackgroundSmooth {
  from {
    background-color: transparent !important; /* เพิ่ม !important */
    color: inherit !important;
  }
  to {
    background-color: #FDD835 !important; /* เพิ่ม !important */
    color: #212121 !important;
  }
}

/*  #858796  */

.text-orange-2 {
  color: #FB8C00 !important;
}