.myAccount,
.changePassword,
.delete-account {
    top: 120px;
    position: absolute;
    inset-inline-start: 20%;
    width: 80%;
}
.myAccount .container,
.changePassword .container,
.delete-account .container{
     background-color: var(--colorBackgroundMyAccountSection);
     border-radius: 16px;
}
.myAccount h3,
.changePassword h3{
    font-weight: var(--fontWeight600);
}
.myAccount .formData{
    flex-wrap: wrap;
}
.myAccount input,
.myAccount select,
.changePassword input{
  padding: 16px 24px;
  background-color: var(--colorBackgroundInput);
  margin: 10px 0;
  border: none;
  border-radius: 500px;
}
.changePassword input{
    width: 40%;
}
.myAccount label{
    color: var(--colorlable);
}
.myAccount .changePass-btn{
    background-color: var( --colorBackgroundChangePass);
    color: var(--colorShowAllLink);
}
.myAccount .deleteAccount-btn{
    background-color: var(--colorBackgroundDeleteAccount);
    color: var(--colorDeleteAccount);
}
.myAccount .save-btn,
.changePassword .save-btn{
    background: var(--colorButtonSave);
    color: var(--whiteColor);
    width: 20%;
}
.myAccount .number{
    width: 150px;
}

.myAccount .changePass-btn,
.myAccount .deleteAccount-btn,
.myAccount .save-btn,
.changePassword .save-btn{
    border-radius: 100px;
}
.myAccount select {
    appearance: none; /* Hides the default arrow */
    background-image: url("/assets/images/icons/iconsheader/arrowListIcon.png");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 14px;
}

html[dir='rtl'] .myAccount input{
    text-align:right
}
/**********************************/
/*delete account*/

.delete-account .delete-confirm-modal .modal-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* push content to the right in RTL */
    padding-inline: 3rem;
}

.delete-account .delete-confirm-modal .modal-title {
    margin: 0;
    text-align: right;
    width: 100%;
}

.delete-account .delete-confirm-modal .btn-close {
    position: absolute;
    top: 50%;
    left: 1rem;
    right: auto;
    transform: translateY(-50%);
    margin: 0 !important;
}
.delete-account .paraghraph-one {
    font-weight: var(--fontWeight400) !important;
}

.delete-account .paraghraph-two{
  font-weight: var( --fontWeight700) !important;
}
.delete-account .delete-btn{
    background-color: var(--colorBackgroundDelete-btn);
    color: var(--colorBackgroundRowOdd);
    border-radius: 100px;
}
/*********************************/
@media screen and (max-width:990px){
    .myAccount,
    .changePassword,
    .delete-account {
        width: 100%;
        inset-inline-start: 0;
        top: 180px;
        height: 100%;
    }
    .delete-account .container{
        height: 100%;
    }
    

}
@media screen and (max-width:770px){
    .myAccount .save-btn,
    .changePassword .save-btn,
    .changePassword input{
        width: 100% !important;
    }
   
}

@media (min-width: 2560px){
    
}

.upload-img {
    text-decoration: underline;
    color: var(--colorShowAllLink);
}

.upload-img:hover {
    color: var(--colorHoverLinkShowAll);
}

.preview-img {
    display: inline-block;
    width: 80px;
    height: 80px;
    aspect-ratio: 4/3;
}

.preview-img .gallaryPreview {
    object-position: center;
    object-fit: cover;
    overflow: hidden;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}