@font-face {
	font-family: "DB-HeaventRounded";
	src: url("../../../fonts/DB-HeaventRounded.woff2") format("woff2"),
	  /* Modern Browsers */ url("../../../fonts/DB-HeaventRounded.otf")
		format("opentype"); /* Safari, Android, iOS */
	font-style: normal;
	font-weight: normal;
	text-rendering: optimizeLegibility;
}

a{ display: block;}
h1, h2, h3, h4, h5, h6{ white-space: initial;}
.line-border{ border-bottom: 1px solid #bfbfbf; overflow: hidden; margin-bottom: 20px;}
.i-train{ background: transparent; border: 0; color: #1d8094;}
.modal-header{ background: #d40101; border-radius: 10px 10px 0 0;}
.modal-content{ border-radius: 10px;}
.disable-chat{ background: #bfbfbf !important; color: #fff !important;}

.applying-detail p{word-break: break-word;}

/*ค้นหาประวัติ*/
.dropdown-menuJobbkk{ min-width: 100%; padding: 15px;}
.list-select{ border-bottom: 1px solid #bfbfbf; padding-bottom: 15px; margin-bottom: 15px; display: grid; grid-template-columns: 4fr 1fr; grid-template-rows: auto; grid-gap:0 10px; 
	justify-items: end;}
.list-select-work ul{ margin: 0 -10px; padding: 0; list-style: none; display: inline-block;}
.list-select-work ul li{ padding: 0 10px; float: left; margin-bottom: 5px;}
.list-select-work ul li button{ background: #337ab7; border: 1px solid #337ab7; border-radius: 4px; color: #fff; width: 100%;}
.confirmJobbkk button{ background: #d40101; border: 1px solid #d40101; color: #fff; border-radius: 4px;}

.dropdown-menuLeftRight{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 0 10px;}
.dropdown-menu-left{ border-right: 1px solid #bfbfbf; height: 250px; overflow-y: scroll;}
.dropdown-menu-right{ height: 250px; overflow-y: scroll;}
.dropdown-menu-left li a{ display: block; padding: 3px 0; text-decoration: none; color: #555;}
.dropdown-menu-left li a.active, .dropdown-menu-left li a:hover{ background: #ebebeb; padding-left: 5px;}
.dropdown-menu-right li{ display: flex; align-items: center; justify-content: space-between;}
.dropdown-menu-right li button{ background: transparent; border: 0; color: #333; font-size: var(--font16);}

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

.dropdown-menuMo{ min-width: 100%; height: auto;}
.dropdown-menuCus{ height: 250px; overflow-y: scroll; min-width: 100%;}
.dropdown-menuCus::-webkit-scrollbar, .dropdown-menu-left::-webkit-scrollbar{ width: 5px; background-color: #7D7979;}
.dropdown-menuCus::-webkit-scrollbar-track, .dropdown-menu-left::-webkit-scrollbar-track{ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}
.dropdown-menuCus::-webkit-scrollbar-thumb, .dropdown-menu-left::-webkit-scrollbar-thumb{ background-color:#7D7979;}
.dropdown-menuCusRight{ left: inherit; right: 0;}

.other ul{ margin: 0; padding: 0; list-style: none; display: flex; align-items: center; background: #fff; border: 1px solid #ccc; border-radius: 10px; padding: 5px 12px;}
.other ul li{ float: left; padding: 0 10px;}
.other ul li:first-child{ padding-left: 0;}

@media (max-width:576px){
	.other ul{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: auto; align-items: stretch; grid-gap: 10px;}
	.other ul li{ padding: 0;}
	.other ul li:first-child{ grid-column: 1/span 3;}
}

@media (max-width:480px){
	.other ul{ display: grid; grid-template-columns: 1fr;}
	.other ul li:first-child{ grid-column: 1;}
}

.selectWorkFlex{ display: flex; align-items: center;}
.selectWork5{ text-align: center;}
.selectWork5 figure img{ max-width: 150px;}
.selectWork5 figcaption{ color: #337ab7; font-size: 2rem; font-weight: bold;}

@media (max-width:576px){
	.selectWork5 figure img{ max-width: 100px;}
}

.d-flex{ display: flex; align-items: center;}
.headWork{ font-size: 2.8rem; color: #d40101;}
.technicWork{ text-align: right;}
.technicWork a{ font-size: 2rem; text-decoration: none;}
.technicWork a:hover{ color: #d40101;}

@media (max-width:768px){
	.headWork{ font-size: 2rem;}
	.technicWork{ font-size: 1.6rem;}
}

.clear-search{ text-align: right;}
.clear-search button{ width: 100%; background: transparent; border: 1px solid #ccc;; height: 34px; background: #fff; border-radius: 10px; height: 34px;}
.clear-search button:hover{ background: #333; color: #fff; border: 1px solid #333;}

.detail .panel-group{ margin-bottom: 0;}
.detail .panel-group .panel-heading{ padding: 0;}
.detail a{ width: 100%; height: 34px; background: #fff; border: 1px solid #ccc; border-radius: 10px; display: block; text-align: center; padding: 6.5px 12px; color: #555; text-decoration: none;}

.panel-group .panel-headingJobbkk{ padding: 0;}
.panel-bodyJobbkk{ padding: 0 15px;}

.search-work a{ background: #d40101; border-radius: 10px; color: #fff; display: block; text-align: center; text-decoration: none; height: 34px; padding: 6.5px 12px;}
.search-work a:hover{ background: #b90303;}

.search-work button{ border-radius: 10px; width: 100%; height: 34px; padding: 6.5px 12px; color: #fff; border: 1px solid #D40101; text-align: center;}
.search-work button:hover{ background: #b90303;}

@media (max-width:380px){
	.detail, .search-work{ width: 100%;}
}

#accordionMobile{ display: none;}

@media (max-width:768px){
	#accordionMobile{ display: block;}
	#accordionPc{ display: none;}
}

.modal-headerWork{ border-radius: 7px 7px 0 0; background: #d40101;}
.modal-headerWork h4{ color: #fff; font-size: 2rem;}
.modal-headerWork .close{ color: #fff; opacity: 0.8; font-size: 3rem; font-weight: 100;}
.modal-footerWork button{ border: 1px solid #bfbfbf; border-radius: 4px;}
.width-search{ width: 90%;}

@media (max-width: 480px){
	.jobbkk-salary-1, .jobbkk-salary-2{ width: 100%;}
	.input-group-btn{ display: inherit;}
	.input-group-btn:first-child>.btn, .input-group-btn:first-child>.dropdown-toggle{ border-top-right-radius: 10px; border-bottom-right-radius: 10px;}
	.input-group-btn:last-child>.btn, .input-group-btn:last-child>.dropdown-toggle{ border-top-left-radius: 10px; border-bottom-left-radius: 10px;}
	a.format-work-no{ border-top: 0;}
	.height-search{ height: auto;}
}

/*พื้นที่ต้องการทำงานผู้สมัคร*/
a.user-address{ display: inline-block; color: #555;}
a.user-address:hover{ color: #D40101;}

.jobbkk-vehicle .start-work, .jobbkk-vehicle .sex, .jobbkk-vehicle .car-personal{ height: auto;}
.push-job ul{ margin: 0 -15px; padding: 0; list-style: none;}
.push-job ul li{ float: left; padding: 0 15px; width: 33.3333333%; text-align: center;}
.push-job ul li a{ background: #bfbfbf; color: #555; padding: 7.5px 10px; border-radius: 10px; display: block; text-decoration: none;}
.push-job ul li a:hover{ background: #D40101; color: #ffffff;}
.panel-body-his{ padding: 0 15px}
.row-jobbkk-1{ margin-right: 0; margin-left: 0;}

/*fix banner*/
.sidebar{ height: 550px;}
.stick{ position: fixed; width: 300px; top: 120px;}
.abs{ position: absolute; bottom: 0; width: auto;}

@media (max-width: 1199px){
	.sidebar{ height: 420px; width: 240px;}
	.stick{ top: 120px;}
}

@media (max-width: 1170px){
	.stick{ top: 140px;}
}

@media (max-width: 991px){
	.sidebar{ width: 187.5px;}
}

@media (max-width: 842px){
	.stick{ top: 170px;}
}

/*4 button*/
ul.push-6{ margin: 0 -10px; padding: 0; list-style: none; display: inline-block; width: 100%;}
ul.push-6 li{ padding: 10px; float: left; width: 16.66666666666667%; text-align: center;}
ul.push-6 li a{ padding: 10px; text-decoration: none; display: block; color: #555;}
ul.push-6 li a .icon-update{ background: url(../images/search-1.png) center no-repeat;}
ul.push-6 li a .icon-history{ background: url(../images/search-2.png) center no-repeat;}
ul.push-6 li a .icon-jobfair{ background: url(../images/search-3.png) center no-repeat;}
ul.push-6 li a .icon-jobmatch{ background: url(../images/search-5.png) center no-repeat;}
ul.push-6 li a .icon-resume-qucik{ background: url(../images/search-6.png) center no-repeat;}
ul.push-6 li a .icon-hotel{ background: url(../images/search-11.png) center no-repeat;}
ul.push-6 li a .icon-food{ background: url(../images/search-12.png) center no-repeat;}
ul.push-6 li a .icon-manager{ background: url(../images/search-13.png) center no-repeat;}
ul.push-6 li a .icon-logistic{ background: url(../images/search-14.png) center no-repeat;}
ul.push-6 li a .icon-IT{ background: url(../images/search-15.png) center no-repeat;}
ul.push-6 li a .icon-industry{ background: url(../images/search-16.png) center no-repeat;}
ul.push-6 li a .icon-bank{ background: url(../images/search-17.png) center no-repeat;}
ul.push-6 li a .icon-travel{ background: url(../images/search-18.png) center no-repeat;}
ul.push-6 li a span{ position: absolute; bottom: -40px; left: 0; right: 0; font-size: 14px;}

ul.push-6 li a:hover{ color: #D40101;}
ul.push-6 li a:hover .icon-update{ background: url(../images/search-1-1.png) center no-repeat;}
ul.push-6 li a:hover .icon-history{ background: url(../images/search-2-1.png) center no-repeat;}
ul.push-6 li a:hover .icon-jobfair{ background: url(../images/search-3-1.png) center no-repeat;}
ul.push-6 li a:hover .icon-jobmatch{ background: url(../images/search-5-1.png) center no-repeat;}
ul.push-6 li a:hover .icon-resume-qucik{ background: url(../images/search-6-1.png) center no-repeat;}
ul.push-6 li a:hover .icon-hotel{ background: url(../images/search-11-11.png) center no-repeat;}
ul.push-6 li a:hover .icon-food{ background: url(../images/search-12-12.png) center no-repeat;}
ul.push-6 li a:hover .icon-manager{ background: url(../images/search-13-13.png) center no-repeat;}
ul.push-6 li a:hover .icon-logistic{ background: url(../images/search-14-14.png) center no-repeat;}
ul.push-6 li a:hover .icon-IT{ background: url(../images/search-15-15.png) center no-repeat;}
ul.push-6 li a:hover .icon-industry{ background: url(../images/search-16-16.png) center no-repeat;}
ul.push-6 li a:hover .icon-bank{ background: url(../images/search-17-17.png) center no-repeat;}
ul.push-6 li a:hover .icon-travel{ background: url(../images/search-18-18.png) center no-repeat;}

.company-select-bg{ background: #f6f3f2; border-radius: 10px;}
ul.push-6 li a.company-red{ color: #D40101;}
ul.push-6 li a .icon-update-select{ background: url(../images/search-1-1.png) center no-repeat;}
ul.push-6 li a .icon-history-select{ background: url(../images/search-2-1.png) center no-repeat;}
ul.push-6 li a .icon-jobfair-select{ background: url(../images/search-3-1.png) center no-repeat;}
ul.push-6 li a .icon-jobmatch-select{ background: url(../images/search-5-1.png) center no-repeat;}
ul.push-6 li a .icon-resume-qucik-select{ background: url(../images/search-6-1.png) center no-repeat;}
ul.push-6 li a .icon-hotel-select{ background: url(../images/search-11-11.png) center no-repeat;}
ul.push-6 li a .icon-food-select{ background: url(../images/search-12-12.png) center no-repeat;}
ul.push-6 li a .icon-manager-select{ background: url(../images/search-13-13.png) center no-repeat;}
ul.push-6 li a .icon-logistic-select{ background: url(../images/search-14-14.png) center no-repeat;}
ul.push-6 li a .icon-IT-select{ background: url(../images/search-15-15.png) center no-repeat;}
ul.push-6 li a .icon-industry-select{ background: url(../images/search-16-16.png) center no-repeat;}
ul.push-6 li a .icon-bank-select{ background: url(../images/search-17-17.png) center no-repeat;}
ul.push-6 li a .icon-travel-select{ background: url(../images/search-18-18.png) center no-repeat;}
ul.push-6 li a .icon-company, ul.push-6 li a:hover .icon-company{ position: relative; margin-bottom: 40%; padding-bottom: 40%; width: auto; background-size: contain;}
.icon-recomment{ position: absolute; right: 0; top: -15px; background: #d40101; border-radius: 4px; padding: 0 3px; color: #fff; font-size: 16px; font-size: 1.6rem; animation: icon-recomment 1s ease infinite alternate; display: inline-block;}
#iconMobile{ display: none;}

@keyframes icon-recomment {
	from { transform: scale(1);}
	to { transform:  scale(1.1);}
}

@media (max-width:1199px){
	.row-jobbkk-1{ margin: 0 15px;}
	ul.push-6{ display: flex; overflow-x: scroll;}
	ul.push-6 li{ min-width: 12%; padding-bottom: 15px; padding-left: 0;}
	ul.push-6 li a{ border-radius: 10px; border: 1px solid #bfbfbf;}
	ul.push-6 li a span{ bottom: -40px; font-size: 1.2rem;}
	ul.push-6::-webkit-scrollbar{ height: 10px; background-color: #7D7979;}
	ul.push-6::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); background-color: #F5F5F5;}
	ul.push-6::-webkit-scrollbar-thumb { background-color:#7D7979; border-radius: 20px;}
}

@media (max-width:991px){
	ul.push-6 li{ min-width: 15%;}
	ul.push-6 li a .icon-company, ul.push-6 li a:hover .icon-company{ padding-bottom: 50%; margin-bottom: 70%;}
	ul.push-6 li a span{ bottom: -50px;}
	.icon-recomment{ font-size: 10px; font-size: 1rem;}
}

@media (max-width:650px){
	ul.push-6 li{ min-width: 18%;}
}

@media (max-width:576px){
	ul.push-6 li{ min-width: 20%;}
}

@media (max-width:480px){
	ul.push-6 li{ min-width: 25%;}
}

@media (max-width:380px){
	ul.push-6 li{ min-width: 32%;}
}

/* Sweep To Right */
.hvr-sweep-to-right { display: inline-block; vertical-align: middle; -webkit-transform: perspective(1px) translateZ(0); transform: perspective(1px) translateZ(0);
	box-shadow: 0 0 1px rgba(0, 0, 0, 0); position: relative; -webkit-transition-property: color; transition-property: color; -webkit-transition-duration: 0.3s;
  	transition-duration: 0.3s;}
.hvr-sweep-to-right:before { content: ""; position: absolute; z-index: -1; top: 0; left: 0; right: 0; bottom: 0; border-radius: 10px; background: #f6f3f2;
	-webkit-transform: scaleX(0); transform: scaleX(0); -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-transition-property: transform;
	transition-property: transform; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out;
  	transition-timing-function: ease-out;}
.hvr-sweep-to-right:hover, .hvr-sweep-to-right:focus, .hvr-sweep-to-right:active {  color: #333;}
.hvr-sweep-to-right:hover:before, .hvr-sweep-to-right:focus:before, .hvr-sweep-to-right:active:before { -webkit-transform: scaleX(1); transform: scaleX(1);}

/*head ค้นหางาน */
.search-job-all{ color: #D40101; border-radius: 10px 10px 0 0; border:1px solid #BFBFBF; border-bottom: 0; overflow: hidden;}
.search-job-all ul{ margin: 0; padding: 0; list-style: none; display: flex; justify-content: space-between;}
.search-job-all ul li{ padding: 10px 15px;}
.search-job-all ul li.search-job-1{ font-size: var(--font20); }
.search-job-all ul li.search-job-2{ margin-top: 5px;}

@media (max-width:576px){
	.search-job-all ul li.search-job-2{ margin-top: 6px;}
}

/*รายละเอียด ค้นหาประวัติ*/
.list-company-default{ border: 1px solid #BFBFBF; border-bottom: 0; background: #FFFFFF; padding: 15px; position: relative;
	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;}
.list-company-default a.list-company{ display: block; text-decoration: none; margin: 0;}
.list-company-default:hover{ background: #f6f3f2;}

/*สถานะปกปิด*/
.urgent{ background: #D40101; color: #ffffff; padding: 5px; font-size: var(--fontSubText); text-align: center;}

@media (max-width:576px){
	.urgent{ padding: 0;}
}

.jobbkk-list-company-recomment, .jobbkk-list-company-recomment:hover{ background: #f6f3f2;}
.list-company-default-border{ border: 1px solid #bfbfbf;}

/*ไอคอนคนพิการ*/
.handicapped{ margin-left: 5px;}
.handicapped img{ max-width: 15px;}

/*เวลาที่อัพเดต*/
.time-company{ text-align: right;}
.time-company h6{ font-size: var(--fontText); font-family: "DB-HeaventRounded"; }

@media (max-width:576px){
	.applying-time-graph{ width: 100%;}
	.time-company{ text-align: left; margin-bottom: 0;}
}

/*รูปค้นหาประวัติ*/
.jobbkk-image-user{ padding-right: 0;}
.jobbkk-image-user img{ border: 1px solid #BFBFBF; background: #FFF; height: 150px; object-fit: scale-down; object-fit: cover; max-width: 100%; 
	object-position: 50% -5%; padding: 5px; width: 100%;}

@media (max-width:1199px){
	.jobbkk-image-user img{ height: 120px;}
}

@media (max-width:991px){
	.jobbkk-image-user img{ height: 90px;}
}

@media (max-width:767px){
	.jobbkk-image-user img{ height: 120px;}
}

@media (max-width:576px){
	.jobbkk-image-user{ width: 30%;}
	.jobbkk-applying{ width: 70%;}
	.jobbkk-image-user img{ height: 150px;}
}

@media (max-width:375px){
	.jobbkk-image-user img{ height: 120px;}
}

@media (max-width:320px){
	.jobbkk-image-user img{ height: 100px;}
}


/*รูปค้นหาประวัติกับ รายละเอียด*/
.position-head{ font-weight: bold; color: #d40101; margin-bottom: 5px;}
a.hover-detail-user{ display: block; color: #555;}
a.hover-detail-user:hover{ color: #232323;}
a.hover-detail-user:hover p{ text-decoration: underline;}

@media (max-width:576px){
	/* a.hover-detail-user{ font-size: 14px; font-size: 1.4rem;} */
	.applying-detail{ width: 100%;}
}

/*อ่านแล้ว*/
h6.read-day{ font-size: 1.2rem; font-size: 12px; color: #d40101;}

.jobbkk-group h2{ color: #D40101;}
.bg-grey-search-work{ background: #f6f3f2;}
ul.jobbkk-worktab-career{ border-bottom: 0; display: flex;}
.jobbkk-worktab-career li{ border: 0; width: 33.3333333%; text-align: center; display: inline-grid;}
.jobbkk-worktab-career li:first-child{ border-left: 0;}
.jobbkk-worktab-career li a{ color: #555;}
.jobbkk-worktab-career>li.active>a, .jobbkk-worktab-career>li.active>a:focus, .jobbkk-worktab-career>li.active>a:hover{ background: #FFFFFF; color: #D40101; 
	border: 0 transparent; border-bottom: 5px solid #D40101;}

@media (max-width: 1300px){
	.jobbkk-worktab-career li a{ font-size: 1.4rem; font-size: 14px;}
}
	
@media (max-width:991px){
	.jobbkk-worktab-career li{ min-width: inherit;}
}

/*สาขาอาชีพ*/
.jobkk-list-career ul{ margin: 20px 0; padding: 0; list-style: none; width: 100%;}
.jobkk-list-career ul li{ float: left; width: 33.3333333%; position: relative; margin-bottom: 5px;}
.jobkk-list-career ul li a{ display: block; color: #555; white-space: nowrap; 
	text-overflow: ellipsis; overflow: hidden; position: relative; z-index: 3; margin-left: 10px; padding: 5px; text-decoration: none;}
.jobkk-list-career ul li a:focus, .jobkk-list-career ul li a:active{ color: #ffffff;}
.jobkk-list-career ul li.type-hilight a:hover{ color: #ffffff; text-decoration: none;}
.jobkk-list-career li:before{ height: 100%; width: 5px; content: ''; background: transparent; display: inline-block; position: absolute;
    z-index: 2; -webkit-transition: ease-in-out all .25s; -moz-transition: ease-in-out all .25s; transition: ease-in-out all .25s;}
.jobkk-list-career li.type-hilight:before{ background: #D40101;}
.jobkk-list-career ul li.type-hilight:hover{ color: #fffff;}
.jobkk-list-career ul li.type-hilight:hover:before{ width: 99%;}

span.jobcaret{ float: right; margin-top: 7px; margin-right: 5px;}
ul.dropdown-menu-job{ margin: 0; width: 99%; border-radius: 0 0 4px 4px;}
ul.dropdown-menu-job li.list-job{ float: none; width: 100%; margin-bottom: 0; color: #555;}
ul.dropdown-menu-job li.list-job a{ margin-left: 0; padding-left: 10px; white-space: inherit;}
ul.dropdown-menu-job li.list-job a:hover{ color: #555;}

@media (max-width:991px){
	.jobkk-list-career ul li{ width: 50%;}
}

@media (max-width:576px){
	.jobkk-list-career ul li{ width: 100%; font-size: 1.2rem; font-size: 12px;}
}

ul.social-company{ margin: 0; padding: 0; list-style: none; display: inline-block; text-align: right; width: 100%;}
ul.social-company li{ display: inline;}
ul.social-company li:last-child{ padding-right: 0;}

ul.social-company li a.job-social{ border-radius: 10px; border: 1px solid var(--color-gray); background: var(--bg-white); padding: 3px 10px; 
	color: var(--color-black-gray);  text-decoration: none; text-align: center; display: inline-block; 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;}
ul.social-company li a.job-social:hover, ul.social-company li button.jobbkk-applying-work:hover{ background: var(--bg-gray-young); color: var(--color-red); 
	border: 1px solid #ebebeb;}
ul.social-company li a.jobbkk-applying-work{ background:var(--bg-red); color: var(--color-white); border: 1px solid var(--bg-red);}
ul.social-company li a.jobbkk-no-interview, ul.social-company li button.jobbkk-no-interview:hover{ color:var(--color-gray);}

ul.social-company li button.job-social{ border-radius: 10px; border: 1px solid var(--color-gray); background: var(--bg-white); padding: 3px 10px; 
	color: var(--color-black-gray);  text-decoration: none; text-align: center; display: inline-block; 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;}
ul.social-company li button.job-social:hover, ul.social-company li button.jobbkk-applying-work:hover{ background: var(--bg-gray-young); color: var(--color-red); 
	border: 1px solid #ebebeb;}

ul.social-company li button.jobbkk-applying-work{ 
	background:var(--bg-red); color: var(--color-white); border: 1px solid var(--bg-red);
}

ul.social-company li button.jobbkk-no-interview, ul.social-company li button.jobbkk-no-interview:hover{ color:var(--color-gray);}

@media (max-width:576px){
	.list-company h6, ul.social-company li a, ul.social-company li button{ font-size: var(--font14);}
}

.jobbkk-register-social{ text-align: right; margin-top: 5px;}
.jobbkk-share-social ul{ list-style: none; padding: 0;}
.jobbkk-share-social ul li{ display: inline-block; padding: 0 10px 5px;}
.jobbkk-share-social ul li a{ display: block; width: 33px; height: 33px;}
.jobbkk-share-social ul li a.icon-fb{ background: url(../images/social-1-1.png) no-repeat; background-size: 100%;}
.jobbkk-share-social ul li a.icon-youtube{ background: url(../images/social-3-3.png) no-repeat; background-size: 100%;}
.jobbkk-share-social ul li a.icon-line{ background: url(../images/social-6-6.png) no-repeat; background-size: 100%;}
.jobbkk-share-social ul li a.icon-twis{ background: url(../images/social-2-2.png) no-repeat; background-size: 100%;}
.jobbkk-share-social ul li a.icon-skype{ background: url(../images/social-7-7.png) no-repeat; background-size: 100%;}
.jobbkk-share-social ul li a.icon-intragram{ background: url(../images/social-4-4.png) no-repeat; background-size: 100%;}
.jobbkk-share-social ul li a.icon-copylink{ background: url(../images/social-8-8.png) no-repeat; background-size: 100%;}

@media (max-width:768px){
	.jobbkk-register-social{ text-align: center; margin-bottom: 0;}
	.jobbkk-register{ text-align: center;}
	.jobbkk-share-social ul{ text-align: center;}
}

.applying-hilight{ color: #D40101;}

@media (max-width:320px){
	.job-right-page{ width: 100%;}
}

.read-recomment{ background: #D40101; color: #ffffff; padding: 5px 10px; border-radius: 10px; text-decoration: none !important; display: inline-block;}
.read-recomment:hover{ background: #ebebeb; color: #D40101;}

@media (max-width:576px){
	.read-recomment{ font-size: 1.2rem; font-size: 12px;}
}
a.hover-work{ color: #555;}
a.position{ color: #D40101;}
div.box3{ height: 50px;}
div.box4{ height: 60px;}

.recomment{ background: #f47920; padding: 0 5px; font-size: 1.2rem; font-size: 12px; color: #ffffff;}
.work-com{ margin-right: 5px;}
.work-com, .recomment{ float: left;}

/*ปุ่มพวก italk*/
.btn-serach-history{ text-align: right;}
.btn-serach-history ul{ margin: 0 -5px; padding: 0; list-style: none; display: inline-block;}
.btn-serach-history ul li{ float: left; padding: 5px;}
.btn-serach-history ul li button{ color: #D40101; background: #ffffff; border: 1px solid #d40101; border-radius: 4px; padding: 5px; 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;}
.btn-serach-history ul li button:hover{ background: #D40101; color: #ffffff;}

.btn-serach-history ul li a{ color: #D40101; background: #ffffff; border: 1px solid #d40101; border-radius: 4px; padding: 5px; 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;}
.btn-serach-history ul li a:hover{ background: #D40101; color: #ffffff;}

@media (max-width:576px){
	.btn-serach-history ul li{ width: 33.3333333%; display: inline-grid; font-size: 1.2rem; font-size: 12px;}
	.btn-serach-history ul li a{ padding: 5px; display: block;}
}

@media (max-width:380px){
	.btn-serach-history ul li{ width: 50%;}
}

@media print{
	.print-none, .btn-serach-history{ display: none;}
}

/*ความสมบูรณ์ของใบสมัครงาน กับ อัพเดตล่าสุด*/
.ultimate-work{ text-align: center; color: #1d8094;}
.update-data{ font-size: 1.2rem; font-size: 12px; text-align: center; color: #D40101; margin-bottom: 10px;}

@media print{
	.update-data{ display: none;}
	.ultimate-work{ color: #1d8094 !important; font-size: 12px !important;}
}

/*เปลี่ยนภาษาเรซูเม่*/
.resume-lang{ text-align: right;}
.resume-lang ul{ margin: 0 -10px; padding: 0; list-style: none; display: inline-block; overflow: hidden;}
.resume-lang ul li{ float: left; padding: 0 10px;}
.resume-lang ul li button{ background: #D40101; color: #ffffff; border-radius: 4px; padding: 3px 5px; border: 1px solid #D40101; 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;}
.resume-lang ul li:last-child button{ background: #ffffff; color: #D40101;}
.resume-lang ul li button:hover{ background: #ebebeb; color: #d40101; border: 1px solid #ebebeb;}

@media (max-width:991px){
	.resume-lang{ text-align: center; margin-bottom: 10px;}
}

@media (max-width:576px){
	.resume-lang ul li{ font-size: 1.2rem; font-size: 12px;}
}

@media (max-width:380px){
	.resume-lang ul{ display: block;}
	.resume-lang ul li{ width: 50%;}
	.resume-lang ul li button{ width: 100%;}
}

@media (max-width:296px){
	.resume-lang ul li{ width: 100%; margin-bottom: 10px;}
}

@media print{
	.resume-lang{ display: none;}
}

/*แนบไฟล์*/
.vdo-file{ margin-top: 10px;}
.vdo-file ul{ margin: 0 -5px; padding: 0; list-style: none; overflow: hidden;}
.vdo-file ul li{ float: left; width: 25%; padding: 0 5px; font-size: 1.2rem; font-size: 12px;}
.vdo-file ul li button{ background: #f47920; color: #ffffff; width: 100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; 
	border-radius: 4px; border: 1px solid #f47920; 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;}
.vdo-file ul li button:hover{ background: #ebebeb; color: #d40101; border: 1px solid #ebebeb;}

@media print{
	.vdo-file{ display: none;}
}

@media (max-width:1199px){
	.vdo-file ul li{ width: 50%; margin-bottom: 10px;}
}

@media (max-width:991px){
	.vdo-file ul li{ width: 25%;}
}

@media (max-width:576px){
	.vdo-file ul li{ width: 50%;}
}

/*ส่งข้อความ*/
.form-right{ text-align: right;}
.jobbkk-form-control{ margin-top: -5px;}
textarea.jobbkk-form-control-area{ height: 100px;}
.text-sms{ color: #D40101; font-size: 1.2rem; font-size: 12px;}
.group-addon-cus{ top: -5px; padding: 8px 12px; position: relative;}
.send-message{ margin: 20px 0; text-align: center;}
.send-message button{ border-radius: 4px; padding: 5px 10px; background: #D40101; color: #ffffff; border: 1px solid #D40101; 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;}
.send-message button:hover{ background: #ebebeb; color: #d40101; border: 1px solid #ebebeb;}

@media (max-width:767px){
	.form-right{ text-align: left;}
}

a.clicl-status{ color: #0F6FC9;}
a.clicl-status:hover{ color: #d40101;}
.margin-top-0{ margin-top: 5px;}
.close-all{ background: #d40101; margin-bottom: 5px; border-radius: 10px; text-align: center;}
.close-all a{ color: #fff; padding: 5px 10px;}
.no-left{ padding-left: 0;}

@media print{
	a.clicl-status, .close-all{ display: none;}
	.no-left{ padding-left: 15px;}
	.select-1{ width: 10% !important;}
	.select-2{ width: 80% !important;}
	
}

@media (max-width:991px){
	.p-left{ padding-left: 0 !important;}
}

@media (max-width:576px){
	.select-1{ width: 10%;}
	.select-2{ width: 90%;}
}

@media (max-width:480px){
	.select-1{ width: 15%;}
	.select-2{ width: 85%;}
}

/*ใบสมัครงานโดยผู้สมัคร*/
.position-work-work{ margin-top: 5px; padding-right: 0;}
.box-position-work-work{ padding-left: 0;}
.block-day-time{ margin-bottom: 30px;}
.form-control.form-control-day-time{ width: 100%; background: #fff; padding-left: 15px;}
.bootstrap-datetimepicker-widget{ width: 100% !important; overflow-x: scroll; bottom: 0;}
.jobbkk-form-control-1{ margin-top: 0;}

@media (max-width:991px){
	.position-work-work{ padding-right: 15px;}
	.box-position-work-work{ padding-left: 15px;}
}

/*ร้องเรียน ป็อปอัพ*/
.block-report ul{ margin: 0 -10px; padding: 0; list-style: none;}
.block-report ul li{ padding: 0 10px; margin-bottom: 5px;}
.block-report ul li button{ background: transparent; border: 0; color: #555; display: block; width: 100%; 
	border-radius: 10px; padding: 5px 10px; text-align: right;}
.block-report ul li button:hover{ background: #ebebeb; border: 0; color: #555;}
.block-report ul li button.active{ background: #bfbfbf; color: #fff;}

@media (max-width:767px){
	.block-report ul li button{ text-align: left;}
}

@media (max-width:576px){
	.block-report ul li, h6 b{ font-size: 12px; font-size: 1.2rem;}
	.name-company{ margin-bottom: 0 !important;}
}

textarea.text-interview-area{ width: 100%; padding: 10px; border-radius: 10px; height: 150px;}
.bg-whtie-resume{ background: #fff; overflow: hidden; margin-bottom: 20px; border-radius: 0 0 10px 10px; padding: 15px;}
p.no-eng-resume{ font-size: 24px; font-size: 2.4rem; color: #555; text-align: center;}
.goto-resume-thai{ margin-bottom: 20px; text-align: center;}
.goto-resume-thai a{ background: #d40101; color: #fff; border-radius: 10px; padding: 10px 15px; display: inline-block; 
	text-decoration: none;}
.goto-resume-thai a:hover{ background: #ebebeb; color: #d40101;}

@media (max-width:576px){
	p.no-eng-resume{ font-size: 16px; font-size: 1.6rem;}
}

/*กราฟวงกลมตรงโปรไฟล์*/
.box-circle{ width: auto; position: relative; top:0; right: 0; left: 65px; z-index: 99;}
.box-circle .chart{ position: relative; width: 80px; height: 80px; margin: 0 auto; text-align: center; font-size: var(--font18); line-height: 3; color: #555;
	background: #ffffff; border-radius: 50%; 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;}
.box-circle .chart:hover{  -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}
.box-circle canvas{ position: absolute; top: 0; left: 0; right: 0;}

.applying-confirm{ padding-right: 0;}
.applying-confirm ul{ margin: 0; padding: 0; list-style: none;}
.applying-confirm ul li{ margin-bottom: 5px;}

@media (max-width:1199px){
	.box-circle{ left: 40px;}
}

@media (max-width:991px){
	.box-circle{ left: 20px;}
}

@media (max-width:767px){
	.apply-graph{ display: none;}
}

/*การยืนยันมือถือ เมล*/
.btn-on-green, .btn-off-gray{ 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.btn-on-green{ line-height: 1.5;}
a.btn-off-gray{ line-height: 1.5;}
.btn-on-green{ background: #2FA71D; border-radius: 50%; width: 35px; height: 35px; padding: 5px; line-height: 0;}
.btn-off-gray{ background: #bfbfbf; border-radius: 50%; width: 35px; height: 35px; padding: 5px; line-height: 0;}
.btn-on-green:hover{ background: #178307;}
.btn-off-gray:hover{ background: #555;}

.size-over-mobile{ font-size: 27px; color: #fff;}
.size-over-mail{ font-size: 18px; color: #fff;}
.size-over-eng{ font-size: 18px; color: #fff; font-weight: 400;}
.popover.right{ 
  /* width: 500px; font-family: 'Prompt-Regular';
  src: url('../fonts/Prompt-Regular.eot?#iefix') format('embedded-opentype'),  url('../fonts/Prompt-Regular.woff') format('woff'), url('../fonts/Prompt-Regular.ttf')  format('truetype'), url('../fonts/Prompt-Regular.svg#Prompt-Regular') format('svg');
  font-weight: normal;
  font-style: normal; */
  font-family: "DB-HeaventRounded";
  font-size: var(--fontText) !important;
  font-weight: normal;
  font-style: normal;
  width: 500px;
}
.popover-content{ color: #555;}

.in-detail ul.ul-detail{ margin: 0 -10px; margin-bottom: 10px; padding: 0; list-style: none; overflow: hidden;}
.in-detail ul.ul-detail li.li-detail{ float: left; padding: 0 10px; margin-left: 10px; text-align: center;}
.in-detail ul.ul-detail li.sp-detail{ margin-top: 8px;}
.in-detail ul.ul-detail li.bt-gray{ background: #bfbfbf; color: #fff; border-radius: 50%; vertical-align: middle; 
	width: 44px; height: 44px; padding: 10px;}
.in-detail ul.ul-detail li.bt-green{ background: #2FA71D; color: #fff; border-radius: 50%; vertical-align: middle; 
	width: 44px; height: 44px; padding: 10px;}
.in-detail ul.ul-detail li.mobile-pad{ padding: 3px;}

@media (max-width:1199px){
	.btn-on-green{ width: 30px; height: 30px;}
	.btn-off-gray{ width: 30px; height: 30px;}
	.size-over-mobile{ font-size: 20px;}
	.size-over-mail{ font-size: 15px;}
	.size-over-eng{ font-size: 15px;}
	.in-detail ul.ul-detail li.li-detail.size-over-mobile{ font-size: 30px;}
	.in-detail ul.ul-detail li.li-detail.size-over-mail{ font-size: 18px;}
	.in-detail ul.ul-detail li.li-detail span.size-over-eng{ font-size: 18px;}
}

@media (max-width:991px){
	.btn-on-green{ width: 22px; height: 22px; padding: 4px;}
	.btn-off-gray{ width: 22px; height: 22px; padding: 4px;}
	.size-over-mobile{ font-size: 15px;}
	.size-over-mail{ font-size: 11px;}
	.size-over-eng{ font-size: 11px}
}

@media (max-width:767px){
	.applying-confirm{ display: none;}
}

.popover-title{ position: relative; background: #2FA71D; color: #fff;}
.popover-title img{ position: absolute; top: -40px; right: 0; max-width: 70px;}
.popover{ z-index: 99;}
.popover-markup { text-align:center;}
.popover-markup .popover-title { margin: 0;}
.popover-markup .popover-content1 { padding: 9px 14px;}
.popover-markup .popover-content { padding: 0px;}

.ultimate-resume{ text-align: right; margin-top: 10px;}
.ultimate-resume h6{ font-size: var(--font14); font-family: "DB-HeaventRounded"; }

@media (max-width:767px){
	.ultimate-resume{ display: none;}
}

.has-feedback .form-control{ padding-right: 12px;}
.dropdown-menu li label{ padding: 3px 10px; font-weight: 100;}

.icon-resume, .text-resume{ text-align: right;}
.icon-resume img{ max-width: 70px;}

@media (max-width:768px){
	.icon-resume, .text-resume{ display: none;}
}

.align-item{ display: inline-flex; align-items: center;}

/* งานทั้งหมด งานเด่น */
.premiumGrid, .rightBigGrid{ display: grid; grid-template-columns: 1fr; grid-template-rows: auto; grid-gap: 15px 0; margin-bottom: var(--margin-bottom20);}
.bgPageSearchWork{ background: var(--bg-gray-young); padding: 10px; border-radius: 10px;}
.headPageWork{ display: flex; flex-direction: column; margin-bottom: var(--margin-bottom20);}
.headPageWork h2{ font-size: var(--font18); color: var(--color-black-gray); border-bottom: 1px solid #bfbfbf; padding-bottom: 5px; margin-bottom: var(--margin-bottom10);}
/* .headPageWork span{ color: var(--color-red); font-size: var(--font20);} */
.headPageWork ul{ margin: 0; padding: 0; list-style: none;}
.headPageWork ul li span{ font-size: var(--font14);}
.headPageWork ul li a{ display: block; padding: 5px; color: var(--color-black-gray); text-decoration: none;}
.headPageWork ul li a:hover{ background: var(--bg-gray); margin-left: 5px;}
.headPageWork ul li a.active{ background: var(--bg-gray); margin-left: 5px;}

@media (max-width:768px){
	.searchFlex{ display: flex; flex-direction: column;}
	.orderFlex2{ order: 1; margin-bottom: var(--margin-bottom20);}
	.orderFlex1{ order: 2;}
	.premiumGrid{ grid-template-columns: 1fr 1fr; grid-gap: 0 15px;}
	.rightBigGrid{ display: grid; grid-template-columns: 80% 80%; grid-template-rows: auto; grid-gap: 15px; overflow-x: scroll; padding-bottom: 10px;}
	.headPageWork ul{ display: grid; grid-template-columns: repeat(10, 30%); grid-template-rows: auto; grid-gap: 15px; overflow-x: scroll; padding-bottom: 10px;}
	.headPageWork ul li{ border-right: 1px solid #bfbfbf;}
	.headPageWork ul li:last-child, .headPageWork ul li:nth-child(10){ border-right: 0;}
	.headPageWork ul li a:hover{ margin-left: 0;}
	.headPageWork ul li a.active{ margin-left: 0;}
}

@media (max-width:576px){
	.headPageWork ul{ grid-template-columns: repeat(10, 40%);}
}

@media (max-width:480px){
	.headPageWork ul{ grid-template-columns: repeat(10, 44%);}
}

@media (max-width:380px){
	.headPageWork ul{ grid-template-columns: repeat(10, 54%);}
}

.flexHistory{ display: flex; justify-content: space-between; align-items: center;}
.breadcrumb{ background: transparent; padding: 0;}
.textSearchHistory{ font-size: var(--font32); color: var(--color-black-gray);}

.readMore{ text-align: right;}
.readMore a{ display: inline-block; text-decoration: none; background: var(--bg-red); color: var(--color-white); border-radius: 4px; padding: 10px; font-size: var(--font14);}
.readMore a:hover{ background: var(--bg-dark-red);}

/* hot career */
.bgHotCareer{ background: var(--bg-gray-young); padding: 15px;}
.hotCareer{ margin-bottom: var(--margin-bottom40);}
.hotCareerBottom{ margin-bottom: var(--margin-bottom20);}
.hotCareerFlex{ display: flex; list-style: none; margin: 0; padding: 0; grid-gap: 15px; overflow-x: scroll; padding: 10px 0; margin-bottom: var(--margin-bottom10);}
.hotCareerFlex li{ position: relative; flex: 1 0 120px;}
.hotCareerFlex li a{ display: flex; align-items: center; justify-content: center; text-decoration: none;}
.hotCareerFlex li a:hover{ transform: scale(1.03);}
.hotCareerFlex li img{ margin-bottom: var(--margin-bottom5); width: auto;}
.hotCareerFlex div{ display: flex; align-items: center; flex-direction: column; justify-content: center;}
.hotCareerFlex div p{ color: var(--color-black-gray); text-align: center;}
.hotCareerFlex div p.positionWork{ color: var(--color-red); font-size: var(--font14);}
.hotCareerCut{ height: 60px;}

.bookmark{ position: absolute; top: 0; left: 15px;}
.bookmark img{ max-width: 25px;}

.hotCareerFlex::-webkit-scrollbar{ height: 10px; background: #fff; border-radius: 10px;}
.hotCareerFlex::-webkit-scrollbar-track{ box-shadow: inset 0 0 5px #ebebeb; border-radius: 10px;}
.hotCareerFlex::-webkit-scrollbar-thumb{ background: #bfbfbf; border-radius: 10px;}
.hotCareerFlex::-webkit-scrollbar-thumb:hover{ background: #333;}

.controlScroll{ display: flex; justify-content: center;}
.controlScroll button{ margin: 0 15px;}
#buttonScrollLeft, #buttonScrollRight{ background: var(--bg-red); color: var(--color-white); border: 1px solid var(--bg-dark-red); border-radius: 4px; padding: 5px 15px;}
.controlScroll #buttonScrollLeft:hover, .controlScroll #buttonScrollRight:hover{ background: var(--bg-dark-red);}

@media (max-width:480px){
	.bookmark{ left: 10px;}
}

@media (max-width:380px){
	.bookmark{ left: 0;}
}

.top-page img, .premiumBanner img{ border: 1px solid var(--bg-gray);}