.userPageWrapp  {
    border: 1px solid #D58A33;
}

.myOrders table  {text-align: center; width: 100%;}
.userPageWrapp caption  {text-align: left; margin-left: 20px}

.usersMenu   {
    text-align: right;
    border-bottom: 1px solid #D58A33;
    margin-bottom: 10px;
    background-color: #F4DC93;
}

.usersMenu span  {
    display: inline-block;
    padding: 2px 10px;
    text-align: center;
    margin: 5px;
}

span[data="smartMyOrders"]  {display: none;}

.usersMenu span img  {width: 50%; cursor: pointer; margin-top: 2px;}

.usersMenu span.active, .pageNum.active  {background-color: #FFFFFF; cursor: default;}

.closeUsersData  {
    display: none;
    float: right;
    padding: 2px 5px;
    margin-right: 20px;
    cursor: pointer;
}
.usersData  {min-width: 50%; margin: 0 auto; text-align: center;}

.usersData td  {
    padding: 5px;
}

.usersData td input  {
    border: 1px solid #D58A33;
    height: 25px;
    text-align: center;
}

.saveChanges {
    display: inline-block;
    border: 1px solid #D58A33;
    border-radius: 5px;
    padding: 5px 10px;
    margin: 10px;
    background-color: #F4DC93;
    color: #649FD6;
    cursor: pointer;
}

.sorting  {
    padding: 5px;
    box-shadow: 0 2px 5px;
    width: max-content;
    background-color: #f4dc93;
    cursor: pointer;
    margin: 5px auto;
}
.userPageWrapp .sort, .more, .userPageWrapp .popUpButton  {
    float: right;
    margin: 5px;
    padding: 5px;
    box-shadow: 0 2px 5px;
    width: max-content;
    background-color: #f4dc93;
    cursor: pointer;
    align-self: flex-end;
    display: flex;
    flex-direction: column;
}
.sortData b  {margin: 0 5px;}
.userPageWrapp .popUpButton, .byDate  {align-self: center; display: none;}
.finish  {
    font-weight: bold;
    font-size: 1.2em;
    margin: 10px auto;
    justify-content: center;
}

.myOrders  {
    width: 95%;
    margin: 0 auto 50px;
}

.orderData  {
    text-align: left;
    display: none;
    background-color: #F4DC93;
    width: 100%;
}
.orderData li  {margin-left: 10px;}

.myOrders th, .myOrders td  {
    position: relative;
    border: 1px solid #D58A33;
    margin: 2px;
}
.myOrders tr td:last-child  {width: 35%; border: none;}
.myOrders th  {background-color: #F4DC93;}
[name = "showOrderProducts"]  {padding: 10px 0;}

.closeUsersData, [data = "data"], [data = "changePassword"], [data = "myOrders"], [name = "showOrderProducts"]  {
    font-weight: bold;
    box-shadow: 2px 2px 5px;
    border: none;
    cursor: pointer;
}

.smartMyOrders  {display: none;}

@media screen and (max-device-width: 768px){
    .usersData tr  {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
    span[data="smartMyOrders"]  {display: inline-block;}
    .myOrders, .orderItems, span[data="myOrders"]  {display: none;}
    .smartMyOrders  {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 95%;
        margin: 0 auto 50px;
    }
    .caption  {
        font-weight: bold;
        font-size: 1.2em;
        margin-bottom: 10px;
    }
    .order  {
        background-color: #e7f7bc;
        border-top: 1px solid #d58a33;
        width: 100%;
    }
    .order li  {
        margin: 5px 10px;
    }
    .showOrderItems {
        box-shadow: 0 2px 5px;
    }
    .orderItems  {
        background-color: #ffffff;
        border-bottom: 1px solid #d58a33;
        margin-bottom: 2px;
        padding-top: 10px;
    }
    .arrow  {
        border: solid #d58a33;
        border-width: 0 1px 1px 0;
        display: inline-block;
        padding: 4px;
        margin-left: 5px;
    }
    
    .up  {
        transform: rotate(-135deg);
        -webkit-transform: rotate(-135deg);
    }

    .down  {
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }
}