@import url('../../Font/Avenir/Avenir_Fontface.css');


/*#region Root*/
:root {
    /*Colors*/
    --projectMainAccent_Color: #ffbb00;
    --projectMainAccent_BGColor: #ffbb00;
    --BackgroundColor_Color: rgb(247, 247, 247);
    --BackgroundColor_Color: #F7F7F7;
    --BackgroundColor_Dark_Color: #333333;
    --BahmanBlack_Color: #1F1F1F;
    --Blur_BG_Color: rgba(247, 247, 247, 0.50);
    --White_Color: #FFFFFF;
    --FieldBorder_Color: #E2E1E5;
    --NeoInactiveGray_ColorIcon_Color: #E2E1E3;
    --NeoShadow_Color: #D6D6E1;
    --NeoShadow_Color: rgb(214, 214, 225);
    --LightGray_Color: #F2F4F7;
    --Gray_Color: #B2B2B2;
    --FieldContent_Color: #7A7A7A;
    --DarkGray_Text_Color: #4F4E4E;
    --FieldTitle_Color: #131313;
    --GreenText_Color: #179B0B;
    --LightGreen_Color: #B3F1AE;
    --Orange_Color: #FF9900;
    --LighterThanMainAccent_Color: #FED353;
    --Red_Color: #FF1B1B;
    --Marjani_Color: #FA8D8D;
    --Pink_Color: #F9C7C7;
    --Benavsh_Color: #9715FE;
    --Blue_Color: #0094FF;
    --Banana_Light: #F8F8F4;
    --Border_Pelak_Color: #B6B6B6;
    --LightGray_OnDark_Icons_Color: #E0E0E0;
    --LightGray_OnDark_Text_Color: #F8F4F4;
    --DokmeGholombe_Daruni_Color: linear-gradient(135deg, #E7E7E7 0%, #FFF 100%);
    --DokmeGholombe_Daruni_Color2: linear-gradient(135deg, #FFF 0%, #E7E7E7 100%);
    --DokmeGholombe_Daruni_Color3: linear-gradient(135deg, #FFF 27.33%, #E8E8E8 55.5%);
    --DokmeGholombe_Daruni_Color4: linear-gradient(to right, #FFFFFF 27%, #E8E8E8 56%);
    --DokmeGholombe_Biruni_Color: linear-gradient(135deg, #E8E8E8 0%, #FFF 100%);
    --DokmeyeMenu_Up_Color: linear-gradient(315deg, rgba(0, 0, 0, 0.60) 0%, rgba(255, 255, 255, 0.00) 100%), var(--BackgroundColor_Color);
    --DokmeyeMenu_Down_Color: linear-gradient(315deg, rgba(0, 0, 0, 0.60) 0%, rgba(255, 255, 255, 0.00) 100%), var(--BackgroundColor_Color);
    --LocationPin_BgColor: linear-gradient(180deg, #1F1F1F 0%, #858585 51%, #F7F7F7 100%);
    --Input_BgColor: linear-gradient(315deg, rgba(0, 0, 0, 0.60) 0%, rgba(255, 255, 255, 0.00) 100%), var(--BackgroundColor, #F7F7F7);
    --LocationPin_BgColor2: linear-gradient(180deg, rgba(247, 247, 247, 0.81) 7.5%, rgba(133, 133, 133, 0.85) 68%, #1F1F1F 100%);
    --LocationPin_BgColor3: linear-gradient(135deg, #E8E8E8 44.5%, #FFF 72.67%, #E8E8E8 87.5%);
    --White_Divider_With_AccentShadow_Color: linear-gradient(90deg, #FFF 0%, #FB0 49%, #FFF 100%);
    --Accent_Divider_With_WhiteShadow_Color: linear-gradient(90deg, #FB0 0%, #FFF 49%, #FB0 100%);
    --White_Divider_With_BahmansBlackShadow_Color: linear-gradient(90deg, #FFF 0%, #1F1F1F 49%, #FFF 100%);
    --OutOf_The_Pelak_BGColor: #EBEBEB;
    --OutOf_The_Pelak_BGColor_Dark: #696969;
    --Inside_The_Pelak_BGColor_Dark: #343434;
    --Gray_OnDark_Icons_Color: #AAA;
    --DokmeyeMenu_Up_Color_Dark: linear-gradient(315deg, rgba(0, 0, 0, 0.60) 0%, rgba(255, 255, 255, 0.00) 100%), var(--BackgroundColor_Dark_ColorMode);
    --DokmeyeMenu_Down_Color_Dark: linear-gradient(315deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 0, 0, 0.60) 100%), var(--BackgroundColor_Dark_ColorMode);
    /*--DokmeGholombe_Down_Biruni_Color: different opacities of background color;*/
    --DokmeGholombe_Sade_Up_Biruni_Color_Dark: linear-gradient(135deg, #1F1F1F -0.14%, #2A2A2A 99.86%);
    --DokmeGholombe_Sade_Up_Daruni_Color_Dark: linear-gradient(135deg, #3D3D3D 0%, #1F1F1F 100%);
    --DokmeGholombe_Sade_Up_Daruni_Color_DarkOnPureBlack: linear-gradient(135deg, #1f1f1f 0%, #000000 100%);
    --DokmeGholombe_Sade_Down_Daruni_Color_Dark: linear-gradient(135deg, #0D0D0D 0%, #3D3D3D 85.01%);
    --DokmeGholombe_Sade_Down_Biruni_Color_Dark: linear-gradient(0deg, var(--BahmanBlack_Color) 0%, var(--BahmanBlack_Color) 100%), rgba(38, 38, 38, 0.55);
    --DokmeGholombe_Header_Daruni_Color_Dark: linear-gradient(0deg, var(--bahman-black-bg-1-f-1-f-1-f, #1F1F1F) 0%, var(--bahman-black-bg-1-f-1-f-1-f, #1F1F1F) 100%), rgba(38, 38, 38, 0.55);
    --DokmeGholombe_Tar_Down_Biruni_Color_Dark: linear-gradient(135deg, #1F1F1F 0%, #2A2A2A 100%);
    --DokmeGholombe_Tar_Down_Daruni_Color_Dark: linear-gradient(135deg, #1F1F1F 0%, #3D3D3D 100%);
    --DokmeGholombe_Tar_Up_Biruni_Color_Dark: linear-gradient(0deg, var(--BahmanBlack_Color) 0%, var(--BahmanBlack_Color) 100%), rgba(38, 38, 38, 0.55);
    --DokmeGholombe_Tar_Up_Daruni_Color_Dark: linear-gradient(135deg, #3D3D3D 0%, #1F1F1F 100%);
    --LocationPin_BgColor_Biruni_Color_Dark: linear-gradient(135deg, #404040 44.5%, #000 72.67%, #3B3B3B 87.5%);
    --LocationPin_BorderColor_Biruni_Color_Dark: linear-gradient(319deg, #1F1F1F -106.37%, #0F0F0F 97.81%);
    --LocationPin_BgColor_Daruni_Color_Dark: linear-gradient(135deg, #3D3D3D 0%, #1F1F1F 100%);
    --PowerLightColor: linear-gradient(257deg, rgba(254, 211, 83, 0.50) 28.91%, rgba(255, 255, 255, 0.00) 54.94%, rgba(255, 187, 0, 0.50) 80.96%), var(--White_Color);
    --PressedTab_Linear_Accent_Color: linear-gradient(319deg, rgba(255, 255, 255, 0.50) 1.57%, rgba(255, 187, 0, 0.50) 100.39%);
    --PressedTab_AccentLinear_Text_Color: linear-gradient(180deg, #FED353 0%, #F90 100%);
    --BarjasteBtn_Light_BG_Color: linear-gradient(142deg, linear-gradient(135deg, #E8E8E8 0%, #FFF 100%) 9.72%, rgba(214, 214, 225, 0.55) 100%);
    --ModalContainer_BG_Color: linear-gradient(0deg, var(--BackgroundColor_Color) 0%, var(--BackgroundColor_Color) 100%), var(--Blur_BG_Color);
    --Pelak_Layer01_BG_Color: linear-gradient(0deg, #EBEBEB 0%, #EBEBEB 100%), rgba(247, 247, 247, 0.55);
    --Pelak_Layer02_BG_Color: var(--DokmeGholombe_Daruni_Color, linear-gradient(135deg, #E7E7E7 0%, #FFF 100%));
    /*******chartColor_Accent*******/
    --chartColor_1: #FFBB00;
    --chartColor_2: #FFD452;
    --chartColor_3: #E0A500;
    --chartColor_4: #F90;
    --chartColor_5: #FED353;
    /*******chartColor_Gray*******/
    --chartColor_6: #1F1F1F;
    --chartColor_7: #4D4D4D;
    --chartColor_8: #7A7A7A;
    /*Border Color*/
    --PressedTab_AccentLinear_Border_Color: linear-gradient(317deg, #FED353 1.62%, #F90 97.74%);
    --Border_DokmeGholombe_Tar_Up_Daruni_Color_Dark: linear-gradient(135deg, rgba(35, 35, 35, 0.20) 0%, rgba(62, 60, 60, 0.20) 100%), linear-gradient(319deg, #505050 -106.37%, #1B1B1B 97.81%);
    --Border_DokmeGholombe_Tar_Up_Daruni_Color_Dark2: linear-gradient(135deg, rgba(17, 17, 17, 0.80) 0%, #3F3F3F 100%);
    --Border_DokmeGholombe_Tar_Up_Daruni_Color_Dark3: linear-gradient(135deg, rgba(255, 187, 0, 0.50) 0%, #FB0 100%);
    --Border_DokmeGholombe_Tar_Up_Daruni_Color_Dark4onLight: linear-gradient(90deg, rgba(35, 35, 35, 0.20) 0%, rgba(62, 60, 60, 0.20) 100%), linear-gradient(135deg, #505050 0%, #1B1B1B 100%);
    --Border_BoxGholombe_Up_Daruni_BorderColor_Dark5onLight: linear-gradient(135deg, rgba(35, 35, 35, 0.20) 0%, rgba(62, 60, 60, 0.20) 100%), linear-gradient(319deg, #505050 -106.37%, #1B1B1B 97.81%);
    --Border_DokmeGholombe_Up_Daruni_Color_Dark: linear-gradient(135deg, rgba(255, 187, 0, 0.25) 0.66%, rgba(255, 187, 0, 0.50) 100.66%);
    --Border_DokmeGholombe_Sade_Up_Daruni_Color_DarkOnPureBlack: linear-gradient(135deg, rgba(18, 18, 18, 0.20) 0%, rgba(1, 1, 1, 0.20) 100%), linear-gradient(345deg, #363636 -167.49%, #030303 99.01%);
    --StrokeBorder_DokmeGholombe_Down_Biruni_Color: linear-gradient(319deg, #F0F1F4 -106.37%, #F1F1F1 97.81%);
    /*Border*/
    --Border_DokmeGholombe_Tar_Up_Daruni_Dark_Border: inset 3px solid var(--Border_DokmeGholombe_Tar_Up_Daruni_Color_Dark);
    --Border_DokmeGholombe_Tar_Up_Daruni_Dark_BlackBorder: inset 1px solid var(--Border_DokmeGholombe_Tar_Up_Daruni_Color_Dark2);
    --Border_DokmeGholombe_Tar_Up_Daruni_Dark_YellowBorder: inset 1px solid var(--Border_DokmeGholombe_Tar_Up_Daruni_Color_Dark3);
    --Border_DokmeGholombe_Tar_Up_Daruni_Dark_BlackShadowBorder: inset 3px solid var(--Border_DokmeGholombe_Tar_Up_Daruni_Color_Dark4onLight);
    --Border_BoxGholombe_Up_Daruni_Dark: inset 3px solid var(--Border_BoxGholombe_Up_Daruni_BorderColor_Dark5onLight);
    --Border_DokmeGholombe_Sade_Up_Daruni_DarkOnPureBlackBorder: inset 3px solid var(--Border_DokmeGholombe_Sade_Up_Daruni_Color_DarkOnPureBlack);
    --Border_DokmeMenu_Up_AccentBorder: 1px outset rgba(255, 187, 0, 0.50);
    /*Border Radius*/
    --InnerBorder_Radius: 18px;
    --InputFieldsBorder_Radius_Mobile: 25px;
    --FieldsBorder_Radius_Mobile: 26px;
    --FieldsBorder_Radius_Desktop: 36px;
    --BtnsBorder_Radius: 50px;
    --CircleBorder_Radius: 100%;
    /*Light Shadows*/
    --White_ColorCards_Shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
    --LocationPin_Shadow: 4px 8px 16px 0px rgba(0, 0, 0, 0.35), -8px -12px 14px 0px #FFF;
    --LocationPin_Shadow_Biruni: inset -4px -4px 12px 0px rgba(217, 217, 217, 0.50), -4px -4px 7px 0px  #FFF, 5px 5px 8px 0px rgba(217, 217, 217, 0.90);
    --LocationPin_Shadow_Daruni: inset 2px 2px 3px 0px rgba(255, 255, 255, 0.30), inset -2px -2px 4px 0px rgba(204, 204, 204, 0.50), -4px 4px 8px 0px rgba(204, 204, 204, 0.20), 4px -4px 8px 0px rgba(204, 204, 204, 0.20), -4px -4px 8px 0px rgba(255, 255, 255, 0.90), 4px 4px 10px 0px rgba(204, 204, 204, 0.90);
    --BackButton_Shadow: inset 0px 0px 0px 0.333px rgba(255, 255, 255, 0.20), -2.5px -2.5px 5px 2.5px #FFF, 2.5px 2.5px 5px 2.5px rgba(174, 174, 192, 0.40);
    --DisabledButton_Shadow: -4px -4px 5px 0px rgba(255, 255, 255, 0.50), 4px 4px 5px 0px rgba(214, 214, 225, 0.35);
    --AnyButton_Down_Shadow: inset -1.667px -1.667px 1.667px 0px rgba(255, 255, 255, 0.70), inset 2.5px 2.5px 1.667px 0px rgba(174, 174, 192, 0.20);
    --AnyButton_Up_Shadow: inset 0px 0px 0px 0.333px rgba(255, 255, 255, 0.20), -1.667px -1.667px 5px 0px #FFF, 2.5px 2.5px 5px 0px rgba(174, 174, 192, 0.40);
    --DokmeyeSade_Down_Shadow: inset -1.667px -1.667px 1.667px 0px rgba(255, 255, 255, 0.85), inset 2.5px 2.5px 1.667px 0px rgba(174, 174, 192, 0.35);
    --DokmeyeSade_Up_Shadow: inset 0px 0px 0px 0.333px rgba(255, 255, 255, 0.35), -1.667px -1.667px 5px 0px #FFF, 2.5px 2.5px 5px 0px rgba(174, 174, 192, 0.55);
    --DokmeGholombeDown_Daruni_Shadow: inset -2px -3px 5px 0px rgba(255, 255, 255, 0.50), inset -18px -18px 25px 0px rgba(255, 255, 255, 0.20), inset -3px -3px 22px 0px rgba(255, 255, 255, 0.50), inset 3px 3px 12px 0px rgba(104, 110, 140, 0.50), inset 6px 7px 23px 0px rgba(104, 110, 140, 0.15), 0px 2px 2px 0px rgba(174, 174, 192, 0.50), 2px 2px 4px 0px rgba(174, 174, 192, 0.25), 1px 2px 2px 0px rgba(104, 110, 140, 0.50), -2px -2px 4px 0px #FFF, 1px 1px 2px 0px #D0D3E2, 1px 1px 6px 0px #D4D7E6;
    --DokmeGholombeDown_Daruni_InsetOnly_Shadow: inset -2px -3px 5px 0px rgba(255, 255, 255, 0.50), inset -18px -18px 25px 0px rgba(255, 255, 255, 0.20), inset -3px -3px 22px 0px rgba(255, 255, 255, 0.50), inset 3px 3px 12px 0px rgba(104, 110, 140, 0.50), inset 6px 7px 23px 0px rgba(104, 110, 140, 0.15);
    --DokmeGholombeDown_Daruni_InsetOnly_Shadow2: inset -2px -3px 5px 0px rgba(255, 255, 255, 0.70), inset -18px -18px 25px 0px rgba(255, 255, 255, 0.50), inset -3px -3px 22px 0px rgba(255, 255, 255, 0.70), inset 3px 3px 12px 0px rgba(104, 110, 140, 0.30), inset 6px 7px 23px 0px rgba(104, 110, 140, 0.15);
    --MenuBox_Shadow: -8px -8px 10px 0px #FFF, 2px 2px 10px 0px #D6D6E1;
    --MenuBox_Shadow2: -2px -2px 1px 0px #FFF, 2px 2px 10px 0px #D6D6E1;
    --MainItems_Up_Shadow: -8px -8px 10px 0px #FFF, 8px 8px 10px 0px rgba(214, 214, 225, 0.70);
    --MainItems_Down_Shadow: inset -8px -8px 10px 0px rgba(255, 255, 255, 0.80), inset 8px 8px 10px 0px rgba(214, 214, 225, 0.35);
    --MainItems_UpDown_Shadow: var(--MainItems_Up_Shadow), var(--MainItems_Down_Shadow);
    --MainItems_UpDown_Shadow2: -2px -2px 2px 0px #FFF, 8px 8px 10px 0px rgba(214, 214, 225, 0.70), var(--MainItems_Down_Shadow);
    --SelectOption_Down_Shadow: inset -1.667px -1.667px 1.667px 0px rgba(255, 255, 255, 0.85), inset 2.5px 2.5px 1.667px 0px rgba(174, 174, 192, 0.35);
    --DashboardBoxShadow_Shadow: inset -8px -8px 10px 0px rgba(255, 255, 255, 0.80), inset 8px 8px 10px 0px rgba(214, 214, 225, 0.35);
    --ProgressbarShadow_Shadow: inset 0px 4px 6px 0px rgba(214, 214, 225, 0.50), -4px -4px 6px 0px rgba(255, 255, 255, 0.38), 4px 4px 6px 0px rgba(214, 214, 225, 0.20);
    --ProgressbarBtnShadow_Shadow: -4px -4px 6px 0px rgba(255, 255, 255, 0.50), 4px 4px 6px 0px rgba(171, 194, 212, 0.60);
    --DokmeGholombeUp_Biruni_Shadow: inset -1px -1px 2px 0px rgba(217, 217, 217, 0.50), -2px -2px 4px 0px #FFF, 2.5px 2.5px 4px 0px rgba(217, 217, 217, 0.90);
    --DokmeGholombeUp_Daruni_Shadow: inset 1px 1px 2px 0px rgba(255, 255, 255, 0.30), inset -1px -1px 2px 0px rgba(204, 204, 204, 0.50), -2px 2px 4px 0px rgba(204, 204, 204, 0.20), 2px -2px 4px 0px rgba(204, 204, 204, 0.20), -2px -2px 4px 0px rgba(255, 255, 255, 0.90), 2px 2px 5px 0px rgba(204, 204, 204, 0.90);
    --SideAdminNav_Shadow: 0px 0px 14px 0px rgba(0, 0, 0, 0.10);
    --BarjasteBtn_Light_Shadow: 0px 0px 0px 0.333px rgba(255, 255, 255, 0.20) inset, -1px -1px 0px 0px #FFF, 1px 1px 10px 0px rgba(174, 174, 192, 0.44);
    /*Dark Shadows*/
    --BlackButton_Shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.45);
    --BlackBtn_Shadow2: 0px 0px 10px 1px rgba(116, 116, 116, 0.50);
    --AnyButton_Down_Dark_Shadow: inset -1.667px -1.667px 1.667px 0px rgba(75, 75, 75, 0.70), inset 2.5px 2.5px 1.667px 0px rgba(0, 0, 0, 0.20);
    --AnyButton_Up_Dark_Shadow: inset 0px 0px 0px 0.333px rgba(75, 75, 75, 0.20), -1.667px -1.667px 5px 0px #4B4B4B, 2.5px 2.5px 5px 0px rgba(0, 0, 0, 0.40);
    --DokmeyeSade_Down_Dark_Shadow: inset -1.667px -1.667px 1.667px 0px rgba(75, 75, 75, 0.85), inset 2.5px 2.5px 1.667px 0px rgba(1, 1, 1, 0.35);
    --DokmeyeSade_Up_Dark_Shadow: inset 0px 0px 0px 0.333px rgba(75, 75, 75, 0.35), -1.667px -1.667px 5px 0px #4B4B4B, 2.5px 2.5px 5px 0px rgba(1, 1, 1, 0.55);
    --MenuBox_Dark_Shadow: -2px -2px 10px 0px #505050, 2px 2px 10px 0px #070707;
    --MenuBox_Dark_AccentShadow: 1px 1px 2px 0px rgba(255, 187, 0, 0.30) inset, -1px -1px 2px 0px rgba(255, 187, 0, 0.25) inset, -2px 2px 4px 0px rgba(255, 187, 0, 0.10), 2px -2px 4px 0px rgba(255, 187, 0, 0.10), -2px -2px 4px 0px rgba(255, 187, 0, 0.45), 2px 2px 5px 0px rgba(255, 187, 0, 0.45);
    --MainItems_UpDark_Shadow: -10px -10px 20px 0px #3C3C3C, 10px 10px 20px 0px #1E1E1E;
    --MainItems_UpDark_WithBorder_Shadow: -10px -10px 20px 0px #3C3C3C, 10px 10px 20px 0px #1E1E1E, inset -4px -4px 8px 0px rgba(77, 77, 77, 0.25), inset 4px 4px 8px 0px #1E1E1E;
    --MainItems_DownDark_Shadow: inset -8px -8px 10px 0px rgba(60, 60, 60, 0.80), inset 8px 8px 10px 0px rgba(30, 30, 30, 0.35);
    --MainItems_UpDownDark_Shadow: var(--MainItems_Up_Shadow), var(--MainItems_DownDark_Shadow);
    --SelectOption_Down_Dark_Shadow: inset -4px -4px 8px 0px rgba(77, 77, 77, 0.25), inset 4px 4px 8px 0px #1E1E1E;
    --DashboardBoxShadow_Dark_Shadow: inset -8px -8px 10px 0px rgba(75, 75, 75, 0.40), inset 8px 8px 10px 0px rgba(0, 0, 0, 0.25);
    --ProgressbarShadow_Dark_Shadow: inset 0px 4px 6px 0px rgba(1, 1, 1, 0.50), -4px -4px 6px 0px rgba(75, 75, 75, 0.38), 4px 4px 6px 0px rgba(1, 1, 1, 0.20);
    --ProgressbarBtnShadow_Dark_Shadow: -4px -4px 6px 0px rgba(75, 75, 75, 0.50), 4px 4px 6px 0px rgba(1, 1, 1, 0.60);
    --DokmeGholombeSadeUp_Daruni_Dark_Shadow: inset -1px -1px 2px 0px rgba(0, 0, 0, 0.30), inset 1px 1px 2px 0px rgba(79, 79, 79, 0.50), 2px -2px 4px 0px rgba(79, 79, 79, 0.20), -2px 2px 4px 0px rgba(79, 79, 79, 0.20), 2px 2px 4px 0px rgba(0, 0, 0, 0.90), -2px -2px 5px 0px rgba(79, 79, 79, 0.90);
    --DokmeGholombeSadeDown_Daruni_Dark_Shadow: -6px -6px 12px 0px #3E3E3E, 6px 6px 12px 0px #1E1E1E;
    --DokmeGholombeTarDown_Daruni_Dark_Shadow: inset 1px 1px 2px 0px rgba(0, 0, 0, 0.30), inset -1px -1px 2px 0px rgba(79, 79, 79, 0.50), -2px 2px 4px 0px rgba(79, 79, 79, 0.20), 2px -2px 4px 0px rgba(79, 79, 79, 0.20), -2px -2px 4px 0px rgba(0, 0, 0, 0.90), 2px 2px 5px 0px rgba(79, 79, 79, 0.90);
    --DokmeGholombeTarUp_Daruni_Shadow: -6px -6px 12px 0px #3E3E3E, 6px 6px 12px 0px #1E1E1E;
    --LocationPinShadow_Biruni_Dark_Shadow: inset -4px -4px 12px 0px rgba(22, 22, 22, 0.50), -2px -2px 4px 0px #000, 2px 2px 5px 0px rgba(66, 66, 66, 0.90);
    --LocationPinShadow_Daruni_Dark_Shadow: inset 2px 2px 3px 0px rgba(0, 0, 0, 0.30), inset -2px -2px 4px 0px rgba(7, 7, 7, 0.50), -4px 4px 8px 0px rgba(7, 7, 7, 0.20), 4px -4px 8px 0px rgba(9, 9, 9, 0.20), -4px -4px 8px 0px rgba(0, 0, 0, 0.90), 4px 4px 10px 0px rgba(9, 9, 9, 0.90);
    --LocationPinShadow_Biruni2_Dark_Shadow: inset 1px 1px 2px 0px rgba(255, 255, 255, 0.30), inset -4px -4px 12px 0px rgba(22, 22, 22, 0.50), -2.5px -2.5px 4px 0px rgba(217, 217, 217, 0.20), 12px 12px 30px 0px rgba(66, 66, 66, 0.90);
    /*Text Shadows*/
    --Text_OnDarkBG_textShadow: 3px 2px 10px rgba(255, 255, 255, 0.6);
    --Text_OnDarkBG_textshadow2: -4px -4px 12px rgba(22, 22, 22, 0.50), -2px -2px 4px #000, 2px 2px 5px rgba(66, 66, 66, 0.90);
    --Text_OnLightBG_textshadow: -8px -8px 10px #FFFFFF, 8px 8px 10px rgba(214,214,255,0.7);
    --Text_OnLightBG_textshadow2: -8px -8px 10px #FFFFFF, 8px 8px 10px rgba(208,208,208,0.7);
    --Text_OnLightBG_textshadow3: -3px -2px 6px #FFFFFF, 3px 2px 6px rgba(192,192,192,0.7);
    /*Sizes*/
    --AdminDesktop_MaxWidth: 1440px;
    --AdminDesktop_MaxWidth: 1600px;
    --AdminDesktop_MaxWidth: 1920px;
    --LargeMaxWidth: 2000px;
    --MaxWidth: 1200px;
    --Header_Container_Height: 102px;
    --expandedMenu_Width: 280px;
    --closedMenu_Width: 60px;
    /*Logo*/
    --Logo_OnLight: ../../Image/BahmanImages/Bahman_Group_BlackLogo.svg;
    /*--Logo_onDark: ../../Image/BahmanImages/Bahman_Group_SilverLogo.svg;*/
    --Logo_onDark: ../../Image/BahmanImages/silverLogo.svg;
    --Logo_with_TXT_onLight: ../../Image/BahmanImages/SilverLogoGroup.svg;
    --Logo_with_TXT_onDark: ../../Image/BahmanImages/SilverLogoGroup.svg;
}

@media screen and (min-width: 768px) {
    :root {
        --Header_Container_Height: 102px;
        --Accardion_H: 56px;
        --RL_Padding: 16px;
    }
}

@media screen and (max-width: 767px) {
    :root {
        --Header_Container_Height: 58px;
        --Accardion_H: 42px;
        --RL_Padding: 10px;
    }
}

/*#endregion Root*/


/*#region Space*/

.pt_120 {
    padding-top: 120px;
}

.W_maxContent {
    width: max-content !important;
}

/*#endregion Space*/

/*#region gap*/
.gap_initial {
    gap: initial !important;
}

.gap_column_initial {
    column-gap: initial !important;
}

.gap_row_initial {
    row-gap: initial !important;
}

.gap_2 {
    gap: 2px !important;
}

.gap_column_2 {
    column-gap: 2px !important;
}

.gap_row_2 {
    row-gap: 2px !important;
}

.gap_4 {
    gap: 4px !important;
}

.gap_column_4 {
    column-gap: 4px !important;
}

.gap_row_4 {
    row-gap: 4px !important;
}

.gap_6 {
    gap: 6px !important;
}

.gap_column_6 {
    column-gap: 6px !important;
}

.gap_row_6 {
    row-gap: 6px !important;
}

.gap_8 {
    gap: 8px !important;
}

.gap_column_8 {
    column-gap: 8px !important;
}

.gap_row_8 {
    row-gap: 8px !important;
}

.gap_10 {
    gap: 10px !important;
}

.gap_column_10 {
    column-gap: 10px !important;
}

.gap_row_10 {
    row-gap: 10px !important;
}

.gap_12 {
    gap: 12px !important;
}

.gap_column_12 {
    column-gap: 12px !important;
}

.gap_row_12 {
    row-gap: 12px !important;
}

.gap_14 {
    gap: 14px !important;
}

.gap_column_14 {
    column-gap: 14px !important;
}

.gap_row_14 {
    row-gap: 14px !important;
}

.gap_16 {
    gap: 16px !important;
}

.gap_column_16 {
    column-gap: 16px !important;
}

.gap_row_16 {
    row-gap: 16px !important;
}

.gap_18 {
    gap: 18px !important;
}

.gap_column_18 {
    column-gap: 18px !important;
}

.gap_row_18 {
    row-gap: 18px !important;
}

.gap_20 {
    gap: 20px !important;
}

.gap_column_20 {
    column-gap: 20px !important;
}

.gap_row_20 {
    row-gap: 20px !important;
}

.gap_22 {
    gap: 22px !important;
}

.gap_column_22 {
    column-gap: 22px !important;
}

.gap_row_22 {
    row-gap: 22px !important;
}

.gap_24 {
    gap: 24px !important;
}

.gap_column_24 {
    column-gap: 24px !important;
}

.gap_row_24 {
    row-gap: 24px !important;
}

.gap_26 {
    gap: 26px !important;
}

.gap_column_26 {
    column-gap: 26px !important;
}

.gap_row_26 {
    row-gap: 26px !important;
}

.gap_28 {
    gap: 28px !important;
}

.gap_column_28 {
    column-gap: 28px !important;
}

.gap_row_28 {
    row-gap: 28px !important;
}

.gap_30 {
    gap: 30px !important;
}

.gap_column_30 {
    column-gap: 30px !important;
}

.gap_row_30 {
    row-gap: 30px !important;
}

.gap_32 {
    gap: 32px !important;
}

.gap_column_32 {
    column-gap: 32px !important;
}

.gap_row_32 {
    row-gap: 32px !important;
}

.gap_34 {
    gap: 34px !important;
}

.gap_column_34 {
    column-gap: 34px !important;
}

.gap_row_34 {
    row-gap: 34px !important;
}

.gap_36 {
    gap: 36px !important;
}

.gap_column_36 {
    column-gap: 36px !important;
}

.gap_row_36 {
    row-gap: 36px !important;
}

.gap_38 {
    gap: 38px !important;
}

.gap_column_38 {
    column-gap: 38px !important;
}

.gap_row_38 {
    row-gap: 38px !important;
}

.gap_40 {
    gap: 40px !important;
}

.gap_column_40 {
    column-gap: 40px !important;
}

.gap_row_40 {
    row-gap: 40px !important;
}

.gap_42 {
    gap: 42px !important;
}

.gap_column_42 {
    column-gap: 42px !important;
}

.gap_row_42 {
    row-gap: 42px !important;
}

.gap_44 {
    gap: 44px !important;
}

.gap_column_44 {
    column-gap: 44px !important;
}

.gap_row_44 {
    row-gap: 44px !important;
}

.gap_46 {
    gap: 46px !important;
}

.gap_column_46 {
    column-gap: 46px !important;
}

.gap_row_46 {
    row-gap: 46px !important;
}

.gap_48 {
    gap: 48px !important;
}

.gap_column_48 {
    column-gap: 48px !important;
}

.gap_row_48 {
    row-gap: 48px !important;
}

.gap_50 {
    gap: 50px !important;
}

.gap_column_50 {
    column-gap: 50px !important;
}

.gap_row_50 {
    row-gap: 50px !important;
}

.gap_70 {
    gap: 70px !important;
}

.gap_column_70 {
    column-gap: 70px !important;
}

.gap_row_70 {
    row-gap: 70px !important;
}

.gap_80 {
    gap: 80px !important;
}

.gap_column_80 {
    column-gap: 80px !important;
}

.gap_row_80 {
    row-gap: 80px !important;
}

.gap_100 {
    gap: 100px !important;
}

.gap_column_100 {
    column-gap: 100px !important;
}

.gap_row_100 {
    row-gap: 100px !important;
}

.gap_104 {
    gap: 104px !important;
}

.gap_column_104 {
    column-gap: 104px !important;
}

.gap_row_104 {
    row-gap: 104px !important;
}

@media screen and (max-width: 767px) {

    .gap_xs_initial {
        gap: initial !important;
    }

    .gap_column_xs_initial {
        column-gap: initial !important;
    }

    .gap_row_xs_initial {
        row-gap: initial !important;
    }

    .gap_xs_2 {
        gap: 2px !important;
    }

    .gap_column_xs_2 {
        column-gap: 2px !important;
    }

    .gap_row_xs_2 {
        row-gap: 2px !important;
    }

    .gap_xs_4 {
        gap: 4px !important;
    }

    .gap_column_xs_4 {
        column-gap: 4px !important;
    }

    .gap_row_xs_4 {
        row-gap: 4px !important;
    }

    .gap_xs_6 {
        gap: 6px !important;
    }

    .gap_column_xs_6 {
        column-gap: 6px !important;
    }

    .gap_row_xs_6 {
        row-gap: 6px !important;
    }

    .gap_xs_8 {
        gap: 8px !important;
    }

    .gap_column_xs_8 {
        column-gap: 8px !important;
    }

    .gap_row_xs_8 {
        row-gap: 8px !important;
    }

    .gap_xs_10 {
        gap: 10px !important;
    }

    .gap_column_xs_10 {
        column-gap: 10px !important;
    }

    .gap_row_xs_10 {
        row-gap: 10px !important;
    }

    .gap_xs_12 {
        gap: 12px !important;
    }

    .gap_column_xs_12 {
        column-gap: 12px !important;
    }

    .gap_row_xs_12 {
        row-gap: 12px !important;
    }

    .gap_xs_14 {
        gap: 14px !important;
    }

    .gap_column_xs_14 {
        column-gap: 14px !important;
    }

    .gap_row_xs_14 {
        row-gap: 14px !important;
    }

    .gap_xs_16 {
        gap: 16px !important;
    }

    .gap_column_xs_16 {
        column-gap: 16px !important;
    }

    .gap_row_xs_16 {
        row-gap: 16px !important;
    }

    .gap_xs_18 {
        gap: 18px !important;
    }

    .gap_column_xs_18 {
        column-gap: 18px !important;
    }

    .gap_row_xs_18 {
        row-gap: 18px !important;
    }

    .gap_xs_20 {
        gap: 20px !important;
    }

    .gap_column_xs_20 {
        column-gap: 20px !important;
    }

    .gap_row_xs_20 {
        row-gap: 20px !important;
    }

    .gap_xs_22 {
        gap: 22px !important;
    }

    .gap_column_xs_22 {
        column-gap: 22px !important;
    }

    .gap_row_xs_22 {
        row-gap: 22px !important;
    }

    .gap_xs_24 {
        gap: 24px !important;
    }

    .gap_column_xs_24 {
        column-gap: 24px !important;
    }

    .gap_row_xs_24 {
        row-gap: 24px !important;
    }

    .gap_xs_26 {
        gap: 26px !important;
    }

    .gap_column_xs_26 {
        column-gap: 26px !important;
    }

    .gap_row_xs_26 {
        row-gap: 26px !important;
    }

    .gap_xs_28 {
        gap: 28px !important;
    }

    .gap_column_xs_28 {
        column-gap: 28px !important;
    }

    .gap_row_xs_28 {
        row-gap: 28px !important;
    }

    .gap_xs_30 {
        gap: 30px !important;
    }

    .gap_column_xs_30 {
        column-gap: 30px !important;
    }

    .gap_row_xs_30 {
        row-gap: 30px !important;
    }

    .gap_xs_32 {
        gap: 32px !important;
    }

    .gap_column_xs_32 {
        column-gap: 32px !important;
    }

    .gap_row_xs_32 {
        row-gap: 32px !important;
    }

    .gap_xs_34 {
        gap: 34px !important;
    }

    .gap_column_xs_34 {
        column-gap: 34px !important;
    }

    .gap_row_xs_34 {
        row-gap: 34px !important;
    }

    .gap_xs_36 {
        gap: 36px !important;
    }

    .gap_column_xs_36 {
        column-gap: 36px !important;
    }

    .gap_row_xs_36 {
        row-gap: 36px !important;
    }

    .gap_xs_38 {
        gap: 38px !important;
    }

    .gap_column_xs_38 {
        column-gap: 38px !important;
    }

    .gap_row_xs_38 {
        row-gap: 38px !important;
    }

    .gap_xs_40 {
        gap: 40px !important;
    }

    .gap_column_xs_40 {
        column-gap: 40px !important;
    }

    .gap_row_xs_40 {
        row-gap: 40px !important;
    }

    .gap_xs_42 {
        gap: 42px !important;
    }

    .gap_column_xs_42 {
        column-gap: 42px !important;
    }

    .gap_row_xs_42 {
        row-gap: 42px !important;
    }

    .gap_xs_44 {
        gap: 44px !important;
    }

    .gap_column_xs_44 {
        column-gap: 44px !important;
    }

    .gap_row_xs_44 {
        row-gap: 44px !important;
    }

    .gap_xs_46 {
        gap: 46px !important;
    }

    .gap_column_xs_46 {
        column-gap: 46px !important;
    }

    .gap_row_xs_46 {
        row-gap: 46px !important;
    }

    .gap_xs_48 {
        gap: 48px !important;
    }

    .gap_column_xs_48 {
        column-gap: 48px !important;
    }

    .gap_row_xs_48 {
        row-gap: 48px !important;
    }

    .gap_xs_50 {
        gap: 50px !important;
    }

    .gap_column_xs_50 {
        column-gap: 50px !important;
    }

    .gap_row_xs_50 {
        row-gap: 50px !important;
    }

    .gap_xs_70 {
        gap: 70px !important;
    }

    .gap_column_xs_70 {
        column-gap: 70px !important;
    }

    .gap_row_xs_70 {
        row-gap: 70px !important;
    }

    .gap_xs_100 {
        gap: 100px !important;
    }

    .gap_column_xs_100 {
        column-gap: 100px !important;
    }

    .gap_row_xs_100 {
        row-gap: 100px !important;
    }
}

@media screen and (max-width: 576px) {

    .gap_xxs_initial {
        gap: initial !important;
    }

    .gap_column_xxs_initial {
        column-gap: initial !important;
    }

    .gap_row_xxs_initial {
        row-gap: initial !important;
    }

    .gap_xxs_2 {
        gap: 2px !important;
    }

    .gap_column_xxs_2 {
        column-gap: 2px !important;
    }

    .gap_row_xxs_2 {
        row-gap: 2px !important;
    }

    .gap_xxs_4 {
        gap: 4px !important;
    }

    .gap_column_xxs_4 {
        column-gap: 4px !important;
    }

    .gap_row_xxs_4 {
        row-gap: 4px !important;
    }

    .gap_xxs_6 {
        gap: 6px !important;
    }

    .gap_column_xxs_6 {
        column-gap: 6px !important;
    }

    .gap_row_xxs_6 {
        row-gap: 6px !important;
    }

    .gap_xxs_8 {
        gap: 8px !important;
    }

    .gap_column_xxs_8 {
        column-gap: 8px !important;
    }

    .gap_row_xxs_8 {
        row-gap: 8px !important;
    }

    .gap_xxs_10 {
        gap: 10px !important;
    }

    .gap_column_xxs_10 {
        column-gap: 10px !important;
    }

    .gap_row_xxs_10 {
        row-gap: 10px !important;
    }

    .gap_xxs_12 {
        gap: 12px !important;
    }

    .gap_column_xxs_12 {
        column-gap: 12px !important;
    }

    .gap_row_xxs_12 {
        row-gap: 12px !important;
    }

    .gap_xxs_14 {
        gap: 14px !important;
    }

    .gap_column_xxs_14 {
        column-gap: 14px !important;
    }

    .gap_row_xxs_14 {
        row-gap: 14px !important;
    }

    .gap_xxs_16 {
        gap: 16px !important;
    }

    .gap_column_xxs_16 {
        column-gap: 16px !important;
    }

    .gap_row_xxs_16 {
        row-gap: 16px !important;
    }

    .gap_xxs_18 {
        gap: 18px !important;
    }

    .gap_column_xxs_18 {
        column-gap: 18px !important;
    }

    .gap_row_xxs_18 {
        row-gap: 18px !important;
    }

    .gap_xxs_20 {
        gap: 20px !important;
    }

    .gap_column_xxs_20 {
        column-gap: 20px !important;
    }

    .gap_row_xxs_20 {
        row-gap: 20px !important;
    }

    .gap_xxs_22 {
        gap: 22px !important;
    }

    .gap_column_xxs_22 {
        column-gap: 22px !important;
    }

    .gap_row_xxs_22 {
        row-gap: 22px !important;
    }

    .gap_xxs_24 {
        gap: 24px !important;
    }

    .gap_column_xxs_24 {
        column-gap: 24px !important;
    }

    .gap_row_xxs_24 {
        row-gap: 24px !important;
    }

    .gap_xxs_26 {
        gap: 26px !important;
    }

    .gap_column_xxs_26 {
        column-gap: 26px !important;
    }

    .gap_row_xxs_26 {
        row-gap: 26px !important;
    }

    .gap_xxs_28 {
        gap: 28px !important;
    }

    .gap_column_xxs_28 {
        column-gap: 28px !important;
    }

    .gap_row_xxs_28 {
        row-gap: 28px !important;
    }

    .gap_xxs_30 {
        gap: 30px !important;
    }

    .gap_column_xxs_30 {
        column-gap: 30px !important;
    }

    .gap_row_xxs_30 {
        row-gap: 30px !important;
    }

    .gap_xxs_32 {
        gap: 32px !important;
    }

    .gap_column_xxs_32 {
        column-gap: 32px !important;
    }

    .gap_row_xxs_32 {
        row-gap: 32px !important;
    }

    .gap_xxs_34 {
        gap: 34px !important;
    }

    .gap_column_xxs_34 {
        column-gap: 34px !important;
    }

    .gap_row_xxs_34 {
        row-gap: 34px !important;
    }

    .gap_xxs_36 {
        gap: 36px !important;
    }

    .gap_column_xxs_36 {
        column-gap: 36px !important;
    }

    .gap_row_xxs_36 {
        row-gap: 36px !important;
    }

    .gap_xxs_38 {
        gap: 38px !important;
    }

    .gap_column_xxs_38 {
        column-gap: 38px !important;
    }

    .gap_row_xxs_38 {
        row-gap: 38px !important;
    }

    .gap_xxs_40 {
        gap: 40px !important;
    }

    .gap_column_xxs_40 {
        column-gap: 40px !important;
    }

    .gap_row_xxs_40 {
        row-gap: 40px !important;
    }

    .gap_xxs_42 {
        gap: 42px !important;
    }

    .gap_column_xxs_42 {
        column-gap: 42px !important;
    }

    .gap_row_xxs_42 {
        row-gap: 42px !important;
    }

    .gap_xxs_44 {
        gap: 44px !important;
    }

    .gap_column_xxs_44 {
        column-gap: 44px !important;
    }

    .gap_row_xxs_44 {
        row-gap: 44px !important;
    }

    .gap_xxs_46 {
        gap: 46px !important;
    }

    .gap_column_xxs_46 {
        column-gap: 46px !important;
    }

    .gap_row_xxs_46 {
        row-gap: 46px !important;
    }

    .gap_xxs_48 {
        gap: 48px !important;
    }

    .gap_column_xxs_48 {
        column-gap: 48px !important;
    }

    .gap_row_xxs_48 {
        row-gap: 48px !important;
    }

    .gap_xxs_50 {
        gap: 50px !important;
    }

    .gap_column_xxs_50 {
        column-gap: 50px !important;
    }

    .gap_row_xxs_50 {
        row-gap: 50px !important;
    }

    .gap_xxs_70 {
        gap: 70px !important;
    }

    .gap_column_xxs_70 {
        column-gap: 70px !important;
    }

    .gap_row_xxs_70 {
        row-gap: 70px !important;
    }

    .gap_xxs_100 {
        gap: 100px !important;
    }

    .gap_column_xxs_100 {
        column-gap: 100px !important;
    }

    .gap_row_xxs_100 {
        row-gap: 100px !important;
    }
}


@media screen and (max-width: 576px) {

    .gap_xxxs_10 {
        gap: 10px !important;
    }
}

/*#endregion gap*/

/*#region Size*/

.W_5 {
    width: 5%;
}

.W_10 {
    width: 10%;
}

.W_15 {
    width: 15%;
}

.W_20 {
    width: 20%;
}

.W_25 {
    width: 25%;
}

.W_30 {
    width: 30%;
}

.W_35 {
    width: 35%;
}

.W_40 {
    width: 40%;
}

.W_45 {
    width: 45%;
}

.W_50 {
    width: 50%;
}

.W_50_absolute {
    width: 50% !important;
}

.W_55 {
    width: 55%;
}

.W_60 {
    width: 60%;
}

.W_65 {
    width: 65%;
}

.W_70 {
    width: 70%;
}

.W_75 {
    width: 75%;
}

.W_80 {
    width: 80%;
}

.W_85 {
    width: 85%;
}

.W_90 {
    width: 90%;
}

.W_95 {
    width: 95%;
}

.W_100 {
    width: 100%;
}

.minW_50 {
    min-width: 50%;
}

.W_fitContent {
    width: fit-content !important;
}

.min_h_auto {
    min-height: initial !important;
}

.maxW_100per {
    max-width: 100% !important;
}

.maxW_100vw {
    max-width: 100vw !important;
}

.maxW_95per {
    max-width: 95% !important;
}

.maxW_95vw {
    max-width: 95vw !important;
}

.maxW_90per {
    max-width: 90% !important;
}

.maxW_90vw {
    max-width: 90vw !important;
}

.maxW_1-4 {
    max-width: calc(100% / 4);
}

.maxW_1-2 {
    max-width: calc(100% / 2);
}


@media screen and (max-width: 767px) {

    .W_XS_5 {
        width: 5%;
    }

    .W_XS_10 {
        width: 10%;
    }

    .W_XS_15 {
        width: 15%;
    }

    .W_XS_20 {
        width: 20%;
    }

    .W_XS_25 {
        width: 25%;
    }

    .W_XS_30 {
        width: 30%;
    }

    .W_XS_35 {
        width: 35%;
    }

    .W_XS_40 {
        width: 40%;
    }

    .W_XS_45 {
        width: 45%;
    }

    .W_XS_50 {
        width: 50%;
    }

    .W_XS_55 {
        width: 55%;
    }

    .W_XS_60 {
        width: 60%;
    }

    .W_XS_65 {
        width: 65%;
    }

    .W_XS_70 {
        width: 70%;
    }

    .W_XS_75 {
        width: 75%;
    }

    .W_XS_80 {
        width: 80%;
    }

    .W_XS_85 {
        width: 85%;
    }

    .W_XS_90 {
        width: 90%;
    }

    .W_XS_95 {
        width: 95%;
    }

    .W_XS_100 {
        width: 100%;
    }

    .W_XS_100_absolute {
        width: 100% !important;
    }
}

/*#endregion Size*/

/*#region Radius*/

.InnerBorder_Radius {
    border-radius: var(--InnerBorder_Radius) !important;
}

.InputFieldsBorder_Radius_Mobile {
    border-radius: var(--InputFieldsBorder_Radius_Mobile) !important;
}

.FieldsBorder_Radius_Mobile {
    border-radius: var(--FieldsBorder_Radius_Mobile) !important;
}

.FieldsBorder_Radius_Desktop {
    border-radius: var(--FieldsBorder_Radius_Desktop) !important;
}

.BtnsBorder_Radius {
    border-radius: var(--BtnsBorder_Radius) !important;
}

.CircleBorder_Radius {
    border-radius: var(--CircleBorder_Radius) !important;
}

/*#endregion Radius*/

/*#region imgSize*/
.W_Btn_150 {
    width: 150px !important;
}

.W_Btn_Fit {
    width: fit-content !important;
}

.img_2 {
    width: 2px;
    height: 2px;
    aspect-ratio: 1/1;
}

.img_W_2 {
    width: 2px;
    height: auto;
}

.img_4 {
    width: 4px;
    height: 4px;
    aspect-ratio: 1/1;
}

.img_W_4 {
    width: 4px;
    height: auto;
}

.img_6 {
    width: 6px;
    height: 6px;
    aspect-ratio: 1/1;
}

.img_W_6 {
    width: 6px;
    height: auto;
}

.img_8 {
    width: 8px;
    height: 8px;
    aspect-ratio: 1/1;
}

.img_W_8 {
    width: 8px;
    height: auto;
}

.img_10 {
    width: 10px;
    height: 10px;
    aspect-ratio: 1/1;
}

.img_W_10 {
    width: 10px;
    height: auto;
}

.img_12 {
    width: 12px;
    height: 12px;
    aspect-ratio: 1/1;
}

.img_W_12 {
    width: 12px;
    height: auto;
}

.img_14 {
    width: 14px;
    height: 14px;
    aspect-ratio: 1/1;
}

.img_W_14 {
    width: 14px;
    height: auto;
}

.img_16 {
    width: 16px;
    height: 16px;
    aspect-ratio: 1/1;
}

.img_W_16 {
    width: 16px;
    height: auto;
}

.img_18 {
    width: 18px;
    height: 18px;
    aspect-ratio: 1/1;
}

.img_W_18 {
    width: 18px;
    height: auto;
}

.img_20 {
    width: 20px;
    height: 20px;
    aspect-ratio: 1/1;
}

.img_W_20 {
    width: 20px;
    height: auto;
}

.img_22 {
    width: 22px;
    height: 22px;
    aspect-ratio: 1/1;
}

.img_W_22 {
    width: 22px;
    height: auto;
}

.img_24 {
    width: 24px;
    height: 24px;
    aspect-ratio: 1/1;
}

.img_26 {
    width: 26px;
    height: 26px;
    aspect-ratio: 1/1;
}

.img_W_24 {
    width: 24px;
    height: auto;
}

.img_28 {
    width: 28px;
    height: 28px;
    aspect-ratio: 1/1;
}

.img_W_28 {
    width: 28px;
    height: auto;
}

.img_30 {
    width: 30px;
    height: 30px;
    aspect-ratio: 1/1;
}

.img_W_30 {
    width: 30px;
    height: auto;
}

.img_32 {
    width: 32px;
    height: 32px;
    aspect-ratio: 1/1;
}

.img_W_32 {
    width: 32px;
    height: auto;
}

.img_34 {
    width: 34px;
    height: 34px;
    aspect-ratio: 1/1;
}

.img_W_34 {
    width: 34px;
    height: auto;
}

.img_38 {
    width: 38px;
    height: 38px;
    aspect-ratio: 1/1;
}

.img_W_38 {
    width: 38px;
    height: auto;
}

.img_H_38 {
    width: auto;
    height: 38px !important;
}

.img_40 {
    width: 40px;
    height: 40px;
    aspect-ratio: 1/1;
}

.img_W_40 {
    width: 40px;
    height: auto;
}

.img_42 {
    width: 42px;
    height: 42px;
    aspect-ratio: 1/1;
}

.img_W_42 {
    width: 42px;
    height: auto;
}

.img_46 {
    width: 46px;
    height: 46px;
    aspect-ratio: 1/1;
}

.img_W_46 {
    width: 46px;
    height: auto;
}

.img_H_46 {
    width: auto;
    height: 46px !important;
}

.img_48 {
    width: 48px;
    height: 48px;
    aspect-ratio: 1/1;
}

.img_W_48 {
    width: 48px;
    height: auto;
}

.img_50 {
    width: 50px;
    height: 50px;
    aspect-ratio: 1/1;
}

.img_W_50 {
    width: 50px;
    height: auto;
}

.img_60 {
    width: 60px;
    height: 60px;
    aspect-ratio: 1/1;
}

.img_W_60 {
    width: 60px;
    height: auto;
}

.img_80 {
    width: 80px;
    height: 80px;
    aspect-ratio: 1/1;
}

.img_W_60 {
    width: 60px;
    height: auto;
}

.img_W_68 {
    width: 68px;
    height: auto;
}

.img_70 {
    width: 70px;
    height: 70px;
}

.img_W_70 {
    width: 70px;
    height: auto;
}

.img_120 {
    width: 120px;
    height: 120px;
    aspect-ratio: 1/1;
}

.img_W_120 {
    width: 120px;
    height: auto;
}

.img_128 {
    width: 128px;
    height: 128px;
    aspect-ratio: 1/1;
}

.img_W_128 {
    width: 128px;
    height: auto;
}

.img_240 {
    width: 240px;
    height: 240px;
    aspect-ratio: 1/1;
}

.img_W_240 {
    width: 240px !important;
    height: auto;
}

.img_320 {
    width: 320px !important;
    height: 320px !important;
}

.img_W_320 {
    width: 320px !important;
    height: auto !important;
}

.img_768 {
    width: 768px !important;
    height: 768px !important;
}

.img_W_768 {
    width: 768px !important;
    height: auto !important;
}

.img_490 {
    width: 490px !important;
    height: 490px !important;
}

.img_W_490 {
    width: 490px !important;
    height: auto !important;
}

.img_50Per {
    width: 50%;
    height: 50%;
}

.img_W_50Per {
    width: 50%;
    height: auto;
}

.img_100Per {
    width: 100%;
    height: 100%;
}

.img_W_100Per {
    width: 100%;
    height: auto;
}

.img_H_100Per {
    height: 100%;
    width: auto;
}

@media screen and (max-width: 767px) {

    .img_xs_2 {
        width: 2px;
        height: 2px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_2 {
        width: 2px;
        height: auto;
    }

    .img_xs_4 {
        width: 4px;
        height: 4px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_4 {
        width: 4px;
        height: auto;
    }

    .img_xs_6 {
        width: 6px;
        height: 6px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_6 {
        width: 6px;
        height: auto;
    }

    .img_xs_8 {
        width: 8px;
        height: 8px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_8 {
        width: 8px;
        height: auto;
    }

    .img_xs_10 {
        width: 10px;
        height: 10px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_10 {
        width: 10px;
        height: auto;
    }

    .img_xs_12 {
        width: 12px;
        height: 12px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_12 {
        width: 12px;
        height: auto;
    }

    .img_xs_14 {
        width: 14px;
        height: 14px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_14 {
        width: 14px;
        height: auto;
    }

    .img_xs_16 {
        width: 16px;
        height: 16px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_16 {
        width: 16px;
        height: auto;
    }

    .img_xs_18 {
        width: 18px;
        height: 18px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_18 {
        width: 18px;
        height: auto;
    }

    .img_xs_20 {
        width: 20px;
        height: 20px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_20 {
        width: 20px;
        height: auto;
    }

    .img_xs_22 {
        width: 22px;
        height: 22px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_22 {
        width: 22px;
        height: auto;
    }

    .img_xs_24 {
        width: 24px;
        height: 24px;
        aspect-ratio: 1/1;
    }

    .img_xs_26 {
        width: 26px;
        height: 26px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_24 {
        width: 24px;
        height: auto;
    }

    .img_xs_30 {
        width: 30px;
        height: 30px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_30 {
        width: 30px;
        height: auto;
    }

    .img_xs_32 {
        width: 32px;
        height: 32px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_32 {
        width: 32px;
        height: auto;
    }

    .img_xs_38 {
        width: 38px;
        height: 38px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_38 {
        width: 38px;
        height: auto;
    }

    .img_xs_40 {
        width: 40px;
        height: 40px;
        aspect-ratio: 1/1;
    }

    .img_xs_42 {
        width: 42px;
        height: 42px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_42 {
        width: 42px;
        height: 42px;
        aspect-ratio: 1/1;
    }


    .img_xs_46 {
        width: 46px;
        height: 46px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_46 {
        width: 46px;
        height: auto;
    }

    .img_xs_48 {
        width: 48px;
        height: 48px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_48 {
        width: 48px;
        height: auto;
    }


    .img_xs_320 {
        width: 320px !important;
        height: 320px !important;
    }

    .img_xs_W_320 {
        width: 320px !important;
        height: auto !important;
    }

    .img_xs_768 {
        width: 768px !important;
        height: 768px !important;
    }

    .img_xs_W_768 {
        width: 768px !important;
        height: auto !important;
    }


    .img_xs_490 {
        width: 490px !important;
        height: 490px !important;
    }

    .img_xs_W_490 {
        width: 490px !important;
        height: auto !important;
    }

    .img_xs_50Per {
        width: 50%;
        height: 50%;
        aspect-ratio: 1/1;
    }

    .img_xs_100Per {
        width: 100%;
        height: 100%;
        aspect-ratio: 1/1;
    }

    .img_xs_H_100Per {
        height: 100%;
        width: auto;
    }

    .img_xs_W_40 {
        width: 40px;
        height: auto;
    }

    .img_xs_W_42 {
        width: 42px;
        height: auto;
    }

    .img_xs_W_46 {
        width: 46px;
        height: auto;
    }

    .img_xs_W_48 {
        width: 48px;
        height: auto;
    }

    .img_xs_60 {
        width: 60px;
        height: 60px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_60 {
        width: 60px;
        height: auto;
    }

    .img_xs_70 {
        width: 70px;
        height: 70px;
    }

    .img_xs_W_70 {
        width: 70px;
        height: auto;
    }

    .img_xs_80 {
        width: 80px;
        height: 80px;
        aspect-ratio: 1/1;
    }

    .img_xs_120 {
        width: 120px;
        height: 120px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_120 {
        width: 120px !important;
        height: auto;
    }

    .img_xs_240 {
        width: 240px;
        height: 240px;
        aspect-ratio: 1/1;
    }

    .img_xs_W_240 {
        width: 240px;
        height: auto;
    }
}


@media screen and (max-width: 576px) {

    .img_W_xxxs_50Per {
        width: 50%;
        height: auto;
    }

    .img_W_xxxs_70Per {
        width: 70%;
        height: auto;
    }

    .img_W_xxxs_100Per {
        width: 100% !important;
        height: auto;
    }
}

/*#endregion imgSize*/

/*#region Fonts_lineHeights*/


.italic_Avenir {
    font-style: italic;
}

.UltraLight_Avenir {
    font-weight: lighter;
}

.Light_Avenir {
    font-weight: 100;
}

.Thin_Avenir {
    font-weight: 200;
    font-weight: 100;
}

.Normal_Avenir {
    font-weight: normal;
    font-weight: 100;
}

.Regular_Avenir {
    font-weight: 300;
}

.Medium_Avenir {
    font-weight: 400;
}

.Demi_Avenir {
    font-weight: 500;
}

.Heavy_Avenir {
    font-weight: 600;
}

b {
    font-weight: bold !important;
    font-weight: 600 !important;
}

.Bold_Avenir {
    font-weight: 700;
    font-weight: 600;
}

.ExtraBold_Avenir {
    font-weight: bolder;
    font-weight: 900;
}

strong {
    font-weight: 800 !important;
    font-weight: 900 !important;
}

.Black_Avenir {
    font-weight: 900;
}

.FontSize_xLg54_xs42 {
    font-size: 54px;
    font-size: 7vw;
}

.lineHeight_xLg54 {
    line-height: 54px
}

.FontSize_xLg32_xs24 {
    font-size: 32px !important;
    /*font-size: 3vw;*/
}

.lineHeight_xLg32 {
    line-height: 32px;
}

.lineHeight_xLg24 {
    line-height: 24px;
}

.FontSize_xLg21_xs17 {
    font-size: 21px !important;
    /*font-size: 2vw;*/
}

.lineHeight_xLg21 {
    line-height: 21px;
}

.FontSize_xLg20_xs16 {
    font-size: 20px !important;
    /*font-size: 1.8vw;*/
}

.FontSize_xLg24_xs16 {
    font-size: 24px !important;
}

.FontSize_xLg16_xs12 {
    font-size: 16px !important;
}

.FontSize_xLg18_xs14 {
    font-size: 18px !important;
}

.lineHeight_xLg16 {
    line-height: 16px !important;
}

.FontSize_xLg14_xs12 {
    font-size: 14px !important;
}

.lineHeight_xLg14_xs12 {
    line-height: 14px !important;
}

.FontSize_xLg12_xs10 {
    font-size: 12px !important;
}

.lineHeight_xLg12 {
    line-height: 12px !important;
}

.FontSize_xLg10_xs8 {
    font-size: 10px !important;
}

.lineHeight_xLg10 {
    line-height: 10px !important;
}

@media screen and (max-width: 767px) {

    .FontSize_xLg54_xs42 {
        font-size: 42px !important;
    }

    .lineHeight_xs42 {
        line-height: 42px;
    }

    .FontSize_xLg32_xs24 {
        font-size: 24px !important;
    }

    .lineHeight_xs24 {
        line-height: 24px;
    }

    .FontSize_xLg21_xs17 {
        font-size: 17px !important;
    }

    .lineHeight_xs17 {
        line-height: 17px;
    }

    .FontSize_xLg20_xs16 {
        font-size: 20px !important;
    }

    .FontSize_xLg24_xs16 {
        font-size: 16px !important;
    }

    .lineHeight_xs16 {
        line-height: 16px;
    }

    .FontSize_xLg16_xs12 {
        font-size: 12px !important;
    }

    .FontSize_xLg18_xs14 {
        font-size: 14px !important;
    }

    .lineHeight_xs12 {
        line-height: 12px;
    }

    .FontSize_xLg14_xs12 {
        font-size: 12px !important;
    }

    .lineHeight_xLg14_xs12 {
        line-height: 12px;
    }

    .FontSize_xLg12_xs10 {
        font-size: 10px !important;
    }

    .lineHeight_xs10 {
        line-height: 10px;
    }

    .FontSize_xLg10_xs8 {
        font-size: 8px !important;
    }

    .lineHeight_xs8 {
        line-height: 8px;
    }
}

@media screen and (max-width: 576px) {

    .FontSize_xLg54_xs42 {
        font-size: 28px;
        line-height: 28px;
    }

    .FontSize_xLg32_xs24 {
        font-size: 18px;
    }

    .FontSize_xLg21_xs17 {
        /*font-size: 17px;*/
    }

    .FontSize_xLg20_xs16 {
        font-size: 16px;
    }

    .FontSize_xLg24_xs16 {
        /*font-size: 16px;*/
    }

    .FontSize_xLg16_xs12 {
        /*font-size: 12px;*/
    }

    .FontSize_xLg14_xs12 {
        /*font-size: 12px;*/
    }

    .FontSize_xLg12_xs10 {
        /*font-size: 10px;*/
    }

    .FontSize_xLg10_xs8 {
        /*font-size: 8px;*/
    }
}


@media screen and (max-width: 576px) {
    .FontSize_xLg16_xs12.HeaderLink_Div {
        /*font-size: 2.3vw;*/
        font-size: 8px;
    }
}

/*#endregion Fonts_lineHeights*/

/*#region Display*/

.noFlip {
    -webkit-transform: scaleX(1) !important;
    transform: scaleX(1) !important;
}

.Flip {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.fade:not(.show) {
    opacity: initial;
}

.hidden {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.5);
}

.display_none {
    display: none;
}

.display_flex {
    display: flex;
}

.display_grid {
    display: grid;
    display: flex;
    flex-direction: column;
}

.display_contents {
    display: contents !important;
}

.justify_items_right {
    justify-items: right;
}

.justify_items_left {
    justify-items: left;
}

.justify_items_center {
    justify-items: center;
}

.justify_self_right {
    justify-self: right;
}

.justify_self_left {
    justify-self: left;
}

.justify_self_center {
    justify-self: center;
}


.justify_content_initial {
    justify-content: initial !important;
}

.justify_content_center {
    justify-content: center !important;
}

.justify_content_right {
    justify-content: right !important;
}

.justify_content_left {
    justify-content: left !important;
}

.justify_content_spaceBetween {
    justify-content: space-between !important;
}

.justify_content_spaceAround {
    justify-content: space-around !important;
}

.justify_content_spaceEvenly {
    justify-content: space-evenly !important;
}

.Height_FitContent {
    height: fit-content;
}

.flex_0_important {
    flex: 0 !important;
}

.flex_initial_important {
    flex: initial !important;
}

.flex_1 {
    flex: 1;
}

.flex_1_important {
    flex: 1 !important;
}

.flex_2 {
    flex: 2;
}

.flex_2_important {
    flex: 2 !important;
}

.flex_3 {
    flex: 3;
}

.flex_grow_3 {
    flex-grow: 3;
}

.textAlign_Right {
    text-align: right;
}

.textAlign_Left {
    text-align: left;
}

.textAlign_Center {
    text-align: center;
}

.AlignContent_Baseline {
    align-content: baseline;
}

.rotate_0 {
    transform: rotate(0deg);
}

.rotate_180 {
    transform: rotate(180deg);
}

.rotate_90 {
    transform: rotate(90deg);
}

.rotate_n90 {
    transform: rotate(-90deg);
}


.rotate {
    -moz-transition: all .5s linear;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

.breakSpaces_Text {
    white-space: break-spaces !important;
}

@media screen and (max-width: 990px) {
    .display_MD_none {
        display: none !important;
    }

    .display_MD_flex {
        display: flex !important;
    }

    .display_MD_grid {
        display: grid !important;
        display: flex !important;
        flex-direction: column;
    }

    .dFlex_MDGrid {
        display: grid !important;
        display: flex !important;
        flex-direction: column;
    }

    .dGrid_MDFlex {
        display: grid !important;
        display: flex !important;
        flex-direction: column;
    }

    .Width_MD_100 {
        width: 100% !important;
    }
}


@media screen and (max-width: 1199px) {

    .display_Lg_none {
        display: none !important;
    }

    .display_Lg_flex {
        display: flex !important;
    }

    .display_Lg_grid {
        display: grid !important;
        display: flex !important;
        flex-direction: column;
    }

    .dFlex_LgGrid {
        display: grid !important;
        display: flex !important;
        flex-direction: column;
    }

    .dGrid_LgFlex {
        display: grid !important;
        display: flex !important;
        flex-direction: column;
    }

    .Width_Lg_100 {
        width: 100% !important;
    }
}

@media screen and (min-width: 991px) and (max-width: 1199px) {

    .display_MdLg_none {
        display: none !important;
    }

    .display_MdLg_flex {
        display: flex !important;
    }

    .display_MdLg_grid {
        display: grid !important;
        display: flex !important;
        flex-direction: column;
    }

    .dFlex_MdLgGrid {
        display: grid !important;
        display: flex !important;
        flex-direction: column;
    }

    .dGrid_MdLgFlex {
        display: grid !important;
        display: flex !important;
        flex-direction: column;
    }

    .Width_MdLg_100 {
        width: 100% !important;
    }
}


@media screen and (max-width: 767px) {

    .display_XS_none {
        display: none !important;
    }

    .display_XS_flex {
        display: flex !important;
    }

    .display_XS_grid {
        display: grid !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .display_XS_contents {
        display: contents !important;
    }

    .xs_overflow_auto {
        overflow-x: auto;
    }

    .dFlex_XSdGrid {
        display: grid !important;
        display: flex !important;
        flex-direction: column;
    }

    .dGrid_XSdFlex {
        display: flex !important;
    }

    .order_xs_1 {
        order: 1 !important;
    }

    .order_xs_2 {
        order: 2 !important;
    }

    .order_xs_3 {
        order: 3 !important;
    }

    .justify_content_initial_xs {
        justify-content: initial !important;
    }

    .justify_content_center_xs {
        justify-content: center !important;
    }

    .justify_content_right_xs {
        justify-content: right !important;
    }

    .justify_content_left_xs {
        justify-content: left !important;
    }

    .justify_content_spaceBetween_xs {
        justify-content: space-between !important;
    }

    .justify_content_spaceAround_xs {
        justify-content: space-around !important;
    }

    .justify_content_spaceEvenly_xs {
        justify-content: space-evenly !important;
    }

    .Width_xs_100 {
        width: 100% !important;
    }

    .flex_xs_wrap {
        flex-wrap: wrap;
    }

    .flex_xs_0_important {
        flex: 0 !important;
    }

    .flex_xs_1 {
        flex: 1;
    }

    .flex_xs_1_important {
        flex: 1 !important;
    }

    .flex_xs_2 {
        flex: 2;
    }

    .flex_xs_2_important {
        flex: 2 !important;
    }

    .flex_xs_3 {
        flex: 3;
    }

    .rotate_xs_0 {
        transform: rotate(0deg);
    }

    .rotate_xs_180 {
        transform: rotate(180deg);
    }

    .rotate_xs_90 {
        transform: rotate(90deg);
    }

    .rotate_xs_n90 {
        transform: rotate(-90deg);
    }
}


@media screen and (max-width: 576px) {

    .display_XXS_none {
        display: none !important;
    }

    .display_XXS_flex {
        display: flex !important;
    }

    .display_XXS_grid {
        display: grid !important;
        display: flex !important;
        flex-direction: column;
    }

    .dFlex_XXSdGrid {
        display: grid !important;
        /*display: flex !important;
            flex-direction: column;*/
    }

    .dGrid_XXSdFlex {
        display: flex !important;
    }

    .order_xxs_1 {
        order: 1 !important;
    }

    .order_xxs_2 {
        order: 2 !important;
    }

    .justify_content_initial_xs {
        justify-content: initial !important;
    }

    .justify_content_center_xxs {
        justify-content: center !important;
    }

    .justify_content_right_xxs {
        justify-content: right !important;
    }

    .justify_content_left_xxs {
        justify-content: left !important;
    }

    .justify_content_spaceBetween_xxs {
        justify-content: space-between !important;
    }

    .justify_content_spaceAround_xxs {
        justify-content: space-around !important;
    }

    .justify_content_spaceEvenly_xxs {
        justify-content: space-evenly !important;
    }

    .Width_xxs_100 {
        width: 100%;
    }
}


/* حالت مخفی‌سازی input برای موبایل - display: none */
.hide-mobile {
    display: none !important;
}

/* حالت مخفی‌سازی input برای دسکتاپ - visibility: hidden */
@media (min-width: 768px) {
    .hide-desktop {
        visibility: hidden !important;
    }
}

/*#endregion Display*/

/*#region Colors*/

.bg-white {
    background-color: var(--White_Color) !important;
}

.WhiteColor {
    color: var(--White_Color) !important;
}

.BlackColor {
    color: var(--BahmanBlack_Color) !important;
}

.GrayOnDarkColor {
    color: var(--Gray_OnDark_Icons_Color) !important;
}

.YellowAccentColor {
    color: var(--projectMainAccent_Color) !important;
}

.ContentColor {
    color: var(--FieldContent_Color) !important;
}

.FieldContentColor {
    color: var(--FieldContent_Color) !important;
}

.LightGrayBGColor {
    background-color: var(--LightGray_Color) !important;
}

.GrayColor {
    color: var(--Gray_Color) !important;
}

.DarkGrayTextColor {
    color: var(--DarkGray_Text_Color) !important;
}

.darkBG {
    background-color: var(--BackgroundColor_Dark_Color) !important;
}

.lightBG {
    background-color: var(--BackgroundColor_Color) !important;
}

.BackgroundColor_Color {
    color: var(--BackgroundColor_Color) !important;
}


.FieldTitle_Color {
    color: var(--FieldTitle_Color) !important;
}

.Red_BGColor {
    background-color: var(--Red_Color) !important;
}

.Green_BGColor {
    background-color: var(--GreenText_Color) !important;
}

.LightGreen_BGColor {
    background-color: var(--LightGreen_Color) !important;
}

.Grey_Unavailable_BGColor {
    background-color: var(--DarkGray_Text_Color) !important;
}

/*#endregion Colors*/

/*#region Scrollbar*/
/*For Firefox*/
* {
    /*overflow-y: scroll;*/
    scrollbar-color: var(--projectMainAccent_Color) transparent;
}

/**::webkit-scrollbar{
            display:none !important;
        }

        *{
            -ms-overflow-style: none !important;
            overflow: -moz-scrollbars-none !important;
            overflow: -moz-hidden-unscrollable !important;
            overflow:hidden;
        }*/



/* Hide scrollbar for Chrome, Safari and Opera */
/**::-webkit-scrollbar {
    display: none;
}*/

/* Hide scrollbar for IE, Edge and Firefox */
* {
    /*-ms-overflow-style: none;*/ /* IE and Edge */
    /*scrollbar-width: none;*/ /* Firefox */
    -ms-overflow-style: initial; /* IE and Edge */
    scrollbar-width: thin; /* Firefox */
}



/* width only for firefox */
* {
    scrollbar-width: thin !important;
    scrollbar-color: var(--projectMainAccent_Color) transparent !important;
    /*scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;*/
}


    /*For Chrome*/

    /* width */
    *::-webkit-scrollbar {
        width: 4px; /*for vertical scrolls*/
        height: 1px; /*for horizontal scrolls*/
    }

    /* Track */
    *::-webkit-scrollbar-track {
        background-color: transparent;
    }

    *::-webkit-scrollbar-track-piece {
        background-color: transparent;
    }

    /* Handle */
    *::-webkit-scrollbar-thumb {
        height: 2px;
        background: var(--projectMainAccent_BGColor);
    }

        *::-webkit-scrollbar-thumb:vertical {
            height: 2px;
            background: var(--projectMainAccent_BGColor);
        }

        /* Handle on hover */
        *::-webkit-scrollbar-thumb:hover {
            background: var(--projectMainAccent_BGColor);
            cursor: pointer;
            /*background: transparent;*/
        }


.HiddenScrollInChrome {
    overflow: auto; /* یا scroll */
    scrollbar-width: none; /* برای فایرفاکس */
    -ms-overflow-style: none; /* برای IE و Edge قدیمی */
}



/*#endregion Scrollbar*/


/*#region scrollBtn*/


.scrollButtons_Container {
    position: fixed;
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    display: none; /* در ابتدا مخفی است */
    flex-direction: column;
    gap: 10px;
}

.scrollBtn {
    width: 38px;
    height: 38px;
}

    .scrollBtn:hover {
        background-color: rgba(0, 80, 150, 1);
        transform: scale(1.1);
    }

@media screen and (max-width: 767px) {

    .scrollBtn {
        width: 30px;
        height: 30px;
    }
}

/* محفظه دکمه‌ها به صورت پیش‌فرض کاملاً مخفی است */
#scroll-buttons {
    display: none;
}

    /* 
  وقتی کلاس is-active توسط جاوا اسکریپت اضافه می‌شود، 
  محفظه به صورت flex نمایش داده می‌شود.
*/
    #scroll-buttons.is-active {
        display: flex;
        flex-direction: column; /* یا هر جهتی که نیاز دارید */
        gap: 8px; /* ایجاد فاصله بین دو دکمه */
    }

/* 
  این کلاس برای مخفی کردن دکمه‌های تکی (بالا یا پایین) است.
  استفاده از !important برای اطمینان از اینکه هیچ استایل دیگری روی آن تأثیر نگذارد.
*/
.hidden {
    visibility: hidden;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease-in-out;
}

/*#endregion scrollBtn*/

/*#region Body*/

html {
    /*overflow-x: hidden !important;*/
    width: 100vw;
    height: 100vh;
    background-color: var(--BackgroundColor_Color);
    /*scroll-behavior: smooth !important;*/
}

    html, html *,
    body, body * {
        /*در برخی از ایفون ها برای اینپوت ها مشکل ایجاد میکنه و باعث میشه تایپ انجام نشه*/
        user-select: none !important;
        -webkit-user-select: none !important;
        /*خلاف این استایل ها باید در اینپوت ها گذاشته شود*/
        cursor: default;
        direction: rtl;
        font-family: Avenir;
        font-weight: 100;
        color: var(--BahmanBlack_Color);
        line-height: initial;
        cursor: default;
        font-feature-settings: "kern";
        -moz-font-feature-settings: "kern"; /* فایرفاکس */
        -webkit-font-feature-settings: "kern"; /* کروم */
    }




body {
    overflow-y: hidden;
    overflow-x: hidden;
    margin: auto;
    height: 100vh;
    width: 100vw;
    scroll-behavior: smooth !important;
    background-color: var(--BackgroundColor_Color);
    font-size: 12px;
}

    body.Body_Div {
        overflow-y: scroll;
        overflow-x: hidden;
        background-color: var(--BackgroundColor_Color);
    }

    body .Body_Div {
        overflow-y: scroll;
        overflow-x: hidden;
        min-height: 100vh;
        width: 100vw;
        max-width: var(--MaxWidth);
        margin: auto;
        background-color: var(--BackgroundColor_Color);
        padding: 0px 16px;
        position: relative;
        display: grid;
        justify-content: center;
    }

    body .RenderBody_Div {
        position: relative;
        /*overflow-y: scroll;*/
        overflow-x: hidden;
        min-height: 100vh;
        max-width: var(--MaxWidth);
        margin: auto;
        padding: calc(var(--Header_Container_Height) + 18px) 10px 0;
    }

        body .RenderBody_Div.AdminDesktop_RenderBody_Div {
            padding: 0;
        }

            body .RenderBody_Div.AdminDesktop_RenderBody_Div .RenderBody_ContentDiv {
                padding: 0 22px 40px !important;
                /* مهم: استایل برای div اسکرول‌شونده با استفاده از کلاس */
                flex-grow: 1; /* برای گرفتن فضای باقی‌مانده */
                overflow-y: auto; /* فعال کردن اسکرول عمودی */
                overflow-x: hidden;
                scroll-behavior: smooth; /* فعال کردن اسکرول نرم */
                max-height: 100vh;
                min-height: 100vh;
                align-content: first baseline;
            }

/*.TopOfPage_PathDiv {
    position: sticky;
    top: 0;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(11px);
    z-index: 2;
    padding: 14px 0;
    height: fit-content;
}
*/

/*۱. راهکار اول: استفاده از Mask (محو شدن لبه پایین)
ا. ما با استفاده از mask-image به مرورگر می‌گوییم که نوار ابزار از بالا کاملاً واضح باشد و هرچه به پایین می‌رسد، محو شود تا خط تیز آن از بین برود.*/

/*.TopOfPage_PathDiv {
    position: sticky;
    top: 0;*/
/* کمی رنگ پس‌زمینه را بیشتر کن تا خوانایی حفظ شود */
/*background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(15px) saturate(180%);*/ /* اشباع رنگ، حس شیشه‌ای بهتری می‌دهد */
/*z-index: 2;
    padding: 14px 0;
    height: fit-content;*/
/* این خط جادو می‌کند: پایین نوار را نرم محو می‌کند */
/*-webkit-mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
}*/

/*۲. راهکار دوم: استایل "شیشه‌ای مدرن" (مثل iOS)
به جای محو کردن لبه، می‌توانیم لبه را با یک خط بسیار ظریف و شفاف (Border) مشخص کنیم و کمی سایه نرم بدهیم. این روش الان استانداردترین روش طراحی مدرن است.*/

/*.TopOfPage_PathDiv {
    position: sticky;
    top: 0;*/
/* رنگ سفید خیلی شفاف */
/*background: rgba(255, 255, 255, 0.7);*/
/* بلور بیشتر + سچوریشن برای زنده شدن رنگ‌های زیرین */
/*backdrop-filter: blur(20px) saturate(180%);
    z-index: 2;
    padding: 14px 0;*/
/* لبه ظریف شیشه‌ای در پایین */
/*border-bottom: 1px solid rgba(255, 255, 255, 0.3);*/
/* سایه بسیار ملایم برای جدا شدن از زمینه */
/*box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}*/

/*۳. راهکار سوم: نوار شناور (Floating Island)
اگر می‌خواهی خیلی خاص باشد، نوار را به کناره‌ها نچسبان. بگذار مثل یک کپسول معلق باشد (مثل داینامیک آیلند آیفون یا منوی مک‌بوک).*/

.TopOfPage_PathDiv {
    position: sticky;
    top: 8px;
    width: 99%;
    margin: 8px auto 16px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px) saturate(180%);
    z-index: 4;
    padding: 12px 20px; /* پدینگ کناری هم لازم است */
    /* گرد کردن گوشه‌ها */
    border-radius: 20px;
    /* بوردر و سایه برای عمق */
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.1);
}

.LandingRenderBody_Div {
    /*padding: var(--Header_Container_Height) 0 0;*/
    /*max-width: var(--LargeMaxWidth);*/
    margin: auto;
}

.Website_Padding {
    padding: 0px 16px;
}

.FullScreenScroll {
    height: 100vh;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    scroll-behavior: smooth;
}

    .FullScreenScroll > * {
        height: 100vh;
        scroll-snap-align: start;
        box-sizing: border-box;
    }

@media screen and (min-width: 768px) {
    body .RenderBody_Div.AdminDesktop_RenderBody_Div {
        /*margin-right: 84px;*/
        padding: 0;
        /*position: fixed;
            left: 50%;
            transform: translate(-50%);*/
        max-width: var(--AdminDesktop_MaxWidth);
        width: 100%;
        height: 100vh;
    }

    .TopOfPage_PathDiv {
        padding: 10px 0;
        padding: 10px;
        padding: 8px;
        min-height: 64.5px;
    }
}

@media screen and (max-width: 1199px) {
    body .RenderBody_Div {
        padding: var(--Header_Container_Height) 6px 0;
        padding: var(--Header_Container_Height) var(--RL_Padding) 0;
    }

    .Website_Padding {
        padding: calc(var(--Header_Container_Height) + 18px) 4px 0;
        padding: calc(var(--Header_Container_Height) + 18px) var(--RL_Padding) 0;
    }
}

@media screen and (max-width: 767px) {
    body .RenderBody_Div {
        padding: calc(var(--Header_Container_Height) + 18px) 6px 0;
        padding: calc(var(--Header_Container_Height) + 18px) var(--RL_Padding) 0;
    }

        body .RenderBody_Div.AdminDesktop_RenderBody_Div .RenderBody_ContentDiv {
            padding: 0 8px 22px !important;
        }

    /*روش 3*/
    .TopOfPage_PathDiv {
        top: 4px;
        width: 100%;
        margin: 4px auto 12px;
        padding: 6px;
        min-height: 44px;
    }
}

/*@media screen and (min-width: 2001px) {
    .HaveMaxWidth {
        max-width: var(--MaxWidth);
    }
}*/

@media screen and (min-width: 1200px) {
    .HaveMaxWidth {
        max-width: var(--MaxWidth);
        margin: auto;
    }
}

/*#endregion Body*/

/*#region General*/

*, *:before, *:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

a, a *,
button, button * {
    text-decoration: none;
    cursor: pointer !important;
    outline: none;
    background: none;
    background-color: transparent;
    border: none;
    padding: 0;
}

*[role="button"] * {
    cursor: pointer;
}

audio {
    border-radius: 100px;
}

textarea {
    resize: none;
}

    input, input:focus,
    textarea, textarea:focus {
        outline: none !important;
        /*قابلیت انتخاب متن را فقط برای input و textarea*/
        user-select: text !important;
        -webkit-user-select: text !important;
    }

        input, input:focus {
            border: none !important;
            pointer-events: auto !important;
        }

            /* انتخاب اینپوت‌هایی که توسط مرورگر به صورت خودکار پر شده‌اند */
            input:-webkit-autofill,
            input:-webkit-autofill:hover,
            input:-webkit-autofill:focus,
            input:-webkit-autofill:active {
                /* ترفند اصلی: یک سایه داخلی بسیار بزرگ با رنگ پس‌زمینه دلخواه شما */
                /* این سایه، رنگ پس‌زمینه پیش‌فرض مرورگر را می‌پوشاند */
                box-shadow: var(--AnyButton_Up_Shadow), 0 0 0 30px white inset !important; /* رنگ white را با رنگ پس‌زمینه مورد نظر خود جایگزین کنید */
                -webkit-box-shadow: var(--AnyButton_Up_Shadow), 0 0 0 30px white inset !important; /* رنگ white را با رنگ پس‌زمینه مورد نظر خود جایگزین کنید */
                -moz-box-shadow: var(--AnyButton_Up_Shadow), 0 0 0 30px white inset !important; /* رنگ white را با رنگ پس‌زمینه مورد نظر خود جایگزین کنید */
                /* تغییر رنگ متن */
                /* مرورگر ممکن است رنگ متن را هم تغییر دهد (معمولا به سیاه) */
                /* با این پراپرتی می‌توانیم آن را به رنگ دلخواه خود برگردانیم */
                -webkit-text-fill-color: #333 !important; /* رنگ #333 را با رنگ متن دلخواه خود جایگزین کنید */
                /* حذف انیمیشن تغییر رنگ پس‌زمینه در کروم */
                /* کروم یک انیمیشن transition برای این تغییر رنگ دارد که با این ترفند آن را غیرفعال می‌کنیم */
                transition: background-color 1s ease-in-out 0s;
                text-decoration: none !important;
            }

.form-control:focus {
    box-shadow: none !important;
}

select {
    -moz-appearance: none; /* Firefox */
    -webkit-appearance: none; /* Safari and Chrome */
    appearance: none;
    background-image: url('../Image/Icons/Arrow_Down_G.svg') !important;
    background-image: url('../Image/Icons/Arrow_Down_Input.svg') !important;
    background-repeat: no-repeat !important;
    background-size: 12px 7px !important;
    background-position: 14px center !important;
    cursor: pointer !important;
}

    select.smallSelect {
        background-position: 8px center !important;
        background-size: 10px !important;
    }

.cursorPointer,
.cursorPointer * {
    cursor: pointer !important;
}

fieldset {
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

legend {
    padding: 0;
    margin: 0;
}

table {
    caption-side: top;
}

.ltr {
    direction: ltr;
}

.rtl {
    direction: rtl;
}

.objectPosition_Center {
    object-position: center;
}

.objectPosition_Top {
    object-position: top;
}

.objectPosition_Bottom {
    object-position: bottom;
}

.objectPosition_Right {
    object-position: top right;
    height: 100% !important;
}

.objectPosition_Left {
    object-position: top left;
    height: 100% !important;
}

.LinkedText {
    color: var(--projectMainAccent_Color);
    font-weight: 700;
    font-weight: 600;
    cursor: pointer;
}

.LinkedText_Underlined {
    color: var(--projectMainAccent_Color);
    font-weight: 700;
    font-weight: 600;
    cursor: pointer;
    /*text-decoration: 1px dashed var(--BahmanBlack_Color) underline;*/
    border-bottom: 1px dashed var(--BahmanBlack_Color);
    width: fit-content;
    padding: 0 6px 2px;
}


@media screen and (max-width: 767px) {

    .ltr_xs {
        direction: ltr;
    }

    .rtl_xs {
        direction: rtl;
    }
}

/*#endregion General*/

/*#region Shadows*/

.DokmeGholombeTarUp_Daruni_Shadow {
    -webkit-box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
    box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
}

.AnyButton_Down_Dark_Shadow {
    -webkit-box-shadow: var(--AnyButton_Down_Dark_Shadow);
    -moz-box-shadow: var(--AnyButton_Down_Dark_Shadow);
    box-shadow: var(--AnyButton_Down_Dark_Shadow);
}

.AnyButton_Down_Shadow {
    -webkit-box-shadow: var(--AnyButton_Down_Shadow);
    -moz-box-shadow: var(--AnyButton_Down_Shadow);
    box-shadow: var(--AnyButton_Down_Shadow);
}

.AnyButton_Up_Dark_Shadow {
    -webkit-box-shadow: var(--AnyButton_Up_Dark_Shadow);
    -moz-box-shadow: var(--AnyButton_Up_Dark_Shadow);
    box-shadow: var(--AnyButton_Up_Dark_Shadow);
}

.AnyButton_Up_Shadow {
    -webkit-box-shadow: var(--AnyButton_Up_Shadow);
    -moz-box-shadow: var(--AnyButton_Up_Shadow);
    box-shadow: var(--AnyButton_Up_Shadow);
}

.BackButton_Shadow {
    -webkit-box-shadow: var(--BackButton_Shadow);
    -moz-box-shadow: var(--BackButton_Shadow);
    box-shadow: var(--BackButton_Shadow);
}

.BlackBtn_Shadow2 {
    -webkit-box-shadow: var(--BlackBtn_Shadow2);
    -moz-box-shadow: var(--BlackBtn_Shadow2);
    box-shadow: var(--BlackBtn_Shadow2);
}

.BlackButton_Shadow {
    -webkit-box-shadow: var(--BlackButton_Shadow);
    -moz-box-shadow: var(--BlackButton_Shadow);
    box-shadow: var(--BlackButton_Shadow);
}

.DashboardBoxShadow_Dark_Shadow {
    -webkit-box-shadow: var(--DashboardBoxShadow_Dark_Shadow);
    -moz-box-shadow: var(--DashboardBoxShadow_Dark_Shadow);
    box-shadow: var(--DashboardBoxShadow_Dark_Shadow);
}

.DashboardBoxShadow_Shadow {
    -webkit-box-shadow: var(--DashboardBoxShadow_Shadow);
    -moz-box-shadow: var(--DashboardBoxShadow_Shadow);
    box-shadow: var(--DashboardBoxShadow_Shadow);
}

.DisabledButton_Shadow {
    -webkit-box-shadow: var(--DisabledButton_Shadow);
    -moz-box-shadow: var(--DisabledButton_Shadow);
    box-shadow: var(--DisabledButton_Shadow);
}

.DokmeGholombeDown_Daruni_Shadow {
    -webkit-box-shadow: var(--DokmeGholombeDown_Daruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeDown_Daruni_Shadow);
    box-shadow: var(--DokmeGholombeDown_Daruni_Shadow);
}

.DokmeGholombeSadeDown_Daruni_Dark_Shadow {
    -webkit-box-shadow: var(--DokmeGholombeSadeDown_Daruni_Dark_Shadow);
    -moz-box-shadow: var(--DokmeGholombeSadeDown_Daruni_Dark_Shadow);
    box-shadow: var(--DokmeGholombeSadeDown_Daruni_Dark_Shadow);
}

.DokmeGholombeSadeUp_Daruni_Dark_Shadow {
    -webkit-box-shadow: var(--DokmeGholombeSadeUp_Daruni_Dark_Shadow);
    -moz-box-shadow: var(--DokmeGholombeSadeUp_Daruni_Dark_Shadow);
    box-shadow: var(--DokmeGholombeSadeUp_Daruni_Dark_Shadow);
}

.DokmeGholombeTarDown_Biruni_Dark_Style {
    background: linear-gradient(135deg, #1F1F1F -0.14%, #2A2A2A 99.86%), rgba(38, 38, 38, 0.55) !important;
}

.DokmeGholombeTarDown_Daruni_Dark_Shadow {
    -webkit-box-shadow: var(--DokmeGholombeTarDown_Daruni_Dark_Shadow);
    -moz-box-shadow: var(--DokmeGholombeTarDown_Daruni_Dark_Shadow);
    box-shadow: var(--DokmeGholombeTarDown_Daruni_Dark_Shadow);
}

.DokmeGholombeTarDown_Daruni_Dark_Style {
    -webkit-box-shadow: var(--DokmeGholombeTarDown_Daruni_Dark_Shadow) !important;
    -moz-box-shadow: var(--DokmeGholombeTarDown_Daruni_Dark_Shadow) !important;
    box-shadow: var(--DokmeGholombeTarDown_Daruni_Dark_Shadow) !important;
    border: inset 3px solid var(--Border_BoxGholombe_Up_Daruni_BorderColor_Dark5onLight) !important;
    background: linear-gradient(135deg, #1F1F1F 0%, #3D3D3D 100%) !important;
}

.DokmeGholombeTarUp_Daruni_Shadow {
    -webkit-box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
    box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
}

.DokmeGholombeUp_Biruni_Shadow {
    -webkit-box-shadow: var(--DokmeGholombeUp_Biruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeUp_Biruni_Shadow);
    box-shadow: var(--DokmeGholombeUp_Biruni_Shadow);
}

.DokmeGholombeUp_Daruni_Shadow {
    -webkit-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
}

.DokmeyeSade_Down_Dark_Shadow {
    -webkit-box-shadow: var(--DokmeyeSade_Down_Dark_Shadow);
    -moz-box-shadow: var(--DokmeyeSade_Down_Dark_Shadow);
    box-shadow: var(--DokmeyeSade_Down_Dark_Shadow);
}

.DokmeyeSade_Down_Shadow {
    -webkit-box-shadow: var(--DokmeyeSade_Down_Shadow);
    -moz-box-shadow: var(--DokmeyeSade_Down_Shadow);
    box-shadow: var(--DokmeyeSade_Down_Shadow);
}

.DokmeyeSade_Up_Dark_Shadow {
    -webkit-box-shadow: var(--DokmeyeSade_Up_Dark_Shadow);
    -moz-box-shadow: var(--DokmeyeSade_Up_Dark_Shadow);
    box-shadow: var(--DokmeyeSade_Up_Dark_Shadow);
}

.DokmeyeSade_Up_Shadow {
    -webkit-box-shadow: var(--DokmeyeSade_Up_Shadow);
    -moz-box-shadow: var(--DokmeyeSade_Up_Shadow);
    box-shadow: var(--DokmeyeSade_Up_Shadow);
}

.LocationPinShadow_Biruni2_Dark_Shadow {
    -webkit-box-shadow: var(--LocationPinShadow_Biruni2_Dark_Shadow);
    -moz-box-shadow: var(--LocationPinShadow_Biruni2_Dark_Shadow);
    box-shadow: var(--LocationPinShadow_Biruni2_Dark_Shadow);
}

.LocationPinShadow_Biruni_Dark_Shadow {
    -webkit-box-shadow: var(--LocationPinShadow_Biruni_Dark_Shadow);
    -moz-box-shadow: var(--LocationPinShadow_Biruni_Dark_Shadow);
    box-shadow: var(--LocationPinShadow_Biruni_Dark_Shadow);
}

.LocationPinShadow_Daruni_Dark_Shadow {
    -webkit-box-shadow: var(--LocationPinShadow_Daruni_Dark_Shadow);
    -moz-box-shadow: var(--LocationPinShadow_Daruni_Dark_Shadow);
    box-shadow: var(--LocationPinShadow_Daruni_Dark_Shadow);
}

.LocationPin_Shadow {
    -webkit-box-shadow: var(--LocationPin_Shadow);
    -moz-box-shadow: var(--LocationPin_Shadow);
    box-shadow: var(--LocationPin_Shadow);
}

.LocationPin_Shadow_Biruni {
    -webkit-box-shadow: var(--LocationPin_Shadow_Biruni);
    -moz-box-shadow: var(--LocationPin_Shadow_Biruni);
    box-shadow: var(--LocationPin_Shadow_Biruni);
}

.LocationPin_Shadow_Daruni {
    -webkit-box-shadow: var(--LocationPin_Shadow_Daruni);
    -moz-box-shadow: var(--LocationPin_Shadow_Daruni);
    box-shadow: var(--LocationPin_Shadow_Daruni);
}

.MainItems_DownDark_Shadow {
    -webkit-box-shadow: var(--MainItems_DownDark_Shadow);
    -moz-box-shadow: var(--MainItems_DownDark_Shadow);
    box-shadow: var(--MainItems_DownDark_Shadow);
}

.MainItems_Down_Shadow {
    -webkit-box-shadow: var(--MainItems_Down_Shadow);
    -moz-box-shadow: var(--MainItems_Down_Shadow);
    box-shadow: var(--MainItems_Down_Shadow);
}

.MainItems_UpDark_Shadow {
    -webkit-box-shadow: var(--MainItems_UpDark_Shadow);
    -moz-box-shadow: var(--MainItems_UpDark_Shadow);
    box-shadow: var(--MainItems_UpDark_Shadow);
}

.MainItems_UpDark_WithBorder_Shadow {
    -webkit-box-shadow: var(--MainItems_UpDark_WithBorder_Shadow);
    -moz-box-shadow: var(--MainItems_UpDark_WithBorder_Shadow);
    box-shadow: var(--MainItems_UpDark_WithBorder_Shadow);
}

.MainItems_UpDownDark_Shadow {
    -webkit-box-shadow: var(--MainItems_UpDownDark_Shadow);
    -moz-box-shadow: var(--MainItems_UpDownDark_Shadow);
    box-shadow: var(--MainItems_UpDownDark_Shadow);
}

.MainItems_UpDown_Shadow {
    -webkit-box-shadow: var(--MainItems_UpDown_Shadow);
    -moz-box-shadow: var(--MainItems_UpDown_Shadow);
    box-shadow: var(--MainItems_UpDown_Shadow);
}

.MainItems_Up_Shadow {
    -webkit-box-shadow: var(--MainItems_Up_Shadow);
    -moz-box-shadow: var(--MainItems_Up_Shadow);
    box-shadow: var(--MainItems_Up_Shadow);
}

.MenuBox_Dark_Shadow {
    -webkit-box-shadow: var(--MenuBox_Dark_Shadow);
    -moz-box-shadow: var(--MenuBox_Dark_Shadow);
    box-shadow: var(--MenuBox_Dark_Shadow);
}

.MenuBox_Dark_Shadow {
    -webkit-box-shadow: var(--MenuBox_Dark_AccentShadow);
    -moz-box-shadow: var(--MenuBox_Dark_AccentShadow);
    box-shadow: var(--MenuBox_Dark_AccentShadow);
}

.MenuBox_Shadow {
    -webkit-box-shadow: var(--MenuBox_Shadow);
    -moz-box-shadow: var(--MenuBox_Shadow);
    box-shadow: var(--MenuBox_Shadow);
}

.MenuBox_Shadow2 {
    -webkit-box-shadow: var(--MenuBox_Shadow2);
    -moz-box-shadow: var(--MenuBox_Shadow2);
    box-shadow: var(--MenuBox_Shadow2);
}

.ProgressbarBtnShadow_Dark_Shadow {
    -webkit-box-shadow: var(--ProgressbarBtnShadow_Dark_Shadow);
    -moz-box-shadow: var(--ProgressbarBtnShadow_Dark_Shadow);
    box-shadow: var(--ProgressbarBtnShadow_Dark_Shadow);
}

.ProgressbarBtnShadow_Shadow {
    -webkit-box-shadow: var(--ProgressbarBtnShadow_Shadow);
    -moz-box-shadow: var(--ProgressbarBtnShadow_Shadow);
    box-shadow: var(--ProgressbarBtnShadow_Shadow);
}

.ProgressbarShadow_Dark_Shadow {
    -webkit-box-shadow: var(--ProgressbarShadow_Dark_Shadow);
    -moz-box-shadow: var(--ProgressbarShadow_Dark_Shadow);
    box-shadow: var(--ProgressbarShadow_Dark_Shadow);
}

.ProgressbarShadow_Shadow {
    -webkit-box-shadow: var(--ProgressbarShadow_Shadow);
    -moz-box-shadow: var(--ProgressbarShadow_Shadow);
    box-shadow: var(--ProgressbarShadow_Shadow);
}

.SelectOption_Down_Dark_Shadow {
    -webkit-box-shadow: var(--SelectOption_Down_Dark_Shadow);
    -moz-box-shadow: var(--SelectOption_Down_Dark_Shadow);
    box-shadow: var(--SelectOption_Down_Dark_Shadow);
}

.SelectOption_Down_Shadow {
    -webkit-box-shadow: var(--SelectOption_Down_Shadow);
    -moz-box-shadow: var(--SelectOption_Down_Shadow);
    box-shadow: var(--SelectOption_Down_Shadow);
}

.Text_OnDarkBG_textShadow {
    -webkit-box-shadow: var(--Text_OnDarkBG_textShadow);
    -moz-box-shadow: var(--Text_OnDarkBG_textShadow);
    box-shadow: var(--Text_OnDarkBG_textShadow);
}

.Text_OnDarkBG_textshadow2 {
    -webkit-box-shadow: var(--Text_OnDarkBG_textshadow2);
    -moz-box-shadow: var(--Text_OnDarkBG_textshadow2);
    box-shadow: var(--Text_OnDarkBG_textshadow2);
}

.Text_OnLightBG_textshadow {
    -webkit-box-shadow: var(--Text_OnLightBG_textshadow);
    -moz-box-shadow: var(--Text_OnLightBG_textshadow);
    box-shadow: var(--Text_OnLightBG_textshadow);
}

.Text_OnLightBG_textshadow2 {
    -webkit-box-shadow: var(--Text_OnLightBG_textshadow2);
    -moz-box-shadow: var(--Text_OnLightBG_textshadow2);
    box-shadow: var(--Text_OnLightBG_textshadow2);
}

.Text_OnLightBG_textshadow3 {
    -webkit-box-shadow: var(--Text_OnLightBG_textshadow3);
    -moz-box-shadow: var(--Text_OnLightBG_textshadow3);
    box-shadow: var(--Text_OnLightBG_textshadow3);
}

.DarkBtn_Shadow_OnDark {
    -webkit-box-shadow: var(--AnyButton_Up_Dark_Shadow) !important;
    -moz-box-shadow: var(--AnyButton_Up_Dark_Shadow) !important;
    box-shadow: var(--AnyButton_Up_Dark_Shadow) !important;
}

/*#endregion Shadows*/

/*#region NeumorphicText*/

.NeumorphicText_OnLight,
.NeumorphicText_OnDark {
    height: fit-content !important;
}

.NeumorphicText_OnLight {
    text-shadow: var(--Text_OnLightBG_textshadow3);
}

.LightNeumorphicText_OnLight {
    font-weight: bold;
    font-weight: 600;
    outline: none;
    color: var(--BackgroundColor_Color);
    /*    text-shadow: -1px -1px 2px rgba(217, 217, 217, 0.50);
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);*/
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.01);
    filter: drop-shadow(2.5px 2.5px 4px rgba(217, 217, 217, 0.90)) drop-shadow(-2px -2px 4px #FFF);
}

.NeumorphicText_OnDark {
    text-shadow: var(--Text_OnDarkBG_textshadow2);
}

/*#endregion NeumorphicText*/

/*#region Header*/
.Header_Container {
    width: 100%;
    padding: 16px;
    position: fixed;
    z-index: 9999;
    top: 0;
    margin: auto;
    max-width: var(--MaxWidth);
    left: 50%;
    transform: translate(-50%);
}

.myHeader {
    height: 70px;
    padding: 3px;
    border-radius: var(--BtnsBorder_Radius);
}

    .myHeader.LightHeader {
    }

    .myHeader.DarkHeader.DarkHeader1 {
        background: var(--DokmeGholombeUp_Daruni_Shadow);
        -webkit-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
        -moz-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
        box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
        overflow: hidden;
    }

    .myHeader.DarkHeader.DarkHeader2 {
    }

    .myHeader.DarkHeader.DarkHeader3 {
    }

    .myHeader.DarkHeader.DarkHeader4 {
        background: var(--DokmeGholombeUp_Daruni_Shadow);
        /*-webkit-box-shadow: var(--MenuBox_Dark_AccentShadow);
        -moz-box-shadow: var(--MenuBox_Dark_AccentShadow);
        box-shadow: var(--MenuBox_Dark_AccentShadow);*/
        overflow: hidden;
    }

    .myHeader.DarkHeader.DarkHeader5 {
        background: linear-gradient(0deg, #1F1F1F 0%, #1F1F1F 100%), rgba(38, 38, 38, 0.55);
        -webkit-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
        -moz-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
        box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
        overflow: hidden;
    }

    .myHeader .myHeader_SecondLayer {
        display: flex;
        height: 100%;
        width: 100%;
        /*padding: 10px 20px 10px 16px;*/
        padding: 10px 20px;
        justify-content: space-between;
        align-items: center;
        border-radius: var(--BtnsBorder_Radius);
    }

    .myHeader.LightHeader .myHeader_SecondLayer {
        background: var(--BackgroundColor_Color);
        -webkit-box-shadow: var(--MenuBox_Shadow2);
        -moz-box-shadow: var(--MenuBox_Shadow2);
        box-shadow: var(--MenuBox_Shadow2);
    }

    .myHeader.DarkHeader.DarkHeader1 .myHeader_SecondLayer {
        border: var(--Border_DokmeGholombe_Tar_Up_Daruni_Dark_Border);
        background: var(--DokmeGholombe_Sade_Up_Daruni_Color_Dark);
        -webkit-box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
        -moz-box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
        box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
    }

    .myHeader.DarkHeader.DarkHeader2 .myHeader_SecondLayer {
        background: var(--BackgroundColor_Dark_Color);
        -webkit-box-shadow: var(--MenuBox_Dark_Shadow);
        -moz-box-shadow: var(--MenuBox_Dark_Shadow);
        box-shadow: var(--MenuBox_Dark_Shadow);
    }

    .myHeader.DarkHeader.DarkHeader3 .myHeader_SecondLayer {
        background: var(--DokmeGholombe_Tar_Up_Daruni_Color_Dark);
        -webkit-box-shadow: var(--MenuBox_Dark_AccentShadow);
        -moz-box-shadow: var(--MenuBox_Dark_AccentShadow);
        box-shadow: var(--MenuBox_Dark_AccentShadow);
    }

    .myHeader.DarkHeader.DarkHeader4 .myHeader_SecondLayer {
        border: var(--Border_DokmeGholombe_Sade_Up_Daruni_DarkOnPureBlackBorder);
        background: var(--DokmeGholombe_Sade_Up_Daruni_Color_DarkOnPureBlack);
        -webkit-box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
        -moz-box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
        box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
    }

    .myHeader.DarkHeader.DarkHeader5 .myHeader_SecondLayer {
        border: var(--Border_DokmeGholombe_Tar_Up_Daruni_Dark_BlackShadowBorder);
        background: var(--DokmeGholombe_Sade_Up_Daruni_Color_Dark);
        -webkit-box-shadow: var(--DokmeGholombeSadeDown_Daruni_Dark_Shadow);
        -moz-box-shadow: var(--DokmeGholombeSadeDown_Daruni_Dark_Shadow);
        box-shadow: var(--DokmeGholombeSadeDown_Daruni_Dark_Shadow);
    }


.HeaderBtns_Container {
    /*padding: 0 10px;*/
}

.LightHeader .Logo_Div img.IconOnLight,
.LightHeader img.DarkIcon_On_LightBtn,
.LightHeader #BlackName {
    display: flex;
}

.LightHeader .Logo_Div img.IconOnDark,
.LightHeader img.LightIcon_On_DarkBtn,
.LightHeader #WhiteName {
    display: none;
}

.DarkHeader .Logo_Div img.IconOnLight,
.DarkHeader img.DarkIcon_On_LightBtn,
.DarkHeader #BlackName {
    display: none;
}

.DarkHeader .Logo_Div img.IconOnDark,
.DarkHeader img.LightIcon_On_DarkBtn,
.DarkHeader #WhiteName {
    display: flex;
}

.LightHeader .HeaderLink_Div {
    color: var(--BahmanBlack_Color);
}

.DarkHeader .HeaderLink_Div {
    color: var(--White_Color);
}

.HeaderBtns_Container {
}

.HorizontalLink:hover,
.HorizontalLink:active {
    color: var(--projectMainAccent_Color);
}

@media screen and (max-width: 767px) {
    .myHeader {
        height: 50px;
    }

        .myHeader .myHeader_SecondLayer {
            padding: 0 8px;
        }

    .Header_Container {
        /*padding: 4px;*/
        padding: 4px var(--RL_Padding);
    }
}

/*#endregion Header*/

/*#region SideNav*/


.sidenav {
    /*height: calc(100vh - var(--Header_Container_Height) - 16px);
    width: 0;*/
    height: 0;
    width: 250px;
    position: fixed;
    z-index: 1;
    top: var(--Header_Container_Height);
    right: 16px;
    overflow: hidden;
    transition: 0.5s;
    background: linear-gradient(0deg, #1F1F1F 0%, #1F1F1F 100%), rgba(38, 38, 38, 0.55);
    border-radius: var(--InnerBorder_Radius);
    -webkit-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    /*-webkit-box-shadow: var(--DokmeGholombeUp_Biruni_Shadow), var(--DokmeGholombeUp_Daruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeUp_Biruni_Shadow), var(--DokmeGholombeUp_Daruni_Shadow);
    box-shadow: var(--DokmeGholombeUp_Biruni_Shadow), var(--DokmeGholombeUp_Daruni_Shadow);*/
}

.sidenavInside {
    border: var(--Border_DokmeGholombe_Tar_Up_Daruni_Dark_BlackShadowBorder);
    background: var(--DokmeGholombe_Sade_Up_Daruni_Color_Dark);
    -webkit-box-shadow: var(--DokmeGholombeSadeDown_Daruni_Dark_Shadow);
    -moz-box-shadow: var(--DokmeGholombeSadeDown_Daruni_Dark_Shadow);
    box-shadow: var(--DokmeGholombeSadeDown_Daruni_Dark_Shadow);
    overflow-y: scroll;
    overflow-x: hidden;
    margin: 3px;
    border-radius: var(--InnerBorder_Radius);
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    padding: 30px 0;
    display: grid;
    align-content: baseline;
}

.sidenav .SidenavMenuLink_Div {
    padding: 16px 28px 16px 8px;
    text-decoration: none;
    color: white;
    display: block;
    transition: 0.3s;
    height: fit-content;
    display: flex;
}

    .sidenav .SidenavMenuLink_Div .SidenavMenuLink_Txt,
    .sidenav .SidenavMenuLink_Div .SidenavMenuLink_Txt *,
    .sidenav .SidenavMenuLink_Txt,
    .sidenav .SidenavMenuLink_Txt * {
        color: whitesmoke;
        color: var(--Gray_OnDark_Icons_Color);
    }

    .sidenav .SidenavMenuLink_Div:hover .SidenavMenuLink_Txt,
    .sidenav .SidenavMenuLink_Div:hover .SidenavMenuLink_Txt *,
    .sidenav .mySubmenu_LinkDiv.SidenavMenuLink_Txt:hover,
    .sidenav .mySubmenu_LinkDiv.SidenavMenuLink_Txt:hover * {
        color: white;
    }

.sidenav .closebtn {
    display: flex;
    align-items: center;
    justify-content: left;
    height: 50px;
    padding: 22px 12px;
    font-size: 36px;
}

.mySubmenu {
    padding: 0 28px 0 8px;
}

.mySubmenu_LinkDiv {
    padding: 16px 24px 16px 0;
    /*border-bottom: 0.3px solid var(--Gray_OnDark_Icons_Color);*/
    display: flex;
    gap: 14px;
    align-items: center;
}

.LinkHasSublink {
    position: relative;
}

/*@media screen and (max-height: 450px) {
    .sidenav {
        padding-top: 15px;
    }

        .sidenav a {
            font-size: 18px;
        }
}*/

/*#endregion SideNav*/


/*#region Btns*/

.YellowBorder_Btn {
    border: var(--Border_DokmeMenu_Up_AccentBorder) !important;
}

.YellowBorder_Box {
    border: 4px outset rgba(255, 187, 0, 0.50) !important;
}


.BtnLayer1, .BtnLayer2 {
    border-radius: var(--BtnsBorder_Radius);
}

.HeaderBtns_Container .BtnLayer1 {
    height: 50px;
}

.BtnLayer1 {
    overflow: hidden; /*For Inner Shadows*/
    padding: 3px;
}

.LongBtn_Div .BtnLayer1 {
    padding: 6px;
    padding: 3px;
}

.myBtn_Div .BtnLayer1 {
    /*width: 150px;*/
    width: fit-content;
    height: 50px;
}

.HeaderBtn_Div .BtnLayer1 {
    width: fit-content !important;
    min-width: fit-content !important;
}

.BtnLayer1.LongBtn_min150px {
    min-width: 150px !important;
}

.myBtn_Div .BtnLayer1.LightBtn_OnDarkBG_Layer1 {
    /*height: calc(50px + 6px);*/
    height: 50px;
}

.HeaderBtns_Container .IconBtn_Div .BtnLayer1,
.IconBtn_Div .BtnLayer1 {
    padding: 6px;
    width: 50px;
}

    .HeaderBtns_Container .IconBtn_Div .BtnLayer1:hover,
    .IconBtn_Div .BtnLayer1:hover {
        border: var(--Border_DokmeMenu_Up_AccentBorder) !important;
    }

.BtnLayer1_1 {
    overflow: hidden;
    padding: 8px;
}

.BtnLayer2 {
    padding: 0px 24px;
    padding: 6px 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.BtnLayer1_1 .BtnLayer2 {
    padding: 70px;
}

/*.DarkGholombe .BtnLayer2 {
    border: var(--Border_DokmeGholombe_Tar_Up_Daruni_Dark_BlackShadowBorder);
}*/

.DarkGholombe .BtnLayer2 {
    position: relative; /* Needed to position the pseudo-element */
    /*padding: 3px;*/ /* Space for the "border" */
    background: var(--DokmeGholombe_Sade_Up_Daruni_Color_Dark); /* Background of the element */
}

    .DarkGholombe .BtnLayer2::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: -1;
        /*background: linear-gradient(90deg, rgba(35, 35, 35, 0.20) 0%, rgba(62, 60, 60, 0.20) 100%), linear-gradient(135deg, #505050 0%, #1B1B1B 100%);*/
        background: var(--Border_DokmeGholombe_Tar_Up_Daruni_Color_Dark4onLight);
        background-origin: border-box;
        background-clip: content-box, border-box;
        padding: 3px; /* Space for the border effect */
        box-sizing: border-box;
    }


.IconBtn_Div .BtnLayer2 {
    padding: 0;
}

/*******************************/
.BtnLayer1.LightBtnLayer1 {
    background: var(--DokmeGholombe_Biruni_Color);
}

.BtnLayer2.LightBtnLayer2 {
    background: var(--DokmeGholombe_Daruni_Color);
    -webkit-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
}

.LightBtnLayer2 .BtnContents_Div * {
    color: var(--BahmanBlack_Color);
}

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

.BtnLayer1.DarkBtnLayer1 {
    background: var(--DokmeGholombe_Sade_Up_Biruni_Color_Dark);
}

.LinkWithHoverBtn:hover .BtnLayer1.DarkBtnLayer1 {
    border: var(--Border_DokmeMenu_Up_AccentBorder);
}

.BtnLayer2.DarkBtnLayer2 {
    border: var(--Border_DokmeGholombe_Tar_Up_Daruni_Dark_BlackBorder);
    background: var(--DokmeGholombe_Sade_Up_Daruni_Color_Dark);
    -webkit-box-shadow: var(--DokmeGholombeSadeUp_Daruni_Dark_Shadow);
    -moz-box-shadow: var(--DokmeGholombeSadeUp_Daruni_Dark_Shadow);
    box-shadow: var(--DokmeGholombeSadeUp_Daruni_Dark_Shadow);
}

.DarkBtnLayer2 .BtnContents_Div * {
    color: var(--White_Color);
}

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

.BtnLayer1.DarkBtn_OnLightBG_Layer1 {
    background: var(--DokmeGholombe_Tar_Up_Biruni_Color_Dark);
    -webkit-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
}

.BtnLayer2.DarkBtn_OnLightBG_Layer2 {
    border: var(--Border_DokmeGholombe_Tar_Up_Daruni_Dark_Border);
    background: var(--DokmeGholombe_Tar_Up_Daruni_Color_Dark);
    -webkit-box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
    box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
    /**/
    -webkit-box-shadow: var(--DokmeGholombeSadeUp_Daruni_Dark_Shadow);
    -moz-box-shadow: var(--DokmeGholombeSadeUp_Daruni_Dark_Shadow);
    box-shadow: var(--DokmeGholombeSadeUp_Daruni_Dark_Shadow);
}

.DarkBtn_OnLightBG_Layer2 .BtnContents_Div * {
    color: var(--White_Color);
}


.DarkBtn_OnLightBG_Layer2:hover .BtnContents_Div * {
    color: var(--projectMainAccent_Color);
}

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

.BtnLayer1.LightBtn_OnDarkBG_Layer1 {
    background: var(--DokmeGholombe_Biruni_Color);
    box-shadow: var(--DokmeyeSade_Up_Dark_Shadow);
}

.BtnLayer2.LightBtn_OnDarkBG_Layer2 {
    background: var(--DokmeGholombe_Daruni_Color);
    -webkit-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
}

.LightBtn_OnDarkBG_Layer2 .BtnContents_Div * {
    color: var(--BahmanBlack_Color);
}
/*******************************/
.LightHeader .BtnLayer1 {
}

.LightHeader .BtnLayer2 {
}

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

.DarkHeader .BtnLayer1 {
}

.DarkHeader .BtnLayer2 {
}

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

.BtnLayer1.YellowShadowOnDark_Layer1 {
    -webkit-box-shadow: var(--MenuBox_Dark_AccentShadow);
    -moz-box-shadow: var(--MenuBox_Dark_AccentShadow);
    box-shadow: var(--MenuBox_Dark_AccentShadow);
}

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

.mySideNavbar_BlackCircleBtn {
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    border-radius: 50px;
    background: var(--BackgroundColor_Dark_Color);
    box-shadow: 0px 0px 10.67px 0px rgba(0, 0, 0, 0.70) inset, 0px 0px 9.67px 0px rgba(174, 174, 192, 0.63) inset;
    padding: 3px;
}

    .mySideNavbar_BlackCircleBtn .BtnLayer1.DarkBtn_OnLightBG_Layer1 {
        box-shadow: var(--BlackBtn_Shadow2);
        box-shadow: var(--AnyButton_Down_Shadow);
        box-shadow: var(--DokmeGholombeTarDown_Daruni_Dark_Shadow) !important;
        box-shadow: var(--LocationPinShadow_Biruni2_Dark_Shadow);
        box-shadow: var(--SelectOption_Down_Shadow);
    }

    .mySideNavbar_BlackCircleBtn:hover,
    .mySideNavbar_BlackCircleBtn:hover * {
        cursor: pointer;
    }

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

.myGholombe_LightBtn_Layer1 {
    border-radius: 100px;
    padding: 1px;
    background: var(--DokmeGholombe_Daruni_Color);
    box-shadow: var(--AnyButton_Up_Shadow);
}

.myGholombe_LightBtn_Layer2 {
    border-radius: 100px;
    width: 100%;
    height: 100%;
    background: var(--DokmeGholombe_Daruni_Color3);
}

    .myGholombe_LightBtn_Layer2:hover,
    .myGholombe_LightBtn_Layer2:active {
    }

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

.Barjaste_Light_Button {
    /*display: flex;*/
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    border: 1px solid var(--StrokeBorder_DokmeGholombe_Down_Biruni_Color);
    background: var(--BarjasteBtn_Light_BG_Color);
    background: var(--DokmeGholombe_Daruni_Color2);
    box-shadow: var(--BarjasteBtn_Light_Shadow);
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
}

.Barjaste_Light_Button2 {
    background: var(--DokmeGholombe_Daruni_Color3);
}

.Barjaste_Light_Button:hover,
.Barjaste_Light_Button:active {
    border: 1px solid var(--DokmeGholombe_Daruni_Color2);
    background: var(--DokmeGholombe_Daruni_Color);
}

    .Barjaste_Light_Button:hover,
    .Barjaste_Light_Button:active,
    .Barjaste_Light_Button:hover *,
    .Barjaste_Light_Button:active * {
        cursor: pointer;
    }

.LongSilver_Btn.myGholombe_LightBtn_Layer1.LongSilverGreen_Btn {
    background: var(--GreenText_Color);
    background: #03a54c;
}

    .LongSilver_Btn.myGholombe_LightBtn_Layer1.LongSilverGreen_Btn .myGholombe_LightBtn_Layer2 {
        color: var(--GreenText_Color);
        color: #03a54c;
    }

.LongSilver_Btn.myGholombe_LightBtn_Layer1.LongSilverYellow_Btn {
    background: #f2a315;
}

    .LongSilver_Btn.myGholombe_LightBtn_Layer1.LongSilverYellow_Btn .myGholombe_LightBtn_Layer2 {
        color: #f2a315;
    }

.LongSilver_Btn.myGholombe_LightBtn_Layer1.LongSilverRed_Btn {
    background: var(--Red_Color);
    background: #a30404;
}

    .LongSilver_Btn.myGholombe_LightBtn_Layer1.LongSilverRed_Btn .myGholombe_LightBtn_Layer2 {
        color: var(--Red_Color);
        color: #a30404;
    }

.LongSilver_Btn.myGholombe_LightBtn_Layer1.LongSilverOrange_Btn {
    background: #ff5e00;
}

    .LongSilver_Btn.myGholombe_LightBtn_Layer1.LongSilverOrange_Btn .myGholombe_LightBtn_Layer2 {
        color: #ff5e00;
    }

.LongSilver_Btn.myGholombe_LightBtn_Layer1.LongSilverBlue_Btn {
    background: blue;
    background: #030e8a;
}

    .LongSilver_Btn.myGholombe_LightBtn_Layer1.LongSilverBlue_Btn .myGholombe_LightBtn_Layer2 {
        color: blue;
        color: #030e8a;
    }

.LongSilver_Btn.myGholombe_LightBtn_Layer1.LongSilverAccentColor_Btn {
    background: var(--projectMainAccent_Color);
}

    .LongSilver_Btn.myGholombe_LightBtn_Layer1.LongSilverAccentColor_Btn .myGholombe_LightBtn_Layer2 {
        color: var(--projectMainAccent_Color);
    }

.LongSilver_Btn.myGholombe_LightBtn_Layer1 .myGholombe_LightBtn_Layer2 {
    background: var(--DokmeGholombe_Daruni_Color2);
    padding: 0 18px;
    font-weight: 600;
    color: var(--DarkGray_Text_Color);
    white-space: nowrap;
}

.LongSilver_Btn.myGholombe_LightBtn_Layer1:hover .myGholombe_LightBtn_Layer2,
.LongSilver_Btn.myGholombe_LightBtn_Layer1:active .myGholombe_LightBtn_Layer2 {
    box-shadow: var(--DokmeGholombeDown_Daruni_InsetOnly_Shadow2);
    background: var(--White_Color);
    color: var(--FieldContent_Color);
}

.myGholombe_LightBtn_Layer1:hover,
.myGholombe_LightBtn_Layer1:active,
.myGholombe_LightBtn_Layer1:hover *,
.myGholombe_LightBtn_Layer1:active * {
    cursor: pointer;
}

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

.BlackOnWhite_Layer1 {
    box-shadow: var(--DokmeyeSade_Up_Shadow);
    background: var(--DokmeGholombe_Sade_Up_Biruni_Color_Dark);
    height: 38px;
}

.IconBtn_Div .BlackOnWhite_Layer1 {
    width: 52px;
}

.LongBtn_Div .BlackOnWhite_Layer1 {
    width: auto;
    min-width: 162px;
}

.BtnLayer1.BlackOnWhite_Layer1:hover {
    /*padding: 4px;*/
}

.BtnLayer1:hover,
.BtnLayer1:hover * {
    cursor: pointer;
}

.IconBtn_Div .BtnLayer1.BlackOnWhite_Layer1:hover {
    border: none !important;
    padding: 4px;
}

.BlackOnWhite_Layer2 {
    box-shadow: var(--DokmeGholombeSadeUp_Daruni_Dark_Shadow);
    background: var(--DokmeGholombe_Sade_Up_Daruni_Color_Dark);
    border: 1px solid var(--Border_DokmeGholombe_Tar_Up_Daruni_Color_Dark2);
    padding: 0 8px !important;
}

.BtnLayer1.BlackOnWhite_Layer1:hover .BlackOnWhite_Layer2 {
    box-shadow: var(--DokmeGholombeSadeDown_Daruni_Dark_Shadow);
    background: var(--DokmeGholombe_Sade_Down_Daruni_Color_Dark);
}

/*******************************/
@media screen and (max-width: 767px) {
    .myBtn_Div .BtnLayer1 {
        min-width: 120px;
        height: 32px;
    }

    .BtnLayer2 {
        padding: 0px 12px;
    }


    .myBtn_Div .BtnLayer1.LightBtn_OnDarkBG_Layer1 {
        height: 30px;
    }

    .LongBtn_Div .BtnLayer1 {
        padding: 3px;
    }
}


/*#endregion Btns*/


/*#region gsap_GreenSock_hScroll_Contents*/
.full-screen {
    display: block;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    box-sizing: border-box;
    /*scroll-snap-align: start;*/
}

#panels {
    /*margin-top: 70px;*/ /* Adjust for fixed header */
    /*direction: ltr !important;*/
    overflow: hidden;
}

#panels-container {
    height: 100vh;
    width: 300vw; /* Ensure it's wide enough for horizontal scrolling */
    /*overflow: hidden;*/
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    padding: 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
}

.pin-spacer {
    width: 100vw;
    min-width: 100vw;
    max-width: var(--MaxWidth);
}

.panel {
    position: relative;
    width: 100vw;
    min-width: 100vw;
    /*max-width: var(--MaxWidth);*/
    height: 100vh;
    /*height: calc(100vh - 150px);*/ /* Adjust for header and any padding */
    /*flex: 0 0 100vw;*/ /* Panel width */
    overflow: hidden;
    display: flex;
    text-align: left;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
}

/*#endregion gsap_GreenSock_hScroll_Contents*/


/*#region bouncingItem*/

.bouncingItem {
    opacity: 0;
}

    .bouncingItem.animationActivation {
        /*animation: bounce 2s infinite;*/
        animation: bounce 3s;
        opacity: 1;
    }

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-30px);
    }

    60% {
        transform: translateY(-15px);
    }
}


/*#endregion TextAnimations*/


/*#region Banner*/

.myBanner {
    background-color: black;
    /*background-image: url('../Video/CarLights_OnAtEnd.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100vw;*/
}

video.BannerVideo {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    object-fit: cover;
    object-position: center;
}

.BannerText {
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -20%);
}

.BannerMainTitle {
}

.Text_After_Scroll {
    /*display: none;*/
    /*animation: scrollText 4s ease-out;*/ /* Adjust duration as needed */
    /*animation-delay: 2s;*/
    /*animation-name: bounce;*/
    /*animation: moveToTopRight 1.5s ease-out forwards;*/ /* Adjust duration as needed */
    animation: fadeInAnimation ease 6s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

@keyframes fadeInAnimation {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.ScrollDownArrow_Div {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0);
    width: 100%;
    height: 85px;
    display: flex;
    gap: 0;
    justify-content: center;
    align-items: center;
}

.arrows {
    width: 42px;
    height: auto; /* Maintain aspect ratio */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 26px;
    overflow: visible;
}

    .arrows path {
        stroke: #ffbb00;
        fill: transparent;
        stroke-width: 3px;
        animation: arrow 2s infinite;
        -webkit-animation: arrow 2s infinite;
    }

@keyframes arrow {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes arrow /* Safari and Chrome */ {
    0% {
        opacity: 0;
    }

    40% {
        opacity: 1;
    }

    80% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

.arrows path.a1 {
    animation-delay: -1s;
    -webkit-animation-delay: -1s; /* Safari and Chrome */
}

.arrows path.a2 {
    animation-delay: -0.5s;
    -webkit-animation-delay: -0.5s; /* Safari and Chrome */
}

.arrows path.a3 {
    animation-delay: 0s;
    -webkit-animation-delay: 0s; /* Safari and Chrome */
}


@media screen and (max-width: 767px) {

    video.BannerVideo {
        /*height: auto;*/
        object-fit: fill;
    }

    .BannerText {
        transform: translate(-50%, 0%);
    }

    .ScrollDownArrow_Div {
        height: 55px;
    }

    .arrows {
        width: 30px;
    }
}

@media screen and (min-width: 768px) and (max-height: 850px) {
    .ScrollDownArrow_Div {
        display: none;
    }
}

@media screen and (max-width: 767px) and (max-height: 850px) {
    .ScrollDownArrow_Div {
        display: none;
    }
}

/*#endregion Banner*/

/*#region DualCols_TextImage*/

.articleContentDiv {
    padding: 0 55px;
}

.HalfImg.rotateRight img {
    transform: rotate(-90deg);
    object-position: top;
}

.HalfImg.rotateLeft img {
    transform: rotate(90deg);
    object-position: bottom;
}

.panelArrowsContainer_L {
    bottom: 7%;
    left: 7%;
}

.panelArrowsContainer_R {
    bottom: 7%;
    right: 7%;
}

.Panel_RightArrow,
.Panel_LeftArrow {
}

.Panel_RightArrow {
    background-image: url('../Image/Icons/RightArrow.svg');
}

.Panel_LeftArrow {
    background-image: url('../Image/Icons/LeftArrow.svg');
}

/*#endregion DualCols_TextImage*/

/*#region DualCols*/
.DualSections_Div {
    padding: 35px;
    height: fit-content;
    min-height: fit-content;
    max-height: fit-content;
    align-items: center;
    align-content: center;
}

    .DualSections_Div * {
        height: fit-content;
    }

.MainItem_UpDown, .MainItem_UpDown_Dark {
    display: flex;
    width: 100%;
    height: fit-content;
    padding: 22px 12px;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    border-radius: var(--InputFieldsBorder_Radius_Mobile);
    /*height: 222px;*/
}

.MainItem_UpDown {
    -webkit-box-shadow: var(--MainItems_UpDown_Shadow);
    -moz-box-shadow: var(--MainItems_UpDown_Shadow);
    box-shadow: var(--MainItems_UpDown_Shadow);
    background: var(--Blur_BG_Color);
}

.MainItem_UpDown_Dark {
    -webkit-box-shadow: var(--MainItems_UpDownDark_Shadow);
    -moz-box-shadow: var(--MainItems_UpDownDark_Shadow);
    box-shadow: var(--MainItems_UpDownDark_Shadow);
    background-color: var(--BackgroundColor_Dark_Color);
}

    .MainItem_UpDown_Dark.FAQ_UpDown {
        background-repeat: no-repeat;
        background-image: url('../Image/BahmanImages/HandLaptop_H.png');
        background-size: 60%;
        background-position: left 25px bottom;
    }

.ItemListBox {
    display: grid;
    height: 250px;
    width: 250px;
    padding: 22px 12px;
    align-items: center;
    gap: 22px;
    border-radius: var(--InputFieldsBorder_Radius_Mobile);
}

    .ItemListBox:hover {
        border: var(--Border_DokmeMenu_Up_AccentBorder) !important;
        box-shadow: -8px -8px 10px 0px rgba(255, 255, 255, 0.80) inset, 8px 8px 10px 0px rgba(214, 214, 225, 0.35) inset;
        cursor: pointer;
    }

        .ItemListBox:hover * {
            cursor: pointer;
        }

.ItemListBox_Image {
    aspect-ratio: 1/1;
    object-fit: contain;
}

.ItemListBox_Text {
    font-weight: 900;
    text-shadow: var(--Text_OnLightBG_textshadow3);
    text-align: center;
}

.DualSections_Container {
    /*margin: 90px 0 120px;*/
    min-height: 100vh;
    height: auto;
    display: grid;
    align-content: center;
}

.DualSections_BoxDiv {
    max-width: 452px;
}

.myFieldsBox {
    height: auto;
    width: 100%;
    max-width: 100%;
}

.Multiple_Vertical_InputGroups {
    max-width: 452px;
    margin: auto;
}

.Multiple_Horizontal_InputGroups {
    width: 100%;
    max-width: 452px;
    margin: auto;
    display: grid;
    gap: 32px;
}

.DualSections_TextDiv {
    max-width: 366px;
}

.DualSections_ButtonDiv {
    padding: 12px;
    width: 100%;
    justify-content: center;
    display: flex;
    flex-wrap: wrap;
}

.DualSections_ButtonDiv2 {
    padding: 18px;
}

.PanelButton_Div .BtnLayer2.DarkBtn_OnLightBG_Layer2 {
    width: fit-content;
    min-width: 150px;
}

.DisableBtn_Div .BtnLayer2.DarkBtn_OnLightBG_Layer2 {
    width: auto;
    padding: 0 14px;
}

.ForbbidenBtn_Div {
    cursor: not-allowed !important;
    opacity: .5 !important;
}

    .ForbbidenBtn_Div * {
        cursor: not-allowed !important;
    }

.PanelButton_Div .BtnLayer1 {
    height: 38px;
    padding: 3px;
}

.DualSections_Button {
    width: 184px;
    height: 44px;
    padding: 7px 14px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    -webkit-box-shadow: var(--MenuBox_Shadow);
    -moz-box-shadow: var(--MenuBox_Shadow);
    box-shadow: var(--MenuBox_Shadow);
    border-radius: var(--FieldsBorder_Radius_Desktop);
    background: var(--BackgroundColor_Color);
    /*border: var(--Border_DokmeMenu_Up_AccentBorder);*/
}

#LoginSection {
    /*padding: 35px 0 120px;
        min-height: 50vh;*/
}

.WaveLineDivider {
    width: 100vw;
    height: 35px;
    background-image: url('../Image/Icons/WaveLine.svg');
}

.WaveLineDivider_FormDivider {
    width: 100%;
    height: 35px;
    background-image: url('../Image/Icons/WaveLine.svg');
    background-position: right center;
    background-size: auto 16px;
    background-repeat: repeat-x;
}

.DualSections_Login {
    padding: 70px 0;
}


.articleContainer {
    padding: 90px 0 50px;
}

@media screen and (max-width: 767px) {

    .DualSections_BoxDiv {
        width: 100%;
    }

    .DualSections_Button {
        height: 38px;
    }

    .PanelButton_Div .BtnLayer1 {
        height: 32px;
    }

    .PanelButton_Div .BtnLayer2.DarkBtn_OnLightBG_Layer2 {
        /*   width: 130px;
        height: 20px;*/
    }

    #LoginSection {
        /*padding: 35px 0 70px;
            min-height: 70vh;*/
    }

    .DualSections_Login {
        padding: 50px 0;
    }

    .articleContentDiv {
        padding: 0 25px;
    }


    .MainItem_UpDown_Dark.FAQ_UpDown {
        background-image: url('../Image/BahmanImages/HandLaptop_V.png');
        background-size: contain;
        background-position: left;
    }
}

@media screen and (max-width: 1200px) {
    .articleContainer2 {
        padding: 90px 0 50px;
    }
}

/*#endregion DualCols*/

/*#region Input*/

.Multiple_Vertical_InputGroups {
    display: flex;
    padding: 4px 2px;
    align-items: center;
    gap: 20px;
    width: 100%;
}

.InputContainer {
    display: grid;
    padding: 1px 4px 4px 4px;
    width: 100%;
}

.InputLabel {
    display: flex;
    padding: 5px 4px 5px 0px;
    align-items: center;
    justify-content: right;
    gap: 3px;
}

.InputLabel_TitleTxt {
    color: var(--FieldTitle_Color);
}

.ImportantField {
    color: var(--Red_Color);
}

.MyInput_Container {
    display: flex;
    padding: 7px 14px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: var(--InputFieldsBorder_Radius_Mobile);
    background: var(--Input_BgColor);
    -webkit-box-shadow: var(--AnyButton_Up_Shadow);
    -moz-box-shadow: var(--AnyButton_Up_Shadow);
    box-shadow: var(--AnyButton_Up_Shadow);
    background-blend-mode: soft-light, normal;
    height: 38px;
}

.myInput {
    width: 100%;
    height: 100%;
    color: var(--FieldContent_Color);
    text-align: right;
    background-color: transparent;
    cursor: text;
    caret-color: var(--projectMainAccent_Color);
    caret-shape: underscore;
    caret: var(--projectMainAccent_Color) underscore;
}

input[type=tel].myInput {
    letter-spacing: 2.1px;
}

.myInputSign {
}

.myInputSign_CountryCode {
    display: flex;
    padding-right: 8px;
    flex-direction: column;
    align-items: center;
    /*border-right: 1px solid var(--FieldContent_Color);*/
}

/*#endregion Input*/

/*#region Footer*/

.myFooterContainer_Container,
.FAQ_ContactUs {
    position: relative;
    z-index: 1;
    background-color: var(--BackgroundColor_Color);
}

.myFooterContainer {
    padding-top: 150px;
}

.myFooter {
}

    .myFooter.FirstLayer {
        -webkit-box-shadow: var(--DokmeGholombeUp_Biruni_Shadow), var(--DokmeGholombeUp_Daruni_Shadow);
        -moz-box-shadow: var(--DokmeGholombeUp_Biruni_Shadow), var(--DokmeGholombeUp_Daruni_Shadow);
        box-shadow: var(--DokmeGholombeUp_Biruni_Shadow), var(--DokmeGholombeUp_Daruni_Shadow);
        padding: 6px;
        background: var(--BahmanBlack_Color);
        border-radius: var(--BtnsBorder_Radius);
        overflow: hidden;
    }

    .myFooter .SecondLayer {
        -webkit-box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
        -moz-box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
        box-shadow: var(--DokmeGholombeTarUp_Daruni_Shadow);
        padding: 42px 24px;
        background: var(--DokmeGholombe_Sade_Up_Daruni_Color_Dark);
        background: var(--BackgroundColor_Dark_Color);
        border-radius: var(--BtnsBorder_Radius);
        border: var(--Border_BoxGholombe_Up_Daruni_Dark);
    }

.myFooter_Container {
    display: grid;
    gap: 50px;
}

.myFooter_FirstRow {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}

.myFooter_FirstRow_FirstCol,
.myFooter_FirstRow_SecondCol,
.myFooter_FirstRow_ThirdCol {
    padding: 0 8px;
}

.Footer_Title {
}

.Footer_Txt {
}

.DownOption_InDark_div {
    padding: 8px;
    border-radius: 9px;
    /*-webkit-box-shadow: var(--SelectOption_Down_Dark_Shadow);
    -moz-box-shadow: var(--SelectOption_Down_Dark_Shadow);
    box-shadow: var(--SelectOption_Down_Dark_Shadow);*/
    -webkit-box-shadow: var(--SelectOption_Down_Shadow);
    -moz-box-shadow: var(--SelectOption_Down_Shadow);
    box-shadow: var(--SelectOption_Down_Shadow);
    background-color: var(--BackgroundColor_Color);
}

.LinkListLamp {
    padding: 4px 2px;
    display: flex;
    gap: 12px;
    align-items: center;
    cursor: pointer;
}

.LinkListLamp_Light {
    width: fit-content;
    display: flex;
    padding: 6px;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    position: relative;
    white-space: nowrap;
}

.myListBullet {
    width: 12px;
    height: 12px;
    display: flex;
    border-radius: 50px;
}

.mySubmenu .myListBullet {
    width: 8px;
    height: 8px;
}

.myListBullet_Dark {
    background: var(--BahmanBlack_Color);
    -webkit-box-shadow: var(--DokmeGholombeTarDown_Daruni_Dark_Shadow);
    -moz-box-shadow: var(--DokmeGholombeTarDown_Daruni_Dark_Shadow);
    box-shadow: var(--DokmeGholombeTarDown_Daruni_Dark_Shadow);
}

.myListBullet_Light {
    background: var(--BackgroundColor_Color);
}

.LinkListLamp_Light:hover .myListBullet_Light,
.LinkListLamp_Light.selectedItem .myListBullet_Light {
    background: var(--projectMainAccent_BGColor);
}

.LinkListLamp_Light:hover .YellowUnderline,
.LinkListLamp_Light.selectedItem .YellowUnderline {
    display: block !important;
}

.LinkListLamp_Light:hover .LinkListLamp_Light_Text,
.LinkListLamp_Light.selectedItem .LinkListLamp_Light_Text {
    font-weight: 900;
    text-shadow: var(--Text_OnLightBG_textshadow3);
}

.YellowUnderline {
    width: 100%;
    height: 3px;
    border-radius: 5px;
    background: var(--projectMainAccent_BGColor);
    -webkit-box-shadow: var(--DokmeGholombeUp_Biruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeUp_Biruni_Shadow);
    box-shadow: var(--DokmeGholombeUp_Biruni_Shadow);
    position: absolute;
    right: 0;
    bottom: -6px;
}

.LinkListLamp_Dark:hover a {
    color: var(--White_Color);
    text-shadow: var(--Text_OnDarkBG_textShadow);
}

.LinkListLamp_Dark:hover .myListBullet_Dark,
.sidenav .LinkListLamp_Dark:hover .myListBullet,
.sidenav .LinkListLamp_Dark.selectedItem .myListBullet {
    background: var(--projectMainAccent_BGColor);
    -webkit-box-shadow: var(--DokmeGholombeTarDown_Daruni_Dark_Shadow), var(--Text_OnDarkBG_textShadow);
    -moz-box-shadow: var(--DokmeGholombeTarDown_Daruni_Dark_Shadow), var(--Text_OnDarkBG_textShadow);
    box-shadow: var(--DokmeGholombeTarDown_Daruni_Dark_Shadow), var(--Text_OnDarkBG_textShadow);
}

.mySubmenu .LinkListLamp_Dark:hover .myListBullet,
.mySubmenu .LinkListLamp_Dark.selectedItem .myListBullet {
    background: var(--BackgroundColor_Color) !important;
}

.myFooter_SecondRow {
    display: flex;
    justify-content: space-between;
    -webkit-box-shadow: var(--MainItems_DownDark_Shadow);
    -moz-box-shadow: var(--MainItems_DownDark_Shadow);
    box-shadow: var(--MainItems_DownDark_Shadow);
    border-radius: var(--InnerBorder_Radius);
    padding: 18px 32px;
    gap: 50px;
    align-items: start;
}

.myFooter_SecondRow_R {
}

.FooterPolicy {
    padding: 12px;
}



@keyframes moveToTopRight {
    0% {
        right: 50%;
        top: 50%;
        transform: translate(0, -50%);
    }

    100% {
        right: 100%;
        top: 100%;
        transform: translate(100%, -500%);
    }
}

@media screen and (max-width: 767px) {

    .myFooter_FirstRow {
        display: grid;
        gap: 50px;
    }

    .myFooter_SecondRow {
        display: grid;
    }

    .FooterPolicy {
        padding: 6px;
    }
}

/*#endregion Footer*/



/*#region Parallax*/


.parallax-container2 {
    position: relative;
    height: 200vh; /* To allow scrolling */
}

.background2 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh; /* Viewport height */
    background: url('background-image.jpg') no-repeat center center / cover;
    z-index: 1;
}

.foreground2 {
    position: relative;
    width: 100%;
    height: 100vh; /* Viewport height */
    background: url('foreground-image.png') no-repeat center center / cover;
    z-index: 2;
    transform: translateY(100vh); /* Starts below the viewport */
    animation: scroll-parallax2 1s forwards; /* Ensure it slides into view smoothly */
}

@keyframes scroll-parallax2 {
    to {
        transform: translateY(0);
    }
}

/*#endregion Parallax*/



/*#region ShowSlider*/


.card {
    position: absolute;
    left: 0;
    top: 0;
    background-position: bottom right;
    background-size: contain;
    background-repeat: no-repeat;
    max-width: var(--LargeMaxWidth);
    max-height: 100vh !important;
    border: none;
    background-color: var(--BackgroundColor_Color);
    -webkit-box-shadow: var(--MenuBox_Shadow);
    -moz-box-shadow: var(--MenuBox_Shadow);
    box-shadow: var(--MenuBox_Shadow);
    border-radius: var(--InnerBorder_Radius);
}

#card0 {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
}

#card1 {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
}

#card2 {
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: left !important;
}

.content-place {
    position: absolute;
    left: 0;
    top: 0;
    padding: 16px;
    width: 150px;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/*.fullscreen img {
    width: auto !important;
    height: 100% !important;
    object-fit: contain !important;
}*/

.content-place {
    margin-top: 6px;
    font-size: 8px;
    font-weight: 700;
    font-weight: 600;
}

.content-title-1,
.content-title-2 {
    font-weight: 900;
    font-size: 10px;
}

.content-start {
    width: 30px;
    height: 5px;
    border-radius: 99px;
    background-color: var(--BackgroundColor_Color);
}

.details {
    z-index: 22;
    position: absolute;
    top: 240px;
    right: 60px;
}

    .details .place-box {
        height: 46px;
        overflow: hidden;
    }

        .details .place-box .text {
            padding-top: 16px;
            font-size: 20px;
        }

            .details .place-box .text:before {
                top: 0;
                left: 0;
                position: absolute;
                content: "";
                width: 30px;
                height: 4px;
                border-radius: 99px;
                background-color: white;
            }

    .details .title-1,
    .details .title-2 {
        font-weight: 700;
        font-weight: 600;
        font-size: 72px;
    }

    .details .title-box-1,
    .details .title-box-2 {
        margin-top: 2px;
        height: 100px;
        overflow: hidden;
    }

    .details > .desc {
        margin-top: 16px;
        width: 500px;
    }

    .details > .cta {
        width: 500px;
        margin-top: 24px;
        display: flex;
        align-items: center;
    }

.indicator {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    height: 5px;
    z-index: 60;
    background: var(--projectMainAccent_BGColor);
    display: none;
}
/*
.pagination {
    position: absolute;
    display: inline-flex;
    left: 20% !important;
    bottom: 10% !important;
}

    .pagination > .arrow {
        z-index: 60;
        width: 50px;
        height: 50px;
        border-radius: 999px;
        border: 2px solid #ffffff55;
        display: grid;
        place-items: center;
    }

        .pagination > .arrow:nth-child(2) {
            margin-left: 20px;
        }

        .pagination > .arrow svg {
            width: 24px;
            height: 24px;
            stroke-width: 2;
            color: #ffffff99;
        }

    .pagination .progress-sub-container {
        margin-left: 24px;
        z-index: 60;
        width: 500px;
        height: 50px;
        display: flex;
        align-items: center;
    }

        .pagination .progress-sub-container .progress-sub-background {
            width: 500px;
            height: 3px;
            background-color: #ffffff33;
        }

            .pagination .progress-sub-container .progress-sub-background .progress-sub-foreground {
                height: 3px;
                background-color: #ecad29;
            }

    .pagination .slide-numbers {
        width: 50px;
        height: 50px;
        overflow: hidden;
        z-index: 60;
        position: relative;
    }

        .pagination .slide-numbers .item {
            width: 50px;
            height: 50px;
            position: absolute;
            color: white;
            top: 0;
            left: 0;
            display: grid;
            place-items: center;
            font-size: 32px;
            font-weight: bold;
            font-weight: 600;
        }*/

.cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    z-index: 100;
    display: none;
    visibility: hidden;
}

/*#endregion ShowSlider*/


/*#region Shapes*/

.LeftShape {
    left: 0;
    bottom: 10%;
    z-index: -1;
}

.RightShape {
    right: 0;
    bottom: 10%;
    z-index: -1;
}

.WaveLine {
    background: url('../Image/Icons/WaveLine2.svg') repeat-x;
    width: 100px;
    height: 100px;
    position: absolute;
    animation-name: example;
    animation-duration: 9s;
    animation-timing-function: linear;
    animation-delay: 2s;
    /*animation-iteration-count: infinite;*/
    animation-direction: alternate;
    bottom: 10%;
}

@keyframes example {
    0% {
        right: 0px;
    }

    100% {
        right: 100%;
    }
}

/*#endregion Shapes*/

/*#region FAQ*/


.FAQ_imgDiv {
    align-content: center;
    display: grid;
    justify-items: center;
}

.FAQ_Col {
    display: grid;
    align-items: center;
    gap: 70px;
    padding: 25px 0;
}

.FAQ_Container {
    height: auto;
    max-height: 600px;
    overflow-y: auto; /* اسکرول عمودی در صورت نیاز */
    scrollbar-width: none; /* Firefox */ /* مخفی کردن اسکرول‌بار در فایرفاکس */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
}

    .FAQ_Container::-webkit-scrollbar {
        display: none; /* مخفی کردن اسکرول‌بار در کروم و سایر مرورگرهای وب‌کیت */
        width: 0px;
        background: transparent;
    }

/*.FAQ_GroupTitle_Div {
    height: 100vh;
    height: 100%;
    width: 50px;
    background: var(--projectMainAccent_BGColor);
    font-size: 1rem;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.FAQ_GroupTitle {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    -webkit-transform-origin: left bottom;
    -moz-transform-origin: left bottom;
    -ms-transform-origin: left bottom;
    -o-transform-origin: left bottom;
    transform-origin: left bottom;
    white-space: nowrap;
    margin-right: -140px;
    margin-top: calc(-50% + -160px);
}*/



/*.FAQ_Container {
    width: 300px;
    min-height: 250px;
    position: relative;
    border: 2px solid orange;
    border-right: 40px solid orange;
    padding: 15px;
    color: rgba(0, 0, 0, 0.5);
    font-size: small;
    display: inline-block;
}

.FAQ_GroupTitle {
    font-size: 1rem;
    color: white;
    text-transform: uppercase;
    letter-spacing: 3px;
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: -30px;
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    transform: rotate(270deg);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
}*/

.FAQ_GroupTitle_Div {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: sticky;
    top: -22px;
    z-index: 9;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(0deg, #1F1F1F 0%, #1F1F1F 100%), rgba(38, 38, 38, 0.55);
    -webkit-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    overflow: hidden;
    width: calc(100% + 24px);
    margin-top: -22px;
    margin-right: -12px;
}

.FAQ_GroupTitle {
    color: white !important;
    font-weight: 800;
    font-weight: 900;
    font-size: 16px;
}

.FAQ_ArrowDown_Div {
    position: -webkit-sticky;
    position: -moz-sticky;
    position: -ms-sticky;
    position: sticky;
    bottom: -22px;
    z-index: 9;
    height: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: -22px;
}

.FAQ_ArrowDown {
}

.FAQ_NavPill {
    display: none;
}

@media screen and (max-width: 767px) {

    .FAQ_NavPill {
        display: inline-flex;
        position: fixed;
        top: 64px;
        z-index: 10;
        width: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap;
        padding: 10px 10px;
        flex-wrap: nowrap;
        max-width: 100%;
        gap: 20px;
        background-color: rgba(247, 247, 247, .7);
        border-radius: var(--BtnsBorder_Radius);
        height: 60px;
    }

        .FAQ_NavPill li {
            overflow: visible !important;
        }

            .FAQ_NavPill li.active {
                /*border: var(--Border_DokmeMenu_Up_AccentBorder) !important;*/
                border-width: 3px !important;
                background: var(--DokmeGholombe_Daruni_Color) !important;
                box-shadow: var(--DokmeGholombeDown_Daruni_Shadow) !important;
            }

            .FAQ_NavPill li a {
            }

                .FAQ_NavPill li a.BtnLayer2 {
                    padding: 10px 14px;
                }

            .FAQ_NavPill li.active a {
            }

            .FAQ_NavPill li a .BtnContents_Div {
            }

            .FAQ_NavPill li.active a .BtnContents_Div {
                color: var(--projectMainAccent_Color);
                font-weight: 600;
            }

    .FAQ_imgDiv {
        margin-top: 70px;
    }

    .FAQ_Container {
        max-height: initial;
    }

    .FAQ_ArrowDown_Div {
        display: none;
    }

    .FAQ_GroupTitle_Div {
        height: 35px;
    }

    .FAQ_GroupTitle {
        font-size: 12px;
    }

    .FAQ_Col.tab-content > .tab-pane {
        display: none !important;
    }

    .FAQ_Col.tab-content > .active {
        display: grid !important;
    }
}

/*#endregion FAQ*/

/*#region wordSlider*/

@media screen and (min-width: 992px) {
    .ms-header {
        display: flex;
        align-items: center;
        jsutify-content: center;
        position: fixed;
        /*right: 0;*/
        top: var(--Header_Container_Height);
        height: calc(100vh - var(--Header_Container_Height));
        /*width: 100%;*/
    }
}

.ms-header {
}

.ms-header__title,
.ms-slider__word {
    font-size: 30px;
}

.ms-header__title,
.ms-slider {
    height: 50px !important;
}

.ms-header__title {
    flex: 1 1 100%;
    text-align: center;
    white-space: nowrap;
    gap: 10px;
    display: flex;
}

.ms-slider {
    display: inline-block;
    overflow: hidden;
    vertical-align: middle;
    -webkit-mask-image: linear-gradient(transparent, white, white, white, transparent);
    mask-image: linear-gradient(transparent, white, white, white, transparent);
    mask-type: luminance;
    mask-mode: alpha;
    text-align: center;
    height: 40px;
}

.ms-slider__words {
    display: inline-block;
    margin: 0;
    padding: 0;
    list-style: none !important;
    list-style-type: none !important;
    -webkit-animation-name: wordSlider;
    animation-name: wordSlider;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
}

.ms-slider__word {
    display: block;
    text-align: right;
}

@-webkit-keyframes wordSlider {
    0%, 27% {
        transform: translateY(0%);
    }

    33%, 60% {
        transform: translateY(-25%);
    }

    66%, 93% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(-75%);
    }
}

@keyframes wordSlider {
    0%, 27% {
        transform: translateY(0%);
    }

    33%, 60% {
        transform: translateY(-25%);
    }

    66%, 93% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(-75%);
    }
}


@media screen and (max-width: 991px) {

    .ms-header__title {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 20px;
    }

    .ms-slider {
        text-align: right;
    }

    .ms-slider__word {
        display: block;
    }
}

@media screen and (max-width: 767px) {
    .ms-header__title, .ms-slider__word {
        font-size: 20px;
    }

    .ms-header__title,
    .ms-slider {
        height: 32px !important;
    }
}

/*#endregion wordSlider*/


/*#region Accardion*/

.accordion {
    --bs-accordion-transition: color 0.05s ease-in-out, background-color 0.05s ease-in-out, border-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out, border-radius 0.05s ease;
    width: 100%;
    /*padding-right: 70px;*/
}

.accordion-item,
.accordion-item.FAQ_AccordionItem {
    color: var(--BahmanBlack_Color);
    background-color: transparent;
    border: none;
    height: auto;
}

    .accordion-item.Dropdown_AccordionItem {
        border-radius: 25px;
        background: linear-gradient(315deg, rgba(0, 0, 0, 0.60) 0%, rgba(255, 255, 255, 0.00) 100%), var(--BackgroundColor, #F7F7F7);
        background-blend-mode: soft-light, normal;
        /*box-shadow: -1.667px -1.667px 1.667px 0px rgba(255, 255, 255, 0.85) inset, 2.5px 2.5px 1.667px 0px rgba(174, 174, 192, 0.35) inset;*/
    }

.accordion-header,
.accordion-header.FAQ_AccordionHeader {
    border-radius: var(--FieldsBorder_Radius_Mobile) !important;
}

    .accordion-header.Dropdown_AccordionHeader {
    }

.accordion-button {
    border-radius: var(--FieldsBorder_Radius_Mobile) !important;
    height: var(--Accardion_H);
    text-align: right;
    padding: 10px 18px;
    line-height: 22px;
}

    .accordion-button.FAQ_AccordionButton {
        background: var(--BackgroundColor_Color) !important;
        justify-content: space-between;
        height: auto;
    }

        .accordion-button.FAQ_AccordionButton:not(.collapsed) {
            border: var(--Border_DokmeMenu_Up_AccentBorder) !important;
            border-width: 3px !important;
            background: var(--DokmeGholombe_Daruni_Color) !important;
            box-shadow: var(--DokmeGholombeDown_Daruni_Shadow) !important;
        }

    .accordion-button.Dropdown_AccordionButton {
        border-radius: 25px;
        padding: 14px 26px 14px 22px;
        -webkit-box-shadow: var(--MainItems_Up_Shadow);
        -moz-box-shadow: var(--MainItems_Up_Shadow);
        box-shadow: var(--MainItems_Up_Shadow);
        gap: 12px;
    }

        .accordion-button.Dropdown_AccordionButton:not(.collapsed) {
            /*border: none !important;
        border-width: 0 !important;
        background: none !important;
        box-shadow: none !important;
        padding: 0 !important;*/
            box-shadow: none !important;
        }

    .accordion-button::after {
        margin: initial !important;
        transition: transform 0.2s ease-in-out;
        background-position: center;
        background-size: 100%;
        /*background-image: url('../Image/Icons/DownArrow_Thin.svg');
        width: 24px;
        height: 24px;*/
        background-image: url('../Image/Icons/DownArrow.svg');
        width: 12px;
        height: 12px;
    }

.BtnLinkToAnotherPage_Container .accordion-button::after {
    width: 24px;
    height: 24px;
    background-image: url('../Image/Icons/LeftArrow.svg');
}

.accordion-button:not(.collapsed)::after {
    transform: rotate(-180deg);
    /*background-image: url('../Image/Icons/DownArrow_Thin.svg');*/
    background-image: url('../Image/Icons/DownArrow.svg');
}

.Dropdown_AccordionButton.accordion-button::after {
}

.Dropdown_AccordionButton_TitleText {
    /*padding: 14px 26px 14px 22px;*/
}

.accordion-collapse.FAQ_AccordionCollapse {
    background: var(--BackgroundColor_Color);
    -webkit-box-shadow: var(--AnyButton_Down_Shadow);
    -moz-box-shadow: var(--AnyButton_Down_Shadow);
    box-shadow: var(--AnyButton_Down_Shadow);
    padding: 40px 10px 5px;
    border-radius: 0 0 var(--FieldsBorder_Radius_Mobile) var(--FieldsBorder_Radius_Mobile) !important;
    margin-top: -30px;
    margin-bottom: 10px;
}

.accordion-collapse.Dropdown_AccordionCollapse {
    padding: var(--Accardion_H) 10px 5px;
    border-radius: var(--FieldsBorder_Radius_Mobile) !important;
    margin-top: calc(var(--Accardion_H) * -1);
    min-height: var(--Accardion_H);
    box-shadow: -1.667px -1.667px 1.667px 0px rgba(255, 255, 255, 0.85) inset, 2.5px 2.5px 1.667px 0px rgba(174, 174, 192, 0.35) inset;
}

.accordion-body {
    color: var(--FieldContent_Color);
}

    .accordion-body.Dropdown_AccordionBody {
    }

.White_Divider_With_YellowShadow {
    background-image: var(--White_Divider_With_AccentShadow_Color);
    height: 1.5px;
}

.Dropdown_AccordionColsContainer {
    gap: 80px;
}

.Dropdown_AccordionColsDiv {
    padding: 18px 12px;
}

.Dropdown_Accordion_Title {
}


@media screen and (max-width: 991px) {
    .Dropdown_AccordionColsContainer {
        gap: 50px;
    }
}

@media screen and (max-width: 767px) {
    .accordion-button.FAQ_AccordionButton {
        min-height: 46px;
    }

    .Dropdown_AccordionColsContainer {
        gap: 25px;
    }

    .MobileOverflowTexts {
        text-overflow: ellipsis;
        overflow: hidden;
        min-width: 200px;
        white-space: nowrap;
        display: block ruby !important;
        max-width: 95% !important;
    }

        .MobileOverflowTexts * {
            display: inline-flex !important;
        }
}

@media screen and (max-width: 576px) {

    .Dropdown_AccordionColsContainer {
        gap: 0;
    }
}

/*#endregion Accardion*/



/*#region ThirdPartyInsurance_Page*/

.NumberPlateSelection_Col {
    width: 488px;
}

.NumberPlateSelection_Container {
    background: var(--BackgroundColor_Color);
    -webkit-box-shadow: var(--MainItems_Down_Shadow);
    -moz-box-shadow: var(--MainItems_Down_Shadow);
    box-shadow: var(--MainItems_Down_Shadow);
    border-radius: var(--FieldsBorder_Radius_Mobile);
    display: flex;
    padding: 24px 22px;
    flex-direction: column;
    align-items: center;
    gap: 42px;
}

.myTitle {
    color: var(--BahmanBlack_Color);
    text-align: center;
    font-size: 16px;
    font-weight: 800;
    font-weight: 900;
}

.ProfileLeft_Col .myTitle {
    margin-bottom: 35px;
}


@media screen and (max-width: 767px) {

    .NumberPlateSelection_Col {
        max-width: 100%;
    }

    .myTitle {
        font-size: 14px;
    }
}
/*#endregion ThirdPartyInsurance_Page*/


/*#region Profile_Page*/

.ProfilePage_Container {
    padding: 35px 0px;
}

.FixedRightMenu_Col {
}

.FixedRightMenu_Container {
    background: var(--BackgroundColor_Color);
    -webkit-box-shadow: var(--DashboardBoxShadow_Shadow);
    -moz-box-shadow: var(--DashboardBoxShadow_Shadow);
    box-shadow: var(--DashboardBoxShadow_Shadow);
    border-radius: var(--FieldsBorder_Radius_Desktop);
    padding: 16px 16px 42px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 320px;
    align-items: flex-end;
    gap: 32px;
    display: grid;
}

.ProfileUser_Div {
    display: flex;
    padding: 12px 8px;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    border-bottom: 1px solid var(--Gray_Color);
}

.ProfileUser_ImgDiv {
    display: flex;
    width: 56px;
    height: 56px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 50px;
    -webkit-box-shadow: var(--AnyButton_Down_Shadow);
    -moz-box-shadow: var(--AnyButton_Down_Shadow);
    box-shadow: var(--AnyButton_Down_Shadow);
}

.ProfileUser_Text {
    font-size: 16px;
    font-weight: 400;
}

.ProfileLeft_Col {
    width: 100%;
}

.ProfileMenu_Div {
    display: grid;
    gap: 26px;
    padding-right: 12px;
}

.Profile_Tabs.ProfileEditionTab {
    display: grid;
    grid-gap: 34px;
}

.Profile_Tabs {
    border-radius: var(--FieldsBorder_Radius_Desktop);
    background: var(--BackgroundColor, #F7F7F7);
    box-shadow: -8px -8px 10px 0px rgba(255, 255, 255, 0.80) inset, 8px 8px 10px 0px rgba(214, 214, 225, 0.35) inset;
    display: flex;
    padding: 32px;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    flex: 1 0 0;
    align-self: stretch;
    display: none;
}


@media only screen and (max-width: 991px) {
    .FixedRightMenu_Col {
        /*display: none;*/
    }

    .FixedTopMenu_xs_Col {
        /*display: none;*/
        position: fixed;
        top: var(--Header_Container_Height);
        max-width: calc(100% - (var(--RL_Padding) * 2));
        width: max-content;
        z-index: 10;
        left: 50%;
        transform: translate(-50%);
    }

    .FixedRightMenu_Container {
        padding: 16px 10px;
        border-radius: var(--InnerBorder_Radius);
        border: var(--Border_DokmeMenu_Up_AccentBorder);
        -webkit-box-shadow: var(--MainItems_Up_Shadow);
        -moz-box-shadow: var(--MainItems_Up_Shadow);
        box-shadow: var(--MainItems_Up_Shadow);
        height: 65px;
    }

    .ProfileLeft_Col {
        padding-top: 86px;
    }

    .Profile_Tabs {
        padding: 0;
        box-shadow: none;
    }

    .ProfileMenu_Div {
        display: flex;
        padding-right: 0;
        /*gap: 0;*/
        /*justify-content: space-around;*/
        gap: 42px;
        justify-content: right;
        overflow-x: scroll;
        overflow-y: hidden;
        -ms-overflow-style: none !important; /* IE and Edge */
        scrollbar-width: none !important; /* Firefox */
        scrollbar-color: transparent transparent !important;
    }

    FixedRightMenu_Container::-webkit-scrollbar {
        width: 0; /*for vertical scrolls*/
        height: 0; /*for horizontal scrolls*/
    }
}

@media only screen and (max-width: 767px) {

    .FixedTopMenu_xs_Col {
        padding: 10px 0;
    }

    .ProfileLeft_Col {
        padding-top: 56px;
    }
}


/*#endregion Profile_Page*/


/*#region Pelak*/


/*#region Pelak_AllSizes*/

.Pelak {
}

    .Pelak .Pelak_Layer01 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border-radius: 3px;
        background: var(--Pelak_Layer01_BG_Color);
        width: fit-content;
    }

    .Pelak .Pelak_Layer02 {
        display: flex;
        align-items: center;
        border-radius: 3px;
        border: 1px solid var(--Border_Pelak_Color);
        background: var(--Pelak_Layer02_BG_Color);
        direction: ltr;
        overflow: hidden;
    }

    .Pelak .Pelak_Layer03_01 {
        display: flex;
        padding: 2px;
        flex-direction: column;
        align-items: center;
        align-self: stretch;
        background: #003399;
    }

    .Pelak .Pelak_Layer03_02 {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-shrink: 0;
        align-self: stretch;
        background-color: white;
        direction: ltr;
        height: 100%;
    }

    .Pelak .Pelak_Layer04_01 {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-shrink: 0;
        align-self: stretch;
    }

    .Pelak .Pelak_Layer05_01 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex-shrink: 0;
        color: black;
        text-align: center;
        font-family: Avenir;
        font-style: normal;
        font-weight: 800;
        font-weight: 900;
        line-height: normal;
    }

    .Pelak .Pelak_Layer04_02 {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5px;
        flex-shrink: 0;
        align-self: stretch;
        border-left: 1px solid var(--Border_Pelak_Color);
    }

    .Pelak .Pelak_Layer05_02 {
        color: black;
        font-style: normal;
        font-weight: 800;
        font-weight: 900;
    }

    .Pelak .Pelak_Layer05_03 {
        color: black;
        font-style: normal;
        font-weight: 800;
        font-weight: 900;
        line-height: 9px; /* 112.5% */
    }

    .Pelak .Pelak_Layer04_04 {
        color: white;
        font-family: Avenir;
        font-style: normal;
        font-weight: 800;
        font-weight: 900;
        width: 100%;
        text-align: left;
        justify-content: left;
        display: grid;
    }

    .Pelak .Pelak_Layer04_03 {
    }

/*#endregion Pelak_AllSizes*/


/*#region Pelak_Size01*/
.Pelak_Size01 {
}

    .Pelak_Size01 .Pelak_Layer01 {
        padding: 1px;
    }

    .Pelak_Size01 .Pelak_Layer02 {
        width: 71px;
        height: 18px;
    }

    .Pelak_Size01 .Pelak_Layer03_01 {
        align-items: center;
        gap: 2px;
        justify-content: center;
    }

    .Pelak_Size01 .Pelak_Layer03_02 {
        width: 58px;
    }

    .Pelak_Size01 .Pelak_Layer04_01 {
        width: 41px;
    }

    .Pelak_Size01 .Pelak_Layer05_01 {
        width: 41px;
        height: 16px;
        font-size: 10px;
        letter-spacing: 0.6px;
    }

    .Pelak_Size01 .Pelak_Layer04_02 {
        width: 16px;
        padding: 1px 1px 0px 1px;
        gap: 1.5px;
    }

    .Pelak_Size01 .Pelak_Layer05_02 {
        font-size: 3px;
        line-height: 2px; /* 66.667% */
    }

    .Pelak_Size01 .Pelak_Layer05_03 {
        font-size: 8px;
    }

    .Pelak_Size01 .Pelak_Layer04_04 {
        font-size: 2px;
        line-height: 2px; /* 100% */
        width: 5px;
        height: 4px;
    }

    .Pelak_Size01 .Pelak_Layer04_03 {
        width: 8px;
        height: 5.6px;
    }

/*#endregion Pelak_Size01*/


/*#region Pelak_Size02*/

.Pelak_Size02 {
}

    .Pelak_Size02 .Pelak_Layer01 {
        padding: 2px;
    }

    .Pelak_Size02 .Pelak_Layer02 {
        width: 79px;
        height: 23px;
    }

    .Pelak_Size02 .Pelak_Layer03_01 {
        justify-content: space-between;
    }

    .Pelak_Size02 .Pelak_Layer03_02 {
        width: 65px;
    }

    .Pelak_Size02 .Pelak_Layer04_01 {
        width: 49px;
    }

    .Pelak_Size02 .Pelak_Layer05_01 {
        width: 49px;
        height: 21px;
        font-size: 13px;
        letter-spacing: normal;
    }

    .Pelak_Size02 .Pelak_Layer04_02 {
        width: 16px;
        padding: 2px 1px;
        gap: 3px;
    }

    .Pelak_Size02 .Pelak_Layer05_02 {
        font-size: 5px;
        line-height: 2px; /* 66.667% */
    }

    .Pelak_Size02 .Pelak_Layer05_03 {
        font-size: 11px;
    }

    .Pelak_Size02 .Pelak_Layer04_04 {
        font-size: 3px;
        line-height: 4px; /* 100% */
        width: 8px;
        height: 8px;
    }

    .Pelak_Size02 .Pelak_Layer04_03 {
        width: 8px;
        height: 5.6px;
    }

/*#endregion Pelak_Size02*/


/*#region Pelak_Size03*/

.Pelak_Size03 {
}

    .Pelak_Size03 .Pelak_Layer01 {
        padding: 2px;
    }

    .Pelak_Size03 .Pelak_Layer02 {
        width: 112px;
        height: 32px;
    }

    .Pelak_Size03 .Pelak_Layer03_01 {
        justify-content: space-between;
    }

    .Pelak_Size03 .Pelak_Layer03_02 {
        width: 94px;
    }

    .Pelak_Size03 .Pelak_Layer04_01 {
        width: 70px;
    }

    .Pelak_Size03 .Pelak_Layer05_01 {
        width: 70px;
        height: 30px;
        font-size: 18px;
        letter-spacing: normal;
    }

    .Pelak_Size03 .Pelak_Layer04_02 {
        width: 24px;
        padding: 0px 1px;
        gap: 2px;
    }

    .Pelak_Size03 .Pelak_Layer05_02 {
        font-size: 6px;
        line-height: 10px; /* 66.667% */
    }

    .Pelak_Size03 .Pelak_Layer05_03 {
        font-size: 18px;
        line-height: 9px; /* 50% */
    }

    .Pelak_Size03 .Pelak_Layer04_04 {
        font-size: 4px;
        line-height: 4px; /* 100% */
        width: 10px;
        height: 8px;
    }

    .Pelak_Size03 .Pelak_Layer04_03 {
        width: 12px;
        height: 8.4px;
    }

/*#endregion Pelak_Size03*/


/*#endregion Pelak*/



/*#region PelakCar_Info*/

.PelakCar_Info_Container {
    padding: 14px 26px;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    align-self: stretch;
    border-radius: var(--FieldsBorder_Radius_Desktop);
}

.PelakCar_rDiv {
    display: grid;
    gap: 18px;
}

.PelakCar_lDiv {
    display: grid;
    gap: 16px;
}

.PelakCar_lDiv_Row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.PelakCar_Img {
    width: 80px;
    height: 44px;
}


@media screen and (max-width: 576px) {
    .PelakCar_rDiv {
        justify-content: space-between;
        width: 100%;
    }

    .PelakCar_Img {
        display: none !important;
    }
}

/*#endregion PelakCar_Info*/


/*#region ProgressBar*/
.ProgressBar_Txt_Div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.ProgressBar_Txt {
}

.myProgress {
    justify-content: flex-end;
    border-radius: 100px;
    align-items: center;
    position: relative;
    padding: 0;
    width: 160px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 4px;
    background: linear-gradient(180deg, #FFF 0%, #F7F7F7 100%);
    box-shadow: 0px 4px 6px 0px rgba(214, 214, 225, 0.50) inset, -4px -4px 6px 0px rgba(255, 255, 255, 0.38), 4px 4px 6px 0px rgba(214, 214, 225, 0.20);
}

.myProgressValue {
    animation: load 3s normal forwards;
    border-radius: 100px;
    width: 52.02px;
    height: 8px;
    flex-shrink: 0;
    border-radius: 4px;
    background: var(--projectMainAccent_BGColor);
    box-shadow: 0px 4px 6px 0px rgba(214, 214, 225, 0.50) inset, -4px -4px 6px 0px rgba(255, 255, 255, 0.38), 4px 4px 6px 0px rgba(214, 214, 225, 0.20);
}

@keyframes load {
    0% {
        width: 0;
    }

    100% {
        width: 68%;
    }
}

/*#endregion ProgressBar*/



/*#region Modal*/

.myModal {
    /*display: flex;*/
    width: 100vw;
    position: fixed;
    left: 0;
    top: 0;
    height: 100vh;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    /*max-width: var(--AdminDesktop_MaxWidth);*/
}

.Modal_Container {
    position: fixed;
    z-index: 10000;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    display: none;
    cursor: pointer;
    /*max-width: var(--MaxWidth);*/
    max-width: 100VW;
    overflow-y: scroll;
    overflow-x: hidden;
    justify-content: center;
    align-content: center;
    align-items: center;
}

.Modal_BG,
.Modal_BG2,
.Modal_BG3,
.sideNav_BG {
    background: rgba(178, 178, 178, 0.30);
    backdrop-filter: blur(11px);
    position: fixed;
    transition: 0.5s;
}

.Modal_BG,
.Modal_BG2,
.Modal_BG3 {
    z-index: 0;
    width: 100%;
    height: 100%;
    left: 0;
}

.sideNav_BG {
    z-index: -1;
    width: 100vw !important;
    max-width: 100vw;
    min-width: 100vw;
    /*width: 100%;*/
    /*height: 100vh;
    display: none;*/
    top: 0;
    left: 50%;
    transform: translate(-50%);
    height: 0;
}

.ModalContainer {
    width: 399px;
    padding: 30px 15px 40px 15px;
    border-radius: 25px;
    background: var(--ModalContainer_BG_Color);
    box-shadow: -1.67px -1.67px 5px 0px #FFF, 2.5px 2.5px 5px 0px rgba(174, 174, 192, 0.40);
    backdrop-filter: blur(11px);
    height: fit-content;
    display: grid;
    position: relative;
    /*z-index: 1;*/
}

    .ModalContainer.MainItem_UpDown {
        box-shadow: -2.5px -2.5px 0px 0px #FFF, 2.5px 2.5px 5px 0px rgba(174, 174, 192, 0.40);
        -webkit-box-shadow: var(--MainItems_UpDown_Shadow2);
        -moz-box-shadow: var(--MainItems_UpDown_Shadow2);
        box-shadow: var(--MainItems_UpDown_Shadow2);
    }

    .ModalContainer.AlertModalContainer {
        padding: 30px 30px 10px 30px;
    }

.FormModalContainer {
    display: flex;
    width: 100vw;
    max-width: 883px;
    padding: 32px 20px 20px 20px;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 68px;
    gap: 48px;
    gap: 28px;
    max-height: 90vh;
    overflow-y: scroll;
}

.TableModalContainer {
    max-width: 90%;
}

.ModalCloseButton img {
    width: 24px;
    height: 24px;
}

.ModalCloseButton:hover img,
.ModalCloseButton:active img {
    width: 22px;
    height: 22px;
}

.ModalTopTitle {
    color: black;
    text-align: center;
    font-family: Avenir;
    font-size: 24px;
    font-style: normal;
    font-weight: 900;
    line-height: 130%; /* 31.2px */
}

.myHamburgerIcon {
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 32px;
    height: 3px;
    margin: 4px 0;
    transition: 0.4s;
    display: flex;
    border-radius: 50px;
    cursor: pointer;
    background-color: white;
}

.DarkHeader .bar1,
.DarkHeader .bar2,
.DarkHeader .bar3 {
    background-color: white;
    background-color: var(--Gray_Color);
}

.LightHeader .bar1,
.LightHeader .bar2,
.LightHeader .bar3 {
    background-color: var(--BahmanBlack_Color);
}

.change .bar1 {
    transform: translate(0, 7px) rotate(-45deg);
}

.change .bar2 {
    opacity: 0;
}

.change .bar3 {
    transform: translate(0, -7px) rotate(45deg);
}

.ContentModal {
    width: 90vw;
    min-width: 300px;
    max-width: 1100px;
    height: auto;
    max-height: 90vh !important;
    overflow-y: scroll;
    margin: 10px;
}

/*.FullModalImage {
    display: flex;
    max-height: 500px;
}

.FullModalImage > img
{
    object-fit: contain;
    border-radius: 25px;
}
*/

.FullModalImage {
    /*display: flex;*/
    height: 500px;
    width: 100%;
    background-image: url(../image/bahmanimages/haftsin.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 25px;
    justify-content: center;
}

.BlurTextBoxOnImage {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(11px);
    border-radius: 25px;
    height: fit-content;
    padding: 20px 20px;
    font-weight: bold;
    display: grid;
    align-self: end;
    margin: 20px;
    gap: 10px;
}

@media screen and (max-width: 767px) {
    .ModalContainer {
        width: 100%;
        position: fixed;
        bottom: 0;
        border-radius: 25px 25px 0 0;
    }

    .TableModalContainer {
        max-width: 100%;
    }
}

@media screen and (max-width: 576px) {
    .ModalContainer {
        width: 100%;
    }

    .DualSections_Div {
        padding: 35px 15px;
    }

    .bar1, .bar2, .bar3 {
        width: 24px;
        height: 2px;
    }
}


/*#endregion Modal*/



/*#region مودال جهت نمایش تمام صفحه تصاویر*/

.FullscreenPreview,
.FullscreenPreview * {
    cursor: zoom-in !important;
}

/* دکمه بستن */
.myModal .Modal_BG .Modal_Close,
.myModal .Modal_BG2 .Modal_Close {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1002;
    box-shadow: var(--DisabledButton_Shadow);
}

/* تصویر اصلی در مودال */
.myModal .custom-modal-content {
    position: relative;
    display: flex;
    max-width: calc(100vw - 150px);
    height: 90vh;
    animation: zoom 0.5s;
    object-fit: contain;
    -webkit-box-shadow: var(--LocationPin_Shadow);
    -moz-box-shadow: var(--LocationPin_Shadow);
    box-shadow: var(--LocationPin_Shadow);
    border-radius: 18px;
}

@keyframes zoom {
    from {
        transform: scale(0.1)
    }

    to {
        transform: scale(1)
    }
}


/*#endregion مودال جهت نمایش تمام صفحه تصاویر*/




/*////////////////////////////////////////////////////////////Modal(Popup)/////////////////////////////////////////////////////////////////*/

/*#region PopupModal*/
/*#region PopupModalGeneral*/
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 20000; /* Sit on top */
    right: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow-y: auto; /* Enable scroll if needed */
    padding: 20px;
}

    .modal .Modal_BG,
    .modal .Modal_BG2,
    .modal .Modal_BG3 {
        height: 100vh;
        position: absolute;
    }


/* Modal Content */
.modal-content {
    margin: auto;
    padding: 20px;
    width: 760px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.25);
    background-color: #ffffff; /*position: fixed !important;*/
    position: absolute !important;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 50%;
}


/* The Close Button */


#AddingTaskModal .PopupCloseSign, #TaskOverviewModal .PopupCloseSign {
    width: 24px;
    height: 24px;
    object-fit: contain;
    cursor: pointer;
}


@media screen and (max-width:767px) and (min-width:300px) {
    .modal-content {
        width: 90%;
        padding: 0;
    }

    #AddingTaskModal .PopupCloseSign, #TaskOverviewModal .PopupCloseSign {
        margin: 15px 15px 10px 10px;
        width: 22px;
        height: 22px;
    }
}
/*#endregion PopupModalGeneral*/
/*////////////////////////////////////////////////////////////Modal(Popup) Contents/////////////////////////////////////////////////////////////////*/

/*#region Entrance*/

/*#region OTP*/

#LandingLogin .Modal_BG,
#LandingLogin .Modal_Close,
#LandingLogin #LoginModalTitle {
    display: none !important;
}

#LandingLogin .PanelButton_Div .BtnLayer2.DarkBtn_OnLightBG_Layer2 {
    width: 150px !important;
}

#LandingLogin .myBtn_Div .BtnLayer1 {
    width: fit-content !important;
    width: 150px !important;
}

#LandingLogin .myBtn_Div {
    justify-content: center;
    display: flex;
}

#LandingLogin .myBtn_Div {
    justify-content: center;
    display: flex;
}

.OTP_Container {
    display: flex;
    gap: 16px;
    direction: ltr;
    margin: auto;
    flex-wrap: wrap;
    justify-content: center;
}

.OTP_Input {
    padding: 7px 14px;
    align-items: center;
    align-self: stretch;
    border-radius: 26px;
    background: var(--Input_BgColor);
    -webkit-box-shadow: var(--AnyButton_Up_Shadow);
    -moz-box-shadow: var(--AnyButton_Up_Shadow);
    box-shadow: var(--AnyButton_Up_Shadow);
    background-blend-mode: soft-light, normal;
    height: 44px;
    width: 44px;
    text-align: center;
    direction: ltr;
    font-size: 14px;
    caret-color: var(--projectMainAccent_Color);
    cursor: auto;
}

input.OTP_Input:focus {
    border: 1px solid var(--projectMainAccent_Color) !important;
    -webkit-box-shadow: var(--AnyButton_Down_Shadow), var(--AnyButton_Up_Shadow);
    -moz-box-shadow: var(--AnyButton_Down_Shadow), var(--AnyButton_Up_Shadow);
    box-shadow: var(--AnyButton_Down_Shadow), var(--AnyButton_Up_Shadow);
}

/*#endregion OTP*/
/*#endregion Entrance*/


/*#region TripleItems*/
.FireInsurancePackages_BG {
    /*filter: blur(8px);
    -webkit-filter: blur(8px);*/
    /*background: url('../../Image/TestImages/atash.jpg') no-repeat center;*/
    /*background: url('../../Image/TestImages/photo_2024-09-22_13-06-11.jpg') no-repeat bottom;*/
    /*    background: url('../../Image/TestImages/s-1 (002).jpg') no-repeat center;
    background-size: cover;*/
}

#changeBGimg {
    background-image: url('../../Image/TestImages/khooneAtish.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: calc(100% / 3);
    aspect-ratio: 1/1;
}


.TripleItems_BlurBG {
    background-color: rgba(247, 247, 247, .9);
}

    .TripleItems_BlurBG.MainItems_Up_Shadow:hover {
        border: var(--Border_DokmeMenu_Up_AccentBorder);
    }

.TripleCols {
}

.TripleItems_Container {
    padding: 16px;
}

.Selected_TripleCols {
    flex: initial;
    width: 100%;
}

.Deselected_TripleCols,
.Selected_TripleItems {
    width: 33.3%;
}

.TripleItems {
}

.TripleItems_Description {
    width: 100%;
    padding: 16px;
}

.Deselected_TripleItems {
    width: 100%;
    display: grid;
}

.Selected_TripleItems .TripleItems_ContentDiv {
    display: none;
}

.Deselected_TripleItems .TripleItems_TitleOnly {
    display: none;
}

.Selected_TripleItems .TripleItems_TitleOnly {
    display: flex;
}

.TripleItems_Description_ContentDiv {
    max-height: 40vh;
    overflow-y: scroll;
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    max-height: max-content !important;
    overflow: hidden;
}

.coverage-section,
.coverage-section > * {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    white-space: normal;
}

@media only screen and (max-width: 991px) {
    .Deselected_TripleCols {
        width: 50%;
    }
}

@media only screen and (max-width: 767px) {
    .Deselected_TripleCols,
    .Selected_TripleItems {
        width: 50%;
    }
}

@media only screen and (max-width: 576px) {
    .Deselected_TripleCols,
    .Selected_TripleItems {
        width: 100%;
    }
}

/*#endregion TripleItems*/


/*#region CustomCheckboxRadioBtn*/

/*#region CheckBox*/

.RadioCheckBox {
    display: grid;
    padding: 16px;
    border-radius: 18px;
    gap: 12px;
}

    .RadioCheckBox.Large_RadioCheckBox {
        gap: 12px;
    }

    .RadioCheckBox.Small_RadioCheckBox {
        gap: 10px;
    }

.RadioCheckcontainer {
    display: flex;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    gap: 10px;
    align-items: center;
}

    .RadioCheckcontainer * {
        cursor: pointer;
    }

.Large_RadioCheckBox .RadioCheckText {
    font-size: 14px;
}

.Small_RadioCheckBox .RadioCheckText {
    font-size: 12px;
}

/* The container */
/* Hide the browser's default checkbox */
.RadioCheckcontainer input.RadioCheckInput {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Create a custom checkbox */
.myCheckmark_Out {
    border-radius: var(--CircleBorder_Radius);
    background-color: var(--DokmeGholombe_Biruni_Color);
    -webkit-box-shadow: var(--Border_DokmeMenu_Up_AccentBorder);
    -moz-box-shadow: var(--Border_DokmeMenu_Up_AccentBorder);
    box-shadow: var(--Border_DokmeMenu_Up_AccentBorder);
    padding: 2px;
}

.Large_RadioCheckBox .myCheckmark_Out {
    height: 28px;
    width: 28px;
    padding: 4px;
}

.Small_RadioCheckBox .myCheckmark_Out {
    height: 22px;
    width: 22px;
    padding: 3px;
}

.myCheckmark_In,
.myRadioBtn_In {
    position: relative;
    display: flex;
    height: 100%;
    width: 100%;
    border-radius: var(--CircleBorder_Radius);
    background-color: var(--DokmeGholombe_Daruni_Color);
    -webkit-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
}


.RadioCheckBoxOnDark .myCheckmark_In,
.RadioCheckBoxOnDark .myRadioBtn_In,
.RadioCheckBoxOnDark .RadioCheckcontainer:hover input.RadioCheckInput ~ .myCheckmark_Out .myCheckmark_In,
.RadioCheckBoxOnDark .RadioCheckcontainer:hover input.RadioCheckInput ~ .myCheckmark_Out .myRadioBtn_In {
    -webkit-box-shadow: var(--AnyButton_Up_Dark_Shadow) !important;
    -moz-box-shadow: var(--AnyButton_Up_Dark_Shadow) !important;
    box-shadow: var(--AnyButton_Up_Dark_Shadow) !important;
    /*    border: 1px solid var(--DarkGray_Text_Color);*/
}

.RadioCheckBoxOnDark .myCheckmark_Out,
.RadioCheckBoxOnDark .myCheckmark_Out:hover {
    padding: 0 !important;
}

.RadioCheckBoxOnDark .RadioCheckcontainer:hover input.RadioCheckInput ~ .myCheckmark_Out {
    border: none !important;
}

.RadioCheckBoxOnDark .RadioCheckText {
    color: white;
}

/* On mouse-over, add a grey background color */
.RadioCheckcontainer:hover input.RadioCheckInput ~ .myCheckmark_Out {
    box-shadow: var(--Border_DokmeMenu_Up_AccentBorder);
    border: var(--Border_DokmeMenu_Up_AccentBorder);
}

    .RadioCheckcontainer:hover input.RadioCheckInput ~ .myCheckmark_Out .myCheckmark_In,
    .RadioCheckcontainer:hover input.RadioCheckInput ~ .myCheckmark_Out .myRadioBtn_In {
        /*border: var(--Border_DokmeMenu_Up_AccentBorder);*/
    }

/* When the checkbox is checked, add a blue background */
.RadioCheckcontainer input.RadioCheckInput:checked ~ .myCheckmark_Out .myCheckmark_In,
.RadioCheckcontainer input.RadioCheckInput:checked ~ .myCheckmark_Out .myRadioBtn_In {
    background: var(--projectMainAccent_BGColor);
}

/* Create the checkmark/indicator (hidden when not checked) */
.myCheckmark_In:after,
.myRadioBtn_In:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the checkmark when checked */
.RadioCheckcontainer input.RadioCheckInput:checked ~ .myCheckmark_Out .myCheckmark_In:after,
.RadioCheckcontainer input.RadioCheckInput:checked ~ .myCheckmark_Out .myRadioBtn_In:after {
    display: block;
}

/* Style the checkmark/indicator */
.RadioCheckcontainer .myCheckmark_Out .myCheckmark_In:after,
.RadioCheckcontainer .myCheckmark_Out .myRadioBtn_In:after {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

.RadioCheckcontainer .myCheckmark_Out .myCheckmark_In:after {
    left: 50%;
    top: 45%;
    border: solid white;
    width: 5px;
    height: 12px;
    border-width: 0 1.5px 1.5px 0;
}

.Large_RadioCheckBox .RadioCheckcontainer .myCheckmark_Out .myCheckmark_In:after {
    width: 5px;
    height: 12px;
    border-width: 0 1.5px 1.5px 0;
}

.Small_RadioCheckBox .RadioCheckcontainer .myCheckmark_Out .myCheckmark_In:after {
    width: 4px;
    height: 10px;
    border-width: 0 1px 1px 0;
}

@media all and (max-width:767px) {
}

/*#endregion CheckBox*/


/*#region FixedCheckBox*/

.RadioCheckcontainer2, .RadioCheckcontainer2 * {
    cursor: default;
}

.myCheckmark_In2 {
    background-color: var(--GreenText_Color);
    position: relative;
    display: flex;
    height: 100% !important;
    width: 100% !important;
    border-radius: var(--CircleBorder_Radius);
    -webkit-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
    left: 50%;
    top: 45%;
}

    .myCheckmark_In2:after {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        content: "";
        position: absolute;
        border: solid white;
        width: 4px;
        height: 8px;
        border-width: 0 1.5px 1.5px 0;
    }
/*#endregion FixedCheckBox*/
/*#region RadioBtn*/
/*#endregion RadioBtn*/
/*#endregion CustomCheckboxRadioBtn*/


/*#region NavPills*/
.OutForm_Comtainer {
    display: grid;
    gap: 20px;
    padding: 0 40px 35px;
}

.FormTab_Container {
    display: flex;
    padding: 0px 12px;
    justify-content: flex-end;
    align-items: center;
    gap: 28px;
    align-self: stretch;
}

.FormTitle {
    color: var(--projectMainAccent_Color);
    font-size: 22px;
    font-style: normal;
    font-weight: 800;
    font-weight: 900;
    white-space: nowrap;
    align-self: center;
    text-align: center;
}

.tab-pane {
    display: none;
}

    .tab-pane.active {
        display: grid;
    }

.FormTabs_Div {
    text-align: center;
    direction: rtl;
    display: flex;
    justify-content: space-evenly;
    padding: 0;
    display: flex;
    white-space: nowrap;
    width: 100%;
    display: flex;
    padding: 10px 0px;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1 0 0;
}

    .FormTabs_Div > li {
        /*flex: 1 100%;*/
        flex: 1;
        white-space: nowrap;
    }

        .FormTabs_Div > li > a {
            color: var(--Gray_Color);
            font-size: 12px;
            display: grid;
            justify-items: center;
            gap: 8px;
        }

        .FormTabs_Div > li.active > a,
        .FormTabs_Div > li.active > a:focus,
        .FormTabs_Div > li.active > a:hover,
        .FormTabs_Div > li.completed > a,
        .FormTabs_Div > li.completed > a:focus,
        .FormTabs_Div > li.completed > a:hover {
            font-weight: bold;
            font-weight: 600;
            color: var(--BahmanBlack_Color);
        }

        .FormTabs_Div > li > a .TabNumber_Div {
            color: white;
            border-radius: 25px;
            background: var(--Gray_Color);
            display: flex;
            width: 30px;
            height: 30px;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .FormTabs_Div > li.active > a .TabNumber_Div,
        .FormTabs_Div > li.active > a:focus .TabNumber_Div,
        .FormTabs_Div > li.active > a:hover .TabNumber_Div,
        .FormTabs_Div > li.completed > a .TabNumber_Div,
        .FormTabs_Div > li.completed > a:focus .TabNumber_Div,
        .FormTabs_Div > li.completed > a:hover .TabNumber_Div {
            background: var(--projectMainAccent_BGColor);
        }


/* غیرفعال کردن کلیک */
.disabled {
    pointer-events: none; /*  */
    opacity: 0.5;
}

@media all and (max-width:767px) {
    .OutForm_Comtainer {
        padding: 0 0 35px;
        gap: 22px;
    }

    .FormTab_Container {
        display: contents;
    }

    .FormTabs_Div {
        display: inline-flex;
        overflow-x: scroll;
    }

        .FormTabs_Div > li {
        }

            .FormTabs_Div > li > a {
                font-size: 10px;
            }

            .FormTabs_Div > li.active > a,
            .FormTabs_Div > li.active > a:focus,
            .FormTabs_Div > li.active > a:hover {
            }


    .previous-tab-btn.IconBtn_Div .BtnLayer1,
    .HeaderBtns_Container .IconBtn_Div .BtnLayer1, .IconBtn_Div .BtnLayer1 {
        width: 32px;
        height: 32px;
        padding: 2px;
    }
}

/*#endregion NavPills*/


/*#region Forms*/

.FormContainer {
    display: flex;
    width: 100%;
    padding: 24px 22px;
    flex-direction: column;
    align-items: center;
    gap: 46px;
    border-radius: 25px;
    background: rgba(247, 247, 247, 0.85);
    box-shadow: var(--MainItems_Down_Shadow);
}

.FormDiv {
    display: grid;
    gap: 32px;
    padding: 0 !important;
}

.FormPartition_Title {
    display: flex;
    padding: 5px 0px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    align-self: stretch;
    color: black;
    text-align: center;
    font-weight: 800;
    font-weight: 900;
}

.FormInfo {
    color: var(--FieldContent_Color);
    text-align: center;
    font-weight: 400;
}

.FormFields_Container {
    display: grid;
    padding: 4px 2px;
    gap: 28px;
    margin: 50px auto;
    margin: 0px auto;
    width: 100%;
}

.TodaysDateTime_TopOfTable + .FormFields_Container,
.ButtonsOverTable_Div + .FormFields_Container {
    margin: auto !important;
    margin: initial !important;
}

.FormFields_Container2 {
    max-width: 767px;
}

.FormFields_Div {
    margin-bottom: 30px;
}

.BoxUp {
    padding: 24px 14px;
    border-radius: var(--InputFieldsBorder_Radius_Mobile);
}

.NoticeBox {
    background: var(--Banana_Light);
    border: 3px solid var(--projectMainAccent_Color);
    padding: 14px;
}

.myFieldset .FormFields_Div {
    margin-bottom: 0;
}

.accordion-content .FormFields_Div {
    margin: 0;
    padding: 30px 15px;
}

.FormFields_Row {
    display: flex;
    width: 100%;
    gap: 32px;
    column-gap: 32px;
    row-gap: 12px;
}

    .FormFields_Row.FormFields_AddableRow {
        flex-wrap: wrap;
    }

.myRemoveFieldBtnDiv {
    height: 46px;
    display: flex;
    align-items: center;
}

.FormFields_LabelField {
    /*display: flex;
    flex-direction: column;
    align-items: flex-end;*/
    display: grid;
    align-content: baseline;
    padding: 1px 6px 4px 6px;
    gap: 5px;
    gap: 0;
    flex: 1 0 0;
    width: 100%;
}

.FormFields_Row.FormFields_AddableRow .FormFields_LabelField {
    flex: initial;
    width: calc(50% - (32px / 2));
}


.FormFields_Row.justify_content_center .FormFields_LabelField {
    max-width: 366px;
}

.removeRepeatableDiv_Div {
    height: 100%;
    display: grid;
    align-content: center;
    padding-right: 16px;
    border-right: 1px solid var(--FieldBorder_Color);
}

.FormFields_LabelDiv {
    display: flex;
    padding: 5px 4px 5px 0px;
    align-items: flex-end;
    width: 100%;
    gap: 2px;
}

.mySimple_Bootstrap_Table_Search .FormFields_LabelDiv {
    justify-content: space-between;
    gap: 10px;
}

.FormFields_ExtraAdded {
    width: calc(50% - (32px / 2)) !important;
    flex: initial !important;
}

.FormFields_LabelTxt {
    color: var(--FieldTitle_Color);
    text-align: right;
    font-weight: 400;
    width: fit-content;
}

.mySimple_Bootstrap_Table_Search .FormFields_LabelTxt {
    /*width: 100%;*/
    width: auto;
    white-space: nowrap;
}

.FormFields_TipTxt {
    display: flex;
    align-items: flex-end;
    width: 100%;
    font-size: 8px;
    font-size: 9px;
    color: var(--FieldContent_Color);
    padding: 2px 20px 5px 0px;
    padding: 7px 4px 5px 0px;
}

.FormFields_LabelField > .FormFields_TipTxt {
    margin-top: -5px;
}

.FormFields_TxtInsideInput {
    font-size: 10px !important;
    color: var(--FieldContent_Color);
}

.FormFields_LabelStar {
    color: var(--Red_Color);
    font-size: 12px;
    font-weight: 400;
}

.myFields {
    display: flex;
    color: var(--FieldContent_Color);
    background-color: var(--BackgroundColor_Color);
    border-radius: 36px;
    transition: 0.3s;
    height: 46px;
    padding: 7px 14px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border: 1px solid var(--FieldBorder_Color) !important;
}

    .myFields,
    .myFields * {
        font-size: 14px;
    }

        .myFields:focus,
        .myFields:target,
        .myFields:active,
        .myFields:focus-visible,
        .myFields:focus-within {
            border: var(--Border_DokmeMenu_Up_AccentBorder);
            outline: none;
        }

.myTextareaFields {
    height: auto;
    border-radius: 18px;
}

.myReviewTextarea {
    height: auto;
    min-height: auto;
    max-height: fit-content;
    aspect-ratio: initial;
    border-radius: 26px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 14px 7px;
}

    .myReviewTextarea div.myDropdown_Input {
        padding: 7px 14px;
    }

    .myReviewTextarea audio {
        width: 100%;
    }

.myDropdown_Input {
    width: 100%;
    height: 100%;
    background-color: transparent !important;
    border: none;
    outline: none;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media screen and (max-width: 767px) {

    .FormFields_Row.FormFields_AddableRow .FormFields_LabelField {
        width: 100%;
    }

    .FormFields_ExtraAdded {
        width: 100% !important;
    }
}



/*#region Fieldset_Legend*/
.myFieldset {
    display: flex;
    padding: 46px 38px;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    border-radius: 25px;
    border: 1px dashed var(--FieldBorder_Color);
    position: relative;
    width: 100%;
}

.myFieldset2 {
    padding: 36px 18px 18px;
    border: 2px dashed var(--FieldContent_Color);
}

.myFieldset3 {
    padding: 12px;
    border: 3px dashed var(--FieldContent_Color);
}

.myLegend {
    display: flex;
    height: 25px;
    padding: 10px 18px;
    justify-content: right;
    align-items: center;
    gap: 10px;
    background-color: inherit;
    color: #000;
    text-align: right;
    font-size: 16px;
    font-weight: 600;
    position: absolute;
    top: -16px;
    right: 20px;
}

.myFieldset2 .myLegend,
.myFieldset3 .myLegend {
    width: fit-content;
    background: var(--BackgroundColor_Color);
}

/*#endregion Fieldset_Legend*/


hr.myRepeatableDiv_Hr {
    margin: 40px 0 20px 0;
    color: var(--FieldBorder_Color);
    opacity: 1;
    border-top: 1px solid;
}

.RepeatableDiv_With_BorderBottom {
    padding-bottom: 40px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--FieldBorder_Color);
}

/*#region DD*/
.dropdown {
    width: 100%;
}

    .dropdown * {
        list-style: none !important;
        list-style-type: none !important;
        display: grid;
        align-content: center;
        color: var(--FieldContent_Color);
        cursor: pointer;
    }


.myDropdown_Input:checked + .myDropdown_DefaultLabelOptionDiv .myDropdown_SelectDiv {
    transform: scaleY(1);
    opacity: 1;
}

.myDropdown_Input:checked + .myDropdown_DefaultLabelOptionDiv .myDropdown_DefaultLabelOption:after {
    transform: rotate(-135deg);
}

.myDropdown_DefaultLabelOptionDiv {
    width: 100%;
    cursor: pointer;
}

.myDropdown_DefaultLabelOption {
    position: relative;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
}

    .myDropdown_DefaultLabelOption:focus {
        outline: none;
    }

    .myDropdown_DefaultLabelOption::after,
    .sidenav .LinkHasSublink::after {
        position: absolute;
        top: 45%;
        left: 20px;
        content: "";
        width: 8px;
        height: 8px;
        border-right: .5px solid var(--FieldContent_Color);
        border-bottom: .5px solid var(--FieldContent_Color);
        transform: rotate(45deg) translateX(-45%);
        transition: 0.3s ease-in-out;
    }

.sidenav .LinkHasSublink::after {
    border-right: .5px solid var(--BackgroundColor_Color);
    border-bottom: .5px solid var(--BackgroundColor_Color);
    transition: 0.15s ease-in-out;
}

.sidenav .LinkHasSublink.selectedItem::after {
    transform: rotate(224deg) translateX(0%);
}

.FieldInTable.myDropdown_DefaultLabelOption::after,
.FieldInTable.MultipleItems_DropdownButton::after,
.smallSelect.myDropdown_DefaultLabelOption::after,
.smallSelect.MultipleItems_DropdownButton::after,
.FieldInTable > .myDropdown_DefaultLabelOption::after,
.FieldInTable > .MultipleItems_DropdownButton::after,
.smallSelect > .myDropdown_DefaultLabelOption::after,
.smallSelect > .MultipleItems_DropdownButton::after {
    top: 40% !important;
    left: 14px !important;
    width: 6px !important;
    height: 6px !important;
}
/*.myDropdown_SelectDiv {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 7px;
    overflow: hidden;
    transform: scaleY(0);
    transform-origin: top;
    border-radius: 18px;
    opacity: 0;
    transition: 0.2s ease-in-out;
    padding: 0;
    z-index: 1;
    border: var(--Border_DokmeMenu_Up_AccentBorder);
    max-height: 400px;
    overflow-y: scroll;
}*/

.myDropdown_SelectDiv {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    margin-top: 7px;
    border-radius: 18px;
    padding: 0;
    z-index: 1;
    border: var(--Border_DokmeMenu_Up_AccentBorder);
    max-height: 0;
    overflow-y: hidden;
    opacity: 0;
    visibility: hidden;
    transition: max-height 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
}

.myDropdown_Input:checked ~ .myDropdown_DefaultLabelOptionDiv .myDropdown_SelectDiv {
    max-height: 200px; /* ارتفاع کامل دراپ‌داون */
    overflow-y: scroll; /* اسکرول عمودی */
    opacity: 1; /* شفافیت کامل */
    visibility: visible; /* نمایش */
    display: block;
}

.myDropdown_SelectOptions {
    padding: 20px;
    background-color: var(--BackgroundColor_Color);
    border-bottom: 1px solid var(--FieldBorder_Color);
    transition: 0.3s;
    padding: 14px;
}

    .myDropdown_SelectOptions:last-of-type {
        border-bottom: 0;
    }

    .myDropdown_SelectOptions:hover {
        background-color: var(--White_Color);
    }


@media (max-width: 767px) {

    .myFields,
    .myFields * {
        font-size: 12px;
    }
}


/*#region myCustomSelect*/


/* ============================================= */
/* ===== شروع استایل سفارشی برای دراپ‌داون‌ها ===== */
/* ============================================= */

/* --- استایل‌های اصلی برای دراپ‌داون سفارشی --- */

/* مخفی کردن select اصلی به روشی که همچنان در دسترس باشد */
.original-select {
    display: none;
}

/* دربرگیرنده کل کامپوننت */
.custom-select .custom-select-wrapper {
    position: relative;
    width: 100%;
    direction: rtl;
}

/* باکسی که کاربر می‌بیند و کلیک می‌کند */
.custom-select .custom-select-trigger {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

    .custom-select .custom-select-trigger:hover {
    }

    .custom-select .custom-select-trigger.myDropdown_DefaultLabelOption::after {
        border: none !important;
    }


/* استایل فلش جدید شما (که یک عکس است) */
.custom-select .dropdown-arrow {
    transition: transform 0.3s ease; /* انیمیشن نرم برای چرخیدن */
    /* کلاس img_14 شما احتمالاً عرض و ارتفاع را مشخص می‌کند، در غیر اینصورت می‌توانید اینجا اضافه کنید */
    /* مثال: width: 14px; height: 14px; */
}

/* ==================================================================== */
/* === این بخش دقیقاً همان چیزی است که شما می‌خواستید استایل کنید === */
/* ==================================================================== */

/* دیویژنی که گزینه‌ها را در بر می‌گیرد (باکس بازشونده) */
.custom-select .custom-options {
    position: absolute;
    top: 100%; /* دقیقاً زیر باکس اصلی قرار می‌گیرد */
    margin-top: 4px;
    left: 0;
    right: 0;
    background: white !important;
    border-radius: 18px;
    z-index: 10;
    max-height: 200px;
    overflow-y: auto; /* اگر گزینه‌ها زیاد بود، اسکرول ایجاد شود */
    /* مهم: این باکس به صورت پیش‌فرض مخفی است */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    padding: 40px 10px 10px;
    padding: 10px;
}

/* کلاسی که با جاوااسکریپت برای نمایش باکس گزینه‌ها اضافه می‌شود */
.custom-select.open .custom-options {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    display: grid;
}

.custom-select .custom-option.myDropdown_SelectOptions {
    background-color: white;
    color: var(--DarkGray_Text_Color);
}

/* چرخاندن عکس فلش وقتی دراپ‌داون باز است */
.custom-select.open .dropdown-arrow {
    transform: rotate(180deg);
}

.custom-select.open .custom-select-trigger {
    border: var(--Border_DokmeMenu_Up_AccentBorder);
}


/* استایل هر کدام از گزینه‌ها (option) */
.custom-select .custom-option {
    padding: 12px 15px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    border-radius: 12px;
    border: none;
}

    /* استایل گزینه وقتی ماوس روی آن قرار می‌گیرد */
    .custom-select .custom-option:hover {
        background-color: #f0f0f0; /* رنگ هاور دلخواه */
    }

    /* استایل گزینه‌ای که انتخاب شده است (اختیاری) */
    .custom-select .custom-option.myDropdown_SelectOptions.selected {
        background: var(--projectMainAccent_BGColor);
        color: var(--BahmanBlack_Color);
        font-weight: 600;
    }


/* ============================================= */
/* ===== پایان استایل سفارشی برای دراپ‌داون‌ها ===== */
/* ============================================= */

/*#endregion myCustomSelect*/

/*#endregion DD*/


/*#region input[type=number]*/
/* برای Chrome، Safari، Edge */
input.myDropdown_Input[type=number]::-webkit-inner-spin-button,
input.myDropdown_Input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* برای Firefox */
input.myDropdown_Input[type=number] {
    -moz-appearance: textfield;
    background-color: var(--White_Color) !important;
}

.CustomNumberInput {
    position: relative;
    display: inline-block;
}

    .CustomNumberInput input {
        padding-left: 10px; /* فضای لازم برای فلش‌ها */
    }

.CustomArrows {
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.ArrowBtn {
    width: 24px;
    height: 22px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}


.FieldInTable .ArrowBtn,
.AccordionGroup2 .FieldInTable .ArrowBtn {
    width: 20px;
    height: 12px;
}

.Large_TableFields .FieldInTable .ArrowBtn {
    width: 28px;
    height: 20px;
}

.ArrowBtn img {
    width: 10px;
    height: 6px;
    cursor: pointer;
}


.FieldInTable .ArrowBtn img {
    width: 8px;
    height: 4px;
}

AccordionGroup2 .FieldInTable .ArrowBtn img {
    width: 16px;
    height: 5px;
}

/*    .ArrowBtn.down img {
        transform: rotate(180deg);
    }*/

/*#endregion input[type=number]*/


/*#region Uploads*/

/* Upload file div */
.UploadFileDiv {
    display: flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    transition: border-color 0.3s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    justify-content: space-between;
    direction: ltr;
    gap: 10px;
}

    /* Change border color on hover */
    .UploadFileDiv:hover,
    .UploadFileDiv:hover * {
        cursor: pointer;
    }

/* Hidden input (file) */
.imageUploader, .imageUploader2 {
    display: none;
    display: block !important;
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    left: 0;
}

/* استایل برای زمانی که فایل روی ناحیه کشیده می‌شود */
.UploadFileDiv.drag-over {
    border: 2px dashed #007bff !important; /* یک کادر نقطه‌چین آبی */
    background-color: #f0f8ff !important; /* پس‌زمینه آبی روشن */
}

/* Icon inside the upload button */
.uploadIcon,
.CalendarBtn,
.InputsBtn {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Preview image */
.imagePreview, .imagePreview2 {
    width: 100%;
    height: 100%;
    display: none; /* Initially hidden */
}

.is-color-picker .colorPreview {
    width: 100px !important;
    height: 100% !important;
}

.hidden-color-picker-global {
    display: none;
}

/* When an image is loaded, show the image */
.is-color-picker .colorPreview,
.UploadFileDiv img.imagePreview,
.UploadFileDiv video.imagePreview,
.UploadFileDiv img.imagePreview2,
.UploadFileDiv video.imagePreview2 {
    /*display: block;*/
    width: 100px !important;
    object-fit: fill;
    border-radius: var(--InnerBorder_Radius);
}

.TrashUploadedFile2 {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--BackgroundColor_Color);
    z-index: 1;
}

.LargeUploadFileDiv,
.Like_LargeUploadFileDiv {
    border-radius: 26px;
    aspect-ratio: 4/2;
    height: auto;
    max-height: 230px;
    width: 100%;
}

.LargeUploadFileDiv {
    background-image: url('../image/icons/upload.svg');
    background-position: center;
    background-size: 42% 42%;
    background-repeat: no-repeat;
    padding: 0;
}

.CarBodyAppearance_UploadImages_Div .LargeUploadFileDiv {
    /*    height: auto;
    width: 100%;
    aspect-ratio: 4/1;*/
    background-size: 52px;
    /**/
    aspect-ratio: 4/1.5;
    background-size: 52px;
    border-radius: 12px;
}

    .CarBodyAppearance_UploadImages_Div .LargeUploadFileDiv.LargeUploadFileDiv_Vertical {
        /*aspect-ratio: 1/4;*/
        height: 100%;
        max-height: 100%;
    }

    .CarBodyAppearance_UploadImages_Div .LargeUploadFileDiv.LargeUploadFileDiv_xsVertical_lgHorizontal {
        /*aspect-ratio: 1/4;*/
        height: 100%;
        max-height: 100%;
    }

.LargeUploadFileDiv img.imagePreview,
.LargeUploadFileDiv video.imagePreview,
.LargeUploadFileDiv img.imagePreview2,
.LargeUploadFileDiv video.imagePreview2 {
    width: 100% !important;
}

.CarBodyAppearance_UploadImages_Div {
    /* max-width: 500px;
    max-width: 300px;*/
    gap: 10px !important;
}

    .CarBodyAppearance_UploadImages_Div > div {
        gap: 10px !important;
    }

    .CarBodyAppearance_UploadImages_Div .CarBodyAppearance_UploadImages_MiddleCol {
        height: 100%;
        /*display: grid;*/
        align-items: center;
        /*        justify-content: center;*/
        align-content: space-between;
    }

        .CarBodyAppearance_UploadImages_Div .CarBodyAppearance_UploadImages_MiddleCol * {
            width: 100%;
        }


    .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv {
        display: grid;
        flex-direction: initial;
    }


        .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .LargeUploadFileDiv {
            background-size: 50% 50%;
        }

        .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .CarBodyAppearance_UploadImages_MiddleCol {
            width: 100%;
            height: auto;
            justify-content: space-between;
            max-height: 240px;
        }

            .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .CarBodyAppearance_UploadImages_MiddleCol img {
                height: fit-content;
                width: auto;
            }

        .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .LargeUploadFileDiv.LargeUploadFileDiv_xsHorizontal_lgVertical {
            aspect-ratio: 2/4;
            height: 100%;
            width: auto;
            align-self: center;
        }


        .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .LargeUploadFileDiv.LargeUploadFileDiv_xsVertical_lgHorizontal {
            aspect-ratio: 4/1.5;
            height: 100%;
            max-height: 100%;
        }

@media screen and (min-width: 1440px) {
    .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .LargeUploadFileDiv.LargeUploadFileDiv_xsHorizontal_lgVertical {
        aspect-ratio: 2/4;
    }
}

@media screen and (min-width: 1200px) and (max-width: 1439px) {
    .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .LargeUploadFileDiv.LargeUploadFileDiv_xsHorizontal_lgVertical {
        aspect-ratio: 2/8;
    }
}

@media screen and (min-width: 992px) and (max-width: 1199px) {
    .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .LargeUploadFileDiv.LargeUploadFileDiv_xsHorizontal_lgVertical {
        aspect-ratio: 1/7;
    }
}

@media screen and (min-width: 767px) and (max-width: 991px) {
    .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .LargeUploadFileDiv.LargeUploadFileDiv_xsHorizontal_lgVertical {
        aspect-ratio: 2/4;
    }
}


@media screen and (max-width: 767px) {
    .CarBodyAppearance_UploadImages_Div .LargeUploadFileDiv {
        border-radius: 12px;
        background-size: 32px;
    }



    .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv {
        display: grid;
        flex-direction: initial;
    }

        .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .CarBodyAppearance_UploadImages_MiddleCol {
            height: 100%;
            display: grid !important;
            max-height: initial;
            justify-content: initial;
        }

            .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .CarBodyAppearance_UploadImages_MiddleCol img {
                height: initial;
                width: 100%;
            }

        .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .LargeUploadFileDiv.LargeUploadFileDiv_xsHorizontal_lgVertical {
            aspect-ratio: 2/4;
            height: 100%;
            width: auto;
            align-self: center;
        }


        .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .LargeUploadFileDiv.LargeUploadFileDiv_xsVertical_lgHorizontal {
            aspect-ratio: 2.5/4;
            height: auto;
            flex: 1;
        }

        .CarBodyAppearance_UploadImages_Div .LargeUploadFileDiv.LargeUploadFileDiv_Horizontal,
        .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .LargeUploadFileDiv.LargeUploadFileDiv_xsVertical_lgHorizontal {
            aspect-ratio: 4/2.5;
            height: auto;
        }

        .CarBodyAppearance_UploadImages_Div .LargeUploadFileDiv.LargeUploadFileDiv_Vertical,
        .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .LargeUploadFileDiv.LargeUploadFileDiv_xsHorizontal_lgVertical {
            aspect-ratio: 2.5/4;
            height: auto;
            flex: 1;
        }

        .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .LargeUploadFileDiv.LargeUploadFileDiv_xsHorizontal_lgVertical {
            aspect-ratio: 4/1.5;
            height: auto;
            max-height: 230px;
            width: 100%;
        }

        .CarBodyAppearance_UploadImages_Div.CarBodyAppearance_UploadImages_ResponsiveDiv .LargeUploadFileDiv.LargeUploadFileDiv_xsVertical_lgHorizontal {
        }
}

/***************New Styles For Uploading Video Progress Bar */

.preview-container img, .preview-container video, .preview-container iframe {
    border: 1px solid #ccc;
    border-radius: 8px;
    margin-top: 5px;
}

/* --- استایل‌های پروگرس بار و دکمه غیرفعال --- */
.upload-progress-container {
    min-height: 28px; /* ارتفاع حداقلی برای جلوگیری از پرش صفحه */
    width: 50px;
    display: none;
}

    .upload-progress-container > * {
        width: 100%;
    }

.upload-progress-bar {
    width: 100%;
    height: 8px;
    background-color: #e0e0e0;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
}

    .upload-progress-bar div {
        height: 100%;
        width: 0%;
        background-color: #4CAF50; /* سبز */
        transition: width 0.2s ease-in-out;
        border-radius: 4px;
    }

.progress-percentage {
    font-size: 10px;
    color: #555;
    text-align: center;
    white-space: nowrap;
}

.submit-disabled {
    cursor: not-allowed !important;
    opacity: 0.6;
}

    .submit-disabled .BtnLayer2.DarkBtn_OnLightBG_Layer2 .BtnContents_Div * {
        color: gray !important;
    }

.text-muted {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    direction: ltr;
}


/*#endregion Uploads*/


.CalendarBtn {
    position: absolute;
    left: 14px;
}

@media screen and (max-width: 767px) {
}



/*#region PointOnImage*/


.mapPointStyle {
    font-size: 9px;
}

    .mapPointStyle:hover {
        transform: scale(1.2);
        z-index: 10;
    }

    /* این استایل را به بخش استایل‌های خود اضافه کنید */
    .mapPointStyle.active {
        background-color: #28a745; /* رنگ سبز */
        transform: scale(1.5);
        z-index: 11;
        box-shadow: 0 0 10px rgba(40, 167, 69, 0.8);
    }

.mapPointStyle2 {
    color: transparent !important;
}


/* دکمه های کنترل زوم */
.zoom-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 20;
    display: flex;
    gap: 5px;
}

    .zoom-controls button {
        font-size: 16px;
    }

        .zoom-controls button:hover {
            cursor: pointer;
        }

/* استایل های جدید برای قابلیت زوم */
.diagram-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    margin: auto;
    justify-items: center;
}

@media (min-width: 992px) {
    .diagram-layout {
        /*grid-template-columns: 768px 1fr;*/
    }
}

/* کانتینر اصلی دیاگرام */
.diagram-container {
    position: relative;
    width: 100%;
    max-width: 768px; /* می‌توانید این را بر اساس نیاز تغییر دهید */
    height: 500px; /* یک ارتفاع ثابت برای کانتینر */
    border: 1px solid #ccc;
    overflow: hidden; /* بسیار مهم: محتوای زوم شده را پنهان میکند */
    cursor: grab;
    background-color: #f0f0f0;
    border-radius: 8px;
}

    .diagram-container.is-panning {
        cursor: grabbing;
    }

/* این div برای اعمال transform استفاده میشود */
.image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0; /* نقطه شروع transform */
}

.diagram-image {
    display: block;
    width: 100%;
    height: auto;
    /*scale: 0.2;*/
    transform: scale(0.5) !important;
}


/****************************************************************************ADD POIONTS*/
#addPointDiagramContainer {
    position: relative;
    width: 100%;
    max-width: 768px;
    height: 400px;
    border: 1px solid #ccc;
    overflow: hidden;
    cursor: crosshair;
    background-color: #f0f0f0;
    border-radius: 8px;
}

    #addPointDiagramContainer.is-panning {
        cursor: grabbing;
    }

    #addPointDiagramContainer .image-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        transform-origin: 0 0;
    }

    #addPointDiagramContainer .diagram-image {
        display: block;
    }

    #addPointDiagramContainer #addPointMapContainer {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.map-point-add {
    position: absolute;
    width: 20px;
    height: 20px;
    width: 4px;
    height: 4px;
    width: 14px;
    height: 14px;
    background: var(--projectMainAccent_BGColor);
    color: transparent;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: bold;
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    user-select: none;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

#addPointDiagramContainer .zoom-controls {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 20;
    display: flex;
    gap: 5px;
}

    #addPointDiagramContainer .zoom-controls button {
        /*        width: 34px;
        height: 34px;
        border: 1px solid var(--BackgroundColor_Dark_Color);
        background-color: white;
        cursor: pointer;
        border-radius: 4px;
        font-size: 16px;*/
    }


/**********************************************************************************New For Show Points in EPC_Details*/

/* نگهدارنده تصویر باید position: relative باشد */
.image-wrapper {
    position: relative;
    display: inline-block;
    line-height: 0; /* حذف فضای خالی احتمالی زیر تصویر */
}

/* استایل پایه برای تمام نقاط */
.map-point, .mapPointStyle {
    position: absolute;
    /* مرکز-چین کردن نقطه روی مختصات دقیق */
    transform: translate(-50%, -50%);
    border-radius: 50%;
    /*border: 2px solid white;*/
    width: 4px !important;
    height: 4px !important;
    width: 8px !important;
    height: 8px !important;
    width: 14px !important;
    height: 14px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    z-index: 10;
    transition: background-color 0.3s, transform 0.3s, border-color 0.3s;
}

    /* استایل برای زمانی که ماوس روی نقطه قرار می‌گیرد */
    .map-point:hover, .mapPointStyle:hover {
        transform: translate(-50%, -50%) scale(1.1);
        z-index: 11;
    }

    /* استایل برای زمانی که یک نقطه فعال است (آکاردئون متناظرش باز است) */
    .map-point.active, .mapPointStyle.active {
        background-color: white;
        transform: translate(-50%, -50%) scale(1.2);
        border-color: #ffc107; /* زرد برای تاکید بیشتر */
        z-index: 12; /* روی بقیه نقاط قرار گیرد */
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.4);
    }

/* استایل برای تغییر نشانگر ماوس هنگام حرکت دادن تصویر */
.diagram-container.is-panning {
    cursor: grabbing;
}

.diagram-container {
    cursor: grab;
}

/* استایل برای محتوای آکاردئون در جدول */
.accordion-content {
    padding: 15px;
    background-color: #f9f9f9;
    border-top: 1px solid #ddd;
}

/*#endregion PointOnImage*/


/*#region Pelak*/
/* استایل کلی برای کانتینر فیلد پلاک */
.FormFields_Pelak {
    gap: 0;
}

/* استایل اصلی بدنه پلاک */
.PelakField {
    display: flex;
    height: 46px;
    justify-content: space-between;
    align-items: center;
    align-self: stretch;
    border-radius: 10px;
    background: var(--White_Color);
    width: 100%;
    max-width: 350px;
    box-sizing: border-box;
    box-shadow: var(--AnyButton_Up_Shadow) !important;
    overflow: hidden; /* این برای گرد بودن گوشه‌ها ضروری است */
    container-type: inline-size;
    container-name: plate_Container;
    border: 2px solid #eee;
}

.table th .PelakField {
    box-shadow: none !important;
}

.PelakField_OnDarkBG {
    box-shadow: none !important;
}
/* --- بخش‌های مختلف پلاک --- */
.PelakField input[type="text"] {
    letter-spacing: 5px;
    height: 100%;
}

/* بخش پرچم ایران (سمت چپ) */
.PelakField_flagContainer {
    display: grid;
    align-content: space-between;
    padding: 6px;
    font-size: 5px;
    direction: ltr;
    background-color: #003399;
    height: 100%;
    width: auto;
}

    .PelakField_flagContainer * {
        direction: ltr;
        text-align: left;
        color: #FFF;
        font-weight: 600;
        line-height: 6px;
        font-size: 5px;
    }

.PelakField_flag {
    width: 16px;
}

/* بخش اصلی پلاک (وسط) */
.PelakField_Main {
    display: flex;
    align-items: stretch; /* فرزندان ارتفاع کامل را بگیرند */
    gap: 2px;
    flex-grow: 1; /* این بخش باید فضای باقی‌مانده را پر کند */
    width: 0; /* ترکیب با flex-grow برای عملکرد صحیح */
    width: min-content;
    height: 72%;
    align-items: center;
    direction: rtl !important;
}

    /* ورودی‌های عددی در بخش اصلی */
    .PelakField_Main input[type="text"],
    .PelakField_MainNumber {
        flex: 2; /* دو برابر دراپ‌داون فضا بگیرد */
        min-width: 0; /* برای جلوگیری از سرریز شدن */
        width: 100%;
        border: none; /* برای ظاهر تمیزتر */
        text-align: center;
        letter-spacing: 5px;
        font-size: 14px;
    }


    /* دراپ‌داون حروف در بخش اصلی */
    .PelakField_Main .plateLetter_Dropdown,
    .PelakField_MainAlphabet {
        flex: 1; /* یک سهم از فضا را بگیرد */
        flex: 2;
        min-width: 0;
        display: flex; /* برای اینکه فرزندش ارتفاع کامل بگیرد */
        height: 100%;
        align-items: center;
    }

.PelakField_MainAlphabet {
    justify-content: center;
    font-size: 12px;
}

/* دکمه‌ی قابل مشاهده دراپ‌داون */
.plateLetter_Trigger {
    width: 100%; /* === مهم: عرض والد خود را پر کند === */
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 8px 1px;
    box-sizing: border-box;
    cursor: pointer;
}

    .plateLetter_Trigger > span {
        font-size: 14px;
    }

/* select مخفی دراپ‌داون */
.plate-letter-hidden-select {
    display: none;
}

/* بخش ایران و عدد دو رقمی (سمت راست) */
.PelakField_Iran {
    border-left: 1px solid #B6B6B6;
    width: 48px;
    display: flex;
    padding: 4px 6px;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    align-self: stretch;
}

    .PelakField_Iran input[type="text"],
    .PelakField_IranNumber {
        width: 100%;
        border: none;
        text-align: center;
        letter-spacing: 2px;
        font-size: 12px;
    }

.PelakField_IranTxt {
    text-align: center;
    color: #000;
    font-size: 8px;
    font-weight: 600;
    line-height: 10px;
}


/* --- استایل‌های مربوط به عملکرد دراپ‌داون --- */

/* کانتینر گزینه‌ها که در body قرار می‌گیرد */
.plate-letter-options-global {
    display: none;
    position: absolute;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 9999;
    max-height: 200px;
    overflow-y: auto;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

    .plate-letter-options-global.open {
        display: block;
    }

/* هر گزینه در لیست */
.FormFields_Pelak .custom-option {
    padding: 10px;
    font-size: 14px;
    cursor: pointer;
}

    .FormFields_Pelak .custom-option:hover {
        background-color: #f0f2f5;
        background: var(--projectMainAccent_BGColor);
    }

/* چرخش فلش */
.plateLetter_Dropdown.open .dropdown-arrow, /* برای سازگاری با کد JS */
.plate-letter-dropdown.open .dropdown-arrow { /* برای سازگاری با کد JS */
    transform: rotate(180deg);
}

.dropdown-arrow {
    transition: transform 0.2s ease;
}


/* --- واکنش‌گرایی با Container Queries --- */

@container plate_Container (max-width: 250px) { /* یک نقطه شکست بهتر */
    .PelakField_flagContainer * {
        font-size: 3px;
        line-height: 4px;
    }

    .PelakField_flag {
        width: 12px;
    }

    .PelakField_Iran {
        width: 38px;
    }

    .PelakField_IranTxt {
        font-size: 7px;
    }
    /* می‌توانید فونت اینپوت‌ها را هم اینجا تغییر دهید */
}

@container plate_Container (max-width: 120px) {
    Generated code
    .PelakField_flagContainer * {
        font-size: 2px;
    }

    .PelakField_flag {
        width: 8px;
    }

    .PelakField_Iran {
        width: 28px;
    }

    .PelakField_IranTxt {
        font-size: 6px;
    }

    .plateLetter_Trigger > span,
    .FormFields_Pelak .custom-option,
    .PelakField_MainAlphabet {
        font-size: 12px;
    }

    .PelakField_Main input[type="text"],
    .PelakField_MainNumber {
        font-size: 12px;
    }

    .PelakField_Iran input[type="text"],
    .PelakField_IranNumber {
        font-size: 10px;
    }
}

/*#endregion Pelak*/



/*#endregion Forms*/
/*#region Loader*/
.myLoader {
    display: flex;
    display: none;
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.8);
    z-index: 9999;
    justify-content: center;
    align-items: center;
}

.mySpinner {
    border: 23px solid var(--projectMainAccent_Color);
    border-top: 2px solid var(--BahmanBlack_Color);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/*#endregion Loader*/



/*#region BottomAlerts*/


.Alert_Container {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translate(-50%,0);
    z-index: 100000;
    opacity: 1;
    transition: opacity 0.5s ease;
}

    .Alert_Container.fade-out {
        opacity: 0;
        transition: opacity 0.5s ease;
    }

.SuccessAlert_Container .BtnLayer1 {
    background: #B5F1CC !important;
}

.SuccessAlert_Container .BtnLayer2 {
    background: #A1EEBD !important;
}

.NoticeAlert_Container .BtnLayer1 {
    background: #EAEAEA !important;
}

.NoticeAlert_Container .BtnLayer2 {
    background: #FBFBFB !important;
}

.ErrorAlert_Container .BtnLayer1 {
    background: #f3f0b9 !important;
}

.ErrorAlert_Container .BtnLayer2 {
    background: #f4f099 !important;
}

.FailAlert_Container .BtnLayer1 {
    background: #f1cdca !important;
}

.FailAlert_Container .BtnLayer2 {
    background: #e8cac9 !important;
}

.Alert_Container .progress-timer {
    width: 100%;
    height: 2px;
    overflow: hidden;
    border-radius: 2px;
}

.Alert_Container .progress-fill {
    width: 0%;
    height: 100%;
    transition: width linear;
}

.Alert_Container#SuccessAlert .progress-timer {
    background-color: #d0f4e5;
}

.Alert_Container#SuccessAlert .progress-fill#SuccessProgressFill {
    background-color: #28a745;
}

.Alert_Container#NoticeAlert .progress-timer {
    background-color: #bdbdbd;
}

.Alert_Container#NoticeAlert .progress-fill#NoticeProgressFill {
    background-color: #fff;
}


.Alert_Container#ErrorAlert .progress-timer {
    background-color: #dfd9ac;
}

.Alert_Container#ErrorAlert .progress-fill#ErrorProgressFill {
    background-color: #fffc40;
}


.Alert_Container#FailAlert .progress-timer {
    background-color: #d5a3a3;
}

.Alert_Container#FailAlert .progress-fill#FailProgressFill {
    background-color: #b51414;
}

/*#endregion BottomAlerts*/


/*#region ChatRoom*/

.chat_Container {
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat_Header {
    padding: 20px;
    text-align: center;
}

.chat_Box {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
}

.message {
    max-width: 50%;
    padding: 16px 28px;
    font-size: 0.9em;
    line-height: 1.4;
    position: relative;
    display: grid !important;
    border-radius: 15px;
    border-radius: var(--BtnsBorder_Radius) !important;
}

    .message p {
        margin-bottom: 8px;
        text-align: right;
    }

.timestamp {
    direction: ltr;
    height: 20px;
    display: flex;
    align-items: center;
}

.received .timestamp {
    text-align: left;
}

.sent .timestamp {
    text-align: right;
}

.status {
}

.received {
    align-self: flex-end;
    border-top-left-radius: 0 !important;
    text-align: left;
    -webkit-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow) !important;
    -moz-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow) !important;
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow) !important;
}

.sent {
    align-self: flex-start;
    border-top-right-radius: 0 !important;
}

.chat_Input {
    display: flex;
    align-items: center;
    border-top: 1px solid #ddd;
    padding: 20px 5px 5px;
    width: 100%;
    gap: 14px;
    align-items: end;
}

    .chat_Input textarea {
        height: 136px;
        padding: 12px 6px;
        resize: none;
    }


.message img.UploadedImageInChat {
    max-width: 100%;
    margin-top: 10px;
    border-radius: 25px;
    display: block;
}

@media screen and (max-width: 767px) {

    .chat_Input {
        display: grid;
    }

    #send_Btn.myBtn_Div {
        justify-content: left;
        display: flex;
    }

        #send_Btn.myBtn_Div .BtnLayer1 {
            /*min-width: auto !important;*/
        }

    #send_Btn.PanelButton_Div .BtnLayer2.DarkBtn_OnLightBG_Layer2 {
        width: auto !important;
    }
}

/*#endregion ChatRoom*/



/*#region ToggleSwitch*/

.myToggleSwitch_Div {
    padding: 12px;
    display: flex;
    flex-direction: initial;
    align-items: center;
    gap: 16px;
}

.mySwitch {
    position: relative;
    display: inline-block;
    width: 54px;
    height: 22px;
    border-radius: 50px;
    padding: 6px !important;
}

    .mySwitch .mySwitchInput {
        opacity: 0;
        width: 0;
        height: 0;
    }

.mySwitchSlider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50px;
}

    .mySwitchSlider:before {
        position: absolute;
        content: "";
        height: 12px;
        width: 12px;
        left: 6px;
        top: 50%;
        transform: translateY(-50%);
        -webkit-transition: .4s;
        transition: .4s;
        border-radius: 50px;
        box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
        background: var(--DokmeGholombe_Daruni_Color);
    }

.mySwitchInput:checked + .mySwitchSlider,
.mySwitchInput:focus + .mySwitchSlider {
}

    .mySwitchInput:checked + .mySwitchSlider:before {
        -webkit-transform: translateY(-50%) translateX(26px);
        -ms-transform: translateY(-50%) translateX(26px);
        transform: translateY(-50%) translateX(26px);
        background: linear-gradient(180deg, rgba(255, 187, 0, 0.50) 0%, rgba(255, 187, 0, 0.41) 100%);
    }

/* Rounded sliders */
.mySwitchSlider.round {
    border-radius: 34px;
}

    .mySwitchSlider.round:before {
        border-radius: 50%;
    }

.ToggleSwitchTxt {
}

@media screen and (max-width: 767px) {

    .myToggleSwitch_Div {
        gap: 10px;
    }
}

/*#endregion ToggleSwitch*/


/*#region PriceSlider*/

.slider-labels {
    display: grid;
    width: 100%;
    gap: 2px;
    align-items: center;
}

.sliderFTvalue {
    display: grid;
    gap: 6px;
}

.slider-value,
.slider-value * {
    font-size: 12px;
    color: var(--FieldTitle_Color);
    margin: auto;
}

input[type="range"].PriceSlider {
    width: 100%;
    appearance: none;
    background: var(--Gray_Color);
    height: 6px;
    border-radius: 5px;
    outline: none;
}

    input[type="range"].PriceSlider::-webkit-slider-thumb {
        appearance: none;
        width: 20px;
        height: 20px;
        background: var(--projectMainAccent_BGColor);
        border-radius: 50%;
        cursor: pointer;
        border: 2px solid var(--projectMainAccent_Color);
        -webkit-box-shadow: var(--AnyButton_Up_Shadow);
        -moz-box-shadow: var(--AnyButton_Up_Shadow);
        box-shadow: var(--AnyButton_Up_Shadow);
    }

.MinMaxValues {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.slider-labels .MinMaxValue {
    font-size: 10px;
    color: var(--FieldContent_Color);
}

/*#endregion PriceSlider*/


/*#region arrowAnimation*/

.arrowAnimation {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translate(0, -50%) rotate(180deg);
    transform: rotate(180deg);
    animation-name: arrowAnimation_rtl;
    animation-duration: 2s;
    animation-iteration-count: infinite;
}

@keyframes arrowAnimation_rtl {
    from {
        right: 0;
    }

    to {
        right: 100%;
    }
}


@media screen and (max-width: 767px) {

    .arrowAnimation {
        top: 0;
        right: initial;
        left: 50%;
        transform: translate(-50%) rotate(90deg);
        animation-name: arrowAnimation_ttb;
        animation-duration: 1s;
    }

    @keyframes arrowAnimation_ttb {
        from {
            top: 0;
        }

        to {
            top: 100%;
        }
    }
}

/*#endregion arrowAnimation*/






/*#region tabulator_Table*/
.tabulator * {
    font-family: Avenir !important;
}

.tabulator {
    border: 1px solid var(--BackgroundColor_Color);
    background-color: var(--MainItems_Down_Shadow);
    /* margin: 12px;
    display: grid;*/
    display: flex;
    padding: 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    align-self: stretch;
    overflow-x: scroll;
    overflow-y: hidden;
    border-radius: 9px;
    /* Main Items _ Down */
    box-shadow: -8px -8px 10px 0px rgba(255, 255, 255, 0.80) inset, 8px 8px 10px 0px rgba(214, 214, 225, 0.35) inset;
    position: relative;
    justify-self: center;
    max-width: 100%;
    width: fit-content;
    margin: auto;
}

    .tabulator .tabulator-header .tabulator-header-contents {
        overflow: initial;
    }

    /*.tabulator .tabulator-header .tabulator-header-contents .tabulator-headers,*/
    .tabulator .tabulator-header {
        background-color: transparent;
        border: 1px solid var(--BackgroundColor_Color);
        border-radius: 9px;
        box-shadow: var(--AnyButton_Up_Shadow);
        /*        overflow-x: visible;
        overflow-y: hidden;*/
        width: auto;
        min-height: 80px;
        margin: auto;
    }

    /*        .tabulator .tabulator-header,
        .tabulator .tabulator-table {
            min-width: 100%;
        }*/

    .tabulator .tabulator-tableholder {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        border-radius: 9px;
        /* border: 1px solid var(--FieldBorder_Color);*/
        width: auto;
        /*        overflow-x: visible;
        overflow-y: hidden;*/
        overflow: initial;
        width: fit-content;
        margin: auto;
    }

    .tabulator-header,
    .tabulator.tabulator-rtl .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title,
    .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {
        background-color: var(--BackgroundColor_Dark_Color);
        color: white;
        font-size: 14px;
        line-height: 18px;
        text-align: right !important;
    }

    /*
   تنظیم box-sizing برای تمام سرستون‌ها و سلول‌های Tabulator
   برای اطمینان از محاسبه یکسان عرض
*/
    .tabulator .tabulator-header .tabulator-col,
    .tabulator .tabulator-table .tabulator-row .tabulator-cell {
        box-sizing: border-box !important;
    }

/* سرستون */
.tabulator-col[tabulator-field="accordion"],
.tabulator-col[tabulator-field="imageUrl"],
.tabulator-col[tabulator-field="more"],
.tabulator-col[tabulator-field="id"] {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
}

/*  سلول‌های داده در آن ستون (اختیاری، معمولاً عرض سرستون کافی است) */
.tabulator-cell[tabulator-field="accordion"],
.tabulator-cell[tabulator-field="imageUrl"],
.tabulator-cell[tabulator-field="more"],
.tabulator-cell[tabulator-field="id"] {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
}


@media (hover: hover) and (pointer: fine) {
    .tabulator-row.tabulator-selectable:hover {
        background-color: var(--bs-warning-bg-subtle);
        background-color: #fff3cd;
        cursor: pointer !important;
    }

        .tabulator-row.tabulator-selectable:hover * {
            cursor: pointer !important;
        }
}

.tabulator.tabulator-rtl .tabulator-header .tabulator-col:first-of-type {
    border-radius: 0 9px 9px 0;
}

.tabulator-row.tabulator-row-even {
    background-color: #f8f8f4;
}

.tabulator.tabulator-rtl .tabulator-header .tabulator-col:last-of-type {
    border-radius: 9px 0 0 9px;
}

.tabulator-row {
    font-size: 13px;
}

    .tabulator-row .tabulator-cell {
        text-align: center;
    }

.tabulator .tabulator-tableholder,
.tabulator .tabulator-header .tabulator-header-contents {
    direction: rtl
}


.tabulator .tabulator-header .tabulator-col .tabulator-col-content {
    display: grid;
    gap: 8px;
    align-content: space-between;
    padding: 0 !important;
}

.tabulator .tabulator-header .tabulator-col {
    padding: 10px 8px;
    width: auto !important;
}

    .tabulator .tabulator-header .tabulator-col,
    .tabulator .tabulator-header .tabulator-col .tabulator-col-content {
        background-color: var(--BackgroundColor_Dark_Color);
        height: 100%;
    }

.tabulator.tabulator-rtl .tabulator-header .tabulator-col {
    height: 78px !important;
    padding: 0;
    width: max-content !important;
    padding: 10px 8px;
}


.tabulator.tabulator-rtl .tabulator-header .tabulator-col,
.tabulator.tabulator-rtl .tabulator-row .tabulator-cell {
    border-left: 1px solid var(--BackgroundColor_Color);
    min-width: 70px !important;
}


.tabulator .tabulator-tableholder .tabulator-table {
    background-color: transparent;
    display: inline-block;
    border-radius: 9px;
    border: 1px solid var(--FieldBorder_Color);
}

.tabulator.tabulator-rtl .tabulator-header .tabulator-col:last-of-type {
    border-left: none;
}

.tabulator.tabulator-rtl .tabulator-row .tabulator-cell:first-of-type {
    border-right: 1px solid var(--BackgroundColor_Color);
}

.tabulator.tabulator-rtl .tabulator-row:first-of-type {
    border-radius: 9px 9px 0 0;
}

.tabulator.tabulator-rtl .tabulator-row:last-of-type {
    border-radius: 0 0 9px 9px;
}

.tabulator.tabulator-rtl .tabulator-row:only-of-type {
    border-radius: 9px;
}

.tabulator.tabulator-rtl .tabulator-row:first-of-type .tabulator-cell:first-of-type {
    border-radius: 0 9px 0 0;
}

.tabulator.tabulator-rtl .tabulator-row:last-of-type .tabulator-cell:first-of-type {
    border-radius: 0 0 9px 0;
}

.tabulator.tabulator-rtl .tabulator-row .tabulator-cell {
    color: var(--BackgroundColor_Dark_Color);
    align-content: center;
}

.tabulator.tabulator-rtl .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter {
    left: 0px;
    right: auto;
    height: fit-content;
}


.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    border: none !important;
    background-image: url('../../Image/Icons/arrow-up-white.svg');
    width: 12px;
    height: 18px;
    background-size: 12px;
    background-repeat: no-repeat;
    background-position: center;
}


.tabulator .tabulator-header .tabulator-col.tabulator-sortable[aria-sort=ascending] .tabulator-col-content .tabulator-col-sorter .tabulator-arrow {
    background-image: url('../../Image/Icons/arrow-down-white.svg');
}

.mySimple_Bootstrap_Table_Search .sort-icon {
    /*    background-image: url('../../Image/Icons/arrow-down-white.svg');
    width: 18px !important;
    background-size: 8px;
    height: 14px;
    background-position: center;
    background-repeat: no-repeat;*/
    color: white !important;
    font-size: 14px;
    width: 100%;
    justify-content: left;
    display: flex;
}

.tabulator-header-filter > *,
.tabulator-header-filter input {
    display: flex;
    height: 30px;
    min-width: 120px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 10px;
    border: 1.5px solid var(--FieldContent_Color) !important;
    background: var(--BackgroundColor_Color);
    padding: 4px;
    width: 100%;
    box-sizing: border-box;
    outline: none !important;
    gap: 10px;
}

.FieldInTable {
    display: flex;
    height: 30px;
    min-width: 120px;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 10px;
    border: 1px solid var(--FieldBorder_Color) !important;
    background: var(--White_Color);
    padding: 4px;
    width: 100%;
    box-sizing: border-box;
    box-shadow: var(--AnyButton_Up_Shadow) !important;
}

.AccordionHeader2 .FieldInTable,
th .FieldInTable {
    box-shadow: none !important;
}

.tabulator-header-filter input,
.FieldInTable {
    border: 1px solid var(--FieldBorder_Color) !important;
}

    .tabulator-header-filter input:focus,
    .FieldInTable:focus {
        cursor: auto !important;
        border: var(--Border_DokmeMenu_Up_AccentBorder) !important;
    }

    .tabulator-header-filter input.DatePickerInTablesHeader {
        background-image: url('../Image/Icons/Calendar_Gray.svg');
        background-size: 14px;
        background-repeat: no-repeat;
        background-position: 8px 6px;
        border: none !important;
    }


.tabulator .tabulator-header .tabulator-col .tabulator-header-filter {
    margin: 0;
    height: fit-content;
}

    .tabulator .tabulator-header .tabulator-col .tabulator-header-filter > span {
        padding: 0;
        background: transparent !important;
        border: none !important;
        display: flex;
        gap: 10px;
    }


    .tabulator .tabulator-header .tabulator-col .tabulator-header-filter span input[type=number] {
        background-color: var(--BackgroundColor_Color);
        height: 100%;
        max-width: 70px;
    }

.tabulator .tabulator-footer {
    position: sticky;
    bottom: 0;
    right: 0;
    z-index: 1; /* اطمینان از اینکه فوتر بالای محتوای جدول قرار بگیرد */

    display: flex;
    padding: 2px 0px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
    border-radius: 9px;
    background: var(--BackgroundColor_Color);
    /* Main Items _ Down */
    box-shadow: -8px -8px 10px 0px rgba(255, 255, 255, 0.80) inset, 8px 8px 10px 0px rgba(214, 214, 225, 0.35) inset;
    border: none;
}

    .tabulator .tabulator-footer .tabulator-footer-contents {
        display: flex;
        padding: 8px;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;
        direction: ltr;
    }

    .tabulator .tabulator-footer .tabulator-paginator {
        display: flex;
        flex: initial;
        /*direction: ltr;*/
        /*flex: 2;*/
    }

    .tabulator .tabulator-footer .tabulator-page-counter {
        /*flex: 1;*/
    }

    .tabulator .tabulator-footer .tabulator-page-size {
        display: flex;
        width: 82px;
        height: 30px;
        padding: 0px 10px 0px 4px;
        justify-content: space-between;
        align-items: center;
        border-radius: 18px;
        background: var(--BackgroundColor_Color);
        box-shadow: var(--AnyButton_Up_Shadow);
        border: none !important;
        outline: none !important;
        color: #7A7A7A;
        text-align: right;
        font-size: 14px;
        font-weight: 400;
        line-height: normal;
        margin: 0 0 0 50px;
        cursor: pointer;
    }

.tabulator.tabulator-rtl .tabulator-row .tabulator-cell[tabulator-field="progress"] {
    text-align: right !important;
}


/* جلوگیری از تغییر اندازه خودکار ستون‌ها */
.tabulator .tabulator-header .tabulator-col, .tabulator .tabulator-row .tabulator-cell {
    white-space: nowrap;
    /*overflow: hidden;
    text-overflow: ellipsis;*/
    overflow: visible;
    box-sizing: border-box !important;
}

/* اطمینان از اینکه سلول‌های بدنه عرض یکسانی با هدر دارند */
.tabulator .tabulator-row .tabulator-cell {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}


/* جلوگیری از تغییر خودکار اندازه ستون‌ها */
.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-row .tabulator-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box !important;
    min-width: 0 !important;
}

/* اطمینان از هماهنگی عرض هدر و بدنه */
.tabulator .tabulator-header .tabulator-col {
    flex: 1 1 auto !important;
    min-width: unset !important;
}

.tabulator .tabulator-row .tabulator-cell {
    flex: 1 1 auto !important;
}


/* جلوگیری از تغییر اندازه غیرمنتظره ستون‌ها */
.tabulator .tabulator-header .tabulator-col,
.tabulator .tabulator-row .tabulator-cell {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box !important;
    min-width: 80px !important;
}

/* اطمینان از هماهنگی عرض هدر و بدنه */
.tabulator .tabulator-header .tabulator-col {
    flex: 1 1 auto !important;
    min-width: unset !important;
}

.tabulator .tabulator-row .tabulator-cell {
    flex: 1 1 auto !important;
}

/* اصلاح چیدمان برای زبان فارسی */
.tabulator {
    direction: rtl !important;
}

    .tabulator .tabulator-footer .tabulator-pages {
        margin: 0 7px;
        display: flex;
        gap: 12px;
    }

    .tabulator .tabulator-footer .tabulator-page,
    .tabulator .tabulator-footer .tabulator-page:hover {
        cursor: pointer;
        display: flex;
        padding: 0 14px;
        height: 32px;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-self: center;
        gap: 10px;
        border-radius: 100px;
        border: 1px solid transparent;
        /*in background tarkibi az background-color va border-color ast*/
        background: linear-gradient(135deg, #333 27.33%, #1F1F1F 55.5%) padding-box, var(--DokmeGholombe_Sade_Down_Daruni_Color_Dark) border-box;
        box-shadow: var(--AnyButton_Up_Shadow);
        /*****text*****/
        color: #fff;
        text-align: center;
        font-size: 0;
        font-weight: 600;
    }

        .tabulator .tabulator-footer .tabulator-page:disabled {
            opacity: 0.7;
            cursor: not-allowed !important;
        }

@media (hover: hover) and (pointer: fine) {
    .tabulator .tabulator-footer .tabulator-page:not(disabled):hover {
        /*in background tarkibi az background-color va border-color ast*/
        background: linear-gradient(135deg, #333 27.33%, #1F1F1F 55.5%) padding-box, var(--DokmeGholombe_Sade_Down_Daruni_Color_Dark) border-box;
    }

    .tabulator .tabulator-header .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {
        background-color: var(--BackgroundColor_Dark_Color);
        cursor: pointer
    }
}

.tabulator .tabulator-footer .tabulator-pages .tabulator-page,
.tabulator .tabulator-footer .tabulator-pages .tabulator-page:hover {
    padding: 0;
    margin: 0;
    width: 32px;
    /*in background tarkibi az background-color va border-color ast*/
    background: linear-gradient(135deg, #FFF 27.33%, #E8E8E8 55.5%) padding-box, var(--DokmeGholombe_Daruni_Color) border-box;
    box-shadow: var(--AnyButton_Up_Shadow);
    /*****text*****/
    color: #000;
    font-size: 14px;
}


    .tabulator .tabulator-footer .tabulator-pages .tabulator-page.active,
    .tabulator .tabulator-footer .tabulator-pages .tabulator-page.active:hover {
        /*in background tarkibi az background-color va border-color ast*/
        background: linear-gradient(180deg, #FED353 0%, #FB0 100%) padding-box, var(--PressedTab_AccentLinear_Border_Color) border-box;
        /* Any Button _ Down 
            box-shadow: -1.667px -1.667px 1.667px 0px rgba(255, 255, 255, 0.70) inset, 2.5px 2.5px 1.667px 0px rgba(174, 174, 192, 0.20) inset;*/
        box-shadow: -0.667px -0.667px 1.667px 0px rgba(255, 255, 255, 0.70) inset, 1.667px 1.667px 1.667px 0px rgba(174, 174, 192, 0.20) inset;
    }


.tabulator .tabulator-footer .tabulator-page[data-page="next"],
.tabulator .tabulator-footer .tabulator-page[data-page="next"]:hover,
.tabulator .tabulator-footer .tabulator-page[data-page="prev"],
.tabulator .tabulator-footer .tabulator-page[data-page="prev"]:hover {
    padding: 0;
    width: 32px;
    text-indent: -9999px; /* مخفی کردن نوشته */
    overflow: hidden;
}

    .tabulator .tabulator-footer .tabulator-page[data-page="next"],
    .tabulator .tabulator-footer .tabulator-page[data-page="next"]:hover {
        /* ترکیب رنگ پس‌زمینه، بورد و عکس */
        background: url('../Image/Icons/LeftArrowPagination.svg') center/10px 14px no-repeat, /* آیکون */
        linear-gradient(135deg, #333 27.33%, #1F1F1F 55.5%) padding-box, /* رنگ پس‌زمینه */
        var(--DokmeGholombe_Sade_Down_Daruni_Color_Dark) border-box; /* رنگ بورد */
    }

    .tabulator .tabulator-footer .tabulator-page[data-page="prev"],
    .tabulator .tabulator-footer .tabulator-page[data-page="prev"]:hover {
        /* ترکیب رنگ پس‌زمینه، بورد و عکس */
        background: url('../Image/Icons/RightArrowPagination.svg') center/10px 14px no-repeat, /* آیکون */
        linear-gradient(135deg, #333 27.33%, #1F1F1F 55.5%) padding-box, /* رنگ پس‌زمینه */
        var(--DokmeGholombe_Sade_Down_Daruni_Color_Dark) border-box; /* رنگ بورد */
    }

.tabulator .tabulator-footer .tabulator-page[data-page="first"],
.tabulator .tabulator-footer .tabulator-page[data-page="last"] {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 8px;
}

    .tabulator .tabulator-footer .tabulator-page[data-page="first"]::before,
    .tabulator .tabulator-footer .tabulator-page[data-page="last"]::before {
        font-size: 12px;
        display: contents;
    }

    .tabulator .tabulator-footer .tabulator-page[data-page="first"]::before,
    :lang(fa) .tabulator .tabulator-footer .tabulator-page[data-page="first"]::before {
        content: "اولین";
    }

    .tabulator .tabulator-footer .tabulator-page[data-page="last"]::before,
    :lang(fa) .tabulator .tabulator-footer .tabulator-page[data-page="last"]::before {
        content: "آخرین";
    }
/* --- بازنویسی برای زبان انگلیسی --- */
:lang(en) .tabulator .tabulator-footer .tabulator-page[data-page="first"]::before {
    content: "First";
}

:lang(en) .tabulator .tabulator-footer .tabulator-page[data-page="last"]::before {
    content: "Last";
}
/* --- بازنویسی برای زبان عربی --- */
:lang(ar) .tabulator .tabulator-footer .tabulator-page[data-page="first"]::before {
    content: "الأول";
}

:lang(ar) .tabulator .tabulator-footer .tabulator-page[data-page="last"]::before {
    content: "آخر";
}

.tabulator .tabulator-footer .tabulator-paginator > label {
    font-size: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 8px;
}

    .tabulator .tabulator-footer .tabulator-paginator > label::before,
    :lang(fa) .tabulator .tabulator-footer .tabulator-paginator > label::before {
        font-size: 12px;
        content: "نمایش ردیف در هر صفحه :";
    }
/* --- بازنویسی برای زبان انگلیسی --- */
:lang(en) .tabulator .tabulator-footer .tabulator-paginator > label::before {
    font-size: 12px;
    content: "Show rows per page :";
}
/* --- بازنویسی برای زبان عربی --- */
:lang(ar) .tabulator .tabulator-footer .tabulator-paginator > label::before {
    font-size: 12px;
    content: "إظهار الصفوف لكل صفحة :";
}

.tabulator .tabulator-footer .tabulator-page-counter > span {
    display: flex;
    gap: 4px;
    padding: 0 8px;
}

    .tabulator .tabulator-footer .tabulator-page-counter > span span:nth-of-type(1),
    .tabulator .tabulator-footer .tabulator-page-counter > span span:nth-of-type(3),
    .tabulator .tabulator-footer .tabulator-page-counter > span span:nth-of-type(5) {
        font-size: 0;
    }

        /* --- استایل پیش‌فرض برای فارسی --- */
        .tabulator .tabulator-footer .tabulator-page-counter > span span:nth-of-type(1):before,
        :lang(fa) .tabulator .tabulator-footer .tabulator-page-counter > span span:nth-of-type(1):before {
            font-size: 12px;
            content: "ردیف های";
        }

        .tabulator .tabulator-footer .tabulator-page-counter > span span:nth-of-type(3):before,
        :lang(fa) .tabulator .tabulator-footer .tabulator-page-counter > span span:nth-of-type(3):before {
            font-size: 12px;
            content: "از";
        }

        .tabulator .tabulator-footer .tabulator-page-counter > span span:nth-of-type(5):before,
        :lang(fa) .tabulator .tabulator-footer .tabulator-page-counter > span span:nth-of-type(5):before {
            font-size: 12px;
            content: "ردیف";
        }

/* --- بازنویسی برای زبان انگلیسی --- */
:lang(en) .tabulator .tabulator-footer .tabulator-page-counter > span span:nth-of-type(1):before {
    content: "Showing";
}

:lang(en) .tabulator .tabulator-footer .tabulator-page-counter > span span:nth-of-type(3):before {
    content: "of";
}

:lang(en) .tabulator .tabulator-footer .tabulator-page-counter > span span:nth-of-type(5):before {
    content: "rows";
}

/* --- بازنویسی برای زبان عربی --- */
:lang(ar) .tabulator .tabulator-footer .tabulator-page-counter > span span:nth-of-type(1):before {
    content: "عرض";
}

:lang(ar) .tabulator .tabulator-footer .tabulator-page-counter > span span:nth-of-type(3):before {
    content: "من";
}

:lang(ar) .tabulator .tabulator-footer .tabulator-page-counter > span span:nth-of-type(5):before {
    content: "صفوف";
}

.tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder {
    position: relative;
    white-space: nowrap;
    height: fit-content;
}

@media screen and (max-width: 767px) {

    .tabulator .tabulator-footer .tabulator-footer-contents {
        display: grid;
        gap: 10px;
        justify-content: center;
    }

    .tabulator .tabulator-footer .tabulator-paginator > label {
        display: none;
    }

    .tabulator .tabulator-footer .tabulator-page-counter {
        display: flex;
        justify-content: center;
    }
}

@media screen and (max-width: 400px) {
    .tabulator .tabulator-footer .tabulator-page[data-page="first"], .tabulator .tabulator-footer .tabulator-page[data-page="last"] {
        display: none;
    }
}

.table-wrapper {
    position: relative;
    width: 100%;
}

.fixed-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    background: white;
    text-align: center;
    font-weight: bold;
    padding: 10px;
    border-top: 2px solid #ddd;
    width: 100%;
    z-index: 100;
}

.TripleBtnsInTable_Div {
    display: flex;
    padding: 0px 12px;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex: 1 0 0;
    align-self: stretch;
    /*width: fit-content;*/
}

.TripleBtnsInTable_Btn_Layer1 {
    border-radius: 50px;
    background: var(--DokmeGholombe_Biruni_Color);
    padding: 2px;
    /*baraye fix kardane sayehaaye dokmeha be khosus delete va ...*/
    width: fit-content;
    height: fit-content;
}

    .TripleBtnsInTable_Btn_Layer1:hover,
    .TripleBtnsInTable_Btn_Layer1:active {
        background: var(--PressedTab_AccentLinear_Border_Color);
    }

.FormFields_AddBtn,
.FormFields_AddBtn > * {
    width: fit-content !important;
    max-width: fit-content !important;
}

    .FormFields_AddBtn:hover .PressedHover1.TripleBtnsInTable_Btn_Layer1,
    .removeRepeatableDiv_Div:hover .PressedHover1.TripleBtnsInTable_Btn_Layer1,
    .PressedHover1.TripleBtnsInTable_Btn_Layer1:hover,
    .PressedHover1.TripleBtnsInTable_Btn_Layer1:active,
    .hidden-checkbox:checked + .TripleBtnsInTable_Btn_Layer1 {
        background: linear-gradient(317deg, rgba(254, 211, 83, 0.50) 1.62%, rgba(255, 187, 0, 0.50)) 97.74%;
    }

.TripleBtnsInTable_Btn_Layer1 .TripleBtnsInTable_Btn_Layer2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-self: stretch;
    border-radius: 50px;
    border-radius: 50px;
    background: var(--White_Color);
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    width: 32px;
    height: 32px;
    color: var(--Gray_Color);
}


/*#region StepperButton*/

.StepperButton_Layer1 {
    border-radius: 50px;
    background: var(--DokmeGholombe_Biruni_Color);
    padding: 2px;
    /*baraye fix kardane sayehaaye dokmeha be khosus delete va ...*/
    width: fit-content;
    height: fit-content;
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
}

    .StepperButton_Layer1,
    .StepperButton_Layer1 * {
        cursor: default;
    }

        .StepperButton_Layer1.StepperButton_Later {
            border: 2px solid var(--Gray_OnDark_Icons_Color);
            padding: 1px;
        }

        .StepperButton_Layer1.StepperButton_Active {
            background: var(--LighterThanMainAccent_Color);
            padding: 3px;
        }

        .StepperButton_Layer1.StepperButton_Passed {
            background: var(--DokmeGholombe_Biruni_Color);
            border: 2px solid var(--LighterThanMainAccent_Color);
            padding: 1px;
        }

        .StepperButton_Layer1 .StepperButton_Layer2 {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            align-self: stretch;
            border-radius: 50px;
            border-radius: 50px;
            background: var(--White_Color);
            box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
            width: 32px;
            height: 32px;
            color: var(--Gray_Color);
        }

        .StepperButton_Layer1.StepperButton_Active .StepperButton_Layer2 {
            background: var(--LighterThanMainAccent_Color);
            color: var(--White_Color);
        }

        .StepperButton_Layer1.StepperButton_Passed .StepperButton_Layer2 {
            background: var(--White_Color);
        }

/*#endregion StepperButton*/


.TripleBtnsInTable_GreenBtn_Layer1,
.TripleBtnsInTable_GreenBtn_Layer1:hover {
    background: linear-gradient(135deg, var(--LightGreen_Color) 0%, #FFF 100%) !important;
}

    .TripleBtnsInTable_GreenBtn_Layer1 .TripleBtnsInTable_GreenBtn_Layer2 {
        background: var(--LightGreen_Color) !important;
        box-shadow: 1px 1px 2px 0px rgba(255, 255, 255, 0.30) inset, -1px -1px 2px 0px rgba(23, 155, 11, 0.50) inset, -2px 2px 4px 0px rgba(179, 241, 174, 0.20), 2px -2px 4px 0px rgba(179, 241, 174, 0.20), -2px -2px 4px 0px rgba(255, 255, 255, 0.90), 2px 2px 5px 0px var(--GreenText_Color) !important;
    }

    .TripleBtnsInTable_GreenBtn_Layer1:hover .TripleBtnsInTable_GreenBtn_Layer2 {
        box-shadow: 1px 1px 2px 0px rgba(23, 155, 11, 0.30) inset, -1px -1px 2px 0px rgba(255, 255, 255, 0.50) inset, -2px 2px 4px 0px rgba(179, 241, 174, 0.20), 2px -2px 4px 0px rgba(179, 241, 174, 0.20), -2px -2px 4px 0px rgba(255, 255, 255, 0.90), 0px 0px 2px 0px var(--GreenText_Color) !important;
        background: linear-gradient(135deg, var(--GreenText_Color) 0.62%, var(--LightGreen_Color) 100.62%) !important;
    }

.FormFields_AddBtn:hover .TripleBtnsInTable_Btn_Layer1 .TripleBtnsInTable_Btn_Layer2,
.removeRepeatableDiv_Div:hover .TripleBtnsInTable_Btn_Layer1 .TripleBtnsInTable_Btn_Layer2,
.TripleBtnsInTable_Btn_Layer1:hover .TripleBtnsInTable_Btn_Layer2,
.TripleBtnsInTable_Btn_Layer1:active .TripleBtnsInTable_Btn_Layer2,
.StepperButton_Layer1.StepperButton_Active .StepperButton_Layer2,
.hidden-checkbox:checked + .TripleBtnsInTable_Btn_Layer1 .TripleBtnsInTable_Btn_Layer2 {
    background: var(--LighterThanMainAccent_Color);
    color: var(--White_Color);
}


.FormFields_AddBtn:hover .PressedHover1.TripleBtnsInTable_Btn_Layer1 .TripleBtnsInTable_Btn_Layer2,
.removeRepeatableDiv_Div:hover .PressedHover1.TripleBtnsInTable_Btn_Layer1 .TripleBtnsInTable_Btn_Layer2,
.PressedHover1.TripleBtnsInTable_Btn_Layer1:hover .TripleBtnsInTable_Btn_Layer2,
.PressedHover1.TripleBtnsInTable_Btn_Layer1:active .TripleBtnsInTable_Btn_Layer2,
.hidden-checkbox:checked + .TripleBtnsInTable_Btn_Layer1 .TripleBtnsInTable_Btn_Layer2 {
    box-shadow: var(--DokmeyeSade_Down_Shadow);
    color: var(--White_Color);
    font-weight: 900;
}

.TripleBtnsInTable_Btn_Layer1 .GrayIcon,
.StepperButton_Layer1 .GrayIcon {
    display: flex;
}

.FormFields_AddBtn:hover .TripleBtnsInTable_Btn_Layer1 .GrayIcon,
.removeRepeatableDiv_Div:hover .TripleBtnsInTable_Btn_Layer1 .GrayIcon,
.TripleBtnsInTable_Btn_Layer1:hover .GrayIcon,
.TripleBtnsInTable_Btn_Layer1:active .GrayIcon,
.StepperButton_Layer1.StepperButton_Active .GrayIcon,
.hidden-checkbox:checked + .TripleBtnsInTable_Btn_Layer1 .GrayIcon {
    display: none;
}

.TripleBtnsInTable_Btn_Layer1 .WhiteIcon,
.StepperButton_Layer1 .WhiteIcon {
    display: none;
}

.FormFields_AddBtn:hover .TripleBtnsInTable_Btn_Layer1 .WhiteIcon,
.removeRepeatableDiv_Div:hover .TripleBtnsInTable_Btn_Layer1 .WhiteIcon,
.TripleBtnsInTable_Btn_Layer1:hover .WhiteIcon,
.TripleBtnsInTable_Btn_Layer1:active .WhiteIcon,
.StepperButton_Layer1.StepperButton_Active .WhiteIcon,
.hidden-checkbox:checked + .TripleBtnsInTable_Btn_Layer1 .WhiteIcon {
    display: flex;
}

/* frozen col / fixed col / ستون فیکس */

.tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right {
    background: transparent;
    border: none;
}

.TodaysDateTime_TopOfTable {
    display: flex;
    width: 100%;
    padding: 8px 12px;
    justify-content: center;
    align-items: center;
    color: black;
    font-weight: 600;
    line-height: 130%; /* 18.2px */
}

.imgCol_inTable {
    width: 70px;
    height: auto;
}


.tabulator-header-filter input[list] {
    background-image: url('../Image/Icons/Arrow_Down_FieldColor.svg');
    background-repeat: no-repeat;
    background-size: 7px 3.5px;
    background-position: 9px 12px;
}

.accordion-content {
    background-color: var(--BackgroundColor_Color) !important;
    background-color: var(--bs-gray-200) !important;
    box-shadow: var(--SelectOption_Down_Shadow);
}

    .accordion-content,
    .accordion-content * {
        cursor: auto !important;
    }

/*#region Tabulator_DD*/

/* --- استایل کانتینر اصلی لیست (پاپ‌آپ) --- */
.tabulator-edit-list {
    background-color: #ffffff; /* پس‌زمینه سفید و تمیز */
    border: 1px solid var(--FieldBorder_Color); /* یک کادر خاکستری ملایم */
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow); /* سایه زیبا برای جدا شدن از صفحه */
    border-radius: 8px; /* گوشه‌های کاملاً گرد */
    overflow-y: auto; /* فعال کردن اسکرول در صورت زیاد بودن آیتم‌ها */
    max-height: 200px; /* تعیین حداکثر ارتفاع برای لیست */
    padding: 10px 10px;
    display: grid;
    gap: 6px;
}

/* --- استایل هر آیتم (پارامتر) در لیست --- */
.tabulator-edit-list-item {
    padding: 24px 36px; /* فاصله داخلی بیشتر برای راحتی کلیک */
    color: var(--DarkGray_Text_Color); /* رنگ متن تیره و خوانا */
    font-size: 12px; /* اندازه فونت کمی بزرگتر */
    cursor: pointer; /* تغییر نشانگر موس به حالت دست */
    /*border-bottom: 1px solid #f0f0f0;*/ /* خط جداکننده ظریف بین آیتم‌ها */
    transition: background-color 0.2s ease, color 0.2s ease; /* انیمیشن نرم برای تغییر رنگ */
    border-radius: 8px;
    font-weight: 100;
}

    /* حذف خط جداکننده از آخرین آیتم برای زیبایی بیشتر */
    .tabulator-edit-list-item:last-child {
        border-bottom: none;
    }

    /* --- استایل آیتم وقتی موس روی آن قرار می‌گیرد (Hover) --- */
    .tabulator-edit-list-item:hover {
        background: var(--projectMainAccent_BGColor) !important; /* پس‌زمینه آبی (یا رنگ دلخواه شما) */
        color: var(--BahmanBlack_Color) !important; /* متن سفید برای کنتراست */
        font-weight: 600;
    }

    /* --- استایل آیتمی که در حال حاضر انتخاب شده است (اختیاری) --- */
    /* این کلاس به آیتمی که مقدار فعلی فیلتر است اعمال می‌شود */
    .tabulator-edit-list-item[aria-selected="true"] {
        background: var(--projectMainAccent_BGColor) !important; /* یک پس‌زمینه آبی بسیار روشن */
        background: var(--projectMainAccent_BGColor) !important; /* یک پس‌زمینه آبی بسیار روشن */
        color: var(--BahmanBlack_Color) !important; /* رنگ متن آبی تیره‌تر */
        font-weight: 600; /* کمی ضخیم‌تر کردن فونت */
    }

/* --- استایل کادر جستجو (اگر از headerFilterLiveFilter استفاده کنید) --- */
.tabulator-edit-list-search input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
    margin-bottom: 5px;
}

/*#endregion Tabulator_DD*/


/*#endregion tabulator_Table*/


/*#region Simple_Bootstrap_Table*/

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
}

    .table-responsive .accordion-content-wrapper .table-responsive {
        max-width: fit-content;
    }

    .table-responsive .accordion-content-wrapper p {
        max-width: fit-content;
    }

.mySimple_Bootstrap_Table {
    background-color: transparent;
    overflow-x: scroll;
    overflow-y: visible;
    max-width: 100%;
    /*overflow-x: hidden;
    overflow-y: hidden;*/
    position: relative;
}

    .mySimple_Bootstrap_Table thead {
        background-color: transparent;
        border: none;
        height: 42px;
        box-shadow: var(--AnyButton_Up_Shadow);
        max-width: 100%;
        display: contents;
    }

        .mySimple_Bootstrap_Table thead tr {
            max-width: 100%;
            display: contents;
            height: fit-content;
        }

table.Yellow_theadTable thead th {
    background: var(--projectMainAccent_BGColor);
    color: var(--BahmanBlack_Color);
    font-size: 14px;
    font-weight: 600;
}

.mySimple_Bootstrap_Table thead th {
    height: 42px;
    background: var(--BackgroundColor_Dark_Color);
    color: var(--White_Color);
    font-size: 14px;
    font-weight: 600;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search thead th {
    vertical-align: baseline;
}

.mySimple_Bootstrap_Table thead th:first-of-type {
    border-radius: 0 9px 9px 0;
    border-radius: 0 9px 0 0;
}

.mySimple_Bootstrap_Table thead th:last-of-type {
    border-radius: 9px 0 0 9px;
    border-radius: 9px 0 0 0;
}

.mySimple_Bootstrap_Table th,
.mySimple_Bootstrap_Table td {
    text-align: center;
    vertical-align: middle; /* برای تراز عمودی بهتر */
    min-width: 140px !important;
}

    /*.mySimple_Bootstrap_Table thead tr th[scope=col]:first-of-type,
        .mySimple_Bootstrap_Table tbody tr th[scope=row]:first-of-type,*/
    .mySimple_Bootstrap_Table th[colName="number"] {
        width: 70px !important;
        min-width: 70px !important;
        max-width: 70px !important;
    }

.mySimple_Bootstrap_Table tbody {
    background-color: transparent;
    border-radius: 9px 0 0 9px;
    border: none;
    max-width: 100%;
    display: contents;
}

    .mySimple_Bootstrap_Table tbody tr {
        border: 1px solid var(--FieldBorder_Color);
        max-width: 100%;
        display: table-row;
    }

.accordion-body-row,
.accordion-body-row > td {
    background-color: var(--BackgroundColor_Color);
    /* background-color: var(--bs-gray-200);*/
    box-shadow: var(--LocationPin_Shadow_Daruni);
    box-shadow: var(--DashboardBoxShadow_Shadow);
    border: 1px solid var(--projectMainAccent_Color) !important;
}

/*        .mySimple_Bootstrap_Table tbody tr > * {
            border: 1px solid var(--FieldBorder_Color);
        }

        .mySimple_Bootstrap_Table tbody tr:first-of-type > th:first-of-type {
            border-top-right-radius: 9px;
        }

        .mySimple_Bootstrap_Table tbody tr:first-of-type > td:last-of-type {
            border-top-left-radius: 9px;
        }

        .mySimple_Bootstrap_Table tbody tr:last-of-type > th:first-of-type {
            border-bottom-right-radius: 9px;
        }

        .mySimple_Bootstrap_Table tbody tr:last-of-type > td:last-of-type {
            border-bottom-left-radius: 9px;
        }*/


/*#endregion mySimple_Bootstrap_Table*/


/*#region mySearchable_Table*/

/* استایل‌های اختصاصی برای ستون‌های مختلف */
.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-row-number {
    width: 70px !important;
    max-width: 70px !important;
    min-width: 70px !important;
    text-align: center;
}


.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-accordionToggle {
    width: 70px !important;
    max-width: 70px !important;
    min-width: 70px !important;
    text-align: center;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-defaultSelectionRadio {
    width: 70px !important;
    max-width: 70px !important;
    min-width: 70px !important;
    text-align: center;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-rowSelectorCheckbox {
    width: 170px !important;
    max-width: 170px !important;
    min-width: 170px !important;
    text-align: center;
}


.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-switch {
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-radio {
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-actions {
    width: 150px !important;
    text-align: center;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .pelak-complex-filter {
    min-width: 280px !important;
}

    .mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .pelak-complex-filter .FormFields_Pelak.edit-mode.header-filter-pelak {
        min-width: 280px !important;
    }

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .pelak-simple-filter {
    min-width: 280px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-rangeDate {
    min-width: 200px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-rangeTime {
    min-width: 200px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-rangeDateTime {
    min-width: 200px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-singleDate {
    min-width: 200px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-singleTime {
    min-width: 200px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-singleDateTime {
    min-width: 200px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-autocomplete {
    min-width: 230px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-autocomplete-multi {
    min-width: 230px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-text {
    min-width: 230px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-select {
    min-width: 230px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-fileUpload {
    min-width: 230px !important;
}

    .mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-fileUpload > div {
        display: grid !important;
        justify-content: center !important;
    }

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search tr.editing-existing-row .dt-col-fileUpload > div,
.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search tr.new-editing-row .dt-col-fileUpload > div {
    display: flex !important;
    justify-content: right !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-fileUpload .file-upload-name {
    max-width: 180px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-quantity {
    min-width: 230px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-number {
    min-width: 230px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-multi-checkbox {
    min-width: 230px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-image {
    width: 80px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-undefined {
    width: auto !important;
    min-width: auto !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-defaultSelectionRadio {
    width: 60px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-rowSelectorCheckbox {
    max-width: 170px !important;
    width: 170px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-accordionToggle {
    width: 60px !important;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-edit-group {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    justify-content: flex-start;
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .header-filter-multi-checkbox {
    cursor: pointer;
}

.PageNumber_Btn_Style, .Pagination_MainBtn_Style {
    border: none !important;
}

.my_pagination_container .Pagination_MainBtn_Style {
    background-color: transparent !important;
    padding: 0 !important;
}

.PageNumber_Dropdown {
    width: 80px;
}

    .PageNumber_Dropdown select {
        padding-right: 12px;
        background-size: 10px 7px !important;
        background-position: 8px center !important;
        font-size: 14px;
    }



.TripleBtnsInTable_Div .GrayIcon[alt="جزئیات"] {
    /*    content: url('../../Image/Icons/Edit_G.svg');
    width: 16px;
    height: 16px;*/
}

.TripleBtnsInTable_Div .WhiteIcon[alt="جزئیات"] {
    /*    content: url('../../Image/Icons/Edit_W.svg');
    width: 16px;
    height: 16px;*/
}

.mySimple_Bootstrap_Table.mySimple_Bootstrap_Table_Search .dt-col-switch .myToggleSwitch_Div,
.dt-col-switch .myToggleSwitch_Div {
    justify-content: center;
}


.add-row-btn-container {
    width: fit-content !important;
}

.PageNumber_Btn_Container .TripleBtnsInTable_Btn_Layer1,
.PageNumber_Btn_Container .TripleBtnsInTable_Btn_Layer1:hover {
    width: fit-content !important;
    height: fit-content !important;
}


/*.my_pagination_container,*/
.table-responsive + .my_pagination_container {
    margin: 0 !important;
}

@media screen and (max-width: 991px) {

    /*.table-responsive + .my_pagination_container > div,*/
    .my_pagination_container > div {
        width: 100% !important;
        text-align: center !important;
        justify-content: center;
        display: flex;
    }
}

@media screen and (max-width: 576px) {
    .my_pagination_container .Pagination_MainBtn_Style {
        display: none;
    }
}

/*#endregion mySearchable_Table*/


/*#region hintIcon */
.hint-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.hint-icon {
    width: 20px;
    height: 20px;
    background-color: #FCC700;
    opacity: 70%;
    color: black;
    text-align: center;
    line-height: 20px;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
    display: inline-block;
}

.hint-popup {
    position: absolute;
    bottom: 150%;
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(252, 199, 0);
    color: black;
    padding: 8px 12px;
    border-radius: 5px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s;
}

.hint-container:hover .hint-popup {
    opacity: 1;
    visibility: visible;
}

/* Optional: Add an arrow below the popup */
.hint-popup::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: rgba(0, 0, 0, 0.8) transparent transparent transparent;
}

/*#endregion hintIcon*/


/*#region myGuidSlider */

.myGuidSlider {
    width: 100%;
    height: 100%;
    position: relative;
}

    .myGuidSlider .slide {
        display: none;
        width: 100%;
        height: 100%;
        text-align: center;
        justify-content: center;
        gap: 40px;
    }

        .myGuidSlider .slide img {
            width: 100%;
            height: 250px;
            object-fit: cover;
        }

    .myGuidSlider .caption {
        padding: 15px;
        background: var(--White_Color);
        color: var(--BackgroundColor_Dark_Color);
        font-size: 18px;
    }

    .myGuidSlider .active {
        display: grid;
    }

    .myGuidSlider .controls {
        position: absolute;
        top: 45%;
        width: 100%;
        display: flex;
        justify-content: space-between;
        transform: translateY(-50%);
    }

/*#endregion myGuidSlider*/

/*#region AdminDesktop_SideNav*/

/*#region generalStyles_SideNav*/

.mySideNavbar {
    width: var(--closedMenu_Width);
    color: white;
    height: 100vh;
    transition: width 0.3s ease, padding 0.3s ease;
    overflow: hidden;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
    border-radius: 25px 0px 0px 25px;
    background: var(--BackgroundColor_Dark_Color);
    box-shadow: var(--SideAdminNav_Shadow);
    display: flex;
    padding: 16px; /* پدینگ در حالت بسته */
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    /*gap: 18px;*/
}


.mySideNavbar_TopDiv {
    border-bottom: 1px solid var(--Gray_Color);
    width: 100%;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

/* --- حذف کامل استایل‌های :hover و .hover-opened برای باز شدن --- */
.mySideNavbar_TopLogo {
    display: flex;
    width: 100%;
    padding: 16px 0px;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.mySideNavbar_TopLogoImg {
    display: none; /* پیش‌فرض مخفی */
    width: 134px;
    height: 33.2px;
    flex-shrink: 0;
}

.mySideNavbar_TopLogoImg2 {
    display: flex; /* پیش‌فرض نمایش */
    width: 33.2px;
    height: 33.2px;
    flex-shrink: 0;
    display: none;
}

/* --- استایل دکمه تاگل و آیکون‌های داخل آن --- */
#toggleSidebar {
    margin-right: -5px;
}

.mySideNavbar.expanded #toggleSidebar {
    margin-right: 0;
}

.mySideNavbar #toggleSidebar .BtnLayer1 {
    padding: 3px !important;
    min-width: auto !important;
}

/* آیکون حالت بسته (فلش راست) */
#toggleSidebar .icon-open-state {
    display: flex; /* پیش‌فرض نمایش */
    /* اندازه از HTML: img_18 img_xs_14 */
    transform: rotate(180deg);
}
/* آیکون حالت باز (فلش چپ) */
#toggleSidebar .icon-close-state {
    display: none; /* پیش‌فرض مخفی */
    /* اندازه از HTML: img_18 img_xs_14 */
}
/* وقتی منو باز است، آیکون‌ها جابجا می‌شوند */
.mySideNavbar.expanded #toggleSidebar .icon-open-state {
    display: none;
}

.mySideNavbar.expanded #toggleSidebar .icon-close-state {
    display: flex;
}

/* آیتم‌های منو */
.myMenuItem {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    width: 100%;
    height: 58px;
    padding: 0;
    position: relative;
    justify-content: flex-start; /* در حالت بسته */
    border-radius: 18px;
    gap: 10px;
    overflow: hidden;
}


.mySideNavbar.expanded .myMenuItem.myMenuProfile {
    padding: 10px;
    box-shadow: var(--DokmeyeSade_Down_Dark_Shadow);
    background-color: rgba(0,0,0,0.1);
    height: auto;
    cursor: auto !important;
}


.myMenuItem_Icon {
    width: 30px;
    height: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: width 0.3s ease, height 0.3s ease;
    flex-shrink: 0;
}

.mySideNavbar .myMenuProfile_Image,
.mySideNavbar .myMenuProfile_Image img {
    width: 28px;
    height: 28px;
}

.myMenuItem .myMenuItem_Text {
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease 0.1s, visibility 0.2s ease 0.1s;
    color: var(--BackgroundColor_Color);
}

.myMenuItem.myMenuProfile .myMenuItem_Text {
    white-space: normal;
}
/* زیرمنو */
.mySideNav_Submenu {
    display: none;
    flex-direction: column;
    width: 100%;
    padding-right: 10px;
    box-sizing: border-box;
}

.mySideNav_SubmenuItem {
    /* استایل‌های قبلی */
    display: flex;
    align-items: center;
    gap: 10px;
    height: 58px;
    cursor: pointer;
    padding: 0 10px;
    border-radius: 12px;
    transition: background-color 0.2s ease;
}

    .mySideNav_SubmenuItem .mySideNav_Submenu_Icon {
        display: none;
    }

.mySideNav_Submenu .myMenuItem_Text {
    color: var(--BackgroundColor_Color);
    opacity: 1;
    visibility: visible;
}

.mySideNav_SubmenuItem.active .myMenuItem_Text,
.mySideNav_SubmenuItem:hover .myMenuItem_Text {
    font-weight: 900;
    color: var(--projectMainAccent_Color);
}

/* آیکون فلش زیرمنو */
.mySideNav_Icon {
    margin-left: auto;
    opacity: 0;
    visibility: hidden;
    transition: transform 0.3s ease, opacity 0.2s ease 0.1s, visibility 0.2s ease 0.1s;
    display: flex;
    align-items: center;
}

/* پروفایل باکس */
.mySideNavbar .mySideNavbar_ProfileBox {
    display: flex;
    width: 100%;
    padding: 5px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 18px;
    background: var(--BackgroundColor_Dark_Color);
    box-shadow: var(--DokmeyeSade_Down_Dark_Shadow);
    height: auto;
    aspect-ratio: 1/1;
    transition: all 0.3s ease;
    overflow: hidden;
    flex-shrink: 0;
}

.mySideNavbar .mySideNavbar_ProfileIcon {
    width: 32px;
    height: 32px;
    transition: width 0.3s ease, height 0.3s ease;
    flex-shrink: 0;
}

.mySideNavbar .mySideNavbar_ProfileNameDiv {
    display: none;
    opacity: 0;
    transition: opacity 0.2s ease 0.1s;
    flex-direction: column;
    gap: 6px;
    align-items: flex-start;
}

    .mySideNavbar .mySideNavbar_ProfileNameDiv div {
        white-space: nowrap;
    }

/* --- استایل‌های حالت باز شده (فقط با .expanded) --- */
.mySideNavbar.expanded {
    width: var(--expandedMenu_Width);
    padding: 16px;
}

    .mySideNavbar.expanded .mySideNavbar_TopLogoImg {
        display: flex; /* نمایش لوگوی کامل */
    }

    .mySideNavbar.expanded .mySideNavbar_TopLogoImg2 {
        display: none; /* مخفی کردن لوگوی کوچک */
    }

    .mySideNavbar.expanded .myMenuItem {
        padding: 0 12px;
        justify-content: space-between; /* آیکون/متن و فلش جدا */
    }

    .mySideNavbar.expanded .myMenuItem_Icon,
    .mySideNavbar.expanded .myMenuProfile_Image,
    .mySideNavbar.expanded .myMenuProfile_Image img {
        width: 42px; /* آیکون بزرگتر */
        height: 42px;
    }

    .mySideNavbar.expanded .myMenuItem .myMenuItem_Text {
        opacity: 1; /* نمایش متن */
        visibility: visible;
        margin-right: 5px;
    }

    /* نمایش فلش زیرمنو فقط در حالت باز و برای آیتم‌های مربوطه */
    .mySideNavbar.expanded .myMenuItem.toggle-mySideNav_Submenu .mySideNav_Icon {
        opacity: 1;
        visibility: visible;
    }
    /* چرخش فلش زیرمنو وقتی فعال است */
    .mySideNavbar.expanded .myMenuItem.toggle-mySideNav_Submenu.active .mySideNav_Icon {
        transform: rotate(-180deg);
    }

    /* هاور آیتم‌ها و آیکون‌ها فقط در حالت باز */
    .mySideNavbar.expanded .myMenuItem:hover .myMenuItem_Text,
    .mySideNavbar.expanded .myMenuItem:active .myMenuItem_Text,
    .mySideNavbar.expanded .myMenuItem.active .myMenuItem_Text {
        color: var(--projectMainAccent_Color);
        font-weight: 900;
    }

    .mySideNavbar.expanded .myMenuItem:hover,
    .mySideNavbar.expanded .myMenuItem:active,
    .mySideNavbar.expanded .myMenuItem.active {
        box-shadow: var(--DokmeyeSade_Down_Dark_Shadow);
        background-color: rgba(0,0,0,0.1);
    }

        .mySideNavbar.expanded .myMenuItem:hover .MenuWhiteIcon {
            display: none;
        }

        .mySideNavbar.expanded .myMenuItem:hover .MenuYellowIcon {
            display: flex;
        }

    .mySideNavbar.expanded .myMenuItem.toggle-mySideNav_Submenu:hover .mySideNav_Icon .MenuWhiteIcon {
        display: none;
    }

    .mySideNavbar.expanded .myMenuItem.toggle-mySideNav_Submenu:hover .mySideNav_Icon .MenuYellowIcon {
        display: flex;
    }

    .mySideNavbar.expanded .myMenuItem.toggle-mySideNav_Submenu.active .mySideNav_Icon .MenuWhiteIcon {
        display: none;
    }

    .mySideNavbar.expanded .myMenuItem.toggle-mySideNav_Submenu.active .mySideNav_Icon .MenuYellowIcon {
        display: flex;
    }


    .mySideNavbar.expanded .mySideNavbar_ProfileBox {
        width: 100%;
        height: 92px;
        padding: 16px;
        justify-content: flex-start;
        aspect-ratio: unset;
        gap: 10px;
    }

    .mySideNavbar.expanded .mySideNavbar_ProfileIcon {
        width: 42px;
        height: 42px;
    }

    .mySideNavbar.expanded .mySideNavbar_ProfileNameDiv {
        display: flex; /* یا grid بسته به نیاز */
        opacity: 1;
    }

/* بخش پایینی و اسکرول (مثل قبل) */
.Bottom_Exit {
    margin-top: auto;
    width: 100%;
    padding-top: 16px;
    margin-top: 16px;
    border-top: 1px solid var(--Gray_Color);
}


.MenuItems_Div {
    max-height: 100%; /* مقدار واقعی، نه 100% */
    overflow-y: scroll;
    box-sizing: content-box;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

    .MenuItems_Div::-webkit-scrollbar {
        width: 0;
        height: 0;
        background: transparent;
    }

/* برای کل صفحه */
html, .MenuItems_Div {
    overflow: auto !important; /* یا scroll */
    scrollbar-width: none !important; /* برای فایرفاکس */
    -ms-overflow-style: none !important; /* برای IE و Edge قدیمی */
}

    html::-webkit-scrollbar {
        display: none !important; /* برای مرورگرهای WebKit کروم، سافاری */
    }


@media screen and (max-width: 767px) {
    /* موبایل: حالت بسته عرض صفر */
    .mySideNavbar:not(.expanded) { /* دقیق‌تر: فقط وقتی expanded نیست */
        width: 0;
        padding: 0;
        overflow: hidden;
        border-radius: 0;
    }
    /* استایل‌های .expanded عمومی برای حالت باز اعمال می‌شود */
    /* بازنویسی‌های خاص موبایل برای حالت باز */
    .mySideNavbar.expanded .mySideNavbar_ProfileBox {
        height: 62px;
        padding: 10px 14px;
    }

    .mySideNavbar.expanded .mySideNavbar_ProfileIcon {
        width: 32px;
        height: 32px;
    }
    /* ممکن است نیاز به تنظیم اندازه فونت و ... در موبایل باشد */
    /* .mySideNavbar.expanded .myMenuItem .myMenuItem_Text { font-size: var(--FontSize_xs12); } */
}

/* --- آیکون های اصلی منو (داخل myMenuItem_Icon) --- */

/* حالت پیش‌فرض (منو بسته یا باز، بدون هاور) */
.mySideNavbar .myMenuItem .myMenuItem_Icon .MenuWhiteIcon {
    display: flex; /* نمایش آیکون سفید */
}

.mySideNavbar .myMenuItem .myMenuItem_Icon .MenuYellowIcon {
    display: none; /* مخفی کردن آیکون زرد */
}

/* حالت هاور فقط وقتی منو باز است (.expanded) */
.mySideNavbar.expanded .myMenuItem:hover .myMenuItem_Icon .MenuWhiteIcon,
.mySideNavbar.expanded .myMenuItem:active .myMenuItem_Icon .MenuWhiteIcon,
.mySideNavbar.expanded .myMenuItem.active .myMenuItem_Icon .MenuWhiteIcon {
    display: none; /* مخفی کردن آیکون سفید در هاور */
}

.mySideNavbar.expanded .myMenuItem:hover .myMenuItem_Icon .MenuYellowIcon,
.mySideNavbar.expanded .myMenuItem:active .myMenuItem_Icon .MenuYellowIcon,
.mySideNavbar.expanded .myMenuItem.active .myMenuItem_Icon .MenuYellowIcon {
    display: flex; /* نمایش آیکون زرد در هاور */
}


/* --- آیکون های فلش زیرمنو (داخل mySideNav_Icon) --- */

/* حالت پیش‌فرض (منو بسته یا باز، بدون هاور، آیتم غیرفعال) */
.mySideNavbar .myMenuItem.toggle-mySideNav_Submenu .mySideNav_Icon .MenuWhiteIcon {
    display: flex; /* نمایش آیکون سفید */
}

.mySideNavbar .myMenuItem.toggle-mySideNav_Submenu .mySideNav_Icon .MenuYellowIcon {
    display: none; /* مخفی کردن آیکون زرد */
}

/* حالت هاور آیتم دارای زیرمنو (فقط وقتی منو باز است) */
.mySideNavbar.expanded .myMenuItem.toggle-mySideNav_Submenu:hover .mySideNav_Icon .MenuWhiteIcon,
.mySideNavbar.expanded .myMenuItem.toggle-mySideNav_Submenu:active .mySideNav_Icon .MenuWhiteIcon,
.mySideNavbar.expanded .myMenuItem.toggle-mySideNav_Submenu.active.mySideNav_Icon .MenuWhiteIcon {
    display: none;
}

.mySideNavbar.expanded .myMenuItem.toggle-mySideNav_Submenu:hover .mySideNav_Icon .MenuYellowIcon,
.mySideNavbar.expanded .myMenuItem.toggle-mySideNav_Submenu:active .mySideNav_Icon .MenuYellowIcon,
.mySideNavbar.expanded .myMenuItem.toggle-mySideNav_Submenu.active .mySideNav_Icon .MenuYellowIcon {
    display: flex;
}


/*#endregion generalStyles_SideNav*/

/*#region Push_SideNav*/

/*@media screen and (min-width: 768px) and (max-width: 1440px) {*/
/*@media screen and (min-width: 768px) and (max-width: 2000px) {*/
@media screen and (min-width: 768px) and (max-width: 2500px) {

    .RenderBody_Div.AdminDesktop_RenderBody_Div {
        display: flex;
    }

    .mySideNavbar {
        position: static !important;
        z-index: auto !important;
        top: auto !important;
        right: auto !important;
        flex-shrink: 0;
        overflow-x: hidden;
    }

        .mySideNavbar.expanded {
            width: 250px;
        }

    .RenderBody_ContentDiv {
        flex-grow: 1;
        overflow-y: auto;
    }

    body .RenderBody_Div.AdminDesktop_RenderBody_Div {
        position: fixed;
        left: 50%;
        transform: translate(-50%);
    }
}

/*@media screen and (min-width: 1441px) and (max-width: 2000px) {*/
@media screen and (min-width: 1441px) and (max-width: 2500px) {

    body .RenderBody_Div.AdminDesktop_RenderBody_Div {
        max-width: 2500px;
    }

        /*body .RenderBody_Div.AdminDesktop_RenderBody_Div .RenderBody_ContentDiv > *,*/
        body .RenderBody_Div.AdminDesktop_RenderBody_Div .RenderBody_ContentDiv > div.display_grid {
            width: 100%;
            max-width: 1900px;
            margin: 0 auto;
        }
}


/*#endregion Push_SideNav*/


/*#region myRejected_SideNav*/

/*.mySideNavbar {
    box-shadow: none !important;
    padding: 16px 16px 16px 0;
}

    .mySideNavbar .myMenuItem:hover .myMenuItem_Text {
        color: var(--FieldTitle_Color);
    }

    .mySideNavbar .myMenuItem:hover {
        background: var(--BackgroundColor_Color);
        border-radius: 0 60px 60px 0;
    }

        .mySideNavbar .myMenuItem:hover::before,
        .mySideNavbar .myMenuItem:hover::after {
            content: "";
            position: absolute;
            width: 40px;
            height: 80px;
            left: 0;
        }

        .mySideNavbar .myMenuItem:hover::before {
            top: -80px;
            border-bottom-left-radius: 80px;
            box-shadow: 0 40px 0 0 var(--BackgroundColor_Color);
        }

        .mySideNavbar .myMenuItem:hover::after {
            top: 58px;
            border-top-left-radius: 80px;
            box-shadow: 0 -40px 0 0 var(--BackgroundColor_Color);
        }

.mySideNav_Submenu {
    margin-top: 16px;
    position: relative;
    width: calc(100% - 16px);
    height: auto;
    background: var(--BackgroundColor_Color);
    padding: 20px;
    border-radius: 30px 0px 8px 8px;
    display: grid;
    place-items: center;
}

    .mySideNav_Submenu:before {
        content: "";
        position: absolute;
        top: -40px;
        right: 0;
        height: 40px;
        width: 40px;
        background: transparent;
        border-bottom-right-radius: 50%;
        box-shadow: 0 30px 0 0 var(--BackgroundColor_Color);
    }

.mySideNav_SubmenuItem.active .myMenuItem_Text,
.mySideNav_SubmenuItem:hover .myMenuItem_Text {
    color: var(--FieldTitle_Color);
}*/

/*#endregion myRejected_SideNav*/


/*#endregion AdminDesktop_SideNav*/


/*#region AdminDesktop_TopNav*/

.TopBackButton img {
    height: 16px;
    /*for back to left*/
    margin: -1px 0 0 -2px;
    /*for back to right*/
    margin: -1px -4px 0 -2px;
}

.TopBackButton:hover img,
.TopBackButton:active img {
    height: 14px;
}

.TopToggleMenuButton:hover img,
.TopToggleMenuButton:active img {
    height: 20px;
}

.TopToggleMenuButton_small:hover img,
.TopToggleMenuButton_small:active img {
    height: 18px;
}

@media screen and (max-width: 767px) {


    .TopBackButton img {
        height: 14px;
    }

    .TopBackButton:hover img,
    .TopBackButton:active img {
        height: 12px;
    }

    .TopToggleMenuButton:hover img,
    .TopToggleMenuButton:active img {
        height: 20px;
    }

    .TopToggleMenuButton_small:hover img,
    .TopToggleMenuButton_small:active img {
        height: 16px;
    }
}

/*#endregion AdminDesktop_TopNav*/


/*#region TopOfPage*/

.TopOfPageBox {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    padding: 24px 14px;
    padding: 26px 20px;
    align-items: flex-start;
    column-gap: 26px;
    row-gap: 24px;
    align-self: stretch;
    border-radius: 25px;
    background: var(--White_Color);
    box-shadow: var(--MainItems_Down_Shadow);
}

.TopOfPageBox2 {
    display: grid;
    padding: 18px 16px;
}

.TopOfPageBox3 {
    border: 3px solid var(--White_Color);
    background: none;
    box-shadow: none;
}

.TopOfPageBox_Item {
    display: flex;
    align-items: flex-start;
    align-self: stretch;
    flex: 1 0 0;
    white-space: nowrap;
    padding: 0px 10px;
    gap: 10px;
    /*min-width: 290px;*/
}

.TopOfPageBox2 .TopOfPageBox_Item {
    white-space: normal;
    flex-wrap: wrap;
}

.TopOfPageBox_ItemTitle,
.TopOfPageBox_ItemTitle *,
.TopOfPageBox_ItemContent,
.TopOfPageBox_ItemContent * {
    font-size: 14px;
    font-weight: 600;
    line-height: normal;
    display: flex;
    white-space: nowrap;
}

    .TopOfPageBox_ItemTitle,
    .TopOfPageBox_ItemTitle * {
        color: var(--FieldContent_Color);
    }

    .TopOfPageBox_ItemContent,
    .TopOfPageBox_ItemContent * {
        color: var(--BahmanBlack_Color);
    }


.TopOfPageBox2 .TopOfPageBox_ItemTitle,
.TopOfPageBox2 .TopOfPageBox_ItemContent {
    flex: 1;
}

@media screen and (max-width: 767px) {
    .TopOfPageBox_Item {
        justify-content: space-between;
    }

    .TopOfPageBox_ItemTitle,
    .TopOfPageBox_ItemTitle *,
    .TopOfPageBox_ItemContent,
    .TopOfPageBox_ItemContent * {
        font-size: 12px;
    }
}
/*#endregion TopOfPage*/





/*#region LargeImageText_Boxes*/

.LargeImageText_Boxes {
    display: flex;
    width: 100%;
    padding: 0px 20px;
    align-items: flex-start;
    align-content: flex-start;
    gap: 44px;
    flex-wrap: wrap;
    justify-content: center;
}

.LargeImageText_Box {
    display: flex;
    width: 402px;
    min-height: 320px;
    flex-direction: column;
    align-items: flex-start;
    flex-shrink: 0;
    border-radius: 36px;
    background: var(--BackgroundColor_Color);
    box-shadow: var(--MainItems_Up_Shadow);
    gap: 0;
}

.LargeImageText_Box_Image {
    width: 100%;
    height: 266px;
    border-radius: 36px;
    box-shadow: var(--MainItems_Up_Shadow);
    overflow: hidden;
}

    .LargeImageText_Box_Image img {
        width: 100%;
        height: 100%;
    }

.LargeImageText_Box_Text {
    width: 100%;
    padding: 14px 22px 14px 22px;
    display: flex;
    justify-content: space-between;
    min-height: 82px;
    min-height: 62px;
    align-items: center;
}


@media screen and (max-width: 767px) {
    .LargeImageText_Boxes {
        padding: 0;
    }

    .LargeImageText_Box {
        width: 100%;
        min-height: auto;
    }

    .LargeImageText_Box_Image {
        height: auto;
    }

    .LargeImageText_Box_Text {
        min-height: 52px;
    }
}


/*#endregion LargeImageText_Boxes*/


/*#region quantity_selector*/


.quantity-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    /*width: 100%;*/
}

    .quantity-selector .btn {
        border: none;
        background-color: transparent;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
        transition: background-color 0.2s ease, transform 0.1s ease, opacity 0.2s ease;
    }

        .quantity-selector .btn:active {
            transform: scale(0.95);
        }

    .quantity-selector .icon-btn {
    }

        .quantity-selector .icon-btn svg {
            stroke: #6c757d;
        }

        .quantity-selector .icon-btn:hover {
            background-color: #ced4da;
        }

    .quantity-selector .counter-controls {
        height: 100%;
        display: flex;
        gap: 8px;
        padding: 8px;
        align-items: center;
        flex: 1 0 0;
        min-width: 130px;
        justify-content: space-between;
        border-radius: 12px;
        background: linear-gradient(315deg, rgba(0, 0, 0, 0.60) 0%, rgba(255, 255, 255, 0.00) 100%), var(--BackgroundColor_Color);
        background: var(--White_Color);
        background-blend-mode: soft-light, normal;
        box-shadow: var(--AnyButton_Down_Shadow);
        width: 130px;
        direction: rtl !important;
    }

    .quantity-selector .arrow-btn {
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background-color: var(--BackgroundColor_Color);
        background: var(--White_Color);
        box-shadow: 0px 0px 0px 0.333px rgba(255, 255, 255, 0.20) inset;
        filter: drop-shadow(2.5px 2.5px 5px rgba(174, 174, 192, 0.40)) drop-shadow(-1.667px -1.667px 5px #FFF);
    }

        .quantity-selector .arrow-btn svg {
            stroke: #495057;
        }

        .quantity-selector .arrow-btn:hover {
            /*background: var(--projectMainAccent_BGColor);*/
            box-shadow: var(--AnyButton_Down_Shadow);
        }

    .quantity-selector .quantity-value {
        font-size: 18px;
        font-weight: 500;
        min-width: 30px;
        text-align: center;
        user-select: none;
        border: none;
        outline: none;
        background-color: transparent;
        /*        width: 100%;*/
        padding: 0;
        margin: 0;
    }

        .quantity-selector .quantity-value::-webkit-outer-spin-button,
        .quantity-selector .quantity-value::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }

        .quantity-selector .quantity-value[type=number] {
            -moz-appearance: textfield;
        }


    .quantity-selector .hidden {
        display: none !important;
    }

/*#endregion quantity_selector*/


/*#region slider*/
.slider-container {
    position: relative;
    width: 90%; /* Adjust width as needed */
    max-width: 1200px; /* Optional: Maximum width */
    margin: 30px auto;
    overflow: hidden; /* Crucial: Hides items outside the container */
    border-radius: 15px; /* Rounded corners like the example */
    background-color: #e9e9f5; /* Light background for the container */
    padding: 20px 0; /* Padding top/bottom */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    /* Prevent text selection during swipe */
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    direction: rtl;
}

.slider-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
    cursor: grab;
    touch-action: pan-y;
    -webkit-touch-callout: none;
}

    .slider-wrapper.dragging {
        cursor: grabbing;
    }

.slider-item {
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    margin: 0 10px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.08);
    text-align: center;
    pointer-events: none;
}

    .slider-item a, .slider-item button {
        pointer-events: auto;
    }

    .slider-item img {
        max-width: 100%;
        height: auto;
        display: block;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
        margin-bottom: 10px;
    }

.item-label {
    display: flex;
    justify-content: space-around;
    font-size: 0.9em;
    color: #555;
}

    .item-label p {
        margin: 0;
    }

.slider-item {
    width: calc(100% - 20px);
}

@media (min-width: 576px) {
    .slider-item {
        width: calc(100% / 2 - 20px);
    }
}

@media (min-width: 768px) {
    .slider-item {
        width: calc(100% / 3 - 20px);
    }
}

@media (min-width: 992px) {
    .slider-item {
        width: calc(100% / 4 - 20px);
    }
}

@media (min-width: 1200px) {
    .slider-item {
        width: calc(100% / 5 - 20px);
    }
}

.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 10px 12px;
    font-size: 18px;
    cursor: pointer;
    border-radius: 50%;
    z-index: 10;
    transition: background-color 0.3s ease;
    line-height: 1;
}

    .slider-btn:hover {
        background-color: rgba(0, 0, 0, 0.8);
    }

    .slider-btn:disabled {
        background-color: rgba(0, 0, 0, 0.2);
        cursor: not-allowed;
        opacity: 0.6;
    }

.slider-prev {
    right: 15px;
}
/* Visually Right Button (❯) */
.slider-next {
    left: 15px;
}
/* Visually Left Button (❮) */

/*#endregion slider*/





/*#region SimpleNavTab*/

.myTabsContainer {
    border-radius: 10px;
    /*overflow: hidden;*/ /* مهم برای گوشه‌های گرد */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin: 0 auto 20px auto; /* برای وسط چین کردن و فاصله پایین */
    background: linear-gradient(315deg, rgba(0, 0, 0, 0.60) 0%, rgba(255, 255, 255, 0.00) 100%), var(--BackgroundColor_Color);
    background: var(--White_Color);
    background-blend-mode: soft-light, normal;
    -webkit-box-shadow: var(--AnyButton_Down_Shadow);
    -moz-box-shadow: var(--AnyButton_Down_Shadow);
    box-shadow: var(--AnyButton_Down_Shadow);
    width: 100%;
}

.myTabsContainer2 {
    background: var(--BackgroundColor_Color);
    box-shadow: -8px -8px 10px 0px rgba(255, 255, 255, 0.80) inset, 8px 8px 10px 0px rgba(214, 214, 225, 0.35) inset;
}

.myTabHeader {
    display: flex;
    gap: 12px;
    padding: 10px;
    background: var(--BackgroundColor_Color);
    box-shadow: -8px -8px 10px 0px rgba(255, 255, 255, 0.80) inset, 8px 8px 10px 0px rgba(214, 214, 225, 0.35) inset;
    border-radius: 10px;
    overflow-x: scroll;
}

.myTabHeader2 {
    background: transparent;
    box-shadow: none;
}

.myTabLink {
    flex-grow: 1; /* برای اینکه تب ها فضای موجود را پر کنند، اگر تعداد کم باشد */
    flex: 1;
    text-align: center;
    padding: 12px 24px;
    border: none;
    background-color: transparent;
    color: #555; /* رنگ متن تب‌های غیرفعال */
    cursor: pointer;
    font-size: 15px;
    transition: background-color 0.3s, color 0.3s;
    outline: none;
    position: relative; /* برای خط جداکننده */
    border-radius: 8px;
    white-space: nowrap;
}

.myTabLink2 {
    flex-grow: initial;
    flex: initial;
}

.myTabLink_li {
    flex-grow: 1;
    flex: 1;
    width: 100%;
}

    .myTabLink_li .myTabLink {
        width: 100% !important;
        display: block;
        white-space: nowrap;
    }

.myTabLink.active {
    color: var(--BahmanBlack_Color);
    font-weight: 600;
    background: var(--White_Color);
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
}

.myTabContentArea {
    padding: 15px 20px;
    /* max-height: 80vh;
    overflow-y: scroll;*/
    background-color: var(--BackgroundColor_Color);
    border: 1px solid var(--White_Color);
    border-top: 0;
    border-radius: 10px;
}

.myTabContent {
    display: none;
    gap: 32px;
    gap: 48px;
    gap: 4px;
}

    .myTabContent.active {
        display: grid;
    }

@media screen and (max-width: 767px) {
    .myTabLink {
        padding: 9px 18px;
        white-space: nowrap;
    }
}

/*#endregion SimpleNavTab*/




/*#region SearchFiltering*/

.SearchFiltering_Div {
    padding: 0px 20px 20px;
    border-bottom: 1px solid var(--FieldBorder_Color);
}

@media screen and (max-width: 767px) {
    .SearchFiltering_Div {
        padding: 0px 0 20px;
    }
}

/*#endregion SearchFiltering*/




/*#region Dropdown_MultipleItems_AddItems*/


.MultipleItems_DropdownWrapper {
    /*margin-bottom: 30px;*/
}

.MultipleItems_DropdownContainer {
    position: relative;
    display: inline-block;
    width: 100%;
}

.MultipleItems_DropdownItemList {
    display: grid;
    /*gap: 14px;
    padding: 6px 0;*/
    height: auto;
    max-height: 300px;
    overflow-y: scroll;
}

.MultipleItems_DropdownContent .MultipleItems_DropdownItemList {
    max-height: auto;
    overflow-y: initial;
}

.custom-options .MultipleItems_DropdownItemList,
.plate-letter-options .MultipleItems_DropdownItemList,
.autocomplete-suggestions .MultipleItems_DropdownItemList,
.multi-checkbox-filter-popup .MultipleItems_DropdownItemList {
    max-height: initial !important;
}


.MultipleItems_DropdownItemList .RadioCheckDivStyle,
.MultipleItems_DropdownItemList .MultipleItems_DropdownContent .RadioCheckDivStyle,
.MultipleItems_DropdownItemList .RadioCheckDivStyle {
    min-height: 46px;
    border-bottom: 1px solid var(--NeoShadow_Color);
    padding: 6px 0;
    align-content: center;
}

    .MultipleItems_DropdownItemList .RadioCheckDivStyle:last-of-type,
    .MultipleItems_DropdownItemList .MultipleItems_DropdownContent .RadioCheckDivStyle:last-of-type,
    .MultipleItems_DropdownItemList .RadioCheckDivStyle:last-of-type {
        border: none;
    }

.MultipleItems_DropdownButton {
    cursor: pointer;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.MultipleItems_DropdownContent {
    display: none;
    position: absolute;
    background: var(--DokmeGholombe_Biruni_Color);
    background: var(--DokmeGholombe_Daruni_Color);
    background: var(--DokmeGholombe_Daruni_Color2);
    background: white !important;
    min-width: 250px;
    box-shadow: var(--DokmeGholombeUp_Biruni_Shadow);
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    z-index: 10;
    border-radius: 18px;
    padding: 10px;
    /*max-height: 300px;
    overflow-y: auto;*/
    width: 100%;
}

    .MultipleItems_DropdownContent .RadioCheckDivStyle {
        padding: 0 10px;
    }

.FieldInTable + .MultipleItems_DropdownContent {
    border-radius: 10px;
}

.MultipleItems_DropdownContent.show {
    display: block;
}


.MultipleItems_DropdownFooter {
    border-top: 1px solid var(--FieldBorder_Color);
    padding-top: 10px;
    margin-top: 10px;
    text-align: center;
}


.MultipleItems_DropdownContent {
    display: none;
    position: absolute;
    border: none;
    z-index: 100;
    margin-top: 4px;
}

.FieldInTable + .MultipleItems_DropdownContent {
    border: 1px solid var(--FieldBorder_Color);
}

.MultipleItems_DropdownContent[data-is-open="true"] {
    display: block; /* Or flex, etc., when open */
}

/* Optional: wrapper for better positioning of the dropdown relative to the button */
.custom-dropdown-wrapper {
    position: relative;
    display: inline-block; /* or block */
}


/*#endregion Dropdown_MultipleItems_AddItems*/


/*#region Dropdown_MultipleItems_AddItems_موقعیت‌دهی برای جلوگیری از اسکرول*/

/* موقعیت‌دهی برای جلوگیری از اسکرول */
.MultipleItems_DropdownContainer {
    position: relative;
}

.MultipleItems_DropdownContent {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: white;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* نمایش دراپ‌داون اصلی با کلاس .open */
.MultipleItems_DropdownWrapper.open .MultipleItems_DropdownContent {
    display: block;
    overflow-y: scroll;
}

/* برای دراپ‌داون سفارشی داخل مودال */
.custom-select-wrapper .custom-options {
    display: none;
}

.custom-select-wrapper.open .custom-options {
    display: block;
}
/*#endregion Dropdown_MultipleItems_AddItems_موقعیت‌دهی برای جلوگیری از اسکرول*/



/*#region magnifier*/
/* استایل‌های موجود شما */
.AnyButton_Up_Shadow {
    /* position: relative;  این از قبل در کلاس position-relative شما وجود دارد */
    /* overflow: hidden;  اگر می‌خواهید ذره‌بین از کادر تصویر بیرون نزند، این را فعال کنید */
}

.magnifier-lens {
    position: absolute; /* برای قرارگیری روی تصویر */
    border-radius: 50%; /* گرد کردن ذره‌بین */
    cursor: none; /* مخفی کردن نشانگر موس وقتی روی ذره‌بین است */
    display: none; /* در ابتدا مخفی باشد */
    pointer-events: none; /* اجازه می‌دهد رویدادهای موس به عناصر زیرین برسد */
    overflow: hidden; /* بخش‌های اضافی تصویر بزرگ‌شده را پنهان می‌کند */
    z-index: 10; /* بالاتر از نقاط کلیک‌پذیر قرار گیرد */
    box-shadow: 0 0 10px rgba(0,0,0,0.3); /* سایه برای زیبایی */
}


    .magnifier-lens.active {
        pointer-events: auto;
        cursor: crosshair;
    }

/*#endregion magnifier*/


/*#region pdfNameImage*/
.pdf-link {
    overflow: hidden;
    text-overflow: ellipsis;
}
/*#endregion pdfNameImage*/



/*#region AccordionGroup*/
.AccordionGroup, .AccordionGroup2 {
    background-color: transparent;
    border-radius: var(--FieldsBorder_Radius_Mobile) !important;
    -webkit-box-shadow: var(--MainItems_Up_Shadow);
    -moz-box-shadow: var(--MainItems_Up_Shadow);
    box-shadow: var(--MainItems_Up_Shadow);
    width: 100%;
}

.AccordionGroup {
    padding: 8px;
}

    .AccordionGroup .EditAccardion {
        display: none;
    }

    .AccordionGroup.active {
        -webkit-box-shadow: var(--MainItems_Down_Shadow);
        -moz-box-shadow: var(--MainItems_Down_Shadow);
        box-shadow: var(--MainItems_Down_Shadow);
    }

        .AccordionGroup.active .EditAccardion {
            display: flex;
        }

.Large_TableFields .FieldInTable {
    height: 42px;
}

.AccordionHeader, .AccordionHeader2 {
    padding: 12px 15px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* border-radius: 5px 5px 0 0; اگر overflow:hidden روی group نباشد، این لازم است */
    font-weight: bold;
    color: #495057;
    position: relative;
}

    .AccordionHeader *, .AccordionHeader2 * {
        cursor: pointer;
    }

.AccordionGroup .AccordionHeader .AccordionHeader_Title {
    font-size: 14px;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    width: 100%;
    padding-left: 40px;
}

    .AccordionGroup .AccordionHeader .AccordionHeader_Title * {
        width: 100%;
    }

.AccordionGroup.active .AccordionHeader .AccordionHeader_Title,
.AccordionGroup.active .AccordionHeader .AccordionHeader_Title * {
    font-weight: 600;
}

.AccordionContent, .AccordionContent2 {
    max-height: 0;
    overflow: hidden;
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 0; /* در حالت بسته پدینگ بالا و پایین صفر است */
    padding-bottom: 0;
    transition: max-height 0.35s ease-in-out, padding-top 0.35s ease-in-out, padding-bottom 0.35s ease-in-out;
    /* border-top: 1px solid #e9ecef; /* یک خط جداکننده ظریف */
}

.AccordionGroup.active .AccordionContent {
    padding-top: 12px;
    padding-bottom: 12px;
    display: grid;
    gap: 12px;
    max-height: max-content;
    position: relative;
    overflow-y: initial;
    overflow-x: hidden;
}

.AccordionIcon img {
    transition: transform 0.3s ease-in-out; /* انیمیشن روان برای چرخش */
    /* می‌توانید برای اطمینان از تراز عمودی مناسب، این را اضافه کنید: */
    vertical-align: middle;
}

.AccordionGroup.active .AccordionIcon img {
    transform: rotate(180deg); /* چرخش 180 درجه وقتی آکاردئون فعال (باز) است */
}

@media screen and (max-width: 767px) {
    .AccordionHeader, .AccordionHeader2 {
        padding: 3px 6px;
    }

    .AccordionGroup .AccordionHeader .AccordionHeader_Title {
    }
}
/*#endregion AccordionGroup*/



/*#region DragAndDrop*/

.DragAndDrop_Column {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}


.DragAndDrop_Items_Container {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 5px;
    display: grid;
    gap: 16px;
    overflow: visible;
}

.draggable_Items {
    cursor: grab;
    user-select: none;
    transition: opacity 0.2s ease-in-out, transform 0.1s ease-in-out;
}

    .draggable_Items.dragging {
        opacity: 0.6;
        cursor: grabbing;
        transform: scale(1.02);
    }

.AccordionContent.DragAndDrop_Target {
    /*border: 2px dashed transparent;*/ /* در حالت عادی بوردر نامرئی */
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.AccordionGroup.active .AccordionContent.DragAndDrop_Target {
    /*border-color: #adb5bd;*/ /* بوردر فقط وقتی آکاردئون باز است نمایان شود */
}

    .AccordionGroup.active .AccordionContent.DragAndDrop_Target.drag-over {
        background-color: #e9ecef;
        border-color: #007bff; /* بوردر در هنگام drag-over مشخص‌تر شود */
    }

.DragAndDrop_StaticFields {
    border-top: 1px solid var(--FieldBorder_Color);
    padding-top: 10px;
}

.dropped_Items_List {
    display: grid;
    gap: 12px;
}

.dropped_Item_Placeholder {
    padding: 8px 12px;
}

.draggable_Items_Title {
}

.draggable_Items_TitleNumber {
    border-radius: 100px;
    border: 1px solid var(--FieldContent_Color);
    aspect-ratio: 1/1;
    min-width: 22px;
    color: var(--FieldContent_Color);
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.draggable_Items_TitleText {
    color: var(--FieldContent_Color);
}

.draggable_Items_Details {
}

/*#endregion DragAndDrop*/




/*#region TimePicker*/

jdp-container .jdp-time-container .jdp-time {
    margin: 0 1rem;
    background-color: transparent;
}

jdp-container .jdp-year select, jdp-container .jdp-month select, jdp-container .jdp-time select {
    -webkit-appearance: none;
    -moz-appearance: none;
    background: none !important;
    background-color: transparent !important;
}

/*#endregion TimePicker*/



/*#region timespanPicker*/

.timespan-picker-popup {
    position: fixed; /* <<--- مهم است که fixed باشد */
    z-index: 1001;
    background-color: white;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    padding: 15px;
    display: none;
    font-family: inherit;
}

    .timespan-picker-popup.show {
        display: block;
    }

.timespan-picker-body {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    text-align: center;
}

.timespan-picker-col {
    display: flex;
    flex-direction: column;
}

    .timespan-picker-col label {
        font-size: 12px;
        color: var(--BackgroundColor_Dark_Color);
        margin-bottom: 8px;
    }

.timespan-picker-footer {
    margin-top: 20px;
}

.timespan-picker-confirm {
    box-sizing: border-box;
    font-size: 90%;
    border-radius: 5px;
    font-weight: 400;
    display: inline-block;
    text-align: center;
    color: #fff;
    cursor: pointer;
    background: var(--DokmeGholombe_Tar_Up_Biruni_Color_Dark);
    -webkit-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    -moz-box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    box-shadow: var(--DokmeGholombeUp_Daruni_Shadow);
    border-radius: var(--BtnsBorder_Radius);
    padding: 10px;
    width: 100%;
}

/* --- استایل‌های جدید برای دراپ‌داون سفارشی داخل پاپ‌آپ --- */
.timespan-picker-popup .custom-select-wrapper {
    position: relative;
    width: 75px; /* عرض هر ستون دراپ داون */
}

.timespan-picker-popup .original-select {
    display: none; /* select اصلی همیشه مخفی است */
}

.timespan-picker-popup .custom-select {
    position: relative;
}

.timespan-picker-popup .custom-select-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    background-color: #fff;
}

    .timespan-picker-popup .custom-select-trigger .dropdown-arrow {
        width: 10px;
        height: 10px;
        transition: transform 0.2s ease;
    }

.timespan-picker-popup .custom-select.open .custom-select-trigger .dropdown-arrow {
    transform: rotate(180deg);
}

.timespan-picker-popup .custom-options {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: white;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 4px 4px;
    z-index: 10;
    max-height: 150px; /* برای اسکرول شدن گزینه‌ها در صورت زیاد بودن */
    overflow-y: auto;
}

.timespan-picker-popup .custom-select.open .custom-options {
    display: block;
}

.timespan-picker-popup .custom-option {
    padding: 8px 10px;
    cursor: pointer;
    font-size: 14px;
}

    .timespan-picker-popup .custom-option:hover {
        background-color: #f0f0f0;
    }

/* می‌توانید از کلاس‌های خودتان هم استفاده کنید */
.timespan-picker-popup .myDropdown_SelectOptions {
    text-align: center;
}

@media screen and (max-width: 767px) {

    .timespan-picker-body {
        flex-wrap: wrap;
    }

    .timespan-picker-popup {
        width: 200px !important;
    }
}


/*#endregion timespanPicker*/


/*#region HorizontalTable*/

.myHorizontalTable {
    display: flex;
    gap: 10px;
    align-items: stretch; /* Makes labels and table area same height */
    max-width: 800px; /* Max width for the component */
    width: 100%;
    padding: 30px 0 20px 0;
}

.myHorizontalTable_Header {
    background-color: var(--BackgroundColor_Dark_Color);
    display: flex;
    flex-direction: column;
    gap: 0;
    width: auto;
    max-width: 154px;
    border-radius: 9px;
    border: 1px solid var(--FieldBorder_Color);
}


.myHorizontalTable_HeaderItem {
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    font-weight: 500;
    text-align: center;
    flex-grow: 1; /* Make them fill the height equally */
    white-space: nowrap;
}

    .myHorizontalTable_HeaderItem:first-child {
        flex-grow: 0; /* Don't let it grow beyond its content or set height */
        border-bottom: 1px solid var(--FieldBorder_Color);
    }

    .myHorizontalTable_HeaderItem:last-child {
        flex-grow: 0;
    }

.myHorizontalTable_Body {
    flex-grow: 1; /* Allows the table area to take available space */
    border-radius: 9px;
    border: 1px solid var(--FieldBorder_Color);
    padding: 0;
    /*box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);*/
    overflow-x: auto; /* Makes the table scrollable horizontally if needed */
}

.myHorizontalTable table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    text-align: center;
}

.myHorizontalTable thead {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    border-bottom: 1px solid var(--FieldBorder_Color);
}

.myHorizontalTable_HeaderItem,
.myHorizontalTable thead,
.myHorizontalTable tbody {
    height: 42px;
    text-align: center;
}

    .myHorizontalTable_HeaderItem,
    .myHorizontalTable tbody td {
        padding: 6px 12px;
    }

        .myHorizontalTable tbody td .FieldInTable {
            max-width: 150px;
            margin: auto;
        }


/*#endregion HorizontalTable*/


/*#region radioCard_div*/

.radioCard_container {
    display: flex;
    gap: 20px; /* فاصله بین کارت‌ها */
    flex-wrap: wrap; /* برای واکنش‌گرایی در صفحه‌های کوچک */
    justify-content: center;
    padding: 20px; /* اضافه شده برای فضای بیشتر در اطراف */
    font-family: sans-serif; /* فونت پیش‌فرض برای خوانایی */
}

.radioCard_div {
    /* این کلاس اگر استایل خاصی ندارد، می‌تواند حذف شود و input/label مستقیماً فرزند radioCard_container باشند */
}

/* مخفی کردن رادیو باتن اصلی */
.radioCard_hiddenRadio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none; /* برای اینکه کلیک روی آن اتفاقی نیفتد */
}

.radioCard {
    border: 2px solid var(--FieldBorder_Color); /* اضافه کردن مقدار پیش‌فرض برای متغیر CSS */
    padding: 10px 15px; /* کمی تغییر در پدینگ برای تطابق بهتر با ارتفاع */
    border-radius: 8px;
    text-align: right; /* برای متن فارسی */
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.3s;
    background-color: #fff;
    width: 100%; /* اگر می‌خواهید هر کارت تمام عرض radioCard_div را بگیرد */
    min-width: 250px; /* یک حداقل عرض برای خوانایی */
    height: 54px;
    display: flex;
    gap: 15px; /* کمی کاهش فاصله داخلی */
    align-items: center;
    box-sizing: border-box; /* برای اینکه padding و border در عرض و ارتفاع حساب شوند */
}

    .radioCard * {
        cursor: pointer !important;
    }

    .radioCard img {
        max-width: 32px; /* محدود کردن عرض تصویر */
        height: 32px; /* محدود کردن ارتفاع تصویر */
        object-fit: contain; /* یا cover، بسته به نوع تصویر */
        flex-shrink: 0; /* برای جلوگیری از کوچک شدن تصویر در فضای کم */
    }

    .radioCard span {
        color: var(--BackgroundColor_Dark_Color);
    }


.radioCard_hiddenRadio:checked + .radioCard {
    border-color: var(--projectMainAccent_Color);
    box-shadow: 0 0 8px rgba(var(--projectMainAccent_Color), 0.5);
}

.radioCard_hiddenRadio:focus + .radioCard {
    outline: 2px dashed var(--projectMainAccent_Color);
    outline-offset: 2px;
}

/*#endregion radioCard_div*/



/*#region QuillReachText*/

.editor-wrapper {
    width: 100%;
    max-width: 100%;
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
}

.ql-toolbar.ql-snow {
    background-color: var(--BackgroundColor_Color);
    background-color: var(--LightGray_Color);
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border: none;
    border-bottom: 1px solid #dee2e6;
    padding: 12px 8px;
    display: flex;
    flex-wrap: wrap;
    row-gap: 12px;
    column-gap: 12px;
    direction: ltr;
}

    .ql-toolbar.ql-snow .ql-formats {
        margin-right: 0;
    }

    .ql-container.ql-snow,
    .ql-toolbar.ql-snow,
    .ql-toolbar.ql-snow + .ql-container.ql-snow {
        border: none !important;
    }

.ql-editor {
    font-family: Avenir;
    min-height: 250px;
    font-size: 14px;
    line-height: 1.8;
    padding: 24px;
    color: var(--BahmanBlack_Color);
    direction: rtl;
    text-align: right; /* این استایل، حالت پیش‌فرض را تعیین می‌کند */
    /*max-height: 600px;*/
}

    .ql-editor.ql-blank::before {
        content: "متن خود را اینجا بنویسید...";
        color: #adb5bd;
        position: absolute;
        right: 24px;
        left: auto;
        pointer-events: none;
    }

:lang(fa) .ql-editor.ql-blank::before {
    content: "متن خود را اینجا بنویسید...";
}

/* --- بازنویسی برای زبان انگلیسی --- */
:lang(en) .ql-editor.ql-blank::before {
    content: "Write your text here...";
}
/* --- بازنویسی برای زبان عربی --- */
:lang(ar) .ql-editor.ql-blank::before {
    content: "اكتب نصك هنا...";
}

.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button,
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button,
.ql-snow.ql-toolbar button,
.ql-snow .ql-toolbar button,
.ql-snow.ql-toolbar .ql-picker-label,
.ql-snow .ql-toolbar .ql-picker-label,
.ql-snow.ql-toolbar .ql-picker-label,
.ql-snow .ql-toolbar .ql-picker-label,
.ql-snow.ql-toolbar .ql-picker-item,
.ql-snow .ql-toolbar .ql-picker-item,
.ql-snow.ql-toolbar .ql-picker-item,
.ql-snow .ql-toolbar .ql-picker-item {
    display: flex;
    justify-content: space-between;
    direction: ltr;
}

    .ql-snow.ql-toolbar button:hover, .ql-snow .ql-toolbar button:hover, .ql-snow.ql-toolbar button:focus, .ql-snow .ql-toolbar button:focus, .ql-snow.ql-toolbar button.ql-active, .ql-snow .ql-toolbar button.ql-active, .ql-snow.ql-toolbar .ql-picker-label:hover, .ql-snow .ql-toolbar .ql-picker-label:hover, .ql-snow.ql-toolbar .ql-picker-label.ql-active, .ql-snow .ql-toolbar .ql-picker-label.ql-active, .ql-snow.ql-toolbar .ql-picker-item:hover, .ql-snow .ql-toolbar .ql-picker-item:hover, .ql-snow.ql-toolbar .ql-picker-item.ql-selected, .ql-snow .ql-toolbar .ql-picker-item.ql-selected {
        color: var(--projectMainAccent_Color);
        display: flex;
        justify-content: space-between;
        direction: ltr;
    }

.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    border: none;
}

/*    .ql-toolbar.ql-snow .ql-snow .ql-picker.ql-header .ql-picker-label svg,
    .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label svg {
        display: none;
    }*/

/*#endregion QuillReachText*/





/*#region ProductsPages_Accardion*/

.productAccordionContainer {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    min-width: 100%;
    width: auto;
    display: grid;
}

    .productAccordionContainer .tab-content {
        padding: 20px 14px 36px;
    }

.productAccordion {
    background-color: var(--InputFeildBGcolor);
    border: 1px solid var(--InputFeildBordercolor);
    border-radius: var(--BtnFeildBorderRadius);
    padding: 12px;
    width: 100%;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    display: flex;
    justify-content: space-between;
    gap: 15px;
    /*overflow-x: scroll;*/
    padding: 10px 20px;
    cursor: auto;
}

    .productAccordion.DarkProductAccordion {
        background-color: var(--BackgroundColor_Dark_Color);
    }

.TableAccordion_FieldsContainer {
    display: flex;
    gap: 10px;
    justify-self: center;
}

.TableAccordion_Fields {
    display: grid !important;
    gap: 0;
    align-content: center;
    position: relative;
    padding: 0 10px;
}

    .TableAccordion_Fields.TableAccordion_InputFields {
        flex: 1;
    }

.AttTab .TableAccordion_Fields.TableAccordion_InputFields {
    flex: initial;
}

.AttTab.fade.in {
    display: grid;
}

.TableAccordion_Fields .myFeildLable {
    padding: 0 4px;
    font-size: 12px;
    text-align: right;
}

.TableAccordion_Fields .RadioCheckcontainer {
    white-space: nowrap;
    font-size: 12px;
}

.productPanel .RadioCheckcontainer {
    white-space: nowrap;
}

.DifferentRows_InnerProductPanel {
    width: 100%;
    display: flex !important;
    flex-direction: column;
    gap: 32px;
}

.TableAccordion_FieldsContainer .myFeildLable + * {
    min-width: 1px;
    width: 100%;
    height: 40px;
}

.TableAccordion_FieldsContainer .myFeildLable + div {
    border: none;
    padding: 2px 6px 4px 16px;
    text-align: right;
    min-width: fit-content;
}

    .TableAccordion_FieldsContainer .myFeildLable + input,
    .TableAccordion_FieldsContainer .myFeildLable + select,
    .TableAccordion_FieldsContainer .myFeildLable + div.AttachImageDiv,
    .TableAccordion_FieldsContainer div.AttachImageDiv,
    .TableAccordion_FieldsContainer .myFeildLable + div.dropdown_Btn {
        border: 1px solid var(--InputFeildBordercolor);
        border-radius: var(--BtnFeildBorderRadius);
        text-align: center;
        padding: 0 10px;
        max-width: 210px;
    }

    .TableAccordion_FieldsContainer .myFeildLable + select,
    .TableAccordion_FieldsContainer .myFeildLable + div.AttachImageDiv,
    .TableAccordion_FieldsContainer div.AttachImageDiv,
    .TableAccordion_FieldsContainer .myFeildLable + div.dropdown_Btn {
        text-align: right;
        background-color: white;
        min-width: 210px;
    }

    .TableAccordion_FieldsContainer .myFeildLable + div.dropdown_Btn {
        max-width: 300px;
        min-width: 300px;
        padding: 0;
    }

        .TableAccordion_FieldsContainer .myFeildLable + div.dropdown_Btn .SelectOptionDD {
            background-position: 5px center;
        }

    .TableAccordion_FieldsContainer .myFeildLable + div.AttachImageDiv,
    .TableAccordion_FieldsContainer div.AttachImageDiv {
        padding: 0 0 0 4px;
        display: flex;
        gap: 8px;
        justify-content: right;
        align-items: center;
    }

        .TableAccordion_FieldsContainer .myFeildLable + div.AttachImageDiv .Table_Img {
            max-height: 100%;
        }

.TableAccordion_FieldsContainer .myFeildLable.productAccordion_CenterAlign {
    justify-content: center;
}

.TableAccordion_FieldsContainer .myFeildLable + div.productAccordion_fieldInCenter {
    padding: 0 6px;
    justify-self: center;
    min-width: 45px;
}

    .TableAccordion_FieldsContainer .myFeildLable + div.productAccordion_fieldInCenter .checkmark {
        right: initial;
    }

.TableAccordion_FieldsContainer .RadioCheckDivStyle {
    display: flex;
    align-content: center;
    align-items: center;
}

.productPanel {
    background-color: var(--BackgroundColor_Color);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    border-radius: 0 0 var(--WideBoxBorderRadius) var(--WideBoxBorderRadius);
    border: 1px solid var(--InputFeildBordercolor);
    border-top: 0;
    overflow-y: scroll;
}

.productPanel_Inner {
    padding: 18px 18px 0;
    /*overflow-x: scroll;*/
    display: grid;
}

    .productPanel_Inner .MyNavPills_ul {
        overflow-x: visible;
    }

.RemoveDivision.RemoveRow {
    background-image: url(../../Images/Admin/Products/RemoveRedIcon.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px;
}

.productPanel_Inner .RightBlueCircleButton_AddDiv {
    padding: 25px;
}

.productPanel_BoldRowTitle {
    color: var(--DefualtTextColor);
    font-weight: 700;
}

.productPanel_BoldBtnTitle {
    color: var(--DefualtTextColor);
    font-weight: 700;
    color: var(--BlueTxt);
    text-decoration: underline;
    cursor: pointer;
    font-size: 13px;
}

/*#endregion ProductsPages_Accardion*/



/*#region Kanban_Table*/


/* 
   لایه بیرونی:
   این div هیچ استایل خاصی برای overflow یا height ندارد.
   مانند یک div معمولی رفتار می‌کند و ارتفاعش با محتوایش رشد می‌کند.
   این تضمین می‌کند که اسکرول عمودی به کل صفحه منتقل شود.
*/
.kanban-container {
    /* این کلاس به هیچ استایل خاصی نیاز ندارد، اما برای وضوح اینجا آورده شده است. */
}


/* 
   لایه داخلی (wrapper قبلی):
   تنها و تنها مسئولیت این div، مدیریت اسکرول افقی است.
*/
.kanban-wrapper {
    overflow-x: auto; /* ✅ فقط اسکرول افقی را فعال می‌کند */
    overflow-y: hidden; /* ✅ مهم: اسکرول عمودی را به طور کامل در این لایه غیرفعال می‌کند. */
    width: 100%;
    -webkit-overflow-scrolling: touch; /* برای اسکرول نرم در موبایل */
    /* یک padding کوچک در پایین برای اینکه اسکرول‌بار روی محتوا نیفتد (اختیاری) */
    padding-bottom: 5px;
}


/* 
   استایل خود جدول:
   به جدول اجازه می‌دهیم تا از نگهدارنده‌اش عریض‌تر شود.
*/
.myKanbanDragula_Table {
    border-collapse: collapse;
    /* این باعث می‌شود عرض جدول بر اساس محتوای ستون‌ها تعیین شود
       و بتواند از 100% عرض والدش فراتر رود. */
    min-width: 100%;
}

    .myKanbanDragula_Table.myKanbanDragula_Table2 {
        max-width: max-content;
        margin: auto;
        min-width: initial;
    }

    .myKanbanDragula_Table th,
    .myKanbanDragula_Table td {
        vertical-align: central;
        padding: 10px;
    }

    .myKanbanDragula_Table tbody tr {
        border-bottom: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }

        .myKanbanDragula_Table tbody tr:first-of-type {
            border-top: 1px solid #ccc;
        }

        .myKanbanDragula_Table tbody tr:last-of-type {
            -moz-border-radius-topleft: 9px;
            border-top-left-radius: 9px;
        }

    .myKanbanDragula_Table th {
        background-color: #f8f8f8;
        text-align: center;
    }

    .myKanbanDragula_Table thead th {
        background-color: var(--BackgroundColor_Dark_Color);
        color: var(--BackgroundColor_Color);
        align-content: center;
        font-size: 14px;
        line-height: 18px;
        font-weight: 900;
        height: 70px;
    }

    .myKanbanDragula_Table.myKanbanDragula_Table2 thead th {
        height: 60px;
        font-size: 14px;
        font-weight: 600;
    }

    .myKanbanDragula_Table thead th:first-of-type {
        background-color: transparent;
        color: transparent;
        border: none;
    }

    .myKanbanDragula_Table thead th:nth-of-type(2) {
        -moz-border-radius-topright: 9px;
        border-top-right-radius: 9px;
    }

    .myKanbanDragula_Table thead th:last-of-type {
        -moz-border-radius-topleft: 9px;
        border-top-left-radius: 9px;
    }

    /*    .myKanbanDragula_Table thead tr:is-sticky th {
        border-radius: 0 !important;
    }*/

    /*محو کردن هدر*/
    .myKanbanDragula_Table thead {
        /*visibility: hidden;*/
    }

    .myKanbanDragula_Table tbody,
    .myKanbanDragula_Table tr,
    .myKanbanDragula_Table td {
        position: relative;
        overflow: visible;
        z-index: 1;
    }

    .myKanbanDragula_Table thead tr {
        position: sticky;
        z-index: 2;
    }

    .myKanbanDragula_Table tbody tr:first-of-type td:first-of-type {
        -moz-border-radius-topright: 9px;
        border-top-right-radius: 9px;
    }

    .myKanbanDragula_Table tbody tr:last-of-type td:first-of-type {
        -moz-border-radius-bottomright: 9px;
        border-bottom-right-radius: 9px;
    }

    .myKanbanDragula_Table tbody tr:last-of-type td:last-of-type {
        -moz-border-radius-bottomleft: 9px;
        border-bottom-left-radius: 9px;
    }

    .myKanbanDragula_Table .kanban-cell {
        position: relative;
        overflow: visible !important;
        vertical-align: top;
        z-index: 1;
        background-color: var(--White);
        min-height: 300px; /* افزایش ارتفاع برای جا دادن کارت */
        min-width: 460px; /* افزایش عرض برای جا دادن کارت */
    }

    .myKanbanDragula_Table .kanban-cell2 {
        min-height: 200px;
        min-width: 320px;
        padding: 16px 22px;
    }

    .myKanbanDragula_Table .kanban-cell3 {
        min-height: max-content;
        min-width: 162px;
        padding: 6px;
        /*overflow: hidden !important;*/
        max-width: 162px;
    }

    .myKanbanDragula_Table tbody tr .kanban-cell::before {
        /*content: "متن پس‌زمینه";*/
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(-45deg);
        font-size: 24px;
        font-weight: 900;
        color: var(--FieldBorder_Color);
        white-space: nowrap;
        z-index: 0;
        pointer-events: none; /* تا کلیک‌ها ازش رد بشن */
    }

    .myKanbanDragula_Table tbody tr .kanban-cell3::before {
        font-size: 14px;
    }

    .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(2)::before,
    :lang(fa) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(2)::before {
        content: "دستورکار";
    }

    .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(3)::before,
    :lang(fa) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(3)::before {
        content: "در انتظار مجوز";
    }

    .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(4)::before,
    :lang(fa) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(4)::before {
        content: "در انتظار قطعه و داغی";
    }

    .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(5)::before,
    :lang(fa) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(5)::before {
        content: "اجرای فنی";
    }

    .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(6)::before,
    :lang(fa) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(6)::before {
        content: "کنترل کیفیت";
    }

    .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(7)::before,
    :lang(fa) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(7)::before {
        content: "پایان کار";
    }

/* --- بازنویسی برای زبان انگلیسی --- */
:lang(en) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(2)::before {
    content: "Agenda";
}

:lang(en) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(3)::before {
    content: "Awaiting Permission";
}

:lang(en) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(4)::before {
    content: "Awaiting Part & Core Return";
}

:lang(en) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(5)::before {
    content: "Technical Implementation";
}

:lang(en) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(6)::before {
    content: "Quality Control";
}

:lang(en) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(7)::before {
    content: "End Of Work";
}
/* --- بازنویسی برای زبان عربی --- */
:lang(ar) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(2)::before {
    content: "جدول الأعمال";
}

:lang(ar) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(3)::before {
    content: "في انتظار الإذن";
}

:lang(ar) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(4)::before {
    content: "بانتظار وصول القطعة واستلام التالفة";
}

:lang(ar) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(5)::before {
    content: "التنفيذ الفني";
}

:lang(ar) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(6)::before {
    content: "ضبط الجودة";
}

:lang(ar) .myKanbanDragula_Table tbody tr .kanban-cell:nth-of-type(7)::before {
    content: "نهاية العمل";
}

.myKanbanDragula_Table .kanban-cell > * {
    position: relative;
    z-index: 1;
}

.myKanbanDragula_Table .kanbanCard {
    position: relative;
    border-radius: 6px;
    padding: 16px;
    max-width: 100%;
    overflow: visible;
    z-index: 10;
}

.myKanbanDragula_Table .kanban-cell2 .kanbanCard {
    padding: 0;
}

.myKanbanDragula_Table .kanban-cell3 .kanbanCard {
    max-height: max-content !important;
}

.myKanbanDragula_Table .fixedTrTh {
    background-color: var(--BackgroundColor_Dark_Color);
}

    .myKanbanDragula_Table .fixedTrTh.fixedTrTh2 {
        padding: 0;
        width: 60px;
        max-width: 60px;
        min-width: 60px;
    }

.myKanbanDragula_Table .fixedTrThText {
    color: var(--BackgroundColor_Color);
    color: white;
    margin: auto;
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
    align-self: center;
    height: 100%;
    width: 100%;
    font-size: 14px;
    line-height: 18px;
    white-space: nowrap;
    padding: 10px;
    font-weight: 900;
}

    .myKanbanDragula_Table .fixedTrThText.fixedTrThText2 {
        text-align: center;
        white-space: normal;
        font-weight: 600;
        font-size: 14px;
    }

/*#endregion Kanban_Table*/




/*#region myCard*/

.myCard {
}

.myCard_Front, .myCard_Back, .myCard_Add {
    border-radius: var(--InnerBorder_Radius) !important;
    -webkit-box-shadow: var(--MainItems_Up_Shadow);
    -moz-box-shadow: var(--MainItems_Up_Shadow);
    box-shadow: var(--MainItems_Up_Shadow);
    background-color: var(--BahmanBlack_Color);
    padding: 24px;
    display: flex;
    gap: 0;
    justify-content: space-between;
    height: auto;
    min-height: 250px; /* تنظیم ارتفاع ثابت برای هر دو طرف */
    width: 440px;
}

.myCard3 .myCard_Front,
.myCard3 .myCard_Back,
.myCard3 .myCard_Add {
    box-shadow: var(--DokmeyeSade_Up_Shadow);
}

.myCard3 .PelakField * {
    letter-spacing: 0 !important;
}

.myCard3 .PelakField {
    width: 100% !important;
    height: 30px !important;
}

    /*@container plate_Container (max-width: 250px) {*/
    .myCard3 .PelakField .PelakField_Iran {
        width: 26px;
        gap: 0;
    }
/*}*/

.myCard_Front {
    background-color: var(--BahmanBlack_Color);
}

.myCard_Back, .myCard_Add {
    background-color: var(--BackgroundColor_Color);
}

.kanban-cell2 .myCard_Add,
.kanban-cell2 .myCard_Front {
    min-height: initial;
}

.kanban-cell3 .myCard_Add,
.kanban-cell3 .myCard_Front {
    padding: 6px;
    min-height: max-content !important;
    height: max-content !important;
    max-height: max-content !important;
    position: relative !important;
}

.kanban-cell3 .myCard3 .myCard_Add {
    padding: 6px;
    height: max-content !important;
    max-height: max-content !important;
    position: relative !important;
    min-height: 100px !important;
    align-items: center;
}

.myCard_ArrowDiv {
    height: auto;
    width: auto;
    /*display: flex;
        justify-content: center;
        align-content: center;*/
}

    .myCard,
    .myCard *,
    .myCard_ArrowDiv,
    .myCard_ArrowDiv * {
        cursor: pointer;
    }

.kanban-cell3 .myCard3 .myCard_GoldenRatio {
    min-height: 242px !important;
}

    .kanban-cell3 .myCard3 .myCard_GoldenRatio .d-grid,
    .kanban-cell3 .myCard3 .myCard_GoldenRatio .display_grid {
        align-content: space-around !important;
    }

    .kanban-cell3 .myCard3 .myCard_GoldenRatio .imgCol_inTable3 {
        width: 100%;
        height: auto;
    }

/*#region FLIPCards*/
/**********************************************************/
/* ✅ STYLES FOR FLIP ANIMATION - استایل‌های جدید برای ورق خوردن */
/**********************************************************/
.myCard {
    position: relative;
    width: 440px;
    min-height: 250px;
    cursor: pointer;
    transition: transform 0.7s;
    transition: all 0.3s ease;
    transform-style: preserve-3d;
}

.myCard2 {
    width: 320px !important;
    height: 200px !important;
    min-height: initial;
}

.myCard3 {
    width: 150px !important;
    height: max-content !important;
    min-height: max-content;
    max-height: max-content;
}

/* این کلاس با جاوااسکریپت برای چرخاندن کارت اضافه می‌شود */
.myCard.is-flipped {
    transform: rotateY(180deg);
}

.myCard_Front,
.myCard_Back,
.myCard_Add {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden; /* مخفی کردن پشت المان وقتی می‌چرخد */
}

/* پشت کارت در ابتدا ۱۸۰ درجه چرخیده است */
.myCard_Back {
    transform: rotateY(180deg);
}

/* استایل برای نام ستون در جلوی کارت */
.card-header-status {
    color: white;
    font-size: 14px;
    font-weight: 900;
}


.myCard3 .imgCol_inTable3 {
    border-radius: 4px;
    width: 56px;
    height: 37.33px;
    aspect-ratio: 3/2;
    margin: auto;
}

/* ----------------------------------------------------- */
/* --- FIX: Fixing Dragula Mirror Styles and Dimensions --- */
/* ----------------------------------------------------- */

/* 1. اندازه کلی عنصر Mirror */
.gu-mirror {
    width: 150px !important;
    height: auto !important;
    min-height: max-content !important;
    max-height: max-content !important;
    /* همچنین سایه‌های نئومورفیک را تحمیل کنید (از پاسخ قبلی) */
    box-shadow: none !important; /* یا سایه مورد نظر شما */
    background-color: transparent !important;
}

    /* 2. تضمین ابعاد و استایل myCard3 (لایه اصلی کارت) */
    .gu-mirror .myCard3 {
        width: 150px !important;
        height: auto !important;
        min-height: max-content !important;
        max-height: max-content !important;
    }

        /* 3. حفظ پدینگ و ارتفاع myCard_Front/myCard_Add */
        .gu-mirror .myCard3 .myCard_Front,
        .gu-mirror .myCard3 .myCard_Add {
            padding: 6px !important;
            min-height: 242px !important;
            height: auto !important;
            max-height: max-content !important;
            /* اعمال سایه و پس‌زمینه نئومورفیک اصلی (اگر در حین درگ از بین رفته) */
            box-shadow: var(--DokmeyeSade_Up_Shadow) !important;
            background-color: var(--BahmanBlack_Color) !important;
        }

        /* 4. تنظیم محتوای داخلی (Grid و Image) */
        .gu-mirror .myCard3 .myCard_GoldenRatio .d-grid,
        .gu-mirror .myCard3 .myCard_GoldenRatio .display_grid {
            align-content: space-around !important;
        }

        /* 5. تضمین ابعاد پلاک */
        .gu-mirror .myCard3 .PelakField {
            width: 100% !important;
            max-width: 100% !important;
            height: 30px !important;
        }

        /* 6. تصویر باید 100% عرض والد کوچک خود را پر کند */
        .gu-mirror .myCard3 .myCard_GoldenRatio .imgCol_inTable3 {
            width: 100% !important;
            height: auto !important;
        }

/*#endregion FLIPCards*/

/*#region HidingCards*/

/* کد جدید برای انیمیشن حذف تدریجی از بالا به پایین */

@keyframes wipe-top-to-bottom {
    from {
        /* در ابتدا کارت کاملا نمایان است */
        clip-path: inset(0 0 0 0);
    }

    to {
        /* ✅ اصلاح اصلی اینجاست: کارت از بالا (top) بریده می‌شود */
        clip-path: inset(100% 0 0 0);
    }
}

/* این کلاس بدون تغییر باقی می‌ماند */
.card-wiping-out {
    animation: wipe-top-to-bottom 1.2s forwards ease-in;
}
/*#endregion HidingCards*/



/*#endregion myCard*/

/*#region Tags*/

.tagsContainer, .MultipleItems_TagContainer {
    padding: 15px;
    min-height: 58px;
    height: auto;
    row-gap: 16px;
    column-gap: 12px;
    border-radius: var(--InnerBorder_Radius) !important;
}


.ViewTagsContainer {
    padding: 0;
    row-gap: 8px;
    column-gap: 6px;
}


.ViewTagsContainer2 {
    padding: 10px;
    row-gap: 6px;
    column-gap: 4px;
}

.tagDivStyle, .MultipleItems_Tag {
    border-radius: var(--FieldsBorder_Radius_Desktop);
    border: 1px solid var(--StrokeBorder_DokmeGholombe_Down_Biruni_Color);
    background: var(--White_Color);
    box-shadow: var(--DokmeGholombeUp_Biruni_Shadow);
    display: flex;
    min-height: 30px;
    padding: 2px 10px 4px 18px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--bs-gray-200);
}

.tagTxtStyle, .MultipleItems_TagText {
    font-weight: 300;
}

.tagCloseStyle, .MultipleItems_TagClose {
    cursor: pointer;
    width: 16px;
    height: 16px;
}

.UneditableTagDivStyle {
    background-color: transparent;
    padding: 2px 18px;
}

.ViewTagsContainer .UneditableTagDivStyle {
    box-shadow: none;
    border: 1px solid var(--FieldBorder_Color);
}

.TripleBtnsInTable_Btn_Layer1.SelectableTag {
    padding: 2px;
}

    .TripleBtnsInTable_Btn_Layer1.SelectableTag,
    .TripleBtnsInTable_Btn_Layer1.SelectableTag * {
        cursor: pointer;
    }

        .TripleBtnsInTable_Btn_Layer1.SelectableTag .TripleBtnsInTable_Btn_Layer2 {
            width: fit-content;
            padding: 2px 18px;
        }

.SelectableTagDiv {
    display: flex;
}

.hidden-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    display: none;
    pointer-events: none; /* اطمینان از اینکه کلیک را دریافت نمی‌کند */
}

    .hidden-checkbox:checked + .TripleBtnsInTable_Btn_Layer1 .tagTxtStyle,
    .TripleBtnsInTable_Btn_Layer1:hover .tagTxtStyle {
        color: white;
        font-weight: 900;
    }

    .hidden-checkbox:checked + .TripleBtnsInTable_Btn_Layer1 .tagTxtStyle,
    .TripleBtnsInTable_Btn_Layer1:hover .tagTxtStyle {
        color: white;
        font-weight: 900;
    }

.SelectableTagDiv2 .hidden-checkbox:checked + .TripleBtnsInTable_Btn_Layer1.SelectableTag,
.SelectableTagDiv2 .TripleBtnsInTable_Btn_Layer1.SelectableTag:hover {
    /*background: var(--DokmeGholombe_Biruni_Color);*/
    box-shadow: var(--DokmeGholombeUp_Biruni_Shadow);
}

    .SelectableTagDiv2 .hidden-checkbox:checked + .TripleBtnsInTable_Btn_Layer1.SelectableTag .TripleBtnsInTable_Btn_Layer2,
    .SelectableTagDiv2 .TripleBtnsInTable_Btn_Layer1.SelectableTag:hover .TripleBtnsInTable_Btn_Layer2 {
        background: var(--DokmeGholombe_Daruni_Color);
        box-shadow: var(--DokmeGholombeDown_Daruni_Shadow);
    }

.SelectableTagDiv2 .hidden-checkbox:checked + .TripleBtnsInTable_Btn_Layer1 .tagTxtStyle,
.SelectableTagDiv2 .TripleBtnsInTable_Btn_Layer1:hover .tagTxtStyle {
    color: var(--projectMainAccent_Color);
}

/*#endregion Tags*/



/*#region RatingStars*/
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');
/* === کدهای اصلی امتیازدهی با SVG === */
.rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    gap: 8px; /* فاصله بیشتر بین ستاره‌ها */
}

    /* مخفی کردن دکمه‌های رادیویی */
    .rating > input {
        display: none;
    }

    .rating > label {
        cursor: pointer;
        transition: transform 0.2s ease-in-out;
    }

/* استایل خود SVG */
.star-svg {
    width: 45px;
    height: 45px;
    /* اینجا گوشه‌ها را با CSS گرد می‌کنیم! */
    stroke-width: 1.5; /* ضخامت خط دور */
    stroke: #c5c5c5; /* رنگ خط دور در حالت خاموش */
}

    /* استایل path داخل SVG (شکل اصلی ستاره) */
    .star-svg path {
        fill: #f0f2f5; /* رنگ داخل ستاره در حالت خاموش (شبیه پس‌زمینه) */
        transition: fill 0.2s ease, filter 0.3s ease; /* انیمیشن برای رنگ و سایه */
    }

/* افکت هاور: وقتی ماوس روی یک ستاره می‌رود */
.rating > label:hover,
.rating > label:hover ~ label {
    transform: scale(1.1); /* کمی بزرگنمایی برای جذابیت */
}

    .rating > label:hover .star-svg path,
    .rating > label:hover ~ label .star-svg path {
        fill: #ffd055;
        filter: drop-shadow(0 3px 5px rgba(255, 180, 0, 0.4));
    }

    .rating > label:hover .star-svg {
        stroke: #ffac33;
        overflow: visible;
    }

/* افکت انتخاب: وقتی یک ستاره کلیک (انتخاب) می‌شود */
.rating > input:checked ~ label .star-svg path {
    fill: #ffc107; /* رنگ اصلی طلایی */
    /* افکت سایه برای ستاره‌های انتخاب شده */
    filter: drop-shadow(0 4px 6px rgba(255, 193, 7, 0.5));
}

.rating > input:checked ~ label .star-svg {
    stroke: #e6a700; /* رنگ خط دور تیره‌تر برای تاکید بیشتر */
}

/*#endregion RatingStars*/



/*#region Chart*/

.PieChart_container {
    position: relative;
    width: 90%;
    max-width: 450px;
    margin: 20px auto; /* کمی فاصله بین نمودارها */
}

.chart-container {
    position: relative;
    width: 90%;
    max-width: 450px;
    margin: 20px auto; /* کمی فاصله بین نمودارها */
}





body {
    --graphina-tooltip-bg: rgba(0, 0, 0, 0.85);
    --graphina-tooltip-color: white;
    --graphina-tooltip-border-color: transparent;
    --graphina-tooltip-border-width: 0px;
}

.chart-wrapper {
    width: 100%;
    /*max-width: 800px;*/
    padding: 25px;
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    margin-left: auto;
    margin-right: auto;
}

.graphina-tooltip {
    background-color: var(--graphina-tooltip-bg);
    color: var(--graphina-tooltip-color);
    border-color: var(--graphina-tooltip-border-color);
    border-width: var(--graphina-tooltip-border-width);
    border-style: solid;
    position: absolute;
    padding: 8px 12px;
    border-radius: 6px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    transform: translate(-50%, -120%);
    white-space: normal;
    z-index: 999;
    text-align: right;
    line-height: 1.5;
}

.filters-container {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 20px;
    justify-content: flex-start;
}

.withNoInputSign.MultipleItems_DropdownContainer {
    position: relative;
    min-width: 180px;
}

.withNoInputSign .MultipleItems_DropdownContent {
    display: none;
    position: absolute;
    z-index: 100;
    width: 100%;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    padding: 8px;
    margin-top: 4px;
}

.withNoInputSign.MultipleItems_DropdownContainer.open .MultipleItems_DropdownContent {
    display: block;
}

.withNoInputSign .MultipleItems_DropdownItemList {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.withNoInputSign .RadioCheckDivStyle {
    padding: 6px 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.withNoInputSign .RadioCheckcontainer {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

.withNoInputSign .MultipleItems_DropdownContent .RadioCheckDivStyle:hover {
    background-color: #f0f0f0;
}

.graphina-container {
    display: flex;
    flex-direction: column;
}

    .graphina-container.graphina-legend-left, .graphina-container.graphina-legend-right {
        flex-direction: row;
    }

    .graphina-container.graphina-legend-right {
        flex-direction: row-reverse;
    }

.graphina-chart-area {
    flex-grow: 1;
    width: 100%;
    position: relative;
}

.graphina__legend {
    display: flex;
    flex-wrap: wrap;
    padding: 10px 0;
    gap: 15px;
}

.graphina__legend--layout-horizontal {
    flex-direction: row;
}

.graphina__legend--align-center {
    justify-content: center;
}

.graphina__legend-item {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: opacity 0.3s;
}

.graphina__legend-marker {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    margin-left: 8px;
    flex-shrink: 0;
}

.graphina__legend-label {
    font-size: 14px;
    color: #555;
}

.graphina__legend-item.is-hidden {
    opacity: 0.5;
}

.graphina__title {
    font-size: 22px;
    font-weight: 600;
    fill: #34495e;
    text-anchor: middle;
}

.graphina__grid-line {
    stroke: #e0e0e0;
    stroke-width: 1;
    stroke-dasharray: 3 3;
}

.graphina__x-axis-label, .graphina__y-axis-label {
    fill: #7f8c8d;
}

.graphina__bar-group-item {
    transition: opacity 0.2s ease-out;
    cursor: pointer;
}

    .graphina__bar-group-item.is-hovered {
        opacity: 0.85;
    }

    .graphina__bar-group-item.MainItems_Up_Shadow {
        filter: drop-shadow(3px -3px 2px rgba(0, 0, 0, 0.1));
    }

.graphina-export-menu {
    /* position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;*/
    position: relative;
}

.graphina-export-button {
    width: 32px;
    height: 32px;
    padding: 4px;
    border: 1px solid #e6e6e6;
    background: #ffffff;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s, box-shadow 0.2s;
}

    .graphina-export-button:hover {
        background: #f2f2f2;
        box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    }

    .graphina-export-button svg {
        width: 100%;
        height: 100%;
        fill: #666666;
    }

.graphina-export-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 5px;
    background-color: white;
    border: 1px solid #e6e6e6;
    border-radius: 5px;
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    min-width: 180px;
    padding: 5px 0;
    list-style: none;
}

    .graphina-export-dropdown.is-active {
        display: block;
    }

    .graphina-export-dropdown li a {
        display: block;
        padding: 10px 15px;
        font-size: 14px;
        color: var(--BackgroundColor_Dark_Color);
        text-decoration: none;
        white-space: nowrap;
    }

        .graphina-export-dropdown li a:hover {
            background-color: #f0f0f0;
            color: #000;
        }

.graphina-export-separator {
    height: 1px;
    background-color: #e6e6e6;
    margin: 5px 0;
}

.graphina-container:fullscreen {
    background-color: var(--graphina-fullscreen-bg, #ffffff) !important;
}

.graphina--animated .graphina__bar-group-item,
.graphina--animated .graphina__pie-group {
    transform: scale(0);
    transform-origin: center;
}

.graphina--animated.graphina--animate-in .graphina__bar-group-item {
    transform: scaleY(1);
    transform-origin: bottom;
    transition: transform var(--animation-duration, 800ms) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.graphina--animated.graphina--animate-in .graphina__pie-group {
    transform: scale(1);
    transition: transform var(--animation-duration, 800ms) cubic-bezier(0.34, 1.56, 0.64, 1);
}

.graphina--animated .graphina__reveal-clip rect {
    width: 0;
}

.graphina--animated.graphina--animate-in .graphina__reveal-clip rect {
    width: 100%;
    transition: width var(--animation-duration, 800ms) ease-in-out;
}

.graphina--animated .graphina__marker,
.graphina--animated .graphina__data-label,
.graphina--animated .graphina__pie-data-label {
    opacity: 0;
}

.graphina--animated.graphina--animate-in .graphina__marker,
.graphina--animated.graphina--animate-in .graphina__data-label,
.graphina--animated.graphina--animate-in .graphina__pie-data-label {
    opacity: 1;
    transition: opacity 400ms ease-in;
    transition-delay: calc(var(--animation-duration, 800ms) * 0.8);
}

body.graphina-table-open {
    overflow: hidden;
}

.graphina-data-table-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    direction: rtl;
    font-family: inherit;
}

.graphina-data-table-container {
    background-color: white;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    width: 90%;
    max-width: 900px;
    height: 85%;
    max-height: 700px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.graphina-data-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #e0e0e0;
    flex-shrink: 0;
}

    .graphina-data-table-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
    }

.graphina-data-table-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    line-height: 1;
    padding: 5px;
    color: #888;
}

    .graphina-data-table-close:hover {
        color: #111;
    }

.graphina-data-table-content {
    overflow-y: auto;
    padding: 0 20px 20px;
}

.graphina-data-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

    .graphina-data-table th, .graphina-data-table td {
        border: 1px solid #ddd;
        padding: 10px 12px;
        text-align: right;
    }

    .graphina-data-table th {
        background-color: #f7f7f7;
        font-weight: 600;
        position: sticky;
        top: 0;
    }

/* استایل‌های پایه برای نمایش بهتر */

.chart-wrapper {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    padding: 1rem;
    margin-bottom: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
/* استایل‌های لازم برای دراپ‌دان‌ها و tooltip */
/* این استایل‌ها می‌توانند در فایل CSS اصلی شما قرار بگیرند */
.filters-container {
    display: flex;
    gap: 10px;
    margin-bottom: 1rem;
}

.MultipleItems_DropdownContainer {
    position: relative;
}

.MultipleItems_DropdownButton {
}

.MultipleItems_DropdownContent {
}

.MultipleItems_DropdownContainer.open .MultipleItems_DropdownContent {
    display: block;
}

.RadioCheckText {
    padding-right: 5px;
}

.graphina-tooltip {
    position: fixed;
    transform: translate(-50%, -110%);
    pointer-events: none;
    background: rgba(0, 0, 0, 0.85);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 13px;
    transition: opacity 0.2s;
    opacity: 0;
    z-index: 9999;
    white-space: nowrap;
}

/* استایل‌های لازم برای هدر و دکمه دانلود */
.graphina-header {
    display: flex !important;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #eee;
    /*justify-content: space-between;*/
    justify-content: right !important;
    direction: ltr;
    gap: 14px;
}

.graphina__title-html {
    margin: 0;
    font-size: 1.1rem;
    color: var(--BackgroundColor_Dark_Color);
}

.graphina-export-menu {
    position: relative;
}

.graphina-export-button {
    background: transparent;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
}

    .graphina-export-button:hover {
        background-color: #f0f0f0;
    }

    .graphina-export-button svg {
        width: 20px;
        height: 20px;
        fill: #555;
    }

.graphina-export-dropdown {
    display: none;
    position: absolute;
    left: 0;
    top: 100%;
    background-color: white;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 1000;
    list-style: none;
    padding: 5px 0;
    margin: 5px 0 0 0;
    border-radius: 4px;
    min-width: 180px;
}

    .graphina-export-dropdown.is-active {
        display: block;
    }

    .graphina-export-dropdown li a {
        display: block;
        padding: 8px 16px;
        text-decoration: none;
        color: var(--BackgroundColor_Dark_Color);
        font-size: 14px;
    }

        .graphina-export-dropdown li a:hover {
            background-color: #f5f5f5;
        }

.graphina-export-separator {
    height: 1px;
    background-color: #eee;
    margin: 4px 0;
}

/* استایل‌های جدول داده‌ها */
.graphina-data-table-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}

.graphina-data-table-container {
    background: white;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    width: 80%;
    max-width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
}

.graphina-data-table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-bottom: 1px solid #e0e0e0;
}

    .graphina-data-table-header h3 {
        margin: 0;
        font-size: 1.1rem;
    }

.graphina-data-table-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.graphina-data-table-content {
    overflow: auto;
    padding: 1rem;
}

.graphina-data-table {
    width: 100%;
    border-collapse: collapse;
}

    .graphina-data-table th, .graphina-data-table td {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: right;
    }

    .graphina-data-table th {
        background-color: #f2f2f2;
    }


.ColumnListWithSearch {
    align-self: start;
    overflow-y: scroll;
    height: auto;
    max-height: 100%;
    width: inherit;
    padding: 14px;
    max-width: max-content;
}

.ColumnListWithSearch_ListContent .AccordionGroup {
    width: 100% !important;
}

@media screen and (max-width: 991px) {
    .ColumnListWithSearch {
        padding: 8px 12px;
        width: 100%;
        max-width: 100%;
    }

    .ColumnListWithSearch_ListContent {
        max-height: 240px;
        overflow-y: scroll;
        padding: 16px;
    }
}

@media screen and (max-width: 767px) {
}

/*#endregion Chart*/
/*#region simpleStarRating*/
.rating.simpleStarRating {
    font-size: 24px; /* اندازه ستاره‌ها */
    direction: ltr;
}

    .rating.simpleStarRating .checked {
        color: var(--projectMainAccent_Color);
    }

/*#endregion simpleStarRating*/



/*#region KeyWordCloud*/

#inputText {
    width: 100%;
    height: 150px;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #DDD;
    font-size: 16px;
    font-family: inherit;
    box-sizing: border-box;
    resize: vertical;
    margin-bottom: 20px;
}

#generateBtn {
    background: var(--projectMainAccent_BGColor);
    color: #1F1F1F;
    border: none;
    padding: 12px 30px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    #generateBtn:hover {
        background-color: #e6a800;
    }

#wordcloud-canvas {
    width: 100%;
    height: 500px; /* ارتفاع ثابت برای جلوگیری از رشد بیش از حد */
    margin-top: 30px;
    border: 1px dashed #CCC;
    border-radius: 8px;
    position: relative; /* برای نمایش پیام‌های داخلی */
    overflow: hidden; /* مهم: هرچیزی که بیرون بزند را مخفی می‌کند */
}

/*#endregion KeyWordCloud*/




/*#region PreInvoice_PartialView_Without_PrintStyles___PrintStylesAreInTheViewPage*/



.myInvoice .invoice-box {
    margin: auto;
    padding: 30px;
    border: 1px solid #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    background-color: #fff;
}

/* Header */
.myInvoice header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-bottom: 2px solid var(--BackgroundColor_Dark_Color);
    padding-bottom: 10px;
}

    .myInvoice header .logo img {
        width: 80px;
    }

    .myInvoice header .title {
        text-align: center;
    }

        .myInvoice header .title h1 {
            margin: 0;
            font-size: 24px;
        }

        .myInvoice header .title p {
            margin: 5px 0 0;
            font-size: 12px;
        }

    .myInvoice header .invoice-details {
        text-align: left;
        font-size: 11px;
    }

        .myInvoice header .invoice-details p {
            margin: 2px 0;
        }

.myInvoice table {
    caption-side: top;
}

/* Info Sections */
.info-section {
    margin-top: 20px;
}

.info-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
    border: 1px solid #ccc;
}

    .info-table caption {
        font-weight: bold;
        background-color: #eee;
        padding: 5px;
        text-align: center;
        border: 1px solid #ccc;
        border-bottom: none;
    }

    .info-table td {
        padding: 5px 8px;
        border: 1px solid #ddd;
        text-align: right;
    }

/* Items Table */
.items-section {
    margin-top: 20px;
}

.items-table {
    width: 100%;
    border-collapse: collapse;
}

    .items-table th, .items-table td {
        border: 1px solid #aaa;
        padding: 8px;
        text-align: center;
    }

    .items-table thead th {
        background-color: #e0e0e0;
        font-weight: bold;
    }

    .items-table .category-row td {
        background-color: #f2f2f2;
        font-weight: bold;
        text-align: right;
        padding: 8px;
    }

    /* Make text in description column align right */
    .items-table td:nth-child(2) {
        text-align: right;
    }

/* Summary Section */
.summary-section {
    margin-top: 20px;
}

.summary-table {
    width: 100%;
    border-collapse: collapse;
}

    .summary-table th, .summary-table td {
        border: 1px solid #aaa;
        padding: 8px;
        text-align: center;
    }

    .summary-table th {
        background-color: #e0e0e0;
    }

    .summary-table tfoot .total-row td {
        font-weight: bold;
        font-size: 14px;
        background-color: #dcdcdc;
        text-align: center;
    }
    /* Align first column of summary table to right */
    .summary-table td:first-child {
        text-align: right;
        font-weight: bold;
    }


/* Signature and Notes */
.signature-notes {
    display: flex;
    justify-content: space-between;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #ccc;
}

    .signature-notes .notes {
        width: 48%;
    }

/* Footer */
.invoice-footer {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 2px solid var(--BackgroundColor_Dark_Color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 9px;
    line-height: 1.6;
}

    .invoice-footer .footer-info {
        flex-grow: 1;
    }

        .invoice-footer .footer-info span {
            margin-left: 20px;
        }


/*#endregion PreInvoice_PartialView_Without_PrintStyles___PrintStylesAreInTheViewPage*/




/*#region tooltipInsidePage*/
.neginTooltip {
    position: relative !important;
    display: flex;
    cursor: pointer;
}

.neginTooltipText {
    display: none;
    width: 100%;
    background-color: var(--BahmanBlack_Color);
    color: #ffffff;
    text-align: center;
    border-radius: 20px;
    padding: 10px 5px;
    position: absolute;
    z-index: 1;
    top: 50px;
    border: 1px solid var(--projectMainAccent_Color);
    box-shadow: var(--BlackButton_Shadow);
    justify-content: center;
}

.neginTooltip:hover .neginTooltipText {
    display: flex;
}

.neginTooltipText.neginTooltipText2_side_menu {
    width: fit-content;
    padding: 10px 20px;
    z-index: 5;
}

/*.neginTooltipText.neginTooltipText2_side_menu {
    top: initial;
    margin-top: -46px;
}*/

/*.neginTooltipText.neginTooltipText2_side_menu {
    width: fit-content;
    z-index: 5;
    top: initial;
    margin-top: -50px;
    padding: 10px 20px;
    position: sticky;
    left: 0 !important;
    right: 0 !important;
    margin-right: -100px;
}*/

.neginTooltipText.neginTooltipText2_side_menu {
    bottom: auto !important;
    margin: 0 12px !important;
    /* تغییر از sticky به absolute برای حرکت همراه با اسکرول */
    position: absolute !important;
    /* تنظیم دقیق وسط عمودی نسبت به آیتم منو */
    top: 50% !important;
    transform: translateY(-50%) !important;
    /**/
    top: 32px !important;
    transform: none !important;
}


.mySideNavbar .neginTooltipText.neginTooltipText2_side_menu {
    right: calc(var(--closedMenu_Width) + 2px);
}

.mySideNavbar.expanded .neginTooltipText.neginTooltipText2_side_menu {
    right: calc(250px + 2px);
}

.neginTooltip:hover + .neginTooltipText.neginTooltipText2_side_menu {
    display: flex;
}


/*#region BootstrapTooltip*/


/* --- 1. استایل بدنه اصلی --- */
.tooltip-inner {
    background-color: var(--BahmanBlack_Color) !important;
    color: var(--White_Color) !important;
    text-align: center;
    border-radius: 20px !important;
    padding: 8px 12px !important; /* پدینگ متعادل */
    border: 1px solid var(--projectMainAccent_Color) !important;
    box-shadow: var(--BlackButton_Shadow) !important;
    position: relative;
}

/* --- 2. تنظیمات کلی فلش --- */
.tooltip-arrow {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
}

    /* دو لایه مثلث: before برای حاشیه رنگی، after برای رنگ مشکی داخلی */
    .tooltip-arrow::before,
    .tooltip-arrow::after {
        position: absolute;
        content: "";
        border-color: transparent;
        border-style: solid;
    }

/* ======================================================= */
/* === تنظیمات جهت‌ها (دقیق و چسبیده) === */
/* ======================================================= */

/* >>> سمت چپ (فلش سمت راست) <<< */
.bs-tooltip-start .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow {
    right: 0;
    margin-right: -7px !important; /* فلش را بیرون می‌کشد */
}
    /* مثلث رنگی (حاشیه) */
    .bs-tooltip-start .tooltip-arrow::before,
    .tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before {
        top: 50%;
        transform: translateY(-50%);
        border-width: 7px 0 7px 7px;
        border-left-color: var(--projectMainAccent_Color) !important;
    }
    /* مثلث مشکی (رویی) */
    .bs-tooltip-start .tooltip-arrow::after,
    .tooltip.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::after {
        top: 50%;
        transform: translateY(-50%);
        border-width: 7px 0 7px 7px;
        border-left-color: var(--BahmanBlack_Color) !important;
        right: 1px; /* 1px فاصله برای دیده شدن خط حاشیه */
    }


/* >>> سمت راست (فلش سمت چپ) <<< */
.bs-tooltip-end .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow {
    left: 0;
    margin-left: -7px !important;
}
    /* مثلث رنگی */
    .bs-tooltip-end .tooltip-arrow::before,
    .tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::before {
        top: 50%;
        transform: translateY(-50%);
        border-width: 7px 7px 7px 0;
        border-right-color: var(--projectMainAccent_Color) !important;
    }
    /* مثلث مشکی */
    .bs-tooltip-end .tooltip-arrow::after,
    .tooltip.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow::after {
        top: 50%;
        transform: translateY(-50%);
        border-width: 7px 7px 7px 0;
        border-right-color: var(--BahmanBlack_Color) !important;
        left: 1px;
    }


/* >>> سمت بالا (فلش پایین) <<< */
.bs-tooltip-top .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow {
    bottom: 0;
    margin-bottom: -7px !important;
}
    /* مثلث رنگی */
    .bs-tooltip-top .tooltip-arrow::before,
    .tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before {
        left: 50%;
        transform: translateX(-50%);
        border-width: 7px 7px 0 7px;
        border-top-color: var(--projectMainAccent_Color) !important;
    }
    /* مثلث مشکی */
    .bs-tooltip-top .tooltip-arrow::after,
    .tooltip.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::after {
        left: 50%;
        transform: translateX(-50%);
        border-width: 7px 7px 0 7px;
        border-top-color: var(--BahmanBlack_Color) !important;
        bottom: 1px;
    }


/* >>> سمت پایین (فلش بالا) <<< */
.bs-tooltip-bottom .tooltip-arrow,
.tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow {
    top: 0;
    margin-top: -7px !important;
}
    /* مثلث رنگی */
    .bs-tooltip-bottom .tooltip-arrow::before,
    .tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::before {
        left: 50%;
        transform: translateX(-50%);
        border-width: 0 7px 7px 7px;
        border-bottom-color: var(--projectMainAccent_Color) !important;
    }
    /* مثلث مشکی */
    .bs-tooltip-bottom .tooltip-arrow::after,
    .tooltip.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow::after {
        left: 50%;
        transform: translateX(-50%);
        border-width: 0 7px 7px 7px;
        border-bottom-color: var(--BahmanBlack_Color) !important;
        top: 1px;
    }

/*#endregion BootstrapTooltip*/


/*#endregion tooltipInsidePage*/




/*#region wizardNav*/


.wizard-container {
    display: flex;
    gap: 2rem; /* فاصله بین نویگیشن و محتوا */
    height: 100%;
}

/* --- Navigation Styles --- */
.wizard-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.wizard-nav .wizard-step {
    padding: 0.75rem 1.5rem;
    background-color: #ffffff;
    color: var(--DarkGray_Text_Color);
    border-radius: var(--BtnsBorder_Radius);
    white-space: nowrap; /* جلوگیری از شکستن متن */
    font-weight: 600;
    transition: all 0.3s ease;
    -webkit-box-shadow: var(--AnyButton_Up_Shadow);
    -moz-box-shadow: var(--AnyButton_Up_Shadow);
    box-shadow: var(--AnyButton_Up_Shadow);
    border: 1px solid var(--White_Color);
    background: var(--BackgroundColor_Color);
    line-height: 0;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    /* Active step style based on your image */
    .wizard-nav .wizard-step:hover,
    .wizard-nav .wizard-step.active {
        background: var(--PressedTab_AccentLinear_Text_Color);
        color: var(--White_Color);
        font-weight: 900;
        font-size: larger;
        cursor: pointer;
        border: none;
    }

/* --- Content Styles --- */
.wizard-content {
    flex-grow: 1;
    box-shadow: none !important;
    height: fit-content;
    border: none;
    padding-top: 0;
    margin: 0;
    height: 100%;
}

.wizard-pane {
    display: none; /* مخفی کردن تمام پنل‌ها به صورت پیش‌فرض */
    min-height: 100%;
    position: relative;
    height: fit-content;
    overflow-y: visible;
}

    .wizard-pane.active {
        display: flex;
        flex-direction: column;
        row-gap: 50px;
    }

/* --- Navigation Buttons --- */
.wizard-buttons {
    padding: 8px 14px 14px;
    /*border-top: 1px solid #eee;*/
    display: flex;
    justify-content: space-between;
    position: sticky;
    bottom: 0;
    z-index: 1;
    width: 100%;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(11px);
}

    .wizard-buttons .BtnLayer1.DarkBtn_OnLightBG_Layer1 {
        min-width: 80px;
        min-height: 46px;
    }

    .wizard-buttons .BtnLayer1 {
        min-width: 46px;
        min-height: 46px;
    }

/* ============================================= */
/* ===        Responsive Layout              === */
/* ============================================= */

/* Mobile & Tablet view (Horizontal Navigation) */
@media (max-width: 1199.98px) {
    .wizard-container {
        flex-direction: column;
        gap: 1.5rem;
    }

    .wizard-nav {
        overflow-x: auto; /* فعال کردن اسکرول افقی */
        padding: 10px 10px 16px; /* فضا برای اسکرول‌بار */
        /* برای پنهان کردن ظاهر اسکرول‌بار در مرورگرهای مختلف */
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
        position: sticky;
        top: 0;
        background: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(11px);
        z-index: 2;
        height: fit-content;
        overflow-y: hidden;
        min-height: 68px;
    }

        .wizard-nav::-webkit-scrollbar {
            display: none; /* Chrome, Safari, and Opera */
        }

        .wizard-nav ul {
            flex-direction: row;
            gap: 12px; /* فاصله بین آیتم‌ها در حالت افقی */
        }

        .wizard-nav .wizard-step {
            height: 42px;
        }
}

/* Desktop view (Vertical Navigation) */
@media (min-width: 1200px) {
    .wizard-container {
        flex-direction: row;
    }

    .wizard-nav {
        flex: 0 0 280px; /* عرض ثابت برای نویگیشن در حالت دسکتاپ */
    }

        .wizard-nav ul {
            flex-direction: column;
            gap: 16px; /* فاصله بین آیتم‌ها در حالت عمودی */
        }
}



/*#endregion wizardNav*/



/*#region differentPages*/

body#receptionDetails .RenderBody_Div.AdminDesktop_RenderBody_Div .RenderBody_ContentDiv {
    padding-bottom: 0 !important;
}

body#receptionBoard .RenderBody_Div.AdminDesktop_RenderBody_Div .RenderBody_ContentDiv {
    overflow-x: scroll;
}

body#receptionBoard .TopOfPage_PathDiv {
    position: relative;
}

body#receptionBoard .TopBackButton,
body#EPCDetails .TopBackButton,
body#Dashboard .TopBackButton {
    display: none !important;
}

body#ErrorPage .TopOfPage_PathDiv,
body#ErrorPage .mySideNavbar {
    display: none !important;
}


@media (max-width: 1199.98px) {
    body#receptionDetails .RenderBody_Div.AdminDesktop_RenderBody_Div .RenderBody_ContentDiv {
        padding: 0 !important;
        padding: 0 10px !important;
    }
}

@media screen and (max-width: 991px) {
    body#receptionDetails .RenderBody_Div.AdminDesktop_RenderBody_Div .RenderBody_ContentDiv .TopOfPage_PathDiv {
        padding: 10px 22px;
    }
}

@media screen and (max-width: 767px) {
}
/*#endregion differentPages*/


/*#region fuelGauge*/

.gauge-component {
    width: 90%;
    /* ===== این خط عرض نمودار را به حداکثر x پیکسل محدود می‌کند ===== */
    /* برای برداشتن محدودیت، این خط را کامنت یا حذف کنید */
    max-width: 300px;
    /* ================================================================ */
    /* این خط ارتفاع را دو-سوم عرض تنظیم می‌کند */
    aspect-ratio: 3 / 2;
    /* این خط کلیدی، بخش اضافی و نامرئی SVG را پنهان می‌کند */
    overflow: hidden;
    margin: auto;
}

.gauge-container.GasolineFuel {
    position: relative;
    background-image: url("/image/icons/fuelpump_g.svg");
    background-repeat: no-repeat;
    background-position: center 35%;
    background-size: 12%;
}

.gauge-container.ElectricFuel {
    position: relative;
    background-image: url('/image/icons/lightningcharge_g.svg');
    background-repeat: no-repeat;
    background-position: center 35%;
    background-size: 12%;
}

.gauge-component .gauge {
    cursor: pointer;
}

/* *** تغییر کلیدی: استایل برای حالت فقط خواندنی *** */
.gauge-component.readonly .gauge-container .gauge {
    cursor: default;
}

/*#endregion fuelGauge*/



/*#region stepperProgress*/

.signature-canvas {
    background-color: #fff;
    cursor: crosshair;
    padding: 0 !important;
    touch-action: none; /* جلوگیری از اسکرول فقط هنگام لمس این عنصر */
}

.clearSignaturePadBtn {
    position: relative;
    top: 46px;
    right: 16px;
}

/*#endregion signature*/


/*#region stepperProgress*/

/* --- Stepper Progress Bar (بدون تغییر) --- */
.stepper-progress-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    box-shadow: var(--BackButton_Shadow);
}

    .stepper-progress-container::before {
        content: '';
        position: absolute;
        top: 28px;
        height: 4px;
        background-color: #e0e0e0;
        z-index: 1;
        left: 50px;
        right: 60px;
    }

#progress-bar-fill {
    position: absolute;
    top: 28px;
    height: 4px;
    z-index: 2;
    left: 50px;
    width: 0;
    background: var(--projectMainAccent_BGColor);
    transition: width 0.4s ease;
}

html[dir="rtl"] #progress-bar-fill {
    left: auto;
    right: 60px;
}

.step-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 3;
    width: auto;
    padding: 0 4px;
}

.step-title {
    margin-top: 10px;
    font-size: 14px;
    color: #999;
    transition: all 0.4s ease;
}

.step-wrapper.later .step-title {
    color: #999;
}

.step-wrapper.active .step-title {
    color: var(--projectMainAccent_Color);
    font-weight: bold;
}

.step-wrapper.passed .step-title {
    color: #6c757d;
}


/* --- Panel Containers (تغییرات اصلی اینجا هستند) --- */

.stepper-panels-container {
    position: relative;
    overflow: hidden; /* جلوگیری از اسکرول‌های ناخواسته */
    min-height: 150px;
}

.stepper-panels-wrapper {
    /* display: flex و transition حذف شدند چون دیگر نیازی به اسلاید افقی نیست */
}

.stepper-panel {
    padding: 20px;
    display: none; /* <<<< تغییر کلیدی: همه پنل‌ها به طور پیش‌فرض مخفی هستند */
    gap: 48px;
}

    /* این کلاس جدید، پنل فعال را نمایش می‌دهد و انیمیشن می‌دهد */
    .stepper-panel.active {
        display: grid; /* یا هر display دیگری که نیاز دارید (flex, block, etc.) */
        animation: fadeIn 0.4s ease-out;
    }

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.step-wrapper[aria-disabled="true"] {
    pointer-events: none;
    cursor: not-allowed;
}

/* --- Media Queries (بدون تغییر) --- */
@media only screen and (max-width: 767px) {
    .step-title {
        display: none;
    }

    .step-wrapper.active .step-title {
        display: flex;
    }

    .step-wrapper .StepperButton_Layer1 .StepperButton_Layer2 {
        width: 20px;
        height: 20px;
    }

    .stepper-progress-container::before {
        top: 22px;
        height: 2px;
        left: 36px;
        right: 36px;
    }

    #progress-bar-fill {
        top: 22px;
        height: 2px;
        left: 36px;
    }

    html[dir="rtl"] #progress-bar-fill {
        right: 36px;
    }
}

/*#endregion stepperProgress*/



/*#region ErrorPage*/

.error-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 20px;
    margin: auto;
}

.error-content-section {
    /*flex: 1 1 350px;*/
}

.error-card-custom {
    width: 100%;
    max-width: 950px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 40px;
    border-radius: 30px;
    gap: 30px;
    background-color: var(--BackgroundColor_Color);
    position: relative;
}

/* استایل ویدئو */
.video-wrapper-custom {
    width: 100%;
    height: 320px;
    border-radius: 25px;
    overflow: hidden;
    position: relative;
    border: 6px solid var(--BackgroundColor_Color);
}

    .video-wrapper-custom video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.9;
    }

/* --- استایل متن سه بعدی نئومورفیک (جایگزین تصویر) --- */
.visual-error-text {
    font-weight: 900; /* Black / ExtraBold */
    font-size: 80px; /* سایز بزرگ */
    /*line-height: 1;*/
    /* رنگ متن همرنگ پس زمینه است تا افکت برجستگی ایجاد شود */
    color: var(--BackgroundColor_Color);
    /* استفاده از فیلتر سایه موجود در CSS شما برای ایجاد حالت برجسته و سه بعدی */
    /* ترکیب سایه روشن و تیره برای حجم دادن (Topol) */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1), -1px -1px 2px rgba(255,255,255,0.8);
    filter: drop-shadow(8px 8px 12px var(--NeoShadow_Color)) drop-shadow(-8px -8px 12px var(--White_Color));
    pointer-events: none; /* تا جلوی کلیک ویدئو را نگیرد */
    /* انیمیشن شناور */
    animation: floatText 5s ease-in-out infinite;
}

/* در زبان فارسی/عربی فونت وزیر استفاده شود تا ضخیم دیده شود */
:lang(fa) .visual-error-text, :lang(ar) .visual-error-text {
    font-weight: 900;
}

@keyframes floatText {
    0%, 100% {
        transform: translateY(0) rotate(-2deg);
    }

    50% {
        transform: translateY(-15px) rotate(2deg);
    }
}

@media (max-width: 991px) {
    .error-card-custom {
        flex-direction: column-reverse;
        text-align: center;
        padding: 25px;
    }

    .visual-error-text {
        font-size: 60px;
    }

    @keyframes floatTextMobile {
        0%, 100% {
            transform: translateX(50%) translateY(0);
        }

        50% {
            transform: translateX(50%) translateY(-10px);
        }
    }
}

/*#endregion ErrorPages*/