/* --- AnimatiSS --- */

.slide-right{animation:slide-right 0.4s linear both}@keyframes slide-right{100%{transform:translateX(0)}0%{transform:translateX(1rem)}}

.slide-left{animation:slide-left 0.4s linear both}@keyframes slide-left{0%{transform:translateX(0)}100%{transform:translateX(-1rem)}}

.blur-in{animation:blur-in .4s linear both} @keyframes blur-in{0%{filter:blur(12px);opacity:0}100%{filter:blur(0);opacity:1}}

.blur-out{animation:blur-out .4s linear both} @keyframes blur-out{0%{filter:blur(.01px);}100%{filter:blur(12px);opacity:0}}

.scale-up-center{animation:scale-up-center 0.4s; } @keyframes scale-up-center{ 0%{transform:scale(.5)} 100%{transform:scale(1)} }

.scale-down-center{animation:scale-down-center 0.4s; } @keyframes scale-down-center{0%{transform:scale(1)}100%{transform:scale(.5)}}

.shadow-pop-bottom-left{animation:shadow-pop-bottom-left 0.4s linear both} @keyframes shadow-pop-bottom-left{0%{box-shadow:0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e,0 0 #3e3e3e;transform:translateX(0) translateY(0)}100%{box-shadow:-1px 1px #3e3e3e,-2px 2px #3e3e3e,-3px 3px #3e3e3e,-4px 4px #3e3e3e,-5px 5px #3e3e3e,-6px 6px #3e3e3e,-7px 7px #3e3e3e,-8px 8px #3e3e3e;transform:translateX(8px) translateY(-8px)}}

.jello-horizontal{animation:jello-horizontal 1.2s ease both} @keyframes jello-horizontal{0%{transform:scale3d(1,1,1)}30%{transform:scale3d(1.1,.9,1)}40%{transform:scale3d(.9,1.1,1)}50%{transform:scale3d(1.05,.95,1)}65%{transform:scale3d(.975,1.025,1)}75%{transform:scale3d(1.025,.975,1)}100%{transform:scale3d(1,1,1)}}

.bounce-top{animation:bounce-top .9s linear both} @keyframes bounce-top{0%{transform:translateY(-24px);animation-timing-function:ease-in;opacity:1}24%{opacity:1}40%{transform:translateY(-12px);animation-timing-function:ease-in}65%{transform:translateY(-6px);animation-timing-function:ease-in}82%{transform:translateY(-3px);animation-timing-function:ease-in}93%{transform:translateY(-1.5px);animation-timing-function:ease-in}25%,55%,75%,87%{transform:translateY(0);animation-timing-function:ease-out}100%{transform:translateY(0);animation-timing-function:ease-out;opacity:1}}

.scale-up-horizontal-left{animation:scale-up-horizontal-left 0.4s } @keyframes scale-up-horizontal-left{0%{transform:scaleX(.4);transform-origin:left center}100%{transform:scaleX(1);transform-origin:left center}}

.scale-up-vertical-top{animation:scale-up-vertical-top 0.4s linear} @keyframes scale-up-vertical-top{0%{transform:scaleY(.4);transform-origin:center top}100%{transform:scaleY(1);transform-origin:center top}}

#alert-placeholder {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 2000;
  max-width: 20rem;
}

#account-invoice-index .accordion-item,
#account-invoice-index .accordion-button {
  color: unset;
}

#account-invoice-index .invoice-header {
  display: grid;
  gap: .5rem;
  grid-template-areas: 
    "number total button"
    "date has-balance button";
  grid-template-columns: 4fr 3fr 1fr;
}

#account-invoice-index .number {
  grid-area: number;
}

#account-invoice-index .date {
  grid-area: date;
}

#account-invoice-index .total {
  grid-area: total;
  justify-self: end;
}

#account-invoice-index .has-balance {
  grid-area: has-balance;
  justify-self: end;
}

#account-invoice-index .accordion-button::after {
  grid-area: button;
}

@media (min-width: 576px) {
  #account-invoice-index .invoice-header {
    gap: 2rem;
    grid-template-areas: 
      "number date total has-balance button";
    grid-template-columns: 5rem 1fr auto 4rem auto;
  }

  #account-invoice-index .has-balance {
    justify-self: center;
  }  
}

#account-invoice-index .invoice-body .line,
#invoice-single .line {
  font-size: .875rem;
  display: flex;
  flex-wrap: wrap;
  align-items: last baseline;
  justify-content: end;
  gap: .25rem;
  border-bottom: solid 1px var(--lightgrey);
  padding: .25rem 0;
}

#account-invoice-index .invoice-body .line:not(.line-total) .description,
#invoice-single .line:not(.line-total) .description {
  width: 100%;
}

#account-invoice-index .invoice-body .line-total,
#invoice-single .line-total {
  flex-wrap: nowrap;
  justify-content: space-between;
}

#account-invoice-index .invoice-body .line .money,
#invoice-single .line .money {
  width: 5rem;
  text-align: end;
  flex-shrink: 0;
}

#account-invoice-index .invoice-body .line.header .money,
#invoice-single .line.header .money {
  text-align: center;
}

@media (min-width: 576px) {
  #account-invoice-index .invoice-body .line,
  #invoice-single .line {
    flex-wrap: nowrap;
  }

  #account-invoice-index .invoice-body .line-total .description,
  #invoice-single .line-total .description {
    flex-shrink: 1;
  }

  #account-invoice-index .invoice-body .line-total {
    max-width: 30rem;
    margin-left: auto;
  }

  #invoice-single .line-total {
    max-width: 18rem;
    margin-left: auto;
  }
}

@media (min-width: 768px) {
  #account-invoice-index .invoice-body .line,
  #invoice-single .line {
    font-size: 1rem;
  }

  #account-invoice-index .invoice-body .line .money,
  #invoice-single .line .money {
    width: 6rem;
  }
}

#invoice-single {
  max-width: 48rem;
  margin: 0 auto;
}

#invoice-single h1 {
  font-size: 2.5rem;
}

@media (min-width: 576px) {
  #invoice-single .logo {
    max-width: 22rem;
  }
  
  #invoice-single .invoice-detail {
    width: 18rem;
  }
}

@media (min-width: 768px) {
  #invoice-single h1 {
    font-size: 3.5rem;
    width: 18rem;
  }
}

#invoice-single .accent-border {
  border-bottom: solid .25rem var(--category1);
}

#invoice-single .accent-border.small {
  max-width: 30rem;
  margin: 0 auto;
}

#account-summary .balance-wrapper {
  max-width: 24rem;
}