* {
    box-sizing: border-box;
}

body {
    margin: 0px;
    font-family: "Open Sans", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
    margin: 0px;
    font-weight: normal;
}

.application-header .application-title {
    font-size: 32px;
    color: #000;
    font-weight: 600;
}

.header-description {
    margin: 10px auto 40px;
    color: #271655;
    max-width: 700px;
    line-height: 1.7;
    font-size: 16px;
}

.input-form-container {
    background-color: #fff;
    box-shadow: 0px 0px 10px 2px rgba(0, 0, 0, 0.10);
    border-radius: 8px;
    margin: 0px auto 30px;
    padding: 20px;
}

.payslip-generator .error-msg,
.payslip-generator .upload-logo-error-msg,
.success-msg {
    background-color: snow;
    border: 1px solid #ffdfdc;
    margin: 0 auto;
    padding: 5px 8px;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-radius: 6px;
    -webkit-box-shadow: 0 2px 4px 0 rgba(126, 159, 114, .17);
    box-shadow: 0 2px 4px 0 rgba(126, 159, 114, .17);
}

small {
    font-size: 85%;
    color: #666;
}

.payslip-generator-main .container.w-container {
    width: 100%;
    display: inline-block !important;
    margin: 0px auto;
}

.payslip-generator-main {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}

.close-svg {
    width: 14px;
    vertical-align: middle;
    margin-left: 10px;
    cursor: pointer;
    float: right;
}

#image_upload_err {
    display: flex;
    align-items: center;
}

#image_upload_err small {
    margin: 0px 5px;
    line-height: normal;
}

.payslip-header-container,
.upload-logo-section {
    width: 50%;
}

.payslip-generator .add-logo {
    padding: 20px 20px 15px;
    border: 1px dashed #0649ED;
    border-radius: 6px;
    font-size: 14px;
    width: 37%;
    color: #0649ED;
    cursor: pointer;
    text-align: center;
    background-color: #e6f0ff;
    position: relative;
    margin: 0;
}

.payslip-generator .upload-svg {
    width: 24px;
}

#display_image {
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    height: 85px;
    display: none;
}

.payslip-generator .img-option {
    position: relative;
    left: 0;
    margin-left: auto;
    margin-right: -25px;
    width: 25px;
    top: 10px;
    border: 1px solid #ececec;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

.payslip-generator .img-option div {
    padding: 5px 5px 2px;
    background-color: #f9f9fb;
    border-bottom-right-radius: 6px;
}

.payslip-generator .delete-svg,
.payslip-generator .edit-svg {
    width: 14px;
    padding-top: 2px;
}

.payslip-generator .img-option div:first-child {
    border-bottom: 1px solid #ececec;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 0;
}

.upload-section-note {
    margin: 0 20px;
    font-size: 14px;
    width: 50%;
    font-weight: 500;
}

.blog-page-new .upload-section-note p {
    line-height: 20px;
}

.upload-section-note div {
    color: #676767;
    font-size: 10px;
    padding-top: 5px;
}

.upload-logo-section {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 16px;
    align-items: center;
}

.upload-section-note div {
    color: #333;
    font-size: 11px;
    padding-top: 3px;
    line-height: 14px;
}

.payslip-month {
    margin: 10px 0 5px;
    color: #222;
    font-size: 16px;
    font-family: 'Figtree-Semibold';
}

.pay-period {
    border: none !important;
    font-size: 20px !important;
    float: right;
    text-align: right;
    padding: 0 !important;
    width: 45%;
}

.payslip-generator .input-details {
    margin: 10px auto 0;
}

.company-details {
    width: 100%;
}

/* .payslip-generator .form-data {
    padding: 0 0 16px;
} */
.hide {
    display: none;
}

.income-details-header {
    padding: 0;
    display: block;
    margin: 20px 0px 10px;
}

.t-bold {
    font-weight: 600;
    line-height: 1.5;
    font-family: 'Figtree-bold';
    color: #212529;
}

.mandate {
    color: #FA4616;
}

.payslip-details .employee-details {
    width: calc(100% + 16px);
    margin: 0px -8px;
    border-top: 0;
    font-size: 14px;
    display: flex;
    flex-wrap: wrap;
}

.pright-medium {
    padding-right: 10px;
    display: flex;
    align-items: center;
    height: 100%;
    font-family: 'Figtree-Bold';
}

/* .payslip-details .employee-details input {
    width: 100%;
    max-width: calc(100% - 155px);
} */
.employee-pay-fild-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 10px;
    padding: 0 8px;
    width: 50%;
    float: left;
}

/* .employee-pay-fild-group label{
    margin-bottom: 0px;
    min-width: 155px;
    display: flex;
    justify-content: flex-start;
    color: #222;
    font-size: 16px;
} */
.add-custom-fields span,
.add-deductions span,
.add-earnings span {
    cursor: pointer;
    color: #0649ED;
    font-size: 16px;
    font-weight: 500;
    display: flex;
}

.payslip-generator .add-svg {
    width: 15px;
    margin: 0 5px 0px 0px;
    vertical-align: text-bottom;
}

.t-bold.income-details-header {
    padding: 0px 0px 5px;
    margin: 0px 0px 15px;
}

.payslip-income-dtl-main {
    width: 100%;
}

.income-details {
    width: 100%;
    -webkit-box-shadow: 0 4px 9px 0 rgba(28, 29, 83, .04);
    box-shadow: 0 4px 9px 0 rgba(28, 29, 83, .04);
}

.salary-components-table {
    border: 1px solid #D8D8D8;
    border-top-right-radius: 6px !important;
    border-top-left-radius: 6px !important;
    border-spacing: 0px;
}

/* .salary-components-table table:first-child {
    border-right: 1px solid #D8D8D8;
} */
.salary-components-table table th {
    color: #333;
    border-bottom: 1px solid #D8D8D8;
    padding: 12px 10px;
    font-weight: 500;
    height: 28px;
    font-size: 15px;
}

.salary-components-table table th:first-child {
    text-align: left;
    /* width: 58%; */
}

.salary-rows .t-deduction table {
    border-right: 0;
}

.salary-components-table table th:nth-of-type(2) {
    text-align: right;
    width: 30%;
    padding-right: 10px;
}

.salary-components-table table tbody td {
    padding: 10px;
    font-weight: 200;
}

.salary-components-table table tbody tr:nth-child(2) td {
    padding-top: 10px;
}

.footer-table {
    border: 1px solid #f5f5f8;
    border-top: none;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    border-collapse: initial;
    background-color: #ffffff;
    width: 100%;
    border-spacing: 0px;
}

.footer-table table td {
    padding: 12px 10px;
    font-weight: 500;
    font-size: 15px;
}

.footer-table table:first-child {
    border-right: 1px solid #f5f5f8;
    width: 100%;
}

.t-deduction tfoot,
.t-earning tfoot {
    display: none;
}

.net-pay {
    margin: 20px 0px 20px;
}

.net-pay table {
    border-radius: 8px;
    border: 1px solid #D8D8D8;
    border-spacing: 0;
    width: 100%;
    border-collapse: separate;
}

.net-pay table td {
    padding: 10px;
    font-size: 18px;
    width: 75%;
}

.net-pay .help-text {
    font-size: 14px;
    padding-top: 0px;
    color: #333;
    font-family: 'Figtree-Regular';
}

.net-pay table td:last-child {
    background-color: #daf2e5;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding: 20px 30px 20px 10px;
    width: 25%;
}

.net-pay .amount-in-words {
    font-size: 14px;
}

.in-words {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text-danger {
    color: #f44040;
    padding-top: 5px;
}

.salary-components-table table {
    border-spacing: 0px;
    width: 100%;
}

/* .add-deductions, .add-earnings {
    padding: 12px 10px!important;
} */
.generate-payslip {
    margin: 40px 0px;
    text-align: center;
    display: flex;
    justify-content: center;
}

.generate-payslip button,
buttonz {
    color: #fff;
    background: #ed6900;
    font-size: 1em;
    font-weight: 600;
    display: inline-block;
    cursor: pointer;
    border: none;
    border-radius: 5px;
    min-width: 200px;
    padding: 12px 15px;
    opacity: 1;
    font-family: "Open Sans", sans-serif !important;
    transition: all 0.2s linear;
}

.payslip-generator .reset-svg {
    width: 20px;
    padding-right: 5px;
}

.form-control input {
    border: none;
    box-sizing: border-box;
    outline: 0;
    padding: .75rem;
    position: relative;
    width: 100%;
}

input.large[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;

}

.form-control {
    position: relative;
}

.employee-pay-fild-group input.form-control[type="date"] {
    /* background: url(../../assets/images/calendar.png); */
    background: url(../images/calendar.png);
    background-size: 16px;
    background-repeat: no-repeat;
    line-height: 14px;
    background-position: 4% 50%;
    text-transform: uppercase;
}

/*03/04/2023*/
.t-deduction tfoot,
.t-earning tfoot {
    background-color: #f9f9fb;
}

.t-deduction tfoot td,
.t-earning tfoot td {
    padding: 10px;
    font-weight: 500;
    font-size: 14px;
}

.salary-components-table {
    width: 100%;
    border-collapse: separate;
}

/*04//04/2023*/
.remove-svg {
    width: 15px;
    vertical-align: text-top;
}

.closeicon {
    cursor: pointer;
    display: inline-block !important;
}

.salary-components-table table tbody td label {
    margin: 0;
    /* font-size: 14px;
    font-weight: normal; */
}

.employee-pay-fild-group-append {
    width: 100%;
    max-width: 155px;
    display: flex;
    flex-wrap: wrap;
}

.payslip-details .employee-details .employee-pay-fild-group-append input {
    max-width: calc(100% - 10px);
}

.payslip-details .employee-details .employee-pay-fild-group-append input {
    max-width: calc(100% - 25px);
    margin-right: 10px;
}

.employee-pay-fild-group .closeicon {
    margin-left: 10px;
}

/*05/04/2023*/
/* span.customfield {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0 0 10px;
    padding: 0 8px;
    width: 50%;
    float: left;
} */
span.customfield.hide {
    display: none;
}

/* .payslip-details .employee-details span.customfield input {
    max-width: calc(100% - 25px);
    margin-right: 10px;
} */
/* span.customfield .custom-field-name{
    margin-bottom: 0px;
    min-width: 155px;
    max-width: 155px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
} */
.payslip-details .employee-details .custom-field-value .large {
    width: 100%;
    max-width: 100%;
}

/* .custom-field-value {
    width: 100%;
    max-width: calc(100% - 180px);
} */
.payslip-details .employee-details span.customfield .custom-field-value input {
    max-width: 100%;
}

span.customfield .closeicon {
    margin-left: 10px;
}

/*06/04//2023*/
.pay-period {
    color: #333;
}

input.pay-period[type="month"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    width: auto;
}

.payslip-header input.pay-period {
    position: relative;
}

input.pay-period[type="month"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
}

input.pay-period[type="month"]:hover {
    background: url(../../assets/images/calendar.png);
    background-size: 16px;
    background-repeat: no-repeat;
    padding-right: 28px !important;
    background-position: 98%;
}

/*07/04/2023*/
.payslip-header {
    display: flex;
    width: 100%;
    max-width: 80%;
    justify-content: flex-end;
    margin-left: auto;
}

.payslip-header select.large {
    width: 70%;
    margin-right: 10px;
    cursor: pointer;
}

.payslip-header input.large {
    width: 30%;
    text-align: center;
}

.payslip-header input[type=number]::-webkit-inner-spin-button,
.payslip-header input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

/* .pdf-employee-append-filds {
    width: 100%;
    padding: 10px 0;
    border-top: 2px dashed #d8d8d8;
    float: left;
    margin-bottom: 20px;
} */
label.add-logo.uploaded:hover .img-option.hide {
    display: block;
}

p#indian_amount_in_words {
    display: unset;
    font-weight: 600;
}

/*10/04/2023*/
.pdf-deduction-sing-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #333;
    padding: 10px 20px;
}

.pdf-deduction-sing-row strong {
    font-weight: 700;
}

.pdf-deduction-total {
    background-color: #FFF4E1;
}

.pdf-earnings-total,
.pdf-deduction-total {
    position: absolute;
    bottom: 0px;
    background-color: white;
    border-top: 1px solid #d8d8d8;
}

.pdf-earnings-sing {
    padding-bottom: 38px;
    position: relative;
}

.pdf-back-arw {
    position: absolute;
    left: 0px;
    margin-top: -45px;
}

#back_form_field img {
    max-width: 25px;
    filter: invert(10) brightness(0.5) contrast(10) grayscale(10);
}

.pdf-sub-cnt {
    position: relative;
}

.pdf-employee-append-filds {
    display: flex;
    flex-wrap: wrap;

}

.pdf-employee-append-filds .pdf-employee-summary-sing-row {
    width: 50%;
}

img#imgPreview {
    max-height: 85px;
}

.payslip-generator .img-option {
    top: -30px;
    left: 30px;
}

#print_company_logo #display_image {
    display: block;
}

img#payslip_logo_preview {
    max-height: 85px;
}

.add-logo.uploaded {
    padding: 0px !important;
    border: 0px !important;
    max-width: 120px;
}

#display_image {
    position: relative;
}

.company-logo-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.payslip-generator .img-option {
    top: 50%;
    transform: translateY(-50%);
    left: unset;
    right: 0;
    position: absolute;
    opacity: 0;
}

#display_image:hover .img-option {
    opacity: 1;
}

input#payslip_logo_new {
    position: absolute;
    left: 0;
    max-width: 110px;
    height: 100%;
}

#print_indian_amount_in_words {
    width: auto;
    display: inline-block;
}

#amount-in-words p {
    font-family: 'Figtree-Semibold';
}

.pdf-head-sing.pdf-head-sing-left {
    display: flex;
    align-items: center;
    /* flex-wrap: wrap; */
}

#print_company_logo {
    padding-right: 15px;
}

#print_company_logo img {
    max-width: 120px;
}

.pdf-head h3 {
    line-height: normal;
    margin-bottom: 0px;
}

.pdf-head h6 {
    line-height: normal;
}

.pdf-main {
    padding: 0px 0px 30px;
}

/*12/04/2023*/
.net-pay table td:last-child {
    background-color: #daf2e5;
    text-align: right !important;
    padding: 10px 15px;
}

@media print {
    body {
        -webkit-print-color-adjust: exact;
    }
}

/*26/04/2023*/
.salary-components-table input[type=number]::-webkit-inner-spin-button,
.salary-components-table input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

.salary-components-table input[type=number] {
    text-align: right;
}

.pdf-employee-append-filds {
    margin-bottom: 0px;
}

.pdf-employee-summary-left h6 {
    margin-bottom: 10px;
}

.pdf-head {
    margin: 0px;
}

.pdf-earnings-sing-row,
.pdf-deduction-sing-row {
    padding: 5px 20px;
}

.pdf-earnings-deduction .pdf-earnings-sing-row,
.pdf-earnings-deduction .pdf-deduction-sing-row {
    padding: 5px 15px;
}

.pdf-earnings-deduction {
    padding: 0px;
}


.pdf-main {
    padding: 0px 0px 20px;
}

.pdf-employee-summary-sing-row label {
    margin-bottom: 0px;
}

.new-btn-outline {
    border-color: #222;
    color: #222 !important;
}

.border-bottom {
    border-bottom-color: #D8D8D8 !important;
}

.new-table-main table.salary-components-table tr td {
    height: 59px;
}

.payslip-header .form-control {
    color: #777;
    font-family: 'Figtree-Regular';
}

#back_form_field {
    color: #0649ED;
}

#print_employee_append_filds:has(div){
    margin-bottom: 20px;
}

.pdf-main .pdf-employee-append-filds {
    margin-bottom: 0;
}

/* custom css start */
.pdf-employee-summary-sing-row label {
    font-family: 'Figtree-Regular';
}

#print_payslip_month,
#print_payslip_years {
    font-size: 18px;
    font-family: 'Figtree-Bold';
}

.pdf-head-sing h6 {
    font-size: 16px;
    font-family: 'Figtree-Regular';
    color: #666;
}

.upload-section-note {
    font-family: 'Figtree-Regular';
}

#print_btn {
    min-width: 200px;
}


/* new style */
.new-row {
    display: flex;
    flex-wrap: wrap;
    --bs-gutter-x: 10px;
    margin-right: calc(-1 * var(--bs-gutter-x));
    margin-left: calc(-1 * var(--bs-gutter-x));
    width: calc(100% + 2 * var(--bs-gutter-x));
}

.new-row>* {
    padding-right: calc(var(--bs-gutter-x) * 1) !important;
    padding-left: calc(var(--bs-gutter-x) * 1) !important;
}

.gap-y-14 {
    row-gap: 14px;
}

.form-group:has(.form-control[required]) .form-label::after {
    content: "*";
    color: #EF4444;
    padding-left: 2px;
    font-size: 14px;
}

.form-label {
    line-height: normal;
    font-size: 14px;
}

#print_company_logo:empty {
    padding: 0;
}

#add_custom_field svg,
#add_earnings svg,
#add_deductions svg {
    margin: 0 3px 0 0;
}

span.customfield {
    display: flex;
}

#pay_period::-webkit-calendar-picker-indicator,
#payment_date::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    z-index: 2;
}


input[type=date].form-control::after,
input[type=month].form-control::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='20px' viewBox='0 -960 960 960' width='20px' fill='%239ca3af'%3E%3Cpath d='M200-80q-33 0-56.5-23.5T120-160v-560q0-33 23.5-56.5T200-800h40v-80h80v80h320v-80h80v80h40q33 0 56.5 23.5T840-720v560q0 33-23.5 56.5T760-80H200Zm0-80h560v-400H200v400Zm0-480h560v-80H200v80Zm0 0v-80 80Zm280 240q-17 0-28.5-11.5T440-440q0-17 11.5-28.5T480-480q17 0 28.5 11.5T520-440q0 17-11.5 28.5T480-400Zm-188.5-11.5Q280-423 280-440t11.5-28.5Q303-480 320-480t28.5 11.5Q360-457 360-440t-11.5 28.5Q337-400 320-400t-28.5-11.5ZM640-400q-17 0-28.5-11.5T600-440q0-17 11.5-28.5T640-480q17 0 28.5 11.5T680-440q0 17-11.5 28.5T640-400ZM480-240q-17 0-28.5-11.5T440-280q0-17 11.5-28.5T480-320q17 0 28.5 11.5T520-280q0 17-11.5 28.5T480-240Zm-188.5-11.5Q280-263 280-280t11.5-28.5Q303-320 320-320t28.5 11.5Q360-297 360-280t-11.5 28.5Q337-240 320-240t-28.5-11.5ZM640-240q-17 0-28.5-11.5T600-280q0-17 11.5-28.5T640-320q17 0 28.5 11.5T680-280q0 17-11.5 28.5T640-240Z'/%3E%3C/svg%3E");
    position: absolute;
    top: 50%;
    transform: translateY(-10px);
    right: 10px;
}

input.form-control.hidden-arrow[type=number]::-webkit-inner-spin-button,
input.form-control.hidden-arrow[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

table.salary-components-table::before {
    position: absolute;
    content: '';
    border-right: 1px solid #D8D8D8;
    width: 1px;
    height: calc(100% + 45px);
    right: 0;
    left: 0;
    margin: 0 auto;
    top: 0;
}

#back_form_field {
    color: #222;
    display: flex;
    align-items: center;
    font-size: 16px;
    font-family: "figtree-bold";
}

#print_employee_append_filds h5.new-tit-h5 {
    display: none;
}

#print_employee_append_filds:has(div) h5.new-tit-h5 {
    display: block;
}

/* custom css end */

/* pdf css start */
.pdf-main {
    width: 100%;
}

.pdf-container {
    width: 100%;
    border: 1px solid #D8D8D8;
    padding: 20px;
    border-radius: 5px;
}

.pdf-head {
    width: 100%;
    display: flex;
    /* flex-wrap: wrap; */
    align-items: center;
    justify-content: space-between;
    padding: 0 0 15px;
    border-bottom: 1px solid #e4e4e4;
}

.pdf-head h3 {
    font-size: 18px;
    color: #222;
    font-family: 'Figtree-Bold';
    margin-bottom: 5px;
}

.pdf-head h6 {
    font-size: 16px;
    color: #333;
    font-family: 'Figtree-Semibold';
}

.text-right {
    text-align: right;
}

.pdf-head-sing.text-right h3 {
    margin-bottom: 0px;
    font-size: 16px;
}

.pdf-employee-summary {
    width: 100%;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 10px 10px 50px;
    padding: 20px 0;
}

.pdf-employee-summary-left {
    width: 40%;
}

/* .pdf-employee-summary-left h6 {
    font-size: 18px;
    color: #222;
    font-family: 'Figtree-Bold';
} */
.pdf-employee-summary-sing-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin-top: 5px;
}

.pdf-employee-summary-sing-row label {
    font-size: 14px;
    color: #222;
    min-width: 125px;
}

.pdf-employee-summary-sing-row span {
    font-size: 14px;
    color: #676767;
}

.pdf-employee-summary-sing-row span strong {
    font-family: 'Figtree-Semibold';
    color: #333;
    padding-left: 10px;
    font-size: 14px;
}

.pdf-employee-net-pay {
    width: 70%;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #d8d8d8;
    border-radius: 7px;
    overflow: hidden;
    margin-left: auto;
}

.pdf-employee-head-bg {
    width: 100%;
    background-color: #daf2e5;
    padding: 10px 20px;
}

.pdf-employee-head-txt h3,
.pdf-employee-head-txt h3 span {
    font-family: 'Figtree-Semibold';
    color: #222;
}

.pdf-employee-head-txt h1 {
    font-size: 24px;
    font-weight: 700;
    color: #222;
    padding-left: 8px;
}

.pdf-employee-head-txt h6 {
    font-size: 14px;
    color: #333;
    padding-left: 8px;
}

.pdf-employee-summary-right {
    width: 50%;
}

.pdf-employee-head-dtl {
    width: 100%;
    padding: 10px 20px;
}

.pdf-earnings-deduction {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #d8d8d8;
    border-radius: 6px;
    overflow: hidden;
}

.pdf-earnings-sing {
    width: 50%;
}

.pdf-earnings-sing-head {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 15px;
    margin: 0;
    border-bottom: 1px solid #d8d8d8;
    justify-content: space-between;
}

.pdf-earnings-sing-head h5 {
    font-size: 14px;
    color: #222;
    font-family: 'Figtree-Bold';
}

.pdf-earnings-sing-row {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #333;
    padding: 10px 20px;
}

.pdf-earnings-sing-row strong {
    font-weight: 700;
}

/* .net-pay {
    margin: 60px 0px 40px;
} */

.net-pay table {
    border-radius: 6px;
    border: 1px solid #D8D8D8;
    border-spacing: 0;
    width: 100%;
}

.net-pay table td {
    padding: 10px 15px;
    width: 80%;
    font-size: 14px;
}

.net-pay table td>div {
    font-size: 16px;
    font-family: 'Figtree-Bold';
    text-transform: capitalize;
}

.net-pay .help-text {
    font-size: 14px;
    font-weight: normal;
    color: #676767;
    text-transform: unset;
}

.net-pay table td:last-child {
    background-color: #edfcf1;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 10px 30px;
    width: 20%;
}

/* .net-pay .amount-in-words {
    font-size: 14px;
    padding: 25px 0px 15px;
} */

.text-center {
    text-align: center;
}

.text-semibold {
    font-weight: 600;
}

.pdf-employee-net-pay .pdf-employee-summary-sing-row label {
    min-width: 68px;
}

#print_company_logo {
    margin-bottom: 0 !important;
}


/* pdf css end */



@media screen and (max-width:1200px) {
    .upload-section-note {width: 100%; max-width: 180px; margin: 0 0 0 15px;}

    /* New Design changes */
    .payslip-header {max-width: 90%;}

    .pdf-main .net-pay .amount-in-words>div {width: calc(100% - 230px); text-align: left;}

    .payslip-header {max-width: 100%;gap:10px;}
    .payslip-header .form-control.col-lg-6 {max-width: 56%;flex: 0 0 56%;}
    .payslip-header .form-control.col-lg-4 {max-width: 40%;flex: 0 0 40%;margin: 0 !important;}
    .upload-section-note {width: 100%;max-width: 190px;margin: 0;}
    #display_image .img-option {opacity: 1;}
}

@media screen and (max-width:991px) {
    table.salary-components-table::before {height: auto !important;}
    .application-header .application-title {font-size: 28px;}
    .header-description {margin: 10px auto 30px;}
    .input-form-container {padding: 20px; margin: 0px auto 40px;}
    .generate-payslip {margin: 0px 0px 20px;}
    .net-pay table td:last-child {padding: 10px 20px 10px 10px;}
    .net-pay table td {padding: 10px 15px;}

    /*05/04/2023*/
    .custom-field-value {max-width: 42%;}
    .employee-pay-fild-group.append-new-row input.large {max-width: 42%;}
    .employee-pay-fild-group.append-new-row .employee-pay-fild-group-append input.large {max-width: calc(100% - 25px);}
    .net-pay table td {width: 70%;}

    /*12/04/2023*/
    .net-pay table td:last-child {padding: 10px 20px; width: 30%;}
    .pdf-employee-net-pay {width: 70%; max-width: 250px;}
    .pdf-employee-net-pay .pdf-employee-summary-sing-row label {min-width: 100px;}
    .net-pay table td.text-right {text-align: center;}

    /* New design Layout */
    /* .payslip-details .employee-details input {width: 100%;max-width: 100%;margin: 5px 0 0;} */
    .payslip-details .employee-details span.customfield input {max-width: calc(100% - 18px); margin: 5px 0;}

    /* span.customfield .custom-field-name{min-width: 100%;max-width: 100%;} */
    .custom-field-name .pright-medium {padding: 0 5px;}
    .remove-svg {width: 13px;}
    span.customfield .closeicon {margin: 0 0 0 5px;}
    .custom-field-value {max-width: calc(100% - 18px);}
    .payslip-header {flex-wrap: wrap;}
    .new-table-main#Income-dtl-mobile {border: 0; box-shadow: none; border-radius: 0; padding: 10px 0 0;}
    .new-table-main table.salary-components-table tr td {height: auto;}
    .new-table-main table.salary-components-table {border: 1px solid #D8D8D8;border-radius: 8px; border-collapse: collapse;}
    button#generate-payslip.new-btn {width: auto;}
    .new-table-main table.salary-components-table tr td label {margin: 0;}
    .new-table-main table.salary-components-table tr th:first-child {width: 65%;}

    
}

@media screen and (max-width:767px) {
    .upload-section-note {padding: 10px;}
    .payslip-generator .add-logo {width: 100%; max-width: 130px; padding: 20px 10px; margin-bottom: 0px;}
    .pay-period {width: 100%;}
    .pay-period {width: auto; float: left;}
    .payslip-generator .form-data .col-md-6 {width: 100%; padding-right: 0px !important;}
    .payslip-generator .col-md-12.form-data {padding-right: 0px !important;}
    .employee-pay-fild-group {width: 100%; justify-content: space-between;}

    /* .payslip-details .employee-details input {max-width: calc(100% - 160px);} */
    .salary-components-table table th {padding: 10px;}
    .salary-components-table table tbody td {padding: 3px 10px; font-size: 14px;}
    .salary-components-table tr.salary-rows td.t-earning,
    .salary-components-table tr.salary-rows td.t-deduction {width: 100%; float: left; margin-bottom: 20px; border-collapse: initial; border-radius: 6px; border: 1px solid #f5f5f8;}
    .salary-components-table table td.add-earnings,
    .salary-components-table table td.add-deductions {position: unset !important;}
    .net-pay table td,
    .net-pay table td:last-child {width: 100%; float: left; border-radius: 0px; text-align: left; padding: 10px 15px; font-size: 16px;}
    .net-pay table {border-radius: 6px;}
    .net-pay .amount-in-words {padding: 10px 0px;}
    .generate-payslip button {min-width: 130px; padding: 10px; margin: 0px 10px 0px 0px;}
    .generate-payslip button:last-child {min-width: 100px; margin-left: 15px;}
    .pay-period { font-size: 16px !important;}
    .payslip-month {margin: 0px 0px 3px;}
    .employee-pay-fild-group input.large[type="date"] {background-position: 2% 50%;}
    .add-deductions,
    .add-earnings {padding: 10px !important;}
    table.footer-table {display: none;}
    .salary-components-table {border: 0px; width: 100%;}
    .salary-components-table table tr th:last-child,
    .salary-components-table table tr td:last-child {padding: 0px;}
    .header-description {margin: 10px auto 20px; font-size: 15px; line-height: 22px;}
    .application-header .application-title {font-size: 26px;}
    .input-form-container {padding: 16px;}
    .salary-components-table table tbody tr td:first-child {width: 68%;}
    .income-details {box-shadow: none;}
    .net-pay {margin-top: 0}
    .t-deduction tfoot td:nth-child(2),
    .t-earning tfoot td:nth-child(2){padding-right: 20px;}
    .t-deduction tfoot,
    .t-earning tfoot {display: table-row-group;}
    .generate-payslip {margin: 0px 0px 10px;}
    .payslip-details .employee-details .append-new-row input {max-width: calc(100% - 190px);}
    .payslip-details .employee-details .employee-pay-fild-group-append input {max-width: calc(100% - 25px);}

    /*05/04/2023*/
    span.customfield {width: 100% !important; justify-content: space-between;}
    .custom-field-value {max-width: calc(100% - 190px);}

    /*07/04/23*/
    span.customfield .closeicon {display: block;}
    .net-pay table td {width: 70%;}
    .net-pay table td:last-child {padding: 10px; width: 30%; text-align: center;}

    /*12/04/2023*/
    .net-pay table td:last-child {float: none;}
    .closeicon {display: block;}
    .net-pay table td {width: 84%;}
    .net-pay .amount-in-words {font-size: 14px;}
    .pdf-employee-summary-sing-row label {min-width: 11 0px; margin: 0px;}
    .pdf-employee-summary-left {width: 100% !important;}
    .pdf-employee-summary-right {width: 100%; margin-top: 15px;}
    .pdf-employee-head-txt {border-left-width: 2px;}
    .pdf-employee-head-txt h1 {font-size: 16px;}
    .pdf-employee-head-dtl {padding: 10px;}
    .pdf-employee-net-pay {border-radius: 7px;}
    .pdf-earnings-sing {width: 100%; margin-bottom: 35px;}
    .pdf-earnings-sing-head {width: 100%; margin: 0px; padding: 10px;}
    .pdf-deduction-sing-row,
    .pdf-earnings-sing-row {padding: 5px 10px;}
    .pdf-earnings-deduction {border-radius: 0px; padding: 0px; border: 0px;}
    .pdf-earnings-sing {border-radius: 7px; border: 1px solid #e4e4e4; margin-bottom: 20px; padding-bottom: 0px;}
    .pdf-employee-append-filds {margin-bottom: 10px;}
    .pdf-earnings-total,
    .pdf-deduction-total {border-radius: 0px 0px 7px 7px; position: unset;}
    .pdf-employee-net-pay {max-width: 100%; width: 100%;}
    .pdf-employee-summary {padding: 0px 0px 20px;}
    .payslip-header .large {padding: 9px 10px !important;}
    .t-bold.income-details-header {margin: 0px 0px 5px;}
    #back_form_field img {max-width: 20px;}
    .pdf-head {margin: 0 0 20px;}
    .pdf-head-sing.pdf-head-sing-left {width: 100%;}
    .pdf-head-sing.text-right {width: 100%;}
    .pdf-employee-append-filds .pdf-employee-summary-sing-row {width: 100%; margin-top: 5px;}
    .pdf-earnings-sing-head h5 {font-size: 14px;}
    .pdf-earnings-sing-row span strong,
    .pdf-deduction-sing-row strong {font-size: 13px;}
    .pdf-employee-append-filds .pdf-employee-summary-sing-row label {min-width: 130px;}
    #print_company_logo {padding-right: 10px;}
    #print_company_logo img {max-width: 70px;}
    .generate-payslip button:last-child {margin: 0px;}
    .payslip-generator-main .container.w-container {max-width: 100%;}
    .pdf-employee-net-pay .pdf-employee-summary-sing-row label {min-width: 80px;}

    /* New design Layout changes */
    .payslip-details .employee-details span.customfield .custom-field-value input {width: 100%;}
    .income-details-header,
    .payslip-details {padding: 0;}
    .payslip-details .employee-details {margin: 5px -8px 10px; padding-top: 5px;}
    .net-pay table td,
    .net-pay table td:last-child {padding: 10px; border-radius: 0 5px 5px 0;}
    .upload-section-note {max-width: 100%; padding: 10px 0; margin: 0px;}
    .payslip-details.pt-2 {padding-top: 20px !important;}
    .pb-3.new-tit-h6 {margin-bottom: 10px !important; padding-bottom: 10px !important;}
    .input-form-container .btn-main.justify-content-center.mt-4.mb-4 {margin: 0 0 10px !important;}
    .payslip-header-container {width: 50%;}
    .pdf-earnings-sing-row.pdf-earnings-total strong {font-size: 14px;}
    .pdf-deduction-sing-row.pdf-deduction-total strong {font-size: 14px;}
    .net-pay .amount-in-words {flex-wrap: wrap;}
    .net-pay .amount-in-words button#print_btn {width: auto; margin: 10px 0;}
    .pdf-main .net-pay .amount-in-words>div {width: 100%;}
    .pdf-main .pdf-employee-append-filds {margin-bottom: 10px;}
    #print_address{display: flex; flex-wrap: wrap; gap: 5px;}

    .payslip-header-container, .upload-logo-section {width: 100%;}
    .payslip-header{justify-content: flex-start;}
    .payslip-header-container {width: 100%;text-align: left !important;}
    .payslip-month {margin: 0 0 5px;}
    .payslip-header .form-control.col-lg-6 {max-width: 58%;flex: 0 0 58%;}
    .payslip-details .employee-details span.customfield input {max-width: 100%;margin: 0;}
    span#amount-in-words {width: calc(100% - 130px);margin: 0 0 0 5px;}
    .payslip-details .employee-details {margin: 0;width: 100%;}
    .new-row>* {padding: 0 !important;}
    .new-row {width: 100%;margin: 0;}
    .new-table-main#Income-dtl-mobile{padding: 0;}
    .gap-y-14 {row-gap: 10px;}
}

@media screen and (max-width:575px) {
    .blog-main {padding: 0px 10px;}
    .payslip-header-container{width: 100%;}
    #print_payslip_month, #print_payslip_years{font-size: 16px;}
    .pdf-head-sing.text-right h6{font-size: 14px;}
    .pdf-employee-summary-left{width: 100% !important;}
}

@media screen and (max-width:480px) {
    .application-header .application-title {font-size: 24px;}
    .payslip-header-container,
    .upload-logo-section {width: 100%; margin-bottom: 0;}
    .pay-period {text-align: left;}
    .input-form-container {padding: 15px;}
    .payslip-generator .input-details {padding: 0px;}
    .t-bold.income-details-header {margin: 0px 0px 5px;}
    .large {padding: 8px 10px !important;}
    .salary-components-table table tbody tr td:nth-child(2) {min-width: 95px;}
    .header-description {font-size: 14px; line-height: 20px;}
    .payslip-generator .add-logo {max-width: 120px;}
    .upload-logo-section {display: flex;}
    .employee-pay-fild-group-append {max-width: 125px;}
    .employee-pay-fild-group .closeicon {margin-left: 0px;}
    .payslip-details .employee-details .append-new-row input {max-width: calc(100% - 150px);}
    .payslip-details .employee-details .employee-pay-fild-group-append input {max-width: calc(100% - 25px);}

    /*07/04/23*/
    .net-pay table td {width: 100%; float: left;}

    /*12/04/23*/
    .pdf-employee-summary-sing-row {margin-top: 5px;}
    .application-header .application-title {font-size: 20px;}
    .net-pay table td:last-child {text-align: left !important; width: 100%; float: left;}
    .net-pay .amount-in-words {font-size: 13px;}
    .net-pay {margin: 0;}
    .payslip-header .large {padding: 7px 10px !important;}
    .net-pay .help-text {padding-top: 2px;}
    .pdf-back-arw {margin-top: -42px;}
    .net-pay .amount-in-words {flex-wrap: wrap; text-align: left;}
    .net-pay .amount-in-words button#print_btn {margin-top: 10px;}

    /* New design changes */
    .new-table-main table.salary-components-table tr th:first-child {width: 60%;}
    .payslip-header .form-control.col-lg-4 {max-width: 37%; flex: 0 0 37%;}
    .payslip-header .form-control.col-lg-6 {max-width: 60%; flex: 0 0 60%;}
    .payslip-generator .details {flex-wrap: wrap; padding: 0;}
    .employee-pay-fild-group label {min-width: 138px;}
    .custom-field-value {max-width: calc(100% - 155px);}
    span.customfield .closeicon {margin-left: 4px;}
    .net-pay table td,
    .net-pay table td:last-child {border-radius: 0 0 5px 5px;}
    #print_indian_amount_in_words {line-height: normal;}
    .pdf-head{flex-wrap: wrap;}
    .payslip-header-container .payslip-header {width: 100%; margin-bottom: 0;}
    .pdf-head-sing.text-right{text-align: left !important;}
}