/* ===================================
            start fonts
=================================== */
@font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 100;
            src: url("https://storage.perfectcdn.com/q3i1fa/4e883s8981hagyut.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 200;
            src: url("https://storage.perfectcdn.com/q3i1fa/t02jnteiowuhlsia.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 300;
            src: url("https://storage.perfectcdn.com/q3i1fa/3d41to9clisfajz1.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 400;
            src: url("https://storage.perfectcdn.com/q3i1fa/zlmep3rflxi986pa.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 500;
            src: url("https://storage.perfectcdn.com/q3i1fa/zpn4jqarnw59tchd.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 600;
            src: url("https://storage.perfectcdn.com/q3i1fa/4jkozosnpdwlgnbo.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 700;
            src: url("https://storage.perfectcdn.com/q3i1fa/11tseu0tcp3p8zey.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 800;
            src: url("https://storage.perfectcdn.com/q3i1fa/rzi1bihb3q348won.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 900;
            src: url("https://storage.perfectcdn.com/q3i1fa/pfhoutle14h3dn2d.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 950;
            src: url("https://storage.perfectcdn.com/q3i1fa/j8iudf0sl80bgzkf.woff2") format("woff2");
        }
        @font-face {
            font-family: IRANYekanX;
            font-style: normal;
            font-weight: 1000;
            src: url("https://storage.perfectcdn.com/q3i1fa/403jj63ql0zrti77.woff2") format("woff2");
        }

  :root {
            --panel-font-family: IRANYekanX, system-ui, -apple-system, "Segoe UI", sans-serif;
        }

        html,
        body {
            font-family: var(--panel-font-family) !important;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
              transition: 200ms;
        }

        body :where(
            button,
            input,
            textarea,
            select,
            option,
            label,
            a,
            p,
            span,
            div,
            nav,
            aside,
            header,
            main,
            section,
            article,
            table,
            thead,
            tbody,
            tr,
            th,
            td,
            strong,
            em,
            small,
            h1,
            h2,
            h3,
            h4,
            h5,
            h6
        ) {
            font-family: var(--panel-font-family);
        }

        .font-sans,
        .font-serif,
        .font-mono {
            font-family: var(--panel-font-family) !important;
        }

        .fa,
        .fas,
        .fa-solid {
            font-family: "Font Awesome 6 Free" !important;
            font-weight: 900 !important;
        }

        .far,
        .fa-regular {
            font-family: "Font Awesome 6 Free" !important;
            font-weight: 400 !important;
        }

        .fab,
        .fa-brands {
            font-family: "Font Awesome 6 Brands" !important;
            font-weight: 400 !important;
        }

/* ===================================
             end fonts
=================================== */
hr{
			border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
  			margin-top: 1rem !important;
   			margin-bottom: 1rem !important;
  			transition: 200ms;
  			
}
.dark hr {
			border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}










/* ===================================
             start general
=================================== */




/* ===================================
             end general
=================================== */












/* ===================================
            start  drawer
=================================== */
 #drawer-bg{
   
			background-color: rgb(0 0 0 / 0.4);
   			--tw-backdrop-blur: blur(4px);
   			backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity)
 var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
   			z-index: 20;
   			inset: 0px;
   			position: fixed;
   			opacity: 0;  
   			top: 65px;
			left: 0;
			right: 0;
			bottom: 0;
}
 #drawer {
            height: calc(100dvh - 65px) !important;
            overflow-y: scroll !important;
            -webkit-overflow-scrolling: touch;
            will-change: transform;
            backface-visibility: hidden;
            transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
            z-index: 30;
            width: 18rem;
            --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
             box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
             background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
              --tw-bg-opacity: 1;
          	 padding: 1.5rem;	
            --webkit-overflow-scrolling: touch;
            color: rgb(17 24 39 / var(--tw-text-opacity, 1));
           --tw-text-opacity: 1;
            transition: 200ms;
        }

 #drawer-bg.is-visible{
   			 opacity: 1;
 		  	 visibility: visible;
}

/*LTR MODE drawer */

html[dir="ltr"] #drawer {
          left: 0;
          right: auto;
          transform: translateX(-100%);
}


/* باز است  LTR MODE drawer  وقتی  */

html[dir="ltr"] #drawer:not(.translate-x-full) {
          transform: translateX(0);
}



/*RTL MODE   drawer*/

html[dir="rtl"] #drawer {
          right: 0;
          left: auto;
          transform: translateX(100%);
}


/* باز است  RTL MODE   drawer  وقتی */

html[dir="rtl"] #drawer:not(.translate-x-full) {
          transform: translateX(0);
}

 /* وقتی تم دارک است */

 .dark #drawer{
          --tw-bg-opacity: 1;
          background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
          --tw-text-opacity: 1;
          color: rgb(243 244 246 / var(--tw-text-opacity, 1));
 }      
         
 #drawer.drawer-closing {
          pointer-events: none;
 }

 @supports not (height: 100dvh) {
   #drawer {
           height: calc(100vh - 65px) !important;
            }
  }


#drawerTheme{
  			width: 2.5rem;
  			height: 2.5rem;
			color: rgb(51 65 85 / var(--tw-text-opacity, 1));
  			background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  			border-width: 1px;
  			border-color: rgb(243 244 246 / var(--tw-border-opacity, 1));
  			border-radius: 0.5rem;
  			display: flex;
  			justify-content: center;
  			align-items: center;
  			margin-bottom: 1.5rem; 
  			transition: 200ms;
}

.dark #drawerTheme{
  			background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
			color: rgb(255 255 255 / var(--tw-text-opacity, 1));
  			border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}

/* ===================================
            end    drawer
=================================== */

      







/* ===================================
   start navbar sign in and signup
=================================== */
.navbar-sigin-signup {
  			width: 100%;
  			padding:1rem;
   			background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
			border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));	
  			border-bottom-width: 1px;
  			display: flex;
  			justify-content: space-between;
  			align-items: center;
  			z-index: 40;
  			position: fixed;
  			top: 0;
			left: 0;
			right: 0;	
  			transition: 200ms;
}
.dark .navbar-sigin-signup{
			background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
  			border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
}

/* ===================================
   end navbar sign in and signup
=================================== */










/* ===================================
    start box sign in and signup
=================================== */

/* ========= genarel ========= */

.box-signin-signup{
			background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
  			display: flex;
    		justify-content: center;
   			align-items: center;
    		transition: 200ms;
  			border-width: 1px;
  			border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
  			border-radius: 1rem;		
}
.dark .box-signin-signup{
			background-color: rgba(30, 41, 59, 0.5);
  			--tw-backdrop-blur: blur(12px);
  			border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));	
}
.auth-input {
  			background-color: var(--auth-field-bg);
  			border-color: var(--auth-field-border-default);
  			color: var(--auth-field-text);
  			background-clip: padding-box;
  			-webkit-background-clip: padding-box;
  			outline: none;
  			box-shadow: none;
  			transition: 200ms;
  			transform: none;
  			height: 42px;
}

.auth-input[readonly],
.auth-input.is-autofill-locked {
  			cursor: text;
  			opacity: 1;
  			-webkit-text-fill-color: var(--auth-field-text);
  			background-color: var(--auth-field-bg);
  			border-color: var(--auth-field-border-default);
  			box-shadow: none;
}

.auth-input:hover {
  			border-color: var(--auth-field-border-hover);
  			background-color: var(--auth-field-bg);
  			box-shadow: 0 0 0 1px var(--auth-field-hover-ring);
}

.auth-input:focus,
.auth-input.is-focused {
  			border-color: var(--auth-field-focus-border);
  			box-shadow: 0 0 0 1px var(--auth-field-focus-ring);
  			transform: none;
  			
}
.
  
.auth-input.is-filled:not(.is-invalid) {
  			border-color: var(--auth-field-border-default);
  			box-shadow: none;
}
  

.auth-input.is-filled:focus:not(.is-invalid),
.auth-input.is-filled.is-focused:not(.is-invalid) {
  			border-color: var(--auth-field-focus-border);
  			box-shadow: 0 0 0 1px var(--auth-field-focus-ring-soft);
  			
}
  

#loginForm.is-complete .auth-input.is-complete:not(.is-invalid):not(:focus):not(.is-focused),
#loginForm.is-complete .js-interactive-field.is-complete:not(.is-invalid):not(:focus):not(.is-focused) {
  			border-color: var(--auth-field-complete-border);
  			box-shadow: none;
  		
}

#loginForm.is-complete .auth-input.is-complete:not(.is-invalid):hover:not(:focus):not(.is-focused),
#loginForm.is-complete .js-interactive-field.is-complete:not(.is-invalid):hover:not(:focus):not(.is-focused) {
  			border-color: var(--auth-field-complete-border-hover);
 			box-shadow: none;
  			
}

.auth-input.is-invalid {
  			border: 1px solid var(--auth-field-error-border);
  			border-radius: 8px;
  			box-shadow: none;
  			
}

.auth-input::placeholder {
  			color: var(--auth-field-placeholder);
  			opacity: var(--auth-field-placeholder-opacity);
  			transition: color var(--auth-transition), opacity var(--auth-transition);
  			
}


/* Chrome/Safari Autofill: remove browser blue fill and keep auth preset colors */
.auth-input:-webkit-autofill,
.auth-input:-webkit-autofill:hover,
.auth-input:-webkit-autofill:active,
.js-interactive-field:-webkit-autofill,
.js-interactive-field:-webkit-autofill:hover,
.js-interactive-field:-webkit-autofill:active {
  			-webkit-box-shadow: 0 0 0 1000px var(--auth-field-bg) inset !important;
  			box-shadow: 0 0 0 1000px var(--auth-field-bg) inset !important;
  			-webkit-text-fill-color: var(--auth-field-text) !important;
  			caret-color: var(--auth-field-text);
  			background-color: var(--auth-field-bg) !important;
  			border-color: var(--auth-field-border-default);
  			
}

.auth-input:
-webkit-autofill:focus,
.auth-input:-webkit-autofill.is-focused,
.js-interactive-field:-webkit-autofill:focus,
.js-interactive-field:-webkit-autofill.is-focused {
  			-webkit-box-shadow: 0 0 0 1000px var(--auth-field-bg) inset, 0 0 0 1px var(--auth-field-focus-ring-soft) !important;
  			box-shadow: 0 0 0 1000px var(--auth-field-bg) inset, 0 0 0 1px var(--auth-field-focus-ring-soft) !important;
  			-webkit-text-fill-color: var(--auth-field-text) !important;
  			border-color: var(--auth-field-focus-border);
  			caret-color: var(--auth-field-text);
  			
}

.auth-input:-webkit-autofill.is-invalid,
.js-interactive-field:-webkit-autofill.is-invalid {
  			-webkit-box-shadow: 0 0 0 1000px var(--auth-field-bg) inset !important;
  			box-shadow: 0 0 0 1000px var(--auth-field-bg) inset !important;
  			-webkit-text-fill-color: var(--auth-field-text) !important;
  			border-color: var(--auth-field-error-border);
  			caret-color: var(--auth-field-text);
  			
}

.auth-input:-webkit-autofill::first-line,
.js-interactive-field:-webkit-autofill::first-line {
  			color: var(--auth-field-text);
  			
}

.dark .auth-input:-webkit-autofill,
.dark .auth-input:-webkit-autofill:hover,
.dark .auth-input:-webkit-autofill:active,
.dark .js-interactive-field:-webkit-autofill,
.dark .js-interactive-field:-webkit-autofill:hover,
.dark .js-interactive-field:-webkit-autofill:active {
  			border-color: #263244;
  			-webkit-box-shadow: 0 0 0 1000px #0B1220 inset !important;
  			box-shadow: 0 0 0 1000px #0B1220 inset !important;
  			
}

#loginForm.is-complete .auth-input.is-complete:-webkit-autofill:not(.is-invalid):not(:focus),
#loginForm.is-complete .js-interactive-field.is-complete:-webkit-autofill:not(.is-invalid):not(:focus) {
  			border-color: var(--auth-field-complete-border);
  			
}




.auth-primary-button {
  			background-color: var(--auth-primary-button-bg);
  			color: #FFFFFF;
  			transition :300ms ;
  			padding: 9px 20px;
   			font-size: 16px;
  			width: 100%;
    		border-radius: 6px;			
}
.auth-primary-button:hover,
.auth-primary-button:focus-visible {
 		 	background-color: var(--auth-primary-button-bg-hover);
  			transform: none;
}




/* ========= Base (Mobile) ========= */
.box-signin-signup{
			width:100%;
  			padding:16px;
}
.inbox-signin-signup{
			width: 100%;
}
.auth-primary-button{
			height:40px;
}
    
/* ========= desktap and tablet  ========= */
@media (min-width: 500px) {
  .box-signin-signup{
			width: fit-content;
    		padding: 32px;
  }
  .inbox-signin-signup{
			width: 359px;
}
  .auth-primary-button{
			height: min-content;
}
}



/* ===================================
    end box sign in and signup
=================================== */