/* manufacturing-tile-styles.css */
.manufacturing-tile {
    display: block;
    margin-bottom: 20px; /* Add spacing between tiles */
}

.manufacturing-tile .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    min-height: 200px; /* Set a fixed minimum height */
    background-color: #001e31; /* Tile background color */
}

.manufacturing-tile .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.manufacturing-tile .content p {
    margin: 3px 0;
    color: #FFFFFE;
}

.manufacturing-tile .image {
    max-width: 200px;
    height: auto;
}

/* Styles for finite orders (progress bar) */
.manufacturing-tile .progress-bar-container {
    width: 90%;
    background: #f3f3f3;
    border: 1px solid #ccc;
    border-radius: 5px;
    overflow: hidden;
    height: 20px; /* Fixed height for progress bar */
    margin: 20px auto;
}

.manufacturing-tile .progress-bar {
    height: 100%;
    background-color: #2b67af;
    width: 0; /* Default width, will be overridden by inline style */
    transition: width 0.3s ease; /* Smooth transition for progress bar */
}

/* Styles for infinite orders (GIF) */
.manufacturing-tile .infinity-gif-container {
    width: 90%;
    margin: 20px auto;
    text-align: center; /* Center the GIF horizontally */
}

.manufacturing-tile .infinity-gif {
    width: 100px; /* Set a smaller width for the GIF */
    height: auto; /* Maintain aspect ratio */
}

.manufacturing-tile .progress-text {
    text-align: center;
    margin-top: 10px;
    color: #FFFFFE;
}

.manufacturing-tile .no-order-message {
    color: #FFFFFE; /* Black font color */
    text-align: center; /* Center-align the message */
    margin: 20px 0; /* Add some margin for spacing */
}