.loading-bar {
    opacity: 0;
    width: 100%; /* Width of the loading bar */
    height: 3px; /* Height of the loading bar */
    background: linear-gradient(to right, #ffffff, #7e7e7e);
    border-radius: 2px; /* Optional: rounded corners */
}

.htmx-request.loading-bar {
    opacity: 1;
    animation: progress-animation 1s ease-in-out infinite; /* Continuous animation */
}

.htmx-indicator {
    margin-left: auto;
    opacity: 0;
    transition: opacity 500ms ease-in;
}

.htmx-request.htmx-indicator {
    opacity: 1;
    animation: spin 1s linear infinite;
}

@keyframes progress-animation {
    0% {
        width: 0%; /* Start empty */
    }
    50% {
        width: 100%; /* Fill the bar */
    }
    100% {
        width: 0%; /* Reset to empty */
    }
}

@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.ti-spin {
  display: inline-block;
  animation: spin 1s linear infinite;
}

/* Inline icon replacement */
.inline-indicator {
  display: none;
}

.htmx-request .normal-icon {
  display: none;
}
.htmx-request .inline-indicator {
  display: inline;
}

.icon-green {
    color: green;
    font-size: 18px;
}

.icon-black {
    color: black;
    font-size: 18px;
}

.icon-white {
    color: white;
    font-size: 18px;
}

.icon-orange {
    color: orange;
    font-size: 18px;
}

.icon-blue {
    color: blue;
    font-size: 18px;
}

.icon-red {
    color: red;
    font-size: 18px;
}

.icon-green-lg {
    color: green;
    font-size: 24px;
}

.icon-red-lg {
    color: red;
    font-size: 24px;
}

.icon-blue-lg {
    color: blue;
    font-size: 24px;
}

body, html {
    background: rgb(245, 245, 245);
    height: 100%;
    background-image: url("/static/img/background.jpg");
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

.small-padding td, .small-padding th {
    padding: 4px 4px; /* vertical 4px, horizontal 4px */
}
.small-padding tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* light gray */
}

.company-disabled {
    color: #aaa !important;
    opacity: 0.6;
}