@import 'partials';


.custom-modal{
    .custom-inp-cover{
        position: relative;
        margin-bottom: 45px;
        @media ($sm-1679) {
            margin-bottom: 30px;
        }
        @media ($sm-1481) {
            margin-bottom: 20px;
        }
        @media ($sm-579) {
            margin-bottom: 18px;
        }
        .inp-alrt{
            position: absolute;
            left: 20px;
            font-size: 13px;
            color: red;
            @media ($sm-579) {
                font-size: 12px;
            }
        }
        .form-label{
            color: #fff;
            font-family: Barlow Semi Condensed;
            font-weight: 500;
            @media ($sm-1679) {
                font-size: 14px;
            }
        }
        .input-group-custom{
            border-radius: 30px;
            border: 0.83px solid #373737;
            background-color: transparent;
            padding-right: 15px;
            .custom-inp{
                box-shadow: none;
                background-color: transparent;
                border: none;
                color: #fff;
                padding: 5px 20px;
                height: 55px;
                @media ($sm-1679) {
                    height: 48px;
                }
                @media ($sm-1481) {
                    height: 43px;
                }
                @media ($sm-579) {
                    height: 40px;
                }
            }
            .inp-rgt-btn{
                background-color: transparent;
                color: #fff;
                border: none;
                img{
                    @media ($sm-1679) {
                        width: 23px;
                    }
                    @media ($sm-1481) {
                        width: 20px;
                    }
                }
            }
        }
    }
    .modal-footer{
        padding: 0;
        @media ($sm-1679) {
            padding-top: 15px;
        }
        .md-back-btn{
            background: #99999994;
            color: #fff;
            border-color: #B0B0B0;
        }
        .btn{
            margin-bottom: 0 !important;
            @media ($sm-1679) {
                height: 48px;
            }
            @media ($sm-1481) {
                height: 45px;
            }
        }
        
    }
}

.chage-pswd-width{
    .modal-dialog{
        @media (min-width: 768px) {
            max-width: 550px;
        }
    }
}
.chage-pswd-modal{
    .modal-dialog{
        .modal-body {
            padding: 0px 80px 100px;
            @media ($sm-1679) {
                padding: 0px 80px 80px;
            }
            @media ($sm-1481) {
                padding: 0px 70px 50px;
            }
            @media ($sm-579) {
                padding: 0px 20px 40px;
            }
            .modal-title{
                justify-content: unset;
                margin-bottom: 60px;
                @media ($sm-1679) {
                    margin-bottom: 40px;
                }
                @media ($sm-1481) {
                    margin-bottom: 30px;
                }
            }
        }
    }
    .modal-footer{
        &.d-flex{
            .btn{
                width: calc(50% - 13px);
                 @media ($sm-1679) {
                    margin-bottom: 30px;
                }
            }
        }
    }   
}

.logout-modal{
    .modal-dialog{
        @media (min-width: 768px) {
            max-width: 550px;
        }
        .modal-body {
            padding: 60px 80px 80px;
            @media ($sm-1679) {
                padding: 40px 80px 60px;
            }
            @media ($sm-1481) {
                padding: 30px 70px 50px;
            }
            @media ($sm-579) {
                padding: 20px 20px 40px;
            }
        }
    }
    .logout-modal-block{
        .img-block{
            margin-bottom: 50px;
            @media ($sm-1679) {
                margin-bottom: 40px;
            }
            @media ($sm-579) {
                margin-bottom: 30px;
            }
            img{
                @media ($sm-1679) {
                    max-height: 110px;
                }
                @media ($sm-1481) {
                    max-height: 100px;
                }
                @media ($sm-579) {
                    max-height: 80px;
                }
            }
        }
        .txt-block{
            margin-bottom: 35px;
            text-align: center;
            color: #fff;
            h3{
                font-size: 30px;
                font-weight: 700;
                color: $primary;
                @media ($sm-1679) {
                    font-size: 26px;
                }
                span{
                    color: #fff;
                    font-weight: 300;
                }
            }
            p{
                color: #fff;
            }
        }
    }
    .modal-footer{
        &.d-flex{
            .btn{
                width: calc(50% - 13px);
                @media ($sm-1679) {
                    margin-bottom: 30px;
                }
            }
        }
    } 
}

.edit-profile-modal{
    .modal-dialog{
        @media (min-width: 1200px) {
            max-width: 970px;
        }
    }
    .modal-footer{
        .btn{
            max-width: 180px;
        }
        .back-btn{
            margin-right: 25px;
        }
    }
}