@media (max-width: 1080px) {
     
      .bishtarin{
          
          margin:0px;
          margin-top:-15%;
          
      }     
     
      .asnaf_div
      {
          margin:0px;
          margin-top:0%;
          max-height:35%;
          border:none;
          padding-top:10px;
      }   
       .list_item_group_under {
            padding-top:15px;
        }
    }    
    
    
    @media (max-width: 768px) {
      
      
       
        .min_display_hide
        {
            display:none;
        }
        .list_item_group_under {
            padding-top:15px;
            /*flex-direction: column;*/
        }
        #multiplay_1{
            
            display:none;
        }
        #multiplay_2{
            
            display:block;
        }
      
      .size_slide {
          max-height:40%;
          padding:0px;
          /*border:1px #2196F3 solid;*/
      }
      
      .asnaf_div
      {
          margin:0px;
          margin-top:0px;
          max-height:38%;
          border:none;
          padding-top:10px;
      }
      
      .bishtarin{
          
          margin:0px;
          margin-top:-15%;
          
      }
      .flower {
          transform: scale(1.8);
        }
         
     }
     @media (min-width: 768px) {
        .list_item_group_under {
            flex-direction: initial;
        }
        
        .flower {
          transform: scale(2);
        }
        #multiplay_1{
            
            display:block;
        }
        #multiplay_2{
            
            display:none;
        }  
         
         
      .size_slide {
          max-height:65%;
          padding:5px;
          padding-bottom:0px;
      }     
      
      .asnaf_div{
          
          padding:10px;
          padding-bottom:0px;
          border:none;
      }
      

      
     } 

       @media (min-width: 1080px) {
     
      .bishtarin{
          
          margin:0px;
          margin-top:-10%;
          
      }     
      .size_slide {
          height:400px;
          padding:0px;
          /*border:1px #2196F3 solid;*/
      }
      
        
    }
     
     @media (max-width: 500px) {
         
        .ver_hor{
            
            flex-direction: column;
        }
         
        .list_item_group_under {
            height:200px;
            flex-direction: column;
        }
        .list_item_group {
            max-height: 112px;
        }
      .bishtarin{
          
          margin:0px;
          margin-top:-32%;
          
      }
      
      .size_slide {
          max-height:28%;
          padding:0px;
          /*border:1px #2196F3 solid;*/
      }
        .asnaf_div
          {
              margin:0px;
              margin-top:3%;
              max-height:30%;
              
              padding-top:10px;
          }
    }
    
    body::before {
       
      opacity: .7; 
      background: url('/img/back.jpg');
    }
    

@media (min-width: 410px) {

    .menu_window{
        width:140px;
        height:140px;
    }
    .title_menu_window
    {
        width:140px;
        margin:0px;
        margin-top:110px;
        margin-right: 0px;
        border: 0px #fdf318 solid;
    }

}

@media (max-width: 410px) {
    
    .menu_window{
        width:120px;
        height:100px;
    }
    .title_menu_window
    {
        width:120px;
        margin:0px;
        margin-top:70px;
        margin-right: 0px;
        border: 0px #fdf318 solid;
    }


}
@media (max-width: 390px) {
    
    .menu_window{
        width:120px;
        height:100px;
    }
    .title_menu_window
    {
        width:120px;
        margin:0px;
        margin-top:70px;
        margin-right: 0px;
        border: 0px #fdf318 solid;
    }


}
@media (min-width: 390px) and (max-width: 410px) {
    
    .menu_window{
        width:110px;
        height:110px;
    }
    .title_menu_window
    {
        width:110px;
        margin:0px;
        margin-top:80px;
        margin-right: 0px;
        border: 0px #fdf318 solid;
    }


}
     @media (max-width: 360px) {
      
      .size_slide {
          max-height:35%;
          /*border:1px #2196F3 solid;*/
      }
      
      .asnaf_div
      {
          margin:0px;
          margin-top:3%;
          max-height:53%;
          
      }
         
     }
.shadow:before
{
    
    -moz-box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
    -webkit-box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
    box-shadow:inset 0px 0px 6px 6px rgba(255,255,255,1);
}     
     
     
.glass {
  background-image: radial-gradient(circle closest-side, rgba(38,38,38,0.2), rgba(0,0,0,0.63));
  background-size: 100% 100%;
  border-radius: 50%;
  position: relative;
}
.glass::before {
  position: absolute;
  width: 56%;
  height: 26%;
  top: 4%;
  left: 22%;
  border-radius: 50%;
  background-image: linear-gradient(to bottom, rgba(207,207,207,0.23), rgba(30,30,30,0.06));
  content: '';
}
.glass::after {
  position: absolute;
  width: 38%;
  height: 19%;
  bottom: 3%;
  left: 31%;
  border-radius: 50%;
  background-image: linear-gradient(to bottom, rgba(93,93,93,0.1), rgba(0,0,0,0.18));
  content: '';
}
.flower {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  cursor: pointer;
  position: fixed;
}
.flower .spinner,
.flower .inner,
.flower .counterspin {
  height: 100%;
}
.flower .spinner {
  -webkit-animation: spin 100s infinite linear;
          animation: spin 100s infinite linear;
}
.flower .counterspin {
  -webkit-animation: counter-spin 45s infinite linear;
          animation: counter-spin 45s infinite linear;
}
.flower .cover {
  width: 120px;
  height: 120px;
  background-image: url("https://tarigh1111.com/public/files/kabe.png");
  background-repeat: no-repeat;
  background-size: 80%;
  border-radius: 50%;
  box-shadow:0 0 19px -39px #f9a60b, 0 0 87px 13px #f9a60b;
  position: absolute;
  top: 0;
  background-position:center;
}
.flower a {
  display: block;
}
.flower .child {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  position: absolute;
  top: 0;
}
.flower .child .leaf {
  height: 100%;
  border-radius: 50%;
  /*visibility: hidden;*/
  transition: transform 3.2s ease-in-out;
}
.flower .child .leaf img {
    width: 100%;
    height: 100%;
    left: 27px;
    top: -44px;
    position: absolute;
    border: none;
}
.flower .child:nth-child(1) {
  transform: rotate(-90deg);
}
.flower .child:nth-child(1) .leaf {
  /*background-color: #3535e0;*/
  /*background-size: 100%;*/
  /*opacity: 0.94;*/
  /*transition: transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;*/
}
.flower .child:nth-child(1) .leaf .glass-holder {
  /*height: 100%;*/
  transform: rotate(90deg);
}
.flower .child:nth-child(2) {
  transform: rotate(-18deg);
}
.flower .child:nth-child(2) .leaf {
  /*background-color: #f00;*/
  background-size: 100%;
  opacity: 0.94;
  transition: transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
}
.flower .child:nth-child(2) .leaf .glass-holder {
  /*height: 100%;*/
  transform: rotate(18deg);
}
.flower .child:nth-child(3) {
  transform: rotate(54deg);
}
.flower .child:nth-child(3) .leaf {
  /*background-color: #00bd00;*/
  background-size: 100%;
  opacity: 0.94;
  transition: transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
}
.flower .child:nth-child(3) .leaf .glass-holder {
  /*height: 100%;*/
  transform: rotate(-54deg);
}
.flower .child:nth-child(4) {
  transform: rotate(126deg);
}
.flower .child:nth-child(4) .leaf {
  /*background-color: #ff0;*/
  background-size: 100%;
  opacity: 0.94;
  transition: transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
}
.flower .child:nth-child(4) .leaf .glass-holder {
  /*height: 100%;*/
  transform: rotate(-126deg);
}
.flower .child:nth-child(5) {
  transform: rotate(204deg);
}
.flower .child:nth-child(5) .leaf {
  /*background-color: #ebe8e8;*/
  background-size: 100%;
  opacity: 0.94;
  transition: transform 3.2s ease-in-out, box-shadow 0.16s ease-in-out, visibility 3.2s linear;
}
.flower .child:nth-child(5) .leaf .glass-holder {
  /*height: 100%;*/
  transform: rotate(-198deg);
}
.flower .glass {
  height: 100%;
  transition: transform 3.2s ease-in-out;
}

.flower .inner {
  transform: scale(0.294117647058824);
}
.flower .leaf {
  visibility: visible;
  transform: rotate(720deg) translateX(144px) rotate(2250deg);
}
.flower .leaf:hover {
  /*box-shadow: 0 0 34px #d3d9ff, 0 0 0 1px #000, inset 0 1px 0 rgba(255,255,255,0.2);*/
}
.flower .leaf .glass {
  transform: rotate(-2970deg);
}

a {
  outline: 0;
}

@-webkit-keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
@keyframes spin {
  to {
    transform: rotate(1turn);
  }
}
@-webkit-keyframes counter-spin {
  to {
    transform: rotate(-1turn);
  }
}
@keyframes counter-spin {
  to {
    transform: rotate(-1turn);
  }
}
    
    
/**/
.button_hover{
    background:linear-gradient(0deg, #000 0%, #002b58 100%);
}
.button_hover:hover{
    background:linear-gradient(0deg, #000 0%, #025fbe 100%);
}


/**/

label, .bubble {
	display: block;
	-webkit-tap-highlight-color: transparent;
}
label {
	animation: float 4s ease-in-out infinite;
}
.bubble, .bubble:before, .bubble:after  {
	transition-duration: 0.2s;
}
.bubble, .bubble:after {
	/*border-radius: 50%;*/
}
.bubble {
	/*background-image:*/
	/*	radial-gradient(8% 8% at 22% 28%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),*/
	/*	radial-gradient(8% 8% at 23% 27%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),*/
	/*	radial-gradient(8% 8% at 24% 26%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),*/
	/*	radial-gradient(8% 8% at 25% 25%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),*/
	/*	radial-gradient(8% 8% at 26% 24%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),*/
	/*	radial-gradient(8% 8% at 27% 23%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%),*/
	/*	radial-gradient(8% 8% at 28% 22%,hsl(0,0%,100%) 45%,hsla(0,0%,100%,0) 50%);*/
	/*box-shadow:*/
	/*	0 -0.06em 0.1em hsl(0,90%,100%) inset,*/
	/*	0 -0.15em 0.4em hsl(0,90%,45%) inset,*/
	/*	0 0.05em 0.05em hsl(0,90%,45%) inset,*/
	/*	0.05em 0 0.1em hsl(0,90%,100%) inset,*/
	/*	-0.05em 0 0.1em hsl(0,90%,100%) inset,*/
	/*	0 0.1em 0.4em hsl(0,90%,60%) inset;*/
	cursor: pointer;
	position: relative;
	width: 100px;
	height: 100px;
	transform-style: preserve-3d;
	transition-property: box-shadow, transform, width, height;
	transition-timing-function: ease-in-out, ease-in-out, var(--bubbleTiming), var(--bubbleTiming);
	will-change: transform;
	-webkit-appearance: none;
	appearance: none;
	z-index: 0;
}
.bubble:before, .bubble:after {
	content: "";
	display: block;
	position: absolute;
	transition-timing-function: var(--bubbleTiming);
}
.bubble:before {
	border-radius: 0.75em;
	/*box-shadow:*/
	/*	0 0 0 0.5em hsl(0,0%,100%) inset;*/
	filter: drop-shadow(0.6em 0.6em 4px hsla(0,0%,0%,0.2));
	top: 50%;
	left: 50%;
	width: 1.5em;
	height: 1.5em;
	transform: translate3d(-50%,-50%,-1px);
	z-index: -1;
}
.bubble:after {
	/*background:*/
	/*	radial-gradient(100% 100% at center,hsla(0,0%,0%,0) 35%,hsla(0,0%,0%,0.2) 48%,hsla(0,0%,0%,0) 50%);*/
	filter: blur(4px);
	top: 0.6em;
	left: 0.6em;
	width: 100%;
	height: 100%;
	transform: translate3d(0,0,-1px);
	z-index: -2;
}
.bubble:focus, .bubble:hover {
	transform: scale(1.1);
	outline: none;
}
.bubble:focus:active, .bubble:hover:active {
	width: 3.6em;
	height: 2.4em;
}
.bubble:focus:before, .bubble:hover:before {
	filter: drop-shadow(0.75em 0.75em 4px hsla(0,0%,0%,0.2));
}
.bubble:focus:after, .bubble:hover:after {
	transform: translate3d(0.15em,0.15em,-1px);
}
.bubble:checked {
	/*box-shadow:*/
	/*	0 -0.06em 0.1em hsl(120,90%,100%) inset,*/
	/*	0 -0.15em 0.4em hsl(120,90%,45%) inset,*/
	/*	0 0.05em 0.05em hsl(120,90%,45%) inset,*/
	/*	0.05em 0 0.1em hsl(120,90%,100%) inset,*/
	/*	-0.05em 0 0.1em hsl(120,90%,100%) inset,*/
	/*	0 0.1em 0.4em hsl(120,90%,60%) inset;*/
}
.bubble:checked:before {
	border-radius: 0.25em;
	width: 0.5em;
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	label {
		animation: none;
	}
	.bubble, .bubble:before, .bubble:after {
		transition-duration: 0s;
	}
	.bubble:focus, .bubble:hover {
		transform: scale(1);
	}
	.bubble:focus:active, .bubble:hover:active {
		width: 3em;
		height: 3em;
	}
	.bubble:focus:before, .bubble:hover:before {
		filter: drop-shadow(0.6em 0.6em 4px hsla(0,0%,0%,0.2));
	}
	.bubble:focus:after, .bubble:hover:after {
		transform: translate3d(0,0,-1px);
	}
}
/* Animations */
@keyframes float {
	from, to {
		transform: translate(0,3%);
	}
	25% {
		transform: translate(-3%,0);
	}
	50% {
		transform: translate(0,-3%);
	}
	75% {
		transform: translate(3%,0);
	}
}

/**/
body {
  background-color: #002;
  background-image: radial-gradient(circle at center, #002a55, #002);
  color: #fff;
  height: 100vh;
  line-height: 1.5;
}



/**/

/**/

/**/

/**/


canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index:-1;
}



/**/
/**/
/**/
/**/
/*/*/
/**/
/**/
/**/
.loader {
    position: relative;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: linear-gradient(#212529, #84cdfa, #5ad1cd);
    animation: animate 2.5s linear infinite;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.loader span {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    /*background: linear-gradient(#007bff, #84cdfa, #5ad1cd);*/
}

.loader span:nth-child(1) {
    filter: blur(5px);
}

.loader span:nth-child(2) {
    filter: blur(10px);
}

.loader span:nth-child(3) {
    filter: blur(25px);
}

.loader span:nth-child(4) {
    filter: blur(50px);
}

.loader:after {
    content: '';
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;
    background: #f1f1f1;
    border: solid white 10px;
    border-radius: 50%;
}

/**/
/**/
/**/
/**/
/**/
/**/
/*/*/
/*/*/

/*checkbox */

[type=checkbox] {
  width: 2rem;
  height: 2rem;
  color: dodgerblue;
  vertical-align: middle;
  -webkit-appearance: none;
  background: none;
  border: 0;
  outline: 0;
  flex-grow: 0;
  border-radius: 50%;
  background-color: #FFFFFF;
  transition: background 300ms;
  cursor: pointer;
}


/* Pseudo element for check styling */

[type=checkbox]::before {
  content: "";
  color: transparent;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: 0;
  background-color: transparent;
  background-size: contain;
  box-shadow: inset 0 0 0 1px #CCD3D8;
}


/* Checked */

[type=checkbox]:checked {
  background-color: currentcolor;
}

[type=checkbox]:checked::before {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}


/* Disabled */

[type=checkbox]:disabled {
  background-color: #CCD3D8;
  opacity: 0.84;
  cursor: not-allowed;
}




/*checkbox */

[type=radio] {
  width: 2rem;
  height: 2rem;
  color: dodgerblue;
  vertical-align: middle;
  -webkit-appearance: none;
  background: none;
  border: 0;
  outline: 0;
  flex-grow: 0;
  border-radius: 50%;
  background-color: #FFFFFF;
  transition: background 300ms;
  cursor: pointer;
}


/* Pseudo element for check styling */

[type=radio]::before {
  content: "";
  color: transparent;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: 0;
  background-color: transparent;
  background-size: contain;
  box-shadow: inset 0 0 0 1px #CCD3D8;
}


/* Checked */

[type=radio]:checked {
  background-color: currentcolor;
}

[type=radio]:checked::before {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}


/* Disabled */

[type=radio]:disabled {
  background-color: #CCD3D8;
  opacity: 0.84;
  cursor: not-allowed;
}
/* IE */

[type=radio]::-ms-check {
  content: "";
  color: transparent;
  display: block;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  border: 0;
  background-color: transparent;
  background-size: contain;
  box-shadow: inset 0 0 0 1px #CCD3D8;
}

[type=radio]:checked::-ms-check {
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Cpath d='M15.88 8.29L10 14.17l-1.88-1.88a.996.996 0 1 0-1.41 1.41l2.59 2.59c.39.39 1.02.39 1.41 0L17.3 9.7a.996.996 0 0 0 0-1.41c-.39-.39-1.03-.39-1.42 0z' fill='%23fff'/%3E %3C/svg%3E");
}

/**/
/**/
/**/
/**/
/**/
/**/
/*menu_dashboard*/

.card_menu {
  position: inherit;
    top: 15px;
    right: 0px;
    width:100%;
}

.menu_menu {
  height:90vh;
  width: 55px;
  background-color: #ffffff;
  border-radius: 10px;
  box-shadow: 10px 0 50px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  transition: 0.5s;
}

.menu_menu.active {
  width: 100%;
}

.toggle {
  position: absolute;
  top: -20px;
  right: 6px;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  z-index: 1;
  background-color: #000000;
  border: 4px solid #666666;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/*.line-1,*/
/*.line-2 {*/
/*  height: 2px;*/
/*  width: 15px;*/
/*  background-color: #ffffff;*/
/*  transition: 0.5s ease;*/
/*}*/

/*.line-1 {*/
/*  transform: rotate(-35deg) translate(5px, 8px);*/
/*}*/

/*.line-2 {*/
/*  transform: rotate(35deg) translate(-8px, 0px);*/
/*}*/

.menu_menu.active .line-1 {
  transform: rotate(-90deg);
}

/*.menu_menu.active .line-2 {*/
/*  transform: rotate(45deg) translate(-5px, 6px);*/
/*}*/

.ul_menu {
  margin-top:20px;
  position: inherit;
  width: 100%;
}

.li_menu {
    margin: 0px;
    position: inherit;
    list-style: none;
    height: 55px;
    width: 100%;
    padding-left: 23px;
    align-items: center;
    cursor: pointer;
    padding-top: 9px;
    padding-right: 5px;
    border-bottom: 1px #eee solid;
    transform: scale(0.94);
    
}
@keyframes anim-flipX {
  0% {
    opacity: 0;
    transform: rotateX(90deg);
  }
  50% {
    opacity: 1;
    transform: rotateX(720deg);
  }
  100% {
    /* animate nothing to pause animation at the end */
    opacity: 1;
    transform: rotateX(720deg);
  }
}
.li_menu:hover {
  background-color: #dddddd;
}

.span_menu {
  margin-left: 20px;
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  color:#000;
  position:absolute;
  margin-right: 45px;
  margin-bottom: 12px;
  font-size:13px;
  display: inline-block;
  opacity: 0;
  
  
 
}

.menu_menu.active .span_menu {
  opacity: 1;
  color:#000;
  transform: scale(0.94);
 animation: 2s anim-popoutin ease ;
  visibility: inherit;

}
@keyframes anim-popoutin {
  0% {
    transform: scale(0);
    opacity: 0;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  25% {
    transform: scale(1.5); 
    opacity: 1;
    text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);
  }
  50% {
    transform: scale(1);
    opacity: 1;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    /* animate nothing to add pause at the end of animation */
    transform: scale(1);
    opacity: 1;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
  }
}


@keyframes scale {
  100% {
    transform: scale(1);
  }
}
.menu_menu.active .span_under_menu {
  visibility: hidden;

}
/**/
/**/
/**/
/**/
/*/progressbar*/
.progress-holder{
  position: fixed;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #007bff;
    overflow: hidden;
    top: 150px;
}
.semi-circle{
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: 50%;
    position:absolute;
    top:0px;
    left:0px;
}
.left-block{
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: #ccc;
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
}
.right-block{
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 50%;
    background: #ccc;
    border-top-right-radius:50%;
    border-bottom-right-radius:50%;
    transform-origin: left center;
}
.mask{
    width: 80%;
    height: 80%;
    position: absolute;
    left: 10%;
    top: 10%;
    background: #fff;
    border-radius: 50%;
    text-align:center;
   }

.mask span{
color: #007bff;
    font-size: 20px;
    font-family: Arial;
    position: absolute;
    width: 100%;
    text-align: center;
    top: calc(50% - 16px);
    left: calc(0px);
}

option {
  font-size: 14px;
  background-color: #ffffff;
  height:30px;
    
}

option:before {
  height:30px;
  content: ">";
  font-size: 12px;
  display: none;
  padding:5px;
  color: #fff;
}

option:hover:before {
  display: inline;
}
/*///////////////////////////////////////////////////////*/





.swiper-container-gallery {
  width: 100%;
  padding-top: 15px;
  padding-bottom: 50px;

}

.swiper-slide-gallery {
  background-position: center;
  background-size: cover;
  width: 150px;
  background-color: #fff;
  overflow: hidden;
  border-radius: 8px;
}

.picture {
  width: 150px;
  height: 150px;
  overflow: hidden;
}
.picture img {
  display: block;
  width: 100%;
  height: 100%;
  padding:0px;
  -o-object-fit: cover;
     object-fit: cover;
}
.picture video {
  display: block;
  width: 100%;
  height: 100%;
  padding:0px;
  -o-object-fit: cover;
     object-fit: cover;
}
.detail {
    margin: 0px;
    position: absolute;
    font-size: 10px;
    max-height: 80px;
    background: #000000bd;
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
    min-height: 50px;
}
.detail h3 {
  margin: 0;
  font-size: 20px;
}
.detail span {
  display: block;
  font-size: 16px;
  color: #f44336;
}

/**/

/**/

/**/

/**/

/**/
.lable_input .lable{
    margin:0px;
    font-size:11px;
    color:#fff;
    margin-top:-44px;
    padding: 2px;
    padding-right: 5px;
    padding-left: 5px;
    border-radius: 5px;
    margin-left:auto;
    margin-right:25px;
    z-index:0;
    
}
.bg_shafaf_dark{
    background-color:#00000082;
}


/**/
/**/
/**/
/**/
/*menu button class*/
/**/
/**/
/**/
/**/




.container {
  
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  padding-right:0px;
  padding-left:0px;
}

.container .btn1 {
  position: relative;
  width: 20%;
  height: 50px;
  margin: 10px;
  padding:0px;
  margin-right: 0px;
  margin-left: 0px;
}

.container .btn1 a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-2);
  box-shadow: 0 15px 35px var(--color-3);
  border-top: 1px solid var(--color-4);
  border-bottom: 1px solid var(--color-4);
  border-radius: 30px;
  color: var(--color-white);
  z-index: 1;
  /*font-weight: 400;*/
  /*letter-spacing: 1px;*/
  text-decoration: none;
  overflow: hidden;
  transition: 0.5s;
  font-size:12px;
  color:#fff;
  backdrop-filter: blur(15px);
}

.container .btn1:hover a {
  /*letter-spacing: 3px;*/
}

.container .btn1 a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 100%;
  background: linear-gradient(to left, var(--color-gradient-1), transparent);
  transform: skewX(45deg) translateX(0);
  transition: 0.5s;
}

.container .btn1:hover a::before {
    transform: skewX(45deg) translateX(200%);
}

.container .btn1::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -5px;
  width: 30px;
  height: 10px;
  background: red;
  border-radius: 10px;
  transition: 0.5s;
  transition-delay: 0s;
}

.container .btn1:hover::before {
  bottom: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.2s;
}


.container .btn1::after {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -5px;
  width: 30px;
  height: 10px;
  background: red;
  border-radius: 10px;
  transition: 0.5;
  transition-delay: 0s;
}

.container .btn1:hover::after {
  top: 0;
  height: 50%;
  width: 80%;
  border-radius: 30px;
  transition-delay: 0.2s;
}

.container .btn1:nth-child(1)::before,
.container .btn1:nth-child(1)::after {
  background: #ff1f71;
  box-shadow: 0 0 5px #ff1f71,
              0 0 15px #ff1f71,
              0 0 30px #ff1f71,
              0 0 60px #ff1f71;
}

.container .btn2:nth-child(1)::before,
.container .btn2:nth-child(1)::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff,
              0 0 15px #2bd2ff,
              0 0 30px #2bd2ff,
              0 0 60px #2bd2ff;
}
.container .btn1:nth-child(2)::before,
.container .btn1:nth-child(2)::after {
  background: #2bd2ff;
  box-shadow: 0 0 5px #2bd2ff,
              0 0 15px #2bd2ff,
              0 0 30px #2bd2ff,
              0 0 60px #2bd2ff;
}

.container .btn1:nth-child(3)::before,
.container .btn1:nth-child(3)::after {
  background: #1eff45;
  box-shadow: 0 0 5px #1eff45,
              0 0 15px #1eff45,
              0 0 30px #1eff45,
              0 0 60px #1eff45;
}


.selected {
  background: blue;
  color: white;
}

.table_div{
    margin:0px;
    font-size:12px;
    width:60px;
    border-left:1px #eee solid;
    justify-content:center;
    align-items:center;
    text-align:center;
}