@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&display=swap');

:root {
    /* CSS HEX */
    --charcoal: #243748ff;
    --ucla-blue: #4b749fff;
    /* CSS HSL */
    --charcoal: hsla(208, 33%, 21%, 1);
    --ucla-blue: hsla(211, 36%, 46%, 1);

    --charcoal-transparent: hsla(208, 33%, 21%, .3);
    --ucla-blue-transparent: hsla(211, 36%, 46%, .3);

    --orange: #FFA500;
    --orande-dark: #FF8C00;

}

html,
body {
    font-size: 14px;
    background-image: linear-gradient(135deg, var(--charcoal-transparent), var(--ucla-blue-transparent)) !important;
    background-color: var(--charcoal-transparent);
    font-family: "Assistant", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
}


    h1, h2, h3, h4, p, label, th, i{
        color: #fff !important
    }


.btn, .btn-primary {
    background-color: var(--orange);
    border: none;
    width: 100%;
    max-width: 160px;
    font-size: 18px;
    border-radius: 13px;
}


.btn-primary:hover {
    background-color: var(--orange-dark);
    border: 1px solid rgba(255, 255, 255, 0.396);
    box-shadow: 0 0 10px 6px rgba(0, 0, 0, 0.3);
}

.btn-primary:focus {
    color: #fff;
    background-color: var(--orange);
    border-color: var(--charcoal);
    box-shadow: 0 0 0 .15rem rgba(255, 255, 255, 0.5) !important;
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.05rem #fff;
}

footer .container {
    height: auto;
    background-color: var(--charcoal);
    color: #fff;
    a {
        color: #fff;
        text-decoration: none;
    }
}

.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus,
.form-control:focus,
.form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--charcoal-transparent);
}

input[type=text]:focus {
    border: 3px solid var(--orange);
}

.row:nth-child(1) {
    background-color: var(--charcoal-transparent);
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1), 0 0 10px 0 rgba(0, 0, 0, 0.1) inset;
    height: auto;
    min-height: 300px;
    margin-top: 3em;
}

#monthly-payment-card {
    background-color: transparent !important;
    border-radius: 0 !important;
    padding: 10px 0;
    box-shadow: none;
    height: auto;
    min-height: 0;
    margin-top: 0;

}

.info-container {
    background-color: hsla(208, 33%, 21%, .1);
    padding: 30px;
    margin-top: -2em;
    border-radius: 20px;
}

#expenses-row {
    min-height: 400px;
    padding-bottom: 8em;
}

.responsive-table {
    overflow-x: auto;
}


#expenses-section {
    td {
    color: #fff;
} 
}




#scheduleTable {
    font-size: 14px;
    /* Decrease font size */
    width: 100%;
    /* Ensure table occupies full width */
}

#scheduleTable th,
#scheduleTable td {
    padding: 10px 30px;
    /* Adjust cell padding for better readability */
    text-align: center;
    /* Center align text in cells */
}


@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

@media screen and (max-width: 768px) {

    /* #scheduleTable {
        .responsive-table thead {
            display: none;

            .responsive-table tr {
                border: 1px solid black !important;
                margin: 20px auto !important;
                box-shadow: 3px 3px 5px 3px #00000070 !important;
            }

            .responsive-table tbody,
            .responsive-table tr,
            .responsive-table td {
                display: block;
                width: 100%;
            }

            .responsive-table td {
                text-align: left;
                border: none;
                border-bottom: 1px solid #ddd;
                position: relative;
                padding-left: 50%;
                border-bottom: 1px solid black !important;
            }

            .responsive-table td:before {
                position: absolute;
                top: 6px;
                left: 6px;
                width: 45%;
                padding-right: 10px;
                white-space: nowrap;
            }

            .responsive-table td:nth-of-type(1):before {
                content: "Month";
            }

            .responsive-table td:nth-of-type(2):before {
                content: "Payment";
            }

            .responsive-table td:nth-of-type(3):before {
                content: "Principal";
            }

            .responsive-table td:nth-of-type(4):before {
                content: "Interest";
            }

            .responsive-table td:nth-of-type(5):before {
                content: "Total Interest";
            }

            .responsive-table td:nth-of-type(6):before {
                content: "Balance";
            }
        }
    } */

    #expenses-section {
        .responsive-table thead {
            display: none;
        }

        .responsive-table tr {
            border: 1px solid black !important;
            margin: 20px auto !important;
            box-shadow: 3px 3px 5px 3px #00000070 !important;
        }


        .responsive-table tbody,
        .responsive-table tr,
        .responsive-table td {
            display: block;
            width: 100%;
        }


        .responsive-table td {
            text-align: left;
            border: none;
            border-bottom: 1px solid #ddd;
            position: relative;
            padding-left: 50%;
            color: #fff;
        } 

        a {
            color: red;
        }

        .responsive-table td:before {
            position: absolute;
            top: 6px;
            left: 6px;
            width: 45%;
            padding-right: 10px;
            white-space: nowrap;
        }


        .responsive-table td:nth-of-type(1):before {
            content: "Id";
        }

        .responsive-table td:nth-of-type(2):before {
            content: "Name";
        }

        .responsive-table td:nth-of-type(3):before {
            content: "Value";
        }

        .responsive-table td:nth-of-type(4):before {
            content: "Date";
        }

        .responsive-table td:nth-of-type(5):before {
            content: "Description";
        }

        .responsive-table td:nth-of-type(6):before {
            content: "Actions";
        }

    }
}


@media screen and (max-width: 768px) {

/*     #scheduleTable thead {
        display: none;
    } */

/*     #scheduleTable tr {
        border: 1px solid black !important;
        margin: 20px auto !important;
        box-shadow: 3px 3px 5px 3px #00000070 !important;
    }

    #scheduleTable tbody,
    #scheduleTable tr,
    #scheduleTable td {
        display: block;
        width: 100%;
    }

    #scheduleTable td {
        text-align: left;
        border: none;
        border-bottom: 1px solid #ddd;
        position: relative;
        padding-left: 50%;
        border-bottom: 1px solid black !important;
    }

    #scheduleTable td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
    }

    #scheduleTable td:nth-of-type(1):before {
        content: "Month";
    }

    #scheduleTable td:nth-of-type(2):before {
        content: "Payment";
    }

    #scheduleTable td:nth-of-type(3):before {
        content: "Principal";
    }

    #scheduleTable td:nth-of-type(4):before {
        content: "Interest";
    }

    #scheduleTable td:nth-of-type(5):before {
        content: "Total Interest";
    }

    #scheduleTable td:nth-of-type(6):before {
        content: "Balance";
    } */
}