.Catalog .CatalogElementContainer {
    padding: 10px;
}

    .Catalog .CatalogElementContainer .CatalogElement {
        background-color: #ffffff;
        border-radius: 10px;
        margin-bottom: 0px;
        margin-top: 0px;
        padding: 15px 15px 15px 15px;
        width: 100%;
    }

        .Catalog .CatalogElementContainer .CatalogElement .Header {
            border-bottom: solid 0.3px #cccccc;
            margin-bottom: 5px;
            padding-bottom: 5px;
        }

        .Catalog .CatalogElementContainer .CatalogElement .ItemIdTitle {
            color: #565b60;
            font-size: 14px;
            margin-top: 5px;
            opacity: 0.5;
        }

        .Catalog .CatalogElementContainer .CatalogElement .ItemId {
            color: var(--custom-color-1);
            font-size: 20px;
            font-weight: bold;
            text-align: center;
        }

        .Catalog .CatalogElementContainer .CatalogElement .DealIndicator {
            background-color: var(--custom-color-7);
            border-radius: 20px;
            color: #ffffff;
            font-size: 12px;
            margin-top: -30px;
            padding: 10px 0px;
            text-align: center;
            width: 80px;
        }

        .Catalog .CatalogElementContainer .CatalogElement .Details {
            height: 200px;
            overflow-y: auto;
        }

            .Catalog .CatalogElementContainer .CatalogElement .Details .ItemName {
                font-weight: bold;
            }

            .Catalog .CatalogElementContainer .CatalogElement .Details .DetailsTitle {
                font-weight: bold;
            }

            .Catalog .CatalogElementContainer .CatalogElement .Details .TradeNumber {
                font-weight: bold;
            }

        .Catalog .CatalogElementContainer .CatalogElement .Footer {
            height: 40px;
            margin-top: 10px;
        }

            .Catalog .CatalogElementContainer .CatalogElement .Footer .ThumbnailImage {
            }

                .Catalog .CatalogElementContainer .CatalogElement .Footer .ThumbnailImage img {
                    border: solid 1px #dddddd;
                    border-radius: 8px;
                    box-shadow: 2px 2px 3px rgba(0,0,0,0.16);
                    height: 65px;
                }

        .Catalog .CatalogElementContainer .CatalogElement .Footer .OEInfo {
            cursor: pointer;
            text-align: left;
            text-decoration: underline;
        }


    .Catalog .CatalogElementContainer .Part2 {
        margin-bottom: 40px;
    }

    .Catalog .CatalogElementContainer .Button {
        margin-top: 10px;
    }


    .Catalog .EW .CatalogElementContainer .CatalogElement .Details {
        height: 74px;
    }

.Catalog .EW .CatalogElementContainer .CatalogElement .ItemName {
    height: 40px;
}

        .Catalog .EW .CatalogElementContainer .CatalogElement .Details .ItemImageIndicator {
            font-size: 24px;
            text-align: left;
        }

            .Catalog .EW .CatalogElementContainer .CatalogElement .Details .ItemImageIndicator span {
                cursor: pointer;
            }

                .Catalog .EW .CatalogElementContainer .CatalogElement .Details .ItemImageIndicator span:hover {
                    opacity: 0.5;
                }


.Catalog .KH .CatalogElementContainer .Button,
.Catalog .KH .CatalogElementContainer .NonLedicoItem {
    margin-top: 20px;
}


::-webkit-scrollbar {
    width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
    background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: #888;
}

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: #555;
    }

.deal-progress-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffb300; /* warm yellow; can be customized */
    color: #000;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    margin-top: -4px;
    margin-right: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.20);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

    .deal-progress-badge:hover {
        transform: scale(1.12);
        box-shadow: 0 3px 6px rgba(0,0,0,0.30);
    }

    .deal-progress-badge i {
        pointer-events: none;
    }



/* Tooltip container */
.deal-tooltip {
    background: #ffffff; /* Light background */
    border: 1px solid #ddd; /* Soft border */
    border-radius: 8px;
    padding: 10px 12px;
    direction: rtl;
    text-align: right;
    max-width: 260px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}

    /* Deal name header */
    .deal-tooltip .deal-name {
        direction: ltr; /* Force LTR for name */
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end; /* Align visually to the right in RTL */
        font-size: 16px;
        font-weight: 700;
        color: #2a5db0; /* Nicer blue tone */
        margin-bottom: 8px;
    }

    /* Each deal-name word */
    .deal-tooltip .deal-name-word {
        display: flex;
        flex-wrap: wrap;
        margin-left: 4px;
    }

        /* Each character for LTR-safe rendering */
        .deal-tooltip .deal-name-word span {
            display: inline-block;
            direction: ltr;
        }

    /* Current quantity label */
    .deal-tooltip .deal-qty {
        color: #444;
        font-size: 13px;
        margin-bottom: 6px;
    }

    /* Steps section */
    .deal-tooltip .deal-steps div {
        color: #555;
        font-size: 13px;
        margin-bottom: 4px;
    }

.DealRemarkText {
    display: flex;
    flex-direction: column;
}

.DealRemarkLine {
    display: flex;
    flex-wrap: wrap;
}