:root {
    --action-green: #138891;
    --business-bg: #CDCDCD;
    --unverified-color: rgb(255, 190, 60);
}

.profile-page .content-container {
    min-height: fit-content;
    /* height: 450px; */
    border-radius: 30px;
    background-color: var(--base-box-bg);
}
/* 
[dir='ltr'] .profile-page .content-container {
    border-top-left-radius: 0;  
}

[dir='rtl'] .profile-page .content-container {
    border-top-right-radius: 0;  
} */

.verify-box {
    width: 100px;
}

.verified-number {
    color: var(--action-green);
}

.unverified-number {
    color: var(--unverified-color);
}

.verify-box.verified {
    background-color: var(--action-green);
}

.verify-box.unverified {
    background-color: var(--add-color);
}

.profile-tabs-box .mode-btn {
    border-radius: 10px;
    background-color: var(--base-box-bg);
    height: 48px;
    font-size: 14px;
}

.profile-tabs-menu {
    background-color: var(--base-box-bg);
    border-radius: 10opx;
}

.profile-content .profile-image-content {
    width: 110px;
    height: 110px;
    background-color: var(--item-bg);
}

.profile-content .profile-image-content img {
    max-width: 100%;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    margin-top: 16px;
    margin-inline-start: 2px;
}

.profile-content .edit-profile-btn {
    background-color: var(--add-bg);
}

.profile-inputs .form-label {
    color: var(--base-dark-gray);
}

.box-theme {
    border: 2.4px solid rgba(255, 255, 255, 0.3);
    background: radial-gradient(ellipse at top left, rgba(255, 255, 255, 0.7) 0%, rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(28.79px);
    --webkit-backdrop-filter: blur(28.79px); 
    opacity: 0.7;
    background-clip: padding-box;
    /* border-radius: 30px; */
    border-radius: 16px;
}

.profile-inputs .form-control {
    height: 48px;
}

.profile-inputs .form-control.long {
    height: 150px;
}

.profile-inputs .form-control:focus, .profile-inputs .form-control:hover {
    border-color: var(--item-bg) !important;
}

.edit-image {
    width: 24px;
    height: 24px;
}

.edit-image i {
    font-size: 14px;
    /* margin-inline-start: 2px; */
    margin-bottom: 3px;
}

.contact-row .contact-title {
    font-size: 14px;
}

.contact-row .contact-box {
    /* min-height: 250px; */
}

.contact-row .contact-title, .email-item .email-text, .phone-item .phone-text {
    color: var(--base-dark-gray);
}

.email-item .email-icon, .phone-item .phone-icon {
    background-color: var(--add-bg);
    color: var(--add-color);
    width: 40px;
    height: 40px;
}

.contact-row .add-btn, .add-skill, .add-experience, .add-education {
    background-color: var(--add-bg);
    color: var(--add-color);
}

.contact-row .add-btn:hover, .contact-row .add-btn:active, 
.add-skill:hover, .add-skill:active, .add-experience:hover, .add-experience:active, 
.add-education:hover, .add-education:active {
    background-color: var(--add-hover) !important;
}

.steps-container {
    width: 30%;
    height: fit-content;
}

.steps-contents {
    width: 70%;
}

.step-box .step-number {
    width: 24px;
    height: 24px;
    border: 2px solid var(--add-color);
}

.step-box.current .step-number {
    border-color: var(--base-dark-gray);
}

.step-box.done .step-number {
    background-color: var(--add-bg);
}

.step-box {
    color: var(--add-color);   
    cursor: pointer;
}

.step-box.disabled {
    cursor: not-allowed;
}

.step-box.current {
    font-size: 14px;
    font-weight: 500;
}

.step-box.current, .step-box.done {
    color: var(--base-dark-gray);
}

.step-divider {
    width: 2px;
    height: 24px;
    background-color: var(--add-bg);
}

.steps-contents .step-title {
    font-size: 14px;
    color: var(--base-dark-gray);
}

.update-user-profile {
    height: 42px;
    width: 120px;
}

.update-user-profile {
    background-color: var(--base-dark-gray);
}

.update-user-profile:hover, .update-user-profile:active {
    background-color: var(--hover-gray) !important;
}

.contact-header {
    border-bottom: 2.4px solid rgba(255, 255, 255, 0.3);
}

@media (max-width: 767.98px) {
    .steps-container, .steps-contents {
        width: 100%;
    }
}