/* ===================================
            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
=================================== */








/* ===================================
             start roots
=================================== */

:root {
  --box-border-hover-homo-background:#CBD5E1;
  --box-border-hover-hetero-background:#CBD5E1;
  --text-small-htpochrome:#6b7280;
  --sucses-background: #49ca9d38;
  --alert-text-color:#DC2626;
  --alert-background:#FEF2F2;
  --text-coloe-0F172A-F8FAFC:#0F172A;
  --background-fill-box:#ffffff;
  --background-wallpaper:#f8fafc;
  --background-main:#ffffff;
  --border-middle-dark-and-light:#e2e8f0;
  --border-intra-dark-and-light:#E2E8F0;
  --auth-field-bg: #FFFFFF;
  --auth-field-border-default: #E2E8F0;
  --auth-field-border-hover: #CBD5E1;
  --auth-field-text: #1F2937;
  --auth-field-placeholder: #64748B;
  --auth-field-placeholder-opacity: 0.84;
  --auth-field-focus-border: #10B981;
  --auth-field-focus-ring: rgba(16, 185, 129, 0.34);
  --auth-field-focus-ring-soft: rgba(16, 185, 129, 0.22);
  --auth-field-complete-border: rgba(16, 185, 129, 0.46);
  --auth-field-complete-border-hover: rgba(16, 185, 129, 0.62);
  --auth-field-hover-ring: rgba(148, 163, 184, 0.08);
  --auth-field-error-border: #EF4444;
  --auth-error-bg: #FEF2F2;
  --auth-error-text: #DC2626;
  --auth-success-bg: #ECFDF5;
  --auth-success-text: #059669;
  --auth-link-default: #4B5563;
  --auth-link-hover: #10B981;
  --auth-link-active: #065F46;
  --auth-primary-button-bg: #10B981;
  --auth-primary-button-bg-hover: #059669;
  --auth-primary-text: #0F172A;
  --auth-secondary-text: #4B5563;
  --auth-transition-fast: 200ms ease;
  --auth-transition: 220ms ease;
}

.dark {
  --box-border-hover-homo-background:#5c6573 ;
  --box-border-hover-hetero-background:#80808085;
  --text-small-htpochrome:#9ca3af;
  --sucses-background:#15b98136;
  --alert-text-color:#FEF2F2;
  --alert-background:#ef444452;
  --text-coloe-0F172A-F8FAFC:#F8FAFC;
  --background-wallpaper:#0F172A;
  --background-main:#1E293B;
  --background-fill-box:#0B1220;
  --border-middle-dark-and-light:#334155;
  --border-intra-dark-and-light:#475569;
  --auth-field-bg: #0B1220;
  --auth-field-border-default: #263244;
  --auth-field-border-hover: #334155;
  --auth-field-text: #FFFFFF;
  --auth-field-placeholder: #94A3B8;
  --auth-field-placeholder-opacity: 0.8;
  --auth-field-complete-border: rgba(52, 211, 153, 0.42);
  --auth-field-complete-border-hover: rgba(52, 211, 153, 0.56);
  --auth-field-hover-ring: transparent;
  --auth-error-bg: rgba(239, 68, 68, 0.3);
  --auth-error-text: #F87171;
  --auth-success-bg: rgba(16, 185, 129, 0.10);
  --auth-success-text: #34D399;
  --auth-link-default: #D1D5DB;
  --auth-link-active: #34D399;
  --auth-primary-text: #FFFFFF;
  --auth-secondary-text: #D1D5DB;
}
/* ===================================
             end roots
=================================== */











/* ===================================
             start general
=================================== */
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));
}

.auth-helper-text {
  			color: var(--auth-secondary-text);
  			transition: 200ms;
}
input:focus {
  			outline: none;
}
.menu-icon{
  			transition: 200ms;
}
.titre-pages {
    		display: flex;
    		flex-direction: row;
    		justify-content: flex-start;
    		align-items: center;
    		padding: 0;
    		gap: 0px;
    		margin-bottom: 25px;
}
.titre-name-page {
    		width: auto;
    		height: 30px;
    		font-weight: 700;
    		font-size: 16px;
    		margin-bottom: -2px;
    		line-height: 30px;
    		display: flex;
    		align-items: center;
    		text-align: right;
    		color: #1e293b;
    		transition: 200ms;
  			margin-top:0px;
}
.dark .titre-name-page {
    		color: #fff;
}
.titre-icon-pages {
    		width: 20px;
    		height: 20px;
   	 		color: #1e293b;
}
.dark .titre-icon-pages {
    		color: #fff;
}






@media (min-width: 1024px) {
    .titre-name-page {
        	font-size: 20px;
      		margin-top:8px;
    }
  	.titre-icon-pages {
    		width: 24px;
    		height: 24px;
   }
    .titre-pages{
			gap:5px;
   }
}
/* ===================================
             end general
=================================== */











/* ===================================
             start layout
=================================== */
.lg-aside-up-pages {
  			display: none;
  			width: 18rem;
  			background-color: #ffffff;
  			border-left: 1px solid transparent;
  			z-index: 1000;
  			transition: 200ms;
}
.dark .lg-aside-up-pages {
  			background-color: #1E293B;
  			border-left-color: #334155;
}
.header-pages {
    		flex: 1;
    		background: #fff;
    		border-bottom: 1px solid;
  			border-color: var(--border-middle-dark-and-light);
    		position: sticky;
    		top: 0;
    		transition: border-color 100ms, background-color 200ms, color 200ms;
  			z-index: 50;
}
.dark .header-pages {
    		background: #1E293B;
  
}
.lg-aside-lateral-pages {
    		display: none;
    		width: 18rem;
    		position: fixed;
    		top: 4rem;
    		bottom: 0;
    		background: #fff;
    		transition: 200ms;
}
.dark .lg-aside-lateral-pages {
    		background: #1E293B;
}
.btn-aside-lateral {
    		width: 100%;
    		font-weight: 600;
    		font-size: 0.85rem;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		gap: 0.75rem;
    		padding: 0.75rem;
   			border: 1px solid;
   			border-color: var(--border-intra-dark-and-light);
   			border-radius: 0.5rem;
   			color: #0F172A;    		
            transition: border-color 100ms, background-color 200ms, color 200ms;
}
.dark .btn-aside-lateral {
    		color: #ebedef;
}
.btn-aside-lateral:hover {
    		background-color: #5fcf770d;
}
.dark .btn-aside-lateral:hover {
    		background-color: rgb(55 65 81 / 24%);
}
.nav-item {
    		display: flex;
    		align-items: center;
    		gap: 0.75rem;
    		padding-top: 0.7rem;
    		padding-bottom: 0.7rem;
    		padding-left: 0.75rem;
    		padding-right: 0.75rem;
    		border-radius: 0.6rem;
    		color: #374151;
}
.nav-item span{
			margin-top:6px;
}
.nav-item:hover {
    		background-color: #f3f4f6;
}
.dark .nav-item {
    		color: #d1d5db;
}
.dark .nav-item:hover {
   			background-color: #374151;
}
html[dir="ltr"] .nav-item {
    		flex-direction: row;
}
html[dir="ltr"] .nav-item span.mr-auto {
    		margin-right: 0;
    		margin-left: auto;
}
html[dir="ltr"] .nav-item svg {
    		order: 1;
}
html[dir="ltr"] .nav-item span {
    		order: 2;
}



@media (min-width: 1024px) {
  .lg-aside-up-pages {
    		display: block;
  }
  .lg-aside-lateral-pages {
        	display: block;
    }
}
/* ===================================
             end layout
=================================== */












/* ===================================
            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;
}
.drawer-item {
  			display: flex;
  			align-items: center;
  			padding: 0.5rem 0.75rem;
  			padding-right: 0.25rem;
  			border-radius: 0.75rem;
}

.drawer-item:hover {
  			background-color: #f3f4f6;
}
.drawer-item-div-svg {
  			width: 2.5rem;
  			height: 2rem;
  			display: flex;
  			align-items: center;
  			justify-content: center;
}
.drawer-item-svg {
  			color: #94A3B8;
  			flex-shrink: 0;
  			width: 24px;
    		height: 24px;
}
.drawer-item-span {
  			font-size: 0.96rem;
  			font-weight: 400;
  			color: #1E293B;
  			transition: 200ms;
            margin-top: 5px;
}
.mobileSettingsSubmenu-a {
    		display: flex;
    		align-items: center;
   		    padding-left: 0.75rem;
    		padding-right: 0.75rem;
    		padding-top: 0.5rem;
    		padding-bottom: 0.5rem;
    		border-radius: 0.75rem;
    		font-size: 0.90rem;
    		color: #374151;
  			transition: 200ms;   
}
.mobileSettingsSubmenu-a span{
			 margin-top: 4px;
}
.mobileSettingsSubmenu-a:hover {
    		background-color: #f3f4f6;
}
.mobileSettingsSubmenu-div {
    		width: 2.5rem;
    		height: 2rem;
    		display: flex;
    		align-items: center;
    		justify-content: center;
    		color: #94A3B8;
    		flex-shrink: 0;
    		transition: 200ms;
}

/*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));
}
.dark .drawer-item:hover {
  			background-color: rgb(255 255 255 / 5%);
}
.dark .drawer-item-svg {
  			color: #ebedef;
}
.dark .drawer-item-span {
  			color: #F8FAFC;
}
.dark .mobileSettingsSubmenu-a {
    		color: #d1d5db;
}
.dark .mobileSettingsSubmenu-a:hover {
    		background-color: #374151;
}
.dark .mobileSettingsSubmenu-div {
    		color: #ebedef;
}

/* ===================================
            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));	
}

.js-interactive-field,
.ui-submit-btn,
.ui-toggle-btn,
.remember-option,
.remember-checkbox,
.remember-text,
.login-inline-link {
  			transition: color 200ms ease, border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease, opacity 200ms ease;
}

.auth-error-alert {
  			margin-bottom: 1rem;
  			font-size: 0.75rem;
  			border-radius: 8px;
  			padding: 0.75rem 1rem;
  			background-color: var(--alert-background) ;
  			color: var(--alert-text-color);
  			transition: 200ms;
}
.auth-success-alert {
  			margin-bottom: 1rem;
  			font-size: 0.75rem;
  			border-radius: 0.5rem;
  			padding: 0.75rem 1rem;
  			background-color:var(--sucses-background);
  			color: #059669;
      		transition: 200ms;
}
.dark .auth-success-alert {
  			color: #34d399;
}


.js-interactive-field {
    		width: 100%;
    		border-radius: 0.5rem;
    		padding-left: 1rem;
    		padding-right: 1rem;
    		padding-top: 7px;
    		padding-bottom: 7px;
    		height: 2.75rem;
    		font-size: 0.75rem;
    		line-height: 1.25rem;
    		background-color: #ffffff;
    		color: #1f2937;
    		border: 1px solid var(--border-middle-dark-and-light);
   			text-align: left;
}
.dark .js-interactive-field {
    		background-color: #0B1220;
    		color: #ffffff;
}
.js-interactive-field:hover {
  			border-color: var(--box-border-hover-hetero-background);
      		transition-duration: 300ms;
}
.js-interactive-field:focus,
.js-interactive-field.is-focused {
  			border-color: #10B981;
  			box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.34);
  			transform: none;
}
.dark .js-interactive-field:focus,
.dark .js-interactive-field.is-focused {
  			border-color: #10B981;
  			box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.34);
  			transform: none;
}
 /*.js-interactive-field.is-filled:focus:not(.is-invalid),
.js-interactive-field.is-filled.is-focused:not(.is-invalid) {
  			border-color: #10B981 ;
  			box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.22);
}*/
.js-interactive-field.is-filled:not(.is-invalid) {
  			border-color: #E2E8F0;
  			box-shadow: none;
}
.dark .js-interactive-field.is-filled:not(.is-invalid) {
  			border-color: #263244;
  			box-shadow: none; 
} 

.js-interactive-field.is-invalid {
  			border: 1px solid #ef44447d;
  			border-radius: 8px;
  			box-shadow: none;
}

.js-interactive-field:active {
  			transform: translateY(0);
}

.js-interactive-field::placeholder {
  			color: #64748B;
  			opacity: 0.84;
  			transition: color 220ms ease, opacity 220ms ease;
}

.dark .js-interactive-field::placeholder {
  			color: #94A3B8;
  			opacity: 0.8;
}
@media (prefers-reduced-motion: reduce) {
  .js-interactive-field,
  .ui-submit-btn,
  .ui-toggle-btn,
  .remember-option,
  .remember-checkbox,
  .remember-text,
  .login-inline-link,
  .js-interactive-field::placeholder,
  .js-interactive-field:-webkit-autofill {
    		transition: none !important;
  }
}
 .js-interactive-field.is-invalid,
.js-interactive-field.is-filled,
.remember-checkbox,
.login-inline-link {
  			animation: none !important;
}
		

/* Chrome / Edge / Safari Autofill */

.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);
}

.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);
}

.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);
}

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

/* Dark Mode */

.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;
  			-webkit-text-fill-color: #fff !important;
  			caret-color: #fff;
}

/* Complete State */

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



/*    sign remember     */

.remember-signin{
    		display: flex;
    		justify-content: space-between;
    		align-items: center;
   		 	font-size: 0.875rem; /* 14px */
    		color: #0F172A;
}
.dark .remember-signin{
   			 color: #ffffff;
}
.remember-option {
  			display: inline-flex;
  			align-items: center;
  			gap: 0.625rem;
  			padding: 0;
  			margin-inline-start: 0;
  			background-color: transparent;
  			color: inherit;
  			line-height: 1;
  			user-select: none;
  			color: #0F172A;
  			cursor: pointer;
}

.remember-option:focus-within {
  			color: inherit;
 			background-color: transparent;
}

.dark .remember-option:focus-within {
  			background-color: transparent;
  			color: #FFFFFF;
}
.remember-checkbox {
  			appearance: none;
  			-webkit-appearance: none;
  			width: 18px;
  			height: 18px;
  			margin: 0;
  			flex: 0 0 18px;
  			display: inline-grid;
 			place-content: center;
  			border: 1.5px solid #CBD5E1;
  			border-radius: 0.4rem;
  			background-color: #ffffff;
        	cursor: pointer;
  			box-shadow: inset 0 1px 1px rgba(15, 23, 42, 0.03);
}

.dark .remember-checkbox {
 			 border-color: rgba(148, 163, 184, 0.5);
  			background-color: #0B1220;
}

.remember-checkbox::after {
  			content: "";
  			width: 5px;
  			height: 9px;
  			border: solid #ffffff;
  			border-width: 0 2px 2px 0;
  			transform: rotate(45deg) scale(0.82);
  			opacity: 0;
}

.remember-checkbox:hover {
  			border-color: rgba(16, 185, 129, 0.58);
  			box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.08);
}

.dark .remember-checkbox:hover {
  			border-color: rgba(52, 211, 153, 0.72);
}

.remember-checkbox:checked {
  			border-color: #10B981;
  			background-color: #10B981;
  			box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.14);
}

.remember-checkbox:checked::after {
  			opacity: 1;
}

.remember-checkbox:focus-visible {
  			outline: none;
  			box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
.remember-text {
  			font-weight: inherit;
  			letter-spacing: normal;
  			display: inline-flex;
  			align-items: center;
  			color: #4B5563;
      		margin-top:4%;
  			font-size: 0.875rem;
}
.dark .remember-text {
  			color: #D1D5DB;
}
.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;
  			margin-top: 0 !important;
}
.auth-primary-button:hover,
.auth-primary-button:focus-visible {
 			background-color: var(--auth-primary-button-bg-hover);
  			transform: none;
}
.login-inline-link {
  			text-decoration: none;
  			opacity: 1;
  			color: #10B981;
  			transition: color 200ms ease, opacity 200ms ease;
}
.login-inline-link:hover,
.login-inline-link:focus-visible {
  			color: var(--auth-primary-button-bg-hover);
  			opacity: 0.96;
  			text-decoration: none;
}
.dark .login-inline-link:hover,
.dark .login-inline-link:focus-visible {
  			color: var(--auth-primary-button-bg-hover);
}
.login-inline-link:active {
  			color: var(--auth-primary-button-bg-hover);
  			opacity: 1;
}
.dark .login-inline-link:active {
 			color: var(--auth-primary-button-bg-hover);
}
.login-inline-link:focus-visible {
  			color: var(--auth-primary-button-bg-hover);
  			outline: none;
  			box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.12);
  			border-radius: 0.25rem;
}
.box-or-khat-signin-signup {
    		display: flex;
    		align-items: center;
    		gap: 1rem;          /* gap-4 = 16px */
    		margin-top: 1.5rem; /* my-6 = 24px */
    		margin-bottom: 1.5rem;
}
.khat-signin-signup {
    		flex-grow: 1;
    		height: 1px;
    		background-color: #E2E8F0;
  			transition: 200ms;
}
.or-signin-signup {
    		transition: 200ms;
    		color: #0F172A;
    		font-size: 1rem;        /* text-base = 16px */
    		font-weight: 500;       /* font-medium */
}
.dark .or-signin-signup {
    		color: #ffffff;
}

.dark .khat-signin-signup {
    		background-color: rgba(255, 255, 255, 0.1);
}
.btn-sign-eae-icon{
			 position: absolute;
    		 top: 50%;
 		     right: 0.75rem; /* 12px */
  		     transform: translateY(-50%);
    	  	 cursor: pointer;
    		 transition: color 200ms ease-out;
  			 box-shadow: none;
}
.btn-sign-eae-icon:hover svg {
  			color: #10B981;
}
.btn-sign-eae-icon:focus-visible {
  			border-radius: 0.5rem;
  			box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
.sign-eae-icon{
			width: 1.25rem;      /* 20px */
    		height: 1.25rem;     /* 20px */
    		color: #CBD5E1;
}
.dark .sign-eae-icon{
    		color: #9CA3AF;      /* gray-400 */
}

/*  reset pass*/ 
.reset-card {    		
    		border-radius: 1rem; /* rounded-2xl */  		
    		background-color: #FFFFFF;
    		border: 1px solid #E2E8F0;
  			transition: 200ms;
}
.dark .reset-card{
            background-color: rgba(30, 41, 59, 0.5);
  			border-color: rgb(71 85 105 / var(--tw-border-opacity, 1));
}
.reset-card .auth-page-title {
  			font-size: 20px;
  			line-height: 30px;
  			font-weight: 700;
  			color: #0F172A;
  			transition: 200ms;
}

.dark .reset-card .auth-page-title {
  			color: #FFFFFF;
}

.reset-card .reset-help-copy {
  			transition: 200ms;
  			font-size: 11px;
  			line-height: 22px;
  			font-weight: 400;
  			color: #4B5563;
}

.dark .reset-card .reset-help-copy {
  			color: #FEFCE8;
}

/*    btn google     */
 .custom-google-wrapper {
  			position: relative;
  			width: 100%;
 			max-width: 390px;
  			height: 48px;
  			margin: 0 auto; /* اگر می‌خواید وسط باشه */
}
.your-custom-google-btn {
  			display: flex;
  			align-items: center;
  			justify-content: center;
  			gap: 12px;
  			width: 100%;
  			padding: 9px 20px;
  			border-radius: 6px;
  			border: 1px solid #E2E8F0;
  			background-color: #ffffff;
  			color: #0F172A;
  			font-size: 15px;
  			font-weight: 400;
  			cursor: pointer;
  			transition: all 0.2s ease;
  			pointer-events: none; /* مهم: کلیک به لایه گوگل بره */
}
.dark .your-custom-google-btn{
			background-color: #0B1220;
    		color: #F8FAFC;
    		border-color: #263244;
}
.custom-google-wrapper:hover .your-custom-google-btn {
  			border-color: var(--box-border-hover-hetero-background);
  			transition-duration: 300ms;
}
.google-official-overlay,
#googleSignupBtn,
#googleSignupBtn > div,
#googleSignupBtn iframe {
  width: 100% !important;
  height: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;
}


.google-icon {
  			flex-shrink: 0;
}
/* لایه شفاف گوگل که کل دکمه رو می‌پوشاند */
.google-official-overlay {
  			position: absolute;
  			top: 0;
  			left: 0;
  			width: 100%;
  			height: 100%;
  			opacity: 0;
  			overflow: hidden;
  			z-index: 2;
  			cursor: pointer;
}
#googleSignupBtn {
  			width: 100% !important;
  			height: 100% !important;
}
#googleSignupBtn > div {
  			width: 100% !important;
  			height: 100% !important;
  			margin: 0 !important;
}




/* ========= Base (Mobile) ========= */
.box-signin-signup{
			width:100%;
  			padding:16px;
}
.inbox-signin-signup{
			width: 100%;
}
.auth-primary-button{
  			height:40px;
}

/*  reset pass   */
.reset-card{
			width:100%;
  			padding:16px;		
}
.reset-card-box{
  			width: 100%;
   }
.your-custom-google-btn{
			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;
}
  .js-interactive-field {
        padding-top: 0.75rem;
        padding-bottom: 0.75rem;
        height: auto;
        font-size: 0.9rem;
    }
  .box-or-khat-signin-signup {
        margin-top: 1rem;    /* sm:my-4 = 16px */
        margin-bottom: 1rem;
    }
  
  /* reset pass*/
  .reset-card{
			width: fit-content;
    		padding: 32px;
    }
  .reset-card-box{
  			width: 359px;
   }
  .reset-card .reset-help-copy {
  			font-size: 13px;
}
  .reset-card .auth-page-title{
  			font-size: 22px;
  }
  .your-custom-google-btn{
			height: min-content;	
}

}




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










/* ===================================
            start new orders
=================================== */
.order-page-preload #order-form,
	.order-page-preload #order-form *,
	.order-page-preload .chosen-container,
	.order-page-preload .chosen-container *,
	.order-page-preload .select2-container,
	.order-page-preload .select2-container *,
	.order-page-preload .emerald-field-shell,
	.order-page-preload .emerald-field-control {
			transition: none !important;
			animation: none !important;
}
.neworder-box{
    		width: 100%;
    		background:var( --background-main);
    		border: 1px solid var( --border-middle-dark-and-light);
    		border-radius: 1rem;
    		box-sizing: border-box;
			transition: border-color 100ms, background-color 200ms, color 200ms;
}
.neworder-box-div-social {
    		display: grid;
    		grid-template-columns: repeat(2, minmax(0, 1fr));
    		justify-content: space-between;
    		align-items: center;
    		gap: 1rem;
    		width: 100%;
}
.order-social-tab {
    		display: flex;
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;
    		padding: 12px;
    		gap: 8px;
    		width: 100%;
    		height: 56px;
   		 	background:var( --background-main);
    		border: 1px solid var(--border-intra-dark-and-light);
    		border-radius: 0.5rem;
    		box-sizing: border-box;
    		cursor: pointer;
			transition: border-color 100ms, background-color 200ms, color 200ms;
  			color:var(--text-coloe-0F172A-F8FAFC);
}
.order-social-tab:hover {
    		border-color: #10B981;
    		color: #10B981;
}
.dark .order-social-tab:hover {
    		border-color: #10B981;
    		color: #10B981;
}
/* حالت فعال */
.order-social-tab-active {
  			display: flex;
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;
    		padding: 12px;
    		gap: 8px;
    		width: 100%;
    		height: 56px;
  			border: 1px solid  #10B981;
    		border-radius: 0.5rem;
    		color: #10B981;
  			cursor: pointer;
}

/*-------------------chosen cintainer----------------*/

.chosen-container {

}
.chosen-single {
			height: 44px !important;
			padding: 7px 16px !important;
    		border: 1px solid var(--border-intra-dark-and-light) !important;
			border-radius: 0.5rem !important;
			background: transparent !important;
			box-shadow: none !important;
			line-height: normal !important;
			display: flex !important;
			align-items: center !important;
			color: #64748B !important;
			font-size: 0.75rem !important;
			outline: none !important;
			transform: none !important;
  			transition: border-color 100ms, background-color 200ms, color 200ms !important;
}
.chosen-container-single  .chosen-single:hover{
			border-color: var(--box-border-hover-homo-background) !important;
}
.lable-form-neworder {
    		font-size: 0.75rem;       
    		font-weight: 400;       
    		color: var(--text-coloe-0F172A-F8FAFC) !important;
    		width: 100%;           
    		text-align: left;       
 			 transition:color 200ms !important;
}
.chosen-single span {
			margin-right: 0 !important;
			line-height: normal !important;
			padding: 0 !important;
			color:var(--text-small-htpochrome) !important;
			font-size: 0.75rem !important;
			width: 100% !important;
			white-space: nowrap !important;
			overflow: hidden !important;
			text-overflow: ellipsis !important;
			text-align: left !important;
   			transition:  color 200ms !important;
}
.chosen-container-single .chosen-single div {
			top: 50% !important;
			right: 16px !important;
			transform: translateY(-50%) !important;
			width: auto !important;
  			transition:  color 200ms !important;
}
.chosen-container-single .chosen-single div b {
			background: none !important;
			position: relative;
}
.chosen-container-single .chosen-single div b:after {
			content: '';
			position: absolute;
			top: 50%;
			right: 0;
			width: 0;
			height: 0;
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 4px solid #64748B;	
}
.chosen-container-active.chosen-with-drop .chosen-single div b:after {
			border-top: none;
			border-bottom: 4px solid #64748B;
}
.dark .chosen-container-single .chosen-single div b:after {
			border-top-color: #CBD5E1;
}
.dark .chosen-container-active.chosen-with-drop .chosen-single div b:after {
			border-bottom-color: #CBD5E1;
}
.chosen-container .chosen-drop {
      		background: var(--background-main) !important;
    		border: 1px solid var(--border-intra-dark-and-light) !important;
			border-radius: 0.5rem !important;
			margin-top: 4px !important;
			box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
			overflow: hidden !important;
			width: 100% !important;
			max-width: 100% !important;
			box-sizing: border-box !important;
			z-index: 1060 !important;
      		transition: border-color 100ms, background-color 200ms, color 200ms !important;
}
.chosen-container .chosen-results {
			padding: 0 !important;
			margin: 0 !important;
			max-height: 304px !important;
			overflow-x: hidden !important;
			overflow-y: auto !important;
			-webkit-overflow-scrolling: touch;
}
.chosen-container .chosen-results li {
			padding: 8px 16px !important;
			font-size: 0.75rem !important;
			line-height: normal !important;
			color: #0f172a !important;
			cursor: pointer !important;
			white-space: nowrap !important;
			overflow: hidden !important;
			text-overflow: ellipsis !important;
}
.chosen-container .chosen-results li.highlighted {
			background: #f1f5f9 !important;
			color: #0f172a !important;
}
.chosen-container .chosen-results li.result-selected {
			background: #f1f5f9 !important;
			color: #0f172a !important;
}
.chosen-container .chosen-search {
			display: none !important;
			padding: 0 !important;
}
.chosen-container .chosen-search input {
			padding: 8px !important;
			border: 0.5px solid #e2e8f0 !important;
			border-radius: 0.375rem !important;
			font-size: 0.75rem !important;
			background: white !important;
			width: 100% !important;
			box-sizing: border-box !important;
}
.dark .chosen-container .chosen-drop {
			background: #1E293B !important;
			border-color: #475569 !important;
}
.dark .chosen-container .chosen-results li {
			color: #F8FAFC !important;
			background: #1E293B !important;
}
.dark .chosen-container .chosen-results li.highlighted {
			background: #334155 !important;
			color: white !important;
}
.dark .chosen-container .chosen-results li.result-selected {
			background: #334155 !important;
			color: #f8fafc !important;
}
.dark .chosen-container .chosen-search input {
			background: #1E293B !important;
			border-color: #475569 !important;
			color: #F8FAFC !important;
}

	

/*---------------select 2 container---------------*/

 .select2-selection--single{
			height: 44px !important;
    		padding: 7px 16px !important;
    		border: 1px solid var(--border-intra-dark-and-light) !important;
    		border-radius: 0.5rem !important;
    		background: transparent !important;
    		box-shadow: none !important;
    		line-height: normal !important;
    		display: flex !important;
    		align-items: center !important;
    		color: #64748B !important;
    		font-size: 0.75rem !important;
    		outline: none !important;
    		transform: none !important;
    		transition: border-color 100ms, background-color 200ms, color 200ms !important;
   			-webkit-user-select: none  !important;
			user-select: none  !important;
}
.select2-selection--single:hover{
			border-color: var(--box-border-hover-homo-background) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
			margin-right: 0 !important;
    		line-height: normal !important;
    		padding: 0 !important;
    		color: var(--text-small-htpochrome) !important;
    		font-size: 0.75rem !important;
    		width: 100% !important;
    		white-space: nowrap !important;
    		overflow: hidden !important;
    		text-overflow: ellipsis !important;
    		text-align: left !important;
    		transition: color 200ms !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
			position: absolute !important;
			top: 22px !important;
			{% if site['rtl'] %}left{% else %}right{% endif %}: 16px !important;
			transform: none !important;
			height: 0 !important;
			width: auto !important;
}
.select2-container--open .select2-selection--single .select2-selection__arrow {
	
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
			border-color: #64748B transparent transparent transparent !important;
			border-width: 4px 4px 0 4px !important;
			margin-left: -13px !important;
			margin-top: -2px !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
			border-color: transparent transparent #64748B  transparent !important;
			border-width: 0 4px 4px 4px !important;
}
.dark .select2-container--default .select2-selection--single .select2-selection__arrow b {
			border-color: #CBD5E1 transparent transparent transparent !important;
			border-width: 4px 4px 0 4px !important;
			margin-left: -13px !important;
			margin-top: -2px !important;
}
.dark .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
			border-color: transparent transparent #CBD5E1  transparent !important;
			border-width: 0 4px 4px 4px !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear,
.select2-container--default .select2-selection__clear,
.select2-selection__clear {
			display: none !important;
}
.select2-dropdown {
			display: block !important;
			border: 0.5px solid #e2e8f0 !important;
			border-radius: 0.5rem !important;
			margin-top: 4px !important;
			box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important;
			overflow: hidden !important;
			max-width: calc(100vw - 32px) !important;
			box-sizing: border-box !important;
			z-index: 1060 !important;
}
.select2-results__options {
			max-height: 304px !important;
			overflow-x: hidden !important;
			overflow-y: auto !important;
			-webkit-overflow-scrolling: touch;
}
.select2-results__option {
  			background: var( --background-main) !important;
			padding: 8px 16px !important;
			font-size: 0.75rem !important;
			cursor: pointer !important;
			white-space: nowrap !important;
			overflow: hidden !important;
			text-overflow: ellipsis !important;
}
.select2-results__option--highlighted[aria-selected] {
			background: #f1f5f9 !important;
			color: #0f172a !important;
}
.select2-container--default .select2-results__option[aria-selected=true] {
			background: #f1f5f9 !important;
			color: #0f172a !important;
}
.select2-search__field-icon {
			display: none;
}
.select2-search--dropdown {
			display: none !important;
			padding: 0 !important;
}
.select2-search--dropdown .select2-search__field {
			padding: 6px 8px !important;
			border: 0.5px solid #e2e8f0 !important;
			border-radius: 0.375rem !important;
			font-size: 0.75rem !important;
			outline: none !important;
			color: #0f172a !important;
			width: 100% !important;
}
.select2-container {
			z-index: 1;
}
.select2-container--open,
.chosen-container-active {
			z-index: 1050 !important;
}
.select2-container.order-dropdown-active,
.chosen-container.order-dropdown-active {
			z-index: 1060 !important;
}
/* Match border weight for selected order fields */
#orderform-service-type_chosen .chosen-single,
#orderform-service_chosen .chosen-single,{
			border-width: 1px !important;
}
.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
			color: #CBD5E1 !important;
}
.dark .select2-dropdown {
  			border-color: #475569 !important;
}
.dark .select2-results__option {
			color: #F8FAFC !important;
}
 .select2-results__option a{
     	    padding:0;
    		color: #0f172a !important;
}
.dark .select2-results__option a{
   			color: #F8FAFC !important;
}
.dark .select2-results__option--highlighted[aria-selected] {
			background: #334155 !important;
			color: white !important;
}
.dark .select2-container--default .select2-results__option[aria-selected=true] {
			background: #334155 !important;
			color: #f8fafc !important;
}
.dark .select2-search--dropdown .select2-search__field {
			background: #1E293B !important;
			border-color: #475569 !important;
			color: #F8FAFC !important;
}

/*-----------------service-details----------------*/

.service-details {
  			flex-direction: column;
  			justify-content: flex-start;
  			align-items: flex-end;
  			padding: 1rem;
  			gap: 0.625rem;
  			width: 100%;
  			height: fit-content;
  			background-color: var(--background-main);
  			border: 0.5px solid var(--border-intra-dark-and-light);
  			border-radius: 1rem;
  			transition: border-color 100ms, background-color 200ms, color 200ms !important;
}

/*---------------feilds--------------*/
/* =========================================
   Disable Chrome Autofill Styles
   ========================================= */

.emerald-field-shell-input:-webkit-autofill,
.emerald-field-shell-input:-webkit-autofill:hover,
.emerald-field-shell-input:-webkit-autofill:focus,
.emerald-field-shell-input:-webkit-autofill:active,

.emerald-field-control:-webkit-autofill,
.emerald-field-control:-webkit-autofill:hover,
.emerald-field-control:-webkit-autofill:focus,
.emerald-field-control:-webkit-autofill:active {
    -webkit-text-fill-color: #CBD5E1 !important;
    -webkit-box-shadow: 0 0 0 1000px #0B1220 inset !important;
    box-shadow: 0 0 0 1000px #0B1220 inset !important;

    background-color: #0B1220 !important;
    background-image: none !important;

    border: none !important;
    outline: none !important;
    transition: background-color 9999s ease-in-out 0s !important;
}


/* Light Mode */
.emerald-field-shell-input:-webkit-autofill,
.emerald-field-shell-input:-webkit-autofill:hover,
.emerald-field-shell-input:-webkit-autofill:focus,
.emerald-field-shell-input:-webkit-autofill:active,

.emerald-field-control:-webkit-autofill,
.emerald-field-control:-webkit-autofill:hover,
.emerald-field-control:-webkit-autofill:focus,
.emerald-field-control:-webkit-autofill:active {
    -webkit-text-fill-color: #64748B !important;
    -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
    box-shadow: 0 0 0 1000px #FFFFFF inset !important;

    background-color: #FFFFFF !important;
}
.emerald-field-shell {
  			display: flex;
 			flex-direction: row;
 			justify-content: space-between;
  			align-items: center;
  			padding: 7px 1rem;
  			width: 100%;
  			height: 44px;
  			border: 1px solid var(--border-intra-dark-and-light) !important;
 			border-radius: 0.5rem;
 			margin-top: 3px;
  			background-color:transparent !important;
  			box-shadow: none !important;
  			transition: border-color 100ms, background-color 200ms, color 200ms !important;
  			transform: none !important;
}
.emerald-field-shell:hover{
			border-color: var(--box-border-hover-homo-background) !important;
}
#fields .emerald-field-shell .emerald-field-control {
    		background-color: transparent !important;
    		color: var(--text-small-htpochrome) !important;
    		caret-color: #10B981;
    		outline: none !important;
    		box-shadow: none !important;
    		transform: none !important;
    		text-align: left;
    		font-size: 0.75rem; /* text-xs */
    		border: none !important;
    		order: 0;
  			transition: color 200ms !important;
}

#fields .emerald-field-shell .emerald-field-control::placeholder {
			margin-right: 0 !important;
    		line-height: normal !important;
    		padding: 0 !important;
    		color: var(--text-small-htpochrome) !important;
    		font-size: 0.75rem !important;
    		width: 100% !important;
    		white-space: nowrap !important;
    		overflow: hidden !important;
    		text-overflow: ellipsis !important;
    		text-align: left !important;
    		transition: color 200ms !important;
}
#fields .form-group.fields input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.hidden):not(.emerald-unstyled),
#fields .form-group.fields textarea,
#fields .form-group.fields select {
			display: flex;
    		flex-direction: row;
    		justify-content: space-between;
    		align-items: center;
    		padding: 7px 1rem;
    		width: 100%;
    		height: 44px;
    		border: 1px solid var(--border-intra-dark-and-light) !important;
    		border-radius: 0.5rem;
    		margin-top: 3px;
    		background-color: transparent !important;
    		box-shadow: none !important;
    		transition: border-color 100ms, background-color 200ms, color 200ms !important;
    		transform: none !important;
}
}
#fields .form-group.fields textarea {
			min-height: 120px;
			resize: vertical;
}

/*----------------min-max----------------*/

#fields .minmax-box {
    		display: flex;
    		flex-direction: row;
    		justify-content: flex-start;
    		align-items: center;
      		padding: 0.5rem;
    		width: 100%;
    		height: 34px;
   			background-color: #f8fafc;
   			border: 0.5px solid #e2e8f0;
    		border-radius: 0.5rem;    
    		margin-top: 0.8rem;
  			transition: border-color 100ms, background-color 180ms !important;
}
.dark #fields .minmax-box {
    		background-color: #0B1220 !important;
 	   		border-color: #334155 !important;
}
.minmax-box-span {
    		font-size: 0.75rem;
    		line-height: 1rem;
    		font-weight: 400;
    		color: #475569;
    		text-align: start;
  			transition: color 200ms !important;
}
.dark .minmax-box-span {
    		color: #CBD5E1;	
}

/*------------------box-dollar------------------*/

.box-dollar-new-order {
    		transition: 200ms;   
    		display: flex;
    		flex-direction: row;
    		justify-content: center;
    		align-items: center;    
    		padding:7px 1rem;   
    		width: 100%;
    		height: 44px;
  			background-color: rgb(34 197 94 / 0.1);
    		border-radius: 0.5rem;
}
.box-dollar-new-order-span {
    		font-size: 1rem;
    		line-height: 1.5rem;
   			font-weight: 700;
   		 	color: #15803D;
  			transition: color 200ms !important;
}
.dark .box-dollar-new-order-span {
    		color: #4ADE80;
}

/*-----------btn-new-order--------------*/

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

/*-------------------استایل های فوکوس و هاور-------------*/

#fields .form-group.fields input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.hidden):not(.emerald-unstyled):hover,
	#fields .form-group.fields textarea:hover,
	#fields .form-group.fields select:hover,{
		border-color: #CBD5E1 !important;
		box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.08) !important;
		transform: none !important;
	}
	.dark #fields .form-group.fields input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.hidden):not(.emerald-unstyled):hover,
	.dark #fields .form-group.fields textarea:hover,
	.dark #fields .form-group.fields select:hover, {
		border-color: rgba(148, 163, 184, 0.34) !important;
		box-shadow: 0 0 0 1px rgba(148, 163, 184, 0.10) !important;
		transform: none !important;
	}
	.emerald-field-shell.is-focused,
	#fields .form-group.fields input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.hidden):not(.emerald-unstyled):focus,
	#fields .form-group.fields textarea:focus,
	#fields .form-group.fields select:focus,
	.chosen-container-active .chosen-single,
	.select2-container--focus .select2-selection--single,
	.select2-container--default.select2-container--focus .select2-selection--single,
	.select2-container--open .select2-selection--single {
		border-color: #10B981 !important;
		box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.34) !important;
		outline: none !important;
		transform: none !important;
	}
	.dark .emerald-field-shell.is-focused,
	.dark #fields .form-group.fields input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.hidden):not(.emerald-unstyled):focus,
	.dark #fields .form-group.fields textarea:focus,
	.dark #fields .form-group.fields select:focus,
	.dark .chosen-container-active .chosen-single,
	.dark .select2-container--focus .select2-selection--single,
	.dark .select2-container--default.select2-container--focus .select2-selection--single,
	.dark .select2-container--open .select2-selection--single {
		border-color: #10B981 !important;
		box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.34) !important;
}
.emerald-field-shell.is-filled,
.emerald-filled,
.select2-container--default .select2-selection--single.emerald-filled,
#fields .form-group.fields input.is-filled:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.hidden):not(.emerald-unstyled),
	#fields .form-group.fields textarea.is-filled,
	#fields .form-group.fields select.is-filled {
		border-color: #E2E8F0 !important;
		box-shadow: none !important;
}
.dark .emerald-field-shell.is-filled,
.emerald-filled,
.dark .select2-container--default .select2-selection--single.emerald-filled,
.dark #fields .form-group.fields input.is-filled:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not(.hidden):not(.emerald-unstyled),
.dark #fields .form-group.fields textarea.is-filled,
.dark #fields .form-group.fields select.is-filled {
		border-color: rgba(255, 255, 255, 0.2) !important;
		box-shadow: none !important;
}
.emerald-field-shell.is-filled.is-focused,
.chosen-container-active .chosen-single.emerald-filled,
.select2-container--focus .select2-selection--single.emerald-filled,
.select2-container--default.select2-container--focus .select2-selection--single.emerald-filled,
.select2-container--open .select2-selection--single.emerald-filled {
		border-color: #10B981 !important;
		box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.22) !important;
}
#fields .form-group.fields.has-error .emerald-field-shell,
#fields .form-group.fields.error .emerald-field-shell,
#fields .emerald-field-shell.is-invalid {
		border-color: #EF4444 !important;
		box-shadow: none !important;
}
.chosen-container .chosen-search input:focus,
.select2-search--dropdown .select2-search__field:focus {
		border-color: #10B981 !important;
		box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.34) !important;
		outline: none !important;
}
.dark .chosen-container .chosen-search input:focus,
.dark .select2-search--dropdown .select2-search__field:focus {
		box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.34) !important;
}

/*----------------------min whith 768px-----------------------*/


@media (min-width: 768px) {
    .neworder-box-div-social {
        	grid-template-columns: repeat(3, minmax(0, 1fr));
    }
   .service-details {
     		padding: 1.5rem;
    }
   .order-submit-btn{
  			width: 140px;
   }
}
@media (min-width: 1024px) {
    .neworder-box-div-social {
        	display: flex;
       		flex-direction: row;
        	flex-wrap: nowrap;
    }
}
/* ===================================
            end new orders
=================================== */




/* ====================== اسکرول سفارشی کل سایت ====================== */

/* ====================== اسکرول سفارشی + حذف کامل فلش ====================== */
html,
body {
  height: 100%;
  overflow: hidden;
}

/* کانتینر اصلی که اسکرول می‌کند */
.main-scroll,
.sidebar-scroll,
.authenticated-content,
.drawer-page,
main,
.min-h-screen,
.select2-dropdown .select2-results__options {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* اندازه اسکرول */
.authenticated-content::-webkit-scrollbar,
.sidebar-scroll::-webkit-scrollbar,
.main-scroll::-webkit-scrollbar,
.drawer-page::-webkit-scrollbar,
main::-webkit-scrollbar,
.min-h-screen::-webkit-scrollbar,
.select2-dropdown .select2-results__options::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

/* پس‌زمینه اسکرول */
.authenticated-content::-webkit-scrollbar-track,
.sidebar-scroll::-webkit-scrollbar-track,
.main-scroll::-webkit-scrollbar-track,
.drawer-page::-webkit-scrollbar-track,
main::-webkit-scrollbar-track,
.min-h-screen::-webkit-scrollbar-track,
.select2-dropdown .select2-results__options::-webkit-scrollbar-track {
  background: transparent;
}

/* خود نوار اسکرول */
.authenticated-content::-webkit-scrollbar-thumb,
.sidebar-scroll::-webkit-scrollbar-thumb,
.main-scroll::-webkit-scrollbar-thumb,
.drawer-page::-webkit-scrollbar-thumb,
main::-webkit-scrollbar-thumb,
.min-h-screen::-webkit-scrollbar-thumb,
.select2-dropdown .select2-results__options::-webkit-scrollbar-thumb {
  background: var(--sucses-background);
  border-radius: 20px;
}

/* هنگام Hover */
.authenticated-content::-webkit-scrollbar-thumb:hover,
.sidebar-scroll::-webkit-scrollbar-thumb:hover,
.main-scroll::-webkit-scrollbar-thumb:hover,
.drawer-page::-webkit-scrollbar-thumb:hover,
main::-webkit-scrollbar-thumb:hover,
.min-h-screen::-webkit-scrollbar-thumb:hover,
.select2-dropdown .select2-results__options::-webkit-scrollbar-thumb:hover {
  background: #34d399;
}

/* حذف دکمه‌های اسکرول */
.authenticated-content::-webkit-scrollbar-button,
.sidebar-scroll::-webkit-scrollbar-button,
.main-scroll::-webkit-scrollbar-button,
.drawer-page::-webkit-scrollbar-button,
main::-webkit-scrollbar-button,
.min-h-screen::-webkit-scrollbar-button,
.select2-dropdown .select2-results__options::-webkit-scrollbar-button {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  background: transparent !important;
  background-image: none !important;
}




/* هدر و فوتر بالاتر از همه */
header,
.header-z-index,
footer {
  z-index: 50 !important;
  position: relative;
}