body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    font-family: "PT Mono", monospace;
    font-weight: 400;
    font-style: normal;
    min-height: 100vh;
}


[contenteditable] {
    padding-left: 2rem;
    background-image: url(images/edit2.svg);
    background-repeat: no-repeat;
    background-position: left center;
}


.hidden {
    display: none!important;
}
h1 {
    background-color: rgb(31, 31, 31);
    color: #fff;
    margin: 0;
    padding: 2rem 0 1rem 0;
    text-align: center;
}
.narrow-width {
    margin: 2rem auto;
    max-width: 70rem;
}

form {
    padding: 1rem;
}
div.field {
    display: flex;
}
div.field a {
    text-decoration: none;
}
label {
    width: 30%;
    padding: 0.7rem 2rem;
    margin: 0.5rem 0;
    display: block;
    text-align: right;
}
input {
    font-family: "PT Mono", monospace;
    font-weight: 400;
    font-style: normal;
}
input, button {
    padding: 0.7rem 1rem;
    margin: 0.5rem 0;
    display: block;
    border: 1px solid #ccc;
    border-radius: 0.3rem;
    box-sizing: border-box;
}

a button {
    text-decoration: none;
    background-color: #fff;
}

input[type="text"] {
    width: calc(70% - 4rem);
}

input[type="number"], input[type="date"] {
    width: 10rem;
    text-align: right;
}


table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

/* Style odd rows */
table tr:nth-child(odd) td {
    
}

/* Style even rows */
table tr:nth-child(even) td {
    background-color: #e6e6e6; /* Slightly darker grey for even rows */
}

/* Style odd columns */
table tr td::nth-child(odd), table tr td:nth-child(odd) {
}

/* Style even columns */
table tr td:nth-child(even), table th td:nth-child(even) {
}


th, td {
    border: 0.2rem solid #f4f4f4;
    padding: 0.5rem;
    text-align: left;
    font-size: 0.7rem;
    width: 100%;
}
th[scope="col"] {
    background-color: #5f615f;
    color: white;
    text-align: center;
}
th[scope="row"] {
    background-color: #000;
    color: #fff;
    text-align: right;
}
tr td:first-child, tr th:first-child {
    width: 7rem;   
    
}


tfoot th {
    font-size: 1px;
    background-color: #5f615f;
    padding: 0px; 
}

.m1 th { background-color: #FF5733; } /* January - Red Orange */
.m2 th { background-color: #C70039; } /* February - Red */
.m3 th { background-color: #900C3F; } /* March - Red Purple */
.m4 th { background-color: #581845; } /* April - Purple */
.m5 th { background-color: #5E35B1; } /* May - Deep Purple */
.m6 th { background-color: #3949AB; } /* June - Indigo */
.m7 th { background-color: #1E88E5; } /* July - Blue */
.m8 th { background-color: #00ACC1; } /* August - Cyan */
.m9 th { background-color: #00897B; } /* September - Teal */
.m10 th { background-color: #43A047; } /* October - Green */
.m11 th { background-color: #C0CA33; color: #000;} /* November - Lime */
.m12 th { background-color: #FDD835; color: #000;} /* December - Yellow */

#save-holder {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

#save {
    opacity: 1;
}
#form-actions {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: calc(70% - 4rem);
}
#generate {
    margin-right: 5rem;
}
#copyright {
    text-align: center;
}

@media (min-width: 72rem) {

    #copyright {
        transform-origin: top right;
        transform: rotate(90deg);
        position: fixed;
        bottom: 0;
        right: 0;
        padding: 1rem;
    }
}
  

body.saved #save {
    opacity: 0;
}


@media print {
    /* Hide #save-holder and form elements */
    #save-holder, form {
      display: none !important;
    }
  
    /* Ensure #time-line is visible */
    #time-line {
      display: block !important;
    }
    [contenteditable]  {
        background-image: none;
        padding-left: 1rem;
    }  
}