:root { --navy: #0B1C2E; --navy-mid: #112640; --navy-light: #1A3A5C; --gold: #C9A84C; --gold-light: #E6C97A; --gold-pale: #F5E9C8; --cream: #F8F4EC; --red-alert: #B03A2E; --slate: #6B8299; --white: #FFFFFF; --text-dim: rgba(255,255,255,0.55); } body { /* background: #E8EDF2; font-family: 'DM Sans', sans-serif; display: flex; flex-direction: column; align-items: center; gap: 48px; padding: 48px 24px;*/ min-height: 100vh; } /* ─── LABEL ─────────────────────────── */ .label { font-family: 'DM Mono', monospace; font-size: 11px; letter-spacing: 0.14em; color: #7A8A99; text-transform: uppercase; margin-bottom: 8px; align-self: flex-start; } /* ════════════════════════════════════ LANDING PAGE BANNER — 1110px ════════════════════════════════════ */ .banner-wrap { width: 1110px; max-width: 100%; } .banner { width: 1110px; max-width: 100%; height: 220px; background: var(--navy); position: relative; overflow: hidden; display: flex; align-items: center; border-radius: 4px; } /* Geometric map-grid overlay */ .banner::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(201,168,76,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(201,168,76,0.06) 1px, transparent 1px); background-size: 40px 40px; z-index: 1; } /* Diagonal warm wash */ .banner::after { content: ''; position: absolute; top: -60px; right: -80px; width: 520px; height: 380px; background: radial-gradient(ellipse at 70% 40%, rgba(201,168,76,0.18) 0%, transparent 65%); z-index: 1; } /* Red alert stripe */ .banner .alert-stripe { position: absolute; top: 0; left: 0; width: 6px; height: 100%; background: linear-gradient(180deg, var(--red-alert) 0%, #8B1A10 100%); z-index: 5; } /* Abstract West-Asia silhouette accent */ .banner .geo-accent { position: absolute; right: 0; top: 0; bottom: 0; width: 340px; z-index: 2; opacity: 0.12; background: linear-gradient(135deg, transparent 40%, var(--gold) 100%); clip-path: polygon(30% 0%, 100% 0%, 100% 100%, 0% 100%); } .banner-inner { position: relative; z-index: 10; padding: 0 56px; display: flex; flex-direction: column; gap: 12px; width: 100%; } .banner-eyebrow { display: flex; align-items: center; gap: 10px; } .banner-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red-alert); box-shadow: 0 0 0 3px rgba(176,58,46,0.3); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(176,58,46,0.3); } 50% { box-shadow: 0 0 0 7px rgba(176,58,46,0.1); } } .banner-eyebrow span { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: 0.18em; color: var(--red-alert); text-transform: uppercase; font-weight: 400; } .banner-eyebrow .divider { width: 28px; height: 1px; background: rgba(201,168,76,0.4); } .banner-eyebrow .org { font-family: 'DM Mono', monospace; font-size: 10.5px; letter-spacing: 0.14em; color: rgba(201,168,76,0.7); text-transform: uppercase; } .banner h1 { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 700; color: var(--white); line-height: 1.25; letter-spacing: -0.01em; max-width: 680px; } .banner h1 em { font-style: normal; color: var(--gold-light); } .banner-sub { font-size: 12.5px; color: var(--text-dim); letter-spacing: 0.02em; display: flex; align-items: center; gap: 16px; } .banner-sub .tag { background: rgba(201,168,76,0.14); border: 1px solid rgba(201,168,76,0.3); color: var(--gold-light); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; } .service--btn--wrapper button { width: 100%; background-color: #2e2d75 !important; text-align: start !important; margin-bottom: 14px; padding: 16px; white-space: normal !important; font-weight: 700 !important; } .login_banner { margin-bottom: 16px !important; } @media (min-width: 1200px) { .login_tab .tab-content .login_home_fixed_height { height: 600px !important; } } .d-none { display: none !important; } #news-section { padding-top: 0px; padding-bottom: 0px; } /*----------Marque Section---------*/ .str_wrap { overflow: hidden; width: 100%; font-size: 12px; line-height: 16px; position: relative; -moz-user-select: none; -khtml-user-select: none; user-select: none; background: #f6f6f6; white-space: nowrap; } .str_wrap.str_active { background: #f1f1f1; } .str_move { white-space: nowrap; position: absolute; top: 0; left: 0; cursor: move; } .str_move_clone { display: inline-block; vertical-align: top; position: absolute; left: 100%; top: 0; } .str_vertical .str_move_clone { left: 0; top: 100%; } .str_down .str_move_clone { left: 0; bottom: 100%; } .str_vertical .str_move, .str_down .str_move { white-space: normal; width: 100%; } .str_static .str_move, .no_drag .str_move, .noStop .str_move { cursor: inherit; } .str3-2 span { margin: 0 10px; text-align: center; width: 150px; height: 150px; display: inline-block; vertical-align: top; } .str_wrap img { max-width: none !important; } /*--------------------------*/ .modalnew { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content/Box */ .modalnew-content { background-color: #fefefe; margin: 15% auto; /* 15% from the top and centered */ padding: 20px; border: 1px solid #888; width: 57%; /* Could be more or less, depending on screen size */ } /* The Close Button */ .Modelnewclose { color: #aaa; float: right; font-size: 28px; font-weight: bold; } .Modelnewclose:hover, .Modelnewclose:focus { color: black; text-decoration: none; cursor: pointer; } /*------------------For Slider----------------------*/ #slideshow { position: relative; margin-bottom: 2%; box-shadow: 0 0 20px rgba(0, 0, 0, 0.4); } #slideshow > div { position: relative; top: 0px; left: 0px; right: 0px; bottom: 0px; } .img { width: 100%; height: auto; } .view-payment-invoice { background-color: #fff; box-shadow: 0px 0px 20px 4px rgba(0, 0, 0, 0.15); padding: 5px 15px; border-radius: 10px; margin-bottom: 20px; background: #0066cc; padding: 12px; } .view-payment-invoice h1 { font-size: 18px; color: #333 !important; font-family: "Open Sans"; font-weight: 500; color: white !important; text-align: center; line-height: 1.4; margin: 0px; } .view-payment-invoice h1 .click-to-know { font-size: 18px; border-radius: 0px; font-family: "Open Sans"; color: white; text-decoration: underline; margin-left: 6px; font-weight: 700; } /**service popup css starts**/ .service--btn--wrapper button { width: 100%; background-color: #0066cc; text-align: center; margin-bottom: 14px; padding: 16px; } .service--popup .modal-dialog { width: 700px; margin: 30px auto; } .service--popup .modal-content { border-radius: 15px !important; background-color: transparent !important; } .service--popup .modal-bg-wrapper { /* background-image: url('data:image/svg+xml,'); */ border-radius: 15px !important; background-size: cover !important; background-repeat: no-repeat; min-height: 361px; /*background-image: url('../content/images/cii (agm)-bg.png');*/ /* background-image: url('../content/images/cii (agm).png');*/ /* background-image: url('../content/images/cii (agm) (1).png');*/ /*background-image: url('../content/images/cii (agm) (2).png');*/ /* background-image: url('../content/images/cii (agm) (3).png'); */ background-color: white; } .service--popup .modal-header { border: none !important; background: transparent !important; } .service--popup .modal-header button.close { font-size: 35px; padding: 0px 11px 3px 11px; opacity: 1; text-shadow: none; position: absolute; top: 4px; right: 0; border: none !important; background: transparent !important; box-shadow: none !important; z-index: 99999 !important; } .service--popup .modal-body { /* padding: 30px 70px 24px 70px !important;*/ padding: 20px; font-size: 13px; color: #666; } /* .service--popup .modal-box-wrapper { background: #fff; text-align: center; }*/ .service--popup iframe#modalIframe { width: 100%; height: 507px; border-radius: 15px; border: 1px solid #222283; scrollbar-width: none; /* Firefox */ } .service--popup iframe#modalIframe::-webkit-scrollbar { width: 0px; /* Chrome, Safari */ background: transparent; } .service--popup iframe#modalIframe .mat-typography { height: 500px; } .service--popup iframe#modalIframe .centered-container { background-image: none !important; } .service--popup .modal-dialog { width: 800px; } .centered-container .conten-container { width: 95%; } .modal-bg-wrapper .modal-header { padding: 0px; border-radius: 20px; } .modal-bg-wrapper .modal-header .close-btn { display: flex; justify-content: left; padding: 10px; background: #353690; border-radius: 11px 11px 0px 0px; } .modal-bg-wrapper .modal-header .close-btn h2 { margin: 0px; font-size: 17px; font-weight: 600; } .graph_banner { padding: 20px 0px 0px; } /**service popup css ends**/ #divmaillist { position: relative; } .no-record-found { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #888; list-style: none; width: 100%; border: none; } /* ===================== New CSS Starts here ===================== */ /*====================== 10 Aug 2026 ============================= */ html, body { margin: 0; padding: 0; height: 100vh; overflow: hidden; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } /* ===== Layout shell ===== */ .new_cam_dash-app { /* display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: 64px 1fr; grid-template-areas: "topbar topbar" "sidebar main"; */ height: 100vh; display: flex; flex-direction: column; overflow: hidden; transition: grid-template-columns .28s ease; } .new_cam_dash-app.new_cam_dash-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; } /* ===== Top bar ===== */ .new_cam_dash-topbar { grid-area: topbar; display: flex; align-items: center; gap: 24px; padding: 0px 24px; background: #fff; border-bottom: 1px solid #E4E8EF; position: sticky; top: 0; z-index: 40; flex-shrink: 0; } .new_cam_dash-brand { display: flex; align-items: center; gap: 8px; width: 256px; border-right: 1px solid #E4E8EF; height: 100%; padding: 14.1px 0px; } .new_cam_dash-brand img { height: 40px; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-brand { width: 96px; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-brand .new_cam_dash-brand-text { display: none; } .new_cam_dash-brand .new_cam_dash-logo-mark { width: 30px; height: 30px; border-radius: 50%; background: conic-gradient(from 200deg, #1f5fd6, #7db7ff, #1f5fd6); flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .new_cam_dash-brand .new_cam_dash-logo-mark::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: #fff; } .new_cam_dash-search { flex: 1; background: transparent; border: 1px solid #E4E8EF; border-radius: 5px; padding: 4.2px 14px; max-width: 580px; font-style: normal; font-weight: 400; font-size: 14px; line-height: 20px; color: #687082; display: flex; align-items: center; position: relative; } .new_cam_dash-search input { border: none; background: transparent; outline: none; flex: 1; font-size: 14px; } .new_cam_dash-search input:focus { outline:none !important; } .new_cam_dash-search svg { flex-shrink: 0; opacity: .6; } .new_cam_dash-search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #ffffff; border: 1px solid #E2E8F0; border-radius: 8px; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05); max-height: 380px; overflow-y: auto; z-index: 1050; padding: 6px 0; } .new_cam_dash-search-item { padding: 10px 14px; border-bottom: 1px solid #F1F5F9; cursor: pointer; transition: background 0.15s ease; display: flex; flex-direction: column; gap: 4px; } .new_cam_dash-search-item:last-child { border-bottom: none; } .new_cam_dash-search-item:hover { background: #F8FAFC; } .new_cam_dash-search-item-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .new_cam_dash-search-item-title { font-size: 13px; font-weight: 600; color: #1E293B; line-height: 1.3; } .new_cam_dash-search-item-meta { font-size: 12px; color: #64748B; } .new_cam_dash-search-empty { padding: 16px; text-align: center; color: #64748B; font-size: 13px; } .new_cam_dash-topbar-right { margin-left: auto; display: flex; align-items: center; gap: 18px; } .new_cam_dash-icon-btn .new_cam_dash-notification-num { position: absolute; top: -2px; right: -6px; width: 18px; height: 18px; border-radius: 50%; background: red; color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 3px solid #fff; } .new_cam_dash-user-chip { display: flex; align-items: center; gap: 10px; cursor: pointer; } .new_cam_dash-avatar { width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #142549; font-style: normal; font-weight: 500; font-size: 16px; line-height: 85px; color: #FFFFFF; } .new_cam_dash-user-chip .new_cam_dash-uname { font-weight: 600; font-size: 13.5px; } .new_cam_dash-loggedin-user-info { } /* ===== Sidebar ===== */ .new_cam_dash-layout { display: grid; grid-template-columns: 280px 1fr; grid-template-areas: "sidebar main"; width: 100%; flex: 1; overflow: hidden; transition: grid-template-columns .28s ease; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-layout { grid-template-columns: 120px 1fr; } .new_cam_dash-sidebar { grid-area: sidebar; display: flex; flex-direction: column; position: relative; padding: 30px 30px; transition: padding .28s ease; background: #FFFFFF; border-right: 1px solid #E4E8EF; overflow-y: auto; overflow-x: hidden; height: 100%; scrollbar-width: thin; scrollbar-color: rgba(0, 0, 0, 0.12) #EBF1FD; } .new_cam_dash-sidebar .new_cam_dash-nav { flex-shrink: 0; } /* WebKit browsers */ ::-webkit-scrollbar { width: 4px; background: transparent; } ::-webkit-scrollbar-track { background: #EBF1FD; border-radius: 8px; } ::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.12); border-radius: 4px; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-sidebar { padding: 16px 10px; align-items: center; } .new_cam_dash-nav-toggle { position: fixed !important; top: 50%; left: 268px; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 50; transition: left .28s ease, transform .28s ease; border: 0px; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-nav-toggle { left: 108px; transform: translateY(-50%) rotate(180deg); } .new_cam_dash-nav-toggle svg { width: 13px; height: 13px; } .new_cam_dash-nav { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .new_cam_dash-nav li { width: 100%; } .new_cam_dash-nav a { display: flex !important; align-items: center; gap: 12px; border-radius: 10px; color: #3a4453; font-weight: 500; font-size: 14px; white-space: nowrap; transition: background .15s ease, color .15s ease; padding: 15px 15px !important; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-nav a { justify-content: center; padding: 11px; width: 52px; } .new_cam_dash-nav a:hover { background-color: #EBF1FD !important; color: #1E64EF; } .new_cam_dash-nav a:focus { outline: none; } .new_cam_dash-nav a.new_cam_dash-active { background: #EBF1FD; border-radius: 7px; } .new_cam_dash-nav a.new_cam_dash-active .new_cam_dash-label { font-style: normal; font-weight: 500; font-size: 16px; line-height: 22px; color: #1E64EF; } .new_cam_dash-nav a.new_cam_dash-active svg path { fill: #1E64EF } .new_cam_dash-nav .new_cam_dash-label { transition: opacity .15s ease; font-style: normal; font-weight: 400; font-size: 16px; line-height: 22px; color: #434343; padding: 0px; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-nav .new_cam_dash-label { display: none; } .new_cam_dash-nav-divider { height: 1px; border-bottom: 1px solid #E4E8EF; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-nav-divider { display: none; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-help-fab { margin-top: 100px; } .new_cam_dash-msg-centre { position: relative; } .new_cam_dash-msg-centre .new_cam_dash-badge { color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 0 3px; background: #de3d31; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-msg-centre .new_cam_dash-badge { right: 2px; top: 2px; } .new_cam_dash-help-box { margin-top: 100px; color: #fff; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: linear-gradient(295.68deg, #223275 0%, #162752 100%); border-radius: 11px; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-help-box { display: none; } .new_cam_dash-help-box .new_cam_dash-badge-icon { display: flex; align-items: center; gap: 10px; } .new_cam_dash-help-box h4 { margin: 0; font-style: normal; font-weight: 600; font-size: 16px; line-height: 22px; color: #FFFFFF; } .new_cam_dash-help-box p { margin: 0; font-style: normal; font-weight: 500; font-size: 10px; line-height: 16px; color: #FFFFFF; } .new_cam_dash-help-box .new_cam_dash-get-support { align-self: flex-start; border: none; padding: 8px 14px; cursor: pointer; display: flex; align-items: center; gap: 6px; background: #FFFFFF; border-radius: 16.5px; font-style: normal; font-weight: 500; font-size: 11px; line-height: 16px; color: #1F2F6D; } .new_cam_dash-help-fab { display: none; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; align-items: center; justify-content: center; margin-top: auto; cursor: pointer; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-help-fab { display: flex; } /* ===== Main ===== */ .new_cam_dash-main { width: 100%; height: 100%; max-height: 100%; overflow: hidden; display: flex; flex-direction: column; padding: 0; } .x_content { width: 100%; height: 100%; overflow-y: auto; overflow-x: hidden; box-sizing: border-box; padding: 20px 24px 40px; } /* Home Dashboard 2-column Grid */ .new_cam_dash-home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; height: 100%; min-height: 100%; } .new_cam_dash-home-grid .new_cam_dash-content-col { min-width: 0; overflow-y: auto; height: 100%; padding-right: 16px; border-right: 1px solid #E4E8EF; } .new_cam_dash-home-grid .new_cam_dash-aside { overflow-y: auto; overflow-x: hidden; height: 100%; padding-right: 10px; box-sizing: border-box; } @media (max-width: 1199px) { .new_cam_dash-home-grid { grid-template-columns: 1fr; } .new_cam_dash-home-grid .new_cam_dash-content-col { border-right: none; padding-right: 0; } } .new_cam_dash-hero { background: linear-gradient(90deg, rgba(10, 37, 64, 0.96) 0%, rgba(3, 78, 158, 0.96) 100%), url(.jpg); border-radius: 16px; padding: 24px; color: #fff; position: relative; overflow: hidden; } .new_cam_dash-hero-top { display: flex; justify-content: space-between; align-items: flex-start; } .new_cam_dash-hero h1 { margin: 0px; font-style: normal; font-weight: 600; font-size: 20px; line-height: 40px; color: #FFFFFF; } .new_cam_dash-hero p { margin: 0; font-style: normal; font-weight: 400; font-size: 12px; line-height: 18px; color: #FFFFFF; } .new_cam_dash-status-pill { font-weight: 700; font-size: 10px; line-height: 14px; color: #006B48; padding: 4.2px 8px 4.2px 13px; display: flex; align-items: center; gap: 9px; background: #FFFFFF; border: 1px solid #FFFFFF; border-radius: 13.5px; } .new_cam_dash-status-pill .new_cam_dash-dot { width: 6px; height: 6px; border-radius: 50%; background: #006B48; box-shadow: 0px 0px 6px 2px #006B48; } .new_cam_dash-member-chip { margin-top: 21px; display: inline-flex; align-items: center; gap: 10px; padding: 7px 10.29px; font-size: 12.5px; background: rgba(255, 255, 255, 0.11); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 8px; } .new_cam_dash-member-chip .new_cam_dash-lbl { display: block; font-style: normal; font-weight: 400; font-size: 10px; line-height: 14px; color: #FFFFFF; margin-bottom: 2px; } .new_cam_dash-member-chip strong { font-style: normal; font-weight: 600; font-size: 12px; line-height: 16px; color: #FFFFFF; } .new_cam_dash-section-title { font-style: normal; font-weight: 600; font-size: 24px; line-height: 30px; color: #152650; margin: 40px 0 18px; } .new_cam_dash-snapshot { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .new_cam_dash-snap-card { padding: 16px; background: linear-gradient(101.98deg, #F0F7FE 26.3%, #FFFFFF 100%); border: 1px solid #C8E1FF; border-radius: 17px; } .new_cam_dash-snap-card.new_cam_dash-My-Communities { background: linear-gradient(101.98deg, #F1F3FE 38.42%, #FFFFFF 100%); border: 1px solid #D2DAFF; } .new_cam_dash-snap-card.new_cam_dash-Messages { background: linear-gradient(101.98deg, #FEFBED 38.08%, #FFFFFF 100%); border: 1px solid #FEEA9C; border-radius: 17px; } .new_cam_dash-snap-card .new_cam_dash-flex-icon-label { display: flex; gap: 8px; } .new_cam_dash-snap-card .new_cam_dash-flex-icon-label .new_cam_dash-flex--label-count { display: flex; flex-direction: column; } .new_cam_dash-snap-card .new_cam_dash-icon { width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; } .new_cam_dash-snap-card .new_cam_dash-label { font-style: normal; font-weight: 600; font-size: 12px; line-height: 18px; color: #0F4ACE; margin-bottom: 2px; text-align: left; } .new_cam_dash-snap-card.new_cam_dash-My-Communities .new_cam_dash-label { color: #3021A2; } .new_cam_dash-snap-card.new_cam_dash-Messages .new_cam_dash-label { color: #9F5000; } .new_cam_dash-snap-card .new_cam_dash-num { font-style: normal; font-weight: 700; font-size: 24px; line-height: 30px; color: #152650; } .new_cam_dash-snap-card .new_cam_dash-num small { font-style: normal; font-weight: 500; font-size: 12px; line-height: 16px; color: #939BA3; margin-left: 3px; } .new_cam_dash-snap-card .new_cam_dash-view { font-style: normal; font-weight: 600; font-size: 12px; line-height: 20px; color: #2563EB; margin-top: 23px; display: block; } .new_cam_dash-for-you-section { margin: 40px 0 18px; padding: 0px; } .new_cam_dash-for-you-section .new_cam_dash-section-title { margin: 0px; } .new_cam_dash-for-you-section .new_cam_dash-flex-info-for-you { display: flex; justify-content: space-between; gap: 10px; align-items: center; } .new_cam_dash-for-you-section .new_cam_dash-tabs { display: flex; gap: 6px; padding: 6px; width: fit-content; background: #FFFFFF; border: 1px solid #E4E8EF; border-radius: 26px; } .new_cam_dash-for-you-section .new_cam_dash-tabs button { border: none; background: transparent; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-style: normal; font-weight: 500; font-size: 14px; line-height: 20px; color: #878787; } .new_cam_dash-for-you-section .new_cam_dash-tabs button.new_cam_dash-active { background: #152650; border-radius: 20.5px; color: #FFFFFF; padding: 7px 20px; } .new_cam_dash-feed { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } .new_cam_dash-feed-card { padding: 20px; background: #FFFFFF; border: 1px solid #E4E8EF; border-radius: 17px; } .new_cam_dash-feed-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .new_cam_dash-feed-top .new_cam_dash-time-with-share { display: flex; gap: 18px; align-items: center; } .new_cam_dash-feed-tags { display: flex; align-items: center; gap: 8px; } .new_cam_dash-tag { padding: 6px 14px; font-style: normal; font-weight: 700; font-size: 10px; line-height: 14px; text-align: center; color: #007A55; background: #ECFDF5; border: 1px solid #A4F4CF; border-radius: 13.5px; white-space: nowrap; } .new_cam_dash-tag.new_cam_dash-pub { color: #155DFC; background: #EFF6FF; border: 1px solid #BEDBFF; border-radius: 13.5px; } .new_cam_dash-tag.new_cam_dash-gov { color: #B23C00; background: #FFFBEB; border: 1px solid #FEE685; border-radius: 13.5px; } .new_cam_dash-tag.new_cam_dash-tender { color: #432DD7; background: #EEF2FF; border: 1px solid #C6D2FF; border-radius: 13.5px; } .new_cam_dash-feed-tags .new_cam_dash-event-name { font-style: normal; font-weight: 400; font-size: 10px; line-height: 14px; color: #000000; display: flex; align-items: center; gap: 10px } .new_cam_dash-feed-tags .new_cam_dash-event-name .new_cam_dash-dot { width: 4px; height: 4px; background: black; border-radius: 50%; padding: 2px; } .new_cam_dash-feed-time { display: flex; align-items: end; gap: 10px; font-weight: 500; font-size: 13px; line-height: 18px; color: #152650; } .new_cam_dash-feed-card h3 { margin: 20px 0px; font-style: normal; font-weight: 500; font-size: 20px; line-height: 30px; color: #000000; } .new_cam_dash-feed-meta { display: flex; gap: 16px; margin-bottom: 18px; } .new_cam_dash-feed-meta .new_cam_dash-event-subtitle { font-style: normal; font-weight: 500; font-size: 12px; line-height: 16px; color: #152650; } .new_cam_dash-feed-meta .new_cam_dash-flex-meta-info { display: flex; align-items: center; gap: 6px; } .new_cam_dash-feed-meta .new_cam_dash-devider { border-right: 1px solid black } .new_cam_dash-feed-card p.new_cam_dash-desc { margin: 0 0 20px; font-style: normal; font-weight: 400; font-size: 12px; line-height: 20px; color: #000000; } .new_cam_dash-feed-bottom { display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 700; } .new_cam_dash-feed-bottom .new_cam_dash-view-all, .new_cam_dash-feed-bottom .new_cam_dash-register-now { font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; color: #2563EB; display: flex; align-items: center; cursor: pointer; } .new_cam_dash-feed-bottom .new_cam_dash-view-all svg, .new_cam_dash-feed-bottom .new_cam_dash-register-now svg { margin-left: 6px; margin-top: 4px; } .new_cam_dash-view-all-updates { text-align: center; margin-top: 26px; font-weight: 600; font-size: 14px; line-height: 20px; color: #0065CD; display: flex; justify-self: center } .new_cam_dash-view-all-updates a { display: flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; width: fit-content; } /* ===== Right column ===== */ .new_cam_dash-aside { overflow-y: auto; overflow-x: hidden; height: 100%; padding-right: 10px; box-sizing: border-box; -webkit-overflow-scrolling: touch; } /* Prevent inner elements from causing horizontal scroll */ .new_cam_dash-aside > * { max-width: 100%; box-sizing: border-box; overflow-x: hidden; } .new_cam_dash-aside img { max-width: 100%; height: 100%; display: block; } .new_cam_dash-aside h2 { margin: 0 0 20px; font-style: normal; font-weight: 600; font-size: 22px; line-height: 30px; color: #152650; } .new_cam_dash-cii-featured-images { display: flex; flex-direction: column; gap: 25px; } .new_cam_dash-cii-featured-images .new_cam_dash-image-container { height: 165px; } .new_cam_dash-cii-featured-images .new_cam_dash-image-container[onclick], .new_cam_dash-cii-featured-images .new_cam_dash-image-container[onclick] img { cursor: pointer !important; } .new_cam_dash-promo { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 14px; box-shadow: var(--shadow); position: relative; overflow: hidden; } .new_cam_dash-promo-body { padding: 16px; position: relative; } .new_cam_dash-promo .new_cam_dash-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: .4px; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; padding: 3px 9px; border-radius: 20px; } .new_cam_dash-promo h3 { margin: 0 0 6px; font-size: 16px; line-height: 1.25; } .new_cam_dash-promo p { margin: 0 0 12px; font-size: 12.5px; color: var(--sub); line-height: 1.5; } .new_cam_dash-promo .new_cam_dash-cta { font-size: 12.5px; font-weight: 700; color: var(--green); display: inline-flex; align-items: center; gap: 7px; } .new_cam_dash-promo .new_cam_dash-cta .new_cam_dash-arrow { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--green); color: #fff; flex-shrink: 0; } .new_cam_dash-promo.new_cam_dash-marketplace .new_cam_dash-cta, .new_cam_dash-promo.new_cam_dash-b2b .new_cam_dash-cta { color: #c9762a; } .new_cam_dash-promo.new_cam_dash-marketplace .new_cam_dash-cta .new_cam_dash-arrow, .new_cam_dash-promo.new_cam_dash-b2b .new_cam_dash-cta .new_cam_dash-arrow { background: #c9762a; } .new_cam_dash-promo.new_cam_dash-services .new_cam_dash-cta { color: var(--green); } .new_cam_dash-promo.new_cam_dash-services .new_cam_dash-cta .new_cam_dash-arrow { background: var(--green); } .new_cam_dash-promo.new_cam_dash-membership .new_cam_dash-cta { color: var(--purple); } .new_cam_dash-promo.new_cam_dash-membership .new_cam_dash-cta .new_cam_dash-arrow { background: var(--purple); } /* Full photo-style banner (hero illustration, drawn in CSS/SVG) */ .new_cam_dash-promo-banner { height: 112px; position: relative; overflow: hidden; } .new_cam_dash-promo-banner.new_cam_dash-westasia { background: linear-gradient(200deg, #0c3a52 0%, #12617f 55%, #2f9fb0 100%); } .new_cam_dash-promo-banner svg { position: absolute; inset: 0; width: 100%; height: 100%; } .new_cam_dash-promo-banner .new_cam_dash-eyebrow { position: absolute; top: 12px; left: 12px; margin: 0; background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(2px); } /* Small corner-tile illustration used on the icon-style cards */ .new_cam_dash-promo-tile-wrap { position: absolute; right: 14px; top: 14px; width: 64px; height: 64px; } .new_cam_dash-promo-tile-wrap .new_cam_dash-dots { position: absolute; inset: 0; background-image: radial-gradient(currentColor 1.3px, transparent 1.3px); background-size: 8px 8px; color: #d8dee8; -webkit-mask-image: linear-gradient(225deg, #000 30%, transparent 70%); mask-image: linear-gradient(225deg, #000 30%, transparent 70%); } .new_cam_dash-promo-tile { position: absolute; right: 0; bottom: 0; width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 14px rgba(16, 24, 40, .08); } .new_cam_dash-promo.new_cam_dash-marketplace .new_cam_dash-promo-tile { background: linear-gradient(150deg, #fde8c8, #f6c98a); } .new_cam_dash-promo.new_cam_dash-services .new_cam_dash-promo-tile { background: linear-gradient(150deg, #d7f3e3, #a9e4c4); } .new_cam_dash-promo.new_cam_dash-membership .new_cam_dash-promo-tile { background: linear-gradient(150deg, #e2ddfb, #c9befa); } .new_cam_dash-promo.new_cam_dash-b2b .new_cam_dash-promo-tile { background: linear-gradient(150deg, #ffe3c2, #ffc98f); } .new_cam_dash-promo.new_cam_dash-marketplace .new_cam_dash-promo-body, .new_cam_dash-promo.new_cam_dash-services .new_cam_dash-promo-body, .new_cam_dash-promo.new_cam_dash-membership .new_cam_dash-promo-body, .new_cam_dash-promo.new_cam_dash-b2b .new_cam_dash-promo-body { padding-right: 88px; } /* ===== Footer ===== */ .new_cam_dash-footer { /* grid-column: 1/-1; padding: 22px 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 60px; background: #FFFFFF; border-top: 1px solid #E4E8EF; border-radius: 0px; */ grid-column: 1 / -1; padding: 22px 28px; align-items: center; gap: 24px; background: #FFFFFF; border-top: 1px solid #E4E8EF; border-radius: 0px; display: grid; grid-template-columns: repeat(5, 1fr); } .new_cam_dash-footer .new_cam_dash-devider { border-right: 1px solid rgba(88, 94, 111, 0.22); height: 37px; } @media (max-width:767px) { .new_cam_dash-footer { flex-direction: column; align-items: flex-start; padding: 16px; gap: 14px; } .new_cam_dash-footer-social { margin-left: 0 !important; width: 100%; justify-content: space-between; } } .new_cam_dash-footer-item { display: flex; gap: 12px; align-items: center; justify-content: center; border-right: 1px solid rgba(88, 94, 111, 0.22); padding-right: 10px; } .new_cam_dash-footer-item:first-child { padding-left: 0px; justify-content: unset; } .new_cam_dash-footer-item .new_cam_dash-footer-info { display: flex; flex-direction: column; gap: 3px; } .new_cam_dash-footer-item span.new_cam_dash-title { display: block; font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; color: #000000; } .new_cam_dash-footer-item span.new_cam_dash-sub-title { font-style: normal; font-weight: 500; font-size: 10px; line-height: 16px; color: #585E6F; } .new_cam_dash-footer-social { margin-left: auto; display: flex; align-items: center; gap: 40px; } .new_cam_dash-footer-social span { font-style: normal; font-weight: 600; font-size: 14px; line-height: 20px; color: #565B6D; } .new_cam_dash-footer-social .new_cam_dash-icons { display: flex; gap: 14px; } .new_cam_dash-footer-social .new_cam_dash-icons a img { width: 30px; height: 30px; } /* ===== Custom tooltip (replaces native title tooltips) ===== */ .new_cam_dash-has-tip { position: relative; } .new_cam_dash-tip { position: absolute; left: calc(100% + 14px); top: 50%; transform: translate(-6px, -50%); background: #14161f; color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; padding: 7px 14px; border-radius: 24px; box-shadow: 0 8px 20px rgba(10, 14, 25, .22); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .15s ease, transform .15s ease; z-index: 999; } .new_cam_dash-tip::before { content: ""; position: absolute; left: -5px; top: 50%; transform: translateY(-50%); border-width: 5px 6px 5px 0; border-style: solid; border-color: transparent #14161f transparent transparent; } .new_cam_dash-has-tip:hover .new_cam_dash-tip, .new_cam_dash-has-tip:focus-visible .new_cam_dash-tip { opacity: 1; visibility: visible; transform: translate(0, -50%); } /* Sidebar tooltips only show when collapsed */ .new_cam_dash-sidebar .new_cam_dash-has-tip:hover .new_cam_dash-tip, .new_cam_dash-sidebar .new_cam_dash-has-tip:focus-visible .new_cam_dash-tip { opacity: 0; visibility: hidden; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-sidebar .new_cam_dash-has-tip:hover .new_cam_dash-tip, .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-sidebar .new_cam_dash-has-tip:focus-visible .new_cam_dash-tip { opacity: 1; visibility: visible; } /* Topbar icons (and hamburger) open their tooltip BELOW instead of to the side, so they never collide with the neighbouring icon or the avatar */ .new_cam_dash-tip.new_cam_dash-tip-down { left: 50%; top: calc(100% + 12px); transform: translate(-50%, -6px); } .new_cam_dash-tip.new_cam_dash-tip-down::before { left: 50%; top: -5px; transform: translateX(-50%); border-width: 0 6px 5px 6px; border-color: transparent transparent #14161f transparent; } .new_cam_dash-has-tip:hover .new_cam_dash-tip.new_cam_dash-tip-down, .new_cam_dash-has-tip:focus-visible .new_cam_dash-tip.new_cam_dash-tip-down { transform: translate(-50%, 0); } /* When sidebar is collapsed, show sidebar tooltips to the right of icons (avoid tip-down positioning which places them below) */ .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-sidebar .new_cam_dash-has-tip .new_cam_dash-tip { left: calc(100% + 12px); top: 50%; transform: translate(0, -50%); } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-sidebar .new_cam_dash-has-tip .new_cam_dash-tip::before { left: -5px; top: 50%; transform: translateY(-50%); border-width: 5px 6px 5px 0; border-color: transparent #14161f transparent transparent; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-sidebar .new_cam_dash-has-tip:hover .new_cam_dash-tip.new_cam_dash-tip-down, .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-sidebar .new_cam_dash-has-tip:focus-visible .new_cam_dash-tip.new_cam_dash-tip-down { left: calc(100% + 12px); top: 50%; transform: translate(0, -50%); } /* Stronger rules for collapsed sidebar tooltips (higher specificity) */ .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-layout .new_cam_dash-sidebar .new_cam_dash-nav .new_cam_dash-has-tip:hover > .new_cam_dash-tip, .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-layout .new_cam_dash-sidebar .new_cam_dash-nav .new_cam_dash-has-tip:focus-visible > .new_cam_dash-tip { left: calc(100% + 12px) !important; top: 50% !important; transform: translate(0, -50%) !important; opacity: 1 !important; visibility: visible !important; z-index: 10000 !important; pointer-events: auto !important; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-layout .new_cam_dash-sidebar .new_cam_dash-nav .new_cam_dash-has-tip > .new_cam_dash-tip::before { left: -5px !important; top: 50% !important; transform: translateY(-50%) !important; border-width: 5px 6px 5px 0 !important; border-color: transparent #14161f transparent transparent !important; } /* ===== Mobile hamburger + sidebar overlay ===== */ .new_cam_dash-hamburger { display: none; width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--line); cursor: pointer; color: #3a4453; } .new_cam_dash-sidebar-close { display: none; position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; align-items: center; justify-content: center; background: var(--bg); border: 1px solid var(--line); color: #3a4453; cursor: pointer; z-index: 6; } .new_cam_dash-sidebar-backdrop { position: fixed; inset: 64px 0 0 0; background: rgba(8, 12, 22, .45); z-index: 30; opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s ease; } .new_cam_dash-sidebar-backdrop.new_cam_dash-show { opacity: 1; visibility: visible; } @media (max-width:1199px) { html, body { height: 100vh; overflow: hidden; font-family: "Inter", sans-serif !important; } .new_cam_dash-app { height: 100vh; overflow: hidden; } .new_cam_dash-layout { overflow: hidden; } .new_cam_dash-main { grid-template-columns: 1fr !important; height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; align-content: start; padding: 20px 24px 0px; } .new_cam_dash-content-col, .new_cam_dash-aside { width: 100%; max-width: none; height: auto; overflow: visible; padding-right: 0; } .new_cam_dash-content-col { border-right: 0; } .new_cam_dash-main .new_cam_dash-footer { margin: 0 -24px -40px; } .new_cam_dash-cii-featured-images { display: grid; grid-template-columns: repeat(3, 1fr); } .new_cam_dash-cii-featured-images .new_cam_dash-image-container { height: 130px; } .new_cam_dash-footer { gap: 10px } .new_cam_dash-footer-info-icon img { height: 18px; } .new_cam_dash-footer-item span.new_cam_dash-title { font-size: 12px; } .new_cam_dash-footer-item span.new_cam_dash-sub-title { font-size: 10px; } } @media (max-width:767px) { html, body { height: 100vh; overflow: hidden; } .new_cam_dash-app { height: 100vh; overflow: hidden; padding-top: 64px; } .new_cam_dash-topbar { position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 40; } .new_cam_dash-layout { display: grid; grid-template-columns: 1fr; overflow: hidden; } .new_cam_dash-main { height: 100%; max-height: 100%; overflow-y: auto; overflow-x: hidden; } .new_cam_dash-content-col, .new_cam_dash-aside { height: auto; overflow: visible; } .new_cam_dash-hamburger { display: flex; } .new_cam_dash-brand .new_cam_dash-brand-text { display: inline; } .new_cam_dash-brand { width: auto; } .new_cam_dash-app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; } .new_cam_dash-app.new_cam_dash-collapsed { grid-template-columns: 1fr; } .new_cam_dash-sidebar { position: fixed; top: 64px; left: 0; bottom: 0; width: 260px; padding: 18px 14px 16px; z-index: 35; transform: translateX(-100%); box-shadow: 0 16px 44px rgba(0, 0, 0, .25); transition: transform .3s ease; align-items: stretch !important; } .new_cam_dash-app.new_cam_dash-sidebar-open .new_cam_dash-sidebar { transform: translateX(0); } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-sidebar { align-items: stretch; } .new_cam_dash-sidebar-close { display: flex; } .new_cam_dash-sidebar .new_cam_dash-nav-toggle { display: none; } .new_cam_dash-sidebar > .new_cam_dash-nav:first-of-type { margin-top: 34px; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-nav a { justify-content: flex-start; width: auto; padding: 11px 12px; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-nav .new_cam_dash-label { display: inline; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-brand-text { display: inline; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-help-box { display: flex; } .new_cam_dash-help-fab { display: none !important; } .new_cam_dash-footer { grid-template-columns: repeat(3, 1fr); row-gap: 22px; column-gap: 9px; } .new_cam_dash-footer-item { justify-content: unset; padding-right: 10px; border-right: 0; } .new_cam_dash-brand { border-right: 0px; } .new_cam_dash-cii-featured-images { gap: 10px; grid-template-columns: repeat(2, 1fr); } .new_cam_dash-cii-featured-images .new_cam_dash-image-container { height: 150px; } .new_cam_dash-aside img { width: 100%; } } @media (max-width:500px) { .new_cam_dash-cii-featured-images { grid-template-columns: repeat(1, 1fr); } .new_cam_dash-cii-featured-images .new_cam_dash-image-container { height: 240px; } } @media (max-width:375px) { .new_cam_dash-cii-featured-images .new_cam_dash-image-container { height: 180px; } } @media (max-width:575px) { .new_cam_dash-footer { display: grid; grid-template-columns: 1fr; } .new_cam_dash-footer-item { justify-content: left; } .new_cam_dash-footer-item:first-child { justify-content: left; } .new_cam_dash-footer-social { justify-content: end; } .new_cam_dash-for-you-section .new_cam_dash-tabs button { padding: 8px 10px; } } @media (max-width:980px) { .new_cam_dash-main { grid-template-columns: minmax(0, 1fr) minmax(210px, 260px); gap: 16px; } } @media (max-width:640px) { .new_cam_dash-snapshot { grid-template-columns: 1fr; } .new_cam_dash-topbar { gap: 12px; padding: 0 14px; } .new_cam_dash-search { display: none; } .new_cam_dash-user-chip .new_cam_dash-uname { display: none; } .new_cam_dash-feed-tags { flex-wrap: wrap; } } @media (max-width:530px) { .new_cam_dash-for-you-section .new_cam_dash-flex-info-for-you { flex-direction: column; align-items: flex-start; } .new_cam_dash-for-you-section .new_cam_dash-tabs { width: 100%; flex-wrap: wrap; gap: 4px; } } /* ====================================================== SIDEBAR SUB-MENU ACCORDION ====================================================== */ .new_cam_dash-has-submenu > a { cursor: pointer; } .new_cam_dash-submenu-caret { margin-left: auto; flex-shrink: 0; transition: transform 0.25s ease; opacity: 0.45; width: 12px; height: 12px; } .new_cam_dash-has-submenu.sb-open > a .new_cam_dash-submenu-caret { transform: rotate(180deg); opacity: 0.9; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-submenu-caret { display: none; } .new_cam_dash-submenu { list-style: none; margin: 0; padding: 0; overflow: hidden; max-height: 0; transition: max-height 0.3s ease; } .new_cam_dash-has-submenu.sb-open .new_cam_dash-submenu { max-height: 1200px; } .new_cam_dash-app.new_cam_dash-collapsed .new_cam_dash-submenu { max-height: 0 !important; visibility: hidden; } .new_cam_dash-submenu > li { display: none; } .new_cam_dash-submenu > li.sb-always-show { display: list-item; } .new_cam_dash-submenu > li > a { display: block; padding: 7px 14px 7px 42px !important; font-size: 12.5px !important; color: #4B5563 !important; font-weight: 400 !important; text-decoration: none; border-radius: 6px; line-height: 1.4; cursor: pointer; transition: background 0.15s, color 0.15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .new_cam_dash-submenu > li > a:hover { background: rgba(37,99,235,0.07); color: #1F2F6D !important; } .new_cam_dash-submenu > li.sb-active > a, .new_cam_dash-submenu > li > a.sb-active { background: rgba(37,99,235,0.12) !important; color: #1F2F6D !important; font-weight: 600 !important; } /* ====================================================== PROFILE DROPDOWN ====================================================== */ .new_cam_dash-user-chip { position: relative; cursor: pointer; user-select: none; } .new_cam_dash-user-chip .user-name { font-style: normal; font-weight: 500; font-size: 16px; line-height: 20px; color: #000000; margin-bottom: 0px; } .sb-profile-chevron { transition: transform 0.2s ease; opacity: 0.6; flex-shrink: 0; } .new_cam_dash-user-chip.sb-pd-open .sb-profile-chevron { transform: rotate(180deg); opacity: 1; } .sb-profile-dropdown { position: absolute; top: calc(100% + 12px); right: 0; background: #fff; border: 1px solid #E5E7EB; border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,0.13); width: 230px; z-index: 9999; display: none; overflow: hidden; animation: sbPdFadeIn 0.18s ease; } .sb-profile-dropdown.sb-pd-open { display: block; } @keyframes sbPdFadeIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .sb-pd-header { padding: 14px 16px 12px; background: linear-gradient(135deg, #1F2F6D 0%, #2563EB 100%); display: flex; align-items: center; gap: 10px; } .sb-pd-avatar-lg { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.2); color: #fff; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: 0.04em; } .sb-pd-name { color: #fff; font-size: 13px; font-weight: 600; line-height: 1.3; max-width: 155px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-pd-type { color: rgba(255,255,255,0.7); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; } .sb-pd-body { padding: 6px 0; } .sb-pd-body a { display: flex; align-items: center; gap: 9px; padding: 9px 16px; font-size: 13px; color: #374151; text-decoration: none; cursor: pointer; transition: background 0.14s; } .sb-pd-body a:hover { background: #F3F4F6; color: #1F2F6D; } .sb-pd-body a svg { opacity: 0.65; flex-shrink: 0; } .sb-pd-divider { height: 1px; background: #F3F4F6; margin: 4px 0; } .sb-pd-logout { color: #DC2626 !important; } .sb-pd-logout:hover { background: #FEF2F2 !important; color: #DC2626 !important; } .sb-pd-logout svg { color: #DC2626; }