span.select2.select2-container.select2-container--default {
    max-width: auto !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered{
    color: #525252 !important;
    font-size: 16px !important;
}

.form-control:disabled{
    background-color: #EDEDED !important;
    color: #9E9E9E; /* Opsional: untuk memastikan teks tetap terlihat */
}

        /* Table Total Row Styling */
        .amortization-table tfoot tr {
            background-color: #f8f9fa !important;
            font-weight: bold;
            border-top: 2px solid #dee2e6;
        }

        .amortization-table tfoot td {
            font-weight: 600 !important;
            color: #495057 !important;
            padding: 12px 8px !important;
            border-bottom: 1px solid #dee2e6;
        }

        .amortization-table tfoot td:first-child,
        .amortization-table tfoot td:nth-child(6) {
            text-align: center;
        }

        .amortization-table tfoot td:nth-child(6) {
            font-style: italic;
            color: #6c757d !important;
            font-weight: 400 !important;
        }

        /* Ensure table total row is visible on small screens */
        @media (max-width: 768px) {
            .amortization-table tfoot td {
                font-size: 12px;
                padding: 8px 4px !important;
            }
        }
        .kpr-simulation-area {
            padding: 80px 0;
            background: linear-gradient(135deg, #f8f9fa 0%, #f8f9fa 100%);
            min-height: 100vh;
        }

        .simulation-container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 0px;
        }

        .simulation-header {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 0px 40px 0px;
        }

        .simulation-wrapper {
            background: #ffffff;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            margin-bottom: 30px;
        }

        .simulation-form {
            padding: 40px;
        }

        .section-title {
            font-size: 16px;
            font-weight: 500;
            color: #000000;
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            font-size: 16px;
            font-weight: 400;
            color: #000000;
            margin-bottom: 8px;
            display: block;
        }

        .form-control {
            width: 100%;
            height: 40px;
            padding: 10px 12px 10px 12px;
            border: 1px solid #C2C2C2;
            border-radius: 6px;
            font-size: 14px;
            transition: all 0.3s ease;
            background: #fff;
            color:#4B5565;
        }

        .form-control:focus {
            outline: none;
            border-color: #1D7173;
            box-shadow: 0 0 0 3px rgba(29, 113, 115, 0.1);
        }

        .input-group-simulasi {
            position: relative;
            border-radius: 6px;

        }

        .input-addon {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-45%);
            color: #737373;
            font-weight: 500;
            pointer-events: none;
        }

        .input-addon-left {
            position: absolute;
            left: 15px;
            top: 50%;
            font-size: 14px;
            transform: translateY(-50%);
            color: #4B5565;
            font-weight: 400;
            pointer-events: none;
            z-index: 1;
        }

        .form-control.has-addon-left {
            padding-left: 45px;
            color:#4B5565;
        }

        .form-control.has-addon-right {
            color:#4B5565;
        }
        .btn-calculate {
            background: linear-gradient(135deg, #1B667B 0%);
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            margin-top: 20px;
        }

        .btn-calculate:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(29, 113, 115, 0.3);
        }

        .btn-reset {
            background: #6c757d;
            color: white;
            border: none;
            padding: 15px 40px;
            border-radius: 10px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            width: 100%;
            margin-top: 10px;
        }

        .btn-reset:hover {
            background: #5a6268;
            transform: translateY(-2px);
        }

        .results-section {
            /* background: linear-gradient(135deg, #d4d4d4 0%); */
            color: white;
            padding: 30px;
            display: none;
        }

        .results-title {
            font-size: 16px;
            font-weight: 500;
            color: #000000;
        }

        .result-item {
            background: #1B667B;
            border-radius: 10px;
            color: white;
            margin-top: 0px;
            margin-bottom: 20px;
        }

        .result-label {
            font-size: 14px;
            opacity: 0.9;
            margin-bottom: 5px;
        }

        .result-value {
            font-size: 24px;
            font-weight: 500;
            color: #FFFFFF;
            font-family: 'Inter', sans-serif;
        }



        .calculation-details {
            background: none;
            border-radius: 15px;

            margin-top: 30px;

        }

        .details-title {
            font-size: 20px;
            font-weight: 500;
            color: #000000;
            margin-top: 20px;

        }

        .detail-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #e9ecef;
        }

        .detail-row:last-child {
            border-bottom: none;
        }

        .detail-label {
            font-weight: 500;
            font-size: 16px;
            color: #000000;
        }

        .detail-value {
            font-weight: 600;
            color: #418091;
            font-size: 16px;
        }

        .detail-value-text {
            font-weight: 400;
            color: #525252;
            font-size: 16px;
        }

        .affordability-check {
            background: #f8f9fa;
            border-radius: 10px;
            padding: 20px;
            margin-top: 20px;
            text-align: center;
        }

        .affordability-good {
            background: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }

        .affordability-warning {
            background: #fff3cd;
            color: #856404;
            border: 1px solid #ffeaa7;
        }

        .affordability-danger {
            background: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }

        .info-card {
            background: #FFF7ED;
            padding: 16px;
            border-radius: 5px;
            border: 1px solid #D4D4D4;
        }

        .info-card h6 {
            color: #1D7173;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .info-card p {
            color: #666;
            margin: 0;
            font-size: 14px;
            line-height: 1.5;
        }

        @media (max-width: 768px) {
            .kpr-simulation-area {
                padding: 40px 0;
            }

            .simulation-form {
                padding: 20px;
            }

            .results-section {
                padding: 20px;
                margin-top: 20px !important;
            }



            .result-value {
                font-size: 18px;
            }

            .detail-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 5px;
            }
        }

        .loading-spinner {
            display: none;
            text-align: center;
            padding: 20px;
        }

        .spinner {
            border: 3px solid #f3f3f3;
            border-top: 3px solid #1D7173;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 1s linear infinite;
            margin: 0 auto;
        }

        @keyframes spin {
            0% {
                transform: rotate(0deg);
            }

            100% {
                transform: rotate(360deg);
            }
        }

        /* Yearly Amortization Table Styles */
        .amortization-section {
            /* margin-top: 30px; */
            background: none;
            border-radius: 15px;
            /* padding: 25px; */
        }

        .amortization-title {
            font-size: 16px;
            font-weight: 500;
            color: #000000;
        }

        .amortization-table {
            width: 100%;
            border-collapse: collapse;
            background: white;

            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        }

        .amortization-table th {
            background: linear-gradient(135deg, #418091);
            color: white;
            padding: 15px 10px;
            text-align: center;
            font-weight: 600;
            font-size: 14px;
        }

        .amortization-table td {
            padding: 12px 10px;
            text-align: center;
            border-bottom: 1px solid #d4d4d4;
            font-size: 14px;
            color: #404040;
        }

        .amortization-table tbody tr:hover {
            background-color: #ffffff;
        }

        .amortization-table tbody tr:last-child td {
            border-bottom: none;
        }

        .fixed-period-row {
            background-color: #ffffff !important;
        }

        .floating-period-row {
            background-color: #ffffff !important;
        }

        .table-responsive {
            max-height: 590px;
            /* overflow-y: auto; */
            border-radius: 6px;
            border : 1px solid #E0E0E0;
        }

        .table-summary {
            margin-top: 20px;
            background: white;
            border: 1px solid #D4D4D4;
            border-radius: 8px;
            padding: 32px;
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 0;
            border-bottom: 1px solid #e9ecef;
        }

        .summary-row:last-child {
            border-bottom: none;
            font-weight: 600;
            color: #1D7173;
        }

        .summary-label {
            font-weight: 500;
            font-size: 16px;
            color: #000000;
        }

        .summary-value {
            font-weight: 600;
            font-size: 16px;
            color: #418091;
        }

        .form-check-input {
            width: 28px;
            height: 16px;
            background-color: #d4d4d4;
            border: none;
            border-radius: 16px;
            transition: all 0.3s ease;
        }

        .form-check-input:checked {
            background-color: #1B667B !important;
            border-color: #1B667B !important;
        }

        .form-check-input:focus {
            border-color: #418091;
            box-shadow: 0 0 0 0.25rem rgba(65, 128, 145, 0.25);
        }

        .form-check-input:checked::after {
            content: '';
        }

        /* Clickable Card Styles */
        #fixedPeriodCard:hover {
            border-color: #418091 !important;
            background-color: #f8fafb !important;
        }

        /* Accordion Button Styles */
        .accordion-button {
            position: relative;
            transition: all 0.3s ease;
        }

        .accordion-button::after {
            content: '▼';
            position: absolute;
            right: 16px;
            font-size: 14px;
            font-weight: 500;
            color: #666;
            transition: transform 0.3s ease;
            transform: rotate(-90deg);
        }

        .accordion-button.accordion-button-expanded::after,
        .accordion-button:not(.collapsed)::after {
            transform: rotate(0deg);
        }

        .accordion-button:hover {
            background-color: #f8f9fa !important;
        }

        #fixedPeriodSection {
            transition: all 0.3s ease;
        }

        /* Period Badge Styles */
        .badge-fixed {
            background-color: #F5F5FF;
            color: #20573D;
            padding: 2px 8px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            border: 1px solid #B8DBCA;
            display: inline-block;
        }

        .badge-floating {
            background-color: #FFF9F2;
            color: #734011;
            padding: 2px 8px;
            border-radius: 6px;
            font-size: 12px;
            font-weight: 500;
            border: 1px solid #EECEB0;
            display: inline-block;
        }

        /* Table Row Styling */
        .fixed-period-row {
            background-color: rgba(255, 255, 255, 0.05) !important;
        }

        .floating-period-row {
            background-color: rgba(255, 255, 255, 0.05) !important;
        }

        .fixed-period-row:hover {
            background-color: rgba(255, 255, 255, 0.1) !important;
        }

        .floating-period-row:hover {
            background-color: rgba(255, 255, 255, 0.1) !important;
        }

        /* Error Validation Styles */
        .error-message {
            color: #EF4444;
            font-size: 14px;
            font-weight: 400;
            margin-top: 5px;
            display: block;
        }

        .form-control.is-invalid {
            border-color: #dc3545;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
        }

        .form-control.is-invalid:focus {
            border-color: #dc3545;
            box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
        }

        /* Table Total Row Styling */
        .amortization-table tfoot tr {
            background-color: #FAFAFA !important;
            font-weight: bold;
            border-top: 2px solid #dee2e6;
        }

        .amortization-table tfoot td {
            font-weight: 500 !important;
            color: #000000 !important;
            padding: 12px 8px !important;
        }

        .amortization-table tfoot td:first-child,
        .amortization-table tfoot td:last-child {
            text-align: center;
        }

        .amortization-table tfoot td:last-child {
            font-style: italic;
            color: #000000 !important;
            font-weight: 500 !important;
        }

        @media (max-width: 768px) {

            .amortization-table th,
            .amortization-table td {
                padding: 8px 5px;
                font-size: 12px;
            }

            .amortization-section {
                padding: 15px;
            }

            .table-summary {
                padding: 15px;
            }

            .simulation-header {
                padding: 0 20px 30px 20px;
            }

            .simulation-container {
                padding: 0 20px 30px 20px;
            }
        }

        /* Chart Styles */
        .chart-section {
            margin-top: 30px;
            background: #ffffff;
            border-radius: 8px;
            padding: 24px;
            border : 1px solid #D4D4D4;

        }

        .chart-title {
            font-size: 16px;
            font-weight: 500;
            color: #000000;
        }

        .chart-container {
            position: relative;
            height: 400px;
            margin-bottom: 30px;
        }

        .chart-tab {
            padding: 15px;
            background: none;
            border: none;
            color: #A3A3A3;
            cursor: pointer;
            font-weight: 400;
            font-size: 16px;
            border-bottom: 2px solid transparent;
            transition: all 0.3s ease;

        }

        .chart-tab.active {
            color: #000000;
            border-bottom-color: #1D7173;
            font-size: 14px;
            font-weight: 500;
        }

        .chart-tab:hover {
            color: #000000;
        }

        @media (max-width: 768px) {
            .chart-container {
                height: 300px;
            }

            .chart-tabs {
                flex-wrap: wrap;
            }

            .chart-tab {
                padding: 8px 15px;
                font-size: 14px;
            }
        }