.ci-body {
    padding-top: 65px;
}

.modal-image-gradient {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
    background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .15) 15%, rgba(255, 255, 255, .35) 29%, rgba(255, 255, 255, .58) 44%, rgba(255, 255, 255, .72) 68%, rgba(255, 255, 255, 1) 100%);
}

.round-image-gradient {
    position: absolute;
    width: 100%;
    height: 50px;
    bottom: 0;
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .15) 15%, rgba(0, 0, 0, .35) 29%, rgba(0, 0, 0, .58) 44%, rgba(0, 0, 0, .72) 68%, rgba(0, 0, 0, 1) 100%);
}


.modal-content {
    width: 80%
}

.modal-body-preview img {
    border-top-left-radius: 0.3rem;
    border-top-right-radius: 0.3rem;
}

.modal-body-preview {
    position: relative;
}

.btn-close-wrapper {
    position: absolute;
    display: flex;
    padding: 0.5rem;
    right: 10px;
    top: 10px;
    background-color: white;
    border-radius: 100%;
    z-index: 1;
}

.btn-select-wrapper {
    position: absolute;
    display: flex;
    padding: 0.5rem;
    right: 10px;
    top: 10px;
    border-radius: 100%;
    z-index: 1;
}

.btn-star-wrapper {
    position: absolute;
    display: flex;
    padding: 0.5rem;
    right: 60px;
    top: 10px;
    border-radius: 100%;
    z-index: 1;
}

.btn-high-wrapper {
    position: absolute;
    display: flex;
    padding: 0.5rem;
    right: 110px;
    top: 10px;
    border-radius: 100%;
    z-index: 1;
}

.preview-btn-container {
    position: absolute;
    bottom: 50px;
    left: 10px;
}

.preview-name-container {
    position: absolute;
    bottom: 3px;
    left: 10px;
}