.paystub-generator-section{width:100%;position:relative;display:flex;align-items:center;flex-direction:column}.paystub-generator-section .grid-container .component{grid-column:1/span 4!important;display:flex;flex-direction:column;max-width:100%;width:100%}@media(min-width:768px){.paystub-generator-section .grid-container .component{grid-column:1/span calc(var(--grid-content-base-tablet-span) + 3)!important}}@media(min-width:1440px){.paystub-generator-section .grid-container .component{grid-column:1/span 12!important}}.paystub-generator-section .grid-container .component .hero-title-section{padding:0 1.5rem 3rem}.paystub-generator-section .grid-container .component .hero-title-section .container{max-width:64rem;margin:0 auto}.paystub-generator-section .grid-container .component .hero-title-section .text-center{text-align:center}.paystub-generator-section .grid-container .component .hero-title-section .hero-title{font-size:3rem;font-weight:700;margin-bottom:.5rem}.paystub-generator-section .grid-container .component .hero-title-section .text-foreground{color:#171717}.paystub-generator-section .grid-container .component .hero-title-section .highlight-blue{color:#3053ff}.paystub-generator-section .grid-container .component .hero-title-section .hero-subtitle{font-size:1.125rem;color:#344286}.paystub-generator-section .grid-container .component .header-bar{background-color:#111215;color:#fff;padding:32px 32px 22px;display:flex;flex-direction:column;gap:16px;border-top-left-radius:24px;border-top-right-radius:24px}@media(min-width:1024px){.paystub-generator-section .grid-container .component .header-bar{flex-direction:row;align-items:center;justify-content:space-between}}.paystub-generator-section .grid-container .component .header-bar .title-logo{display:flex;align-items:center;gap:8px}.paystub-generator-section .grid-container .component .header-bar .title-logo img{height:28px}.paystub-generator-section .grid-container .component .header-bar .title-logo span{font-weight:600;font-size:16px}.paystub-generator-section .grid-container .component .header-bar .actions{display:flex;flex-direction:row;flex-wrap:wrap;gap:8px;width:100%}@media(min-width:1024px){.paystub-generator-section .grid-container .component .header-bar .actions{flex-direction:row;flex-wrap:wrap;gap:8px;width:-moz-fit-content;width:fit-content}}.paystub-generator-section .grid-container .component .header-bar .actions button{display:flex;align-items:center;gap:8px;width:auto;padding:8px 12px;font-size:12px;font-weight:500;border-radius:6px;border:1px solid #bcc7ff;background-color:#fff;color:#3053ff;cursor:pointer;transition:all .2s ease;box-sizing:border-box}@media(min-width:1024px){.paystub-generator-section .grid-container .component .header-bar .actions button{font-size:14px;padding:8px 16px}}.paystub-generator-section .grid-container .component .header-bar .actions button svg{flex-shrink:0}.paystub-generator-section .grid-container .component .header-bar .actions button:hover:not(:disabled){background-color:#3053ff;color:#fff;border-color:#3053ff}.paystub-generator-section .grid-container .component .header-bar .actions button:focus-visible{outline:none;box-shadow:0 0 0 2px rgba(48,83,255,.3)}.paystub-generator-section .grid-container .component .header-bar .actions button:disabled{cursor:not-allowed;opacity:.5}.paystub-generator-section .grid-container .component>.main-body{display:flex;flex-direction:column;min-height:600px}@media(min-width:1024px){.paystub-generator-section .grid-container .component>.main-body{flex-direction:row}}.paystub-generator-section .grid-container .component>.main-body .tabs-list{background-color:#3053ff;width:100%;padding:16px 8px;border-bottom-left-radius:24px;display:flex;flex-direction:column;gap:8px}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tabs-dropdown-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:12px 16px;border-radius:12px;border:none;background-color:#3053ff;color:#fff;cursor:pointer;transition:background-color .2s ease}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tabs-dropdown-label{display:flex;align-items:center;gap:8px}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tabs-dropdown-label svg{width:20px;height:20px}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tabs-dropdown-label span{font-weight:500;font-size:14px}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tabs-dropdown-chevron{display:inline-block;transition:transform .2s ease}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tabs-dropdown-chevron.open{transform:rotate(180deg)}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tabs-trigger-list{display:none;flex-direction:column;gap:4px;margin-top:8px}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tabs-trigger-list.open{display:flex}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tab-trigger{display:flex;align-items:center;justify-content:flex-start;gap:12px;padding:10px 12px;width:100%;color:#fff;white-space:nowrap;background-color:rgba(0,0,0,0);border:none;border-radius:6px;cursor:pointer;font-weight:500;font-size:14px;transition:background-color .3s ease,box-shadow .3s ease}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tab-trigger svg{width:20px;height:20px;flex-shrink:0}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tab-trigger span{font-weight:500}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tab-trigger[data-state=active]{background-color:#4c6aff;box-shadow:0 2px 8px rgba(76,106,255,.4)}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tab-trigger[data-state=inactive]{background-color:rgba(0,0,0,0)}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tab-trigger:hover:not([data-state=active]){background-color:rgba(76,106,255,.5)}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tab-trigger:focus-visible{outline:none;box-shadow:0 0 0 2px hsla(0,0%,100%,.5)}@media(min-width:1024px){.paystub-generator-section .grid-container .component>.main-body .tabs-list{flex-direction:column;width:162px;padding:32px 8px}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tabs-dropdown-toggle{display:none}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tabs-trigger-list{display:flex!important;flex-direction:column;gap:8px;margin-top:0}.paystub-generator-section .grid-container .component>.main-body .tabs-list .tab-trigger{padding:12px 8px 12px 16px;width:100%}}.paystub-generator-section .grid-container .component>.main-body .content-and-preview{flex:1 1;display:flex;flex-direction:column;background:#f3f6ff}@media(min-width:1024px){.paystub-generator-section .grid-container .component>.main-body .content-and-preview{flex-direction:row}}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content{margin:0}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section{display:flex;flex-direction:column;gap:16px;width:90%;margin-top:48px;margin-right:auto;margin-left:auto}@media(min-width:1024px){.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section{margin-bottom:48px;margin-left:24px;width:196px}}@media(min-width:1280px){.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section{width:264px}}@media(min-width:1440px){.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section{width:442px}}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section label{color:#171717}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .logo-upload-area{display:flex;align-items:center;justify-content:center;width:100px;height:100px;border:2px dashed #d1d5db;border-radius:6px;background-color:#f9fafb;overflow:hidden;cursor:pointer;transition:border-color .2s ease}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .logo-upload-area:hover{border-color:#3053ff}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .logo-upload-area img{width:100%;height:100%;object-fit:cover}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .logo-upload-area .upload-placeholder{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .logo-upload-area .upload-placeholder svg{width:22px;height:22px}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .logo-upload-area .upload-placeholder span{font-size:12px;color:#6b7280}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .form-field{display:flex;flex-direction:column;gap:6px;width:100%;padding-right:4px}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .form-field.two-column{display:flex;flex-direction:column;gap:16px}@media(min-width:1440px){.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .form-field.two-column{flex-direction:row;gap:16px}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .form-field.two-column>*{flex:1 1;width:50%;min-width:0;box-sizing:border-box}}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .add-button{padding:.5rem 1rem;border-radius:.375rem;gap:.5rem;background-color:#fff;white-space:nowrap}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .add-button .svg{width:10px;height:10px}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .payment-type-group{margin-top:8px;display:flex;gap:16px}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .payment-type-option{display:flex;align-items:center;gap:8px}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .payment-type-label{cursor:pointer;font-weight:400}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .two-column-row{display:flex;flex-direction:column;gap:16px}@media(min-width:1440px){.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .two-column-row{flex-direction:row;gap:16px}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .two-column-row>*{flex:1 1;width:50%;min-width:0;box-sizing:border-box}}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .benefit-card,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .deduction-card{position:relative;padding:16px;border-radius:8px;border:1px solid #e5e7eb;background-color:#fff;box-shadow:0 1px 2px rgba(15,23,42,.04)}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .benefit-card.card,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .deduction-card.card{width:100%}@media(min-width:1024px){.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .benefit-card.card,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .deduction-card.card{width:100%}}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .benefit-card.card .card-content,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .deduction-card.card .card-content{padding:0}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .card-remove-button{position:absolute;top:8px;right:8px;border:none;background:rgba(0,0,0,0);color:#9ca3af;cursor:pointer;padding:4px;display:inline-flex;align-items:center;justify-content:center;transition:color .2s ease}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .card-remove-button:hover{color:#dc2626}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .card-remove-button .card-remove-icon{width:16px;height:16px}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .card-content{display:flex;flex-direction:column;gap:12px}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .card-two-column-row{display:flex;flex-direction:column;gap:16px}@media(min-width:1024px){.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .card-two-column-row{flex-direction:row}}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .card-two-column-row>div{width:100%}@media(min-width:1024px){.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .card-two-column-row>div{width:50%}}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .tab-content .form-section .add-button{margin-top:16px;width:100%;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:500}.paystub-generator-section .grid-container .component>.main-body .content-and-preview input[type=file]{display:none}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel{background-color:#f3f6ff;padding:16px;overflow:auto;width:100%;max-width:580px}@media(min-width:1024px){.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel{padding-top:48px;max-width:unset}}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview{max-width:580px;margin:0 auto;padding:32px;border-radius:12px;border:1px solid #d1d5db;box-shadow:0 2px 8px rgba(0,0,0,.1);background-color:#fff}@media(min-width:1024px){.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview{min-width:458px}}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container{display:flex;flex-direction:column;gap:24px;color:#111215}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .company-header{display:flex;flex-direction:column;gap:16px;padding-bottom:16px;border-bottom:1px solid #e5e7eb}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .company-header .header-content{display:flex;flex-direction:row;gap:16px}@media(min-width:1024px){.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .company-header .header-content{align-items:flex-start}}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .company-header .header-content .logo-container{width:60px;height:60px;border-radius:8px;display:flex;align-items:center;justify-content:center;overflow:hidden;background-color:#f3f4f6}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .company-header .header-content .logo-container img{width:100%;height:100%;object-fit:cover}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .company-header .header-content .logo-container svg{width:21px;height:20px}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .company-header .header-content .company-info{flex:1 1;display:flex;flex-direction:column;gap:4px}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .company-header .header-content .company-info h2{font-size:20px;font-weight:700;margin:0;line-height:normal}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .company-header .header-content .company-info p{font-size:14px;color:#6b7280;margin:0}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .company-header .header-content .header-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .company-header .header-content .header-right p{font-size:14px;font-weight:600;margin:0}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .company-header .header-content .header-right p.small{font-size:12px;color:#6b7280}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .employee-info{padding:8px 16px;border-radius:6px;background-color:#ebf1ff}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .employee-info p:first-child{font-weight:600;margin:0;font-size:14px}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .employee-info p{font-weight:500;margin:0;font-size:12px}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .benefits-row,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .deductions-row,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .earnings-row{font-family:var(--font-open-sans),sans-serif}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .benefits-row .section-header,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .deductions-row .section-header,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .earnings-row .section-header{display:flex;gap:8px;font-size:12px;font-weight:600;padding-bottom:8px;border-bottom:1px solid #e5e7eb;margin-bottom:0}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .benefits-row .section-row,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .deductions-row .section-row,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .earnings-row .section-row{display:flex;gap:8px;font-size:14px;padding:8px 0}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .benefits-row .section-row.total-row,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .deductions-row .section-row.total-row,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .earnings-row .section-row.total-row{font-weight:600;padding-top:8px;margin-top:8px;border-top:1px solid #e5e7eb}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .benefits-row.salary-layout .section-header>*,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .benefits-row.salary-layout .section-row>*,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .deductions-row.salary-layout .section-header>*,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .deductions-row.salary-layout .section-row>*,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .earnings-row.salary-layout .section-header>*,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .earnings-row.salary-layout .section-row>*{flex:1 1}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .benefits-row.salary-layout .section-header .text-right,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .benefits-row.salary-layout .section-row .text-right,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .deductions-row.salary-layout .section-header .text-right,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .deductions-row.salary-layout .section-row .text-right,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .earnings-row.salary-layout .section-header .text-right,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .earnings-row.salary-layout .section-row .text-right{text-align:right}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .benefits-row.hourly-layout .section-header>*,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .benefits-row.hourly-layout .section-row>*,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .benefits-row.salary-layout .total-row>:first-child,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .deductions-row.hourly-layout .section-header>*,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .deductions-row.hourly-layout .section-row>*,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .deductions-row.salary-layout .total-row>:first-child,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .earnings-row.hourly-layout .section-header>*,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .earnings-row.hourly-layout .section-row>*,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .earnings-row.salary-layout .total-row>:first-child{flex:1 1}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .benefits-row.hourly-layout .section-header .text-right,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .benefits-row.hourly-layout .section-row .text-right,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .deductions-row.hourly-layout .section-header .text-right,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .deductions-row.hourly-layout .section-row .text-right,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .earnings-row.hourly-layout .section-header .text-right,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .earnings-row.hourly-layout .section-row .text-right{text-align:right}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .benefits-row.hourly-layout .total-row>:first-child,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .deductions-row.hourly-layout .total-row>:first-child,.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .earnings-row.hourly-layout .total-row>:first-child{flex:3 1}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .net-pay-row{padding:16px;border-radius:6px;background-color:#ebf1ff;display:flex;justify-content:space-between;align-items:center}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .net-pay-row span{font-size:18px;font-weight:700}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .net-pay-row span.net-amount{font-size:24px;color:#3053ff}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .ytd-summary{display:flex;flex-direction:column;gap:16px}@media(min-width:1024px){.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .ytd-summary{flex-direction:row}}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .ytd-summary .ytd-card{padding:12px;border:1px solid #e5e7eb;border-radius:8px;background-color:#f5f8ff;flex:1 1}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .ytd-summary .ytd-card p{margin:0}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .ytd-summary .ytd-card p.label{font-size:12px;color:#6b7280;margin-bottom:4px;text-wrap-mode:nowrap}.paystub-generator-section .grid-container .component>.main-body .content-and-preview .preview-panel .paystub-preview .preview-container .ytd-summary .ytd-card p.value{font-weight:700;font-size:14px}.preview-panel .paystub-preview .preview-container .benefits-row,.preview-panel .paystub-preview .preview-container .deductions-row,.preview-panel .paystub-preview .preview-container .earnings-row{margin-top:8px}.preview-panel .paystub-preview .preview-container .benefits-row .section-header,.preview-panel .paystub-preview .preview-container .deductions-row .section-header,.preview-panel .paystub-preview .preview-container .earnings-row .section-header{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:600;padding-bottom:8px;border-bottom:1px solid #e5e7eb;margin-bottom:0}.preview-panel .paystub-preview .preview-container .benefits-row .section-row,.preview-panel .paystub-preview .preview-container .deductions-row .section-row,.preview-panel .paystub-preview .preview-container .earnings-row .section-row{display:flex;align-items:center;gap:8px;font-size:14px;padding:8px 0;border-bottom:1px solid rgba(0,0,0,0)}.preview-panel .paystub-preview .preview-container .benefits-row .section-row:last-child,.preview-panel .paystub-preview .preview-container .deductions-row .section-row:last-child,.preview-panel .paystub-preview .preview-container .earnings-row .section-row:last-child{border-bottom:none}.preview-panel .paystub-preview .preview-container .benefits-row .section-row.total-row,.preview-panel .paystub-preview .preview-container .deductions-row .section-row.total-row,.preview-panel .paystub-preview .preview-container .earnings-row .section-row.total-row{font-weight:600;padding-top:8px;margin-top:8px;border-top:1px solid #e5e7eb;border-bottom:none}.preview-panel .paystub-preview .preview-container .benefits-row .text-right,.preview-panel .paystub-preview .preview-container .deductions-row .text-right,.preview-panel .paystub-preview .preview-container .earnings-row .text-right{text-align:right}.preview-panel .paystub-preview .preview-container .benefits-row.benefits-row .section-header>*,.preview-panel .paystub-preview .preview-container .benefits-row.benefits-row .section-row>*,.preview-panel .paystub-preview .preview-container .benefits-row.deductions-row .section-header>*,.preview-panel .paystub-preview .preview-container .benefits-row.deductions-row .section-row>*,.preview-panel .paystub-preview .preview-container .benefits-row.hourly-layout .section-header>*,.preview-panel .paystub-preview .preview-container .benefits-row.hourly-layout .section-row>*,.preview-panel .paystub-preview .preview-container .benefits-row.salary-layout .section-header>*,.preview-panel .paystub-preview .preview-container .benefits-row.salary-layout .section-row>*,.preview-panel .paystub-preview .preview-container .deductions-row.benefits-row .section-header>*,.preview-panel .paystub-preview .preview-container .deductions-row.benefits-row .section-row>*,.preview-panel .paystub-preview .preview-container .deductions-row.deductions-row .section-header>*,.preview-panel .paystub-preview .preview-container .deductions-row.deductions-row .section-row>*,.preview-panel .paystub-preview .preview-container .deductions-row.hourly-layout .section-header>*,.preview-panel .paystub-preview .preview-container .deductions-row.hourly-layout .section-row>*,.preview-panel .paystub-preview .preview-container .deductions-row.salary-layout .section-header>*,.preview-panel .paystub-preview .preview-container .deductions-row.salary-layout .section-row>*,.preview-panel .paystub-preview .preview-container .earnings-row.benefits-row .section-header>*,.preview-panel .paystub-preview .preview-container .earnings-row.benefits-row .section-row>*,.preview-panel .paystub-preview .preview-container .earnings-row.deductions-row .section-header>*,.preview-panel .paystub-preview .preview-container .earnings-row.deductions-row .section-row>*,.preview-panel .paystub-preview .preview-container .earnings-row.hourly-layout .section-header>*,.preview-panel .paystub-preview .preview-container .earnings-row.hourly-layout .section-row>*,.preview-panel .paystub-preview .preview-container .earnings-row.salary-layout .section-header>*,.preview-panel .paystub-preview .preview-container .earnings-row.salary-layout .section-row>*{flex:1 1}.preview-panel .paystub-preview .preview-container .benefits-row.hourly-layout .section-row.total-row>:first-child,.preview-panel .paystub-preview .preview-container .deductions-row.hourly-layout .section-row.total-row>:first-child,.preview-panel .paystub-preview .preview-container .earnings-row.hourly-layout .section-row.total-row>:first-child{flex:3 1}.preview-panel .paystub-preview .preview-container .net-pay-row{margin-top:16px;padding:16px;border-radius:8px;background-color:#ebf1ff;display:flex;justify-content:space-between;align-items:center}.preview-panel .paystub-preview .preview-container .net-pay-row span{font-weight:700}.preview-panel .paystub-preview .preview-container .net-pay-row span:first-child{font-size:18px}.preview-panel .paystub-preview .preview-container .net-pay-row .net-amount{font-size:24px;color:#3053ff}.preview-panel .paystub-preview .preview-container .ytd-summary{margin-top:16px;display:flex;flex-direction:column;gap:16px;font-size:14px}@media(min-width:768px){.preview-panel .paystub-preview .preview-container .ytd-summary{flex-direction:row}}.preview-panel .paystub-preview .preview-container .ytd-summary .ytd-card{flex:1 1;padding:12px;border-radius:12px;border:1px solid #e5e7eb;background-color:#f5f8ff}.preview-panel .paystub-preview .preview-container .ytd-summary .ytd-card p{margin:0}.preview-panel .paystub-preview .preview-container .ytd-summary .ytd-card .label{font-size:12px;margin-bottom:4px;color:#6b7280}.preview-panel .paystub-preview .preview-container .ytd-summary .ytd-card .value{font-weight:700}