button.margin {
    margin: 0.5em;
}

.hidden {
    display: none;
}

.error .danger{
    background-color: var(--pico-form-element-invalid-active-border-color);
    color: var(--pico-primary-inverse);
}

.warning {
    background-color: var(--pico-form-element-invalid-border-color);
    color: var(--pico-primary-inverse);
}

.success {
    background-color: var(--pico-form-element-valid-border-color);
    color: var(--pico-primary-inverse);
}

button.delete {
    background-color: var(--pico-form-element-invalid-border-color);
    border-color: var(--pico-form-element-invalid-border-color);
}

/* Badge list style */

.badge-list {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.badge-list li {
    display: flex;
    align-items: center;
    background-color: var(--pico-form-element-valid-border-color);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    position: relative;
    font-size: var(--pico-font-size);
    cursor: pointer;
    transition: background 0.3s;
    border:2px solid var(--pico-form-element-valid-border-color);
}

.badge-list li:hover {
    background-color: var(--pico-form-element-valid-focus-color);
    border:2px solid var(--pico-ins-color);
}

.badge-list .delete-icon {
    display: none;
    margin-left: 8px;
    cursor: pointer;
    color: white;
    font-weight: bold;
    font-size: var(--pico-font-size);
    background-color: rgba(255, 255, 255, 0.2);
    padding: 0;
    border-radius: 50%;
    width: 14px;
    height: 14px;
    text-align: center;
    line-height: 13px;
}

.badge-list li:hover .delete-icon {
    display: inline-block;
}

/* End of badge list style */


button span.button-icon {
    margin-right: 8px; /* Adjust spacing after button icon*/
}

/* used for elements like buttons which I want to have placed horizontally */
.flex-left {
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
    gap: var(--pico-block-spacing-horizontal);
}

/* Table change row colour when active */
table.striped tbody tr:hover td {
  background-color: var(--pico-primary-focus);
}

/* continuous color invoice change when set to processed or back*/
table.striped tbody tr td {
   transition: color 0.5s ease-in;
}

/* Table change row colour when invoice is processed */
table.striped tbody tr.processed td  {
  color: var(--pico-form-element-valid-active-border-color);
}

/* Table change row colour when invoice is processed when cursor is hovering */
table.striped tbody tr.processed:hover td  {
  color: var(--pico-ins-color);
}

/* HTMX Fading  */

.fade-me-in.htmx-added {
    opacity: 0;
  }

.fade-me-in {
    opacity: 1;
    transition: opacity 1s ease-out;
  }

.fade-me-out.htmx-swapping {
    opacity: 0;
    transition: opacity 1s ease-out;
  }

label {
    display: inline-block;
}

/* footer lists */

footer li {
  list-style: none; /* remove bullets */
}

footer li a {
  text-decoration: none; /* remove underline from links */
}

footer li:first-child {
  margin-bottom: 1em;
}

/* footer links needs to be moved to the left in mobile view */
@media only screen and (max-width: 768px) {
    footer ul {
        padding-inline-start: 0;
    }
}

/* article padding on home page increased */
.home-card {
    padding: 1.5em;
}