html {
  font-size: 16px;
}
@font-face {
	font-family: YekanBakh;
	font-style: normal;
	font-weight: bold;
	src: url('../font/woff/YekanBakhFaNum-Bold.woff') format('woff'),
	url('../font/woff2/YekanBakhFaNum-Bold.woff2') format('woff2');
}
h1, h2 , h3 , h4, h5 , h6 , span , p , div , li , a , ul , table,td , th, small , textarea , input , label{
    font-family:YekanBakh;
}
body {
    font-family:YekanBakh;
  margin: 0;
  font-family: "Roboto", sans-serif;
  font-size: 0.875rem;
  line-height: 1.42857143;
  color: #333;
  text-align: right;
  direction: rtl;
  background-color: rgba(142, 213, 87, .10980392156862745)!important;
}
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {

    background-color: #7fd140 !important;
 
}
.nav-link {
  
    color: #0c611d!important;
  
}
input[type="text"]{
    padding: 5px;
    border: 1px solid #aaa;
    border-radius: 3px;
}

header {
  position: fixed;
  /*top: 0;
  left: 0;*/
  z-index: 999;

  width: 100%;
  height: 50px;

  background: #eee;
  box-shadow: rgba(0, 0, 0, 0.5) 0 -20px 20px 20px;
}

header h1 {
  margin: 0;
  padding: 0 15px;
  height: 50px;
  line-height: 50px;
  font-weight: 400;
  font-size: 18px;
  float: left;
}

.wrapper {  
  padding: 15px 30px;
  transition: all 0.3s ease-out;
  margin: 0;
}

.wrapper section{
      padding-top: 70px;
  }
  
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.telegram-field{
    background-color: #d2eaff !important;
    border-radius: 10px;
    padding: 1rem;
}

/* Small devices (tablets)
==========================*/
@media (min-width: 768px) {

}


/* Medium devices (desktops)
==========================*/
@media (min-width: 992px) {

  body {
    overflow-y: scroll;
  }

  .logo img {
    width: 200px;
    text-align: center;
    margin-top: 10px;
    float: none;
  }

 
  
  

}
#set-user-random{
     width: 10%;
    background-color: #c3e2e7;
    right: 1rem!important;
    left:unset;
    top: 1rem;
    right: unset;
    border-radius: 20px !important;
    line-height: 3rem;
    text-align: center;
        cursor: pointer;
}
#all-reminder{
     width: 10%;
    background-color: #c3e2e7;
    right: 1rem!important;
    left:unset;
    bottom: 1rem;
    right: unset;
    border-radius: 20px !important;
    line-height: 3rem;
    text-align: center;
        cursor: pointer;
}
#register-reminder{
     width: 10%;
    background-color: #c3e2e7;
    left: 1rem;
    bottom: 1rem;
    right: unset;
    border-radius: 20px !important;
    line-height: 3rem;
    text-align: center;
    cursor: pointer;
}
#recent-reminders .card {
   
   max-height: 54rem;
    overflow: scroll;
    
}
#custom_alert {
    position: absolute;
    border-radius: 3rem ;
    z-index: 999999999;
    display: flex;
       top: 40%;
    right: 35%;
    left: 35%;
    width: 30%;
    height: 20%;
    justify-content: center;
    align-content: center;
    align-items: center;
}    
div#recent-reminders {
    width: 100%;
    position:fixed;
            height: 100%;
        background: #b4ddc3;
        z-index: 99999;
        align-content: center;
    align-items: center;
}
label.usage, span.usage{background: #eee; margin-left: 150px; padding:5px}


/* start check mark style*/

:root {
	--hue: 223;
	--bg: hsl(var(--hue),90%,20%);
	--fg: hsl(var(--hue),10%,90%);
	--primary: hsl(var(--hue),90%,55%);
	--primary-dn: hsl(var(--hue),90%,45%);

}




.check-spinner__worm-a,
.check-spinner__worm-b {
	visibility: hidden;
}
.check-spinner , .cross-spinner {

bottom: 2rem;
    position: relative;

}
.check-spinner__worm-a {
	animation: worm-a 1.2s linear;
}
.check-spinner__worm-b {
	animation: worm-b 1.2s 1.2s linear forwards;
	stroke-dashoffset: 0.01;
}
.check-spinner__circle {
	animation: circle 0.2s 2.3s cubic-bezier(0,0,.42,1.33) forwards;
}

/* Animations */
@keyframes worm-a {
	from {
		stroke-dashoffset: 36.1;
		visibility: visible;
	}
	to {
		stroke-dashoffset: -252.9;
		visibility: visible;
	}
}
@keyframes worm-b {
	from {
		animation-timing-function: linear;
		stroke-dasharray: 0 0 72.2 341.3;
		visibility: visible;
	}
	69.7% {
		animation-timing-function: ease-out;
		stroke-dasharray: 0 207 45 341.3;
		visibility: visible;
	}
	to {
		animation-timing-function: ease-out;
		stroke-dasharray: 0 297 45 341.3;
		visibility: visible;
	}
}
@keyframes circle {
	from { r: 0; }
	to { r: 50px; }
}
@keyframes reappear {
	from { visibility: hidden; }
	to { visibility: visible; }
}
/*  end check mark style */
#date-check , #date-cross , #date-empty{
   position: relative;
   max-height: 6rem;
}
.pdp-default  ,  #register-reminder , #all-reminder , #set-user-random{
    display: none;
   
}

/* copy to clipboard style */
:root {
  /* Scale setup */
  --button-height: 27; /* in px */
  --height-to-scale: 33; /* in px */
  --scale-ratio: calc(var(--height-to-scale) / var(--button-height));

  /* Slide setup */
  --button-height-px: 27px;
  --button-vertical-padding-px: 6px;
  --button-content-spacing-px: calc(
    var(--button-height-px) + var(--button-vertical-padding-px) * 2
  );
  --slide-step-1: calc(var(--button-height-px) * -1);
  --slide-step-2: calc(var(--button-height-px) * -2);
}

.proxy-copy-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 33px;
}

/* Button styles (use your own) */

.proxy-copy-button {
    margin-left: 1rem;
  display: flex;
  justify-content: center;
  align-items: start;
  flex-wrap: nowrap;
  height: var(--button-height-px);
  padding: var(--button-vertical-padding-px) 9px;
  border-style: none;
  border-radius: 6px;
  background-color: #f3f6f9;
  color: #708ebc;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12.605px;
  line-height: 15px;
  cursor: pointer;
  transition: all 200ms;
}
a.btn.btn--neon {
    width: 7%;
    display: flex;
    font-size: 12px;
border-radius: 20px;
    height: 100%;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.proxy-copy-button:hover {
  background-color: #e4ebf2;
  color: #708ebc;
}

.proxy-copy-button:focus {
  background-color: #e4ebf2;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.7);
  outline: none;
}

.proxy-copy-button:active {
  background-color: #10428f;
  color: #f3f6f9;
}

.copy {
  display: flex;
  align-items: center;
  justify-content: start;
}

.icon {
  margin-right: 6px;
}

/* Align content to animate */

.proxy-copy-button {
  overflow: hidden;
  width: 12rem;
}

.copied {
  visibility: hidden;
  margin-top: var(--button-content-spacing-px);
}

/* Animations */

.proxy-copy-button.animate {
background-color: #82f536bf;
    color: #616161;
  box-shadow: none;
  -webkit-animation: scale 3s cubic-bezier(1, -0.5, 0, 1.5) forwards;
          animation: scale 3s cubic-bezier(1, -0.5, 0, 1.5) forwards;
}

.animate .content {
  -webkit-animation: slide 3s cubic-bezier(1, -0.5, 0, 1.5) forwards;
          animation: slide 3s cubic-bezier(1, -0.5, 0, 1.5) forwards;
}

.animate .copied {
  visibility: visible;
}

@-webkit-keyframes scale {
  0% {
    transform: none;
  }
  12.5% {
    transform: none;
  }
  25% {
    transform: scale(var(--scale-ratio));
  }
  37.5% {
    transform: scale(var(--scale-ratio));
  }
  50% {
    transform: none;
  }
  100% {
    transform: none;
  }
}

@keyframes scale {
  0% {
    transform: none;
  }
  12.5% {
    transform: none;
  }
  25% {
    transform: scale(var(--scale-ratio));
  }
  37.5% {
    transform: scale(var(--scale-ratio));
  }
  50% {
    transform: none;
  }
  100% {
    transform: none;
  }
}

@-webkit-keyframes slide {
  0% {
    transform: none;
  }
  12.5% {
    transform: translateY(var(--slide-step-1));
  }
  25% {
    transform: translateY(var(--slide-step-1));
  }
  37.5% {
    transform: translateY(var(--slide-step-2));
  }
  87.5% {
    transform: translateY(var(--slide-step-2));
  }
  100% {
    transform: none;
  }
}

@keyframes slide {
  0% {
    transform: none;
  }
  12.5% {
    transform: translateY(var(--slide-step-1));
  }
  25% {
    transform: translateY(var(--slide-step-1));
  }
  37.5% {
    transform: translateY(var(--slide-step-2));
  }
  87.5% {
    transform: translateY(var(--slide-step-2));
  }
  100% {
    transform: none;
  }
}
.tl-link {
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
}
.tl-proxy-host.input-group.m-3 , .tl-proxy-secret.input-group.m-3 {
    width: 36%;
}
.tl-proxy-port.input-group.m-3 {
    width: 10%;
}
.proxy-tl-wrapper.input-group-text {
    width: 95%;
}
/* neon btn style */

.btn--neon {
  color: #03e9f4;
  overflow: hidden;
  transition: 0.5s;
  filter: hue-rotate(290deg);
  position: relative;
}

.btn--neon:hover {
  background: #03e9f4;
  color: #050801;
  box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 200px #03e9f4;
}

.btn--neon::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  bottom: 2px;
}

.btn--neon span {
  position: absolute;
  background: linear-gradient(180deg, transparent, #03e9f4);
}

/* Span animations */
.btn--neon span:nth-child(1) {
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  animation: borderAnimation1 1s linear infinite;
}

.btn--neon span:nth-child(2) {
  top: 0;
  right: 0;
  width: 3px;
  height: 100%;
  animation: borderAnimation2 1s linear infinite;
  animation-delay: 0.25s;
}

.btn--neon span:nth-child(3) {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  animation: borderAnimation3 1s linear infinite;
}

.btn--neon span:nth-child(4) {
  top: 0;
  left: 0;
  width: 3px;
  height: 100%;
  animation: borderAnimation4 2s linear infinite;
  animation-delay: 0.25s;
}

/* Keyframes */
@keyframes borderAnimation1 {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

@keyframes borderAnimation2 {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}

@keyframes borderAnimation3 {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

@keyframes borderAnimation4 {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}
/* eset keys style */
.tl-eset-key.input-group.m-3 {
    width: 20%;
}
.tl-keys {
    display: flex
;
    flex-wrap: wrap;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
}
/* liquid btn style */

.nav-item {
    font: 700 30px consolas;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    padding: 2rem;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    transition: 0.2s;
    height: 100%;
    max-height: 2rem;
}

.nav-item .active span {
    position: relative;
    z-index: 0;
    color: #fff;
}

.nav-item .liquid.active {
    position: absolute;
    top: -60px;
    left: 0;
    width: 100%;
    height: 200px;
    background: #8ed557; /* ✅ سبز به جای آبی */
    box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.7);
    z-index: -1;
    transition: 0.6s;
}

.nav-item .liquid.active::after,
.nav-item .liquid.active::before {
    position: absolute;
    content: "";
     width: 140%;
    height: 211%;
    bottom: -10rem;
    left: 6rem;
    transform: translate(-25%, -75%);
}
.nav-fill .nav-item .nav-link, .nav-justified .nav-item .nav-link {
  
    background: rgb(87 213 110 / 20%);
  
}
.nav-item .liquid {
    position: absolute;
    top: 0px;
    left: 0;
 
}
.nav-item .liquid.active::after {
    border-radius: 45%;
    background: rgb(20, 20, 20); /* ✅ برای کنتراست بهتر */
    box-shadow: 0 0 10px 5px #8ed557, inset 0 0 5px #8ed557;
    animation: animate 5s linear infinite;
    opacity: 0.8;
}

.nav-item .liquid.active::before {
    border-radius: 40%;
    box-shadow: 0 0 10px rgba(26, 26, 26, 0.5), inset 0 0 5px rgba(26, 26, 26, 0.5);
    background: rgba(26, 26, 26, 0.5);
    animation: animate 7s linear infinite;
}

@keyframes animate {
    0% {
        transform: translate(-25%, -75%) rotate(0);
    }
    100% {
        transform: translate(-25%, -75%) rotate(360deg);
    }
}

.nav-item:hover .liquid.active {
    top: -120px;
}

.nav-item:hover {
    box-shadow: 0 0 5px #8ed557, inset 0 0 5px #8ed557; /* ✅ سبز روشن */
    transition-delay: 0.2s;
}