* {
  box-sizing: border-box;
}
@font-face {
  font-family: "BTitr";
  src: url("../fonts/BTitrBold.ttf");
  }
@font-face {
  font-family: "B Nazanin";
  src: url("../fonts/B-NAZANIN.otf");
  src: url("../fonts/B-NAZANIN.TTF");
  }
body {
  font-family: "B Nazanin","BTitr", sans-serif;
  overflow-y:auto;
  display: block;

  background-color: #fafcee;
  /*background-image: url("sun-tornado.svg");*/
  background-image: url('data:image/svg+xml,<svg id="wave" style="transform:rotate(0deg); transition: 0.3s" viewBox="0 0 1440 440" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(239.729, 243, 62, 1)" offset="0%"></stop><stop stop-color="rgba(198.557, 255, 0, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(%23sw-gradient-0)" d="M0,44L40,73.3C80,103,160,161,240,161.3C320,161,400,103,480,66C560,29,640,15,720,66C800,117,880,235,960,278.7C1040,323,1120,293,1200,286C1280,279,1360,293,1440,278.7C1520,264,1600,220,1680,205.3C1760,191,1840,205,1920,190.7C2000,176,2080,132,2160,146.7C2240,161,2320,235,2400,264C2480,293,2560,279,2640,256.7C2720,235,2800,205,2880,183.3C2960,161,3040,147,3120,168.7C3200,191,3280,249,3360,278.7C3440,308,3520,308,3600,278.7C3680,249,3760,191,3840,183.3C3920,176,4000,220,4080,242C4160,264,4240,264,4320,227.3C4400,191,4480,117,4560,132C4640,147,4720,249,4800,264C4880,279,4960,205,5040,146.7C5120,88,5200,44,5280,66C5360,88,5440,176,5520,212.7C5600,249,5680,235,5720,227.3L5760,220L5760,440L5720,440C5680,440,5600,440,5520,440C5440,440,5360,440,5280,440C5200,440,5120,440,5040,440C4960,440,4880,440,4800,440C4720,440,4640,440,4560,440C4480,440,4400,440,4320,440C4240,440,4160,440,4080,440C4000,440,3920,440,3840,440C3760,440,3680,440,3600,440C3520,440,3440,440,3360,440C3280,440,3200,440,3120,440C3040,440,2960,440,2880,440C2800,440,2720,440,2640,440C2560,440,2480,440,2400,440C2320,440,2240,440,2160,440C2080,440,2000,440,1920,440C1840,440,1760,440,1680,440C1600,440,1520,440,1440,440C1360,440,1280,440,1200,440C1120,440,1040,440,960,440C880,440,800,440,720,440C640,440,560,440,480,440C400,440,320,440,240,440C160,440,80,440,40,440L0,440Z"></path><defs><linearGradient id="sw-gradient-1" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(12.005, 234.926, 193.389, 1)" offset="0%"></stop><stop stop-color="rgba(212.096, 237.203, 73.732, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 50px); opacity:0.9" fill="url(%23sw-gradient-1)" d="M0,264L40,264C80,264,160,264,240,249.3C320,235,400,205,480,198C560,191,640,205,720,198C800,191,880,161,960,161.3C1040,161,1120,191,1200,168.7C1280,147,1360,73,1440,80.7C1520,88,1600,176,1680,220C1760,264,1840,264,1920,234.7C2000,205,2080,147,2160,161.3C2240,176,2320,264,2400,264C2480,264,2560,176,2640,176C2720,176,2800,264,2880,256.7C2960,249,3040,147,3120,117.3C3200,88,3280,132,3360,183.3C3440,235,3520,293,3600,264C3680,235,3760,117,3840,58.7C3920,0,4000,0,4080,36.7C4160,73,4240,147,4320,183.3C4400,220,4480,220,4560,242C4640,264,4720,308,4800,322.7C4880,337,4960,323,5040,271.3C5120,220,5200,132,5280,95.3C5360,59,5440,73,5520,110C5600,147,5680,205,5720,234.7L5760,264L5760,440L5720,440C5680,440,5600,440,5520,440C5440,440,5360,440,5280,440C5200,440,5120,440,5040,440C4960,440,4880,440,4800,440C4720,440,4640,440,4560,440C4480,440,4400,440,4320,440C4240,440,4160,440,4080,440C4000,440,3920,440,3840,440C3760,440,3680,440,3600,440C3520,440,3440,440,3360,440C3280,440,3200,440,3120,440C3040,440,2960,440,2880,440C2800,440,2720,440,2640,440C2560,440,2480,440,2400,440C2320,440,2240,440,2160,440C2080,440,2000,440,1920,440C1840,440,1760,440,1680,440C1600,440,1520,440,1440,440C1360,440,1280,440,1200,440C1120,440,1040,440,960,440C880,440,800,440,720,440C640,440,560,440,480,440C400,440,320,440,240,440C160,440,80,440,40,440L0,440Z"></path><defs><linearGradient id="sw-gradient-2" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(11.959, 191.667, 72.944, 1)" offset="0%"></stop><stop stop-color="rgba(11, 255, 126.869, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 100px); opacity:0.8" fill="url(%23sw-gradient-2)" d="M0,220L40,242C80,264,160,308,240,315.3C320,323,400,293,480,293.3C560,293,640,323,720,293.3C800,264,880,176,960,183.3C1040,191,1120,293,1200,286C1280,279,1360,161,1440,117.3C1520,73,1600,103,1680,117.3C1760,132,1840,132,1920,139.3C2000,147,2080,161,2160,198C2240,235,2320,293,2400,315.3C2480,337,2560,323,2640,278.7C2720,235,2800,161,2880,117.3C2960,73,3040,59,3120,110C3200,161,3280,279,3360,315.3C3440,352,3520,308,3600,278.7C3680,249,3760,235,3840,205.3C3920,176,4000,132,4080,117.3C4160,103,4240,117,4320,168.7C4400,220,4480,308,4560,337.3C4640,367,4720,337,4800,322.7C4880,308,4960,308,5040,293.3C5120,279,5200,249,5280,212.7C5360,176,5440,132,5520,139.3C5600,147,5680,205,5720,234.7L5760,264L5760,440L5720,440C5680,440,5600,440,5520,440C5440,440,5360,440,5280,440C5200,440,5120,440,5040,440C4960,440,4880,440,4800,440C4720,440,4640,440,4560,440C4480,440,4400,440,4320,440C4240,440,4160,440,4080,440C4000,440,3920,440,3840,440C3760,440,3680,440,3600,440C3520,440,3440,440,3360,440C3280,440,3200,440,3120,440C3040,440,2960,440,2880,440C2800,440,2720,440,2640,440C2560,440,2480,440,2400,440C2320,440,2240,440,2160,440C2080,440,2000,440,1920,440C1840,440,1760,440,1680,440C1600,440,1520,440,1440,440C1360,440,1280,440,1200,440C1120,440,1040,440,960,440C880,440,800,440,720,440C640,440,560,440,480,440C400,440,320,440,240,440C160,440,80,440,40,440L0,440Z"></path><defs><linearGradient id="sw-gradient-3" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(62, 243, 227.67, 1)" offset="0%"></stop><stop stop-color="rgba(11, 255, 11.138, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 150px); opacity:0.7" fill="url(%23sw-gradient-3)" d="M0,396L40,337.3C80,279,160,161,240,132C320,103,400,161,480,205.3C560,249,640,279,720,264C800,249,880,191,960,146.7C1040,103,1120,73,1200,51.3C1280,29,1360,15,1440,22C1520,29,1600,59,1680,110C1760,161,1840,235,1920,227.3C2000,220,2080,132,2160,124.7C2240,117,2320,191,2400,227.3C2480,264,2560,264,2640,271.3C2720,279,2800,293,2880,286C2960,279,3040,249,3120,227.3C3200,205,3280,191,3360,212.7C3440,235,3520,293,3600,322.7C3680,352,3760,352,3840,293.3C3920,235,4000,117,4080,88C4160,59,4240,117,4320,117.3C4400,117,4480,59,4560,66C4640,73,4720,147,4800,161.3C4880,176,4960,132,5040,132C5120,132,5200,176,5280,168.7C5360,161,5440,103,5520,66C5600,29,5680,15,5720,7.3L5760,0L5760,440L5720,440C5680,440,5600,440,5520,440C5440,440,5360,440,5280,440C5200,440,5120,440,5040,440C4960,440,4880,440,4800,440C4720,440,4640,440,4560,440C4480,440,4400,440,4320,440C4240,440,4160,440,4080,440C4000,440,3920,440,3840,440C3760,440,3680,440,3600,440C3520,440,3440,440,3360,440C3280,440,3200,440,3120,440C3040,440,2960,440,2880,440C2800,440,2720,440,2640,440C2560,440,2480,440,2400,440C2320,440,2240,440,2160,440C2080,440,2000,440,1920,440C1840,440,1760,440,1680,440C1600,440,1520,440,1440,440C1360,440,1280,440,1200,440C1120,440,1040,440,960,440C880,440,800,440,720,440C640,440,560,440,480,440C400,440,320,440,240,440C160,440,80,440,40,440L0,440Z"></path></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  background-position:bottom;
}
body.admin {
  font-family: "B Nazanin","BTitr", sans-serif;
  overflow-y:auto;
  display: block;
  background-color: #fafcee;
  direction: rtl;
  background-image: none;
}
/*-------------------------------------------*/
#myImg {
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
}

/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}

/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
  from {-webkit-transform:scale(0)} 
  to {-webkit-transform:scale(1)}
}

@keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}

/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}

.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
}

/********************************************/
#container {
  width: 1320px;
  margin: 0 auto;
  padding: 10px;
}
#container .about{
  width: 100%;
  align-items: center;
}
#container .about p{
  color: #043e77;
  text-align: justify;
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
  padding-left: 10px;
  padding-right: 10px;
}
#container .about .div-img{
  border-radius: 10px;
  border: #006d00 solid; 
  box-shadow: #00264d;
  width:fit-content;
}
#container .about img{
  border-radius: 10px;
  
}
#container hr{
  color: #c7cfb5;
  border: solid 2px;
}
#container .Side-Bar{
  width: 300px;
  padding: 10px;
  border-radius: 10px;
  direction: rtl;
  float: right;
  position: relative;
  background-image: url("green.png");
  background-size:contain;
  
  
}
#container .Side-Bar .titr{
  color: #fa4299;
  font-size: 35px;
  font-family: "Btitr";
  text-shadow: 2px 4px 4px rgba(236, 233, 43, 0.6);
 
}
#container .Side-Bar p{
  color: #00264d;
  text-align: justify;
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
}
#container .Side-Bar .Side-Bar-sec{
  margin: 10px;
  align-items: center;
  display: inline-block;
  word-wrap: break-word;
}

#container .Side-Bar .Side-Bar-sec P{
  font-weight: 800;
  font-size: 21px;
  line-height: .4;
  color: rgb(14, 93, 238);
  text-shadow: 2px 4px 4px rgba(236, 233, 43, 0.6);
  font-family: "Btitr";
}
#container .Side-Bar .Side-Bar-sec-img img{
  width: 120px;
  margin-bottom: 5px;
}
#container .Side-Bar .Side-Bar-sec-img img.a{
  width: 200px;
  margin-bottom: 5px;
}
#container .Side-Bar .Side-Bar-sec-img img.a:hover{
  width: 230px; ;
  opacity: .5;
}
#container .Side-Bar li{
  padding: 10px;
  font-weight: 600;
  margin-right: 10px;
}
#container .Side-Bar .product-item-thumbnail{
  width: 97%;
  display: inline-block;
  border: 1px solid #d5f8d8;
  border-radius: 10px;
  padding: 5px;
  margin: 5px;
}
#container .Side-Bar .product-item-thumbnail .thumbnail{
  border-radius: 10px;
  width: 90%;
  display: inline;
}
#container .Side-Bar .product-item-thumbnail .thumbnail img {
  width: 65px;
  height: 50px;
  border-radius: 10px;
  margin: 5px;
}
/******************************************/
#container .Side-Bar-insied{
  display: none;
  width: auto;
  padding: 10px;
  border-radius: 10px;
  direction: rtl;
}
#container .Side-Bar-insied .titr{
  color: #fa4299;
  font-size: 25px;
  font-family: "Btitr";
  text-shadow: 2px 4px 4px rgba(236, 233, 43, 0.6);
}
#container .Side-Bar-insied p{
  color: #00264d;
  text-align: justify;
  font-size: 20px;
  font-weight: 700;
  line-height: 25px;
}
#container .Side-Bar-insied-img img{
  width: 120px;
  margin-bottom: 5px;
}
#container .Side-Bar-insied-img img.a{
  width: 110px;
  margin-bottom: 5px;
}
#container .Side-Bar-insied-img img.a:hover{
  width: 150px; ;
  opacity: .5;
}
#container .Side-Bar-insied .Side-Bar-insied-sec{
  margin: 10px;
  align-items: center;
  display: inline-block;
  word-wrap: break-word;
}
#container .Side-Bar-insied li{
  padding: 10px;
  font-weight: 600;
  margin-right: 10px;
  display: inline-block;
  font-family: "Btitr";
  color: #0762bc;
  font-size: 18px;
}
#container .Side-Bar-insied .product-item-thumbnail-inside{
  width: 100%;
  border: 1px solid #0dd137;
  border-radius: 10px;

  padding: 5px;
  margin: 5px;
  display: inline-block;
}
#container .Side-Bar-insied .product-item-thumbnail-inside .thumbnail-inside{
  border-radius: 10px;
  width: 90px;
  display: inline;
}
#container .Side-Bar-insied .product-item-thumbnail-inside .thumbnail-inside img {
  width: 80px;
  height: 70px;
  border-radius: 10px;
  margin: 5px;
}
/*----------------------------------------*/
#container .support {
  width: 100%;
  border-radius: 10px;
  border: 2px solid  #c7cfb5;;
  align-items: center;
}
#container .support .sec{
  margin-top: 10px;
  margin-left: 30px;
  margin-right: 30px;
  margin-bottom: 10px;
  align-items: center;
  display: inline-block;
  word-wrap: break-word;
}
#container .support .sec-pic img{
  width: 80px;
  margin-bottom: 5px;
}
#container .support .sec P{
  font-family: "BTitr";
  font-weight: 800;
  font-size: 21px;
  line-height: .4;
  color: rgb(230, 100, 154);
  text-shadow: 2px 4px 4px rgba(72, 96, 231, 0.6);

}
/*----------------------------------------*/
 .footer {
  font-weight: bold;
  border-radius: 10px;
  border: none;
  margin-top: 10px;
  width: auto;
  overflow: hidden;
  align-content: center;
  align-items: center;
  background-size:100%;  
}
.footer  .footer-main{
  max-width: 990px;
  direction: rtl;
  left: 50%; 
  position: relative;
  transform: translate(-50%, 0%);
}
.footer .footer-main .footer-sec{
  margin: 10px;
  align-items: center;
  display: inline-block;
  word-wrap: break-word;width: 30%;
  border-left: 3px dotted #069406;

}
.footer .footer-main .footer-sec .footer-pic img{
  width: 150px;
  margin-bottom: 5px;
}


.footer .footer-main .footer-sec P{
  font-family: "BTitr";
  font-weight: 800;
  font-size: 21px;
  line-height: .4;
  color: rgb(14, 93, 238);
  text-shadow: 2px 4px 4px rgba(236, 233, 43, 0.6);

}
.footer .footer-main .footer-sec P.a{
  margin-top: 0;
  line-height: 1.5;
  font-size: 18px;
}
/*----------------------------*/

#container .address-box{
  padding: 15px;
  background-color: rgb(248, 249, 247);
  opacity: .7;
  font-size: 18px;
  font-weight: 600;
  color: #00264d;
  border-radius: 10px;
}
#container .mahasen-box{
  padding: 15px;
  background-color: rgb(248, 249, 247);
  opacity: .7;
  font-size: 18px;
  font-weight: 600;
  color: #00264d;
  border-radius: 10px;
}
legend {
   display: block;
   padding-left: 10px;
   padding-right: 10px;
   border: 2px solid  #c7cfb5;;
   background-color:tomato;
   color:white;
   font-family: "BTitr";
   border-radius: 3px;
   width: fit-content;
}
fieldset{
  border: 2px solid #c7cfb5;
  border-radius: 5px;
  margin: 10px;
  padding-right: 10px;
  width: 100%;
}

fieldset.a{
  border: 2px solid #c7cfb5;
  border-radius: 5px;
  margin: 10px;
  padding-right: 10px;
  width: 60%;
}
#container h1,h2,h3,h4{
  font-family:"BTitr";

}
#container .content {


  padding: 10px;
  box-sizing: border-box;
  width: 990px;

  border-radius: 10px;
 
  display: block;
  margin-top: 5px;
  direction: rtl;
  
}


/*----------------login----------------*/
::selection{
  background: #4158d0;
  color: #fff;
}
#container .wrapperlogin{
  width: 380px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
  z-index: 1;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  display: none;
  top: 50%;
}
#container .wrapperlogin .title{
  font-size: 30px;
  text-align: center;
  line-height: 100px;
  color: #fff;
  user-select: none;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  display: inline-block;
  width: 100%;
  font-family:"BTitr";
}
#container .wrapperlogin .title .close{
  float: right;
  top: 5px;
  right: 1;
}
#container .wrapperlogin form{
  padding: 10px 30px 50px 30px;
}
#container .wrapperlogin form .fieldlogin{
  height: 50px;
  width: 100%;
  margin-top: 20px;
  position: relative;
  direction: ltr;
  font-family:"BTitr";
}
#container .wrapperlogin form .fieldlogin input{
  height: 100%;
  width: 100%;
  outline: none;
  font-size: 17px;
  padding-left: 20px;
  border: 1px solid lightgrey;
  border-radius: 15px;
  transition: all 0.3s ease;
}

#container .wrapperlogin form .fieldlogin input:focus,
form .fieldlogin input:valid{
  border-color: #4158d0;
}
#container .wrapperlogin .address{
  padding: 10px;
  width: auto;
  direction: rtl;
}
#container  .wrapperlogin .address .inside{
  float: right;
  border: 2px solid rgb(5, 190, 5);
  border-radius: 5px;
  width: auto;
  margin-bottom: 10px;
  padding: 10px;
}
#container  .wrapperlogin .address .inside input[type="text"]{
  width: 100%;padding: 10px;

}
form .fieldlogin label{
  position: absolute;
  top: 50%;
  right: 20px;
  color: #999999;
  font-weight: 400;
  font-size: 17px;
  pointer-events: none;
  transform: translateY(-50%);
  transition: all 0.3s ease;
  z-index: 1;
}
form .fieldlogin input:focus ~ label,
form .fieldlogin input:valid ~ label{
  top: 0%;
  font-size: 16px;
  color: #4158d0;
  background: #fff;
  transform: translateY(-50%);
}

 form .fieldlogin input[type="submit"]{
  color: #fff;
  border: none;
  padding-left: 0;
  margin-top: -10px;
  font-size: 20px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  background: linear-gradient(-135deg, #c850c0, #4158d0);
  transition: all 0.3s ease;
  font-family:"BTitr";
  float: right;
}
 form .fieldlogin input[type="submit"]:active{
  transform: scale(0.95);
}
 form .signup-link{
  color: #262626;
  margin-top: 20px;
  text-align: center;
}
form .fieldlogin {
  align-items: center;
}
 form .signup-link a{
  color: #4158d0;
  text-decoration: none;
}

form .signup-link a:hover{
  text-decoration: underline;
}
 
/*-------------------------------------*/
#container .wrapperReg{
  width: 500px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
  z-index: 1;
  left: 50%;
  transform: translate(-50%, -50%);
  position: fixed;
  display: none;
  top: 50%;;
}
#container .wrapperReg .title{
  font-size: 20px;
  text-align: center;
  line-height: 70px;
  color: #ee1ecb;
  user-select: none;
  border-radius: 15px 15px 0 0;
  background: linear-gradient(-135deg, #8ce9ab, #4adf52);
  display: inline-block;
  width: 100%;
  font-family:"BTitr";
}
#container .wrapperReg .title .close{
  float: right;
  top: 5px;
  right: 1;
}
#container .wrapperReg .address{
  padding: 10px;
  width: 500px;;
}
#container  .wrapperReg .address .inside{
  border: 2px solid rgb(5, 190, 5);
  border-radius: 5px;
  width: auto;
  margin-bottom: 10px;
  padding: 10px;
  display: inline-block;
}
#container  .wrapperReg .address  input[type="text"]{
  max-width: 48%; 
   padding: 10px;  
   margin: 5px 0px 5px 5px;  
   border: none;  
   background-color:#d6f7dc; 
   box-shadow: 0px 3px 15px 0px rgb(3, 58, 44); 
   font-family: tahoma;  font-size: 15px;
   text-align: center;  border-radius: 25px;
   float: right;  background-position: 30px;
   background-repeat: no-repeat; 
   background-size: 30px;
}
#container  .wrapperReg .address .txtaddress{
  min-width: 100%;
  padding: 10px;
  margin-bottom: 10px;
   border: none;
     background-color:#d6f7dc;
       box-shadow: 0px 3px 15px 0px rgb(56, 3, 58);
         font-family: tahoma;
           font-size: 15px;
             text-align: right;
               border-radius: 25px;
                 float: right;  background-position: 30px;
                   background-repeat: no-repeat;
                     background-size: 30px;
}
/*----------Chat-new-------------------*/
.mainchat .chatform{
   display: none;
}
.mainchat label{
  position: fixed;
  right: 30px;
  bottom: 20px;
  height: 55px;
  width: 55px;
  background: -webkit-linear-gradient(left, #a445b2, #fa4299);
  text-align: center;
  line-height: 55px;
  border-radius: 50px;
  font-size: 30px;
  color: #fff;
  cursor: pointer;
}
.mainchat label i{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
}
.mainchat label i.fas{
  opacity: 0;
  pointer-events: none;
}
#click:checked ~ label i.fas{
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) rotate(180deg);
}
#click:checked ~ label i.fab{
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(180deg);
}
.mainchat .wrapper{
  position:fixed;
  right: 30px;
  bottom: 0px;
  max-width: 400px;
  background: #fff;
  border-radius: 15px;
  box-shadow: 0px 15px 20px rgba(0,0,0,0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.6s cubic-bezier(0.68,-0.55,0.265,1.55);
}
#click:checked ~ .wrapper{
  opacity: 1;
  bottom: 85px;
  pointer-events: auto;
}
.mainchat .wrapper .head-text{
  line-height: 60px;
  color: #fff;
  border-radius: 15px 15px 0 0;
  padding: 0 20px;
  font-weight: 500;
  font-size: 20px;
  background: -webkit-linear-gradient(left, #a445b2, #fa4299);
}
.mainchat .wrapper .chat-box{
  padding: 20px;
  width: 100%;
}
.chat-box .desc-text{
  color: #515365;
  text-align :right;
  line-height: 25px;
  font-size: 17px;
  font-weight: 500;
}
.chat-box form{
  padding: 10px 15px;
  margin: 20px 0;
  border-radius: 25px;
  border: 1px solid lightgrey;
}
.chat-box form .field{
  height: 50px;
  width: 100%;
  margin-top: 20px;
}
.chat-box form .field:last-child{
  margin-bottom: 15px;
}
form .field input, form .field input[type=text], form .field input[type=email]
form .textarea textarea{
  width: 100%;
  height: 100%;
  padding-right: 20px;
  border: 1px solid lightgrey;
  outline: none;
  border-radius: 25px;
  font-size: 16px;
  transition: all 0.3s ease;
  direction: rtl;
  padding-right: 10px;
}
form .textarea textarea{
  width: 100%;
  direction: rtl;
  font-size: 20px;
  font-weight: bold;

}
.mainchat .chatform  textarea{
  width: 100%;
  height: 100%;
  direction: rtl;
  font-size: 16px;
  font-weight: bold;
  direction: rtl;
  row-gap: 40;
  border-radius: 5px;
  outline: none;
  color: #515365;
}
form .field input[type=submit]{
  border-color: #99c00c;
  background-color: #e95ce2;
  width: 100%;
  height: 100%;
  padding-left: 20px;
  border: 1px solid lightgrey;
  outline: none;
  border-radius: 25px;
  font-size: 16px;
  transition: all 0.3s ease;
}
form .field input[type=submit]:focus {

  background-color: #e9c35c;

}
form .field input[type=submit]:hover {

  background-color: #e3c2e5;

}
form .field input:focus,
form .textarea textarea:focus{
  border-color: #fc83bb;
}
form .field input::placeholder,
form .textarea textarea::placeholder{
  color: silver;
  transition: all 0.3s ease;
}
form .field input:focus::placeholder,
form .textarea textarea:focus::placeholder{
  color: lightgrey;
}
.chat-box form .textarea{
  height: 70px;
  width: 100%;
}
.chat-box form .textarea textarea{
  height: 100%;
  border-radius: 50px;
  resize: none;
  padding: 15px 20px;
  font-size: 16px;
}
.chat-box form .field button{
  border: none;
  outline: none;
  cursor: pointer;
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  background: -webkit-linear-gradient(left, #a445b2, #fa4299);
  transition: all 0.3s ease;
}
.chat-box form .field button:active{
  transform: scale(0.97);
}
/*------------MSG---------------*/
.overlay{
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
  transition: opacity 600ms;
  visibility: hidden;
  opacity: 0;
}
.overlay:target{
  visibility: visible;
  opacity: 1;
}
.popup{
  position: relative;
  margin: 80px auto;
  padding: 20px;
  background: #fff;
  border-radius: 15px;
  width: 20%;
  transition: all 3s ease-in-out;
  direction: rtl;
}
.popup h2{
  margin-top: 0;
}
.popup .close{
  position: absolute;
  top: 20px;
  left: 30px;
  transition: all 400ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: black;
}
.popup .close:hover{
  color: #06d85f;
}
.popup .content{
  max-height: 30%;
  overflow: auto;
  direction: rtl;
}
/*------------MSG---------------*/
.p_body{
  direction: rtl;
  font-family: "B Nazanin", Helvetica, sans-serif;
  overflow-y:scroll;
  background-color: #f2ffe6;
  float: left;
}



#main #register {
  text-align: right;
}
#main #register a {
    color: #ff0000;
    font-weight: bold;
    }
#main #register input {
  margin: 3px;
  padding: 5px;
  width: 400px;
}

#main #register input[type=submit] {
  width: 200px;
}

/*------------Nav side for admin pages---------*/
#container .content .nav_side
{
  margin: 0px auto;
  font-family: "B Nazanin",Tahoma;
  font-weight: bold ;
  display: flex;
  float: right;
  width: 100px;
 
}
#container .content .nav_side  img{
  width: 40px;
 
}
#container .content .nav_side ul li a:link, div ul li a:visited
{
  display: flex;
  background-color: #1cc625;
  text-align: center;
  text-decoration: none;
  padding: 4px;
  border-bottom: 1px solid #ff6666; 
}
#container .content .nav_side ul li a
{
  border-radius: 5px;
  background-color: #ff6666;
  box-shadow: 0px 3px 15px 0px rgb(66, 4, 59);
  padding: 3px;
  color: #2b2b05;
  -webkit-text-stroke: 1px #044518;
	text-shadow: 0px 4px 4px #d4c306;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  width: 100px;
  border-radius: 10px;
}
#container .content .nav_side ul li a:hover
{
  border-radius: 5px;
  background-color: #0099ff ;
}
#container .content .nav_side ul li ul li a:link, li ul li a:visited
{
  display: block;
  background-color: aqua;
  color:#03f0fc;
  text-align: center;
  text-decoration: darkslateblue;
  padding: 4px;
  border-bottom: 1px solid #fff;
}
#container .content .nav_side ul li ul li a:hover
{
  background-color: #4CAF50;
}
#container .content .nav_side ul
{
  list-style-type: none;
  margin: 0px;
  padding: 0px;

}
#container .content .nav_side ul li
{
  float: right;
  margin-left: 5px;

}
#container .content .nav_side ul li ul li
{
  float: none;
  margin-left: 0px;

}
#container .content .nav_side ul li ul
{
  display: none;

}
#container .content .nav_side li:hover ul
{
  display: block;
  direction: rtl;
}

/*------------------------*/
#container  .add-product input[type=submit]{
  margin: 5px;
  font-family: tahoma;
  font-size: 15px;
  direction: rtl;
  width: 150px;
  float: right;
}

.admin-main .add-product input[type=text] {
  width: 50%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius:10px;
  border: 2px solid #ccc;
  float: right;
}
.admin-main .add-product input[type=text]:hover{
  background-color: #90f593;
}

.admin-main .add-product input[type=file] {
  padding: 10px;
  float: right;
  color: #006d00;
}
.admin-main .add-product p {

  float: right;
  direction: rtl;
  color: #006d00;
}
.admin-main .add-product input[type=text]:focus {
  border: 2px solid #000;

}

.admin-main .add-product textarea {
  width: 100%;
  padding: 5px;
  font-size: 15px;
  font-family: tahoma;
  resize: none;
  border-radius: 10px;
  border: 2px solid #ccc;
}
.admin-main .add-product textarea :focus {
  background-color: #90f593;
}

.admin-main .add-product textarea:focus {
  border: 1px solid #000;

}
.admin-main textarea{
  width: 100%;
  opacity: .7;
  padding: 2%;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 700;
}
#container  .address{
  padding: 10px;
  display: none;
  direction: rtl;
}
#container  .address .inside{
  float: right;
  border: 2px solid rgb(5, 190, 5);
  border-radius: 5px;
  width: auto;
  margin-bottom: 10px;
  padding: 10px;
}
#container  .address .inside input[type="text"]{
  width: 100%;padding: 10px;

}
#container .add-product input[type=submit] {
  padding: 10px;
  background: linear-gradient(to bottom, #90f593,green);
  color: rgb(236, 238, 132);
  border: none;
  border-radius: 10px;
  float: right;
}
/***********************/
#container  .select {
  width: auto;
  font-family: "B Nazanin";
  border: 1px solid var(--select-border);
  border-radius: 0.25em;
  padding: 5px;
  font-size: 1.25rem;
  cursor: pointer;
  line-height: 1;
  background-image: linear-gradient(to top, #c4efd6, #fff 33%);
  align-items: center;
  display: grid;
  justify-self: end;
  margin-bottom: 10px;
  outline: none;
  grid-template-areas: "select";
  color: #00264d;
  transition: color 0.3s ease, background-color 0.3s ease, border-bottom-color 0.3s ease;
}

#container  .select:hover,
select:focus {
  color: #000000;
  background-color: white;
}

#container  .select::after {
  content: "";
  width: 0.8em;
  height: 0.5em;
  background-color: var(--select-arrow);
  clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}
#container  .select option{
  background-color: #1cc625;
}
/*************************/
#container .admin-main .add-product input[type=submit]:hover {
  background-color: #f3269d;
  cursor: pointer;
}
#container .footer,.content{
  vertical-align: baseline;
  font: inherit;
}
#container .search {
  direction: rtl;
  text-align: center;
  align-items: center;
  margin-bottom: 5px;
  width: auto;
  display: inline-flex;
}
#container .search input[type=image]{
  border-radius: 3%  ;
  width: 40px;
  border: none;
  background-repeat: no-repeat ;
  margin-left: 5px;
  float: right;
}
#container input [type=image]:hover{
    background-color:#e95ce2;
    opacity: .7;
}
#container .search input[type=text]{
    width: auto;
    padding: 10px;
    margin: 5px 0px 5px 5px;
    border: none;
    background-color:#8de89e;
    box-shadow: 0px 3px 15px 0px rgb(56, 3, 58);
    font-family: tahoma;
    font-size: 15px;
    text-align: center;
    border-radius: 25px;
    float: right;
    background-position: 30px;
    background-repeat: no-repeat;
    background-size: 30px;
    -webkit-transition: width 0.4s ease-in-out;
    transition: width 0.4s ease-in-out;
}
#container .search input[type=text]:focus {
  width: 400px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
#container  .wrapperlogin .address .inside  input[type=text]{
  width: 45%;
  padding: 10px;
  margin: 5px 0px 5px 5px;
  border: none;
  background-color:#d6f7dc;
  box-shadow: 0px 3px 15px 0px rgb(56, 3, 58);
  font-family: tahoma;
  font-size: 15px;
  text-align: center;
  border-radius: 25px;
  float: right;
  background-position: 30px;
  background-repeat: no-repeat;
  background-size: 30px;
  -webkit-transition: width 0.4s ease-in-out;
  transition: width 0.4s ease-in-out;
}
#container  .wrapperlogin .address .inside  input[type=text]:focus {
width: 400px;
-webkit-transition: width 0.4s ease-in-out;
transition: width 0.4s ease-in-out;
}
#container h1,h2{
  color: #0762bc;
  -webkit-text-stroke: 1px #044518;text-shadow: 0px 4px 4px #d4c306;
}
#container .search input[type=text]:hover {
  background-color: rgb(248, 152, 219);
  outline: none;
  border: none;
  }
#container .admin_search {
  display: inline;
}
#container .admin-main .products table a{
  color: #044518;
}
  #container .admin-main .products{
  background: linear-gradient(to bottom, #d8f3d9, #8bf77d);
  box-shadow: 0px 3px 15px 0px rgb(36, 3, 37);
  border-radius: 10px;
  width: auto;
}
#container .admin-main .products .edit{
  width: 100px; color: #f3269d;
}
#container .admin-main table {
  background-color:#ccffcc;
  width: 100%;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
  direction: rtl;
  color: green;
  border: 3px  solid rgb(209, 107, 235);
  border-radius: 10px;
}
#container .admin-main  .search input[type=text]{
  width: 60%;
  padding: 10px;
  margin: 10px 10px 5px 10px;
  border: none;
  background: linear-gradient(to bottom, #d8f3d9, #8bf77d);
  box-shadow: 0px 3px 15px 0px rgb(36, 3, 37);
  font-family: tahoma;
  font-size: 15px;
  text-align: center;
  border-radius: 25px;
}

#container.admin-main .search input[type=text]:hover {
background-color: rgb(240, 170, 211);
outline: none;
border: none;
}
#container .admin-main  td,tr {
 
  border: 3px solid rgb(245, 182, 8);
  padding: 8px;
  text-align: center;
  font-weight: bold;
  direction: ltr;
  border-radius: 10px;
}

#container .admin-main tr:nth-child(even) {
  background-color: #ddd;
  direction: ltr;
}

#container .admin-main th {
  border: 3px solid rgb(238, 11, 181);
  padding: 8px;
  text-align: center;
  font-weight: bold;
  direction: rtl;
  color: blue;
  background-color: whitesmoke;
  border-radius: 10px;
}
#container .admin-main .user{
     direction: rtl;
}
#container .admin-main .user input[type=text] {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 2px;
  border-radius: 10px;
  direction: rtl;
}
#container .admin-main .user input[type=text]:hover {
  background-color: #9ce99f;
  cursor: pointer;
}
#container .content_cart table
{
  background: linear-gradient(to bottom, #d8f3d9, #8bf77d);
  box-shadow: 0px 3px 15px 0px rgb(36, 3, 37);
  width: 100%;
  font-size: 16px;
  text-align: center;
  font-weight: 500;
  color: green;
  border: 3px  solid rgb(209, 107, 235);
  border-radius: 10px;
}
#container .content_cart  td,tr{
  border: 3px solid rgb(245, 182, 8);
  padding: 2px;
  text-align: center;
  font-weight: bold;
  border-radius: 10px;
}
#container .content_cart  th{
  border: 3px solid rgb(238, 11, 181);
  padding: 2px;
  text-align: center;
  font-weight: bold;
  color: blue;
  background-color: whitesmoke;
  border-radius: 10px;
  font-size: 18px;

}
#container .content_cart  tr:nth-child(even) {
  background-color: #ddd;
}


.admin-main a, #main a {
  text-decoration: none;
  color: #00264d;
  
}
.admin-main  tr:hover {background-color: #99ccff;}

.admin-main input[type=submit] {
  padding: 10px;
  background: linear-gradient(to bottom, #90f593,rgb(34, 226, 34));
  border: none;
  border-radius: 10px;
  margin-top: 10px;
  font-family: "BTitr";
  width: 20%;
  color: #f0e587;
}
.admin-main input[type=submit]:hover {
  background-color: #0099ff;
  cursor: pointer;
}
.admin-main a:hover, #main a:hover {
  color: #000;
}
#container .admin-main{
  direction: rtl;
  float: left;
  width: 100%;
  text-align: center;
}

#container .button_search .button .login-menu{
  margin: 20px;
}
#container .button_search .button .grouping-menu{
  margin-right: 10px;
  margin-top: 20px;
}

.sid :hover{
  background-color: #03f0fc;
  font-family: Tahoma;
}
#container .content_cart {
  width: 990px;
  direction: rtl;
  padding: 10px;
  box-sizing: border-box;
  border: 2px solid #b9c3b8;
  border-radius: 10px;
  margin-top: 10px;

}

#container .content .product-item {
  width: 30%;
  display: inline-block;
  border: 5px solid #ccc;
  border-radius: 10px;
  padding: 5px;
  margin: 5px;
  overflow:hidden;
}
#container .content .product-item:hover{

	color:#fff;
  opacity: .8;
}
#container .content .product-item p{
  font-size:18px; 
  color: #f10808 ;
  float: bottom;
  font-weight:700;
  font-family: "Btitr";
  left: 50%;
}
/*/////////////*/
#container .content .product-item .product-image img {
  width: 100%;
  border-radius: 10px;
}
/*/////////////*/
#container .product-page {
  width: 100%;
  display: inline-block;
}
#container .product-page .tanzim {
  width: 100%;
  display: inline-block;
}
#container .content .product-page .tanzim .product-image-pname{
  width: 300px;
  float: right;
}
#container .content .product-page .product-item-thumbnail{
  width: 97%;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: 10px;
  background-color: #9ce99f;
  padding: 5px;
  margin: 5px;
}
#container .content .product-page .product-item .product-image img {
  width: 100%;
  border-radius: 10px;
}
#container .content .product-page .product-item-thumbnail .thumbnail{
  border-radius: 10px;
  width: 90%;
  display: inline;
}
#container .content .product-page .product-item-thumbnail .thumbnail img {
  width: 45px;
  height: 50px;
  border-radius: 10px;
  margin: 5px;
}
#container .content .product-page .tanzim .product-desc-form {

  padding: 5xp;
  float: left;
  background-color: rgb(248, 249, 247);
  opacity: .7;
}

#container .content .product-page .tanzim p {
  font-family: "BTitr";
  padding-right: 10px;
}

#container .content  .product-page .product-desc-form .product-desc {
  font-size: 20px;
  padding: 10px;
  text-align: justify;
}

#container .content .product-page .product-desc-form .product-desc p {
  color: #00264d;
  font-style: italic;  font-weight: bold;
  margin-right: 10px;
}

#container .content  .product-page .product-desc-form .product-desc p:hover {
  color: rgb(76, 74, 226);
}

#container .content_cart .thumbnail img{
  width: 45px;
  height: 50px;
  border-radius: 10px;
}

#container .content div{
  border-radius: 10px;
}
#container .content .product-item .product-name {
  font-size: 18px;
  border:dotted;
  border-color: #86c0a5;
  padding: 3px;
}

#container .content .product-item .product-name a {
  text-decoration: none;
  color: #377bc7;
  font-weight: bold;
}

#container .content .product-item .product-name a:hover {
  color: #000;
}
#container .content .product-item .product-desc {
  font-size: 18px;
  margin-top: 10px;
  font-weight: bold;
  color: #4250cc;
 
  padding: 3px;
  float: left;
}
#container .content .product-item .product-desc a{

  color: #4250cc;
 
}
#container .content .product-item .product-price {
  font-size: 18px;
  margin-top: 10px;
  font-weight: bold;
  color: #931717;
  border:dotted;
  border-color: #86c0a5;
  padding: 3px;
}
#container .product-page .product-image-pname .product-image {
  border-radius: 10px;
  width: 100%;
}
#container .product-page .product-image-pname .product-image img {
  width: 100%;
  height: 250px;
  border-radius: 10px;
  background: linear-gradient(to bottom, #fbdbfa,#ec94ec);
  box-shadow: 0px 3px 10px 0px rgb(66, 4, 59);
}
#container .product-page .product-image-pname .product-image .zoom{
  display:inline-block;
  position: relative;
  width: 97%;
}
		/* magnifying glass icon */
#container .product-page .product-image-pname .product-image 	.zoom:after {
			content:'';
			display:block; 
			width:33px; 
			height:33px; 
			position:absolute; 
			top:0;
			right:0;
			background:url(../icon.png);
}
#container .product-page .product-image-pname .product-image .zoom img::selection { 
            background-color: transparent; 
            border-radius: 10px;
            
        }
#container .product-page .product-name {
  font-size: 15px;
}

#container .product-page .product-price {

  font-size: 18px;
  color: darkmagenta;
  font-weight: bold;
  margin-top: 15px;
  float: left;
  padding: 15px;
  background: linear-gradient(to bottom, #fbdbfa,#ec94ec);
  box-shadow: 0px 3px 10px 0px rgb(66, 4, 59);
}
#container .product-page .product-tedad {
  font-size: 14px;
  color: green;
  font-weight: bold;
  margin-top: 10px;
  float: left;
}
#container .product-page .add-to-cart input[type=submit] {
  background: linear-gradient(to bottom, #90f593,green);
  color: rgb(202, 233, 24);
  text-decoration: none;
  padding: 10px;
  border-radius: 10px;
  float: left;
  font-family: "BTitr";
}

#container .product-page .add-to-cart input[type=submit]:hover {
  background-color: #fa11ee;
  cursor: pointer;
}

#container .comments {
  text-align: center;
  color: #0099ff;
  border-radius: 10px;
}

#container .comments .comment-item {
  text-align: right;
  padding: 5xp;
  font-weight: 400;
  background-color: rgb(248, 249, 247);
  opacity: .7;
  scroll-behavior: auto;
}

#container .comments .comment-item .username {
  font-family: "Btitr";
  font-size: 14px;
  margin-top: 10px;
  padding: 5px;
}

#container .comments .comment-item .comment-text {
  font-size: 14px;
  padding: 5px 5px 0 0;
  color: rgb(2, 41, 27);

}

#container .comments input[type=text] {
  width: 90%;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 5px;
  font-family: Tahoma;
  
  border-radius: 10px;
}
#container .comments input[type=text]:hover {
  background-color: rgb(179, 236, 238);
  border-radius: 10px;
}
#container .comments textarea {
  width: 90%;
  padding: 10px;
  font-size: 15px;
  font-family: tahoma;
  resize: none;
  border-radius: 10px;
  border: 1px solid #ccc;
  color: #336600;
  border-radius: 10px;
}
#container .comments textarea :hover {
  background-color: rgb(179, 236, 238);
  
}
#container .comments input[type=submit] {
  padding: 10px;
  background: linear-gradient(to bottom, #90f593,green);
  color: rgb(216, 240, 6);
  border: none;
  border-radius: 10px;
  margin-top: 10px;
  font-family: "BTitr";
}

#container .comments input[type=submit]:hover {
  background: linear-gradient(to bottom, #eeadd5,rgb(248, 15, 248));
  cursor: pointer;
}
#container input[type=submit]{
  font-size: 15px;
  font-weight: 500;
  width: auto;
  font-family: "Btitr";
}
/*-------------------------*/
.btn_splash {
  min-width: auto;
  min-height: 50px;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: #e6c909;
  background: #ef75eb;
  background: linear-gradient(90deg, rgb(220, 113, 227) 0%, rgb(204, 36, 190) 100%);
  border: none;
  border-radius: 1000px;
  box-shadow: 12px 12px 24px rgba(88, 14, 4, 0.64);
  transition: all 0.3s ease-in-out 0s;
  cursor: pointer;
  outline: none;
  position: relative;
  padding: 4px;
  }

.btn_splash:hover, .btn_splash:focus {
  color: #c00a0a;
  transform: translateY(-6px);
}

/*-------------------------*/
.admin-comments .comment-item {
  text-align: right;
  text-justify: inter-word;
  background-color: rgb(220, 250, 181);
  padding: 10px;
  border: 1px solid #ccc;
  margin-top: 5px;
  border-radius: 15px;
  box-shadow: rgb(2, 41, 34);
  width: 95%;
}

.admin-comments .comment-item .user-data {

  font-size: 18px;
  direction: rtl;
  text-justify: inter-word;
  line-height: 150%;
 
}

.admin-comments .comment-item .comment-text {
  padding: 10px;
  color: blue;
  font-style: italic;
  text-justify: inter-word;
  line-height: 150%;
}

.admin-comments .comment-item .button {
  float: left;
}

.admin-comments .comment-item .button .confirm {
  background: linear-gradient(to bottom, #90f593,green);
  color: #fff !important;
  padding: 3px 8px;
  font-size: 12px;
  border-radius: 10px;
}

.admin-comments .comment-item .button .confirm:hover {
  background-color: #006d00;

}

.admin-comments .comment-item .button .delete {
  background-color: #931717;
  color: #fff !important;
  padding: 3px 8px;
  font-size: 12px;
  border-radius:10px;
}
 #main .admin-main .admin-comments .comment-item textarea{
  font-size: 18px;
  color: #2b0138;
  border-radius: 5px;
  width: 100%;
  height: 100%;
  background-color: #f3b5e6;
}
.admin-comments .comment-item .button .delete:hover {
  background-color: #6f1212;

}

.content a {
  text-decoration: none;
  color: red;
}

.content input[type=submit] {
  background: linear-gradient(to bottom, #90f593,green);
  width: 25%;
  color: rgb(207, 243, 4);
  padding: 10px;
  font-family: "BTitr";
  border: none;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
  margin-top: 30px;
}
.content input[type=text] {
  border-radius: 10px;
  padding: 5px;
  color: #03213f;
  font-size: 16px;
  width: 60% ;
}
.content input[type=text]:hover{
  background-color: #99ccff;
}
.content input[type=submit]:hover {
  background: linear-gradient(to bottom, #eba4e1,rgb(250, 10, 170));
  cursor: pointer;
}
.content textarea{
  border-radius: 10px;
  text-align: justify;
}

.content_cart input[type=submit] {
  background: linear-gradient(to bottom, #90f593,green);
  width: 155px;
  color: rgb(248, 247, 180);
  padding: 10px;
  font-family: "BTitr";
  border: none;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
    
}
.content_cart input[type=submit]:hover {
  background: red;
  cursor: pointer;
  }
  
.admin-main li {
  display: block !important;
}
.share img {
  float: right;
  border-radius: 10px;
}
.share img:hover{
  opacity: 0.7;
}
/*---------------------------------pop up---------------------------------------------*/
/* The popup form - hidden by default */
.form-popup {
  width: 200px;
  position: fixed;
  bottom: 10px;
  border: 2px  solid #eca3a3;
  z-index: 1;
  box-shadow: rgb(71, 18, 18);
  padding: 2px;
  border-radius:10px;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
/* Add styles to the form container */
.form-container {
  width: 100%;
  padding: 10px;
  background-color: rgb(247, 232, 232);
  direction: rtl;
}
.btnpopup {
  border-radius: 5%;
  background-repeat: no-repeat;
  background-size: auto;

}
/* Set a style for the submit/login button */
.form-container button{
 
  padding: 5px;
  font-family: tahoma;
  border: none;
  border-radius: 10px;
  font-size: 12px;
  text-align: center;
  margin-top: 10px;
  background: rgb(123, 240, 102) ;
}
.form-container button:hover{
  opacity: .7;
  cursor: pointer;
  background-color: #03f0fc;
}
.container button{
  width: 10%;
  padding: 10px;
  font-family: tahoma;
  border: none;
  border-radius: 10px;
  font-size: 14px;
  text-align: center;
  margin-top: 20px;
  background: rgb(123, 240, 102) ;
  float:right;
}
.container button:hover{
  opacity: .7;
  cursor: pointer;
  background-color: #03f0fc;
}
.form-container textarea{
  width: 100%;
  padding: 1%;
  border-radius: 10px;
  direction: ltr;
  color: darkgreen;
}
.container textarea{
  width: 100%;
  opacity: .7;
  padding: 2%;
  border-radius: 10px;
  font-size: 14px;
}
.form-container p{
  float: right;
  font-style: normal;
  direction: rtl;
  color: #03213f;
  padding: 2px;
  font-size: 13px;
}

#container .button_search .button .count{
  width: 40px;
  color: #00264d;
  font-weight: bold;
  border-radius: 20px;
  font-size: 17px;
  position: relative;
  margin-top: 20px;

}
#container .centered {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 15px;
  height: 15px;
  color: #00264d;
  font-weight: bold;
  border-radius: 20px;
  padding: 3px;
  font-size: 18px;
}

#container .flip{
  direction: rtl;
  display: block;
  margin-top: 10px;
  margin-left: 10px;
}
#container .popup-menu {
  width: auto;
  position:absolute;
  border: 3px solid #eca3a3;
  z-index: 1; 
  box-shadow: rgb(83, 45, 45);
  padding: 2px;
  border-radius: 10px;
  background-color: #99ccff;
  font-size: 15px;
  display: none;
}
#container  .popup-menu .form-menu-popup {
  width: auto;
  float: right;
  direction: rtl;
}

#container  .menu {
  float: right;
  overflow:visible;
  border-radius: 5px;
  margin-top: -10px;
  padding-top: 0;
}

#container  .menu  li {
  list-style: none;
  color: rgb(159, 224, 151);
  font-weight: bold;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
  width: 100%;
}
#container .menu img{
  width: 20px;
  margin-left: 5px;
}
#container  .menu  div{
  display: inline-flex;
  direction: rtl;
  float: right;
}
#container  .menu ul{
  margin-left: 5px;
  padding-right: 0; 
}
#container  .menu ul li {
  display: flex;
  margin-bottom: 5px;

}
#container  .menu ul li a {
  text-decoration: lightskyblue;
  color: #03213f;
  padding: 5px;
  box-shadow: 0px 3px 15px 0px rgb(66, 4, 59);
  border-radius: 5px;
  font-weight: bold;
   background-color: #f75bc3;  font-size: 14px;
  width: 100%;
}

#container  .menu ul li a:hover {
  color: #f1560d;
  background-color: #77eba3;
  padding: 5px;
  border-radius: 5px;
}
#container .ShareAddress{ 
  background-repeat: no-repeat ;
  background-image:url("share.png");
  width:25px;
  float: right;
  background-size: contain;

}
/* ---------------Slide show-----banner-max----------------------*/
.banner-max{
  margin: 0;
  border-radius: 10px;
  font-style: "BTitr";
  width: auto;
  height: 720px;
  background-image: url('data:image/svg+xml,<svg id="wave" style="transform:rotate(180deg); transition: 0.3s" viewBox="0 0 1440 440" version="1.1" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="sw-gradient-0" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(227.465, 243, 62, 1)" offset="0%"></stop><stop stop-color="rgba(250.591, 255, 11, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 0px); opacity:1" fill="url(%23sw-gradient-0)" d="M0,308L80,271.3C160,235,320,161,480,176C640,191,800,293,960,330C1120,367,1280,337,1440,330C1600,323,1760,337,1920,286C2080,235,2240,117,2400,66C2560,15,2720,29,2880,44C3040,59,3200,73,3360,110C3520,147,3680,205,3840,190.7C4000,176,4160,88,4320,102.7C4480,117,4640,235,4800,300.7C4960,367,5120,381,5280,352C5440,323,5600,249,5760,212.7C5920,176,6080,176,6240,161.3C6400,147,6560,117,6720,154C6880,191,7040,293,7200,300.7C7360,308,7520,220,7680,176C7840,132,8000,132,8160,154C8320,176,8480,220,8640,227.3C8800,235,8960,205,9120,198C9280,191,9440,205,9600,234.7C9760,264,9920,308,10080,271.3C10240,235,10400,117,10560,117.3C10720,117,10880,235,11040,256.7C11200,279,11360,205,11440,168.7L11520,132L11520,440L11440,440C11360,440,11200,440,11040,440C10880,440,10720,440,10560,440C10400,440,10240,440,10080,440C9920,440,9760,440,9600,440C9440,440,9280,440,9120,440C8960,440,8800,440,8640,440C8480,440,8320,440,8160,440C8000,440,7840,440,7680,440C7520,440,7360,440,7200,440C7040,440,6880,440,6720,440C6560,440,6400,440,6240,440C6080,440,5920,440,5760,440C5600,440,5440,440,5280,440C5120,440,4960,440,4800,440C4640,440,4480,440,4320,440C4160,440,4000,440,3840,440C3680,440,3520,440,3360,440C3200,440,3040,440,2880,440C2720,440,2560,440,2400,440C2240,440,2080,440,1920,440C1760,440,1600,440,1440,440C1280,440,1120,440,960,440C800,440,640,440,480,440C320,440,160,440,80,440L0,440Z"></path><defs><linearGradient id="sw-gradient-1" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(62, 243, 129.556, 1)" offset="0%"></stop><stop stop-color="rgba(242.324, 255, 11, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 50px); opacity:0.9" fill="url(%23sw-gradient-1)" d="M0,308L80,271.3C160,235,320,161,480,176C640,191,800,293,960,286C1120,279,1280,161,1440,117.3C1600,73,1760,103,1920,132C2080,161,2240,191,2400,176C2560,161,2720,103,2880,80.7C3040,59,3200,73,3360,102.7C3520,132,3680,176,3840,205.3C4000,235,4160,249,4320,271.3C4480,293,4640,323,4800,308C4960,293,5120,235,5280,176C5440,117,5600,59,5760,51.3C5920,44,6080,88,6240,132C6400,176,6560,220,6720,264C6880,308,7040,352,7200,315.3C7360,279,7520,161,7680,154C7840,147,8000,249,8160,256.7C8320,264,8480,176,8640,146.7C8800,117,8960,147,9120,139.3C9280,132,9440,88,9600,66C9760,44,9920,44,10080,95.3C10240,147,10400,249,10560,308C10720,367,10880,381,11040,322.7C11200,264,11360,132,11440,66L11520,0L11520,440L11440,440C11360,440,11200,440,11040,440C10880,440,10720,440,10560,440C10400,440,10240,440,10080,440C9920,440,9760,440,9600,440C9440,440,9280,440,9120,440C8960,440,8800,440,8640,440C8480,440,8320,440,8160,440C8000,440,7840,440,7680,440C7520,440,7360,440,7200,440C7040,440,6880,440,6720,440C6560,440,6400,440,6240,440C6080,440,5920,440,5760,440C5600,440,5440,440,5280,440C5120,440,4960,440,4800,440C4640,440,4480,440,4320,440C4160,440,4000,440,3840,440C3680,440,3520,440,3360,440C3200,440,3040,440,2880,440C2720,440,2560,440,2400,440C2240,440,2080,440,1920,440C1760,440,1600,440,1440,440C1280,440,1120,440,960,440C800,440,640,440,480,440C320,440,160,440,80,440L0,440Z"></path><defs><linearGradient id="sw-gradient-2" x1="0" x2="0" y1="1" y2="0"><stop stop-color="rgba(36.6, 216.788, 0, 1)" offset="0%"></stop><stop stop-color="rgba(52.194, 255, 11, 1)" offset="100%"></stop></linearGradient></defs><path style="transform:translate(0, 100px); opacity:0.8" fill="url(%23sw-gradient-2)" d="M0,308L80,256.7C160,205,320,103,480,58.7C640,15,800,29,960,51.3C1120,73,1280,103,1440,154C1600,205,1760,279,1920,308C2080,337,2240,323,2400,308C2560,293,2720,279,2880,234.7C3040,191,3200,117,3360,110C3520,103,3680,161,3840,212.7C4000,264,4160,308,4320,300.7C4480,293,4640,235,4800,190.7C4960,147,5120,117,5280,88C5440,59,5600,29,5760,29.3C5920,29,6080,59,6240,88C6400,117,6560,147,6720,146.7C6880,147,7040,117,7200,139.3C7360,161,7520,235,7680,242C7840,249,8000,191,8160,161.3C8320,132,8480,132,8640,124.7C8800,117,8960,103,9120,117.3C9280,132,9440,176,9600,168.7C9760,161,9920,103,10080,73.3C10240,44,10400,44,10560,88C10720,132,10880,220,11040,234.7C11200,249,11360,191,11440,161.3L11520,132L11520,440L11440,440C11360,440,11200,440,11040,440C10880,440,10720,440,10560,440C10400,440,10240,440,10080,440C9920,440,9760,440,9600,440C9440,440,9280,440,9120,440C8960,440,8800,440,8640,440C8480,440,8320,440,8160,440C8000,440,7840,440,7680,440C7520,440,7360,440,7200,440C7040,440,6880,440,6720,440C6560,440,6400,440,6240,440C6080,440,5920,440,5760,440C5600,440,5440,440,5280,440C5120,440,4960,440,4800,440C4640,440,4480,440,4320,440C4160,440,4000,440,3840,440C3680,440,3520,440,3360,440C3200,440,3040,440,2880,440C2720,440,2560,440,2400,440C2240,440,2080,440,1920,440C1760,440,1600,440,1440,440C1280,440,1120,440,960,440C800,440,640,440,480,440C320,440,160,440,80,440L0,440Z"></path></svg>');
  background-repeat: no-repeat;
  background-position:top;
  background-size:100%;  
  
}
.banner-max img {
  vertical-align: middle;
  border-radius: 10px;
}
/* Position the image container (needed to position the left and right arrows) */
.banner-max .banner-max-container {
  align-self: center;
  align-items: center;
  left: 50%;
  transform: translate(-50%, 0%);
  max-width: 990px;
  margin-left: -50px;
  position: relative;
}
.banner-max .banner-max-container  .welcome-max{
    font-size: 16px;
    font-weight: bold;
    float: right;
    margin-left: 10px;
    padding: 10px;
    color: #074d03;
    background-color: #faf5f5;
    padding: 5px;
    border-radius: 10px;
    width: fit-content;
    
  }
.banner-max .mainSlides img{
     
     width:100%;
}

/* Add a pointer when hovering over the thumbnail images */
.banner-max .cursor {
  cursor: pointer;
}

/* Six columns side by side */
.banner-max .column {
  float: left;
  width: 16.66%;
  border: rgb(236, 238, 235) solid 3px;
  padding: 5px;
  border-radius: 10px;
}
.banner-max .column  img{

   width: 100%; 
   border-radius: 10px;
}

/* Add a transparency effect for thumnbail images */
.banner-max .demo {
  opacity: 0.6;
}

.banner-max .active{
  opacity: 1;
}
.banner-max .demo:hover {
  opacity: 1;
}
/*------------------------------------------------------*/
#container .banner {
  margin: 0;
  background-color:white;
  box-shadow: 0px 3px 15px 0px rgb(66, 4, 59);
  border-radius: 10px;
  font-style: "BTitr";
  max-width: 990px;
  display: none;
}

#container .banner .mySlides {display: none}
#container .banner img {vertical-align: middle;}

/* Slideshow container */
#container .banner .slideshow-container {
  max-width: 990px;
  max-height: 650px;
  position: relative;
  margin: auto;
} 

/* Next & previous buttons */
#container .banner .prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}
/* Position the "next button" to the right */
#container .banner .next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
#container .banner .prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
#container .banner .text {
  color: #f4af10;
  font-size: 18px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
  font-style: "BTitr";
  font-weight: 700;
}

/* Number text (1/3 etc) */
#container .banner .numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
#container .banner .dot {
  cursor: pointer;
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

#container .banner .active, .dot:hover {
  background-color: #717171;
}

/* Fading animation */
#container .banner .fade {
  animation-name: fade;
  animation-duration: 1.5s;
}
#container .button_search{
  width: 990px;
  display: inline-flex;
  direction: rtl;
  background-image: url("./Angry-Underline.svg");
}
#container .button_search .button{
  width: 48%;  
  display: inline-flex;
  margin-top: 10px;

}
@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
  #container .banner .prev,#container .banner .next,#container .banner .text {font-size: 11px}
}
/*If the browser window is 750 or smaller */
@media only screen and (max-width: 750px) {
  #container .banner {
    display: block;
  }
.banner-max{
    display: none;
  }
  .footer  .footer-main {
    width: 100%;
    transform: none;
    padding-left: 10px;
    padding-right: 10px;
   
      position:unset;


  }
  .footer  .footer-main .footer-sec{
   width: 100%;
  }
  .footer  .footer-main .footer-sec .footer-pic img{
    width: 100px;
    margin-bottom: 5px;
  }
  #container .content_cart {
    width: auto;
  }
  .footer  .footer-main .footer-sec P{
   
    font-weight: 600;
    font-size: 18px;
  }
  .footer  .footer-main .footer-sec P.a{
    margin-top: 0;
    line-height: 1.5;
    padding-left: 10px;
  }
  .mainchat label{
    position: fixed;
    left: 30px;
    bottom: 40px;
  }
  .admin-main .products{

    width: 100%;

  }
  fieldset{
    width: auto;
  
  }
  #container .admin-main{
    width: 100%;
  }
  #container{
    width: auto;
  }fieldlogin
  #container .button_search .button .login-menu{
    margin-right: 10px;
    margin-top: 20px;
  }

  #container .grouping{
    width: 100%;
    margin: auto;
  }
  #container .grouping .fields {
    width: 17%;
  }

  #container .grouping .fields input[type="image"]{
    width: 100%;
    height: 30px;
  }
  #container .grouping .fields .gtext {

     font-size: 13px;
  }
/*--------------------login--------------*/
#container .wrapperlogin {
     max-width: 80%;
}
#container .wrapperReg{
  width: 85%;
}
#container .wrapperReg .title{
  font-size: 20px;
  font-weight: 500;
  line-height: 40px;
}
#container  .wrapperReg .address {
  width: auto;
}
#container  .wrapperReg .address  input[type="text"]{
  width: 100%;
}
#container  .wrapperReg .address .inside{
  width: auto;
}
#container .wrapperlogin .title{
  font-size: 25px;
  font-weight: 500;
  line-height: 70px;
}
#container .wrapperlogin form{
  padding: 5px 15px 25px 15px;
}
#container .wrapperlogin form .fieldlogin{
  height: 40px;
  width: 100%;
  margin-top: 15px;
}
 form .signup-link{
  color: #262626;
  font-size: 16px;
  padding-top: 10px;
}
form .fieldlogin input:focus ~ label,
form .fieldlogin input:valid ~ label{
  top: 0%;
  font-size: 14px;
  font-weight: bold;
  color: #4158d0;
  background:transparent;
  padding: 0;
  width: 50%;
}
form .fieldlogin label{
  font-size: 15px;
}
form  .fieldlogin input[type=submit]{

  margin-top: 10px;
  font-size: 18px;
  width: 80%;
}
/*----------Chat-new-------------------*/
/*---------------chat------------section----*/
  .wrapper{

    max-width: 90%;
    right: 10px;
  }
  .wrapper .chat-box{
    font-size: 50%;
  }
  label{
    right: 5px;
    bottom: 0;
  }
  .chat-box form .field{
    height: 40px;
    width: 100%;
    margin-top: 10px;
  }
  .chat-box form .field:last-child{
    margin-bottom: 5px;
  }
/*------------------------------------------*/
.popup{
        width: 60%;
    }

  #container .button_search .button{
    width: 100%;

  }
  #container .search{
    width: 100%;
    display: inline-flex;
  }
  #container .search input[type=image]{
    margin-left: 5px;
  }
  #container .search input[type=text]{
    width: 75%;
    font-size: smaller;
  }
  #container .button_search{
    width: 100%;
    display:block;
    direction: rtl;
    background-image: none;
  }
  #container .content .product-page .tanzim .product-desc-form {
    width: 100%;
    padding: 5xp;
  }
  #container .content .product-page .tanzim .product-image-pname{
    width: 100%;;
  }
  #container .content .product-item{
    width: 46%;
  }

  #container   .menu {
    display: flex;

  }

  body {
    width: 100%;
    margin: 0px;
  }
  #container {
    width: auto;
    margin-top: 0px;
    float: none;
    display: block;
  }
  #container .main_div{
    width: 100%;
  }
 .footer {
    width: auto;
  }
  #container .content{
    width: auto;
  }
  #container .content .product-item-thumbnail{
    width: 100%;
    height: 70px;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #9ce99f;
    padding: 5px;
    margin: 5px;
  }
  #container .product-page .product-image {
    width: 100%;
  }
  #container .product-page .product-image img {
    width: 100%;
  }
  #container .welcome{
    font-size: 16px;
    font-weight: bold;
    float: left;
    margin-left: 10px;
    padding-left: 10px;
    color: #2b0138;
    background-color: #ffffff;
    padding: 5px;
    border-radius: 10px;
    width: fit-content;
    margin-top: -10px;
  }
 
  #container .Side-Bar{
    display: none;
  }
  #container .Side-Bar-insied{
    display: block;
    }
  #container .support .sec-pic img{
      width: 50px;
      margin-bottom: 5px;
    }
    #container .support .sec P{
      font-family: "BTitr";
      font-weight: 700;
      font-size: 15px;
      line-height: .4;
      color: rgb(230, 100, 154);
      text-shadow: 2px 4px 4px rgba(72, 96, 231, 0.6);
    }
    #container .about .div-img{
      width: 100%;
    }
    #container .about img{
      width: 100%;
    }
    fieldset.a{
      width: 100%;
    }
    #container{
      background-image: url("green.png");
      background-size:contain;
    }
}