.SliderTransparentBack { position: absolute; top: 0; width: 100%; height: 100vh; cursor: default ; z-index: -1 ; }
.SliderTransparentBack2 { position: fixed; top: 0; right: 0; width: 100% ; height: 100vh; padding: 10px; background-color: rgba(0, 0, 0, 0.5); box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); z-index: -1 }


.NavBarTopBox0 { position: fixed; top: 0; right: 0; width: 100%; max-height: 90px ; z-index: 5; padding: 2rem 1rem 1.5rem; background-color: rgb(201, 61, 61); }









.NavBarBottomBox0 { position: fixed; bottom: 0; right: 0; width: 100%; height: fit-content ; z-index: 7; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); }
.MainNavBtnSection { width: 100%; display: flex ; flex-wrap: wrap; justify-content: center; align-items: center; height: 85px; transition-duration: 0.3s; padding: 10px 0 20px ; }
.MainNavBtnSectionExpand { width: 100%; display: flex ; flex-wrap: wrap; justify-content: center; height: fit-content; transition-duration: 0.3s; padding: 5px 0 20px ; }


.NavigationSliderBtnIconsBox0 { float: left; position: relative; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border: solid 1px rgba(255, 60, 0, 0);  }
.NavigationSliderBtnIconsBox { height: 20px; width: 20px; display: flex; justify-content: center; align-items: center; background-color: rgba(69, 230, 0, 0); }

.NavigationSliderBtnPhotoIconsBox{ float: left; height: 30px;  width: 30px ; display: flex; justify-content: center; align-items: center; overflow: hidden ; border-radius: 500px; margin: 0; }
.NavigationSliderBtnPhotoIcon { height: 105%; opacity: 0.6 ; }


.NavigationSliderBtnIndicator2 { position: absolute; top: 0 ; left: 0 ; width: 100%; height: 100%; display: flex; justify-content: center; color: rgb(200, 0, 0); font-weight: 600; background-color: rgba(200, 0, 0, 0); padding: 7% 0 0 ; font-size: 0.9rem; }

.NavigationSliderBtnIconsIcon { height: 100%; opacity: 0.3 ;  }
.NavigationSliderBtnIconsIconActive { height: 100%; opacity: 1 ; filter: invert( 100% ); }

.NavigationSliderBtnIconPhoto { height: 100%; opacity: 0.3 ;  }
.NavigationSliderBtnIconsIconPhotoActive { height: 100%; opacity: 1 ; }


.NavigationSliderBtnIconsName { position: absolute; bottom: 2px; width: 100%; text-align: center; font-size: 9.5px ; color: rgba(0, 0, 0, 0.5 );  }

.MainNavMoreBtn { float: left; width: 100%; height: 30px; background-color: rgb(255, 255, 255);  display: flex; justify-content: center; align-items: center;  }
.MainNavMoreBtnIcon { height: 80%; }










.NavigationMainBottom { position: fixed; bottom: 0; left: 0; width: 100%; display: flex; justify-content: center; z-index: 1 ; }
.NavigationMainBottomBox { background-color: rgb(255, 255, 255); width: 100%;  padding: 5px ; box-shadow: 0 0 7px rgba(0, 0, 0, 0.8); display: flex; justify-content: center; }
.NavigationMainBtnsCommon { float: left; height: 50px; width: 100%; display: flex; justify-content: center; align-items: center; padding: 0 20px 0 ; }

.NavigationMainBtnsDeactive {  color: rgb(0, 0, 0); }
.NavigationMainBtnsActive { color: rgb(255, 255, 255); background-color: black; }

















.MoreButtonBox { position: absolute; top: 0px ; right: 0; padding: 10px ;  width: 40px; height: 40px; background-color: rgba(123, 50, 50, 0); border-radius: 10px; display: flex; align-items: center;  text-align: center; justify-content: center; }
.MoreButtonImage { height: 80%; }












.NavigationSliderBtnIconsBoxWithProPic { height: 50px; width: 50px; padding: 11px ; border-radius: 100px; display: flex; justify-content: center; align-items: center; overflow: hidden; margin: 0 1rem 0 ;
    background-color: rgb(222, 229, 240); 
    box-shadow: inset 3px 3px 10px rgba(0, 0, 0, 0.3 ) ,  inset -3px -3px 10px rgba(255, 255, 255, 0.95) , 3px 3px 5px rgba(0, 0, 0, 0.3 ) ; border: solid 0.1px rgba(255, 255, 255, 0.9) ; 
}
.NavigationSliderBtnIconsIconWithProPic { height: 200%; }











/* .ToolsBtnBox0 { position: relative; float: left; width: 300px ; height: 100px ; padding: 30px 20px 20px ; margin: 2px; text-align: left ; background-color: rgba(255, 255, 255, 0.5); border-radius: 0px ; font-size: 1.3rem; font-weight: 600; transition-duration: 0.3s; display: flex; }
.ToolsBtnIconBox { width: 25px; height: 25px; display: flex; justify-content: center; align-content: center; margin-right: 15px ; }
.ToolsBtnIcon { height: 100%; }
.ToolsBtnName { font-size: 1.3rem; font-weight: 600; width: 100%; margin: 0 0 3px ; }
.ToolsBtnDescription { width: 100%; font-size: 0.8rem ;  }
.ToolsBtnIndicator { position: absolute; top: 7px ; right: 7px ; color: rgb(255, 255, 255); font-weight: 600 ; background-color: rgb(199, 0, 0); border-radius: 5px; font-size: 0.8rem; height: 1.2rem; min-width: 1.2rem ; display: flex; justify-content: center; align-content: center; padding-left: 4px; padding-right: 4px; } */

.ToolsBtnBox0 { position: relative; float: left; width: 110px ; height: 110px ; margin: 0 1% 3vh;  background-color: rgba(0, 0, 0, 0);  display: flex; align-items: center;  flex-direction: column; }

.ToolsBtnIconBox { width: 60% ; height: 60% ; display: flex; justify-content: center; align-content: center; bottom: -100px; border-radius: 50% ; background-color: rgba(0, 0, 0, 0.05 );  padding: 15% ; margin: 0 0 0.5rem ; }
.ToolsBtnIcon { height: 100%; }
.ToolsBtnName { float: left; font-size: 1.1rem;  width: 100%; margin: 0 0 7px ; text-align: center; font-weight: 600; }
.ToolsBtnDescription { width: 100%; font-size: 0.8rem ; text-align: center; }
















.NavigationSliderBtnIconsBox2 { 
    height: 45px; width: 45px; padding: 12px ; border-radius: 100px; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 7px rgba(0, 0, 0, 0.3); background-image: linear-gradient( 180deg , rgb(255, 255, 255), rgb(255, 255, 255) );
}







.NavigationSliderBtnIconsBox21 { position: absolute; bottom: 20px; right: 0; height: 35px; width: 100%; padding: 8px ;  display: flex; justify-content: center; align-items: center; box-shadow: 0 0 5px rgba(0, 0, 0, 0); }

.NavigationSliderBtnIconsBox3 { position: fixed; bottom: 3%; right: 5%; height: 35px; width: 35px; padding: 8px ; border-radius: 100px; display: flex; justify-content: center; align-items: center; }

.NavigationSliderBtnIconsIcon2 { height: 60%; opacity: 1; }

.NavigationSliderName { width: 100%; margin: 10px 0 60px ; text-align: center; font-weight: 600; }

.SliderTitle { font-size: 40px; width: 100% ; }
.SliderSubTitle { font-size: 18px; width: 100% ; }
















/* Website Navigation Slider */
.NavigationSliderBase { height: 100vh; width: 100%; transition-duration: 0.07s;  z-index: 100 ; }
.NavigationSliderOpen { position: fixed; top: 0; right: 0 ; }
.NavigationSliderClose { position: fixed; top: 0; right: -100% ; }

.NavigationSliderInnerBox { position: absolute; bottom: 0; left: 0; background-color: rgb(84, 136, 200); height: fit-content; width: 100%; padding: 40px; display: flex; align-items: center; justify-content: center; }

.NavigationSliderTransparentBack { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; cursor: pointer ; background-color: rgba(0, 0, 0, 0) ; z-index: -1; 
    /* background-image: linear-gradient( 90deg , rgba(255, 0, 0, 0) , rgba(0, 0, 0, 0) ); */
}














/* NavigationSlider */
.NavigationSliderBox { position: fixed; top: 0; right: -100% ; width: 30%; height: 100vh; box-shadow: 0 0 7px rgba(0, 0, 0, 0.5 ) ; background-color: rgb(10, 10, 10);  border-radius: 0 ; z-index: 20; transition-duration: 0.1s; }
.NavigationSliderBack { display: none ; }

.NavigationSliderBoxOpen { right: 0% ; }
.NavigationSliderBackOpen { position: fixed; top: 0; right: 0; width: 100%; height: 100vh; cursor: pointer ; background-color: rgba(0, 0, 0, 0) ; z-index: 19 ; }

.NavigationSliderInner { position: absolute; top: 0; right: 0; height: 90% ; width: 100%; overflow-y: scroll; background-color: rgba(0, 255, 255, 0); padding: 40px 20px 40px ; display: flex; flex-direction: column; }


.NavigationSliderSections { padding: 10px 20px 20px ; border-radius: 10px; background-color: rgba(235, 235, 235, 0.05) ; width: 100% ; margin: 0 0 5px ; display: flex; justify-content: left; flex-wrap: wrap; }
.NavigationSliderSectionsTitles { font-size: 0.9rem ; text-align: left; width: 100% ; margin-bottom: 20px ; color: rgba(255, 255, 255, 0.5); font-weight: 200; }








/* Nav bar Bottom */
.AppNavTopPageLogo { height: 17px ; width: auto ; margin-right: 20px ; }

/* .BurgerBtnBox { display: none ; } */
/* .BurgerBtnBox { position: fixed; top: 1.5rem ; right: 2% ; display: flex; align-items: center; justify-content: center; width: fit-content; height: 2.5rem; border-radius: 0.5rem ; z-index: 21 ;  background-color: rgba(107, 107, 107, 0); } */
/* .BurgerBtnBox { position: fixed ; top: 1rem ; right: 1rem ; display: flex; justify-content: center ; align-items: center; width: 4rem ; height: 4rem ; box-shadow: 0 0 7px rgba(0, 0, 0, 0.3) ; z-index: 10 ; border-radius: 10rem ; } */


.ToolBtnBox { position: fixed; top: 5px; right: 60px ; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 500px ; z-index: 3 ; background-color: rgba(0, 0, 0, 0); margin-left: 15px; }

.PublicBtnBox { position: fixed; top: 5px; right: 100px ; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 500px ; z-index: 3 ; background-color: rgba(0, 0, 0, 0); margin-left: 15px; }


















/* Navigation */
.PageNameBox { position: fixed ; top: 0 ; left: 0 ; width: 100%; height: 3.5rem; z-index: 9 ; padding: 0rem 1.5rem 0rem ; display: flex; align-items: center; }
.PageName { font-weight: 600; text-transform: uppercase ; text-align: left ; font-size: 1.2rem; }



.AccountButton { display: flex; align-items: center; justify-content: center; position: fixed; top: 1.2rem; right: 1rem ; width: 34px; height: 34px; border-radius: 500px ; z-index: 10 ; background-color: rgba(0, 0, 0, 0);  }

.BurgerBtnBox { display: flex; align-items: center; justify-content: center; position: fixed; top: 1.2rem; right: 5rem ; width: 34px; height: 34px; border-radius: 500px ; z-index: 10 ; background-color: rgba(0, 0, 0, 0);  }
.BurgerBtnBoxNav { display: flex; align-items: center; justify-content: right; position: fixed; top: 1rem; right: 8rem ; width: 60%; height: 34px; z-index: 10 ; overflow-x: hidden ; }
.BurgerActionButton { position: fixed ; bottom: 3rem ; right: 1.5rem ; z-index: 10 ; }



.InfoButtonPos { position: fixed ; top: 0; right: 4.2rem ; z-index: 10 ; }

.SecondaryNavBar { position: fixed ; bottom: 7rem ; right: 1.5rem ;  display: flex; flex-direction: column ; width: fit-content; height: fit-content ; box-shadow: 0 0 7px rgba(0, 0, 0, 0) ; z-index: 10 ; }
.SecondaryNavBarButtons { background-color: rgba(121, 121, 121, 0.515) ; }


.AppNavTopMain { position: fixed ; top: 0 ; left: 50% ; transform: translate( -50% , 0 ); width: fit-content ; height: 3.6rem; box-shadow: 0 0 7px rgba(0, 0, 0, 0) ; z-index: 9 ; display: flex; justify-content: center; align-items: center ;  }
.AppNavTopMain2 { display: none ; }

.SecondaryTopNavBar { position: fixed ; top: 0.2rem ; right: 4rem ;  display: flex; flex-direction: row ; width: fit-content; height: fit-content ; box-shadow: 0 0 7px rgba(0, 0, 0, 0) ; z-index: 10 ; }


.AppNavBottom { position: fixed ; top: 15vh ; left: 0.5rem ; height: 28rem; box-shadow: 0 0 7px rgba(0, 0, 0, 0) ; z-index: 8 ; display: flex; align-items: center; flex-direction: column; padding: 1rem 1rem 1rem ; border-radius: 100rem; }


.NavBarBottomLeft { position: fixed ; bottom: 3rem ; left: 2rem ;display: flex; flex-direction: column; width: fit-content; height: fit-content ; box-shadow: 0 0 7px rgba(0, 0, 0, 0) ; z-index: 11 ; border-radius: 5rem ; padding: 0.7rem 0 0.7rem ; }






.NavBtnActive { 
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.4 ) ;
    /* background-color: rgba(144, 144, 144, 0.2 ) */
    /* background-image: linear-gradient( 180deg , rgba(200, 27, 0, 0.7) , rgba(204, 41, 0, 0.527) )  */
}




















/* .SideBtnBox { position: fixed; top: 0px ; right: 5% ; width: fit-content ; height: 45px ;  z-index: 4 ; background-color: rgba(199, 24, 24, 0); padding: 0 3% 0 ; display: flex ;  justify-content: right; align-items: center; box-shadow: 0 0 7px rgba(117, 17, 17, 0) ;  } */
.SideBtnBox { display: none; }

.TempBottomNav { position: fixed; top: 0 ; right: 0 ; width: 80%; height: 45px ; box-shadow: 0 0 7px rgba(0, 0, 0, 0) ; display: flex; justify-content: right; align-items: center;  z-index: 7; padding: 0 10px 0 ; }

/* .AppNavTop2 { position: fixed ; top: 0; left: 0; float: left; background-color: rgb(133, 60, 60); display: flex; justify-content: right; height: 60px ; width: 100%;  box-shadow: 0 0 7px rgba(0, 0, 0, 0.7 ) ; z-index: 2 ; padding: 0 3% 0 ; }
.AppNavTop3 { position: fixed ; top: 0; left: 0; float: left; background-color: rgb(255, 255, 255); display: flex; justify-content: right; height: 60px ; width: 100%;  box-shadow: 0 0 7px rgba(0, 0, 0, 0.7 ) ; z-index: 2 ; padding: 0 3% 0 ; } */
/* .BurgerBtnBox { display: none;  } */




/* .AppNavBottom { display: none; } */
.AppNavBtns { font-weight: 600 ; background-color: rgba(138, 37, 37, 0); color: rgb(0, 0, 0); display: flex; justify-content: center ; align-items: center; font-size: 1rem ; padding: 0 14px 0 ; }





.NavigationSliderBtnsBox00 { position: relative; float: left; width: 100% ; height: fit-content; border-radius: 5px ; display: flex; flex-direction: row; display: flex ; align-items: center ;  }
.NavigationSliderBtnsBox0 { position: relative; float: left; width: 100% ; height: 100%; padding: 0.5rem 0 0.5rem ; border-radius: 0.5rem ; transition-duration: 0.3s; margin-right: 2px ; }
.NavigationSliderMoreBtnsBox { position: relative; float: right; width: fit-content ; height: 100%; border-radius: 500px ; text-align: right ; }


.NavigationSliderBtnsIconBox {  height: 1.2rem ; margin-right: 20px ; }
.NavigationSliderBtnsIcon { height: 100%; opacity: 1 ; }

.NavigationSliderBtnsIconBox1 { display: flex; align-items: center; width: 100%; height: 1.7rem ; }
.NavigationSliderBtnsBox02 { position: relative; float: left; width: fit-content ; padding: 0.5rem 10px 0.5rem ; border-radius: 100px ; transition-duration: 0.3s; margin: 0.5rem ; }
.NavigationSliderBtnsName2 { width: 100%; font-size: 0.9rem ;}
.NavigationSliderMoreIcon { height: 0.9rem ; }





.NavigationSliderBox772 { position: relative ; float: right; height: 100vh; width: 35%; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5 ) ; padding: 30px 4% 100px ; border-radius: 0px ; display: flex; flex-direction: column; overflow-y: scroll ; }
.NavigationSliderBox77 { position: relative ; float: right; height: 100vh; width: 35%; box-shadow: 0 0 15px rgba(0, 0, 0, 0.5 ) ; padding: 30px 4% 100px ; border-radius: 0px ; display: flex; flex-direction: column; overflow-y: scroll ; }




.RemovePhotoBtn { position: absolute ; bottom: 1rem ; left: 0 ;  }



.WebsiteSliderHeadingBox { position: relative ; width: 100% ; height: fit-content ; }
.WebsiteSliderLogoBox { position: absolute ; top: -1rem ; left : 5rem ; width: 3rem ; height: 3rem ; z-index: 1; border-radius: 100%; }
.WebsiteSliderPhotoBox { width: 7rem; height: 7rem; overflow: hidden; display: flex; justify-content: center ; align-items: center ; border-radius: 50%; box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0) ;  }

.WebsiteSliderButtonBox { width: 100%; height: fit-content ; display: flex ; justify-content: right ; z-index: 1 ; }


.WebsiteSliderPhoto { height: 100% ;  }
.WebsiteSliderLogo { width: 100% ; padding: 0.3rem ; }















/* .TopRightBtn { position: fixed; top: 30px ; left: 20px; width: 40px; height: 40px; padding: 8px ; display: flex; align-items: center; justify-content: center;  border-radius: 10rem; box-shadow:  0 0 7px rgba(0, 0, 0, 0.5 ); z-index: 1 ; background-color: rgb(255, 255, 255); } */

.TopRight { position: fixed ; top: 20px ; right: 20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;  border-radius: 50% ; box-shadow:  0 0 7px rgba(0, 0, 0, 0.3); z-index: 1 ; background-color: rgb(0, 0, 0); padding: 10px ; margin: 0 0 6px ; }
.TopLeft { position: fixed ; top: 20px ; left: 20px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;  border-radius: 50% ; box-shadow:  0 0 7px rgba(0, 0, 0, 0.3); z-index: 1 ; background-color: rgb(0, 0, 0); padding: 10px ; margin: 0 0 6px ; }




.BCommon2 { position: relative ; float: left; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; flex-direction: column;  border-radius:50% ; z-index: 1 ; padding: 0px ; margin: 0 0 0 ; background-color: rgba(0, 0, 0, 0);  box-shadow:  0 0 7px rgba(0, 0, 0, 0);
}
    
.BCommon3 { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50% ; z-index: 1 ; background-color: rgba(255, 255, 255, 0.1);  box-shadow:  0 0 7px rgba(0, 0, 0, 0); }

.BCommon4 { position: relative ; float: left; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; flex-direction: column;  border-radius:
    10px ; z-index: 1 ; padding: 0px ; margin: 0 0 0 ;  background-color: rgba(240, 240, 240, 0);  box-shadow:  0 0 7px rgba(0, 0, 0, 0); }


    

.BGBlack { background-color: black; }
.BGGrey { background-color: rgba(0, 0, 0, 0.6); }


.T20 { top: 20px;  }


/* .B10 { bottom: 440px; }
.B9 { bottom: 400px;  }
.B8 { bottom: 360px;  }
.B7 { bottom: 320px;  }
.B6 { bottom: 280px;  }
.B5 { bottom: 240px;  }
.B4 { bottom: 200px;  }
.B3 { bottom: 160px;  }
.B2 { bottom: 120px;  }
.B1 { bottom: 80px;  }
.B0 { bottom: 40px;  } */

.SideBtnsWithIndicatorImageBox { height: 100%; width: 100%; border-radius: 50% ; overflow: hidden; display: flex; align-items: center; justify-content: center ; }
.SideBtnsWithIndicatorImage { height: 100% ;  }

.IconInvert0 { filter: invert( 0% ); }
.IconInvert100 { filter: invert( 100% ); }


.WebAppStudioBtnIndicator { position: absolute; top: -7px ; right: 20px ; color: rgb(255, 255, 255); font-weight: 600 ; background-color: rgb(199, 0, 0); border-radius: 5px; font-size: 0.8rem; height: 1.2rem; min-width: 1.2rem ; display: flex; justify-content: center; align-content: center; padding-left: 4px; padding-right: 4px; }
.ButtonWithIndicatorBox { position: relative; margin: 40px 5px 40px; }
.ButtonWithIndicator { padding: 12px 30px 12px ;  background-color: rgba(85, 85, 85, 0); border: solid 1px black; font-weight: 600; border-radius: 100px; }

.NavigationSliderBtnIconsIconActive { height: 100%; opacity: 2 ; }



.GeneralButtonBox { position: relative; float: left; width: 100%; background-color: rgba(227, 227, 227, 0); display: flex; flex-direction: row; align-items: center; }
.EditButtonBox { position: relative; float: left; width: 100%; min-height: 25px; background-color: rgba(138, 138, 138, 0); margin-bottom: 2px ; display: flex; flex-direction: row; align-items: center; padding: 10px 10px 10px ; border-radius: 5px ; }

.EditButtonBoxImage { position: relative; float: left; width: 100%; min-height: 25px; display: flex; flex-direction: row; align-items: center; justify-content: center; border-radius: 5px ; }

.EditButtonBox0 { position: absolute; top: 5px ; right: 5px ; z-index: 1 ; }
.EditButton { width: 30px; height: 30px;  cursor: pointer; background-color: rgba(0, 0, 255, 0) ; border-radius: 5px ; z-index: 1 ; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6) ; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) ;  }

/* .EditButton2Box0 { position: absolute; top: 0.5rem ; right: 0.5rem ; z-index: 1 ; }
.EditButton2 { width: 30px; height: 30px;  cursor: pointer; background-color: rgba(0, 0, 255, 0) ; border-radius: 5px ; z-index: 2 ; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6) ; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) ;  } */

.DeleteButton { position: absolute; top: 5px ; right: 40px ; width: 30px; height: 30px;  cursor: pointer; background-color: rgba(0, 0, 255, 0) ; border-radius: 5px ; z-index: 2 ; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6) ; box-shadow: 0 0 3px rgba(0, 0, 0, 0.5) ;  }
.EditButtonIcon { height: 40% ; }






.PosButtonBox { position: absolute ; bottom: -5rem ; left: 50% ; width: fit-content; height: fit-content ; transform: translate( -50% , 0 ); background-color: rgba(0, 0, 255, 0) ; padding: 0 0 1rem ; display: flex; flex-direction: row ; }
/* .PosButtonBox { position: absolute ; bottom: 0.5rem ; left: 50% ; transform: translate( -50% , 0 ); display: flex ; flex-direction: row ;  } */
.PosButton2 { width: 40px ; height: 40px ; border-radius: 0.5rem ; display: flex ; justify-content: center ; align-items: center; cursor: pointer ; margin: 0.09rem ; }
.PosButtonIcon { height: 50% ; }
.PosButton3 { width: 40px ; }
.PosButton4 { width: 40px ; }
/* .PosButton3 { position: absolute ; top: 1rem ; right: 1rem ; }
.PosButton4 { position: absolute ; bottom: 0 ; right: 1rem ; } */



.CanvasUI { position: relative; float: left ; margin: 0 0 5px ; border: solid 1px rgba(145, 145, 145, 0.3) ;  }


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


.PhotoInputButton { width: fit-content;  cursor: pointer; font-size: 1.7rem ; padding: 1.5rem ; display: flex; align-items: center; justify-content: center ; border-radius: 5px ; margin-top: 30vh ; background-color: rgba(127, 255, 212, 0) }


.GlobalButtonBox { width: 100% ; float: left; height: fit-content; background-color: rgba(136, 136, 136, 0); margin-bottom: 5px ; }



.PhotoInEditor { float: left; position: relative; width: 300px ; height: 180px ; display: flex ; justify-content: center; align-items: center; border-radius: 0px ; margin: 0 0 5px ; cursor: pointer; border-radius: 0px ; }

.PhotoInEditor125 { float: left; position: relative; width: 120px ; height: 72px ;  display: flex ; justify-content: center; align-items: center; border-radius: 0px ; background-color: rgba(136, 136, 136, 0.3 ) ; margin: 0.5px ;  cursor: pointer; border-radius: 0px ; }









.MainBtnsWithIndicatorBox0 { position: relative; height: 50px ; min-width: 40px; margin: 0rem 0.2rem 1rem ; border-radius: 5px ; border: solid 0.05px rgba(255, 255, 255, 0) ; display: flex ; justify-content: center; align-items: center ; flex-direction: column; }
.MainBtnsWithIndicator { position: absolute; top: 2% ; right: 0 ; color: rgb(200, 0, 0); background-color: rgba(200, 0, 0, 0); border-radius: 10px; font-size: 0.7rem; height: 10px; min-width: 100% ; display: flex; justify-content: center; align-items: center;  font-weight: 800; }

.MainBtnsWithIndicatorIconBox0 { float: left; height: 1.5rem ; width: 1.5rem;  background-color: rgba(185, 59, 59, 0) ; border-radius: 50%; display: flex; align-items: center; justify-content: center ; }
.MainBtnsWithIndicatorIconBox { float: left; height: 25px ; width: 25px; display: flex; align-items: center; justify-content: center ; background-color: rgba(255, 255, 255, 0.1) ; border-radius: 50%; }
.MainBtnsWithIndicatorIcon { height: 50% ; }

.MainBtnsWithIndicatorIcon3 { height: 100% ; border-radius: 0.3rem ; }
.MainBtnsWithIndicatorIconBox2 { float: left; height: 22px ; width: 22px ; border-radius: 50%; overflow: hidden ; display: flex; align-items: center; justify-content: center ; }
.MainBtnsWithIndicatorIcon2 { height: 100% ; }

/* .MainBtnsWithIndictorName { display: none; } */
.MainBtnsWithIndictorName { font-size: 0.7rem ; justify-content: center; align-items: center; text-align: left; padding-top: 0.3rem ; }

.MainBtnsWithIndicatorBox0Active { background-color: rgb(255, 255, 255) ; }
.MainBtnsWithIndictorNameActive { color: white; }
.MainBtnsWithIndicatorIconActive {  opacity: 1 ;  filter: invert( 100% ) }
.MainBtnsWithIndicatorIcon2Active {  opacity: 1 ; }






.MainBtnsPhotoIconBox { float: left; height: 2rem ; width: 2rem; display: flex; align-items: center; justify-content: center ; border-radius: 50%; overflow: hidden; border: solid 0.1px rgba(103, 103, 103, 0)  ; }






.HideAllButtonsExceptInfoButton { display: contents ; }






.SideBtnsWithIndicatorBox0 { position: relative; float: left; width: fit-content ; height: fit-content ; margin: 1.7rem 0 0.3rem ; padding-bottom: 1rem ; background-color: rgba(184, 94, 94, 0) ; border-radius: 5px; display: flex; flex-direction: column; align-items: center; }
.SideBtnIndicator { position: absolute; top: -0.5rem ; right: -0.1rem ; color: rgb(255, 255, 255); min-width: 1.3rem; height: 1.3rem ; border-radius: 20rem ; font-weight: 600 ;  background-color: rgb(200, 0, 0); text-align: center;  font-size: 0.7rem ; z-index: 2 ; border-radius: 50% ; display: flex; align-items: center; justify-content: center ; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4 ) ; }
.BCommon { float: left; width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; border-radius: 25% ; z-index: 0 ; box-shadow:  0 3px 7px rgba(0, 0, 0, 0.5); }
.SideBtnsWithIndicatorIconBox { height: 100% ; display: flex; align-items: center ; justify-content: center ; background-color: rgba(0, 0, 255, 0); }
.SideBtnsWithIndicatorIcon { height: 40%; opacity: 0.9 ; }
.SideBtnsWithIndicatorName { float: left; width: fit-content ; margin-top: 0.8rem ; background-color: rgba(0, 0, 255, 0); display: flex; justify-content: center; align-items: center;  font-size: 0.9rem ; font-weight: 400 ; text-align: center; border-radius: 5px; }


.SideBtnsWithIndicatorBox02 { position: relative; float: left; width: 33% ; height: 90px ; margin: 0.15% ; padding: 1rem; border-radius: 0; display: flex; flex-direction: column; align-items: center; }
.SideBtnsWithIndicatorBG2 { position: absolute; top: 0 ; right: 0 ; width: 100%; height: 100% ; opacity: 0.1 ; }
.SideBtnsWithIndicatorIconBox2 { height: 30px ; display: flex; align-items: center ; justify-content: center ; background-color: rgba(0, 0, 255, 0); }
.SideBtnsWithIndicatorIcon2 { height: 70%; }
.SideBtnsWithIndicatorName2 { float: left; width: 100% ; margin-top: 0.8rem ; font-size: 0.9rem ; text-align: center; }
.SideBtnIndicator2 { position: absolute; top: 0.2rem ; right: 0.2rem ; color: rgb(255, 255, 255); min-width: 1.3rem; height: 1.3rem ; border-radius: 20rem ; font-weight: 600 ;  background-color: rgb(200, 0, 0); text-align: center;  font-size: 0.7rem ; z-index: 2 ; border-radius: 50% ; display: flex; align-items: center; justify-content: center ; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4 ) ; }








.TopBtnsWithIndicatorBox0 { position: relative; width: fit-content; height: fit-content; display: flex ; justify-content: center; align-items: center; flex-direction: column; margin: 0 8px 0 ; background-color: rgba(28, 161, 77, 0) ; padding-top: 0px ; }

.TopBtnsWithIndicatorImageBox { position: absolute; height: 28px ; display: flex; align-items: center; justify-content: center ; background-color: rgba(0, 0, 255, 0); }
.TopBtnsWithIndicatorImage { height: 55% ;  }
.ToolsBtnIndicator { position: absolute; top: -10px ; right: 0px ; color: rgb(200, 0, 0); width: 100%; font-weight: 800 ; background-color: rgba(200, 0, 0, 0); text-align: center;  font-size: 0.7rem ; }
.ToolsBtnIndicator2 { position: absolute; top: -3px ; right: 0px ; color: rgb(200, 0, 0); width: 100%; font-weight: 800 ; background-color: rgba(200, 0, 0, 0); text-align: center;  font-size: 0.7rem ; }

.TopBtnsWithIndicatorIconBox { float: left; height: 17px ; width: 17px; display: flex; align-items: center; justify-content: center ; background-color: rgba(255, 255, 255, 0.1) ; border-radius: 50%; overflow: hidden; }
.TopBtnsWithIndicatorIcon { height: 100% ; }
.TopBtnsWithIndicatorName { float: left; width: fit-content ; background-color: rgba(0, 0, 255, 0); display: flex; justify-content: center; align-items: center;  font-size: 0.9rem ; font-weight: 600 ; color: rgb(0, 0, 0);  text-align: center; border-radius: 5px; padding: 0 5px 0 ; }
.TopBtnsWithIndicatorName:hover { color: rgb(200, 0, 0) ; }













.LocalPopup { position: absolute; bottom: 50px ; left: 25%; width: 200px ; height: fit-content; padding: 10px; background-color: rgb(125, 140, 120); box-shadow: 0 0 7px rgba(0, 0, 0, 0.4); border-radius: 10px ; z-index: 20 }

.LocalPopup2 { position: fixed; top: 0 ; right: 0; width: 100% ; height: fit-content; padding: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);  border-radius: 0 ; z-index: 300 ; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; }

.LocalPopup2Text { float: left; font-size: 1.5rem ; font-weight: 600 ; text-align: center; width: 100% ;  }








/* .ExitEditModeButton { position: fixed; top: 0 ; left: 50% ; transform: translate( -50% , 0 ); width: fit-content ; padding: 0.5rem 1.5rem 0.5rem  ; background-color: rgb(200, 0, 0) ; text-align: center; z-index: 1 ; color: white ; font-weight: 600; border-radius: 0 0 10px 10px ;  } */





/* .JustVisitingTag { position: fixed ; top: 2.5rem ; left: 50% ;  transform: translate( -50% , 0 ); width: fit-content;  padding: 7px 20px 10px ; color: rgb(255, 255, 255) ; display: flex; align-content: center; justify-content: center; background-color: rgba(200, 0, 0, 0); color: red ; font: 600 ; box-shadow: 0 0 7px rgba(0, 0, 0, 0);  font-weight: 600; z-index: 1;border-radius: 0 0 10px 10px ;  } */





.CloseButton1 { position: absolute; top: 0.7rem; right: 1rem; height: 3rem; width: 3rem; border-radius: 100px;  font-size: 1.5rem; display: flex; justify-content: center; align-items: center; z-index: 2 ; }

.BackButton { position: fixed; top: 0.5rem; left: 1rem; height: 3rem; width: 3rem; border-radius: 100px; padding: 0.5rem ; display: flex; justify-content: center; align-items: center; z-index: 2 ; }

.CloseButton3 { height: 30px; width: 30px; border-radius: 100px;  font-size: 16px; display: flex; justify-content: center; align-items: center;  }


.FloatingBtnBase { position: fixed; right: 15px; height: 40px; width: 40px; border-radius: 100px ; display: flex; justify-content: center; align-items: center; box-shadow: 0 0 5px rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0.1 ); z-index: 6 ;
}


/* .CloseButton { position: fixed; top: 10px ; right: 10px ; width: 60px; height: 60px; border-radius: 50%; display: flex; justify-content: center; align-items: center; z-index: 10; padding: 0px; font-size: 1.5rem ; } */

.CloseButton { position: absolute; top: 0.4rem; right: 0.7rem; height: 2.8rem; width: 3rem; border-radius: 100px; padding: 0.7rem ; display: flex; justify-content: center; align-items: center; z-index: 2 ; }


.UploadButton { height: 4rem ; width: auto ; }


.Button2 { position: absolute; top: 5vh ; left: 48% ; height: 35px; width: 35px; padding: 8px ; border-radius: 100px; display: flex; justify-content: center; align-items: center; box-shadow:  0 0 5px rgba(0, 0, 0, 0.3); background-color: rgba(255, 255, 255, 0.2 ); }
.Button2IconInvert { height: 65%; filter: invert( 100% );  }
.Button2Icon { height: 105%;  }





.NavigationBtnTextAndIconBox0 { position: relative; width: 50px; padding: 3px ; margin: 0 7px 0 ; display: flex; flex-direction: column;  border-radius: 10px; }
.navBtnImageBox { height: 100% ;  border-radius: 100px; display: flex; justify-content: center; align-items: center; background-color: rgba(0, 0, 0, 0); overflow: hidden; padding: 5%; }
.navBtnImage { height: 100%; }
.navBtnName { width: 100%; margin: -7px 0 4px ; text-align: center; font-size: 10px; }




.NavigationBackBtn { display: flex; justify-content: center; align-items: center; flex-direction: column;  padding: 20px; }



.navBtnImageBoxOnlyText { display: flex; justify-content: center; align-items: center; flex-direction: column;  margin: 0px 1px 0px 1px; transition-duration: 0.4s; }
.navBtnNameOnlyText { text-align: center; padding: 25px 15px 25px ; }




.NavigationWebAppSliderBtnBox { width: 100%; margin: 0px 0.5px 0px 0.5px; transition-duration: 0.4s; }
.NavigationWebAppSliderBtn { text-align: center;  padding: 20px 0 20px ; }





.Navigation_Btn2 { float: left; width: 100%; padding: 7px 10% 7px ; background-color: rgba(255, 255, 255, 0.1); margin: 0.5px 0 0.5px 0 ; display: flex; align-items: center; }
.Navigation_Btn2Icon { height: 100%; opacity: 1 ; filter: invert( 100% );  margin-right: 15px; }
.Navigation_Btn2Name { height: 100%; text-align: center;  padding: 4px 0 0 ; font-size: 11px;  }









.SliderSpacer { width: 100%; border-top: solid 0.1px rgba(255, 255, 255, 0.01) ; margin: 2vh 0 2vh;  }





.navProfilePhotoBox { position: relative; display: flex; justify-content: center; width: 40px; height: 40px; border-radius: 100px; overflow: hidden;  background-color: black; margin: 0 15px 0 15px  ; }
.navProfilePhotoBoxLarge { position: relative; display: flex; justify-content: center; width: 70px; height: 70px; border-radius: 1000px; overflow: hidden;  background-color: rgba(255, 255, 255, 0); margin: 0 0 5px  ; box-shadow: 0 0 7px rgba(0, 0, 0, 0.5);  }
.navProfilePhoto { position: absolute; top: 0; height: 100%; }
.navAddPhotoBtn { position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; background-color: rgba(226, 32, 32, 0) ; color: white; display: flex; justify-content: center; align-items: center; cursor: pointer; }
.navAddPhotoBtn:hover{ background-color: rgba(42, 134, 255, 0.3); transition-duration: 0.1s; }









/* navigation slider */
.InboxSliderBase { position: fixed;  bottom: 0; right: 0; height: 100vh; width: 100%; z-index: 200 ; transition-duration: 0.1s; cursor: pointer ; }
.InboxSliderInner { position: absolute; top: 0; right: 0; height: 100vh; width: 50%; padding: 10vh 5% 5vh ; overflow: hidden; overflow-y: scroll; box-shadow: 0 0 7px rgba(0, 0, 0, 0.7) ; cursor: default; background-color: rgb(238, 241, 245); }
.InboxSliderOpen {  right: 0; width: 100%;  }
.InboxSliderClose {  right: -100%; width: 100%; }



.InboxTopBtnsBox { width: 100%; display: flex; flex-direction: row; justify-content: center; padding: 0 20% 0 ; }
.InboxTopBtns { float: right; padding: 1.4rem 1rem 1.4rem ; width: 100%; margin: 0 0% 0;  font-weight: 600; text-align: center;  cursor: pointer;  text-transform: uppercase;  background-color: rgba(0, 0, 0, 0) ; border-bottom: solid 7px rgb(240, 240, 240); transition-duration: 0.3s; }
.InboxTopBtnsActive { border-bottom: solid 7px rgb(0, 0, 0); transition-duration: 0.3s; }
/* .InboxTopBtnsActive { background-color: black; color: white;  } */








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

@media screen and ( max-width: 1200px ) {
    .NavSliderInner2 {  width: 50%;  }
    .ButterflySliderInner{ width: 50%; }
    .NavigationSliderBox77 { width: 40%;   }
    .NavigationMainBtnsCommon { font-size: 1rem ; }

    

}

@media screen and ( max-width: 800px ) {
    .NavSliderInner2 {  width: 80%;  }
    .ButterflySliderInner{ width: 80%; }
    .MainNavBtn {  width: 100%;  }

    .InboxTopBtnsBox { padding: 0 1% 0 ; }

    .NavigationSliderBox { width: 80%;  }
    .NavigationSliderBoxOpen {  bottom: 0vh; }
    

    .SideBtnBox { display: none ;  }

    /* .MainBtnsWithIndicatorBox0 { position: relative; width: 50px ; height: 60px ; background-color: rgba(61, 119, 195, 0) ; box-shadow: 0 0 7px rgba(0, 0, 0, 0) ; margin: 0 0.5rem 0 ; border-radius: 0px ; border: solid 0.05px rgba(255, 255, 255, 0) ;  } */

    .MainBtnsWithIndicatorIconActive {  filter: invert( 0% ) }
    .MainBtnsWithIndicatorIcon2Active {  opacity: 1 ; }

    /* .AppNavTopPageName { position: fixed; bottom: 80px ; left: 5% ; width: fit-content; height: 45px ; padding: 0 0 0 ; font-size: 1.5rem; font-weight: 600; background-color: rgba(255, 255, 255, 0) ; display: flex; justify-content: center;align-items: center; z-index: 4 ; text-transform: capitalize ; color: grey; } */


    .NavigationSliderBox77 { width: 90%; padding-left: 10%; padding-right: 10%;  }
    .NavigationSliderBox772 { width: 90%;  }





    /* Navigation */
    .AppNavTopMain { top: 3.4rem; left: 0; width: 100%; transform: translate( 0 , 0 ) ; box-shadow: 0 0.7rem 0.5rem rgba(0, 0, 0, 0.2) ; }

    

    .AppNavBottom { position: fixed ; top: auto ; bottom: 0 ; left: 0; transform: translate( 0 , 0 );  width: 100%; height: fit-content; box-shadow: 0 0 7px rgba(0, 0, 0, 0) ; z-index: 10 ; padding: 2rem 2% 0.3rem ; display: flex; justify-content: center; align-items: center ; flex-direction: row; border-radius: 0 ; }


    /* .SecondaryNavBar { bottom: 7rem ; right: 0.5rem ; } */
    .NavBarBottomLeft { bottom: 7rem ; right : 0.5rem ; left: auto ; }
    .ExpressNav { display: none; }

    .HideAllButtonsExceptInfoButton { display: none ; }

    .BurgerBtnBoxNav { display: none ; }

    .SecondaryNavBar { bottom: 13rem ;  }
    .BurgerActionButton { bottom: 8rem ;  }




    /* .BurgerBtnBox { position: fixed ; top: 1rem ; right: 1rem ; display: flex; justify-content: center ; align-items: center; width: 4rem ; height: 4rem ; box-shadow: 0 0 7px rgba(0, 0, 0, 0.3) ; z-index: 10 ; border-radius: 10rem ; } */
    /* .AppNavBottom { bottom: 7vh ; right: 7% ; } */
    /* .AppNavBottom { position: fixed; bottom: 50%; left: 15%; width: 70%; background-color: rgb(255, 255, 255); padding: 10px 5% 15px ; display: flex; justify-content: center; box-shadow: 0 0 7px rgba(0, 0, 0, 0.7); border-radius: 20px 20px 0 0 ; } */
    /* .AppNavTop2 { display: none ; } */



}


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