.elementor-widget-section .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-section .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-8 .elementor-element.elementor-element-22c5a24c{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-8 .elementor-element.elementor-element-22c5a24c > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-widget-shortcode .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-shortcode .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .eael-protected-content-message{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}.elementor-widget-html .protected-content-error-msg{font-family:var( --e-global-typography-secondary-font-family ), Sans-serif;font-weight:var( --e-global-typography-secondary-font-weight );}@media(max-width:1024px){.elementor-8 .elementor-element.elementor-element-7b07ba9f > .elementor-widget-container{margin:0px 15px 0px 15px;}}/* Start custom CSS for shortcode, class: .elementor-element-28d47dd6 */.static-menu .static-menu-heading:hover:not(.blue-link) {
    color: #0057ff !important;
}
.static-menu .static-menu-heading {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    letter-spacing: 0.16px;
    color: #000 !important; /* Default color for non-blue links */
}

.static-menu a.blue-link {
    color: #0057FF !important; /* Blue color only for Career Home */
}
.static-menu a.blue-link:hover {
    color: #0450c2 !important;
}
.static-menu {
    display: flex;
    align-items: center;
    padding: 30px 0px 10px 0px;
    margin:0px auto;
}

.static-menu .greater-than-icon {
    transform: rotate(90deg);
    width: 35px;
    height: 9px;
    padding: 0px 10px;
}

@media (max-width: 768px) {
    .static-menu .static-menu-heading {
        font-size: 12px;
        letter-spacing: 0.12px;
    }
}

@media (min-width: 1891px) {
    .static-menu {
        width: 968px;
    }
}
@media (min-width: 1025px) and (max-width: 1890px) {
    .static-menu {
        width: 968px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) { 
.static-menu {
        padding: 20px 15px;
    }
}
@media (max-width: 767px) { 
.static-menu {
        padding: 30px 0px 10px 15px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7b07ba9f */#fresher-present-address, #fresher-permanent-address {
    padding-top: 10px;
}
.error-message-content {
    padding-left: 35px;
    padding-bottom: 10px;
    margin-top: -10px;
    display: block;
    font-size: 12px !important;
    font-weight: 400 !important;
}
.radio-dropdown {
    display: block;
    width: 100%;
    border: 1px solid #CBD5E1;
    border-radius: 3px;
    background-color: white;
    cursor: pointer;
    color: #0F172A;
    height: 48px;
    padding-top: 2px;
}
.radio-dropdown:hover {
    border-color: #76abe9;
    outline: #76abe9;
}
.selected {
    padding: 0.5rem 1rem;
    color: #333;
    font-size: 16px;
    border: 1px solid transparent;
}

.radio-dropdown label {
    display: none;
    padding: 10px 16px;
    margin: 0;
    color: #333;
    font-size: 16px;
    border-left: 1px solid #76abe9;
    border-right: 1px solid #76abe9;
    background: white;
    position: relative;
    line-height: 20px;
}
.radio-dropdown input[type="radio"]:first-of-type + label {
    
    border-radius: 3px 3px 0px 0px;
    margin-top: 4px;
}
.radio-dropdown label:last-child {
    border-bottom: 1px solid #76abe9;
    border-radius: 0px 0px 3px 3px;
}
.radio-dropdown input[type="radio"] {
    display: none;
}

.radio-dropdown.active label {
    display: block;
}

.radio-dropdown label:hover {
    cursor: pointer;
    background-color: #E2E8F0;
}
#fresher-personal-info-section .interview-attended-section {
    display: flex;
}
#fresher-personal-info-section .interview-attended-section .label-name-field {
    padding-bottom: 0px;
    padding-top: 33px;
}
#fresher-personal-info-section .interview-attended-section .interview-attended-options {
    color: #334155;
    font-size: 16px;
    font-weight: 600;
    padding: 27px 0px 0px 20px;
}
#fresher-personal-info-section .interview-attended-section .interview-attended-options .interview-attended-radio-button, #fresher-personal-info-section .interview-attended-section .interview-attended-options .interview-attended-radio-button {
    margin-right: 10px;
}
@media (max-width: 768px) {
   #fresher-personal-info-section .interview-attended-section {
    display: block;
}
#fresher-personal-info-section .interview-attended-section .interview-attended-options {
    padding: 15px 0px 0px 0px;;
} 
}
#careers-fresher-validation-error-toaster {
    visibility: hidden;
    min-width: 300px;
    background-color: #B32A29;
    color: white;
    text-align: center;
    border-radius: 5px;
    padding: 16px;
    position: fixed;
    z-index: 1000;
    top: 100px;
    right: 30px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

#careers-fresher-validation-error-toaster.show {
    visibility: visible;
}
@media (min-width: 768px) and (max-width: 1024px) {
    #careers-validation-error-toaster {
        width: 350px;
        padding: 10px;
        font-size: 14px;
    }
}
@media (min-width: 370px) and (max-width: 426px) {
    #careers-validation-error-toaster {
        width: 325px;
        right: 26px;
        font-size: 12px;
        font-size: 12px;
        padding: 8px;
    }
}
@media (max-width: 370px) {
    #careers-validation-error-toaster {
        padding: 6px;
        width: 250px;
        min-width: 269px;
        font-size: 11px;
        right: 26px;
    }
}
.careers-application-form .resume-upload-container {
    cursor: pointer;
}

#waiting-loader {
    display: none;
    height: 100%;
    position: fixed;
    top: 0;
    width: 100%;
    left: 0;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.spinner-image {
    position: absolute;
    left: 50%;
}

.fresher-form-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* CSS for modal */
.careers-application-form #fresherErrorModal {
    display: none;
    flex-direction: column;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 30px;
    border: 1px solid #ddd;
    z-index: 1000;
    /* Ensure it's above the overlay */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    border-radius: 10px;
    width: 40%;
}

.careers-application-form #fresherErrorModal #fresher-error-modal-content {
    text-align: center;
    margin: 20px 0px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    font-size: 13px;
    line-height: 24px;
}

.careers-application-form #fresherErrorModal #fresher-error-modal-content p {
    font-weight: 700;
    padding: 0px 15px 0 15px;
    font-size: 20px;
}

.careers-application-form #fresherErrorModal #fresher-error-modal-content a {
    color: #0073dc;
    text-decoration: none;
}

.careers-application-form #fresherErrorModal #fresher-error-modal-content a:hover {
    color: #0450c2;
    text-decoration: none;
    cursor: pointer;
}

.careers-application-form #fresherErrorModal #fresher-error-modal-cancel,
.careers-application-form #fresherThankYouModal span {
    position: absolute;
    top: 2px;
    right: 10px;
    cursor: pointer;
    font-size: 25px;
    color: #475569;
}

.careers-application-form #fresherErrorModal .ok-button {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    width: 10%;
}

.elementor-701 .elementor-element.elementor-element-d445ed4 {
    width: 100% !important;
    max-width: 100% !important;
}

.form-section {
    border-radius: 16px;
    border: 1px solid #DEE7F7;
    margin-bottom: 70px;
    background-color: #fff;
    margin-left: auto;
    margin-right: auto;
}

.form-section .syncfusion-logo {
    width: 200px;
    margin: 0px auto;
    padding-top: 60px;
}

.form-section .form-heading {
    text-align: center;
    color: #1E293B;
    padding-top: 30px;
    font-weight: 700;
    font-size: 32px;
}

.careers-application-form .section-heading {
    margin-bottom: 0px !important;
}

.careers-application-form #fresher-user-education-details .section-heading {
    margin-bottom: 20px !important;
}

.careers-static-menu .static-menu-heading {
    font-size: 16px;
    font-weight: 600;
}

.careers-static-menu a {
    color: #0057FF !important;
}

.careers-static-menu {
    display: flex;
    align-items: center;
    padding: 45px 0px 40px 0px;
    margin: 0px auto;
}

.careers-static-menu .greater-than-icon {
    transform: rotate(90deg);
    width: 35px;
    height: 9px;
    padding: 0px 10px;
}

/* Breadcrumb-like navigation within the form sections */
.form-section .breadcrumb-nav {
    display: flex;
    justify-content: center;
    padding-top: 30px;
}

.form-section .breadcrumb-nav .breadcrumb-list {
    padding: 0;
    display: flex;
    justify-content: center;
}

.form-section .breadcrumb-nav .breadcrumb-list .breadcrumb-item {
    display: flex;
    align-items: center;
    font-size: 16px;
    font-weight: 600;
    font-family: 'Open Sans', sans-serif;
    color: #64748B;
    position: relative;
}

.breadcrumb-item+.breadcrumb-item::before {
    content: '';
    width: 40px;
    height: 2px;
    background-color: #dbe7ff;
    display: inline-block;
    margin: 15px 20px;
    position: relative;
    border-radius: 2px;
}

.breadcrumb-item+.breadcrumb-item.active::before {
    background-color: #0057FF;
}

.breadcrumb-item+.breadcrumb-item.completed::before {
    background-color: #0057FF;
}

.form-section .breadcrumb-nav .breadcrumb-list .breadcrumb-item.active {
    color: #0057FF;
}

.form-section .breadcrumb-nav .breadcrumb-list .breadcrumb-item.active .circle {
    background-color: #0057FF;
    color: #FFFFFF;
    border: none;
}

.form-section .breadcrumb-nav .breadcrumb-list .breadcrumb-item .breadcrumb-text {
    margin-left: 12px;
}

/*bread crumb  Circle Styles */
.form-section .breadcrumb-nav .breadcrumb-list .breadcrumb-item .circle {
    width: 32px;
    height: 32px;
    background-color: #DBE7FF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #1E293B;
    font-size: 16px;
    font-weight: 400;
}

.form-section .breadcrumb-nav .breadcrumb-list .breadcrumb-item.completed .circle {
    background: url(https://www.syncfusion.com/careers/wp-content/uploads/sites/16/2024/10/tick-icon.png);
    background-size: cover;
}

/* styles for user input form */
.form-section .careers-application-form {
    margin: 0px auto;
    padding-top: 30px;
}

.form-section .careers-application-form .autofill-section h2 {
    color: #1E293B;
    font-size: 24px;
    font-weight: 600;
}

.form-section .careers-application-form .autofill-section p {
    color: #475569;
    font-size: 16px;
    font-weight: 400;
}

.form-section .careers-application-form .autofill-section .resume-section .upload-status-section {
    padding-top: 5px;
}

.form-section .careers-application-form .autofill-section .resume-section .upload-status-section .success-resume-upload-message,
.form-section .careers-application-form .autofill-section .resume-section .upload-status-section .failed-resume-upload-message {
    color: #232327;
    font-size: 14px;
    line-height: 19px;
    font-weight: 400;
}

.form-section .careers-application-form .autofill-section .resume-section .upload-status-section .success-resume-upload {
    border: 2px solid #56c288;
    width: 80%;
    border-radius: 5px;
    margin: 10px 0 0;
}

.form-section .careers-application-form .autofill-section .resume-section .upload-status-section .failed-resume-upload {
    border: 2px solid #020202;
    width: 80%;
    margin: 10px 0 0;
    border-radius: 5px;
}

.form-section .careers-application-form .autofill-section .resume-section .upload-status-section .success-delete-resume,
.form-section .careers-application-form .autofill-section .resume-section .upload-status-section .failed-delete-resume {
    width: 18%;
    float: right;
    margin: -9px 0 0;
}

.form-section .careers-application-form .autofill-section .resume-section .upload-status-section .success-delete-resume svg,
.form-section .careers-application-form .autofill-section .resume-section .upload-status-section .failed-delete-resume svg {
    vertical-align: top;
    width: 10px;
    cursor: pointer;
}

.form-section .careers-application-form .autofill-section .resume-section p {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    border: 1px dashed #94A3B8;
    border-width: 1.5px;
    border-radius: 12px;
    padding: 25px 0px;
    width: 100%;
    background-color: #F7F9FB;
    text-align: center;
}

.form-section .careers-application-form .autofill-section .resume-section p img {
    margin: 0px auto;
    padding: 0px 0px 18px 0px;
}

.form-section .careers-application-form .autofill-section .resume-section p .browse-resume {
    color: #0057FF;
    padding-right: 2px;
    padding-bottom: 4.5px;
    cursor: pointer;
    font-weight: 600;
}

.form-section .careers-application-form .label-name-field {
    color: #334155;
    font-size: 16px;
    font-weight: 600;
    padding: 30px 0px 16px;
    display: block;
}

.form-section .careers-application-form .input-field {
    webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    color: #0F172A;
    border: 1px solid #CBD5E1;
    height: 48px;
    background-color: transparent;
}

.form-section .careers-application-form .input-field:focus,
.form-section .careers-application-form .input-field:active,
.form-section .careers-application-form .input-field:hover {
    border-color: #76abe9;
    outline: #76abe9;
}

.form-section .careers-application-form .form-value-content-field {
    word-break: break-word;
    flex-wrap: wrap;
    align-content: center;
    line-height: 24px;
    height: auto;
    font-weight: 400;
}

.form-section .careers-application-form #fresher-gender,
.form-section .careers-application-form #fresher-blood-group,
.form-section .careers-application-form #fresher-interviewed-state,
.form-section .careers-application-form #fresher-ug-form-degree-type,
.form-section .careers-application-form #fresher-ug-form-mode-of-study,
.form-section .careers-application-form #fresher-pg-form-degree-type,
.form-section .careers-application-form #fresher-pg-form-mode-of-study {
    background-position: right 15px center;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,%3Csvg%20class%3D%22dropdown-icon%22%20width%3D%2213%22%20height%3D%2213%22%20viewBox%3D%220%200%2010%205%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M1%200.5L5%204.5L9%200.5%22%20stroke%3D%22%23334155%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E');



}

.form-section .careers-application-form .phoneNumber {
    color: #0F172A;
    border: none;
    padding-left: 10px;
}

.form-section .careers-application-form .phoneNo-container {
    display: flex;
    border-radius: 3px;
    padding-left: 10px !important;
    border: solid 1px #cbd5e1;
}

.form-section .careers-application-form .phoneNo-container:focus,
.form-section .careers-application-form .phoneNo-container:active,
.form-section .careers-application-form .phoneNo-container:hover {
    border-color: #76abe9;
    outline: #76abe9;
}

.form-section .careers-application-form .phoneNo-section .country-code {
    border: none;
    width: 7%;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 0px 0px 0px 5px;
    background-color: transparent;
}

.form-section .careers-application-form span {
    color: #F04438;
    font-size: 16px;
    font-weight: 600
}


.form-section .careers-application-form .button-container {
    border: 1px solid #DEE7F7;
    background-color: #FAFBFF;
    height: auto;
    display: flex;
    justify-content: space-between;
    display: flex;
    align-items: center;
    margin-top: 60px;
    border-radius: 0px 0px 16px 16px;
}

.form-section .careers-application-form .button-container .back-button {
    border: 1px solid #0057FF;
    height: 48px;
    width: 99px;
    color: #0057FF;
    margin: 24px 32px;
    display: flex;
    align-items: center;
    padding: 0px 10px;
    border-radius: 8px;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.form-section .careers-application-form .button-container .back-button:hover,
.form-section .careers-application-form .button-container .back-button:focus {
    border: 1px solid #0487ff;
    background: #0487ff !important;
    color: #fff;
}

.form-section .careers-application-form .button-container .back-button:hover svg path,
.form-section .careers-application-form .button-container .back-button:focus svg path {
    stroke: #fff;
}

.form-section .careers-application-form .button-container .back-button svg {
    margin: 2px 6px 0px 6px;
    -webkit-transform: rotate(270deg);
    transform: rotate(270deg);
}

.form-section .careers-application-form .button-container .save-and-continue-button {
    border: 1px solid #0057FF !important;
    height: 48px;
    width: max-content;
    color: #F8FAFC !important;
    background: #0057FF;
    margin: 24px 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.form-section .careers-application-form .button-container #submit-personal-info-form {
    cursor: not-allowed;
}

.form-section .careers-application-form .button-container #submit-personal-info-form:not(:disabled) {
    cursor: pointer;
}

.form-section .careers-application-form .button-container .submit-button {
    border: none !important;
    background: none;
    color: #F8FAFC !important;
    padding: 0px 0px 0px 15px;
}

.form-section .careers-application-form .button-container .save-button {
    border: 1px solid #0057FF;
    color: #0057FF;
    position: absolute;
    right: 350px;
    height: 48px;
    width: 99px;
    padding: 0px 10px;
    border-radius: 8px;
}

.form-section .careers-application-form .button-container .save-and-continue-button:hover {
    background-color: #0050eb;
    color: #fff !important;
    border: 2px solid #0d98ff;
}

.form-section .careers-application-form .button-container .save-button:hover,
.form-section .careers-application-form .button-container .save-button:focus {
    border: 2px solid #0487ff;
    background: #0487ff !important;
    color: #fff;
}

.form-section .careers-application-form .button-container .greater-than-icon {
    transform: rotate(-90deg);
    width: 35px;
    height: 9px;
    padding: 0px 10px;
}

.form-section .careers-application-form .button-container .save-and-continue-button .greater-than-icon {
    transform: rotate(90deg);
    width: 35px;
    height: 9px;
    padding: 0px 10px;
}

.form-section .careers-application-form #fresher-sslc-education-section .label-name-field,
.form-section .careers-application-form #fresher-hsc-education-section .label-name-field,
.form-section .careers-application-form #fresher-diploma-education-section .label-name-field,
.form-section .careers-application-form #fresher-ug-education-section .label-name-field,
.form-section .careers-application-form #fresher-pg-education-section .label-name-field {
    color: #334155;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 0px;
    display: flex;
}

.form-section .careers-application-form #fresher-sslc-education-section .input-field,
.form-section .careers-application-form #fresher-hsc-education-section .input-field,
.form-section .careers-application-form #fresher-diploma-education-section .input-field,
.form-section .careers-application-form #fresher-ug-education-section .input-field,
.form-section .careers-application-form #fresher-pg-education-section .input-field {
    color: #64748B;
    border: 0px solid #CBD5E1;
    width: 50%;
    display: flex;
    padding: 0px 0px 0px 5px;
}

.form-section .careers-application-form .plus-icon {
    border: none;
    color: #0057FF;
    font-size: 16px;
    font-weight: 600;
}

.form-section .careers-application-form .add-button:hover,
.form-section .careers-application-form .add-button:active,
.form-section .careers-application-form .add-button:focus {
    border: none;
    background: none;
}

.form-section .careers-application-form .add-education-button {
    color: #0057FF;
    border: 0px solid #0057FF;
    font-size: 14px;
    font-weight: 600;
    padding-left: 0px;
}

.form-section .careers-application-form .add-education-button:hover,
.form-section .careers-application-form .add-education-button .plus-icon:hover,
.form-section .careers-application-form .add-education-button:focus {
    background: #fff !important;
}

.form-section .careers-application-form .container {
    width: 55%;
    margin: 0px auto;
}

.form-section .underline {
    margin: 45px 0px 35px !important;
}

.policy a,
.subscription a {
    color: #2F50F2;
}

.policy a:hover,
.subscription a:hover {
    color: #0450c2;
}

.form-section .careers-application-form .error-message,
.careers-application-form .success-message {
    display: block;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 3px 0px 0px 0px;
}

.form-section .careers-application-form .success-message {
    color: green !important;
}

.form-section .careers-application-form #submit-form:disabled {
    cursor: not-allowed;
}

.form-section .careers-application-form .edit-button {
    border: none;
    color: #0057ff;
    font-size: 16px;
    font-weight: 600;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    cursor: pointer;
}

.form-section .careers-application-form .edit-button:hover {
    background-color: #fff;
}

input[type="checkbox"] {
    cursor: pointer;
}

#add-employment-section #add-employment-button {
    justify-content: center;
    width: 100%;
    padding: 30px;
    border: 2px dashed #CBD5E1;
    border-radius: 10px;
    background-color: #F8FAFC;
    cursor: pointer;
    transition: background-color 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40px;
}

#fresher-present-address,
#fresher-permanent-address {
    resize: none;
}

#fresher-present-address::-webkit-scrollbar,
#fresher-permanent-address::-webkit-scrollbar {
    width: 0px;
}


#add-employment-section .add-employment-button p {
    margin-top: 10px;
    font-family: 'Open Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: center;
    color: #475569;
}

.employment-section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-top: 30px;
}

#work-history-details hr {
    margin: 15px 0 !important;
}

.employment-section .edit-button {
    margin-left: 66%;
    margin-top: -0.5%;
}

#add-employment-section #add-employment-section-heading {
    margin-bottom: 0px;
}

#fresher-personal-info-section .split-section {
    display: flex;
    align-items: center;
    gap: 13px;
}

@media (min-width: 768px) {
    .split-section .interview-date {
        width: 100%;
    }
}

.split-section #fresherInterviewAttendedDateError {
    height: 16px;
    margin-top: 5px;
    margin-bottom: 15px;
    padding: 0px !important;
}

.split-section #fresher-interviewed-date {
    margin-bottom: 0px;
    margin-top: 13px;
}

#fresher-ug-form-page .outstanding-arrears,
#fresher-pg-form-page .outstanding-arrears {
    color: #334155;
    font-size: 16px;
    font-weight: 600;
    padding: 24px 20px 5px;
}

#fresher-ug-form-page .arrears-radio-button,
#fresher-pg-form-page .arrears-radio-button {
    margin-right: 10px;
}

#fresher-ug-form-page .arrears-field-wrapper,
#fresher-pg-form-page .arrears-field-wrapper {
    display: flex;
}

.modal-content .heading {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
}

.modal-content .description {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.form-section .careers-application-form .button-container .right-arrow-button {
    margin: 4px 0px 2px 10px;
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}

.split-section #fresher-interviewed-date {
    border-radius: 3px;
    padding: 0.5rem 1rem;
    transition: all 0.3s;
    background-color: #F8FAFC;
}

.form-section .careers-application-form .education-details-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.form-section .careers-application-form .education-details-section p {
    font-size: 18px;
    font-weight: 600;
    line-height: 34px;
}

.form-section .careers-application-form hr {
    margin: 10px 0px;
}

#optional-heading {
    color: #74748B;
}

.form-section .careers-application-form .education-details-section p span,
#sslc-form-page .careers-application-form span,
#hsc-form-page .careers-application-form span,
#ug-form-page .careers-application-form span {
    color: #F04438;
    font-size: 16px;
    font-weight: 600;
}

.form-section .careers-application-form .add-button {
    border: none;
    color: #0057FF;
    font-size: 16px;
    font-weight: 600;
}

.form-section .careers-application-form .add-button:hover,
.form-section .careers-application-form .add-button:active,
.form-section .careers-application-form .add-button:focus {
    border: none;
    background: none;
}

.form-section .careers-application-form .plus-icon {
    font-size: 20px;
}

.form-section .careers-application-form .green-tick-icon {
    height: 24px;
    width: 24px;
    margin: -3px 10px 0px 0px;
}

/* Modal styles */

.close-button {
    color: #aaa !important;
    float: right;
    font-size: 28px !important;
    font-weight: bold !important;
    position: absolute;
    left: 92%;
    top: 1%;
}

.close-button:hover,
.close-button:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.modal {
    display: none;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
}

.modal-content {
    background-color: #fff;
    padding: 40px;
    width: 600px;
    border-radius: 24px;
    text-align: center;
    position: relative;
}

.modal-icon img {
    width: auto;
    height: auto;
}

.modal-icon {
    display: flex;
    justify-content: center;
}

.modal h2 {
    font-family: 'Open Sans', sans-serif;
    font-weight: 700;
    font-size: 32px;
    line-height: 40px;
    color: #0F172A;
    margin-bottom: 10px;
}

.modal p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    color: #0F172A;
    margin-bottom: 30px;
}

.modal-ok-button {
    background-color: #0066ff;
    color: #fff;
    border: none;
    padding: 14px 32px;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.modal-ok-button:hover {
    background-color: #0056e0;
}
.careers-application-form #fresherErrorModal #fresher-error-modal-cancel, .careers-application-form #fresherThankYouModal span {
    
    top: 10px !important;
    right: 24px !important;
    }
@media (min-width: 769px) { 

    .modal-content {
    background-image: url(https://www.syncfusion.com/careers/wp-content/uploads/sites/16/2024/11/thank-you-popup-background.png);
    background-size: cover;
    padding: 80px 170px;
    width: 800px;
    }
   
    .modal-icon img {
    width: auto;
    height: auto;
}
.modal h2 {
    margin-bottom: 16px;
    margin-top: 10px;
}
.modal p {
    margin-bottom: 40px;
}
}
@media (max-width: 768px) { 
.modal h2 {
    margin-bottom: 16px;
    margin-top: 10px;
}
.modal p {
    margin-bottom: 40px;
}
}
@media (max-width: 480px) { 

    .modal-icon img {
    width: 32%;
    height: 32%;
}
.modal h2 {
    font-size: 20px;
}
}
#fresher-subscription,
#fresher-policy {
    width: 18px;
    height: 18px;
}

#careers-forms-page {
    overflow: hidden;
}

.careers-application-form .section-heading {
    margin-bottom: 0px !important;
}

.careers-application-form #user-education-details .section-heading {
    margin-bottom: 20px !important;
}

@media (min-width: 1891px) {
    #careers-forms-page {
        background-image: url('https://www.syncfusion.com/careers/wp-content/uploads/sites/16/2024/10/form-page-desktop-banner.svg');
        background-size: 100% auto;
        background-position: top;
        background-repeat: no-repeat;
        background-blend-mode: overlay;
    }

    .form-section {
        width: 968px;
    }

    .careers-static-menu {
        width: 968px;
    }

    .form-section .careers-application-form .form-value-content-field {
        margin-top: -3px;
    }
}

@media (min-width: 1025px) and (max-width: 1890px) {
    #careers-forms-page {
        background-image: url('https://www.syncfusion.com/careers/wp-content/uploads/sites/16/2024/10/form-page-desktop-banner.svg');
        background-size: 1890px auto;
        background-position: top;
        background-repeat: no-repeat;
        background-blend-mode: overlay;
    }

    .form-section {
        width: 968px;
    }

    .careers-static-menu {
        width: 968px;
    }

    .form-section .careers-application-form .form-value-content-field {
        margin-top: -3px;
    }
}

@media (width: 1024px) {
    #careers-forms-page {
        background-size: 1024px 21.2% !important;
    }

    .form-section .careers-application-form .form-value-content-field {
        marging-top: -9px;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    #careers-forms-page {
        background-image: url('https://www.syncfusion.com/careers/wp-content/uploads/sites/16/2024/10/form-page-tab-banner.svg');
        background-size: 1024px 20.65%;
        background-position: top;
        background-repeat: no-repeat;
        background-blend-mode: overlay;
    }

    .careers-static-menu {
        padding: 40px 0px;
    }

    .breadcrumb-item+.breadcrumb-item::before {
        width: 30px;
        margin: 15px;
    }

    .form-section .careers-application-form .container {
        width: 70%;
    }

    .form-section .careers-application-form .button-container .save-button {
        right: 290px;
    }

    .employment-section .edit-button {
        margin-left: 56%;
    }

    .form-section .careers-application-form .form-value-content-field {
        margin-top: -3px;
    }
}

@media (min-width: 381px) and (max-width: 767px) {
    .careers-application-form #fresherErrorModal {
        width: 80%;
    }

    #careers-forms-page {
        background-image: url('https://www.syncfusion.com/careers/wp-content/uploads/sites/16/2024/10/form-page-mobile-banner.svg');
        background-size: 760px 20%;
        background-position: top;
        background-repeat: no-repeat;
        background-blend-mode: overlay;
    }

    .form-section .breadcrumb-nav .breadcrumb-list .breadcrumb-item .breadcrumb-text {
        display: none;
    }

    .form-section .form-heading {
        font-size: 26px;
    }

    .breadcrumb-item+.breadcrumb-item::before {
        width: 26px;
        margin: 15px;
    }

    .form-section .careers-application-form .container {
        width: 80%;
    }

    .form-section .careers-application-form .phoneNo-section .country-code {
        width: 13%;
    }

    .subscription-section,
    .policy-section {
        display: flex;
    }

    .policy,
    .subscription {
        padding-top: 0px;
    }

    #subscription,
    #policy {
        margin-top: 4px;
    }

    .subscription-section {
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .form-section .careers-application-form .button-container {
        display: block;
    }

    .form-section .careers-application-form .button-container .back-button,
    .form-section .careers-application-form .button-container .save-and-continue-button {
        width: 80%;
        justify-content: center;
    }

    .careers-static-menu .static-menu-heading {
        font-size: 14px;
    }

    .form-section .careers-application-form .button-container .save-button {
        position: unset;
        width: 80%;
        margin: 24px 32px;
    }

    .form-section .careers-application-form #sslc-education-form-section .label-name-field,
    .form-section .careers-application-form #hsc-education-form-section .label-name-field,
    .form-section .careers-application-form #diploma-education-form-section .label-name-field,
    .form-section .careers-application-form #ug-education-form-section .label-name-field,
    .form-section .careers-application-form #pg-education-form-section .label-name-field,
    .form-section .careers-application-form .employment-details-section .label-name-field {
        width: max-content;
    }

    #ug-form-page .arrears-field-wrapper,
    #pg-form-page .arrears-field-wrapper,
    #user-other-details .notice-period-field-wrapper {
        display: block;
    }

    #ug-form-page .outstanding-arrears,
    #pg-form-page .outstanding-arrears,
    #user-other-details .notice-period-options {
        padding: 10px 0px 5px;
    }

    .employment-section .edit-button {
        margin-left: 38%;
    }

    .form-section .careers-application-form .label-name-field {
        line-height: 24px;
    }

    .modal-content {
        margin: 25px;
    }

    .form-section .careers-application-form .input-field {
        width: 100%;
    }

    #fresher-resume-form .split-section {
        display: block;
    }

    .careers-static-menu {
        padding: 40px 0px;
    }

    .split-section #fresher-interviewed-date {
        margin-top: 20px;
    }

    .split-section #fresher-interview-state {
        width: 100% !important;
    }

    .form-section .careers-application-form .form-value-content-field {
        margin-top: 0px;
        width: 45% !important;
        display: contents !important;
    }

    .form-section .careers-application-form .green-tick-icon {
        margin-top: 0px !important;
    }

    #fresher-ug-form-page .arrears-field-wrapper,
    #fresher-pg-form-page .arrears-field-wrapper {
        display: block !important;
    }

    #fresher-ug-form-page .outstanding-arrears,
    #fresher-pg-form-page .outstanding-arrears {
        padding: 0px !important;
    }
}

@media (max-width: 380px) {
    .careers-application-form #fresherErrorModal {
        width: 80%;
    }

    #careers-forms-page {
        background-image: url('https://www.syncfusion.com/careers/wp-content/uploads/sites/16/2024/10/form-page-mobile-banner.svg');
        background-size: 420px 16%;
        background-position: top;
        background-repeat: no-repeat;
        background-blend-mode: overlay;
    }

    .form-section .breadcrumb-nav .breadcrumb-list .breadcrumb-item .breadcrumb-text {
        display: none;
    }

    .careers-static-menu {
        padding: 40px 0px;
    }

    .form-section .form-heading {
        font-size: 24px;
    }

    .form-section .careers-application-form .autofill-section .resume-section p {
        padding: 25px 10px;
    }

    .form-section .breadcrumb-nav {
        padding-top: 30px;
    }

    .breadcrumb-item+.breadcrumb-item::before {
        width: 22px;
        margin: 15px 10px;
    }

    .form-section .careers-application-form .container {
        width: 80%;
    }

    .form-section .careers-application-form .phoneNo-section .country-code {
        width: 18%;
    }

    .subscription-section,
    .policy-section {
        display: flex;
    }

    .policy,
    .subscription {
        padding-top: 0px;
    }

    #subscription,
    #policy {
        margin-top: 4px;
    }

    .subscription-section {
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .form-section .careers-application-form .button-container {
        display: block;
    }

    .form-section .careers-application-form .button-container .back-button,
    .form-section .careers-application-form .button-container .save-and-continue-button {
        width: 80%;
        justify-content: center;
    }

    .careers-static-menu .static-menu-heading {
        font-size: 12px;
    }

    .form-section .careers-application-form .button-container .save-button {
        position: unset;
        width: 80%;
        margin: 24px 32px;
    }

    .form-section .careers-application-form #sslc-education-form-section .label-name-field,
    .form-section .careers-application-form #hsc-education-form-section .label-name-field,
    .form-section .careers-application-form #diploma-education-form-section .label-name-field,
    .form-section .careers-application-form #ug-education-form-section .label-name-field,
    .form-section .careers-application-form #pg-education-form-section .label-name-field,
    .form-section .careers-application-form .employment-details-section .label-name-field {
        width: max-content;
    }

    #ug-form-page .arrears-field-wrapper,
    #pg-form-page .arrears-field-wrapper,
    #user-other-details .notice-period-field-wrapper {
        display: block;
    }

    #ug-form-page .outstanding-arrears,
    #pg-form-page .outstanding-arrears,
    #user-other-details .notice-period-options {
        padding: 10px 0px 5px;
    }

    .employment-section .edit-button {
        margin-left: 30%;
    }

    .form-section .careers-application-form .label-name-field {
        line-height: 24px;
    }

    .modal-content {
        margin: 25px;
    }

    .form-section .careers-application-form .input-field {
        width: 100%;
    }

    #fresher-resume-form .split-section {
        display: block;
    }

    .split-section #fresher-interviewed-date {
        margin-top: 20px;
    }

    .split-section #fresher-interview-state {
        width: 100% !important;
    }

    .form-section .careers-application-form .form-value-content-field {
        margin-top: 0px;
        width: 45% !important;
        display: contents !important;
    }

    .form-section .careers-application-form .green-tick-icon {
        margin-top: 0px !important;
    }

    #fresher-ug-form-page .arrears-field-wrapper,
    #fresher-pg-form-page .arrears-field-wrapper {
        display: block !important;
    }

    #fresher-ug-form-page .outstanding-arrears,
    #fresher-pg-form-page .outstanding-arrears {
        padding: 0px !important;
    }
}
@media (max-width: 320px) { 
    .form-section .careers-application-form .button-container .back-button, .form-section .careers-application-form .button-container .save-and-continue-button, .form-section .careers-application-form .button-container .save-button {
        margin: 24px !important;
    }
    .form-section .careers-application-form .button-container .back-button, .form-section .careers-application-form .button-container .save-and-continue-button, .form-section .careers-application-form .button-container .save-button {
        width: 83% !important;
    }
    
}/* End custom CSS */