:root {
            --color-primary-dark: #09194F; /* Navy Blue */
            --color-primary-green: #A7C957; /* Lime Green */
            --color-accent-teal: #007B83; /* Teal for numbers */
            --color-bg-light: #f4f6f9; /* Light gray background */
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: white;
            color: #333;
        }



 /* -------------------------
           Dashboard
        -------------------------- */
        .dashboard-page {
            background: #F8FAFC;
            min-height: 100vh;
        }

        .dashboard-layout {
            display: flex;
            min-height: 100vh;
        }

        .dashboard-sidebar {
            width: 260px;
            min-width: 260px;
            border-right: 0.667px solid #E2E8F0;
            /* background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB); */
            display: flex;
            flex-direction: column;
            transition: width 0.25s, min-width 0.25s;
            position: fixed;
            height: 100%;
        }

        .dashboard-sidebar.collapsed {
            width: 72px;
            min-width: 72px;
        }

        .dashboard-sidebar.collapsed .sidebar-logo-text,
        .dashboard-sidebar.collapsed .sidebar-btn-text,
        .dashboard-sidebar.collapsed .sidebar-section-title,
        .dashboard-sidebar.collapsed .sidebar-empty,
        .dashboard-sidebar.collapsed .sidebar-richiedi-btn,
        .dashboard-sidebar.collapsed .sidebar-nav-text {
            display: none !important;
            transition: all 0.3s ease-in-out;
        }

        .sidebar-nav-text{
            transition: all 0.3s ease-in-out;
            animation:  slideIn 1.6s forwards;

        }
        @keyframes slideIn {
            0% {
                opacity: 0;
                transform: translateX(-10px);
            }
            100% {
                opacity: 1;
                transform: translateX(0);
            }
        }

        .dashboard-sidebar.collapsed .sidebar-company{
            visibility: hidden !important;
            padding: 0 !important;
             margin: 0 !important;
        }
        .dashboard-sidebar.collapsed .sidebar-divider-custom{
            width: 73px;
            min-width: 73px;
        }
        .dashboard-sidebar.collapsed .sidebar-header {
            align-items: center;
        }

        .dashboard-sidebar.collapsed .sidebar-logo {
            justify-content: center;
        }

        .dashboard-sidebar.collapsed .sidebar-cta .btn {
            padding: 7px 16px;
        }

        .dashboard-sidebar.collapsed .sidebar-nav-item {
            justify-content: center;
        }
        span.dashboard-empty-note {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 7px;
            color: #62748E;
            text-align: center;
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
        }
        .sidebar-header {
            padding: 24px 16px 16px;
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .sidebar-toggle {
            /* width: 32px;
            height: 32px; */
            display: flex;
            align-items: center;
            justify-content: center;
            color: #64748b;
            cursor: pointer;
            border-radius: 6px;
            margin-bottom: 12px;
        }

        .sidebar-toggle:hover {
            background: #f1f5f9;
        }

        .sidebar-logo {
            display: flex;
            align-items: center;
            gap: 12px;
            text-decoration: none;
            color: #09194F;
        }
        .dashboard-sidebar.collapsed .sidebar-brand{
            flex-direction: column-reverse;
        }
         .sidebar-brand {
            display: flex;
            align-content: center;
            align-items: center;
            justify-content: space-between;
        }
        .sidebar-logo-icon {
            width: 40px;
            height: 40px;
            margin-right: 12px;
            display: inline-block;
            margin-left: -9px;
        }
       .dashboard-sidebar.collapsed .sidebar-logo-icon {
            margin-right: 20px;
        }
        .sidebar-logo-text {
            font-family: Lato;
            font-size: 14px;
            font-weight: 700;
            line-height: 20px;
            white-space: nowrap;
        }

        .sidebar-company {
            display: flex;
            color: #09194F;
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: 20px;
            margin-top: 24px;
            padding-bottom: 6px;
            align-items: center;
            gap: 8px;
        }
        .sidebar-divider-custom{
            left: 0;
            border: none;
            color: #E2E8F0;
            border-top: 0.667px solid #E2E8F0;
            opacity: 1;
            width: 100%;
            min-width: 247px;
            max-width: 100%;
            position: absolute;
        }


        .sidebar-cta {
            padding: 24px 0;
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .dashboard-btn-primary {
            background: var(--color-primary-green) !important;
            color: #010103 !important;
            border: none;
            font-weight: 700;
            font-family: Lato;
            font-size: 14px;
            padding: 7px 16px;
            border-radius: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .sidebar-btn-icon {
            flex-shrink: 0;
        }

        .dashboard-btn-primary:hover {
            background: #8fb845 !important;
            color: #09194F !important;
        }

        .sidebar-section {
            flex: 1;
            /* padding: 0 16px; */
            overflow-y: scroll;
        }

        .sidebar-section-title {
            font-family: Lato;
            font-size: 12px;
            font-weight: 700;
            color: #09194F;
            letter-spacing: 0.5px;
            margin-bottom: 8px;
        }

        .sidebar-empty {
            color: #90A1B9;
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
            padding: 15px 0px;
        }

        .sidebar-footer {
            padding: 16px;
            /* border-top: 1px solid #E2E8F0; */
            display: flex;
            flex-direction: column;
            gap: 4px;
            justify-content: flex-end;
            transition: all 0.3s ease-in-out;
            position: relative;
        }
        .dashboard-sidebar.collapsed .sidebar-footer::before{
            width: 89px;
        }
        .warning-banner-placeholder{
            margin-bottom: 24px;
        }
        .sidebar-footer::before{
            content: "";
            position: absolute;
            top: 0;
            left: -16px;
            width: 260px;
            height: 1px;
            background-color: #E2E8F0;

        }

        .sidebar-nav-item {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 8px 12px;
            color: #314158;
            text-decoration: none;
            font-family: Lato;
            font-size: 14px;
            border-radius: 6px;
            transition: all 0.3s;
            white-space: nowrap;
        }

        .sidebar-nav-item:hover {
            background: none;
        }

        .sidebar-nav-item i {
            font-size: 18px;
            flex-shrink: 0;
        }
        .sidebar-logo-icon svg {
            filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.10)) drop-shadow(0 10px 15px rgba(0, 0, 0, 0.10));
        }

        .dashboard-main {
            flex: 1;
            padding: 32px 40px 48px;
            overflow-y: auto;
            margin-left: 260px; /* match sidebar width */
        }

        /* When the fixed sidebar has the `collapsed` class, adjust
           the main area's left margin. Use a sibling selector because
           `.dashboard-main` is a sibling, not a child, of the sidebar. */
        .dashboard-sidebar.collapsed ~ .dashboard-main,
        .dashboard-sidebar.collapsed + .dashboard-main {
            margin-left: 72px !important; /* match collapsed sidebar width */
        }
        .dashboard-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            margin-bottom: 24px;
        }

        .dashboard-title {
            font-family: Lato;
            font-size: 30px;
            font-weight: 700;
            color: #09194F;
            line-height: 32px;
            margin-bottom: 4px;
        }

        .dashboard-subtitle {
            color: var(--Color-Grey-Slightly-light-grey, #505050);
            font-family: Lato;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px; /* 150% */
            margin: 0;
        }

        .dashboard-credits-badge {
            border-radius: 10px;
            /* border: 0.667px solid var(--Rectangle-40, #4C6D00);
            background: rgba(211, 237, 144, 0.10); */
            display: flex;
            height: 37.333px;
            padding: 0 16px;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
            color: var(--Untitled-Rectangle-source, #09194F);
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
        }

        .green-credits {
            border: 0.667px solid var(--Rectangle-40, #4C6D00);
            background: rgba(211, 237, 144, 0.10);
        }
        .orange-credits {
            border: 0.667px solid var(--Color-Supportive-Yellow-100, #FFB319);
            background: rgba(255, 217, 141, 0.20);
        }
        .red-credits {
            border: 0.667px solid #C64D45;
            background: #F7EBEC;
        }
        .dashboard-card {
            border-radius: 10px;
            border: 0.667px solid #E2E8F0;
            background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
            margin-bottom: 24px;
        }

        .dashboard-card-header {
            padding: 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
        }

        .dashboard-card-header.collapsed .dashboard-card-chevron {
            transform: rotate(0deg);
        }

        .dashboard-card-header:not(.collapsed) .dashboard-card-chevron {
            transform: rotate(180deg);
        }

        .dashboard-card-title {
            font-family: Lato;
            font-size: 18px;
            font-weight: 700;
            color: #09194F;
            margin: 0;
        }

        .dashboard-card-chevron {
            font-size: 18px;
            color: #09194F;
            transition: transform 0.2s;
        }

        .dashboard-card-body {
            padding: 0 24px 24px;
        }

        .dashboard-how-item {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

        .dashboard-how-icon {
            width: 40px;
            height: 40px;
            border-radius: 10px;
            background: rgba(0, 129, 138, 0.20);
            color: #00818A;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            flex-shrink: 0;
        }

        .dashboard-how-title {
            color: #45556C;
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
            margin: 0 0 4px;
        }

        .dashboard-how-text {
            font-family: Lato;
            font-size: 13px;
            color: #64748b;
            line-height: 18px;
            margin: 0;
        }

        .dashboard-how-credit {
            color: #45556C;
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: 20px; /* 142.857% */
            border-top: 0.667px solid #E2E8F0;
            padding-top: 12px;
            max-width: 829.333px;
        }

        .dashboard-how-note {
            color: #45556C;
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
            margin: 4px 0 0 !important;
        }

        .dashboard-empty {
            border-radius: 10px;
            border: 0.5px solid #E2E8F0;
            background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
            padding: 50px;
            text-align: center;
        }

        .dashboard-empty-icon {
            border-radius: 22369600px;
            background: #F1F5F9;
            display: flex;
            width: 64px;
            height: 64px;
            justify-content: center;
            align-items: center;
            margin: auto;
        }

        .dashboard-empty-title {
            color: #0F172B;
            text-align: center;
            font-family: Lato;
            font-size: 24px;
            font-style: normal;
            font-weight: 700;
            line-height: 32px; /* 133.333% */
            margin-bottom: 8px;
        }

        .dashboard-empty-text {
            color: #45556C;
            text-align: center;
            font-family: Lato;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px; /* 150% */
            margin-bottom: 16px;
            margin-left: auto;
            margin-right: auto;
        }

        .dashboard-btn-secondary {
            border-radius: 8px;
            border: 1px solid var(--Untitled-Rectangle-source, #09194F);
            color: var(--Untitled-Rectangle-source, #09194F);
            text-align: center;
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 700;
            line-height: 20px; /* 142.857% */
            padding: 7px 16px;
            justify-content: center;
            align-items: center;
            gap: 10px;
        }

        .dashboard-btn-secondary:hover {
            border: 1px solid var(--Untitled-Rectangle-source, #09194F);
            background: #F1F5F9;
        }
        /* Warning Banner */
        .dashboard-warning-banner {
            border-radius: 10px;
            border: 0.667px solid #FDB81E;
            background: rgba(253, 184, 30, 0.10);
            padding: 16px;
            margin-bottom: 24px;
            display: flex;
            gap: 12px;
        }

        .dashboard-warning-content {
            display: flex;
            gap: 12px;
            align-items: flex-start;
        }

        .dashboard-warning-icon {
            color: #FDB81E;
            font-size: 20px;
            flex-shrink: 0;
            margin-top: 2px;
        }

        .dashboard-warning-title {
            color: #09194F;
            font-family: Lato;
            font-size: 16px;
            font-weight: 700;
            line-height: 24px;
            margin: 0 0 4px 0;
        }

        .dashboard-warning-text {
            color: #45556C;
            font-family: Lato;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            margin: 0;
        }
        .warning-banner-placeholder {
            border-radius: 10px;
            border: 0.667px solid var(--Color-Supportive-Yellow-100, #FFB319);
            background: #F9F3E6;
            display: flex;
            padding: 24px;
            gap: 8px;
        }
        .main-content-warning h6 {
            color: #733E0A;
            font-family: Lato;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: 27px;
            margin: 0;
        }
        .main-content-warning p {
            color: #733E0A;
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
            margin: 0;
        }
        .main-content-warning {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }

        .empty-credits-card {
            display: flex;
            padding: 12px 24px;
            align-items: flex-start;
            gap: 8px;
            align-self: stretch;
            border-radius: 10px;
            border: 0.667px solid #C64D45;
            background: rgba(227, 101, 91, 0.10);
        }
        .main-content-warning-empty-credits {
            display: flex;
            flex-direction: column;
            gap: 4px;
        }
        .main-content-warning-empty-credits h6 {
            color: #82181A;
            font-family: Lato;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: 27px;
            margin: 0;
        }
        .main-content-warning-empty-credits p {
            color: #82181A;
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px;
            margin: 0;
        }
        /* Research Section */
        .dashboard-research-section {
            margin-top: 24px;
        }

        .dashboard-section-title {
            color: #09194F;
            font-family: Lato;
            font-size: 18px;
            font-weight: 700;
            line-height: 24px;
            margin-bottom: 16px;
        }

        .dashboard-research-list {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .dashboard-research-card {
            border-radius: 10px;
            border: 0.667px solid var(--Untitled-Rectangle-source, #09194F);
            background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
            padding: 25px;
            transition: box-shadow 0.2s, transform 0.2s;
            cursor: pointer;
        }

        .dashboard-research-card.no-hover{
            outline: none !important;
        }

        .dashboard-research-card:hover {
            outline: 2px solid var(--Untitled-New-UI-Color-1-source, #00818A);
            transition: .1s;
            background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
        }

        .research-card-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 16px;
            margin-bottom: 12px;
        }

        .research-card-title {
            color: #09194F;
            font-family: Lato;
            font-size: 20px;
            font-weight: 700;
            line-height: 24px;
            margin: 0 0 8px 0;
        }

        .research-card-meta {
            display: flex;
            gap: 16px;
            flex-wrap: wrap;
            align-items: center;
        }

        .research-meta-item {
            color: #45556C;
            font-family: Lato;
            font-size: 14px;
            font-weight: 400;
            line-height: 18px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .research-meta-item i {
            font-size: 16px;
            color: #45556C;
        }

        .research-meta-label {
    color: #45556C;
font-family: Lato;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 20px; /* 142.857% */
        }

        .research-status-badge {
            padding: 2px 8px;
            color: #505050;
            font-family: Lato;
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            white-space: nowrap;
            flex-shrink: 0;
            border-radius: 8px;
            /* flex: 0.2; */
            text-align: center;
            min-width: 144px;
        }
        .research-card-description-close {
            border-radius: 10px;
            border: 0.667px solid #E2E8F0;
            background: #F8FAFC;
            display: flex;
            padding: 16px;
            flex-direction: column;
            align-items: flex-start;
            flex-shrink: 0;
            align-self: stretch;
            margin: 0;
            color: #45556C;
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
        }

        .bg-warning-light {
            border: 0.667px solid #FFB319 !important;
            background: rgba(255, 217, 141, 0.30) !important;
        }

        .bg-success-light {
            border: 0.667px solid var(--New-UI-Color-1, #007B83) !important;
            background: rgba(30, 138, 147, 0.15) !important;
        }

        .bg-secondary-light{
            border: 0.667px solid #CAD5E2;
            background: rgba(196, 196, 196, 0.30);
        }
        .research-card-description {
            color: var(--Color-Grey-Slightly-light-grey, #505050);
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
            margin: 0;
            border-radius: 10px;
            background: #F1F5F9;
            display: flex;
            padding: 12px;
            flex-direction: column;
            align-items: flex-start;
            align-self: stretch;
        }

        /* Sidebar search items */
        .sidebar-search-item {
            padding: 8.667px 13.333px 8.667px 12.667px;
            border-radius: 10px;
            border: 1px solid var(--Untitled-Rectangle-source, #09194F);
            cursor: pointer;
            transition: opacity 0.2s;
        }

        .sidebar-search-item.no-hover {
            background: none !important;
            box-shadow: none !important;
            outline: none !important;
            pointer-events: none;
            opacity: 0.6;
        }
        .sidebar-search-item:hover{
            border: 1.5px solid var(--Untitled-New-UI-Color-1-source, #00818A);
            transition: .1s;
            background: #F1F5F9;

        }
        .active-search{
            border: 1.5px solid var(--Untitled-Rectangle-source, #09194F) !important;
        }
        .sidebar-searches-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .sidebar-search-title {
            color: #010103;
            font-family: Lato;
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            margin-bottom: 2px;
            white-space: nowrap;           /* Prevent text wrapping */
            overflow: hidden;               /* Hide overflow text */
            text-overflow: ellipsis;        /* Show ... if text is too long */
            display: block;                 /* Make sure it's a block element */
            max-width: 100%;
        }

        .sidebar-search-date {
            color: #62748E;
            font-family: Lato;
            font-size: 12px;
            font-style: normal;
            font-weight: 400;
            line-height: 16px; /* 133.333% */
            
        }

        /* New Research form styles */
        .dashboard-card form .card {
            background: #ffffff;
        }

        .dashboard-card .form-label {
            font-weight: 600;
            color: #2b3b50;
        }

        .dashboard-card .form-text {
            color: #90A1B9;
        }

        .dashboard-card .invalid-feedback {
            display: none;
            color: #D33030;
        }

        .is-invalid + .invalid-feedback,
        .form-control.is-invalid ~ .invalid-feedback,
        .form-select.is-invalid ~ .invalid-feedback {
            display: block;
        }

        select[multiple] {
            height: auto;
            min-height: 84px;
        }

        #vaiRiepilogo {
            min-width: 140px;
        }

        /* Center the main content and constrain width to match mockup */
      

        /* Form page title and subtitle */
        .dashboard-inner .dashboard-title {
            font-size: 32px;
            line-height: 40px;
            margin-bottom: 8px;
        }

        .dashboard-inner .dashboard-subtitle {
            font-size: 16px;
            line-height: 24px;
            color: #64748b;
            margin-bottom: 32px;
        }

        /* Card appearance adjustments */
        .dashboard-card {
            background: #ffffff;
            border-radius: 12px;
            border: 1px solid #E6EDF3;
            box-shadow: none;
        }

        .dashboard-card-body-2 {
            padding: 24px;
        }

        /* Form section title styling */
        .form-section-title {
            color: #0F172B;
            font-family: Lato;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: 28px; /* 155.556% */
            margin: 0 0 16px 0;
        }

        /* Form controls styling to match mockup */
        .dashboard-card .form-control,
        .dashboard-card .form-select,
        .dashboard-card textarea.form-control {
            border-radius: 8px;
            border: 0.5px solid var(--Untitled-Rectangle-source, #09194F);
            display: flex;
            min-height: 36px;
            padding: 4px 12px;
            align-items: center;
            flex-shrink: 0;
            align-self: stretch;
            color: var(--Color-Futurely-Dark-Hit-100, #010103);
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            box-shadow: none;
        }

        .dashboard-card .form-control:focus,
        .dashboard-card .form-select:focus,
        .dashboard-card textarea.form-control:focus {
            border-color: #9db0d4;
            box-shadow: none;
            outline: none;
        }

        /* Select chevron (appearance) */
        .dashboard-card .form-select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cg opacity='0.5'%3E%3Cpath d='M4 6L8 10L12 6' stroke='%2309194F' stroke-width='1.33333' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/g%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 12px center;
            background-size: 16px 16px;
            padding-right: 36px;
        }
        .candidate-name-row svg {
            display: flex;
            width: 24px;
            height: 24px;
            /* padding: 8px; */
            flex-direction: column;
            align-items: flex-start;
        }
        .create-form {
            padding-bottom: 12px;
        }
        .create-from-btn {
            border-top: 0.667px solid #E2E8F0;
        }
        /* Form label styling */
        .dashboard-card .form-label {
            color: #0A0A0A;
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 14px; /* 100% */
            margin-bottom: 9px;
        }

        /* Form group spacing */
        .dashboard-card .mb-3 {
            margin-bottom: 16px;
        }

        .dashboard-card .mb-3:last-of-type {
            margin-bottom: 0;
        }

        /* Outline secondary button style to match design */
        .btn-outline-secondary {
            border-radius: 8px;
            border: 1px solid #09194F;
            color: #09194F !important;
            background: transparent;
            font-size: 14px;
            font-weight: 600;
            padding: 10px 18px;
        }

        .btn-outline-secondary:hover {
            background: #F1F5F9;
        }
         .btn-outline-secondary:focus-visible{
            background-color: #F1F5F9 !important;
            box-shadow: none !important;
            outline: none !important;
            border-color: #0F172B !important;
         }
        .btn-outline-secondary:active{
            background-color: #F1F5F9 !important;
            box-shadow: none !important;
            outline: none !important;
            border-color: #0F172B !important;
         }

        /* Primary button for form submission */
        #vaiRiepilogo {
            font-size: 14px;
            font-weight: 700;
            padding: 10px 24px;
            border-radius: 8px;
            min-width: auto;
        }

        /* Select2 customization */
        .select2-container--bootstrap-5 .select2-selection {
            border-radius: 8px;
            border: 1px solid #BCC7DB;
            padding: 2px 4px;
            min-height: 40px;
        }

        .select2-container--bootstrap-5.select2-container--focus .select2-selection {
            border-radius: 8px !important;
            border: 0.5px solid var(--Untitled-Rectangle-source, #09194F) !important;
            box-shadow: none !important;
            outline: none !important;
        }

        .select2-container--bootstrap-5 .select2-selection__rendered {
            font-size: 15px;
            line-height: 22px;
            padding: 8px 10px;
        }

        .select2-container--bootstrap-5 .select2-selection__choice {
            background-color: #D2E8E9 !important;
            border-color: #D2E8E9 !important;
            border-radius: 4px !important;
            padding: 3px 8px !important;
            color: #314158 !important;
            font-family: Lato !important;
            font-size: 14px !important;
            font-style: normal !important;
            font-weight: 400 !important;
            line-height: 16px !important;
        }
        .select2-container--bootstrap-5 .select2-dropdown .select2-results__options:not(.select2-results__options--nested) {
                border-radius: 12px !important;
                background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB) !important;
                box-shadow: 0 8px 24px -6px rgba(0, 0, 0, 0.16), 0 0 1px 0 rgba(0, 0, 0, 0.40) !important;
            }
        button.select2-selection__choice__remove {
            display: none !important;
        }

        .select2-container--bootstrap-5 .select2-selection__choice__remove {
            color: #09194F;
            margin-right: 4px;
        }

        .select2-container--bootstrap-5 .select2-dropdown {
            border: 1px solid #BCC7DB;
            border-radius: 8px;
            margin-top: 4px;
        }

        .select2-container--bootstrap-5 .select2-results__option {
            padding: 8px 12px;
            font-size: 15px;
        }

        .select2-container--bootstrap-5 .select2-results__option--highlighted {
            background-color: #f0f4f9;
            color: #09194F;
        }

        .select2-container--bootstrap-5 .select2-results__option[aria-selected="true"] {
            background-color: #A7C957;
            color: #09194F;
        }
        span.required {
            color:  #DB4E4E;
        }
        .research-content{  
            display: flex;
            align-items: center;
            gap: 16px
        }
        .research-card-icon {
            border-radius: 10px;
            background: #F1F5F9;
            display: flex;
            width: 48px;
            height: 48px;
            justify-content: center;
            align-items: center;
        }
        .dashboard-sidebar.collapsed #sidebarToggle {
            display: none;
        }
        .dashboard-sidebar #sidebarToggleBottom {
            display: none;
        }
         .dashboard-sidebar.collapsed #sidebarToggleBottom {
            display: block !important;
            transition: all 0.3s ease-in-out;
        }
        .dashboard-sidebar.collapsed .sidebar-searches-list{
            display:none !important;
        }
        /* -------------------------
   Research Review Page Styles
   -------------------------- */

/* Review Page Layout */
.review-page {
    background: #F8FAFC;
    min-height: 100vh;
}

.review-layout {
    display: flex;
    min-height: 100vh;
}

.review-main {
    flex: 1;
    padding: 32px 40px 48px;
    overflow-y: auto;
    margin-left: 260px;
    background: #F8FAFC;
}

.dashboard-sidebar.collapsed ~ .review-main,
.dashboard-sidebar.collapsed + .review-main {
    margin-left: 72px !important;
}

/* Header Section */
.review-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.review-back-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #09194F;
    text-decoration: none;
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    border-bottom: 1px solid #09194F;
    padding-bottom: 2px;
    transition: opacity 0.2s;
}

.review-back-link:hover {
    opacity: 0.7;
    color: #09194F;
}

.review-back-link i {
    font-size: 12px;
}

.review-credits-badge {
    border-radius: 10px;
    border: 0.667px solid #4C6D00;
    background: rgba(211, 237, 144, 0.10);
    display: flex;
    height: 37.333px;
    padding: 0 16px;
    align-items: center;
    gap: 8px;
    color: #09194F;
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

/* Title Section */
.review-title-section {
    margin-bottom: 32px;
}

.review-title {
    color: #09194F;
    font-family: Lato;
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: 8px;
}

.review-subtitle {
    color: #505050;
    font-family: Lato;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}

/* Summary Section */
.review-summary-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-radius: 10px;
    background: #FFF;   
    width: 100%;
}

.review-section-title {
    color: #0F172B;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px; /* 155.556% */
}

.review-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    border-bottom: 0.667px solid #E2E8F0;
    padding-bottom: 16px;
}

.review-summary-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.review-summary-label {
    color: #0F172B;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 171.429% */
}

.review-summary-value {
    color: #09194F;
    font-family: Lato;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.review-summary-badges {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.review-badge {
    display: flex;
    padding: 4px 8px;
    align-items: center;
    gap: 10px;
    border-radius: 4px;
    background: #D2E8E9;    
    color: #314158;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 114.286% */
}

.review-summary-description {
    margin-top: 8px;
}

.review-summary-description-label {
    color: #45556C;
    font-family: Lato;
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    margin-bottom: 4px;
}

.review-summary-description-text {
    color: #09194F;
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}
.review-summary-label-2 {
    color: #62748E;
    font-family: Lato;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px;
}
.review-summary-value-2 {
    color: #0F172B;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}
/* Estimate Section */
.review-estimate-card {
    border-radius: 10px;
    border: 1px solid #D2E8E9;
    background: #D2E8E9;
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    justify-content: space-between;
}
.review-estimate-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.review-estimate-text-2 {
    color: var(--Untitled-New-UI-Color-1-40, #005A63);
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 27px;
    display: flex;
    gap: 4px;
    align-items: flex-start;
    margin: 0;
}
.spinner circle {
      animation: dot 1.6s linear infinite;
    }

    /* 8 dots, each offset by 1/8 of the total duration (0.2s) */
    .spinner circle:nth-child(1) { animation-delay: 0s; }
    .spinner circle:nth-child(2) { animation-delay: -1.4s; }
    .spinner circle:nth-child(3) { animation-delay: -1.2s; }
    .spinner circle:nth-child(4) { animation-delay: -1.0s; }
    .spinner circle:nth-child(5) { animation-delay: -0.8s; }
    .spinner circle:nth-child(6) { animation-delay: -0.6s; }
    .spinner circle:nth-child(7) { animation-delay: -0.4s; }
    .spinner circle:nth-child(8) { animation-delay: -0.2s; }

    /*
      Each dot is green for only 1/8 of the cycle (12.5%) and white the rest.
      0%        → white
      1%        → green  (snap on)
      12.5%     → green  (snap off)
      12.6%–100%→ white
    */
    @keyframes dot {
      0%      { fill: #ffffff; }
      0.1%    { fill: #007B83; }
      12.4%   { fill: #007B83; }
      12.5%   { fill: #ffffff; }
      100%    { fill: #ffffff; }
    }
.review-estimate-icon {
    color: #007B83;
    font-size: 20px;
    flex-shrink: 0;
}

.review-estimate-text {
    color: #09194F;
    font-family: Lato;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    margin: 0;
}

/* Credits Info Section */
.review-credits-info {
    border-radius: 10px;
    border: 0.667px solid #E2E8F0;
    background: #FFF;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.review-credits-label {
    display: flex;
    gap: 8px;
}

.review-credits-label strong {
    font-weight: 700;
}
.review-credits-text h6 {
    color: var(--Untitled-Rectangle-source, #09194F);
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 27px;
    margin: 0;
}

.review-credits-text p {
    color: #45556C;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}
.credit-end {
    display: flex;
    align-items: flex-end;
    gap: 5px;
}
.review-credits-count {
    color: var(--Untitled-Rectangle-source, #09194F);
    font-family: Lato;
    font-size: 32px;
    font-style: normal;
    font-weight: 700;
    line-height: 32px; /* 100% */
}

.review-credits-available {
    color: var(--Untitled-Rectangle-source, #09194F);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
}

/* Confirmation Section */
.review-confirmation-card {
    border-radius: 10px;
    border: 0.667px solid var(--Untitled-Rectangle-source, #09194F);
    padding: 24px;
    width: 100%;
}

.review-confirmation-title {
    color: #09194F;
    font-family: Lato;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    margin-bottom: 12px;
}

.review-confirmation-text {
    color: var(--Untitled-Rectangle-source, #09194F);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    margin-bottom: 10px;
}

.review-confirmation-text strong {
    font-weight: 700;
    color: #09194F;
}

.review-checkbox-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.review-checkbox-wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
    border: 1px solid #09194F;
    border-radius: 4px;
    margin-top: 2px;
    cursor: pointer;
    flex-shrink: 0;
}

.review-checkbox-wrapper input[type="checkbox"]:checked {
    background-color: #A7C957;
    border-color: #A7C957;
}

.review-checkbox-label {
    color: #09194F;
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    cursor: pointer;
}

/* Action Buttons */
.review-actions {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    width: 100%;
}

.review-btn-submit {
    background: var(--color-primary-green);
    color: #010103;
    border: none;
    font-weight: 700;
    font-family: Lato;
    font-size: 14px;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s;
}

.review-btn-submit:hover {
    background: #8fb845;
}

.review-btn-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.review-main-section {
    border-radius: 10px;
    border: 1px solid #E2E8F0;
    background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
    display: flex;
    padding: 24px;
    align-items: flex-start;
    gap: 24px;
    align-self: stretch;
    flex-direction: column;
}
.credit-form-note {
    color: #717182;
    font-family: Lato;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

/* Responsive Design */
@media (max-width: 992px) {
    .review-summary-grid {
        grid-template-columns: 1fr;
    }
    
    .review-main {
        margin-left: 0;
        padding: 24px 20px;
    }
    
    .dashboard-sidebar.collapsed ~ .review-main,
    .dashboard-sidebar.collapsed + .review-main {
        margin-left: 0 !important;
    }
}

@media (max-width: 768px) {
    .review-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .review-credits-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .review-actions {
        flex-direction: column;
        width: 100%;
    }
    
    .review-btn-submit {
        width: 100%;
    }
}

/* ======================== SHORTLIST PAGE STYLES ======================== */

.shortlist-main {
    padding: 40px;
}

.shortlist-filters {
    border-radius: 10px;
    background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
    display: flex;
    padding: 24px;
    gap: 12px;
    align-self: stretch;
    flex-direction: column;
    align-items: stretch;
}

.filters-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0px;
}

.filters-header i {
    font-size: 20px;
    color: #314158;
}

.filters-title {
    color: #0F172B;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: 30px; /* 150% */
    margin: 0;
}

.filters-grid {
    display: grid;
    /* Two equal columns for the top row (Regioni + RAL) */
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}

/* allow a filter group to span full width (used for Indirizzo di studio) */
.filter-group.w-100 {
    grid-column: 1 / -1;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-label {
    color: var(--Color-Futurely-Dark-Hit-100, #010103);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 100% */
}

.filter-group .form-select {
    padding: 10px 12px;
    border: 0.5px solid var(--Untitled-Rectangle-source, #09194F);
    border-radius: 8px;
    color: #010103;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 114.286% */
    background-color: white;
}


/* style native select placeholder (option with value="") */
.filter-group .form-select option[value=""] {
    color: #717182; /* lighter placeholder color */
}

/* make placeholder show as lighter when select is unselected;
   requires the select to have the `required` attribute so :invalid applies */
.filter-group .form-select:invalid {
    color: #717182;
}

/* Select2 placeholder styling (if using Select2 on these selects) */
.select2-container--bootstrap-5 .select2-selection__placeholder {
    color: #717182;
}
.filter-group .form-select:focus {
    border-color: #9db0d4;
    box-shadow: none !important;
    outline: none;
}

/* Placeholder color for native select option and when select has no value */
.filter-group .form-select option[value=""] {
    color: #9aa6b3;
}

/* Apply lighter color to the displayed value when the select is empty.
   We toggle `.select-empty` via JS for cross-browser reliability. */
.filter-group .form-select.select-empty {
    color: #9aa6b3;
}

/* Select2 placeholder color (if Select2 is applied) */
.select2-container--bootstrap-5 .select2-selection__placeholder,
.select2-container--bootstrap-5 .select2-selection__rendered.select2-selection__placeholder {
    color: #9aa6b3;
}

.filters-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-link {
    color: var(--Untitled-Rectangle-source, #09194F);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
}

.filter-link:hover {
    text-decoration: underline;
}

.shortlist-candidates {
    background: white;
    border: 0.667px solid #E6EDF3;
    border-radius: 12px;
    padding: 24px;
}

.candidates-header {
    margin-bottom: 24px;
}

.candidates-title {
    color: #0F172B;
    font-family: Lato;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px; /* 120% */
    margin: 0 0 4px 0;
}

.candidates-subtitle {
    color: #0F172B;
    font-family: Lato;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 90% */
    margin-bottom: 10px;
}

.candidates-date {
    color: #45556C;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    margin: 4px 0 0 0;
}

.candidates-date i {
    margin-right: 4px;
}

.table-responsive {
    margin-bottom: 24px;
    overflow-x: auto;
    border-radius:10px;
    border: 0.667px solid #E2E8F0;
    background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
}

.candidates-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.candidates-table thead {
    border-radius: 10px 10px 0 0;
    border-top: 0.667px solid #E2E8F0;
    border-right: 0.667px solid #E2E8F0;
    border-left: 0.667px solid #E2E8F0;
    background: #F1F8F9;
    
}
table.candidates-table a {
    color: #0F172B !important;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    text-decoration: none;
}

.candidates-table th {
    padding: 12px 16px;
    text-align: left;
    color: #62748E;
    font-family: Lato;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    text-transform: uppercase;
}

.candidates-table td {
    color: #45556C;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    padding: 16px 0px 16px 24px;
    align-items: center;
    gap: 24px;
    align-self: stretch;
}
.candidates-table td:last-child {
    padding-right: 24px;
}


.candidates-table tbody tr:hover {
    border-bottom: 0.67px solid #E2E8F0;
    background: #F1F8F9;
}

.candidate-star {
    color: #CAD5E2 !important;
    margin-right: 8px;
    display: flex;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    border-radius: 30px;
}
.candidate-name-row a {
    text-decoration: none;
}

.candidate-star-empty {
    color: #BCC7DB;
    margin-right: 8px;
    
}
.candidate-star:hover {
    background: rgba(255, 179, 25, 0.20);
    color: #FFB319 !important;
}

.status-badge {
   display: flex;
    /* height: 21px; */
    padding: 2px 8px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 8px;
    border: 0.667px solid rgba(0, 0, 0, 0.10);
    color: #45556C;
    font-family: Lato;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    width: 103px;
}

.status-interested {
    border: 0.667px solid rgba(0, 0, 0, 0.10);
    color: #45556C;
}
.status-pending{
    border: 0.667px solid var(--Color-Supportive-Yellow-100, #FFB319);
    background: #FFF4DD;
    color: #B3804A;
}

.status-approved {
    border: 0.667px solid var(--Rectangle-source, #A7C957);
    background: #E7F0DB;
    color: #4C6D00;
}
.candidates-table td i {
    color: #90A1B9;
    width: 16px !important;
    height: 16px !important;
    flex-shrink: 0;
}
.status-pending-2 {
    border: 0.667px solid #FFDF20;
    background: #FEFCE8;
    color: #A65F00;
}
.status-approved-2{
    border: 0.667px solid var(--Rectangle-source, #A7C957);
    background: #E7F0DB;
    color: #4C6D00;
}
.status-rejected-2{
    border: 0.667px solid var(--Color-Supportive-Red-10, #F06767);
    background: #F7EBEC;
    color: #C64D45;
}
.candidates-table td svg {
    color: #90A1B9;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    margin-right: 4px;
}

.status-rejected {
    border: 0.667px solid var(--Color-Supportive-Red-10, #F06767);
    background: #F7EBEC;
    color: #C64D45;
}

.pagination-info {
    color: #62748E;
    text-align: center;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    margin-bottom: 24px;
}

.pagination {
    display: flex;
    gap: 4px;
    justify-content: center;
}

.page-item {
    list-style: none;
}

.page-link {
    padding: 8px 12px;
    border: 0.667px solid #E6EDF3;
    border-radius: 6px;
    color: var(--Untitled-Rectangle-source, #09194F);
    font-family: Lato;
    font-size: var(--sds-typography-body-size-medium);
    font-style: normal;
    font-weight: var(--sds-typography-body-font-weight-regular);
    line-height: 100%; /* 16px */
    cursor: pointer;
    transition: all 0.2s ease;
    
}

.page-link:hover:not(.disabled .page-link) {
    background-color: #F8FAFB;
    border-color: #A7C957;
}

.page-item.active .page-link {
    border-radius: 8px;
    background: var(--New-UI-Color-1, #007B83); 
    color: white;
}
.page-item.active .page-link:hover {
    border-radius: 8px;
    background: var(--New-UI-Color-1, #007B83); 
    color: white;
}
.page-item.disabled .page-link {
    color: #BCC7DB;
    cursor: not-allowed;
}

/* ======================== RESPONSIVE ADJUSTMENTS ======================== */

@media (max-width: 1024px) {
    .filters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .shortlist-main {
        padding: 24px;
    }
}

@media (max-width: 768px) {
    .filters-grid {
        grid-template-columns: 1fr;
    }
    
    .filters-footer {
        flex-direction: column-reverse;
        gap: 12px;
    }
    
    .candidates-table {
        font-size: 12px;
    }
    
    .candidates-table th,
    .candidates-table td {
        padding: 12px 8px;
    }
}
/* ======================== 
PERSONAL DETAIL PAGE STYLES 
======================== */

.candidate-detail-main {
    padding: 32px 40px 48px;
}

/* Back Button */
.candidate-back-section {
    margin-bottom: 24px;
    width: fit-content;
}
/* STATE 1: LOCKED (Default) */
.contact-detail-box#contactDetailLocked {
    background: linear-gradient(180deg, #FFF 0%, rgba(0, 123, 131, 0.30) 100%);
    border: none;
    align-items: center;
}

.contact-detail-box#contactDetailLocked .status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-locked-text {
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    opacity: 0.9;
}

/* STATE 2: LOADING */
.contact-detail-box.contact-detail-loading {
    background: linear-gradient(180deg, #FFF 0%, rgba(80, 80, 80, 0.50) 100%);
}

.contact-detail-box.contact-detail-loading p {
    margin: 0;
    color: #0F172B;
    text-align: center;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}


.contact-detail-close {
    border-radius: 22369600px;
    background: rgba(241, 245, 249, 0.50);
    border: none;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #505050 !important;
    font-size: 18px;
    transition: background 0.2s;
}
.contact-detail-close:hover {
    background: #F1F5F9;
}

/* STATE 3: UNLOCKED */
.contact-detail-unlocked {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 0px 24px 24px;
}

.contact-unlocked-row {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}

.contact-unlocked-row:last-child {
    border-bottom: none;
}

.contact-unlocked-label {
    color: #62748E;
    font-family: Lato;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    display: flex;
    align-items: center;
    gap: 4px;
}

.contact-unlocked-label i {
    font-size: 14px;
}

.contact-unlocked-value-group {
    display: flex;
    align-items: center;
    gap: 8px;
}
#viwnumber {
    display: none;
    margin-top: 9px;
}
#viwemail{
    display: none;
    margin-top: 9px;
}
.show-number{
    padding: 7px 8px;
    border-radius: 8px;
border: 1px solid var(--Untitled-Rectangle-source, #09194F);
display: flex;
align-items: center;
gap: 4px;
margin-top: 5px;
min-width: 135px;
max-width: 135px;
button{
    background-color: transparent;
    border: none;
    padding: 0;
    max-height: 16px;
    display: flex;
    align-items: ;
}

span{
    color: var(--Color-Futurely-Dark-Hit-100, #010103);
text-align: center;
font-family: Lato;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 20px; /* 142.857% */

}

}

.contact-unlocked-value {
    color: var(--testo-cta, #09194F);
    text-align: center;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.contact-copy-btn {
    background: none;
    border: none;
    color: #9aa6b3;
    font-size: 14px;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-copy-btn:hover {
    color: #09194F;
}

/* Scarica CV link styling */
.candidate-cv-link-section {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #E2E8F0;
}

.candidate-cv-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #007B83;
    text-decoration: underline;
    font-family: Lato;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
}

.candidate-cv-link:hover {
    opacity: 0.8;
    color: #007B83;
}

.candidate-cv-link i {
    font-size: 16px;
}

.candidate-back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #09194F;
    text-decoration: none;
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    border-bottom: 1px solid #09194F;
    padding-bottom: 2px;
    transition: opacity 0.2s;
}

.candidate-back-link:hover {
    opacity: 0.7;
    color: #09194F;
}

.candidate-back-link i {
    font-size: 12px;
}

/* Status Banners */
.candidate-status-banner {
    border-radius: 10px;
    padding: 16.667px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.candidate-status-request {
    color: #733E0A;
    border: 0.667px solid #FFF085;
    background: #FEFCE8;
}

.candidate-status-request i {
    color: #FDB81E;
    font-size: 20px;
    flex-shrink: 0;
}

.candidate-status-to-validate {
    border: 0.667px solid #FDB81E;
    background: rgba(253, 184, 30, 0.10);
}

.candidate-status-to-validate i {
    color: #FDB81E;
    font-size: 20px;
    flex-shrink: 0;
}

.candidate-status-approved {
    border: 0.667px solid var(--Rectangle-source, #A7C957);
    background: #E7F0DB;
}

.candidate-status-approved i {
    color: #4C6D00;
    font-size: 20px;
    flex-shrink: 0;
}

.candidate-status-unavailable {
    border: 0.667px solid #FFC9C9;
    background: #F7EBEC;
}

.candidate-status-unavailable i {
    color: #C64D45;
    font-size: 20px;
    flex-shrink: 0;
}

.candidate-status-content {
    flex: 1;
}
.candidate-status-unavailable .candidate-status-content h6{
    color: #82181A !important;
}
.candidate-status-request .candidate-status-content h6{
    color: #733E0A !important;
}
.candidate-status-approved .candidate-status-content h6{
    color: #294600 !important;
}
.candidate-status-approved .candidate-status-content p{
    color: #294600 !important;
}
.candidate-status-content h6 {
    color: #09194F;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    margin: 0 0 4px 0;
}
.candidate-status-unavailable .candidate-status-content p{
    color: #82181A !important;
}
.candidate-status-request .candidate-status-content p{
    color: #A65F00 !important;
}
.candidate-status-content p {
    color: #45556C;
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

.btn-status-action {
    border-radius: 8px;
    background: var(--color-primary-green);
    color: #09194F;
    font-family: Lato;
    font-size: 14px;
    font-weight: 700;
    padding: 10px 16px;
    border: none;
    white-space: nowrap;
}

.btn-status-action:hover {
    background: #8fb845;
    color: #09194F;
}

/* Candidate Header */
.candidate-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    gap: 10px;
    padding: 24px;
    border-radius: 10px;
    border: 0.667px solid #E2E8F0;
    background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
     flex-direction: column;
}
.candidate-full {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 24px;
    width: 100%;
}

.candidate-header-left {
    display: flex;
    gap: 16px;
    flex: 1;
}

.candidate-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: #FF6B35;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: Lato;
    font-size: 24px;
    font-weight: 700;
    flex-shrink: 0;
}

.candidate-info {
    flex: 1;
}

.candidate-name-row {
    display: flex;
    align-items: center;
    gap: 8px !important;
    margin-bottom: 8px;
    margin: 0px 0px 8px 8px;
}
.fill-starr-bg-{
    border-radius: 30px;
background: rgba(255, 179, 25, 0.20);
padding: 8px;

}
.candidate-name {
    color: #09194F;
    font-family: Lato;
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    margin: 0;
}

.candidate-meta {
    color: #0F172B;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    margin: 12px 0px;
}

.candidate-header-right {
    display: flex;
    gap: 12px;
    align-items: center;
    flex: 0.1.5;
}
.candidate-actions-menu {
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: default;
    transition: background 0.2s;
    color: #45556C;
    font-family: Lato;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    width: 100%;
    padding: 2px 8px;
}

/* .candidate-actions-menu:hover {
    background: #F1F5F9;
} */

.candidate-actions-menu i {
    color: #45556C;
    font-size: 18px;
}
.candidate-details-grid-2 {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Section Header */
.candidate-section {
    margin-bottom: 24px;
}

.candidate-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
}

.candidate-section-header i {
    color: #45556C;
    font-size: 18px;
}

.candidate-section-header h2 {
    color: #09194F;
    font-family: Lato;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
}

/* Details Grid */
.candidate-details-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

/* Candidate Cards */
.candidate-card {
    border-radius: 10px;
    border: 0.667px solid #E2E8F0;
    background: #FBFBFB;
    padding: 24px;
    position: relative;
}

.candidate-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.candidate-card-header i {
    color: #45556C;
    font-size: 18px;
}

.candidate-card-header h3 {
    color: #09194F;
    font-family: Lato;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    margin: 0;
}

.candidate-card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.candidate-detail-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.detail-label-1 {
    color: #45556C;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}
.detail-value-2{
    color: var(--Untitled-Rectangle-source, #09194F);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
}

.detail-label {
    color: #62748E;
    font-family: Lato;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
}

.detail-value {
    color: #0F172B;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
}

.detail-value-single {
   color: var(--testo-cta, #09194F);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 100% */
    display: flex;
    padding: 4px 8px;
    justify-content: center;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: #DFF1F3;
    width: fit-content;
}

.detail-value-large {
    color: #09194F;
    font-family: Lato;
    font-size: 20px;
    font-weight: 700;
    line-height: 24px;
}

/* Contact Detail Box */
.contact-detail-box {
    border-radius: 0 0 10px 10px;
    background: linear-gradient(180deg, #FFF 0%, rgba(0, 123, 131, 0.30) 100%);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 24px 0 32px 0;
    flex-direction: column;
}
.status-icon {
    border-radius: 22369600px;
    background: rgba(241, 245, 249, 0.50);
    display: flex;
    width: 48px;
    height: 48px;
    justify-content: center;
    align-items: center;
}
a.btn.download-cv-btn {
    color: var(--New-UI-Color-1, #007B83);
    text-align: center;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    text-decoration-line: underline;
    text-decoration-style: solid;
    text-decoration-skip-ink: auto;
    text-decoration-thickness: auto;
    text-underline-offset: auto;
    text-underline-position: from-font;
    padding: 0;
}
.Scarica-cv {
    padding-top: 24px;
    position: absolute;
    bottom: 24px;
    border-top: 0.667px solid #E2E8F0;
    width: 91%;
}
.education-field {
    display: flex;
    gap: 4px;
    align-items: center;
}
.personal-info{
    padding: 0px 24px;
}
.candidate-card-header-with-icon {
    padding: 24px 0px 0px 24px;
}
.contact-detail-box i {
    color: #007B83;
    font-size: 20px;
    flex-shrink: 0;
}

.contact-locked-title {
    color: var(--testo-cta, #09194F);
    text-align: center;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px; /* 150% */
    margin: 0 0 4px 0;
}

.contact-locked-text {
    color: var(--Untitled-Rectangle-40, #344A82);
    text-align: center;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    margin: 0;
}

/* Contact Actions */
.contact-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.contact-action-item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #09194F;
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.contact-action-item i {
    color: #45556C;
    font-size: 16px;
}

/* Skills Section */
.skills-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.skills-label {
    color: #62748E;
    font-family: Lato;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 133.333% */
    margin: 0;
}

.skills-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.skill-tag {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 8px;
    background: #DFF1F3;
    color: var(--Untitled-Rectangle-source, #09194F);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 16px; /* 100% */
}
.blur-content{
    filter: blur(1px);
    pointer-events: none;
    user-select: none;
}

/* Criteria Section */
.criteria-description {
    color: var(--Untitled-Rectangle-source, #09194F);
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 125% */
    margin: 0;
}

.criteria-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.criteria-item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    padding: 8px 0;
}

.criteria-item:last-child {
    border-bottom: none;
}

.criteria-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.criteria-label {
    color: #314158;
    font-family: Lato;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

.criteria-rating {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
}

.criteria-rating i {
    color: #00818A;
    font-size: 18px;
}

.criteria-rating i.bi-star {
    color: #CAD5E2;
}

/* Candidate Notes Section */
.candidate-note-card {
    background-color: #FFFFFF;
    border: 1px solid #E4E8ED;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
}

.candidate-note-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    position: relative;
}

.candidate-note-header svg {
    flex-shrink: 0;
}

.candidate-note-header h2 {
    color: var(--testo-cta, #09194F);
    text-align: center;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 700;
    line-height: 24px; /* 150% */
    margin: 0;
}

.note-edit-link {
    position: absolute;
    right: 0;
    top: 0;
    color: #007B83;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s ease;
}

.note-edit-link:hover {
    color: #005A61;
    text-decoration: underline;
}

/* Note Open/Editing State */
.candidate-note-open .candidate-note-body {
    display: block;
}

.note-subtitle {
    color: var(--Color-Futurely-Dark-Hit-100, #010103);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    margin-bottom: 16px;
}

.note-textarea {
    width: 100%;
    min-height: 167px;
    padding: 8px 12px;
    border-radius: 8px;
    border: 0.8px solid #00818A;
    background: rgba(243, 243, 245, 0.10);
    color: var(--Color-Futurely-Dark-Hit-100, #010103);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    transition: border-color 0.2s ease;
}

.note-textarea:focus {
    outline: none;
    border-color: #00818A;
    box-shadow: none !important;
}

.note-textarea::placeholder {
    color: #9aa6b3;
}

.note-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 16px;
}

.btn-save {
    background-color: #007B83;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.btn-save:hover {
    background-color: #005A61;
}

.btn-save:active {
    background-color: #004349;
}

/* Note Saved/Read-only State */
.candidate-note-saved .candidate-note-body {
    display: block;
}

.note-text-saved {
    font-size: 14px;
    color: #314158;
    line-height: 1.6;
    margin: 0;
    white-space: pre-wrap;
    word-wrap: break-word;
}


/* -------------------------
           Credits 
        -------------------------- */
.credit-main {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.dashboard-empty-icon-green {
    background: #DFF1F3 !important;
}
.dashboard-empty-icon-warning{
    background: #FFF4DD !important;
}
.credit-card-content h4 {
    color: #0F172B;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 8px;
}

.credit-card-content p {
    color: #45556C;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 24px;
}

/* Credit Form */
.credit-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.credit-form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.credit-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.credit-form-group.full-width {
    grid-column: 1 / -1;
}

.credit-form-label {
    color: #0F172B;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px; /* 100% */
    gap: 4px;
}

.credit-form-label i {
    color: #0A0A0A;
    font-size: 16px;
}

.credit-form-label .required {
    color: #DB4E4E;
}

.credit-form-input,
.credit-form-textarea {
    border-radius: 8px;
    border: 0.5px solid var(--Untitled-Rectangle-source, #09194F);
    display: flex;
    min-height: 36px;
    padding: 8px 12px;
    align-items: center;
    color: var(--Color-Futurely-Dark-Hit-100, #010103);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    box-shadow: none;
    width: 100%;
}

.credit-form-input::placeholder,
.credit-form-textarea::placeholder {
    color: #9aa6b3;
}

.credit-form-input:focus,
.credit-form-textarea:focus {
    border-color: #9db0d4;
    box-shadow: none;
    outline: none;
}

.credit-form-textarea {
    min-height: 100px;
    resize: none;
}

.credit-form-info {
    border-radius: 10px;
    border: 0.667px solid var(--Untitled-New-UI-Color-1-source, #00818A);
    background: #DFF1F3;
    padding: 16px;
}

.credit-form-info-title {
    color: var(--New-UI-Color-1, #007B83);
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    margin-bottom: 0px;
}

.credit-form-info-text {
    color: var(--New-UI-Color-1, #007B83);
    font-family: Arial;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    margin: 0;
}

.credit-form-actions {
    display: flex;
    justify-content: flex-end;
}

.credit-btn-submit {
    border-radius: 8px;
    border: 1px solid var(--Untitled-Rectangle-source, #09194F);
    background: #FFF;
    color: var(--Untitled-Rectangle-source, #09194F);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px;
    padding: 10px 24px;
    cursor: pointer;
    transition: background 0.2s;
}

.credit-btn-submit:hover {
    background: #F1F5F9;
}

.credit-btn-submit:active {
    background: #E2E8F0;
}

/* Why Request Credits Section */
.credit-why-section {
    border-radius: 10px;
    border: 0.667px solid #E2E8F0;
    background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
    padding: 24px;
}

.credit-why-title {
    color: #0F172B;
    font-family: Lato;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 28px;
    margin-bottom: 16px;
}

.credit-why-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
}

.credit-why-item {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.credit-why-icon {
    color: #00818A;
    font-size: 20px;
    flex-shrink: 0;
    margin-top: 2px;
}

.credit-why-content h6 {
    color: #0F172B;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 700;
    line-height: 20px; /* 142.857% */
    margin: 0 0 4px 0;
}

.credit-why-content p {
    color: #45556C;
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 142.857% */
    margin: 0;
}
.credit-content-header h4 {
    color: #0F172B;
    font-family: Lato;
    font-size: 30px;
    font-style: normal;
    font-weight: 700;
    line-height: 36px;
    margin-bottom: 9px;
}
.credit-main-card {
    border-radius: 10px;
    border: 0.667px solid #E2E8F0;
    background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
    display: flex;
    padding: 32.667px;
    align-items: center;
    align-self: stretch;
    justify-content: space-between;
}
.credit-content-header p {
    color: #45556C;
    font-family: Lato;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    margin: 0;
}
span.credit-balance-amount {
    color: #0F172B;
    text-align: center;
    font-family: Lato;
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 48px;
}
.credit-balance {
    padding: 0 36px;
}
.credit-card-form {
    border-radius: 10px;
    border: 0.667px solid #E2E8F0;
    background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
    padding: 24px;
    gap: 24px;
}
.page-header {
    display: flex;
    flex-direction: column;
    gap: 9.3px;
}

/* ======================== HEADER ======================== */
       

        .page-title {
            color: #45556C;
            font-family: Lato;
            font-size: 36px;
            font-style: normal;
            font-weight: 700;
            line-height: 40px; /* 111.111% */
        }

        .page-subtitle {
            color: #45556C;
            font-family: Arial;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px; /* 150% */
        }

        .page-subtitle strong {
            font-weight: 700;
        }

        /* ======================== SECTIONS ======================== */
        .section {
            margin-bottom: 24px;
        }

        .section-title {
            color: #0F172B;
            font-family: Lato;
            font-size: 24px;
            font-style: normal;
            font-weight: 700;
            line-height: 32px; /* 133.333% */
            margin-bottom: 16px;
        }
        .content-dev {
            border-radius: 10px;
            border: 0.667px solid #E2E8F0;
            background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
            display: flex;
            padding: 24px;
            flex-direction: column;
            align-items: flex-start;
            gap: 16px;
            flex-shrink: 0;
            align-self: stretch;
        }

        .section-subtitle {
            color: #45556C;
            font-family: Lato;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px; /* 150% */
            margin-bottom: 16px;
        }

        .section-text {
            color: #314158;
            font-family: Arial;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px; /* 150% */
            margin: 0;
        }
        .section-text-sistema{
            color: #45556C;
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
        }
        p.section-text-2 {
            color: #314158;
            font-family: Lato;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px;
        }
        .sistam-credits {
            border-radius: 10px;
            border: 0.667px solid #E2E8F0;
            background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
            padding: 24px;
        }
        .sistam-credits h3 {
            color: #0F172B;
            font-family: Lato;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: 27px;
            margin-bottom: 8px;
        }

        /* ======================== STEPS ======================== */
        .steps-container {
            display: flex;
            flex-direction: column;
            gap: 24px;
            border-radius: 10px;
            border: 1px solid #E2E8F0;
            padding: 24px;
        }

        .step {
            display: flex;
            gap: 16px;
            align-items: flex-start;
        }

        .step-number {
            width: 40px;
            height: 40px;
            background: #00818A;
            color: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
            font-family: Lato;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 24px; /* 150% */
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-shrink: 0;
        }

        .step-content h3 {
            color: #0F172B;
            font-family: Lato;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: 28px; /* 155.556% */
            margin-bottom: 7.3px;
        }

        .step-content p {
            color: #45556C;
            font-family: Lato;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px; /* 150% */
            margin: 0;
        }

        /* ======================== INFO CARDS ======================== */
        .info-card {
            border-radius: 8px;
            border: 1px solid var(--color-border);
            padding: 16px;
            margin-bottom: 16px;
            background: white;
        }

        .info-card.blue {
            border-radius: 10px;
            border: 1px solid var(--Untitled-New-UI-Color-1-source, #00818A);
            background: #DFF1F3;
        }

        .info-card-title {
            color: #0F172B;
            font-family: Lato;
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: 24px; /* 150% */
            margin-bottom: 12px;
        }

        .info-card-text {
            font-size: 13px;
            color: #666;
            line-height: 1.6;
            margin: 0;
        }

        .info-card.blue .info-card-text {
            color: #45556C;
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
        }

         /* ======================== BOOTSTRAP ACCORDION CUSTOMIZATION ======================== */
        .accordion {
            border: none;
            gap: 24px;
            display: flex;
            flex-direction: column;
        }

        .accordion-item {
            border-radius: 10px !important;
            border: 0.5px solid var(--Untitled-Rectangle-source, #09194F) !important;
            background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB) !important;
            margin-bottom: 0;
            box-shadow: none;
            transition: all 0.3s;
            padding: 4px !important;
        }

        .accordion-item:hover {
            border-color: var(--color-accent-teal);
        }

        .accordion-button {
            padding: 16px 20px;
            color: #0F172B;
            font-family: Lato;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px; /* 150% */
            background: white;
            border: none;
            box-shadow: none;
            transition: background 0.2s;
        }

        .accordion-button:not(.collapsed) {
            background: white;
            color: var(--color-primary-dark);
            box-shadow: none;
            border-bottom: none;
        }

        .accordion-button:focus {
            border-color: var(--color-border);
            box-shadow: none;
            outline: none;
        }

        .accordion-button:hover {
            background: none !important;
        }

        /* .accordion-button::after {
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23999'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
            transition: transform 0.3s;
        } */

        /* .accordion-button:not(.collapsed)::after {
            transform: rotate(-180deg);
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23007B83'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
        } */

        .accordion-body {
            color: #45556C;
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 22.75px; /* 162.5% */
            display: flex;
            padding: 8.667px 20px 19px 20px;
            flex-direction: column;
            align-items: flex-start;
            flex-shrink: 0;
            align-self: stretch;
            background-color: #fff !important;
            border-top: 0.667px solid #F1F5F9 !important;
        }


        /* ======================== SUPPORT SECTION ======================== */
        .support-card {
            border-radius: 10px;
            border: 0.667px solid var(--Untitled-New-UI-Color-1-source, #00818A);
            background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
            padding: 20px;
            display: flex;
            gap: 12px;
            align-items: flex-start;
            flex-direction: column;
        }
        .support-content {
            display: flex;
            gap: 12px;
            align-items: center;
        }
        .support-subtitle {
            font-size: 13px;
            color: #666;
            line-height: 1.6;
            display: flex;
            flex-direction: column;
            gap: 2px;
}

        .support-icon {
            width: 40px;
            height: 40px;
            background: #DFF1F3;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--color-accent-teal);
            font-size: 16px;
            flex-shrink: 0;
        }

        .support-content h3 {
            font-size: 15px;
            font-weight: 700;
            color: var(--color-primary-dark);
            margin-bottom: 8px;
        }

        .support-subtitle p {
            color: #62748E;
            font-family: Lato;
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: 20px; /* 142.857% */
            margin: 0;
        }

        .support-email {
            font-family: Lato;
            font-size: 16px;
            font-style: normal;
            font-weight: 400;
            line-height: 24px; /* 150% */
            color: var(--color-primary-dark);
        }

        .support-hours {
            color: #999;
            font-size: 12px;
            margin-top: 4px;
        }

        /* ======================== ANIMATIONS ======================== */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .section {
            animation: fadeIn 0.5s ease-out forwards;
        }

        .section:nth-child(1) { animation-delay: 0.1s; }
        .section:nth-child(2) { animation-delay: 0.15s; }
        .section:nth-child(3) { animation-delay: 0.2s; }
        .section:nth-child(4) { animation-delay: 0.25s; }
        .section:nth-child(5) { animation-delay: 0.3s; }

        /* ======================== RESPONSIVE ======================== */
        @media (max-width: 768px) {
            .container-main {
                padding: 32px 16px;
            }

            .page-title {
                font-size: 26px;
            }

            .section-title {
                font-size: 16px;
            }

            .faq-question {
                padding: 14px 16px;
                font-size: 13px;
            }

            .faq-answer {
                padding: 0 16px;
                font-size: 12px;
            }

            .faq-item.active .faq-answer {
                padding: 0 16px 14px 16px;
            }
        }

        /* ======================== SCROLLBAR ======================== */
        ::-webkit-scrollbar {
            width: 8px;
        }

        ::-webkit-scrollbar-track {
            background: transparent;
        }

        ::-webkit-scrollbar-thumb {
            background: #ddd;
            border-radius: 4px;
        }

        ::-webkit-scrollbar-thumb:hover {
            background: #bbb;
        }
 /* ======================== final short list ======================== */

        .final-shortlist {
        border-radius: 10px;
        border: 0.667px solid #E2E8F0;
        background: var(--fills-vibrant-use-plus-lighter-darker-quinary, #FBFBFB);
        display: flex;
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        align-self: stretch;
    }
    .final-list-icon {
        border-radius: 10px;
        background: #DDEEEF;
        display: flex;
        width: 48px;
        height: 48px;
        justify-content: center;
        align-items: center;
    }
    .icon-text {
        display: flex;
        gap: 16px;
        align-items: flex-start;
        align-content: flex-start;
    }
    .content-final-shortlist h2 {
         color: #0F172B;
        font-family: Lato;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 27px;
        margin: 0;
    }
    .content-final-shortlist p {
        color: #45556C;
        font-family: Lato;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: 24px;
        margin: 0;
    }
    .content-final-shortlist {
        display: flex;
        flex-direction: column;
        gap: 5px;
    }
    .final-shortlist-card-body {
        border-radius: 10px;
        background: rgba(221, 238, 239, 0.40);
        display: flex;
        padding: 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        align-self: stretch;
    }
    .final-shortlist-card-body .step-content h3 {
        font-size: 16px !important;
        margin-bottom: 5.3px !important;
    }
    .final-shortlist-card-body .step-content p{
        font-size: 14px !important;
    }
   .final-shortlist-card-body .step-number{
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }
    .final-shortlist-card-body  .step {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }
    .note-div {
        border-radius: 10px;
        border: 0.667px solid var(--Untitled-New-UI-Color-1-source, #00818A);
        background: #F1F8F9;
        display: flex;
        padding: 16.667px;
        align-items: flex-start;
        align-self: stretch;
        gap: 8px;
        align-items: center;
    }
    .note-div p {
        color: var(--New-UI-Color-1, #007B83);
        font-family: Arial;
        font-size: 14px;
        font-style: normal;
        font-weight: 700;
        line-height: 20px;
        margin: 0;
    }
    h1.short-list-final-title {
        color: #0F172B;
        font-family: Lato;
        font-size: 30px;
        font-style: normal;
        font-weight: 700;
        line-height: 36px;
        margin-bottom: 4px;
    }
    p.short-list-final-subtitle {
        color: #0F172B;
        font-family: Lato;
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: 18px;
        margin-bottom: 12px;
    }
    .calendar-badge {
        color: #45556C;
        font-family: Lato;
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        line-height: 20px;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    .main-shortlist-final {
        display: flex;
        flex-direction: column;
        gap: 24px;
    }
/* Responsive Design */
@media (max-width: 1200px) {
    .candidate-details-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .candidate-detail-main {
        padding: 24px 20px;
        margin-left: 0 !important;
    }
    
    .candidate-header {
        flex-direction: column;
    }
    .candidate-full {
        flex-direction: column;
    }
    
    .candidate-header-right {
        width: 100%;
        justify-content: space-between;
    }
    
    .candidate-btn-primary {
        flex: 1;
    }
    .dashboard-sidebar {
    position: absolute;
}
 .dashboard-main {
    margin-left: 0px !important;
}
}

/* ======================== MOBILE NAVBAR TOGGLE ======================== */

.navbar-toggler {
    display: none;
    background: none;
    border: none;
    color: #09194F;
    padding: 8px 12px;
    font-size: 24px;
    cursor: pointer;
    z-index: 1001;
    transition: all 0.3s ease;
}

.navbar-toggler:focus,
.navbar-toggler:active {
    outline: none;
    box-shadow: none;
}

.navbar-toggler:hover {
    background: #f1f5f9;
    border-radius: 6px;
}

/* Hamburger Icon Animation */
.navbar-toggler-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2309194F' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: background-image 0.3s ease;
}

.navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%2309194F' stroke-linecap='round' stroke-width='2' d='M7 7l16 16M23 7L7 23'/%3e%3c/svg%3e");
}

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

.dashboard-mobile-header {
    display: none !important;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-bottom: 1px solid #E2E8F0;
    position: sticky;
    top: 0;
    z-index: 1000 !important;  /* HIGHER than sidebar z-index */
    height: 50px;
    width: 100%;
    left: 0;
    right: 0;
}

.mobile-header-logo {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #09194F;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-header-logo i {
    font-size: 18px;
    flex-shrink: 0;
}

/* ======================== SIDEBAR OVERLAY ======================== */

.sidebar-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 998 !important;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-overlay.show {
    display: block;
    opacity: 1;
}

/* ======================== SIDEBAR MOBILE STATES ======================== */

/* On mobile: sidebar starts collapsed/hidden */
.dashboard-sidebar {
    transition: transform 0.3s ease, width 0.25s, min-width 0.25s;
    z-index: 999 !important;  /* Below header (1000) but above overlay (998) */
}

.sidebar-searches-list a {
    text-decoration: none;
}

.sidebar-nav-item.active {
    border-radius: 10px;
    background: #DFF1F3 !important;
}
select:not(:-internal-list-box):not([multiple]) option
{
  background: #dddddd !important;
}
select:not(:-internal-list-box):not([multiple]) option:hover
{
  background: #251e1e !important;
}


span#id_shortlisted_count {
    color: var(--Untitled-New-UI-Color-1-40, #005A63);
    font-family: Lato;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
}

.left-link {
    display: none !important;
}
.center-dot-pagination .page-link {
    color: var(--Untitled-Rectangle-source, #09194F);
    font-family: Lato;
    font-size: var(--sds-typography-scale-03);
    font-style: normal;
    font-weight: var(--sds-typography-weight-bold);
    line-height: 140%;
    border: none;
    pointer-events: none;
}
.create-form input::placeholder{
    color: #717182;
    font-family: Lato;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.create-form textarea::placeholder{
    color: #717182;
    font-family: Lato;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.select2-container .select2-search--inline .select2-search__field {
    color: #717182 !important;
    font-family: Lato !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 400 !important;
    line-height: normal !important;
    height: 21px !important;
    margin: 0 !important;
}

button#viewbuttonnumber, button#viewbuttonemail {
    background-color: transparent;
    border: none;
    padding: 0;
    max-height: 16px;
    display: flex;
    align-items: center;
    gap: 4px;
}