@import "partials";
body {
    background-image: url(../img/bg-rental.png);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: top center;
}
.my-profile-head-wrap {
    padding: 150px 0 110px 0;
    @media ($sm-1679) {
        padding: 130px 0 80px 0;
    }
    @media ($sm-991) {
        padding: 90px 0 50px 0;
    }
    @media ($sm-767) {
        padding: 80px 10px 40px 10px;
    }
    .profile-title {
        font-size: 30px;
        font-weight: 700;
        line-height: 1.2;
        margin: 0;
        padding: 0 0 40px 0;
        color: #fff;
        @media ($sm-1679) {
            font-size: 28px;
            padding: 0 0 30px 0;
        }
        @media ($sm-1481) {
            font-size: 26px;
            padding: 0 0 20px 0;
        }
        @media ($sm-991) {
            font-size: 24px;
            padding: 0 0 15px 0;
        }
        @media ($sm-767) {
            font-size: 22px;
        }
        @media ($sm-479) {
            font-size: 20px;
        }
        span {
            font-weight: 300;
        }
    }
    .content-wrap {
        text-align: center;
        .img-wrap {
            width: 208px;
            height: 208px;
            border-radius: 50%;
            background: url(../img/man-border.svg) no-repeat top center / cover;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 40px auto;
            padding: 0;
            position: relative;
            @media ($sm-1679) {
                width: 190px;
                height: 190px;
                margin-bottom: 20px;
            }
            @media ($sm-1481) {
                width: 170px;
                height: 170px;
                margin-bottom: 15px;
            }
            @media ($sm-991) {
                width: 140px;
                height: 140px;
            }
            @media ($sm-479) {
                width: 120px;
                height: 120px;
            }
            .img {
                width: 172px;
                height: 172px;
                border-radius: 50%;
                @media ($sm-1679) {
                    width: 160px;
                    height: 160px;
                }
                @media ($sm-1481) {
                    width: 140px;
                    height: 140px;
                }
                @media ($sm-991) {
                    width: 120px;
                    height: 120px;
                }
                @media ($sm-479) {
                    width: 100px;
                    height: 100px;
                }
            }
            .edit-btn{position: absolute; right: calc(50% - 20px); bottom: 0px; cursor: pointer; border: 0; width: 40px; height: 40px;
             border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center;
             @media ($sm-1679) {width: 30px; height: 30px;}
             @media ($sm-991) {width: 25px; height: 25px;}
             img{ width: 22px;
                @media ($sm-1679) { width: 18px;}
                @media ($sm-991) { width: 16px;}
            }
            }
        }
        .name {
            font-size: 32px;
            color: #ffffff;
            font-weight: 500;
            line-height: 1.2;
            margin: 0;
            padding: 0 0 15px 0;
            @media ($sm-1679) {
                font-size: 28px;
            }
            @media ($sm-1481) {
                font-size: 26px;
            }
            @media ($sm-991) {
                font-size: 24px;
            }
            @media ($sm-991) {
                font-size: 22px;
            }
            @media ($sm-479) {
                font-size: 20px;
            }
        }
        .contact {
            margin: 0;
            padding: 0 0 30px 0;
            display: flex;
            justify-content: center;
            @media ($sm-1679) {
                padding-bottom: 20px;
            }
            @media ($sm-479) {
                flex-direction: column;
                align-items: center;
                gap: 10px;
            }
            li {
                list-style: none;
                display: flex;
                gap: 12px;
                align-items: center;
                @media ($sm-1679) {
                    gap: 8px;
                }
                img {
                    max-width: 14px;
                    @media ($sm-1679) {
                        max-width: 12px;
                    }
                }
                span {
                    color: #ffffff;
                    font-size: 16px;
                    font-weight: 500;
                    line-height: 1;
                    @media ($sm-1679) {
                        font-size: 14px;
                    }
                    a {
                        text-decoration: none;
                        color: #fff;
                    }
                }
                & + li {
                    border-left: 1px solid #343434;
                    padding-left: 15px;
                    margin-left: 15px;
                    @media ($sm-1679) {
                        padding-left: 10px;
                        margin-left: 10px;
                    }
                    @media ($sm-479) {
                        border: 0;
                        padding-left: 0;
                        margin-left: 0;
                    }
                }
            }
        }
        .action {
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            gap: 12px;
            @media ($sm-1679) {
                gap: 8px;
            }
            @media ($sm-479) {
                flex-direction: column;
            }
            li {
                list-style: none;
                display: flex;
                gap: 8px;
                align-items: center;
                height: 42px;
                padding: 10px 30px;
                background: #171717;
                border-radius: 30px;
                @media ($sm-1679) {
                    gap: 5px;
                    height: 38px;
                    padding: 5px 20px;
                }
                @media ($sm-991) {
                    height: 36px;
                }
                img {
                    max-width: 15px;
                    @media ($sm-1679) {
                        max-width: 12px;
                    }
                }
                span {
                    color: #ffffff;
                    font-size: 16px;
                    font-weight: 300;
                    line-height: 1;
                    @media ($sm-1679) {
                        font-size: 14px;
                    }
                }
                .link {
                    text-decoration: none;
                    color: #fff;
                    display: flex;
                    gap: 8px;
                    align-items: center;
                    @media ($sm-1679) {
                        gap: 5px;
                    }
                }
            }
        }
    }
}

.rental-tab-wrap {
    padding: 0 0 150px 0;
    @media ($sm-1679) {
        padding-bottom: 100px;
    }
    @media ($sm-1481) {
        padding-bottom: 50px;
    }
    @media ($sm-767) {
        padding-left: 10px;
        padding-right: 10px;
    }
    .nav {
        margin: 0 0 65px 0;
        padding: 0;
        border: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
        @media ($sm-1679) {
            margin: 0 0 50px 0;
        }
        @media ($sm-991) {
            margin: 0 0 30px 0;
        }
        .nav-item {
            margin: 0;
            padding: 0;
            .nav-link {
                margin: 0;
                padding: 0 10px 15px 10px;
                background: none;
                border: 0;
                font-size: 25px;
                color: rgba(255, 255, 255, 0.53);
                line-height: 1;
                font-weight: 300;
                outline: 0;
                box-shadow: none;
                cursor: pointer;
                @media ($sm-1679) {
                    font-size: 22px;
                    padding: 0 8px 10px 8px;
                }
                @media ($sm-1481) {
                    font-size: 20px;
                }
                @media ($sm-991) {
                    font-size: 18px;
                }
                @media ($sm-479) {
                    font-size: 16px;
                }
                &.active {
                    color: #fff;
                    font-weight: 500;
                    border-bottom: 1px solid #fff;
                }
            }
            & + .nav-item {
                margin-left: 35px;
                @media ($sm-1679) {
                    margin-left: 20px;
                }
            }
        }
    }
    .tab-content {
        .content-wrap {
            background: #0e0e0e;
            border-radius: 22px;
            overflow: hidden;
            @media ($sm-767) {
                border-radius: 15px;
            }
            .table-title {
                display: flex;
                align-items: center;
                padding: 30px 60px;
                color: #ffffff;
                font-size: 25px;
                font-weight: 700;
                line-height: 1.2;
                gap: 15px;
                @media ($sm-1679) {
                    padding: 20px 40px;
                    font-size: 23px;
                }
                @media ($sm-1199) {
                    font-size: 20px;
                    padding: 20px 30px;
                }
                @media ($sm-991) {
                    font-size: 18px;
                }
                @media ($sm-767) {
                    font-size: 16px;
                    gap: 10px;
                    padding: 20px 15px;
                }
                .num {
                    min-width: 32px;
                    height: 32px;
                    background: #faa629;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: #0e0e0e;
                    font-size: 16px;
                    font-weight: 700;
                    line-height: 1;
                    padding: 5px;
                    @media ($sm-1679) {
                        min-width: 28px;
                        height: 28px;
                        font-size: 14px;
                    }
                    @media ($sm-991) {
                        min-width: 25px;
                        height: 25px;
                        font-size: 13px;
                    }
                    @media ($sm-767) {
                        min-width: 22px;
                        height: 22px;
                        font-size: 12px;
                    }
                }
            }
            .table-wrap {
                overflow-y: auto;
                scrollbar-color: #f9b548 #000;
                scrollbar-width: thin;
                padding: 0 0 5px 0;
                .table {
                    background: none;
                    margin: 0;
                    padding: 0;
                    tr {
                        .space {
                            width: 45px;
                            @media ($sm-1679) {
                                width: 30px;
                            }
                        }
                        th {
                            background: #131313;
                            font-size: 16px;
                            color: #ffffff;
                            font-weight: 600;
                            padding: 15px 15px;
                            border: 0;
                            @media ($sm-1679) {
                                font-size: 14px;
                                padding: 13px 10px;
                            }
                            @media ($sm-991) {
                                padding: 10px;
                            }
                            @media ($sm-767) {
                                padding: 8px 5px;
                            }
                        }
                        td {
                            font-size: 16px;
                            color: #ffffff;
                            font-weight: 500;
                            padding: 20px 15px;
                            background: #0e0e0e;
                            border: 0;
                            border-bottom: 1px solid rgba(27, 27, 27, 0.5);
                            vertical-align: middle;
                            @media ($sm-1679) {
                                font-size: 14px;
                                padding: 18px 10px;
                            }
                            @media ($sm-991) {
                                padding: 15px 10px;
                            }
                            @media ($sm-767) {
                                padding: 10px 5px;
                            }
                        }
                        .trailer-wrap {
                            display: flex;
                            gap: 15px;
                            img {
                                border-radius: 4px;
                                width: 55px;
                                height: 35px;
                                object-fit: cover;
                                @media ($sm-1679) {
                                    width: 50px;
                                    height: 30px;
                                }
                            }
                            span {
                            }
                        }
                        .invoice {
                            width: 41px;
                            margin: 0 auto;
                            display: block;
                            @media ($sm-1679) {
                                width: 38px;
                            }
                            @media ($sm-991) {
                                width: 32px;
                            }
                        }
                        .txt-center {
                            text-align: center;
                        }
                    }
                }
                &.myrental-table-wrap {
                    .th-col-1 {
                        min-width: 270px;
                    }
                    .th-col-2 {
                        min-width: 115px;
                    }
                    .th-col-3 {
                        min-width: 170px;
                    }
                    .th-col-4 {
                        min-width: 170px;
                    }
                    .th-col-5 {
                        min-width: 120px;
                    }
                }
                &.trans-table-wrap {
                    .th-col-1 {
                        min-width: 150px;
                    }
                    .th-col-2 {
                        min-width: 230px;
                    }
                    .th-col-3 {
                        min-width: 210px;
                    }
                    .th-col-4 {
                        min-width: 200px;
                    }
                    .th-col-5 {
                        min-width: 95px;
                    }
                    .th-col-6 {
                        min-width: 95px;
                    }
                    .th-col-7 {
                        min-width: 120px;
                    }
                }
            }
        }
    }
}
.video-full-screen{
    .modal-dialog{
        max-width: 1200px;
    }
    .modal-header{
        position: absolute;
        right: 15px;
        z-index: 99;
    }
}

// overflow-y: auto;
//     scrollbar-color: #7697c1 #fff;
//     scrollbar-width: thin;