body
{
    font-family: sans-serif;

    #company-name
    {
        text-align: center;
    }

    /* This is for the station's name */
    h2
    {
        width: fit-content;
        padding: 20px;
        border: 1px solid black;
        text-align: left;
        margin-bottom: 0px;
    }

    
    /* This is for the "Generate New Schedule" button */
    #generate-new-schedule
    {
       margin: 40px auto 0;
    }
    
    /* As of now, I will just call this section and that's basically the whole table with the name of the company and kind of schedule */
    #section
    {
        width: 50%;
        margin: 0 auto;
    }

    /* To make the input fields a little smaller */
    input
    {
        width: 80%;
    }

    /* To adjust the current table */
    #schedule
    {

        margin: 0 auto;
        border: 1px solid black;
        padding: 20px;
        display: flex;
        flex-direction: column;
        

        /* Aligns the text of the table center */
        table
        {
            text-align: center;
            border-collapse: collapse;
        }
        
        /* Adjustes the cells under DAYPART */
        .time-slot
        {
            padding: 5px;
        }

    }

        /* This is for the adding a new schedule block. */
    #add-client
    {
        display: grid;
        padding: 20px 0;
        margin: 40px auto 0;
        border: 1px solid black;
        gap: 20px;
        justify-items: center;
        width: 50%;
    }

    /* This is for the monthly spending at the bottom */
    #monthly-spending
    {
        display: flex;
        justify-content: flex-end;
        margin: 5px;
        p
        {
            padding: 20px;
            text-align: center;
            border: 1px solid black;
        }
    }

    /* 
        This is for the last row in the table. It's trying to mimic what the final
        row looks like in the excel sheet.
    */
    tr:nth-last-child(1)
    {
        border-top: 1px solid black;
    }
}