.wrapper .title { padding: 60px 0; border-bottom: 1px solid #d8d8d8; }
.wrapper .title > h2 { font-family: 'prompt_mediumregular'; font-size: 20px; color: #003057; letter-spacing: 0; text-align: center; }
.wrapper .title > h2 > strong { color: #FC4C02; font-family: 'promptbold'; }
.wrapper .careers { padding: 100px 0; }
.wrapper .careers .careers-list { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid #d8d8d8; }
.wrapper .careers .careers-list .list-item { display: flex; justify-content: center; align-items: center; }
@media (max-width: 575px) { .wrapper .careers .careers-list .list-item { flex-direction: column; } }
.wrapper .careers .careers-list .list-item .date { opacity: 0.9; font-family: 'promptregular'; font-size: 14px; color: #000000; letter-spacing: 2px; border-right: 1px solid #d8d8d8; flex: 0 0 140px; margin-right: 40px; display: flex; align-items: center; height: 40px; }
@media (max-width: 575px) { .wrapper .careers .careers-list .list-item .date { flex: unset; border-right: unset; } }
.wrapper .careers .careers-list .list-item .topic { opacity: 0.9; font-family: 'prompt_semiboldregular'; text-transform: uppercase; font-size: 20px; color: #D9D9D6; letter-spacing: 2.4px; line-height: 56px; flex: 1; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -ms-transition: all 0.5s; }
.wrapper .careers .careers-list .list-item .topic.hover { color: #003057; }
.wrapper .careers .careers-list .list-item .topic.active { color: #003057; }
@media (max-width: 575px) { .wrapper .careers .careers-list .list-item .topic { margin-bottom: 20px; text-align: center; } }
@media (max-width: 768px) { .wrapper .careers .careers-list .list-item .topic { line-height: 36px; font-size: 15px; } }
.wrapper .careers .careers-list .list-item .topic h2 { font-size: 24px; }
@media (max-width: 768px) { .wrapper .careers .careers-list .list-item .topic h2 { font-size: 20px; } }
.wrapper .careers .careers-list .list-item a.toggle-pop { padding: 0 40px; height: 40px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; border-radius: 215px; font-size: 11px; font-family: "promptbold"; background: #fc4c02; color: #ffffff; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
.wrapper .careers .careers-list .list-item a.toggle-pop.active { font-size: 0px; width: 40px; height: 40px; padding: 0; }
.wrapper .careers .careers-list .list-item a.toggle-pop.active:before { display: none; }
.wrapper .careers .careers-list .list-item a.toggle-pop.active:after { content: "x"; padding: 12px 15px; border-radius: 215px; font-size: 11px; font-family: "promptbold"; background: #fc4c02; color: #ffffff; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; }
@media (max-width: 575px) { .wrapper .careers .careers-list .list-item a.toggle-pop { margin-bottom: 20px; } }
.wrapper .careers .careers-list .list-content { padding: 20px 180px; display: none; }
@media (max-width: 991px) { .wrapper .careers .careers-list .list-content { padding: 0; } }
.wrapper .careers .careers-list .list-content.active { display: block; }
.wrapper .careers .careers-list .list-content .list-detail h2 { opacity: 0.9; font-family: "promptbold"; font-size: 14px; color: #FC4C02; letter-spacing: 0; text-transform: uppercase; margin: 30px 0; }
.wrapper .careers .careers-list .list-content .list-detail ul li { opacity: 0.9; font-family: 'sarabunregular'; font-size: 17px; color: #8D8D8D; letter-spacing: 0; line-height: 24px; }
.wrapper .careers .careers-list .list-content .btn-popup { cursor: pointer; }
.wrapper .careers .careers-list .list-form .form-row { display: flex; justify-content: space-between; /* Interation */ }
.wrapper .careers .careers-list .list-form .form-row .input-form { position: relative; width: 48%; padding-bottom: 30px; display: flex; }
@media (max-width: 1024px) { .wrapper .careers .careers-list .list-form .form-row .input-form { width: 100%; } }
.wrapper .careers .careers-list .list-form .form-row .input-form-12 { position: relative; width: 100%; padding-bottom: 30px; display: flex; }
@media (max-width: 1024px) { .wrapper .careers .careers-list .list-form .form-row .input-form-12 { width: 100%; } }
.wrapper .careers .careers-list .list-form .form-row .label { top: 0; left: 0; right: 0; color: #B5BCC2; display: flex; align-items: center; position: absolute; font-size: 1rem; cursor: text; transition: .2s ease-in-out; box-sizing: border-box; text-transform: uppercase; }
.wrapper .careers .careers-list .list-form .form-row textarea { width: 100%; border-radius: 20px; margin-top: 0px; margin-bottom: 0px; /* height: 120px; */ padding: 10px 30px; border: 1px solid #D9D9D6; color: #63666A; resize: none; }
.wrapper .careers .careers-list .list-form .form-row textarea::placeholder { text-transform: uppercase; color: #B5BCC2; }
.wrapper .careers .careers-list .list-form .form-row input[type="text"] { width: 100%; border-radius: 215px; border: 1px solid #D9D9D6; color: #63666A; }
.wrapper .careers .careers-list .list-form .form-row input[type="text"]::placeholder { text-transform: uppercase; color: #B5BCC2; }
.wrapper .careers .careers-list .list-form .form-row input[type="text"], .wrapper .careers .careers-list .list-form .form-row .label { padding: 10px 30px; font-family: 'prompt_mediumregular'; font-size: 14px; letter-spacing: 0; }
.wrapper .careers .careers-list .list-form .form-row input[type="text"]:valid, .wrapper .careers .careers-list .list-form .form-row input[type="text"]:focus, .wrapper .careers .careers-list .list-form .form-row textarea:valid, .wrapper .careers .careers-list .list-form .form-row textarea:focus { border: 1px solid #FC4C02; }
.wrapper .careers .careers-list .list-form .form-row input[type="text"]:valid + .label, .wrapper .careers .careers-list .list-form .form-row input[type="text"]:focus + .label, .wrapper .careers .careers-list .list-form .form-row textarea:valid + .label, .wrapper .careers .careers-list .list-form .form-row textarea:focus + .label { margin: 0 20px; padding: 0 10px; width: fit-content; background: #ffffff; color: #FC4C02; font-family: 'prompt_mediumregular'; font-size: 12px; letter-spacing: 0; top: -8px; pointer-events: none; }
.wrapper .careers .careers-list .list-form .form-row .fileUpload { position: relative; overflow: hidden; /* border: 1px solid gray; */ /* border-left: 0; */ border-radius: 215px; width: 48px; background-color: #FC4C02; color: black; /* height: 42px; */ /* padding: 10px 14px; */ margin-left: 10px; display: flex; justify-content: center; align-items: center; }
.wrapper .careers .careers-list .list-form .form-row .fileUpload .x { width: 15px; height: 1px; background: #ffffff; position: absolute; }
.wrapper .careers .careers-list .list-form .form-row .fileUpload .y { width: 1px; height: 15px; background: #ffffff; position: absolute; }
.wrapper .careers .careers-list .list-form .form-row .fileUpload input[type="file"] { position: absolute; width: 100%; height: 100%; top: 0; right: 0; margin: 0; padding: 0; font-size: 0px; cursor: pointer; opacity: 0; filter: alpha(opacity=0); }
.wrapper .careers .careers-list .list-form button { padding: 12px 40px; border-radius: 215px; font-size: 11px; font-family: "promptbold"; background: #fc4c02; color: #ffffff; text-transform: uppercase; letter-spacing: 1px; }
.wrapper .form-career { display: none; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; z-index: 999; position: relative; }
.edit .wrapper .form-career { display: unset; z-index: unset; }
.wrapper .form-career.active { display: block; -webkit-animation: fadeIn 1s; animation: fadeIn 1s; }
.wrapper .form-career .popup-wrapper { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(252, 76, 2, 0.9); backdrop-filter: blur(5px); display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; }
.edit .wrapper .form-career .popup-wrapper { position: relative; }
.wrapper .form-career .popup-wrapper > div { width: 50%; height: 80%; background: #fff; position: relative; border-radius: 5px; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; }
@media (max-width: 1280px) { .wrapper .form-career .popup-wrapper > div { width: 90%; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: flex-end; -webkit-align-items: flex-end; flex-direction: column; } }
.wrapper .form-career .popup-wrapper > div .popup-close { width: 36px; height: 36px; background: #FC4C02; border-radius: 50%; position: absolute; top: 30px; right: 30px; cursor: pointer; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; }
@media (max-width: 1280px) { .wrapper .form-career .popup-wrapper > div .popup-close { position: unset; margin-bottom: 20px; margin-right: 5%; } }
.wrapper .form-career .popup-wrapper > div .popup-close:before { content: ""; width: 20px; height: 1px; display: inline-block; background: #fff; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }
.wrapper .form-career .popup-wrapper > div .popup-close:after { content: ""; width: 20px; height: 1px; position: absolute; background: #fff; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); }
@media (max-width: 400px) { .wrapper .form-career .popup-wrapper > div .ccm-block-type-form { width: 100%; } }
.wrapper .form-career .popup-wrapper > div form { width: 60%; margin: 0 auto; }
@media (max-width: 1280px) { .wrapper .form-career .popup-wrapper > div form { width: 90%; } }
.wrapper .form-career .popup-wrapper > div form .fields { display: flex; display: -webkit-flex; justify-content: space-between; -webkit-justify-content: space-between; flex-wrap: wrap; }
.wrapper .form-career .popup-wrapper > div form .fields .form-group { flex: 0 0 48%; max-width: 48%; position: relative; }
@media (max-width: 768px) { .wrapper .form-career .popup-wrapper > div form .fields .form-group { flex: 0 0 100%; max-width: 100%; } }
.wrapper .form-career .popup-wrapper > div form .fields .form-group label { top: 12px; left: 15px; right: 0; color: #b5bcc2; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; position: absolute; cursor: text; transition: 0.2s ease-in-out; box-sizing: border-box; text-transform: uppercase; margin-bottom: 0; font-family: "prompt_mediumregular"; font-size: 12px; letter-spacing: 0; color: #b5bcc2; text-transform: uppercase; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -ms-transition: all 0.5s; background: #fff; padding: 0 10px; width: max-content; }
@media (max-width: 1280px) { .wrapper .form-career .popup-wrapper > div form .fields .form-group label { font-size: 10px; width: 80%; } }
.wrapper .form-career .popup-wrapper > div form .fields .form-group .cs-select { border-radius: 20px; border: 1px solid #d9d9d6; }
.wrapper .form-career .popup-wrapper > div form .fields .form-group .cs-select.cs-active { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.wrapper .form-career .popup-wrapper > div form .fields .form-group .cs-select .cs-placeholder { padding: 10px 25px; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; }
.wrapper .form-career .popup-wrapper > div form .fields .form-group .cs-select .cs-placeholder:before { content: ""; width: 35px; height: 35px; background: #FC4C02; border-radius: 215px; position: absolute; right: 4px; }
.wrapper .form-career .popup-wrapper > div form .fields .form-group .cs-select .cs-placeholder:after { right: 16px; color: #fff; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; -ms-transition: all 0.5s; }
.wrapper .form-career .popup-wrapper > div form .fields .form-group .cs-select .cs-options { border-radius: 20px; border: 1px solid #d9d9d6; border-top-left-radius: 0; border-top-right-radius: 0; width: calc(100% + 2px); left: -1px; }
.wrapper .form-career .popup-wrapper > div form .fields .form-group .cs-select .cs-options ul li:nth-child(even) { background: rgba(252, 76, 2, 0.1); }
.wrapper .form-career .popup-wrapper > div form .fields .form-group .cs-select .cs-options ul li span { padding: 10px 25px; }
.wrapper .form-career .popup-wrapper > div form .fields .form-group input { border-radius: 20px; padding: 10px 25px; }
.wrapper .form-career .popup-wrapper > div form .fields .form-group textarea { width: 100%; border-radius: 20px; margin-top: 0px; margin-bottom: 0px; /* height: 120px; */ padding: 10px 25px; border: 1px solid #d9d9d6; color: #63666a; resize: none; }
.wrapper .form-career .popup-wrapper > div form .fields .form-group input:focus ~ label, .wrapper .form-career .popup-wrapper > div form .fields .form-group textarea:focus ~ label { top: -8px; color: #63666a; }
.wrapper .form-career .popup-wrapper > div form .fields .form-group input:focus, .wrapper .form-career .popup-wrapper > div form .fields .form-group textarea:focus { border: 1px solid #fc4c02; }
.wrapper .form-career .popup-wrapper > div form .fields .field-select { flex: 0 0 100%; max-width: 100%; }
.wrapper .form-career .popup-wrapper > div form .fields .field-textarea { flex: 0 0 100%; max-width: 100%; }
.wrapper .form-career .popup-wrapper > div form .fields .field-textarea label { top: -8px !important; }
.wrapper .form-career .popup-wrapper > div form .fields .field-select label { position: unset; top: unset; left: unset; color: #003b71; margin: 0 auto; padding: 20px 0; }
.wrapper .form-career .popup-wrapper > div form .fields .field-fileupload input { opacity: 0; }
.wrapper .form-career .popup-wrapper > div form .fields .field-fileupload label { width: 87%; border-radius: 20px; left: 0; height: 43px; top: 0 !important; }
.wrapper .form-career .popup-wrapper > div form .fields .field-fileupload label:after { position: absolute; top: 0; right: -50px; bottom: 0; z-index: 3; display: block; padding: .375rem .75rem; line-height: 1.5; color: #fff; content: ""; border-radius: 50%; width: 38px; height: 38px; background-color: #fc4c02; background-image: url(../images/plus.svg); background-position: center; background-repeat: no-repeat; }
.wrapper .form-career .popup-wrapper > div form .fields .field-text label, .wrapper .form-career .popup-wrapper > div form .fields .field-email label { top: -8px !important; }
.wrapper .form-career .popup-wrapper > div form .form-actions { display: flex; display: -webkit-flex; justify-content: flex-end; -webkit-justify-content: flex-end; align-items: center; -webkit-align-items: center; }
.wrapper .form-career .popup-wrapper > div form .form-actions button { font-family: "promptbold", Helvetica, Arial, sans-serif; color: #fff; border-radius: 20px; background: #FC4C02; padding: 10px 25px; text-transform: uppercase; opacity: 0.9; font-size: 12px; }
 
/*# sourceMappingURL=careers.css.map */
