:root,
[data-bs-theme=light] {
    --bs-primary: #022D5A;
    --bs-primary-rgb: 2, 45, 90;
    --bs-link-color: #022D5A;
    --bs-link-color-rgb: 2, 45, 90;
    --bs-link-hover-color: #011a4a;
    --bs-link-hover-color-rgb: 1, 26, 74;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #022D5A;
    --bs-btn-border-color: #022D5A;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #011a4a;
    --bs-btn-hover-border-color: #011a4a;
    --bs-btn-focus-shadow-rgb: 2, 45, 90;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #011540;
    --bs-btn-active-border-color: #011540;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #022D5A;
    --bs-btn-disabled-border-color: #022D5A;
}

.btn-outline-primary {
    --bs-btn-color: #022D5A;
    --bs-btn-border-color: #022D5A;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #022D5A;
    --bs-btn-hover-border-color: #022D5A;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #011540;
    --bs-btn-active-border-color: #011540;
}

.text-primary {
    --bs-text-opacity: 1;
    color: #022D5A !important;
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: #022D5A !important;
}

.bg-label-primary {
    background-color: rgba(2, 45, 90, 0.16) !important;
    color: #022D5A !important;
}

.menu-vertical .menu-item.active > .menu-link:not(.menu-toggle) {
    background: linear-gradient(270deg, rgba(2, 45, 90, 0.7) 0%, #022D5A 100%);
    box-shadow: 0 0.125rem 0.375rem 0 rgba(2, 45, 90, 0.3);
}

.marine-logo-wrap {
    background-color: #022D5A;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.marine-logo {
    display: block;
    height: 44px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

.authentication-wrapper .marine-logo-wrap {
    padding: 0.625rem 1rem;
}

.authentication-wrapper .marine-logo {
    height: 56px;
    max-width: 220px;
}

.profile-banner-gradient {
    block-size: 250px;
    inline-size: 100%;
    background: linear-gradient(135deg, #022D5A 0%, #034078 100%);
}

@media (max-width: 767.98px) {
    .profile-banner-gradient {
        block-size: 150px;
    }
}

/* Profile page */
.user-profile-header {
    margin-block-start: -3rem;
    padding-bottom: 1.5rem;
}

.profile-header-avatar-wrap {
    position: relative;
    z-index: 2;
    inline-size: 120px;
    block-size: 120px;
    margin-inline: auto;
}

@media (min-width: 576px) {
    .profile-header-avatar-wrap {
        margin-inline-start: 1.5rem;
        margin-inline-end: 0;
    }
}

.profile-header-avatar {
    inline-size: 120px !important;
    block-size: 120px !important;
    object-fit: cover;
    border: 5px solid var(--bs-paper-bg);
    display: block;
}

.profile-form-avatar {
    inline-size: 96px !important;
    block-size: 96px !important;
    object-fit: cover;
    display: block;
    border: 4px solid var(--bs-border-color);
}

.profile-photo-upload {
    background-color: var(--bs-gray-50, #f8f9fa);
}

.user-profile-header .user-profile-info {
    position: relative;
    z-index: 1;
    min-width: 0;
    width: 100%;
}

.user-profile-header .user-profile-info ul {
    row-gap: 0.75rem;
}

@media (max-width: 991.98px) {
    .user-profile-header {
        margin-block-start: -2rem;
    }

    .profile-header-avatar-wrap {
        inline-size: 100px;
        block-size: 100px;
    }

    .profile-header-avatar {
        inline-size: 100px !important;
        block-size: 100px !important;
    }
}