@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');


body{
    /*font-family: Arial, Helvetica, sans-serif; */

    font-family: "Roboto", sans-serif;
}

#top{
    background-color: var(--theme-ruby-top);
}


.btn-left-menu{
    cursor:pointer;
    text-align: center;
    color:var(--theme-ruby-colors-primary-light)
}
.btn-left-menu i{
    border: 1px solid var(--theme-ruby-colors-primary);
    border-radius: 50%;
    width:40px;
    height:40px;
    line-height: 40px;
}

.topmenu{
    padding:8px 16px ;
    background-color: var(--theme-ui-colors-light);
}

.topmenu .infobox{
    float:left;
    color:var(--theme-ui-colors-dark);
    font-size: 1.3rem;
    line-height: 40px;
}
.order-support{
    float:right;
    font-weight: bold;
}
.order-support.support-footer{
    float:left;
    font-weight: bold;
}
.order-support.support-footer::after{
    content:'';
    clear:both;
}
.order-support > div{
    float:left;
}
.order-support .sp-icon i{
    color:darkgreen;
    font-weight: bold;
    font-size:22px;
    padding:8px;
}

.social-list li{
    text-indent: -9999;
    padding:0;
    float:left;
    margin-right:6px;
    height:45px;
}
.social-list li a{
    text-indent: -9999;
}
.iconList{
    background:url(../image/social-icons.png);
    min-width: 25px;
    min-height: 25px;
    text-indent: -99999;
}
.iconList.iconIns,
.iconList.iconYt,
.iconList.iconTw,
.iconList.iconFa{
    width: 25px;
    height: 25px;
    display: inline-block;
}
.iconList.iconIns{
    background-position: 60px 0;
}
.iconList.iconIns:hover{
    background-position: 60px 25px;
}
.iconList.iconYt{
    background-position: 175px 0;
}
.iconList.iconYt:hover{
    background-position: 175px 25px;
}
.iconList.iconTw{
    background-position: 203px 0;
}

.iconList.iconTw:hover{
    background-position: 203px 25px;
}
.iconList.iconFa{
    background-position: 0 0;
}

.iconList.iconFa:hover{
    background-position:0 25px;
}

header .header-action-container{
    display:flex;    
    align-items: center; 
    justify-content: space-between;
    height:100%
}

header .actions{
    display: flex;
    justify-content: flex-end;
}


header .actions .action-ui{
    display:inline-block;
    position: relative;
    border:2px solid var(--theme-ui-colors-belight);
    padding: 8px 14px 8px 8px;
    border-radius:4px;
    flex: 1 1 auto;
    margin-left: 4px;
    height: 60px;
}
header .actions button:focus{
    outline: none;
}
header .actions .action-ui.action-ui-primary{
    background-color: var(--theme-ui-colors-primary);
}
.open .action-ui.action-ui-primary{
    background-color:var(--theme-ui-colors-box) !important;
    color:black !important;
}


header .actions .action-ui .action-ui-icon{
    position: absolute;
    line-height: 35px;
    /* float: right; */
    right: 17px;
    top: 14.5px;
}

header .actions .action-ui .action-ui-icon i{
    font-size:20px;
    color:var(--theme-ruby-colors-primary-light);
}
header .actions .action-ui.action-ui-primary .action-ui-icon i{
    color:var(--theme-ruby-colors-primary-light);
}
header .actions .action-ui .action-ui-txt{
    padding-right:30px;
}

header .actions .action-ui .action-ui-txt .txt-title{
    font-weight: 700;
    color:var(--theme-ui-colors-cross-v2);
    font-size:16px;
    text-overflow: ellipsis; 
    overflow: hidden; 
    white-space: nowrap;
}
header .actions .action-ui.action-ui-primary .action-ui-txt .txt-title{
    /*color:var(--theme-ui-colors-light);*/
}

header .actions .action-ui .action-ui-txt .txt-subtitle{
    color:rgb(42, 42, 46);
    font-size: 12px;
}

header .actions .action-ui.action-ui.action-ui-primary .action-ui-txt .txt-subtitle{
    /*color:var(--theme-ui-colors-light);*/
}

.desktop-container{
    background:var(--theme-ui-colors-cross);
    border-top: 2px solid var(--theme-ruby-colors-primary-light);
}
.desktop-container .desktop-menu{
    display: flex;
    justify-content: space-between;
}
.desktop-container .desktop-menu ul{
    list-style-type: none;
    margin: 0;
    padding: 0;
    height:100%
}
.desktop-container .desktop-menu ul li{
    display: inline-block;
    color: white;
    font-size: 15px;
    font-family: Arial;
    padding: 12px 10px 12px 5px;
    height:100%
}
.desktop-container .desktop-menu ul li i{
    font-size:22px;
}
.desktop-container .desktop-menu ul a{
    color:currentColor;
    text-decoration: none;
    color: #252121;
}
.desktop-container .desktop-menu ul li:hover{
    background: var(--theme-ruby-colors-primary-light);
}
.desktop-container .desktop-menu ul li:hover a {
    color: white;
}
.desktop-container .desktop-menu .social-media-list ul li:hover{
    background:var(--theme-ruby-colors-primary-light)
}


.visible-search{
    position:absolute;
    right:0;
    top:0;
    bottom:0;
    height:100%;
    padding:8px;
    cursor:pointer;
    color:var(--theme-ruby-colors-primary)
}
header .search.active .visible-search{
    display: none;
}
header .search.active{
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 98;
    background-color: #f8f8f8;
    opacity: 0.9;
    width: 100%;
    height: 100%;
}
header .search.active .mobile-search-icon{
    display:none!important;
}
header .search .mobile-search-icon{
    display:none;
    cursor:pointer;
    border-radius: 50%;
    height: 44px;
    width: 44px;
    padding: 0;
    position: relative;
    text-align: center;
    border: 2px solid var(--theme-ui-colors-belight);
}
header .search .mobile-search-icon i{
    line-height: 44px;
}
header .search input{
    box-sizing: border-box;
    margin: 0px 0px 0px 0.25rem;
    min-width: 0px;
    display: block;
    width: 100%;
    padding: 1.5rem;
    appearance: none;
    font-size: small !important;
    line-height: inherit;
    border-radius: 4px;
    border: none;
    background-color: var(--theme-ruby-top,#e2e8f0);
    color: var(--theme-ui-colors-omegaDark,#718096);
    outline: none;
    height:40px;
}
header .search.active .search-form{
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    background-color: var(--theme-ui-colors-omegaLight,#e2e8f0);
    border-radius: 0.5rem;
    position: relative;
    top: 11rem;
    left: 50%;
    transform: translate(-50%, 0px);
    z-index: 99;
    width: 80vw;
    max-width: 40em;
}
header .search.active .search-box--close {
    display: inherit;
}
.search-box--close {
    box-sizing: border-box;
    min-width: 0px;
    /*position: fixed;
    z-index: 99;
    right: 50%;
    top: 90%;
    transform: translate(50%, -50%);*/
    text-align: center;
    color: var(--theme-ui-colors-dark);
    font-size: 0.875rem;
    display: none;
}
.search-box--close .close-btn {
    margin: 0px;
    appearance: none;
    -webkit-box-pack: center;
    border: 1px solid var(--theme-ui-colors-cross);
    display: inline-block;
    min-width: auto;
    -webkit-box-align: center;
    align-items: center;
    justify-content: space-evenly;
    outline: 0px;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    border-radius: 9999px;
    cursor: pointer;
    transition: all 250ms ease 0s;
    box-sizing: initial;
    color: var(--theme-ui-colors-cross);
    vertical-align: middle;
    width: 24px;
    height: 24px;
    padding: 0.5rem;
    background-color: var(--theme-ui-colors-dark,#edf2);
    
}
.close-text {
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
}


.mobile-show{
    display:none;
}



.draw-menu{
    position:fixed;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    z-index:9999;
    display:none;
    overflow:hidden;
  }
.draw-menu i{
    color: var(--theme-ruby-colors-primary);
}
  .draw-menu.opened{
  }
  .draw-menu .background{
    left:0;top:0;
    width:100%;
    height:100%;
    position:absolute;
    background-color:var(--theme-ui-colors-cross);
    opacity: .5;
    z-index: -1;
    transition: background-color .5s;
  }

 
  .draw-menu .content{
    z-index:1;  
    background-color:#e4e4e4;
    height:100%;
    width:350px;
    position:relative;
    left:-350px;
    transition:all 600ms;
    will-change: transform;

  }
  .draw-menu.opened .content{
    left:0;
  }

  .draw-menu .content .draw--close{
      position:absolute;
      right:25px;
      top:15px;
      font-size:21px;
      color:var(--theme-ui-colors-cross);

        appearance: none;
        -webkit-box-pack: center;
        border: 1px solid #e8d3d3;  
        display: inline-block;
        min-width: auto;
        -webkit-box-align: center;
        align-items: center;
        justify-content: space-evenly;
        outline: 0px;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
        border-radius: 50%;
        cursor: pointer;
        transition: all 250ms ease 0s;
        box-sizing: initial;
        vertical-align: middle;
        width: 24px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        padding:6px;
        text-align: center;
        background-color: var(--theme-ui-colors-omegaLighter,#edf2);
  }
  .draw-menu .content .draw--close:hover{
      background-color:var(--theme-ui-colors-cross);
      color:var(--theme-ui-colors-belight);
  }
  .draw-menu .content .draw-logo{
      text-align:center;
      margin:auto;
      background-color:var(--theme-ui-colors-box);
  }
  .draw-menu .content .draw-logo a img{
      margin:auto auto;
      text-align: center;
  }

  .draw-menu .content .list{
    overflow-y:auto;
    height: calc(100vh - 100px);
  }

  .draw-menu .content .menu_mainpage{
    padding: 16px;
    box-sizing: border-box;
    font-size: 1.7rem;
    color: #474747;
    border-bottom: 1px solid 1px solid #ed6a003b;
    display: block;
  }
  .draw-menu .content .menu_mainpage:hover i{
      color:var(--theme-ui-colors-dark);
  }
  .draw-menu .content .menu_mainpage i {
    font-size: 24px;
    color: var(--theme-ruby-colors-primary);
    /* padding: 6px; */
    }
    .draw-menu .content .draw-title{
        padding: 16px;
        font-size: 1.7rem;
        background-color: var(--theme-ui-colors-background);
    }
    .draw-menu .content .draw-categories{
        background-color:var(--theme-ui-colors-box);
    }
    .draw-menu .content .draw-categories ul{
        list-style-type: none;
        margin: 0;
        padding-left:0;
    }
    .draw-menu .content .draw-categories ul ul{
        padding-left:30px;
    }
    .draw-menu .content .draw-categories ul li{
        color: var(--theme-ui-colors-dark);
        
    }
    .draw-menu .content .draw-categories ul li a{
        padding: 10px 0px;
        color:currentColor;
        display:block;
        padding-left:30px;
        cursor:pointer;
        position:relative;
        text-decoration: none;
        font-size: 1.5rem;
    }
    .draw-menu .content .draw-categories ul li a ~ ul{
        display:none;
    }
    .draw-menu .content .draw-categories ul li a.active ~ ul{
        display:block;
    }
    .draw-menu .content .draw-categories ul ul li a{
        padding-left:15px;
    }
    .draw-menu .content .draw-categories ul li a:hover{
        color:var(--theme-ui-colors-background);
        background-color:var(--theme-ui-colors-cross);
    }
    .draw-menu .content .draw-categories ul li a.caret_down:hover::after{
        filter:invert(1);
    }
    .draw-menu .content .draw-categories ul li .menu-item_active{
        border-bottom: 1px solid #9e9e9e;
        background-color: #f3f3f3;
    }
    .draw-menu .content .draw-categories ul li .active ~ ul{
        background-color:var(--theme-ui-colors-light);
    }
    .draw-menu .content  .caret_down::after,
    .draw-menu .content  .caret_up::after{
        background-position: 50%;
        background-repeat: no-repeat;
        content: "";
        position: absolute;
        right: 10px;
        width: 40px;
        height: 40px;
        top: 1px;
        display: inline-block;
    }
    .draw-menu .content  .caret_down::after{
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595.3 841.9'%3E%3Cpath fill='%23010202' d='M297.7 475.3L157.8 345.7 147 356.4l145.6 135 4.9 4.8.2-.1.1.1 4.9-4.8 145.6-135-10.8-10.7z'/%3E%3C/svg%3E");
    }
    .draw-menu .content  .caret_up::after{
        background-image:  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 595.3 841.9'%3E%3Cpath fill='%23010202' d='M297.6 366.6l139.9 129.6 10.8-10.7-145.6-135-4.9-4.8-.2.1-.1-.1-4.9 4.8-145.6 135 10.8 10.7z'/%3E%3C/svg%3E")
    }

    .display-none{
        display:none;
    }
    #toggleCategories{
        cursor:pointer;
        -moz-user-select: none;
        user-select: none;
        position:relative;
    }
   
  @media only screen and (max-width: 768px) {
    .draw-menu .content{
        width:100%;
        left:-100%!important;
    }
    .draw-menu.opened .content{
        left:0!important;
    }
    .mobile-hide{
        display:none;
    }
  }


.cerezpolitikasi{
    height: 102px;
    width: 340px;
    opacity: 0.8;
    border-radius: 4px;
    background-color: rgb(0, 0, 0);
    z-index: 9999;
    position: fixed;
    left: 20px;
    bottom: 18px;
    display:none;
}
.cerezpolitikasi .b--close{
    color:#fff;
    font-size:20px;
    position: absolute;
    top: 0px;
    right: 0px;
    padding: 8px;
    cursor: pointer;
}
.cerezpolitikasi p{
    font-family: Helvetica;
    font-size: 12px;
    line-height: 1.25;
    text-align: left;
    color: rgb(255, 255, 255);
    padding-top: 24px;
    padding-left: 16px;
    padding-right: 24px;
    margin-bottom: 8px;
}


.whatsapp-button{
    background: var(--theme-ruby-live);
    padding: 8px 14px;
    color: var(--theme-ruby-colors-box);
    font-weight: bold;
    display: block;
    background: var(--theme-ui-colors-dark);
    transition: all 0.3s ease 0s;
    border-radius: 10px;
}
}
.whatsapp-button i{
    color:var(--theme-ui-colors-primary);
    font-weight: bold;
}
.whatsapp-button.mini{
    display:inline-block;
}
.whatsapp-button:focus{
    outline: none;
    text-decoration: none;
}
.whatsapp-button:hover{
    background: var(--theme-ruby-colors-primary);
    color:var(--theme-ui-colors-cross)
}

.index_subtitle{
    padding: 16px;
    background-color: var(--theme-ui-colors-light);
    border-radius: 13px;
    margin-bottom: 10px;
    margin: 20px 0px;
}


header .search .search-form{
    position: relative;
}
header .search .search-form input{
    padding-right:30px;
    
}
header .search.active .search-form input{

    border:1px solid #292929;
}
header .search .search-form button{
    position: absolute;
    right:5px;
    top:5px;
    height:80%;
    border:none;
    padding:8px;
    background-color: var(--theme-ui-colors-omegaLight,#e2e8f0);
    color: var(--theme-ui-colors-omegaDark,#718096);
    display:none;
    border-radius: 50%;
    line-height: 17px;
    color: var(--theme-ruby-colors-primary-light);
    background-color: transparent;
}
header .search.active .search-form button{
    display:block;
}

.box-heading{
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    background-color: var(--theme-ui-box-heading-color);
    border-bottom-width: 0;
    color: rgb(255, 255, 255);
    padding-right: 12px;
    padding-left: 12px;
    border-radius: 3px 3px 0 0;
    line-height: 40px;
    min-height: 40px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
    font-family: "Open Sans";
}

.list-group{
   /* border: 1px solid #2a2b2e;*/
}
.list-group a{
    color:#000;
}
.list-group a i.fa{
    font-weight: bold;
}
.event-button .swiper-button-prev{
    right:30px;
    left:auto;
}
.event-button .swiper-button-next::before,
.event-button .swiper-button-prev::before{
    color: rgb(255 247 0 / 80%);
    font-size: 15px;
}


/*
@media only screen and (max-width: 430px){
    .actions .register,
    .actions .login{
        display:none !important;
    }
}*/

@media only screen and (max-width: 450px) {
    #logo{
        width:140px;
        margin: auto auto;
    }

}

@media only screen and (max-width: 600px) {
  
    .top_header_container{
        display:none;
    }
    /*header .search{
        max-width:100px !important;
    }*/
    header .search.active{
        max-width: 100% !important;
    }

    .cerezpolitikasi{
        left:0;right:0;
        width:100%;
        height:auto;
        bottom:0;
    }

    header .header-action-container{
        background:var(--theme-ruby-top);
        height:50px;
    }
    .form-control.search-input{
        border:1px solid;
    }

    #search {
        margin-bottom: 0px;
    }
    #cart {
        margin-bottom: 0px;
    }
  
}
@media only screen and (min-width: 640px){
    .search-box--close {
        right: 0;
        top: 3rem;
        transform: none;
        margin: 0 !important;
        left: 0;
    }

}
@media only screen and (max-width: 779px){
    .search-input{
     width:200px;   
    }
    .logo-brand{
        display:none!important;
    }
    #logo{
        width:300px;
        margin: auto auto;
    }
    header .actions{
        display:block;
    }
    header .actions .action-ui{
        border-radius: 50%;
        height:44px;
        width:44px;
        padding:0;
        border:1px solid var(--theme-ruby-colors-primary)
    }
    header .actions .action-ui .action-ui-icon{
        line-height: inherit;
        width:100%;
        height:100%;
        line-height: 44px;
        text-align: center;
        position: relative;
    }
    /* reset icon position*/
    header .actions .action-ui .action-ui-icon{
        top:0;
        right:0;
    }

    header .actions .action-ui .action-ui-icon i{
        font-size:15px;
    }
    header .actions .action-ui .action-ui-txt{
        display:none;
    }
    .mobile-show{
        display:block!important;
    }

    .topmenu .infobox{
        line-height: 20px;
    }

}

@media only screen and (max-width: 992px){
  
      header .actions .action-ui .action-ui-icon i{
        font-size:15px;
    }
}
@media only screen and (max-width: 1200px){
    header .search{
        /*max-width:200px;*/
    }
    header .search.active{
        max-width:100%;
    }
    .actions .register,
    .actions .login{
        display:none !important;
    }
}



.swiper-banner{
    bottom:10px !important;
}
.viewport-banner{
    margin-bottom:0px !important;
}

.btn_add-list{

    color: var(--theme-ruby-colors-box) !important;
    width:33% !important;
}
.btn_compare{
    background-color: var(--theme-ui-colors-dark) !important;
    color: var(--theme-ruby-colors-box) !important;
    width:33% !important;
}
.btn_whatsapp{
    width:33% !important;
    background-color: var(--theme-ruby-colors-primary-light) !important;
    font-weight: bold;
}

.border-px{
    /*border: 1px solid var(--theme-ruby-live);*/
}

footer{
        background-color: var(--theme-ui-colors-dark);
}
.sub-footer {
    background: var(--theme-ruby-top);
    padding: 16px;
    color: black;
}

.event-button .swiper-button-next::before,
.event-button .swiper-button-prev::before{
    color: var(--theme-ruby-colors-primary-light);
}

.actions .nav-tabs{
    margin-bottom:0px;
}
.actions .tab-content{
    border: 1px solid var(--theme-ui-colors-belight);
    padding: 21px;
}

.actions .nav.nav-tabs li > a{
color: var(--theme-ui-colors-dark);
    background-color: var(--theme-ui-colors-off);
    margin-right: 0;
    border: 1px solid var(--theme-ui-colors-cross);
}
.actions .nav.nav-tabs li.active > a{
    color: var(--theme-ui-colors-background);
    background-color: var(--theme-ui-box-heading-color);
}
.image-item{
    max-width: 100px;
    display: inline-block;
}
.image-item.active{
    border: 1px solid var(--theme-ruby-colors-primary-light) !important;
    background: #d4d4d4;
}

.product-actions .fa.fa-heart{
    color:var(--theme-ruby-colors-primary-light);
}
.text-primary-ui a{
    color:orange !important;
    opacity:1
}


.social-media-list{
    display: none;
}