/* Customize the position of Alertify notification */
.alertify-notifier {
    position: fixed;
    top: 20% !important;
    right: 10px !important;
    color: white !important;
}


.detailedFormSection{
margin: 6% 4%;
}


.formgrp{
    margin-top: 4%;
}

.Acontent, .serviceP, .clientReview, .memberInfo, .PlanInfo {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.BusinessSocialMedia{
    position: relative;
}

 

.palette button{
   outline: none;
   border: none;
   padding: 0.6em 1.8em;
   font-size: 1.1em;
   position: absolute;
   top: -1em;
   left: 50%;
   transform: translate(-50%);
   border-radius: 2em;
   background: #1f1f1f;
   color: #fff;
   font-weight: 500;
   letter-spacing: 2px;
   cursor: pointer;
   transition: 0.4s;
}

.palette button:hover{
    background: #fff;
    color: #1f1f1f;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2); 
}

.palette{
    position : relative;
    background: #fff;
    width: 45em;
    height: 20em;
    border-radius: 20px;
    box-shadow: 0px 5px 30px -12px rgba(0, 0, 0, 0.25);
    /*margin: 40px auto;*/
    text-align: #1f1f1f;
    padding-top: 4em;
    box-sizing: border-box ;
}
.colors{
    display: flex;
    justify-content: space-between;
    align-items: center;
    justify-content: center;
    overflow-y: hidden;
    height: 100%;
    border-radius: 20px;
}

.colors > div{
    width: 25%;
    text-align: center;

}

.color{
    background: #ccc;
    height: 14em;
    width: 100%;
}

.colors h4{
    font-size: 0.9em
}

.fadein{
    opacity: 0;
    animation: fadeInn 0.4s ease-in;
}

@media screen and (max-width: 450px){
    
    /* Customize the position of Alertify notification */
    .alertify-notifier {
        position: fixed;
        top: 15% !important;
        right: 0% !important;
        color: white !important;
    }


}

@media  (min-width:  451px)  and (max-width: 600px){
    
    /* Customize the position of Alertify notification */
    .alertify-notifier {
        position: fixed;
        top: 13% !important;
        right: 2% !important;
        color: white !important;
    }
}




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


    .detailedFormSection{
        margin: 8% 4%;
    }


    .palette button{
          font-size: 0.9em;
    }

    .palette{ 
        height: initial;
        width: 23em;
    }
    .colors{ flex-direction: row;}
    
    .colors div{ 
        width: 100%;    
        height: 7em;
    }
    
    .colors h4 {
        font-size: 1em;
    }
        
}

@media  (min-width:  501px)  {
    
    /* Customize the position of Alertify notification */
    .alertify-notifier {
        position: fixed;
        top: 13% !important;
        right: 2% !important;
        color: white !important;
    }
}


@keyframes fadeInn{
    to{
        opacity: 1;
    }
}


.form_outer{
    width: 100%;
    overflow-x: hidden;

}

.form_outer form{
    display: flex !important;
    width: 400%;
}

.form_outer form .page{
   width: 25%;
   transition: margin-left 0.3s ease-in-out ;
}

.form_outer form .page .Ptitle{
   font-size: 25px;
   text-align: left;
   font-weight: 500;
}

.form_outer form .page .field .next{
 float: right;

}

.form_outer form .page .field .prev{
 float: left;
}

  .startNowBtn1{
  padding: 8px 30px 8px 30px !important;
  }
  
  .progress_bar{
      display: flex;
      margin: 40px auto;
  }
  
 .progress_bar .step{
     position: relative;
   text-align: center;
   width: 100%;
}

 .progress_bar .step p {
   font-size: 18px;
   font-weight: 500;
   color: var(--indigo);
   transition: 0.2s;
}

 .progress_bar .step p.active {
 
   color: var(--tart) !important;
}


 .progress_bar .step:last-child .bullet:before, 
  .progress_bar .step:last-child .bullet:after {
     display: none;   
  }
  
.progress_bar .step  .bullet.active{
border-color: var(--tart);
background: var(--tart);

}


 .progress_bar .step .bullet:before, 
  .progress_bar .step .bullet:after {
   position: absolute;
   content: '';
   bottom: 11px;
   right: -51px;
   height: 3px;
   width: 44px;
   background: #262626;

}

  .progress_bar .step .bullet.active:after {
  background: var(--tart);
  transform-origin: left;
  transform: ScaleX(0);
  animation: Banimate 0.3s linear forwards;

}

@keyframes Banimate {
    100%{
  transform: ScaleX(1);
    }
}
 .progress_bar .step .bullet {
   position: relative;
   height: 25px;
   width: 25px;
   border: 2px solid #000;
   display: inline-block;
   border-radius: 50%;
   transition: 0.2s

}


 .progress_bar .step .bullet span {
   font-weight: 500px;
   font-size: 17px;
   line-height: 25px;
   position: absolute;
   left: 50%;
   bottom: -15%;
   transform: translateX(-50%);

}

 .progress_bar .step .bullet.active  span {
  display: none;
}

 .progress_bar .step .check {

 display: none;
 position: absolute;
 top: 70%;
 left: 50%;
 font-size: 15px;
 transform: translate(-50%, -50%);
}

 .progress_bar .step .check.active {
   display: block;
   color: #fff;
}

@media (min-width: 1174px)  {
     .progress_bar {
        width: 20vw;

    }
}




.bullet span{
    font-weight: 500;
    font-size: 17px;
    line-height: 23px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/*colors displayed*/
.color-slider-container {
  display: flex;
  align-items: center;
  width: 100%; /* Adjust width as desired */
  margin: 0 auto;
  justify-content: center
}

.arrow {
  cursor: pointer;
  padding: 10px;
  font-size: 20px;
}

.color-display {
  display: flex;
  overflow: hidden;
  /*width: calc(100% - 80px);  */
}

.color-item {
  width: 25px;
  height: 25px;
  margin: 5px;
  background-color: #ff0000; /* Default color */
  border: #ECF0F1 solid 1px;
}

.mt3{
    margin-top: 4rem;
}

.mt2{
        margin-top: 2rem;
}

.Ptitle{
    display: flex;
    justify-content: center;
    margin-bottom: 4rem ;
}

.addSdiv, .addAdiv{
    display: flex;
    justify-content: space-between;
}



.mb3{
    margin-bottom: 3rem;
}

#addplan{
    display: none;
}

.AddservBtn, .EditservBtn, .AddArtBtn, .EditArtBtn, .EditSMBtn, .AddSMBtn, .AddClientMBtn, .editClientMember, .EditClientMBtn , .EditPlanBtn, .AddPlanBtn{
    float: right;
}

  #editService, #editArticle, #editTMember, #editClientMember, #editPlanBtn{
    display: none;
}



.services, .articles, .members, .reviews, .plans{
 position: relative;    
}

.editService, .editArticle, .editMember, .editClient  {
 margin-right: 10px;

}
.editService, .editArticle, .editMember,   .editPlan{
    position: absolute;
    top: 0;
    right: 30px;
    color: var(--indigo);
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

  .editClient {
    position: absolute;
    top: 0;
    right: 30px;
    color: var(--indigo);
    cursor: pointer;
    width: 40px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.editService:hover, .editArticle:hover, .editMember:hover, .editClient:hover, .editPlan:hover{
    color : var(--tart);
}


/*#addArtParent{*/
/*    display: none;*/
/*}*/

.articlesPtag{
 color: #000;  
 font-size: 17px;
}

.articles, .services, .members, .reviews, .plans{
    border: 1px #dbd7d7 solid;
    border-radius: 5px;
    margin: 0 10px 10px 10px;
    padding: 10px;
}

.deleteService, .deleteArticle, .deleteMember, .deleteClient, .deletePlan {
    position: absolute;
    top: 0;
    right: 0px;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: red;
}

.deleteSMlinkk, .deleteMemberSMlinkk{
    position: absolute;
    top: -8px;
    right: 0px;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: red; 
}

.deleteService:hover, .deleteArticle:hover, .deleteMember:hover, .deleteClient:hover, .deletePlan:hover, .deleteSMlinkk:hover, .deleteMemberSMlinkk:hover{
    color : var(--tart);
}

.pageContent{
    min-height: 1000px !important;
}

.displayAData{
    max-height: 489px;
    overflow-y: scroll;
}

.displaySData{
    max-height: 185px;
    overflow-y: scroll;
}

.displayclientData{
    max-height: 272px;
    overflow-y: scroll;
}
.displaymemberData{
    max-height: 320px;
    overflow: auto;
}

.displayPlanData{
    max-height: 280px;
    overflow: auto;
}
@media (max-width: 991px)  {
     .marginGenColor {
       margin-top: 3rem;

    }
}

.displaySData, .displayAData, .displayclientData{
    overflow: auto;
    /*scrollbar-width: thin;  */


}
.SMDivs{
    display: flex;
    gap: 10px;
}

.SMDivs i, .SMDivs img{
    font-size: 30px !important;
    cursor: pointer;
}

.SMDivs .fa-times{
    color: #000 ;
}

.SMDivs .fa-facebook{
    color: #0866FF ;
     /*margin-left: 5px;*/

}

#busXIcon{
     width: 26.25px ;
     border-radius: 6px;
 
}

.SMDivs .fa-instagram{
    color: #F04443 ;
}

.SMDivs .fa-whatsapp-square{
    color: #48C255 ;
}

.SMDivs .fa-youtube-square{
    color: #F70F1B ;
}

.SMDivs .fa-linkedin{
    color: #006294 ;
}

.SMDivs .fa-pinterest-square{
    color: #B7081B;
}

 .SMDivs .fa-dribbble-square{
    color: #E04B85;
}

.SMDivs .fa-telegram{
    color: #25A1DE;
}

.linksUl{
    display: list-item;
     margin-left: 30px;
}

.linksUl li{
    list-style: disc !important;
}

.thirdpage h5{
    font-weight: 600;
}

.SMH5{
        margin-top: 12px;
}

#SMIInput{
    width: 90%;
}

#imgNote{
    display: none;
}

.saveFormData{
    float: right;
}