.accountpage-wrapper{
    .collapse-open-desktop{
        @include media-breakpoint-up(lg){
            display: block !important;
        }
    }
    @extend .my-5;
    & > .row{
        @include media-breakpoint-down(lg){
            flex-direction: column-reverse;
        }
    }
    .account-tabs{
        li.nav-item{
            @extend .my-1;
            a.nav-link{
                @extend .ps-2;
                color: shift_color($gray-500, 20%);
                font-size: 1rem;
                font-weight: 400;
                border-left: 4px solid transparent;
                &:hover{
                    color: $gray-700;
                }
                &.active{
                    border-left: 4px solid $primary;
                    color: $gray-700;
                    i{
                        color: $primary;
                    }
                }
                i{
                    min-width: 2.25rem;
                    font-size: 1.3rem;
                    text-align: center;
                    &.fa-clipboard-list{
                        font-size: calc(1.3rem + 20%);
                    }
                }
            }
        }
    }
    .tabcontent{
        form{
            .form-group{
                @extend .mb-3;
            }
        }
        .form-actions{
            @extend .mt-3;
        }
        #change_password_form{
            .form-text{
                ul{
                    margin-top: $spacer / 2;
                }
            }
        }
        .wishlist-actions{
            @extend .my-3;
            display: flex;
            a.text-primary{
                @extend .me-3;
                font-size: 1.2rem;
            }
            .wishlist-option-button{
                display: inline-block;
                cursor: pointer;
                & > a{
                    display: block;
                }
            }
        }
        .table-profile{
            @extend .table-sm;
            td, th{
                border: 0;
                padding: .15rem;
            }
        }
        .table-card{
            @include media-breakpoint-down(lg){
                thead{
                    display: none;
                }
            }
            tr{
                position: relative;
                @include media-breakpoint-down(lg){
                    display: flex;
                    flex-direction: column;
                    padding: 1.5rem 1rem;
                    margin-bottom: 1.5rem;
                    border-left: 4px solid $primary;
                    background: $light;
                }
                td{
                    vertical-align: middle;
                    &.wishlists-list-actions{
                        a{
                            @extend .me-2;
                            display: inline-block;
                        }
                    }
                    @include media-breakpoint-up(lg){
                        position: relative;
                    }
                    @include media-breakpoint-down(lg){
                        border: none;
                        padding: .25rem .25rem;
                        &[data-label]{
                            display: flex;
                            justify-content: space-between;
                            &:before{
                                content: attr(data-label);
                                display: block;
                            }
                        }
                        &[data-suffix]{
                            &:after{
                                content: attr(data-suffix);
                                display: inline;
                                padding-left: .5rem;
                            }
                        }
                        &[data-prefix]{
                            &:before{
                                content: attr(data-prefix);
                                display: inline;
                                padding-right: .5rem;
                            }
                        }
                        &.table-row-header{
                            font-size: 1.25rem;
                            justify-content: flex-start;
                            &:before{
                                margin-right: .5rem;
                            }
                            a{
                                text-decoration: unset;
                            }
                            b, &:before{
                                font-weight: $font-weight-bold;
                            }
                        }
                    }
                }
            }
        }
        @extend .my-5;
        @include media-breakpoint-up(lg) {
            min-height:50vh;
        }
        .row .col-lg-6{
            @extend .mb-5;
        }
        .tabcontent-item{
            @extend .py-4, .ps-4, .pe-3;
            &.tabcontent-even{
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
            border-left: 4px solid $primary;
            background: $light;
            border-top-right-radius: 1rem;
            border-bottom-right-radius: 1rem;
            height: 100%;
            table{
                tr{
                    td:first-of-type{
                        padding-left: 0;
                    }
                }
            }
        }
        .notifications-wrapper{
            @extend .mb-3;
            .notification{
                @extend .mb-3;
                .row{
                    align-items: center;
                }
                &.is_read{
                    border-left: 4px solid lighten($primary, 20%);
                }
                .notification-title{
                    display: block;
                }
                .notification-checkbox-wrapper{
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                    align-items: center;
                    padding: 0;
                    .notification-checkbox{
                        width: 25px;
                        height: 25px;
                        border: 2px solid $primary;
                        background: white;
                        cursor: pointer;
                        position: relative;
                        transition: .2s ease;
                        &:after{
                            content: "\f003";
                            font:normal normal normal 14px/1 'Highbiza';
                            font-weight: 800;
                            position: absolute;
                            top: 50%;
                            left: 50%;
                            transform: translate(-50%, -50%);
                            opacity: 0;
                            transition: .2s ease;
                            color: white;
                        }
                    }
                    input.notification-input{
                        display: none;
                    }
                    .notification-input:checked + .notification-checkbox{
                        background-color: $primary !important;
                        &:after{
                            opacity: 1;
                        }
                    }
                }
                .notification-actions{
                    a{
                        @extend .me-3;
                    }
                }
            }
        }
        .notification-tabs{
            display: flex;
            align-items: center;
            @extend .mb-4;
            a, button{
                @extend .me-3, .px-3;
            }
        }
    }
}

.products.order-products{
    & > div:first-of-type{
        .product{
            border-top: 1px solid $gray-300;
        }
    }
    .product{
        flex-direction: row;
        align-items: center;
        border-bottom: 1px solid $gray-300;
        padding: 1rem 0;
        .product-image{
            width: 20%;
            margin-bottom: 0;
            &:before{
                display: none;
            }
            img{
                top: unset;
                left: unset;
                transform: unset;
                width: 100%;
                height: 100px;
                position: unset !important;
            }
        }
        .product-description-wrapper{
            margin-left: 5%;
            width: 45%;
            margin-bottom: 0;
            .product-title{
                margin-bottom: 0;
            }
        }
        .product-addtobasket{
            width: 25%;
            margin-left: 5%;
        }
        .product-quantity{
            @extend .text-muted, .mb-1;
        }
        .product-rating{
            @extend .my-1;
        }
        button{
            i{
                @extend .me-1;
            }
        }
    }
}