@font-face {
    font-family: 'Robotica';
    src: url('Fonts/Robotica.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

a#dnn_dnnLOGO_hypLogo {
    /*background: white;*/
    padding: 0 15px;
    /*border: solid 1px white;    
    transform: skew(20deg);*/
}

.aperture-main {
    background: #1b46ab;
    background: radial-gradient(circle, rgba(208, 113, 227, 1) 0%, rgba(0, 71, 179, 1) 100%);
}

img#dnn_dnnLOGO_imgLogo {
    /*transform: skew(-20deg);*/
}

body, p, li {
    font-family: Helvetica, Arial !important;
    font-size: 1rem;
    color: var(--dnn-color-neutral-dark,#000000);
    text-align: justify;
}

.default2 {
    font-family: Helvetica, Arial !important;
    font-size: 1rem;
    color: #0B1730;
    text-align: justify;
}

.default3 {
    font-family: Helvetica, Arial !important;
    font-size: 1rem;
    color: #c0c0c0;
    text-align: justify;
}

body, h1, h2, h3, h4, h5, h6, p, li {
    font-family: Helvetica, Arial !important;
    line-height: 1.5;
}

a, a:visited {
    color: #7df9ff;
}

    a:hover:not(.logo-menu-bar a) {
        color: var(--dnn-color-tertiary-light,#3c7a9a) !important;
    }

.banner {
    width: 100%;
    height: 350px;
}

.desktop-menu li a span {
    display: none;
}

.aperture-theme .aperture-footer .aperture-container {
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

    .aperture-theme .aperture-footer .aperture-container .footer-right {
        width: auto !important;
    }

.banner-panel .banner-image {
    width: 100%;
    height: 350px;
}

.banner-panel .banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    padding: 5px 16px;
    color: #f4f8ff;
    text-align: center;
    bottom: 20%;
}

.banner-heading {
    font-family: 'Robotica', Helvetica, Arial !important;
    font-size: 2.2rem !important;
    line-height: 1;
    text-align: left;
    color: var(--dnn-color-neutral-light,#000000) !important;
}

h1, .h1 {
    /*font-size: 2.6rem !important;
    color: var(--dnn-color-tertiary-light,#000000);*/
    font-size: 1.3rem !important;
    color: #7df9ff;
    text-transform: uppercase;
    font-weight: 1000 !important;
}
/* Manage Heading 2 */
h2, .h2 {
    font-size: 1.3rem !important;
    color: #0B1730;
    text-transform: uppercase;
    font-weight: 1000 !important;
}
/* Manage Heading 3 */
h3, .h3 {
    font-size: 1.3rem !important;
    color: #c0c0c0;
    text-transform: uppercase;
    font-weight: 1000 !important;
}

h4, .h4 {
    font-size: 1.2rem !important;
    text-transform: uppercase;
    color: #7df9ff;
    font-weight: 600 !important;
}

h5, .h5 {
    font-size: 1.2rem !important;
    color: #0B1730;
    font-weight: 600 !important;
    text-transform: uppercase;
}

h6, .h6 {
    font-size: 1.2rem !important;
    color: #c0c0c0;
    font-weight: 600 !important;
    text-transform: uppercase;
}

h7, h8, h9, .h7, .h8, .h9 {
    line-height: 1.15;
    margin-bottom: 1.5rem;
    display: block;
}

h7, .h7 {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #7df9ff;
    text-transform: uppercase;
}

h8, .h8 {
    font-size: 1rem !important;
    color: #0B1730;
    font-weight: 600 !important;
    text-transform: uppercase;
}

h9, .h9 {
    font-size: 1rem !important;
    color: #c0c0c0;
    font-weight: 600 !important;
    text-transform: uppercase;
}

.promo-box .promo-box-text {
    text-transform: none;
}

.aperture-btn-primary, a.aperture-btn-primary {
    text-transform: uppercase;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

    .aperture-btn-primary:hover, a.aperture-btn-primary :hover {
        transform: scale(1.08);
    }


#nav-desktop a {
    font-size: 1.2rem !important;
}

.counter-plus::after {
    content: '+';
}


.banner-heading {
    color: #00f2ff;
    text-decoration: none;
    font-size: 2rem;
    transition: all 0.3s ease;
    display: inline-block;
}

    .banner-heading:hover {
        /* Play once, stay at the end (forwards) */
        animation: glitch-stay 0.3s ease-out 1 forwards;
    }

@keyframes glitch-stay {
    0% {
        transform: skew(0deg);
        text-shadow: 0 0 0px #fff;
    }

    20% {
        transform: skew(10deg) translateX(-5px);
        text-shadow: 2px 0 #ff00c1, -2px 0 #00f2ff;
    }

    40% {
        transform: skew(-10deg) translateX(5px);
        filter: hue-rotate(90deg); /* Shifts colors robotically */
    }
    /* Final State: The animation "stays" here */
    100% {
        transform: skew(0deg) translateX(2px);
        text-shadow: 3px 0px 1px #ff00c1, -3px 0px 1px #00f2ff;
        filter: drop-shadow(0 0 5px #00f2ff);
    }
}

.dnnTerms, .dnnPrivacy {
    border: 5px solid #ffffff;
    border-top: 5px dotted #ffffff;
    border-bottom: 5px dotted #ffffff;
    border-radius: 20px;
    padding: 20px;
    margin: 20px 0;
}

.download-info-link {
    display: inline-block;
    transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

    .download-info-link:hover {
        transform: scale(1.15);
    }

.aperture-border {
    border: 5px solid rgb(from var(--dnn-color-background-light, #00a5e0) r g b / 0.5);
}

/* =========================================
   APERTURE RESPONSIVE 3D BANNER SLIDER
   ========================================= */


/* =====================================================
   MAIN SLIDER
===================================================== */

#mainSlider,
#mainSlider * {
    box-sizing: border-box;
}

    #mainSlider.aperture-slider {
        position: relative;
        display: block;
        width: 100%;
        height: 350px;
        min-height: 350px;
        aspect-ratio: auto;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        isolation: isolate;
        background: #111;
    }

    /* =====================================================
   SLIDES
===================================================== */

    #mainSlider .aperture-banner {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease;
        z-index: 1;
    }

        #mainSlider .aperture-banner.active {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            z-index: 2;
        }

    /* =====================================================
   BACKGROUND IMAGE
===================================================== */

    #mainSlider .banner-bg {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        background-repeat: no-repeat !important;
        background-position: center center !important;
        background-size: cover !important;
        opacity: 1;
        z-index: 1;
        pointer-events: none;
    }

    /* =====================================================
   CONTENT BASE
===================================================== */

    #mainSlider .banner-content {
        position: absolute;
        z-index: 20;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 92%;
        max-width: 850px;
        max-height: 100%;
        margin: 0;
        padding: 0;
        background: transparent !important;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    /* =====================================================
   CONTENT POSITIONS
===================================================== */

    /* Center */
    #mainSlider .banner-content-center {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 50%;
        align-items: center;
        text-align: center;
        transform: translate(-50%, -50%);
    }

    /* Top center */
    #mainSlider .banner-content-top {
        top: 8%;
        right: auto;
        bottom: auto;
        left: 50%;
        align-items: center;
        text-align: center;
        transform: translateX(-50%);
    }

    /* Bottom center */
    #mainSlider .banner-content-bottom {
        top: auto;
        right: auto;
        bottom: 10%;
        left: 50%;
        align-items: center;
        text-align: center;
        transform: translateX(-50%);
    }

    /* Center left */
    #mainSlider .banner-content-left {
        top: 50%;
        right: auto;
        bottom: auto;
        left: 5%;
        align-items: flex-start;
        text-align: left;
        transform: translateY(-50%);
    }

    /* Center right */
    #mainSlider .banner-content-right {
        top: 50%;
        right: 5%;
        bottom: auto;
        left: auto;
        align-items: flex-end;
        text-align: right;
        transform: translateY(-50%);
    }

    /* Top left */
    #mainSlider .banner-content-top-left {
        top: 8%;
        right: auto;
        bottom: auto;
        left: 5%;
        align-items: flex-start;
        text-align: left;
        transform: none;
    }

    /* Top right */
    #mainSlider .banner-content-top-right {
        top: 8%;
        right: 5%;
        bottom: auto;
        left: auto;
        align-items: flex-end;
        text-align: right;
        transform: none;
    }

    /* Bottom left */
    #mainSlider .banner-content-bottom-left {
        top: auto;
        right: auto;
        bottom: 10%;
        left: 5%;
        align-items: flex-start;
        text-align: left;
        transform: none;
    }

    /* Bottom right */
    #mainSlider .banner-content-bottom-right {
        top: auto;
        right: 5%;
        bottom: 10%;
        left: auto;
        align-items: flex-end;
        text-align: right;
        transform: none;
    }

    /* =====================================================
   CONTENT ANIMATION
===================================================== */

    #mainSlider .aperture-banner.active .banner-content {
        animation: apertureContentFade 0.7s ease-out 0.15s forwards;
    }

@keyframes apertureContentFade {
    from {
        opacity: 0;
        visibility: visible;
    }

    to {
        opacity: 1;
        visibility: visible;
    }
}

/* Allow clicks only on active slide content */
#mainSlider .aperture-banner.active .banner-content {
    pointer-events: auto;
}

#mainSlider .aperture-banner:not(.active) .banner-content {
    pointer-events: none;
}

/* =====================================================
   HEADING
===================================================== */

#mainSlider .banner-title {
    display: block;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-family: inherit;
    font-size: clamp(18px, 2.5vw, 42px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: 0.4px;
    text-align: inherit;
    text-decoration: none;
    overflow-wrap: anywhere;
    word-break: normal;
}

#mainSlider .banner-heading-link {
    cursor: pointer;
    transition: opacity 0.2s ease;
}

    #mainSlider .banner-heading-link:hover {
        opacity: 0.8;
        text-decoration: underline;
        text-underline-offset: 4px;
    }

    #mainSlider .banner-heading-link:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 4px;
    }

#mainSlider .aperture-text-primary {
    color: #00a5e0;
}

#mainSlider .aperture-text-background-contrast {
    color: #fff;
}

/* =====================================================
   CTA BUTTON - CLICK FIX
===================================================== */

#mainSlider .banner-content .banner-button {
    position: relative;
    z-index: 50;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    max-width: 100%;
    margin: 9px 0 0;
    padding: 10px 25px;
    font-family: inherit;
    font-size: clamp(12px, 1.2vw, 19px);
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    overflow-wrap: anywhere;
    background: var(--dnn-color-tertiary-light, #00a5e0) !important;
    border: 1px solid var(--dnn-color-tertiary-light, #00a5e0) !important;
    border-radius: var(--dnn-controls-radius, 0) !important;
    color: var(--dnn-color-tertiary-contrast, #fff) !important;
    cursor: pointer;
    pointer-events: auto !important;
    touch-action: manipulation;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

    #mainSlider .banner-content .banner-button:hover {
        background: #0089bd !important;
        border-color: #0089bd !important;
        color: #fff !important;
        transform: translateY(-2px);
    }

    #mainSlider .banner-content .banner-button:focus-visible {
        outline: 3px solid #fff;
        outline-offset: 4px;
    }

/* =====================================================
   NAVIGATION DOTS
===================================================== */

#mainSlider .slider-nav {
    position: absolute;
    bottom: 10px;
    left: 50%;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
}

#mainSlider .dot {
    display: block;
    width: 12px;
    height: 12px;
    flex: 0 0 12px;
    margin: 0;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    background: rgba(21, 69, 104, 0.6);
    cursor: pointer;
    pointer-events: auto;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

    #mainSlider .dot.active {
        background: #00a5e0;
        transform: scale(1.2);
    }

/* =====================================================
   3D CUBE TRANSITION OVERLAY
===================================================== */

#mainSlider .cube-transition {
    position: absolute;
    inset: 0;
    z-index: 30;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none !important;
    perspective: 650px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
}

#mainSlider .cube-tile {
    position: absolute;
    margin: 0;
    padding: 0;
    border: 0;
    overflow: hidden;
    background-repeat: no-repeat;
    transform-origin: center center;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    pointer-events: none !important;
    will-change: transform, opacity, filter;
    animation-name: apertureCubeReveal;
    animation-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1);
    animation-fill-mode: both;
}

    #mainSlider .cube-tile::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient( 135deg, rgba(255, 255, 255, 0.35) 0%, rgba(255, 255, 255, 0.04) 35%, rgba(0, 0, 0, 0.08) 60%, rgba(0, 0, 0, 0.65) 100% );
        opacity: 0.9;
    }

@keyframes apertureCubeReveal {
    0% {
        transform: rotateY(var(--cube-rotation, -100deg)) rotateX(var(--cube-tilt, 22deg)) scale(0.72);
        opacity: 0;
        filter: brightness(0.55);
    }

    35% {
        opacity: 1;
        filter: brightness(0.8);
    }

    70% {
        transform: rotateY(-12deg) rotateX(5deg) scale(1.02);
        opacity: 1;
        filter: brightness(1.05);
    }

    100% {
        transform: rotateY(0deg) rotateX(0deg) scale(1);
        opacity: 1;
        filter: brightness(1);
    }
}

/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px) {
    #mainSlider .banner-content {
        width: 92%;
        gap: 4px;
    }

    #mainSlider .banner-title {
        font-size: clamp(17px, 3vw, 30px);
        line-height: 1.1;
    }

    #mainSlider .banner-button {
        margin-top: 6px;
        padding: 7px 16px;
        font-size: clamp(12px, 1.7vw, 17px);
    }

    #mainSlider .slider-nav {
        bottom: 7px;
        gap: 9px;
    }
}

/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 768px) {
    #mainSlider.aperture-slider {
        width: 100%;
        height: 350px;
        min-height: 350px;
        aspect-ratio: auto;
    }

    #mainSlider .banner-content {
        width: calc(100% - 32px);
        max-width: none;
        gap: 4px;
    }

    #mainSlider .banner-content-top {
        top: 7%;
    }

    #mainSlider .banner-content-bottom {
        bottom: 9%;
    }

    #mainSlider .banner-content-left {
        left: 16px;
        right: auto;
        width: calc(100% - 32px);
    }

    #mainSlider .banner-content-right {
        left: auto;
        right: 16px;
        width: calc(100% - 32px);
    }

    #mainSlider .banner-content-top-left,
    #mainSlider .banner-content-bottom-left {
        left: 16px;
        right: auto;
    }

    #mainSlider .banner-content-top-right,
    #mainSlider .banner-content-bottom-right {
        right: 16px;
        left: auto;
    }

    #mainSlider .banner-content-top-left,
    #mainSlider .banner-content-top-right {
        top: 7%;
    }

    #mainSlider .banner-content-bottom-left,
    #mainSlider .banner-content-bottom-right {
        bottom: 9%;
    }

    #mainSlider .banner-title {
        font-size: clamp(16px, 3.5vw, 25px);
        line-height: 1.12;
        letter-spacing: 0;
    }

    #mainSlider .banner-button {
        margin-top: 5px;
        padding: 7px 14px;
        font-size: clamp(12px, 2.5vw, 15px);
        line-height: 1.3;
    }

    #mainSlider .slider-nav {
        bottom: 5px;
        gap: 8px;
    }

    #mainSlider .dot {
        width: 9px;
        height: 9px;
        flex-basis: 9px;
    }

    #mainSlider .cube-transition {
        perspective: 480px;
    }
}

/* =====================================================
   SMALL PHONES
===================================================== */

@media (max-width: 420px) {
    #mainSlider.aperture-slider {
        height: 350px;
        min-height: 350px;
    }

    #mainSlider .banner-content {
        width: calc(100% - 24px);
        gap: 3px;
    }

    #mainSlider .banner-content-left,
    #mainSlider .banner-content-right {
        width: calc(100% - 24px);
    }

    #mainSlider .banner-content-left,
    #mainSlider .banner-content-top-left,
    #mainSlider .banner-content-bottom-left {
        left: 12px;
    }

    #mainSlider .banner-content-right,
    #mainSlider .banner-content-top-right,
    #mainSlider .banner-content-bottom-right {
        right: 12px;
    }

    #mainSlider .banner-title {
        font-size: clamp(15px, 4.2vw, 19px);
        line-height: 1.12;
    }

    #mainSlider .banner-button {
        margin-top: 4px;
        padding: 6px 11px;
        font-size: 12px;
    }

    #mainSlider .slider-nav {
        bottom: 4px;
        gap: 7px;
    }

    #mainSlider .dot {
        width: 8px;
        height: 8px;
        flex-basis: 8px;
    }

    #mainSlider .cube-transition {
        perspective: 360px;
    }
}

/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {
    #mainSlider .aperture-banner,
    #mainSlider .banner-button,
    #mainSlider .banner-heading-link,
    #mainSlider .dot {
        transition-duration: 0.01ms !important;
    }

        #mainSlider .aperture-banner.active .banner-content {
            animation-duration: 0.01ms !important;
            animation-delay: 0ms !important;
        }

    #mainSlider .cube-tile {
        animation-duration: 0.01ms !important;
        animation-delay: 0ms !important;
    }
}


/* End responsive 3D slider */

/* breadcrumb */
.breadcrumbLink {
    text-decoration: none;
    color: #666;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
}

    /* The "Name" span inside the link */
    .breadcrumbLink span {
        position: relative;
        padding: 2px 4px;
        display: inline-block;
    }

    /* Hover effect */
    .breadcrumbLink:hover {
        color: var(--dnn-color-primary-dark,#00A5E0); /* Change to your theme color */
        font-weight: bold;
    }

    /* Adding a modern separator via CSS */
    /* This targets every link EXCEPT the last one */
    .breadcrumbLink:not(:last-child)::after {
        content: '>'; /* Modern slash separator */
        margin: 0 10px;
        color: var(--dnn-color-primary-light,#00A5E0);
        font-weight: 300;
        text-decoration: none;
        display: inline-block;
    }

    /* Styling the active (last) link if applicable */
    .breadcrumbLink:last-child {
        color: var(--dnn-color-primary-light,#00A5E0);
        ;
        pointer-events: none; /* Makes the current page link non-clickable */
    }

    .breadcrumbLink span::after {
        content: '';
        position: absolute;
        width: 100%;
        height: 2px; /* Thickness of the line */
        bottom: 0;
        left: 0;
        background-color: var(--dnn-color-primary-dark, #00A5E0);
        /* The Animation Logic */
        transform: scaleX(0); /* Start invisible/zero width */
        transform-origin: center; /* Expansion starts from the middle */
        transition: transform 0.3s ease-in-out;
    }

    .breadcrumbLink:hover span::after {
        transform: scaleX(1); /* Expand to full width */
    }
/* The container */

.tooltip {
    position: relative;
    cursor: pointer;
    border-bottom: 1px dashed #666;
}
    /* The Tooltip Box */
    .tooltip::after {
        content: attr(data-tooltip);
        font-size: 0.65rem;
        font-weight: 100;
        position: absolute;
        bottom: 150%; /* Moved up slightly */
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--dnn-color-primary);
        color: #fff;
        padding: 8px 12px;
        border-radius: 4px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
        z-index: 10; /* Ensures box is on top */
        white-space: normal; /* Allows text to wrap */
        width: max-content; /* Fits content up to a point */
        max-width: 200px; /* Prevents it from being too wide on mobile */
        min-width: 100px; /* Keeps it from being too skinny */
        text-align: center;
        line-height: 1.4;
    }

    /* The Triangle (Arrow) */
    .tooltip::before {
        content: "";
        position: absolute;
        bottom: 150%; /* Start at the same base as the box */
        left: 50%;
        transform: translateX(-50%) translateY(100%); /* Shift it down to the edge */
        border-left: 6px solid transparent;
        border-right: 6px solid transparent;
        border-top: 6px solid var(--dnn-color-primary); /* Matches the box color */

        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease;
        z-index: 9;
    }

    /* Show both on hover */
    .tooltip:hover::after,
    .tooltip:hover::before {
        opacity: 1;
        visibility: visible;
    }
/*Animation*/
/* Base Setup for all Scroll Animations */
.reveal, .from-left, .from-right {
    /* Optimization: Use 'both' to prevent flickering */
    animation-fill-mode: both;
    animation-timing-function: ease-out; /* 'ease-out' feels more natural than 'linear' */
    /* The Scroll Trigger */
    animation-timeline: view();
    /* Slightly wider range (0% to 40%) makes the movement feel smoother */
    animation-range: entry 10% cover 40%;
}

/* Specific Animations */
.reveal {
    animation-name: fadeInReveal;
}

.from-left {
    animation-name: reveal-left;
}

.from-right {
    animation-name: reveal-right;
}

/* The Keyframes */
@keyframes fadeInReveal {
    from {
        opacity: 0;
        transform: translateY(50px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes reveal-left {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    /* Reduced to 50px for a subtler feel */
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes reveal-right {
    from {
        opacity: 0;
        transform: translateX(50px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* The "Safety Net" */
@media (prefers-reduced-motion: reduce) {
    .reveal, .from-left, .from-right {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
/*Animation End*/


/* --- Modern DNN Registration Form Overhaul --- */

/* ==========================================================
   DNN 10 Blue Background Modern Underline Registration Form
   ========================================================== */

div.dnnRegistrationForm .dnnForm {
    width: 100%;
}

/* 1. Form Container with #0047b3 Background */
#dnn_ctr_Register_RegistrationForm.dnnForm {
    max-width: 480px;
    margin: 40px auto;
    background: #0e172e !important;
    padding: 40px 32px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 71, 179, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: inherit;
    color: #ffffff;
}

/* 2. Form Information Note */
#dnn_ctr_Register_RegistrationForm .dnnFormInfo {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #f1f5f9;
    padding: 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* 3. Field Row Layout & Hiding Clutter */
#dnn_ctr_Register_RegistrationForm .dnnFormItem {
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    float: none !important;
    width: 100% !important;
    position: relative;
}

/* Hide default DNN help icons/tooltips */
#dnn_ctr_Register_RegistrationForm .dnnTooltip,
#dnn_ctr_Register_RegistrationForm .dnnFormHelp {
    display: none !important;
}

/* 4. Labels with Smooth Transition on Focus */
#dnn_ctr_Register_RegistrationForm .dnnFormItem .dnnLabel,
#dnn_ctr_Register_RegistrationForm .dnnFormItem label {
    float: none !important;
    width: 100% !important;
    text-align: left !important;
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.8) !important;
    margin-bottom: 6px !important;
    transition: color 0.25s ease-in-out, transform 0.25s ease-in-out;
}

/* FIXED LABEL TRANSITION: When focusing the item, label turns bright white/cyan */
#dnn_ctr_Register_RegistrationForm .dnnFormItem:focus-within label,
#dnn_ctr_Register_RegistrationForm .dnnFormItem:focus-within .dnnLabel label {
    color: #ffffff !important;
    transform: translateY(-2px);
}

/* 5. Bottom-Border Only Inputs for Dark Background */
#dnn_ctr_Register_RegistrationForm input[type="text"],
#dnn_ctr_Register_RegistrationForm input[type="password"],
#dnn_ctr_Register_RegistrationForm .password-strength {
    width: 100% !important;
    border: none !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.4) !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 10px 0 !important;
    font-size: 16px !important;
    color: #ffffff !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease-in-out;
}

    /* Input Focus State (Bottom border turns solid bright white) */
    #dnn_ctr_Register_RegistrationForm input[type="text"]:focus,
    #dnn_ctr_Register_RegistrationForm input[type="password"]:focus,
    #dnn_ctr_Register_RegistrationForm .password-strength:focus {
        outline: none !important;
        border-bottom-color: #ffffff !important;
        background: transparent !important;
        box-shadow: none !important;
    }

/* Fix container wrappers for password fields */
#dnn_ctr_Register_RegistrationForm .password-strength-container {
    width: 100% !important;
}

/* Password policy text adjustments for dark background */
#dnn_ctr_Register_RegistrationForm .password-strength-tooltip {
    background: #003380 !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
}

/* 6. Validation Error Styling */
#dnn_ctr_Register_RegistrationForm .dnnFormMessage.dnnFormError {
    color: #ffcccc !important;
    background-color: rgba(220, 38, 38, 0.3) !important;
    border: 1px solid rgba(252, 165, 165, 0.4) !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    margin-top: 6px !important;
}

/* 7. Action Buttons */
#dnn_ctr_Register_RegistrationForm .dnnActions {
    margin-top: 32px;
    padding: 0 !important;
    background: transparent !important;
    list-style: none;
    display: flex;
    gap: 12px;
}

    #dnn_ctr_Register_RegistrationForm .dnnActions li {
        flex: 1;
    }

#dnn_ctr_Register_RegistrationForm a.dnnPrimaryAction {
    background-color: #ffffff !important;
    color: #0047b3 !important;
    border: none !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-align: center !important;
    display: block !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s, transform 0.1s;
}

    #dnn_ctr_Register_RegistrationForm a.dnnPrimaryAction:hover {
        background-color: #f1f5f9 !important;
        transform: translateY(-1px);
    }

#dnn_ctr_Register_RegistrationForm a.dnnSecondaryAction {
    color: #ffffff !important;
    display: inline-block;
    padding: 12px;
    text-align: center;
    border-radius: 8px !important;
    text-decoration: none;
}

/* ==========================================================
   DNN 10 Blue/Dark Theme Login Form Styling
   ========================================================== */

/* 1. Main Login Container Card */
div.dnnForm.dnnLogin {
    max-width: 480px;
    margin: 40px auto;
    background: #0e172e !important;
    padding: 40px 32px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 71, 179, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: inherit;
    color: #ffffff;
}

    /* 2. Form Rows & Layout */
    div.dnnForm.dnnLogin .dnnFormItem {
        margin-bottom: 24px;
        display: flex;
        flex-direction: column;
        float: none !important;
        width: 100% !important;
        position: relative;
    }

        /* 3. Labels with Smooth Transition on Focus */
        div.dnnForm.dnnLogin .dnnFormItem .dnnLabel,
        div.dnnForm.dnnLogin .dnnFormItem label:not(.dnnBoxLabel) {
            float: none !important;
            width: 100% !important;
            text-align: left !important;
            display: block !important;
            font-size: 13px !important;
            font-weight: 600 !important;
            color: rgba(255, 255, 255, 0.8) !important;
            margin-bottom: 6px !important;
            transition: color 0.25s ease-in-out, transform 0.25s ease-in-out;
        }

        /* Label transition when focusing inside input item */
        div.dnnForm.dnnLogin .dnnFormItem:focus-within label:not(.dnnBoxLabel),
        div.dnnForm.dnnLogin .dnnFormItem:focus-within .dnnLabel label {
            color: #ffffff !important;
            transform: translateY(-2px);
        }

    /* 4. Bottom-Border Only Inputs */
    div.dnnForm.dnnLogin input[type="text"],
    div.dnnForm.dnnLogin input[type="password"],
    div.dnnForm.dnnLogin textarea {
        width: 100% !important;
        border: none !important;
        border-bottom: 2px solid rgba(255, 255, 255, 0.4) !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 10px 0 !important;
        font-size: 16px !important;
        color: #ffffff !important;
        box-shadow: none !important;
        transition: border-color 0.2s ease-in-out;
    }

        /* Input Focus State */
        div.dnnForm.dnnLogin input[type="text"]:focus,
        div.dnnForm.dnnLogin input[type="password"]:focus {
            outline: none !important;
            border-bottom-color: #ffffff !important;
            background: transparent !important;
            box-shadow: none !important;
        }

    /* 5. Remember Me Checkbox Alignment */
    div.dnnForm.dnnLogin .dnnLoginRememberMe {
        display: flex;
        align-items: center;
        gap: 10px;
        color: rgba(255, 255, 255, 0.9);
        font-size: 14px;
    }

    div.dnnForm.dnnLogin .dnnBoxLabel {
        color: #ffffff !important;
        font-weight: normal !important;
        margin-bottom: 0 !important;
    }

    /* 6. Action Buttons & Links Layout */
    div.dnnForm.dnnLogin .dnnActions {
        margin-top: 32px;
        padding: 0 !important;
        background: transparent !important;
        list-style: none;
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
    }

    div.dnnForm.dnnLogin a#dnn_ctr_Login_Login_DNN_cmdLogin {
        background-color: #ffffff !important;
        color: #0047b3 !important;
        border: none !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        text-align: center !important;
        display: block !important;
        width: 100%;
        text-decoration: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: background-color 0.2s, transform 0.1s;
    }

        div.dnnForm.dnnLogin a#dnn_ctr_Login_Login_DNN_cmdLogin:hover {
            background-color: #f1f5f9 !important;
            transform: translateY(-1px);
        }

    /* Secondary Links (Register, Password Reset, Cancel) */
    div.dnnForm.dnnLogin .dnnLoginActions ul {
        display: flex;
        justify-content: space-between;
        width: 100%;
        padding: 0;
        margin-top: 15px;
        list-style: none;
    }

    div.dnnForm.dnnLogin a.dnnSecondaryAction {
        color: rgba(255, 255, 255, 0.8) !important;
        text-decoration: underline;
        font-size: 13px;
        padding: 4px 0;
    }

        div.dnnForm.dnnLogin a.dnnSecondaryAction:hover {
            color: #ffffff !important;
        }

#dnn_ctr_Login_Login_DNN_cancelLink {
    display: none;
}

div.dnnForm.dnnLogin a.dnnSecondaryAction {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none;
    font-size: 13px;
    padding: 10px;
    background: var(--dnn-color-success-light, #f5f5f5);
    border-radius: 5px;
}

#dnn_ctr_Login_Login_DNN_passwordLink {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none;
    font-size: 13px;
    padding: 10px;
    background: var(--dnn-color-neutral-contrast, #f5f5f5);
    border-radius: 5px;
}

div.dnnForm.dnnLogin .dnnPrimaryAction {
    padding: 10px 40px;
    border-radius: 5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    text-align: center !important;
    width: 100%;
    display: block !important;
}
/* ==========================================================
   DNN 10 Blue/Dark Theme Reset Password Form Styling
   ========================================================== */

/* 1. Main Password Reset Container Card */
div.dnnForm.dnnSendPassword {
    max-width: 480px;
    margin: 40px auto;
    background: #0e172e !important;
    padding: 40px 32px;
    border-radius: 16px;
    box-shadow: 0 15px 35px rgba(0, 71, 179, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-family: inherit;
    color: #ffffff;
}

    /* 2. Form Information Note */
    div.dnnForm.dnnSendPassword .dnnFormInfo {
        background-color: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #f1f5f9;
        padding: 14px;
        border-radius: 8px;
        font-size: 13px;
        margin-bottom: 24px;
        line-height: 1.5;
    }

    /* 3. Field Row Layout & Hiding Clutter */
    div.dnnForm.dnnSendPassword .dnnFormItem {
        margin-bottom: 24px;
        display: flex;
        flex-direction: column;
        float: none !important;
        width: 100% !important;
        position: relative;
    }

    /* Hide default DNN help icons/tooltips */
    div.dnnForm.dnnSendPassword .dnnTooltip,
    div.dnnForm.dnnSendPassword .dnnFormHelp {
        display: none !important;
    }

    /* 4. Labels with Smooth Transition on Focus */
    div.dnnForm.dnnSendPassword .dnnFormItem .dnnLabel,
    div.dnnForm.dnnSendPassword .dnnFormItem label {
        float: none !important;
        width: 100% !important;
        text-align: left !important;
        display: block !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        color: rgba(255, 255, 255, 0.8) !important;
        margin-bottom: 6px !important;
        transition: color 0.25s ease-in-out, transform 0.25s ease-in-out;
    }

    /* Label transition when focusing inside input item */
    div.dnnForm.dnnSendPassword .dnnFormItem:focus-within label,
    div.dnnForm.dnnSendPassword .dnnFormItem:focus-within .dnnLabel label {
        color: #ffffff !important;
        transform: translateY(-2px);
    }

    /* 5. Bottom-Border Only Input */
    div.dnnForm.dnnSendPassword input[type="text"] {
        width: 100% !important;
        border: none !important;
        border-bottom: 2px solid rgba(255, 255, 255, 0.4) !important;
        border-radius: 0 !important;
        background: transparent !important;
        padding: 10px 0 !important;
        font-size: 16px !important;
        color: #ffffff !important;
        box-shadow: none !important;
        transition: border-color 0.2s ease-in-out;
    }

        /* Input Focus State */
        div.dnnForm.dnnSendPassword input[type="text"]:focus {
            outline: none !important;
            border-bottom-color: #ffffff !important;
            background: transparent !important;
            box-shadow: none !important;
        }

    /* 6. Action Buttons Layout */
    div.dnnForm.dnnSendPassword .dnnActions {
        margin-top: 32px;
        padding: 0 !important;
        background: transparent !important;
        list-style: none;
        display: flex;
        gap: 12px;
    }

        div.dnnForm.dnnSendPassword .dnnActions li {
            flex: 1;
        }

    div.dnnForm.dnnSendPassword a.dnnPrimaryAction {
        background-color: #ffffff !important;
        color: #0047b3 !important;
        border: none !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        text-align: center !important;
        display: block !important;
        text-decoration: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: background-color 0.2s, transform 0.1s;
    }

        div.dnnForm.dnnSendPassword a.dnnPrimaryAction:hover {
            background-color: #f1f5f9 !important;
            transform: translateY(-1px);
        }

    div.dnnForm.dnnSendPassword a.dnnSecondaryAction {
        color: rgba(255, 255, 255, 0.8) !important;
        text-decoration: underline;
        display: block;
        padding: 12px;
        text-align: center;
        font-size: 14px;
    }

        div.dnnForm.dnnSendPassword a.dnnSecondaryAction:hover {
            color: #ffffff !important;
        }

#dnnEditUser {
    background: white;
    padding: 10px;
    border-radius: 10px;
}
/* --- Modern DNN Registration Form Overhaul --- */


/* =====================================
   Profile
===================================== */

/* Bottom-Border Only Inputs for Dark Background */
.dnnProfileDetails input[type="text"],
.dnnProfileDetails input[type="password"],
.dnnProfileDetails .password-strength,
.dnnProfileDetails .dnnFormItem textarea {
    width: 100% !important;
    border: none !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.4) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 16px !important;
    color: #0e172e !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease-in-out;
}

    /* Input Focus State (Bottom border turns solid bright white) */
    .dnnProfileDetails input[type="text"]:focus,
    .dnnProfileDetails input[type="password"]:focus,
    .dnnProfileDetails .password-strength:focus,
    .dnnProfileDetails .dnnFormItem textarea:focus {
        outline: none !important;
        border-bottom-color: #0e172e !important;
        background: transparent !important;
        box-shadow: none !important;
    }



/* Accordion - Closed state */
a.dnnLabelExpanded {
    display: block;
    position: relative;
    padding: 15px 45px 15px 20px;
    margin-bottom: 8px;
    background-color: var(--dnn-color-tertiary-light, #3c7a9a);
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.3s ease;
}

    /* Accordion - Open state */
    a.dnnLabelExpanded.dnnSectionExpanded {
        background-color: var(--dnn-color-tertiary, #0e2936);
        color: #ffffff !important;
        border-color: var(--dnn-color-tertiary, #0e2936);
    }

    /* Hover */
    a.dnnLabelExpanded:hover {
        filter: brightness(1.1);
        color: #ffffff !important;
    }

    /* Arrow - Closed */
    a.dnnLabelExpanded::after {
        content: "\25BC";
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    /* Arrow - Open */
    a.dnnLabelExpanded.dnnSectionExpanded::after {
        transform: translateY(-50%) rotate(180deg);
    }


/* --- --------------------------- --- */

/* =====================================
   PROFESSIONAL SLIDE + SOFT BOUNCE
===================================== */

@keyframes slideFromLeft {
    0% {
        opacity: 0;
        transform: translateX(-120px);
    }

    75% {
        opacity: 1;
        transform: translateX(8px);
    }

    88% {
        transform: translateX(-4px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideFromRight {
    0% {
        opacity: 0;
        transform: translateX(120px);
    }

    75% {
        opacity: 1;
        transform: translateX(-8px);
    }

    88% {
        transform: translateX(4px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideFromTop {
    0% {
        opacity: 0;
        transform: translateY(-120px);
    }

    75% {
        opacity: 1;
        transform: translateY(8px);
    }

    88% {
        transform: translateY(-4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideFromBottom {
    0% {
        opacity: 0;
        transform: translateY(120px);
    }

    75% {
        opacity: 1;
        transform: translateY(-8px);
    }

    88% {
        transform: translateY(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll-triggered animation */
@supports (animation-timeline: view()) {

    .slide-left,
    .slide-right,
    .slide-top,
    .slide-bottom {
        animation-timeline: view();
        animation-range: entry 0% entry 100%;
        animation-fill-mode: both;
        animation-timing-function: linear;
    }

    .slide-left {
        animation-name: slideFromLeft;
    }

    .slide-right {
        animation-name: slideFromRight;
    }

    .slide-top {
        animation-name: slideFromTop;
    }

    .slide-bottom {
        animation-name: slideFromBottom;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .slide-left,
    .slide-right,
    .slide-top,
    .slide-bottom {
        animation: none !important;
    }
}

/* =====================================
   TABLET & MOBILE - ALL FROM BOTTOM
===================================== */

@media screen and (max-width: 1024px) {

    .slide-left,
    .slide-right,
    .slide-top,
    .slide-bottom {
        animation-name: slideFromBottom !important;
    }
}
/* PROFESSIONAL SLIDE + SOFT BOUNCE END */




/* =====================================
   Profile
===================================== */

/* Bottom-Border Only Inputs for Dark Background */
.dnnProfileDetails input[type="text"],
.dnnProfileDetails input[type="password"],
.dnnProfileDetails .password-strength,
.dnnProfileDetails .dnnFormItem textarea,
.dnnProfileDetails .dnnFormItem select {
    width: 100% !important;
    border: none !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.4) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 16px !important;
    color: #0e172e !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease-in-out;
}

    /* Input Focus State (Bottom border turns solid bright white) */
    .dnnProfileDetails input[type="text"]:focus,
    .dnnProfileDetails input[type="password"]:focus,
    .dnnProfileDetails .password-strength:focus,
    .dnnProfileDetails .dnnFormItem textarea:focus,
    .dnnProfileDetails .dnnFormItem select:focus {
        outline: none !important;
        border-bottom-color: #0e172e !important;
        background: transparent !important;
        box-shadow: none !important;
    }

.dnnUserDetails input[type="text"],
.dnnUserDetails input[type="password"],
.dnnUserDetails .password-strength,
.dnnUserDetails .dnnFormItem textarea {
    width: 100% !important;
    border: none !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.4) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 16px !important;
    color: #0e172e !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease-in-out;
}

    .dnnUserDetails input[type="text"]:focus,
    .dnnUserDetails input[type="password"]:focus,
    .dnnUserDetails .password-strength:focus,
    .dnnUserDetails .dnnFormItem textarea:focus {
        outline: none !important;
        border-bottom-color: #0e172e !important;
        background: transparent !important;
        box-shadow: none !important;
    }

.dnnSubscriptions input[type="text"],
.dnnSubscriptions input[type="password"],
.dnnSubscriptions .password-strength,
.dnnSubscriptions .dnnFormItem textarea,
.dnnSubscriptions .dnnFormItem select {
    width: 100% !important;
    border: none !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.4) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 16px !important;
    color: #0e172e !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease-in-out;
}

    .dnnSubscriptions input[type="text"]:focus,
    .dnnSubscriptions input[type="password"]:focus,
    .dnnSubscriptions .password-strength:focus,
    .dnnSubscriptions .dnnFormItem textarea:focus,
    .dnnSubscriptions .dnnFormItem select:focus {
        outline: none !important;
        border-bottom-color: #0e172e !important;
        background: transparent !important;
        box-shadow: none !important;
    }

.dnnServices input[type="text"],
.dnnServices input[type="password"],
.dnnServices .password-strength,
.dnnServices .dnnFormItem textarea,
.dnnServices .dnnFormItem select {
    width: 100% !important;
    border: none !important;
    border-bottom: 2px solid rgba(0, 0, 0, 0.4) !important;
    border-radius: 0 !important;
    background: transparent !important;
    font-size: 16px !important;
    color: #0e172e !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease-in-out;
}

    .dnnServices input[type="text"]:focus,
    .dnnServices input[type="password"]:focus,
    .dnnServices .password-strength:focus,
    .dnnServices .dnnFormItem textarea:focus,
    .dnnServices .dnnFormItem select:focus {
        outline: none !important;
        border-bottom-color: #0e172e !important;
        background: transparent !important;
        box-shadow: none !important;
    }

/* Closed state */
h2.dnnFormSectionHead a {
    display: block;
    position: relative;
    padding: 15px 45px 15px 20px;
    background-color: var(--dnn-color-tertiary-light, #3c7a9a);
    color: #ffffff !important;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none !important;
    border-radius: 6px;
    transition: all 0.3s ease;
}

    /* Open state */
    h2.dnnFormSectionHead a.dnnSectionExpanded {
        background-color: var(--dnn-color-tertiary, #0e2936);
        color: #ffffff !important;
    }

    /* Hover */
    h2.dnnFormSectionHead a:hover {
        filter: brightness(1.1);
        color: #ffffff !important;
    }

    /* Closed arrow */
    h2.dnnFormSectionHead a::after {
        content: "\25BC";
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        font-size: 12px;
        transition: transform 0.3s ease;
    }

    /* Open arrow */
    h2.dnnFormSectionHead a.dnnSectionExpanded::after {
        transform: translateY(-50%) rotate(180deg);
    }


/* Main tab container */
.dnnEditUser.ui-tabs {
    background: #ffffff;
    border: none;
    padding: 0;
    border-radius: 8px;
    box-shadow: 0 3px 12px rgba(14, 41, 54, 0.08);
}

/* Tab navigation */
.dnnEditUser .dnnAdminTabNav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    background: #f1f5f8;
    border: none;
    border-radius: 8px 8px 0 0;
    padding: 10px 10px 0;
    margin: 0;
}

    /* Individual tabs */
    .dnnEditUser .dnnAdminTabNav li {
        list-style: none;
        margin: 0;
        padding: 0;
        border: none;
        background: transparent;
        border-radius: 6px 6px 0 0;
    }

        /* Tab links */
        .dnnEditUser .dnnAdminTabNav li a {
            display: block;
            padding: 13px 24px;
            background: var(--dnn-color-tertiary-light, #3c7a9a);
            color: #ffffff !important;
            font-size: 15px;
            font-weight: 600;
            text-decoration: none !important;
            border-radius: 6px 6px 0 0;
            transition: all 0.25s ease;
        }

            /* Hover effect */
            .dnnEditUser .dnnAdminTabNav li a:hover {
                background: var(--dnn-color-tertiary, #0e2936);
                color: #ffffff !important;
            }

        /* Active tab */
        .dnnEditUser .dnnAdminTabNav li.ui-tabs-active a,
        .dnnEditUser .dnnAdminTabNav li.ui-state-active a {
            background: var(--dnn-color-tertiary, #0e2936);
            color: #ffffff !important;
        }

/* Tab content area */
.dnnEditUser .ui-tabs-panel {
    background: #f2f5f8;
    border-top: 1px solid;
    border-radius: 0 0 8px 8px;
    padding: 10px;
}

/* Remove unwanted jQuery UI effects */
.dnnEditUser .dnnAdminTabNav li.ui-state-default,
.dnnEditUser .dnnAdminTabNav li.ui-state-active {
    border: none;
    background: transparent;
}

/* --- --------------------------- --- */


.dnnButtonDropdown {
    border-radius: 5px;
}

.dnnButtonDropdown-clicked {
    border-radius: 5px 5px 0 0;
}

.dnnButtonDropdown-ul {
    border-radius: 0 5px 5px 5px;
}

.dnnProfile .dnnFileUploadScope input[type="button"] {
    border-radius: 5px;
    background-color: var(--dnn-color-tertiary-light,#3c7a9a);
    color: #ffffff;
}

    .dnnProfile .dnnFileUploadScope input[type="button"]:hover {
        background-color: var(--dnn-color-tertiary,#0e2936);
    }


.dnnEditUser a.dnnPrimaryAction {
    background-color: var(--dnn-color-tertiary,#0e2936) !important;
    color: #FFFFFF !important;
    border: none !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-align: center !important;
    display: block !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s, transform 0.1s;
}

    .dnnEditUser a.dnnPrimaryAction:hover {
        background-color: #000000 !important;
        transform: translateY(-1px);
        color: #FFFFFF !important;
    }

.dnnEditUser a.dnnSecondaryAction {
    background-color: var(--dnn-color-secondary,#f5f5f5) !important;
    color: var(--dnn-color-secondary-contrast,#333) !important;
    border: none !important;
    padding: 12px 20px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    text-align: center !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s, transform 0.1s;
}

    .dnnEditUser a.dnnSecondaryAction:hover {
        background-color: #000000 !important;
        transform: translateY(-1px);
        color: var(--dnn-color-secondary-contrast,#333) !important;
    }

.dnnEditUser p {
    color: var(--dnn-color-foreground, #000);
}


.DnnModule-Journal {
    border: 5px solid #ffffff;
    border-radius: 20px;
    padding: 15px;
    background: #0e172e;
}

    .DnnModule-Journal h5 {
        color: var(--dnn-color-neutral-dark, #000000);
    }

.journalTools {
    margin: 10px 0;
}

    .journalTools #btnShare:hover {
        color: #ffffff !important;
    }

.journalrow div.author img {
    border-radius: 50px;
}

.DnnModule-Journal a {
    color: var(--dnn-color-neutral-dark, #000000);
}

    .DnnModule-Journal a:hover {
        color: var(--dnn-color-background,#000000);
    }

.DnnModule-ViewProfile, .DnnModule-Console, .DnnModule-Messaging-Notifications {
    border: 5px solid #ffffff;
    border-radius: 20px;
    padding: 15px;
    background: #ffffff;
    margin: 10px 0;
}

    .DnnModule-ViewProfile p, .DnnModule-ViewProfile span, .DnnModule-ViewProfile li, .DnnModule-ViewProfile h3 {
        color: var(--dnn-color-tertiary-light, #000000);
    }

    .DnnModule-ViewProfile a.dnnSecondaryAction {
        background-color: var(--dnn-color-secondary,#f5f5f5) !important;
        color: var(--dnn-color-secondary-contrast,#333) !important;
        border: none !important;
        padding: 12px 20px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        border-radius: 8px !important;
        text-align: center !important;
        text-decoration: none !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        transition: background-color 0.2s, transform 0.1s;
    }

        .DnnModule-ViewProfile a.dnnSecondaryAction:hover {
            background-color: #000000 !important;
            transform: translateY(-1px);
            color: var(--dnn-color-secondary-contrast,#333) !important;
        }

    .DnnModule-ViewProfile .UserProfileControls ul {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: nowrap;
        list-style: none;
        padding: 0;
        margin: 10px 0;
    }

        .DnnModule-ViewProfile .UserProfileControls ul li {
            display: inline-block;
            margin: 0;
            padding: 0;
        }

/* --- --------------------------- --- */