/* ===================================
FIGMA-EXACT IMPLEMENTATION
Crolync Portal Login Page
=================================== */
/* CSS Custom Properties - Global Design System */
:root { /* ===== COLORS ===== */
--primary-color: #3d405b; --secondary-color: #9bcd5b; --accent-color: #e08c5f; --background-color: #fefdf4; --surface-color: #ffffff; --text-primary: #221e44; --text-secondary: #3d405b; --text-muted: #666666; --text-light: #ffffff; --border-color: #e5e5e5; /* From first set */ --border-color-alt: #E0DAC1; /* From second set */ --shadow-color: rgba(99, 99, 99, 0.2); --focus-color: #4a90e2; --success-color: #9bcd5b; --warning-color: #f4f1de; --footer-bg: #221e44; --footer-bottom-bg: #3d405b; --sidebar-active: #B6BADE; --complete-status: #221e44; /* Additional from Figma colors */ --primary-bg: #F9F6E9; --white: #FFFFFF; --dark-text: #221E44; --accent-green: #9BCD5B; --accent-green-hover: #81B29A; --blue-link: #1F7FC3; /* ===== TYPOGRAPHY ===== */ --font-primary: acumin-pro,sans-serif; --font-display: acumin-pro,sans-serif; --button-text-lg-font-family: acumin-pro,sans-serif; --button-text-lg-font-weight: 700; --button-text-lg-font-size: 18px; --button-text-lg-letter-spacing: 0px; --button-text-lg-line-height: 22px; --button-text-lg-font-style: normal; --button-text-sm-font-family: acumin-pro,sans-serif; --button-text-sm-font-weight: 700; --button-text-sm-font-size: 16px; --button-text-sm-letter-spacing: 0px; --button-text-sm-line-height: 22px; --button-text-sm-font-style: normal; --sidenav-text-unselected-font-family: acumin-pro,sans-serif; --sidenav-text-unselected-font-weight: 400; --sidenav-text-unselected-font-size: 18px; --sidenav-text-unselected-letter-spacing: 0px; --sidenav-text-unselected-line-height: 24px; --sidenav-text-unselected-font-style: normal; --org-sidebar-font-family: acumin-pro,sans-serif; --org-sidebar-font-weight: 700; --org-sidebar-font-size: 16px; --org-sidebar-letter-spacing: 0px; --org-sidebar-line-height: 21px; --org-sidebar-font-style: normal; --block-title-font-family: acumin-pro,sans-serif; --block-title-font-weight: 400; --block-title-font-size: 24px; --block-title-letter-spacing: 0px; --block-title-line-height: 30px; --block-title-font-style: normal; /* ===== FONT SIZES ===== */ --font-size-xs: 12px; /* smaller of all sets */ --font-size-sm: 16px; --font-size-base: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 30px; --font-size-4xl: 36px; /* ===== FONT WEIGHTS ===== */ --font-weight-regular: 400; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* ===== LINE HEIGHTS ===== */ --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.6; /* ===== SPACING ===== */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 20px; --space-xl: 24px; --space-2xl: 32px; --space-3xl: 40px; --space-4xl: 48px; --space-5xl: 64px; /* Alt naming from Figma spacing */ --spacing-xs: 4px; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 24px; --spacing-xl: 32px; --spacing-xxl: 48px; --spacing-3xl: 64px; --spacing-4xl: 80px; /* ===== BORDER RADIUS ===== */ --radius-sm: 2px; /* from first set */ --radius-md: 10px; --radius-lg: 20px; --radius-xl: 16px; --radius-full: 100px; /* ===== SHADOWS ===== */ --shadow-sm: 0px 2px 4px rgba(99, 99, 99, 0.1); --shadow-md: 0px 2px 8px rgba(99, 99, 99, 0.2); --shadow-lg: 0px 2px 8px rgba(99, 99, 99, 0.2); --shadow-hover: 0px 8px 24px rgba(99, 99, 99, 0.2); --shadow-focus: 0 0 0 3px rgba(155, 205, 91, 0.1); --drop-shadow: 0px 2px 8px 0px rgba(99, 99, 99, 0.2); /* ===== LAYOUT ===== */ --sidebar-width: 310px; --header-height: 82px; --mob-header-height: 68px; --container-max-width: 1920px; /* ===== BREAKPOINTS ===== */ --breakpoint-xs: 575px; --breakpoint-sm: 768px; --breakpoint-md: 1024px; --breakpoint-lg: 1200px; /* ===== TRANSITIONS ===== */ --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; /* ===== Z-INDEX ===== */ --z-dropdown: 1000; --z-sticky: 1020; --z-fixed: 1030; --z-modal-backdrop: 1040; --z-modal: 1050; --z-popover: 1060; --z-tooltip: 1070;
}
/* Reset and Base Styles */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { font-size: 16px; scroll-behavior: smooth; }
body { font-family: var(--font-primary); background: var(--background-color); color: var(--dark-text); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100vh; margin: 0; height: 100%; overflow-x: hidden; }
/* Generic focus style (kept for safety; reset already sets focus-visible) */
button:focus-visible { outline: 2px solid #4a90e2 !important; outline: -webkit-focus-ring-color auto 5px !important; }
a { text-decoration: none; color:var(--accent-green); }
a:hover { text-decoration: none; color:var(--accent-color); }
/* ==============================================
4) Legacy Page Styles (from top-level style.css)
Note: Placed BEFORE utilities/components/layout so they don't override newer styles
============================================== */
.element-home { position: relative; width: 1920px; height: 1563px; background-color: #fefdf4; }
/* ==============================================
5) Utilities
Source: css/utilities.css
============================================== */
/* Utility Classes */
/* Display */
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }
.d-grid { display: grid !important; }
/* Flexbox */
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.justify-start { justify-content: flex-start !important; }
.justify-center { justify-content: center !important; }
.justify-end { justify-content: flex-end !important; }
.justify-between { justify-content: space-between !important; }
.justify-around { justify-content: space-around !important; }
.align-start { align-items: flex-start !important; }
.align-center { align-items: center !important; }
.align-end { align-items: flex-end !important; }
.align-stretch { align-items: stretch !important; }
.flex-1 { flex: 1 !important; }
.flex-auto { flex: auto !important; }
.flex-none { flex: none !important; }
/* Spacing */
.m-0 { margin: 0 !important; }
.m-auto { margin: auto !important; }
.mt-auto { margin-top: auto !important; }
.mr-auto { margin-right: auto !important; }
.mb-auto { margin-bottom: auto !important; }
.ml-auto { margin-left: auto !important; }
.p-0 { padding: 0 !important; }
.p-xs { padding: var(--space-xs) !important; }
.p-sm { padding: var(--space-sm) !important; }
.p-md { padding: var(--space-md) !important; }
.p-lg { padding: var(--space-lg) !important; }
.p-xl { padding: var(--space-xl) !important; }
.p-2xl { padding: var(--space-2xl) !important; }
.p-3xl { padding: var(--space-3xl) !important; }
.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-sm { padding-left: var(--space-sm) !important; padding-right: var(--space-sm) !important; }
.px-md { padding-left: var(--space-md) !important; padding-right: var(--space-md) !important; }
.px-lg { padding-left: var(--space-lg) !important; padding-right: var(--space-lg) !important; }
.px-xl { padding-left: var(--space-xl) !important; padding-right: var(--space-xl) !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-sm { padding-top: var(--space-sm) !important; padding-bottom: var(--space-sm) !important; }
.py-md { padding-top: var(--space-md) !important; padding-bottom: var(--space-md) !important; }
.py-lg { padding-top: var(--space-lg) !important; padding-bottom: var(--space-lg) !important; }
.py-xl { padding-top: var(--space-xl) !important; padding-bottom: var(--space-xl) !important; }
.gap-xs { gap: var(--space-xs) !important; }
.gap-sm { gap: var(--space-sm) !important; }
.gap-md { gap: var(--space-md) !important; }
.gap-lg { gap: var(--space-lg) !important; }
.gap-xl { gap: var(--space-xl) !important; }
.gap-2xl { gap: var(--space-2xl) !important; }
.gap-3xl { gap: var(--space-3xl) !important; }
/* Radio Button Group */
.radio-group { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; justify-content: center; }
.radio-item { display: flex; align-items: center; }
.radio-item input[type="radio"] { display: none; }
.radio-label { display: flex; align-items: center; gap: var(--space-md); padding: 8px 15px; background: var(--surface-color); border: 2px solid var(--text-secondary); border-radius: var(--radius-full); cursor: pointer; transition: var(--transition-normal); min-height: 45px; user-select: none; }
.radio-label:hover { background: var(--background-color); box-shadow: var(--shadow-sm); }
.radio-custom { position: relative; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; }
.radio-dot { width: 25px; height: 25px; border-radius: var(--radius-full); background: var(--warning-color); transition: var(--transition-normal); }
.radio-fill { position: absolute; top: 4px; left: 4px; width: 17px; height: 17px; border-radius: var(--radius-full); background: var(--accent-color); opacity: 0; transform: scale(0.8); transition: all var(--transition-normal); }
.radio-item input[type="radio"]:checked + .radio-label .radio-fill { opacity: 1; transform: scale(1); }
.radio-item input[type="radio"]:checked + .radio-label { border-color: var(--secondary-color); background: var(--background-color); }
/* .radio-item input[type="radio"]:checked + .radio-label .option-text { font-weight: var(--font-weight-semibold); color: var(--text-secondary); } */
/* Text */
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-justify { text-align: justify !important; }
.text-primary { color: var(--text-primary) !important; }
.text-secondary { color: var(--text-secondary) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-light { color: var(--text-light) !important; }
.text-success { color: var(--success-color) !important; }
.text-accent { color: var(--accent-color) !important; }
.font-regular { font-weight: var(--font-weight-regular) !important; }
.font-medium { font-weight: var(--font-weight-medium) !important; }
.font-semibold { font-weight: var(--font-weight-semibold) !important; }
.font-bold { font-weight: var(--font-weight-bold) !important; }
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }
.text-base { font-size: var(--font-size-base) !important; }
.text-lg { font-size: var(--font-size-lg) !important; }
.text-xl { font-size: var(--font-size-xl) !important; }
.text-2xl { font-size: var(--font-size-2xl) !important; }
/* Position */
.position-static { position: static !important; }
.position-relative { position: relative !important; }
.position-absolute { position: absolute !important; }
.position-fixed { position: fixed !important; }
.position-sticky { position: sticky !important; }
/* Width & Height */
.w-full { width: 100% !important; }
.w-auto { width: auto !important; }
.h-full { height: 100% !important; }
.h-auto { height: auto !important; }
/* Border Radius */
.rounded-none { border-radius: 0 !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-full { border-radius: var(--radius-full) !important; }
/* Shadows */
.shadow-none { box-shadow: none !important; }
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }
/* Accessibility */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.skip-link { position: absolute; top: -40px; left: 6px; background: var(--primary-color); color: var(--text-light); padding: 8px; text-decoration: none; border-radius: var(--radius-sm); z-index: var(--z-modal); transition: top var(--transition-fast); }
.skip-link:focus { top: 6px; }
/* Page Container */
.page-container { min-height: 100vh; display: flex; flex-direction: column; }
/* ===================================
HEADER STYLES - EXACT FIGMA MATCH
=================================== */
.main-header { background: var(--white); position: relative; z-index: 100; border-bottom: 1px solid var(--border-color); transition: all 0.2s ease-out; will-change: transform, background, box-shadow; }
/* Sticky Header */
.main-header.sticky { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; box-shadow: var(--shadow-lg); backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.95); transform: translateZ(0); /* Force hardware acceleration */ }
/* Body padding when header is sticky */
/* body.header-sticky {
padding-top: 79px;
transition: padding-top 0.2s ease-out;
} */
.main-header .container { max-width: 100%; margin: 0; }
.header-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 18px 0; height: 100%; width: 100%; }
/* Container - Standard Practice */
.container { max-width: 1200px; margin: 0 auto; padding: 0 var(--spacing-lg); width: 100%; }
.container-fluid { max-width: 100%; margin: 0 auto; padding: 0 var(--spacing-lg); width: 100%; }
.logo-section .logo { height: 39px; width: auto; }
/* Desktop Navigation */
.desktop-nav { display: flex; }
.nav-list { display: flex; list-style: none; gap: 56px; align-items: center; }
.nav-link { font-family: var(--font-primary); font-weight: 700; font-size: 16px; line-height: 3em; color: var(--dark-text); text-decoration: none; display: flex; align-items: center; gap: 6px; transition: var(--transition-fast); }
.nav-link:hover { color: var(--accent-green); }
.dropdown-icon { width: 10px; height: 13px; }
/* Desktop Navigation Dropdown */
.nav-item.has-dropdown { position: relative; }
.submenu { position: absolute; top: 100%; left: 0; background: var(--white); min-width: 200px; box-shadow: var(--shadow-lg); border-radius: 8px; padding: var(--spacing-sm) 0; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all var(--transition-normal); z-index: 1000; list-style: none; }
.nav-item.has-dropdown:hover .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu-item { margin: 0; }
.submenu-link { display: block; padding: var(--spacing-sm) var(--spacing-lg); color: var(--dark-text); text-decoration: none; font-family: var(--font-primary); font-weight: 500; font-size: 16px; transition: var(--transition-fast); border-bottom: 1px solid var(--border-light); }
.submenu-link:hover {/* background: var(--primary-bg); */
color: var(--accent-green); }
.submenu-item:last-child .submenu-link { border-bottom: none; }
.nav-item.has-dropdown svg.dropdown-icon{width: 7px;height: 10px;}
/* Header Actions */
.header-actions { display: flex; gap: var(--spacing-md); align-items: center; }
.header-actions .btn, .footer-actions .btn { font-size: 16px; line-height: 1.37; }
/* ===================================
NEW HEADER STYLES - EXACT FIGMA MATCH
=================================== */
/* Header */
.portal-header.main-header { position: relative; top: auto; background-color: var(--surface-color); border-bottom: 1px solid var(--border-color); z-index: var(--z-sticky); height: var(--header-height); }
.portal-header.main-header .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 0 var(--space-4xl); height: 100%; max-width: var(--container-max-width); margin: 0 auto; }
.portal-header.main-header .header-content { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; width: 100%; }
.portal-header.main-header .logo-section { display: flex; flex-wrap: wrap; align-items: center; }
.portal-header.main-header .logo-section a {display: inline-block;font-size: 0;}
.portal-header.main-header .logo { width: 170px; height: 39px; }
/* Post-Login Header Actions */
.portal-header.main-header .nav-button-right { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
/* Profile Icon */
.portal-header.main-header .profile-icon { width: 42px; height: 42px; border-radius: 50%; background-color: #E08C5F; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background-color var(--transition-normal); }
.portal-header.main-header .profile-icon:hover { background-color: #D67B4E; }
.portal-header.main-header .profile-avatar { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; }
.portal-header.main-header .profile-avatar svg { width: 24px; height: 24px; }
/* ===================================
GLOBAL BUTTON SYSTEM
=================================== */
/* Base Button Styles */
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 7px 40px; height: auto; border-radius: 100px; font-family: acumin-pro,sans-serif, var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.2222222222222223; text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: all var(--transition-fast); user-select: none; position: relative; overflow: hidden; cursor: pointer; }
.btn:hover:not(:disabled) { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
/* .btn:focus { outline: 2px solid var(--accent-green); outline-offset: 2px; } */
/* Primary Button - Green Background (Button One from Figma) */
.btn-primary { background: var(--secondary-color); color: var(--primary-color); border-color: var(--secondary-color);cursor: pointer; }
.btn-primary:hover { background: var(--primary-color); color: var(--white);; border-color: var(--primary-color); }
.btn-primary:active { background: var(--primary-color); color: var(--white);; border-color: var(--primary-color); }
/* Secondary Button - Alternative CTA */
.btn-secondary { background: var(--primary-color); color: var(--white); border-color: var(--primary-color);cursor: pointer; }
.btn-secondary:hover { background: var(--white); border-color: var(--primary-color); color:var(--primary-color); }
.btn-secondary:active { background: var(--white); border-color: var(--primary-color); color:var(--primary-color); }
/* Outline Button - Green Border (Button Two from Figma) */
.btn-outline { background: #FFFFFF; color: var(--primary-color); border-color: var(--secondary-color); border-width: 2px;cursor: pointer; }
.btn-outline:hover { background: var(--primary-color); color: var(--white); border-color: var(--primary-color); }
.btn-outline:active { background: var(--primary-color); color: var(--white); border-color: var(--primary-color); }
/* Ghost Button - Minimal styling */
.btn-ghost { background: transparent; color: var(--dark-text); border-color: transparent; padding: 0 var(--spacing-md);cursor: pointer; }
.btn-ghost:hover { background: rgba(155, 205, 91, 0.1); color: var(--accent-green); }
/* Light Button - For dark backgrounds */
.btn-light { background: var(--white); color: var(--dark-text); border-color: var(--white);cursor: pointer; }
.btn-light:hover { background: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.9); box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3); }
.btn-light:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(255, 255, 255, 0.2); }
/* Outline Light Button - For dark backgrounds */
.btn-outline-light { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.3);cursor: pointer; }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--white); color: var(--white); }
.btn-outline-light:active { transform: translateY(0); }
/* Button Sizes */
.btn-sm { padding: 7px 32px; font-size: 14px; }
.btn-lg { padding: 12px 48px; font-size: 20px; }
.btn-xl { padding: 14px 56px; font-size: 22px; }
/* Full Width Button */
.btn-block { width: 100%; justify-content: center; }
/* Button with Icon */
.btn-icon { gap: var(--spacing-sm); }
.btn-icon-only { width: 42px; padding: 0; }
.btn-icon-only.btn-sm { width: 36px; }
.btn-icon-only.btn-lg { width: 48px; }
.btn-icon-only.btn-xl { width: 56px; }
/* Mobile Menu Button */
.mobile-menu-btn { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 0; }
/* Mobile Menu - Hidden by default on desktop */
.mobile-menu { display: none; }
.hamburger-line { width: 24px; height: 2px; background: var(--dark-text); transition: all 0.3s ease; transform-origin: center; position: relative; }
/* Hamburger to Cross Animation */
.mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(3px, 2px); }
.mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; transform: scale(0); }
.mobile-menu-btn[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }
/* Smooth transition back to hamburger */
.mobile-menu-btn[aria-expanded="false"] .hamburger-line:nth-child(1), .mobile-menu-btn[aria-expanded="false"] .hamburger-line:nth-child(3) { transform: rotate(0) translate(0, 0); }
.mobile-menu-btn[aria-expanded="false"] .hamburger-line:nth-child(2) { opacity: 1; transform: scale(1); }
/* ===================================
MAIN CONTENT - UPDATED FIGMA LAYOUT
=================================== */
#main-content.main-content { flex: 1; background: var(--primary-bg); position: relative; }
/* Brand Graphic - Updated Figma Dimensions */
.brand-graphic { position: relative; width: 119.81px; height: 120.83px; }
.brand-image { width: 100%; height: 100%; display: block; }
/* Logo + Welcome Message Section */
.logo-welcome-section { display: flex; flex-direction: column; align-items: center; gap: 40px;text-align: center; }
/* Welcome Title - Updated Figma Typography */
.welcome-title { font-family: acumin-pro,sans-serif, var(--font-primary); font-weight: 600; font-size: 36px; line-height: normal; letter-spacing: 0.28px; color: var(--text-primary); text-align: center; width: 100%; }
p.welcome-subtitle {
font-size: 15px;
font-weight: 700;
}
/* Field Block Section */
.field-block { display: flex; flex-direction: column; gap: 15px; width: 100%; }
/* Form Container - Updated */
.form-container { width: 100%; background: transparent; position: relative; }
/* ===================================
FORM STYLES - EXACT FIGMA MATCH
=================================== */
.login-form { width: 100%; display: flex; flex-direction: column; position: relative; }
/* Form Groups - Updated for Figma Layout */
.form-group { display: flex; flex-direction: column; gap: 10px; width: 100%; }
/* Form Labels - Updated Figma Typography */
.form-label { font-family: acumin-pro,sans-serif, var(--font-primary); font-weight: 400; font-size: 16px; line-height: 1.75; letter-spacing: 0.28px; color: #3D405B; width: 100%; height: 22px; }
.form-label.password-label { font-size: 15px; line-height: 1.8666666666666667; }
/* Input Wrapper - Updated for Figma Layout */
.input-wrapper { position: relative; display: flex; align-items: center; gap: 20px; padding: 10px 20px; width: 100%; background: #FFFFFF; border: 1.5px solid #3D405B; border-radius: 100px; }
/* Form Inputs - Updated Figma Styling */
.form-input { flex: 1; background: transparent; border: none; padding: 0; font-family: acumin-pro,sans-serif, var(--font-primary); font-size: 18px; font-weight: 400; line-height: 1.5555555555555556; letter-spacing: 0.36px; color: #3D405B; outline: none; }
.form-input::placeholder { color: #B8B7BE; opacity: 1; }
.input-wrapper:focus-within { border-color: var(--accent-color); background: #FFFFFF; }
.input-wrapper:hover:not(:focus-within) { border-color: rgba(224, 140, 95, 0.5); }
.input-wrapper:focus-within .input-icon path { fill: var(--accent-color) !important; }
.input-wrapper:focus-within .input-icon { color: var(--accent-color); }
/* Input Icons - Exact Figma Positioning */
.input-icon { position: absolute; left: 17px; top:15px; width: 19.75px; height: 16.99px; pointer-events: none; z-index: 2; }
.input-icon.password-icon { width: 21.5px; height: 13.5px; left: 18px; }
/* Password Toggle */
.password-toggle { position: absolute; right: 18px; width: 21.08px; height: 18.04px; background: none; border: none; cursor: pointer; opacity: 0.6; transition: var(--transition-fast); }
.password-toggle:hover { opacity: 1; }
/* Password Field Container - Special Styling */
.password-field-container { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 10px; width: 100%; }
/* Form Actions - Updated Figma Positioning */
.form-actions { display: flex; justify-content: flex-end; width: 100%; }
.forgot-password-link { font-family: acumin-pro, sans-serif, sans-serif; font-weight: 400; font-size: 14px; line-height: 2; letter-spacing: 0.28px; text-align: center; color: #1F7FC3; text-decoration: underline; transition: color 0.3s ease; }
.forgot-password-link:hover { color: var(--accent-color); text-decoration: underline; }
/* Button Block - Figma Layout */
.button-block { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 240px; }
/* Submit Button - Updated Figma Styling */
.btn-submit { min-width:240px;cursor: pointer; width: 100%; background: #9BCD5B; color: #3D405B; font-family: acumin-pro,sans-serif, var(--font-primary); font-size: 18px; font-weight: 700; line-height: 1.2222222222222223; border-radius: 100px; border: none; cursor: pointer; transition: var(--transition-fast); padding: 10px 40px; display: flex; justify-content: center; align-items: center; gap: 10px; }
.btn-submit:hover:not(:disabled) { background: #3D405B; color: #FFFFFF; }
.commonForm button:hover:not(:disabled), button.btn:hover:not(:disabled), input[type="submit"]:hover:not(:disabled) { box-shadow: var(--shadow-sm); filter: brightness(0.98); }
.btn-submit:disabled { opacity: 0.6; cursor: not-allowed; }
/* Staff Login Link - Updated Figma Typography */
.staff-login-link { font-family: acumin-pro,sans-serif, var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.5555555555555556; letter-spacing: 0.28px; color: #3D405B; text-decoration: underline; transition: var(--transition-fast); text-align: center; }
.staff-login-link:hover { color: var(--accent-color); text-decoration: underline; }
/* ===================================
PRIVACY SECTION - EXACT FIGMA MATCH
=================================== */
.privacy-section { position: absolute; bottom: 168px; left: 50%; transform: translateX(-50%); text-align: center; }
.privacy-notice { font-family: acumin-pro,sans-serif, var(--font-primary); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0.28px; color: #3D405B; text-align: center; width: 100%; }
.privacy-notice a { color: var(--blue-link); text-decoration: underline; font-size: inherit; }
.privacy-notice a:hover { color: var(--accent-green); }
.privacy-notice p { margin: 0; }
.privacy-notice p a { color: var(--accent-green); text-decoration: underline; transition: var(--transition-fast); }
.privacy-notice p a:hover { color: var(--accent-green-hover); }
.privacy-notice p .privacy-link { color: var(--accent-green); }
.privacy-notice p .privacy-link:hover { color: var(--accent-green-hover) !important; }
/* ===================================
FOOTER STYLES - EXACT FIGMA MATCH
=================================== */
.main-footer { background: var(--footer-bg); color: var(--white); margin-top: auto; min-height: 400px; padding-top: 40px; display: flex; flex-direction: column; flex-wrap: wrap; }
.footer-content { margin: 0 40px; max-width: 100%; height: 100%; display: flex; flex-direction: column; flex-wrap: wrap; }
/* Footer Top */
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; margin-bottom: 18px; }
.footer-logo-section .footer-logo { height: 39px; width: auto; }
/* Footer Navigation */
.footer-nav { flex: 1; margin: 0 var(--spacing-xxl); }
.footer-nav-list { display: flex; list-style: none; gap: var(--spacing-xxl); justify-content: center; }
.footer-nav-link { font-family: var(--font-primary); font-weight: 700; font-size: 16px; line-height: 3em; color: var(--white); text-decoration: none; transition: var(--transition-fast); }
.footer-nav-link:hover { color: var(--accent-green); }
/* Footer Actions */
.footer-actions { display: flex; flex-wrap: wrap; gap: var(--spacing-md); }
.btn-outline-light { background: #FFFFFF; color: #3D405B; border: 2px solid #9BCD5B; padding: 7px 40px 7px; border-radius: 100px; font-family: acumin-pro,sans-serif, var(--font-primary); font-weight: 700; font-size: 1px; line-height: 1.2222222222222223; }
.btn-outline-light:hover { background: #3D405B; color: #FFFFFF; border-color: #3D405B; }
/* Social Icons */
.social-section { margin-top: var(--spacing-xl); width: 100%; }
.social-icons { display: flex; justify-content: end; gap: var(--spacing-md); }
.social-icon:hover svg path { fill: var(--white); }
.social-icon { width: 42px; height: 42px; background: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--accent-green); text-decoration: none; transition: var(--transition-fast); }
.social-icon:hover { background: var(--accent-green); color: var(--white); }
/* Footer Bottom */
.footer-bottom { margin-top: auto; background: #3D405B; padding: 12px 0; }
.footer-divider { width: 100%; height: 1px; background: #3D405B; margin-bottom: var(--spacing-md); }
.footer-bottom-content { display: flex; justify-content: space-between; align-items: center; }
.copyright { font-family: 'Nunito Sans', sans-serif; font-weight: 600; font-size: 13px; line-height: 1.36; letter-spacing: 0.28px; color: var(--white); }
.privacy-link { font-family: 'Nunito Sans', sans-serif; font-weight: 600; font-size: 13px; line-height: 1.36; letter-spacing: 0.28px; color: var(--white); text-decoration: none; transition: var(--transition-fast); }
.privacy-link:hover { color: var(--accent-green); text-decoration: underline; }
.error-message { color: red; }
.submitted-job .task-status { width: 265px;
justify-content: flex-end; }
.submitted-job .job-task { flex-wrap: wrap; }
.submitted-job .task-content {
width: calc(100% - 275px);
}
.submitted-job .task-content { flex-wrap: wrap; }
.submitted-job .task-info {
width: calc(100% - 76px);
}
.submitted-job h3.task-title {
word-break: break-word;
}
/* ===================================
RESPONSIVE DESIGN
=================================== */
/* Large Desktop */
/* Focus Visible for Better Accessibility */
*:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; }
/* Reduced Motion Support */
@media (prefers-reduced-motion:reduce) {
*, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
/* ===== NEW LOGIN PAGE STYLES ===== */
/* Main Content Background */
#main-content.main-content { background-color: #FEFDF4; min-height: calc(100vh - 79px - 400px); }
/* Login Section */
.login-section { display: flex; align-items: center; justify-content: center; min-height: calc(100vh - 79px - 400px); padding: 60px 20px; width: 100%; }
.login-container { width: 100%; max-width: 548px; margin: 0 auto; }
/* Login Card */
.login-card { background-color: #FFFFFF; border-radius: 20px; padding: 40px; box-shadow: 0px 2px 8px 0px rgba(99, 99, 99, 0.2); display: flex; flex-direction: column; align-items: center; gap: 30px; width: 100%; }
/* Login Header */
.login-header { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 283px; }
/* New Circular Logo */
.login-logo { display: flex; align-items: center; justify-content: center; }
.logo-image { width: 119.81px; height: 120.83px; }
/* Login Title */
.login-title { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 600; font-size: 36px; line-height: 2.06; letter-spacing: 0.28px; text-align: center; color: var(--text-primary); margin: 0; width: 100%; }
/* Login Form */
.login-form { display: flex; flex-direction: column; gap: 40px; width: 100%; max-width: 468px; }
.form-group { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.form-label { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.75; letter-spacing: 0.28px; color: #3D405B; margin: 0; }
/* Input Wrapper */
.input-wrapper { position: relative; display: flex; align-items: center; gap: 20px; padding: 12px 20px; border: 1.5px solid #3D405B; border-radius: 100px; background-color: #FFFFFF; width: 100%; height: 48px; box-sizing: border-box; padding-left: 60px; }
.input-wrapper:focus-within { border-color: var(--accent-color); outline: none; background-color: #FFFFFF; }
.input-icon { width: 20px; height: 17px; flex-shrink: 0; }
.form-input { flex: 1; border: none; outline: none; background: transparent; font-family: acumin-pro,sans-serif, sans-serif; font-weight: 400; font-size: 18px; line-height: 1.56; letter-spacing: 0.28px; color: #3D405B; padding: 0; }
.form-input::placeholder { color: #B8B7BE; }
/* Form Actions */
.form-actions { display: flex; justify-content: flex-end; width: 100%;}
.forgot-password-link { font-family: acumin-pro, sans-serif, sans-serif; font-weight: 400; font-size: 14px; line-height: 2; letter-spacing: 0.28px; text-align: center; color: #1F7FC3; text-decoration: underline; transition: color 0.3s ease; }
.forgot-password-link:hover { color: var(--accent-color); text-decoration: underline; }
/* Button Block */
.button-block { display: flex; flex-direction: column; align-items: center; gap: 20px; margin: 0 auto; }
.btn-login { width: 100%; padding: 10px 40px; font-family: acumin-pro,sans-serif, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.22; text-align: center; background-color: #9BCD5B; color: #3D405B; border: none; border-radius: 100px; cursor: pointer; transition: background-color 0.3s ease; display: flex; align-items: center; justify-content: center; gap: 10px; }
.btn-login:hover { background-color: #81B29A; }
.btn-login:disabled { opacity: 0.6; cursor: not-allowed; }
.staff-login-link { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.56; letter-spacing: 0.28px; text-align: center; color: #3D405B; text-decoration: underline; transition: color 0.3s ease; }
.staff-login-link:hover { color: var(--accent-color); text-decoration: underline; }
/* Privacy Notice */
.privacy-notice { width: 100%; text-align: center; }
.privacy-notice p { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0.28px; color: #3D405B; margin: 0; max-width: 468px; margin-left: auto; margin-right: auto; }
/* Error Messages */
.error-message { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 400; font-size: 13px; color: #dc3545; margin-top: 0; display:none; }
.error-message.show { display: block; }
/* Loading Spinner */
.btn-loading {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
}
.btn-loading[style*="display: block"],
.btn-loading[style*="display: inline"],
.btn-loading[style*="display: inline-block"],
.btn-loading.show {
display: inline-flex !important;
}
.spinner {
width: 16px;
height: 16px;
border: 2px solid transparent;
border-top: 2px solid currentColor;
border-radius: 50%;
animation: spin 1s linear infinite;
flex-shrink: 0;
}
.btn:disabled { opacity: 0.7; cursor: not-allowed; }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ===== END NEW LOGIN PAGE STYLES ===== */
/* ===================================
FORM STATE MANAGEMENT - CSS ONLY
=================================== */
/* Default state - show login elements */
.login-card[data-form-state="login"] .forgot-title, .login-card[data-form-state="login"] .forgot-email, .login-card[data-form-state="login"] .forgot-error, .login-card[data-form-state="login"] .forgot-text, .login-card[data-form-state="login"] .forgot-only { display: none; }
/* Forgot password state - show forgot elements */
.login-card[data-form-state="forgot"] .login-title, .login-card[data-form-state="forgot"] .login-email, .login-card[data-form-state="forgot"] .login-error, .login-card[data-form-state="forgot"] .login-text, .login-card[data-form-state="forgot"] .login-only { display: none; }
/* Title styling for both states */
.welcome-title { position: relative; }
.login-title, .forgot-title { display: block; }
/* Email input styling for both states */
.login-email, .forgot-email { width: 100%; }
/* Button text styling */
.btn-submit .login-text, .btn-submit .forgot-text { display: block; }
/* Error message display management */
.error-message.show-error { display: block; }
/* Override error display based on form state */
.login-card[data-form-state="login"] .forgot-error.show-error { display: none !important; }
.login-card[data-form-state="forgot"] .login-error.show-error { display: none !important; }
/* Ensure proper positioning for overlapping elements */
.input-wrapper { position: relative; }
/* ===================================
MFA PAGE STYLES - FIGMA EXACT MATCH
=================================== */
/* MFA Card Specific Styles - Desktop */
.mfa-card { max-width: 548px; padding: 40px; gap: 40px; }
/* MFA Brand Graphic - Use Image */
.mfa-card .brand-graphic { display: flex; justify-content: center; align-items: center; }
.mfa-card .brand-image { width: 59.97px; height: 93.05px; }
/* SMS Info Section */
.sms-info-section { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 0 auto; }
.sms-info-text { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.2222222222222223em; text-align: center; color: var(--footer-bg); margin: 0; }
.sms-phone-number { font-family: var(--font-display); font-weight: 400; font-size: 16px; line-height: 1.5em; letter-spacing: 0.28px; text-align: center; color: var(--footer-bg); margin: 0; }
/* MFA Form Styles */
.mfa-form { width: 100%; max-width: 468px; }
/* Remember Device Section */
.remember-device-section { display: flex; align-items: flex-end; gap: 10px; margin-top: 10px; }
.remember-device-label { display: flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--font-display); font-weight: 400; font-size: 16px; line-height: 1.5em; letter-spacing: 0.28px; color: var(--footer-bg); }
.remember-device-checkbox { display: none; }
.remember-device-toggle { width: 25px; height: 25px; border: 4px solid var(--dark-text); border-radius: 50%; background: var(--white); position: relative; transition: var(--transition-normal); flex-shrink: 0; }
.remember-device-checkbox:checked + .remember-device-toggle { background: #E08C5F; border-color: var(--dark-text); }
.remember-device-text { user-select: none; }
/* MFA Button Styles - Use standard btn-submit styling */
.mfa-form .btn-submit { max-width: 240px; margin: 0 auto; display: block; }
/* MFA Links */
.resend-link { font-family: var(--font-display); font-weight: 400; font-size: 16px; line-height: 1.5em; letter-spacing: 0.28px; color: var(--blue-link); text-decoration: none; text-align: center; display: block; margin: 20px 0 10px; transition: var(--transition-fast); }
.resend-link:hover { text-decoration: underline; color: var(--accent-green); }
.return-login-link { font-family: var(--font-display); font-weight: 700; font-size: 18px; line-height: 1.5555555555555556em; letter-spacing: 0.28px; color: var(--dark-text); text-decoration: none; text-align: center; display: block; transition: var(--transition-fast); }
.return-login-link:hover { color: var(--accent-green); text-decoration: underline; }
/* ===== END MFA PAGE STYLES ===== */
/* Authentication Confirmed Overlay Styles - Based on Figma Design (node-id: 294-9565) */
.auth-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(34, 30, 68, 0.75); display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 57px; z-index: 9999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.auth-overlay.show { opacity: 1; visibility: visible; }
.auth-confirmation { background: #DFECCD; border: 4px solid #FFFFFF; border-radius: 100px; padding: 10px 40px 10px 10px; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 20px; animation: slideInUp 0.5s ease-out; }
.auth-success-icon { width: 51px; height: 51px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.auth-success-icon svg { width: 51px; height: 51px; }
.auth-confirmation-text { font-family: acumin-pro,sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 700; font-size: 24px; line-height: 0.9166666666666666em; color: #221E44; margin: 0; text-align: left; vertical-align: center; }
@keyframes slideInUp {
from { transform: translateY(50px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
/* ===================================
AUTHENTICATION METHODS STYLES
=================================== */
/* Authentication Method Tabs */
.auth-method-tabs { display: flex; gap: var(--spacing-xs); margin-bottom: var(--spacing-xl); border-radius: var(--border-radius-md); background: rgba(155, 205, 91, 0.1); padding: var(--spacing-xs); }
.auth-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--spacing-sm); padding: var(--spacing-md) var(--spacing-lg); border: none; border-radius: var(--border-radius-sm); background: transparent; color: var(--text-secondary); font-family: var(--font-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--transition-fast); }
.auth-tab.active { background: var(--white); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.auth-tab:hover:not(.active) { background: rgba(155, 205, 91, 0.15); color: var(--text-primary); }
.auth-tab svg { width: 20px; height: 20px; }
/* Authentication Method Content */
.auth-method-content { display: none; }
.auth-method-content.active { display: block; }
/* QR Code Section */
.qr-code-section { text-align: center; margin-bottom: var(--spacing-xl); }
.auth-info-text { color: var(--text-secondary); font-family: var(--font-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-normal); margin: 0 0 var(--spacing-lg) 0; line-height: 1.5; }
.qr-code-container { display: flex; justify-content: center; margin: var(--spacing-lg) 0; }
.qr-code-placeholder { border: 2px solid var(--border-color); border-radius: var(--border-radius-md); padding: var(--spacing-md); background: var(--white); display: inline-block; }
#qr-code-canvas { border: 2px solid var(--border-color); border-radius: var(--border-radius-md); background: var(--white); display: block; max-width: 200px; max-height: 200px; }
.auth-setup-text { color: var(--text-secondary); font-family: var(--font-primary); font-size: var(--font-size-xs); font-weight: var(--font-weight-normal); margin: var(--spacing-lg) 0 0 0; line-height: 1.4; }
.setup-key { color: var(--text-primary); font-weight: var(--font-weight-medium); font-family: 'Courier New', monospace; background: rgba(155, 205, 91, 0.1); padding: var(--spacing-xs) var(--spacing-sm); border-radius: var(--border-radius-sm); user-select: all; }
/* Email Authentication Section */
.email-info-section { text-align: center; margin-bottom: var(--spacing-xl); }
.email-address { color: var(--text-primary); font-family: var(--font-primary); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); margin: var(--spacing-sm) 0 var(--spacing-lg) 0; padding: var(--spacing-sm) var(--spacing-md); background: rgba(155, 205, 91, 0.1); border-radius: var(--border-radius-sm); display: inline-block; }
.send-email-btn { background: var(--accent-green); color: var(--white); border: none; border-radius: var(--border-radius-full); padding: var(--spacing-sm) var(--spacing-xl); font-family: var(--font-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; transition: all var(--transition-fast); margin-top: var(--spacing-lg); }
.send-email-btn:hover { background: #8AB84F; }
.send-email-btn:active { transform: translateY(0); }
.send-email-btn:disabled { background: var(--text-muted); cursor: not-allowed; transform: none; }
.resend-section { text-align: center; margin-top: var(--spacing-md); }
.resend-link { background: none; border: none; color: var(--accent-green); font-family: var(--font-primary); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; text-decoration: underline; transition: color var(--transition-fast); }
.resend-link:hover { color: #8AB84F; }
.resend-link:disabled { color: var(--text-muted); cursor: not-allowed; text-decoration: none; }
/* Authentication Confirmed Overlay */
.auth-confirmed-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--overlay-bg); display: none; align-items: center; justify-content: center; z-index: var(--z-overlay); }
.auth-confirmed-overlay.show { display: flex; }
.auth-confirmed-content { background: var(--overlay-content-bg); border: 1px solid var(--white); border-radius: var(--border-radius-lg); padding: var(--spacing-xl); max-width: 400px; width: 90%; text-align: center; display: flex; align-items: center; justify-content: center; gap: var(--spacing-md); }
.auth-confirmed-icon { width: 24px; height: 24px; flex-shrink: 0; }
.auth-confirmed-text { color: var(--text-primary); font-family: var(--font-primary); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); margin: 0; }
/* Profile Icon */
.profile-icon { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background-color: var(--accent-color); }
.profile-avatar { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
/* Cards */
.card { background-color: var(--surface-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: box-shadow var(--transition-normal); }
.card:hover { box-shadow: var(--shadow-lg); }
/* CTA Components */
/* .cta-section { margin-bottom: var(--space-3xl); } */
.cta-section:empty {
margin-bottom: 0 !important;
}
.cta-card { position: relative; width: calc(100% - 479px); height: auto; margin: 0; background-image: url('../images/Circle-Dots-Texture.png'); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; max-width: 100%; background-position: center center; background-repeat: no-repeat; background-size: cover; }
.cta-card::before { content: ''; position: absolute; top: -320px; left: -317px; width: calc(100% - 478px); height: 865px; background-image: url('data:image/svg+xml,'); background-repeat: repeat; opacity: 0.1; z-index: 1; }
.cta-content { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: var(--space-3xl); padding: 35px 30px; width: 100%; }
.cta-text { display: flex; flex-wrap: wrap; gap: var(--space-lg); width: 100%; flex-direction: column; }
.cta-title { font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-3xl); line-height: 1.39; color: var(--text-light); margin: 0; }
.cta-description { font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: var(--font-size-lg); line-height: 1.33; color: var(--text-light); margin: 0; max-width: 675px; }
.cta-btn { font-family: var(--font-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); line-height: 1.22; color: var(--text-primary); }
/* Recent Jobs Components */
.recent-jobs-section { margin-bottom: var(--space-3xl); margin-top: var(--space-3xl); }
.jobs-and-faqs-container { display: flex; flex-wrap: wrap; gap: var(--space-lg); width: 100%; margin: 0 auto; align-items: flex-start; justify-content: center; }
.recent-jobs-container { width: calc(100% - 478px);max-width: 100%; }
.section-title { font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-xl); line-height: 1.25; color: var(--text-primary); margin: 0 0 20px 0; }
section.recent-jobs-section.admin-dashboard-main .recent-jobs-container { max-width: 1036px;width: 100%;}
section.recent-jobs-section.job-activity-section {margin-bottom: 0;}
/* Job Cards */
.jobs-grid { display: flex; flex-wrap: wrap; gap: var(--space-lg); }
.job-card { display: flex; flex-direction: column; gap: 10px; padding: var(--space-lg); background-color: var(--surface-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transition: all var(--transition-normal); width: 100%; border: 2px solid transparent; }
.job-card:hover { border-color: #8690CB; }
.job-card-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; }
.job-card-header-left { display: flex ; align-items: center; gap: 15px; flex-wrap: wrap; }
.job-title { font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); line-height: 1.33; color: var(--text-primary); margin: 0; }
.job-meta { display: flex; justify-content: flex-end; align-items: center; gap: 15px; flex-wrap: wrap; }
.job-status { display: flex; align-items: center; }
.status-text { font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); line-height: 1.5; color: var(--text-primary); }
.job-assigned .assigned-text, .job-batch-id { font-size: 16px !important; line-height: 1.22em;color: #221E44;}
span.status-complete { color: var(--secondary-color); }
.due-date { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); position: relative; }
.due-date-label { font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-sm); line-height: 1.5; color: var(--text-primary); }
.due-date-value { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); }
.calendar-icon { width: 30px; height: 30px; position: relative; }
.calendar-icon a { line-height: 0; display: inline-block; }
.calendar-icon svg {width: 100%;height: 100%;}
.calendar-icon a:hover svg ellipse { fill: var(--accent-color); }
.date-badge { display: flex; align-items: center; justify-content: center; padding: 1px var(--space-sm); background-color: var(--warning-color); border-radius: var(--radius-sm); font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: 1; color: var(--text-primary); width: 53px; height: 23px; }
.job-card-footer { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; flex-wrap: 20px; gap: 20px; }
.job-actions { display: flex; flex-wrap: wrap; align-items: flex-end; }
.action-link { font-family: var(--font-primary); color: var(--accent-color); transition: color var(--transition-normal); font-size: 16px; font-style: normal; font-weight: 600; line-height: 1.2; text-decoration: none; }
.action-link:hover, .action-link:focus { color: var(--text-primary); text-decoration: underline; outline: none; }
.action-link.deleterow { cursor: pointer; background: transparent;border: none;color: #BF2B23;font-size: 16px;font-style: normal;font-weight: 600;line-height: 1.2; /* 150% */text-decoration: none;}
.action-link.deleterow:hover, .action-link.deleterow:focus { color: #A62720; text-decoration: underline; }
.action-link.toggle-status-btn.deactiverow {cursor: pointer;background: transparent;border: none;text-decoration: none;font-size: 16px;font-style: normal;font-weight: 600;line-height: 1.2;}
.action-link.toggle-status-btn.deactiverow:hover, .action-link.toggle-status-btn.deactiverow:focus { text-decoration: underline; color: var(--text-primary); outline: none; }
.action-link.disabled, .action-link[disabled] { opacity: 0.6; pointer-events: none; text-decoration: none; }
.action-separator { width: 2px; height: 15px; background-color: var(--text-primary);margin-bottom: 2px; }
.job-dates {font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: 1.4; color: var(--text-primary); text-align: right; display: flex; flex-wrap: wrap; gap: 10px 0; }
.job-dates span { padding: 0; position: relative; }
.job-dates span:first-child { padding-left: 0; }
.job-dates span:last-child { padding-right: 0; }
.job-dates>strong {padding-right: 10px; display: inline-block;}
/* .job-dates span:before { width: 4px; height: 4px; background: var(--primary-color); content: ""; position: absolute; left: -2px; top: 50%; transform: translateY(-50%); } */
.job-dates span:first-child:before { display: none; }
/* View All Section */
.view-all-section { display: flex; justify-content: flex-start; margin-top: var(--space-3xl); }
.view-all-btn { font-family: var(--font-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); line-height: 1.22; }
/* Standardize font sizes within listing cards (Users, Organizations, Roles, etc.) */
.jobs-grid .job-title { font-size: 18px; word-break: break-word; }
.jobs-grid .status-text,
.jobs-grid .due-date-label,
.jobs-grid .job-dates { font-size: 16px; }
/* Pagination Containers - Prevent Flickering */
#jobsContainer,
#organizationsContainer,
#usersContainer,
#rolesContainer,
#permissionsContainer,
#logsContainer,
#mappingTemplatesContainer {
/* Remove any transitions that might cause flickering */
/* Content updates happen directly without opacity changes */
min-height: 100px; /* Prevent layout shift */
}
/* Empty State Container */
.empty-state-container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 40px;
background-color: var(--surface-color);
border: 1px solid #EEEEEE;
border-radius: var(--radius-lg);
width: 100%;
min-height: 300px;
text-align: center;
}
.empty-state-icon {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 20px;
}
.empty-state-title {
font-family: var(--font-primary);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-xl);
line-height: 1.25;
color: var(--text-primary);
margin: 0 0 10px 0;
}
.empty-state-message {
font-family: var(--font-primary);
font-weight: var(--font-weight-regular);
font-size: var(--font-size-base);
line-height: 1.5;
color: var(--text-primary);
margin: 0;
}
/* FAQs Components */
.faqs-section { display: flex; flex-direction: column; flex-wrap: wrap; width: 458px; flex-shrink: 0; }
.faqs-card { display: flex; flex-direction: column; gap: var(--space-lg); padding: var(--space-lg); background-color: var(--surface-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); flex: 1; }
.faqs-text { font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: 1.8125; color: var(--text-primary); margin: 0; flex: 1; }
.faqs-btn { font-family: var(--font-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-base); line-height: 1.22; align-self: flex-start; }
/* Help Button */
.help-btn { position: fixed; bottom: 45px; right: var(--space-lg); width: 85px; height: 85px; background: none; border: none; cursor: pointer; z-index: var(--z-fixed); transition: transform var(--transition-normal); }
.help-btn svg { width: 100%; height: 100%; }
.help-icon { width: 100%; height: 100%; }
/* Mobile Menu Toggle */
/* .mobile-menu-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: var(--space-sm); }
.hamburger-line { width: 24px; height: 2px; background-color: var(--text-primary); transition: all var(--transition-normal); transform-origin: center; }
.hamburger-line:not(:last-child) { margin-bottom: 4px; }
.mobile-menu-toggle[aria-expanded="0 0 100 100"] .hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.mobile-menu-toggle[aria-expanded="10"] .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-menu-toggle[aria-expanded="10"] .hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); } */
/* Main Layout */
.main-layout { display: flex; }
/* Sidebar */
.sidebar-primary { width: var(--sidebar-width); background-color: var(--primary-color); border-radius: 0 0 var(--radius-lg) 0; position: sticky; top: 0; left: auto; height: auto; z-index: auto; transition: none; flex: 0 0 var(--sidebar-width); margin-bottom: 80px; align-self: flex-start; display: flex; }
.sidebar-content { padding: 40px 20px; display: flex; flex-direction: column; gap: 40px; }
.profile-block { display: flex; align-items: center; gap: var(--space-lg); width: 100%; }
.profile-block-res-toggle-icon { width: 40px; height: 40px; background: #fff; border-radius: 100%; position: absolute; right: 0; }
.profile-block-res-toggle-icon:after { content: ""; background-image: url('../images/plus-icon.svg'); background-repeat: no-repeat; background-position: center center; width: 16px; height: 16px; background-size: contain; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.profile-block { position: relative; }
.profile-block-res-toggle-icon { display: none; }
.profile-img { width: 106px; height: 106px; border-radius: 50%; object-fit: cover; }
.profile-info { display: flex; flex-wrap: wrap; flex-direction: column; gap: 10px; justify-content: center; width: calc(100% - 145px); }
.org-name { font-family: var(--font-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-sm); color: var(--text-light); line-height: 1.3125; margin: 0; }
.user-name { font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: var(--font-size-2xl); color: var(--text-light); line-height:1.2; margin: 0; }
/* Sidebar Navigation */
.sidebar-nav { width: 272px; }
.sidebar-nav .nav-list { display: flex; flex-wrap: wrap; flex-direction: column; gap: 0; }
.sidebar-nav .nav-item { border-radius: var(--radius-md); transition: background-color var(--transition-normal); width: 100%; }
.sidebar-nav .nav-item:hover { background-color: rgba(255, 255, 255, 0.1); color:var(--primary-color); }
.sidebar-nav .nav-item-active { background-color: var(--sidebar-active); font-weight:var(--font-weight-bold) !important; color:var(--primary-color) !important; }
.sidebar-nav .nav-item-active:hover { background-color: var(--sidebar-active); }
.sidebar-nav .nav-link { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;padding: 20px 10px; color: var(--text-light); text-decoration: none; font-family: var(--font-primary); font-size: var(--font-size-base); font-weight: var(--font-weight-regular); line-height: 1.3333333333333333; transition: all var(--transition-normal); border-radius: var(--radius-md); }
.sidebar-nav .nav-link-active { color: var(--text-primary); font-weight: var(--font-weight-bold); line-height: 1.2222222222222223; }
.nav-icon { width: 21.5px; height: 21.5px; flex-shrink: 0; }
.sidebar-nav .nav-link svg { width: 21.5px; height: 21.5px; }
/* Main Content */
#main-content.main-content { flex: 1 1 calc(100% - var(--sidebar-width)); margin-left: 0; padding: var(--space-3xl); max-width: 100%; min-width: 0; background-color: var(--background-color); }
/* Outline Light Button - For dark backgrounds */
.btn-dark { background: #3D405B; color: var(--text-light); border: 2px solid #3D405B; }
.btn-dark:hover { background: transparent; color: #3D405B; }
.startJobSec .startJobBoxWrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; background-color: var(--surface-color); padding: var(--space-3xl); box-shadow: 0px 2px 8px rgba(99, 99, 99, 0.2); border-radius: 20px; max-width: 1036px; margin-bottom: 40px; }
.startJobSec h2.startJobTitle { font-size: var(--font-size-xl); font-weight: var(--font-weight-semibold); line-height: 1.25; color: var(--text-primary); }
.existing-jobs-container { width: 100% !important; max-width: 1036px; }
.existing-jobs-container .status-block { display: flex;flex-direction: column;gap: 20px; margin-bottom: 0; }
.filterTitleWrapper { display: flex; flex-wrap: wrap; justify-content: space-between; }
.filter-Wrapper { display: flex; flex-wrap: wrap; gap: 20px; font-style: normal; font-weight: 700; font-size: 16px; display: flex; align-items: center; color: #3D405B; }
.filter-Wrapper select { background: transparent; border: none; font-style: normal; font-size: 16px; display: flex ; align-items: center; color: #3D405B; outline: none; font-weight: 400; font-family: var(--font-primary); cursor: pointer; margin-left: 5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: transparent; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 5px center; background-size: 20px; padding-right: 7px; padding-right: 27px; box-shadow: none !important; padding-left: 5px; }
/* Ensure all dropdowns show pointer cursor */
select, select.formInput, .commonForm select { cursor: pointer; -webkit-text-size-adjust: 100%; }
.filter-dropdown { display: flex; flex-wrap: wrap;}
.filterTitleWrapper .section-title { margin-bottom: 0; }
.filterTitleWrapper { margin-bottom: 40px; }
.breadcrumbs { margin-bottom: 20px; font-family: var(--font-primary); font-size: var(--font-size-base); }
.breadcrumbs, .breadcrumbs a, .breadcrumbs strong { color: #3D405B; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; color: var(--accent-green); }
.breadcrumbs svg{height: 12px; fill: #3D405B;}
section.breadcrumbs {
max-width: 1015px;
margin: 0 auto 20px;
}
.map-column select.formInput {
-webkit-appearance: none; /* Remove Safari default arrow */
-moz-appearance: none;
appearance: none;
background-color: transparent;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 0 center;
padding-right: 20px; /* space for arrow */
box-shadow: none !important;
background-size: 20px;
padding-left:5px;
font-size: 16px;
}
/* Cancel Job sec */
.cancel-job-container { display: flex; align-items: center; padding: 0 0 40px 0;flex-wrap:wrap; justify-content: center;}
.cancel-job-block { background: #FFFFFF; border-radius: 20px; box-shadow: 0px 2px 8px 0px rgba(99, 99, 99, 0.2); padding: 40px; display: flex; align-items: center; flex-wrap: wrap; gap: 40px; width: 100%; flex-direction: column; max-width: 1015px; }
.cancel-job-container .job-details-frame { display: flex; align-items: center; gap: 20px; max-width: 518px; flex-wrap: wrap; }
.cancel-job-container .job-details-title { font-family: acumin-pro,sans-serif, var(--font-primary); font-weight: 400; font-size: 18px; line-height: 1.25em; letter-spacing: 0.72px; text-align: center; color: var(--text-primary); width: 100%; }
.cancel-job-container .job-name-input { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.cancel-job-container .job-title { font-family: acumin-pro,sans-serif, var(--font-primary); font-weight: 600; font-size: 24px; line-height: 1.25em; text-align: center; color: var(--text-primary); width: 100%; margin: 0; }
.cancel-job-container .job-title-line { width: 100%; height: 0; border: none; border-top: 2px solid #3D405B; margin: 0; }
.cancel-job-container .btn-cancel { background: #BF2B23; color: #FFFFFF; border: 2px solid #BF2B23; border-radius: 100px; padding: 7px 40px 7px; font-family: acumin-pro,sans-serif, var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.22em; text-align: center; cursor: pointer; transition: all 0.3s ease; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px; min-height: 40px; }
.cancel-job-container .btn-cancel:hover { background: #fff; color: #BF2B23; }
.cancel-job-container .btn-cancel:active { background: #fff; color: #BF2B23; }
.cancel-job-container .btn-cancel:focus { background: #fff; color: #BF2B23; }
/* ========================================
EXISTING JOB STYLES - Based on Figma Design
======================================== */
/* Status Block Styles */
.status-block { margin-bottom: 40px; }
.status-text { font-family: var(--font-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); line-height: 1.22; color: var(--text-primary); }
.status-processing { color: var(--secondary-color); }
.status-dates { font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: var(--font-size-lg); line-height: 1.33; color: var(--text-primary); text-align: center; }
.products-services { display: flex; align-items: center; gap: 20px; width: 100%;}
.ps-label { font-family: var(--font-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); line-height: 1.22; color: var(--text-primary); display: flex; align-items: center; justify-content: center; }
.ps-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ps-badge { background: var(--background-color); border: 2px solid var(--primary-color); border-radius: 100px; padding: 10px 20px; font-family: var(--font-primary); font-weight: var(--font-weight-medium); font-size: var(--font-size-lg); line-height: 1.22; color: var(--primary-color); display: flex; align-items: center; gap: 20px; position: relative; transition: all 0.3s ease; cursor: pointer; }
.ps-badge:hover { background: var(--primary-color); color: var(--text-light); box-shadow: 0px 4px 12px 0px rgba(61, 64, 91, 0.2); }
.ps-badge::before { content: ""; width: 26px; height: 25px; border-radius: 50%; position: absolute; left: 20px; background-image: url(../images/Orange_dot.svg); background-position: center center; background-repeat: no-repeat; background-size: contain; }
span.ps-badge p { padding-left: 45px; }
.products-services.boxfiles {
overflow-x: auto;
}
.products-services.boxfiles::-webkit-scrollbar-track
{
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
.products-services.boxfiles::-webkit-scrollbar
{
width: 0;
height:4px;
background-color: #F5F5F5;
}
.products-services.boxfiles::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: var(--primary-color);
}
/* Job Tasks Grid */
.job-tasks-grid { display: flex; flex-direction: column; gap: 20px; align-items: center; width: 100%;; }
.job-task { background: var(--surface-color); border-radius: 20px; padding: 20px; width: 100%; max-width: 1036px; display: flex; justify-content: space-between; align-items: center; gap: 10px; box-shadow: 0px 2px 8px 0px rgba(99, 99, 99, 0.2); border: 2px solid transparent; transition: all 0.3s ease; cursor: pointer; }
.job-task:hover { border-color: #8690CB; }
.job-task:active { border-color: #8690CB; }
.job-task:focus { outline: none; border-color: #8690CB; }
.task-content { display: flex; align-items: center; gap: 20px; transition: all 0.3s ease; }
.task-icon { width: 56px; height: 56px; }
.folder-icon { width: 36px; height: 36px; margin: 10px; transition: transform 0.3s ease; position: relative; }
/* Removed zip icon hover effect - folder icon stays the same on hover */
.task-info { display: flex; flex-direction: column; gap: 10px; }
.task-title { font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-lg); line-height: 1.33; color: var(--text-primary); margin: 0; }
.task-meta { font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); line-height: 1.5; color: var(--text-primary); }
.task-status { display: flex; align-items: center; }
.status-button.verified { background: #DFECCD; border: 2px solid #9BCD5B; border-radius: 100px; padding: 10px 40px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; cursor: pointer; transition: all 0.3s ease; }
/* .status-button.verified:hover { background: #C5E0A3; } */
/* .status-button.verified:active { background: #B8D996; } */
.status-button.verified:focus { outline: none; }
.check-icon { width: 24px; height: 24px; }
.status-button.verified span { font-family: var(--font-primary); font-weight: var(--font-weight-bold); font-size: var(--font-size-lg); line-height: 1.22; color: var(--text-primary); width: calc(100% - 34px); }
.status-block-inner { display: flex; flex-wrap: wrap; gap: 20px 20px; margin-bottom: 0; align-items: center }
.status-block-inner .job-dates { font-size: var(--font-size-base); gap: 10px; align-items: center; line-height: 1.4; }
span.status-canceled { color: #BF2B23; }
.canceled-job .job-tasks-grid { opacity: 0.5; pointer-events: none; }
.canceled-job .products-services { opacity: 0.5; pointer-events: none; }
.cancel-job-block-cancellation button { display: none !important; }
/* .status-header {
width: 100%;
}
.job-batch-id {
width: 100%;
}
.job-dates {
width: 100%;
}
.products-services {
width: 100%;
} */
/* ===================================
START JOB BLOCK STEP ONE STYLES
Based on Figma Design - Using Global Variables
=================================== */
/* Start Job Block Step One Container */
.start-job-block-step-one { display: flex; flex-direction: column; gap:0; width: 100%; max-width: 1168px; margin: 0 auto; }
.start-job-block-step-one .next-button-container { padding-top:40px !important; }
/* Header Section */
.start-job-header { display: flex; width: 100%; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.job-number-badge { background: var(--secondary-color); border-radius: var(--radius-md); padding: var(--space-xs) 0; width: 91px; height: 34px; display: flex; align-items: center; justify-content: center; }
.job-number { font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: 17px; line-height: var(--line-height-tight); color: var(--text-light); text-align: center; }
/* Main Content Card */
.start-job-card { background: var(--surface-color); border-radius: var(--radius-lg); padding: var(--space-5xl); box-shadow: var(--shadow-md); display: flex; flex-direction: column; align-items: center; gap: var(--space-3xl); /*min-height: 1266px;*/ justify-content: center; }
/* Step Header */
.step-header { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 519px; }
.step-title { font-family: var(--font-primary); font-weight: 400; font-size: 18px; line-height: 1.22; letter-spacing: 0.72px; color: #221E44; text-align: center; margin: 0; }
/* Step Progress */
.step-progress { position: relative; width: 330.5px; height: 33px; display: flex; align-items: center; justify-content: space-between; }
.progress-line { position: absolute; top: 50%; left: 16px; right: 16px; height: 2px; background: #F4F1DE; transform: translateY(-50%); }
.step-indicator { position: relative; width: 33px; height: 33px; border-radius: 50%; background: #F4F1DE; display: flex; align-items: center; justify-content: center; z-index: 1; }
.step-indicator.active { background: #E08C5F; }
.step-number { font-family: var(--font-primary); font-weight: 700; font-size: 15px; line-height: 1.4; color: #FFFFFF; text-align: center; }
.step-indicator:not(.active) .step-number { color: #221E44; }
.step-description { font-family: var(--font-primary); font-weight: 400; font-size: 18px; line-height: 1.33; color: #221E44; text-align: center; margin: 0; width: 100%; }
/* Form Sections */
.form-sections { display: flex; flex-direction: column; align-items: center; max-width: 1043px; width: 100%; }
.form-section { display: flex; flex-direction: column; align-items: center; width: 100%; padding: 40px 20px; border: 2px solid #EEE; border-radius: 20px; gap:20px;}
.form-section.active, .form-section:hover { border: 2px solid #8690CB; border-radius: 20px; background: #FFFFFF; }
.form-sections .section-title { font-family: var(--text-secondary); font-weight: 400 ; font-size: 18px; line-height: 1.25; letter-spacing: 0.72px; color: var(--text-primary); text-align: center; margin: 0 0 0 0;word-break: break-word; }
.form-sections .section-title strong { font-weight: 700 !important; }
.section-subtitle { font-family: var(--font-primary); font-weight: 400; font-size: 16px; line-height: 1.5; letter-spacing: 0.28px; color: #221E44; text-align: center; margin: 0 0 0 0; }
.section-content { width: 100%; display: flex; flex-wrap: wrap; justify-content: center; }
.form-section.step-two-upload-section { gap: 40px; }
/* Section Dividers */
.section-divider { width: 2px; height: 30px; background: #EEEEEE; margin: 0 auto; }
/* Job Title Input */
.job-title-input { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 497.36px; width: 100%; border-bottom: 2px solid; padding-bottom: 13px; }
.job-title-field { font-family: var(--font-primary); font-weight: 600; font-size: 24px; line-height: 1.25; color: var(--text-primary); border: none; background: transparent; outline: none; width: 100%; }
input.job-title-field::placeholder {color: var(--text-primary) }
.start-job-header .breadcrumbs { margin: 0; display: flex ; flex-wrap: wrap; align-items: center; line-height: normal; gap: 5px 10px; }
.edit-icon { width: 36px; height: 36px; cursor: pointer; }
/* Option Buttons */
.option-buttons { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.option-btn { display: flex; align-items: center; gap: 10px; padding: 10px 20px; background: #FFFFFF; border: 2px solid #3D405B; border-radius: 100px; cursor: pointer; transition: all 0.3s ease; min-height: 45px; }
.option-btn:hover { background: #f8f9fa; }
.option-btn.selected { background: #FFFFFF; border-color: #3D405B; }
/* Option Indicators */
.option-indicator { position: relative; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; }
.indicator-dot { width: 25px; height: 25px; border-radius: 50%; background: #F4F1DE; }
.indicator-fill { position: absolute; top: 4px; left: 4px; width: 17px; height: 17px; border-radius: 50%; background: #E08C5F; }
.option-btn:not(.selected) .indicator-fill { display: none; }
/* Option Checkbox */
.option-checkbox { position: relative; width: 17px; height: 17px; display: flex; align-items: center; justify-content: center; }
.checkbox-circle { width: 17px; height: 17px; border-radius: 50%; background: #F4F1DE; border: 4px solid #F4F1DE; }
.checkbox-check { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: none; }
.option-btn.selected .checkbox-check { display: block; }
.option-text { font-family: var(--font-primary); font-weight: 500; font-size: 18px; line-height: 1; color: #221E44; }
.option-btn.selected .option-text { font-weight: 500; }
/* Info Icon */
.info-icon { width: 22px; height: 22px; cursor: pointer; position: relative; }
.info-icon svg { width: 100%; height: 100%; }
/* Tooltip Styles */
.info-icon[data-tooltip] {
position: relative;
}
.info-icon[data-tooltip]:hover::before {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--text-primary);
color: var(--text-light);
padding: 8px 12px;
border-radius: 6px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
white-space: nowrap;
max-width: 250px;
white-space: normal;
width: max-content;
z-index: var(--z-tooltip);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
margin-bottom: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.info-icon[data-tooltip]:hover::after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--text-primary);
z-index: var(--z-tooltip);
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
margin-bottom: 3px;
}
.info-icon[data-tooltip]:hover::before,
.info-icon[data-tooltip]:hover::after {
opacity: 1;
visibility: visible;
}
/* Date Input */
.date-input { display: flex; align-items: center; gap: 10px; background: #FFFFFF; border: 2px solid #3D405B; border-radius: 100px; }
.calendar-icon { display: flex; align-items: center; justify-content: center; }
.date-text { font-family: var(--font-primary); font-weight: 500; font-size: 18px; line-height: 1.22; color: #221E44; }
/* Next Button */
.next-button-container { display: flex; justify-content: center; width: 100%; }
.next-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 40px; background: #3D405B; border: 2px solid #3D405B; border-radius: 100px; cursor: pointer; transition: all 0.3s ease; min-height: 40px; }
.next-btn:hover:not(:disabled) { background: transparent; color: #3D405B; }
.next-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.next-btn .btn-text { font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.22; color: #FFFFFF; display: inline-flex; align-items: center; }
.next-btn:hover .btn-text { background: transparent; color: #3D405B; }
.next-btn:hover svg.btn-arrow path { stroke: #3D405B; }
.next-btn .btn-loading { display: none; align-items: center; gap: 8px; font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.22; color: #FFFFFF; white-space: nowrap; }
.next-btn .btn-loading[style*="display: block"],
.next-btn .btn-loading[style*="display: inline"],
.next-btn .btn-loading[style*="display: inline-block"],
.next-btn .btn-loading[style*="display: flex"],
.next-btn .btn-loading.show { display: inline-flex !important; }
.next-btn .btn-loading .spinner { width: 16px; height: 16px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; flex-shrink: 0; color: #FFFFFF; }
.next-btn svg.btn-arrow { width: 6px; height: 10px; flex-shrink: 0; }
.next-btn span:not(.btn-text):not(.btn-loading) { font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.22; color: #FFFFFF; }
/* ===================================
FORM ELEMENTS - SELECT, CHECKBOX, DATE
=================================== */
/* Select Wrapper */
.select-wrapper { display: flex; align-items: center; gap: var(--space-md); }
.form-select { font-family: var(--font-primary); font-weight: var(--font-weight-medium); font-size: var(--font-size-lg); line-height: var(--line-height-tight); color: var(--text-primary); background: var(--surface-color); border: 2px solid var(--text-secondary); border-radius: var(--radius-full); padding: var(--space-md) var(--space-lg); outline: none; cursor: pointer; transition: var(--transition-normal); min-width: 150px; }
.form-select:focus { border-color: var(--accent-color); box-shadow: var(--shadow-focus); }
.form-select:hover { border-color: var(--secondary-color); }
/* Checkbox Group */
.checkbox-group { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: var(--space-md); width: 100%; }
.checkbox-item { display: flex; align-items: center; }
.checkbox-item input[type="checkbox"] { display: none; }
.checkbox-label { display: flex; align-items: center; gap: var(--space-md); padding: 8px 15px; background: var(--surface-color); border: 2px solid var(--text-secondary); border-radius: var(--radius-full); cursor: pointer; transition: var(--transition-normal); min-height: 45px; user-select: none; }
.checkbox-label:hover { background: var(--background-color); box-shadow: var(--shadow-sm); }
.checkbox-custom { position: relative; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; }
.checkbox-dot { width: 25px; height: 25px; border-radius: var(--radius-full); background: var(--warning-color); transition: var(--transition-normal); }
.checkbox-fill { position: absolute; top: 4px; left: 4px; width: 17px; height: 17px; border-radius: var(--radius-full); background: var(--accent-color); opacity: 0; transform: scale(0.8); transition: all var(--transition-normal); }
.checkbox-item input[type="checkbox"]:checked + .checkbox-label .checkbox-fill { opacity: 1; transform: scale(1); }
.checkbox-item input[type="checkbox"]:checked + .checkbox-label { border-color: var(--secondary-color); background: var(--background-color); }
/* Date Input Wrapper */
.date-input-wrapper { display: flex; align-items: center; gap: var(--space-md); padding:16px 20px; background: var(--surface-color); border: 2px solid var(--text-secondary); border-radius: var(--radius-full); position: relative; }
.date-input { font-family: var(--font-primary); font-weight: 500; font-size: 18px; line-height: 1.22; color: var(--text-primary); background: transparent; border: none; outline: none; cursor: pointer; text-align: left; flex: 1; position: relative; }
.date-input::-webkit-calendar-picker-indicator {
cursor: pointer;
opacity: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
height: 100%;
}
.date-input-wrapper:focus-within { border-color: var(--accent-color); box-shadow: var(--shadow-focus); }
.date-input-wrapper:hover { border-color: var(--accent-color); }
/* Start Job Block Step Two Container */
.start-job-block-step-two { display: flex; flex-direction: column; gap: var(--space-lg); width: 100%; max-width: 1168px; margin: 0 auto; }
/* Step Two Job Title */
.step-two-job-title { display: flex; justify-content: space-between; align-items: center; width: 100%; gap:10px; flex-wrap: wrap; }
.step-two-title-text { font-family: var(--font-primary); font-weight: 600; font-size: 24px; line-height: 1.25; color: var(--text-primary); margin: 0; }
/* Step Two Main Content Card */
.step-two-card { background: var(--surface-color); border-radius: var(--radius-lg); padding: var(--space-5xl); box-shadow: var(--shadow-md); display: flex; flex-direction: column; align-items: center; gap: var(--space-3xl); min-height: 1000px; justify-content: flex-start; }
/* Step Two Header */
.step-two-header { display: flex; flex-direction: column; align-items: center; gap: 20px; max-width: 328.5px; }
.step-two-main-title { font-family: var(--font-primary); font-weight: 400; font-size: 18px; line-height: 1.22; letter-spacing: 0.72px; color: #221E44; text-align: center; margin: 0; }
/* Step Two Progress */
.step-two-progress { position: relative; width: 328.5px; height: 33px; display: flex; align-items: center; justify-content: space-between; }
.step-two-progress-line { position: absolute; top: 50%; left: 14px; right: 14px; height: 2px; background: #F4F1DE; transform: translateY(-50%); }
.step-two-indicator { position: relative; width: 33px; height: 33px; border-radius: var(--radius-full); background: #F4F1DE; display: flex; align-items: center; justify-content: center; z-index: 1; }
.step-two-indicator.completed { background: #F4F1DE; }
.step-two-indicator.active { background: var(--accent-color); }
.step-two-number { font-family: var(--font-primary); font-weight: 700; font-size: 15px; line-height: 1.4; text-align: center; color: #221E44; }
.step-two-indicator.active .step-two-number { color: var(--surface-color); }
.step-two-description { font-family: var(--font-primary); font-weight: 400; font-size: 18px; line-height: 1.33; text-align: center; color: #221E44; margin: 0 0 20px 0; }
/* Step Two Form Sections */
.step-two-form-sections { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1043px; gap: 0; }
.step-two-section-title { margin-bottom: 20px; }
.step-two-review-content { display: flex; flex-direction: column; gap: var(--space-lg); width: 100%; max-width: 500px; }
.step-two-job-info { display: flex; flex-direction: column; gap: var(--space-md); border-bottom: 2px solid; padding-bottom: 13px; }
.step-two-job-header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); width: 497.36px; }
.step-two-job-name { font-family: var(--font-primary); font-weight: 600; font-size: 24px; line-height: 1.25; color: var(--text-secondary); }
.step-two-edit-icon { width: 36px; height: 36px; cursor: pointer; flex-shrink: 0; }
.step-two-organization-name { font-family: var(--font-primary); font-weight: 400; font-size: 18px; line-height: 1.33; color: #000000; text-align: left; }
.step-two-detail-section { display: flex; flex-direction: column; gap: var(--space-sm); margin-top: 0;}
.step-two-detail-label { font-family: var(--font-primary); font-weight: var(--font-weight-semibold); font-size: 16px; line-height: 1.4; color: var(--text-primary); margin-bottom: 8px; }
.step-two-detail-value { font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: 16px; line-height: 1.4; color: var(--text-secondary); }
.step-two-selected-options { display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap; }
.step-two-option-tag { display: flex; align-items: center; gap: var(--space-md); padding: 8px 15px; background: var(--surface-color); border: 2px solid var(--text-secondary); border-radius: var(--radius-full); min-height: 45px; }
.step-two-option-indicator { position: relative; width: 25px; height: 25px; border-radius: var(--radius-full); background: #F4F1DE; display: flex; align-items: center; justify-content: center; }
.step-two-option-indicator.selected::after { content: ''; position: absolute; top: 4px; left: 4px; width: 17px; height: 17px; border-radius: var(--radius-full); background: var(--accent-color); }
.step-two-option-text { font-family: var(--font-primary); font-weight: 500; font-size: 18px; line-height: 1; color: #221E44; }
.step-two-edit-icon svg circle {fill: var(--text-secondary);}
.step-two-edit-icon svg:hover circle {fill: var(--accent-color);}
/* Step Two Section Divider */
.step-two-section-divider { width: 0; height: 30px; border-left: 2px solid #EEEEEE; margin: 0; }
/* Step Two Upload Section */
.step-two-upload-description { font-family: var(--font-primary); font-weight: 400; font-size: 18px; line-height: 1.33; text-align: center; color: #221E44; margin: 0; max-width: 640px;}
.step-two-upload-area { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--space-3xl); padding: var(--space-3xl); width: 100%; max-width: 616px; background: #EEEEEE; border: 2px solid #B8B7BE; border-radius: var(--radius-lg); cursor: pointer; transition: var(--transition-normal); }
.step-two-upload-area:hover { background: #E0E0E0; border-color: var(--secondary-color); }
.step-two-upload-area.drag-over { background: #f0f0f0; border-color: var(--accent-color); border-width: 3px; box-shadow: 0 0 20px rgba(255, 152, 0, 0.3); }
.step-two-upload-content { display: flex; flex-direction: column; align-items: center; gap: var(--space-lg); max-width: 130px; }
.step-two-upload-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; }
.step-two-upload-text { font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.22; text-align: center; color: #221E44; }
.step-two-upload-text span { color: var(--accent-color); }
.step-two-file-types { font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.33; text-align: center; color: #221E44; }
/* Step Two Navigation */
.step-two-navigation { display: flex; align-items: center; gap: var(--space-3xl); margin-top: var(--space-lg); }
.step-two-back-btn { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 7px 40px; background: var(--surface-color); border: 2px solid var(--text-secondary); border-radius: var(--radius-full); cursor: pointer; transition: var(--transition-normal); font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.22; color: #221E44; min-height: 40px; text-decoration: none; }
.step-two-back-btn .btn-text { display: inline-flex; align-items: center; color: #221E44; }
.step-two-back-btn:hover .btn-text { color: var(--surface-color); }
.step-two-back-btn .btn-loading { display: none; align-items: center; gap: 8px; font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.22; color: #221E44; white-space: nowrap; }
.step-two-back-btn .btn-loading[style*="display: block"],
.step-two-back-btn .btn-loading[style*="display: inline"],
.step-two-back-btn .btn-loading[style*="display: inline-block"],
.step-two-back-btn .btn-loading[style*="display: flex"],
.step-two-back-btn .btn-loading.show { display: inline-flex !important; }
.step-two-back-btn .btn-loading .spinner { width: 16px; height: 16px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; flex-shrink: 0; color: #221E44; }
.step-two-back-btn svg.btn-arrow { width: 7px; height: 20px; flex-shrink: 0; }
.step-two-back-btn:hover svg.btn-arrow path { stroke:var(--surface-color); }
.step-two-back-btn svg:not(.btn-arrow) { width: 7px; height: 20px; }
.step-two-back-btn:hover:not([style*="pointer-events: none"]) { background:var(--text-secondary); }
.step-two-back-btn[style*="pointer-events: none"] { opacity: 0.7; cursor: not-allowed; }
.step-two-next-btn { display: flex; justify-content: center; align-items: center; gap: 10px; padding: 7px 40px; background: var(--text-secondary); border: 2px solid var(--text-secondary); border-radius: var(--radius-full); cursor: pointer; transition: var(--transition-normal); font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.22; color: var(--surface-color); min-height: 40px; }
.step-two-next-btn .btn-text { display: inline-flex; align-items: center; color: var(--surface-color); }
.step-two-next-btn:hover .btn-text , .step-two-next-btn:hover span { color: var(--text-secondary); }
.step-two-next-btn .btn-loading { display: none; align-items: center; gap: 8px; font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.22; color: var(--surface-color); white-space: nowrap; }
.step-two-next-btn .btn-loading[style*="display: block"],
.step-two-next-btn .btn-loading[style*="display: inline"],
.step-two-next-btn .btn-loading[style*="display: inline-block"],
.step-two-next-btn .btn-loading[style*="display: flex"],
.step-two-next-btn .btn-loading.show { display: inline-flex !important; }
.step-two-next-btn .btn-loading .spinner { width: 16px; height: 16px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; flex-shrink: 0; color: var(--surface-color); }
.step-two-next-btn svg.btn-arrow { width: 7px; height: 20px; flex-shrink: 0; }
.step-two-next-btn:hover svg.btn-arrow path { stroke: var(--text-secondary); }
.step-two-next-btn svg:not(.btn-arrow) { width: 7px; height: 20px; }
.step-two-next-btn:hover:not(:disabled) { background: transparent; color:var(--surface-color); }
.step-two-next-btn:disabled { opacity: 0.7; cursor: not-allowed; }
.button-spinner { display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.uploading-file-area-content p { font-family: var(--font-primary); font-weight: 400; font-size: 18px; line-height: 1.33; color: var(--white); text-align: center; }
.uploading-file-area-icon { text-align: center; }
.uploading-file-area { position: absolute; background: #221E44D9; width: 100%; height: 100%; border-radius: 16px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; flex-direction: column; gap: 20px; top: 0; left: 0; right: 0; }
/* File Info Component */
.file-info-component { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding: 20px; width: 100%; background: var(--surface-color); border: 2px solid #EEEEEE; border-radius: 20px; }
.file-info-component-wrapper { width: 100%; max-width: 830px; display: flex; flex-wrap: wrap; flex-direction: column; gap: 20px; }
.file-info-content { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; width:330px;}
.file-name-icon { display: flex; align-items: center; gap: 10px; width: auto; }
.file-icon-wrapper { width: 27px; height: 27px; flex-shrink: 0; }
.file-name { font-family: var(--font-primary); font-weight: 600; font-size: 18px; line-height: 1.33; color: #221E44; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: normal;
overflow-wrap: anywhere; max-width: 100%; }
.file-details { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; padding-left: 0; justify-content: center; text-align: center;}
.file-meta { font-family: var(--font-primary); font-weight: 600; font-size: 16px; line-height: 1.5; color: #221E44; }
.delete-file { font-family: var(--font-primary); font-weight: 600; font-size: 16px; line-height: 1.5; color: #BF2B23; cursor: pointer; transition: var(--transition-normal); }
.delete-file:hover { text-decoration: underline; }
.file-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; width: auto; justify-content: flex-end; }
.step-two-upload-section .file-actions { width: calc(100% - 340px); }
/* Base Button Styles */
.file-actions button, .file-actions a { display: flex; align-items: center; gap: 10px; padding: 5px 40px; border-radius: 100px; border: 2px solid; cursor: pointer; transition: var(--transition-normal); font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.22; text-align: center; }
/* Original State Buttons */
.file-info-component.original .btn-map-headers {
background: #F9D9C8 !important;
border-color: #E08C5F !important;
color: #221E44 !important;
font-weight: 700 !important;
}
.file-info-component.original .btn-map-headers:hover {
background: #F9D9C8 !important;
box-shadow: none !important;
color: #221E44 !important;
font-weight: 700 !important;
cursor: default !important;
}
.file-info-component.original .btn-map-headers:visited {
background: #F9D9C8 !important;
border-color: #E08C5F !important;
color: #221E44 !important;
font-weight: 700 !important;
}
.file-info-component.original .btn-map-headers:active {
background: #F5D0BC !important;
border-color: #E08C5F !important;
color: #221E44 !important;
font-weight: 700 !important;
}
.file-info-component.original .btn-map-headers:focus {
background: #F9D9C8 !important;
border-color: #E08C5F !important;
color: #221E44 !important;
outline: none !important;
font-weight: 700 !important;
}
.file-info-component .btn-edit {
background: #3D405B ;
border-color: #3D405B ;
color: var(--surface-color) ;
font-weight: 700 ;
}
.file-info-component .btn-edit:hover {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: var(--surface-color) ;
font-weight: 700 ;
}
.file-info-component .btn-edit:active {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: var(--surface-color) ;
font-weight: 700 ;
}
.file-info-component .btn-edit:focus {
background-color: var(--accent-color);
border-color: var(--accent-color);
color: var(--surface-color) ;
font-weight: 700 ;
outline: none ;
}
.file-info-component.original .alert-icon { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Incomplete State Button */
.file-info-component.incomplete .btn-mapping-headers { background-color: #F9D9C8; border-color: #E08C5F; color: #221E44; position: relative; overflow: hidden; cursor: default; }
.file-info-component.incomplete .btn-mapping-headers:hover { color: #221E44; box-shadow: none; cursor: default; }
.file-info-component.incomplete .btn-mapping-headers:hover:after { width: 0; }
.file-info-component.incomplete .btn-mapping-headers:after { background: #E08C5F; width: 0; height: 100%; content: ''; left: 0; top: 0; bottom: 0; position: absolute; border-radius: 100px 0 0 100px; z-index: -1; transition: none; }
/* Complete State Button */
.file-info-component.complete .btn-mapping-headers {
background-color: #DFECCD;
border-color: #9BCD5B;
color: #221E44;
text-decoration: none;
cursor: default;
}
.file-info-component.complete .btn-mapping-headers:hover {
background-color: #DFECCD;
color: #221E44;
box-shadow: none;
text-decoration: none;
cursor: default;
}
.file-info-component.complete .btn-mapping-headers:active {
background-color: #8AB84A;
color: white;
text-decoration: none;
}
.file-info-component.complete .btn-mapping-headers:visited {
background-color: #DFECCD;
border-color: #9BCD5B;
color: #221E44;
text-decoration: none;
}
/* erroe State Button */
.file-info-component.error .btn-mapping-headers { background: #BF2B23; border: 1px solid #BF2B23; color: #fff; cursor: default; }
.file-info-component.error .btn-mapping-headers:hover { background: #BF2B23; border: 1px solid #BF2B23; color: #fff; cursor: default; }
/* Progress Container for Incomplete State */
.mapping-progress-container { position: relative; width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mapping-progress-bg { position: absolute; width: 25px; height: 25px; background-color: #F9D9C8; border: 2px solid #E08C5F; border-radius: 50%; }
.mapping-progress-fill { position: absolute; width: 10px; height: 25px; background-color: #E08C5F; border-radius: 25px 0 0 25px; left: 0; top: 0; }
/* Complete Icon */
.complete-icon { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
/* Text Styling */
.mapping-text { font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.22; text-align: center; }
.submit-page .file-info-component-wrapper { max-width: 100%; gap: 10px; }
.submit-page .form-section.step-two-upload-section { border: none; padding: 0; }
/* Submit Message Page Specific Styles */
body.submit-message-page { overflow: hidden; height: 100vh; }
/* Progress Bar Animation */
.progress-bar-fill { position: absolute; top: 0; left: 0; width: 0; /* Start at 0 for animation */ max-width: 100%; /* 456/793 = 57.5% */ height: 100%; background-color: #9BCD5B; border-radius: 38.5px; transition: width 3s ease-in-out; }
/* Animation class to trigger progress */
.progress-bar-fill.animate { width: 0; /* Final width as per Figma */ }
/* Ensure progress bar container is ready for animation */
.progress-bar-container { position: relative; width: 793px; height: 27px; max-width: 100%; overflow: hidden; }
/* Thank You Overlay Styles */
.thank-you-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: #221E44BF; /* Semi-transparent dark blue */ display: flex; align-items: center; justify-content: center; z-index: 9999; }
.thank-you-content { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 793px; max-width: 90%; }
/* Thank You Message */
.thank-you-message { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 700px; max-width: 100%; }
.thank-you-title { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 600; font-size: 36px; line-height: 1.3; letter-spacing: 0.28px; text-align: center; color: #FFFFFF; margin: 0; width: 100%; }
.thank-you-subtitle { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.22em; text-align: center; color: #FFFFFF; margin: 0; width: 100%; }
/* Progress Section */
.progress-section { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 100%; }
.progress-title { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 600; font-size: 24px; line-height: 1.25em; text-align: center; color: #FFFFFF; margin: 0; }
/* Progress Bar */
.progress-bar-container { position: relative; width: 793px; height: 27px; max-width: 100%; }
.progress-bar-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #FFFFFF; border: 4px solid #FFFFFF; border-radius: 38.5px; }
.progress-bar-fill { position: absolute; top: 0; left: 0; width: 0; /* 456px out of 793px as per Figma */ max-width: 100%; /* 456/793 = 57.5% */ height: 100%; background-color: #9BCD5B; border-radius: 38.5px; }
/* ===== Pagination (matches your design system) ===== */
.pagination { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); width: 100%; max-width: 1033px; }
.pagination-summary { font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); color: var(--text-secondary); margin: 0; }
.pagination-list { list-style: none; display: inline-flex; align-items: center; gap: var(--space-xs); margin: 0; padding: 0; flex-wrap: wrap; }
/* Items */
.page-item { display: inline-flex; }
.page-item.disabled .page-link { pointer-events: none; opacity: 0.6; cursor: default; }
.page-item.active .page-link { background: var(--accent-green); color: var(--surface-color); border-color: var(--accent-green); cursor: default; }
/* Links/buttons */
.page-link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); min-width: 40px; height: 40px; padding: 0 var(--space-md); border-radius: var(--radius-md); border: 1.5px solid var(--border-color); background: var(--surface-color); color: var(--text-secondary); font-family: var(--font-primary); font-weight: var(--font-weight-bold); font-size: 14px; line-height: 1; text-decoration: none; transition: var(--transition-fast); }
.page-link:hover { border-color: var(--secondary-color); box-shadow: var(--shadow-sm); }
.page-link:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; box-shadow: var(--shadow-focus); }
.page-icon { display: inline-flex; width: 20px; height: 20px; }
/* Mapping Header Component Styles */
.mapping-header .step-two-review-content { max-width: 572px; margin-bottom: 40px; }
.mapping-header-file-info { display: flex; flex-wrap: wrap; align-items: center; gap: 21px; width: 100%; }
.mapping-header-file-icon { flex-shrink: 0; }
.mapping-header-icon-background { width: 30px; height: 24px; background: #FEFDF4; border-radius: 8px; display: flex; align-items: center; justify-content: center; position: relative; }
.mapping-header-icon-background img { width: 100%; height: 100%; object-fit: contain; }
.mapping-header-icon-background svg { width: 36px; height: 36px; }
.mapping-header-file-details { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.mapping-header-file-title { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 600; font-size: 24px; line-height: 1.25em; color: var(--text-primary); margin: 0; text-align: center; }
.mapping-header-file-meta { display: flex; flex-direction: column; gap: 10px; align-self: stretch; }
.mapping-header-file-info-text { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 400; font-size: 18px; line-height: 1.33em; color: #000000; }
.mapping-header-divider { width: 100%; height: 2px; background: #3D405B; }
.mapping-header-user-avatar { flex-shrink: 0; }
.mapping-header-avatar-circle { width: 36px; height: 36px; border-radius: 50%; position: relative; }
.mapping-header-avatar-circle:hover svg circle { fill: var(--text-secondary); }
.mapping-header-navigation { display: flex; align-items: center; gap: 40px; }
.mapping-header-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 7px 40px 7px; border-radius: 100px; border: 2px solid #3D405B; background: transparent; font-family: acumin-pro,sans-serif, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.22em; cursor: pointer; transition: all 0.3s ease; min-height: 40px; }
.mapping-header-btn-back { color: #221E44; background: transparent; }
.mapping-header-btn-back .btn-text { display: inline-flex; align-items: center; color: #221E44; }
.mapping-header-btn-back .btn-loading { display: none; align-items: center; gap: 8px; font-family: acumin-pro,sans-serif, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.22em; color: #221E44; white-space: nowrap; }
.mapping-header-btn-back .btn-loading[style*="display: block"],
.mapping-header-btn-back .btn-loading[style*="display: inline"],
.mapping-header-btn-back .btn-loading[style*="display: inline-block"],
.mapping-header-btn-back .btn-loading[style*="display: flex"],
.mapping-header-btn-back .btn-loading.show { display: inline-flex !important; }
.mapping-header-btn-back .btn-loading .spinner { width: 16px; height: 16px; border: 2px solid transparent; border-top: 2px solid currentColor; border-radius: 50%; animation: spin 1s linear infinite; flex-shrink: 0; color: #221E44; }
.mapping-header-btn-back svg.btn-arrow { width: 6px; height: 10px; flex-shrink: 0; }
.mapping-header-btn-back:hover:not([style*="pointer-events: none"]) { background: #2A2D42; border-color: #2A2D42; color: #FFFFFF; }
.mapping-header-btn-back:hover:not([style*="pointer-events: none"]) .btn-text { color: #FFFFFF; }
.mapping-header-btn-back:hover:not([style*="pointer-events: none"]) svg path { stroke: #FFFFFF; }
.mapping-header-btn-back[style*="pointer-events: none"] { opacity: 0.7; cursor: not-allowed; }
.mapping-header-btn-next { color: #221E44; background: transparent; }
.mapping-header-btn-next:hover { background: #2A2D42; border-color: #2A2D42; color: #FFFFFF; }
.mapping-header-btn-next:hover svg path { stroke: #FFFFFF; }
.mapping-header-btn svg { width: 6px; height: 10px; flex-shrink: 0; }
.mapping-header-btn-next svg path { stroke: #3D405B; }
.mapping-header-btn-back svg path { stroke: #3D405B; }
.mapping-header-btn:disabled, .mapping-header-btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; }
.mapping-header-btn-back.disabled { color: #221E44; background: transparent; }
.mapping-header-btn-back.disabled svg path { stroke: #3D405B; }
.mapping-header-btn-next.disabled { color: #221E44; background: transparent; border-color: #3D405B; }
.mapping-header-btn-next.disabled svg path { stroke: #3D405B; }
.mapping-header .form-section.step-two-upload-section { padding: 0; border: none; margin-top: 40px; }
.mapping-header .step-two-section-divider { display: none; }
.mapping-header .form-section.step-two-upload-section .section-title strong { font-weight: 600; font-size: 24px; }
p.mapping-faq-text {
font-size: 18px !important;
text-align: center;
}
/* Mapping Block Column Component Styles */
.mapping-block-column-wrapper { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 1154px; margin: 0 auto; }
/* Titles Row */
.title-section { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.title-text { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.22em; color: #221E44; text-align: left; }
.file-column-header, .data-preview-title, .system-header-title, .import-options-title { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.22em; color: #221E44; text-align: left; margin: 0; }
/* Desktop Columns */
.desktop-mapping-columns { display: flex; flex-direction: column; gap: 20px; }
.map-column-top { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; padding: 20px 40px; background: #FFFFFF; border: 2px solid #EEEEEE; border-radius: 20px; width: 100%; justify-content: space-between; }
.column-section { display: flex; flex-direction: column; align-items: center; gap: 30px; font-size: 18px; }
.map-column-top .column-section:nth-child(1) { width: 69px; }
.map-column-top .column-section:nth-child(2) { width: 170px; }
/* .map-column-top .column-section:nth-child(3) { width: 120px; } */
.map-column-top .column-section:nth-child(4) { width: 177px; }
.map-column-top .column-section:nth-child(5) { width: 140px; }
.map-column .column-section:nth-child(1) { width: 69px; }
.map-column .column-section:nth-child(2) { width: 170px; }
.map-column .column-section:nth-child(3) { width: 120px; }
.map-column .column-section:nth-child(4) { width: 177px; }
.map-column .column-section:nth-child(5) { width: 140px; }
.map-column .formInput {
max-width: 135px;
}
.status-text { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.22em; color: #221E44; text-align: left; }
/* Map Columns */
.map-column { display: flex; align-items: center; flex-wrap: wrap; gap: 20px; justify-content: space-between; padding: 20px 40px; background: #FFFFFF; border: 2px solid #EEEEEE; border-radius: 20px; width: 100%; }
.status-icon { width: 25px; height: 25px; display: flex; align-items: center; justify-content: center; }
.formInput {background: transparent;padding: 0;border-radius: 20px;border: none;display: flex;flex-wrap: wrap; font-family: var(--font-primary);}
.formInput:focus {outline: none;}
/* Complete and Incomplete States */
.map-column.complete .status-icon svg circle { fill: #9BCD5B; }
.map-column.incomplete .status-icon svg circle { fill: #BF2B23; }
.map-column.incomplete { border-left: 2px solid #EEEEEE !important; }
.column-header { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 165px; }
.column-header-text { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 400; font-size: 18px; line-height: 1.33em; color: #221E44; text-align: center; margin: 0; width: 100%; }
.map-column.selected .column-header-text { color: #B8B7BE; }
.data-preview { display: flex; flex-direction: column; gap: 30px; width: 111px; }
.data-preview-text { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 400; font-size: 18px; line-height: 1.33em; color: #221E44; text-align: left; margin: 0; }
.map-column.selected .data-preview-text { color: #B8B7BE; }
.system-header { display: flex; flex-direction: column; align-items: center; gap: 20px; width: 177px; }
.header-title-frame { display: flex; justify-content: center; align-items: center; align-self: stretch; gap: 10px; padding: 10px 40px; border: 2px solid #3D405B; border-radius: 100px; width: 100%; }
.map-column.selected .header-title-frame { border-color: #B8B7BE; }
.header-title-text { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 400; font-size: 18px; line-height: 1.33em; color: #221E44; text-align: left; }
.map-column.selected .header-title-text { color: #B8B7BE; }
.import-options { display: flex; flex-direction: column; align-items: center; gap: 30px; width: 140px; }
.radio-option { display: flex; align-items: center; align-self: stretch; gap: 20px; width: 100%; }
.radio-option .radio-input { display: none; }
.radio-option .radio-label { display: flex; align-items: center; gap: 20px; cursor: pointer; width: 100%; padding: 0; border: none; }
.radio-circle { width: 20px; height: 20px; border-radius: 50%; background: #FFFFFF; border: 2px solid #3D405B; position: relative; flex-shrink: 0; }
.map-column.selected .radio-circle::after, .radio-input:checked + .radio-label .radio-circle::after { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: #E08C5F; }
.radio-text { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 400; font-size: 18px; line-height: 1.33em; color: #221E44; text-align: left; }
.radio-option input { appearance: none; }
/* ===== Optional: ellipsis support ===== */
.page-item.ellipsis .page-link { pointer-events: none; cursor: default; background: transparent; border-color: transparent; color: var(--text-muted); }
/* MFA CSS */
.formFiledCon {display: flex;flex-direction: column;gap: 25px;}
.mt-2 {margin-top: 20px;}
label.formLabel {font-weight: 600;}
#toast-container>div {background-position: top 14px left 13px !important;border-radius: 20px !important;}
.toast-message {font-size: 16px !important;}
#toast-container>.toast-error { opacity: 1 !important;background-color: #BF2B23 !important; }
#toast-container>.toast-success { background-size: 19px;background-position: left 20px top 18px !important; opacity: 1 !important; background-color: "#4CAF50"; }
.toast-bottom-center { bottom: 0 !important; right: 0 !important; width: calc(100% - 40px) !important; left: 20px !important; }
/* Mobile View - Hidden by default */
.mobile-view { display: none; }
/* .formFiledCon .filedgroup {margin-bottom: 20px;} */
.log-show-container h4 {margin-bottom: 15px;}
.log-show-container .formFiledCon .filedgroup .formInput {border-bottom: 1px solid var(--primary-color);border-radius: 0;margin-top: 10px;}
.log-show-container .formFiledCon button span {display: flex;flex-wrap: wrap;align-items: center;gap: 13px;font-size: 16px;}
.log-show-container .formFiledCon button span svg {width: 22px;}
.log-show-container .formFiledCon button {padding: 10px 20px;display: flex;flex-wrap: wrap;align-items: center;gap: 10px;}
.log-show-container .formFiledCon .mb-6 .space-y-4 {
margin-top: 25px;
padding: 15px;
border: 1px solid var(--text-primary);
border-radius: 15px;
}
.role-create-edit-container .commonForm .filedgroup {
margin: 0;
}
.role-create-edit-container .border.rounded-md.p-3 {
line-height: normal;
padding-bottom: 15px;
margin-bottom: 10px;
border-bottom: 1px solid var( --text-primary);
border-radius: 0 !important;
}
.role-create-edit-container .border button {
color: var(--accent-color);
background: transparent;
border: none;
font-size: 16px !important;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
}
.role-create-edit-container .border h4 {
font-size: 20px !important;
margin-bottom: 14px;
}
.role-create-edit-container .grid-cols-1.grid.gap-4 {
padding-top: 30px;
width: 100%;
}
.role-create-edit-container .border .flex.space-x-1 {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 10px;
}
.role-create-edit-container [type="checkbox"] {
appearance: none;
position: relative;
}
.role-create-edit-container [type="checkbox"] span {
position: relative;
padding-left: 20px;
}
.role-create-edit-container [type="checkbox"] + span {
padding-left: 29px;
position: relative;
font-size: 15px !important;
line-height: 17px!important;
}
.role-create-edit-container [type="checkbox"] + span:after {
border-radius: var(--radius-full);
background: var(--warning-color);
border: 2px solid #221e44;
width: 14px;
height: 14px;
position: absolute;
content: '';
left: 0;
top: -1px;
}
.role-create-edit-container [type="checkbox"]:checked + span:before {
content: '';
width: 12px;
height: 8px;
background-image: url("data:image/svg+xml,%3Csvg%20width%3D'12'%20height%3D'8'%20viewBox%3D'0%200%2012%208'%20fill%3D'none'%20xmlns%3D'http%3A//www.w3.org/2000/svg'%3E%3Cpath%20d%3D'M2%204.69L4.39%207.63L10%202'%20stroke%3D'%23221e44'%20stroke-width%3D'2'/%3E%3C/svg%3E");
position: absolute;
left: 3px;
z-index: 1;
top: 3px;
}
.role-create-edit-container .border .grid.grid-cols-1.gap-1 {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: unset;
}
.role-create-edit-container .border.rounded-md.p-3:last-child {
border: none;
}
.role-create-edit-container .commonForm .filedgroup .formLabel {
padding: 0;
}
.role-create-edit-container .commonForm .filedgroup:last-child {
align-items: flex-start;
flex-wrap: wrap;
}
.log-show-container .formFiledCon .mb-6 .space-y-4 .border-b {
margin-top: 20px;
}
.log-show-container .formFiledCon .mb-6 .space-y-4 .border-b .bg-white {
margin-top: 5px;
}
.log-show-container .formFiledCon .mb-6 .space-y-4 .border-b .bg-white span.text-gray-600 {
border-bottom: 1px solid var(--text-primary);
font-size: 16px;
}
.log-show-container .form-section:last-child .formFiledCon {
max-width: 750px;
width: 100%;
}
.commonFormSection .formFiledCon {
max-width: 750px;
width: 100%;
}
span.job-date-span {
display: flex;
flex-wrap: wrap;
align-items: center;
gap:5px 0;
}
span.job-date-span div {
line-height: 1.4;
display: inline-block;
}
.admin-dashboard-main .jobs-and-faqs-container {
justify-content: flex-start;
}
@media (max-width:1600px) {
/* .recent-jobs-container { width: calc((100% - 428px) - var(--space-lg)); } */
/* .faqs-section { width: 418px; } */
.job-card-footer { gap: 20px; }
/* .cta-card { width: calc((100% - 428px) - var(--space-lg)); } */
.nav-list {
gap: 30px;
}
.footer-nav-list { gap: var(--spacing-xl); }
}
@media (max-width:1440px) {
.footer-nav-list { gap: 15px; }
.footer-content { margin: 0 20px; }
.nav-list { gap: 15px; }
/* cards/jobs */
/* .job-meta { justify-content: flex-start; } */
.job-card-header { gap: 10px; }
/* .job-actions { width: 100%; } */
.job-card-footer { gap: 10px; }
/* .job-dates { width: 100%; text-align: left; } */
.recent-jobs-container { width: 100%; }
.cta-card { max-width: 100%; width: 100%; }
.footer-nav-list { gap: 15px; }
.footer-content { margin: 0 20px; }
.start-job-block-step-two { max-width: 100%; }
.header-title-frame { padding: 10px 20px; }
.system-header { width: auto; }
span.header-title-text { font-size: 16px; }
.data-preview-text { font-size: 16px; }
.radio-text { font-size: 16px; }
.column-header-text { font-size: 16px; }
.column-header { width: auto; }
.data-preview { width: auto; }
.map-column .column-section:nth-child(4), .map-column-top .column-section:nth-child(4) { width: 110px; }
.nav-link { font-size:15px; }
}
@media (max-width:1280px) {
.header-actions .btn, .footer-actions .btn { padding: 7px 20px; }
.header-actions { gap: var(--spacing-sm); }
.logo-section .logo { height: 29px; }
.login-section { padding: 40px 20px; }
.cta-card { max-width: 100%; }
.recent-jobs-container { width: 100%; }
.faqs-section { width: 100%; }
.nav-list { gap: 15px; }
}
@media (max-width:1200px) {
.products-services { flex-direction: column; align-items: flex-start; gap: 15px; }
.portal-header.main-header .container { padding: 0 var(--space-lg); }
/* header/container spacing */
.container { padding: 0 var(--space-lg); }
/* #main-content.main-content { padding: var(--space-lg); } */
/* mobile menu toggle visibility */
.mobile-menu-toggle { display: flex; }
/* footer ≤1150px content merged up to ≤1200px */
.footer-top { gap: var(--spacing-xl); text-align: center; }
.footer-nav { margin: 0; width: 100%; text-align: left; }
.footer-nav-list { flex-direction: column; gap: var(--spacing-sm); }
.footer-actions { flex-direction: column; gap: var(--spacing-md); }
.footer-bottom-content { gap: var(--spacing-sm); text-align: center; }
ul.footer-nav-list li { border-bottom: 1px solid rgb(255 255 255 / 20%); display: inline-block; }
.social-icons { justify-content: flex-start; }
.footer-logo-section { order: 1; }
.footer-actions { order: 3; width: 100%; flex-direction: initial; }
.social-section { order: 2; margin: 0; width: auto; }
nav.footer-nav { order: 4; width: 100%; }
.social-icons { width: auto; gap: 10px; }
.btn-outline-light { width: auto; min-width: 153px; }
.btn-primary { width: auto; min-width: 153px; }
.footer-logo-section .footer-logo { height: 31px; }
.footer-top { margin-bottom: 50px; }
/* responsive utility helpers */
.d-lg-none { display: none !important; }
.d-lg-block { display: block !important; }
.d-lg-flex { display: flex !important; }
.start-job-block-step-one { max-width: 100%; padding: 0; }
.form-sections { width: 100%; max-width: 900px; }
.step-header { width: 100%; max-width: 500px; }
.step-two-card { padding: var(--space-3xl); }
.step-two-job-header { width: 100%; max-width: 400px; }
.step-two-selected-options { gap: 10px; }
.map-column { padding: 20px; }
.map-column .column-section:nth-child(1) { width: 24px; }
.map-column-top { padding: 20px; }
.map-column-top .column-section:nth-child(2) {width: 130px;}
.status-text, .file-column-header, .data-preview-title, .system-header-title, .import-options-title {font-size: 16px;}
}
@media (max-width:1150px) {
.container { padding: 0 var(--spacing-md); }
.header-content { padding: var(--spacing-md) 0; }
.desktop-nav { display: none; }
.mobile-menu-btn { display: flex; }
.header-actions { display: none; }
/* Mobile Menu Overlay */
.mobile-menu { display: block; position: fixed; top: 79px; left: 0; width: 100%; height: calc(100vh - 79px); background: var(--white); z-index: 999; transform: translateX(-100%); transition: transform var(--transition-normal); overflow-y: auto; }
.mobile-menu.active { transform: translateX(0); }
.mobile-menu-content { padding: 0 var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-lg); }
.mobile-nav-list { list-style: none; display: flex; flex-direction: column; gap: 0; padding: 0 0 10px 0; }
.mobile-nav-link { font-family: var(--font-primary); font-weight: 700; font-size: 14px; color: var(--dark-text); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--border-light); transition: var(--transition-fast); display: flex; align-items: center; justify-content: space-between; }
.mobile-nav-link:hover { color: var(--accent-green); }
.mobile-menu-actions { display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-xl); flex-wrap: wrap; margin-left:20px; margin-right:20px;}
/* Mobile Submenu Styles */
.mobile-submenu { list-style: none; max-height: 0; overflow: hidden; transition: max-height var(--transition-normal); background: rgb(155 205 91 / 29%); border-radius: 8px; }
.mobile-nav-item.has-dropdown.active .mobile-submenu { max-height: 300px; padding: 0; margin: 0; }
.mobile-submenu-item { margin: 0; }
.mobile-submenu-link { display: block; padding: var(--spacing-xs) var(--spacing-md); color: var(--dark-text); text-decoration: none; font-family: var(--font-primary); font-weight: 500; font-size: 14px; transition: var(--transition-fast); border-bottom: 1px solid rgba(155, 205, 91, 0.1); }
.mobile-submenu-link:hover { background: rgba(155, 205, 91, 0.1); color: var(--accent-green); }
.mobile-submenu-item:last-child .mobile-submenu-link { border-bottom: none; }
/* Mobile Dropdown Toggle */
.mobile-dropdown-toggle { cursor: pointer; transition: transform var(--transition-fast); }
.mobile-nav-item.has-dropdown.active .mobile-dropdown-toggle { transform: rotate(90deg); }
.desktop-nav { display: none; }
.mobile-menu-btn { display: flex; }
.header-actions { display: none; }
.hero-section { padding: var(--spacing-xl) 0; min-height: auto; }
.form-container { width: 100%; max-width: calc(100vw - 32px); height: auto; }
.form-input { width: 100%; font-size: 16px; }
.btn-submit { width: 100%; }
.mobile-menu-content { padding: 0; background-color: var(--text-primary); gap: 0; }
.mobile-menu-content nav.mobile-nav li a { padding: 10px 20px; color: #fff; background-color: transparent; }
.mobile-menu-content nav.mobile-nav li a:hover { color: var(--accent-green); }
.mobile-menu-content nav.mobile-nav li + li { border-top: 2px solid #505477; }
.mobile-menu-content nav.mobile-nav .mobile-submenu li.mobile-submenu-item a { padding: 10px 10px; }
.mobile-nav-item.has-dropdown.active .mobile-submenu { border-top: 0px solid #505477; margin: 0 15px 20px; }
div#mobileMenu { background-color: var(--text-primary); }
.privacy-section { position: static; transform: none; width: 100%; max-width: calc(100vw - 32px); margin: var(--spacing-xxl) auto; }
.footer-top { gap: var(--spacing-xl); text-align: center; }
.footer-nav { margin: 0; width: 100%; text-align: left; }
.footer-nav-list { flex-direction: column; gap: var(--spacing-sm); }
.footer-actions { flex-direction: column; gap: var(--spacing-md); }
.footer-bottom-content { gap: var(--spacing-sm); text-align: center; }
.hero-content { max-width: 600px; margin: 0 auto; }
.form-container { max-width: 500px; }
.form-input { max-width: 500px; }
.btn-submit { max-width: 500px; }
ul.footer-nav-list li { border-bottom: 2 px solid rgb(255 255 255 / 20%); display: inline-block; }
.social-icons { justify-content: flex-start; }
.footer-logo-section { order: 1; }
.footer-actions { order: 3; width: 100%; flex-direction: initial; }
.social-section { order: 2; margin: 0; width: auto; }
nav.footer-nav { order: 4; width: 100%; }
.social-icons { width: auto; gap: 10px; }
.btn-outline-light { width: auto;/* height: auto; */ min-width: 153px; }
.btn-primary { width: auto;/* height: auto; */ min-width: 153px; }
.footer-logo-section .footer-logo { height: 31px; }
.footer-top { margin-bottom: 50px; }
.empty-state-icon svg {width: 60px;height: 60px;}
}
@media (max-width:1024px) {
/* switch layout from two-column to stacked */
.main-layout { flex-direction: column; }
.sidebar-primary { width: 100%; border-radius: 0; margin: 0; }
#main-content.main-content { margin-left: 0; max-width: 100vw; }
/* CTA / Jobs */
.cta-card { height: auto; padding: var(--space-lg); }
.cta-content { width: 100%; padding: 0; }
.cta-title { font-size: var(--font-size-2xl); height: auto; }
.cta-description { height: auto; }
.job-card-header { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.job-meta { gap: var(--space-lg); }
.job-card-footer { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.job-dates { text-align: left; }
/* responsive utility helpers */
.d-md-none { display: none !important; }
.d-md-block { display: block !important; }
.d-md-flex { display: flex !important; }
/* collapsed sidebar */
.sidebar-primary { flex: auto; position: relative; }
.sidebar-content { padding: 20px; align-items: center; gap: 0; width: 100%; }
.profile-img { width: 50px; height: 50px; }
.sidebar-nav { width: 100%; }
.profile-block-res-toggle-icon { display: block; }
#main-content.main-content { flex: 1 1 calc(100% - 90px); }
nav.sidebar-nav ul { position: absolute; top: 90px; z-index: 99; background: #3d405a; width: 100%; left: 0; padding: 0 20px 20px; }
.profile-block-res-toggle-icon.active:after { transform: translate(-50%, -50%) rotate(45deg); }
.sidebar-nav .nav-list { display: none }
.view-all-section { justify-content: center; }
.faqs-btn { margin: 0 auto; }
.startJobBtnWrapper { width: 100%; text-align: center; }
.startJobSec .startJobBoxWrapper { text-align: center; padding: 20px; margin-bottom: 0; }
.empty-state-icon svg {width: 40px;height: 40px;}
}
/* Center align text and button for medium screens (767px to 1024px) */
@media (min-width: 767px) and (max-width: 1024px) {
.startJobSec .startJobBoxWrapper {
justify-content: center;
text-align: center;
flex-direction: column;
gap: 20px;
}
.startJobSec .startJobTitle {
text-align: center;
}
.startJobBtnWrapper {
width: 100%;
text-align: center;
}
}
@media (max-width:768px) {
/* responsive utility helpers */
.d-sm-none { display: none !important; }
.d-sm-block { display: block !important; }
.d-sm-flex { display: flex !important; }
.auth-confirmation { padding: 8px 30px 8px 8px; gap: 15px; margin: 0 20px; }
.auth-success-icon { width: 40px; height: 40px; }
.success-circle { width: 40px; height: 40px; }
.checkmark { width: 18px; height: 12px; }
.auth-confirmation-text { font-size: 20px; width: auto; }
.mfa-card { max-width: 100%; padding: 40px 20px; gap: 40px; width: 100%; margin: 0 auto; }
.sms-info-section { width: 100%; max-width: 249px; }
.remember-device-section { justify-content: center; }
.mfa-form .btn-submit { max-width: 100%; }
.mfa-form { width: 100%; }
.logo-welcome-section { width: 100%; max-width: 283px; }
.start-job-card { padding: 40px 20px; min-height: auto; }
.job-title-input { gap: 15px; }
.option-buttons { flex-direction: column; width: 100%; }
.option-btn { width: 100%; justify-content: flex-start; }
.step-progress { width: 100%; }
/* .radio-label { padding: 10px 20px; } */
/* .checkbox-label { padding: 10px 20px; } */
.date-input-wrapper { padding: 10px; }
.date-input { padding: 0; }
.step-two-card { padding: var(--space-xl); }
.step-two-header { max-width: 100%; }
.step-two-progress { width: 100%; max-width: 280px; }
.step-two-navigation { flex-direction: column; gap: var(--space-lg); }
.step-two-upload-area { padding: var(--space-lg); }
.file-info-component { flex-direction: column; align-items: center; gap: 10px; }
.file-info-content { align-items: center; width: 100%; }
.file-name-icon { gap: 10px; }
.file-name { font-size: 16px; width: 193px; text-align: left; }
.file-details { gap: 10px; padding-left: 0; }
.file-meta, .delete-file { font-size: 16px; }
.file-actions { flex-direction: column; gap: 20px; width: 100%; align-items: center; }
.step-two-upload-section .file-actions { width: 100%; }
.file-actions button { font-size: 16px; line-height: 1.375; width: auto;padding: 7px 10px 7px; }
.mapping-text { font-size: 16px; line-height: 1.375; }
.btn-map-headers, .btn-edit { font-size: 16px; line-height: 1.375; width: auto; }
.file-info-component-wrapper { gap: 20px; }
.thank-you-content { gap: 30px; padding: 20px; }
.thank-you-title { font-size: 28px; line-height: 1.8em; }
.thank-you-subtitle { font-size: 16px; line-height: 1.3em; }
.progress-title { font-size: 20px; }
.progress-bar-container { height: 20px; }
.progress-bar-bg, .progress-bar-fill { border-radius: 20px; }
.progress-bar-bg { border: 2px solid #FFFFFF; }
.mapping-header .section-content { max-width: 100%; gap: 10px; }
.mapping-header .step-two-review-content { max-width: 100%; gap: 10px; }
.mapping-header-file-info { gap: 10px; justify-content: space-between; align-self: stretch; }
.mapping-header-file-icon { flex-shrink: 0; }
.mapping-header-file-title { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.22em; text-align: left; width: 153px; }
.mapping-header-file-info-text { font-weight: 400; font-size: 18px; text-align: center; }
.mapping-header-user-avatar { flex-shrink: 0; }
.mapping-header-avatar-circle { width: 36px; height: 36px; }
.mapping-header-navigation { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.mapping-header-btn { display: flex; justify-content: center; align-items: center; gap: 10px; padding:7px 20px; border-radius: 100px; border: 2px solid #3D405B; font-family: acumin-pro,sans-serif, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.22em; text-align: center; }
/* Hide desktop version */
/* .desktop-mapping-columns { display: none; } */
/* Show mobile version */
.mobile-view { display: flex !important; flex-direction: column; gap: 20px; width: 100%; padding: 0; }
/* Mobile styling for columns - exact Figma specs */
.mobile-view .map-column-top, .mobile-view .map-column { flex-direction: column; align-items: center; gap: 40px; width: 100%; max-width: 310px; margin: 0 auto; padding: 40px 20px; background: #FFFFFF; border: 2px solid #EEEEEE; border-radius: 20px; }
/* Mobile column sections */
.mobile-view .column-section { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
/* Specific widths for mobile sections based on Figma */
.mobile-view .column-section:nth-child(1) { width: 69px; }
.mobile-view .column-section:nth-child(2) { width: 165px; }
.mobile-view .column-section:nth-child(3) { width: 111px; }
.mobile-view .column-section:nth-child(4) { width: 173px; }
.mobile-view .column-section:nth-child(5) { width: 140px; }
/* Mobile text alignment */
.mobile-view .file-column-header, .mobile-view .data-preview-title, .mobile-view .system-header-title, .mobile-view .import-options-title { text-align: center; }
.mobile-view .column-header-text, .mobile-view .data-preview-text { text-align: center; }
.mobile-view .radio-option { justify-content: center; }
.mapping-block-column-wrapper { gap: 20px; width: 100%; max-width: none; padding: 0; }
.info-icon[data-tooltip]:hover::before { left: -65px; }
.help-btn { width: 65px;height: 65px; }
.step-two-option-text { font-size: 16px; }
.step-two-option-tag {min-height: auto;padding: 7px 15px;gap: var(--space-sm); }
.step-two-option-indicator.selected::after { width: 12px; height: 12px; }
.step-two-option-indicator { width: 20px; height: 20px; }
.complete-icon { width: 20px; height: 20px; }
.step-two-back-btn { padding: 7px 20px;font-size: 16px; }
.step-two-next-btn { padding: 7px 20px;font-size: 16px; }
.file-actions button, .file-actions a { padding: 5px 20px 5px; font-size: 16px; gap: 8px; }
.cancel-job-container .btn-cancel {padding: 7px 20px 7px; font-size: 16px; min-height: 40px; }
.btn { padding: 7px 20px 7px;font-size: 16px;min-height: 40px; }
.map-column {flex-direction: column;}
.map-column .formInput {border-bottom: 1px solid var(--text-primary);padding: 8px;border-radius: 0;width: 100%;padding-left: 0; max-width: 100%; }
.map-column .column-section {width: 100% !important;text-align: left;align-items: flex-start; gap:5px;}
.form-section.step-two-upload-section {gap: 20px;}
.map-column-top { display:none; }
.info-icon { width:19px; height:19px; }
.portal-header.main-header { height: var(--mob-header-height); }
.portal-header.main-header .logo { width: 140px; height: auto; }
.user-name { font-size: var(--font-size-lg);}
.step-two-upload-section span.file-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
overflow-wrap: anywhere;
}
.filter-Wrapper select {
width: 100%;
margin: 0;
}
.filter-dropdown {
width: 100%;
}
.filter-Wrapper {
gap: 8px;
}
.filter-Wrapper select div {
margin-left: 0 !important;
}
.mapping-header .form-section.step-two-upload-section .section-title strong { font-size: 20px; }
p.mapping-faq-text {
font-size: 16px !important;
text-align: center;
}
}
@media (max-width:1600px) {
/* .recent-jobs-container { width: calc((100% - 428px) - var(--space-lg)); } */
/* .faqs-section { width: 418px; } */
.job-card-footer { gap: 20px; }
/* .cta-card { width: calc((100% - 428px) - var(--space-lg)); } */
.nav-list {
gap: 30px;
}
.footer-nav-list { gap: var(--spacing-xl); }
}
@media (max-width:1440px) {
.footer-nav-list { gap: 15px; }
.footer-content { margin: 0 20px; }
.nav-list { gap: 15px; }
/* cards/jobs */
/* .job-meta { width: 100%; justify-content: flex-start; } */
.job-card-header { gap: 10px; }
/* .job-actions { width: 100%; } */
.job-card-footer { gap: 10px; }
/* .job-dates { width: 100%; text-align: left; } */
.recent-jobs-container { width: 100%; }
.cta-card { max-width: 100%; width: 100%; }
.footer-nav-list { gap: 15px; }
.footer-content { margin: 0 20px; }
.start-job-block-step-two { max-width: 100%; }
.header-title-frame { padding: 10px 20px; }
.system-header { width: auto; }
span.header-title-text { font-size: 16px; }
.data-preview-text { font-size: 16px; }
.radio-text { font-size: 16px; }
.column-header-text { font-size: 16px; }
.column-header { width: auto; }
.data-preview { width: auto; }
.map-column .column-section:nth-child(4), .map-column-top .column-section:nth-child(4) { width: 110px; }
.nav-link { font-size:15px; }
}
@media (max-width:1280px) {
.header-actions .btn, .footer-actions .btn { padding: 7px 20px; }
.header-actions { gap: var(--spacing-sm); }
.logo-section .logo { height: 29px; }
.login-section { padding: 40px 20px; }
.cta-card { max-width: 100%; }
.recent-jobs-container { width: 100%; }
.faqs-section { width: 100%; }
.nav-list { gap: 15px; }
}
@media (max-width:1200px) {
.products-services { flex-direction: column; align-items: flex-start; gap: 15px; }
.portal-header.main-header .container { padding: 0 var(--space-lg); }
/* header/container spacing */
.container { padding: 0 var(--space-lg); }
/* #main-content.main-content { padding: var(--space-lg); } */
/* mobile menu toggle visibility */
.mobile-menu-toggle { display: flex; }
/* footer ≤1150px content merged up to ≤1200px */
.footer-top { gap: var(--spacing-xl); text-align: center; }
.footer-nav { margin: 0; width: 100%; text-align: left; }
.footer-nav-list { flex-direction: column; gap: var(--spacing-sm); }
.footer-actions { flex-direction: column; gap: var(--spacing-md); }
.footer-bottom-content { gap: var(--spacing-sm); text-align: center; }
ul.footer-nav-list li { border-bottom: 1px solid rgb(255 255 255 / 20%); display: inline-block; }
.social-icons { justify-content: flex-start; }
.footer-logo-section { order: 1; }
.footer-actions { order: 3; width: 100%; flex-direction: initial; }
.social-section { order: 2; margin: 0; width: auto; }
nav.footer-nav { order: 4; width: 100%; }
.social-icons { width: auto; gap: 10px; }
.btn-outline-light { width: auto; min-width: 153px; }
.btn-primary { width: auto; min-width: 153px; }
.footer-logo-section .footer-logo { height: 31px; }
.footer-top { margin-bottom: 50px; }
/* responsive utility helpers */
.d-lg-none { display: none !important; }
.d-lg-block { display: block !important; }
.d-lg-flex { display: flex !important; }
.start-job-block-step-one { max-width: 100%; padding: 0; }
.form-sections { width: 100%; max-width: 900px; }
.step-header { width: 100%; max-width: 500px; }
.step-two-card { padding: var(--space-3xl); }
.step-two-job-header { width: 100%; max-width: 400px; }
.step-two-selected-options { gap: 10px; }
.map-column { padding: 20px; }
.map-column .column-section:nth-child(1) { width: 24px; }
.map-column-top { padding: 20px; }
.map-column-top .column-section:nth-child(2) {width: 130px;}
.status-text, .file-column-header, .data-preview-title, .system-header-title, .import-options-title {font-size: 16px;}
}
@media (max-width:1150px) {
.container { padding: 0 var(--spacing-md); }
.header-content { padding: var(--spacing-md) 0; }
.desktop-nav { display: none; }
.mobile-menu-btn { display: flex; }
.header-actions { display: none; }
/* Mobile Menu Overlay */
.mobile-menu { display: block; position: fixed; top: 79px; left: 0; width: 100%; height: calc(100vh - 79px); background: var(--white); z-index: 999; transform: translateX(-100%); transition: transform var(--transition-normal); overflow-y: auto; }
.mobile-menu.active { transform: translateX(0); }
.mobile-menu-content { padding: 0 var(--spacing-lg); display: flex; flex-direction: column; gap: var(--spacing-lg); }
.mobile-nav-list { list-style: none; display: flex; flex-direction: column; gap: 0; padding: 0 0 10px 0; }
.mobile-nav-link { font-family: var(--font-primary); font-weight: 700; font-size: 14px; color: var(--dark-text); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--border-light); transition: var(--transition-fast); display: flex; align-items: center; justify-content: space-between; }
.mobile-nav-link:hover { color: var(--accent-green); }
.mobile-menu-actions { display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-xl); flex-wrap: wrap; margin-left:20px; margin-right:20px;}
/* Mobile Submenu Styles */
.mobile-submenu { list-style: none; max-height: 0; overflow: hidden; transition: max-height var(--transition-normal); background: rgb(155 205 91 / 29%); border-radius: 8px; }
.mobile-nav-item.has-dropdown.active .mobile-submenu { max-height: 300px; padding: 0; margin: 0; }
.mobile-submenu-item { margin: 0; }
.mobile-submenu-link { display: block; padding: var(--spacing-xs) var(--spacing-md); color: var(--dark-text); text-decoration: none; font-family: var(--font-primary); font-weight: 500; font-size: 14px; transition: var(--transition-fast); border-bottom: 1px solid rgba(155, 205, 91, 0.1); }
.mobile-submenu-link:hover { background: rgba(155, 205, 91, 0.1); color: var(--accent-green); }
.mobile-submenu-item:last-child .mobile-submenu-link { border-bottom: none; }
/* Mobile Dropdown Toggle */
.mobile-dropdown-toggle { cursor: pointer; transition: transform var(--transition-fast); }
.mobile-nav-item.has-dropdown.active .mobile-dropdown-toggle { transform: rotate(90deg); }
.desktop-nav { display: none; }
.mobile-menu-btn { display: flex; }
.header-actions { display: none; }
.hero-section { padding: var(--spacing-xl) 0; min-height: auto; }
.form-container { width: 100%; max-width: calc(100vw - 32px); height: auto; }
.form-input { width: 100%; font-size: 16px; }
.btn-submit { width: 100%; }
.mobile-menu-content { padding: 0; background-color: var(--text-primary); gap: 0; }
.mobile-menu-content nav.mobile-nav li a { padding: 10px 20px; color: #fff; background-color: transparent; }
.mobile-menu-content nav.mobile-nav li a:hover { color: var(--accent-green); }
.mobile-menu-content nav.mobile-nav li + li { border-top: 2px solid #505477; }
.mobile-menu-content nav.mobile-nav .mobile-submenu li.mobile-submenu-item a { padding: 10px 10px; }
.mobile-nav-item.has-dropdown.active .mobile-submenu { border-top: 0px solid #505477; margin: 0 15px 20px; }
div#mobileMenu { background-color: var(--text-primary); }
.privacy-section { position: static; transform: none; width: 100%; max-width: calc(100vw - 32px); margin: var(--spacing-xxl) auto; }
.footer-top { gap: var(--spacing-xl); text-align: center; }
.footer-nav { margin: 0; width: 100%; text-align: left; }
.footer-nav-list { flex-direction: column; gap: var(--spacing-sm); }
.footer-actions { flex-direction: column; gap: var(--spacing-md); }
.footer-bottom-content { gap: var(--spacing-sm); text-align: center; }
.hero-content { max-width: 600px; margin: 0 auto; }
.form-container { max-width: 500px; }
.form-input { max-width: 500px; }
.btn-submit { max-width: 500px; }
ul.footer-nav-list li { border-bottom: 2 px solid rgb(255 255 255 / 20%); display: inline-block; }
.social-icons { justify-content: flex-start; }
.footer-logo-section { order: 1; }
.footer-actions { order: 3; width: 100%; flex-direction: initial; }
.social-section { order: 2; margin: 0; width: auto; }
nav.footer-nav { order: 4; width: 100%; }
.social-icons { width: auto; gap: 10px; }
.btn-outline-light { width: auto;/* height: auto; */ min-width: 153px; }
.btn-primary { width: auto;/* height: auto; */ min-width: 153px; }
.footer-logo-section .footer-logo { height: 31px; }
.footer-top { margin-bottom: 50px; }
.empty-state-icon svg {width: 60px;height: 60px;}
}
@media (max-width:1024px) {
/* switch layout from two-column to stacked */
.main-layout { flex-direction: column; }
.sidebar-primary { width: 100%; border-radius: 0; margin: 0; }
#main-content.main-content { margin-left: 0; max-width: 100vw; }
/* CTA / Jobs */
.cta-card { height: auto; padding: var(--space-lg); }
.cta-content { width: 100%; padding: 0; }
.cta-title { font-size: var(--font-size-2xl); height: auto; }
.cta-description { height: auto; }
.job-card-header { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.job-meta { gap: var(--space-lg); }
.job-card-footer { flex-direction: column; align-items: flex-start; gap: var(--space-md); }
.job-dates { text-align: left; }
/* responsive utility helpers */
.d-md-none { display: none !important; }
.d-md-block { display: block !important; }
.d-md-flex { display: flex !important; }
/* collapsed sidebar */
.sidebar-primary { flex: auto; position: relative; }
.sidebar-content { padding: 20px; align-items: center; gap: 0; width: 100%; }
.profile-img { width: 50px; height: 50px; }
.sidebar-nav { width: 100%; }
.profile-block-res-toggle-icon { display: block; }
#main-content.main-content { flex: 1 1 calc(100% - 90px); }
nav.sidebar-nav ul { position: absolute; top: 90px; z-index: 99; background: #3d405a; width: 100%; left: 0; padding: 0 20px 20px; }
.profile-block-res-toggle-icon.active:after { transform: translate(-50%, -50%) rotate(45deg); }
.sidebar-nav .nav-list { display: none }
.view-all-section { justify-content: center; }
.faqs-btn { margin: 0 auto; }
.startJobBtnWrapper { width: 100%; text-align: center; }
.startJobSec .startJobBoxWrapper { text-align: center; padding: 20px; margin-bottom: 0; }
.empty-state-icon svg {width: 40px;height: 40px;}
}
/* Center align text and button for medium screens (767px to 1024px) */
@media (min-width: 767px) and (max-width: 1024px) {
.startJobSec .startJobBoxWrapper {
justify-content: center;
text-align: center;
flex-direction: column;
gap: 20px;
}
.startJobSec .startJobTitle {
text-align: center;
}
.startJobBtnWrapper {
width: 100%;
text-align: center;
}
}
@media (max-width:768px) {
.job-task { flex-direction: column; align-items: flex-start; gap: 20px; }
.task-content { width: 100%; }
.status-dates { font-size: 16px; text-align: left; }
.ps-label { width: auto; height: auto; }
.status-text { font-size: var(--font-size-base); }
.ps-label { font-size: var(--font-size-base); }
.task-title { font-size: var(--font-size-base); }
.task-meta { font-size: var(--font-size-sm); }
.status-button.verified span { font-size: var(--font-size-base); }
.status-block-inner { gap: 20px; }
.cancel-job-block { padding: 40px 20px; }
.logo-section .logo { height: 26px; }
.mobile-menu { top: 68px; height: calc(100vh - 68px); }
.mobile-menu-actions button { width: 100%; }
.login-section { min-height: calc(100vh - 58px - 545px); }
.login-card { padding: 30px 20px; gap: 30px; }
.login-header { gap: 30px; width: 100%; }
.logo-image { width: 100px; height: 100px; }
.login-title { font-size: 28px; line-height: 1.3; }
.login-form { max-width: 100%; }
.form-input { font-size: 16px; }
.input-wrapper { padding: 12px 16px; height: 48px; padding-left: 60px; }
.container { padding: 0 var(--space-md); }
#main-content.main-content { padding: 40px 20px; }
.cta-title { font-size: var(--font-size-xl); }
.section-title { font-size: var(--font-size-lg); }
.job-card { padding: var(--space-md); }
.job-card-header { gap: var(--space-sm); }
.job-meta { justify-content: space-between; gap: var(--space-sm); }
.job-dates span:last-child { padding: 0; }
.job-dates span:last-child:before { display: none; }
/* responsive utility helpers */
.d-sm-none { display: none !important; }
.d-sm-block { display: block !important; }
.d-sm-flex { display: flex !important; }
.auth-confirmation { padding: 8px 30px 8px 8px; gap: 15px; margin: 0 20px; }
.auth-success-icon { width: 40px; height: 40px; }
.success-circle { width: 40px; height: 40px; }
.checkmark { width: 18px; height: 12px; }
.auth-confirmation-text { font-size: 20px; width: auto; }
.mfa-card { max-width: 100%; padding: 40px 20px; gap: 40px; width: 100%; margin: 0 auto; }
.sms-info-section { width: 100%; max-width: 249px; }
.remember-device-section { justify-content: center; }
.mfa-form .btn-submit { max-width: 100%; }
.mfa-form { width: 100%; }
.logo-welcome-section { width: 100%; max-width: 283px; }
.start-job-card { padding: 40px 20px; min-height: auto; }
.job-title-input { gap: 15px; }
.option-buttons { flex-direction: column; width: 100%; }
.option-btn { width: 100%; justify-content: flex-start; }
.step-progress { width: 100%; }
/* .radio-label { padding: 10px 20px; } */
/* .checkbox-label { padding: 10px 20px; } */
.date-input-wrapper { padding: 10px; }
.date-input { padding: 0; }
.step-two-card { padding: var(--space-xl); }
.step-two-header { max-width: 100%; }
.step-two-progress { width: 100%; max-width: 280px; }
.step-two-navigation { flex-direction: column; gap: var(--space-lg); }
.step-two-upload-area { padding: var(--space-lg); }
.file-info-component { flex-direction: column; align-items: center; gap: 10px; }
.file-info-content { align-items: center; width: 100%; }
.file-name-icon { gap: 10px; }
.file-name { font-size: 16px; width: 193px; text-align: left; }
.file-details { gap: 10px; padding-left: 0; }
.file-meta, .delete-file { font-size: 16px; }
.file-actions { flex-direction: column; gap: 20px; width: 100%; align-items: center; }
.step-two-upload-section .file-actions { width: 100%; }
.file-actions button { font-size: 16px; line-height: 1.375; width: auto;padding: 7px 10px 7px; }
.mapping-text { font-size: 16px; line-height: 1.375; }
.btn-map-headers, .btn-edit { font-size: 16px; line-height: 1.375; width: auto; }
.file-info-component-wrapper { gap: 20px; }
.thank-you-content { gap: 30px; padding: 20px; }
.thank-you-title { font-size: 28px; line-height: 1.8em; }
.thank-you-subtitle { font-size: 16px; line-height: 1.3em; }
.progress-title { font-size: 20px; }
.progress-bar-container { height: 20px; }
.progress-bar-bg, .progress-bar-fill { border-radius: 20px; }
.progress-bar-bg { border: 2px solid #FFFFFF; }
.mapping-header .section-content { max-width: 100%; gap: 10px; }
.mapping-header .step-two-review-content { max-width: 100%; gap: 10px; }
.mapping-header-file-info { gap: 10px; justify-content: space-between; align-self: stretch; }
.mapping-header-file-icon { flex-shrink: 0; }
.mapping-header-file-title { font-family: acumin-pro,sans-serif, sans-serif; font-weight: 700; font-size: 18px; line-height: 1.22em; text-align: left; width: 153px; }
.mapping-header-file-info-text { font-weight: 400; font-size: 18px; text-align: center; }
.mapping-header-user-avatar { flex-shrink: 0; }
.mapping-header-avatar-circle { width: 36px; height: 36px; }
.mapping-header-navigation { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; }
.mapping-header-btn { display: flex; justify-content: center; align-items: center; gap: 10px; padding:7px 20px; border-radius: 100px; border: 2px solid #3D405B; font-family: acumin-pro,sans-serif, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.22em; text-align: center; }
/* Hide desktop version */
/* .desktop-mapping-columns { display: none; } */
/* Show mobile version */
.mobile-view { display: flex !important; flex-direction: column; gap: 20px; width: 100%; padding: 0; }
/* Mobile styling for columns - exact Figma specs */
.mobile-view .map-column-top, .mobile-view .map-column { flex-direction: column; align-items: center; gap: 40px; width: 100%; max-width: 310px; margin: 0 auto; padding: 40px 20px; background: #FFFFFF; border: 2px solid #EEEEEE; border-radius: 20px; }
/* Mobile column sections */
.mobile-view .column-section { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
/* Specific widths for mobile sections based on Figma */
.mobile-view .column-section:nth-child(1) { width: 69px; }
.mobile-view .column-section:nth-child(2) { width: 165px; }
.mobile-view .column-section:nth-child(3) { width: 111px; }
.mobile-view .column-section:nth-child(4) { width: 173px; }
.mobile-view .column-section:nth-child(5) { width: 140px; }
/* Mobile text alignment */
.mobile-view .file-column-header, .mobile-view .data-preview-title, .mobile-view .system-header-title, .mobile-view .import-options-title { text-align: center; }
.mobile-view .column-header-text, .mobile-view .data-preview-text { text-align: center; }
.mobile-view .radio-option { justify-content: center; }
.mapping-block-column-wrapper { gap: 20px; width: 100%; max-width: none; padding: 0; }
.info-icon[data-tooltip]:hover::before { left: -65px; }
.help-btn { width: 65px;height: 65px; }
.step-two-option-text { font-size: 16px; }
.step-two-option-tag {min-height: auto;padding: 8px 15px;gap: var(--space-sm); }
.step-two-option-indicator.selected::after { width: 12px; height: 12px; }
.step-two-option-indicator { width: 20px; height: 20px; }
.complete-icon { width: 20px; height: 20px; }
.step-two-back-btn { padding: 7px 20px;font-size: 16px; }
.step-two-next-btn { padding: 7px 20px;font-size: 16px; }
.file-actions button, .file-actions a { padding: 5px 20px 5px; font-size: 16px; gap: 8px; }
.cancel-job-container .btn-cancel {padding: 7px 20px 7px; font-size: 16px; min-height: 40px; }
.btn { padding: 7px 20px 7px;font-size: 16px;min-height: 40px; }
.map-column {flex-direction: column;}
.map-column .formInput {border-bottom: 1px solid var(--text-primary);padding: 8px;border-radius: 0;width: 100%;padding-left: 0; max-width: 100%; }
.map-column .column-section {width: 100% !important;text-align: left;align-items: flex-start; gap:5px;}
.form-section.step-two-upload-section {gap: 20px;}
.map-column-top { display:none; }
.info-icon { width:19px; height:19px; }
.portal-header.main-header { height: var(--mob-header-height); }
.portal-header.main-header .logo { width: 140px; height: auto; }
.user-name { font-size: var(--font-size-lg);}
.step-two-upload-section span.file-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: normal;
overflow-wrap: anywhere;
}
.filter-Wrapper select {
width: 100%;
margin: 0;
}
.filter-dropdown {
width: 100%;
}
.filter-Wrapper {
gap: 8px;
}
.filter-Wrapper select div {
margin-left: 0 !important;
}
.recent-jobs-section { margin-bottom:0; }
}
@media (max-width:575px) {
.portal-header.main-header .profile-icon { width: 36px; height: 36px; }
.container { padding: 0 var(--space-sm); }
.logo { width: 140px; height: auto; }
.profile-icon { width: 36px; height: 36px; }
/* .btn { padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-xs); } */
.cta-title { font-size: var(--font-size-lg); }
.section-title { font-size: var(--font-size-base); }
.job-title { font-size: var(--font-size-sm); }
/* responsive utility helpers */
.d-xs-none { display: none !important; }
.d-xs-block { display: block !important; }
.d-xs-flex { display: flex !important; }
.pagination { flex-direction: column; align-items: stretch; gap: var(--space-md); }
.pagination-summary { order: 2; text-align: center; }
/* Show only Prev / Next and the current page number */
.pagination-list { width: 100%; gap: 10px; justify-content: center; }
/* Make prev/next easier to tap */
.page-item.prev .page-link, .page-item.next .page-link { min-width: 48%; height: 44px; }
/* .job-card-action .btn-edit { padding: var(--space-sm) var(--space-lg);font-size: var(--font-size-xs); } */
.mapping-header-file-title { width: 110px; }
.paginations nav {flex-direction: column-reverse;gap: 15px;}
.paginations nav div {width: 100%;}
section.start-job-block-step-two {padding: 0;}
}
@media (max-width:480px) {
.auth-method-tabs { flex-direction: column; gap: var(--spacing-xs); }
.auth-tab { padding: var(--spacing-md); font-size: var(--font-size-xs); }
.qr-code-placeholder svg { width: 120px; height: 120px; }
.auth-setup-text { font-size: 11px; }
.setup-key { font-size: 11px; padding: var(--spacing-xs); }
.auth-confirmation { padding: 6px 20px 6px 6px; gap: 12px; margin: 0 16px; }
.auth-success-icon { width: 35px; height: 35px; }
.success-circle { width: 35px; height: 35px; }
.checkmark { width: 16px; height: 10px; }
.auth-confirmation-text { font-size: 18px; }
.mfa-card { max-width: 100%; padding: 30px 20px; }
.sms-info-section { max-width: 100%; }
.logo-welcome-section { max-width: 100%; }
.start-job-card { padding: 30px 20px; }
.step-header { gap: 15px; }
.step-title { font-size: 16px; }
.job-title-field { font-size: 20px; }
.option-text { font-size: 16px; }
.next-btn span { font-size: 16px; }
.file-info-component { width: 100%; }
.file-name { width: 100%; }
.thank-you-title { font-size: 24px; line-height: 1.6em; }
.thank-you-subtitle { font-size: 14px; }
.progress-title { font-size: 18px; }
.progress-bar-container { height: 16px; }
.progress-bar-bg, .progress-bar-fill { border-radius: 16px; }
.mobile-view .map-column-top, .mobile-view .map-column { padding: 12px 15px; gap: 15px; }
.mobile-view .column-header, .mobile-view .data-preview, .mobile-view .system-header, .mobile-view .import-options { gap: 15px; }
.mobile-view .status-text, .mobile-view .file-column-header, .mobile-view .column-header-text, .mobile-view .data-preview-title, .mobile-view .data-preview-text, .mobile-view .system-header-title, .mobile-view .header-title-text, .mobile-view .import-options-title, .mobile-view .radio-text { font-size: 16px; }
.mobile-view .header-title-frame { padding: 8px 20px; }
#toast-container>div {background-position: top 10px left 13px !important; }
#toast-container>.toast-success { background-position: left 20px top 15px !important; }
.portal-header.main-header .nav-button-right { gap: 10px;}
.portal-header.main-header .logo { width: 130px; }
}
/* Admin CSS Start */
.mb-0{margin-bottom:0 !important;}
.pt-0{padding-top:0 !important;}
.pb-0{padding-bottom:0 !important;}
.gap-20{grid-gap:20px !important;}
.flex-column{flex-direction: column !important;}
.justify-center{justify-content: center !important;}
.commonFormSection{min-height: inherit;}
.commonForm{width:100%;}
.commonForm select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.commonForm input:focus{outline: 0;box-shadow: none;}
.commonForm .formFiledCon{width:100%;max-width: 750px;margin-inline: auto;display: flex;flex-direction: column;gap:20px;}
.commonForm .filedgroup{display: flex; margin-top:10px; align-items: center; gap: 5px;
border-bottom: 2px solid var(--text-primary);
}
.commonFormSection span.required, .required-asterisk {color: #D93025;}
.commonForm .filedgroup .formLabel{color:var(--text-primary);font-weight: 600; font-size: 20px; line-height: 1.20; padding: 5px 0;display: flex;flex-wrap: wrap; gap: 5px;}
.commonForm .filedgroup .formInput, .commonForm .filedgroup div {flex:1; border:0; padding: 5px;font-weight: 400; font-size: 20px; line-height: 1.20;font-family: var(--font-primary);}
@supports (-webkit-touch-callout: none) {
.commonForm .filedgroup select.formInput {
color: #000000;
}
}
.commonForm .formFooter{text-align: center; margin-top: 40px;justify-content: center;gap: 40px;padding-bottom: 0;}
.commonForm .checkBoxlabel{color:var(--text-primary);font-weight: 400; font-size: 20px; line-height: 1.20; position: relative;padding-left: 30px;cursor: pointer;}
.commonForm .checkBoxlabel .formCheckbox{position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.commonForm .checkBoxlabel:before{content:"";width:16px; height:16px; border:2px solid var(--text-primary); position: absolute; left:0;top: 2px;}
.commonForm .checkBoxlabel:after{content: ""; position: absolute; left: 7px; top: 4px; width: 4px; height: 10px; border: solid var(--text-primary); border-width: 0 2px 2px 0; transform: rotate(45deg);opacity: 0;}
.commonForm .checkBoxlabel:has(input[type='checkbox']:checked):after{opacity: 1;}
.commonForm .filedgroup:has(.filedCol){justify-content: space-between;gap: 20px;}
.filedCol {display: flex;flex-wrap: wrap;align-items: center;}
.commonForm .filedgroup .formLabel:has(+ select.formInput){border-bottom: 0;}
.commonForm .filedgroup select.formInput { background-image: url(../images/select-arrow.svg); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; border: 0; padding: 10px 30px 10px 10px; width: 100%; }
.commonForm .filedgroup select.formInput:focus{outline: 0;box-shadow: none;}
.organizationCon .existingOrg{margin-top:20px; display: flex;flex-direction: column; grid-gap:20px;}
.existingOrg .file-info-component{padding: 18px 20px;}
.existingOrg .file-info-component-wrapper{max-width: 100%;grid-gap:20px;}
.existingOrg .file-info-component-wrapper .file-info-component{box-shadow: var(--shadow-md);border:0;}
.existingOrg .file-info-component-wrapper .file-actions a.btn-edit{display: flex ; align-items: center; gap: 10px; padding: 7px 40px 7px; border-radius: 100px; border: 2px solid; cursor: pointer; transition: var(--transition-normal); font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.22; text-align: center;}
.organizationCon .startJobBoxWrapper{max-width: 100%;}
.deletedHead{font-size: 24px;font-weight: 600;padding:10px 0; width: 100%; max-width: 640px; margin-inline: auto; text-align: center;}
.commonForm .headerlist{grid-gap:0;}
.commonForm .headerlist .filedgroupRow{display: flex;width:100%; border-bottom:2px solid var(--text-primary); align-items: center;padding: 10px 0; grid-gap:10px; justify-content: space-between;}
/* .commonForm .headerlist .filedgroupRow .filedgroup{display:block;flex:1 1 0;} */
.commonForm .headerlist .filedgroupRow .filedgroup .formInput{border-bottom: 0;padding: 0px; font-weight: 400;border-radius: 0 ;}
.commonForm .headerlist .filedgroupRow .filedgroup {border: none; margin: 0;}
.commonForm .headerlist .filedgroupRow .filedgroup select.formInput{font-size: 16px;padding-right: 20px;padding-left:10px;}
.commonForm .headerlist .filedgroupRow .filedgroup:has(.icon-edit-btn){flex:0 0 36px; align-self: center;display: inline-flex }
.icon-edit-btn{background-color: transparent; border:0; border-radius: 50%;box-shadow: none;cursor: pointer;}
.icon-edit-btn svg{display:block;border-radius: 100%;}
button.remove-field-btn svg circle {fill: #BF2B23;}
button.remove-field-btn svg:hover circle {fill: #fff;stroke: #BF2B23;stroke-width: 2px;}
button.remove-field-btn svg:hover path {fill: #BF2B23;}
.icon-edit-btn:is(:hover, :focus){border:0; border-radius: 50%;box-shadow: none;}
.commonForm .addhederList .filedgroup{max-width: 33.3333%;}
.commonForm .addhederList .filedgroup .formLabel{white-space: nowrap; border-bottom: 0px;}
.addrowCon { padding: 20px 0 0 0; text-align: center; }
.addrowCon .addHeaderRowBtn { border: 0; background: transparent; display: inline-flex; align-items: center; gap:20px; font-size: 24px; line-height: 1.25;cursor: pointer;}
.commonForm .headerlist.addhederList .filedgroupRow .filedgroup input.formInput{max-width: 110px;padding-left: 5px;}
.commonForm .headerlist.addhederList .filedgroupRow .filedgroup .headerSelect{font-size: 20px;}
.manageUser .startJobSec .startJobBoxWrapper{flex-direction: column;padding: 60px 20px;gap: 40px;margin-bottom: 0px;}
.manageUser .startJobSec .startJobBoxWrapper .startJobTitle{font-size: 18px;font-weight: 400;}
.radioLabel{cursor: pointer;}
.start-job-block-step-two.manageUser{padding: 0;}
.paginations .hidden{display:none;}
.paginationsContainer {margin-top: 30px;}
.paginations .flex{display:flex;}
.paginations .relative {position: relative;}
.paginations .inline-flex {display: inline-flex;}
.paginations .items-center{align-items: center;}
.paginations .w-5 { width: 20px; }
.paginations .h-5 { height: 20px; }
.paginations .px-2{padding-inline: 4px;}
.paginations .px-4{padding-inline: 8px;}
.paginations .py-2{padding-block: 4px;}
/* .paginations .text-sm{--font-size-sm:16px !important;} */
.paginations .rtl\:flex-row-reverse span[aria-current="page"] span, .paginations .rtl\:flex-row-reverse span[aria-disabled="true"] span { min-height: 100%; }
.paginations .rtl\:flex-row-reverse span[aria-disabled="true"] span{background-color: #dddddd !important; color:#ffffff;border:1px solid #dddddd !important;}
.paginations .rtl\:flex-row-reverse span[aria-current="page"] span { min-height: 100%; background: #9bcd5b; color: #fff; border-color: #9bcd5b; }
.paginations .rtl\:flex-row-reverse{gap:6px;box-shadow: none !important;}
.paginations .rtl\:flex-row-reverse span.px-2, .paginations .rtl\:flex-row-reverse a.px-2{ background: #221E44;color: #fff;border-color: #221E44; border-radius: 4px;}
.paginations .rtl\:flex-row-reverse span.px-4, .paginations .rtl\:flex-row-reverse a.px-4{border:1px solid #dddddd;min-width: 30px; text-align: center; justify-content: center;border-radius: 4px; color: var(--text-primary);margin-left: 0 !important;}
.paginations .rtl\:flex-row-reverse a.px-4:hover{background-color: #f5f5f5 !important;border-color: var(--accent-green) !important;color: var(--accent-green) !important;}
.paginations .rtl\:flex-row-reverse span.-ml-px, .paginations .rtl\:flex-row-reverse a.-ml-px{margin-left: 0 !important;}
.paginations .rtl\:flex-row-reverse a[rel="next"], .paginations .rtl\:flex-row-reverse a[rel="Previous"]{background: #221E44; color: #fff; border-color: #221E44;}
.paginations .rtl\:flex-row-reverse a[rel="next"]:hover, .paginations .rtl\:flex-row-reverse a[rel="prev"]:hover{background-color: var(--accent-green) !important;border-color: var(--accent-green) !important;color: #fff !important;}
.paginations nav[role="navigation"]>div:first-child a{border:1px solid #dddddd;border-radius: 4px !important;background: #221E44; color: #fff; border-color: #221E44;}
/* .paginations nav[role="navigation"]>div:first-child span{border:1px solid #dddddd;background: #dddddd; color: #fff; border-color: #dddddd;} */
.top-card-block{display: flex; flex-wrap:wrap; gap:20px;}
.cardColumn{flex:1 1 0; min-width:300px; display:flex; flex-direction: column; gap:20px;}
.cardBlock{background-color: #ffffff; border-radius: 20px;box-shadow: var(--shadow-md);padding: 20px;flex: 1 1 0;}
.cardBlock-body{display: flex;flex-direction: column;gap:40px;min-height: 100%;}
.cardBlock-body .startJobBtnWrapper{margin-top:auto;text-align: left;}
.commonSection{display: flex; flex-direction: column; gap:40px; }
.commonSection:empty {
margin-bottom: 0 !important;
}
.commonSection .filterTitleWrapper{margin-bottom: 20px;}
.job-card-action{margin-top:5px;flex-wrap: wrap;gap: 10px;}
.job-card-action .btn-edit{background: #3D405B; border-color: #3D405B; color: var(--surface-color);}
.job-card-action .btn-edit:hover { background-color: var(--accent-color);border-color: var(--accent-color); }
.job-card-action .btn-edit svg { display: block; }
/* .job-card-action .file-actions{justify-content: flex-end;} */
.commonSection .filterTitleWrapper { gap: 10px 30px; }
.commonSection .filter-Wrapper{gap: 10px 20px;}
ul.userInfo {display: flex ; flex-wrap: wrap; list-style: none; align-items: center; grid-gap: 12px;}
ul.userInfo li { border-right: 2px solid #000; line-height: 1; padding-right:12px; font-size: 18px; color: var(--dark-text); font-weight: 400; }
ul.userInfo li:last-child { border-right: 0;}
.commonForm .radioGroup.rightjustify { flex: 1;
display: flex ; justify-content: flex-end; grid-gap: 10px; align-items: center;flex-wrap: wrap; padding: 5px 5px 10px 0;}
.commonForm .radioLabel{font-weight:600;display: flex; align-items: center;}
.commonForm .radioLabel input[type="radio"]{ width: 15px; height: 15px; margin-right: 5px; vertical-align: middle; cursor: pointer; }
.log-show-container .filedgroup {
margin-bottom: 25px;
}
.log-show-container .form-section:last-child .formFiledCon .mb-6 {
margin-bottom: 25px;
}
.log-show-container .form-section:last-child .formFiledCon .mb-6 button {
margin-bottom: 25px;
}
.log-show-container table {
border: 1px solid var(--text-primary);
width: 100%;
border-collapse: collapse;
}
.log-show-container table td, table th {
border: 1px solid var(--text-primary) !important;
border-collapse: collapse;
padding: 10px;
}
.log-show-container table tr {
border-collapse: collapse;
}
.error-state-icon svg {
width: 80px;
height: 80px;
}
@media (min-width:576px){
.paginations .sm\:hidden{display: none;}
.paginations .sm\:flex{display: flex;}
.paginations .sm\:flex-1{flex:1;}
.paginations .sm\:flex{display: flex;}
.paginations .sm\:items-center {align-items: center;}
.paginations .sm\:justify-between{justify-content: space-between;}
}
@media (max-width:1440px){
.job-card-action .file-actions { justify-content: flex-start; align-items: flex-start; }
.error-state-icon svg {
width: 60px;
height: 60px;
}
}
@media (max-width:1230px){
.commonForm .headerlist.addhederList .filedgroupRow .filedgroup input.formInput{max-width: inherit;}
.commonForm .headerlist .filedgroupRow{flex-wrap:wrap;}
.commonForm .headerlist .filedgroup {flex:0 0 100%;max-width: 100%;}
.commonForm .headerlist #standard-fields-container .filedgroup:first-child { max-width: calc(100% - 70px); flex:0 0 100%; order: -2; }
.commonForm .headerlist .filedgroup:last-child {max-width: 36px; order: -1; }
.commonForm .headerlist .filedgroupRow .filedgroup:has(.icon-edit-btn){align-self: flex-start;}
}
@media ( max-width:1150px ){
.file-actions button, .file-actions a { padding: 5px 20px; font-size: 16px;}
}
@media (max-width:767px){
.commonForm .headerlist .filedgroup {max-width: 100% !important;}
.commonForm .headerlist #standard-fields-container .filedgroup:first-child { max-width: calc(100% - 70px);}
.commonForm .headerlist .filedgroup:last-child {max-width: 36px !important;}
.commonForm .filedgroup{flex-direction: column;}
.commonForm .filedgroup .formInput, .commonForm .filedgroup div{padding-left: 0;}
.commonForm .filedgroup .filedCol{display:flex; flex-direction: column; width: 100%;}
.commonForm .checkBoxlabel {width: 100%;}
.commonForm .filedgroup select.formInput{align-self: flex-start;padding-left: 0;}
.existingOrg .file-info-component-wrapper .file-info-component .file-name{width:100%; text-align: center;}
.organizationCon .startJobTitle{width:100%; text-align: center;}
.commonForm .headerlist.addhederList .filedgroupRow .filedgroup input.formInput{padding-left: 0;}
.addrowCon .addHeaderRowBtn{gap: 10px;font-size: 20px;}
.addrowCon .addHeaderRowBtn svg { width: 32px; height: auto; }
.manageUser .startJobSec .startJobBoxWrapper { padding: 30px 20px; gap: 20px; }
.commonForm .formFooter { margin-top: 20px; gap: 20px; }
.commonForm .filedgroup .formLabel, .commonForm .headerlist.addhederList .filedgroupRow .filedgroup .headerSelect, .commonForm .filedgroup .formInput, .commonForm .checkBoxlabel, .commonForm .filedgroup div {font-size: 16px;}
.commonForm .filedgroup .formInput, .commonForm .filedgroup div { width: 100%; }
.commonForm .checkBoxlabel:before{top:0;}
.commonForm .checkBoxlabel:after{top:2px;}
/* .cancel-job-container .btn-cancel{font-size: var(--font-size-xs);} */
.cardBlock-body{gap:20px;}
ul.userInfo{flex-direction: column;justify-content: flex-start; align-items: flex-start;padding-top: 5px;}
.commonForm .filedgroup .formLabel{border-bottom: 0px; width: 100%;}
.commonForm .radioGroup.rightjustify{justify-content: flex-start; width: 100%; }
.file-name-icon:has(.userInfo){ align-items: flex-start; }
ul.userInfo li{border-right:0;}
.commonForm .headerlist .filedgroupRow .filedgroup select.formInput { padding-left: 0; }
.permissionname-input {
width: 100%;
}
.role-create-edit-container .commonForm .filedgroup:last-child .formLabel {
margin-bottom: 25px;
}
.role-create-edit-container .grid-cols-1.grid.gap-4 {
padding-left: 0;
}
.role-create-edit-container .border h4 {
font-size: 16px !important;
}
.status-button.verified span {
width: calc(100% - 31px);
}
.status-button.verified {
padding: 7px 20px 7px;
}
.check-icon {
width: 21px;
height: 21px;
}
.job-card-footer { flex-direction: column-reverse; }
.cta-description { font-size: var(--font-size-sm); }
.error-state-icon svg {
width: 40px;
height: 40px;
}
.error-state-icon { margin-bottom: 5px;}
.error-page-container { padding:0 !important; }
}
@media ( max-width:575px ){
.log-show-container .overflow-x-auto {
width: 100%;
overflow-y: auto;
}
.log-show-container .overflow-x-auto table {
width: 700px;
}
#toast-container.toast-bottom-center>div, #toast-container.toast-top-center>div { min-width:100% !important; }
.filter-Wrapper select { width: 100%; margin-left:0;}
/* Admin CSS End */
.submitted-job .task-content {
width: 100%;
}
.submitted-job .task-status {
width: 100%;
justify-content: flex-start;
}
.submitted-job .folder-icon {
margin: 0;
}
.submitted-job .task-icon {
width: 40px;
height: 40px;
}
.submitted-job .task-info {
width: calc(100% - 60px);
}
}
@media (max-width:575px) {
.portal-header.main-header .profile-icon { width: 36px; height: 36px; }
.container { padding: 0 var(--space-sm); }
.logo { width: 140px; height: auto; }
.profile-icon { width: 36px; height: 36px; }
/* .btn { padding: var(--space-sm) var(--space-lg); font-size: var(--font-size-xs); } */
.cta-title { font-size: var(--font-size-lg); }
.section-title { font-size: var(--font-size-base); }
.job-title { font-size: var(--font-size-sm); }
/* responsive utility helpers */
.d-xs-none { display: none !important; }
.d-xs-block { display: block !important; }
.d-xs-flex { display: flex !important; }
.pagination { flex-direction: column; align-items: stretch; gap: var(--space-md); }
.pagination-summary { order: 2; text-align: center; }
/* Show only Prev / Next and the current page number */
.pagination-list { width: 100%; gap: 10px; justify-content: center; }
/* Make prev/next easier to tap */
.page-item.prev .page-link, .page-item.next .page-link { min-width: 48%; height: 44px; }
/* .job-card-action .btn-edit { padding: var(--space-sm) var(--space-lg);font-size: var(--font-size-xs); } */
.mapping-header-file-title { width: 110px; }
.paginations nav {flex-direction: column-reverse;gap: 15px;}
.paginations nav div {width: 100%;}
section.start-job-block-step-two {padding: 0;}
}
@media (max-width:480px) {
.auth-method-tabs { flex-direction: column; gap: var(--spacing-xs); }
.auth-tab { padding: var(--spacing-md); font-size: var(--font-size-xs); }
.qr-code-placeholder svg { width: 120px; height: 120px; }
.auth-setup-text { font-size: 11px; }
.setup-key { font-size: 11px; padding: var(--spacing-xs); }
.auth-confirmation { padding: 6px 20px 6px 6px; gap: 12px; margin: 0 16px; }
.auth-success-icon { width: 35px; height: 35px; }
.success-circle { width: 35px; height: 35px; }
.checkmark { width: 16px; height: 10px; }
.auth-confirmation-text { font-size: 18px; }
.mfa-card { max-width: 100%; padding: 30px 20px; }
.sms-info-section { max-width: 100%; }
.logo-welcome-section { max-width: 100%; }
.start-job-card { padding: 30px 20px; }
.step-header { gap: 15px; }
.step-title { font-size: 16px; }
.job-title-field { font-size: 20px; }
.option-text { font-size: 16px; }
.next-btn span { font-size: 16px; }
.file-info-component { width: 100%; }
.file-name { width: 100%; }
.thank-you-title { font-size: 24px; line-height: 1.6em; }
.thank-you-subtitle { font-size: 14px; }
.progress-title { font-size: 18px; }
.progress-bar-container { height: 16px; }
.progress-bar-bg, .progress-bar-fill { border-radius: 16px; }
.mobile-view .map-column-top, .mobile-view .map-column { padding: 12px 15px; gap: 15px; }
.mobile-view .column-header, .mobile-view .data-preview, .mobile-view .system-header, .mobile-view .import-options { gap: 15px; }
.mobile-view .status-text, .mobile-view .file-column-header, .mobile-view .column-header-text, .mobile-view .data-preview-title, .mobile-view .data-preview-text, .mobile-view .system-header-title, .mobile-view .header-title-text, .mobile-view .import-options-title, .mobile-view .radio-text { font-size: 16px; }
.mobile-view .header-title-frame { padding: 8px 20px; }
#toast-container>div {background-position: top 10px left 13px !important; }
#toast-container>.toast-success { background-position: left 20px top 15px !important; }
/* .portal-header.main-header .nav-button-right { gap: 5px;} */
.portal-header.main-header .logo { width: 130px; }
}
/* Admin CSS Start */
.mb-0{margin-bottom:0 !important;}
.pt-0{padding-top:0 !important;}
.pb-0{padding-bottom:0 !important;}
.gap-20{grid-gap:20px !important;}
.flex-column{flex-direction: column !important;}
.justify-center{justify-content: center !important;}
.commonFormSection{min-height: inherit;}
.commonForm{width:100%;}
.commonForm select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.commonForm input:focus{outline: 0;box-shadow: none;}
.commonForm .formFiledCon{width:100%;max-width: 750px;margin-inline: auto;display: flex;flex-direction: column;gap:20px;}
.commonForm .filedgroup{display: flex; margin-top:10px; align-items: center; gap: 5px;
border-bottom: 2px solid var(--text-primary);
}
.commonFormSection span.required, .required-asterisk {color: #D93025;}
.commonForm .filedgroup .formLabel{color:var(--text-primary);font-weight: 600; font-size: 20px; line-height: 1.20; padding: 5px 0;display: flex;flex-wrap: wrap; gap: 5px;}
.commonForm .filedgroup .formInput, .commonForm .filedgroup div {flex:1; border:0; padding: 5px;font-weight: 400; font-size: 20px; line-height: 1.20;font-family: var(--font-primary);}
@supports (-webkit-touch-callout: none) {
.commonForm .filedgroup select.formInput {
color: #000000;
}
}
.commonForm .formFooter{text-align: center; margin-top: 40px;justify-content: center;gap: 40px;padding-bottom: 0;}
.commonForm .checkBoxlabel{color:var(--text-primary);font-weight: 400; font-size: 20px; line-height: 1.20; position: relative;padding-left: 30px;cursor: pointer;}
.commonForm .checkBoxlabel .formCheckbox{position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0;}
.commonForm .checkBoxlabel:before{content:"";width:16px; height:16px; border:2px solid var(--text-primary); position: absolute; left:0;top: 2px;}
.commonForm .checkBoxlabel:after{content: ""; position: absolute; left: 7px; top: 4px; width: 4px; height: 10px; border: solid var(--text-primary); border-width: 0 2px 2px 0; transform: rotate(45deg);opacity: 0;}
.commonForm .checkBoxlabel:has(input[type='checkbox']:checked):after{opacity: 1;}
.commonForm .filedgroup:has(.filedCol){justify-content: space-between;gap: 20px;}
.filedCol {display: flex;flex-wrap: wrap;align-items: center;}
.commonForm .filedgroup .formLabel:has(+ select.formInput){border-bottom: 0;}
.commonForm .filedgroup select.formInput { background-image: url(../images/select-arrow.svg); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; border: 0; padding: 10px 30px 10px 10px; width: 100%; }
.commonForm .filedgroup select.formInput:focus{outline: 0;box-shadow: none;}
.organizationCon .existingOrg{margin-top:20px; display: flex;flex-direction: column; grid-gap:20px;}
.existingOrg .file-info-component{padding: 18px 20px;}
.existingOrg .file-info-component-wrapper{max-width: 100%;grid-gap:20px;}
.existingOrg .file-info-component-wrapper .file-info-component{box-shadow: var(--shadow-md);border:0;}
.existingOrg .file-info-component-wrapper .file-actions a.btn-edit{display: flex ; align-items: center; gap: 10px; padding: 7px 40px 7px; border-radius: 100px; border: 2px solid; cursor: pointer; transition: var(--transition-normal); font-family: var(--font-primary); font-weight: 700; font-size: 18px; line-height: 1.22; text-align: center;}
.organizationCon .startJobBoxWrapper{max-width: 100%;}
.deletedHead{font-size: 24px;font-weight: 600;padding:10px 0; width: 100%; max-width: 640px; margin-inline: auto; text-align: center;}
.commonForm .headerlist{grid-gap:0;}
.commonForm .headerlist .filedgroupRow{display: flex;width:100%; border-bottom:2px solid var(--text-primary); align-items: center;padding: 10px 0; grid-gap:10px; justify-content: space-between;}
/* .commonForm .headerlist .filedgroupRow .filedgroup{display:block;flex:1 1 0;} */
.commonForm .headerlist .filedgroupRow .filedgroup .formInput{border-bottom: 0;padding: 0px; font-weight: 400;border-radius: 0 ;}
.commonForm .headerlist .filedgroupRow .filedgroup {border: none; margin: 0;}
.commonForm .headerlist .filedgroupRow .filedgroup select.formInput{font-size: 16px;padding-right: 20px;padding-left:10px;}
.commonForm .headerlist .filedgroupRow .filedgroup:has(.icon-edit-btn){flex:0 0 36px; align-self: center;display: inline-flex }
.icon-edit-btn{background-color: transparent; border:0; border-radius: 50%;box-shadow: none;cursor: pointer;}
.icon-edit-btn svg{display:block;border-radius: 100%;}
button.remove-field-btn svg circle {fill: #BF2B23;}
button.remove-field-btn svg:hover circle {fill: #fff;stroke: #BF2B23;stroke-width: 2px;}
button.remove-field-btn svg:hover path {fill: #BF2B23;}
.icon-edit-btn:is(:hover, :focus){border:0; border-radius: 50%;box-shadow: none;}
.commonForm .addhederList .filedgroup{max-width: 33.3333%;}
.commonForm .addhederList .filedgroup .formLabel{white-space: nowrap; border-bottom: 0px;}
.addrowCon { padding: 20px 0 0 0; text-align: center; }
.addrowCon .addHeaderRowBtn { border: 0; background: transparent; display: inline-flex; align-items: center; gap:20px; font-size: 24px; line-height: 1.25;cursor: pointer;}
.commonForm .headerlist.addhederList .filedgroupRow .filedgroup input.formInput{max-width: 110px;padding-left: 5px;}
.commonForm .headerlist.addhederList .filedgroupRow .filedgroup .headerSelect{font-size: 20px;}
.manageUser .startJobSec .startJobBoxWrapper{flex-direction: column;padding: 60px 20px;gap: 40px;margin-bottom: 0px;}
.manageUser .startJobSec .startJobBoxWrapper .startJobTitle{font-size: 18px;font-weight: 400;}
.radioLabel{cursor: pointer;}
.start-job-block-step-two.manageUser{padding: 0;}
.paginations .hidden{display:none;}
.paginationsContainer {margin-top: 30px;}
.paginations .flex{display:flex;}
.paginations .relative {position: relative;}
.paginations .inline-flex {display: inline-flex;}
.paginations .items-center{align-items: center;}
.paginations .w-5 { width: 20px; }
.paginations .h-5 { height: 20px; }
.paginations .px-2{padding-inline: 4px;}
.paginations .px-4{padding-inline: 8px;}
.paginations .py-2{padding-block: 4px;}
/* .paginations .text-sm{--font-size-sm:16px !important;} */
.paginations .rtl\:flex-row-reverse span[aria-current="page"] span, .paginations .rtl\:flex-row-reverse span[aria-disabled="true"] span { min-height: 100%; }
.paginations .rtl\:flex-row-reverse span[aria-disabled="true"] span{background-color: #dddddd !important; color:#ffffff;border:1px solid #dddddd !important;}
.paginations .rtl\:flex-row-reverse span[aria-current="page"] span { min-height: 100%; background: #9bcd5b; color: #fff; border-color: #9bcd5b; }
.paginations .rtl\:flex-row-reverse{gap:6px;box-shadow: none !important;}
.paginations .rtl\:flex-row-reverse span.px-2, .paginations .rtl\:flex-row-reverse a.px-2{ background: #221E44;color: #fff;border-color: #221E44; border-radius: 4px;}
.paginations .rtl\:flex-row-reverse span.px-4, .paginations .rtl\:flex-row-reverse a.px-4{border:1px solid #dddddd;min-width: 30px; text-align: center; justify-content: center;border-radius: 4px; color: var(--text-primary);margin-left: 0 !important;}
.paginations .rtl\:flex-row-reverse a.px-4:hover{background-color: #f5f5f5 !important;border-color: var(--accent-green) !important;color: var(--accent-green) !important;}
.paginations .rtl\:flex-row-reverse span.-ml-px, .paginations .rtl\:flex-row-reverse a.-ml-px{margin-left: 0 !important;}
.paginations .rtl\:flex-row-reverse a[rel="next"], .paginations .rtl\:flex-row-reverse a[rel="Previous"]{background: #221E44; color: #fff; border-color: #221E44;}
.paginations .rtl\:flex-row-reverse a[rel="next"]:hover, .paginations .rtl\:flex-row-reverse a[rel="prev"]:hover{background-color: var(--accent-green) !important;border-color: var(--accent-green) !important;color: #fff !important;}
.paginations nav[role="navigation"]>div:first-child a{border:1px solid #dddddd;border-radius: 4px !important;background: #221E44; color: #fff; border-color: #221E44;}
/* .paginations nav[role="navigation"]>div:first-child span{border:1px solid #dddddd;background: #dddddd; color: #fff; border-color: #dddddd;} */
.top-card-block{display: flex; flex-wrap:wrap; gap:20px;}
.cardColumn{flex:1 1 0; min-width:300px; display:flex; flex-direction: column; gap:20px;}
.cardBlock{background-color: #ffffff; border-radius: 20px;box-shadow: var(--shadow-md);padding: 20px;flex: 1 1 0;}
.cardBlock-body{display: flex;flex-direction: column;gap:40px;min-height: 100%;}
.cardBlock-body .startJobBtnWrapper{margin-top:auto;text-align: left;}
.commonSection{display: flex; flex-direction: column; gap:40px; }
.commonSection:empty {
margin-bottom: 0 !important;
}
.commonSection .filterTitleWrapper{margin-bottom: 20px;}
.job-card-action{margin-top:5px;flex-wrap: wrap;gap: 10px;}
.job-card-action .btn-edit{background: #3D405B; border-color: #3D405B; color: var(--surface-color);}
.job-card-action .btn-edit:hover { background-color: var(--accent-color);border-color: var(--accent-color); }
.job-card-action .btn-edit svg { display: block; }
/* .job-card-action .file-actions{justify-content: flex-end;} */
.commonSection .filterTitleWrapper { gap: 10px 30px; }
.commonSection .filter-Wrapper{gap: 10px 20px;}
ul.userInfo {display: flex ; flex-wrap: wrap; list-style: none; align-items: center; grid-gap: 12px;}
ul.userInfo li { border-right: 2px solid #000; line-height: 1; padding-right:12px; font-size: 18px; color: var(--dark-text); font-weight: 400; }
ul.userInfo li:last-child { border-right: 0;}
.commonForm .radioGroup.rightjustify { flex: 1;
display: flex ; justify-content: flex-end; grid-gap: 10px; align-items: center;flex-wrap: wrap; padding: 5px 5px 10px 0;}
.commonForm .radioLabel{font-weight:600;display: flex; align-items: center;}
.commonForm .radioLabel input[type="radio"]{ width: 15px; height: 15px; margin-right: 5px; vertical-align: middle; cursor: pointer; }
.log-show-container .filedgroup {
margin-bottom: 25px;
}
.log-show-container .form-section:last-child .formFiledCon .mb-6 {
margin-bottom: 25px;
}
.log-show-container .form-section:last-child .formFiledCon .mb-6 button {
margin-bottom: 25px;
}
.log-show-container table {
border: 1px solid var(--text-primary);
width: 100%;
border-collapse: collapse;
}
.log-show-container table td, table th {
border: 1px solid var(--text-primary) !important;
border-collapse: collapse;
padding: 10px;
}
.log-show-container table tr {
border-collapse: collapse;
}
.error-state-icon svg {
width: 80px;
height: 80px;
}
div#completedFilesList .file-info-content {
display: flex;
flex-direction: unset;
align-items: flex-start;
gap: 10px;
width: 100%;
justify-content: space-between;
flex-wrap: wrap;
}
@media (min-width:576px){
.paginations .sm\:hidden{display: none;}
.paginations .sm\:flex{display: flex;}
.paginations .sm\:flex-1{flex:1;}
.paginations .sm\:flex{display: flex;}
.paginations .sm\:items-center {align-items: center;}
.paginations .sm\:justify-between{justify-content: space-between;}
}
@media (max-width:1440px){
.job-card-action .file-actions { justify-content: flex-start; align-items: flex-start; }
.error-state-icon svg {
width: 60px;
height: 60px;
}
}
@media (max-width:1230px){
.commonForm .headerlist.addhederList .filedgroupRow .filedgroup input.formInput{max-width: inherit;}
.commonForm .headerlist .filedgroupRow{flex-wrap:wrap;}
.commonForm .headerlist .filedgroup {flex:0 0 100%;max-width: 100%;}
.commonForm .headerlist #standard-fields-container .filedgroup:first-child { max-width: calc(100% - 70px); flex:0 0 100%; order: -2; }
.commonForm .headerlist .filedgroup:last-child {max-width: 36px; order: -1; }
.commonForm .headerlist .filedgroupRow .filedgroup:has(.icon-edit-btn){align-self: flex-start;}
}
@media ( max-width:1150px ){
.file-actions button, .file-actions a { padding: 5px 20px; font-size: 16px;}
}
@media (max-width:767px){
.commonForm .headerlist .filedgroup {max-width: 100% !important;}
.commonForm .headerlist #standard-fields-container .filedgroup:first-child { max-width: calc(100% - 70px);}
.commonForm .headerlist .filedgroup:last-child {max-width: 36px !important;}
.commonForm .filedgroup{flex-direction: column;}
.commonForm .filedgroup .formInput, .commonForm .filedgroup div{padding-left: 0;}
.commonForm .filedgroup .filedCol{display:flex; flex-direction: column; width: 100%;}
.commonForm .checkBoxlabel {width: 100%;}
.commonForm .filedgroup select.formInput{align-self: flex-start;padding-left: 0;}
.existingOrg .file-info-component-wrapper .file-info-component .file-name{width:100%; text-align: center;}
.organizationCon .startJobTitle{width:100%; text-align: center;}
.commonForm .headerlist.addhederList .filedgroupRow .filedgroup input.formInput{padding-left: 0;}
.addrowCon .addHeaderRowBtn{gap: 10px;font-size: 20px;}
.addrowCon .addHeaderRowBtn svg { width: 32px; height: auto; }
.manageUser .startJobSec .startJobBoxWrapper { padding: 30px 20px; gap: 20px; }
.commonForm .formFooter { margin-top: 20px; gap: 20px; }
.commonForm .filedgroup .formLabel, .commonForm .headerlist.addhederList .filedgroupRow .filedgroup .headerSelect, .commonForm .filedgroup .formInput, .commonForm .checkBoxlabel, .commonForm .filedgroup div {font-size: 16px;}
.commonForm .filedgroup .formInput, .commonForm .filedgroup div { width: 100%; }
.commonForm .checkBoxlabel:before{top:0;}
.commonForm .checkBoxlabel:after{top:2px;}
/* .cancel-job-container .btn-cancel{font-size: var(--font-size-xs);} */
.cardBlock-body{gap:20px;}
ul.userInfo{flex-direction: column;justify-content: flex-start; align-items: flex-start;padding-top: 5px;}
.commonForm .filedgroup .formLabel{border-bottom: 0px; width: 100%;}
.commonForm .radioGroup.rightjustify{justify-content: flex-start; width: 100%; }
.file-name-icon:has(.userInfo){ align-items: flex-start; }
ul.userInfo li{border-right:0;}
.commonForm .headerlist .filedgroupRow .filedgroup select.formInput { padding-left: 0; }
.permissionname-input {
width: 100%;
}
.role-create-edit-container .commonForm .filedgroup:last-child .formLabel {
margin-bottom: 25px;
}
.role-create-edit-container .grid-cols-1.grid.gap-4 {
padding-left: 0;
}
.role-create-edit-container .border h4 {
font-size: 16px !important;
}
.status-button.verified span {
width: calc(100% - 31px);
}
.status-button.verified {
padding: 7px 20px 7px;
}
.check-icon {
width: 21px;
height: 21px;
}
.job-card-footer { flex-direction: column-reverse; }
.cta-description { font-size: var(--font-size-sm); }
.error-state-icon svg {
width: 40px;
height: 40px;
}
.error-page-container { padding:0 !important; }
}
@media ( max-width:575px ){
.log-show-container .overflow-x-auto {
width: 100%;
overflow-y: auto;
}
.log-show-container .overflow-x-auto table {
width: 700px;
}
#toast-container.toast-bottom-center>div, #toast-container.toast-top-center>div { min-width:100% !important; }
.filter-Wrapper select { width: 100%; margin-left:0;}
}
/* Admin CSS End */
/* ===================================
BOOTSTRAP DATEPICKER STYLES
Customized to match Crolync design system
=================================== */
.datepicker {
padding: 4px;
border-radius: var(--radius-md);
direction: ltr;
font-family: var(--font-primary);
background: var(--surface-color);
border: 2px solid var(--text-secondary);
box-shadow: var(--shadow-md);
z-index: var(--z-popover);
}
.datepicker-inline {
width: 220px;
}
.datepicker-rtl {
direction: rtl;
}
.datepicker-rtl.dropdown-menu {
left: auto;
}
.datepicker-rtl table tr td span {
float: right;
}
.datepicker-dropdown {
top: 0;
left: 0;
z-index: var(--z-popover) !important;
}
.datepicker-dropdown:before {
content: '';
display: inline-block;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
border-bottom: 7px solid var(--text-secondary);
border-top: 0;
position: absolute;
}
.datepicker-dropdown:after {
content: '';
display: inline-block;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid var(--surface-color);
border-top: 0;
position: absolute;
}
.datepicker-dropdown.datepicker-orient-left:before {
left: 6px;
}
.datepicker-dropdown.datepicker-orient-left:after {
left: 7px;
}
.datepicker-dropdown.datepicker-orient-right:before {
right: 6px;
}
.datepicker-dropdown.datepicker-orient-right:after {
right: 7px;
}
.datepicker-dropdown.datepicker-orient-bottom:before {
top: -7px;
}
.datepicker-dropdown.datepicker-orient-bottom:after {
top: -6px;
}
.datepicker-dropdown.datepicker-orient-top:before {
bottom: -7px;
border-bottom: 0;
border-top: 7px solid var(--text-secondary);
}
.datepicker-dropdown.datepicker-orient-top:after {
bottom: -6px;
border-bottom: 0;
border-top: 6px solid var(--surface-color);
}
.datepicker table {
margin: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-collapse: separate;
border-spacing: 2px;
}
.datepicker td,
.datepicker th {
text-align: center;
width: 20px;
height: 20px;
border-radius: var(--radius-sm);
border: none;
font-size: var(--font-size-sm);
color: var(--text-primary);
padding: 8px;
}
.datepicker table th {
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.table-striped .datepicker table tr td,
.table-striped .datepicker table tr th {
background-color: transparent;
}
.datepicker table tr td.day.focused,
.datepicker table tr td.day:hover {
background: var(--warning-color);
cursor: pointer;
border-radius: var(--radius-sm);
}
.datepicker table tr td.new,
.datepicker table tr td.old {
color: var(--text-muted);
}
.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
background: 0 0;
color: var(--text-muted);
cursor: default;
}
.datepicker table tr td.highlighted {
background: var(--warning-color);
border-radius: 0;
}
.datepicker table tr td.today,
.datepicker table tr td.today.disabled,
.datepicker table tr td.today.disabled:hover,
.datepicker table tr td.today:hover {
background-color: var(--warning-color);
border-color: var(--accent-color);
color: var(--text-primary);
font-weight: var(--font-weight-semibold);
}
.datepicker table tr td.today.active,
.datepicker table tr td.today.disabled.active,
.datepicker table tr td.today.disabled:active,
.datepicker table tr td.today.disabled:hover.active,
.datepicker table tr td.today.disabled:hover:active,
.datepicker table tr td.today:active,
.datepicker table tr td.today:hover.active,
.datepicker table tr td.today:hover:active {
background-color: var(--accent-color);
color: var(--text-light);
}
.datepicker table tr td.today:hover:hover {
color: var(--text-primary);
}
.datepicker table tr td.today.active:hover {
color: var(--text-light);
}
.datepicker table tr td.range,
.datepicker table tr td.range.disabled,
.datepicker table tr td.range.disabled:hover,
.datepicker table tr td.range:hover {
background: var(--warning-color);
border-radius: 0;
}
.datepicker table tr td.range.today,
.datepicker table tr td.range.today.disabled,
.datepicker table tr td.range.today.disabled:hover,
.datepicker table tr td.range.today:hover {
background-color: var(--warning-color);
border-color: var(--accent-color);
border-radius: 0;
}
.datepicker table tr td.range.today.active,
.datepicker table tr td.range.today.disabled.active,
.datepicker table tr td.range.today.disabled:active,
.datepicker table tr td.range.today.disabled:hover.active,
.datepicker table tr td.range.today.disabled:hover:active,
.datepicker table tr td.range.today:active,
.datepicker table tr td.range.today:hover.active,
.datepicker table tr td.range.today:hover:active {
background-color: var(--accent-color);
color: var(--text-light);
}
.datepicker table tr td.selected,
.datepicker table tr td.selected.disabled,
.datepicker table tr td.selected.disabled:hover,
.datepicker table tr td.selected:hover {
background-color: var(--text-secondary);
color: var(--text-light);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
}
.datepicker table tr td.selected.active,
.datepicker table tr td.selected.disabled.active,
.datepicker table tr td.selected.disabled:active,
.datepicker table tr td.selected.disabled:hover.active,
.datepicker table tr td.selected.disabled:hover:active,
.datepicker table tr td.selected:active,
.datepicker table tr td.selected:hover.active,
.datepicker table tr td.selected:hover:active {
background-color: var(--text-secondary);
color: var(--text-light);
}
.datepicker table tr td.active,
.datepicker table tr td.active.disabled,
.datepicker table tr td.active.disabled:hover,
.datepicker table tr td.active:hover {
background-color: var(--secondary-color);
color: var(--text-light);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
font-weight: var(--font-weight-semibold);
}
.datepicker table tr td.active.active,
.datepicker table tr td.active.disabled.active,
.datepicker table tr td.active.disabled:active,
.datepicker table tr td.active.disabled:hover.active,
.datepicker table tr td.active.disabled:hover:active,
.datepicker table tr td.active:active,
.datepicker table tr td.active:hover.active,
.datepicker table tr td.active:hover:active {
background-color: var(--accent-green-hover);
color: var(--text-light);
}
.datepicker table tr td span {
display: block;
width: 23%;
height: 54px;
line-height: 54px;
float: left;
margin: 1%;
cursor: pointer;
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
color: var(--text-primary);
}
.datepicker table tr td span.focused,
.datepicker table tr td span:hover {
background: var(--warning-color);
}
.datepicker table tr td span.disabled,
.datepicker table tr td span.disabled:hover {
background: 0 0;
color: var(--text-muted);
cursor: default;
}
.datepicker table tr td span.active,
.datepicker table tr td span.active.disabled,
.datepicker table tr td span.active.disabled:hover,
.datepicker table tr td span.active:hover {
background-color: var(--secondary-color);
color: var(--text-light);
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
font-weight: var(--font-weight-semibold);
}
.datepicker table tr td span.active.active,
.datepicker table tr td span.active.disabled.active,
.datepicker table tr td span.active.disabled:active,
.datepicker table tr td span.active.disabled:hover.active,
.datepicker table tr td span.active.disabled:hover:active,
.datepicker table tr td span.active:active,
.datepicker table tr td span.active:hover.active,
.datepicker table tr td span.active:hover:active {
background-color: var(--accent-green-hover);
color: var(--text-light);
}
.datepicker table tr td span.new,
.datepicker table tr td span.old {
color: var(--text-muted);
}
.datepicker .datepicker-switch {
width: 145px;
font-weight: var(--font-weight-semibold);
color: var(--text-primary);
}
.datepicker .datepicker-switch,
.datepicker .next,
.datepicker .prev,
.datepicker tfoot tr th {
cursor: pointer;
color: var(--text-primary);
}
.datepicker .datepicker-switch:hover,
.datepicker .next:hover,
.datepicker .prev:hover,
.datepicker tfoot tr th:hover {
background: var(--warning-color);
border-radius: var(--radius-sm);
}
.datepicker .next.disabled,
.datepicker .prev.disabled {
visibility: hidden;
}
.datepicker .cw {
font-size: 10px;
width: 12px;
padding: 0 2px 0 5px;
vertical-align: middle;
color: var(--text-muted);
}
.input-append.date .add-on,
.input-prepend.date .add-on {
cursor: pointer;
}
.input-append.date .add-on i,
.input-prepend.date .add-on i {
margin-top: 3px;
}
.input-daterange input {
text-align: center;
}
.input-daterange input:first-child {
border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}
.input-daterange input:last-child {
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.input-daterange .add-on {
display: inline-block;
width: auto;
min-width: 16px;
height: 18px;
padding: 4px 5px;
font-weight: var(--font-weight-normal);
line-height: 18px;
text-align: center;
text-shadow: 0 1px 0 var(--text-light);
vertical-align: middle;
background-color: var(--warning-color);
border: 1px solid var(--text-secondary);
margin-left: -5px;
margin-right: -5px;
border-radius: var(--radius-sm);
}
/* Ensure datepicker appears above other elements */
.datepicker {
position: absolute;
}
.datepicker.dropdown-menu {
position: absolute;
z-index: var(--z-popover) !important;
}