[data-bs-theme=light] {
    --color-pagetitle: #cab57b;
    --color-pagetitle-secondary: #cab57b;
    --bg-product-category: #102445;
    --bg-product-category-active: #2b3e6c;
    --color-product-category-icon: #3d4c65;
    --color-product-category-title: white;
    --color-product-category-description: #6d84a6;
    --color-carousel-indicator: #2a2c2a;
    --color-product-title: #003366;
    --bg-download: #bc9a63;
    --color-download: white;
}

body {
    background: var(--bg-main) url(/Images/bg-nav-product.png) center top/100% 280px no-repeat;
}

header {
    background: var(--bg-nav) url(/Images/bg-nav-product-small.png) center top/100% 80px no-repeat;
}

    header nav {
        background-color: transparent;
    }

main .PageTitle {
    color: var(--color-pagetitle);
}

main .PageSecondarytitle {
    color: var(--color-pagetitle-secondary);
}

main #divProductList a.Image,
main #divProduct a.Image {
    background-repeat: no-repeat;
    background-position: center;
    /*background-size: 100% 100%;*/
    background-size: contain;
}

main #divProduct .card-title a.title {
    color: var(--color-product-title);
}

main #divProductList a.Image:hover,
main #divProduct a.Image:hover {
    transform: scale(1.1);
    transition: all .2s linear;
}

@media (min-width: 0px) {
    main #divProduct .detail {
        --bs-rows: 1;
        --bs-columns: 1;
        --bs-gap: 0.5em;
    }
    main div.grid-category .g-col-1 {
        min-width: 180px;
    }
}

@media (min-width: 576px) {
}

@media (min-width: 992px) {
    main #divProduct .detail {
        --bs-rows: 1;
        --bs-columns: 10;
        --bs-gap: 0.5em;
    }
    main div.grid-category .g-col-1 {
        min-width: 226px;
    }
}

main #divProductList div.TitleMargin,
main #divProduct div.TitleMargin {
    height: 100px;
}

main #divProductList .grid-category,
main #divProduct .grid-category {
    --bs-rows: 1;
    --bs-columns: 5;
    --bs-gap: 0.1em;
}

main #divProductList .Card-Product-Category,
main #divProduct .Card-Product-Category {
    background-color: var(--bg-product-category);
    min-width: 180px;
    min-height: 100px;
}

    main #divProductList .Card-Product-Category.active,
    main #divProduct .Card-Product-Category.active {
        background-color: var(--bg-product-category-active);
    }

    main #divProductList .Card-Product-Category svg, main #divProduct .Card-Product-Category svg {
        fill: var(--color-product-category-icon);
    }

        main #divProductList .Card-Product-Category svg:hover {
            transform: scale(1.1);
            transition: all .2s linear;
        }

    main #divProductList .Card-Product-Category .card-title a,
    main #divProductList .Card-Product-Category .description a,
    main #divProduct .Card-Product-Category .card-title a,
    main #divProduct .Card-Product-Category .description a {
        text-decoration: none;
    }

        main #divProductList .Card-Product-Category .card-title a:hover,
        main #divProductList .Card-Product-Category .description a:hover,
        main #divProduct .Card-Product-Category .card-title a:hover,
        main #divProduct .Card-Product-Category .description a:hover {
            text-decoration: underline;
        }

    main #divProductList .Card-Product-Category .card-title a,
    main #divProduct .Card-Product-Category .card-title a {
        font-size: 0.9em;
        color: var(--color-product-category-title);
    }

    main #divProductList .Card-Product-Category .description,
    main #divProduct .Card-Product-Category .description {
        font-size: 0.7em;
    }

        main #divProductList .Card-Product-Category .description a,
        main #divProduct .Card-Product-Category .description a {
            color: var(--color-product-category-description);
        }

main #divProductList .Card-Product a.Image,
main #divProduct .Card-Product a.Image {
    min-height: 110px;
}

main #divProductList .Card-Product .title,
main #divProduct .Card-Product .title {
    color: var(--color-product-title);
    text-decoration: none;
    white-space: nowrap;
}

    main #divProductList .Card-Product .title:hover,
    main #divProduct .Card-Product .title:hover {
        text-decoration: underline;
    }

main #divProductList .Card-Product .model,
main #divProduct .Card-Product .model {
    color: var(--color-product-model);
    text-decoration: none;
    white-space: nowrap;
}

main #divProductList .Card-Product .description,
main #divProduct .Card-Product .description {
    color: var(--color-product-description);
    overflow: hidden;
}

main #divProduct #divProductPictures {
    border: solid 1px #dadada;
    height: 320px;
}

    main #divProduct #divProductPictures .carousel-indicators button {
        background-color: var(--color-carousel-indicator);
    }

    main #divProduct #divProductPictures .carousel-control-prev svg,
    main #divProduct #divProductPictures .carousel-control-next svg {
        fill: var(--color-carousel-indicator);
    }

main #divProduct .download .input-group-text {
    background-color: var(--bg-download);
}

    main #divProduct .download .input-group-text svg {
        fill: var(--color-download);
    }

    main #divProduct .download .input-group-text a {
        color: var(--color-download);
    }

article {
    line-height: 2em;
}