#flowBoxes {
    margin:auto;
    /* padding:20px; */
    display: flex;
    padding-right:20px;

}
#flowBoxes div {
    display:inline-block;
    position:relative;
    height:26px;
    line-height:26px;
    padding:0 20px;
    border:1px solid #d3d7e4;
    margin-right:4px;
    background-color:#d3d7e4;
    display: inline-flex; /* Use inline-flex for alignment */
    align-items: center;
}

/* Adjust font size for smaller screens */
@media (max-width: 700px) {
    #flowBoxes div {
        font-size: 12px; /* Larger percentage for smaller screens */
        padding: 0 12px 0 15px; /* Reduce padding */
    }
}

/* Further adjustments for very small screens */
@media (max-width: 500px) {
    #flowBoxes div {
        font-size: 3vw; /* Larger percentage for very small screens */
        padding: 0 12px 0 15px; /* Reduce padding */
    }
}

/* Adjust padding for very small screens to maintain shape */
@media (max-width: 400px) {
    #flowBoxes div {
        font-size: 3vw; /* Larger percentage for very small screens */
        padding: 0 12px 0 15px; /* Reduce padding */
    }
}





#flowBoxes div.wfright:after{
    content:'';
    border-top:1px solid #d3d7e4;
    border-right:1px solid #d3d7e4;
    width:18px;
    height:18px;
    position:absolute;
    right:0;
    top:-1px;
    background-color:#d3d7e4;
    z-index:60;

    -webkit-transform: translate(10px,4px) rotate(45deg);
       -moz-transform: translate(10px,4px) rotate(45deg);
        -ms-transform: translate(10px,4px) rotate(45deg);
         -o-transform: translate(10px,4px) rotate(20deg);
            transform: translate(10px,4px) rotate(45deg);
}

#flowBoxes div.wfleft:before{
    content:'';
    border-top:1px solid #d3d7e4;
    border-right:1px solid #d3d7e4;
    width:18px;
    height:18px;
    position:absolute;
    left:0;
    top:-1px;
    background-color:white;
    z-index:50;

    -webkit-transform: translate(-10px,4px) rotate(45deg);
       -moz-transform: translate(-10px,4px) rotate(45deg);
        -ms-transform: translate(-10px,4px) rotate(45deg);
         -o-transform: translate(-10px,4px) rotate(20deg);
            transform: translate(-10px,4px) rotate(45deg);
}
#flowBoxes .wfactive{
    background-color:#009ef7;
    border-color:#009ef7;
    font-weight: bold;
    color:white;
}
#flowBoxes .wfcancelled{
    background-color:#f1416c;
    border-color:#f1416c;
    font-weight: bold;
    color:white;
}
#flowBoxes div.wfactive:after{
    background-color:#009ef7;
    border-color:#009ef7;
}
#flowBoxes div.wfcancelled:after{
    background-color:#f1416c;
    border-color:#f1416c;
}


/* table_progress bar */
.table_progress {
    height: 4px;
    width: 100%;
    border-radius: 2px;
    background-clip: padding-box;
    overflow: hidden;
    position: fixed;
    /* z-index: 998; */
}

.table_progress {
    opacity: 0;
}

.htmx-request .table_progress {
    opacity: 1;
}
.htmx-request.table_progress {
    opacity: 1;
}

.table_progress .indeterminate {
    background-color: #009ef7;
}

.table_progress .indeterminate:before {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
    animation: indeterminate 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
.table_progress .indeterminate:after {
    content: '';
    position: absolute;
    background-color: inherit;
    top: 0;
    left: 0;
    bottom: 0;
    will-change: left, right;
    -webkit-animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    animation: indeterminate-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite;
    -webkit-animation-delay: 1.15s;
    animation-delay: 1.15s;
}

@keyframes indeterminate {
    0% {
        left: -35%;
        right: 100%;
    }
    60% {
        left: 100%;
        right: -90%;
    }
    100% {
        left: 100%;
        right: -90%;
    }
}

@keyframes indeterminate-short {
    0% {
        left: -200%;
        right: 100%;
    }
    60% {
        left: 107%;
        right: -8%;
    }
    100% {
        left: 107%;
        right: -8%;
    }
}



.tiny-select {
    font-size: 12px; /* Smaller font size */
    padding: 2px 5px; /* Reduced padding */
    height: 30px; /* Optionally adjust height */
    -webkit-appearance: none; /* for Chrome, Safari */
    -moz-appearance: none;    /* for Firefox */
    appearance: none;        /* for modern browsers */
    background-image: none;  /* remove default arrow background image */
    text-indent: 1px;        /* optional, to fix alignment issues */
    text-overflow: '';       /* optional, to fix alignment issues */
    vertical-align: text-bottom;
}