/****************** Navbar Animated Burger Button ***********************/
.BurgerBtn {
    width: 60px;
    height: 76px;
    padding: 27px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    align-items: center;
    display: none;
    padding: 22px 0;
    width: 40px;
}
.BurgerBtn svg{
    height: 100%;
    width: 100%;
}
.BurgerBtn .line {
    fill: none;
    stroke: #131313;
    stroke-width: 8;
    transition: stroke-dasharray 400ms cubic-bezier(0.4, 0, 0.2, 1),
    stroke-dashoffset 400ms cubic-bezier(0.4, 0, 0.2, 1);
    stroke-linejoin: round;
    stroke-linecap: round;
}
.BurgerBtn .line1 {
    stroke-dasharray: 60 207;  
}
.BurgerBtn .line2 {
    stroke-dasharray: 60 60;
}
.BurgerBtn .line3 {
    stroke-dasharray: 60 207;
}
.OpenedNav .BurgerBtn .line1 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
}
.OpenedNav .BurgerBtn .line2 {
    stroke-dasharray: 1 60;
    stroke-dashoffset: -30;
}
.OpenedNav .BurgerBtn .line3 {
    stroke-dasharray: 90 207;
    stroke-dashoffset: -134;
}
@media (max-width: 992px) {
    .BurgerBtn{
        display: flex;
    }
}

.NoNav .BurgerBtn,.NoNav .NavNotifCont,.NoNav .NavCont,.NoNav .SideNav{
    display: none !important;
}

.NoNav .TopNav>nav{
    background-color: white !important;
}











/****************** Navbar Top Nav ***********************/

.TopNav{
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height: 70px;

    z-index: 10;
    
    background-color:#f8fafb;
    background-color: white;
}
.TopNav>nav{
    width: 100%;
    height: 100%;
    padding:0 0 0;

    display: flex;
    justify-content: space-between;
}


.TopNav.LandingPage{
    padding:0 20px;
}

.NavCont .BrandLogo {
    width:100%;
    padding: 10px 30px;
}
.NavCont .BrandLogo>img{
    object-position: center;
    -o-object-position: center;
    -moz-object-position: center;
}


.BrandLogo {
    padding: 10px;
    width: 118px;
    height: 70px;
    display: block;
    background-color: white;
    flex-shrink: 0;
}
.BrandLogo>img{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    -o-object-fit: contain;

    object-position: center;
    -o-object-position: center;
}
.TopNavElemsCont{
    display: flex;
    align-items: center;
    padding: 0 30px;
    gap: 15px;
}
.TopNavElemsCont>.BrandBtn{
    flex-shrink: 0;
}

@media screen and (max-width: 992px) {
    .TopNav{
        padding:0;
    }
    html[dir="rtl"] .TopNav>nav{
        padding:0 0 0 5px;
    }
    .BrandLogo {
        width: 100px;
        padding-left:20px;
        background-color: transparent;
    }
    html[dir="rtl"] .BrandLogo {
        padding-left:unset;
        padding-right:20px;
    }
    .TopNavElemsCont{
        padding: 0 20px;
        gap: 10px;
    }
}


@media screen and (max-width: 400px) {
    .BrandLogo {
        padding-left: 5px;
    }
    html[dir="rtl"] .BrandLogo {
        padding-left: unset;
        padding-right: 5px;
    }
    .TopNavElemsCont>.BrandBtn{
        font-size:12px;
    }
    
}
























/****************** MainDashboard ***********************/

/*#NavBar{
    display: none;
}*/
@media (min-width: 768px) and (max-width: 992px) {
    .MainContent {
        margin-left: 0;
        padding: 80px 16px 16px;
        padding: 70px 0 0;
    }
}
@media screen and (max-width: 992px) {
    .TopNav:not(.LandingPage) .NavCont .TopNavElemsCont{
        display: none;
    }
    .TopNav:not(.LandingPage) .NavCont{
        padding-top: 70px;
    }
    
    .TopNav:not(.LandingPage) .NavCont .BrandLogo{
        display: none;
    }
}
@media (min-width: 992px){
    .TopNav:not(.LandingPage)>nav{
        display: none;
    }
    .TopNav:not(.LandingPage){
        width: 230px;
        left:0;
    }
    html[dir="rtl"] .TopNav:not(.LandingPage){
        width: 230px;
        left:unset;
        right: 0;
    }

    .TopNav:not(.LandingPage) .TopNavElemsCont{
        display: none;
    }
    .TopNav:not(.LandingPage)>nav{
        padding: 0 20px;
    }


    .TopNav:not(.LandingPage) .NavCont .TopNavElemsCont{
        display: inline-block;
        height:80px;
        width: 100%;
        padding-top:10px;
        
    }
    .TopNav:not(.LandingPage) .NavCont .TopNavElemsCont .LangSelector{
        width: 100%;
    }
    .TopNav:not(.LandingPage) .NavCont .TopNavElemsCont .LangSelector .LangBtn{
        width: 100%;
        background-color: #f4f4f4;
        justify-content: flex-start;
        padding: 10px 14px;
    }
    .TopNav:not(.LandingPage) .NavCont .TopNavElemsCont .LangSelector .LangBtn span{
        width: 96px;
    }

    .TopNav:not(.LandingPage) .NavCont .TopNavElemsCont .LangMenu{
        width: 170px;
    }


    





    footer:not(.LandingPage){
        padding-left: 230px;
    }
    html[dir="rtl"] footer:not(.LandingPage){
        padding-left: 0;
        padding-right: 230px;
    }
}
/****************** MainDashboard ***********************/


























/****************** Navbar Top Nav Notification Popup ***********************/
.NavNotifCont{
    height: 100%;
    /*height: 80px;width: 80px;*/
    display: flex;
    position: relative;
}
.NavNotifIcon{
    width: 46px;
    height: 46px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    background-color:white;
    position: relative;
    /*-moz-border-radius: 50%;
    -khtml-border-radius: 50%;
    -webkit-border-radius: 50%;
    -o-border-radius: 50%;
    -ms-border-radius: 50%;
    border-radius: 50%;*/
    -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
    
    
    -webkit-box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.01);
    -moz-box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.01);
    box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.01);
}
.NavNotifIcon>span{
    background-color: #dc3d43;
    background-color: var(--FailedBGColor);
    color: white;
    height: 18px;
    width: 18px;
    flex-shrink: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    position: absolute;
    left: 28px;
    top: 8px;

    -moz-border-radius: 100px;
    -khtml-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;
    -ms-border-radius: 100px;
    border-radius: 100px;
}
html[dir="rtl"] .NavNotifIcon>span{
    right:28px;
    left:unset;
}
.NavNotifListCont{
    position: absolute;
    top: 80px;
    right:0;
    left:unset;
    width: 330px;
    height: 90vh;
    max-height: 350px;
    padding:0;
    -moz-border-radius: 15px;
    -khtml-border-radius: 15px;
    -webkit-border-radius: 15px;
    -o-border-radius: 15px;
    -ms-border-radius: 15px;
    border-radius: 15px;
}
html[dir="rtl"] .NavNotifListCont{
    right:unset;
    left:0;
}
@media screen and (max-width: 600px) {
    .NavNotifListCont{
        top:80px;
        left:unset;
        right: 4%;
        width: 92%;
        position: fixed;
        max-height:calc(80% - 100px);
    }
    html[dir="rtl"] .NavNotifListCont{
        right:unset;
        left:4%;
    }
}
.NavNotifList{
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: white;
    position: relative;
    z-index: 1001;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    -moz-border-radius: 15px;
    -khtml-border-radius: 15px;
    -webkit-border-radius: 15px;
    -o-border-radius: 15px;
    -ms-border-radius: 15px;
    border-radius: 15px;
}
.NavNotifList .Header{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:14px 14px 10px;
    border-bottom: 2px solid #f4f4f4;
}
.NavNotifList .Header a{
    font-size:14px;
    font-weight: 500;
    color: #7d7d7d;
    text-decoration: underline;
    padding:4px 8px;
}
.NavNotifList .Header a:hover{
    color: #626262;
}
.NavNotifList h2{
    font-size: 16px;
    font-weight: 600;
}
.NotifBody{
    width: 100%;
    height: 100%;
    overflow: auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}
.EmptyNotif{
  margin:auto;
  text-align: center;
}
.EmptyNotif p{
  font-size:16px;
  font-weight:600;
  color: black;
}
.EmptyNotif span{
  font-size:13px;
  font-weight:500;
  color: #7a7a7a;
}
.NotificationItem{
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap:10px;
  padding: 10px;
  text-decoration: none;
  background-color: white;
}
.NotificationItem+.NotificationItem{
  border-top:2px solid #f7f7f7;
}
.NotificationItem:hover{
  background-color: #f5f5f5;
}
.NotificationItem .ProfilePic{
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background-color: #ffffff;
  overflow: hidden;
  -moz-border-radius: 50%;
  -khtml-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;

}
.NotificationItem .ProfilePic>img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  -o-object-fit: cover;
}
.NotifTxtCont{
  width: 100%;
}
.NotifTxtHeader{
  display: flex;
  justify-content: space-between;
  width: 100%;

}
.NotifTxtHeader p{
  font-weight: 500;
  font-size: 15px;
}
.NotifTxtHeader span{
  font-weight: 500;
  font-size: 12px;
  color: grey;
}
.NotifTxtFooter{
  font-size: 12px;
  font-weight: 400;

}

/****************** Navbar Top Nav Language Popup ***********************/
.LangSelector{
    height: 100%;
    display: flex;
    position: relative;
}
.LangMainCont {
  position: absolute;
  top: 0;
  left: 0;
  top:100%;
  width:100%;
  height: unset;
  background-color: transparent;
  overflow: visible;
}
html[dir="rtl"] .LangMainCont {
  right: 0;
  left: unset;
}
.LangBtn {
  height: 46px;
  margin: auto;
  background-color: white;
  cursor: pointer;
  font-size: 14px;
  border: none;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 10px 24px 10px 10px;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  
  
  -webkit-box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.01);
  -moz-box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.01);
  box-shadow: 0 0 15px 10px rgba(0, 0, 0, 0.01);
}
html[dir="rtl"] .LangBtn {
  padding: 10px 10px 10px 24px;
}
.LangBtn img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  -moz-border-radius: 50%;
  -khtml-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  object-fit: cover;
  -o-object-fit: cover;
}
.LangBtn span {
  position: relative;
  font-weight: 500;
  color: #727272;  
}
.LangBtn span::after {
  content: '';
  position: absolute;
  top: calc(50% - 4px);
  right: -16px;
  width: 5px;
  height: 5px;
  border-style: solid;
  border-width: 0 0 2px 2px;
  border-color: #DFE4EA /*#637381*/;
  transform: rotate(-45deg);
}
html[dir="rtl"] .LangBtn span::after {
  right: unset;
  left: -15px;
}
.LangMenu {
  position: absolute;
  top: 0;
  right: 0;
  background-color: #fff;
  min-width:110px;
  padding: 0;
  z-index: 1002;
  -moz-border-radius: 10px;
  -khtml-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px;
  overflow: hidden;
}
html[dir="rtl"] .LangMenu {
    left: 0;
    right: unset;
}
@media screen and (max-width: 768px) {
  /*.LangMenu {
    min-width: 100px;
  }*/
}

@media(min-width: 768px) and (max-width: 992px) {
  /*.LangMenu {
    min-width: 110px;
  }*/
}

.LangMenu span {
  padding-top: 2px;
  font-weight: 500;
}
.LangMenu img {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  -moz-border-radius: 50%;
  -khtml-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  object-fit: cover;
  -o-object-fit: cover;
}
.LangMenu a {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
}
.LangMenu a:hover {
  background-color: #f0f0f0;
}


/****************** Navbar Side Nav with Links ***********************/
.SideNav{
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    max-width: 230px;
    height: 100%;
    height: calc(var(--vh, 1vh) * 100);
    background-color:white;
    padding: 70px 0px 0px;
    padding: 0px;
    z-index: -1;
}
html[dir="rtl"] .SideNav{
    right:0;
    left:unset;
}
.NavCont{
    width: 100%;
    height: 100%;
    height: calc(var(--vh, 1vh) * 100);
    padding-bottom: 10px;
    background-color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0px 0px 15px -12px #000000f2;

}
.NavLinks{
    height: 100%;
    width: 100%;
    overflow-y: auto;
    padding: 12px 0;
}

.NavLink{
    width: 100%;
    padding: 12px 15px 12px 30px;
    position: relative;
    display: flex;
    gap: 10px;
    text-decoration: none;
    color: #727272;
    justify-content: flex-start;
    align-items: center;
    font-weight: 500;
    font-size: 14px;
}
html[dir="rtl"] .NavLink{
    padding: 12px 30px 12px 15px;
}
.NavLink+.NavLink{
    margin-top: 4px;
}
.NavLink svg{
    stroke: #727272;
}
.NavLink.Active{
    color: #125cbf;
    color: var(--PrimaryBGColor);
}
.NavLink.Active svg{
    stroke: #125cbf;
    stroke: var(--PrimaryBGColor);
}
.NavLink:hover{
    background-color: #f7f7f7;
}
.NavLink.Active::before{
    content: "";
    position: absolute;
    left: 0;
    top:calc(50% - 15px);
    width: 4px;
    height: 30px;
    -moz-border-radius: 0 10px 10px 0;
    -khtml-border-radius: 0 10px 10px 0;
    -webkit-border-radius: 0 10px 10px 0;
    -o-border-radius: 0 10px 10px 0;
    -ms-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0;
    background-color: #125cbf;
    background-color: var(--PrimaryBGColor);
}
html[dir="rtl"] .NavLink.Active::before{
    left: unset;
    right: 0;
    -moz-border-radius: 10px 0 0 10px;
    -khtml-border-radius: 10px 0 0 10px;
    -webkit-border-radius: 10px 0 0 10px;
    -o-border-radius: 10px 0 0 10px;
    -ms-border-radius: 10px 0 0 10px;
    border-radius: 10px 0 0 10px;
}
.NavLink img,.NavLink svg{
    width: 25px;
    height: 25px;
}





.NavLinks.Horizontal{
    overflow-y: unset;
    display: flex;
    justify-content: center;
    padding:0 20px;
    gap:4px;
    width:100%;
}
.NavLinks.Horizontal .NavLink{
    width: unset;
    margin-top: 0px;
    padding:10px 24px;
}


.NavLinks.Horizontal .NavLink.Active::before{
    left: 0;
    bottom:0;
    top:unset;
    width: 100%;
    height: 4px;
    -moz-border-radius: 10px 10px 0 0;
    -khtml-border-radius: 10px 10px 0 0;
    -webkit-border-radius: 10px 10px 0 0;
    -o-border-radius: 10px 10px 0 0;
    -ms-border-radius: 10px 10px 0 0;
    border-radius: 10px 10px 0 0;
    background-color: #125cbf;
    background-color: var(--PrimaryBGColor);
}


@media screen and (max-width: 992px) {
    .NavLinks.Horizontal .NavLink.Active::before{
        height: 1px;
    }
}





.NavFooter{
    width: 100%;
}
/*.SideNav .ClosePopup{
    display: none;
}*/
@media screen and (max-width: 992px) {
    .SideNav{
        max-width: unset;;
    }
    .NavLinks.Horizontal{
        position: fixed;
        top:70px;
        left:0;
        background-color: white;
        width: 100%;
        height: 100%;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: 0;
        gap:0;
    }
    .NavLinks.Horizontal .NavLink{
        width: 100%;
        padding:14px 20px;
        border-bottom: 2px solid #f4f4f4;
    }
    .TopNav.OpenedNav .NavLinks.Horizontal{
        display: flex;
    }




    .SideNav{
        display: none;display: block;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        -moz-opacity: 0;
        -khtml-opacity: 0;
        opacity: 0;
        pointer-events: none;
        left:-100%;
        -webkit-transition: left 0.3s, opacity 0.3s;
        -moz-transition: left 0.3s, opacity 0.3s;
        -ms-transition: left 0.3s, opacity 0.3s;
        -o-transition: left 0.3s, opacity 0.3s;
        transition: left 0.3s, opacity 0.3s;
    }
    .OpenedNav .SideNav{
        display: block;
        pointer-events: unset;
        left:0;
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        -moz-opacity: 1;
        -khtml-opacity: 1;
        opacity: 1;
    }
    .SideNav .ClosePopup{
        display: block;
        z-index: -1;
    }
}





















.RatingStars {
    gap: 0px;
    margin-bottom: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    margin: 0 2px;
    gap: 4px;
}

.StarIcon{
    width: 28px;
    height: 28px;
    fill: var( --PrimaryBGColor);
    fill:#8BC34A !important;
    stroke: #8BC34A !important;
    stroke-width: 0px;
    stroke-linecap:round;
    stroke-linejoin:round;
}
html[dir="rtl"] .StarIcon{
    -moz-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -ms-transform: scaleX(-1);
    transform: scaleX(-1);

}
.StarIcon .EmptyStar{
    stroke-width: 2px;
}


.RatingStars.GoldenStars .StarIcon{
    fill:#f59e0b !important;
    stroke: #f59e0b !important;
    width: 24px;
    height: 24px;
}









































































body {
    /* padding-left: 189px !important; */
    background-color: #eeeeee !important;
    padding: 0px 0 0;
}



.AppContainer {
    padding: 0px 0px 0px 230px;
    display: flex;
    flex: 1;
    box-sizing: border-box;
    min-height: 100vh;
    min-height: calc(var(--vh, 1vh) * 100);
}
html[dir="rtl"] .AppContainer{
  padding: 0px 230px 0px 0px;
}

@media screen and (max-width: 600px) {
  html[dir="rtl"] .AppContainer,.AppContainer {
    padding: 0;
  }
}
@media screen and (min-width: 600px ) and (max-width: 768px) {
  html[dir="rtl"] .AppContainer,.AppContainer {
    padding: 0;
  }
}
@media screen and (min-width: 768px) and (max-width: 992px) {
  html[dir="rtl"] .AppContainer,.AppContainer {
    padding: 0;
  }
}













a.BrandBtn{
    display: inline-block;
}

.BrandBtn {
    font-size: 14px;
    font-weight: 600;
}



.WhiteBtn {
    background-color: white !important;
    color: black !important;
}

.WhiteBtn:hover {
    background-color: var(--PrimaryBGColorOpac30) !important;
    background-color: #fffffff0 !important;
}


.MainContent {
    flex: 1;
    display: flex;
    flex-direction: column;
    width:100%;
    /*overflow-x: hidden;*/
    background-color: #eeeeee;
}

.BodyContent {
    padding: 10px;
}

.NavigationSidebar {
    width: 280px;
    height: 100vh;
    background: white;
    border-right: 1px solid var(--BorderColor);
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    position: relative;
    z-index: 100;
}

.NavigationSidebar.collapsed {
    width: 80px;
}

.SidebarHeader {
    padding: 10px;
    border-bottom: 1px solid rgba(50, 82, 89, 0.08);
    display: flex;
    align-items: center;
    border-top: 3px solid var(--PrimaryBGColor);
}

.NavigationSidebar.collapsed .SidebarHeader {
    padding: 24px 16px;
}

.SidebarLogo {
    height: 40px;
    width: auto;
    transition: all 0.3s ease;
}

.NavigationSidebar.collapsed .SidebarLogo {
    height: 32px;
}

.SidebarToggleBtn {
    display: none;
}

.SidebarNavActions {
    padding: 16px 24px;
    border-bottom: 1px solid var(--BorderColor);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.NavigationSidebar.collapsed .SidebarNavActions {
    padding: 16px;
}

.LanguageButton {
    background: var(--LightGray);
    border: 1px solid var(--BorderColor);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #374151;
    text-align: center;
}

.LanguageButton:hover {
    background: #e5e7eb;
}

.NavigationSidebar.collapsed .LanguageButton {
    font-size: 12px;
    padding: 8px;
}
/*
.UserDropdown {
    position: relative;
}

.DropdownToggle {
    width: 100%;
    background: white;
    border: 1px solid var(--BorderColor);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #374151;
}

.DropdownToggle:hover {
    border-color: var(--PrimaryBGColor);
}

.NavigationSidebar.collapsed .DropdownToggle {
    padding: 10px 8px;
}*/

.UserName {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.NavigationSidebar.collapsed .UserName {
    display: none;
}
/*
.DropdownIcon {
    margin-left: 8px;
    flex-shrink: 0;
}

.DropdownMenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--BorderColor);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    margin-top: 4px;
    padding: 8px 0;
    display: none;
    z-index: 1000;
}

.DropdownMenu.show {
    display: block;
}

.DropdownItem {
    display: block;
    padding: 8px 16px;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.3s ease;
}

.DropdownItem:hover {
    background: var(--LightGray);
}

.DropdownDivider {
    height: 1px;
    background: var(--BorderColor);
    margin: 8px 0;
}

.SidebarMenu {
    flex: 1;
    padding: 16px 0;
    overflow-y: auto;
}

.MenuList {
    list-style: none;
}

.MenuItem {
    margin-bottom: 4px;
}

.MenuLink {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    color: #6b7280;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
    position: relative;
}

.NavigationSidebar.collapsed .MenuLink {
    padding: 12px 16px;
    justify-content: center;
}

.MenuLink:hover {
    background: rgba(134, 166, 20, 0.05);
    color: var(--PrimaryBGColor);
}

.MenuLink.active {
    background: var(--PrimaryBGColor);
    color: white;
    border-radius: 0 25px 25px 0;
    margin-right: 16px;
}

.NavigationSidebar.collapsed .MenuLink.active {
    border-radius: 8px;
    margin: 0 8px;
}

.MenuIcon {
    width: 20px;
    height: 20px;
    margin-right: 12px;
    flex-shrink: 0;
}

.NavigationSidebar.collapsed .MenuIcon {
    margin-right: 0;
}

.MenuText {
    transition: all 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
}

.NavigationSidebar.collapsed .MenuText {
    opacity: 0;
    width: 0;
}

.SidebarFooter {
    padding: 24px;
    border-top: 1px solid var(--BorderColor);
    text-align: center;
}

.NavigationSidebar.collapsed .SidebarFooter {
    padding: 16px;
}

.FooterText {
    font-size: 12px;
    color: var(--GrayColor);
    margin-bottom: 8px;
}

.NavigationSidebar.collapsed .FooterText {
    display: none;
}

.FooterLink {
    color: var(--PrimaryBGColor);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}

.NavigationSidebar.collapsed .FooterLink {
    font-size: 10px;
}

.FooterLink:hover {
    text-decoration: underline;
}

.MobileToggle {
    display: none;
    position: fixed;
    top: 16px;
    left: 16px;
    z-index: 1001;
    background: var(--PrimaryBGColor);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
}

.SidebarOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 99;
}
*/
/* .MainContent {
            flex: 1;
            padding: 24px;
            overflow-x: hidden;
        } */



.ContentTitle {
    font-size: 24px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 8px;
}

.ContentDescription {
    color: var(--GrayColor);
}

@media (max-width: 768px) {
    .NavigationSidebar {
        position: fixed;
        left: -280px;
        top: 0;
        bottom: 0;
        z-index: 100;
        width: 280px;
    }

    .NavigationSidebar.show {
        left: 0;
    }

    .MobileToggle {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 16px;
        left: 16px;
        z-index: 1001;
        background: var(--PrimaryBGColor);
        color: white;
        border: none;
        border-radius: 8px;
        padding: 12px;
        cursor: pointer;
    }

    .SidebarOverlay.show {
        display: block;
    }

    .MainContent {
        margin-left: 0;
        padding: 80px 16px 16px;
        padding: 70px 0 0;
    }

    .AppContainer.collapsed .MainContent {
        margin-left: 0;
    }
}


















































































.AnimateFadeIn {
    transition: transform 0.6s ease, opacity 0.6s ease;

}





.WelcomeHeader,.PopupHeaderTitle {
    font-size: 30px;
    line-height: 30px;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}

.WelcomeSubHeader {
    font-size: 18px;
    color: white;
    margin-bottom: 0px;
}



.PopupHeaderTitle{
    font-size: 24px;
    line-height: 24px;
    font-weight: 700;
    color:white;
    display:flex;
    gap:6px;
    justify-content: center;
}
.PopupHeaderTitle .SVGOrigIcon{
    stroke: white;
    stroke-width: 2.4;
}




/* Login */

.AuthContainer {
    display: flex;
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    max-width: 1200px;
    margin: auto;
}


.LoginWindowBG{
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    -moz-object-fit:cover;
    object-position: center center;
    -moz-object-position:center center;
    z-index: 0;
}

/* Left Side - Welcome Section */
.WelcomeSection {
    flex: 1;
    background: linear-gradient(135deg, var(--PrimaryBGColor), var(--DarkBGColor));
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;align-items: center;
    position: relative;
    overflow: hidden;


    background-image: url('../img/BGs/QuraanDesign.webp');
    background-size: cover;
    background-position: center;
}

.WelcomeSection::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    /*background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="2" fill="rgba(255,255,255,0.1)"/><circle cx="80" cy="40" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="40" cy="80" r="1.5" fill="rgba(255,255,255,0.1)"/></svg>');
    animation: float 20s infinite linear; */
    background-image: url('../img/BGs/WhiteCirclesPattern.svg');
    backdrop-filter: blur(6px);
    -moz-backdrop-filter: blur(6px);
}

@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }

    100% {
        transform: translateY(-100px) rotate(360deg);
    }
}

.Logo {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 40px;
    z-index: 1;
    position: relative;
}

/* 
.cls-2 {
    fill: white !important;
} */

.LogoIcon {
    width: 170px;
    height: 241px;
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: relative;
    z-index: 3;
}
.LogoIcon img,.LogoIcon svg{
    width: 100%;
    height: 100%;
}
@media (max-width: 768px) {
    .LogoIcon {
        width: 85px;
        height: 120px;
    }
}

.LogoText {
    color: white;
    font-size: 20px;
    font-weight: 600;
}

.WelcomeTitle {
    font-size: 48px;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    line-height: 1.2;
    z-index: 1;
    position: relative;
}

.WelcomeDescription {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 50px;
    line-height: 1.6;
    z-index: 1;
    position: relative;
}

.FeatureList {
    list-style: none;
    z-index: 1;
    position: relative;
}

.FeatureItem {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
    color: white;
    font-size: 16px;
}

.FeatureIcon {
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(10px);
    flex-shrink: 0;
}

/* Right Side - Login Form */
.AuthFormContainer {
    flex: 1;
    padding: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.AuthFormWrapper {
    width: 100%;
    max-width: 400px;
}

.AuthFormHeader {
    text-align: center;
    margin-bottom: 40px;
}

.AuthFormHeader h2 {
    font-size: 28px;
    line-height: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 12px;
}

.AuthFormHeader p {
    font-size: 16px;
    line-height: 22px;
    color: #666;
}

.FormGroup {
    margin-bottom: 25px;
}

.FormLabel {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

.InputWrapper {
    position: relative;
}

/*
.InputIcon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
    z-index: 1;
}
    
.PasswordToggle {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #888;
    transition: color 0.3s ease;
}

.PasswordToggle:hover {
    color: var(--PrimaryBGColor);
}

*/








































.FormOptions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.CheckboxContainer {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #555;
}

.CheckboxContainer input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--PrimaryBGColor);
}

.ForgotPasswordLink {
    color: var(--PrimaryBGColor);
    text-decoration: none;
    width: 100%;
    display: inline-block;
    text-align: end;
    font-size: 14px;
    font-weight: 500;
    margin: 12px 0 15px;
    transition: color 0.3s ease;
}

.ForgotPasswordLink:hover {
    color: var(--PrimaryBGColorHover);
    text-decoration: underline;
}

.AuthDivider {
    text-align: center;
    position: relative;
    margin: 30px 0;
    color: #888;
    font-size: 14px;
}

.AuthDivider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e1e5e9;
    z-index: 1;
}

.AuthDivider span {
    background: white;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

.SocialLogin {
    display: flex;
    gap: 15px;
    margin-bottom: 30px;
}

.BtnSocial {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 2px solid #e1e5e9;
    background: white;
    color: #555;
    font-weight: 500;
    transition: all 0.3s ease;
}

.BtnSocial:hover {
    border-color: #d1d5d9;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.AuthFooter {
    text-align: center;
    color: #666;
    font-size: 14px;
}

.AuthFooter p {
    margin-top:10px;
    /*margin-bottom: 5px;*/
}

.AuthLink {
    color: var(--PrimaryBGColor);
    text-decoration: none;
    font-weight: 600;
    padding: 4px;
    transition: color 0.3s ease;
}

.AuthLink:hover {
    color: var(--PrimaryBGColorHover);
    text-decoration: underline;
}

.LoadingSpinner {
    display: none;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .AuthContainer {
        flex-direction: column;
        margin: 20px;
        min-height: auto;
    }

    .WelcomeSection {
        padding: 40px 30px;
        text-align: center;
    }

    .WelcomeTitle {
        font-size: 36px;
    }

    .AuthFormContainer {
        padding: 40px 30px;
    }

    .SocialLogin {
        flex-direction: column;
    }
}

/* End Login */

.StatsGrid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;

}

.TitleOfCard {
    color: red;
    margin: 0;
}

.StatCard {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 20px 15px;
    box-shadow: 0 0px 15px -3px rgba(0, 0, 0, 0.1);
    display: flex;
    
    align-items: center;
    /* border-right: 3px solid var(--PrimaryBGColor); */
    gap: 20px;
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.StatCard.Vertical{
    flex-direction: column;
    gap: 10px;
}
.StatIcon {
    color: var(--PrimaryBGColor);
    flex-shrink: 0;
    font-size: 30px;
    display: block;
    width: 56px;
    height: 56px;

}
.StatIcon img ,.StatIcon svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    -moz-object-fit: contain;
}
.StatContent {
    display: flex;
    flex-direction: column;
}

.StatContent {
    display: flex;
    flex-direction: column;

}



.StatCard.Vertical .StatDetails {
    align-items: center;
    gap:6px;
}


.StatDetails {
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: flex-start;
}

.StatNumber {
    color: var(--SecondaryBGColor);
    font-size: 25px;
    line-height: 25px;
    font-weight: bold;
    margin: 5px 0;
}

.StatText {
    color: #666;
    font-size: 0.9rem;
}


.AnimateFadeIn:hover {
    opacity: 1;
    transform: translateY(-6px);
}

/* Responsive */

/* Mobile*/
@media (max-width: 600px) {
    .StatCard {
        flex: 1 1 100%;
    }
}

/* Tablet*/
@media (min-width: 601px) and (max-width: 991px) {
    .StatCard {
        flex: 1 1 calc(50% - 20px);
    }
}

/* Desktop */
@media (min-width: 992px) and (max-width: 1200px) {
    .StatCard {
        flex: 1 1 calc(25% - 20px);
    }
}

/*Extra Large Screens*/
@media (min-width: 1201px) {
    .StatCard {
        flex: 1 1 calc(25% - 20px);
    }
}


/*  Quick Actions  */



/* Main Card Container */
.SessionCard {
    background: white;
    border-radius: 16px;
    border: 2px solid var(--PrimaryBGColorOpac10);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin: 0 20px;
}

/* Session Widget Container */
.SessionWidgetContainer {
    padding: 24px;
    margin: 20px;
    border-radius: 16px;
    border: 2px solid var(--PrimaryBGColor);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.SessionContentWrapper {
    display: flex;
    gap: 24px;
    align-items: center;
}

/* Session Header */
.SessionInfoArea {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 70%;
}

.SessionHeaderRow {
    display: flex;
    justify-content: between;
    align-items: center;
    gap: 16px;
}

.SessionTitleText {
    font-size: 24px;
    font-weight: 700;
    color: #2d3748;
    margin: 0;
}

.SessionStatusBadge {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Teacher*/


.PerformanceCard {

    background: white;
    border-radius: 10px;
    margin-bottom: 2rem;
    overflow: hidden;
}

.PerformanceContent {
    display: flex;
    gap: 20px;
}
.PerformanceContent .PerformanceSection {
    width: 50%;
}

.PerformanceSection.FullWidth{
    width: 100%;
}

@media screen and (max-width: 768px) {
    .PerformanceContent {
        flex-direction: column;
    }
    .PerformanceContent .PerformanceSection{
        width: 100%;
    }
}



.PerformanceGrid {
    border-radius: 12px;
    background-color: white;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.PerformanceSection {
    background: var(--light-gray);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    transition: var(--transition);
}



.SectionTitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.SectionIcon {
    width: 24px;
    height: 24px;
    color: var(--primary-color);
}

.RatingDisplay {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 15px;
}

.OverallRating {
    font-size: 42px;
    line-height: 42px;
    font-weight: 700;
    color: var(--PrimaryBGColor);

}

@keyframes countUp {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

.StarRating {
    display: flex;
    gap: 0.25rem;
    margin-bottom: 0.5rem;
}


.Star.filled {
    color: #ffd700;
    animation: starPulse 0.5s ease-out;
}

@keyframes starPulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.RatingText {
    color: #666666;
    font-size: 13px;
    font-weight: 600;
}

.MetricItem {
    margin-bottom: 1rem;
}

.MetricHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.MetricLabel {
    font-size: 0.875rem;
    color: var(--text-primary);
    font-weight: 500;
}

.MetricValue {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--primary-color);
}



/* Calender */
.ScheduleContainer {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    width: 100%;
    text-align: center;

}

.TeacherSchedule {
    display: flex;
    gap: 10px;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 20px;
}


.ScheduleTitle {
    font-size: 26px;
    font-weight: bold;
    color: #2c3e50;
    text-align: center;
    width: 100%;
}

.ScheduleHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
}

.ScheduleTopHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ToggleBtn {
    background-color: rgb(204, 204, 204);
    color: #666;
    padding: 10px 25px;
    border: 1px solid gray;
    border-radius: 20px;

}

.NavButton {
    padding: 12px 24px;
    border: 2px solid var(--PrimaryBGColor);
    background: white;
    color: #8BC34A;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}

.NavButton:hover {
    background: var(--PrimaryBGColor);
    color: white;
}

.WeekInfo {
    text-align: center;
}

.WeekRange {
    font-size: 24px;
    line-height: 24px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 5px;
}

.WeekSubtitle {
    color: #7f8c8d;
    font-size: 16px;
}

.DaysHeader {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    margin-bottom: 15px;
}

.DayHeader {
    padding: 8px 8px;
    text-align: center;
    border-bottom: 1px solid #f3f4f6;
    background: #f9fafb;
    color: #2c3e50;
    font-size: 18px;
}

/*
.CalendarGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 20px;
}*/


/* 
.DayColumn.Today {
    border: 3px solid #8BC34A;
    background: #f0f8e6;
} */



.DayNumber {
    font-size: 32px;
    line-height: 32px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 5px;
}

.DayMonth {
    color: #7f8c8d;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.SessionSlot {
    background: #fff;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    padding: 12px 5px;
    line-height: 20px;
    margin-top: 12px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #495057;
    transition: all 0.3s ease;
}

.SessionSlot.Booked {
    border-color: var(--PrimaryBGColor);
    background: var(--PrimaryBGColor);
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    pointer-events: unset;
    cursor:pointer;
    
}

.SessionSlot.Booked .SVGOrigIcon{
    stroke: white;
    width: 20px;
    height: 20px;
    cursor: pointer;
}


.SessionSlot.Available {
    border-color: #CECECE;
    background: #CECECE;

    border-color: #efefef;
    background-color: #efefef;


    color: white;
    color:#242424;
}

.SessionSlot.Pending {
    border-color: var(--FailedBGColor);
    background: var(--FailedBGColor);
    color: white;    
    cursor:pointer;
}


.StatusLegend {
    margin-top: 40px;
    padding: 5px;
    background: #f8f9fa;
    -moz-border-radius: 8px;
    -khtml-border-radius: 8px;
    -webkit-border-radius: 8px;
    -o-border-radius: 8px;
    -ms-border-radius: 8px;
    border-radius: 8px;
    /*
    border: 1px solid #e9ecef;*/
}

.LegendTitle {
    font-size: 18px;
    font-weight: bold;
    color: #2c3e50;
    margin-bottom: 15px;
    text-align: center;
}

.LegendItems {
    /*display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));*/
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 15px;
}

.LegendItem {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: 8px;
}

.LegendColor {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    border: 2px solid;
}



.LegendColor.Pending {
    background: var(--FailedBGColor);
    border-color: var(--FailedBGColor);
}

.LegendColor.Available {
    background: #CECECE;
    border-color: #CECECE;
}

.LegendColor.Unavailable {
    background: #FFFFFF;
    border:2px solid #e9ecef;
}


.LegendColor.Booked {
    background: var(--PrimaryBGColor);
    border-color: var(--PrimaryBGColor);
}

.LegendText {
    font-weight: 500;
    color: #2c3e50;
}

@media (max-width: 768px) {

    /*.CalendarGrid,*/
    .DaysHeader {
        grid-template-columns: 1fr;
    }

    .ScheduleHeader {
        flex-direction: column;
        gap: 20px;
    }


}





.ProgressBar {
    width: 100%;
    height: 9px;
    background: #e9ecef;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.5rem;
    flex: 1;
    background: #e5e7eb;
    position: relative;
}

.ProgressFill {
    height: 100%;
    border-radius: 4px;
    transition: width 1.5s ease-out;
    position: relative;
    overflow: hidden;    
    transition: width 0.3s ease;
    background: var(--PrimaryBGColor);
    background: linear-gradient(90deg, var(--PrimaryBGColor), var(--SecondaryBGColor));
    
}
.ProgressFill::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
    animation: progressShine 2s infinite;
}






@keyframes progressShine {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.StatsList {
    margin-top: 1rem;
    padding: 20px;
    text-align: start;
}

.StatsItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #f4f4f4;
    transition: var(--transition);
    font-size: 15px;
}
/*
.StatsItem:hover {
    background: rgba(134, 166, 20, 0.05);
    border-radius: 6px;
    border-bottom-color: transparent;
}

.StatsItem:last-child {
    border-bottom: none;
}*/

.StatsLabel {
    color: var(--text-primary);color:#666666;
    font-weight: 500;
}

.StatsValue {
    font-weight: 600;
    color: var(--primary-color);
}

.LoadingSkeleton {
    background: linear-gradient(90deg, var(--medium-gray) 25%, #f0f0f0 50%, var(--medium-gray) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 4px;
    height: 20px;
    width: 60px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

@media (max-width: 768px) {
    .PerformanceGrid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .CardBody {
        padding: 1.5rem;
    }

    .RatingDisplay {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .OverallRating {
        font-size: 2.5rem;
    }
}

.FadeInUp {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.DelayedAnimation {
    animation-delay: 0.3s;
}

.SessionMainDetails {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.TeacherInfoSection {
    display: flex;
    align-items: center;
    gap: 12px;
}

.TeacherAvatarContainer {
    position: relative;
    width: 56px;
    height: 56px;
}

.TeacherProfileImage {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

.TeacherInitialsCircle {
    width: 100%;
    height: 100%;
    background: var(--PrimaryBGColor);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--PrimaryTextColor);
    font-size: 18px;
    font-weight: 700;
}

.TeacherDetailsSection {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.TeacherNameText {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
}

.TeacherSubjectText {
    font-size: 14px;
    color: #718096;
}

.SessionTimingSection {
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: start;
}

.SessionTimeRow {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #4a5568;
    font-size: 14px;
}

.SessionTimeRow svg {
    color: var(--PrimaryBGColor);
}

/* Session Description */
.SessionDescriptionArea {
    margin-top: 16px;
}

.SessionTopicText {
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
}

/* Countdown Section */
.SessionCountdownArea {
    margin-top: 20px;
    display: flex;
    gap: 40px;
}

.CountdownDisplayContainer {
    background: #f7fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 30px 20px;
    position: relative;
    width: 100%;
}

.CountdownDisplayContainer::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(45deg, #f6ad55, #ed8936);
    border-radius: 0 0 0 8px;
}

.CountdownContentWrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.CountdownContentWrapper svg {
    color: #ed8936;
}

.CountdownTextSection {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.CountdownLabelText {
    font-size: 14px;
    color: #718096;
}

.CountdownTimerDisplay {
    font-size: 18px;
    font-weight: 700;
    color: #ed8936;
}

/* Action Buttons Section */
.HeaderTitle {
    padding: 30px 15px;
    color: var(--TextPrimary);
    margin: 0;
    font-size: 24px;
    line-height: 24px;

}

.SessionActionsArea {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ActionButtonPrimary {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    min-width: 160px;
    justify-content: center;
    padding: 12px 34px;
}

.ActionButtonPrimary:hover {
    background: var(--PrimaryBGColorHover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--PrimaryBGColorOpac30);
}

.ActionButtonSecondary {
    background: transparent;
    color: var(--PrimaryBGColor);
    border: 2px solid var(--PrimaryBGColor);
    padding: 10px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.ActionButtonSecondary:hover {
    background: var(--PrimaryBGColorOpac10);
}

/* Quick Actions Below */
.QuickActionsRow {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    flex-wrap: wrap;
    width: 80%;
}

.QuickActionButtonPrimary {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
    border: none;
    padding: 12px 24px;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    min-width: 160px;
}

.QuickActionButtonPrimary:hover {
    background: var(--PrimaryBGColorHover);
}

.QuickActionButtonOutline {
    background: transparent;
    color: var(--PrimaryBGColor);
    border: 2px solid var(--PrimaryBGColor);
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
    -moz-border-radius: 150px;
    -khtml-border-radius: 150px;
    -webkit-border-radius: 150px;
    -o-border-radius: 150px;
    -ms-border-radius: 150px;
    border-radius: 150px;
    
}

.QuickActionButtonOutline:hover {
    background: var(--PrimaryBGColorOpac10);
}


.QuickActionButtonOutline img , .QuickActionButtonOutline svg{
    width: 24px;height:24px;
    object-fit: contain;
}
/*
.QuickActionButtonSecondary {
    background: var(--SecondaryBGColor);
    color: var(--SecondaryTextColor);
    border: none;
    padding: 12px 34px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.QuickActionButtonSecondary:hover {
    background: var(--SecondaryBGColorHover);
}
*/

/* Animation for pulse effect */
.PulseAnimation {
    animation: pulseEffect 2s infinite;
}

@keyframes pulseEffect {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* Responsive Design */
@media (max-width: 768px) {
    .SessionMainDetails {
        flex-direction: column;
        gap: 16px;
    }

    .SessionTimingSection {
        align-items: flex-start;
    }

    .SessionActionsArea {
        flex-direction: column;
    }

    .QuickActionsRow {
        flex-direction: column;
    }

    .ActionButtonPrimary,
    .ActionButtonSecondary {
        justify-content: center;
        min-width: auto;
        width: 100%;
    }
}



/* Calender */

.CalendarContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.BookingButton {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-bottom: 20px;
    font-size: 16px;
}

.BookingButton:hover {
    background: var(--PrimaryBGColorHover);
    transform: translateY(-1px);
}

.CalendarModal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.CalendarModal.show {
    display: flex;
}

.CalendarDialog {
    background: white;
    border-radius: 16px;
    width: 95%;
    max-width: 1200px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: scale(0.9) translateY(-20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.ModalHeader {
    padding: 24px 32px;
    border-bottom: 1px solid #e5e7eb;
    background: white;
}

.ModalTitle {
    font-size: 20px;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.ModalBody {
    text-align: center;
    padding: 10px 40px;
    background: white;
}

.ProgressSection {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
}

.ProgressLabel {
    font-size: 14px;
    font-weight: 500;
    color: #f59e0b;
    margin-right: 16px;
}





.ProgressBadge {
    position: absolute;
    right: -12px;
    top: -16px;
    background: var(--PinkColor);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
}

.ConfirmLabel {
    font-size: 14px;
    font-weight: 500;
    color: #f59e0b;
}

.SessionTypeSection {
    margin-bottom: 32px;
}

.SessionTypeLabel {
    font-size: 16px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 16px;
}

.SessionTypes {
    display: flex;
    gap: 16px;
}

.SessionTypeCard {
    flex: 1;
    max-width: 200px;
    text-align: center;
    padding: 16px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    background: white;
}

.SessionTypeCard.selected {
    border-color: var(--PrimaryBGColor);
    background: rgba(134, 166, 20, 0.05);
}

.SessionTypeCard:hover:not(.selected) {
    border-color: #d1d5db;
}

.SessionTypeName {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.SessionTypeDuration {
    font-size: 12px;
    color: var(--GrayColor);
}

.WeekSection {
    margin-bottom: 24px;
}

.WeekNavigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.NavButton {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: white;
    color: var(--PrimaryBGColor);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}
.NavButton.Rounded{
    -moz-border-radius: 150px;
    -khtml-border-radius: 150px;
    -webkit-border-radius: 150px;
    -o-border-radius: 150px;
    -ms-border-radius: 150px;
    border-radius: 150px;
}
.NavButton:hover {
    border-color: var(--PrimaryBGColor);
    background: rgba(134, 166, 20, 0.05);
    color: #6a850b;
}

.NavButton .SVGOrigIcon{
    stroke: var(--PrimaryBGColor);
    width: 20px;
    height: 20px;
}

.NavButton.Prev .SVGOrigIcon, html[dir="rtl"] .NavButton.Next .SVGOrigIcon{
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -khtml-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.NavButton.Next .SVGOrigIcon, html[dir="rtl"] .NavButton.Prev .SVGOrigIcon{
    -o-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -khtml-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}


.WeekInfo {
    text-align: center;
}

.WeekTitle {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.WeekSubtitle {
    font-size: 14px;
    color: var(--GrayColor);
}

.WeekCalendar {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
}



.DayHeaderName {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    text-transform: capitalize;
}

.DaysGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px;
}

.DayColumn {
    text-align: center;
    min-height: 180px;
    position: relative;
}

.DateInfo {
    margin-bottom: 16px;
    padding: 8px;
}

.DateCode {
    font-size: 12px;
    color: #9ca3af;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.DateNumber {
    font-size: 24px;
    font-weight: 700;
    color: #374151;
    line-height: 1;
    margin-bottom: 4px;
}

.DateMonth {
    font-size: 12px;
    color: var(--GrayColor);
    text-transform: capitalize;
}

.TimeSlotsList {
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
}

.SelectedIndicator {
    position: absolute;
    left: -8px;
    top: 0;
    bottom: 0;
    width: 4px;
    background: var(--PrimaryBGColor);
    border-radius: 2px;
    display: none;
}

/* .TimeSlotsList.selected .SelectedIndicator {
    display: block;
}

.TimeSlot {
    padding: 8px 12px;
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    color: #059669;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.TimeSlot:hover {
    background: rgba(16, 185, 129, 0.15);
    transform: translateY(-1px);
}

.TimeSlot.selected {
    background: var(--SuccessColor);
    color: white;
    border-color: var(--SuccessColor);
} */

.UnavailableDay {
    opacity: 0.4;
}

.UnavailableIcon {
    width: 32px;
    height: 32px;
    margin: 0 auto 8px;
    color: #f87171;
}

.UnavailableText {
    font-size: 11px;
    color: var(--GrayColor);
    line-height: 1.3;
}

.AvailableCount {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--SuccessColor);
    font-weight: 500;
    white-space: nowrap;
}

.ModalFooter {
    padding: 24px 32px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    background: white;
}

.CancelButton {
    background: white;
    border: 1px solid #e5e7eb;
    color: var(--GrayColor);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 14px;
}

.CancelButton:hover {
    background: #f9fafb;
    border-color: #d1d5db;
}

@media (max-width: 768px) {
    .CalendarDialog {
        width: 98%;
        margin: 10px;
    }

    .ModalHeader,
    .ModalBody,
    .ModalFooter {
        padding: 16px 20px;
    }

    .DaysGrid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .DayColumn {
        padding: 16px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background: #fafafa;
        min-height: auto;
    }

    .SessionTypes {
        flex-direction: column;
    }

    .SessionTypeCard {
        max-width: none;
    }

    .WeekNavigation {
        flex-direction: column;
        gap: 12px;
    }
}

/* Card Styles */
.ProgressCard,
.ActivityCard,
.SessionsCard {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /*overflow: hidden;*/
    width:100%;
    margin: 0px 0 20px;
    padding:0 0 20px;
    text-align: center;
}
.SessionsCard.MT20{
    margin-top: 20px;;
}
.SessionsCard.OverflowUnset{
    overflow: unset;
}


.CardTitle {
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
    padding: 10px;
}



/* Progress Card */
.ProgressCard {
    background: white;
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.ProgressCardHeader {
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    background: #f8f9fa;
}

.ProgressCardTitle {
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
    margin: 0;
}

.ProgressCardBody {
    padding: 24px;
}

.ProgressItemContainer {
    margin-bottom: 24px;
}

.ProgressItemContainer:last-child {
    margin-bottom: 0;
}

.ProgressLabelRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.ProgressSubjectName {
    font-size: 16px;
    font-weight: 500;
    color: #2d3748;
}

.ProgressPercentage {
    font-size: 16px;
    font-weight: 600;
    color: #4a5568;
}

/* Progress Bar Container */
.ProgressBarContainer {
    width: 100%;
    height: 10px;
    background-color: #e2e8f0;
    border-radius: 5px;
    overflow: hidden;
}

/* Progress Bar Fill */
.ProgressBarFill {
    height: 100%;
    background: linear-gradient(90deg, var(--PrimaryBGColor), var(--DarkBGColor));
    background: linear-gradient(90deg, var(--PrimaryBGColor), #627619);

    border-radius: 5px;
    transition: width 0.6s ease-in-out;
    animation: progressFill 1.2s ease-out;
}

@keyframes progressFill {
    0% {
        width: 0%;
    }
}

/* Responsive Design */
@media (max-width: 480px) {
    .ProgressCardHeader {
        padding: 16px 20px;
    }

    .ProgressCardBody {
        padding: 20px;
    }

    .ProgressSubjectName {
        font-size: 15px;
    }

    .ProgressPercentage {
        font-size: 15px;
    }

    .LinearProgress {
        height: 8px;
    }
}

/* Activity Section */
.ActivityItemContainer {
    padding: 16px 0;
    border-bottom: 1px solid #e2e8f0;
}

.ActivityItemContainer:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ActivityItemContent {
    display: flex;
    align-items: center;
    gap: 16px;
}

.ActivityIconBadge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.ActivityIconBadge.SuccessIcon {
    background: #10b981;
}

.ActivityIconBadge.WarningIcon {
    background: #f59e0b;
}

.ActivityIconBadge.InfoIcon {
    background: var(--PrimaryBGColor);
}

.ActivityIconBadge.PrimaryIcon {
    background: var(--SecondaryBGColor);
}

.ActivityTextSection {
    flex: 1;
}

.ActivityTitleText {
    font-size: 16px;
    font-weight: 600;
    color: #2d3748;
    margin: 0 0 4px 0;
}

.ActivityTimeText {
    font-size: 14px;
    color: #718096;
}

/* Sessions Table */
/* .SessionsCard {
    grid-column: 1 / -1;
} */

.ViewAllButton {
    background: transparent;
    color: var(--PrimaryBGColor);
    border: 2px solid var(--PrimaryBGColor);
    margin-right: 20px;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s ease;
}

.ViewAllButton:hover {
    background: var(--PrimaryBGColorOpac10);
}


.SessionsTable tbody tr {
    /*cursor: pointer;*/
    transition: background-color 0.2s ease;
    background-color: #efefef !important;
    text-align: start;
}

.SessionsTable tbody tr td:first-child,html[dir="rtl"] .SessionsTable tbody tr td:last-child {
    border-radius: 12px 0 0 12px;
}

.SessionsTable tbody tr td:last-child,html[dir="rtl"] .SessionsTable tbody tr td:first-child {
    border-radius: 0 12px 12px 0;
}

.SessionsTable tr:nth-child(odd) td {
    background-color: transparent;

}

.SessionsTable tr:nth-child(even) td {
    background-color: #efefef !important;
}

.SessionsTable {
    width: 100%;
    border-spacing: 0 10px;
    border-collapse: separate !important;
    min-width: 600px;
    padding: 0 20px;
}

.SessionsTable thead tr {
    background-color: #dddddd !important;
}

.SessionsTable th {
    background: white;
    padding: 12px 16px;
    text-align: left;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 1px solid #e2e8f0;
}

.SessionsTable th,
.SessionsTable td {
    border: none !important;
}

.SessionsTable td {
    padding: 16px;
    border-bottom: 1px solid #e2e8f0;
    font-size: 14px;
    border: none !important;
    color: var(--SecondaryBGColor) !important;
}
.SessionsTable tbody tr.StudentFeedback ,.SessionsTable tbody tr.TeacherFeedback{
    background-color: var(--PrimaryBGColor) !important;
}
.SessionsTable tbody tr.StudentFeedback td ,.SessionsTable tbody tr.TeacherFeedback td{
    color: white !important;
    background-color: var(--PrimaryBGColor) !important;
}

.SessionsTable tbody tr.StudentNotes,.SessionsTable tr.StudentNotes:nth-child(even) td{
    background-color: var(--SecondaryBGColor) !important;
    
}
.SessionsTable tbody tr.StudentNotes td{
    color: white !important;
}


.StudentNotes.AddNotesBtn,.ViewNotesBtn,.ShowSToTFeedback{
    cursor:pointer;
}





.TableScrollContainer::-webkit-scrollbar {
    height: 8px;
}

.TableScrollContainer::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.TableScrollContainer::-webkit-scrollbar-thumb {
    background: var(--PrimaryBGColor);
    border-radius: 4px;
}

.TableScrollContainer::-webkit-scrollbar-thumb:hover {
    background: var(--PrimaryBGColorHover);
}

.StatusBadgeCompleted {
    background: var(--PrimaryBGColor);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.StatusBadgeScheduled {
    background: var(--PrimaryBGColor);
    color: white;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}



.ActionButtonOutline {
    background: transparent;
    color: var(--PrimaryBGColor);
    border: 1px solid var(--PrimaryBGColor);
    padding: 12px 34px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ActionButtonOutline:hover {
    background: var(--PrimaryBGColorOpac10);
}

.ActionButtonPrimary {
    background: var(--PrimaryBGColor);
    color: white;
    border: none;
    padding: 12px 34px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ActionButtonPrimary:hover {
    background: var(--PrimaryBGColorHover);
}

.SessionCardHeader {
    display: grid;
    align-items: center;
    /*background-color: #f9fafb;*/
    padding: 10px;
}

.LeftCardHeader {
    justify-content: left;
}

/* Responsive Design */
@media (max-width: 768px) {
    .MainContainer {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .SessionsCard {
        grid-column: 1;
    }

    .SessionsTable {
        font-size: 12px;
    }

    .SessionsTable th,
    .SessionsTable td {
        padding: 8px;
    }

    .CardHeader {
        padding: 16px 20px;
        display: flex;
        flex-direction: column;
    }

}

@media (max-width: 480px) {
    .SessionsTable {
        /*display: block;
        overflow-x: auto;*/
        white-space: nowrap;
    }

    .ActivityItemContent {
        gap: 12px;
    }

    .ActivityIconBadge {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}




/* Profile */
.ProfileContainer {
    width: 100%;
    margin: 0 auto;
}

/* Profile Header */
.ProfileHeaderSection {
    background: linear-gradient(135deg, var(--PrimaryBGColor), var(--DarkBGColor));
    background: linear-gradient(135deg, var(--PrimaryBGColor), #627619);
    
    padding: 32px;
    /*
    border-radius: 16px;
    margin-bottom: 24px;*/
    color: white;
    position:relative;
}



.ProfileHeaderSection::before{
    content:'';
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: url('../img/ramadan-kareem-islamic-background-design-with-moon\ 1.png');
    background-position: bottom center;
    background-size: cover;
}


.ProfileAvatarWrapper {
    display: flex;
    align-items: center;
    gap: 24px;
}

.ProfileAvatarContainer {
    position: relative;
}

.ProfileAvatarCircle {
    width: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 0.2);
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    font-weight: 700;
    color: white;
}

.ProfileUploadButton {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 36px;
    height: 36px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
}

.ProfileUploadButton:hover {
    background: rgba(0, 0, 0, 0.7);
}

.ProfileUserInfo {
    flex: 1;
}

.ProfileUserName {
    font-size: 24px;
    line-height: 24px;
    font-weight: 700;
    margin-bottom: 5px;
}

.ProfileMetaInfo {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-size: 16px;
    line-height: 16px;
    opacity: 0.9;
}
.ProfileLevelBadge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.15);
    padding: 6px 12px;
    border-radius: 12px;
    width: fit-content;
}

/* Profile Tabs */
.ProfileTabsContainer {
    background: white;
    border-radius: 16px;
    padding: 0;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.ProfileTabsList {
    display: flex;
    background: #f8f9fa;
    padding: 4px;
    gap: 4px;
}

.ProfileTabButton {
    flex: 1;
    background: transparent;
    border: none;
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: #718096;
    cursor: pointer;
    border-radius: 12px;
    transition: all 0.3s ease;
    text-align: center;
}

.ProfileTabButton.ActiveTab {
    background: var(--PrimaryBGColor);
    color: white;
}

.ProfileTabButton:hover:not(.ActiveTab) {
    color: var(--PrimaryBGColor);
}

/* Tab Content */
.ProfileTabContent {
    padding: 32px;
}

.TabContentPane {
    display: none;
}

.TabContentPane.ActivePane {
    display: block;
}

/* Stats Grid */
.StatsGridContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 32px;
}

.StatCardItem {
    background: white;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.StatValueNumber {
    font-size: 32px;
    font-weight: 700;
    color: var(--PrimaryBGColor);
    margin-bottom: 8px;
}

.StatLabelText {
    font-size: 14px;
    color: #718096;
    font-weight: 500;
}

/* Section Styles */
.ProfileSectionContainer {
    background: white;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ProfileSectionHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--PrimaryBGColor);
}

.ProfileSectionTitle {
    font-size: 20px;
    font-weight: 600;
    color: #2d3748;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ProfileSectionTitle::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--PrimaryBGColor);
    border-radius: 50%;
}

.EditButton {
    background: var(--PrimaryBGColor);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.EditButton:hover {
    background: var(--PrimaryBGColorHover);
}

/* Profile Fields */
.ProfileFieldRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #e2e8f0;
}

.ProfileFieldRow:last-child {
    border-bottom: none;
}

.ProfileFieldLabel {
    font-size: 14px;
    font-weight: 500;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ProfileFieldLabel::before {
    content: '';
    width: 4px;
    height: 4px;
    background: var(--PrimaryBGColor);
    border-radius: 50%;
}

.ProfileFieldValue {
    font-size: 14px;
    color: #2d3748;
    font-weight: 600;
}

/* Achievements Grid */
.AchievementsGridContainer {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.AchievementCardItem {
    background: white;
    border-radius: 16px;
    padding: 24px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.AchievementCardItem:hover {
    transform: translateY(-5px);
}

.AchievementIconContainer {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--SecondaryBGColor);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    font-size: 32px;
}

.AchievementTitle {
    font-size: 18px;
    font-weight: 600;
    color: #2d3748;
    margin-bottom: 8px;
}

.AchievementDescription {
    font-size: 14px;
    color: #718096;
    margin-bottom: 12px;
}

.AchievementStatus {
    font-size: 12px;
    font-weight: 600;
    color: #4a5568;
    text-transform: uppercase;
}

/* Empty State */
.EmptyStateContainer {
    text-align: center;
    padding: 40px;
    color: #a0aec0;
}

.EmptyStateIcon {
    font-size: 48px;
    margin-bottom: 16px;
}

/* Progress Bar */
.ProgressBarWrapper {
    margin: 16px 0;
}

.ProgressBarLabel {
    font-size: 14px;
    font-weight: 500;
    color: #4a5568;
    margin-bottom: 8px;
}

.ProgressBarTrack {
    width: 100%;
    height: 8px;
    background-color: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
}

.ProgressBarFill {
    height: 100%;
    background: linear-gradient(90deg, var(--PrimaryBGColor), var(--DarkBGColor));
    background: linear-gradient(90deg, var(--PrimaryBGColor), #627619);

    border-radius: 4px;
    transition: width 0.6s ease-in-out;
}

/* Responsive Design */
@media (max-width: 768px) {
    .ProfileHeaderSection {
        padding: 24px;
    }

    .ProfileAvatarWrapper {
        flex-direction: column;
        text-align: center;
        gap: 16px;
    }

    .ProfileAvatarCircle {
        width: 100px;
        height: 100px;
        font-size: 40px;
    }

    .ProfileUserName {
        font-size: 28px;
    }

    .ProfileTabsList {
        flex-wrap: wrap;
    }

    .ProfileTabContent {
        padding: 20px;
    }

    .StatsGridContainer {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .AchievementsGridContainer {
        grid-template-columns: 1fr;
    }
}





/* Sessions */


/* Header */
.SessionsPageHeader {
    background: white;
    padding: 40px 0;
}

.SessionsHeaderContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

.SessionsHeaderActions {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.SessionsHeaderText h1 {
    font-size: 48px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
}

.SessionsHeaderText p {
    font-size: 18px;
    color: #666;
}



/* Content Body */
.SessionsContentBody {
    background: #e8e8e8;
    min-height: calc(100vh - 200px);
    padding: 32px 0;
}

.SessionsContentContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Filters */
.SessionsFiltersContainer {
    margin-bottom: 32px;
}

.SessionsFilterTabs {
    display: flex;
    gap: 0;
    margin-bottom: 24px;
}

.SessionFilterTab {
    padding: 16px 0;
    border: none;
    background: transparent;
    color: #999;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
    margin-right: 48px;
    border-bottom: 3px solid transparent;
}

.SessionFilterTab.ActiveFilter {
    color: #333;
    border-bottom: 3px solid #ff6b35;
}

.SessionsSearchContainer {
    position: relative;
}

.SessionsSearchInput {
    width: 100%;
    padding: 16px 20px 16px 50px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    background: white;
    color: #999;
}

.SessionsSearchIcon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
}

/* Sessions List */
.SessionsListContent {
    background: transparent;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Session Item */
.session-item {
    margin-bottom: 40px;
}

.session-status {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.session-status.scheduled {
    color: #4a90e2;
}

.session-status.completed {
    color: #7cb342;
}

.session-date {
    font-size: 28px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 4px;
}

.session-time {
    font-size: 18px;
    color: #666;
    margin-bottom: 16px;
}

.session-action {
    background: transparent;
    border: 2px solid #8bc34a;
    color: #8bc34a;
    padding: 10px 24px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 16px;
}

.session-type {
    font-size: 16px;
    color: #333;
    margin-bottom: 8px;
}

.session-teacher {
    display: flex;
    align-items: center;
    gap: 8px;
}

.teacher-avatar {
    width: 20px;
    height: 16px;
    object-fit: cover;
}

.teacher-name {
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.teacher-rating {
    font-size: 14px;
    color: #666;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 120px 0;
}

.empty-state h3 {
    font-size: 32px;
    font-weight: 600;
    color: #999;
    margin-bottom: 16px;
}

.empty-state p {
    font-size: 18px;
    color: #999;
    margin-bottom: 40px;
}

.empty-state button {
    background: #8bc34a;
    color: white;
    border: none;
    padding: 16px 32px;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 768px) {

    .SessionsHeaderContainer,
    .SessionsContentContainer {
        padding: 0 20px;
    }

    .SessionsHeaderActions {
        flex-direction: column;
        gap: 24px;
    }

    .SessionsHeaderText h1 {
        font-size: 36px;
    }

    .SessionFilterTab {
        margin-right: 32px;
    }
}

/* Progress */

.ProgressStats {
    display: flex;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    margin: 2rem 0;
    padding: 20px;
}


.ProgressStat {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    display: flex;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 25%;
}

.ProgressStat::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s ease;
}

.ProgressStat:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.ProgressStat:hover::before {
    transform: scaleX(1);
}



@keyframes bounce {

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

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

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

.StatContent {
    text-align: left;
}



.LoadingSkeleton {
    width: 60px;
    height: 48px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 8px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Specific colors for each stat */
.ProgressStat:nth-child(1) .StatIcon {
    color: #4299e1;
}

.ProgressStat:nth-child(2) .StatIcon {
    color: #f6e05e;
}

.ProgressStat:nth-child(3) .StatIcon {
    color: #fc8181;
}

.ProgressStat:nth-child(4) .StatIcon {
    color: #68d391;
}

.ProgressStat:nth-child(1)::before {
    background: linear-gradient(90deg, #4299e1 0%, #2b6cb0 100%);
}

.ProgressStat:nth-child(2)::before {
    background: linear-gradient(90deg, #f6e05e 0%, #d69e2e 100%);
}

.ProgressStat:nth-child(3)::before {
    background: linear-gradient(90deg, #fc8181 0%, #e53e3e 100%);
}

.ProgressStat:nth-child(4)::before {
    background: linear-gradient(90deg, #68d391 0%, #38a169 100%);
}

@media (max-width: 768px) {
    .ProgressStats {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .ProgressStat {
        padding: 1.5rem;
    }

    .StatNumber {
        font-size: 2.5rem;
    }

    .StatIcon {
        font-size: 2.5rem;
    }
}

/* Animation classes */
.animate-in {
    animation: slideInUp 0.8s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

@keyframes slideInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger animation delays */
.ProgressStat:nth-child(1) {
    animation-delay: 0.1s;
}

.ProgressStat:nth-child(2) {
    animation-delay: 0.2s;
}

.ProgressStat:nth-child(3) {
    animation-delay: 0.3s;
}

.ProgressStat:nth-child(4) {
    animation-delay: 0.4s;
}



.ProgressHeader {
    background: linear-gradient(135deg, #86a614 0%, #5ec13a20 100%) !important;
    padding: 80px;
    text-align: center;
    margin: 0;
    color: white !important;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

.ProgressHeader h1 {
    color: white !important;
    font-size: 60px !important;
    margin-bottom: 20px !important;
}

.ProgressHeader p {
    color: white !important;
    font-weight: bold !important;
}


.Container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.ContentBody {
    background: #f8f9fa;
    min-height: calc(100vh - 120px);
    padding-bottom: 2rem;
}



.Card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    background: white;
    border-radius: 20px;
    border: 1px solid #e9ecef;
    margin: 20px;
}

.CardHeader {
    padding: 10px 20px;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #efefef;
}

.CardTitle {
    font-size: 1.1rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.CardActions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}




.BtnPrimary {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
}

.BtnPrimary:hover {
    background: var(--PrimaryBGColorHover);
}




.ChartContainer {
    width: 100%;
    padding: 1rem;
    position: relative;
}

.ChartTitle {
    text-align: center;
    margin-bottom: 1rem;
    color: #666;
    font-size: 0.9rem;
    font-weight: 500;
}

.ChartLegend {
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
    gap: 1rem;
}

.LegendItem {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: #666;
}

.LegendBar {
    width: 12px;
    height: 12px;
    background: #6366f1;
    border-radius: 2px;
}

.LegendLine {
    width: 12px;
    height: 3px;
    background: #06d6a0;
    border-radius: 2px;
}

.ChartPlaceholder {
    width: 100%;
    height: 250px;
    background: #fafbfc;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 2rem;
}

.ChartGrid {
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(to right, #e0e0e0 1px, transparent 1px),
        linear-gradient(to bottom, #e0e0e0 1px, transparent 1px);
    background-size: 30px 25px;
    position: relative;
}

.ChartAxes {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    display: flex;
    align-items: end;
    justify-content: space-between;
    padding: 0 20px;
    font-size: 10px;
    color: #666;
}

.ChartYAxis {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 40px;
    width: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding: 20px 5px;
    font-size: 10px;
    color: #666;
}

.ChartYAxisRight {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 40px;
    width: 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px 5px;
    font-size: 10px;
    color: #666;
}

.EmptyState {
    text-align: center;
    padding: 2rem 1rem;
    color: #6c757d;
}

.EmptyStateIcon {
    font-size: 3rem;
    opacity: 0.3;
    margin-bottom: 1rem;
}

.EmptyState h4 {
    color: #495057;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.EmptyState p {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    line-height: 1.5;
}

.BtnLarge {
    width: auto;
    height: auto;
    padding: 0.75rem 1.5rem;
    border-radius: 8px;
    background: var(--PrimaryBGColor);
    color: white;
    font-size: 0.9rem;
    font-weight: 500;
    margin: auto;
}

.AchievementsList {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.AchievementItem {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    border-radius: 8px;
    background: #e8f5e8;
    border-left: 4px solid #4caf50;
}

.AchievementIcon {
    width: 40px;
    height: 40px;
    background: #4caf50;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1.2rem;
}

.AchievementContent {
    flex: 1;
}

.AchievementTitle {
    font-size: 0.95rem;
    font-weight: 600;
    margin: 0 0 0.25rem 0;
    color: #2d5a2d;
}

.AchievementDescription {
    font-size: 0.8rem;
    margin: 0 0 0.25rem 0;
    color: #4a6741;
}

.AchievementDate {
    font-size: 0.75rem;
    color: #6c7b63;
}

.GoalsList {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.GoalItem {
    margin-bottom: 1rem;
}

.GoalHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.GoalTitle {
    font-size: 0.9rem;
    font-weight: 500;
    color: #495057;
}

.GoalType {
    font-size: 0.85rem;
    color: #6c757d;
    background: #e9ecef;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
}



.GoalCategory {
    font-size: 0.8rem;
    color: #6c757d;
}

.Hidden {
    display: none;
}
.hiddenImp{
    display: none !important;
}

@media (max-width: 768px) {
    .Row {
        grid-template-columns: 1fr;
        padding: 0 0.5rem;
    }

    .ProgressStats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
        padding: 1.5rem 0.5rem 1rem;
    }

    .ProgressStat {
        padding: 1.25rem;
    }

    .StatNumber {
        font-size: 1.6rem;
    }

    .StatIcon {
        width: 40px;
        height: 40px;
        font-size: 1.5rem;
    }

}



/* Supscription */





.CardTitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
}



.NoSubscriptionState {
    text-align: center;
    padding: 3rem 2rem;
}

.NoSubscriptionIcon {
    width: 64px;
    height: 64px;
    color: #6c757d;
    margin-bottom: 1.5rem;
}

.NoSubscriptionState h4 {
    font-size: 1.5rem;
    color: #495057;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.NoSubscriptionState p {
    color: #6c757d;
    margin-bottom: 2rem;
    font-size: 1rem;
}


.BtnPrimary {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
}

.BtnPrimary:hover {
    background: var(--PrimaryBGColorHover);
}



.PlansGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    margin-top: 1rem;
}

.PlanCard {
    background: white;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
}

.PlanCard:hover {
    border-color: var(--PrimaryBGColor);
    box-shadow: 0 4px 20px rgba(134, 166, 20, 0.15);
}

.PlanName {
    font-size: 1.25rem;
    font-weight: 600;
    color: #495057;
    margin-bottom: 0.5rem;
}

.PlanPrice {
    font-size: 2rem;
    font-weight: 700;
    color: var(--PrimaryBGColor);
    margin-bottom: 0.25rem;
}

.PlanPrice .Currency {
    font-size: 1.2rem;
    vertical-align: super;
}

.PlanPrice .Period {
    font-size: 1rem;
    font-weight: 400;
    color: #6c757d;
}

.PlanDescription {
    color: #6c757d;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.PlanFeatures {
    list-style: none;
    margin-bottom: 2rem;
    text-align: left;
}

.PlanFeatures li {
    padding: 0.5rem 0;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    color: #495057;
}

.PlanFeatures li:before {
    content: "✓";
    color: var(--PrimaryBGColor);
    font-weight: bold;
    margin-right: 0.75rem;
}

.EmptyState {
    text-align: center;
    padding: 3rem 2rem;
    color: #6c757d;
}

.EmptyStateIcon {
    width: 48px;
    height: 48px;
    margin: 0 auto 1rem;
    opacity: 0.5;
}

.EmptyState h4 {
    font-size: 1.25rem;
    color: #495057;
    margin-bottom: 0.5rem;
}

.EmptyState p {
    margin-bottom: 0;
}

.NoPaymentMethod {
    text-align: center;
    padding: 2rem;
}

.NoPaymentIcon {
    width: 48px;
    height: 48px;
    color: #6c757d;
    margin-bottom: 1rem;
}

.NoPaymentMethod h4 {
    font-size: 1.1rem;
    color: #495057;
    margin-bottom: 0.5rem;
}

.NoPaymentMethod p {
    color: #6c757d;
    margin-bottom: 1.5rem;
    font-size: 0.9rem;
}

.BtnSm {
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
}

.QuickActions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.BtnBlock {
    width: 100%;
    text-align: center;
}

.Modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.Modal.Show {
    opacity: 1;
    visibility: visible;
}



.ModalHeader {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid #e9ecef;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ModalTitle {
    font-size: 1.25rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
}

.ModalClose {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #6c757d;
    padding: 0.25rem;
}


.ModalFooter {
    padding: 1rem 2rem;
    border-top: 1px solid #e9ecef;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.FormGroup {
    margin-bottom: 1.5rem;
}

.FormLabel {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
}




.FormRow {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.CancelWarning {
    text-align: center;
    margin-bottom: 2rem;
}

.WarningIcon {
    width: 48px;
    height: 48px;
    color: #ffc107;
    margin-bottom: 1rem;
}

.CancelWarning h4 {
    font-size: 1.25rem;
    color: #495057;
    margin-bottom: 0.5rem;
}

.CancelWarning p {
    color: #6c757d;
}

.BtnDanger {
    background: #dc3545;
    color: white;
    padding: 12px 34px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.BtnDanger:hover {
    background: #c82333;
}

@media (max-width: 768px) {
    .Row {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .PlansGrid {
        grid-template-columns: 1fr;
    }

}



/* Quiz */

.QuizHeader {
    text-align: center;
    margin-bottom: 0px;
}

.QuizTitle {
    font-size: 2rem;
    color: var(--PrimaryBGColor);
    margin-bottom: 8px;
    font-weight: 600;
}

.QuizSubtitle {
    color: var(--TextPrimary);
}

.QuizCategoriesSection {
    background: #e9e9e9;
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.QuizSectionHeader {
    align-items: center;
    margin-bottom: 1.5rem;
    background-color: white;
    border-radius: 20px;
    padding: 0 20px;
}

.QuizSectionHeader h3 {
    font-size: 1.8rem;
    color: var(--PrimaryBGColor);
    font-weight: 600;
}

.QuizFilters {
    background-color: white;
    gap: 1rem;
    align-items: center;
}

.TopQuizFilter {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    border-bottom: 1px solid rgba(50, 82, 89, 0.08);
}

.QuizFilters select {
    padding: 0.75rem 1rem;
    border: 1px solid var(--BorderColor);
    border-radius: 8px;
    background: white;
    color: var(--TextPrimary);
    font-size: 0.9rem;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

.QuizFilters select:focus {
    outline: none;
    border-color: var(--PrimaryBGColor);
}


.BtnSecondary {
    background: var(--SecondaryBGColor);
    color: var(--SecondaryTextColor);
}

.BtnSecondary:hover {
    background: var(--SecondaryBGColorHover);
}

.BtnOutline {
    background: transparent;
    border: 1px solid var(--BorderColor);
    color: var(--TextPrimary);
}

.BtnOutline:hover {
    border-color: var(--PrimaryBGColor);
    background: var(--PrimaryBGColorOpac10);
}

.QuizCategoriesGrid {
    display: block;
}

.QuizCard {
    background: white;
    border: 2px solid #4fc3f7;
    border-radius: 16px;
    padding: 2rem;
    position: relative;
    transition: all 0.3s ease;
}

.QuizCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(79, 195, 247, 0.3);
}

.DifficultyBadge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
}

.QuizIcon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ff69b4;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    font-size: 2rem;
}

.QuizCardTitle {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--PrimaryBGColor);
    margin-bottom: 1rem;
}

.QuizCardDescription {
    color: var(--TextSecondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.QuizMeta {
    display: flex;
    gap: 2rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
    color: var(--TextSecondary);
}

.QuizMeta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.QuizStartBtn {
    width: 100%;
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
    border: none;
    padding: 1rem 2rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.QuizStartBtn:hover {
    background: var(--PrimaryBGColorHover);
    transform: translateY(-1px);
}

.NoCategories {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--TextSecondary);
}

.NoCategories svg {
    margin-bottom: 1rem;
    opacity: 0.5;
}

.NoCategories p {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.NoCategories small {
    font-size: 1rem;
}

/* Modal Styles */
.ModalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.Modal {
    background: white;
    border-radius: 16px;
    max-width: 500px;
    width: 90%;
    max-height: 80vh;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.ModalHeader {
    padding: 1.5rem 2rem;
    border-bottom: 1px solid var(--BorderColor);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ModalHeader h2 {
    color: var(--TextPrimary);
    font-weight: 600;
}

.ModalClose {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--TextSecondary);
    padding: 0.5rem;
}

.ModalClose:hover {
    color: var(--TextPrimary);
}



.ModalFooter {
    padding: 1rem 2rem 2rem;
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
}

.QuizPreview {
    text-align: center;
}

.QuizPreview h3 {
    font-size: 1.4rem;
    margin-bottom: 1rem;
    color: var(--PrimaryBGColor);
}

.QuizPreview p {
    color: var(--TextSecondary);
    margin-bottom: 1.5rem;
}

/* Quiz Interface Styles */
.QuizInterface {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--BackgroundLight);
    z-index: 2000;
}

.QuizInterface .QuizHeader {
    background: white;
    padding: 1rem 2rem;
    border-bottom: 1px solid var(--BorderColor);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.QuizProgress {
    flex: 1;
    max-width: 400px;
}

.ProgressInfo {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.QuestionCounter {
    font-weight: 600;
    color: var(--TextPrimary);
    font-size: 0.9rem;
}



.QuizTimer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--TextPrimary);
    font-weight: 600;
    font-size: 1.1rem;
}

.QuizActions {
    display: flex;
    gap: 1rem;
}

.QuizActions button {
    padding: 0.5rem 1rem;
    border: 2px solid var(--BorderColor);
    background: white;
    color: var(--TextPrimary);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.QuizActions button:hover {
    border-color: var(--PrimaryBGColor);
    background: var(--PrimaryBGColorOpac10);
}

.QuizContent {
    padding: 2rem;
    height: calc(100vh - 100px);
    overflow-y: auto;
}

.QuestionContainer {
    max-width: 800px;
    margin: 0 auto;
}

.QuestionWrapper {
    background: white;
    border-radius: 20px;
    padding: 3rem;
    margin-bottom: 2rem;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
}

.QuizNavigation {
    background: white;
    border-radius: 16px;
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.QuestionSummary {
    font-size: 0.9rem;
    color: var(--TextSecondary);
}


.ResultsSummary {
    text-align: center;
    padding: 2rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .QuizStatsRow {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .QuizDashboardWrapper {
        padding: 1rem;
    }

    .QuizTitle {
        font-size: 2rem;
    }

    .QuizStatsRow {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .SectionHeader {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }

    .QuizFilters {
        flex-direction: column;
        gap: 0.5rem;
    }

    .QuizMeta {
        flex-direction: column;
        gap: 0.5rem;
    }

    .QuizNavigation {
        flex-direction: column;
        gap: 1rem;
    }

    .QuizNavigation>div {
        display: flex;
        gap: 1rem;
        width: 100%;
        justify-content: center;
    }
}





/* Booking */


.BookSessionBtn {
    padding: 16px 32px;
    background: var(--PrimaryBGColor);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(134, 166, 20, 0.3);
}

.BookSessionBtn:hover {
    background: var(--PrimaryBGColorHover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(134, 166, 20, 0.4);
}

.ModalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.ModalOverlay.Active {
    opacity: 1;
    visibility: visible;
}

.ModalClose {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    z-index: 1001;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.ModalClose:hover {
    background: #f3f4f6;
    color: #333;
}

.BookingContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
}

.BookingHeader {
    text-align: center;
    margin-bottom: 30px;
}

.BookingTitle {
    font-size: 28px;
    font-weight: 700;
    color: var(--PrimaryBGColor);
    margin: 0;
}

.SessionTypeSelector {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 30px;
    justify-content: center;
}

.SessionTypeLabel {
    font-weight: 600;
    color: #333;
    font-size: 16px;
}

.SessionTypeOptions {
    display: flex;
    gap: 12px;
}

.SessionTypeButton {
    padding: 12px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.SessionTypeButton:hover {
    border-color: var(--PrimaryBGColor);
    transform: translateY(-1px);
}

.SessionTypeButton.Active {
    border-color: var(--PrimaryBGColor);
    background: var(--PrimaryBGColorOpac10);
}

.SessionTypeName {
    font-weight: 600;
    color: #333;
    font-size: 14px;
}

.SessionTypeDuration {
    font-size: 12px;
    color: #666;
    margin-top: 2px;
}

.DateRangeHeader {
    text-align: center;
    margin-bottom: 30px;
}

.DateRangeTitle {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    margin: 0 0 8px 0;
}

.DateRangeSubtitle {
    font-size: 14px;
    color: #666;
    margin: 0;
}

.WeekCalendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
}





.DayName {
    font-size: 12px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
}

.DayInfo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 10px 0;
}

.DayShort {
    font-size: 10px;
    color: #9ca3af;
    margin-bottom: 2px;
}

.DayDate {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    line-height: 1;
}

.DayMonth {
    font-size: 11px;
    line-height: 13px;
    color: #6b7280;
    margin-top: 2px;
}

/* .TimeSlotsContainer {
    flex: 1;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
} */

.TimeSlotsContainer .TimeSlot {
    background-color: #10b981;

}

.TimeSlotsContainer .Booked {
    background-color: gray;

}


.PastDateIndicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #d1d5db;
    text-align: center;
}

.PastDateIcon {
    margin-bottom: 12px;
    color: #f87171;
}

.PastDateText div:first-child {
    font-weight: 600;
    margin-bottom: 4px;
}

.PastDateText div:last-child {
    font-size: 12px;
}

/* 
.TimeSlots {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.TimeSlot {
    padding: 10px 8px;
    border: none;
    border-radius: 6px;
    background: #dcfce7;
    color: #166534;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    text-align: center;
} */

/* .TimeSlot:hover {
    background: #bbf7d0;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.TimeSlot.Selected {
    background: var(--PrimaryBGColor);
    color: white;
} */

.AvailableCount {
    margin-top: 8px;
    text-align: center;
    font-size: 11px;
    color: var(--PrimaryBGColor);
    font-weight: 600;
}

.BookingActions {
    margin-top: 30px;
    text-align: center;
    padding: 20px;
    border-top: 1px solid #e5e7eb;
}

.ConfirmBookingBtn {
    padding: 14px 28px;
    background: var(--PrimaryBGColor);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 12px;
}

.ConfirmBookingBtn:hover {
    background: var(--PrimaryBGColorHover);
    transform: translateY(-1px);
}

.ConfirmBookingBtn:disabled {
    background: #9ca3af;
    cursor: not-allowed;
    transform: none;
}

.CancelBtn {
    padding: 14px 28px;
    background: #6b7280;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.CancelBtn:hover {
    background: #4b5563;
}

@media (max-width: 768px) {
    .WeekCalendar {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .DayColumn {
        min-height: auto;
    }

    .SessionTypeSelector {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .modal-container {
        margin: 20px;
        max-width: calc(100vw - 40px);
    }

    .BookingContainer {
        padding: 15px;
    }

    .booking-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .ConfirmBookingBtn {
        margin-right: 0;
    }
}



/*  */


.OpenModalBtn {
    padding: 16px 32px;
    background: var(--PrimaryBGColor);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(134, 166, 20, 0.3);
}

.OpenModalBtn:hover {
    background: var(--PrimaryBGColorHover);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(134, 166, 20, 0.4);
}

.OpenModalBtn.Secondary {
    background: var(--SecondaryBGColor);
    box-shadow: 0 4px 15px rgba(50, 82, 89, 0.3);
}

.OpenModalBtn.Secondary:hover {
    background: var(--SecondaryBGColorHover);
    box-shadow: 0 6px 20px rgba(50, 82, 89, 0.4);
}

.ModalOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.ModalOverlay.Active {
    opacity: 1;
    visibility: visible;
}

.ModalContainer {
    background: white;
    border-radius: 16px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    position: relative;
}

.ModalOverlay.Active .ModalContainer {
    transform: scale(1);
}

.ModalClose {
    position: absolute;
    top: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.8);
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    z-index: 1001;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.2s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ModalClose:hover {
    background: rgba(255, 255, 255, 1);
    color: #333;
}

/* Edit Profile Modal Styles */
.EditProfileModal {
    width: 600px;
    max-width: 90vw;
}

.EditProfileHeader {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px 40px;
    border-radius: 16px 16px 0 0;
    position: relative;
}

.EditProfileTitle {
    font-size: 28px;
    font-weight: 700;
    margin: 0;
}

.EditProfileContent {
    padding: 40px;
}

.TabNavigation {
    display: flex;
    margin-bottom: 40px;
    border-bottom: 1px solid #e5e7eb;
}

.TabButton {
    flex: 1;
    padding: 15px 20px;
    border: none;
    background: none;
    color: #6b7280;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.TabButton.Active {
    color: #667eea;
    border-bottom-color: #667eea;
}

.TabIcon {
    width: 20px;
    height: 20px;
}

.FormGrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
/*
.FormGroup {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.FormGroup.FullWidth {
    grid-column: 1 / -1;
}

.FormLabel {
    font-weight: 600;
    color: #374151;
    font-size: 14px;
}

.FormInput {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.2s ease;
}

.FormInput:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.FormInput:disabled {
    background: #f9fafb;
    color: #9ca3af;
}

.FormNote {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

.FormSelect {
    padding: 12px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 16px;
    background: white;
    cursor: pointer;
    transition: all 0.2s ease;
}

.FormSelect:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
*/



.EditProfileActions {
    margin-top: 40px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;
}

.ActionButton {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ActionButton.Primary {
    background: #667eea;
    color: white;
}

.ActionButton.Primary:hover {
    background: #5a67d8;
    transform: translateY(-1px);
}

.ActionButton.Secondary {
    background: #e5e7eb;
    color: #374151;
}

.ActionButton.Secondary:hover {
    background: #d1d5db;
}

/* Subscribe Modal Styles */
.SubscribeModal {
    width: 500px;
    max-width: 90vw;
}

.SubscribeHeader {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px 40px;
    border-radius: 16px 16px 0 0;
    position: relative;
}

.SubscribeTitle {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 8px 0;
}

.SubscribeSubtitle {
    font-size: 16px;
    opacity: 0.9;
    margin: 0;
}

.SubscribeContent {
    padding: 40px;
}

.StepsNavigation {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
}

.StepItem {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.StepNumber {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    transition: all 0.3s ease;
}

.StepNumber.Active {
    background: #667eea;
    color: white;
}

.StepNumber.Inactive {
    background: #e5e7eb;
    color: #9ca3af;
}

.StepLabel {
    font-size: 14px;
    font-weight: 500;
}

.StepLabel.Active {
    color: #667eea;
}

.StepLabel.Inactive {
    color: #9ca3af;
}

.StepConnector {
    width: 60px;
    height: 2px;
    background: #e5e7eb;
    margin: 0 -30px;
}

.ReviewSection {
    margin-bottom: 40px;
}

.ReviewTitle {
    font-size: 28px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 40px;
}

.PlanCard {
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    transition: all 0.2s ease;
}

.PlanCard:hover {
    border-color: #667eea;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.PlanHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.PlanName {
    font-size: 24px;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.PlanPrice {
    font-size: 28px;
    font-weight: 700;
    color: #667eea;
    margin: 0;
}

.PlanDescription {
    font-size: 14px;
    color: #6b7280;
    margin: 4px 0 16px 0;
}

.PlanFeatures {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.PlanFeature {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: #6b7280;
}

.FeatureIcon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.SubscribeActions {
    display: flex;
    gap: 12px;
}

.SubscribeButton {
    flex: 1;
    padding: 16px 24px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.SubscribeButton.Primary {
    background: #667eea;
    color: white;
}

.SubscribeButton.Primary:hover {
    background: #5a67d8;
    transform: translateY(-1px);
}

.SubscribeButton.Secondary {
    background: #e5e7eb;
    color: #374151;
}

.SubscribeButton.Secondary:hover {
    background: #d1d5db;
}

@media (max-width: 768px) {
    .FormGrid {
        grid-template-columns: 1fr;
    }

    .EditProfileModal,
    .SubscribeModal {
        margin: 20px;
        max-width: calc(100vw - 40px);
    }

    .EditProfileContent,
    .SubscribeContent {
        padding: 20px;
    }

    .EditProfileHeader,
    .SubscribeHeader {
        padding: 20px;
    }

    .StepsNavigation {
        gap: 20px;
    }

    .StepConnector {
        width: 40px;
        margin: 0 -20px;
    }

    .SubscribeActions {
        flex-direction: column;
    }

    .MainContainer {
        flex-direction: column;
        align-items: center;
    }
}



/* pricing */
.BillingToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0;
}

.BillingOption {
    padding: 8px 16px;
    border: none;
    background: transparent;
    color: var(--TextSecondary);
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.BillingOption.Active {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
}

.SaveBadge {
    background: var(--Success);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

/* Desktop Grid Styles */
.DesktopGrid {
    display: flex !important;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    justify-content: center;
}

/* Mobile Slider Styles */
.MobileSlider {
    display: none;
    position: relative;
    margin-bottom: 4rem;
    padding: 0 2rem;
}



/*
.keen-slider {
    overflow: hidden !important;
    width: 100%;
    position: relative;
}

.keen-slider__slide {
    width: 100% !important;
    min-width: 100% !important;
    flex-shrink: 0;
    padding: 0 0.5rem;
    display: flex !important;
    align-items: stretch;
    justify-content: center;
    position: relative;
}*/

/* Pricing Card Styles */
.PricingCard {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    width: 100%;
    max-width: 350px;
}

.PricingCard:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.PricingCard.Featured {
    border: 3px solid var(--PrimaryBGColor);
    box-shadow: 0 12px 40px rgba(134, 166, 20, 0.2);
    z-index: 2;
}

.PopularBadge {
    position: absolute;
    top: 20px;
    right: -10px;
    background: linear-gradient(135deg, var(--PrimaryBGColor) 0%, var(--DarkBGColor) 100%);
    color: var(--PrimaryTextColor);
    padding: 8px 20px;
    border-radius: 20px 0 0 20px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.PlanHeader {
    padding: 2.5rem 2rem 2rem;
    text-align: center;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.PlanName {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--TextPrimary);
    margin-bottom: 0.5rem;
}

.PlanDescription {
    color: var(--TextSecondary);
    margin-bottom: 2rem;
    line-height: 1.5;
}

.PlanPrice {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.25rem;
    margin-bottom: 1rem;
}

.Currency {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--PrimaryBGColor);
}

.Amount {
    font-size: 3rem;
    font-weight: 700;
    color: var(--PrimaryBGColor);
}

.Period {
    font-size: 1rem;
    color: var(--TextSecondary);
}

.SavingsText {
    color: var(--Success);
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.SavingsText.Show {
    opacity: 1;
}

.PlanFeatures {
    flex: 1;
    padding: 2rem;
    list-style: none;
}

.PlanFeature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.95rem;
    color: var(--TextPrimary);
}

.PlanFeature:last-child {
    border-bottom: none;
}

.FeatureIcon {
    width: 20px;
    height: 20px;
    background: var(--PrimaryBGColorOpac20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.FeatureIcon::before {
    content: '✓';
    color: var(--PrimaryBGColor);
    font-weight: 700;
    font-size: 12px;
}

.PlanActions {
    padding: 2rem;
    border-top: 1px solid #f3f4f6;
}

.SelectPlanBtn {
    width: 100%;
    padding: 1rem 2rem;
    border: 2px solid var(--PrimaryBGColor);
    border-radius: 12px;
    background: transparent;
    color: var(--PrimaryBGColor);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.SelectPlanBtn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--PrimaryBGColor) 0%, var(--DarkBGColor) 100%);
    transition: left 0.3s ease;
    z-index: -1;
}

.SelectPlanBtn:hover::before {
    left: 0;
}

.SelectPlanBtn:hover {
    color: var(--PrimaryTextColor);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(134, 166, 20, 0.4);
}

.SelectPlanBtn.Primary {
    background: linear-gradient(135deg, var(--PrimaryBGColor) 0%, var(--DarkBGColor) 100%);
    color: var(--PrimaryTextColor);
}

.SelectPlanBtn.Primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 35px rgba(134, 166, 20, 0.5);
}

/* Navigation Arrows */
.SliderNav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: white;
    border: 2px solid var(--BorderColor);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    opacity: 0;
}

.MobileSlider:hover .SliderNav {
    opacity: 1;
}

.SliderNav:hover {
    border-color: var(--PrimaryBGColor);
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
}

.SliderNav:disabled {
    opacity: 0.3 !important;
    cursor: not-allowed;
}

.SliderNavPrev {
    left: -25px;
}

.SliderNavNext {
    right: -25px;
}

.SliderNav svg {
    width: 20px;
    height: 20px;
}

/* Dots Navigation */
.SliderDots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.SliderDot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--BorderColor);
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

.SliderDot.Active {
    background: var(--PrimaryBGColor);
    transform: scale(1.2);
}

/* Bundle Section Styles */
.BundleSection {
    margin-top: 6rem;
}

.BundleGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
}

.BundleCard {
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
}

.BundleCard:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
}

.BundleCardBody {
    padding: 30px 25px 25px;
    position: relative;
    text-align: center;

    display: flex;
    flex-direction: column;
    height: 100%;
}
.MostPopularBadge {
    position: absolute;
    top: -15px;
    left: 50%;
    -o-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -khtml-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.BundleIcon {
    width: 64px;
    height: 64px;
    background: var(--PrimaryBGColorOpac20);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
    color: var(--PrimaryBGColor);
}

.BundleTitle {
    font-size: 22px;
    font-weight: 800;
    color: var(--TextPrimary);
    margin:0;
}

.BundlePrice,.BundlePrice .Currency {
    font-size: 34px;
    line-height: 34px;
    font-weight: 700;
    color: var(--PrimaryBGColor);
    margin: 0;
}
.BundlePrice{
    margin:20px 0;
}


.BundlePrice .Period{
    font-size:16px;
    color:var(--TextPrimary);
}


.BundleDescription {
    color: var(--TextSecondary);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.BundleFeatures {
    list-style: none;
    text-align: left;
    margin-bottom: 2rem;
    height: 100%;
}

.BundleFeature {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 2px 0;
    font-size: 15px;
    color: var(--TextPrimary);
}
.BundleFeature svg{
    stroke: var(--TextPrimary);
    stroke-width: 1.6;
}
/*
.BundleFeature::before {
    content: '✓';
    color: var(--Success);
    font-weight: 700;
    width: 16px;
    flex-shrink: 0;
}
*/

.SelectBundleBtn {
    width: 100%;
    padding: 10px 20px;
    border: 2px solid var(--PrimaryBGColor);
    border-radius: 12px;
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.SelectBundleBtn:hover {
    background: var(--PrimaryBGColorHover);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(134, 166, 20, 0.4);
}

.SelectBundleBtn.Outline {
    background: transparent;
    color: var(--PrimaryBGColor);
}

.SelectBundleBtn.Outline:hover {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
}

.SelectBundleBtn.Warning {
    background: var(--Warning);
    border-color: var(--Warning);
    color: var(--TextPrimary);
}

.SelectBundleBtn.Warning:hover {
    background: #d97706;
    border-color: #d97706;
}

/* Responsive Design */
@media (max-width: 767px) {
    .SectionTitle {
        font-size: 2rem;
    }

    /* Hide desktop, show mobile */
    .DesktopGrid {
        display: none !important;
    }

    .MobileSlider {
        display: block !important;
    }

    .PricingCard {
        height: auto;
        min-height: 500px;
        width: 100%;
        max-width: none;
    }

    .SliderNav {
        display: flex !important;
        opacity: 1 !important;
    }

    .SliderNavPrev {
        left: -15px;
    }

    .SliderNavNext {
        right: -15px;
    }

    .BundleGrid {
        grid-template-columns: 1fr;
    }

    .container {
        padding: 1rem;
    }
}

@media (min-width: 768px) {
    .DesktopGrid {
        display: flex !important;
    }

    .MobileSlider {
        display: none !important;
    }

    .SliderNav {
        display: none !important;
    }

    .SliderDots {
        display: none !important;
    }
}

@media (max-width: 480px) {
    .PlanHeader {
        padding: 2rem 1.5rem 1.5rem;
    }

    .PlanFeatures {
        padding: 1.5rem;
    }

    .PlanActions {
        padding: 1.5rem;
    }

    .BundleCardBody {
        padding: 2rem;
    }

    .Amount {
        font-size: 2.5rem;
    }

    .SliderNavPrev,
    .SliderNavNext {
        width: 40px;
        height: 40px;
    }

    .SliderNav svg {
        width: 16px;
        height: 16px;
    }
}




/* Performance Dashboard */
.PerformanceDashboard {
    width: 100%;
    margin: 20px auto;
}

.PerformanceHeader {
    background: linear-gradient(135deg, var(--PrimaryBGColor), var(--DarkBGColor));

    background: linear-gradient(135deg, var(--PrimaryBGColor), #627619);

    border-radius: 20px;
    padding: 40px;
    margin-bottom: 30px;
    color: var(--PrimaryTextColor);
    box-shadow: 0 8px 32px rgba(134, 166, 20, 0.3);
    position:relative;
}

.PerformanceHeader::before {
    content:'';
    position:absolute;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    background: url('../img/ramadan-kareem-islamic-background-design-with-moon\ 1.png');
    background-position: bottom center;
    background-size: cover;
    
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}



.PerformanceTitle {
    font-size: 24px;
    line-height: 24px;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
}

.PerformanceStats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
    text-align: center;
}

.PerformanceStat {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.PerformanceStat .StatValue {
    color: white;
    font-size: 30px;
    line-height: 30px;

}

.PerformanceStat .StatLabel {
    color: white;

}

.StatValue {
    font-size: 56px;
    font-weight: 700;
    margin-bottom: 8px;
}

.StatLabel {
    font-size: 18px;
    opacity: 0.95;
    font-weight: 500;
}


.StatLabel.Bold{
    opacity: 1;
    font-weight: 600;
}



/* Rating Distribution */
.RatingCard {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 30px;
    overflow: hidden;
}



.CardTitle {
    font-size: 28px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}



.RatingRow {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 10px;
    padding: 5px 12px;
}



.Star {
    font-size: 20px;
    color: #fbbf24;
    margin-right: 2px;
}

.Star.Empty {
    color: #e5e7eb;
}

.RatingBar {
    flex: 1;
    height: 12px;
    width: 100%;
    background: #f3f4f6;
    border-radius: 6px;
    overflow: hidden;
}

.RatingFill {
    height: 100%;
    background: linear-gradient(90deg, var(--PrimaryBGColor), var(--DarkBGColor));
    background: linear-gradient(90deg, var(--PrimaryBGColor), #627619);
    
    
    
    transition: width 1s ease-out;
}

.RatingCount {
    min-width: 60px;
    text-align: center;
    font-weight: 600;
    color: #4b5563;
    font-size: 16px;
}

/* Filters */
.FiltersSection {
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.FiltersGrid {
    /*display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: end;*/




    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    flex-direction: row;
    gap:5px;
}

.FilterGroup {
    display: flex;
    gap: 10px;
}

@media screen and (max-width: 768px) {
    .FilterGroup {
        flex-direction: column;
    }
}

@media screen and (max-width: 480px) {
    .FilterGroup {
        flex-direction: column;
    }
}

.FilterLabel {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
}

.FilterSelect {
    padding: 14px 18px;
    border: 2px solid var(--PrimaryBGColor);
    border-radius: 10px;
    font-size: 16px;
    background: white;
    color: #374151;
    cursor: pointer;
    transition: all 0.3s ease;
}

.FilterSelect:focus {
    outline: none;
    border-color: var(--PrimaryBGColor);
    box-shadow: 0 0 0 4px var(--PrimaryBGColorOpac20);
}

/* Earnings Dashboard */
.EarningsDashboard {
    max-width: 1200px;
    margin: 40px auto;
}

.EarningsGrid {
    display: grid;
    gap: 30px;
}

/* 
.EarningsMainContent {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 30px;
} */

.ChartCard {
    background: white;
    /* margin: 10px; */
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.ChartHeader {
    padding: 30px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ChartTitle {
    font-size: 22px;
    width: 100%;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.YearSelect {
    padding: 10px 16px;
    border: 2px solid var(--PrimaryBGColor);
    border-radius: 8px;
    background: white;
    font-size: 14px;
    cursor: pointer;
}

.PaymentDate {
    color: var(--SecondaryBGColor);
}

.ExportButton {
    padding: 10px 20px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    background: white;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ExportButton:hover {
    border-color: var(--PrimaryBGColor);
    background: var(--PrimaryBGColorOpac10);
    color: var(--PrimaryBGColor);
}

.ChartContainer {
    padding: 30px;
}

.ChartPlaceholder {
    height: 350px;
    background: #f9fafb;
    border: 2px dashed #e5e7eb;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    position: relative;
}

.ChartPlaceholder::before {
    content: '';
    position: absolute;
    bottom: 20px;
    left: 50px;
    right: 50px;
    height: 200px;
    background: linear-gradient(45deg, var(--PrimaryBGColor) 0%, transparent 100%);
    border-radius: 8px 8px 0 0;
    opacity: 0.3;
}

.ChartIcon {
    font-size: 60px;
    color: #9ca3af;
    margin-bottom: 16px;
}

.ChartText {
    color: #6b7280;
    font-size: 18px;
    font-weight: 500;
}

.StatsOverview {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* .StatCard {
    text-align: center;
    padding: 24px;
    border-radius: 12px;
    background: rgba(134, 166, 20, 0.1);
} */

/* .StatNumber {
    font-size: 32px;
    font-weight: 700;
    color: var(--PrimaryBGColor);
    margin-bottom: 8px;
} */

.StatText {
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
}

/* Payment History */
.PaymentTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.PaymentTable th {
    background: #f9fafb;
    padding: 16px;
    text-align: right;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
}

.PaymentTable td {
    padding: 20px 16px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 14px;
    color: #4b5563;
}

.PaymentTable tbody tr:hover {
    background: #f9fafb;
}

.PaymentAmount {
    font-weight: 700;
    color: var(--PrimaryBGColor);
    font-size: 16px;
}

.SessionsTable td.PaymentAmount {
    color: var(--PrimaryBGColor) !important;
    font-weight: 700;;
}
.StatusBadge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.StatusBadge.Paid {
    background: #d1fae5;
    color: #065f46;
}

.StatusBadge.Pending {
    background: #fef3c7;
    color: #92400e;
}

.ActionButton {
    padding: 8px 16px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #6b7280;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    margin-right: 8px;
    transition: all 0.2s ease;
}

.ActionButton:hover {
    border-color: var(--PrimaryBGColor);
    background: var(--PrimaryBGColorOpac10);
    color: var(--PrimaryBGColor);
}

/* Sidebar */
.EarningsSidebar {
    display: grid;
    gap: 30px;
    grid-template-columns: 2fr 1fr;
    margin-top: 10px;
}
@media screen and (max-width: 992px) {
    .EarningsSidebar {
        gap: 10px;
        grid-template-columns: 1fr;
    }
}

.SidebarCard {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

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

.NotEarning .StatsItem{
    border-top: 1px solid #383838;
    margin-top: 0;
    padding: 10px 0;
    font-weight: 700;;
}

/* 
.SidebarHeader {
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
} */

.SidebarTitle {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.SidebarBody {
    padding: 24px;
}

.PaymentMethod {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    background: #f9fafb;
    border-radius: 10px;
    margin-bottom: 16px;
}

.PaymentIcon {
    font-size: 28px;
}

.PaymentDetails h4 {
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.PaymentDetails p {
    color: #6b7280;
    font-size: 14px;
}

.UpdateButton {
    padding: 10px 20px;
    border: 2px solid #d1d5db;
    border-radius: 8px;
    background: white;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.UpdateButton:hover {
    border-color: var(--PrimaryBGColor);
    background: var(--PrimaryBGColorOpac10);
    color: var(--PrimaryBGColor);
}

.InfoSection {
    margin-bottom: 24px;
}

.InfoSection h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
}

.InfoBox {
    padding: 16px;
    background: #f9fafb;
    border-radius: 10px;
    font-size: 14px;
    color: #6b7280;
}

.InfoBox strong {
    color: #1f2937;
}

.TaxInfo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.TaxVerified {
    color: #059669;
    font-weight: 600;
}

/* Breakdown Card */
.BreakdownList {
    list-style: none;
}

.BreakdownItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
}

.BreakdownItem:last-child {
    border-bottom: none;
    padding-top: 16px;
    margin-top: 8px;
    border-top: 2px solid #e5e7eb;
}

.BreakdownLabel {
    font-size: 14px;
    color: #6b7280;
}

.BreakdownValue {
    font-weight: 600;
    color: #1f2937;
}

.BreakdownValue.Total {
    color: var(--PrimaryBGColor);
    font-size: 18px;
}

.BreakdownValue.Negative {
    color: #ef4444;
}

.SessionTypes {
    margin-top: 24px;
}

.SessionTypes h4 {
    font-size: 16px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 12px;
}

/* Responsive */
@media (max-width: 1024px) {
    .EarningsGrid {
        grid-template-columns: 1fr;
    }

    .PerformanceStats {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .FiltersGrid {
        /*grid-template-columns: 1fr;
        gap: 20px;*/
        
    }
}

@media (max-width: 768px) {

    .PerformanceDashboard,
    .EarningsDashboard {
        padding: 16px 0;
    }

    .PerformanceStats {
        grid-template-columns: 1fr;
    }

    .PerformanceTitle {
        font-size: 32px;
    }

    .StatValue {
        font-size: 42px;
    }

    .StatsOverview {
        grid-template-columns: 1fr;
    }

    .RatingRow {
        /*flex-direction: column;
        align-items: stretch;*/
        gap: 5px;
    }

    .RatingStars {
        min-width: auto;
        justify-content: center;
    }

    .PaymentTable {
        font-size: 12px;
    }

    .PaymentTable th,
    .PaymentTable td {
        padding: 12px 8px;
    }
}


/* filters and search */
.FilterSearchCard {
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

.FilterSearchTitle {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 16px;
}

.FilterSearchGrid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.FilterSearchGrid .FilterGroup,
.FiltersSection .FilterGroup {
    display: flex;
    align-items: center;
    flex-direction: column;
}

.FilterLabel {
    font-weight: 600;
    margin-bottom: 6px;
    color: #325259;
}

.FilterInput,
.FilterSelect {
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    outline: none;
}

.FilterInput:focus,
.FilterSelect:focus {
    border-color: var(--PrimaryBGColor);
    box-shadow: 0 0 0 2px var(--PrimaryBGColorOpac20);
}

.FilterActions {
    margin-top: 20px;
    display: flex;
    gap: 12px;
}

.FilterButton {
    padding: 10px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
}



/* Action Button */
.action-btn {
    border: 2px solid var(--PrimaryBGColor);
    background: transparent;
    color: var(--PrimaryBGColor);
    padding: 0.25rem 0.6rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s;
}

.action-btn:hover {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
}

/* Pagination */
.ReschedulePaginationWrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
}

.ReschedulePagination {
    display: flex;
    gap: 0.5rem;
}

.ReschedulePaginationButton {
    border: 1px solid var(--border);
    background: var(--white);
    padding: 0.5rem 0.9rem;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: all 0.2s;
}

.ReschedulePaginationButton:hover:not(:disabled) {
    border-color: var(--PrimaryBGColor);
    color: var(--PrimaryBGColor);
}

.ReschedulePaginationButton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.ReschedulePaginationActive {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
    border-color: var(--PrimaryBGColor);
}

.ReschedulePaginationInfo {
    font-size: 0.9rem;
    color: #111;
    font-weight: 600;
    margin-left: 1rem;
}


.PageContainer {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    padding: 24px;
    max-width: 1200px;
    margin: auto;
}

.PageHeader {
    font-size: 22px;
    font-weight: 600;
    margin-bottom: 20px;
}

.ActionButtons {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
}

.ActionButton {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 2px solid var(--PrimaryBGColor);
    border-radius: 8px;
    background: transparent;
    color: var(--PrimaryBGColor);
    font-size: 14px;
    cursor: pointer;
    transition: 0.2s;
}

.ActionButton:hover {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
}

.DataTable {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.DataTable th {
    background: #f8f9fa;
    text-align: left;
    padding: 12px;
    font-size: 14px;
    font-weight: 600;
    border-bottom: 2px solid #e5e7eb;
}

.DataTable td {
    padding: 14px 12px;
    font-size: 14px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: top;
}

.StatusApproved {
    background: var(--ApprovedColor);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
}

.StatusRejected {
    background: var(--RejectedColor);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
}

.PriorityNormal {
    background: var(--PriorityColor);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 20px;
    display: inline-block;
}

.ActionView {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border: 2px solid var(--PrimaryBGColor);
    border-radius: 8px;
    cursor: pointer;
    transition: 0.2s;
}

.ActionView:hover {
    background: var(--PrimaryBGColor);
}

.ActionViewIcon {
    width: 18px;
    height: 18px;
    stroke: var(--PrimaryBGColor);
    transition: 0.2s;
}

.ActionView:hover .ActionViewIcon {
    stroke: white;
}

.TableFooter {
    font-size: 14px;
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.Pagination {
    display: flex;
    gap: 6px;
}

.PaginationButton {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    cursor: pointer;
    background: white;
}

.PaginationButton:hover {
    background: #f3f4f6;
}


.PricingHeaderSection {
    background: var(--PrimaryColor);
    color: white;
    padding: 2rem;
}

.PricingHeaderTitle {
    margin: 0;
}

.PricingHeaderSubtitle {
    margin: 0.5rem 0 0;
}

/* Action Buttons */
.PricingActionButtons {
    margin: 1rem 0;
    display: flex;
    gap: 1rem;
}

.AddPackageButton,
.PreviewPricingButton,
.SaveSettingsButton {
    padding: 0.6rem 1rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-weight: bold;
}

.AddPackageButton {
    background: var(--PrimaryColor);
    color: white;
}

.AddPackageButton:hover {
    background: var(--PrimaryHover);
}

.PreviewPricingButton {
    background: white;
    border: 1px solid var(--PrimaryColor);
    color: var(--PrimaryColor);
}

/* Cards */
.DiscountCodesCard,
.PricingSettingsCard {
    border: 1px solid var(--BorderColor);
    border-radius: 8px;
    margin-top: 2rem;
    background: white;
}

.DiscountCodesHeader,
.PricingSettingsHeader {
    padding: 1rem;
    border-bottom: 1px solid var(--BorderColor);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.DiscountCodesTable {
    width: 100%;
    border-collapse: collapse;
}

.DiscountCodesTable th,
.DiscountCodesTable td {
    padding: 0.8rem;
    border-bottom: 1px solid var(--BorderColor);
    text-align: left;
}

/* Modal */
.PackageModal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    justify-content: center;
    align-items: center;
}

.PackageModalContent {
    background: white;
    border-radius: 8px;
    padding: 1.5rem;
    width: 400px;
}

.PackageModalHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.PackageModalClose {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

.PackageModalFooter {
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.CancelModalButton {
    background: white;
    border: 1px solid var(--BorderColor);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
}

.SaveModalButton {
    background: var(--PrimaryColor);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    cursor: pointer;
}




.PackagesGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-bottom: 2rem;
}

/* Package Cards */
.PackageCard {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.PackageHeader {
    padding: 1rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
}

.PackageName {
    font-size: 1rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.PackagePrice {
    padding: 1.5rem 1rem;
    text-align: center;
    background: white;
}

.PriceAmount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--PrimaryBGColor);
    display: block;
    margin-bottom: 0.25rem;
}

.PricePeriod {
    font-size: 0.875rem;
    color: #6b7280;
}

.PackageFeatures {
    padding: 1rem;
    background: white;
}

.PackageFeatures h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.75rem 0;
}

.FeaturesList {
    list-style: none;
    margin: 0;
    padding: 0;
}

.FeatureItem {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
    font-size: 0.875rem;
    color: #374151;
}

.FeatureIcon {
    color: #10b981;
    font-weight: 600;
    font-size: 0.75rem;
}

.PackageActions {
    padding: 1rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    border-top: 1px solid #f3f4f6;
    background: white;
}

/* Action Buttons */
.ActionBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.375rem 0.75rem;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    background: white;
    color: #374151;
    text-decoration: none;
}

.BtnSmall {
    padding: 0.375rem 0.75rem;
    font-size: 0.8rem;
}

.BtnPrimary {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
    border-color: var(--PrimaryBGColor);
}

.BtnPrimary:hover {
    background: var(--PrimaryBGColorHover);
    border-color: var(--PrimaryBGColorHover);
}

.BtnSuccess {
    background: #10b981;
    color: white;
    border-color: #10b981;
}

.BtnSuccess:hover {
    background: #059669;
    border-color: #059669;
}

.BtnWarning {
    background: #f59e0b;
    color: white;
    border-color: #f59e0b;
    padding: 12px 34px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 120px;
}

.BtnWarning:hover {
    background: #d97706;
    border-color: #d97706;
}



/* Discount Codes Section */
.DiscountCodesSection {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.SectionHeader {
    padding: 1rem 1.5rem;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.SectionHeader h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: #374151;
    margin: 0;
}

.TableContainer {
    overflow-x: auto;
}

.DiscountTable {
    width: 100%;
    border-collapse: collapse;
    background: white;
}

.DiscountTable th {
    background: #f9fafb;
    padding: 0.75rem;
    text-align: left;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
}

.DiscountTable td {
    padding: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.875rem;
    color: #374151;
    background: white;
}

.DiscountCode {
    font-family: 'Courier New', monospace;
    background: #f3f4f6;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    color: #374151;
    font-weight: 600;
}

.StatusBadge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.ActiveBadge {
    background: #dcfce7;
    color: #166534;
}

/* Pricing Settings Section */
.PricingSettingsSection {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.SettingsForm {
    padding: 1.5rem;
}

.FormGroup {
    margin-bottom: 1.25rem;
}

.FormLabel {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.5rem;
}

.FormNote {
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 400;
}

.FormControl {
    width: 100%;
    padding: 15px 15px 15px 45px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: white;
    color: #374151;
    font-size: 0.875rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none;
}



.FormControl::placeholder {
    color: #aaa;
}


.FormControl:focus {
    outline: none;
    border-color: var(--PrimaryBGColor);
    background: white;
    box-shadow: 0 0 0 3px rgba(134, 166, 20, 0.1);
}

.FormControl:read-only {
    background: #f9fafb;
    color: #6b7280;
}

.FormText {
    display: block;
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

.CheckboxGroup {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.FormCheckbox {
    width: 16px;
    height: 16px;
    accent-color: var(--PrimaryBGColor);
}

.CheckboxLabel {
    font-size: 0.875rem;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
}

.ManualOverrideBtn {
    margin-top: 0.5rem;
}

.PreviewSection {
    background: #f9fafb;
    padding: 1rem;
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    margin-bottom: 1.25rem;
}

.PreviewSection h6 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #374151;
    margin: 0 0 0.5rem 0;
}

.PreviewText {
    font-size: 0.875rem;
    color: #374151;
    margin: 0 0 0.25rem 0;
}

.PreviewPrice {
    font-weight: 600;
    color: var(--PrimaryBGColor);
}

.PreviewNote {
    font-size: 0.75rem;
    color: #6b7280;
    margin-top: 0.5rem;
}

.FormActions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1.5rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .PackagesGrid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .PackagesGrid {
        grid-template-columns: 1fr;
    }

    .PackageActions {
        flex-direction: column;
    }

    .FormActions {
        flex-direction: column;
    }
}


.ConfigurationCard {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ConfigurationCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.SectionHeader {
    background: linear-gradient(135deg, var(--PrimaryBGColor), var(--DarkBGColor));
    color: var(--PrimaryTextColor);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.SectionTitle {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.SectionBody {
    padding: 24px;
}

.StreakForm {
    display: flex;
    flex-direction: column;
    gap: 20px;
}



.FieldLabel {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
}

.InputField {
    padding: 12px 16px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.InputField:focus {
    outline: none;
    border-color: var(--PrimaryBGColor);
    background: white;
    box-shadow: 0 0 0 3px var(--PrimaryBGColorOpac20);
}

.OptionLabel {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
    padding: 8px 0;
}

.OptionCheckbox {
    width: 18px;
    height: 18px;
    accent-color: var(--PrimaryBGColor);
    cursor: pointer;
}

.SaveButton {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
}

.SaveButton:hover {
    background: var(--PrimaryBGColorHover);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--PrimaryBGColorOpac30);
}

.EditButton {
    background: transparent;
    color: var(--PrimaryBGColor);
    border: 2px solid var(--PrimaryBGColor);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.EditButton:hover {
    background: var(--PrimaryBGColor);
    color: white;
    transform: translateY(-1px);
}

.RemoveButton {
    background: #e74c3c;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.RemoveButton:hover {
    background: #c0392b;
    transform: translateY(-1px);
}

.CreateButton {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 6px;
}

.CreateButton:hover {
    background: var(--PrimaryBGColorHover);
    transform: translateY(-1px);
}

.RewardsContainer {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.RewardItem {
    background: white;
    border: 2px solid #e1e8ed;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.RewardItem::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--PrimaryBGColor), var(--DarkBGColor));
    background: linear-gradient(90deg, var(--PrimaryBGColor), #627619);

    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.RewardItem:hover {
    border-color: var(--PrimaryBGColor);
    transform: translateY(-4px);
    box-shadow: 0 8px 25px var(--PrimaryBGColorOpac20);
}

.RewardItem:hover::before {
    transform: scaleX(1);
}

.RewardEmoji {
    font-size: 48px;
    margin-bottom: 16px;
    display: block;
}

.RewardName {
    font-size: 18px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
}

.RewardText {
    font-size: 14px;
    color: #7f8c8d;
    margin-bottom: 16px;
    line-height: 1.5;
}

.RewardCost {
    color: var(--PrimaryBGColor);
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 16px;
}

.RewardButtons {
    display: flex;
    gap: 8px;
    justify-content: center;
}

.ActionIcon {
    width: 16px;
    height: 16px;
}

@media (max-width: 768px) {
    .MainContainer {
        padding: 0 10px;
    }

    .SectionBody {
        padding: 20px;
    }

    .RewardsContainer {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .SectionHeader {
        padding: 16px 20px;
    }

    .SectionTitle {
        font-size: 18px;
    }
}

@media (max-width: 480px) {

    .RewardItem {
        padding: 20px;
    }

    .RewardEmoji {
        font-size: 40px;
    }

    .RewardButtons {
        flex-direction: column;
        gap: 8px;
    }
}




.ManagementCard {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.ManagementCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.ManagementHeader {
    background: linear-gradient(135deg, var(--PrimaryBGColor), var(--DarkBGColor));
    color: var(--PrimaryTextColor);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ManagementTitle {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
}

.ManagementBody {
    padding: 24px;
}

.HeaderControls {
    display: flex;
    gap: 16px;
    align-items: center;
}

.SearchInput {
    padding: 8px 12px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 14px;
    max-width: 250px;
    backdrop-filter: blur(10px);
}

.SearchInput::placeholder {
    color: rgba(255, 255, 255, 0.8);
}

.SearchInput:focus {
    outline: none;
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.3);
}



.FilterSelect option {
    background: var(--PrimaryBGColor);
    color: white;
}

.CreateButton {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: 2px solid rgba(255, 255, 255, 0.3);
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
}

.CreateButton:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
}

.DataTable {
    width: 100%;
    border-collapse: collapse;
    margin-top: 16px;
}

.DataTable th {
    background: #f8f9fa;
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: #495057;
    border-bottom: 2px solid #dee2e6;
}

.DataTable td {
    padding: 12px 16px;
    border-bottom: 1px solid #dee2e6;
    vertical-align: middle;
}

.DataTable tr:hover {
    background: #f8f9fa;
}

.StatusBadge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
}

.StatusPublished {
    background: rgba(40, 167, 69, 0.1);
    color: var(--SuccessColor);
}

.StatusDraft {
    background: rgba(255, 193, 7, 0.1);
    color: var(--WarningColor);
}

.StatusArchived {
    background: rgba(108, 117, 125, 0.1);
    color: var(--DarkGrayColor);
}

.PageTitle {
    font-weight: 600;
    margin-bottom: 4px;
}

.PageDescription {
    font-size: 14px;
    color: var(--DarkGrayColor);
}

.UrlSlug {
    font-family: 'Courier New', monospace;
    background: #f8f9fa;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
}

.ActionButton {
    padding: 6px 12px;
    border: 2px solid var(--PrimaryBGColor);
    background: transparent;
    color: var(--PrimaryBGColor);
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 8px;
    transition: all 0.3s ease;
}

.ActionButton:hover {
    background: var(--PrimaryBGColor);
    color: white;
}

.ActionButtonDanger {
    border-color: var(--DangerColor);
    color: var(--DangerColor);
}

.ActionButtonDanger:hover {
    background: var(--DangerColor);
    color: white;
}

.ActionButtonPrimary {
    background: var(--PrimaryBGColor);
    color: white;
    border-color: var(--PrimaryBGColor);
}

.ActionButtonPrimary:hover {
    background: var(--PrimaryBGColorHover);
}

.BulkActions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #dee2e6;
}

.BulkButtons {
    display: flex;
    gap: 8px;
}

.PaginationControls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.PaginationInfo {
    padding: 8px 12px;
    color: var(--DarkGrayColor);
    font-size: 14px;
}

.TemplateGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.TemplateCard {
    background: white;
    border: 2px solid #e1e8ed;
    border-radius: 12px;
    padding: 24px;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.TemplateCard:hover {
    border-color: var(--PrimaryBGColor);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--PrimaryBGColorOpac20);
}

.TemplateIcon {
    margin-bottom: 16px;
}

.TemplateName {
    font-size: 16px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
}

.TemplateDescription {
    font-size: 14px;
    color: var(--DarkGrayColor);
    margin-bottom: 16px;
}

.DropZone {
    border: 2px dashed var(--PrimaryBGColor);
    border-radius: 12px;
    padding: 48px;
    text-align: center;
    background: rgba(134, 166, 20, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
}

.DropZone:hover {
    background: rgba(134, 166, 20, 0.1);
    border-color: var(--PrimaryBGColorHover);
}

.DropZone.dragover {
    background: rgba(134, 166, 20, 0.15);
    border-color: var(--DarkBGColor);
    transform: scale(1.02);
}

.DropZoneIcon {
    margin-bottom: 16px;
    color: var(--PrimaryBGColor);
}

.DropZoneTitle {
    font-size: 20px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
}

.DropZoneText {
    color: var(--DarkGrayColor);
    margin-bottom: 20px;
}

.DropZoneDetails {
    font-size: 14px;
    color: var(--DarkGrayColor);
    margin-top: 20px;
}

.MediaGrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.MediaItem {
    background: white;
    border: 2px solid #e1e8ed;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    position: relative;
    cursor: pointer;
}

.MediaItem:hover {
    border-color: var(--PrimaryBGColor);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--PrimaryBGColorOpac20);
}

.MediaItem:hover .MediaActions {
    display: flex;
}

.MediaThumbnail {
    height: 150px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--PrimaryBGColor);
}

.MediaInfo {
    padding: 16px;
}

.MediaName {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.MediaDetails {
    font-size: 12px;
    color: var(--DarkGrayColor);
}

.MediaActions {
    position: absolute;
    top: 8px;
    right: 8px;
    display: none;
    gap: 4px;
}

.MediaActionButton {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

.MediaActionDownload {
    background: rgba(23, 162, 184, 0.9);
    color: white;
}

.MediaActionDelete {
    background: rgba(220, 53, 69, 0.9);
    color: white;
}

.StorageProgress {
    width: 100%;
    height: 12px;
    background: #e9ecef;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 20px;
}

.StorageProgressBar {
    height: 100%;
    background: linear-gradient(90deg, var(--PrimaryBGColor), var(--DarkBGColor));
    background: linear-gradient(90deg, var(--PrimaryBGColor), #627619);

    transition: width 0.3s ease;
}

.StorageStats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin: 20px 0;
}

.StorageStat {
    text-align: center;
    padding: 20px;
    border-radius: 12px;
    background: #f8f9fa;
}

.StorageStatIcon {
    font-size: 48px;
    margin-bottom: 12px;
}

.StorageStatValue {
    font-size: 24px;
    font-weight: 700;
    color: #2c3e50;
    margin-bottom: 8px;
}

.StorageStatLabel {
    color: var(--DarkGrayColor);
    font-size: 14px;
}

.ViewToggle {
    display: flex;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.ViewButton {
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.2);
    color: white;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ViewButton.active {
    background: rgba(255, 255, 255, 0.4);
}

.ViewButton:hover {
    background: rgba(255, 255, 255, 0.3);
}

.SettingsForm {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.SettingsGroup {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.SettingsLabel {
    font-weight: 600;
    color: #2c3e50;
    font-size: 14px;
}

.SettingsInput {
    padding: 12px 16px;
    border: 2px solid #e1e8ed;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.SettingsInput:focus {
    outline: none;
    border-color: var(--PrimaryBGColor);
    background: white;
    box-shadow: 0 0 0 3px var(--PrimaryBGColorOpac20);
}

.SettingsCheckbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
    color: #2c3e50;
    padding: 8px 0;
}

.SettingsCheckboxInput {
    width: 18px;
    height: 18px;
    accent-color: var(--PrimaryBGColor);
    cursor: pointer;
}

.HiddenInput {
    display: none;
}

@media (max-width: 768px) {
    .PageContainer {
        padding: 0 10px;
    }

    .HeaderControls {
        flex-wrap: wrap;
        gap: 8px;
    }

    .SearchInput,
    .FilterSelect {
        max-width: 100%;
    }

    .TemplateGrid {
        grid-template-columns: 1fr;
    }

    .MediaGrid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .BulkActions {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .DataTable {
        font-size: 14px;
    }

    .DataTable th,
    .DataTable td {
        padding: 8px;
    }
}



/* Admin */

.EvaluationContainer {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

.EvaluationMainCard {
    background: white;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    transition: all 0.3s ease;
}

.EvaluationMainCard:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.EvaluationHeader {
    padding: 1.5rem;
    background: #efefef;
    color: black;
    align-items: center;
}

.EvaluationHeader h3 {
    font-size: 1.5rem;
    font-weight: 600;
}

.EvaluationBody {
    padding: 2rem;
}

.EvaluationBadge {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.EvaluationBadgeInfo {
    background: var(--Info);
    color: white;
}

.EvaluationBadgeWarning {
    background: orange;
    color: #333;
}

.EvaluationBadgeSuccess {
    background: var(--Success);
    color: white;
}

.EvaluationBadgeDanger {
    background: var(--Danger);
    color: white;
}

.EvaluationGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.EvaluationCard {
    background: #efefef;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    border-left: 4px solid orange;
    padding: 1.5rem;
    position: relative;
    transition: all 0.3s ease;
    overflow: hidden;
}



.EvaluationCard:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
}

.TeacherInfo {
    position: relative;
    z-index: 2;
}

.TeacherName {
    font-size: 1.25rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.5rem;
}

.EvaluationMeta {
    font-size: 0.9rem;
    color: var(--TextMuted);
    margin-bottom: 1rem;
}

.EvaluationStats {
    gap: 1rem;
    margin: 1rem 0;
}

/* .StatItem {
            text-align: center;
        } */

.StatValue {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--PrimaryBGColor);
}

.StatLabel {
    font-size: 13px;
    color: var(--TextPrimary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.StatusBadge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 15px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 3;
}

.StatusOverdue {
    background: orange;
    color: white;
}

.StatusDueSoon {
    background: var(--Warning);
    color: #333;
}

.StatusCompleted {
    background: var(--Success);
    color: white;
}

.EvaluationBtn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.EvaluationBtnOutline {
    background: transparent;
    border: 2px solid var(--PrimaryBGColor);
    color: var(--PrimaryBGColor);
}

.EvaluationBtnOutline:hover {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
}

.EvaluationModal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    animation: fadeIn 0.3s ease;
}

.EvaluationModal.Show {
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.EvaluationModalContent {
    background: white;
    border-radius: 16px;
    max-width: 600px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.EvaluationModalHeader {
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--PrimaryBGColor) 0%, var(--DarkBGColor) 100%);
    color: var(--PrimaryTextColor);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.EvaluationModalTitle {
    font-size: 1.25rem;
    font-weight: 600;
}

.EvaluationModalClose {
    background: none;
    border: none;
    color: var(--PrimaryTextColor);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 4px;
    transition: background 0.2s ease;
}

.EvaluationModalClose:hover {
    background: rgba(255, 255, 255, 0.1);
}

.EvaluationModalBody {
    padding: 2rem;
}

.EvaluationModalFooter {
    padding: 1.5rem;
    background: var(--LightBG);
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
}

.TeacherEvaluationProfile {
    text-align: center;
    margin-bottom: 2rem;
    padding: 1.5rem;
    background: var(--LightBG);
    border-radius: 12px;
}

.TeacherEvaluationAvatar {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, var(--SecondaryBGColor) 0%, var(--SecondaryBGColorHover) 100%);
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--SecondaryTextColor);
    font-size: 2rem;
    font-weight: bold;
}

.TeacherEvaluationDetails {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-top: 1rem;
    text-align: left;
    font-size: 0.9rem;
}

.EvaluationFormGroup {
    margin-bottom: 1.5rem;
}

.EvaluationFormLabel {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

.EvaluationFormControl {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--BorderColor);
    border-radius: 8px;
    font-size: 0.9rem;
    transition: border-color 0.3s ease;
}

.EvaluationFormControl:focus {
    outline: none;
    border-color: var(--PrimaryBGColor);
    box-shadow: 0 0 0 3px var(--PrimaryBGColorOpac20);
}

.EvaluationRatingInput {
    display: flex;
    gap: 0.5rem;
    margin: 0.5rem 0;
}

.EvaluationRatingBtn {
    width: 40px;
    height: 40px;
    border: 2px solid var(--BorderColor);
    background: white;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 600;
}

.EvaluationRatingBtn:hover {
    border-color: var(--PrimaryBGColor);
    background: var(--PrimaryBGColorOpac10);
}

.EvaluationRatingBtn.Active {
    background: var(--PrimaryBGColor);
    border-color: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
}

.LoadingSpinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid var(--BorderColor);
    border-radius: 50%;
    border-top-color: var(--PrimaryBGColor);
    animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}


/* Card Styles */
.PageTemplatesCard,
.AdminSectionCard {
    background: white;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.AdminCardHeader {
    padding: 24px;
    border-bottom: 1px solid #f3f4f6;
    /* Using a more specific color from your theme */
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.AdminCardTitle {
    font-size: 20px;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
}

.AdminCardBody {
    padding: 24px;
}

/* Button Styles */
.AdminButtonOutline {
    padding: 8px 16px;
    border: 2px solid var(--PrimaryBGColor);
    border-radius: 8px;
    background: transparent;
    color: var(--PrimaryBGColor);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.AdminButtonOutline:hover {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
    transform: translateY(-1px);
}

.AdminButtonSmall {
    padding: 6px 12px;
    font-size: 12px;
}

/* Badge Styles */
.AdminStatusBadge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.AdminBadgeSuccess {
    background: rgba(40, 167, 69, 0.15);
    color: var(--SuccessColor);
}

/* Activities Section */
.ActivitiesTimeline {
    max-height: 400px;
    overflow-y: auto;
    padding-right: 8px;
}

.ActivitiesTimeline::-webkit-scrollbar {
    width: 6px;
}

.ActivitiesTimeline::-webkit-scrollbar-track {
    background: var(--LightGray);
    border-radius: 3px;
}

.ActivitiesTimeline::-webkit-scrollbar-thumb {
    background: #6b7280;
    /* Using a more specific color from your theme */
    border-radius: 3px;
}

.ActivityItem {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--LightGray);
    transition: all 0.3s ease;
}

.ActivityItem:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}


.ActivityIcon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

/* .ActivityItem:hover .ActivityIcon {
            transform: scale(1.1);
        } */

.IconSuccess {
    background: rgba(40, 167, 69, 0.15);
}

.IconWarning {
    background: rgba(255, 193, 7, 0.15);
}

.IconPrimary {
    background: rgba(134, 166, 20, 0.15);
}

.ActivityContent {
    flex: 1;
}

.ActivityTitle {
    font-weight: 600;
    font-size: 16px;
    color: #1f2937;
    margin-bottom: 4px;
}

.ActivityDescription {
    color: #6b7280;
    /* Using a more specific color from your theme */
    font-size: 14px;
    margin-bottom: 6px;
    line-height: 1.4;
}

.ActivityTime {
    color: var(--DarkGray);
    font-size: 12px;
    font-style: italic;
}

/* System Health Section */
.SystemHealthMetrics {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.SystemMetricItem {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.SystemMetricHeader {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.SystemMetricLabel {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
}

.SystemMetricValue {
    font-weight: 700;
    font-size: 14px;
    color: #1f2937;
}

.SystemProgressBar {
    width: 100%;
    height: 10px;
    background: var(--LightGray);
    border-radius: 5px;
    overflow: hidden;
    position: relative;
}

.SystemProgressFill {
    height: 100%;
    border-radius: 5px;
    transition: width 0.8s ease-in-out;
    position: relative;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3));
}

.SystemProgressFill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4));
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% {
        transform: translateX(-20px);
    }

    100% {
        transform: translateX(20px);
    }
}

.SystemProgressSuccess {
    background: var(--SuccessColor);
}

.SystemProgressPrimary {
    background: var(--PrimaryBGColor);
}

.SystemProgressWarning {
    background: var(--WarningColor);
}

.SystemProgressDanger {
    background: var(--DangerColor);
}

.SystemActionsList {
    display: flex;
    gap: 8px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.SystemActionBtn {
    padding: 8px 16px;
    border: 2px solid var(--PrimaryBGColor);
    border-radius: 8px;
    background: transparent;
    color: var(--PrimaryBGColor);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}

.SystemActionBtn:hover {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(134, 166, 20, 0.3);
}

/* Responsive Design */
@media (max-width: 768px) {
    .AdminDashboardContainer {
        grid-template-columns: 1fr;
        padding: 16px;
        gap: 20px;
    }

    .AdminCardHeader {
        padding: 20px;
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .AdminCardBody {
        padding: 20px;
    }

    .ActivityItem {
        gap: 12px;
    }

    .ActivityIcon {
        width: 36px;
        height: 36px;
    }

    .SystemActionsList {
        flex-direction: column;
    }

    .SystemActionBtn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .ActivityItem {
        flex-direction: column;
        text-align: center;
    }

    .ActivityIcon {
        align-self: center;
    }

    .SystemMetricHeader {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

.TeacherOverview {
    display: flex;
    padding: 20px 20px 0;
}

@media (max-width: 768px) {
    .TeacherOverview {
        display: flex;
    }
}

@media (max-width: 480px) {
    .TeacherOverview {
        display: grid;
        grid-template-columns: 1fr;
    }
}

.RecentActivity {
    height: fit-content;
}



#MyEarningsChart{
    width:100%;
    min-height: 400px;
    max-height: 600px;
}
.ChartButtonGroup {
    display: flex;
    background: white;
    border: 2px solid var(--PrimaryBGColor);
    border-radius: 25px;
    overflow: hidden;
    width: fit-content;
}

.ChartSwitchButton {
    background: transparent;
    border: none;
    border-right: 2px solid var(--PrimaryBGColor);
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--PrimaryBGColor);
    cursor: pointer;
    transition: all 0.3s ease;
    min-width: 100px;
}

.ChartSwitchButton:last-child {
    border-right: none;
}

.ChartSwitchButton:hover {
    background: rgba(134, 166, 20, 0.1);
}

.ChartSwitchButton.ActiveChart {
    background: var(--PrimaryBGColor);
    color: var(--PrimaryTextColor);
}


.RevenueUser {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 20px;
    width: 100%;

}


.HalfRow {
    display: grid;
    grid-template-columns: 1fr 1f;
}



/* Student */


.ScheduleCard {
    background: white;
    border-radius: 16px;
    padding: 30px;
    margin-bottom: 30px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.CardTitleSection {
    text-align: center;
    margin-bottom: 30px;
    position: relative;
}

.CardTitleSection::before,
.CardTitleSection::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 100px;
    height: 2px;
    background: linear-gradient(to right, transparent, #d1d5db);
}

.CardTitleSection::before {
    right: 0;
    background: linear-gradient(to left, transparent, #d1d5db);
}

.CardTitleSection::after {
    left: 0;
}

.CardMainTitle {
    font-size: 28px;
    font-weight: 700;
    color: #374151;
    display: inline-block;
    padding: 0 20px;
    background: white;
    position: relative;
}

.SessionItem {
    background-color: white;
    padding: 20px;
    margin: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    -moz-border-radius: 15px;
    -khtml-border-radius: 15px;
    -webkit-border-radius: 15px;
    -o-border-radius: 15px;
    -ms-border-radius: 15px;
    border-radius: 15px;
}
.SessionItem.Outline{
    border:2px solid var(--PrimaryBGColorOpac20);
}

.SessionLeft {
    display: flex;
    align-items: center;
    gap: 16px;
}

.TeacherAvatar {
    width: 50px;
    height: 50px;
    background: #f4f4f4;
    border-radius: 50%;
    flex-shrink: 0;
    object-fit: cover;
    -o-object-fit: cover;
    -moz-object-fit:cover;
}

.SessionInfo {
    display: flex;
    flex-direction: row;
    gap: 25px;
    text-align: start;
}

.TeacherName {
    font-size: 16px;
    line-height: 16px;
    font-weight: 600;
    color: #1f2937;
}

.TeacherRole {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
}

.SessionDetails {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    color: #6b7280;
    font-size: 13px;
    gap: 15px;

    
}

.SessionDetails .SVGOrigIcon{
    stroke: var(--PrimaryBGColor) !important;
}

.SessionTime,.SessionDate {
    display: flex;
    align-items: center;
    gap: 4px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}


/* Sessions Status Card */
.StatusHeader {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}



.StatusItem {
    border: 2px solid var(--PrimaryBGColor);
    border-radius: 16px;
    padding: 20px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.StatusButtons {
    display: flex;
    gap: 10px;
    align-items: center;
}

.StatusButton {
    padding: 12px 20px;
    border: 2px solid;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}


/* Responsive */
@media (max-width: 768px) {

    .SessionItem,
    .StatusItem {
        flex-direction: column;
        align-items: flex-start;
    }


    .SessionItem{
        padding: 15px;
        margin: 10px 0;
        -moz-border-radius: 20px;
        -khtml-border-radius: 20px;
        -webkit-border-radius: 20px;
        -o-border-radius: 20px;
        -ms-border-radius: 20px;
        border-radius: 20px;
    }

    .SessionLeft {
        width: 100%;
    }

    .CancelButton,
    .StatusButtons {
        width: 100%;
        justify-content: center;
    }

    .StatusButtons {
        flex-wrap: wrap;
    }

    .CardTitleSection::before,
    .CardTitleSection::after {
        width: 50px;
    }
}


























































































































/* Footer */
footer {
    background-color: #304D55;
    color: white;
    padding: 60px 0 0;
    position: relative;
    overflow: hidden;
}




.footer-content {
    display: grid;
    grid-template-columns: 2fr 2fr /*1fr 1fr*/;
    gap: 60px;
    margin-bottom: 60px;
    position: relative;
}

.footer-section {
    position: relative;
}

.SocialContainer {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.SocialBtn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all 0.3s ease;
    background-color: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.07);
}

.SocialBtn:hover {
    transform: translateY(-3px);
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.SocialBtn svg {
    width: 18px;
    height: 18px;
    fill: #E8F1F2;
    transition: fill 0.3s ease;
}

.SocialBtn:hover svg {
    fill: #ffffff;
}

/* Individual hover colors */
.SocialBtn.facebook:hover {
    background-color: #1877F2;
    border-color: #1877F2;
}

.SocialBtn.twitter:hover {
    background-color: #1DA1F2;
    border-color: #1DA1F2;
}

.SocialBtn.instagram:hover {
    background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
    border-color: #DD2A7B;
}

.SocialBtn.linkedin:hover {
    background-color: #0A66C2;
    border-color: #0A66C2;
}

.SocialBtn.youtube:hover {
    background-color: #FF0000;
    border-color: #FF0000;
}

.SocialBtn.tiktok:hover {
    background-color: #000000;
    border-color: #000000;
}

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

    .footer-section {
        display: flex;
        align-items: flex-start;
        flex-direction: column;
    }
}

.footer-section h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 25px;
    color: var(--PrimaryBGColor);
    position: relative;
    padding-bottom: 10px;
}



.footer-section p,
.footer-section div {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.8;
}

.footer-section ul {
    list-style: none;
    padding: 0;
}

.footer-section ul li {
    margin-bottom: 12px;
}

.footer-section ul li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
    padding-left: 10px;
}
html[dir="rtl"] .footer-section ul li a {
    padding-left: unset;
    padding-right: 10px;
}


.footer-section ul li a:hover {
    color: white;
    transform: translateX(5px);
}

html[dir="rtl"] .footer-section ul li a:hover {
    transform: translateX(-5px);
}

.footer-section ul li a:hover::before {
    color: white;
}

.social-icons {
    display: flex;
    gap: 20px;
    margin-top: 25px;
}

.social-icon {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: white;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 1.2rem;
}

.social-icon:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px) scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Newsletter section in footer */
.newsletter-section {
    background: rgba(255, 255, 255, 0.1);
    display: none;
    padding: 25px;
    border-radius: 15px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.newsletter-section h4 {
    color: white;
    margin-bottom: 15px;
    font-size: 1.1rem;
}

.newsletter-form {
    display: flex;
    gap: 10px;
    margin-top: 15px;
}

.newsletter-form input {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
}

.newsletter-form button {
    padding: 12px 20px;
    background: white;
    color: #e75c00;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.newsletter-form button:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
}

.footer-bottom {
    text-align: center;
    padding: 40px 0;
    background: rgba(0, 0, 0, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.8);
    margin-top: 40px;
    position: relative;
}


.footer-links {
    display: flex;
    gap: 30px;
    align-items: center;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: white;
}

/* Responsive Footer */
@media (max-width: 768px) {
    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: start;
    }

    .footer-section ul li a {
        padding-left: 0;
    }

    .footer-section ul li a::before {
        display: none;
    }

    .footer-bottom-content {
        flex-direction: column;
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }

    .newsletter-form {
        flex-direction: column;
    }
}



























































@-webkit-keyframes alarmed-pulse {
  0%   { opacity: 0.5; }
  100% { opacity: 1;   }
}
@-moz-keyframes alarmed-pulse {
  0%   { opacity: 0.5; }
  100% { opacity: 1;   }
}
@-o-keyframes alarmed-pulse {
  0%   { opacity: 0.5; }
  100% { opacity: 1;   }
}
/* Standard keyframes */
@keyframes alarmed-pulse {
  0%   { opacity: 0.5; }
  100% { opacity: 1;   }
}

/* The Alarmed class */
.Alarmed {
    display: inline-block;
    opacity: 1; /* final default */
    -webkit-animation: alarmed-pulse 0.8s ease-in-out infinite alternate;
    -moz-animation:    alarmed-pulse 0.8s ease-in-out infinite alternate;
    -o-animation:      alarmed-pulse 0.8s ease-in-out infinite alternate;
    animation:         alarmed-pulse 0.8s ease-in-out infinite alternate;

    /* Performance hint */
    will-change: opacity;
}

.Alarmed:hover{
    -webkit-animation:unset;
    -moz-animation:unset;
    -o-animation: unset;
    animation: unset;
}






























.FlexHeader.MainFiltersCont{
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 30px;
}
.FiltersCont{
  display:flex;
  gap:10px;
  align-items: flex-end;
  /*width: 100%;*/
  max-width: 100%;
  flex-grow: 1;
  flex-shrink: 0;
}
.FiltersCont .InputGroup{
  width:100%;
  max-width: 164px;
  margin: 0 !important;
  flex-shrink: 0;
}
/*.FiltersCont .InputGroup .DropdownButton{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}*/
.FilterBtnsCont{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-shrink: 0;
}
html[dir="rtl"] .FilterBtnsCont{
  margin-left: unset;
  margin-right: auto;
}
.FilterAction{
  height: 44px;
  padding: 0 20px;
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap:5px;
  margin: 0 !important;
  font-weight: 500;
  border: 2px solid transparent;
}
.FilterAction.ClearBtn{
  /*background-color: #f3f3f3;
  border-color: #eeeeee;*/
  color: #333;
  text-decoration: none;
}
/*.FilterAction.ClearBtn:hover{
  background-color: #eeeeee;
  border-color: #eeeeee;
}*/
.FilterAction svg{
  stroke: white;
  width: 22px;
  height: 22px;
}
.FilterAction.ClearBtn svg{
  stroke: #333;
}

@media screen and (max-width: 600px) {
  .FiltersCont{
    flex-wrap: wrap;
  }
}












.OpacCursor{
    pointer-events: none;
}

.PopupCont.P0{
    padding: 0;
}
.PopupCont .PopupTitle{
    font-size: 25px;
    line-height: 25px;
    text-align: center;
    font-weight: 700;
    color: white;
    margin-bottom: 10px;
}
#ResponseModal .PopupCont .PopupTitle,#PaymentResponseModal .PopupCont .PopupTitle,.AuthPopup .PopupCont .PopupTitle{
    color: black;
}


.InputGroup > label:first-child:not(.CustomRadio):not(.RoundedCheckbox).ModalInputTitle, .InputGroup > legend:first-child:not(.CustomRadio):not(.RoundedCheckbox).ModalInputTitle{
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    margin-bottom: 5px;
    color: #384548;
    text-align: center;
    gap: 4px;
}






.RatingStarsFeedback {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: 2px;
}
.RatingStarsFeedback input {
    display: none;
}
.RatingStarsFeedback label .StarIcon{
    fill: #e5e7eb !important;
    cursor: pointer;
    transition: fill 0.2s;
    width: 42px;
    height: 42px;
    margin: 3px 0 0;
}
.RatingStarsFeedback label:hover .StarIcon,
.RatingStarsFeedback label:hover ~ label .StarIcon,
.RatingStarsFeedback input:checked ~ label .StarIcon{
    fill: var(--PrimaryBGColor) !important;
}
.RatingStarsFeedback label:hover .StarIcon:hover,
.RatingStarsFeedback label:hover ~ label .StarIcon:hover,
.RatingStarsFeedback input:checked ~ label .StarIcon:hover{
    transform: scale(1.05);
}


















.AvailabilitySwiper{
    max-height:900px;
    overflow-y:auto;
    padding:0 0px 14px !important;
}

.AvailabilitySwiper .SwiperPagination{
    margin-top: 5px;
}



.AvailabilityDay{
    min-width: 100px;
    max-height:60vh;
    max-height:calc(90vh - 260px);
    overflow:auto;
    padding:0 6px 3px;
}
.AvailabilityDay .DayHeader{
    position:sticky;
    top:0;
    z-index:10;
    padding: 4px 8px;
    font-size: 16px;
}

.SessionAvailabilitySlot{
    display: block;
    border-color: #efefef;
    background-color: #efefef;
    color: white;
    color: #242424;
    border-radius: 8px;
    padding: 0;
    line-height: 20px;
    margin-top: 6px;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #495057;
    transition: all 0.3s ease;
    cursor: pointer;
}





/* hide checkbox */
.SessionAvailabilitySlot input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

/* checked state: green background */
.SessionAvailabilitySlot input[type="checkbox"]:checked + span {
    background-color: var(--PrimaryBGColor);
    color: #fff;
    border-color: var(--PrimaryBGColor);
}

/* hover effect */
.SessionAvailabilitySlot:hover span {
    background-color: #e6ffe6;
    background-color: #e7f4b8;
    border-color: var(--PrimaryBGColor);
}

/* inner span for visual styling */
.SessionAvailabilitySlot span {
    display: block;
    padding: 6px 5px;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: all 0.25s ease;
}














.CloseButton {
    position: absolute;
    top: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 24px;
    font-weight: 300;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.CloseButton:hover {
    background: rgba(255, 255, 255, 0.3);
}
.CloseButton .SVGOrigIcon{
    stroke:white;
    width: 20px;
    height: 20px;
    stroke-width: 2.5;
}



.ModalHeader{
    background: linear-gradient(135deg, var(--PrimaryBGColor), var(--DarkBGColor));
    color: white;
    padding: 10px 20px;
    text-align: center;
    position: relative;
    min-height: 54px;

    display: flex;
    justify-content: space-between;
}
.ModalHeader h2{
    color:white !important;
    font-weight: 700;
    font-size: 18px;
    line-height: 18px;
}
.ModalHeader .CloseButton{
    position: relative;
    top:0;
    left:0;
    right:unset;
}




























:root {
  --scroll-track: linear-gradient(180deg, #f0f0f0, #dcdcdc);
  --scroll-thumb: linear-gradient(180deg, #b3b3b3, #8a8a8a);
  --scroll-thumb-hover: linear-gradient(180deg, #9a9a9a, #707070);
  --scroll-thumb-active: linear-gradient(180deg, #808080, #5e5e5e);
  --scroll-radius: 12px;
  --scroll-width: 10px;
}

.AvailabilityDay {
  overflow: auto;
  scrollbar-gutter: stable both-edges;
  -webkit-overflow-scrolling: touch;
  outline: none;
  max-height: 400px;
  padding-right: 6px;
  scrollbar-width: thin;
  scrollbar-color: #8a8a8a #dcdcdc;
}

.AvailabilityDay:focus {
  box-shadow: 0 0 0 3px rgba(128, 128, 128, 0.14);
  border-radius: 6px;
}

.AvailabilityDay::-webkit-scrollbar {
  width: var(--scroll-width);
  height: var(--scroll-width);
}

.AvailabilityDay::-webkit-scrollbar-track {
  background: var(--scroll-track);
  border-radius: var(--scroll-radius);
  margin: 6px;
}

.AvailabilityDay::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: var(--scroll-radius);
  border: 2px solid transparent;
  background-clip: content-box;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}

.AvailabilityDay::-webkit-scrollbar-thumb:hover {
  background: var(--scroll-thumb-hover);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.16);
}

.AvailabilityDay::-webkit-scrollbar-thumb:active {
  background: var(--scroll-thumb-active);
}

.AvailabilityDay::-webkit-scrollbar-corner {
  background: transparent;
}























.DraggableTable td.P0 {
    padding: 0;
}
.DraggableTable td.P0 a {
    padding: 12px 16px;
    display: block;
    width: 100%;
    height: 100%;
}



















.MobileNCC{
    display: flex;
    gap: 10px;
}
.MobileNCC .InputGroup .DropdownWrapper{
    width: 150px;
}


.MobileNCC .InputGroup .DropdownWrapper .HasValue{
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    text-align: start;
}

.MobileNCC .InputGroup:first-child{
    width: auto;
    white-space: nowrap;
}
.MobileNCC .InputGroup .DropdownMenuItem{
    white-space: wrap;
}
.MobileNCC .InputGroup+.InputGroup{
    margin-top: 0;
    width: 100%;
}








.NoHeight{
    min-height:unset;
}










.SurahDetails{
    width:100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.SurahDetails.NewlyAdded{
   padding:10px;
   padding-top:30px;
   background-color:#f8f8f8;
   position:relative;
   -moz-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}
.DeleteSurah{
    width: 40px;
    height: 40px;
    padding: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    position:absolute;
    top:10px;right:10px;
}
html[dir="rtl"] .DeleteSurah{
    right:unset;
    left:10px;
}

.DeleteSurah svg{
    stroke:#949494 !important;
    stroke-width: 3px;
    width: 18px;
    height: 18px;
}

.DeleteSurah:hover svg{
    stroke:#5e5e5e !important;
}
















.PopupCont  .ModalHeading{
    height: fit-content;
    padding: 30px 0;
}




.MissingLink { color: red; font-weight: 500;font-size:14px; }



















.CountdownTimer{
    background: #00000040;
    padding: 7px;
    border-radius: 10px;
    text-align: center;
    border: 2px solid #0000001a;
    margin-top: 5px;
}