/*color = brown  #38220e ,blue #0071BA  gray #414042  yellow=#FFB711*/
/*
font-family: 'Prompt', sans-serif;
font-family: 'Kanit', sans-serif;
font-family: 'Sarabun', sans-serif;
*/

.box-cover-banner{
	border: 1px solid #ccc;width: 100%;height: 134px; border-radius: 3px;
}
.box-cover-banner img {
	width: 100%;
}
/*gobal*/
#wrapper {
	width: 100%;
	margin: 0 auto;
	 
}
#header {
	position: fixed;
	width: 100%;
	z-index: 888;
	top: 0;
	padding: 0;
	background: #0169B9
	 

}
#container {
	width: 100%;
	margin-top: 106px;
	 
 
}
 legend {
     float: unset;  
      width:unset;  
    padding: 0;  
      margin-bottom: 0.5rem;  
      font-size:18px; 
     line-height: inherit;  
}

.section {
	padding:100px 0;
}

/*#header.sticky {
	background: rgb(0,0,0);
	background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%);
	transition: 0.3s;
	top: 0;
	padding: 30px 0 30px 0;
}*/

.modal-body .box-table {
    height: 600px;
}
.img-logo {
	margin: 20px 0 ;
}
.logo img {
	width:38px;
}
.text-logo {
	width: 80%;
    padding-top: 8px;
    padding-left: 8px
 
 
 
}
.text-logo .txt-system {
	    font-size: 40px;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 64px;
}
.text-logo .txt-system p {
	font-size: 18px;
	font-weight: 400;
	color: #fff;
	margin: 0;
	line-height: 13px;
}
.text-logo .txt-system p br {
	display: none;
}
.wrapper-content {
	position: relative;
}
.wrapper-content:after {
	content: '';
	display: block;
	clear: both;
}

/*menu*/
 .box-menu {
 	text-align: right;
  
 }
ul.menu {
	margin:18px 0 0 0;
	padding: 0;
}
ul.menu li {
	margin: 0 0 0 10px;
	padding: 0;
	list-style: none;
	display: inline-block;
		 color: #fff;
	 font-family: 'Kanit', sans-serif;
	 font-size: 18px;
	 position: relative;
}

ul.menu li a {
	 display:inline-block;
		padding: 5px 0;
		color: #fff;

}
ul.menu li a:hover {
 
 
	color: #FFCC00;
}
ul.menu li a.active-menu {
	 
	color:  #FFCC00;
	 
}  
ul.menu li a i {
 
	font-size: 16px;
}
ul.menu li:hover, ul.menu li:hover a {
	color: #FFCC00;
}
ul.menu li:hover .dropdown {
	opacity: 1;
	visibility: visible;
	transition: 0.3s;
	 top: 42px;
}
.dropdown {
    background: #fff;
    position: absolute;
    top: 48px;
    padding: 30px;
    width: 220px;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    border-radius: 3px;
    box-shadow: 0 0 5px #ccc;
}
.dropdown ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.dropdown ul li{
	list-style: none;
	display: block !important;
	padding: 5px 0;
	color: #555;
	margin: 0;
	text-align: left;
}
.dropdown ul li a {
	color: #555 !important;
	padding: 0;
}
.dropdown ul li a:hover {
	color: #2AA7E5 !important;
}
/*banner hero*/
.banner-hero {
	width: 100%;
	position: relative;

}
.banner-hero img {
	width: 100%;
}
.relative {
	position: relative;
}
 
  
 


.bg-gray {
	background:#F7F7F7 ;
}


.box-img {
	overflow: hidden;
}
img.img-hover {
	transform: scale(1);
	transition: 0.3s;
}
img.img-hover:hover {
	transform: scale(1.1);
	transition: 0.3s;
	cursor: pointer;
}
 
.txthead {
	font-size:30px;
	color: #2F4DAA;
	font-weight: 500;
}
.txtheader {
	font-size:25px;
	color: #fff;
	font-weight: 500;
	padding: 25px 0 0 0;
}
 .txthead span {
 	font-size: 20px;
 	display: block;
 	color: #000707;
 }
.txt-h2 {
	font-size: 24px;
	line-height: 46px;
	color: #012875;
	border-bottom: 1px solid #012875;
	margin: 0 0 30px 0;
	font-weight: 400;
}
.txt-h3 {
	font-size: 18px;
}
  
 .box-banner {
 	text-align: center;
 	margin: 25px 0 45px 0;
 }


.box-tab {
	margin: 50px 0;
	padding: 0 0;
	border-bottom: 1px solid #DFDFDF;
	text-align: center;
}
.box-tab ul {
	margin: 0;
	padding: 0;
}

.box-tab ul li {
	list-style: none;
	display: inline-block; 
	text-align: center;
	width:20%;
}
.box-tab.contact ul li{
	width: 20%;
}
.box-tab ul li a{
	display: block;
	margin: 0 0;
	padding: 0 0 5px 0;
	color: #038CC9;
	font-size: 23px;
	font-weight: 500;
	position: relative;
	vertical-align: bottom;
}
.box-tab ul li a:hover {
	color: #038CC9;
}
.box-tab ul li a:after {
	content: '';
	background: #038CC9;
	height: 4px;
	width:0;
	display: block;
	position: absolute;
	bottom: -1px;
	transition: 0.3s;
}
.box-tab ul li a:hover:after {
	width: 100%;
	transition: 0.3s;
}


.box-tab ul li a.active-tab:after {
	width: 100%;

}
.box-tab ul li a.active-tab {
	color: #038CC9;
}

.box-table {
	margin: 10px 0 25px 0;
	width: 100%;
	overflow: auto;
	 
}
.box-table h2 {
	line-height: normal;
}
.box-table table thead th {
	background: #038CC9;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	    padding: 4px 6px;
	    border-left: 1px solid #fff;
}

.box-table table tbody tr td {
	background: #f5f5f5;
	border-bottom: 1px solid #fff;
	 padding: 5px 6px;
	font-size: 17px;
	font-weight: 300;
	border-left: 1px solid #fff;
}

.modal-body th {
	font-weight: normal;
	font-size: 16px;
	 
	color: #000;
}
.box-table-trial {
	margin: 10px 0 25px 0;
	width: 100%;
	overflow: auto;
	 
}
.box-table-trial h2 {
	line-height: normal;
}
.box-table-trial table thead th {
	background: #038CC9;
	color: #fff;
	font-size: 16px;
	font-weight: 400;
	text-align: center;
	    padding: 4px 6px;
	    border-left: 1px solid #fff;
}

.box-table-trial table tbody tr td {
	background: #fff;
	border-bottom: 1px solid #fff;
	 padding: 2px 3px;
	font-size: 17px;
	font-weight: 300;
	border-left: 1px solid #fff;
}
.box-table-trial table tr:hover td {
	background: #f5f5f5;
}
.box-table-trial table tr.show_tr:hover td {
	background: #fff;
}
.box-table-trial table tr td table tr.show_tr_sub td table tr:hover  td {
	background: #f5f5f5;
}
 .box-table-trial table tbody tr td b {
 	color: #000;
 	font-weight: 600;
 }
  .box-table-trial table tbody tr td.level-2 {
 	padding-left: 25px;
 	font-weight: 500;
 }
   .box-table-trial table tbody tr td.level-2.no-bold {
 	padding-left: 25px;
 	font-weight: 300;
 }
   .box-table-trial table tbody tr td.level-3 {
 	padding-left: 65px;
 	 
 }
  .box-table-trial table tbody tr td i {
  	color: #555;
  }


.box-table-trial table tbody tr.trtotal td {
	border-top: 1px dashed #ccc;
	font-weight: 600;
}
.box-table-trial table tbody tr td.padtotal {
	padding-left: 40px;
}
 
.box-table-trial table tbody tr td span .fa-square-minus {
	display: inline-block;
}
.box-table-trial table tbody tr td span.show .fa-square-minus {
	display: none;
}
.box-table-trial table tbody tr td span.show .fa-square-plus {
	display: inline-block;
}
.box-table-trial table tbody tr td span  .fa-square-plus {
	display: none;
}



.txttab {
	background: #038CC9;
	color: #fff;
	font-size: 22px;
	padding: 10px;
	margin: 0 0 15px 0;
}
.txttab.cancel {
	background: #ccc;
}

/*login*/
.content-login {
	 
	background: url(../images/bg-login.png) no-repeat top right;
}
 
.box-login {
	margin: 250px 0 150px 0;
	min-height: 450px;
}
.box-member-left {
	background: #ECF9FD;
	padding: 30px;
	margin: 0 0 0 0;
 position: relative; 
 	min-height: 850px; 
	border-radius: 20px;
	width: 17%;
/*	float:left;*/
	/*position: sticky;
	top: 0;*/
/*	float: left;*/
}
/*.container-fluid>.d-lg-flex {
	display: block !important;
}*/

.ui-datepicker-trigger {
	background: #FFCC00;
    border-radius: 0;
    padding: 3px 13px;
    color: #FFCC00;
    font-size: 16px;
    border: 0;
    border-radius: 3px;
    position: absolute;
    right: 4px;
    top: 3px;
}
.ui-datepicker-trigger:after {
	content: '\f073';
	position: absolute;
	display: block;
	top: 7px;
	left: 11px;
	color: #000;
	font-size: 16px;
	font-family: 'font awesome 5 free';
}


.box-content-right {
	width: 83%;
	padding-left: 20px;
/*	float: right;*/
}
.object-left {
	position: absolute;
	bottom: -20px;
	left: -30px;
}


.submenu-button {
	margin: 0 0;
	text-align: center;
 
}
.submenu-button ul {
	margin: 0;
	padding: 0;
}
.submenu-button ul li {
	list-style: none;
	display: inline-block;

 
 
}
.submenu-button ul li a {
	display: block;
	padding: 10px 35px;
	margin: 0 5px;
	 font-size: 20px;
	color:#000;
	background: #f5f5f5;
	border-radius: 30px;
 

}
.submenu-button ul li a:hover {
	color:#fff;
	background: #0169B9
}
 
.submenu-button ul li a.active-button {
	color:#fff;
	background: #0169B9;
}




.submenu {
	margin: 0 0;
	text-align: left;
	padding-bottom: 250px;
 
}
.submenu ul {
	margin: 0;
	padding: 0;
}
.submenu ul li {
	list-style: none;
	display: block;
	border-bottom: 1px solid #ccc;
 
}
.submenu ul li a {
	display: block;
	padding: 10px 0;
	 font-size: 18px;
	color:#000;
 

}
.submenu ul li a:hover {
	color:#0169B9;
}
.submenu ul li i {
	margin:0 5px;
}
.submenu ul li a.active-submn {
	 
	color:#0169B9;
}
.section-inner {
	padding: 0 0 80px 0;
}
.box-form {
	margin: 40px 0 40px 0;
} 
 ul.submn-sub {
	margin:0 0 0 0;
	 
	padding: 10px 0 30px 0;
}

ul.submn-sub li{
	margin:0 0 0 28px;
	list-style: none;
	border-bottom: none;
	position: relative;
}
ul.submn-sub li a  {
	padding: 5px 10px;
	font-size: 18px;
	font-weight: 300px;

}
ul.submn-sub li a.select-sub {
	color:#fff;
	background: #038cc9;
	border-radius: 3px;
}
 

.icon-user {
	width: 35px;
	height: 35px;
	border-radius: 100%;
	background:#ffcc00;
	color: #000;
	display: inline-block;
	padding-top: 3px;
	text-align: center;
}
.box-login h2 {
	font-size:26px;
	line-height: 50px;
	font-weight: 600;
	color: #100303;
	text-align: left;
	margin: 0 0 25px 0;
	padding: 0;
	border-bottom: 1px solid #707070;
}
 
.txtbox-login {
	background: #fff;
	color: #10357D;
	font-size: 18px;
	font-weight: 300;
	text-indent: 20px;
	padding: 10px 0;
	width: 80%;
	border-radius: 60px;
	border: none;
    box-shadow:0 5px 5px #ccc;
	outline: none;
	margin: 0 auto 10px auto;

}
.txtbox-login:focus {
	border: 0;
	box-shadow: 0;
	outline: none;
}
 .txt-blue {
 	color: #2AA7E5
 }
 .btn-all.add {
 	padding: 6px 10px;
 }
  .btn-all.add i {
  	font-size: 15px;
  }

 .btn-all.auto-w {
 	display: block;
 	width: 100%;
 	background: #0169B9;
 	color: #fff;
 	font-weight: 500;
 }
 .btn-all.auto-w:hover {
 	color: #fff;
 }

.btn-all  {
    background: #FFCC00;
    color: #000;
    font-size: 16px;
    font-weight: 300;
    padding: 6px 25px;
    border-radius:5px;
    display: inline-block;
    
    text-align: center;
    border: none;
    box-shadow: 0;
	outline: none;
	transition: 0.3s;
}
.btn-all:hover {
	color: #000;
	box-shadow: 0 0 5px #ccc;
}
.btn-login  {
    background: #FFCC00;
    color: #000;
    font-size: 16px;
    font-weight: 300;
    padding: 6px 25px;
    border-radius: 5px;
    display: inline-block;
    
    text-align: center;
    border: none;
    box-shadow: 0;
	outline: none;
	transition: 0.3s;
}

.btn-reset, .btn-all-pop  {
   background: #ccc;
    color: #000;
    font-size: 16px;
    font-weight: 300;
    padding: 6px 25px;
    border-radius: 5px;
    display: inline-block;
    
    text-align: center;
    border: none;
    box-shadow: 0;
	outline: none;
	transition: 0.3s;
}
.btn-login.border {
	border:1px solid #FFCC00;
	background: #fff;
	color: #000;
}
.btn-login.w-100 {
	width: 100%;
	padding:8px 0 6px 0;
}
.btn-login:hover {
	background: #FFCC00;
	color: #000;
	transition: 0.3s;
	box-shadow: 0 0 10px #ccc;
}

.btn-login.btn-add {
	background: #FF8820;
}
.btn-login.cancel {
	background: #ccc;
}
.btn-login.green {
	background:#31B901;
	color: #fff;
}
.box-btn {
	margin: 80px 0 0 0;
}

.box-user {
	text-align: center;
	font-size: 22px;
	 
	padding:0 15px;
	margin: 0 0 15px 0;

}
.box-user h2 {
	font-size: 26px;
}
.box-user p {
	font-size:20px;
	color: #000;
	margin: 0;
}
.box-user p.txtnote {
	font-size: 15px;
}
 
.box-total {
	text-align: center;
	font-size: 26px;
	background: #FFCC00;
	padding:15px;

}
.box-total p {
	padding: 0;
	margin: 0;
}
ul.list-member {
	margin: 50px 0;
	padding: 0;
}
ul.list-member li {
	margin: 0 0;
	list-style: none;
	padding: 10px 0;
	border-bottom: 1px solid #ccc;
	font-weight: 500;
}
ul.list-member li a.active-member {
	color: #038CC9;
}


.btn-delete {
	background: #FFCC00;
	border-radius: 100%;
	padding:10px 15px;
	color: #000;
	font-size: 16px;
	border: 0;
}
.box-data-user {
	background: #FFCC00;
	padding: 15px;
	border-radius: 6px;
	color: #000;
}
/*footer*/
#footer {
	width: 100%;
	background: #0169B9;
	padding: 40px 0 20px 0;
	color: #fff;
}
 
.clear {
	clear: both;
}
.adddress-footer {
	color: #fff;
	font-size: 18px;
	 
	font-weight: 400;
	float: left;
	text-align: left;
}
 .adddress-footer h2 {
 	font-size: 30px;
 		color: #000;
 	margin: 0;
 	padding: 0 0 10px 0;

 }
 .adddress-footer span {
 	display: block;
 	font-size:24px ;
 }
.adddress-footer a {
	color: #000 !important;
}
.adddress-footer a:hover {
	color: #000 !important;
} 
.line-footer {
	border-top: 1px solid  rgba(255, 255, 255, 0.8);
	margin: 35px 0 0 0;
}
p.txt-copy {
	font-size: 18px;
	color: #fff;
	font-weight: 200;
	margin-top: 10px;
}

ul.sitemap {
	margin: 0;
	padding: 0;
}
ul.sitemap li {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 30%;
	display: inline-block;
	vertical-align: top;
}
ul.sitemap li h2 {
	font-weight: 600;
	font-size: 22px;
	margin: 0 0 10px 0;
	padding: 0;
}
ul.sitemap li h2 a {
	color: #000;
}
ul.sitemap li a {
	display: block;
}
.section-banner {
	width: 100%;
	 
	margin: 0 0 40px 0;
}
.banner-hero img {
	width: 100%;
	max-width: 1920px;
 
	margin: 0 auto;
}
.section-news {
	background: #fbfbfb;
	padding: 80px 0 150px;
}
.section-first {
	background: #fff;
	padding: 80px 0 80px;
}
.box-slide-news {
	margin: 30px 0 0 0;
}

.box-news {
	 padding: 0;
}
.box-news h2 {
	color: #012875;
	font-size: 20px;
	font-weight: 600;
}
.box-news h2 a {
	color: #012875;
}
.box-news h2 a:hover {
	color: #434343;
}
.txtdate {
	font-size: 16px;
	color: #6D6D6D;
	margin: 0 0 10px 0;
	padding: 0;
}
.news-detail {
	padding: 0;
	margin: 20px 0  0 0;
	min-height: 100px;
}
.news-detail h2 {
	font-size: 20px;
	color:#000;
	font-weight: 300;
	line-height: normal;
}
 .news-detail h2 a {
 	color:#000000
 }
  .news-detail:hover {
  	color: #2F4DAA;
  }
.news-cover {
	position: relative;
	overflow: hidden;
}
.box-news .news-cover  img {
	transition: 0.3s;
	box-shadow: 0 0 10px #ccc;
}
.box-news:hover .news-cover img {
	transform: scale(1.1);
	transition: 0.3s;
}
.box-more {
	margin: 20px 0 0 0;
	font-size: 18px;
}
.box-more span {
	width: 40px;
	height: 40px;
	border: 1px solid #707070;
	text-align: center;
	display: inline-block;
	border-radius: 100%;
	vertical-align: middle;
	transition: 0.3s;
	margin-right: 8px;
}
.box-more span img {
	width: 15px !important;
	margin: 15px auto;
}

 

.box-news:hover .box-more span {
 	transition: 0.3s;
	background: #2AA7E5;
	border: 1px solid #2AA7E5;

}
.box-news:hover .box-more span img {
	filter: invert(100%) sepia(2%) saturate(19%) hue-rotate(282deg) brightness(104%) contrast(101%);


}
.box-icon {
	padding: 0 15px;
	text-align: center;
}
 .box-icon h2 {
 	font-size: 32px;
 	font-weight: 600;
 	color: #000707;
 }
  .box-icon img {
  	width: 115px;
  	margin-bottom: 25px;
  	transition: 0.3s;
  }
 .box-icon p {
 	font-size: 16px;
 }

.box-icon:hover img {
	transform: scale(1.1);
	transition: 0.3s;
}
.box-icon:hover .box-more span {
 	transition: 0.3s;
	background: #2AA7E5;
	border: 1px solid #2AA7E5;

}
.box-icon:hover .box-more span img {
	filter: invert(100%) sepia(2%) saturate(19%) hue-rotate(282deg) brightness(104%) contrast(101%);

}
.box-icon:hover a p {
	color: #000;
}

th {
    text-align: center; ;
}

.table th{
	font-weight: 500;

}
.table {
	overflow: auto;
}
.icon-menu {
	display: none;
}

.header-bar {
	background: #f5f5f5;
	padding: 35px 0;
	text-align: center;
}
.header-bar h1 {
	color: #0169B9;
	font-size: 35px;
	margin: 0;
	padding: 0;
}



.box-btn {
	margin: 30px 0;
	text-align:left;
}


.box-news-detail {
	font-weight: 300;
}
.box-img-news {
	margin: 0 0 30px 0;
	text-align: center;
}
.box-img-news img {
	max-width: 100%;
}



.navi {
	margin: 0 0 25px 0;
	padding-top: 25px;
	text-align: left;
	font-size: 16px;
 	border-bottom: 1px solid #ccc; 
	padding-bottom: 10px;
}

.txt-under{
	font-size: 20px;
	display: block;
	color: #000;
}
.txt-address {
	font-size: 20px;
	text-align: left;
	font-weight: 300;
}
.txt-address span {
	display: block;
	font-size: 18px;
	font-weight: 400;
/*	color: #0169B9;*/
}

/*booking*/


.plan-room {
	margin: 0;
}
.box-footpath {
	background: #ffa602;
	height: 613px;
	width: 100%;
}

.box-room-item {
	padding: 15px 0;
	border: 2px solid #fff;
	font-size: 18px;
	min-height: 88px;
	cursor: pointer;
}
.box-room-item  span {
	display: block;
}
.box-room-item.avaliable {
	background: #83e0b7;

}
.box-room-item.full {
	background: #ff6a86;
}

.box-room-item.space {
	background: #6ac9ff;
	cursor: default;
}
.box-room-item.space2 {
	background: #ccc;
	cursor: default;
}
.box-room-item.bathroom {
	background: #ffec85;
	cursor: default;
}
.box-room-item:hover {
	opacity: 0.8;
}

.box-sm {
	width: 15px;
	height: 15px;
	margin: 0 5px;
}

.btn-boxsearch {
	margin: 25px 0 0 0;
	text-align: right;
}


.box-form-search {
    font-size: 18px;
    width: 100%;
    margin: 0 auto;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding:5px 15px 10px 15px;
    margin-bottom: 20px;
    text-align: left;
}
.box-search-pop {
	font-size: 16px;
}
.box-form-search.border-none {
	border:none;
}
.box-tabmntop {
	background: #fff;
	padding: 0 0 10px 0;
	margin: 0 0 0 0;
	text-align: right;
}
.box-tabmntop-left {
	background: #fff;
	padding: 0 0 10px 0;
	margin: 0 0 0 0;
	text-align: left;
}
ul.mntop-list {
	list-style: none;
	margin: 0 0 15px 0;
	padding: 0;
	
}

ul.mntop-list li {
	list-style: none;
	margin: 0 0 8px 0;
	 
	font-size: 18px;
	display: inline-block;
}

ul.mntop-list li a, ul.mntop-list li button {
	color: #000;
	background: #ECF9FD;
	display: inline-block;
	padding:5px 6px;
	border-radius: 3px;
	font-weight: 300;
	font-size: 16px;
	border:none;
	box-shadow: none;
}
ul.mntop-list li button {
	background: #ffcc00;
}


ul.mntop-list li a:hover {
	color: #fff;
	background: #038cc9;
}
ul.mntop-list li a.active-tab {
	 
	color: #fff;
	background: #038cc9;
}
ul.mntop-list li button.active-tab {
	 
	color: #fff;
	background: #038cc9;
}

ul.mntop-list li i {
	font-size: 15px
}
ul.mntop-list li span {
	display: block;
	font-size: 24px;
}
.border-left {
	border-left: 1px solid #ccc !important;
	margin-left: -28px;
 
}
td {
	position: relative;
}
.relative {
	position: relative;
}
.icon-abb {
	position: absolute;
    right: 4px;
    top: 3px;
}

.box-btn  {
	text-align: center;
	margin: 15px 0 25px 0;
}

.btn-infield {
    background: #FFCC00;
    border-radius: 0;
   padding: 3px 10px;
    color: #000;
    font-size: 16px;
    border: 0;
    border-radius: 3px;
}

.box-confirm {
	font-size: 20px;
	text-align: center;
	padding: 50px 0;
}
.box-confirm h2 {
	line-height: normal;
	font-weight: 300;
}

.mt-field-radio {
	margin-top: 30px;
}
.mt-field {
	margin-top: 25px;
}

.tab-menu {
	background: #038CC9;
	padding:0 10px;
	color: #fff;
	font-size: 17px;
	margin: 0 0 15px 0;
	position: relative;
}
.tab-menu ul {
	margin: 0;
	padding: 0;
}
.tab-menu ul li {
	list-style: none;
	display: inline-block;
	padding: 5px 3px ;
	text-align: center;
	cursor: pointer;
}

.tab-menu ul li.active {
	text-decoration:underline;
}
.tab-menu ul li.active span {
	display: block;
}
.box-w50 {
	width: 60%;
}

ul.list-role {
	margin: 15px 0 30px 25px;
	padding: 0;
}
ul.list-role li {
	margin: 0;
	padding: 0 20px 5px 0;
	list-style: none;
	display: inline-block;
	width: 49%;
 
}

.box-status {
	background: #f5f5f5;
	width: 580px;
	padding: 20px;
	font-size: 16px;
	margin-top: 35px;
}

.arrow {
	color: #FFCC00;
}
.arrow-2 i {
	transform: rotate(-180deg);
}

.box-master {
	margin-top: 17px !important;
	font-size: 18px;
	text-align:left; 
	padding:10px 0 10px 10px ; 
	color:#038cc9; 
	font-weight: 400;
}

.over-flow {
	height: 500px;
	overflow: auto;
}

.over-flow-po {
height:150px;overflow: auto;
}
.margin-top-invoice {
	margin-top: -18px
}

.txt-itemcode {
	font-size: 20px;
}
.txt-itemcode span {
	display: block;
	font-size: 13px;
}

.box-workflow-left {
	border:1px solid #ccc;
	padding: 5px;
	margin: 0 0 0 0;
	position: relative;
	min-height: 850px;
	border-radius: 0;
	width: 10%;
}
.box-workflow-right {
	border:1px solid #ccc;
	padding: 5px;
	margin: 0 0 0 0;
	position: relative;
	min-height: 850px;
	border-radius: 0;
	width: 30%;
}
h2.txttopic {
	font-size: 18px;
/*	border-bottom: 1px solid #ccc;*/
	background: #ECF9FD;
	padding: 10px;
}
h2.txttopic.yellow {
	background: #fff7c8;
}
ul.list-user-group {
	margin: 0;
	padding: 10px;
}


ul.list-user-group li {
	margin: 0 0 10px 0;
	padding: 0;
	list-style: none;
}
.box-workflow-center {
	width:70%;
	margin: 0 1% 0 0;
	border:1px solid #ccc;
	padding: 5px;
	 
	position: relative;
	min-height: 850px;
}
.box-workflow-detail{
	padding: 10px;
	font-size: 16px;
}
.box-workflow-detail p {
	color: #555;
}
.box-workflow-detail p span {
	display: block;
	color: #000;
	font-weight: 400;
}

.box-workspace {
	padding: 20px;
	position: relative;
}

.btnactive {
/*	box-shadow: 0 0 10px #ccc;*/
}
.box_content_report {
	display: block;
}

.box_content_report .box-show-report {
	width: 100%;
	float: none;
}

.box_content_report.column .box-show-report {
	width: 48%;
	margin: 0 1%;
	float: left;
}
.box_content_report.bflex {
	display: block;
	width: 100%;
}


.box-start {
	position: absolute;
	top: 269px;
}
.box-object-new {
    position: absolute;
    top: 90px;
    left: 65px;
    z-index: 99;
}
.box-object-add {
    position: absolute;
    top: 272px;
    left: 171px;
    z-index: 99;
}

.modal-header {
	padding: 0 15px !important;
}

.value {
	border-radius: 6px;
	border:1px solid #ccc;
	padding: 2px 10px;
	display: inline-block;
	background: #fff;
}

ul.list-report {
	margin: 20px;
	padding: 0;
}
ul.list-report li {
	margin: 0;
	padding: 0 0 5px 0;
	font-size: 18px;
}


ul.list-report li::marker {
  color: #0169B9;
}
ul.list-report li:hover {
	color: #0169B9;
	cursor: pointer;
}

.box-saleType {
	border:1px solid #ccc;
	padding: 25px;
	background: #fff;
	text-align: center;
 
}
.box-saleType .txt {
	font-size: 18px;
	margin: 10px 0 0 0;
	color: #6a707f;
 
}
.box-saleType:hover {
	background: #f5f5f5;
}

.box-sign {
    border: 1px solid #f6c23e;
    text-align: center;
    padding: 24px 0;
}

ul.list-level {
	margin: 0;
	padding: 0;
}
ul.list-level li {
	margin: 0 0 1px 0;
	padding: 3px 20px;
	list-style: none;
	font-size: 16px;
}
 }
ul.list-level li span {
	padding: 0 20px 0 0;
}
ul.list-level li.active-level {
	background: #a3e3ff !important;
}
ul.list-level li.level2 {
	 padding-left: 55px;
}
ul.list-level li.level3 {
	 padding-left: 78px;
}


ul.list-level li:nth-child(odd) {
  background: #f5f5f5;
}
ul.list-level li i {
	padding: 0 5px 0 0;
}
ul.list-level li:hover {
	background: #ECF9FD;
	cursor: pointer;
}

/*ul.list-level li:nth-of-type(2) {
	 padding-left: 55px;
}
ul.list-level li:nth-of-type(3) {
	 padding-left: 55px;
}
ul.list-level li:nth-of-type(4) {
	 padding-left: 78px;
}
ul.list-level li:nth-of-type(5) {
	 padding-left: 55px;
}*/

.box-img-spec {
    width: 700px;
    margin: 20px 0;
    position: relative;
    padding-top: 40px;
    font-size: 14px;
}

.sticky {
  position: sticky;
  top: 100px;
}

.box-img-spec .form-control, .box-img-spec .form-select {
	font-size: 14px;
	padding: 3px ;
}

.txthead-sch {
	font-size:16px;
	color: #2F4DAA;
	font-weight: 500;
}
.txthead-sch a {
		color: #2F4DAA;
}
.box-schedule {
	position: relative;
 border:1px solid #ccc; 
	font-size: 16px;
	overflow: auto;
}
.box-schedule td {
	background: #fff;
	border-left: 1px solid #ccc;
	border-bottom: 1px solid #111;
	border-top: 1px solid #ccc;
	vertical-align: top;
}
.box-schedule-phase {
	position:absolute;
	width: 20%;
	background: #f5f5f5;

}
.box-schedule-plan {
/*	border-right: 1px solid #ccc;*/
	border-bottom: 1px solid #ccc;
	 left: 0px;
	  width: 220px;
	 
}
.box-schedule-plan-txt {
	padding: 10px;
	width: 221px;
	left: 0px;
	font-size: 14px;
	 
}
.box-schedule-plan-start {
	padding: 0;
	width:100px;
	left: 221px;
	font-size: 14px;
	text-align: center;
/*	border-right: 1px solid #ccc;*/
}
.box-schedule-plan-end {
	padding: 0;
	width:100px;
	left: 320px;
		font-size: 14px;
		text-align: center;
/*		border-right: 1px solid #ccc;*/
}
.box-schedule-plan-complete {
	padding: 0;
	width:100px;
	left: 420px;
		font-size: 14px;
		text-align: center;
 		border-right: 1px solid #ccc; 
}
.color-status {
	width: 15px;
	height: 15px;
	display: inline-block;
 
	border-radius: 100%;
}

ul.list-task {
	margin: 3px 0 0 0;
	padding: 0;
}
ul.list-task li {
	margin: 0;
	padding: 0 0 5px 0;
	list-style: none;
	min-height: 27px;
	font-size: 14px;
}
.box-schedule-plan-week {
	width: 200px;
	font-size: 12px;
	text-align: right;
}
.box-schedule-plan-day {
	width: 25px;

}

.sticky-col {
  position: -webkit-sticky;
  position: sticky;
  background-color: white !important;
  z-index: 2;
}

.first-col {
  width: 200px;
  min-width: 100px;
  max-width: 100px;
  left: 0px;
}

.second-col {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
  left: 100px;
}


.bar-task {
	position: absolute;
  
    
    height: 10px;
    z-index: 1;
   
}
.tab-menu-close {
	position: absolute;
	right: 20px;
	top: 5px;

}
table {
    caption-side: inherit !important;
    border-collapse: inherit !important;
}

/*.today {
	border-left: 1px solid #f00 !important;
}
.today:before {
	content: '';
	position: absolute;
	display: block;
	top: 0;
	background: #f00;
	width: 100%;
	height: 5px;
}*/
.txtday {
	font-size: 12px;
	text-align: center;
}

.today {
	background: #0169B9 !important;
	color: #fff !important;
}
.tdtoday {
	border-left: 1px solid #0169B9 !important ;
}


.box-schedule-control-plan {
	 
	width: 270px;
	left: 0px;
	font-size: 14px;
	 
}
.box-schedule-control-start {
	padding: 0;
	width:100px;
	left: 270px;
	font-size: 14px;
	text-align: center;
/*	border-right: 1px solid #ccc;*/
}

.box-schedule-control-txt {
width: 270px

}


.box-type-status {
	width: 15px;
	height: 15px;
	border-radius: 100%;
	display: inline-block;
}

.box-show-image {
    border: 1px solid #ccc;
    border-radius: 2px;
    min-height: 203px;
    text-align: center;
    margin-bottom: 10px;
}
 
.box-show-image img.default {
/*	opacity: 0.2;*/
	width: 194px;
}


h4.accor-title { background: url(../images/icon/bullet-tab-close.png) no-repeat right #038CC9 !important;  
	line-height: normal; padding:5px 10px !important; margin: 0 0 1px 0;	font-family: 'Kanit', sans-serif;
	font-size:18px !important;
	color: #fff !important;
	line-height: normal;
	font-weight: 500;}
h4.accor-title.ui-state-active {background: url(../images/icon/bullet-tab-open.png) no-repeat right #038CC9 
 !important;}


.txtmain {
	font-size: 18px !important;
}
.box-content-group {
	font-size:18px !important;
	line-height: normal;
	font-family: 'Kanit', sans-serif;
/*	padding: 25px !important;*/
}
.ui-widget.ui-widget-content {
/*	 top: 0 !important;*/
}
.form-control {position: relative !important;}
.box-level {
	padding: 25px;
}
.box-per {
	padding:3px 6px;
	border:1px solid #ccc;
	border-radius: 3px;
	background: #f5f5f5;
	margin: 5px 5px 5px 0;
	width: 20%;
	display: inline-block;
}
.box-per-tab {
	padding: 8px 15px;
	border:1px solid #ccc;
	border-radius: 3px;
	background: #fff;
	margin: 5px 5px 5px 0;
	width: 20%;
	display: inline-block;
}
.status-alert {
    position: absolute;
    right: 10px;
    width: 27px;
    height: 27px;
    background: #f00;
    color: #fff;
    text-align: center;
    border-radius: 100%;
    top: 5px;
    font-size: 18px;
}

.arrow-right {
	position: absolute;
	right: 10px;
	color: #FFCC00;
	cursor: pointer;
}
.arrow-right.close_w i {
	transform: rotate(-180deg);
}
.description {
	width: 250px;
}
.description.description_w {
	width: 600px;
}



.box-summary {
	background: #f5f5f5; padding: 2px; border-radius: 3px; position:absolute; width: 100%; height:158px;font-size: 15px;
}
.box-summary p, .box-summary2 p
{
	margin-bottom: 0; background: #038CC9; color: #fff; font-weight: 600; padding: 5px;
}


.box-summary2 {
	background: #f5f5f5; font-size: 15px; padding: 2px;  width: 100%; height:160px; top: -40px;
	position: absolute;
}