@font-face {
    font-family: ss;
    src: url("/fonts/ss.ttf");
}
body{
    font-family: "ss";
}
.error_d{
    direction: rtl;
    text-align: right;
    width: auto;
    height: auto;
    top:50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: wheat;
    position: fixed;
    border-radius: 10px;
    z-index: 5;
}
#chk-close:checked + #error-dialog{
    display: none;
}
.close-error{
    margin-top: 10px;
    margin-right: 10px;
    width: 25px;
    height: 25px;
    background-image: url("../img/close.png");
    background-size: cover;
}
#menu{
    width:100%;
    height: 50px;
    padding: 0;
    margin: 0;
    position: sticky;
    top: 0;
    z-index: 2;
}
#login-status{
    width: 50px;
    height: 50px;
    background-image: url("/img/images.png");
    background-repeat: round;
}
#header{
    width: 100%;
    height: auto;
}
#footer{
    width: 100%;
    height:400px;
    background-color: #00FF00;
}
.ajax-pagination:hover{
    cursor:pointer ;
}
.ajax-btns{
    background-color: black;
}
.file-up{
    display: none;
}
.file-up-label{
    width: 100px;
    height: 50px;
    background-color: #0a58ca;
}
.image-uplode{
    width: 150px;
    height: 150px;
    border: 1px solid gray;
    border-radius: 5px;
}
#main-menu{
    direction: rtl;
    list-style-type: none;
    position: absolute;
    height: auto;
    right: 0;
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
}
.li-main-menu{
    float: right;
    padding: 5px;
    margin: 5px;
    text-align: center;
    border-radius: 5px;
    direction: rtl;
}
.li-under-menu{
    list-style-type: none;
}
#btn-menu{
    background-color: #0a58ca;
    float: right;
    border-radius: 5px;
    margin: 5px;
}

#btn-menu h4{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 5px;
}
#btn-login{

}
.under-menu-link{
    text-decoration: none;
}
.under-menu-ul{
    margin: 0;
    padding: 0;
}
.menu-link{
    color: grey;
    text-decoration: none;
}
.display-none{
    display: none;
}
.xx{
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%, -50%);
    font-size: xx-large;
}

.xx:hover .zz{
    height: 100%;
    background-color: grey;
    transition: 0.2s;
    opacity: 0.5;
}
.cc{
    width: 100%;
    height: auto;
    overflow: hidden;
    display: block;
    position: relative;
}
.bg-img{
    width: 100%;
    height: 100%;
    border-radius: 40px;
}
#login{
    margin: 5px;
}
#ln-st-under{
    width:200px;
    height: 150px;
    background-color: white;
    position: absolute;
    top:50px;
    border-radius: 5px;
    margin-top: 5px;
    margin-left: 5px;
    display: none;
}
#menu-login-bt{
    list-style-type: none;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    text-align: center;
}
#menu-login-bt li,#btn-profile{
    display: block;
    width: 100%;
    height: 20px;
    padding: 30px;
    text-align: center;
}

#logout-btn{
    background: none;
    border:0;
    width: 100%;
    padding: 30px;
}
.image-home-pro{
    width: 100%;
    border-radius: 10px;

}
.product-home-list{
    text-align: center;

}
.product-home-list h4{
    padding: 5px;
}
.category-image-home{
    width:100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    filter: blur(2px);
}
.lnk-menus{
    z-index: 1;
}
.a1{
    position: relative;
}
.undermenu-home-list{
    position: relative;
}
.pl2{

}
.product-home-list-slide{
    margin: 10px;
    text-align: center;
    border-radius: 10px;
}
.header-slider{
    width: 90%;
    overflow: hidden;
    margin: auto;
    border-radius: 10px;

}
.header-link-img img{
    width:100%;
}
.home-swip{
    /*width: 50%;*/
}
@media only screen and (max-width: 600px){
    .li-main-menu {
        width: 100%;
    }
    #main-menu{
        margin-top: 50px;
    }
    #btn-menu{
        position: fixed;
        right: 0;
        z-index: 1;
    }
    .alls{
        display: flex;
        flex-flow: wrap;
    }
    .a1{
        margin:5px;
        width: 100%;
    }
    #login{
        min-width: 90%;
    }
    .undermenu-home-list{
        margin: 10px;
        text-align: center;
    }
    .lnk-menus{
        max-width: 100%;
        min-width: 30%;
    }
    .product-home-list{
        min-width: 50%;
        max-width: 23%;
        margin: 10px;
        text-align: center;

    }
    .swiper-pro{
        width: 100% !important;
    }
}
@media only screen and (min-width: 600px) and (max-width: 767px){
    #btn-menu{
        display: none;
    }
    #main-menu{
        display: block;
    }
    .alls{
        display: flex;
        flex-flow: wrap;
    }
    .a1{
        margin:5px;
        border-radius: 4px;
    }
    #login{
        min-width: 85%;
    }
    .lnk-menus{
        max-width: 100%;
        min-width: 50%;
    }
    .undermenu-home-list{
        margin: 10px;
        text-align: center;
        max-width: 100%;
        min-width: 100%;
    }
    .swiper-pro{
        width: 70% !important;
    }
}
@media only screen and (min-width: 768px) and (max-width:1199px){

    #btn-menu{
        display: none;
    }
    #main-menu{
        display: block;
    }
    .alls{
        display: flex;
        flex-flow: wrap;
    }
    .a1{
        margin:5px;

        border-radius: 4px;
    }
    #login{
        min-width: 50%;
    }
    .lnk-menus{
        max-width: 50%;
        min-width: 30%;
    }
    .product-home-list{
        min-width: 30%;
        max-width: 23%;
        margin: 10px;

    }
    .undermenu-home-list{
        min-width: 45%;
        max-width: 15%;
        margin: 10px;
        text-align: center;
    }
    .swiper-pro{
        width: 60% !important;
    }
}
@media only screen and (min-width: 1200px){
    .lnk-menus{
        max-width: 45%;
        min-width: 33%;
    }
    .a1{
        margin:5px;
    }
    .tit{
        position: absolute;
        left:43%;
        top:40%;
    }
    #login{
        min-width: 30%;
    }
    .product-home-list{
        min-width: 20%;
        max-width: 15%;
        margin: 10px;
        text-align: center;
        border-radius: 10px;
    }
    .txt-menus{
        background-color: #ffd2a0;
        border-radius: 10px;
    }
    .undermenu-home-list{
        min-width: 25%;
        max-width: 15%;
        margin: 10px;
        text-align: center;
    }
    .swiper-pro{
        width: 50% !important;
    }

}