﻿/* SealBrowse CSS ------------------ */

.seal-selector .selector-title {
    padding: 5px;
    font-size: 1.1rem;
    font-weight: 600;
}

    .seal-selector .selector-title value {
    }

    .seal-selector .selector-title .quickship {
        color: #00477A !important;
    }


.seal-selector .selector-categories {
    background-color: #E5E4E2;
}

.seal-selector .nav-breadcrumb {
    font-weight: bold !important;
    font-size: 1rem;
    padding-top: 0px !important;
}

.seal-selector .selector-categories .nav-item {
    padding: 5px 5px 5px 10px;
}

    .seal-selector .selector-categories .nav-item:hover {
        color: var(--bs-primary);
    }

    .seal-selector .selector-categories .nav-item.active {
    }

    .seal-selector .selector-categories .nav-item.first {
    }

    .seal-selector .selector-categories .nav-item.parent {
        background-color: wheat;
        font-weight: bold;
        /* width: 98%; */
        border-radius: 5px;
        border: 1px solid whitesmoke;
    }

    .seal-selector .selector-categories .nav-item a {
        display: inline-block;
        padding-left: 5px;
        padding-right: 5px;
    }

.seal-selector .selector-categories .nav-parent {
    font-weight: bold !important;
    font-size: 1.1em;
}

.seal-selector .selector-label {
    font-size: 1.1rem;
}

.seal-selector .selector-seals {
    gap: 10px;
    justify-content: start;
    align-content: start;
}

    .seal-selector .selector-seals .item-wrapper {
        height: 140px;
        width: 140px;
        border: 1px solid var(--bs-gray-300);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

        .seal-selector .selector-seals .item-wrapper .style {
            position: absolute;
            bottom: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 50%;
            font-weight: 500;
            white-space: nowrap;
            color: #2874A6;
            left: 5px;
        }

        .seal-selector .selector-seals .item-wrapper .size {
            position: absolute;
            bottom: 0;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 50%;
            font-weight: 500;
            white-space: nowrap;
            color: #2874A6;
            right: 5px;
        }

        .seal-selector .selector-seals .item-wrapper .style:hover {
            max-width: 100% !important;
        }

        .seal-selector .selector-seals .item-wrapper .size:hover {
            max-width: 100% !important;
        }

        .seal-selector .selector-seals .item-wrapper .info {
            position: absolute;
            bottom: 0;
            right: 0;
            margin-right: 10px;
            margin-bottom: 10px;
            visibility: hidden;
            color: var(--bs-gray-700);
        }

        .seal-selector .selector-seals .item-wrapper:hover {
            border-color: var(--bs-primary) !important;
            cursor: pointer;
        }

            .seal-selector .selector-seals .item-wrapper:hover .info {
                visibility: visible;
            }

    .seal-selector .selector-seals a {
        text-decoration: none;
    }

    .seal-selector .selector-seals .item {
    }

        .seal-selector .selector-seals .item img {
            width: 100%;
            height: 100%;
            max-width: 100px;
            max-height: 100px;
        }

        .seal-selector .selector-seals .item .style {
            font-weight: bold;
        }

            .seal-selector .selector-seals .item .style:hover {
                color: var(--bs-primary);
            }

    .seal-selector .selector-seals div[data-overlayscrollbars-viewport] {
        flex-direction: row !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 10px !important;
        align-content: start !important;
    }
