.color-info{color: #1d8094;}
.margin-top-1{ margin-top: 10px;}
.border-bottom-grey-1{ border-bottom: 1px solid #BFBFBF;}
label{ font-weight: normal;}
.form-control{ font-size: 1.2rem; font-size: 14px;}
.margin-bottom-5{ margin-bottom: 5px;}
.modal-header .close-modal{ font-size: 40px; margin-top: 0;}
.close-modal{ line-height: 0.5; opacity: 0.5;}

/*ปุ่มสร้างเรซูเม่*/
.creater-resume{ text-align: center;}
.creater-resume ul{ margin: 0 -10px; padding: 0; display: inline-block; list-style: none;}
.creater-resume ul li{ float: left; padding: 0 10px;}
.creater-resume ul li button{ background: #D40101; color: #ffffff; padding: 10px 15px; border-radius: 10px; 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;}
.creater-resume ul li:last-child button{ background: #ffffff; color: #D40101;}
.creater-resume ul li button:hover{ color: #D40101; background: #ebebeb; border: 1px solid #ebebeb;}

@media (max-width:576px){
	.creater-resume ul{ font-size: 1.2rem; font-size: 12px; width: 100%; display: flex; margin: 0;}
	.creater-resume ul li{ width: 50%; display: inline-grid;}
	.creater-resume ul li button{ width: 100%;}
}

@media (max-width:576px){
	.name-company h4{ font-size: 1.2rem; font-size: 12px;}
	label.original{ font-size: 1.2rem; font-size: 12px;}
}

/*เพิ่ม resume*/
.jobbkk-announce-profile ul{ margin: 0 -10px; padding: 0; list-style: none;}
.jobbkk-announce-profile ul li{ float: left; text-align: center; width: 20%; padding: 0 10px;}
.jobbkk-announce-profile ul li a{ display: block; padding: 10px 0 0; text-decoration: none;}
.pic-text{ margin-bottom: 10px;}
.pic-text p{ color: #555;}
.pic-text p.jobbk-text-blue{ color: #0F6FC9;}

@media (max-width:991px){
	.jobbkk-announce-profile ul{ display: flex; white-space: nowrap; overflow-x: auto; margin: 0;}
	.jobbkk-announce-profile ul li{ min-width: 40%;}
}

@media (max-width:767px){
	.jobbkk-announce-profile ul li{ min-width: 28%;}
}

@media (max-width:576px){
	.jobbkk-announce-profile ul li{ min-width: 40%; font-size: 1.2rem; font-size: 12px;}
}

.text-green{ color: #00A403;}

.jobbkk-profile-owner{ font-size: 1.2rem; font-size: 12px;}
ul.jobbkk.profile-owner li{ margin-top: 7px;}
ul.jobbkk.profile-owner li:first-child{ margin-top: -5px;}
ul.jobbkk.applicant li.dropdown-flag.profile-owner-flag{ margin-top: 7px;}

.jobbkk-link-text ul{ margin: 0; padding: 0; list-style: none; overflow: hidden;}
.jobbkk-link-text ul li{ float: left; padding: 5px;}
.jobbkk-link-text ul li:first-child{ padding-left: 0;}
.jobbkk-link-text ul li a{ color: #555; text-decoration: none;}
.jobbkk-link-text ul li a.text-red{ color: #D40101;}
.jobbkk-link-text ul li a:hover{ color: #D40101;}

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

.jobbkk-border-radius{ border-radius: 10px;}
.jobbkk-border-grey{ border: 1px solid #bfbfbf; position: relative;}
.jobbkk-border-bottom-grey{ border-bottom: 1px solid #bfbfbf; overflow: hidden;}
.text-data-company{ position: relative; background: #f6f3f2; border-radius: 10px 10px 0 0;}
.text-data-company ul{ margin: 0; padding: 0; list-style: none; display: flex;}
.text-data-company ul li{ float: left; padding: 10px 0; color: #555; width: 50%; display: inline-grid;}
.text-data-company ul li.select-pic{ text-align: right; display: inline-block;}
.text-data-company ul li.select-pic button{ background: #f47920; border: 1px solid #f47920; border-radius: 4px; color: #ffffff; padding: 3px; 
	font-size: 1.2rem; font-size: 12px; 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;}
.text-data-company ul li.select-pic button:hover{ background: #d40101; border: 1px solid #d40101;}
.text-data-company ul li a{ background: #D40101; color: #ffffff; padding: 2px 10px; border-radius: 10px; text-decoration: none;}
.text-data-company ul li a:hover{ background: #ebebeb; color: #D40101;}

.alert-note h6{ font-size: 1rem; font-size: 10px;}

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

.pic-company{ text-align: center;}
.pic-company img{ position: relative; max-width: 150px; object-fit: scale-down;}

.change-pic a{ color: #555;}
.change-pic a:hover{ color: #D40101;}

@media (max-width:576px){
	.pic-company{ width: 30%;}
}

.pic-company-cc{ padding: 10px;}
.pic-company-cc img{ max-width: 100%; height: 250px; object-position: 50% -5%; object-fit: cover;}

@media (max-width:767px){
	.pic-company-cc img{ max-width: 200px; border: 1px solid #bfbfbf; padding: 10px; border-radius: 10px;}
	.jobbkk-none{ border: 0;}
}

@media (max-width:320px){
	.pic-company-cc{ padding: 0;}
}

.data-adress h6{ margin-bottom: 5px;}
.data-adress p{ font-size: 1.2rem; font-size: 12px;}

@media (max-width:576px){
	.data-adress{ width: 70%;}
	.data-adress h6{ font-size: 1.2rem; font-size: 12px;}
}

.see-profile{ text-align: center;}
.see-profile a{ color: #ffffff; background: #D40101; padding: 5px 50px; border-radius: 10px; text-decoration: none;}
.see-profile a:hover{ background: #ebebeb; color: #D40101;}

@media (max-width:576px){
	.see-profile a{ font-size: 1.2rem; font-size: 12px;  text-align: center;}
}

@media (max-width:320px){
	.see-profile a{ display: block; padding: 5px 0;}
}

.see-profile-1 a{ display: block;}

@media (max-width:767px){
	.see-profile-1 a{ display: inline-block; padding: 5px 70px;}
}

@media (max-width:576px){
	.see-profile-1 a{ font-size: 1.2rem; font-size: 12px;  text-align: center;}
}

@media (max-width:320px){
	.see-profile-1 a{ display: block; padding: 5px 0;}
}

/* menu dashboard pc*/
.nav-side-menu { overflow: auto; background-color: #ffffff; height: 100%; position: relative; color: #555;}
.nav-side-menu .toggle-btn { display: none;}
.nav-side-menu ul, .nav-side-menu li { list-style: none; padding: 0px; margin: 0px; cursor: pointer;}
.nav-side-menu ul :not(collapsed) .arrow:before, .nav-side-menu li :not(collapsed) .arrow:before { font-family: FontAwesome; content: "\f078"; 
	display: inline-block; padding-left: 10px; padding-right: 10px; vertical-align: middle; float: right;}
.nav-side-menu ul .active, .nav-side-menu li .active { border-left: 3px solid #ffffff; background-color: #ffffff;}
.nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active { color: #555;}
.nav-side-menu ul .sub-menu li, .nav-side-menu li .sub-menu li { background-color: #ffffff; border: none; border-bottom: 1px solid #ebebeb; margin-left: 0px;}
.nav-side-menu ul .sub-menu li:hover, .nav-side-menu li .sub-menu li:hover { background-color: #ebebeb;}
.nav-side-menu ul .sub-menu li:before, .nav-side-menu li .sub-menu li:before { font-family: FontAwesome; content: "\f105"; display: inline-block; 
	padding-left: 10px; padding-right: 10px; vertical-align: middle;}
.nav-side-menu li { padding: 10px 0; padding-left: 0px; border-left: 3px solid #ffffff;}
.nav-side-menu li a { text-decoration: none; color: #555;}
.nav-side-menu li a i { padding-left: 10px; width: 20px; padding-right: 20px;}
.nav-side-menu li:hover { border-left: 3px solid #d40101; background-color: #ebebeb; -webkit-transition: all 1s ease; -moz-transition: all 1s ease;
  	-o-transition: all 1s ease;-ms-transition: all 1s ease; transition: all 1s ease;}
ul.job-sub-menu li{ padding: 10px 0;}

.dashboard-job{ display: none;}
.dashboard-new, .dashboard-soon{ background: #f47920; padding: 1px 3px; color: #ffffff; font-size: 12px; border-radius: 4px;}
ul.menu-dashboard li a img{ max-width: 25px; width: 15%; margin-right: 10px;}

@media (max-width: 767px) {
  	.nav-side-menu { position: relative; width: 100%; margin-bottom: 10px;}
	.bg-side-menu{ background: #ebebeb;}
  	.nav-side-menu .toggle-btn { display: block; cursor: pointer; position: absolute; right: 10px; top: 10px; z-index: 10 !important; padding: 3px; 
	  background-color: #ffffff; color: #555; width: 40px; text-align: center; border-radius: 4px;}
	.dashboard-job{ display: block;}
	.dashboard-job h3{ padding: 12px 10px;}
}

@media (min-width: 767px) {
  .nav-side-menu .menu-list .menu-content{ display: block;}
}

@media (max-width: 576px) {
	.dashboard-job h3{ padding: 14px 10px;}
}

.contact-sale, .pic-sale{ text-align: center;}
.pic-sale img{ max-width: 150px; border-radius: 100%;}
.text-sale ul{ margin: 0; padding: 0; list-style: none;}
.text-sale ul li{ margin-bottom: 5px;}
.text-sale ul li:first-child{ font-size: 1.6rem; font-size: 16px;}
.text-sale img{ max-width: 20px;}
.paymoney-click ul{ margin: 0; padding: 0; list-style: none;}
.paymoney-click ul li a{ color: #555; text-decoration: none;}
.paymoney-click ul li a span{ color: #D40101;}
.paymoney-click ul li a:hover{ color: #D40101;}

.welcome ul{ margin: 0; padding: 0; list-style: none; margin-bottom: 5px; overflow: hidden;}
.welcome ul li{ float: left; font-size: 1.8rem; font-size: 18px;}
.welcome ul li:last-child{ float: right; text-align: right; font-size: 1.4rem; font-size: 14px;}
.welcome ul li span{ color: #D40101;}

@media (max-width:576px){
	.welcome ul li:last-child{ font-size: 1.2rem; font-size: 12px;}
	.welcome ul li, .welcome ul li span{ font-size: 1.6rem; font-size: 16px;}
}

@media (max-width:320px){
	.jobbkk-announce-profile ul li{ min-width: 65%;}
}

.bg-profile{ background: #ebebeb; overflow: hidden; border-radius: 10px 10px 0 0;}
.bg-tone-grey{ background: #f6f3f2; overflow: hidden;}

@media (max-width:991px){
	.jobbkk-pack-user h3{ font-size: 1.8rem; font-size: 18px;}
}

.new-packages-1 ul, .new-promotion-1 ul, .new-packages-2 ul, .new-promotion-2 ul, .additional-services-1 ul, .additional-services-2 ul, .order ul, .easy-sms-1 ul, 
.easy-sms-2 ul{ margin: 0; padding: 0; list-style: none;}
.new-packages-1 ul li, .new-promotion-1 ul li, .additional-services-1 ul li, .additional-services-2 ul li{ margin-bottom: 5px;}
.additional-services-1 ul li:first-child, .easy-sms-1 ul li:first-child{ color: #0F6FC9;}
.order{ margin-top: 10px; text-align: right;}
.order ul li a{ background: #D40101; padding: 5px 10px; color: #ffffff; border-radius: 10px; text-decoration: none;}
.order ul li a:hover{ background: #ebebeb; color: #D40101;}

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

.icon-pack-user{ margin-top: 20px; padding: 0 15px; width: 100%; overflow: hidden;}
.icon-pack-user a{ display: block; color: #555;}
.icon-pack-user a:hover{ color: #D40101;}
.icon-pack-user-1 .icon-pack-user-font{ font-size: 3rem; font-size: 30px; color: #0F6FC9;}
.icon-pack-user-2 ul{ margin: 0; padding: 0; list-style: none;}
.icon-pack-user-2 ul li:first-child{ color: #0F6FC9;}
.icon-new{ background: #D40101; padding: 0 5px; color: #ffffff; border-radius: 4px;}

@media (max-width:767px){
	.icon-pack-user-2{ padding-left: 15px;}
}

@media (max-width:480px){
	.icon-pack-user-1{ width: 10%;}
	.icon-pack-user-2{ width: 90%;}
}

@media (max-width:380px){
	.icon-pack-user-1{ width: 15%;}
	.icon-pack-user-2{ width: 75%;}
}

ul.alert-work{ margin: 0; padding: 0; list-style: none;}
ul.alert-work li.alert-work-1{ float: left; font-size: 1.8rem; font-size: 18px;}
ul.alert-work li.alert-work-1:first-child{ width: 80%;}
ul.alert-work li.alert-work-1:last-child{ width: 20%; text-align: right; font-size: 1.2rem; font-size: 12px;}
ul.alert-work li a.alert-work-2{ text-decoration: none; color: #555; display: inline-block; background: #ebebeb; border-radius: 4px; padding: 3px 6px; color: #555;}
ul.alert-work li ul.dropdown-menu{ min-width: auto; font-size: 1.2rem; font-size: 12px; right: 0; left: 0;}
ul.alert-work li ul.dropdown-menu li a{ padding: 3px 10px; text-align: left;}
.dropdown-menu>li>a{ white-space: inherit;}

.text-form-select{ color: #9e9e9e;}
.text-form-select option{ color: #555;}
.jobbkk-post-job ul{  margin: 0; padding: 0; list-style: none; display: flex;}
.jobbkk-post-job ul li{ width: 50%; float: left; text-align: center; padding: 10px; color: #555; display: inline-grid;}
.jobbkk-post-job ul li.line-red{ border-bottom: 5px solid #D40101; background: #f6f3f2;}

.jobbkk-form-control{ padding-left: 10px}
textarea.form-control.jobbkk-textarea{ height: 100px;}

/*select2*/
.select2-selection__choice__remove {display: none !important;}
.select2-container--default .select2-selection--multiple{ border-radius: 10px; border: 1px solid #ccc;}
.select2-container--default.select2-container--focus .select2-selection--multiple{ border: 1px solid #ccc;}
button#all-branch, button#clear-branch{ font-size: 1.4rem; font-size: 14px;}
.checkbox input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio]{margin-left: 0;}
.checkbox, .radio{ margin-top: 0; margin-bottom: 0;}

@media (max-width:991px){
	.time-work{ margin-bottom: 10px;}
}

.push-google a{ border: 1px solid #D40101; color: #D40101; border-radius: 4px; padding: 3px 10px; text-decoration: none;}
.push-google a:hover{ background: #D40101; color: #ffffff;}

.detail-service{ background: #f7fcfd; border-radius: 10px; border: 1px solid #1d8094; padding: 10.5px 10px; max-height: 100px; 
	overflow-y: auto;}
.detail-service h6{ color: #1d8094;}

@media (max-width:991px){
	.detail-service{ margin-top: 0;}
}

@media (max-width:576px){
	.head-form-100{ width: 100%;}
	.head-form-100.head-form-bottom{ margin-bottom: 10px;}
	h6, .text-form-select, .jobbkk-textarea, span.text-12{ font-size: 1.2rem; font-size: 12px;}
}

.jobbkk-save{ text-align: center;}
.jobbkk-save a{ display: inline-block; padding: 5px 10px; background: #D40101; color: #ffffff; border-radius: 10px; text-decoration: none; border: 1px solid #D40101;}
.jobbkk-save a:hover{ border: 1px solid #ebebeb; color: #D40101; background: #ebebeb;}

@media (max-width:576px){
	.jobbkk-save a{ font-size: 1.2rem; font-size: 12px; border-radius: 4px;}
}

/*calendar*/
.form-control-date{ padding-left: 10px;}
.input-group.jobbkk-input-group{ position: relative; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-align: stretch; 
	align-items: stretch;width: 100%;}
.input-group>.custom-select:not(:last-child), .input-group>.form-control:not(:last-child){ border-top-right-radius: 0; border-bottom-right-radius: 0;}
.input-group>.custom-file, .input-group>.custom-select, .input-group>.form-control{ position: relative; -ms-flex: 1 1 auto; flex: 1 1 auto; width: 1%;
    margin-bottom: 0;}
.input-group-append{ margin-left: -1px;}
.input-group-append, .input-group-prepend{ display: flex; display: -ms-flexbox;}
.btn-border{ border: 1px solid #ccc;}
.input-group-append .btn, .input-group-prepend .btn{ position: relative; z-index: 2;}
.btn-outline-secondary.disabled, .btn-outline-secondary:disabled{ color: #6c757d; background-color: transparent;}
.btn.disabled, .btn:disabled{ opacity: .65;}
.btn-outline-secondary { color: #6c757d; background-color: transparent; background-image: none; border-color: #6c757d;}
.input-group>.input-group-append>.btn, .input-group>.input-group-append>.input-group-text, .input-group>.input-group-prepend:first-child>.btn:not(:first-child), .input-group>.input-group-prepend:first-child>.input-group-text:not(:first-child), .input-group>.input-group-prepend:not(:first-child)>.btn, .input-group>.input-group-prepend:not(:first-child)>.input-group-text{ border-top-left-radius: 0; border-bottom-left-radius: 0;}

@media (max-width:576px){
	.jobbkk-calendar{ width: 100%;}
}

.box-mail input[type="email"]{ height: 34px; border-radius: 10px; border: 1px solid #9e9e9e; padding: 6px 12px; width: 50%; margin-right: 5px;}

@media (max-width:576px){
	.box-mail input[type="email"]{ width: 100%; margin-bottom: 10px; font-size: 1.2rem; font-size: 12px;}
	.box-mail span{ font-size: 1.2rem; font-size: 12px;}
}

.jobbkk-send-ex{ text-align: center;}
ul.send-ex{ margin: 0; padding: 0; list-style: none; display: flex;}
ul.send-ex li{ float: left; width: 25%; padding-right: 10px; margin-bottom: 10px; display: inline-grid;}
ul.send-ex li:last-child{ padding-right: 0;}
ul.send-ex li a{ padding: 5px 10px; background: #D40101; color: #ffffff; border-radius: 10px; border: 1px solid #D40101; text-decoration: none; display: block;}
ul.send-ex li a:hover{ background: #ebebeb; color: #D40101; border: 1px solid #ebebeb;}

@media (max-width:767px){
	ul.send-ex{ display: inherit;}
	ul.send-ex li{ width: 50%;}
	ul.send-ex li:nth-child(2){ padding-right: 0;}
	ul.send-ex li a{ font-size: 1.2rem; font-size: 12px; display: block;}
}

@media (max-width:320px){
	ul.send-ex li a{ font-size: 1rem; font-size: 10px;}
}

.box-contact{ border: 1px solid #DBDBDB; border-radius: 10px; padding: 10px; overflow: hidden;}
.line-contact ul{ margin: 0 0 0 -10px; padding: 0; list-style: none; overflow: hidden;}
.line-contact ul li{ float: left; border-right: 1px solid #DBDBDB; padding: 0 10px;}
.line-contact ul li:last-child{ border-right: 0;}

@media (max-width:576px){
	.line-contact ul li{ width: 100%; padding: 0 0 10px; border-right: 0; font-size: 1.2rem; font-size: 12px;}
}

.jobbkk-push-print{ text-align: center;}
.jobbkk-push-print ul{ display: inline-block; margin: 0; padding: 0; list-style: none;}
.jobbkk-push-print ul li{ float: left; padding: 10px;}
.jobbkk-push-print ul li button{ background: #D40101; border: 1px solid #D40101; border-radius: 4px; padding: 5px 10px; color: #ffffff; 
	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;}
.jobbkk-push-print ul li:last-child button{ background: #ebebeb; color: #555; border: 1px solid #ebebeb;}
.jobbkk-push-print ul li button:hover{ background: #ebebeb; border: 1px solid #ebebeb; color: #D40101;}

@media (max-width:576px){
	.jobbkk-push-print ul{ display: flex;}
	.jobbkk-push-print ul li{ font-size: 1.2rem; font-size: 12px; width: 50%; display: inline-grid;}
	.jobbkk-push-print ul li:first-child{ padding-left: 0;}
	.jobbkk-push-print ul li:last-child{ padding-right: 0;}
}

.bg-time-view-job{ height: 350px; overflow-y: auto;}
.bg-time-view-job::-webkit-scrollbar{ width: 5px; background-color: #7D7979;}
.bg-time-view-job::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	background-color: #F5F5F5;  }
.bg-time-view-job::-webkit-scrollbar-thumb { background-color:#7D7979;}
.view-job{ padding-left: 0;}
.time-job{ padding-right: 0; text-align: right;}
.view-job ul, .time-job ul{ margin: 0; padding: 0; list-style: none;}
.view-job ul li a{ display: inline-block; color: #D40101;}
.time-job ul li{ color: #0F6FC9; font-size: 1.2rem; font-size: 12px;}

.select-only ul{ margin: 0; padding: 0; list-style: none;}
.select-only ul li{ float: left; padding: 0 5px 5px 0; color: #ffffff;}
.select-only ul li button{ background: #D40101; border: 1px solid #d40101; padding: 5px 5px; border-radius: 4px;}

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

.jobbkk-exclamation{ overflow: hidden; margin-bottom: 8px;}
.jobbkk-exclamation ul{ margin: 0; padding: 0; list-style: none;}
.jobbkk-exclamation ul li{ float: left; color: #555; font-size: 14px;}
.jobbkk-exclamation ul li:first-child{ width: 90%;}
.jobbkk-exclamation ul li:last-child{ width: 10%; text-align: right;}
.jobbkk-exclamation ul li button{ background: transparent; border: 0; color: #333; 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;}
.jobbkk-exclamation ul li button:hover{ color: #D40101;}

.original{ font-weight: normal; margin-bottom: 0;}

@media (max-width:991px){
	.original-remove{ margin-bottom: 0;}
}

@media (max-width:576px){
	.show-email{ margin-bottom: 20px;}
}

button.default-ex{ background: transparent; border: 0; color: #333; 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.default-ex:hover{ color: #D40101;}

@media (max-width:991px){
	.money-management{ margin-bottom: 20px;}
}

.mark-red{ font-size: 1rem; font-size: 10px;}
textarea.form-control.jobbkk-textarea-1{ height: 34px;}

.work-complete ul{ margin: 0; padding: 15px; list-style: none; text-align: center; background: #f6f3f2;}
.work-complete ul li:first-child{ font-size: 2rem; font-size: 20px; margin-bottom: 10px; color: #D40101;}

.complete-recomment ul{ margin: 0; padding: 0; list-style: none; text-align: center;}
.complete-recomment ul li{ color: #0F6FC9;}

.jobbkk.applicant.profile-owner li a:hover{ background: transparent;}

.file-map ul{ margin: 0; padding: 0; list-style: none; display: flex;}
.file-map ul li{ float: left; width: 50%; display: inline-grid; padding-right: 10px; text-align: center; font-size: 1.2rem; font-size: 12px; color: #555; 
	position: relative;}
.file-map ul li:last-child{ padding-right: 0; background: #f7fcfd; border-radius: 10px; border: 1px solid #1d8094; padding: 8px;}

input[type="file"]{position: absolute; left: 0; opacity: 0; top: 0; bottom: 0; width: 100%;}
label.choose-choose{ display: inline-block; margin-bottom: 0; position: relative; cursor: pointer !important; width: 100%; padding: 16px 8px;}
.choose-text{ position: absolute; left: 0; top: 0; bottom: 0; width: 100%; display: flex; align-items: center; justify-content: center; background: #f47920;
    border-radius: 10px; color: #ffffff; font-weight: normal; 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;}
.choose-text:hover{ background: #ebebeb; color: #D40101;}

label.choose-choose-1{ padding: 17px 8px; width: 100%}
label.choose-choose-2{ padding: 9px 0;}
.choose-text-2{ border-radius: 4px; width: auto; padding: 0 4px;}

@media (max-width:991px){
	.file-map ul{ display: inherit;}
	.file-map ul li{ width: 100%; float: none; display: inherit; padding-right: 0; margin-bottom: 10px;}
	label.choose-choose{ padding: 17px 8px;}
	label.choose-choose-2{ padding: 9px 4px;}
}

@media (max-width:767px){
	.file-map ul{ display: flex;}
	.file-map ul li{ width: 100%; float: left; display: inline-grid; padding-right: 10px; margin-bottom: 0;}
}

@media (max-width:320px){
	.file-map ul{ display: inherit;}
	.file-map ul li{ width: 100%; float: none; display: inherit; padding-right: 0; margin-bottom: 10px;}
}

.file-register button{ background: #f47920; border-radius: 10px; color: #ffffff; border: 1px solid #f47920; padding: 6.5px; width: 100%; 
	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;}
.file-register button:hover{ background: #f6f3f2; color: #d40101; border: 1px solid #f6f3f2;}

@media (max-width:576px){
	.jobbkk-file-register{ width: 100%;}
}

.map-google ul{ margin: 0; padding: 0; list-style: none; display: flex;}
.map-google ul li{ float: left; width: 50%; padding-right: 10px; display: inline-grid;}
.map-google ul li button{ width: 100%; padding: 6.5px;}
.map-google ul li:first-child button{ background: #f47920; border-radius: 10px; color: #ffffff; 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;}
.map-google ul li:last-child button{ background: #f6f3f2; color: #555; border: 1px solid #f6f3f2; border-radius: 10px; 
	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;}

.map-google ul li:first-child:hover button{ background: #f6f3f2; color: #d40101; border: 1px solid #f6f3f2;}
.map-google ul li:last-child:hover button{ background: #ebebeb; color: #d40101; border: 1px solid #ebebeb;}

@media (max-width:576px){
	.jobbkk-map-google{ width: 100%;}
}

@media (max-width:320px){
	.jobbkk-map-google{ width: 100%;}
	.map-google ul{ margin: 0; padding: 0; list-style: none; display: inherit;}
	.map-google ul li{ float: nonr; width: 100%; padding-right: 0; display: inherit; margin-bottom: 10px;}
}

.padding-hide{ padding: 15px 0;}
.work-only-use a{ display: block; background: #f47920; padding: 5px 10px; border-radius: 10px; text-align: center; color: #ffffff; text-decoration: none;}
.work-only-use a:hover{ background: #f6f3f2; color: #D40101;}

.top-company{ margin-top: 20px;}

.slide-theme ul{ margin: 0; padding: 0; list-style: none;}
.slide-theme ul li{ float: left;}
.slide-theme ul li:first-child{ width: 80%;}
.slide-theme ul li:last-child{ text-align: right; width: 20%;}
.slide-theme ul li a{ display: block; color: #555; text-decoration: none;}
.slide-theme ul li a:hover{ color: #D40101;}

.bg-pic-small{ background: #ebebeb; overflow: hidden;}
ul.pic-small-small{ margin: 0 -5px; padding: 0; list-style: none;}
ul.pic-small-small li.small-small{ width: 20%; float: left; padding: 0 5px;}
.image-e{ margin-right: 5px;}

@media (max-width:991px){
	ul.pic-small-small li.small-small{ width: 50%; margin-bottom: 20px;}
}

@media (max-width:767px){
	ul.pic-small-small li.small-small{ width: 33.3333333%;}
}

@media (max-width:380px){
	ul.pic-small-small li.small-small{ width: 50%;}
}

@media (max-width:290px){
	ul.pic-small-small li.small-small{ width: 100%;}
}

ul.pic-small-small-1{ margin: 0; padding: 0; list-style: none;}
ul.pic-small-small-1 li{ float: left; padding: 10px 5px; font-size: 1.2rem; font-size: 12px;}
ul.pic-small-small-1 li button{ border: 0; background: transparent;}
ul.pic-small-small-1 li.orange-pic{ width: 80%;}
ul.pic-small-small-1 li:last-child{ width: 20%;}
ul.pic-small-small-1 li.orange-pic button{ background: #f47920; color: #ffffff; border-radius: 4px; 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.pic-small-small-1 li.orange-pic button:hover{ background: #D40101;}
.panel{ box-shadow: 0 0 0 rgba(0,0,0,.0);}

ul.pic-small-small-job li.small-small{ width: 25%;}

@media (max-width:991px){
	ul.pic-small-small-job li.small-small{ width: 50%;}
}

@media (max-width:767px){
	ul.pic-small-small-job li.small-small{ width: 25%;}
}

@media (max-width:576px){
	ul.pic-small-small-job li.small-small{ width: 50%;}
}

@media (max-width:290px){
	ul.pic-small-small-job li.small-small{ width: 100%;}
}

.up-video img{ max-width: 100%;}
.button-up button, .button-del button{ background: #f47920; border-radius: 4px; border: 1px solid #f47920; color: #FFFFFF; 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;}
.button-del button{ padding: 5px 10px;}
.button-up button:hover, .button-del button:hover{ background: #d40101; border: 1px solid #d40101;}
.text-video h6{ font-size: 1.2rem; font-size: 12px;}

@media (max-width:576px){
	.button-up button, .button-del button{ font-size: 1.2rem; font-size: 12px;}
	.jobbkk-up-video, .jobbkk-text-video{ width: 100%;}
}

.mem-cancel{text-align: center;}
.mem-cancel ul{ margin: 0; padding: 0; list-style: none; display: inline-block;}
.mem-cancel ul li{ float: left; padding: 0 10px;}
.mem-cancel ul li button{ background: #D40101; border: 1px solid #D40101; border-radius: 4px; padding: 5px 15px; color: #ffffff; 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;}
.mem-cancel ul li:first-child button:hover{ background: #ebebeb; border: 1px solid #ebebeb; color: #D40101;}
.mem-cancel ul li:last-child button{ background: #ffffff; border: 1px solid #bfbfbf; color: #555;}
.mem-cancel ul li:last-child button:hover{ background: #ebebeb; border: 1px solid #ebebeb; color: #D40101;}

.font-tour{ font-size: 1.4rem; font-size: 14px;}

@media (max-width:576px){
	.font-tour{ font-size: 1.2rem; font-size: 12px;}
	.jobbkk-graph{ width: 50%;}
}

@media (max-width:320px){
	.jobbkk-graph{ width: 100%;}
}

.bg-text-graph{ padding: 15px; background: #ebebeb; border: 1px solid #bfbfbf; border-radius: 10px;}
a.button-graph{ background: #d40101; font-size: 1.2rem; font-size: 12px; padding: 5px 10px; border-radius: 4px; text-decoration: none; color: #ffffff; margin-left: 5px;}
a.button-graph:hover{ background: #ebebeb; color: #D40101;}

.focus-member{ background: #ebebeb;}
.sub-list li a{ padding: 5px 15px; display: block; text-decoration: none;}

.block-pic{ position: relative; display: inline-block;}
/* .box-circle{ width: auto; position: absolute; top:-10px; right: 0; z-index: 99;}
.box-circle .chart{ position: relative; width: 80px; height: 80px; margin: 0 auto; text-align: center; font-size: 18px; line-height: 4.5; 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;}

@media (max-width:767px){
	.box-circle{ top: 0; right: 30%;}
}

@media (max-width:576px){
	.box-circle{ right: 25%;}
}

@media (max-width:480px){
	.box-circle{ right: 23%;}
}

@media (max-width:420px){
	.box-circle{ right: 18%;}
}

@media (max-width:380px){
	.box-circle{ right: 15%;}
}

@media (max-width:320px){
	.box-circle{ right: 8%;}
} */

.box-circle{ width: auto; position: absolute; /*top:-10px;*/ right: 0; z-index: 99; left:53%}
.box-circle .chart{ position: relative; width: 80px; height: 80px; margin: 0 auto; text-align: center; font-size: 18px; line-height: 4.5; 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;}

@media (max-width:767px){
	.box-circle{ top: 0; right: 30%;}
}

@media (max-width:576px){
	.box-circle{ right: 25%;}
}

@media (max-width:480px){
	.box-circle{ right: 23%;}
}

@media (max-width:420px){
	.box-circle{ right: 18%;}
}

@media (max-width:380px){
	.box-circle{ right: 15%;}
}

@media (max-width:320px){
	.box-circle{ right: 8%;}
}

.margrin-top-4{ margin-top: 40px;}
.text-data-status.status-online{ background: #4CAF50;}
.text-data-status.status-offline{ background: #f6f3f2;}

.table-dis{ overflow-x: inherit;}
a.status-user{ text-decoration: none;}

@media (max-width:576px){
	.head-hidden{ display: none;}
}

/*ชื่อใบสมัครงาน ประกาศภาษา*/
/*ul.name-resume-lang{ margin: 0; padding: 0; list-style: none;}
ul.name-resume-lang li.name-paper{ width: 80%; float: left;}
ul.name-resume-lang li.alert-work-ee{ width: 20%; float: right; text-align: right;}
ul.name-resume-lang li.name-paper label{ font-weight: normal; float: left; margin-top: 7px; margin-right: 5px; width: auto;}
ul.name-resume-lang li.name-paper input[type="text"]{ float: left; width: 70%;}
ul.alert-work li a.alert-work-3{ background: #555; color: #ffffff;}

@media (max-width:991px){
	ul.name-resume-lang li.name-paper{ width: 70%;}
	ul.name-resume-lang li.alert-work-ee{ width: 30%; margin-top: 35px;}
	ul.name-resume-lang li.name-paper input[type="text"]{ width: 100%;}
}

@media (max-width:576px){
	ul.name-resume-lang li.name-paper, ul.name-resume-lang li.name-paper input[type="text"], ul.name-resume-lang li.alert-work-ee{ font-size: 1.2rem; font-size: 12px;}
}

@media (max-width:480px){
	ul.name-resume-lang li.name-paper{ width: 60%;}
	ul.name-resume-lang li.alert-work-ee{ width: 40%;}
}

@media (max-width:320px){
	ul.name-resume-lang li.name-paper{ width: 100%;}
	ul.name-resume-lang li.alert-work-ee{ width: 100%; margin-top: 10px;}
	ul.name-resume-lang li.alert-work-ee a.alert-work-3{ display: block; text-align: center;;}
}*/

/*ชื่อใบสมัครงาน ประกาศภาษา*/
.cre-resume ul{ margin: 0 -10px; padding: 0; list-style: none; display: flex;}
.cre-resume ul li{ padding: 0 10px; float: left; width: 50%; display: inline-grid;}
.cre-resume ul li button{ width: 100%; text-align: center; background: #D40101; color: #ffffff; padding: 6.5px 10px; margin-top: 23px; border-radius: 10px;
	border: 1px solid #D40101; transition: all 0.3s ease-in; -webkit-transition:all 0.3s ease-in; -moz-transition:all 0.3s ease-in;}
.cre-resume ul li:last-child button{ background: #ffffff; color: #D40101; border: 1px solid #D40101;}
.cre-resume ul li button:hover{ background: #ebebeb; color: #D40101; border: 1px solid #ebebeb;}

@media (max-width:1199px){
	.cre-resume ul li button{ margin-top: 10px;}
}

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

.panel-resume{ background: #ffffff;}
.h-resume{ font-size: 1.4rem; font-size: 14px;}

/*popup social share*/
.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;}
}

.level-lang{ margin-bottom: 5px;}


/**********************************************
******ย้ายมาจากไฟล์ Custom.css*******************
***********************************************
**********************************************/
.bg-drtail{
    background-color: #f5f3f2;
    border-radius: 10px;
}

.nav-side-menu li:hover {
    border-left: 3px solid #d40101;
    background-color: #ebebeb;
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
.nav-side-menu ul .sub-menu li.active, .nav-side-menu li .sub-menu li.active {
    color: #d40101;
}
.nav-side-menu ul .active, 
.nav-side-menu li .active {
    border-left: 3px solid #d40101;
    background-color: #ebebeb;
}
/*******************************
        *"collapse".*
*******************************/
.margin-bottom{ margin-bottom: 20px !important;}
.margrin-top{
    margin-top: 20px;
}
.panel{
    background-color: transparent;
}
.panel-group .panel {
    border-radius: 0;
    box-shadow: none;
}
.panel-title {
    font-size: 14px;
}
.panel-title > a {
   /* display: block;*/
    padding: 10px;
    text-decoration: none;
}
.panel-group h4:hover {
    color: #FFFFFF;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.more-less {
    float: right;
    color: #555;
    font-size: 2rem; 
}
.more-less-check{
    float: right;
    color: #bfbfbf; 
    padding-right: 15px;
    padding-top: 2px;
    font-size: 2rem; 
}
@media (max-width:576px){
	.more-less-check, .more-less{ font-size: 1.6rem; font-size: 16px;}
}
.error{
    color: #D40101 !important;
}
.success{
    color: #4CAF50 !important;
}
.panel-default > .panel-heading + .panel-collapse > .panel-body {
    border-top: 1px solid #bfbfbf;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.h-resume{
    text-align: left;
}

@media (max-width:576px){
	.h-resume{ font-size: 1.2rem; font-size: 12px;}
}
/*******************************
        *"btn"*
*******************************/
.btn-danger {
    color: #fff;
    background-color: #D40101;
    border-color: #D40101;
}
.btn-danger:hover{
    color: #D40101 !important;
    background-color: #ebebeb;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.btn-position{
    left: 203px;
}
.btn-satus li{
    float: left;
    padding: 0 10px;
    list-style-type: none; 
}
.btn-satus li button a {
    /* background-color:  #D40101; */
    color: #ffffff;
    padding: 5px 10px;
    border-radius: 10px;
    text-decoration: none
}
/* .btn-satus li a:hover{
    background: #ebebeb;
    color: #D40101;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
} */
.btn-online{
    display: block;
    width: 100%;
    height: 34px;
    border-radius: 10px;
    padding: 5px 8px;
    margin-top: -7px;
    background: #f47920;
    color: #ffffff;
}
.btn-online:hover{
    background: #ebebeb;
    color: #D40101;
    -webkit-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}
.bg-option{
    background-color: #ffffff;
    color: #555;
}   
.pt{
    padding-left: 5px;
    padding-top: 3px;
}

/*******************************
        *"text-data-status"*
*******************************/
.text-data-status{
    position: relative;
    border-top-left-radius: 10px; 
}

.text-data-status ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
}
.text-data-status ul li {
    text-align: center;
    padding: 10px 0;
    color: #ffffff;
    width: 100%;
    display: inline-grid;
}
.jobbkk-announce-resume ul li {
    float: left;
    text-align: center;
    width: 20%;
    border: 1px solid #555;
}
.img-circle{
    border-radius: 50%;
}
/*******************************
        *"jobbkk-announce-buy"*
*******************************/
.jobbkk-announce-profile ul li {
    position: relative;
    text-align: center;
    /* width: 20%; */
    /* border: 1px solid #bfbfbf; */
    border-radius: 10px;
	margin-bottom: 10px;
}
.progress-bar-success {
    background-color: #D40101;
}
.progress {
    width: 80%;
    height: 15px;
    overflow: hidden;
    background-color: #f5f5f5;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.1);
    margin: 5px auto;
}
.progress-bar-jobbkk{ line-height: 16px;}
.pic-text img { max-width: 70px; height: 70px; object-fit: cover; 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;}
.pic-text img:hover{ box-shadow: 0 1px 4px rgba(0,0,0,.5); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.5); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.5);}
.online{
    background-color: #4CAF50;
    color: #ffff;
    position: absolute;
    left: 50px;
    padding: 0 10px;
    border-radius: 10px;
}
.offline{
    background-color: #bfbfbf;
    color: #ffff;
    position: absolute;
    left: 50px;
    border-radius: 10px;
}
.add{
    color: #555;
    position: absolute;
    left: 50px;
    padding: 0 10px;
    border-radius: 10px;
}
.progress-bar-offline{
    color:#555222 !important;
}
/*******************************
        *"ตามรางรายละเอียด"*
*******************************/
.bg{
    background-color: #bfbfbf;
    padding: 10px;
    border-radius: 10px;
}
.margin-head{
    margin-top: 30px;
}
.lang-resume p{
    float: right;
}
.lang-resume p a{
    text-decoration: none;
    background: #ebebeb;
    padding: 5px ;
    border-radius: 10px;
    color: #555;
}
.line-datil{
    border-top: 1px solid #ddd;
    padding: 10px 0;
}
.line-datil h6{
  text-indent: 40px;
}
.head-profile{
	margin: 0 0 10px;
}
.head-name{
    text-align: center;
}
.head-name h2,
.head-name p{
    padding: 5px;
}
.head-name a{
    text-decoration: none;
}
.checkbox-style input[type=checkbox], 
.checkbox-inline input[type=checkbox],
.radio input[type=radio], 
.radio-inline input[type=radio] {
    margin-left: -20px;
}
.radio-style{
    padding: 20px;
}
.radio-style label{
    padding: 10px;
}
.btn-modal{
    background-color: #f47920;
    color: #fff;
    border-radius: 4px;
    padding: 0 5px;
}
.btn-modal a{
  text-decoration: none;
  color: #fff;
}
.btn-modal:hover, .btn-modal:focus{
    text-decoration: none;
    background: #f6f3f2;
    color: #d40101;
  }
.modal-header,.modal-title{
    text-align: center;
    background-color: #d40101;
    color: #fff;
}
/* .modal-body{
   left: 200px;
} */
.modal-footer {
    padding: 15px;
    text-align: right;
    border-top: 0px solid #e5e5e5 !important;
}
.datil-work{
    text-align: center;
}
.datil-work>thead>tr>th{
    text-align: center;
    border: none;
    text-decoration: none;
}
.datil-work>tbody>tr>td>a:hover{
    color: #d40101;
    text-decoration: none;
}
.datil-work>tbody>tr>td{
  padding-top: 10px;
}
.position-work{
    text-align: center;
    list-style: none;
    color: #ffffff;
}
.detel-profile ul li{
    float: left;
    list-style: none;
    padding: 0 10px;
	margin-bottom: 10px;
}
.detel-profile-line-2 ul li{
    float: left;
    list-style: none;
    padding: 0 30px 10px;
}
.detel-profile ul{
    padding: 0;
	margin: 0 -10px;
}

@media (max-width:576px){
	.detel-profile ul li{ font-size: 1.2rem; font-size: 12px;}
}
.modal-dialog {
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/*******************************
        *"form"*
*******************************/
.form-control {
    /* padding-left: 12px; */
    padding-left:30px;
    border-radius: 10px;
}
.input-group>.custom-file, 
.input-group>.custom-select, 
.input-group>.form-control {
    position: relative;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    width: 100%;
    margin-bottom: 0;
}
.choose-text-syle {
    /* position: absolute; */
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f47920;
    border-radius: 10px;
    color: #ffffff;
    font-weight: normal;
    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;
}
.checkbox-style input[type=checkbox]{
    margin-top: 47px;
}
.add-education ul li button {
    background: #f47920;
    border-radius: 4px;
    padding: 0 15px;
    color: #ffffff;
    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;
}
.add-education ul {
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
    display: flex;
    float: right;
}
.btn-education ul li button {
    background: #f47920;
    border-radius: 10px;
    padding: 6.5px 10px;
    color: #ffffff;
    border: 1px solid #f47920;
	width:100%;
    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-education ul{
    margin: 0;
    padding: 0;
    list-style: none;
}

.btn-work ul li button {
    background: #f47920;
    border-radius: 10px;
    margin-top: 30px;
    padding: 5px 45px;
    color: #ffffff;
    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;
}
.btn-work ul{
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}
.number{
    text-align: right;
}
.line-bottom{
    border-bottom: 1px dashed #bfbfbf;
}
.line-top{
    border-top: 1px dashed #bfbfbf;
    border-bottom: 1px solid #D40101;
}
.history-education ul li button {
    background: #f47920;
    border-radius: 10px;
    padding: 6.5px 10px;
    color: #ffffff;
    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;
}
.history-education ul{
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center
}
.detail-top {
    margin-top: 45px;
}
label.choose-choose-3 {
    padding: 17px 16px;
}

/*******************************
    *"Job we recommend"*
*******************************/
.head-job{
    background-color: #d40101;
    padding: 5px 15px;
    color: #fff;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
	position: relative;
}
.head-job h4{
    text-align: center;
    color: #fff;
}
.line-job{
    border: 1px solid #bfbfbf;
    border-radius: 10px;
}
.img-style{
    border: 1px solid #BFBFBF;
    background: #FFFFFF;
    height: 65px;
    object-fit: scale-down;
	max-width: 100%;
}
.img-style-1{
    margin-top: 30px;
    border: 1px solid #bfbfbf; 
    border-right: 0
}
.min-style{
    border: 1px solid #BFBFBF;
    padding: 30px 15px 15px;
    border-right: none;
	border-top: 0;
}
.border-right{
    border-right: 1px solid #BFBFBF;
}

/*******************************
        *"btn-sav"*
*******************************/
.btn-save a{
    color: #ffffff;
    background: #D40101;
    padding: 5px 24px;
    border-radius: 10px;
    text-decoration: none;
}
.btn-save a:hover {
    background: #ebebeb;
    color: #D40101;
}

/*******************************
        *"@media screen max"*
*******************************/

@media screen and (max-width:1199px){
    .btn-position{
        left: 40px;
    }
    .online {
        position: absolute;
        left: 35px;
    }
    .offline {
        position: absolute;
        left: 35px;
    }
    h6 b{
        font-size: 12px;
    }
    .mt-from {
        margin-top: 120px;
    }
    .btn-work ul li button {
        padding: 5px 38px;
    }
    .img-style {
        height: 60px;
    }
    .btn-save a {
        color: #ffffff;
        background: #D40101;
        padding: 5px 11px;
        border-radius: 10px;
        text-decoration: none;
    }
} 
@media screen and (max-width:1170px){
    .btn-position{
        left: 40px;
    }
} 
@media screen and (max-width:991px){
    .btn-satus li{
        padding: 0 0 20px; 
    }
    .pic-text p{
        padding: 5px;
    }
    .mobile{
        display: flex;
        white-space: nowrap;
        overflow-x: scroll;
        padding-bottom: 10px;
    }
    
    .lang-resume p {
        float: none;
        text-align: left;
    }
    h6 b{
        font-size: 14px;
    }
    .choose-text-syle {
        padding: 5px;
    }
    .radio-inline{
        font-size: 15px;
    }
    .text-12 {
        font-size: 15px;
    }
    .checkbox-style input[type=checkbox] {
        margin-top: 0;
        padding-right: 15px;
        padding-right: 15px;
    }
    .checkbox-style input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
        margin-left: 0;
    }
    .mt-from {
        margin-top: 20px;
    }
    .img-style{
        width: 100%;
    }
    .job-we{
        display: flex;
        white-space: nowrap;
        overflow-x: scroll;
    }
    .img-style{
        height: 70px;
    }
    .text-we h6, .text-we span{
        font-size: 10px;
    }
    .min-style{
        min-width: 40%;
    }
    .btn-save{
        margin-bottom: 20px;
    }
	.detel-profile ul li{ float: none;}
} 
@media  (max-width:767px){
	.online, .offline{ left: 32%;}
    .btn-satus li{
        padding: 0 0 20px; 
    }
    .pic-text p{
        padding: 15px;
    }
    .modal-dialog {
        min-height: calc(100vh - 20px);
      }
    /* .btn-save-position{
        text-align: center;
    } */
} 
@media screen and (max-width: 576px){
    .pic-company {
        width: 100%;
        text-align: center;
    }
    .pic-text img {
        max-width: 70px;
        height: 70px;
    }
    .lang-resume p {
        float: none;
        text-align: center;
    }
    .checkbox-style input[type=checkbox], .checkbox-inline input[type=checkbox], .radio input[type=radio], .radio-inline input[type=radio] {
        margin-left: -20px;
    }
    .radio-inline {
        font-size: 12px;
    }
    .checkbox-style{
        margin-left: 20px;
    }
    .min-style {
        min-width: 50%;
    }
}

@media screen and (max-width: 480px){
    .pic-company {
        width: 100%;
        text-align: center;
    }
    .head-profile {
        margin-top: 20px;
    } 
    .lang-resume p {
        float: none;
        text-align: center;
    }
    .modal-body {
        left: 0;
    }
    .min-style {
        min-width: 60%;
    }
}
@media screen and (max-width: 375px){
    .pic-company {
        width: 100%;
        text-align: center;
    }
    .head-profile {
        margin-top: 20px;
    } 
    .lang-resume p {
        float: none;
       text-align: center;
    }
    .modal-body {
        left: 0;
    }
    .text-job{
        font-size: 10px;
    }
    .min-style {
        min-width: 80%;
    }
    .btn-save a {
        padding: 5px 5px;
    }
}

@media screen and (max-width: 320px){
    .pic-company {
        width: 100%;
        text-align: center;
    }
    .head-profile {
        margin-top: 20px;
    } 
    .lang-resume p {
        float: none;
       text-align: center;
    }
    .modal-body {
        left: 0;
    }
    .text-job{
        font-size: 10px;
    }
    .min-style {
        min-width: 100%;
    }
    .btn-save a {
        padding: 5px 10px;
    }
}

/*******************************
        *"@media screen min"*
*******************************/
/*@media screen and (min-width: 767px){
    .modal-style {
        width: 600px;
        }
}*/

.online, .offline{ left: 0; right: 0; margin: 0 25%;}

@media (max-width:380px){
	.online, .offline{ margin: 0 20%;}
}

.panel-group .panel {border-radius: 10px; overflow: hidden; border: 1px solid #bfbfbf;}
.panel-group-a a{ border-radius: 0; border: 0;}
.panel-group-a a:hover{ background: #ffffff; color: #d40101;}
.panel-group .panel{ border-radius: 10px;}

.resume-pic img{ max-width: 100%; height: 100px; object-fit: cover; border: 1px solid #bfbfbf; padding: 3px;}

@media (max-width:991px){
	.resume-pic{ text-align: center;}
	.resume-pic img{ height: auto; max-width: 50%;}
	label.choose-choose-2{ padding: 9px 25%;}
}

@media (max-width:767px){
	.resume-pic img{ height: auto; max-width: 30%;}
	label.choose-choose-2{ padding: 9px 35%;}
}

@media (max-width:576px){
	.resume-pic img{ height: auto; max-width: 40%;}
	label.choose-choose-2{ padding: 9px 30%;}
}

@media (max-width:480px){
	.resume-pic img{ height: auto; max-width: 60%;}
	label.choose-choose-2{ padding: 9px 0;}
}

@media (max-width:320px){
	.resume-pic img{ height: auto; max-width: 80%;}
	label.choose-choose-2{ padding: 9px 0;}
}

/*วันเดือนปีเกิด*/
.form-control.form-bb{ float: left; border-right: 0; padding: 6px 5px;}
.form-control.form-date{ width: 30%;}
.form-control.form-month, .form-control.form-year{ width: 35%;}
.form-control.form-border{ border-right: 1px solid #ccc;}
.group-addon-cus{ border-radius: 10px;}

/*ลบลำดับ*/
.number{ float: left; margin-right: 10px;}
.add-education{ float: left;}
.add-education ul li button:hover{ background: #ebebeb; color: #D40101;}

.btn-education ul li button{ display: block;}

@media (max-width:576px){
	.time-month{ width: 100%;}
}

/*ทักษะพิมพ์ดีด*/
.form-inline .form-skill{ width: 100%;}

@media (max-width:320px){
	.print-skill{ width: 100%;}
}

/*ทักษะภาษา*/
.form-inline .form-point{ width: 100%;}
.head-point-jp{ width: 20%;}

@media (max-width:991px){
	.head-point-jp{ width: 33.3333333%;}
}

@media (max-width:576px){
	.head-point{ width: 50%;}
}

@media (max-width:320px){
	.head-point{ width: 100%;}
}

.detail-tip{ margin-top: 0;}

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

.btn-work ul{ margin: 0 -10px; padding: 0; list-style: none;}
.btn-work ul li{ width: 50%; float: left; padding: 0 10px;}
.btn-work ul li button{ margin-top: 0; display: block; padding: 6.5px 15px; width: 100%;}

/*ปุ่ม แสดงผล ปรื้น ลบ*/
.btn-save-position{ text-align: right;}
.btn-save-position ul{ margin: 0 -10px; padding: 0; list-style: none; display: inline-block;}
.btn-save-position ul li{ padding: 0 10px; float: left; margin-bottom: 10px; text-align: center;}
.btn-save-position ul li a{ display: block; text-decoration: none;}
.btn-save-position ul li a, .btn-save-position ul li button{ background: #ffffff; color: #D40101; padding: 5px 10px; border-radius: 4px; border: 1px solid #D40101;}
.btn-save-position ul li button{ 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;}
.btn-save-position ul li a:hover, .btn-save-position ul li button:hover{ background: #D40101; color: #ffffff;}
.btn-save-position ul li button:hover{ border: 1px solid #ebebeb;}

@media (max-width:991px){
	.btn-save-position ul li{ width: 33.3333333%;}
	.btn-save-position ul li button{ width: 100%;}
	.btn-save-position ul{ display: inherit;}
}

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

@media (max-width:480px){
	.btn-save-position ul li{ width: 50%;}
}

@media (max-width:319px){
	.btn-save-position ul li{ width: 100%;}
}

.rec-rec{ padding-right: 0;}
.text-xs{ font-size: 1.2rem; font-size: 12px;}
div.box{ height: 40px;}
div.box-1{ height: 55px; overflow: hidden;}

@media (max-width:1199px){
	.job-rec-rec{ display: flex; white-space: nowrap; overflow-x: scroll;}
	.sub-rec{ min-width: 28%; border-right: 0;}
	div.box{ height: 35px;}
	.sub-rec-right{ border-right: 1px solid #bfbfbf;}
}

@media (max-width:991px){
	.sub-rec{ min-width: 35%;}
}

@media (max-width:576px){
	.sub-rec{ min-width: 45%;}
	div.box-1{ height: 50px;}
}

@media (max-width:320px){
	.sub-rec{ min-width: 55%;}
	.rec-rec{ width: 20%;}
	.rec-rec-text{ width: 80%;}
}

.tri{ position: absolute; top: 0; right: 50%; color: #D40101; font-size: 45px;}

@media (max-width:576px){
	.tri{ top: -5px; z-index: 99;}
}

@media (max-width:480px){
	.tri{ right: 50%;}
}

@media (max-width:320px){
	.tri{ right: 45%;}
}

/*ตอนเท้นแนะนำ*/
.tag-learn{ width: 60%; float: left;}
.tag-learn ul{ margin: 0 -5px; padding: 0; list-style: none;}
.tag-learn ul li{ padding: 0 5px; float: left; margin-bottom: 5px;}
.tag-learn ul li a.learn-learn{ display: block; background: #f47920; padding: 3px 5px; font-size: 1rem; font-size: 10px; color: #ffffff; border-radius: 4px;}
.tag-learn ul li a.learn-learn:hover{ background: #D40101;}
a.learn-1-1, a.learn-learn{ text-decoration: none;}

.status-user-dropdown{min-width: 100%;}
.status-user-dropdown li a{ padding: 3px 10px;}
.push-detail a:hover{ color: #D40101;}
.push-create-none{ display: none;}
.head-name-1{ text-align: center;}

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