/*ค้นหางาน*/
.bg-height{ height: 18px;}
.panel-body{ padding: 0 15px 15px;}
.form-control{ padding-left: 30px; border-radius: 10px;}
.form-control-feedback{ left: 0; top: 10px; color: #D40101;}
.formHeight{ height: 34px;}

/*สถานที่ทำงานทั้งหมด*/
.button-group{ position: relative;}
.workarea-all{ width: 100%; background: #FFFFFF; font-size: var(--font16); border: 1px solid #bfbfbf; color: #9999a9; 
	text-align: left; border-radius: 10px; height: 34px;}
.workarea-all .fa-chevron-down{ text-align: right;}
.open>.dropdown-toggle.btn-default:focus, .open>.dropdown-toggle.btn-default:hover, .btn-default:hover{ background: #FFFFFF; color: #9999a9;}
.area-menu{ min-width: 100%; height: 250px; word-wrap: break-word;}

.dropdown-menu.jobbkk-area-menu::-webkit-scrollbar{ width: 5px; background-color: #7D7979;}
.dropdown-menu.jobbkk-area-menu::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;  }
.dropdown-menu.jobbkk-area-menu::-webkit-scrollbar-thumb { background-color:#7D7979;}
.jobbkk-area-menu{ overflow-y: scroll; width: 100%;}
.jobbkk-area-menu li a{ white-space: inherit; cursor: pointer;}

.dropdown-menu li a{ display: block; white-space: normal; padding: 5px 15px;}
.dropdown-menu li a:focus{ outline: none;}
.dropdown-menu li a:hover{ background: #ebebeb;}

.dropdown-menu li ul.dropdown-menu-right{ position: absolute; top: 0; right: 0; left: 50%; z-index: 1000; float: right; min-width: 50%; padding: 0 5px;
	margin: 2px 0 0; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box;
	border: 0; border: 0 rgba(0,0,0,0); border-left: 1px solid #ccc; border-left: 1px solid rgba(0,0,0,.15); border-radius: 0; -webkit-box-shadow: 0 rgba(0,0,0,0);
	box-shadow: 0 rgba(0,0,0,0); overflow-y: scroll; height: 250px;
}
.dropdown-menu li ul.dropdown-menu-right li label{ color: #333; display: block; word-wrap: break-word;}
.dropdown-menu li ul.dropdown-menu-right::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}
.dropdown-menu li ul.dropdown-menu-right::-webkit-scrollbar{ width: 5px; background-color: #7D7979;}
.dropdown-menu li ul.dropdown-menu-right::-webkit-scrollbar-thumb{ background-color:#7D7979; /*border: 1px solid #555555;*/	}

.dropdown-menu li ul.dropdown-menu-left{ position: absolute; top: 0; right: 0; right: 50%; z-index: 1000; float: right; min-width: 50%; padding: 0 5px;
	margin: 2px 0 0; text-align: left; list-style: none; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box;
	border: 0; border: 0 rgba(0,0,0,0); border-left: 1px solid #ccc; border-left: 1px solid rgba(0,0,0,.15); border-radius: 0; -webkit-box-shadow: 0 rgba(0,0,0,0);
	box-shadow: 0 rgba(0,0,0,0); overflow-y: scroll; height: 250px;
}
ul.dropdown-menu-left .firstB{ padding: 0 10px;}
ul.dropdown-menu-left li a{ color: #333; padding: 5px 10px; display: block; text-decoration: none;}
ul.dropdown-menu-right li label{ display: block; padding: 5px 10px;}
ul.dropdown-menu-left li a:hover, ul.dropdown-menu-right li label:hover{ background: #ebebeb; transition: 0.5s ease-in-out;}

ul.dropdown-menu-left::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}
ul.dropdown-menu-left::-webkit-scrollbar{ width: 5px; background-color: #7D7979;}
ul.dropdown-menu-left::-webkit-scrollbar-thumb{ background-color:#7D7979; /* border: 1px solid #555555; */}
.dropdown-menu-left li a.active { background: #ebebeb;}
.dropdown-menu-left a, .dropdown-menu-right a{ color: #000;}
.dropdown-menu-right label, .dropdown-menu-left label{ font-weight: 100; cursor: pointer; display: block;}

.gridOk{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; align-items: center; justify-content: space-between; 
	border-bottom: 1px solid var(--bg-gray); margin-bottom: 10px; padding-bottom: 10px;}
.gridOk div{ text-align: right;}
.okButton{ background: var(--bg-red); border: 1px solid var(--bg-red); color: var(--bg-white); border-radius: 4px;}
.okButton:focus{ outline: none;}
.okButton:hover{ background: var(--bg-dark-red); border: 1px solid var(--bg-dark-red);}

/* .dropdown-menu{ overflow-y: hidden;} */
.dropdown-menu::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}
.dropdown-menu::-webkit-scrollbar{ width: 5px; background-color: #7D7979;}
.dropdown-menu::-webkit-scrollbar-thumb{ background-color:#7D7979;}

.menu-other-work li label{ padding: 3px 20px;margin-bottom: 0px;}
.dropdown-menu .firstB{ padding: 5px 15px; display: block;}

.dropdownCustom{ overflow-y: scroll; height: 250px;}
.dropdownCustom label{ transition: 0.5s ease-in-out;}
.dropdownCustom label:hover{ background: #ebebeb;}

/*หางาน*/
a.search-work{ border-radius: 10px; width: 100%; padding: 6.5px 12px; font-size: var(--font14); color: #FFFFFF; border: 1px solid #D40101; display: block; 
	text-align: center; text-decoration: none; transition: all 0.3s ease-in; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -ms-transition:all 0.3s ease-in;}
a.search-work:hover{ background: #eee; color: #D40101;}

button.search-work{ border-radius: 10px; width: 100%; padding: 6.5px 12px; font-size: var(--font14); color: #FFFFFF; border: 1px solid #D40101; display: block; 
	text-align: center; text-decoration: none; transition: all 0.3s ease-in; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in; -ms-transition:all 0.3s ease-in;}
button.search-work:hover{ background: #eee; color: #D40101;}


/*หางานขั้นสูง*/
.row-search-high{ float: none; display: inline-block;}
.panel-group{ width: 100%; display: block; }
.panel-group a{ display: block; text-decoration: none; color: #D40101; border-radius: 10px; font-size: var(--font14); 
	border: 1px solid #D40101; background: #FFFFFF; text-align: center; padding:6.5px 15px;}
.panel-group a:hover{ background:#D40101; color: #FFFFFF;}
.panel-default{ border: 0; display: block;}
.panel-default>.panel-heading{ background: transparent; border: 0;}
.panel-heading{ padding: 0;}

/*ประเภทงานทั้งหมด*/
.category-work{ width: 100%; background: #FFFFFF; padding: 8.5px 12px; font-size: var(--font16); border: 1px solid #ccc; color: #9999a9; 
	text-align: left; border-radius: 10px;}

.block-salary{ width: 100%;}
.jobbkk-salary-1, .jobbkk-salary-2{ width: 50%;}
.jobbkk-btn{ border:1px solid #ccc; font-size: var(--font14); border-radius: 10px; background: #FFFFFF; padding: 8.5px 12px; color: #9999a9; width: 100%;}
.block-salary ul.dropdown-menu{ min-width: 100%;}
.jobbkk-salary-left{ text-align: left;}
.jobbkk-famoney{ margin-right: 5px;}

@media (max-width:576px){
	.input-group{ display: flex; flex-direction: column;}
	.jobbkk-salary-1, .jobbkk-salary-2{ width: 100%;}
	.formHeight{ height: auto;}
	.panel-group{ margin-bottom: 0;}
	.input-group-btn:first-child>.btn, .input-group-btn:first-child>.dropdown-toggle, 
	.input-group-btn:last-child>.btn, .input-group-btn:last-child>.dropdown-toggle{
		border-radius: 10px;
	}
}

@media (max-width:380px){
	.block-salary ul.jobbkk-dropdown-menu-left{ right: -100%;}
	.block-salary ul.jobbkk-dropdown-menu-right{ left: -100%; right: 0;}
}

a.format-work{ width: 100%; background: #FFFFFF; font-size: var(--font16); border: 1px solid #ccc; color: #9999a9; 
	text-align: left; border-radius: 10px;}

button.format-work{ width: 100%; background: #FFFFFF; padding: 8.5px 12px; font-size: var(--font14); border: 1px solid #ccc; color: #9999a9; 
	text-align: left; border-radius: 10px;}

.panel-body-mobile{ padding: 0 15px;}
.jobbkk-mobile-searchwork{ display: none;}

@media (max-width:1170px){
	.jobbkk-pc-searchwork{ display: none;}
	.jobbkk-mobile-searchwork{ display: block;}
}

.flexZone{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 15px; align-items: center; justify-content: center;}
.flexZone2{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px; align-items: center; justify-content: center;}
.searchWork button{ background: var(--bg-red); color: var(--bg-white); border: 1px solid var(--bg-red); width: 100%; height: 34px; border-radius: 10px; font-size: var(--font16); }
.searchWork button:hover{ background: var(--bg-dark-red); border: 1px solid var(--bg-dark-red); }

.resetCondition button{ background: var(--bg-white); border: 1px solid var(--bg-gray); width: 100%; height: 34px; border-radius: 10px; font-size: var(--font16); }
.resetCondition button:focus{ outline: none;}

.workNow{ height: 34px; color: var(--bg-red); display: flex; align-items: center; justify-content: start;}
.styled-checkbox { position: absolute; opacity: 0; z-index: 99;}
.styled-checkbox + label { position: relative; cursor: pointer; padding: 0; margin-bottom: 0;}
.styled-checkbox + label:before { content: ''; margin-right: 10px; display: inline-block; vertical-align: text-top; width: 20px;
	height: 20px; background: var(--bg-white); border: 2px solid var(--bg-red); border-radius: 4px;  transition: 0.5s ease-in-out;}
.styled-checkbox:hover + label::before { background: var(--bg-dark-red);}
.styled-checkbox:focus + label::before { box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);}
.styled-checkbox:checked + label::before { background: var(--bg-red);}
.styled-checkbox:checked + label::after { content: ''; position: absolute; left: 5px; top: 9px; background: var(--bg-white); width: 2px;
	height: 2px; box-shadow: 2px 0 0 white, 4px 0 0 white, 4px -2px 0 white, 4px -4px 0 white, 4px -6px 0 white, 4px -8px 0 white;
	-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.small{ font-size: var(--font14);}

@media (max-width:1170px){
	.styled-checkbox{ width: 100%;}
}

@media (max-width:480px){
	.fullWork{ width: 100%;}
}