.modal {
    position: absolute;
    top: 0px;
    /*left: 30%;*/
    z-index: 1070;
    display: none;
    overflow: hidden;
    outline: 0;
}

.modal-content {
    background: white;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
}


.modal-body {
  position: relative;
  flex: 1 1 auto;
}

#profileImageUploadBody {
    padding: 25px;
}

#profileImageUploadPreview {
    width:350px;
    float:left;
}

#profileImageCropPreview {
    float:left;
}


.image_area {
        position: relative;
    }

    .img-container img {
        display: block;
        width: 100%;
    }

    .preview {
        overflow: hidden;
        width: 160px;
        height: 160px;
        margin: 10px;
        border: 1px solid red;
    }


    .modal {
        background-color: transparent;
    }

    .image_area:hover .overlay {
        height: 50%;
        cursor: pointer;
    }


.close_upload {
    width: 150px !important;
    height: 35px !important;
    border: none !important;
    border-radius: 5px;
    background-color: #1c8bc3 !important;
    color: white;
    position: relative;
    outline: 0;
    margin-right: 20px;
}

.confirm_upload  {
    width: 150px !important;
    height: 35px !important;
    border: none !important;
    border-radius: 5px;
    background-color: #1c8bc3 !important;
    color: white;
    position: relative;
    outline: 0;
    margin: 0px;
}




@media screen and (max-width: 420px)  {

.modal {
    left: 2%;
}

#profileImageUploadPreview {
    width:100%;
    margin-left:0%;
}

    
}