.entries {
	.entry:last-child {
		border-bottom: 2px solid color("base-light");
	}
	select {
		width: 65%;
		color: color("base-dark");
		background-color:transparent;
		border: 1px solid color("base-dark");
		transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
		margin-bottom:0;
    font-size: 19px;
	}
	input[type="number"] {
		width: 65%;
		display:inline;
	}
	ul.entries-header {
		font-weight: 900;
		font-size: 0.8em;
		padding: 10px 10px 25px 10px;
		height: auto;
		li {
			display: inline;
		}
	}
}

.entry-alerts {
    margin-bottom: 10px;

    .warning {
        color: color("secondary");

        &.bold {
            font-weight: bold;
        }

        &.italic {
            font-style: italic;
        }
    }

    .important {
        color: #bb6100;


        &.bold {
            font-weight: bold;
        }

        &.italic {
            font-style: italic;
        }
    }

    .info {
        color: green;

        &.bold {
            font-weight: bold;
        }

        &.italic {
            font-style: italic;
        }
    }
}



.entry {
	border-top: 2px solid color("base-lighter");
	background-color: color("base-lightest");
	padding: 1em;

.grid-container {
	padding-bottom: .25rem;
	padding-top: .25rem;
}

    &.even {
        background-color: #fff;


    }

    &.odd {
			.grid-container {
			background-color: color("base-lightest");
}


        .entry-alerts {
            .warning {
                color: color("secondary-dark");
            }

            .important {
                color: #ffdf00;
            }

            .info {
                color: #0f0;
            }
        }
    }
}

.entry-project {
  .autocomplete__dropdown-arrow-down {
    z-index: 1; //override to accessible-autocomplete's -1 index, which hides arrow
    top: 18px; //override to accommodate extra margin on input
  }
  .autocomplete__hint, .autocomplete__input {
    border: 1px solid #565c65;
    color: #1b1b1b;
    margin-top: 0.5rem;
  }
}

.entry-notes {
    textarea {
        height: 100px;
    }
}

.entry-billable-icon {
	text-align:center;
	font-size: 1.5rem;
	margin-top: -0.1em;
	&.unknown {
		color: #ccc;
	}
	&.billable {
		color: green;
	}
	&.non-billable {
		color: #1188ff;
	}
}

.entry-project label, .entry-amount label, .entry-note-field label {
  @extend .usa-label;
}
.entry-amount input[type=text], .entry-amount input[type=number] {
  @extend .usa-input;
}
.entry-delete {
  margin-top: 2em;
  background-color: transparent;
  input[type=checkbox] {
    @extend .usa-checkbox__input;
  }
 
}

.usa-checkbox {
  background-color: transparent;
}
.entry-note-field textarea {
  @extend .usa-textarea;
}

.entry-hidden {
	display: none;
}

.entries-add-more {
	padding-bottom: 1.5rem;
	padding-top: 1.5rem;
}

.entries-total {
  .text-label {
    display: inline-block;
    margin-bottom: 1rem;
  }
}

.entries-total-reported-amount, .entries-total-billable-amount {
  &, .number-label, .circular-graph {
    width: 60px;
    height: 60px;
  }

  .number-label {
    position: relative;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    font-weight: bold;
  }

  .circular-graph {
    transform: rotate(-90deg);
    position: absolute;
    left: 0;

    .background {
      fill: #ffffff;
      stroke: color("gray-20");
      stroke-width: 3;
      transition: stroke-dasharray 0.3s ease-out;
    }

    .fill {
      fill: none;
      stroke: currentColor;
      stroke-width: 3;
      transition: stroke-dasharray 0.3s ease-out;
    }
  }

  &.invalid {
    color: color("secondary-dark");
  }

  &.valid {
    color: color("success");
  }

  display: block;
  position: relative;
  color: color("base-dark");
}

.entries-total {
	background: color("accent-cool-lighter");
	padding: 1em;
	.add-timecard-entry,
	.entries-total-reported {
		text-align:left;
    .usa-button-outline {
      float: left;

      &:hover {
        background-color: transparent;
      }
    }

    [type="submit"] {
      margin-top: 0.5em;
    }
	}
  .weekly-bill-header {
    font-weight: bold;
  }
  #footer-controls-container {
    align-items: center;
    #add-item-wrapper {
      display: flex;
      padding-top: 0.5em;
      padding-bottom: 0.5em;
    }
  }
}

.form-error,
.invalid {
	font-weight: bold;
}

.submit-form {
	padding: 1.5rem;
	[type=submit] {
		display: inline-block;
	}
}
.timecard-footer {
	margin-bottom: 6rem;
}
