/* Modal */
  .modal-dialog-profile {
    max-width: 500px;
}

.modal-profile-content {
    border-radius: 15px;
    padding: 20px;
}

/* Profile Image and Name */
.profile-info {
    font-size: 1.25rem;
}

.profile-info .name h6{
    padding: 10px 0px;
}

.img-circle {
    border-radius: 50%;
    object-fit: cover;
    width: 100px;
    height: 100px;
}

/* Preference Section */
.preferences {
    margin-top: 20px;
}

.preference-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    font-size: 1.25rem;
}

.preference-item i {
    font-size: 1.50rem;
    color: #000000;
    padding: 5px 10px 0px 0px;
}

.preference-item span {
    font-size: 1.25rem;
    color: #555;
}

.text-muted {
    color: #6c757d;
}

/* Buttons */
.buttons .btn-danger {
    background-color: #e74c3c;
    border-color: #e74c3c;
}

.buttons .btn-danger:hover {
    background-color: #c0392b;
    border-color: #c0392b;
}

.buttons .btn {
    padding: 10px 20px;
    font-size: 1.50rem;
}

.buttons .btn-block {
    width: 100%;
    text-align: center;
}

/* Mobile Responsiveness */
@media (max-width: 767px) {
    .profile-info {
        font-size: 1rem;
    }

    .preference-item {
        font-size: 0.9rem;
    }

    .buttons .btn {
        font-size: 1rem;
    }
}



/* login form modal */
body {
    font-family: 'Varela Round', sans-serif;
}

.modal-login {
    color: #636363;
    width: 400px;
}

.modal-login .modal-content {
    padding: 20px;
    border-radius: 5px;
    border: none;
}

.modal-login .modal-header {
    border-bottom: none;
    position: relative;
    justify-content: center;
}

.modal-login h4 {
    text-align: center;
    font-size: 26px;
}

.modal-login .form-group {
    position: relative;
}

.modal-login i {
    position: absolute;
    left: 13px;
    top: 11px;
    font-size: 18px;
}

.modal-login .form-control {
    padding-left: 40px;
}

.modal-login .form-control:focus {
    border-color: #00ce81;
}

.modal-login .form-control, .modal-login .btn {
    min-height: 40px;
    border-radius: 3px;
}

.modal-login .hint-text {
    text-align: center;
    padding-top: 10px;
}

.modal-login .close {
    position: absolute;
    top: -5px;
    right: -5px;
}

.modal-login .btn, .modal-login .btn:active {
    border: none;
    background: #00ce81 !important;
    line-height: normal;
}

.modal-login .btn:hover, .modal-login .btn:focus {
    background: #00bf78 !important;
}

.modal-login .modal-footer {
    background: #ecf0f1;
    border-color: #dee4e7;
    text-align: center;
    margin: 0 -20px -20px;
    border-radius: 5px;
    font-size: 13px;
    justify-content: center;
}

.modal-login .modal-footer a {
    color: #999;
}