@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro|Oswald);

/****************************************/
/* Styling rules, such as font and colors */
.date-as-calendar {
  font-variant: normal;
  font-style: normal;
  font-weight: normal;
  /* font-family: "Helvetica", "Arial", sans-serif; */

  /* It seems vertical-align: baseline does not work correctly with display: inline-flex. */
  vertical-align: top;

  /* margin: 1ex; */

  color: black;
  background: white;
  background : linear-gradient(to bottom right, #FFF 0%, #EEE 100%);

  border: 1px solid #888;
  border-radius: 3px;
  overflow: hidden;

  box-shadow: 2px 2px 2px -2px black;
}
.date-as-calendar .weekday,
.date-as-calendar .day,
.date-as-calendar .month,
.date-as-calendar .year {
  text-align: center;
  line-height: 1.0;
}
.date-as-calendar .month {
  font-family: "Oswald", sans-serif;
  text-transform: uppercase;
  background: #B11;
  background : linear-gradient(to bottom right, #D66 0%, #A00 100%);
  color: white;
}

/****************************************/
/* Layout rules using position: absolute and pixels. */
.position-pixels.date-as-calendar {
  display: inline-block;
  position: relative;
  width: 64px;
  height: 64px;
}
.position-pixels.date-as-calendar .weekday,
.position-pixels.date-as-calendar .day,
.position-pixels.date-as-calendar .month,
.position-pixels.date-as-calendar .year {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 1em;
}
.position-pixels.date-as-calendar .month {
  top: 0px;
  font-size: 12px;
  padding: 2px 0;
}
.position-pixels.date-as-calendar .weekday {
  top: 16px;
  font-size: 10px;
}
.position-pixels.date-as-calendar .day {
  top: 26px;
  font-size: 24px;
}
.position-pixels.date-as-calendar .year {
  top: 50px;
  font-size: 14px;
}

/****************************************/
/* Layout rules using position: absolute and relative dimensions using em. */
.position-em.date-as-calendar {
  display: inline-block;
  position: relative;
  
  width: 4em; 
  height: 4em; 
}
.position-em.date-as-calendar .weekday,
.position-em.date-as-calendar .day,
.position-em.date-as-calendar .month,
.position-em.date-as-calendar .year {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 1em;
}
.position-em.date-as-calendar .month {
  top: 0px;
  font-size: 0.75em;
  padding: 0.1em 0;
}
.position-em.date-as-calendar .weekday {
  top: 1.6em;
  font-size: 0.6125em;
}
.position-em.date-as-calendar .day {
  top: 1.1em;
  font-size: 1.5em
}
.position-em.date-as-calendar .year {
  bottom: 0px;
  font-size: 0.87750em;
}

/****************************************/
/* Layout rules using display: inline-flex and relative dimensions using em. */
.inline-flex.date-as-calendar {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-between;
  
  width: 4em; 
  height: 4em; 
}
.inline-flex.date-as-calendar .weekday,
.inline-flex.date-as-calendar .day,
.inline-flex.date-as-calendar .month,
.inline-flex.date-as-calendar .year {
  display: block;
  flex: 1 1 auto;
}
.inline-flex.date-as-calendar .month {
  order: 1;
  font-size: 0.75em;
  padding: 0.1em 0;
}
.inline-flex.date-as-calendar .weekday {
  order: 2;
  font-size: 0.6125em;
}
.inline-flex.date-as-calendar .day {
  order: 3;
  font-size: 1.5em;
}
.inline-flex.date-as-calendar .year {
  order: 4;
  font-size: 0.87750em;
}

/****************************************/
/* Multiple sizes. */
.date-as-calendar.size0_5x {
  font-size: 8px;
}
.date-as-calendar.size0_75x {
  font-size: 12px;
}
.date-as-calendar.size1x {
  font-size: 16px;
}
.date-as-calendar.size1_25x {
  font-size: 20px;
}
.date-as-calendar.size1_5x {
  font-size: 24px;
}
.date-as-calendar.size1_75x {
  font-size: 28px;
}
.date-as-calendar.size2x {
  font-size: 32px;
}
.date-as-calendar.size3x {
  font-size: 48px;
}
div.calendarDate{    
    font-size:1em; /*change calendarIcon size */    
    display: block;    
    position: relative;    
    width: 7em;    
    height: 7em;    
    background-color: #fff;                  
    border-radius: 0.7em;    
    -moz-border-radius: 0.7em;                        
    box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd,    
                                        0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;    
    overflow: hidden;    
}    

div.calendarDate *    
{    
display: block;    
width: 100%;    
font-size: 1em;    
font-weight: bold;    
font-style: normal;    
text-align: center;    
}    

div.calendarDate strong    
{    
position: absolute;    
top: 0;    
padding: 0.4em 0;    
color: #fff;    
background-color: #19aaaa;    
border-bottom: 1px dashed #ddd;    
box-shadow: 0 2px 0 #19aaaa;    
}    
div.calendarDate em    
{    
position: absolute;    
bottom: 0em;    
color: #fff;    
padding-top:.2em;    
height: 1.6em;    
background-color: #19aaaa;    

}    
div.calendarDate span    
{    
font-size: 2.8em;    
letter-spacing: -0.05em;    
padding-top: 0.65em;    
color: #2f2f2f;    
}    
.cal {
    display: inline-block;
    border: .1px solid #CCCAC5;
    background-color: #FFF;
    width: 30px;
    /* font-family: Arial, sans-serif; */
    text-align: center;
  }
  .cal .month {
    /* height: 50px; */
    /* line-height: 50px; */
    font-size: 0.75rem;
    text-transform: uppercase;
    background-color: #E75951;
    color: #FFF;
  }
  .cal .date {
    /* font-size: 10rem; */
    color: #585858;
    /* line-height: 175px; */
  }

  .inv {
    display: inline-block;
    border: .1px solid #CCCAC5;
    background-color: #FFF;
    width: 50%;
    /* font-family: Arial, sans-serif; */
    text-align: center;
  }
  .inv .inv_no {
    /* height: 50px; */
    /* line-height: 50px; */
    font-size: 0.75rem;
    font-weight: 200;
    text-transform: uppercase;
    background-color: #470ce9;
    color: #FFF;
  }
  .inv .inv_vendor {
    /* font-size: 10rem; */
    color: #585858;
    /* line-height: 175px; */
  }



.wv-table, .wv-table--condensed, .wv-table--plain, .wv-table--fixed-width, .wv-table--skeleton {
    width: 100%;
    border-collapse: collapse;
}
.wv-topbar--app .wv-topbar__business-name, .wv-topbar__menu-toggle__label, .wv-action-list__action-content, .wv-dropdown__menu, .wv-dropdown__menu--right, .wv-table, .wv-table--condensed, .wv-table--plain, .wv-table--fixed-width, .wv-table--skeleton, .wv-tile-button__description, .wv-form-field__read-only, .wv-form-field__label--align-top, .wv-form-field__label, .wv-select__footer, .wv-select__menu, .wv-select__input, .wv-datepicker__panel, .wv-toggle .wv-toggle__label, .wv-radio .wv-form-field__label, .wv-checkbox .wv-form-field__label, .wv-textarea, .wv-input, .wv-button--link, .wv-pagination__control, .is-complete .wv-workflow__task__action, .is-current .wv-workflow__task__action, .wv-button, .wv-button--submit, .wv-button--primary, .wv-button--secondary, .wv-button--danger, .wv-button--secondary--danger, .wv-button--upgrade, .wv-button--facebook, .wv-button--yahoo, .wv-button--google, .wv-list--icon, .wv-list--alpha, .wv-list--numbered, .wv-list, .wv-list--bulleted, .wv-nav--tertiary .wv-nav__section, .wv-nav--secondary--horizontal .wv-nav__section, .wv-nav--secondary .wv-nav__section, .wv-list--plain--horizontal, .wv-list--plain--vertical, .wv-text, .wv-text--body, .wv-heading--pre-title {
    font-size: 16px;
    line-height: 1.4;
}
.wv-business-switcher__panel__header__title, .wv-action-list__action-content, .wv-disclosure__subheading, .wv-tag, .wv-toast__content__text, .wv-nav__menu--apps .wv-nav__menu__item__label, .wv-modal, .wv-modal--danger, .wv-tooltip--right, .wv-tooltip--bottom, .wv-tooltip--left, .wv-tooltip, .wv-tooltip--top, .wv-table, .wv-table--condensed, .wv-table--plain, .wv-table--fixed-width, .wv-table--skeleton, .wv-tile-button__description, .wv-tile-button__label, .wv-form-field__read-only, .wv-form-field__label--align-top, .wv-form-field__label, .wv-select__input, .wv-datepicker__day, .wv-toggle .wv-toggle__label, .wv-radio .wv-form-field__label, .wv-checkbox .wv-form-field__label, .wv-input--signature::placeholder, .wv-textarea, .wv-input, .wv-button-group--segmented .wv-button-group__button, .wv-button--link, .wv-list--icon, .wv-list--alpha, .wv-list--numbered, .wv-list, .wv-list--bulleted, .wv-nav--tertiary .wv-nav__section, .wv-nav--secondary--horizontal .wv-nav__section, .wv-nav--secondary .wv-nav__section, .wv-list--plain--horizontal, .wv-list--plain--vertical, body, .wv-text--reverse, .wv-text, .wv-text--body, .wv-heading--pre-title {
    /* font-family: dinerosans, sans-serif; */
    color: #1c252c;
    font-weight: normal;
}


.table-container {
    overflow-x: auto;
  }
  table {
    width: 100%;
    border-collapse: collapse;
  }
  /* th, td {
    text-align: left;
    padding: 8px;
    border-bottom: 1px solid #ddd;
  }
  th {
    background-color: #f2f2f2;
    color: black;
  } */
  .overdue {
    color: red;
    font-weight: bold;
  }
  .send-reminder {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
  }
  .send-reminder:hover {
    color: darkblue;
  }

  .bills {
    background-color: transparent;
  }
  .bills table {
    border: none;
  }
  .bills th {
    font-size: 10px;
  }
  .bills tr {
    border: #19aaaa 1px solid;
  }
  .bills td {
    border: none;
  }

  thead {
    /* border-bottom: 1px solid #d0d0d0; */
    border-bottom: none;
}
table.md-table thead.md-head > tr.md-row {
    height: 1em;
}
table.md-table tbody.md-body > tr.md-row, table.md-table tfoot.md-foot > tr.md-row {
    height: 2em;
}
table.md-table td.md-cell {
    font-size: 1em;
}
table.md-table th {
    border: none;
}
table.md-table thead {
    border-bottom: #470ce9 1px solid;
}

table.md-table tr {
    border-bottom: #470ce9 0.5px solid;
}

table.md-table th.md-column {
    color: rgba(0, 0, 0, 0.54);
    font-size: 14px;
    font-weight: bold;
    white-space: nowrap;
}
table.md-table td.md-cell {
    border: none;
}

.bill_elements {
    left: none;
    width: calc(25% - 6px);
    padding-top: none;
    margin-top: none;
}

table.md-table:not(.md-row-select) td.md-cell:nth-child(n+2):nth-last-child(n+2), table.md-table:not(.md-row-select) th.md-column:nth-child(n+2):nth-last-child(n+2) {
  padding: 0 20px 0 0;
}
span.tiny {
  font-size: 50%;
}
.btn-floating-small {
  display: inline-block;
  color: #fff;
  position: relative;
  overflow: hidden;
  z-index: 1;
  width: 20px;
  height: 20px;
  line-height: 20px;
  padding: 0;
  background-color: #26a69a;
  border-radius: 50%;
  transition: .3s;
  cursor: pointer;
  vertical-align: middle;
  font-size: 60%;
}

.md-button.md-fab {
  z-index: 20;
  line-height: 0.5rem;
  min-width: 0;
  width: 1rem;
  height: 1rem;
  vertical-align: middle;
  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
  border-radius: 50%;
  background-clip: padding-box;
  overflow: hidden;
  /* transition: all 0.3s cubic-bezier(0.55, 0, 0.55, 0.2); */
  transition-property: background-color, box-shadow, transform;
}

.bills_container md-checkbox .md-container {
  top: auto;
  left: auto;
  right: auto;
  margin: 3 5 5 0;
  /* margin-top: 21px; */
  margin-top: auto;
}

span.small {
  font-size: 1.1rem;
}

.details_table td, th {
  padding: 0px 0px;
  border: none;
}

.bills_container md-input-container {
  /* display: inline-block; */
  position: relative;
  padding: 0px;
  margin: 18px 0px 0px 0px;
  vertical-align: middle;
}

.bills .label {
   color: inherit;
   font-size: 1rem;
}
.key_fields_td {
  border: none;
}

input:not([type]), input[type=text], input[type=password], input[type=email], input[type=url], input[type=time], input[type=date], input[type=datetime], input[type=datetime-local], input[type=tel], input[type=number], input[type=search], textarea.materialize-textarea {
  margin: 0px;
}

.custom-dialog {
  width: 75vw;
  height: 75vh;
}

.zero_due {
  font-weight: bold;
  /* background-color:#26a69a; */
  /* color:chartreuse; */
}

table.md-table td.md-cell {
  /* color: rgba(0, 0, 0, 0.87); */
  color: inherit;
  font-size: 13px;
  border-top: 1px rgba(0, 0, 0, 0.12) solid;
}

.scheduled {
  /* color: #e51c23 !important; */
  border: 1px solid #eee;
  margin: 7px 0;
  text-align: center;
  line-height: 20px;
  /* font-size: 28px; */
  /* background-color: tomato; */
  background-color: orange;
  color: white;
  padding: 0;  
}

.scheduled {
  max-width: 100%;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.8125rem;
  display: inline-flex
;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  height: 24px;
  cursor: unset;
  vertical-align: middle;
  box-sizing: border-box;
  background-color: transparent;
  color: rgb(21, 101, 192);
  border-radius: 16px;
  white-space: nowrap;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 0px;
  text-decoration: none;
  padding: 0px;
  border-width: 1px;
  border-style: solid;
  border-image: initial;
  border-color: rgb(21, 101, 192);
}

.sent {
  /* color: #e51c23 !important; */
  border: 1px solid #eee;
  margin: 7px 0;
  text-align: center;
  line-height: 20px;
  /* font-size: 28px; */
  /* background-color: tomato; */
  background-color: rgb(0, 255, 115);
  color: rgb(19, 19, 19);
  padding: 0;  
}

.sent {
  max-width: 100%;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.8125rem;
  display: inline-flex
;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  height: 24px;
  cursor: unset;
  vertical-align: middle;
  box-sizing: border-box;
  background-color: transparent;
  color: rgb(21, 101, 192);
  border-radius: 16px;
  white-space: nowrap;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 0px;
  text-decoration: none;
  padding: 0px;
  border-width: 1px;
  border-style: solid;
  border-image: initial;
  border-color: rgb(21, 101, 192);
}

.paid1 {
  /* color: #e51c23 !important; */
  border: 1px solid #eee;
  margin: 7px 0;
  text-align: center;
  line-height: 20px;
  /* font-size: 28px; */
  background-color:#470ce9;
  color: white;
  padding: 0;  
}

.paid {
  max-width: 100%;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.8125rem;
  display: inline-flex;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  height: 24px;
  cursor: unset;
  vertical-align: middle;
  box-sizing: border-box;
  background-color: transparent;
  color: rgb(21, 101, 192);
  border-radius: 16px;
  white-space: nowrap;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 0px;
  text-decoration: none;
  padding: 0px;
  border-width: 1px;
  border-style: solid;
  border-image: initial;
  border-color: rgb(21, 101, 192);  
}

.unknown {
  max-width: 100%;
  font-family: Roboto, Helvetica, Arial, sans-serif;
  font-size: 0.8125rem;
  display: inline-flex
;
  -webkit-box-align: center;
  align-items: center;
  -webkit-box-pack: center;
  justify-content: center;
  height: 24px;
  cursor: unset;
  vertical-align: middle;
  box-sizing: border-box;
  background-color: transparent;
  /* color: rgb(21, 101, 192); */
  color: rgb(239, 108, 0);
  border-radius: 16px;
  white-space: nowrap;
  transition: background-color 300ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1);
  outline: 0px;
  text-decoration: none;
  padding: 0px;
  border-width: 1px;
  border-style: solid;
  border-image: initial;
  /* border-color: rgb(21, 101, 192);   */
  border-color: rgb(239, 108, 0);

}

.unknown1 {
  /* color: #e51c23 !important; */
  border: 1px solid #eee;
  margin: 7px 0;
  text-align: center;
  line-height: 20px;
  /* font-weight: 400; */
  /* font-size: 28px; */
  background-color:red;
  color: white;
  padding: 0;  
}

.read_bill {
  background-color: #f2f2f2; 
  /* Light gray background for header */
  /* background-color: #A5A692; */
  font-weight: bold;
}

.comment_w_notes {
  background-color: #F2A71B; /* Light gray background for header */
  font-weight: bold;
}

/* Ensure the dialog takes up the specified part of the viewport */
md-dialog.custom-dialog {
  width: 75%;        /* Set the width of the dialog */
  height: 90%;       /* Set the height of the dialog */
  max-width: none;   /* Override maximum width restrictions */
  max-height: none;  /* Override maximum height restrictions */
}

.md-dialog-content {
  height: calc(100% - 64px); /* Subtract the approximate height of the toolbar */
  overflow: hidden; /* Prevents additional scrollbars */
}

iframe {
  width: 100%;    /* Full width */
  height: 100%;   /* Full height */
  border: none;   /* Remove border */
}


md-dialog md-dialog-content {
  height: 100%;
}

h1 {
  font-size: 24px;
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

/* .invoice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 20px;
} */

/* Card Styling */
/* .invoice-card {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 250px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
} */

/* .invoice-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.invoice-card h3 {
  margin: 0;
  font-size: 22px;
  color: #333;
  font-weight: 600;
}

.invoice-card p {
  font-size: 14px;
  color: #555;
  margin: 5px 0;
} */

/* Status Styling */
/* .status {
  font-weight: bold;
} */

.status-paid {
  color: #4caf50;
}

.status-unpaid {
  color: #f44336;
}

.status-rejected {
  color: #ff4444;
}

.status-reviewed {
  color: #3f51b5;
}

.status-scheduled {
  color: #ff9800;
}

.status-sent {
  color: #2196f3;
}

/* Status Icon */
.status-icon {
  margin-left: 8px;
  font-size: 16px;
}

/* Responsive Design */
@media (max-width: 768px) {
  .invoice-grid {
      grid-template-columns: 1fr;
  }

  .invoice-card {
      height: auto;
  }
}

.bill-card {
  background-color: #3b2b5f;
  border-radius: 12px;
  padding: 16px;
  margin: 10px 0;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  /* display: flex; */
  /* justify-content: space-between; */
  align-items: center;
}

.bill-card p {
  margin: 0;
  font-size: 16px;
}

.bill-card .amount {
  font-size: 18px;
  font-weight: bold;
}

.status {
  display: flex;
  align-items: center;
  font-size: 14px;
}

.status i {
  margin-right: 5px;
}

.paid {
  color: #4caf50;
}

.unpaid {
  color: #f44336;
}

/* Styling for date section */
.date {
  font-size: 14px;
  color: #aaa;
}

/* Add button */
.add-bill-button {
  background-color: #ff4081;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

/* Main container */
/* .container {
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
} */

.month-header {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #fff;
}

.md-avatar-left {
  margin-right: 10px;  /* Space between the avatar and the title */
  vertical-align: middle;  /* Ensures the avatar is aligned with the text */
}


.price-innerdetail h5 {
  font-weight: 400;
  letter-spacing: 2px;
  font-size: 15px;
}

.price-innerdetail p {
  font-size: 50px;
}

.detail-pricing {
  border-bottom: 1px solid;
  padding: 30px 0 30px 0;
}

.detail-pricing .float-left {
  padding: 0 0 0 40px;
}

.detail-pricing .float-left i {
  position: absolute;
  left: 0;
  font-size: 20px;
}

.detail-pricing span {
  display: inline-block;
  position: relative;
  font-weight: 400;
}

.wrap-price {
  background: rgba(32, 33, 36, .1);
  padding: 50px 20px 50px;
  border-radius: 10px;
}

.center-wrap {
  background: #070707;
  color: #fff;
}

.invoice_card {
  padding: 2px;
}

.vendor_details {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: var(--ant-color-text-light-solid);
    font-size: var(--ant-font-size);
    line-height: var(--ant-line-height);
    list-style: none;
    font-family: var(--ant-font-family);
    position: relative;
    display: inline-flex
;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    background: var(--ant-color-text-placeholder);
    border: var(--ant-line-width) var(--ant-line-type) transparent;
    width: var(--ant-avatar-container-size);
    height: var(--ant-avatar-container-size);
    border-radius: 50%;  
}

.danger-text {
  background-color: red;
  color: yellow
}


.invoice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 30px;
}

.invoice-card {
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

.invoice-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.invoice-header {
  background-color: #3f51b5;
  color: white;
  padding: 20px;
  text-align: center;
}

.invoice-content {
  padding: 20px;
}

.invoice-content p {
  margin: 8px 0;
}

.invoice-footer {
  background-color: #f5f5f5;
  padding: 15px;
  text-align: center;
}

.invoice-footer .amount {
  font-size: 18px;
  font-weight: bold;
  color: #4caf50;
}

.known_vendor {
  color: wheat;
}

.unknown_vendor {
  color: white;
  background-color: blue;
}

.invoice-container {
  /* max-width: 800px; */
  margin: 20px auto;
}
.md-card-content p {
  margin: 0;
}
.md-card-content .md-subhead {
  color: rgba(0, 0, 0, 0.54);
}
.invoice-header-block {
  display: flex;
  justify-content: space-between;
}
.invoice-items-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}
.invoice-items-table th, .invoice-items-table td {
  text-align: left;
  padding: 8px;
  border-bottom: 1px solid #ddd;
}
.invoice-items-table th {
  background-color: #f2f2f2;
}
.text-right {
  text-align: right;
}
.invoice-summary {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.invoice-summary-table {
  width: 300px;
}
.invoice-summary-table th, .invoice-summary-table td {
  text-align: right;
  padding: 4px 8px;
}