/* -----------------------------------------------

		       Contact Area CSS

----------------------------------------------- */

.contact-area {

	padding: 60px 0 0 0;

}

.all-contact {

    background: url("../../images/bg-img/bg-polygon-corner.png") left top no-repeat;

	background-size: contain;

}

.career {

	padding: 30px 90px 30px 0;

}

.jobPosition,

.applicationForm {

	padding: 0 0 30px 0;

}

.applicationForm {

	padding: 30px 0;

}

.jobPosition h4,

.applicationForm h4 {

	color: #1bbcad;

	font-family: Arial;
	font-weight: 600;
	padding-bottom: 10px;

	margin-bottom: 17px;

	border-bottom: 3px solid #1bbcad;

}



.job-card {

  	padding: 25px;

	margin: 13px 0;

  	border-radius: 5px;

  	background-color: white;

  	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

}

.job-card__content {

    display: flex;

    align-items: center;

    margin-bottom: 25px;

}

.job-card__content .job-card_info {

    flex: 1;

}

.job-card__content .job-card_info small {

	font-family: "Sarabun";

	font-size: 14px;

	color: orangered;

	text-transform: capitalize;

}

.job-card__content .job-card_info h5 {

	font-family: "Sarabun";
	font-weight: 600;
	color: currentColor;
	text-transform: capitalize;
}

.job-card__content .job-card_info p {

	font-family: "Sarabun";

	font-size: 16px;

	color: grey;

	margin: 0;

}

.job-card__footer {

    display: flex;

    align-items: center;

    justify-content: space-between;

}

.job-label {
  	margin-right: 5px;
	background-color: #f8f9fa !important;
	border: 1px solid #ccc;
	cursor: unset;
}








/* ----------------------------------- 

         Application Form CSS

----------------------------------- */

.career_form {

    background: url("../../images/bg-img/lightgreen-half-square.png") bottom right no-repeat;

    background-size: auto;

}

.applicationForm .form-label {

	margin-bottom: 3px;

	font-size: 16px;

	color: green;

}

.personalData,

.educationData,

.experiencesData,

.otherData {

	margin-top: 30px !important;

}

.personalData .form-control,

.educationData .form-control,

.experiencesData .form-control,

.otherData .form-control {

	padding: .475rem .75rem;

}

.personalData h5,

.educationData h5,

.experiencesData h5,

.otherData h5 {

	color: white;

	font-size: 16px;

	font-family: Arial;

	background-color: #1bbcad;

	padding: 5px 12px;

	display: inline-block; 

}

.personalData h5::before,

.educationData h5::before,

.experiencesData h5::before,

.otherData h5::before {

	font-family: "Font Awesome 6 Free";

	margin-right: 8px;

	font-weight: 900;

}

.personalData h5::before {

	content: "\f2b9";

}

.educationData h5::before {

	content: "\f19d";

}

.experiencesData h5::before {

	content: "\f0b1";

}

.otherData h5::before {

	content: "\f007";

}

.personalData label,

.educationData label,

.experiencesData label,

.otherData label {

	margin-right: 15px;

}

.personalData .form-select,

.educationData .form-select,

.experiencesData .form-select {

	display: block;

	width: 100%;

	padding: .375rem .75rem;

	font-size: 16px;

	font-weight: 400;

	line-height: 1.5;

	color: #777;

	background-color: white;

	background-clip: padding-box;

	border: 1px solid #ced4da;

	-webkit-appearance: none;

	-moz-appearance: none;

	appearance: none;

	border-radius: .375rem;

	transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;

}

.personalData .nice-select::after,

.educationData .nice-select::after,

.experiencesData .nice-select::after {

	display: none;

}

.personalData .nice-select .option.selected,

.educationData .nice-select .option.selected,

.experiencesData .nice-select .option.selected {

  	color: green;

}

.job-type p::before,
.salary p::before,
.experiences p::before,
.educational-background p::before,
.work-location p::before {
	font-weight: 900;
	font-family: "Font Awesome 6 Free";
	margin-right: 7px;
}

.salary p::before { 
	content: "\e0ac";
	margin-right: 5px;
}
.job-type p::before { content: "\f017"; }
.experiences p::before { content: "\f0f2"; }
.educational-background p::before { content: "\f19d"; }
.work-location p::before { content: "\f3c5"; }

.sampleCaptcha {
    margin: 30px 0;
    display: block;
}

.sampleCaptcha img {
    float: left;
    margin-right: 15px;
}

.sampleCaptcha .form-control {
	padding: .475rem .75rem .7rem .75rem;
    width: 76%;
}
@media (max-width: 991px) {
    .sampleCaptcha img {
        margin-bottom: 15px;
    }
    .sampleCaptcha .form-control {
        width: 100%;
    }
}

.sampleCaptcha button {
    width: 49.25%;
    padding: 10px 25px;
    font-family: Arial;
    letter-spacing: 0.65px;
    font-weight: 500;
    text-transform: uppercase;
    transition: 0.4s;
    border: none !important;
}

.sampleCaptcha .btn-reset {

    background-color: #eaeaea;

    color: #999;

}

.sampleCaptcha .btn-reset:hover {

    color: currentColor;

    background-color: #ccc;

}

.sampleCaptcha .btn-send {

    background: rgb(253, 76, 125);

    background: linear-gradient(45deg, rgba(253, 76, 125, 1) 0%, rgba(253, 104, 96, 1) 100%);

    color: white;

}

.sampleCaptcha .btn-send:hover {

    color: darkred;

}





/*        Date Picker CSS

----------------------------------- */

.applicationForm .input-group-addon {

  	cursor: pointer;

}

.applicationForm i.input-group-text {

	line-height: 1.5;

}

.datepicker-controls .view-switch {

  	color: seagreen !important;

}

.datepicker-view .dow {

	color: #1bbcad !important;

}







a.btn-outline-link {

	padding: 15px 35px;

	text-align: center;

	color: #1bbcad;

	border: 2px solid #1bbcad;

	border-radius: 30px;

	display: block;

	width: 285px;

	font-weight: 500;

	font-size: 18px;

}

@media (max-width: 767px) {

	.contact-area {

		padding: 30px 0 0 0;

	}

	.all-contact {

		background: none;

	}

}

@media (max-width: 991px) {

	.career {

		padding: 30px 0 0 0;

	}

	.career .row {

		flex-direction: column-reverse;

	}

	.career .main_title h1 {

		margin: 30px 0 15px 0;

	}

	a.btn-outline-link {

		width: 75%;

		margin-bottom: 50px;

	}

}

@media (min-width: 768px) and (max-width: 991px) {

	.all-contact {

		background-size: cover;

	}

}



a.btn-outline-link::before {

	font-family: "Font Awesome 6 Free";

	font-size: 16px;

	font-weight: 900;

	content: "\f573";

	margin-right: 7px;

}

a.btn-outline-link:hover {

	color: white;

	background-color: #1bbcad;

}

.abt-mdc { }

.abt-mdc .card {

	border-radius: 10px;

	padding: 10px;

	height: 380px;

	background: none;

}

.abt-location img,

.abt-contact img,

.abt-timeschedule img {

	display: block;

	margin-bottom: 15px;

}

.title {

	font-family: Arial;

	margin-bottom: 30px;

	font-size: 18px;

	font-weight: 500;

	line-height: 16px;

	color: currentColor;

}

.sub-title {

	font-family: "Sarabun";

	letter-spacing: .5px;

	color: #999;

	margin: 0;

}

.greenDetails,

.currentDetails {

	font-weight: normal;

	line-height: 22px;

	margin: 0;

}

.greenDetails {

	color: #22b573;

	font-size: 18px;

	font-weight: 500;

	margin-bottom: 5px;

}

.currentDetails {

	font-size: 17px;

}

.abt-timeschedule .col-md-7 {

	text-align: end;

}

.abt-timeschedule .card-body .d-flex {

	margin-bottom: 15px;

	padding-bottom: 15px;

	border-bottom: 1px solid #ccc;

}

.abt-timeschedule .card-body .d-flex:last-child {

	border-bottom: 0 !important;

	margin: 0;

	padding: 0;

}



/*		      Responsive CSS

--------------------------------------*/

@media (max-width: 767px){

	.abt-mdc {

		padding: 30px 0;

	}

	.abt-location,

	.abt-contact,

	.abt-timeschedule {

		height: auto !important;

	}

	.abt-location {

		margin: -30px 0 15px 0;

	}

	.abt-contact,

	.abt-timeschedule {

		margin: 8px 0;

	}

	.abt-timeschedule .col-md-5,

	.abt-timeschedule .col-md-7 {

		width: 50%;

	}

	.abt-timeschedule .col-md-7 {

		padding-right: 5px;

	}

}



@media (min-width: 768px) and (max-width: 991px) {

	.abt-timeschedule {

		margin-top: 25px;

	}

}







/* -----------------------------------

		   Contact form CSS

----------------------------------- */

.contactform-area {

	position: relative;

}

.contactform-area .border {

	border: 1px solid #252525 !important;

	padding: 25px 10px;

}

.contactform-area form {

	background-color: white;

}

.contactform-area .btn-reset {

	padding: 10px 25px;

	background-color: #eaeaea;

	border-radius: 7px;

  	border: none;

	font-size: 18px;

  	font-weight: 600;

  	letter-spacing: 0.65px;

	color: #666;

	margin-bottom: 15px;

}

.contactform-area .btn-reset:hover {

	color: black;

	background-color: #ccc;

}

.contactform-area .btn-reset {

	margin: 0 auto;

	text-transform: uppercase;

	width: 49.5%

}

.contactform-area button.btn-submit[type="submit"] {

	background: rgb(253,76,125);

    background: linear-gradient(45deg, rgba(253,76,125,1) 0%, rgba(253,104,96,1) 100%);

  	padding: 10px 30px;

  	color: white;

  	transition: 0.4s;

  	border-radius: 7px;

	font-size: 18px;

    font-weight: 600;

    letter-spacing: 0.65px;

    border: none;

	margin-bottom: 15px;

	font-family: "Source Sans Pro";

}

.contactform-area button.btn-submit[type="submit"]:hover {

  	color: darkred;

}

.map {

	margin-top: -59px;

	border-top: 59px solid #f8f9fa;

	display: flex;

}

.pageContact {

	position: relative;

	margin-top: -95px

}



@media (max-width: 767px){

	form#formmail .flt-right {

		float: none !important;

	}

	form#formmail .flt-right .w-auto {

		width: 100% !important;

	}

}

	





/* -----------------------------------

	      Bottom Line CSS

----------------------------------- */

.bottom-line {

  	margin: 30px 0;

  	height: 7px;

  	background-image: url("../../images/core-img/bottom-shadow.png");

  	background-repeat: no-repeat;

  	background-position: bottom;

	background-size: contain;

}



/* -----------------------------------

	      Error - Success

----------------------------------- */

.error {

	color: red;

}

.success{

	color: green;

}


	
 

/* -----------------------------------
	             Jobs  CSS
----------------------------------- */
#jobForm.applicationForm .col-sm-12.mb-3.form-check {
    margin-left: 15px;
}

.green-topic h5 {
    color: #1bbcad;
    text-transform: capitalize;
    font-weight: 600;
    margin: 15px 0;
    text-decoration: underline;
}
.green-topic h6 {
    color: black;
    font-size: 18px;
    font-weight: bold;
    margin-top: 30px !important;
}
.green-topic ul {
	margin: 0;
    padding: 0 10px;
	list-style: none;
	column-count: 2;
    list-style-position: outside;
}
@media (max-width: 991px) {
    .green-topic ul {
        column-count: 1 !important;
    }
}
.green-topic ul li {
    padding-right: 15px;
	margin-top: 10px;
    width: 100%;
    font-size: 17px;
	display: inline-flex;
    text-transform: capitalize;
}
.green-topic ul li::before {
	content: "\f00c";
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	font-size: 18px;
	margin-right: 10px;
}
.job-card__footer .modal-body {
    padding: 30px 30px 15px 30px !important;
    margin-bottom: 15px;
    background: url("../../images/bg-img/lightgreen-half-square.png") bottom right no-repeat;
    background-size: auto;
}
@media (max-width: 767px) {
    .job-card__footer .modal-body {
        padding: var(--bs-modal-padding) !important;
    }
}

.green-topic p,
.modal-body .job-type p,
.modal-body .experiences p,
.modal-body .educational-background p,
.modal-body .salary p,
.modal-body .work-location p {
        font-size: 17px;
}

.red-notice p {
    font-size: 17px;
    color: red;
}
.red-notice p::before {
    margin-right: 7px;
    font-family: "Font Awesome 6 Free";
    content: "\f071";
    font-weight: 900;
}
	
 

/* ----------------------------------------------------------------------
	             Upload and Display Image  CSS
---------------------------------------------------------------------- */
canvas {
  width: 150px;
  height: 200px;
  border: 1px solid #ccc;
  margin-bottom: 8px;
}