.profile-img {
    width: 200px; /* set a fixed width */
    height: 200px; /* set a fixed height */
    object-fit: cover; /* ensures the image fills the box without distortion */
    border-radius: 50%; /* makes the image perfectly round */
    border-radius: 50%; /* makes the image circular */
    border: 3px solid green; /* adds a green circular border */
}

.tooltip-success-always-top .tooltip-inner {
    background-color: #3ed43d;
    color: #fff;
}

.tooltip-success-always-top .tooltip-arrow::before {
    border-top-color: #3ed43d !important;
}

.tooltip-success-always-bottom .tooltip-inner {
    background-color: #3ed43d;
    color: #fff;
}

.tooltip-success-always-bottom .tooltip-arrow::before {
    border-bottom-color: #3ed43d !important;
}

.tooltip-success-top-left .tooltip-inner {
    background-color: #3ed43d;
    color: #fff;
}

.tooltip-success-top-left .tooltip-arrow::before {
    border-top-color: #3ed43d !important;
}

.profile-btn {
    background: linear-gradient(90deg, hsla(116, 50%, 48%, 1) 0%, hsla(101, 43%, 46%, 1) 100%);
    color: white;
    border: 3px solid green;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
}
    .profile-btn:hover, .profile-btn:active, .profile-btn:focus {
        color: greenyellow !important;
        outline: 2px solid #f4f269 !important; /* custom outline on click/focus */
        outline-offset: 2px;
    }

.edit-btn {
    background: linear-gradient(90deg, hsla(116, 50%, 48%, 1) 0%, hsla(101, 43%, 46%, 1) 100%);
    color: white;
    border: 2px solid green;
    white-space: normal;
    word-wrap: break-word;
    text-align: center;
}
    .edit-btn:hover, .edit-btn:active, .edit-btn:focus {
        color: greenyellow !important;
        outline: 2px solid #f4f269 !important; /* custom outline on click/focus */
        outline-offset: 2px;
    }

.profilehr {
    border: none; /* remove default hr border */
    border-top: 6px solid transparent; /* thickness of the line */
    border-image: linear-gradient(90deg, #a39e50, #969e3d, #849e29);
    border-image-slice: 1; /* ensures gradient fills the border */
    margin: 8px 0; /* spacing above and below */
}

.iti {
    width: 100% !important;
}

    .iti input {
        width: 100% !important;
    }

.profile-disabled:disabled {
    background: linear-gradient(90deg, hsla(116, 50%, 48%, 1) 0%, hsla(101, 43%, 46%, 1) 100%)
}

.altgradientonehome {
    background-image: linear-gradient(to top, #38e64c, #3ed43d, #40c22e, #41b01f, #3f9f0e);
}

.gradientbuttcancelhome {
    background-image: linear-gradient(to bottom, #68836b, #6c8e89, #80979d, #999fa6, #aaaaaa);
}

.gradientbuttuploadhome {
    background-image: linear-gradient(to bottom,rgba(0, 255, 85, 1) 0%, rgba(51, 173, 17, 1) 43%, rgba(208, 212, 91, 1) 81%);
}

@media (max-width: 480px) {
    .profile-img {
        width: 100px;
        height: 100px;
    }

    .profile-btn {
        font-size: 10px;
        width: 100px;
        height: 30px;
    }

    .edit-btn {
        font-size: 10px;
        width: 100px;
        height: 28px;
    }
}

@media (width < 484px) {
    .tooltip-success-top-left .tooltip-arrow::before {
        border-left-color: #3ed43d !important;
        border-top-color: transparent !important;
    }
}

@media (width > 640px) and (width < 685px) {
    .tooltip-success-top-left .tooltip-arrow::before {
        border-left-color: #3ed43d !important;
        border-top-color: transparent !important;
    }
}