.accountSection{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    }
.accountWrapper{
        display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    }
.accountContainer{
    display: flex;
    margin-top: 10px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 90%;
    background-color: white;
    } 
.navigationBtnns{
        display: flex;
        flex-direction:row;
    }
.navigationBtnns .nButton{
        border: none;
        margin: 0;
        padding: 5px 20px;
        text-transform: capitalize;
       background-color: rgba(245, 245, 245, 0);
        font-size: 14px;
        color: rgb(0, 47, 78); 
    }
.navigationBtnns .nButton:hover{
        background-color: rgba(245, 245, 245, 0.699);
    }
.navigationBtnns .active-nButton{
        background-color: rgba(245, 245, 245, 0.699);
    }
.aTab{
    display: none;
    background-color: rgba(245, 245, 245, 0.699);
    width: 100%;
    padding: 40px 20px;
    }
.active-aTab{
        display: flex;
    }

/* orders css*/
    .order{
        flex-direction: row;
        align-items: flex-start;  /* Prevents items from affecting each other's height */

    }
    .orderItem{
           border: 1px solid rgba(128, 128, 128, 0.219);
           padding: 5px 20px;
           border-radius: 6px;
           flex: 1;
           margin: 0px 10px;
           box-shadow: 0px 2px 18px rgba(128, 128, 128, 0.247);
           height: auto; /* Ensure height is automatically adjusted to content */
           position: relative;
    }
    .orderItem:hover{
        border: 1px solid rgba(128, 128, 128, 0.603); 
    }
    .orderwrapper{
        display: flex;
        flex-direction: column;
    }
    .orderwrapper .orderDets{

    }
    .orderwrapper .orderDets p{
        margin: 0;
        text-transform: capitalize;
        font-size: 13px;
        
    }
    .orderwrapper .orderDets p#date{
        font-size: 11px;
        color: rgb(0, 58, 85);
    }
    #see{
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .voi{
     border: 1px solid grey;
     padding: 3px 15px;
     border-radius: 6px;
     background-color: rgba(3, 3, 3, 0.74);
     color: whitesmoke;
     box-shadow: 0px 2px 18px rgba(128, 128, 128, 0.247);
    }
    .voi:hover{
        box-shadow: 0px 2px 18px rgba(53, 53, 53, 0.678);
        cursor: pointer;
    }

    .orderProducts{
        padding-left: 20px;
        height: 0px;
        overflow: hidden;
    }
    .orderProducts a{
        text-decoration: none;
        display: flex;
        flex-direction: row;
        border: 1px solid rgba(128, 128, 128, 0.678);
        margin-top: 10px;
        border-radius: 6px;
        padding: 2px 10px;
    }
    .orderProducts a:hover{
        
    }
    .orderProducts a img{
        width: 40px;
        height: 40px;
        border-radius: 6px;
        padding: 4px;
        float: left;
        box-shadow: 0px 2px 8px rgba(128, 128, 128, 0.288);
    }
    .orderProducts a span{
        font-size: 11px;
        margin-left: 5px;
        font-weight: 300;
        text-transform: capitalize;
        color: rgb(0, 72, 121);
        overflow: hidden;
        

    }
    .changeStatus{
        position: absolute;
        right: 20px;
        text-transform: capitalize !important;
        background-color:rgb(255, 38, 0);
        font-size: 13px;
        font-weight: 300px;
        padding: 2px 15px;
        color: white;
        border-radius: 16px;
        box-shadow: 0px 2px 18px rgba(128, 128, 128, 0.288);
    }
    .changeStatus:hover{
        color: white;
        background-color:rgb(207, 31, 0);
      
    }
/* saved addresss */
    .adresses{
        flex-direction: row;
        flex-wrap: wrap;
        gap: 15px;
        justify-content: space-around;
        align-items: flex-start;
    }
    .addItem{
      padding: 5px 15px;
      width: 30%;
      border: 1px solid rgba(0, 0, 0, 0.397);
      box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.089);
      padding-bottom: 10px;
      
    }
    .addItem form{
        display: flex;
        flex-direction: column;
    }
    .addItem form h2{
        text-align: center;
        font-size: 13px;
        font-weight: 300;
        padding: 3px 0px;
        border-bottom: 1px solid rgba(0, 0, 0, 0.226);
    }
    .addItem form div{
 display: flex;
 flex-direction: column;
 margin-bottom: 5px;
    }
    .addItem form div label{
        font-size: 13px;
    }
    .addItem form div input{
        font-size: 14px;
        border-radius: 6px;
        padding: 2px 10px;
        outline: none;
        font-weight: 300;
        text-transform: capitalize;
        border: 1px solid black;
    }
    .addItem form div select{
        width: 100px;
    }
    .addItem form button{
        width: 100px;
        align-self: flex-end;
        margin-top: -30px;
        border: none;
        font-size: 14px;
        color: whitesmoke;
        background-color: black;
        box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.295);
    }


    .addItem p{
        margin:0;
        display: flex;
        flex-direction: row;
        text-transform: capitalize;
        font-size: 12px;
        align-items: center;
    }
    .addItem p .fa-map-marker{
        margin-right: 5px;
        color: rgb(0, 84, 139);
        margin-top: 3px;
        font-size: 17px;
        float: left;
    }
    input[type="checkbox"]{
     height: 18px;
     width: 18px;
     border-radius: 0px  !important;
     border: 2px solid black !important;
     margin-left: 5px;

    margin-bottom: -5px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    }

    input[type="checkbox"]:checked {
        border: none;
    background-color: rgb(0, 159, 165);
}


    .addItem p .aButton{
        border: 1px solid black;
        background-color: none;
        margin: 5px 10px;
        height: 25px;
        width: 25px;
        flex-direction: column;
        color: #000000c6;
        position: relative;
        justify-content: center;
        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.295);
    }
    .addItem p .aButton i{
        margin: auto !important;
        position: absolute;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
  
    }
    .addItem p .aButton:hover{
        color: white;
        background-color: black;

    }
    .addressTextUpdate{
        display: none;
        font-size: 13px;
        width: 100%;
        border: 1px solid black;
        border-radius: 0px;
        padding: 2px 8px;
        outline: none;
        margin-top: 20px;
    }
    .saveNewAddy{
        display: none;
        background-color: rgb(0, 80, 90) !important;
        color: white !important;
        border: 1px solid rgb(0, 80, 90) !important;
    }
    .saveNewAddy:hover{
        background-color: rgb(0, 146, 165) !important;
    }

/* profile overview**/
    .iProfile form{
        width: 90%;
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        margin: 0px auto;
        gap: 20px;
    }
    .iProfile form div{
        display: flex;
        width: 30.333%;
        flex-direction: column;
        justify-content: space-around;

    }
    .iProfile form div label{
    
    }
    .iProfile form div input{
      padding: 2px 10px;
      text-transform: capitalize;
      border: none;
      border-radius: 6px;
    }
    .iProfile form div select{
      padding: 2px 10px;
      text-transform: capitalize;
      border: none;
      border-radius: 6px;
    }
    .iProfile form button.submita{
    padding: 0px 20px;
    border: none;
       height: 28px;
       box-shadow: 0px 2px 18px rgba(0, 0, 0, 0.242);
       width: 150px;
       margin-bottom: -20px;
       border-radius: 6px;
       color: whitesmoke;
       background: rgba(0, 66, 104, 0.66);
    }
    .iProfile form button.submita:hover{
        background: rgba(0, 66, 104, 0.863);
    }
/* security css */
.changePass{
flex-direction: column;
}
.changePass h2{
    font-size: 13px;
    width: 90%;
    margin: 0px auto;
    padding-bottom: 4px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.267);
}
.changePass form div input{
    text-transform: none !important;
}
.changePass form div input::placeholder {
    font-size: 11px !important; /* Adjust size as needed */
}