﻿/* panelBrowse CSS ------------------ */

.panel-selector .selector-title {
    padding: 5px;
    font-size: 1.1rem;
    font-weight: 600;
}

    .panel-selector .selector-title value {
    }

    .panel-selector .selector-title .quickship {
        color: #00477A !important;
    }


.panel-selector .selector-categories {
    background-color: #E5E4E2;
}

.panel-selector .nav-breadcrumb {
    font-weight: bold !important;
    font-size: 1rem;
    padding-top: 0px !important;
}

.panel-selector .selector-categories .nav-item {
    padding: 5px 5px 5px 10px;
}

    .panel-selector .selector-categories .nav-item:hover {
        color: var(--bs-primary);
    }

    .panel-selector .selector-categories .nav-item.active {
    }

    .panel-selector .selector-categories .nav-item.first {
    }

    .panel-selector .selector-categories .nav-item.parent {
        background-color: wheat;
        font-weight: bold;
        /* width: 98%; */
        border-radius: 5px;
        border: 1px solid whitesmoke;
    }

    .panel-selector .selector-categories .nav-item a {
        display: inline-block;
        padding-left: 5px;
        padding-right: 5px;
    }

.panel-selector .selector-categories .nav-parent {
    font-weight: bold !important;
    font-size: 1.1em;
}

.panel-selector .selector-label {
    font-size: 1.1rem;
}

.panel-selector .selector-panels {
    gap: 10px;
    justify-content: start;
    align-content: start;
}

    .panel-selector .selector-panels .item-wrapper {
        height: 140px;
        width: 140px;
        border: 1px solid var(--bs-gray-300);
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        background: #F4F4F4;
        opacity: 1;
        transition: opacity 0.2s;
    }

        .panel-selector .selector-panels .item-wrapper.hidden {
            display: none !important;
            opacity: 0;
        }

        .panel-selector .selector-panels .item-wrapper .info {
            position: absolute;
            bottom: 0;
            right: 0;
            margin-right: 10px;
            margin-bottom: 10px;
            visibility: hidden;
            color: var(--bs-gray-700);
        }

        .panel-selector .selector-panels .item-wrapper:hover {
            border-color: var(--bs-primary) !important;
            cursor: pointer;
        }

            .panel-selector .selector-panels .item-wrapper:hover .info {
                visibility: visible;
            }


    .panel-selector .selector-panels a {
        text-decoration: none;
    }

    .panel-selector .selector-panels .item {
    }

        .panel-selector .selector-panels .item .item-text {
            width: 100% !important;
            white-space: normal !important;
            overflow-wrap: anywhere !important;
            text-align: center !important;
            padding: 5px;
        }

        .panel-selector .selector-panels .item img {
            width: 100%;
            height: 100%;
            max-width: 100px;
            max-height: 100px;
        }

        .panel-selector .selector-panels .item .style {
            font-weight: bold;
        }

            .panel-selector .selector-panels .item .style:hover {
                color: var(--bs-primary);
            }

    .panel-selector .selector-panels 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;
    }
