.facetBox {
            overflow-x: hidden; 
            overflow-y: auto;
            /* width: 220px; */
            width: 100%;
            max-height: 290px; 
            padding: 5px 5px 5px 5px; 
            border-style: solid; 
            border-width: 1px; 
            border-color: #e9e9e9;
            margin-left: -4%;
        }
        .facetTitle {
            font-family: verdana;
            font-size: 10pt;
            color: #333333;
            font-weight: bold;
            white-space: nowrap;
        }

        .facetItem, a.facetItem:link,a.facetItem:visited,a.facetItem:active,a.facetItem:hover {
            font-family: verdana;
            font-size: 9pt;
            color: #333333;
            font-weight: normal;
            line-height:18px;
            white-space: nowrap;
            cursor: hand;
            cursor: pointer;
            display: inline-block;
            margin-left: 2px;
        }   
        a.facetItem:link,a.facetItem:visited,a.facetItem:active,a.facetItem:hover {
            text-decoration: none;    
        }
        .facetItemSelected {
            width: 220px;
            line-height: 18px;
            color: #333333;
            background-color: #e9e9e9;
            font-family: verdana;
            font-size: 9pt;
            font-weight: normal;
            cursor: hand;
            cursor: pointer;
            display: inline-block;
        }

        .tooltiptext {
            visibility: hidden;
            width: 120px;
            background-color: #f0f0f0;
            color: #000000;
            border-color: #606060;
            border-width: 1px;
            border-style: solid;
            text-align: center;
            padding: 5px 0;
            border-radius: 5px;
 
            position: absolute;
            z-index: 1;
            margin-left: 10px;
            margin-top: -28px;
            opacity: 1;
        }

        .facetHeader {
            width: 230px;
            background-color: #f0f0f0;
            color: #000000;
            border-style: solid; 
            border-width: 1px; 
            border-color: #e9e9e9;
            text-align: center;
            padding: 5px 0;
            font-family: verdana;
            font-weight: normal;
            font-size: 11pt;
            line-height: 1.5;
        }

        .facetColorBox {
            width: 32px;
            height: 32px;
            margin: 2px 2px 2px 2px;
            border-style: solid;
            border-width: 1px;
            border-color: #000000;
            border-radius: 3px;
            display: inline-block;
            cursor: hand;
            cursor: pointer;
            white-space: nowrap;
        }
        .facetColorBoxSelected {
            width: 31px;
            height: 31px;
            margin: 2px 2px 2px 2px;
            border-style: solid;
            border-color: #000000;
            border-width: 3px;
            border-radius: 3px;
            display: inline-block;
            cursor: hand;
            cursor: pointer;
            white-space: nowrap;
        }   
        .facetColorBox:hover .tooltiptext {
            visibility: visible;
        }
        .facetSizeBox {
            font-family: verdana;
            font-size: 7.0pt;
            font-weight: normal;
            width: 32px;
            height: 32px;
            margin: 2px 1px 2px 1px;
            border-style: solid;
            border-width: 1px;
            border-color: #000000;
            border-radius: 3px;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            line-height: 30px;
            letter-spacing: -1px;
            cursor: hand;
            cursor: pointer;
        }
        .facetSizeBoxSelected {
            font-family: verdana;
            font-size: 7pt;
            font-weight: normal;
            width: 32px;
            height: 32px;
            margin: 2px 1px 2px 1px;
            border-style: solid;
            border-color: #000000;
            border-width: 1px;
            border-radius: 3px;
            background-color: #c0c0c0;
            display: inline-block;
            text-align: center;
            vertical-align: middle;
            line-height: 30px;
            letter-spacing: -1px;
            cursor: hand;
            cursor: pointer;
        }
        .facetColorNameBox {
            width: 50px;
            height: 20px;
            margin: 5px 5px 5px 5px;
            border-style: solid;
            border-width: 1px;
            border-color: #000000;
            float: left;
        }
        .facetColorNameBoxSelected {
            width: 50px;
            height: 20px;
            margin: 2px 2px 2px 2px;
            border-style: solid;
            border-color: #000000;
            border-width: 3px;
            float: left;
        }