/* Reset and Base Styles */
.cs-calculator {
max-width: 700px;
margin: 20px auto;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Card Container */
.cs-calculator-card {
background: #fafaff;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 24px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
[type=submit] {
color: #ffffff !important;
border: 1px solid #2b6cee !important;
padding: .7rem 1rem !important;
font-size: 1.2rem !important;
}
.cs-calculator-card:hover {
transform: translateY(-5px);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.15);
}
/* Title */
.cs-calculator-title {
font-size: 1.5rem;
font-weight: 600;
color: #1a1a1a;
margin: 0 0 20px;
text-align: center;
}
/* Form */
.cs-calculator-form {
display: flex;
flex-direction: column;
gap: 20px;
}
/* Form Group */
.cs-form-group {
display: flex;
flex-direction: column;
}
/* Inline layout for Annuity, CD, Interest Rate, ROI, Periodic Interest Rate, Effective Interest Rate, NPV, IRR, and MIRR Calculators on desktop */
@media (min-width: 769px) {
.cs-annuity-calculator .cs-form-group,
.cs-cd-calculator .cs-form-group,
.cs-ir-calculator .cs-form-group,
.cs-roi-calculator .cs-form-group,
.cs-pir-calculator .cs-form-group,
.cs-eir-calculator .cs-form-group,
.cs-npv-calculator .cs-form-group,
.cs-irr-calculator .cs-form-group,
.cs-mirr-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-annuity-calculator .cs-form-label,
.cs-cd-calculator .cs-form-label,
.cs-ir-calculator .cs-form-label,
.cs-roi-calculator .cs-form-label,
.cs-pir-calculator .cs-form-label,
.cs-eir-calculator .cs-form-label,
.cs-npv-calculator .cs-form-label,
.cs-irr-calculator .cs-form-label,
.cs-mirr-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-annuity-calculator .cs-form-input,
.cs-cd-calculator .cs-form-input,
.cs-ir-calculator .cs-form-input,
.cs-ir-radio-options,
.cs-roi-calculator .cs-form-input,
.cs-pir-calculator .cs-form-input,
.cs-eir-calculator .cs-form-input,
.cs-npv-calculator .cs-form-input,
.cs-npv-calculator .cs-npv-input-wrapper,
.cs-irr-calculator .cs-form-input,
.cs-irr-calculator .cs-irr-input-wrapper,
.cs-mirr-calculator .cs-form-input,
.cs-mirr-calculator .cs-mirr-input-wrapper {
flex: 1;
}
}
/* Label */
.cs-form-label {
font-size: 1rem;
font-weight: 500;
color: #333;
margin-bottom: 8px;
}
/* Input (text, number, select) */
.cs-form-input {
padding: 7px;
font-size: 1rem;
border: 1px solid #d1d5db;
border-radius: 8px;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
background: #fff;
width: 100%;
box-sizing: border-box;
}
.cs-form-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* Remove arrows from number inputs */
.cs-si-principal,
.cs-si-rate,
.cs-si-time,
.cs-ci-principal,
.cs-ci-rate,
.cs-ci-time,
.cs-rd-deposit,
.cs-rd-rate,
.cs-rd-tenure,
.cs-fd-principal,
.cs-fd-rate,
.cs-fd-tenure,
.cs-sip-investment,
.cs-sip-rate,
.cs-sip-tenure,
.cs-emi-principal,
.cs-emi-rate,
.cs-emi-tenure,
.cs-ar-initial,
.cs-ar-final,
.cs-ar-tenure,
.cs-annuity-principal,
.cs-annuity-rate,
.cs-annuity-term,
.cs-cd-principal,
.cs-cd-rate,
.cs-cd-term,
.cs-ir-principal,
.cs-ir-final,
.cs-ir-time,
.cs-roi-initial,
.cs-roi-final,
.cs-roi-costs,
.cs-roi-period,
.cs-pir-annual-rate,
.cs-pir-periods,
.cs-eir-nominal-rate,
.cs-npv-initial,
.cs-npv-rate,
.cs-npv-cash-flow,
.cs-irr-cash-flow,
.cs-mirr-finance-rate,
.cs-mirr-reinvestment-rate,
.cs-mirr-cash-flow {
-moz-appearance: textfield;
}
.cs-si-principal::-webkit-inner-spin-button,
.cs-si-principal::-webkit-outer-spin-button,
.cs-si-rate::-webkit-inner-spin-button,
.cs-si-rate::-webkit-outer-spin-button,
.cs-si-time::-webkit-inner-spin-button,
.cs-si-time::-webkit-outer-spin-button,
.cs-ci-principal::-webkit-inner-spin-button,
.cs-ci-principal::-webkit-outer-spin-button,
.cs-ci-rate::-webkit-inner-spin-button,
.cs-ci-rate::-webkit-outer-spin-button,
.cs-ci-time::-webkit-inner-spin-button,
.cs-ci-time::-webkit-outer-spin-button,
.cs-rd-deposit::-webkit-inner-spin-button,
.cs-rd-deposit::-webkit-outer-spin-button,
.cs-rd-rate::-webkit-inner-spin-button,
.cs-rd-rate::-webkit-outer-spin-button,
.cs-rd-tenure::-webkit-inner-spin-button,
.cs-rd-tenure::-webkit-outer-spin-button,
.cs-fd-principal::-webkit-inner-spin-button,
.cs-fd-principal::-webkit-outer-spin-button,
.cs-fd-rate::-webkit-inner-spin-button,
.cs-fd-rate::-webkit-outer-spin-button,
.cs-fd-tenure::-webkit-inner-spin-button,
.cs-fd-tenure::-webkit-outer-spin-button,
.cs-sip-investment::-webkit-inner-spin-button,
.cs-sip-investment::-webkit-outer-spin-button,
.cs-sip-rate::-webkit-inner-spin-button,
.cs-sip-rate::-webkit-outer-spin-button,
.cs-sip-tenure::-webkit-inner-spin-button,
.cs-sip-tenure::-webkit-outer-spin-button,
.cs-emi-principal::-webkit-inner-spin-button,
.cs-emi-principal::-webkit-outer-spin-button,
.cs-emi-rate::-webkit-inner-spin-button,
.cs-emi-rate::-webkit-outer-spin-button,
.cs-emi-tenure::-webkit-inner-spin-button,
.cs-emi-tenure::-webkit-outer-spin-button,
.cs-ar-initial::-webkit-inner-spin-button,
.cs-ar-initial::-webkit-outer-spin-button,
.cs-ar-final::-webkit-inner-spin-button,
.cs-ar-final::-webkit-outer-spin-button,
.cs-ar-tenure::-webkit-inner-spin-button,
.cs-ar-tenure::-webkit-outer-spin-button,
.cs-annuity-principal::-webkit-inner-spin-button,
.cs-annuity-principal::-webkit-outer-spin-button,
.cs-annuity-rate::-webkit-inner-spin-button,
.cs-annuity-rate::-webkit-outer-spin-button,
.cs-annuity-term::-webkit-inner-spin-button,
.cs-annuity-term::-webkit-outer-spin-button,
.cs-cd-principal::-webkit-inner-spin-button,
.cs-cd-principal::-webkit-outer-spin-button,
.cs-cd-rate::-webkit-inner-spin-button,
.cs-cd-rate::-webkit-outer-spin-button,
.cs-cd-term::-webkit-inner-spin-button,
.cs-cd-term::-webkit-outer-spin-button,
.cs-ir-principal::-webkit-inner-spin-button,
.cs-ir-principal::-webkit-outer-spin-button,
.cs-ir-final::-webkit-inner-spin-button,
.cs-ir-final::-webkit-outer-spin-button,
.cs-ir-time::-webkit-inner-spin-button,
.cs-ir-time::-webkit-outer-spin-button,
.cs-roi-initial::-webkit-inner-spin-button,
.cs-roi-initial::-webkit-outer-spin-button,
.cs-roi-final::-webkit-inner-spin-button,
.cs-roi-final::-webkit-outer-spin-button,
.cs-roi-costs::-webkit-inner-spin-button,
.cs-roi-costs::-webkit-outer-spin-button,
.cs-roi-period::-webkit-inner-spin-button,
.cs-roi-period::-webkit-outer-spin-button,
.cs-pir-annual-rate::-webkit-inner-spin-button,
.cs-pir-annual-rate::-webkit-outer-spin-button,
.cs-pir-periods::-webkit-inner-spin-button,
.cs-pir-periods::-webkit-outer-spin-button,
.cs-eir-nominal-rate::-webkit-inner-spin-button,
.cs-eir-nominal-rate::-webkit-outer-spin-button,
.cs-npv-initial::-webkit-inner-spin-button,
.cs-npv-initial::-webkit-outer-spin-button,
.cs-npv-rate::-webkit-inner-spin-button,
.cs-npv-rate::-webkit-outer-spin-button,
.cs-npv-cash-flow::-webkit-inner-spin-button,
.cs-npv-cash-flow::-webkit-outer-spin-button,
.cs-irr-cash-flow::-webkit-inner-spin-button,
.cs-irr-cash-flow::-webkit-outer-spin-button,
.cs-mirr-finance-rate::-webkit-inner-spin-button,
.cs-mirr-finance-rate::-webkit-outer-spin-button,
.cs-mirr-reinvestment-rate::-webkit-inner-spin-button,
.cs-mirr-reinvestment-rate::-webkit-outer-spin-button,
.cs-mirr-cash-flow::-webkit-inner-spin-button,
.cs-mirr-cash-flow::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Style select dropdown for Compound Interest, Fixed Deposits, SIP, Annuity, CD, Effective Interest Rate, and MIRR Calculators */
.cs-ci-frequency,
.cs-fd-frequency,
.cs-sip-frequency,
.cs-annuity-frequency,
.cs-cd-frequency,
.cs-eir-compounding,
.cs-mirr-frequency {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
/* Radio buttons for Interest Rate Calculator */
.cs-ir-radio-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.cs-ir-radio-options {
display: flex;
flex-direction: column;
gap: 8px;
}
@media (min-width: 769px) {
.cs-ir-radio-options {
flex-direction: row;
gap: 16px;
}
}
.cs-ir-radio-label {
display: flex;
align-items: center;
font-size: 0.9rem;
color: #333;
cursor: pointer;
}
.cs-ir-radio {
margin-right: 8px;
accent-color: #3b82f6;
}
/* Button */
.cs-form-button {
background: linear-gradient(90deg, #3b82f6, #2563eb);
color: #fff;
font-size: 1rem;
font-weight: 500;
padding: 12px;
border: none;
border-radius: 8px;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
}
.cs-form-button:hover {
background: linear-gradient(90deg, #2563eb, #1d4ed8);
transform: translateY(-2px);
}
.cs-form-button:active {
transform: translateY(0);
}
/* NPV, IRR, and MIRR shared styles */
.cs-npv-cash-flows,
.cs-irr-cash-flows,
.cs-mirr-cash-flows {
margin-top: 16px;
}
.cs-npv-cash-flows-title,
.cs-irr-cash-flows-title,
.cs-mirr-cash-flows-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-npv-cash-flows-container,
.cs-irr-cash-flows-container,
.cs-mirr-cash-flows-container {
display: flex;
flex-direction: column;
gap: 12px;
}
.cs-npv-cash-flow-group,
.cs-irr-cash-flow-group,
.cs-mirr-cash-flow-group {
position: relative;
}
.cs-npv-input-wrapper,
.cs-irr-input-wrapper,
.cs-mirr-input-wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.cs-npv-add-cash-flow,
.cs-npv-remove-cash-flow,
.cs-irr-add-cash-flow,
.cs-irr-remove-cash-flow,
.cs-mirr-add-cash-flow,
.cs-mirr-remove-cash-flow {
background: #e5e7eb;
color: #1a1a1a;
font-size: 0.85rem;
padding: 8px 12px;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s ease, transform 0.2s ease;
}
.cs-npv-add-cash-flow,
.cs-irr-add-cash-flow,
.cs-mirr-add-cash-flow {
margin-top: 12px;
background: #10b981;
color: #fff;
}
.cs-npv-remove-cash-flow,
.cs-irr-remove-cash-flow,
.cs-mirr-remove-cash-flow {
background: #ef4444;
color: #fff;
}
.cs-npv-add-cash-flow:hover,
.cs-irr-add-cash-flow:hover,
.cs-mirr-add-cash-flow:hover {
background: #059669;
transform: translateY(-2px);
}
.cs-npv-remove-cash-flow:hover,
.cs-irr-remove-cash-flow:hover,
.cs-mirr-remove-cash-flow:hover {
background: #dc2626;
transform: translateY(-2px);
}
.cs-npv-add-cash-flow:active,
.cs-npv-remove-cash-flow:active,
.cs-irr-add-cash-flow:active,
.cs-irr-remove-cash-flow:active,
.cs-mirr-add-cash-flow:active,
.cs-mirr-remove-cash-flow:active {
transform: translateY(0);
}
/* IRR and MIRR shared styles */
.cs-irr-instruction,
.cs-mirr-instruction {
font-size: 0.85rem;
color: #4b5563;
margin: 0 0 12px;
}
/* Result */
.cs-result {
margin-top: 20px;
padding: 12px;
font-size: 1rem;
font-weight: 500;
text-align: center;
border-radius: 8px;
}
.cs-result-success {
background: #ecfdf5;
color: #065f46;
}
.cs-result-success span {
font-weight: 600;
}
.cs-result-error {
background: #fef2f2;
color: #dc2626;
}
/* Flatpickr Customization for Age Calculator */
.cs-age-calculator .flatpickr-calendar {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.cs-age-calculator .flatpickr-day.selected,
.cs-age-calculator .flatpickr-day.startRange,
.cs-age-calculator .flatpickr-day.endRange {
background: #3b82f6;
border-color: #3b82f6;
}
/* Specific styles for Age Calculator */
.cs-age-calculator .cs-form-input.cs-age-dob {
/* Add specific styling if needed */
}
/* Specific styles for Simple Interest Calculator */
.cs-si-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Specific styles for Compound Interest Calculator */
.cs-ci-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Specific styles for Recurring Deposits Calculator */
.cs-rd-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Specific styles for Fixed Deposits Calculator */
.cs-fd-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Specific styles for SIP Return Calculator */
.cs-sip-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Specific styles for Loan EMI Calculator */
.cs-emi-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Specific styles for Annualized Return Calculator */
.cs-ar-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Specific styles for Annuity Payout Calculator */
.cs-annuity-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Specific styles for CD Interest Calculator */
.cs-cd-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Specific styles for Interest Rate Calculator */
.cs-ir-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Specific styles for ROI Calculator */
.cs-roi-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Specific styles for Periodic Interest Rate Calculator */
.cs-pir-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Specific styles for Effective Interest Rate Calculator */
.cs-eir-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Specific styles for NPV Calculator */
.cs-npv-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Specific styles for IRR Calculator */
.cs-irr-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Specific styles for MIRR Calculator */
.cs-mirr-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Mobile Responsiveness */
@media (max-width: 768px) {
.cs-calculator {
padding: 0 16px;
}
.cs-calculator-card {
padding: 16px;
}
.cs-calculator-title {
font-size: 1.25rem;
}
.cs-form-input,
.cs-form-button,
.cs-npv-add-cash-flow,
.cs-npv-remove-cash-flow,
.cs-irr-add-cash-flow,
.cs-irr-remove-cash-flow,
.cs-mirr-add-cash-flow,
.cs-mirr-remove-cash-flow {
font-size: 0.95rem;
padding: 10px;
}
.cs-result {
font-size: 0.9rem;
}
.cs-ci-frequency,
.cs-fd-frequency,
.cs-sip-frequency,
.cs-annuity-frequency,
.cs-cd-frequency,
.cs-eir-compounding,
.cs-mirr-frequency {
padding-right: 25px;
background-position: right 10px center;
}
.cs-npv-input-wrapper,
.cs-irr-input-wrapper,
.cs-mirr-input-wrapper {
flex-direction: column;
align-items: stretch;
}
.cs-npv-remove-cash-flow,
.cs-irr-remove-cash-flow,
.cs-mirr-remove-cash-flow {
margin-top: 8px;
width: 100%;
}
.cs-irr-instruction,
.cs-mirr-instruction {
font-size: 0.8rem;
}
}
@media (max-width: 480px) {
.cs-calculator {
padding: 0 12px;
}
.cs-calculator-card {
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.cs-form-label {
font-size: 0.85rem;
}
.cs-npv-cash-flows-title,
.cs-irr-cash-flows-title,
.cs-mirr-cash-flows-title {
font-size: 1rem;
}
}
/* Inline layout for Advanced Loan Repayment Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-loan-repayment-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-loan-repayment-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-loan-repayment-calculator .cs-form-input,
.cs-adv-loan-repayment-calculator .cs-term-wrapper {
flex: 1;
}
}
/* Remove arrows from number inputs */
.cs-adv-loan-repayment-principal,
.cs-adv-loan-repayment-rate,
.cs-adv-loan-repayment-term,
.cs-adv-loan-repayment-extra-payment {
-moz-appearance: textfield;
}
.cs-adv-loan-repayment-principal::-webkit-inner-spin-button,
.cs-adv-loan-repayment-principal::-webkit-outer-spin-button,
.cs-adv-loan-repayment-rate::-webkit-inner-spin-button,
.cs-adv-loan-repayment-rate::-webkit-outer-spin-button,
.cs-adv-loan-repayment-term::-webkit-inner-spin-button,
.cs-adv-loan-repayment-term::-webkit-outer-spin-button,
.cs-adv-loan-repayment-extra-payment::-webkit-inner-spin-button,
.cs-adv-loan-repayment-extra-payment::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Style select dropdown */
.cs-adv-loan-repayment-frequency,
.cs-adv-loan-repayment-term-unit {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
/* Term wrapper for term input and unit dropdown */
.cs-term-wrapper {
display: flex;
gap: 8px;
width: 100%;
}
.cs-term-wrapper .cs-adv-loan-repayment-term {
flex: 2;
}
.cs-term-wrapper .cs-adv-loan-repayment-term-unit {
flex: 1;
}
/* Amortization schedule */
.cs-amortization-schedule {
margin-top: 20px;
}
.cs-amortization-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-amortization-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-amortization-table th,
.cs-amortization-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: right;
}
.cs-amortization-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-amortization-table td {
background: #fff;
}
/* Toggle schedule button */
.cs-toggle-schedule {
background: #6b7280;
color: #fff;
font-size: 0.9rem;
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
margin-top: 12px;
transition: background 0.3s ease, transform 0.2s ease;
}
.cs-toggle-schedule:hover {
background: #4b5563;
transform: translateY(-2px);
}
.cs-toggle-schedule:active {
transform: translateY(0);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-term-wrapper {
flex-direction: column;
}
.cs-term-wrapper .cs-adv-loan-repayment-term,
.cs-term-wrapper .cs-adv-loan-repayment-term-unit {
flex: none;
}
.cs-amortization-table {
font-size: 0.85rem;
}
.cs-amortization-table th,
.cs-amortization-table td {
padding: 6px;
}
.cs-toggle-schedule {
width: 100%;
padding: 10px;
}
}
/* Inline layout for Advanced Loan Interest Rate Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-loan-ir-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-loan-ir-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-loan-ir-calculator .cs-form-input,
.cs-adv-loan-ir-calculator .cs-term-wrapper {
flex: 1;
}
}
/* Remove arrows from number inputs */
.cs-adv-loan-ir-principal,
.cs-adv-loan-ir-payment,
.cs-adv-loan-ir-term {
-moz-appearance: textfield;
}
.cs-adv-loan-ir-principal::-webkit-inner-spin-button,
.cs-adv-loan-ir-principal::-webkit-outer-spin-button,
.cs-adv-loan-ir-payment::-webkit-inner-spin-button,
.cs-adv-loan-ir-payment::-webkit-outer-spin-button,
.cs-adv-loan-ir-term::-webkit-inner-spin-button,
.cs-adv-loan-ir-term::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Style select dropdown */
.cs-adv-loan-ir-frequency,
.cs-adv-loan-ir-term-unit {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
/* Term wrapper for term input and unit dropdown */
.cs-term-wrapper {
display: flex;
gap: 8px;
width: 100%;
}
.cs-term-wrapper .cs-adv-loan-ir-term {
flex: 2;
}
.cs-term-wrapper .cs-adv-loan-ir-term-unit {
flex: 1;
}
/* Amortization schedule */
.cs-amortization-schedule {
margin-top: 20px;
}
.cs-amortization-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-amortization-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-amortization-table th,
.cs-amortization-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: right;
}
.cs-amortization-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-amortization-table td {
background: #fff;
}
/* Toggle schedule button */
.cs-toggle-schedule {
background: #6b7280;
color: #fff;
font-size: 0.9rem;
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
margin-top: 12px;
transition: background 0.3s ease, transform 0.2s ease;
}
.cs-toggle-schedule:hover {
background: #4b5563;
transform: translateY(-2px);
}
.cs-toggle-schedule:active {
transform: translateY(0);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-term-wrapper {
flex-direction: column;
}
.cs-term-wrapper .cs-adv-loan-ir-term,
.cs-term-wrapper .cs-adv-loan-ir-term-unit {
flex: none;
}
.cs-amortization-table {
font-size: 0.85rem;
}
.cs-amortization-table th,
.cs-amortization-table td {
padding: 6px;
}
.cs-toggle-schedule {
width: 100%;
padding: 10px;
}
}
/* Inline layout for Advanced Loan Term Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-loan-term-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-loan-term-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-loan-term-calculator .cs-form-input {
flex: 1;
}
}
/* Remove arrows from number inputs */
.cs-adv-loan-term-principal,
.cs-adv-loan-term-rate,
.cs-adv-loan-term-payment {
-moz-appearance: textfield;
}
.cs-adv-loan-term-principal::-webkit-inner-spin-button,
.cs-adv-loan-term-principal::-webkit-outer-spin-button,
.cs-adv-loan-term-rate::-webkit-inner-spin-button,
.cs-adv-loan-term-rate::-webkit-outer-spin-button,
.cs-adv-loan-term-payment::-webkit-inner-spin-button,
.cs-adv-loan-term-payment::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Style select dropdown */
.cs-adv-loan-term-frequency,
.cs-adv-loan-term-output-unit {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
/* Amortization schedule */
.cs-amortization-schedule {
margin-top: 20px;
}
.cs-amortization-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-amortization-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-amortization-table th,
.cs-amortization-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: right;
}
.cs-amortization-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-amortization-table td {
background: #fff;
}
/* Toggle schedule button */
.cs-toggle-schedule {
background: #6b7280;
color: #fff;
font-size: 0.9rem;
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
margin-top: 12px;
transition: background 0.3s ease, transform 0.2s ease;
}
.cs-toggle-schedule:hover {
background: #4b5563;
transform: translateY(-2px);
}
.cs-toggle-schedule:active {
transform: translateY(0);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-amortization-table {
font-size: 0.85rem;
}
.cs-amortization-table th,
.cs-amortization-table td {
padding: 6px;
}
.cs-toggle-schedule {
width: 100%;
padding: 10px;
}
}
/* Inline layout for Advanced Loan Amount Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-loan-amount-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-loan-amount-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-loan-amount-calculator .cs-form-input,
.cs-adv-loan-amount-calculator .cs-term-wrapper {
flex: 1;
}
}
/* Remove arrows from number inputs */
.cs-adv-loan-amount-rate,
.cs-adv-loan-amount-term,
.cs-adv-loan-amount-payment {
-moz-appearance: textfield;
}
.cs-adv-loan-amount-rate::-webkit-inner-spin-button,
.cs-adv-loan-amount-rate::-webkit-outer-spin-button,
.cs-adv-loan-amount-term::-webkit-inner-spin-button,
.cs-adv-loan-amount-term::-webkit-outer-spin-button,
.cs-adv-loan-amount-payment::-webkit-inner-spin-button,
.cs-adv-loan-amount-payment::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Style select dropdown */
.cs-adv-loan-amount-frequency,
.cs-adv-loan-amount-term-unit {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
/* Term wrapper for term input and unit dropdown */
.cs-term-wrapper {
display: flex;
gap: 8px;
width: 100%;
}
.cs-term-wrapper .cs-adv-loan-amount-term {
flex: 2;
}
.cs-term-wrapper .cs-adv-loan-amount-term-unit {
flex: 1;
}
/* Amortization schedule */
.cs-amortization-schedule {
margin-top: 20px;
}
.cs-amortization-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-amortization-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-amortization-table th,
.cs-amortization-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: right;
}
.cs-amortization-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-amortization-table td {
background: #fff;
}
/* Toggle schedule button */
.cs-toggle-schedule {
background: #6b7280;
color: #fff;
font-size: 0.9rem;
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
margin-top: 12px;
transition: background 0.3s ease, transform 0.2s ease;
}
.cs-toggle-schedule:hover {
background: #4b5563;
transform: translateY(-2px);
}
.cs-toggle-schedule:active {
transform: translateY(0);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-term-wrapper {
flex-direction: column;
}
.cs-term-wrapper .cs-adv-loan-amount-term,
.cs-term-wrapper .cs-adv-loan-amount-term-unit {
flex: none;
}
.cs-amortization-table {
font-size: 0.85rem;
}
.cs-amortization-table th,
.cs-amortization-table td {
padding: 6px;
}
.cs-toggle-schedule {
width: 100%;
padding: 10px;
}
}
/* Inline layout for Advanced Early Loan Payoff Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-early-loan-payoff-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-early-loan-payoff-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-early-loan-payoff-calculator .cs-form-input,
.cs-adv-early-loan-payoff-calculator .cs-term-wrapper {
flex: 1;
}
}
/* Remove arrows from number inputs */
.cs-adv-early-loan-payoff-principal,
.cs-adv-early-loan-payoff-rate,
.cs-adv-early-loan-payoff-term,
.cs-adv-early-loan-payoff-extra-payment,
.cs-adv-early-loan-payoff-amount-paid {
-moz-appearance: textfield;
}
.cs-adv-early-loan-payoff-principal::-webkit-inner-spin-button,
.cs-adv-early-loan-payoff-principal::-webkit-outer-spin-button,
.cs-adv-early-loan-payoff-rate::-webkit-inner-spin-button,
.cs-adv-early-loan-payoff-rate::-webkit-outer-spin-button,
.cs-adv-early-loan-payoff-term::-webkit-inner-spin-button,
.cs-adv-early-loan-payoff-term::-webkit-outer-spin-button,
.cs-adv-early-loan-payoff-extra-payment::-webkit-inner-spin-button,
.cs-adv-early-loan-payoff-extra-payment::-webkit-outer-spin-button,
.cs-adv-early-loan-payoff-amount-paid::-webkit-inner-spin-button,
.cs-adv-early-loan-payoff-amount-paid::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Style select dropdown */
.cs-adv-early-loan-payoff-frequency,
.cs-adv-early-loan-payoff-term-unit {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
/* Term wrapper for term input and unit dropdown */
.cs-term-wrapper {
display: flex;
gap: 8px;
width: 100%;
}
.cs-term-wrapper .cs-adv-early-loan-payoff-term {
flex: 2;
}
.cs-term-wrapper .cs-adv-early-loan-payoff-term-unit {
flex: 1;
}
/* Amortization schedules */
.cs-amortization-schedule {
margin-top: 20px;
}
.cs-amortization-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-amortization-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-amortization-table th,
.cs-amortization-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: right;
}
.cs-amortization-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-amortization-table td {
background: #fff;
}
/* Toggle schedule buttons */
.cs-toggle-schedule {
background: #6b7280;
color: #fff;
font-size: 0.9rem;
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
margin-top: 12px;
margin-right: 10px;
transition: background 0.3s ease, transform 0.2s ease;
}
.cs-toggle-schedule:hover {
background: #4b5563;
transform: translateY(-2px);
}
.cs-toggle-schedule:active {
transform: translateY(0);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-term-wrapper {
flex-direction: column;
}
.cs-term-wrapper .cs-adv-early-loan-payoff-term,
.cs-term-wrapper .cs-adv-early-loan-payoff-term-unit {
flex: none;
}
.cs-amortization-table {
font-size: 0.85rem;
}
.cs-amortization-table th,
.cs-amortization-table td {
padding: 6px;
}
.cs-toggle-schedule {
width: 100%;
padding: 10px;
margin-right: 0;
margin-bottom: 10px;
}
}
/* Inline layout for Advanced Loan EMI Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-loan-emi-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-loan-emi-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-loan-emi-calculator .cs-form-input,
.cs-adv-loan-emi-calculator .cs-term-wrapper {
flex: 1;
}
}
/* Remove arrows from number inputs */
.cs-adv-loan-emi-principal,
.cs-adv-loan-emi-rate,
.cs-adv-loan-emi-term {
-moz-appearance: textfield;
}
.cs-adv-loan-emi-principal::-webkit-inner-spin-button,
.cs-adv-loan-emi-principal::-webkit-outer-spin-button,
.cs-adv-loan-emi-rate::-webkit-inner-spin-button,
.cs-adv-loan-emi-rate::-webkit-outer-spin-button,
.cs-adv-loan-emi-term::-webkit-inner-spin-button,
.cs-adv-loan-emi-term::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Style select dropdown */
.cs-adv-loan-emi-frequency,
.cs-adv-loan-emi-term-unit {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
/* Term wrapper for term input and unit dropdown */
.cs-term-wrapper {
display: flex;
gap: 8px;
width: 100%;
}
.cs-term-wrapper .cs-adv-loan-emi-term {
flex: 2;
}
.cs-term-wrapper .cs-adv-loan-emi-term-unit {
flex: 1;
}
/* Amortization schedule */
.cs-amortization-schedule {
margin-top: 20px;
}
.cs-amortization-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-amortization-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-amortization-table th,
.cs-amortization-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: right;
}
.cs-amortization-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-amortization-table td {
background: #fff;
}
/* Toggle schedule button */
.cs-toggle-schedule {
background: #6b7280;
color: #fff;
font-size: 0.9rem;
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
margin-top: 12px;
transition: background 0.3s ease, transform 0.2s ease;
}
.cs-toggle-schedule:hover {
background: #4b5563;
transform: translateY(-2px);
}
.cs-toggle-schedule:active {
transform: translateY(0);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-term-wrapper {
flex-direction: column;
}
.cs-term-wrapper .cs-adv-loan-emi-term,
.cs-term-wrapper .cs-adv-loan-emi-term-unit {
flex: none;
}
.cs-amortization-table {
font-size: 0.85rem;
}
.cs-amortization-table th,
.cs-amortization-table td {
padding: 6px;
}
.cs-toggle-schedule {
width: 100%;
padding: 10px;
}
}
/* Inline layout for Advanced Payday Loan Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-payday-loan-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-payday-loan-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-payday-loan-calculator .cs-form-input,
.cs-adv-payday-loan-calculator .cs-term-wrapper {
flex: 1;
}
}
/* Remove arrows from number inputs */
.cs-adv-payday-loan-principal,
.cs-adv-payday-loan-rate,
.cs-adv-payday-loan-fee,
.cs-adv-payday-loan-term {
-moz-appearance: textfield;
}
.cs-adv-payday-loan-principal::-webkit-inner-spin-button,
.cs-adv-payday-loan-principal::-webkit-outer-spin-button,
.cs-adv-payday-loan-rate::-webkit-inner-spin-button,
.cs-adv-payday-loan-rate::-webkit-outer-spin-button,
.cs-adv-payday-loan-fee::-webkit-inner-spin-button,
.cs-adv-payday-loan-fee::-webkit-outer-spin-button,
.cs-adv-payday-loan-term::-webkit-inner-spin-button,
.cs-adv-payday-loan-term::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Style select dropdown */
.cs-adv-payday-loan-interest-type,
.cs-adv-payday-loan-frequency,
.cs-adv-payday-loan-term-unit {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
/* Term wrapper for term input and unit dropdown */
.cs-term-wrapper {
display: flex;
gap: 8px;
width: 100%;
}
.cs-term-wrapper .cs-adv-payday-loan-term {
flex: 2;
}
.cs-term-wrapper .cs-adv-payday-loan-term-unit {
flex: 1;
}
/* Payment schedule */
.cs-payment-schedule {
margin-top: 20px;
}
.cs-schedule-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-schedule-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-schedule-table th,
.cs-schedule-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: right;
}
.cs-schedule-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-schedule-table td {
background: #fff;
}
/* Toggle schedule button */
.cs-toggle-schedule {
background: #6b7280;
color: #fff;
font-size: 0.9rem;
padding: 8px 16px;
border: none;
border-radius: 6px;
cursor: pointer;
margin-top: 12px;
transition: background 0.3s ease, transform 0.2s ease;
}
.cs-toggle-schedule:hover {
background: #4b5563;
transform: translateY(-2px);
}
.cs-toggle-schedule:active {
transform: translateY(0);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-term-wrapper {
flex-direction: column;
}
.cs-term-wrapper .cs-adv-payday-loan-term,
.cs-term-wrapper .cs-adv-payday-loan-term-unit {
flex: none;
}
.cs-schedule-table {
font-size: 0.85rem;
}
.cs-schedule-table th,
.cs-schedule-table td {
padding: 6px;
}
.cs-toggle-schedule {
width: 100%;
padding: 10px;
}
}
/* Inline layout for Advanced Retirement Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-retirement-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-retirement-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-retirement-calculator .cs-form-input {
flex: 1;
}
}
/* Remove arrows from number inputs */
.cs-adv-retirement-current-age,
.cs-adv-retirement-retirement-age,
.cs-adv-retirement-life-expectancy,
.cs-adv-retirement-monthly-savings,
.cs-adv-retirement-current-savings,
.cs-adv-retirement-return-rate,
.cs-adv-retirement-inflation-rate {
-moz-appearance: textfield;
}
.cs-adv-retirement-current-age::-webkit-inner-spin-button,
.cs-adv-retirement-current-age::-webkit-outer-spin-button,
.cs-adv-retirement-retirement-age::-webkit-inner-spin-button,
.cs-adv-retirement-retirement-age::-webkit-outer-spin-button,
.cs-adv-retirement-life-expectancy::-webkit-inner-spin-button,
.cs-adv-retirement-life-expectancy::-webkit-outer-spin-button,
.cs-adv-retirement-monthly-savings::-webkit-inner-spin-button,
.cs-adv-retirement-monthly-savings::-webkit-outer-spin-button,
.cs-adv-retirement-current-savings::-webkit-inner-spin-button,
.cs-adv-retirement-current-savings::-webkit-outer-spin-button,
.cs-adv-retirement-return-rate::-webkit-inner-spin-button,
.cs-adv-retirement-return-rate::-webkit-outer-spin-button,
.cs-adv-retirement-inflation-rate::-webkit-inner-spin-button,
.cs-adv-retirement-inflation-rate::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Retirement projection schedule */
.cs-retirement-schedule {
margin-top: 20px;
}
.cs-retirement-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-retirement-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-retirement-table th,
.cs-retirement-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: right;
}
.cs-retirement-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-retirement-table td {
background: #fff;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-retirement-table {
font-size: 0.85rem;
}
.cs-retirement-table th,
.cs-retirement-table td {
padding: 6px;
}
}
/* Specific styles for Advanced Retirement Calculator */
.cs-adv-retirement-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Inline layout for Advanced Provident Fund Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-pf-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-pf-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-pf-calculator .cs-form-input {
flex: 1;
}
}
/* Remove arrows from number inputs */
.cs-adv-pf-monthly-salary,
.cs-adv-pf-employee-contribution-rate,
.cs-adv-pf-employer-contribution-rate,
.cs-adv-pf-annual-salary-increment,
.cs-adv-pf-current-pf-balance,
.cs-adv-pf-interest-rate,
.cs-adv-pf-years-to-retirement {
-moz-appearance: textfield;
}
.cs-adv-pf-monthly-salary::-webkit-inner-spin-button,
.cs-adv-pf-monthly-salary::-webkit-outer-spin-button,
.cs-adv-pf-employee-contribution-rate::-webkit-inner-spin-button,
.cs-adv-pf-employee-contribution-rate::-webkit-outer-spin-button,
.cs-adv-pf-employer-contribution-rate::-webkit-inner-spin-button,
.cs-adv-pf-employer-contribution-rate::-webkit-outer-spin-button,
.cs-adv-pf-annual-salary-increment::-webkit-inner-spin-button,
.cs-adv-pf-annual-salary-increment::-webkit-outer-spin-button,
.cs-adv-pf-current-pf-balance::-webkit-inner-spin-button,
.cs-adv-pf-current-pf-balance::-webkit-outer-spin-button,
.cs-adv-pf-interest-rate::-webkit-inner-spin-button,
.cs-adv-pf-interest-rate::-webkit-outer-spin-button,
.cs-adv-pf-years-to-retirement::-webkit-inner-spin-button,
.cs-adv-pf-years-to-retirement::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* PF projection schedule */
.cs-pf-schedule {
margin-top: 20px;
}
.cs-pf-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-pf-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-pf-table th,
.cs-pf-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: right;
}
.cs-pf-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-pf-table td {
background: #fff;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-pf-table {
font-size: 0.85rem;
}
.cs-pf-table th,
.cs-pf-table td {
padding: 6px;
}
}
/* Specific styles for Advanced Provident Fund Calculator */
.cs-adv-pf-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Inline layout for Advanced Savings Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-savings-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-savings-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-savings-calculator .cs-form-input {
flex: 1;
}
}
/* Remove arrows from number inputs */
.cs-adv-savings-initial-savings,
.cs-adv-savings-monthly-contribution,
.cs-adv-savings-interest-rate,
.cs-adv-savings-years {
-moz-appearance: textfield;
}
.cs-adv-savings-initial-savings::-webkit-inner-spin-button,
.cs-adv-savings-initial-savings::-webkit-outer-spin-button,
.cs-adv-savings-monthly-contribution::-webkit-inner-spin-button,
.cs-adv-savings-monthly-contribution::-webkit-outer-spin-button,
.cs-adv-savings-interest-rate::-webkit-inner-spin-button,
.cs-adv-savings-interest-rate::-webkit-outer-spin-button,
.cs-adv-savings-years::-webkit-inner-spin-button,
.cs-adv-savings-years::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Style select dropdown for Savings Calculator */
.cs-adv-savings-frequency {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
/* Savings projection schedule */
.cs-savings-schedule {
margin-top: 20px;
}
.cs-savings-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-savings-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-savings-table th,
.cs-savings-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: right;
}
.cs-savings-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-savings-table td {
background: #fff;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-savings-table {
font-size: 0.85rem;
}
.cs-savings-table th,
.cs-savings-table td {
padding: 6px;
}
.cs-adv-savings-frequency {
padding-right: 25px;
background-position: right 10px center;
}
}
/* Specific styles for Advanced Savings Calculator */
.cs-adv-savings-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Inline layout for Advanced Present Value Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-present-value-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-present-value-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-present-value-calculator .cs-form-input {
flex: 1;
}
}
/* Remove arrows from number inputs */
.cs-adv-pv-future-value,
.cs-adv-pv-interest-rate,
.cs-adv-pv-years {
-moz-appearance: textfield;
}
.cs-adv-pv-future-value::-webkit-inner-spin-button,
.cs-adv-pv-future-value::-webkit-outer-spin-button,
.cs-adv-pv-interest-rate::-webkit-inner-spin-button,
.cs-adv-pv-interest-rate::-webkit-outer-spin-button,
.cs-adv-pv-years::-webkit-inner-spin-button,
.cs-adv-pv-years::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Style select dropdowns for Present Value Calculator */
.cs-adv-pv-calculation-type,
.cs-adv-pv-frequency {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
/* Present Value projection schedule */
.cs-pv-schedule {
margin-top: 20px;
}
.cs-pv-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-pv-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-pv-table th,
.cs-pv-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: right;
}
.cs-pv-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-pv-table td {
background: #fff;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-pv-table {
font-size: 0.85rem;
}
.cs-pv-table th,
.cs-pv-table td {
padding: 6px;
}
.cs-adv-pv-calculation-type,
.cs-adv-pv-frequency {
padding-right: 25px;
background-position: right 10px center;
}
}
/* Specific styles for Advanced Present Value Calculator */
.cs-adv-present-value-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Inline layout for Advanced Future Value Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-future-value-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-future-value-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-future-value-calculator .cs-form-input {
flex: 1;
}
}
/* Remove arrows from number inputs */
.cs-adv-fv-present-value,
.cs-adv-fv-regular-contribution,
.cs-adv-fv-interest-rate,
.cs-adv-fv-years {
-moz-appearance: textfield;
}
.cs-adv-fv-present-value::-webkit-inner-spin-button,
.cs-adv-fv-present-value::-webkit-outer-spin-button,
.cs-adv-fv-regular-contribution::-webkit-inner-spin-button,
.cs-adv-fv-regular-contribution::-webkit-outer-spin-button,
.cs-adv-fv-interest-rate::-webkit-inner-spin-button,
.cs-adv-fv-interest-rate::-webkit-outer-spin-button,
.cs-adv-fv-years::-webkit-inner-spin-button,
.cs-adv-fv-years::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Style select dropdowns for Future Value Calculator */
.cs-adv-fv-calculation-type,
.cs-adv-fv-frequency {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
/* Future Value projection schedule */
.cs-fv-schedule {
margin-top: 20px;
}
.cs-fv-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-fv-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-fv-table th,
.cs-fv-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: right;
}
.cs-fv-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-fv-table td {
background: #fff;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-fv-table {
font-size: 0.85rem;
}
.cs-fv-table th,
.cs-fv-table td {
padding: 6px;
}
.cs-adv-fv-calculation-type,
.cs-adv-fv-frequency {
padding-right: 25px;
background-position: right 10px center;
}
}
/* Specific styles for Advanced Future Value Calculator */
.cs-adv-future-value-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Inline layout for Advanced BMI Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-bmi-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-bmi-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-bmi-calculator .cs-form-input {
flex: 1;
}
}
/* Remove arrows from number inputs */
.cs-adv-bmi-height,
.cs-adv-bmi-weight,
.cs-adv-bmi-age {
-moz-appearance: textfield;
}
.cs-adv-bmi-height::-webkit-inner-spin-button,
.cs-adv-bmi-height::-webkit-outer-spin-button,
.cs-adv-bmi-weight::-webkit-inner-spin-button,
.cs-adv-bmi-weight::-webkit-outer-spin-button,
.cs-adv-bmi-age::-webkit-inner-spin-button,
.cs-adv-bmi-age::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Style select dropdowns for BMI Calculator */
.cs-adv-bmi-unit-system,
.cs-adv-bmi-gender {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
/* BMI projection schedule */
.cs-bmi-schedule {
margin-top: 20px;
}
.cs-bmi-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-bmi-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-bmi-table th,
.cs-bmi-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: left;
}
.cs-bmi-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-bmi-table td {
background: #fff;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-bmi-table {
font-size: 0.85rem;
}
.cs-bmi-table th,
.cs-bmi-table td {
padding: 6px;
}
.cs-adv-bmi-unit-system,
.cs-adv-bmi-gender {
padding-right: 25px;
background-position: right 10px center;
}
}
/* Specific styles for Advanced BMI Calculator */
.cs-adv-bmi-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Inline layout for Advanced Body Fat Percentage Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-body-fat-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-body-fat-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-body-fat-calculator .cs-form-input {
flex: 1;
}
}
/* Remove arrows from number inputs */
.cs-adv-bfp-height,
.cs-adv-bfp-weight,
.cs-adv-bfp-age {
-moz-appearance: textfield;
}
.cs-adv-bfp-height::-webkit-inner-spin-button,
.cs-adv-bfp-height::-webkit-outer-spin-button,
.cs-adv-bfp-weight::-webkit-inner-spin-button,
.cs-adv-bfp-weight::-webkit-outer-spin-button,
.cs-adv-bfp-age::-webkit-inner-spin-button,
.cs-adv-bfp-age::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Style select dropdowns for Body Fat Percentage Calculator */
.cs-adv-bfp-unit-system,
.cs-adv-bfp-gender {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
/* Body Fat Percentage projection schedule */
.cs-bfp-schedule {
margin-top: 20px;
}
.cs-bfp-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-bfp-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-bfp-table th,
.cs-bfp-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: left;
}
.cs-bfp-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-bfp-table td {
background: #fff;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-bfp-table {
font-size: 0.85rem;
}
.cs-bfp-table th,
.cs-bfp-table td {
padding: 6px;
}
.cs-adv-bfp-unit-system,
.cs-adv-bfp-gender {
padding-right: 25px;
background-position: right 10px center;
}
}
/* Specific styles for Advanced Body Fat Percentage Calculator */
.cs-adv-body-fat-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Style for date picker input */
.cs-adv-reverse-age-target-date {
position: relative;
background: #fff;
border: 1px solid #d1d5db;
border-radius: 4px;
padding: 10px;
font-size: 1rem;
line-height: 1.5;
width: 100%;
box-sizing: border-box;
}
/* Flatpickr custom styles */
.flatpickr-calendar {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover {
background: #3b82f6;
border-color: #3b82f6;
color: #fff;
}
.flatpickr-day.today {
border-color: #3b82f6;
}
.flatpickr-monthDropdown-months,
.flatpickr-year {
font-size: 1rem;
}
.flatpickr-input.active,
.flatpickr-input:focus {
border-color: #3b82f6;
box-shadow: 0 0 0 1px #3b82f6;
}
/* Ensure inline layout consistency */
@media (min-width: 769px) {
.cs-adv-reverse-age-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-reverse-age-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-reverse-age-calculator .cs-form-input {
flex: 1;
}
}
/* Mobile adjustments for date picker */
@media (max-width: 768px) {
.cs-adv-reverse-age-target-date {
padding: 8px;
font-size: 0.9rem;
}
.flatpickr-calendar {
width: 100%;
max-width: 300px;
}
}
/* Inline layout for Advanced Pace Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-pace-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-pace-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-pace-calculator .cs-form-input {
flex: 1;
}
.cs-adv-pace-calculator .cs-time-inputs {
display: flex;
gap: 8px;
flex: 1;
}
.cs-adv-pace-calculator .cs-time-inputs .cs-form-input {
flex: 1;
padding: 10px;
font-size: 1rem;
}
}
/* Remove arrows from number inputs */
.cs-adv-pace-distance,
.cs-adv-pace-time-hours,
.cs-adv-pace-time-minutes,
.cs-adv-pace-time-seconds,
.cs-adv-pace-pace-minutes,
.cs-adv-pace-pace-seconds,
.cs-adv-pace-speed {
-moz-appearance: textfield;
}
.cs-adv-pace-distance::-webkit-inner-spin-button,
.cs-adv-pace-distance::-webkit-outer-spin-button,
.cs-adv-pace-time-hours::-webkit-inner-spin-button,
.cs-adv-pace-time-hours::-webkit-outer-spin-button,
.cs-adv-pace-time-minutes::-webkit-inner-spin-button,
.cs-adv-pace-time-minutes::-webkit-outer-spin-button,
.cs-adv-pace-time-seconds::-webkit-inner-spin-button,
.cs-adv-pace-time-seconds::-webkit-outer-spin-button,
.cs-adv-pace-pace-minutes::-webkit-inner-spin-button,
.cs-adv-pace-pace-minutes::-webkit-outer-spin-button,
.cs-adv-pace-pace-seconds::-webkit-inner-spin-button,
.cs-adv-pace-pace-seconds::-webkit-outer-spin-button,
.cs-adv-pace-speed::-webkit-inner-spin-button,
.cs-adv-pace-speed::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Style select dropdowns for Pace Calculator */
.cs-adv-pace-calculation-type,
.cs-adv-pace-unit-system {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
/* Pace split times schedule */
.cs-pace-schedule {
margin-top: 20px;
}
.cs-pace-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-pace-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-pace-table th,
.cs-pace-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: left;
}
.cs-pace-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-pace-table td {
background: #fff;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-pace-table {
font-size: 0.85rem;
}
.cs-pace-table th,
.cs-pace-table td {
padding: 6px;
}
.cs-adv-pace-calculation-type,
.cs-adv-pace-unit-system {
padding-right: 25px;
background-position: right 10px center;
}
.cs-adv-pace-calculator .cs-time-inputs {
flex-direction: column;
gap: 8px;
}
}
/* Specific styles for Advanced Pace Calculator */
.cs-adv-pace-calculator .cs-form-input {
/* Add specific styling if needed */
}
.cs-adv-pace-calculator .cs-form-input::placeholder {
color: #6b7280;
opacity: 1;
}
/* Inline layout for Advanced Calorie Burn Calculator on desktop */
@media (min-width: 769px) {
.cs-adv-calorie-burn-calculator .cs-form-group {
flex-direction: row;
align-items: center;
gap: 16px;
}
.cs-adv-calorie-burn-calculator .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-calorie-burn-calculator .cs-form-input {
flex: 1;
}
}
/* Remove arrows from number inputs */
.cs-adv-calorie-weight,
.cs-adv-calorie-duration {
-moz-appearance: textfield;
}
.cs-adv-calorie-weight::-webkit-inner-spin-button,
.cs-adv-calorie-weight::-webkit-outer-spin-button,
.cs-adv-calorie-duration::-webkit-inner-spin-button,
.cs-adv-calorie-duration::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Style select dropdowns for Calorie Burn Calculator */
.cs-adv-calorie-unit-system,
.cs-adv-calorie-activity {
appearance: none;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 30px;
}
/* Placeholder styling */
.cs-adv-calorie-burn-calculator .cs-form-input::placeholder {
color: #6b7280;
opacity: 1;
}
/* Calorie burn table */
.cs-calorie-schedule {
margin-top: 20px;
}
.cs-calorie-title {
font-size: 1.1rem;
font-weight: 500;
color: #1a1a1a;
margin: 0 0 12px;
}
.cs-calorie-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-calorie-table th,
.cs-calorie-table td {
padding: 8px;
border: 1px solid #d1d5db;
text-align: left;
}
.cs-calorie-table th {
background: #f3f4f6;
font-weight: 500;
color: #1a1a1a;
}
.cs-calorie-table td {
background: #fff;
}
/* Chart styling */
.cs-calorie-chart {
display: block !important;
width: 100% !important;
height: 300px !important;
max-height: 300px !important;
margin-top: 20px;
overflow: visible !important;
position: relative;
}
#calorieBurnChart {
display: block !important;
width: 100% !important;
height: 300px !important;
max-height: 300px !important;
min-height: 300px !important;
}
.cs-chart-fallback {
color: #dc2626;
font-size: 0.9rem;
text-align: center;
margin-top: 10px;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.cs-calorie-table {
font-size: 0.85rem;
}
.cs-calorie-table th,
.cs-calorie-table td {
padding: 6px;
}
.cs-adv-calorie-unit-system,
.cs-adv-calorie-activity {
padding-right: 25px;
background-position: right 10px center;
}
.cs-calorie-chart {
height: 250px !important;
max-height: 250px !important;
}
#calorieBurnChart {
height: 250px !important;
max-height: 250px !important;
min-height: 250px !important;
}
.cs-chart-fallback {
font-size: 0.85rem;
}
}
/* Specific styles for Advanced Calorie Burn Calculator */
.cs-adv-calorie-burn-calculator .cs-form-input {
/* Add specific styling if needed */
}
/* Ensure chart visibility */
.cs-calorie-chart {
display: block !important;
width: 100%;
height: 300px;
max-height: 300px;
margin-top: 20px;
overflow: visible !important;
}
#calorieBurnChart {
display: block !important;
width: 100% !important;
height: 100% !important;
max-height: 300px !important;
}
/* Mobile adjustments for chart */
@media (max-width: 768px) {
.cs-calorie-chart {
height: 250px;
max-height: 250px;
}
#calorieBurnChart {
max-height: 250px !important;
}
}
/* BMR Calculator */
.cs-adv-bmr-calculator .cs-calculator-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 600px;
margin: 20px auto;
}
.cs-adv-bmr-calculator .cs-calculator-title {
font-size: 1.5rem;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 20px;
text-align: center;
}
.cs-adv-bmr-calculator .cs-form-group {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 15px;
}
.cs-adv-bmr-calculator .cs-form-label {
width: 150px;
font-size: 0.9rem;
font-weight: 500;
color: #374151;
}
.cs-adv-bmr-calculator .cs-form-input {
flex: 1;
padding: 8px;
font-size: 0.9rem;
border: 1px solid #d1d5db;
border-radius: 4px;
transition: border-color 0.2s;
}
.cs-adv-bmr-calculator .cs-form-input:focus {
outline: none;
border-color: #3b82f6;
}
.cs-adv-bmr-calculator .cs-form-button {
display: block;
width: 100%;
padding: 10px;
background: #3b82f6;
color: #fff;
font-size: 1rem;
font-weight: 500;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.cs-adv-bmr-calculator .cs-form-button:hover {
background: #1e3a8a;
}
.cs-adv-bmr-calculator .cs-result {
margin-top: 20px;
padding: 15px;
border-radius: 4px;
text-align: center;
}
.cs-adv-bmr-calculator .cs-result-success {
background: #ecfdf5;
color: #065f46;
}
.cs-adv-bmr-calculator .cs-result-success span {
font-weight: 600;
font-size: 1.2rem;
}
.cs-adv-bmr-calculator .cs-result-error {
background: #fef2f2;
color: #dc2626;
}
.cs-adv-bmr-calculator .cs-bmr-schedule {
margin-top: 20px;
}
.cs-adv-bmr-calculator .cs-bmr-title {
font-size: 1.2rem;
font-weight: 500;
color: #1e3a8a;
margin-bottom: 10px;
}
.cs-adv-bmr-calculator .cs-bmr-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-adv-bmr-calculator .cs-bmr-table th,
.cs-adv-bmr-calculator .cs-bmr-table td {
padding: 10px;
border: 1px solid #e5e7eb;
text-align: left;
}
.cs-adv-bmr-calculator .cs-bmr-table th {
background: #f9fafb;
font-weight: 500;
}
.cs-adv-bmr-calculator .cs-bmr-chart {
margin-top: 20px;
height: 300px;
}
.cs-adv-bmr-calculator #bmrChart {
display: block;
width: 100%;
height: 300px;
max-height: 300px;
min-height: 300px;
}
.cs-adv-bmr-calculator .cs-chart-fallback {
color: #dc2626;
font-size: 0.9rem;
text-align: center;
margin-top: 10px;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.cs-adv-bmr-calculator .cs-calculator-card {
padding: 15px;
margin: 10px;
}
.cs-adv-bmr-calculator .cs-form-group {
flex-direction: column;
align-items: stretch;
}
.cs-adv-bmr-calculator .cs-form-label {
width: auto;
margin-bottom: 5px;
}
.cs-adv-bmr-calculator .cs-form-input {
width: 100%;
}
.cs-adv-bmr-calculator .cs-bmr-table th,
.cs-adv-bmr-calculator .cs-bmr-table td {
padding: 8px;
font-size: 0.85rem;
}
.cs-adv-bmr-calculator .cs-bmr-chart {
height: 250px;
}
.cs-adv-bmr-calculator #bmrChart {
height: 250px;
max-height: 250px;
min-height: 250px;
}
.cs-adv-bmr-calculator .cs-chart-fallback {
font-size: 0.85rem;
}
}
/* Calorie Intake Calculator */
.cs-adv-calorie-intake-calculator .cs-calculator-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 600px;
margin: 20px auto;
}
.cs-adv-calorie-intake-calculator .cs-calculator-title {
font-size: 1.5rem;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 20px;
text-align: center;
}
.cs-adv-calorie-intake-calculator .cs-form-group {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 15px;
}
.cs-adv-calorie-intake-calculator .cs-form-label {
width: 150px;
font-size: 0.9rem;
font-weight: 500;
color: #374151;
}
.cs-adv-calorie-intake-calculator .cs-form-input {
flex: 1;
padding: 8px;
font-size: 0.9rem;
border: 1px solid #d1d5db;
border-radius: 4px;
transition: border-color 0.2s;
}
.cs-adv-calorie-intake-calculator .cs-form-input:focus {
outline: none;
border-color: #3b82f6;
}
.cs-adv-calorie-intake-calculator .cs-form-button {
display: block;
width: 100%;
padding: 10px;
background: #3b82f6;
color: #fff;
font-size: 1rem;
font-weight: 500;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.cs-adv-calorie-intake-calculator .cs-form-button:hover {
background: #1e3a8a;
}
.cs-adv-calorie-intake-calculator .cs-result {
margin-top: 20px;
padding: 15px;
border-radius: 4px;
text-align: center;
}
.cs-adv-calorie-intake-calculator .cs-result-success {
background: #ecfdf5;
color: #065f46;
}
.cs-adv-calorie-intake-calculator .cs-result-success span {
font-weight: 600;
font-size: 1.2rem;
}
.cs-adv-calorie-intake-calculator .cs-result-error {
background: #fef2f2;
color: #dc2626;
}
.cs-adv-calorie-intake-calculator .cs-calorie-intake-schedule {
margin-top: 20px;
}
.cs-adv-calorie-intake-calculator .cs-calorie-intake-title {
font-size: 1.2rem;
font-weight: 500;
color: #1e3a8a;
margin-bottom: 10px;
}
.cs-adv-calorie-intake-calculator .cs-calorie-intake-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-adv-calorie-intake-calculator .cs-calorie-intake-table th,
.cs-adv-calorie-intake-calculator .cs-calorie-intake-table td {
padding: 10px;
border: 1px solid #e5e7eb;
text-align: left;
}
.cs-adv-calorie-intake-calculator .cs-calorie-intake-table th {
background: #f9fafb;
font-weight: 500;
}
.cs-adv-calorie-intake-calculator .cs-calorie-intake-chart {
margin-top: 20px;
height: 300px;
}
.cs-adv-calorie-intake-calculator #calorieIntakeChart {
display: block;
width: 100%;
height: 300px;
max-height: 300px;
min-height: 300px;
}
.cs-adv-calorie-intake-calculator .cs-chart-fallback {
color: #dc2626;
font-size: 0.9rem;
text-align: center;
margin-top: 10px;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.cs-adv-calorie-intake-calculator .cs-calculator-card {
padding: 15px;
margin: 10px;
}
.cs-adv-calorie-intake-calculator .cs-form-group {
flex-direction: column;
align-items: stretch;
}
.cs-adv-calorie-intake-calculator .cs-form-label {
width: auto;
margin-bottom: 5px;
}
.cs-adv-calorie-intake-calculator .cs-form-input {
width: 100%;
}
.cs-adv-calorie-intake-calculator .cs-calorie-intake-table th,
.cs-adv-calorie-intake-calculator .cs-calorie-intake-table td {
padding: 8px;
font-size: 0.85rem;
}
.cs-adv-calorie-intake-calculator .cs-calorie-intake-chart {
height: 250px;
}
.cs-adv-calorie-intake-calculator #calorieIntakeChart {
height: 250px;
max-height: 250px;
min-height: 250px;
}
.cs-adv-calorie-intake-calculator .cs-chart-fallback {
font-size: 0.85rem;
}
}
/* Life Expectancy Calculator */
.cs-adv-life-expectancy-calculator .cs-calculator-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 600px;
margin: 20px auto;
}
.cs-adv-life-expectancy-calculator .cs-calculator-title {
font-size: 1.5rem;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 20px;
text-align: center;
}
.cs-adv-life-expectancy-calculator .cs-form-group {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 15px;
}
.cs-adv-life-expectancy-calculator .cs-form-label {
width: 150px;
font-size: 0.9rem;
font-weight: 500;
color: #374151;
}
.cs-adv-life-expectancy-calculator .cs-form-input {
flex: 1;
padding: 8px;
font-size: 0.9rem;
border: 1px solid #d1d5db;
border-radius: 4px;
transition: border-color 0.2s;
}
.cs-adv-life-expectancy-calculator .cs-form-input:focus {
outline: none;
border-color: #3b82f6;
}
.cs-adv-life-expectancy-calculator .cs-form-input[multiple] {
height: 100px; /* Adjust for multi-select */
}
.cs-adv-life-expectancy-calculator .cs-form-button {
display: block;
width: 100%;
padding: 10px;
background: #3b82f6;
color: #fff;
font-size: 1rem;
font-weight: 500;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.cs-adv-life-expectancy-calculator .cs-form-button:hover {
background: #1e3a8a;
}
.cs-adv-life-expectancy-calculator .cs-result {
margin-top: 20px;
padding: 15px;
border-radius: 4px;
text-align: center;
}
.cs-adv-life-expectancy-calculator .cs-result-success {
background: #ecfdf5;
color: #065f46;
}
.cs-adv-life-expectancy-calculator .cs-result-success span {
font-weight: 600;
font-size: 1.2rem;
}
.cs-adv-life-expectancy-calculator .cs-result-error {
background: #fef2f2;
color: #dc2626;
}
.cs-adv-life-expectancy-calculator .cs-life-expectancy-schedule {
margin-top: 20px;
}
.cs-adv-life-expectancy-calculator .cs-life-expectancy-title {
font-size: 1.2rem;
font-weight: 500;
color: #1e3a8a;
margin-bottom: 10px;
}
.cs-adv-life-expectancy-calculator .cs-life-expectancy-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-adv-life-expectancy-calculator .cs-life-expectancy-table th,
.cs-adv-life-expectancy-calculator .cs-life-expectancy-table td {
padding: 10px;
border: 1px solid #e5e7eb;
text-align: left;
}
.cs-adv-life-expectancy-calculator .cs-life-expectancy-table th {
background: #f9fafb;
font-weight: 500;
}
.cs-adv-life-expectancy-calculator .cs-life-expectancy-chart {
margin-top: 20px;
height: 300px;
}
.cs-adv-life-expectancy-calculator #lifeExpectancyChart {
display: block;
width: 100%;
height: 300px;
max-height: 300px;
min-height: 300px;
}
.cs-adv-life-expectancy-calculator .cs-chart-fallback {
color: #dc2626;
font-size: 0.9rem;
text-align: center;
margin-top: 10px;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.cs-adv-life-expectancy-calculator .cs-calculator-card {
padding: 15px;
margin: 10px;
}
.cs-adv-life-expectancy-calculator .cs-form-group {
flex-direction: column;
align-items: stretch;
}
.cs-adv-life-expectancy-calculator .cs-form-label {
width: auto;
margin-bottom: 5px;
}
.cs-adv-life-expectancy-calculator .cs-form-input {
width: 100%;
}
.cs-adv-life-expectancy-calculator .cs-form-input[multiple] {
height: 80px;
}
.cs-adv-life-expectancy-calculator .cs-life-expectancy-table th,
.cs-adv-life-expectancy-calculator .cs-life-expectancy-table td {
padding: 8px;
font-size: 0.85rem;
}
.cs-adv-life-expectancy-calculator .cs-life-expectancy-chart {
height: 250px;
}
.cs-adv-life-expectancy-calculator #lifeExpectancyChart {
height: 250px;
max-height: 250px;
min-height: 250px;
}
.cs-adv-life-expectancy-calculator .cs-chart-fallback {
font-size: 0.85rem;
}
}
/* Ovulation Calculator */
.cs-adv-ovulation-calculator .cs-calculator-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 600px;
margin: 20px auto;
}
.cs-adv-ovulation-calculator .cs-calculator-title {
font-size: 1.5rem;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 20px;
text-align: center;
}
.cs-adv-ovulation-calculator .cs-form-group {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 15px;
}
.cs-adv-ovulation-calculator .cs-form-label {
width: 150px;
font-size: 0.9rem;
font-weight: 500;
color: #374151;
}
.cs-adv-ovulation-calculator .cs-form-input {
flex: 1;
padding: 8px;
font-size: 0.9rem;
border: 1px solid #d1d5db;
border-radius: 4px;
transition: border-color 0.2s;
}
.cs-adv-ovulation-calculator .cs-form-input:focus {
outline: none;
border-color: #3b82f6;
}
.cs-adv-ovulation-calculator .cs-form-button {
display: block;
width: 100%;
padding: 10px;
background: #3b82f6;
color: #fff;
font-size: 1rem;
font-weight: 500;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.cs-adv-ovulation-calculator .cs-form-button:hover {
background: #1e3a8a;
}
.cs-adv-ovulation-calculator .cs-result {
margin-top: 20px;
padding: 15px;
border-radius: 4px;
text-align: center;
}
.cs-adv-ovulation-calculator .cs-result-success {
background: #ecfdf5;
color: #065f46;
}
.cs-adv-ovulation-calculator .cs-result-success span {
font-weight: 600;
font-size: 1.2rem;
}
.cs-adv-ovulation-calculator .cs-result-error {
background: #fef2f2;
color: #dc2626;
}
.cs-adv-ovulation-calculator .cs-ovulation-schedule {
margin-top: 20px;
}
.cs-adv-ovulation-calculator .cs-ovulation-title {
font-size: 1.2rem;
font-weight: 500;
color: #1e3a8a;
margin-bottom: 10px;
}
.cs-adv-ovulation-calculator .cs-ovulation-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-adv-ovulation-calculator .cs-ovulation-table th,
.cs-adv-ovulation-calculator .cs-ovulation-table td {
padding: 10px;
border: 1px solid #e5e7eb;
text-align: left;
}
.cs-adv-ovulation-calculator .cs-ovulation-table th {
background: #f9fafb;
font-weight: 500;
}
.cs-adv-ovulation-calculator .cs-ovulation-chart {
margin-top: 20px;
height: 300px;
}
.cs-adv-ovulation-calculator #ovulationChart {
display: block;
width: 100%;
height: 300px;
max-height: 300px;
min-height: 300px;
}
.cs-adv-ovulation-calculator .cs-chart-fallback {
color: #dc2626;
font-size: 0.9rem;
text-align: center;
margin-top: 10px;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.cs-adv-ovulation-calculator .cs-calculator-card {
padding: 15px;
margin: 10px;
}
.cs-adv-ovulation-calculator .cs-form-group {
flex-direction: column;
align-items: stretch;
}
.cs-adv-ovulation-calculator .cs-form-label {
width: auto;
margin-bottom: 5px;
}
.cs-adv-ovulation-calculator .cs-form-input {
width: 100%;
}
.cs-adv-ovulation-calculator .cs-ovulation-table th,
.cs-adv-ovulation-calculator .cs-ovulation-table td {
padding: 8px;
font-size: 0.85rem;
}
.cs-adv-ovulation-calculator .cs-ovulation-chart {
height: 250px;
}
.cs-adv-ovulation-calculator #ovulationChart {
height: 250px;
max-height: 250px;
min-height: 250px;
}
.cs-adv-ovulation-calculator .cs-chart-fallback {
font-size: 0.85rem;
}
}
/* Period Calculator */
.cs-adv-period-calculator .cs-calculator-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 600px;
margin: 20px auto;
}
.cs-adv-period-calculator .cs-calculator-title {
font-size: 1.5rem;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 20px;
text-align: center;
}
.cs-adv-period-calculator .cs-form-group {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 15px;
}
.cs-adv-period-calculator .cs-form-label {
width: 150px;
font-size: 0.9rem;
font-weight: 500;
color: #374151;
}
.cs-adv-period-calculator .cs-form-input {
flex: 1;
padding: 8px;
font-size: 0.9rem;
border: 1px solid #d1d5db;
border-radius: 4px;
transition: border-color 0.2s;
}
.cs-adv-period-calculator .cs-form-input:focus {
outline: none;
border-color: #3b82f6;
}
.cs-adv-period-calculator .cs-form-button {
display: block;
width: 100%;
padding: 10px;
background: #3b82f6;
color: #fff;
font-size: 1rem;
font-weight: 500;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.cs-adv-period-calculator .cs-form-button:hover {
background: #1e3a8a;
}
.cs-adv-period-calculator .cs-result {
margin-top: 20px;
padding: 15px;
border-radius: 4px;
text-align: center;
}
.cs-adv-period-calculator .cs-result-success {
background: #ecfdf5;
color: #065f46;
}
.cs-adv-period-calculator .cs-result-success span {
font-weight: 600;
font-size: 1.2rem;
}
.cs-adv-period-calculator .cs-result-error {
background: #fef2f2;
color: #dc2626;
}
.cs-adv-period-calculator .cs-period-schedule {
margin-top: 20px;
}
.cs-adv-period-calculator .cs-period-title {
font-size: 1.2rem;
font-weight: 500;
color: #1e3a8a;
margin-bottom: 10px;
}
.cs-adv-period-calculator .cs-period-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-adv-period-calculator .cs-period-table th,
.cs-adv-period-calculator .cs-period-table td {
padding: 10px;
border: 1px solid #e5e7eb;
text-align: left;
}
.cs-adv-period-calculator .cs-period-table th {
background: #f9fafb;
font-weight: 500;
}
.cs-adv-period-calculator .cs-period-chart {
margin-top: 20px;
height: 300px;
}
.cs-adv-period-calculator #periodChart {
display: block;
width: 100%;
height: 300px;
max-height: 300px;
min-height: 300px;
}
.cs-adv-period-calculator .cs-chart-fallback {
color: #dc2626;
font-size: 0.9rem;
text-align: center;
margin-top: 10px;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.cs-adv-period-calculator .cs-calculator-card {
padding: 15px;
margin: 10px;
}
.cs-adv-period-calculator .cs-form-group {
flex-direction: column;
align-items: stretch;
}
.cs-adv-period-calculator .cs-form-label {
width: auto;
margin-bottom: 5px;
}
.cs-adv-period-calculator .cs-form-input {
width: 100%;
}
.cs-adv-period-calculator .cs-period-table th,
.cs-adv-period-calculator .cs-period-table td {
padding: 8px;
font-size: 0.85rem;
}
.cs-adv-period-calculator .cs-period-chart {
height: 250px;
}
.cs-adv-period-calculator #periodChart {
height: 250px;
max-height: 250px;
min-height: 250px;
}
.cs-adv-period-calculator .cs-chart-fallback {
font-size: 0.85rem;
}
}
/* Baby Due Date Calculator */
.cs-adv-due-date-calculator .cs-calculator-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 600px;
margin: 20px auto;
}
.cs-adv-due-date-calculator .cs-calculator-title {
font-size: 1.5rem;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 20px;
text-align: center;
}
.cs-adv-due-date-calculator .cs-form-group {
display: flex;
align-items: center;
margin-bottom: 15px;
flex-direction: row;
}
.cs-adv-due-date-calculator .cs-form-label {
width: 150px;
font-size: 0.9rem;
font-weight: 500;
color: #374151;
}
.cs-adv-due-date-calculator .cs-form-input {
flex: 1;
padding: 8px;
font-size: 0.9rem;
border: 1px solid #d1d5db;
border-radius: 4px;
transition: border-color 0.2s;
}
.cs-adv-due-date-calculator .cs-form-input:focus {
outline: none;
border-color: #3b82f6;
}
.cs-adv-due-date-calculator .cs-form-button {
display: block;
width: 100%;
padding: 10px;
background: #3b82f6;
color: #fff;
font-size: 1rem;
font-weight: 500;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.cs-adv-due-date-calculator .cs-form-button:hover {
background: #1e3a8a;
}
.cs-adv-due-date-calculator .cs-result {
margin-top: 20px;
padding: 15px;
border-radius: 4px;
text-align: center;
}
.cs-adv-due-date-calculator .cs-result-success {
background: #ecfdf5;
color: #065f46;
}
.cs-adv-due-date-calculator .cs-result-success span {
font-weight: 600;
font-size: 1.2rem;
}
.cs-adv-due-date-calculator .cs-result-error {
background: #fef2f2;
color: #dc2626;
}
.cs-adv-due-date-calculator .cs-due-date-schedule {
margin-top: 20px;
}
.cs-adv-due-date-calculator .cs-due-date-title {
font-size: 1.2rem;
font-weight: 500;
color: #1e3a8a;
margin-bottom: 10px;
}
.cs-adv-due-date-calculator .cs-due-date-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-adv-due-date-calculator .cs-due-date-table th,
.cs-adv-due-date-calculator .cs-due-date-table td {
padding: 10px;
border: 1px solid #e5e7eb;
text-align: left;
}
.cs-adv-due-date-calculator .cs-due-date-table th {
background: #f9fafb;
font-weight: 500;
}
.cs-adv-due-date-calculator .cs-due-date-chart {
margin-top: 20px;
height: 300px;
}
.cs-adv-due-date-calculator #dueDateChart {
display: block;
width: 100%;
height: 300px;
max-height: 300px;
min-height: 300px;
}
.cs-adv-due-date-calculator .cs-chart-fallback {
color: #dc2626;
font-size: 0.9rem;
text-align: center;
margin-top: 10px;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.cs-adv-due-date-calculator .cs-calculator-card {
padding: 15px;
margin: 10px;
}
.cs-adv-due-date-calculator .cs-form-group {
flex-direction: column;
align-items: stretch;
}
.cs-adv-due-date-calculator .cs-form-label {
width: auto;
margin-bottom: 5px;
}
.cs-adv-due-date-calculator .cs-form-input {
width: 100%;
}
.cs-adv-due-date-calculator .cs-due-date-table th,
.cs-adv-due-date-calculator .cs-due-date-table td {
padding: 8px;
font-size: 0.85rem;
}
.cs-adv-due-date-calculator .cs-due-date-chart {
height: 250px;
}
.cs-adv-due-date-calculator #dueDateChart {
height: 250px;
max-height: 250px;
min-height: 250px;
}
.cs-adv-due-date-calculator .cs-chart-fallback {
font-size: 0.85rem;
}
}
/* Conception Date Calculator */
.cs-adv-conception-calculator .cs-calculator-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
padding: 20px;
max-width: 600px;
margin: 20px auto;
}
.cs-adv-conception-calculator .cs-calculator-title {
font-size: 1.5rem;
font-weight: 600;
color: #1e3a8a;
margin-bottom: 20px;
text-align: center;
}
.cs-adv-conception-calculator .cs-form-group {
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 15px;
}
.cs-adv-conception-calculator .cs-form-label {
width: 150px;
font-size: 0.9rem;
font-weight: 500;
color: #374151;
}
.cs-adv-conception-calculator .cs-form-input {
flex: 1;
padding: 8px;
font-size: 0.9rem;
border: 1px solid #d1d5db;
border-radius: 4px;
transition: border-color 0.2s;
}
.cs-adv-conception-calculator .cs-form-input:focus {
outline: none;
border-color: #3b82f6;
}
.cs-adv-conception-calculator .cs-form-button {
display: block;
width: 100%;
padding: 10px;
background: #3b82f6;
color: #fff;
font-size: 1rem;
font-weight: 500;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
}
.cs-adv-conception-calculator .cs-form-button:hover {
background: #1e3a8a;
}
.cs-adv-conception-calculator .cs-result {
margin-top: 20px;
padding: 15px;
border-radius: 4px;
text-align: center;
}
.cs-adv-conception-calculator .cs-result-success {
background: #ecfdf5;
color: #065f46;
}
.cs-adv-conception-calculator .cs-result-success span {
font-weight: 600;
font-size: 1.2rem;
}
.cs-adv-conception-calculator .cs-result-error {
background: #fef2f2;
color: #dc2626;
}
.cs-adv-conception-calculator .cs-conception-schedule {
margin-top: 20px;
}
.cs-adv-conception-calculator .cs-conception-title {
font-size: 1.2rem;
font-weight: 500;
color: #1e3a8a;
margin-bottom: 10px;
}
.cs-adv-conception-calculator .cs-conception-table {
width: 100%;
border-collapse: collapse;
font-size: 0.9rem;
}
.cs-adv-conception-calculator .cs-conception-table th,
.cs-adv-conception-calculator .cs-conception-table td {
padding: 10px;
border: 1px solid #e5e7eb;
text-align: left;
}
.cs-adv-conception-calculator .cs-conception-table th {
background: #f9fafb;
font-weight: 500;
}
.cs-adv-conception-calculator .cs-conception-chart {
margin-top: 20px;
height: 300px;
}
.cs-adv-conception-calculator #conceptionChart {
display: block;
width: 100%;
height: 300px;
max-height: 300px;
min-height: 300px;
}
.cs-adv-conception-calculator .cs-chart-fallback {
color: #dc2626;
font-size: 0.9rem;
text-align: center;
margin-top: 10px;
}
/* Mobile responsiveness */
@media (max-width: 768px) {
.cs-adv-conception-calculator .cs-calculator-card {
padding: 15px;
margin: 10px;
}
.cs-adv-conception-calculator .cs-form-group {
flex-direction: column;
align-items: stretch;
}
.cs-adv-conception-calculator .cs-form-label {
width: auto;
margin-bottom: 5px;
}
.cs-adv-conception-calculator .cs-form-input {
width: 100%;
}
.cs-adv-conception-calculator .cs-conception-table th,
.cs-adv-conception-calculator .cs-conception-table td {
padding: 8px;
font-size: 0.85rem;
}
.cs-adv-conception-calculator .cs-conception-chart {
height: 250px;
}
.cs-adv-conception-calculator #conceptionChart {
height: 250px;
max-height: 250px;
min-height: 250px;
}
.cs-adv-conception-calculator .cs-chart-fallback {
font-size: 0.85rem;
}
}
.cs-adv-gold-purity-calculator {
max-width: 800px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-gold-purity-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-gold-purity-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-gold-purity-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #1e3a8a;
font-weight: 600;
}
.cs-adv-gold-purity-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-gold-purity-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-gold-purity-calculator .cs-form-input,
.cs-adv-gold-purity-calculator .cs-form-select {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-gold-purity-calculator .cs-form-input:focus,
.cs-adv-gold-purity-calculator .cs-form-select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.cs-adv-gold-purity-calculator .cs-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.cs-adv-gold-purity-calculator .cs-form-select {
background: #f9fafb;
flex: 0 0 150px;
}
.cs-adv-gold-purity-calculator .cs-form-button {
background: linear-gradient(90deg, #3b82f6, #1e3a8a);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
}
.cs-adv-gold-purity-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #1e3a8a, #3b82f6);
}
.cs-adv-gold-purity-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-gold-purity-calculator .cs-result-success {
background: #dcfce7;
color: #15803d;
}
.cs-adv-gold-purity-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-gold-purity-calculator .cs-result span {
font-weight: bold;
color: #1e3a8a;
}
.cs-adv-gold-purity-calculator .cs-purity-visual {
margin-top: 20px;
}
.cs-adv-gold-purity-calculator .cs-purity-title {
font-size: 18px;
margin-bottom: 10px;
color: #1e3a8a;
font-weight: 500;
}
.cs-adv-gold-purity-calculator .cs-progress-bar {
position: relative;
width: 100%;
height: 20px;
background: #e5e7eb;
border-radius: 10px;
overflow: hidden;
}
.cs-adv-gold-purity-calculator .cs-progress-fill {
height: 100%;
background: linear-gradient(90deg, #facc15, #f97316);
transition: width 0.5s ease;
}
.cs-adv-gold-purity-calculator .cs-progress-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: bold;
color: #1e3a8a;
}
.cs-adv-gold-purity-calculator .cs-gold-table {
margin-top: 20px;
}
.cs-adv-gold-purity-calculator .cs-gold-title {
font-size: 18px;
margin-bottom: 10px;
color: #1e3a8a;
font-weight: 500;
}
.cs-adv-gold-purity-calculator .cs-gold-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-gold-purity-calculator .cs-gold-table th,
.cs-adv-gold-purity-calculator .cs-gold-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-gold-purity-calculator .cs-gold-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-gold-purity-calculator .cs-gold-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-gold-purity-calculator .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-gold-purity-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-gold-purity-calculator .cs-form-inline .cs-input-group,
.cs-adv-gold-purity-calculator .cs-form-inline .cs-form-input {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-gold-purity-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-gold-purity-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-gold-purity-calculator .cs-input-group {
flex-direction: column;
gap: 5px;
}
.cs-adv-gold-purity-calculator .cs-form-select {
width: 100%;
flex: 1;
}
.cs-adv-gold-purity-calculator .cs-gold-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-energy-consumption-calculator {
max-width: 900px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-energy-consumption-calculator .cs-calculator-card {
background: #fff;
border-radius: 8px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.cs-adv-energy-consumption-calculator .cs-calculator-title {
font-size: 24px;
margin-bottom: 20px;
text-align: center;
color: #1e3a8a;
}
.cs-adv-energy-consumption-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-energy-consumption-calculator .cs-form-label {
display: block;
font-size: 14px;
margin-bottom: 5px;
color: #374151;
}
.cs-adv-energy-consumption-calculator .cs-form-input {
width: 100%;
padding: 8px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 14px;
box-sizing: border-box;
}
.cs-adv-energy-consumption-calculator .cs-form-input:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}
.cs-adv-energy-consumption-calculator .cs-appliance-list {
margin-bottom: 20px;
}
.cs-adv-energy-consumption-calculator .cs-appliance-title {
font-size: 18px;
margin-bottom: 10px;
color: #1e3a8a;
}
.cs-adv-energy-consumption-calculator .cs-appliance-item {
border: 1px solid #e5e7eb;
border-radius: 4px;
padding: 15px;
margin-bottom: 10px;
background: #f9fafb;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr auto;
gap: 10px;
align-items: center;
}
.cs-adv-energy-consumption-calculator .cs-add-appliance,
.cs-adv-energy-consumption-calculator .cs-remove-appliance,
.cs-adv-energy-consumption-calculator .cs-form-button {
padding: 8px 16px;
border: none;
border-radius: 4px;
font-size: 14px;
cursor: pointer;
transition: background 0.2s ease;
}
.cs-adv-energy-consumption-calculator .cs-add-appliance {
background: #3b82f6;
color: #fff;
display: block;
margin: 0 auto;
}
.cs-adv-energy-consumption-calculator .cs-add-appliance:hover {
background: #1e3a8a;
}
.cs-adv-energy-consumption-calculator .cs-remove-appliance {
background: #ef4444;
color: #fff;
}
.cs-adv-energy-consumption-calculator .cs-remove-appliance:hover {
background: #b91c1c;
}
.cs-adv-energy-consumption-calculator .cs-form-button {
background: #22c55e;
color: #fff;
width: 100%;
font-size: 16px;
}
.cs-adv-energy-consumption-calculator .cs-form-button:hover {
background: #15803d;
}
.cs-adv-energy-consumption-calculator .cs-result {
margin-top: 20px;
padding: 15px;
border-radius: 4px;
font-size: 16px;
}
.cs-adv-energy-consumption-calculator .cs-result-success {
background: #dcfce7;
color: #15803d;
}
.cs-adv-energy-consumption-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-energy-consumption-calculator .cs-result span {
font-weight: bold;
}
.cs-adv-energy-consumption-calculator .cs-energy-table {
margin-top: 20px;
}
.cs-adv-energy-consumption-calculator .cs-energy-title {
font-size: 18px;
margin-bottom: 10px;
color: #1e3a8a;
}
.cs-adv-energy-consumption-calculator .cs-energy-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
}
.cs-adv-energy-consumption-calculator .cs-energy-table th,
.cs-adv-energy-consumption-calculator .cs-energy-table td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-energy-consumption-calculator .cs-energy-table th {
background: #f3f4f6;
font-weight: bold;
color: #374151;
}
.cs-adv-energy-consumption-calculator .cs-energy-table td {
background: #fff;
}
.cs-adv-energy-consumption-calculator .cs-energy-chart {
margin-top: 20px;
}
@media (max-width: 600px) {
.cs-adv-energy-consumption-calculator .cs-appliance-item {
grid-template-columns: 1fr;
}
.cs-adv-energy-consumption-calculator .cs-remove-appliance {
width: 100%;
}
.cs-adv-energy-consumption-calculator .cs-energy-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-dog-age-calculator {
max-width: 700px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-dog-age-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-dog-age-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-dog-age-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #1e3a8a;
font-weight: 600;
}
.cs-adv-dog-age-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-dog-age-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-dog-age-calculator .cs-form-input,
.cs-adv-dog-age-calculator .cs-form-select {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-dog-age-calculator .cs-form-input:focus,
.cs-adv-dog-age-calculator .cs-form-select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.cs-adv-dog-age-calculator .cs-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.cs-adv-dog-age-calculator .cs-form-input {
flex: 1;
}
.cs-adv-dog-age-calculator .cs-form-select {
background: #f9fafb;
flex: 0 0 150px;
}
.cs-adv-dog-age-calculator .cs-form-button {
background: linear-gradient(90deg, #3b82f6, #1e3a8a);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
}
.cs-adv-dog-age-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #1e3a8a, #3b82f6);
}
.cs-adv-dog-age-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-dog-age-calculator .cs-result-success {
background: #dcfce7;
color: #15803d;
}
.cs-adv-dog-age-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-dog-age-calculator .cs-result span {
font-weight: bold;
color: #1e3a8a;
}
.cs-adv-dog-age-calculator .cs-life-stage-visual {
margin-top: 20px;
}
.cs-adv-dog-age-calculator .cs-life-stage-title {
font-size: 18px;
margin-bottom: 10px;
color: #1e3a8a;
font-weight: 500;
}
.cs-adv-dog-age-calculator .cs-progress-bar {
position: relative;
width: 100%;
height: 20px;
background: #e5e7eb;
border-radius: 10px;
overflow: hidden;
}
.cs-adv-dog-age-calculator .cs-progress-fill {
height: 100%;
background: linear-gradient(90deg, #34d399, #10b981);
transition: width 0.5s ease;
}
.cs-adv-dog-age-calculator .cs-progress-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: bold;
color: #1e3a8a;
}
.cs-adv-dog-age-calculator .cs-dog-table {
margin-top: 20px;
}
.cs-adv-dog-age-calculator .cs-dog-title {
font-size: 18px;
margin-bottom: 10px;
color: #1e3a8a;
font-weight: 500;
}
.cs-adv-dog-age-calculator .cs-dog-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-dog-age-calculator .cs-dog-table th,
.cs-adv-dog-age-calculator .cs-dog-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-dog-age-calculator .cs-dog-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-dog-age-calculator .cs-dog-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-dog-age-calculator .cs-form-inline {
flex-direction: row;
display: flex;
align-items: center;
gap: 15px;
}
.cs-adv-dog-age-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-dog-age-calculator .cs-form-inline .cs-input-group,
.cs-adv-dog-age-calculator .cs-form-inline .cs-form-select {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-dog-age-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-dog-age-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-dog-age-calculator .cs-input-group {
flex-direction: column;
gap: 5px;
}
.cs-adv-dog-age-calculator .cs-form-input,
.cs-adv-dog-age-calculator .cs-form-select {
width: 100%;
flex: 1;
}
.cs-adv-dog-age-calculator .cs-dog-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-cat-age-calculator {
max-width: 700px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-cat-age-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-cat-age-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-cat-age-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #1e3a8a;
font-weight: 600;
}
.cs-adv-cat-age-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-cat-age-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-cat-age-calculator .cs-form-input,
.cs-adv-cat-age-calculator .cs-form-select {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-cat-age-calculator .cs-form-input:focus,
.cs-adv-cat-age-calculator .cs-form-select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.cs-adv-cat-age-calculator .cs-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.cs-adv-cat-age-calculator .cs-form-input {
flex: 1;
}
.cs-adv-cat-age-calculator .cs-form-select {
background: #f9fafb;
flex: 0 0 150px;
}
.cs-adv-cat-age-calculator .cs-form-button {
background: linear-gradient(90deg, #3b82f6, #1e3a8a);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
}
.cs-adv-cat-age-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #1e3a8a, #3b82f6);
}
.cs-adv-cat-age-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-cat-age-calculator .cs-result-success {
background: #dcfce7;
color: #15803d;
}
.cs-adv-cat-age-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-cat-age-calculator .cs-result span {
font-weight: bold;
color: #1e3a8a;
}
.cs-adv-cat-age-calculator .cs-life-stage-visual {
margin-top: 20px;
}
.cs-adv-cat-age-calculator .cs-life-stage-title {
font-size: 18px;
margin-bottom: 10px;
color: #1e3a8a;
font-weight: 500;
}
.cs-adv-cat-age-calculator .cs-progress-bar {
position: relative;
width: 100%;
height: 20px;
background: #e5e7eb;
border-radius: 10px;
overflow: hidden;
}
.cs-adv-cat-age-calculator .cs-progress-fill {
height: 100%;
background: linear-gradient(90deg, #60a5fa, #3b82f6);
transition: width 0.5s ease;
}
.cs-adv-cat-age-calculator .cs-progress-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: bold;
color: #1e3a8a;
}
.cs-adv-cat-age-calculator .cs-cat-table {
margin-top: 20px;
}
.cs-adv-cat-age-calculator .cs-cat-title {
font-size: 18px;
margin-bottom: 10px;
color: #1e3a8a;
font-weight: 500;
}
.cs-adv-cat-age-calculator .cs-cat-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-cat-age-calculator .cs-cat-table th,
.cs-adv-cat-age-calculator .cs-cat-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-cat-age-calculator .cs-cat-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-cat-age-calculator .cs-cat-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-cat-age-calculator .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-cat-age-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-cat-age-calculator .cs-form-inline .cs-input-group,
.cs-adv-cat-age-calculator .cs-form-inline .cs-form-select {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-cat-age-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-cat-age-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-cat-age-calculator .cs-input-group {
flex-direction: column;
gap: 5px;
}
.cs-adv-cat-age-calculator .cs-form-input,
.cs-adv-cat-age-calculator .cs-form-select {
width: 100%;
flex: 1;
}
.cs-adv-cat-age-calculator .cs-cat-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-zodiac-sign-calculator {
max-width: 700px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-zodiac-sign-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-zodiac-sign-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-zodiac-sign-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #1e3a8a;
font-weight: 600;
}
.cs-adv-zodiac-sign-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-zodiac-sign-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-zodiac-sign-calculator .cs-form-input,
.cs-adv-zodiac-sign-calculator .cs-form-select {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-zodiac-sign-calculator .cs-form-input:focus,
.cs-adv-zodiac-sign-calculator .cs-form-select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.cs-adv-zodiac-sign-calculator .cs-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.cs-adv-zodiac-sign-calculator .cs-form-input {
flex: 1;
}
.cs-adv-zodiac-sign-calculator .cs-form-select {
background: #f9fafb;
flex: 0 0 100px;
}
.cs-adv-zodiac-sign-calculator .cs-form-button {
background: linear-gradient(90deg, #8b5cf6, #6d28d9);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
}
.cs-adv-zodiac-sign-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #6d28d9, #8b5cf6);
}
.cs-adv-zodiac-sign-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-zodiac-sign-calculator .cs-result-success {
background: #e0e7ff;
color: #1e3a8a;
}
.cs-adv-zodiac-sign-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-zodiac-sign-calculator .cs-result span {
font-weight: bold;
color: #6d28d9;
}
.cs-adv-zodiac-sign-calculator .cs-zodiac-visual {
margin-top: 20px;
}
.cs-adv-zodiac-sign-calculator .cs-zodiac-title {
font-size: 18px;
margin-bottom: 10px;
color: #1e3a8a;
font-weight: 500;
}
.cs-adv-zodiac-sign-calculator .cs-zodiac-card {
background: linear-gradient(135deg, #ede9fe, #dbeafe);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-zodiac-sign-calculator .cs-zodiac-sign {
font-size: 24px;
margin-bottom: 10px;
color: #6d28d9;
font-weight: 600;
}
.cs-adv-zodiac-sign-calculator .cs-zodiac-description {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
.cs-adv-zodiac-sign-calculator .cs-zodiac-table {
margin-top: 20px;
}
.cs-adv-zodiac-sign-calculator .cs-zodiac-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-zodiac-sign-calculator .cs-zodiac-table th,
.cs-adv-zodiac-sign-calculator .cs-zodiac-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-zodiac-sign-calculator .cs-zodiac-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-zodiac-sign-calculator .cs-zodiac-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-zodiac-sign-calculator .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-zodiac-sign-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-zodiac-sign-calculator .cs-form-inline .cs-input-group {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-zodiac-sign-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-zodiac-sign-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-zodiac-sign-calculator .cs-input-group {
flex-direction: column;
gap: 5px;
}
.cs-adv-zodiac-sign-calculator .cs-form-input,
.cs-adv-zodiac-sign-calculator .cs-form-select {
width: 100%;
flex: 1;
}
.cs-adv-zodiac-sign-calculator .cs-zodiac-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-moon-phase-calculator {
max-width: 700px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-moon-phase-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-moon-phase-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-moon-phase-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #1e3a8a;
font-weight: 600;
}
.cs-adv-moon-phase-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-moon-phase-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-moon-phase-calculator .cs-form-input,
.cs-adv-moon-phase-calculator .cs-form-select {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-moon-phase-calculator .cs-form-input:focus,
.cs-adv-moon-phase-calculator .cs-form-select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.cs-adv-moon-phase-calculator .cs-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.cs-adv-moon-phase-calculator .cs-form-input {
flex: 1;
}
.cs-adv-moon-phase-calculator .cs-form-select {
background: #f9fafb;
flex: 0 0 100px;
}
.cs-adv-moon-phase-calculator .cs-form-button {
background: linear-gradient(90deg, #3b82f6, #1e3a8a);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
margin-top: 10px;
}
.cs-adv-moon-phase-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #1e3a8a, #3b82f6);
}
.cs-adv-moon-phase-calculator .cs-form-button-secondary {
background: #6b7280;
margin-bottom: 10px;
}
.cs-adv-moon-phase-calculator .cs-form-button-secondary:hover {
background: #4b5563;
}
.cs-adv-moon-phase-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-moon-phase-calculator .cs-result-success {
background: #e0f2fe;
color: #1e40af;
}
.cs-adv-moon-phase-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-moon-phase-calculator .cs-result span {
font-weight: bold;
color: #1e3a8a;
}
.cs-adv-moon-phase-calculator .cs-moon-visual {
margin-top: 20px;
}
.cs-adv-moon-phase-calculator .cs-moon-title {
font-size: 18px;
margin-bottom: 10px;
color: #1e3a8a;
font-weight: 500;
}
.cs-adv-moon-phase-calculator .cs-moon-card {
background: linear-gradient(135deg, #e0f2fe, #bfdbfe);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-moon-phase-calculator .cs-moon-phase {
font-size: 24px;
margin-bottom: 10px;
color: #1e3a8a;
font-weight: 600;
}
.cs-adv-moon-phase-calculator .cs-illumination-bar {
position: relative;
width: 100%;
height: 20px;
background: #e5e7eb;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
}
.cs-adv-moon-phase-calculator .cs-illumination-fill {
height: 100%;
background: linear-gradient(90deg, #60a5fa, #3b82f6);
transition: width 0.5s ease;
}
.cs-adv-moon-phase-calculator .cs-illumination-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: bold;
color: #1e3a8a;
}
.cs-adv-moon-phase-calculator .cs-moon-description {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
.cs-adv-moon-phase-calculator .cs-moon-table {
margin-top: 20px;
}
.cs-adv-moon-phase-calculator .cs-moon-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-moon-phase-calculator .cs-moon-table th,
.cs-adv-moon-phase-calculator .cs-moon-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-moon-phase-calculator .cs-moon-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-moon-phase-calculator .cs-moon-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-moon-phase-calculator .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-moon-phase-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-moon-phase-calculator .cs-form-inline .cs-input-group {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-moon-phase-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-moon-phase-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-moon-phase-calculator .cs-input-group {
flex-direction: column;
gap: 5px;
}
.cs-adv-moon-phase-calculator .cs-form-input,
.cs-adv-moon-phase-calculator .cs-form-select {
width: 100%;
flex: 1;
}
.cs-adv-moon-phase-calculator .cs-moon-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-love-percentage-calculator {
max-width: 700px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-love-percentage-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-love-percentage-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-love-percentage-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #be185d;
font-weight: 600;
}
.cs-adv-love-percentage-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-love-percentage-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-love-percentage-calculator .cs-form-input {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-love-percentage-calculator .cs-form-input:focus {
outline: none;
border-color: #f43f5e;
box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.1);
}
.cs-adv-love-percentage-calculator .cs-form-button {
background: linear-gradient(90deg, #f43f5e, #be185d);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
margin-top: 10px;
}
.cs-adv-love-percentage-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #be185d, #f43f5e);
}
.cs-adv-love-percentage-calculator .cs-form-button-secondary {
background: #6b7280;
margin-bottom: 10px;
}
.cs-adv-love-percentage-calculator .cs-form-button-secondary:hover {
background: #4b5563;
}
.cs-adv-love-percentage-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-love-percentage-calculator .cs-result-success {
background: #ffe4e6;
color: #be185d;
}
.cs-adv-love-percentage-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-love-percentage-calculator .cs-result span {
font-weight: bold;
color: #f43f5e;
}
.cs-adv-love-percentage-calculator .cs-love-visual {
margin-top: 20px;
}
.cs-adv-love-percentage-calculator .cs-love-title {
font-size: 18px;
margin-bottom: 10px;
color: #be185d;
font-weight: 500;
}
.cs-adv-love-percentage-calculator .cs-love-card {
background: linear-gradient(135deg, #ffe4e6, #ffccd5);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-love-percentage-calculator .cs-love-bar {
position: relative;
width: 100%;
height: 20px;
background: #e5e7eb;
border-radius: 10px;
overflow: hidden;
margin-bottom: 10px;
}
.cs-adv-love-percentage-calculator .cs-love-fill {
height: 100%;
background: linear-gradient(90deg, #f43f5e, #be185d);
transition: width 0.5s ease;
}
.cs-adv-love-percentage-calculator .cs-love-label {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 12px;
font-weight: bold;
color: #fff;
}
.cs-adv-love-percentage-calculator .cs-love-message {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
.cs-adv-love-percentage-calculator .cs-love-table {
margin-top: 20px;
}
.cs-adv-love-percentage-calculator .cs-love-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-love-percentage-calculator .cs-love-table th,
.cs-adv-love-percentage-calculator .cs-love-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-love-percentage-calculator .cs-love-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-love-percentage-calculator .cs-love-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-love-percentage-calculator .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-love-percentage-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-love-percentage-calculator .cs-form-inline .cs-form-input {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-love-percentage-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-love-percentage-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-love-percentage-calculator .cs-form-input {
width: 100%;
}
.cs-adv-love-percentage-calculator .cs-love-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-love-flames-calculator {
max-width: 700px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-love-flames-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-love-flames-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-love-flames-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #a21caf;
font-weight: 600;
}
.cs-adv-love-flames-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-love-flames-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-love-flames-calculator .cs-form-input {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-love-flames-calculator .cs-form-input:focus {
outline: none;
border-color: #d946ef;
box-shadow: 0 0 0 3px rgba(217, 70, 239, 0.1);
}
.cs-adv-love-flames-calculator .cs-form-button {
background: linear-gradient(90deg, #d946ef, #a21caf);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
margin-top: 10px;
}
.cs-adv-love-flames-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #a21caf, #d946ef);
}
.cs-adv-love-flames-calculator .cs-form-button-secondary {
background: #6b7280;
margin-bottom: 10px;
}
.cs-adv-love-flames-calculator .cs-form-button-secondary:hover {
background: #4b5563;
}
.cs-adv-love-flames-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-love-flames-calculator .cs-result-success {
background: #f5d0fe;
color: #a21caf;
}
.cs-adv-love-flames-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-love-flames-calculator .cs-result span {
font-weight: bold;
color: #d946ef;
}
.cs-adv-love-flames-calculator .cs-flames-visual {
margin-top: 20px;
}
.cs-adv-love-flames-calculator .cs-flames-title {
font-size: 18px;
margin-bottom: 10px;
color: #a21caf;
font-weight: 500;
}
.cs-adv-love-flames-calculator .cs-flames-card {
background: linear-gradient(135deg, #f5d0fe, #e879f9);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-love-flames-calculator .cs-flames-result {
font-size: 24px;
margin-bottom: 10px;
color: #a21caf;
font-weight: 600;
}
.cs-adv-love-flames-calculator .cs-flames-description {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
.cs-adv-love-flames-calculator .cs-flames-table {
margin-top: 20px;
}
.cs-adv-love-flames-calculator .cs-flames-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-love-flames-calculator .cs-flames-table th,
.cs-adv-love-flames-calculator .cs-flames-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-love-flames-calculator .cs-flames-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-love-flames-calculator .cs-flames-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-love-flames-calculator .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-love-flames-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-love-flames-calculator .cs-form-inline .cs-form-input {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-love-flames-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-love-flames-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-love-flames-calculator .cs-form-input {
width: 100%;
}
.cs-adv-love-flames-calculator .cs-flames-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-chinese-gender-calculator {
max-width: 700px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-chinese-gender-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-chinese-gender-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-chinese-gender-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #1e40af;
font-weight: 600;
}
.cs-adv-chinese-gender-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-chinese-gender-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-chinese-gender-calculator .cs-form-input,
.cs-adv-chinese-gender-calculator .cs-form-select {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-chinese-gender-calculator .cs-form-input:focus,
.cs-adv-chinese-gender-calculator .cs-form-select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.cs-adv-chinese-gender-calculator .cs-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.cs-adv-chinese-gender-calculator .cs-form-input {
flex: 1;
}
.cs-adv-chinese-gender-calculator .cs-form-select {
background: #f9fafb;
flex: 0 0 100px;
}
.cs-adv-chinese-gender-calculator .cs-form-button {
background: linear-gradient(90deg, #3b82f6, #db2777);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
margin-top: 10px;
}
.cs-adv-chinese-gender-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #db2777, #3b82f6);
}
.cs-adv-chinese-gender-calculator .cs-form-button-secondary {
background: #6b7280;
margin-bottom: 10px;
}
.cs-adv-chinese-gender-calculator .cs-form-button-secondary:hover {
background: #4b5563;
}
.cs-adv-chinese-gender-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-chinese-gender-calculator .cs-result-success {
background: #e0f2fe;
color: #1e40af;
}
.cs-adv-chinese-gender-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-chinese-gender-calculator .cs-result span {
font-weight: bold;
color: #db2777;
}
.cs-adv-chinese-gender-calculator .cs-gender-visual {
margin-top: 20px;
}
.cs-adv-chinese-gender-calculator .cs-gender-title {
font-size: 18px;
margin-bottom: 10px;
color: #1e40af;
font-weight: 500;
}
.cs-adv-chinese-gender-calculator .cs-gender-card {
background: linear-gradient(135deg, #e0f2fe, #fce7f3);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-chinese-gender-calculator .cs-gender-result {
font-size: 24px;
margin-bottom: 10px;
color: #db2777;
font-weight: 600;
}
.cs-adv-chinese-gender-calculator .cs-gender-description {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
.cs-adv-chinese-gender-calculator .cs-gender-table {
margin-top: 20px;
}
.cs-adv-chinese-gender-calculator .cs-gender-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-chinese-gender-calculator .cs-gender-table th,
.cs-adv-chinese-gender-calculator .cs-gender-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-chinese-gender-calculator .cs-gender-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-chinese-gender-calculator .cs-gender-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-chinese-gender-calculator .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-chinese-gender-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-chinese-gender-calculator .cs-form-inline .cs-input-group,
.cs-adv-chinese-gender-calculator .cs-form-inline .cs-form-input {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-chinese-gender-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-chinese-gender-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-chinese-gender-calculator .cs-input-group {
flex-direction: column;
gap: 5px;
}
.cs-adv-chinese-gender-calculator .cs-form-input,
.cs-adv-chinese-gender-calculator .cs-form-select {
width: 100%;
flex: 1;
}
.cs-adv-chinese-gender-calculator .cs-gender-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-bra-size-calculator {
max-width: 700px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-bra-size-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-bra-size-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-bra-size-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 20px;
text-align: center;
color: #6d28d9;
font-weight: 600;
}
.cs-adv-bra-size-calculator .cs-instructions {
margin-bottom: 20px;
padding: 15px;
background: #f9fafb;
border-radius: 6px;
font-size: 14px;
color: #374151;
}
.cs-adv-bra-size-calculator .cs-instructions ul {
margin: 10px 0 0 20px;
padding: 0;
}
.cs-adv-bra-size-calculator .cs-instructions li {
margin-bottom: 5px;
}
.cs-adv-bra-size-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-bra-size-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-bra-size-calculator .cs-form-input,
.cs-adv-bra-size-calculator .cs-form-select {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-bra-size-calculator .cs-form-input:focus,
.cs-adv-bra-size-calculator .cs-form-select:focus {
outline: none;
border-color: #8b5cf6;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.cs-adv-bra-size-calculator .cs-form-input {
width: 100%;
}
.cs-adv-bra-size-calculator .cs-form-select {
background: #f9fafb;
width: 100%;
max-width: 150px;
}
.cs-adv-bra-size-calculator .cs-form-button {
background: linear-gradient(90deg, #8b5cf6, #6d28d9);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
margin-top: 10px;
}
.cs-adv-bra-size-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #6d28d9, #8b5cf6);
}
.cs-adv-bra-size-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-bra-size-calculator .cs-result-success {
background: #ede9fe;
color: #6d28d9;
}
.cs-adv-bra-size-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-bra-size-calculator .cs-result span {
font-weight: bold;
color: #8b5cf6;
}
.cs-adv-bra-size-calculator .cs-bra-visual {
margin-top: 20px;
}
.cs-adv-bra-size-calculator .cs-bra-title {
font-size: 18px;
margin-bottom: 10px;
color: #6d28d9;
font-weight: 500;
}
.cs-adv-bra-size-calculator .cs-bra-card {
background: linear-gradient(135deg, #ede9fe, #ddd6fe);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-bra-size-calculator .cs-bra-size {
font-size: 24px;
margin-bottom: 10px;
color: #8b5cf6;
font-weight: 600;
}
.cs-adv-bra-size-calculator .cs-bra-description {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
.cs-adv-bra-size-calculator .cs-bra-table {
margin-top: 20px;
}
.cs-adv-bra-size-calculator .cs-bra-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-bra-size-calculator .cs-bra-table th,
.cs-adv-bra-size-calculator .cs-bra-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-bra-size-calculator .cs-bra-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-bra-size-calculator .cs-bra-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-bra-size-calculator .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-bra-size-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-bra-size-calculator .cs-form-inline .cs-form-input,
.cs-adv-bra-size-calculator .cs-form-inline .cs-form-select {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-bra-size-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-bra-size-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-bra-size-calculator .cs-form-input,
.cs-adv-bra-size-calculator .cs-form-select {
width: 100%;
}
.cs-adv-bra-size-calculator .cs-bra-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-lunar-age-calculator {
max-width: 700px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-lunar-age-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-lunar-age-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-lunar-age-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #b91c1c;
font-weight: 600;
}
.cs-adv-lunar-age-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-lunar-age-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-lunar-age-calculator .cs-form-input,
.cs-adv-lunar-age-calculator .cs-form-select {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-lunar-age-calculator .cs-form-input:focus,
.cs-adv-lunar-age-calculator .cs-form-select:focus {
outline: none;
border-color: #dc2626;
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}
.cs-adv-lunar-age-calculator .cs-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.cs-adv-lunar-age-calculator .cs-form-input {
flex: 1;
}
.cs-adv-lunar-age-calculator .cs-form-select {
background: #f9fafb;
flex: 0 0 100px;
}
.cs-adv-lunar-age-calculator .cs-form-button {
background: linear-gradient(90deg, #dc2626, #b91c1c);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
margin-top: 10px;
}
.cs-adv-lunar-age-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #b91c1c, #dc2626);
}
.cs-adv-lunar-age-calculator .cs-form-button-secondary {
background: #6b7280;
margin-bottom: 10px;
}
.cs-adv-lunar-age-calculator .cs-form-button-secondary:hover {
background: #4b5563;
}
.cs-adv-lunar-age-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-lunar-age-calculator .cs-result-success {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-lunar-age-calculator .cs-result-error {
background: #fee2e2;
color: #7f1d1d;
}
.cs-adv-lunar-age-calculator .cs-result span {
font-weight: bold;
color: #dc2626;
}
.cs-adv-lunar-age-calculator .cs-lunar-visual {
margin-top: 20px;
}
.cs-adv-lunar-age-calculator .cs-lunar-title {
font-size: 18px;
margin-bottom: 10px;
color: #b91c1c;
font-weight: 500;
}
.cs-adv-lunar-age-calculator .cs-lunar-card {
background: linear-gradient(135deg, #fee2e2, #fef2f2);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-lunar-age-calculator .cs-lunar-age {
font-size: 24px;
margin-bottom: 10px;
color: #dc2626;
font-weight: 600;
}
.cs-adv-lunar-age-calculator .cs-lunar-description {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
.cs-adv-lunar-age-calculator .cs-lunar-table {
margin-top: 20px;
}
.cs-adv-lunar-age-calculator .cs-lunar-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-lunar-age-calculator .cs-lunar-table th,
.cs-adv-lunar-age-calculator .cs-lunar-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-lunar-age-calculator .cs-lunar-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-lunar-age-calculator .cs-lunar-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-lunar-age-calculator .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-lunar-age-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-lunar-age-calculator .cs-form-inline .cs-input-group {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-lunar-age-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-lunar-age-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-lunar-age-calculator .cs-input-group {
flex-direction: column;
gap: 5px;
}
.cs-adv-lunar-age-calculator .cs-form-input,
.cs-adv-lunar-age-calculator .cs-form-select {
width: 100%;
flex: 1;
}
.cs-adv-lunar-age-calculator .cs-lunar-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-fuel-cost-calculator {
max-width: 700px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-fuel-cost-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-fuel-cost-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-fuel-cost-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #15803d;
font-weight: 600;
}
.cs-adv-fuel-cost-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-fuel-cost-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-fuel-cost-calculator .cs-form-input,
.cs-adv-fuel-cost-calculator .cs-form-select {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-fuel-cost-calculator .cs-form-input:focus,
.cs-adv-fuel-cost-calculator .cs-form-select:focus {
outline: none;
border-color: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
.cs-adv-fuel-cost-calculator .cs-form-input {
width: 100%;
}
.cs-adv-fuel-cost-calculator .cs-form-select {
background: #f9fafb;
width: 100%;
max-width: 200px;
}
.cs-adv-fuel-cost-calculator .cs-form-button {
background: linear-gradient(90deg, #22c55e, #15803d);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
margin-top: 10px;
}
.cs-adv-fuel-cost-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #15803d, #22c55e);
}
.cs-adv-fuel-cost-calculator .cs-form-button-secondary {
background: #6b7280;
margin-bottom: 10px;
}
.cs-adv-fuel-cost-calculator .cs-form-button-secondary:hover {
background: #4b5563;
}
.cs-adv-fuel-cost-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-fuel-cost-calculator .cs-result-success {
background: #dcfce7;
color: #15803d;
}
.cs-adv-fuel-cost-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-fuel-cost-calculator .cs-result span {
font-weight: bold;
color: #22c55e;
}
.cs-adv-fuel-cost-calculator .cs-fuel-visual {
margin-top: 20px;
}
.cs-adv-fuel-cost-calculator .cs-fuel-title {
font-size: 18px;
margin-bottom: 10px;
color: #15803d;
font-weight: 500;
}
.cs-adv-fuel-cost-calculator .cs-fuel-card {
background: linear-gradient(135deg, #dcfce7, #ecfccb);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-fuel-cost-calculator .cs-fuel-cost {
font-size: 24px;
margin-bottom: 10px;
color: #22c55e;
font-weight: 600;
}
.cs-adv-fuel-cost-calculator .cs-fuel-description {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
.cs-adv-fuel-cost-calculator .cs-fuel-table {
margin-top: 20px;
}
.cs-adv-fuel-cost-calculator .cs-fuel-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-fuel-cost-calculator .cs-fuel-table th,
.cs-adv-fuel-cost-calculator .cs-fuel-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-fuel-cost-calculator .cs-fuel-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-fuel-cost-calculator .cs-fuel-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-fuel-cost-calculator .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-fuel-cost-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-fuel-cost-calculator .cs-form-inline .cs-form-input,
.cs-adv-fuel-cost-calculator .cs-form-inline .cs-form-select {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-fuel-cost-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-fuel-cost-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-fuel-cost-calculator .cs-form-input,
.cs-adv-fuel-cost-calculator .cs-form-select {
width: 100%;
}
.cs-adv-fuel-cost-calculator .cs-fuel-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-date-duration-calculator {
max-width: 700px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-date-duration-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-date-duration-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-date-duration-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #1e40af;
font-weight: 600;
}
.cs-adv-date-duration-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-date-duration-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-date-duration-calculator .cs-form-input,
.cs-adv-date-duration-calculator .cs-form-select,
.cs-adv-date-duration-calculator .cs-form-checkbox {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-date-duration-calculator .cs-form-input:focus,
.cs-adv-date-duration-calculator .cs-form-select:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
.cs-adv-date-duration-calculator .cs-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.cs-adv-date-duration-calculator .cs-form-input {
flex: 1;
}
.cs-adv-date-duration-calculator .cs-form-select {
background: #f9fafb;
flex: 0 0 100px;
}
.cs-adv-date-duration-calculator .cs-form-checkbox {
width: 20px;
height: 20px;
margin: 0;
border-radius: 4px;
}
.cs-adv-date-duration-calculator .cs-form-button {
background: linear-gradient(90deg, #3b82f6, #1e40af);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
margin-top: 10px;
}
.cs-adv-date-duration-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #1e40af, #3b82f6);
}
.cs-adv-date-duration-calculator .cs-form-button-secondary {
background: #6b7280;
margin-bottom: 10px;
}
.cs-adv-date-duration-calculator .cs-form-button-secondary:hover {
background: #4b5563;
}
.cs-adv-date-duration-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-date-duration-calculator .cs-result-success {
background: #dbeafe;
color: #1e40af;
}
.cs-adv-date-duration-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-date-duration-calculator .cs-result span {
font-weight: bold;
color: #3b82f6;
}
.cs-adv-date-duration-calculator .cs-duration-visual {
margin-top: 20px;
}
.cs-adv-date-duration-calculator .cs-duration-title {
font-size: 18px;
margin-bottom: 10px;
color: #1e40af;
font-weight: 500;
}
.cs-adv-date-duration-calculator .cs-duration-card {
background: linear-gradient(135deg, #dbeafe, #eff6ff);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-date-duration-calculator .cs-duration-text {
font-size: 24px;
margin-bottom: 10px;
color: #3b82f6;
font-weight: 600;
}
.cs-adv-date-duration-calculator .cs-duration-description {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
.cs-adv-date-duration-calculator .cs-duration-table {
margin-top: 20px;
}
.cs-adv-date-duration-calculator .cs-duration-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-date-duration-calculator .cs-duration-table th,
.cs-adv-date-duration-calculator .cs-duration-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-date-duration-calculator .cs-duration-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-date-duration-calculator .cs-duration-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-date-duration-calculator .cs-form-inline {
display: flex;
align-items: center;
flex-direction: row;
gap: 15px;
}
.cs-adv-date-duration-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-date-duration-calculator .cs-form-inline .cs-input-group,
.cs-adv-date-duration-calculator .cs-form-inline .cs-form-checkbox {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-date-duration-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-date-duration-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-date-duration-calculator .cs-input-group {
flex-direction: column;
gap: 5px;
}
.cs-adv-date-duration-calculator .cs-form-input,
.cs-adv-date-duration-calculator .cs-form-select,
.cs-adv-date-duration-calculator .cs-form-checkbox {
width: 100%;
flex: 1;
}
.cs-adv-date-duration-calculator .cs-duration-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-date-add-subtract-calculator {
max-width: 700px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-date-add-subtract-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-date-add-subtract-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-date-add-subtract-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #0d9488;
font-weight: 600;
}
.cs-adv-date-add-subtract-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-date-add-subtract-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-date-add-subtract-calculator .cs-form-input,
.cs-adv-date-add-subtract-calculator .cs-form-select {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-date-add-subtract-calculator .cs-form-input:focus,
.cs-adv-date-add-subtract-calculator .cs-form-select:focus {
outline: none;
border-color: #14b8a6;
box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.1);
}
.cs-adv-date-add-subtract-calculator .cs-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.cs-adv-date-add-subtract-calculator .cs-form-input {
flex: 1;
}
.cs-adv-date-add-subtract-calculator .cs-form-select {
background: #f9fafb;
flex: 0 0 100px;
}
.cs-adv-date-add-subtract-calculator .cs-form-button {
background: linear-gradient(90deg, #14b8a6, #0d9488);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
margin-top: 10px;
}
.cs-adv-date-add-subtract-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #0d9488, #14b8a6);
}
.cs-adv-date-add-subtract-calculator .cs-form-button-secondary {
background: #6b7280;
margin-bottom: 10px;
}
.cs-adv-date-add-subtract-calculator .cs-form-button-secondary:hover {
background: #4b5563;
}
.cs-adv-date-add-subtract-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-date-add-subtract-calculator .cs-result-success {
background: #ccfbf1;
color: #0d9488;
}
.cs-adv-date-add-subtract-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-date-add-subtract-calculator .cs-result span {
font-weight: bold;
color: #14b8a6;
}
.cs-adv-date-add-subtract-calculator .cs-date-visual {
margin-top: 20px;
}
.cs-adv-date-add-subtract-calculator .cs-date-title {
font-size: 18px;
margin-bottom: 10px;
color: #0d9488;
font-weight: 500;
}
.cs-adv-date-add-subtract-calculator .cs-date-card {
background: linear-gradient(135deg, #ccfbf1, #e6fffa);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-date-add-subtract-calculator .cs-result-date {
font-size: 24px;
margin-bottom: 10px;
color: #14b8a6;
font-weight: 600;
}
.cs-adv-date-add-subtract-calculator .cs-date-description {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
.cs-adv-date-add-subtract-calculator .cs-date-table {
margin-top: 20px;
}
.cs-adv-date-add-subtract-calculator .cs-date-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-date-add-subtract-calculator .cs-date-table th,
.cs-adv-date-add-subtract-calculator .cs-date-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-date-add-subtract-calculator .cs-date-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-date-add-subtract-calculator .cs-date-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-date-add-subtract-calculator .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-date-add-subtract-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-date-add-subtract-calculator .cs-form-inline .cs-input-group,
.cs-adv-date-add-subtract-calculator .cs-form-inline .cs-form-input,
.cs-adv-date-add-subtract-calculator .cs-form-inline .cs-form-select {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-date-add-subtract-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-date-add-subtract-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-date-add-subtract-calculator .cs-input-group {
flex-direction: column;
gap: 5px;
}
.cs-adv-date-add-subtract-calculator .cs-form-input,
.cs-adv-date-add-subtract-calculator .cs-form-select {
width: 100%;
flex: 1;
}
.cs-adv-date-add-subtract-calculator .cs-date-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-days-since-calculator {
max-width: 700px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-days-since-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-days-since-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-days-since-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #6d28d9;
font-weight: 600;
}
.cs-adv-days-since-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-days-since-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-days-since-calculator .cs-form-input,
.cs-adv-days-since-calculator .cs-form-select,
.cs-adv-days-since-calculator .cs-form-checkbox {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-days-since-calculator .cs-form-input:focus,
.cs-adv-days-since-calculator .cs-form-select:focus {
outline: none;
border-color: #8b5cf6;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}
.cs-adv-days-since-calculator .cs-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.cs-adv-days-since-calculator .cs-form-input {
flex: 1;
}
.cs-adv-days-since-calculator .cs-form-select {
background: #f9fafb;
flex: 0 0 100px;
}
.cs-adv-days-since-calculator .cs-form-checkbox {
width: 20px;
height: 20px;
margin: 0;
border-radius: 4px;
}
.cs-adv-days-since-calculator .cs-form-button {
background: linear-gradient(90deg, #8b5cf6, #6d28d9);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
margin-top: 10px;
}
.cs-adv-days-since-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #6d28d9, #8b5cf6);
}
.cs-adv-days-since-calculator .cs-form-button-secondary {
background: #6b7280;
margin-bottom: 10px;
}
.cs-adv-days-since-calculator .cs-form-button-secondary:hover {
background: #4b5563;
}
.cs-adv-days-since-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-days-since-calculator .cs-result-success {
background: #ede9fe;
color: #6d28d9;
}
.cs-adv-days-since-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-days-since-calculator .cs-result span {
font-weight: bold;
color: #8b5cf6;
}
.cs-adv-days-since-calculator .cs-days-visual {
margin-top: 20px;
}
.cs-adv-days-since-calculator .cs-days-title {
font-size: 18px;
margin-bottom: 10px;
color: #6d28d9;
font-weight: 500;
}
.cs-adv-days-since-calculator .cs-days-card {
background: linear-gradient(135deg, #ede9fe, #f5f3ff);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-days-since-calculator .cs-days-text {
font-size: 24px;
margin-bottom: 10px;
color: #8b5cf6;
font-weight: 600;
}
.cs-adv-days-since-calculator .cs-days-description {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
.cs-adv-days-since-calculator .cs-days-table {
margin-top: 20px;
}
.cs-adv-days-since-calculator .cs-days-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-days-since-calculator .cs-days-table th,
.cs-adv-days-since-calculator .cs-days-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-days-since-calculator .cs-days-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-days-since-calculator .cs-days-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-days-since-calculator .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-days-since-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-days-since-calculator .cs-form-inline .cs-input-group,
.cs-adv-days-since-calculator .cs-form-inline .cs-form-checkbox {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-days-since-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-days-since-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-days-since-calculator .cs-input-group {
flex-direction: column;
gap: 5px;
}
.cs-adv-days-since-calculator .cs-form-input,
.cs-adv-days-since-calculator .cs-form-select,
.cs-adv-days-since-calculator .cs-form-checkbox {
width: 100%;
flex: 1;
}
.cs-adv-days-since-calculator .cs-days-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-timesheet-calculator {
max-width: 900px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-timesheet-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-timesheet-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-timesheet-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #15803d;
font-weight: 600;
}
.cs-adv-timesheet-calculator .cs-work-entry {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
background: #f9fafb;
}
.cs-adv-timesheet-calculator .cs-entry-title {
font-size: 18px;
margin-bottom: 15px;
color: #15803d;
font-weight: 500;
}
.cs-adv-timesheet-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-timesheet-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-timesheet-calculator .cs-form-input,
.cs-adv-timesheet-calculator .cs-form-select {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-timesheet-calculator .cs-form-input:focus,
.cs-adv-timesheet-calculator .cs-form-select:focus {
outline: none;
border-color: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
.cs-adv-timesheet-calculator .cs-minute-input {
width: 60px; /* Narrower width for minute inputs */
}
.cs-adv-timesheet-calculator .cs-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.cs-adv-timesheet-calculator .cs-form-input {
flex: 1;
}
.cs-adv-timesheet-calculator .cs-form-select {
background: #f9fafb;
flex: 0 0 100px;
}
.cs-adv-timesheet-calculator .cs-form-button {
background: linear-gradient(90deg, #22c55e, #15803d);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
margin-top: 10px;
}
.cs-adv-timesheet-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #15803d, #22c55e);
}
.cs-adv-timesheet-calculator .cs-form-button-secondary {
background: #6b7280;
margin-bottom: 10px;
}
.cs-adv-timesheet-calculator .cs-form-button-secondary:hover {
background: #4b5563;
}
.cs-adv-timesheet-calculator .cs-remove-entry {
width: auto;
padding: 8px 16px;
font-size: 14px;
}
.cs-adv-timesheet-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-timesheet-calculator .cs-result-success {
background: #dcfce7;
color: #15803d;
}
.cs-adv-timesheet-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-timesheet-calculator .cs-result span {
font-weight: bold;
color: #22c55e;
}
.cs-adv-timesheet-calculator .cs-timesheet-visual {
margin-top: 20px;
}
.cs-adv-timesheet-calculator .cs-timesheet-title {
font-size: 18px;
margin-bottom: 10px;
color: #15803d;
font-weight: 500;
}
.cs-adv-timesheet-calculator .cs-timesheet-card {
background: linear-gradient(135deg, #dcfce7, #f0fdf4);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-timesheet-calculator .cs-hours-text {
font-size: 24px;
margin-bottom: 10px;
color: #22c55e;
font-weight: 600;
}
.cs-adv-timesheet-calculator .cs-timesheet-description {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
.cs-adv-timesheet-calculator .cs-timesheet-table {
margin-top: 20px;
}
.cs-adv-timesheet-calculator .cs-timesheet-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-timesheet-calculator .cs-timesheet-table th,
.cs-adv-timesheet-calculator .cs-timesheet-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-timesheet-calculator .cs-timesheet-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-timesheet-calculator .cs-timesheet-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-timesheet-calculator .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-timesheet-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-timesheet-calculator .cs-form-inline .cs-input-group,
.cs-adv-timesheet-calculator .cs-form-inline .cs-form-input,
.cs-adv-timesheet-calculator .cs-form-inline .cs-form-select {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-timesheet-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-timesheet-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-timesheet-calculator .cs-input-group {
flex-direction: column;
gap: 5px;
}
.cs-adv-timesheet-calculator .cs-form-input,
.cs-adv-timesheet-calculator .cs-form-select,
.cs-adv-timesheet-calculator .cs-minute-input {
width: 100%;
flex: 1;
}
.cs-adv-timesheet-calculator .cs-timesheet-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-timesheet-calculator {
max-width: 900px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-timesheet-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-timesheet-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-timesheet-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #15803d;
font-weight: 600;
}
.cs-adv-timesheet-calculator .cs-work-entry {
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
background: #f9fafb;
}
.cs-adv-timesheet-calculator .cs-entry-title {
font-size: 18px;
margin-bottom: 15px;
color: #15803d;
font-weight: 500;
}
.cs-adv-timesheet-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-timesheet-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-timesheet-calculator .cs-form-input,
.cs-adv-timesheet-calculator .cs-form-select {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-timesheet-calculator .cs-form-input:focus,
.cs-adv-timesheet-calculator .cs-form-select:focus {
outline: none;
border-color: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
.cs-adv-timesheet-calculator .cs-minute-input {
width: 60px; /* Narrower width for minute inputs */
}
.cs-adv-timesheet-calculator .cs-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.cs-adv-timesheet-calculator .cs-form-input {
flex: 1;
}
.cs-adv-timesheet-calculator .cs-form-select {
background: #f9fafb;
flex: 0 0 100px;
}
.cs-adv-timesheet-calculator .cs-form-button {
background: linear-gradient(90deg, #22c55e, #15803d);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
margin-top: 10px;
}
.cs-adv-timesheet-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #15803d, #22c55e);
}
.cs-adv-timesheet-calculator .cs-form-button-secondary {
background: #6b7280;
margin-bottom: 10px;
}
.cs-adv-timesheet-calculator .cs-form-button-secondary:hover {
background: #4b5563;
}
.cs-adv-timesheet-calculator .cs-remove-entry {
width: auto;
padding: 8px 16px;
font-size: 14px;
}
.cs-adv-timesheet-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-timesheet-calculator .cs-result-success {
background: #dcfce7;
color: #15803d;
}
.cs-adv-timesheet-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-timesheet-calculator .cs-result span {
font-weight: bold;
color: #22c55e;
}
.cs-adv-timesheet-calculator .cs-timesheet-visual {
margin-top: 20px;
}
.cs-adv-timesheet-calculator .cs-timesheet-title {
font-size: 18px;
margin-bottom: 10px;
color: #15803d;
font-weight: 500;
}
.cs-adv-timesheet-calculator .cs-timesheet-card {
background: linear-gradient(135deg, #dcfce7, #f0fdf4);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-timesheet-calculator .cs-hours-text {
font-size: 24px;
margin-bottom: 10px;
color: #22c55e;
font-weight: 600;
}
.cs-adv-timesheet-calculator .cs-timesheet-description {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
.cs-adv-timesheet-calculator .cs-timesheet-table {
margin-top: 20px;
}
.cs-adv-timesheet-calculator .cs-timesheet-table table {
width: 100%;
border-collapse: collapse;
margin-bottom: 20px;
background: #fff;
border-radius: 6px;
overflow: hidden;
}
.cs-adv-timesheet-calculator .cs-timesheet-table th,
.cs-adv-timesheet-calculator .cs-timesheet-table td {
padding: 12px 15px;
text-align: left;
border-bottom: 1px solid #e5e7eb;
}
.cs-adv-timesheet-calculator .cs-timesheet-table th {
background: #f3f4f6;
font-weight: 600;
color: #374151;
}
.cs-adv-timesheet-calculator .cs-timesheet-table td {
background: #fff;
color: #374151;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-timesheet-calculator .cs-form-inline {
display: flex;
align-items: center;
gap: 15px;
}
.cs-adv-timesheet-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-timesheet-calculator .cs-form-inline .cs-input-group,
.cs-adv-timesheet-calculator .cs-form-inline .cs-form-input,
.cs-adv-timesheet-calculator .cs-form-inline .cs-form-select {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-timesheet-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-timesheet-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-timesheet-calculator .cs-input-group {
flex-direction: column;
gap: 5px;
}
.cs-adv-timesheet-calculator .cs-form-input,
.cs-adv-timesheet-calculator .cs-form-select,
.cs-adv-timesheet-calculator .cs-minute-input {
width: 100%;
flex: 1;
}
.cs-adv-timesheet-calculator .cs-timesheet-table table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
}
.cs-adv-time-duration-calculator {
max-width: 600px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-time-duration-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-time-duration-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-time-duration-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #15803d;
font-weight: 600;
}
.cs-adv-time-duration-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-time-duration-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-time-duration-calculator .cs-form-input,
.cs-adv-time-duration-calculator .cs-form-select {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-time-duration-calculator .cs-form-input:focus,
.cs-adv-time-duration-calculator .cs-form-select:focus {
outline: none;
border-color: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
.cs-adv-time-duration-calculator .cs-minute-input,
.cs-adv-time-duration-calculator .cs-second-input {
width: 60px; /* Narrower width for minute/second inputs */
}
.cs-adv-time-duration-calculator .cs-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.cs-adv-time-duration-calculator .cs-form-input {
flex: 1;
}
.cs-adv-time-duration-calculator .cs-form-select {
background: #f9fafb;
flex: 0 0 100px;
}
.cs-adv-time-duration-calculator .cs-form-checkbox {
width: 20px;
height: 20px;
cursor: pointer;
}
.cs-adv-time-duration-calculator .cs-form-button {
background: linear-gradient(90deg, #22c55e, #15803d);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
margin-top: 10px;
}
.cs-adv-time-duration-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #15803d, #22c55e);
}
.cs-adv-time-duration-calculator .cs-form-button-secondary {
background: #6b7280;
margin-bottom: 10px;
}
.cs-adv-time-duration-calculator .cs-form-button-secondary:hover {
background: #4b5563;
}
.cs-adv-time-duration-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-time-duration-calculator .cs-result-success {
background: #dcfce7;
color: #15803d;
}
.cs-adv-time-duration-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-time-duration-calculator .cs-result span {
font-weight: bold;
color: #22c55e;
}
.cs-adv-time-duration-calculator .cs-duration-visual {
margin-top: 20px;
}
.cs-adv-time-duration-calculator .cs-duration-title {
font-size: 18px;
margin-bottom: 10px;
color: #15803d;
font-weight: 500;
}
.cs-adv-time-duration-calculator .cs-duration-card {
background: linear-gradient(135deg, #dcfce7, #f0fdf4);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-time-duration-calculator .cs-duration-text {
font-size: 24px;
margin-bottom: 10px;
sterling silver color: #22c55e;
font-weight: 600;
}
.cs-adv-time-duration-calculator .cs-duration-description {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-time-duration-calculator .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-time-duration-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-time-duration-calculator .cs-form-inline .cs-input-group,
.cs-adv-time-duration-calculator .cs-form-inline .cs-form-input,
.cs-adv-time-duration-calculator .cs-form-inline .cs-form-select,
.cs-adv-time-duration-calculator .cs-form-inline .cs-form-checkbox {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-time-duration-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-time-duration-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-time-duration-calculator .cs-input-group {
flex-direction: column;
gap: 5px;
}
.cs-adv-time-duration-calculator .cs-form-input,
.cs-adv-time-duration-calculator .cs-form-select,
.cs-adv-time-duration-calculator .cs-minute-input,
.cs-adv-time-duration-calculator .cs-second-input {
width: 100%;
flex: 1;
}
}
.cs-adv-decimal-hour-converter {
max-width: 600px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-decimal-hour-converter .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-decimal-hour-converter .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-decimal-hour-converter .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #15803d;
font-weight: 600;
}
.cs-adv-decimal-hour-converter .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-decimal-hour-converter .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-decimal-hour-converter .cs-form-input,
.cs-adv-decimal-hour-converter .cs-form-select {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-decimal-hour-converter .cs-form-input:focus,
.cs-adv-decimal-hour-converter .cs-form-select:focus {
outline: none;
border-color: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
.cs-adv-dec Greenland-time-converter .cs-minute-input,
.cs-adv-decimal-hour-converter .cs-second-input {
width: 60px;
}
.cs-adv-decimal-hour-converter .cs-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.cs-adv-decimal-hour-converter .cs-form-input {
flex: 1;
}
.cs-adv-decimal-hour-converter .cs-form-select {
background: #f9fafb;
flex: 0 0 150px;
}
.cs-adv-decimal-hour-converter .cs-form-checkbox {
width: 20px;
height: 20px;
cursor: pointer;
}
.cs-adv-decimal-hour-converter .cs-form-button {
background: linear-gradient(90deg, #22c55e, #15803d);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
margin-top: 10px;
}
.cs-adv-decimal-hour-converter .cs-form-button:hover {
background: linear-gradient(90deg, #15803d, #22c55e);
}
.cs-adv-decimal-hour-converter .cs-form-button-secondary {
background: #6b7280;
margin-bottom: 10px;
}
.cs-adv-decimal-hour-converter .cs-form-button-secondary:hover {
background: #4b5563;
}
.cs-adv-decimal-hour-converter .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-decimal-hour-converter .cs-result-success {
background: #dcfce7;
color: #15803d;
}
.cs-adv-decimal-hour-converter .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-decimal-hour-converter .cs-result span {
font-weight: bold;
color: #22c55e;
}
.cs-adv-decimal-hour-converter .cs-duration-visual {
margin-top: 20px;
}
.cs-adv-decimal-hour-converter .cs-duration-title {
font-size: 18px;
margin-bottom: 10px;
color: #15803d;
font-weight: 500;
}
.cs-adv-decimal-hour-converter .cs-duration-card {
background: linear-gradient(135deg, #dcfce7, #f0fdf4);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-decimal-hour-converter .cs-duration-text {
font-size: 24px;
margin-bottom: 10px;
color: #22c55e;
font-weight: 600;
}
.cs-adv-decimal-hour-converter .cs-duration-description {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-decimal-hour-converter .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-decimal-hour-converter .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-decimal-hour-converter .cs-form-inline .cs-input-group,
.cs-adv-decimal-hour-converter .cs-form-inline .cs-form-input,
.cs-adv-decimal-hour-converter .cs-form-inline .cs-form-select,
.cs-adv-decimal-hour-converter .cs-form-inline .cs-form-checkbox {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-decimal-hour-converter .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-decimal-hour-converter .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-decimal-hour-converter .cs-input-group {
flex-direction: column;
gap: 5px;
}
.cs-adv-decimal-hour-converter .cs-form-input,
.cs-adv-decimal-hour-converter .cs-form-select,
.cs-adv-decimal-hour-converter .cs-minute-input,
.cs-adv-decimal-hour-converter .cs-second-input {
width: 100%;
flex: 1;
}
}
.cs-adv-working-days-calculator {
max-width: 600px;
margin: 20px auto;
padding: 0 15px;
}
.cs-adv-working-days-calculator .cs-calculator-card {
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
padding: 25px;
transition: transform 0.2s ease;
}
.cs-adv-working-days-calculator .cs-calculator-card:hover {
transform: translateY(-2px);
}
.cs-adv-working-days-calculator .cs-calculator-title {
font-size: 26px;
margin-bottom: 25px;
text-align: center;
color: #15803d;
font-weight: 600;
}
.cs-adv-working-days-calculator .cs-form-group {
margin-bottom: 20px;
}
.cs-adv-working-days-calculator .cs-form-label {
font-size: 15px;
margin-bottom: 8px;
color: #374151;
font-weight: 500;
}
.cs-adv-working-days-calculator .cs-form-input,
.cs-adv-working-days-calculator .cs-form-select {
padding: 10px;
border: 1px solid #d1d5db;
border-radius: 6px;
font-size: 14px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cs-adv-working-days-calculator .cs-form-input:focus,
.cs-adv-working-days-calculator .cs-form-select:focus {
outline: none;
border-color: #22c55e;
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}
.cs-adv-working-days-calculator .cs-input-group {
display: flex;
gap: 10px;
align-items: center;
}
.cs-adv-working-days-calculator .cs-form-input {
flex: 1;
}
.cs-adv-working-days-calculator .cs-form-select {
background: #f9fafb;
flex: 0 0 100px;
}
.cs-adv-working-days-calculator .cs-form-checkbox {
width: 20px;
height: 20px;
cursor: pointer;
}
.cs-adv-working-days-calculator .cs-form-button {
background: linear-gradient(90deg, #22c55e, #15803d);
color: #fff;
padding: 12px;
border: none;
border-radius: 6px;
font-size: 16px;
cursor: pointer;
width: 100%;
transition: background 0.3s ease;
margin-top: 10px;
}
.cs-adv-working-days-calculator .cs-form-button:hover {
background: linear-gradient(90deg, #15803d, #22c55e);
}
.cs-adv-working-days-calculator .cs-form-button-secondary {
background: #6b7280;
margin-bottom: 10px;
}
.cs-adv-working-days-calculator .cs-form-button-secondary:hover {
background: #4b5563;
}
.cs-adv-working-days-calculator .cs-remove-holiday {
padding: 8px;
font-size: 14px;
max-width: 20%;
}
.cs-adv-working-days-calculator .cs-result {
margin-top: 25px;
padding: 15px;
border-radius: 6px;
font-size: 16px;
line-height: 1.6;
}
.cs-adv-working-days-calculator .cs-result-success {
background: #dcfce7;
color: #15803d;
}
.cs-adv-working-days-calculator .cs-result-error {
background: #fee2e2;
color: #b91c1c;
}
.cs-adv-working-days-calculator .cs-result span {
font-weight: bold;
color: #22c55e;
}
.cs-adv-working-days-calculator .cs-duration-visual {
margin-top: 20px;
}
.cs-adv-working-days-calculator .cs-duration-title {
font-size: 18px;
margin-bottom: 10px;
color: #15803d;
font-weight: 500;
}
.cs-adv-working-days-calculator .cs-duration-card {
background: linear-gradient(135deg, #dcfce7, #f0fdf4);
border-radius: 8px;
padding: 20px;
text-align: center;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.cs-adv-working-days-calculator .cs-duration-text {
font-size: 24px;
margin-bottom: 10px;
color: #22c55e;
font-weight: 600;
}
.cs-adv-working-days-calculator .cs-duration-description {
font-size: 14px;
color: #374151;
line-height: 1.5;
}
/* Inline layout for desktop */
@media (min-width: 768px) {
.cs-adv-working-days-calculator .cs-form-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
}
.cs-adv-working-days-calculator .cs-form-inline .cs-form-label {
flex: 0 0 150px;
margin-bottom: 0;
}
.cs-adv-working-days-calculator .cs-form-inline .cs-input-group,
.cs-adv-working-days-calculator .cs-form-inline .cs-form-input,
.cs-adv-working-days-calculator .cs-form-inline .cs-form-select,
.cs-adv-working-days-calculator .cs-form-inline .cs-form-checkbox {
flex: 1;
}
}
/* Responsive layout for mobile */
@media (max-width: 767px) {
.cs-adv-working-days-calculator .cs-form-group {
margin-bottom: 15px;
}
.cs-adv-working-days-calculator .cs-form-label {
margin-bottom: 5px;
}
.cs-adv-working-days-calculator .cs-input-group {
flex-direction: column;
gap: 5px;
}
.cs-adv-working-days-calculator .cs-form-input,
.cs-adv-working-days-calculator .cs-form-select {
width: 100%;
flex: 1;
}
}
.cs-adv-working-days-calculator .cs-checkbox-label {
display: flex;
align-items: center;
gap: 5px;
font-size: 14px;
color: #374151;
margin-right: 15px;
}
.cs-adv-working-days-calculator .cs-checkbox-label .cs-form-checkbox {
width: 18px;
height: 18px;
}