html, body {
   background-image: linear-gradient(to bottom, #43cea2, #4a7aaa);
}
.split {
   display: flex;
   flex-wrap: wrap;
   flex-direction: row;
}

.inputs-grid {
   display: grid;
   grid-template-rows: repeat(5, 2.2em);
   margin-bottom: 2em;
}

.inputs-row {
   display: grid;
   grid-template-columns: 4fr 4fr 1fr;
   grid-template-rows: 1.4em;
   grid-column-gap: 0.5em;
   grid-template-areas: "prompt input calc";  
}

.yearType.active {
   color: red;
   font-weight: bold;
}

.dates-grid {
   display: grid;
   grid-template-rows: repeat(3, 2.7em);
   margin-bottom: 2em;
}

.dates-row {
   display: grid;
   grid-template-columns: 3fr 4fr;
   grid-template-rows: 1.4em;
   grid-column-gap: 0.5em;
   height: 2.5em;
   grid-template-areas: "prompt date"; 
}

.options-grid {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(5, 2.1em);
}

.options-row {
   display: grid;
   grid-template-columns: 2fr 1fr;
   grid-template-rows: 1.5em;
   grid-column-gap: 0.5em;
   grid-template-areas: "prompt input";  
}

.interimInt-Prompt {
   display: none;
}
.interimInt-Prompt.active {
   display: block;
   font-size: 0.95rem;
   font-weight: bold;
}

.prompt {
   grid-area: prompt;
   font-size: 0.75rem;
   justify-self: right;
   font-weight: normal;
   align-self: center;
}

.input {
   grid-area: input;
   font-size: 0.75rem;
   font-weight: normal;
   width: 9em;
}
.date {
   grid-area: date;
   font-size: 0.75rem;
   font-weight: normal;
}

.calc {
   grid-area: calc;
   cursor: pointer;
   padding-left: 0;
   background-color:rgb(180, 172, 172);
}

.calc:hover {
   background-color: rgba(22, 3, 3, 0.4);
}

.dropdown {
   text-align: left;
   font-size: 0.75rem;
}

.schedule-header {
   display: grid;
   font-size: 0.85rem;
   height: 2em;
   text-align: right;
   margin-right: 27px;
   align-items: center;
   font-weight: bold;
   border-bottom: 2px solid black;
}

.basicheader {
   grid-template-columns:  1fr 1fr repeat(4, 3fr);
}
.datesheader {
   grid-template-columns:  1fr 2fr 1fr repeat(4, 3fr);
}
.AIheader {
   grid-template-columns:  1fr 2fr 1fr repeat(5, 3fr);
}

.schedule-body {
   flex: 1;
   overflow-y: auto;
}

.schedule-body-basicrow {
   display: grid;
   font-size: 0.8rem;
   text-align: right;
   margin-right: 20px;
   grid-template-columns: 1fr 1fr 3fr 3fr 3fr 3fr;
   height: 1em;
}
.schedule-body-datesrow {
   display: grid;
   font-size: 0.8rem;
   text-align: right;
   margin-right: 20px;
   grid-template-columns: 1fr 2fr 1fr 3fr 3fr 3fr 3fr;
   height: 1em;
}
.schedule-body-AIrow {
   display: grid;
   font-size: 0.8rem;
   text-align: right;
   margin-right: 20px;
   height: 1em;
   grid-template-columns: 1fr 2fr 1fr 3fr 3fr 3fr 3fr 3fr;
}

.schedule-body-subtotals-row {
   display: grid;
   font-size: 0.8rem;
   text-align: right;
   font-weight: bold;
   margin-right: 20px;
   height: 3em;
   border-top: 1px solid black;
}
.schedule-body-subtotals-row.Basic {
   grid-template-columns: 2fr repeat(4, 3fr);
}
.schedule-body-subtotals-row.Dates {
   grid-template-columns: 4fr repeat(4, 3fr);
}
.schedule-body-subtotals-row.AccumInt {
   grid-template-columns: 4fr repeat(5, 3fr);
}

.schedule-body-balloon-row {
   display: grid;
   font-size: 0.8rem;
   text-align: right;
   font-weight: bold;
   margin-right: 20px;
   height: 2em;
   grid-template-columns: 4fr 3fr 3fr 3fr 3fr 3fr;
   background-color:aquamarine;
}