html,
body {
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  padding-top: 40px;
  padding-bottom: 40px;
  background-color: #f5f5f5;
}

.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}

.form-signin .checkbox {
  font-weight: 400;
}

.form-signin .form-floating:focus-within {
  z-index: 2;
}

.form-signin input[type="username"] {
  margin-bottom: -1px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.form-signin input[type="password"] {
  margin-bottom: 10px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.avatar {
	position: relative;
	width: 2.375rem;
	height: 2.375rem;
	cursor: pointer;
}
.avatar.avatar-online:after {
	background-color: #71dd37;
}

.avatar.avatar-online:after, .avatar.avatar-offline:after, .avatar.avatar-away:after, .avatar.avatar-busy:after {
	content: "";
	position: absolute;
	bottom: 0;
	right: 3px;
	width: 8px;
	height: 8px;
	border-radius: 100%;
	box-shadow: 0 0 0 2px #fff;
	cursor: pointer;
	
}
.iconSize{
	font-size:1.0rem;
	margin-right: 0.3rem;
	color:#333;
	
}

.iconSize.disabled{
	color:#AAA;
}
input::placeholder {
  font-weight: 300;
  font-size: 0.85rem;
  opacity: 0.4!important;
}

.w-px-20 {
    width:20px !important
}
.w-px-30 {
    width:30px !important
}
.w-px-40 {
    width:40px !important
}
.w-px-50 {
    width:50px !important
}
.w-px-75 {
    width:75px !important
}
.w-px-100 {
    width:100px !important
}
.w-px-150 {
    width:150px !important
}
.w-px-200 {
    width:200px !important
}
.w-px-250 {
    width:250px !important
}
.w-px-300 {
    width:300px !important
}
.w-px-350 {
    width:350px !important
}
.w-px-400 {
    width:400px !important
}
.w-px-500 {
    width:500px !important
}
.w-px-600 {
    width:600px !important
}
.w-px-700 {
    width:700px !important
}
.w-px-800 {
    width:800px !important
}
.badge-dot{
	display: :inline-block;
	margin: 0;
	padding: 0;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	vertical-align: middle;
	
}

/*@media (max-width: 767px) {
  .dropdown-menu {
	margin-top:0.3rem !important;
    left:0.9rem !important;
    position:absolute !important;
	width:92%;
    transform:none !important;
  } 
  .dropdown{
    position: static;
  }
}
*/
/* FRONT DESK START*/
/* Color Theme Swatches in Hex */
.btn-fd{
	background-color:rgba(205,87,61,1.00);
	font-weight: 200;
	color: white;
}
.btn-fd:hover{
	background-color:rgba(183,89,64,1.00);
	font-weight: 200;
	color:white;
}
.btn-fd:active{
	background-color:rgba(205,87,61,1.00) !important;
	font-weight: 200;
	color:white!important;
}

@media screen and (max-width: 574px) {
  .btnAddReservation{
	  width:305px;
  }
}
@media screen and (min-width: 574px) {
  .btnAddReservation{
	  width:100%;
  }
}
.VenueSathorn-hex { color: #FF4C46; }
.VenueSukhumvit23-hex { color: #6671FF; }
.VenueSukhumvit53-hex { color: #F4D550; }
.VenueHeritage-hex{ color: #8FFA5C; }
.VenueCruise-hex { color: #FF9E5B; }
.2hex { color: #42F5F3; }
.6hex { color: #C466FF; }
.Professional-chef-cooking-in-the-kitchen-restaurant-at-the-hotel,-preparing-dinner.-A-cook-in-an-apron-makes-a-salad-of-vegetables-and-pizza.-8-hex { color: #E0DE48; }
.Professional-chef-cooking-in-the-kitchen-restaurant-at-the-hotel,-preparing-dinner.-A-cook-in-an-apron-makes-a-salad-of-vegetables-and-pizza.-9-hex { color: #5BB8FF; }
.Professional-chef-cooking-in-the-kitchen-restaurant-at-the-hotel,-preparing-dinner.-A-cook-in-an-apron-makes-a-salad-of-vegetables-and-pizza.-10-hex { color: #DB51AF; }

/* Color Theme Swatches in RGBA */
.VenueSathorn{ 
	color: rgba(255, 76, 70, 1); 
	background-color: rgba(255, 76, 70, 1); 
	border-color: rgba(255, 76, 70, 0.8); 
}
.VenueSukhumvit23{ 
	color: rgba(102, 113, 255, 1); 
	background-color: rgba(102, 113, 255, 0.9);
	border-color: rgba(102, 113, 255, 1);
}
.VenueSukhumvit53{ 
	color: rgba(244, 213, 80, 1); 
	background-color: rgba(244, 213, 80, 0.9); 
	border-color: rgba(244, 213, 80, 1); 
}
.VenueHeritage{ 
	color: rgba(143, 250, 92, 1);
	background-color: rgba(143, 250, 92, 0.9);
	border-color: rgba(143, 250, 92, 1);
}
.VenueCruise{ 
	color: rgba(255, 158, 91, 1); 
	background-color: rgba(255, 158, 91, 0.9); 
	border-color: rgba(255, 158, 91, 1); 
}
.2rgba { color: rgba(66, 245, 243, 1); }

.6rgba { color: rgba(196, 102, 255, 1); }

.Professional-chef-cooking-in-the-kitchen-restaurant-at-the-hotel,-preparing-dinner.-A-cook-in-an-apron-makes-a-salad-of-vegetables-and-pizza.-8-rgba { color: rgba(224, 222, 72, 1); }
.Professional-chef-cooking-in-the-kitchen-restaurant-at-the-hotel,-preparing-dinner.-A-cook-in-an-apron-makes-a-salad-of-vegetables-and-pizza.-9-rgba { color: rgba(91, 184, 255, 1); }
.Professional-chef-cooking-in-the-kitchen-restaurant-at-the-hotel,-preparing-dinner.-A-cook-in-an-apron-makes-a-salad-of-vegetables-and-pizza.-10-rgba { color: rgba(219, 81, 175, 1); }


.form-check-input-Sathorn:checked{
  	background-color: rgba(255, 76, 70, 1); 
	border-color: rgba(255, 76, 70, 0.8); 
	border-width:2px;
}

.form-check-input-Sukhumvit23:checked{
  	background-color: rgba(102, 113, 255, 1);
	border-color: rgba(102, 113, 255, 0.8);
	border-width:2px;
}

.form-check-input-Sukhumvit53:checked{
  	background-color: rgba(244, 213, 80, 1); 
	border-color: rgba(244, 213, 80, 0.8); 
	border-width:2px;
}

.form-check-input-Heritage:checked{
	background-color: rgba(143, 250, 92, 1);
	border-color: rgba(143, 250, 92, 0.8);
	border-width:2px;
}

.form-check-input-Cruise:checked{
  	background-color: rgba(255, 158, 91, 1); 
	border-color: rgba(255, 158, 91, 0.8); 
	border-width:2px;
}

.form-check-input-Trash:checked{
  	background-color: rgba(0, 0, 0, 0.3); 
	border-color: rgba(0, 0, 0, 0.1); 
	border-width:2px;
}

.classBadgeDotVenueSathorn{
	padding:7px;
}
.classBadgeDotVenueSukhumvit23{
	padding:7px;
}
.classBadgeDotVenueSukhumvit53{
	padding:7px;
}
.classBadgeDotVenueHeritage{
	padding:7px;
}
.classBadgeDotVenueCruise{
	padding:7px;
}
.classBadgeDotVenueNone{}
.classVenueSathorn{
  /*
	background-color: red !important;
	display :'background';
	*/
}


/* FRONT DESK END  */
/* Check In */
.tablet-container{
	max-width: 1440px;
}

/* --- EDIT MODE EXTENSION --- */
/* ใช้โทนสีเดียวกับ .btn-fd (rgba(205, 87, 61, 1)) */

.edit-active-label {
    color: rgba(205, 87, 61, 1) !important;
    font-weight: 700 !important;
    transition: color 0.3s ease;
}

.edit-active-input {
    border: 1px solid rgba(205, 87, 61, 0.2) !important; /* ปรับให้เข้มกว่า 0.1 เล็กน้อยเพื่อให้ตัดกับพื้นหลัง f5f5f5 */
    background-color: #ffffff !important;
    box-shadow: 0 0 8px rgba(205, 87, 61, 0.2) !important;
    transition: all 0.3s ease;
}

/* ปรับแต่ง Select2 ในโหมดแก้ไขให้เข้ากับธีม */
.select2-container--bootstrap-5.edit-active-input .select2-selection {
    border: 1px solid rgba(205, 87, 61, 0.2) !important;
    box-shadow: 0 0 8px rgba(205, 87, 61, 0.2) !important;
}