.settings-tabs{
    display: flex;
    justify-content:space-between;
    gap: 10px;
    margin: 0 0 20px 0;
    width: 150px;


}
/* settings card */
.settings-card{
    background-color: #ffffff;
    border-radius: 8px;
    padding: 20px;
   display: flex;
    flex-direction: column;
    flex: 1;
    height: 450px;
    flex: 1;
}
/* settings card picture  */
.settings-card img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    margin: 0 ;
    padding: 0%;
}
/* .settings-card div{
    display: flex;
    flex-direction: column;
    align-items: center;
   
} */
.profile-details{
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
}
.profile-details label, h3{
    margin: 0;
    padding: 0;
}
/* for the input fieldsa */
.settings-card input{
 outline: none;
 border: none;
 background-color:#F4F4F4;
 height: 35px;
border-radius: 4px;
padding: 5px;
display: flex;
flex: 1;
}
.settings-card label{
    font-size: 12px;
    color: #898989;
    font-weight: 400;
    margin: 0;
    padding: 0;
    padding-left: 5px;
}
.settings-profile-row{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    margin-right: 0.1%;
    flex:1;
}
.settings-profile-row div{
    display: flex;
    justify-content: space-between;
   flex: 1;
    padding: 0%;
   
}
.profile-details button{
    background-color:#FFFCF4;
    color:#E36A17 ;
    border-radius: 14px;
    border: 1px solid #FF9F5D4D;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    font-size: 11px;
    padding: 4px 9px;
}
.profile-details{
    display: flex;
    align-items: center;
    justify-content: center;
}
.settings-profile-name{
    display: flex;
    justify-content: space-evenly;
    margin: 0%;
    padding: 0%;
    flex: 1;
}
.settings-profile-name div{
  display: flex;
  flex: 1;
}
.active-tab{
    width: 100px;
    height: 30px;
    background-color:#ffffff;
    align-items: center;
    justify-content: center;
    display: flex;
    border-radius: 4px;
    font-size: 12px;
    color: #898989;
}

.active-tab.active{
    background-color:#2869D4;
    color: #ffffff;
}
.privacy-button{
    height: 35px;
    background-color: #EBF3FF;
    width: 240px;
    border-radius: 4px;
    color: #2869D4;
    font-size: 12px;
    
    


}
.privacy-button:hover{
    background-color: #2869D4;
    color: #ffffff;
}
.privacy-buttons-wrapper{
    display: flex;
    width: 500px;
    justify-content: space-between;
    padding-top:10px;
    padding-bottom:10px;
    padding-left: 7px;
    padding-right: 4px;
   

}
.privacy-settings-card{
    background-color: #ffffff;
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 450px;;
}
.settings-privacy-row{
    display: flex;
    flex-direction: column;
    margin-top: 10px;
    max-width: 500px;
    flex: 1;
}
.settings-privacy-row img{
    width: 20px;
    height: 20px;
}
.settings-privacy-row input{
   outline: none;
    border: none;
    background-color:transparent;
    border-radius: 4px;
    
    display: flex;
    flex: 1;
}

.settings-privacy-row label{
    font-size: 12px;
    color: #898989;
    font-weight: 400;
    margin: 0;
    padding: 0;
    padding-left: 5px;
}
.settings-privacy-row div{

    display: flex;
    background-color: #F4F4F4;
    border-radius: 4px;
    padding: 5px;
    height: 40px;
    flex: 1;
}
.settings-password-checker-wrapper{
display: flex;
flex-direction: row;
width: 500px;
justify-content: space-evenly;
padding-top: 5px;
flex: 1;
 
padding-left: 7px;
padding-right:4px ;
}

.settings-password-checker{
    display: flex;
    background-color: #F4F4F4;
    border-radius: 8px;
    width: 10px;
    height: 10px;
    flex: 1;
   
}
.settings-privacy-authenticator{
    border: 1px solid #ECECEC;
    width: 500px;
    height: 80px;
    border-radius: 8px;
    font-size: 12px;
    text-align: left;
    display: flex;
    padding: 5px 15px;
   
    flex-direction: column;
    

}
.settings-privacy-header h3{
    color: #0F0F0F;
    font-weight: 600;

}
.settings-privacy-header P{
    color: #898989;
    font-weight: 400;
    font-size: 11px;
}
.settings-privacy-authenticator h3{
    color: #0F0F0F;
    font-weight: 600;
    font-size: 15px;
    padding-top: 4px;
    padding-bottom: 8px;
    padding-left: 5px;
   
}
.settings-privacy-authenticator p{
    color: #0F0F0F;
    font-weight: 500;
    font-size: 11px;
}
.privacy-authenticator-button{
    border: 1px solid #ECECEC;
    padding: 8px;
    border-radius: 6px;
    height: 30px;
    width: 100%;
    display: flex;
    font-size: 12px;
    font-weight: 500;
    align-items: center;
    
}
.settings-wrapper{
    display: flex;
    flex-direction: row;
   background-color: transparent;
    width: 500px;
}
.settings-wrapper div{
    width: 100%;
    height: 100%;
    background-color: transparent;
    
}
.settings-input-wrapper{
    background-color: #898989;
    height: 30px;
    width: 100%;
    display: flex;
    border-radius: 8px;
    flex: 1;

}
.settings-privacy-inner-div{
    display: flex;
    flex-direction: row;
    height: 100%;
    background-color: transparent;
    width: 500px;
    align-items: center;
}
.p-d{
    display: flex;
    flex-direction: row;
    height: 100%;
    background-color: transparent;
    width: 525px;
    align-items: center;
}
.settings-p{
    display: flex;
     flex-direction: row;
      height: 100%;
       background-color: 
       transparent; 
       
       width: 500px; 
       align-items: center;
    
}
@media(max-width:750px){
    *{
        font-size: 12px;
    }
    .settings-password-checker-wrapper{
        width:350px;
    }
    .settings-privacy-authenticator{
        width: 350px;
    }
    .privacy-buttons-wrapper{
        width: 350px;
    }
    .privacy-button{
        width: 220px;
    }
    .settings-privacy-row{
        
        max-width:350px;
        

    }
    .settings-privacy-inner-div{
        width: 350px;
    }
    .p-d{
        width:380px;
    }

    .settings-p{
        width: 355px;
    }
}
@media(max-width:550px){
    .settings-tabs{
        width:70px;
    }
    *{
        font-size: 11px;
    }
    .settings-password-checker-wrapper{
        width:240px;
    }
    .settings-privacy-authenticator{
        font-size: 12px;
        width: 240px;
    }
    .privacy-buttons-wrapper{
        width: 240px;
    }
    .privacy-button{
        width: 105px;
    }
    .settings-privacy-row{
        
        max-width:240px;
        

    }
    .p-d{
        width:270px;
    }
    .settings-p{
        width: 245px;
    }
   
    
.active-tab{
    width: 40px;
    font-size: 10px;
    height: 25px;
}
.settings-profile-name{
    flex-direction: column;
}
.settings-card img{
    width: 60px;
    height: 60px;
}
.settings-privacy-row label{
    font-size: 10px;
}
.settings-privacy-authenticator h3{
    font-size: 11px;
}
.settings-privacy-authenticator button{
    font-size: 9px;
}
.settings-privacy-authenticator{
    height: 70px;
}
}


@media(max-width:350px)
{
    
    .settings-password-checker-wrapper{
        width:17
        0px;
    }
    .settings-privacy-authenticator{
        font-size: 12px;
        width: 180px;
    }
    .privacy-buttons-wrapper{
        width: 170px;
    }
    .privacy-button{
        width: 75px;
    }
    .settings-privacy-row{
        
        max-width:150px;
        

    }
    .p-d{
        width:180px;
    }
    .settings-p{
        width: 155px;
    }
    .settings-privacy-authenticator h3{
        font-size: 11px;
    }
    .settings-privacy-authenticator button{
        font-size: 9px;
    }
}