#map {
    width: 100%;
    height: 400px;
}
.user-data{
    padding: 0 40px;
}
.user-data p{
    font-size: 18px;
    margin: 0;
}
.user-data .point{
    margin: 0 0 30px;
    color: red;
}
.user-data p>i{
    color: red;
    margin: 0 2px 0 0;
}
.user-data .name-box,
.user-data .phone-box,
.user-data .email-box,
.user-data .user-content-box,
.user-data .verification-box{
    overflow: auto;
    margin: 20px 0;
}
.user-data .name-box p,
.user-data .phone-box p,
.user-data .email-box p,
.user-data .user-content-box p,
.user-data .verification-box p{
    float: left;
    width: 100px;
}
.name-box .name-data,
.phone-box .phone-data,
.email-box .email-data,
.user-content-box .content-data,
.verification-box .verification-data{
    float: left;
    width: calc(100% - 100px);
    padding: 0;
}
.user-data input,
.user-data textarea{
    background-color: #eee;
    border: 0px;
}
.verification-data>.form-control{
    width: 100px;
    margin: 0 10px 0 0;
    display: inline-block;
}
.verification-data>button[type*='submit']{
    float: right;
    font-size: 20px;
    padding: 3px 10px;
}
@media screen and (max-width: 991px) {
    .user-data {
        padding: 0;
    }
}

@media screen and (max-width: 767px) {
    #map{
        margin: 0 0 30px;
    }
    #map {
        width: 100%;
        height: calc((100vw - 30px))
    }
    .user-data .name-box p,
    .user-data .phone-box p,
    .user-data .email-box p,
    .user-data .user-content-box p,
    .user-data .verification-box p{
        width: 70px;
    }
    .name-box .name-data,
    .phone-box .phone-data,
    .email-box .email-data,
    .user-content-box .content-data,
    .verification-box .verification-data{
        width: calc(100% - 70px);
    }
    .verification-data>button[type*='submit']{
        width: 100%;
        margin: 30px 0 0
    }
}