/* HEADER CAT BOX */
#letter-box .side {position:absolute;left:0;width: 90px;top:0;bottom:0;background: #f5f5f5;border-radius: 12px 0 0 12px;overflow: hidden;}
#letter-box .side .wrap {position:absolute;top:0;left:0;right:0;bottom: 0;overflow-y:auto;}
#letter-box .box {position:absolute;right:0;top:0;width: calc(100% - 90px);bottom:0;background:#fff;padding: 20px 10px 20px 20px;border-radius: 0 12px 12px 0;overflow-y:auto;}
#letter-box .box a.cat1 {float:left;clear:both;}
#letter-box .side a.cat1 {float:left;clear:both;width:100%;padding: 15px 20px;border-bottom: 1px solid #ddd;position:relative;margin: 0;}
#letter-box .side a.cat1:hover {cursor:pointer;background: #dadada;}
#letter-box .cat1 > div {   padding: 3px;box-shadow:none; margin: 6px auto; text-align: center;overflow: hidden; transform: scale(1); transition: 0.1s;}
#letter-box .box .cat1 h3 {float:left;font-size: 21px;font-weight:bold;clear:none;width: auto;line-height:20px;}
#letter-box .side .cat1 h3 {position:relative;z-index:3;float:left;font-size: 17px;text-align: center;color: #111;clear:none;width: 100%;margin:0;}
#letter-box .side .cat1 span {display:none;position:absolute;z-index:1;left:0;top: 0;right:0;bottom: 0px;}
#letter-box .side .cat1.active span {display:block;}
#letter-box .side .cat1:not(.active):hover h3 {color:#444;}
#letter-box .sub-box {/* float:left; *//* clear:both; */width:100%;margin: 0px 0 10px 0;padding: 0;}
#letter-box .sub-box:last-child {margin-bottom: 80vh;}
#letter-box .sub-box:empty {display:none;}
#letter-box .sub-box li {/* display: flex; */float: left;width: 100%;align-content: center;}
#letter-box .sub-box li a {float:left;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#666;font-size:15px;line-height: 18px;}
#letter-box .sub-box li a:hover {text-decoration:underline;}
#letter-box .sub-box li span {color: #c7c7c7;font-size: 15px;line-height: 18px;margin-left: 7px;}
#letter-box .box .cat1 {cursor:default;}
#letter-box .side .wrap::-webkit-scrollbar {box-shadow: none;width: 1px;}
#letter-box .box::-webkit-scrollbar {box-shadow: none;width: 8px;background:rgba(0,0,0,0.02);}
#letter-box .box::-webkit-scrollbar-thumb {border-radius:100px;background-color: rgba(0,0,0,0.3);background-clip: initial;box-shadow: none;}
#letter-box .box::-webkit-scrollbar-thumb:hover {background-color: rgba(0,0,0,0.6);}

/* XMODAL */
div.xmodal {background:#fff;position:fixed;width: 540px;height: 580px;top:50%;left:50%;border-radius: 12px;transform: translate(-50%, -50%);max-width: calc(100% - 20px);max-height: calc(100% - 20px);z-index:995;box-shadow: 0 5px 30px rgb(0 0 0 / 70%);}
div.xmodal.location, div.xmodal.pattern, div.xmodal.price {width:460px;}
!div.xmodal .xmodal-inside {overflow:hidden;position: absolute;top: 0;bottom: 0;left: 0;right: 0;border-radius: 12px;}
div.xmodal .xclose {position:absolute;display: none;right: 15px;background: #f0f2f7;top: 10px;width:36px;height:36px;z-index:5;transition:0.2s;cursor:pointer;border-radius:6px;padding:10px;}
div.xmodal .xclose svg {fill:#999;width:16px;height:16px;transition:0.2s;}
div.xmodal .xclose:hover svg {fill:#555;}
div.xmodal .xclose:hover {background:#eceef5;-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1);}
div.xmodal .xclose-alt {position:absolute;top:-7px;right: -55px;width: 50px;height: 50px;border-radius:6px;cursor:pointer;transition:0.2s;display:flex;}
div.xmodal .xclose-alt:hover {transform:scale(1.2);}
div.xmodal .xclose-alt svg {margin:auto;color:#fff;width: 40px;height: 40px;}
div.xmodal .head {display:block;width:100%;font-size:20px;font-weight:bold;color:#171717;padding: 16px 20px;line-height:1.2;}
div.xmodal .subhead {display:block;width:100%;font-weight:600;color:#171717;margin-top:-8px;line-height:1.2;padding: 0px 20px 16px 20px;border-bottom:1px solid #ccc;}

#overlay {position:fixed;top:0;left:0;bottom:0;right:0;z-index:98;display:none;backdrop-filter: blur(4px);}
#overlay.white {background:rgba(255,255,255,0.5);}
#overlay.black {background: rgba(0,0,0,0.5);}

/* MOBILE LAYOUT */
@media screen and (max-width: 767px) {
  div.xmodal {width:auto;height:auto;top:0;left:0;bottom:0;right:0;border-radius:0;margin:0;transform:none;max-width:100%; max-height:100%;}
  div.xmodal .xclose {display:block;}
  div.xmodal .xclose-alt {display:none;}
  
  
}

@media screen and (max-width: 440px) {
  div.xmodal.category .xclose {right: 10px;}
  
}

html[mode="dark"] #showcase-box {background-color:var(--mb-color11);}

/* RTL */
html[dir="rtl"] .svi-show-saved .svi-count {margin-left:0;margin-right:3px;}
html[dir="rtl"] .svi-save-btn .svi-icon .svi-count {left:-4px;right:auto;}