/* =================================== CSS VARIABLES (Custom Properties) =================================== CSS variables let us define values ONCE and use them everywhere. This makes theming (light/dark mode) super easy! Syntax: --variable-name: value; usage: var(--variable-name) Why use variables? 1. Change colors in one place = update entire theme 2. Easier to maintain 3. Perfect for light/dark mode switching */ :root { /* LIGHT MODE COLORS (Default Theme) These are the default values when the page loads Color Palette Explanation: - --bg-primary: Main background color - --bg-secondary: Cards, inputs, containers - --text-primary: Main text color - --text-secondary: Muted text (labels, hints) - --accent: Primary action color (buttons, links) - --accent-hover: Darker shade for hover states - --border: Border color for inputs and dividers - --shadow: Box shadow for depth */ /* Backgrounds */ --bg-primary: #f8fafc; /* Very light gray - easy on eyes */ --bg-secondary: #ffffff; /* Pure white for cards/inputs */ --bg-hover: #f1f5f9; /* Slightly darker for hover states */ /* Text colors */ --text-primary: #1e293b; /* Dark slate - not pure black (easier to read) */ --text-secondary: #64748b; /* Gray for secondary text */ /* Accent color - Lighter purple/indigo - distinct from Ocean blue */ --accent: #8b5cf6; /* Lighter violet */ --accent-hover: #7c3aed; /* Slightly darker on hover */ /* Priority Colors - Traffic light system (universally understood) */ --priority-low: #22c55e; /* Green - calm, not urgent */ --priority-medium: #f59e0b; /* Orange - attention needed */ --priority-high: #ef4444; /* Red - urgent, important */ /* UI Colors */ --border: #e2e8f0; /* Light gray for borders */ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* Spacing (consistent rhythm) */ --radius: 8px; /* Border radius for rounded corners */ --radius-lg: 12px; /* Larger radius for bigger elements */ /* Transitions */ --transition: all 0.2s ease; /* Smooth animations */ } /* =================================== DARK MODE THEME =================================== When has class="dark-mode", these variables override the defaults above. */ body.dark-mode { /* Dark backgrounds - using slate colors (not pure black) for better readability */ --bg-primary: #0f172a; /* Deep navy - softer than pure black */ --bg-secondary: #1e293b; /* Dark slate for cards */ --bg-hover: #334155; /* Lighter slate for hover */ /* Light text on dark background */ --text-primary: #f1f5f9; /* Off-white - not pure white (easier on eyes) */ --text-secondary: #94a3b8; /* Muted light gray */ /* Accent color for dark mode - Lighter teal for better contrast */ --accent: #2dd4bf; /* Lighter teal */ --accent-hover: #14b8a6; /* Teal on hover */ /* Priority colors stay the same */ --border: #334155; /* Shadows need to be darker for dark mode */ --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -2px rgba(0, 0, 0, 0.3); } /* =================================== OCEAN THEME =================================== Calming blue tones - promotes focus and productivity */ body.ocean-mode { --bg-primary: #e8f4fc; /* Soft blue-gray background */ --bg-secondary: #ffffff; /* White cards with blue tint */ --bg-hover: #d1e9f5; /* Light blue for hover */ --text-primary: #1e3a5f; /* Deep navy text */ --text-secondary: #5a7a9a; /* Muted blue-gray */ --accent: #0284c7; /* Ocean blue */ --accent-hover: #0369a1; /* Darker ocean blue */ --border: #b8d4e8; --shadow: 0 4px 6px -1px rgba(2, 132, 199, 0.1), 0 2px 4px -1px rgba(2, 132, 199, 0.06); --shadow-lg: 0 10px 15px -3px rgba(2, 132, 199, 0.1), 0 4px 6px -2px rgba(2, 132, 199, 0.05); } /* =================================== SUNSET THEME (Lighter Contrast) =================================== Warm coral/peach tones - energetic and friendly */ body.sunset-mode { --bg-primary: #fef7f0; /* Warm cream background */ --bg-secondary: #ffffff; /* White cards */ --bg-hover: #fdeee0; /* Warm peach hover */ --text-primary: #5c3d2e; /* Warm brown text */ --text-secondary: #8b6b5a; /* Muted warm brown */ --accent: #f97316; /* Warm orange */ --accent-hover: #ea580c; /* Darker orange */ --border: #f5d5c0; /* Priority colors adjusted for sunset theme */ --priority-low: #22c55e; /* Keep green */ --priority-medium: #f59e0b; /* Amber */ --priority-high: #dc2626; /* Red */ --shadow: 0 4px 6px -1px rgba(249, 115, 22, 0.1), 0 2px 4px -1px rgba(249, 115, 22, 0.06); --shadow-lg: 0 10px 15px -3px rgba(249, 115, 22, 0.1), 0 4px 6px -2px rgba(249, 115, 22, 0.05); } /* =================================== GLOBAL STYLES (Reset & Base) =================================== */ /* Remove default margins and set box-sizing */ * { margin: 0; padding: 0; box-sizing: border-box; /* box-sizing: border-box means padding/border are INCLUDED in width/height This makes layout calculations much easier! */ } /* Base body styles */ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; /* System fonts = no download needed = faster loading! */ background-color: var(--bg-primary); color: var(--text-primary); min-height: 100vh; /* At least full viewport height */ line-height: 1.6; /* Good readability */ transition: var(--transition); /* Smooth theme transitions */ } /* =================================== CONTAINER =================================== Centers content and limits width for readability */ .container { max-width: 600px; /* Optimal reading width */ margin: 0 auto; /* Center horizontally */ padding: 2rem 1rem; /* Spacing from edges */ } /* =================================== HEADER =================================== */ .header { display: flex; justify-content: space-between; /* Title left, button right */ align-items: center; margin-bottom: 1.5rem; } .header h1 { font-size: 2rem; font-weight: 700; color: var(--text-primary); } /* Theme toggle button */ .theme-btn { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .theme-btn:hover { background: var(--bg-hover); } /* Settings button and dropdown */ .settings-wrapper { position: relative; } .settings-btn { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .settings-btn:hover { background: var(--bg-hover); } .settings-btn svg { width: 20px; height: 20px; color: var(--text-primary); } .settings-menu { display: none; position: absolute; top: 100%; right: 0; margin-top: 0.5rem; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); min-width: 150px; z-index: 100; overflow: hidden; } .settings-menu.show { display: block; } .settings-option { display: flex; align-items: center; gap: 0.5rem; width: 100%; padding: 0.75rem 1rem; font-size: 0.9rem; color: var(--text-primary); background: transparent; border: none; cursor: pointer; transition: var(--transition); text-align: left; } .settings-option:hover { background: var(--bg-hover); } .settings-option svg { width: 16px; height: 16px; } .settings-option.active { color: var(--accent); background: rgba(59, 130, 246, 0.1); } body.dark-mode .settings-option.active { background: rgba(20, 184, 166, 0.1); } /* =================================== SHARE INFO =================================== Displays the shareable URL */ .share-info { display: flex; align-items: center; gap: 0.5rem; background: var(--bg-secondary); padding: 0.75rem 1rem; border-radius: var(--radius); margin-bottom: 1.5rem; border: 1px solid var(--border); font-size: 0.875rem; } .share-info code { color: var(--accent); font-family: 'Monaco', 'Consolas', monospace; word-break: break-all; } .copy-btn { background: transparent; border: none; cursor: pointer; padding: 0.25rem; color: var(--text-secondary); transition: var(--transition); } .copy-btn:hover { color: var(--accent); } .copy-btn svg { width: 16px; height: 16px; } /* =================================== FORM STYLES =================================== */ .todo-form { background: var(--bg-secondary); padding: 1.5rem; border-radius: var(--radius-lg); margin-bottom: 1.5rem; border: 1px solid var(--border); box-shadow: var(--shadow); } .form-group { margin-bottom: 1rem; } /* Info icon with Tippy.js tooltip */ .label-with-info { display: flex; align-items: center; gap: 0.5rem; } .info-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: var(--text-muted); color: var(--bg-primary); font-size: 11px; font-weight: 700; cursor: help; transition: background 0.2s ease; user-select: none; -webkit-tap-highlight-color: transparent; } .info-icon:hover { background: var(--accent); } .info-icon svg { width: 12px; height: 12px; } /* Tippy.js tooltip custom theme */ .tippy-box { font-size: 0.875rem; line-height: 1.5; } .tippy-box[data-theme~='light-border'] { background: var(--card-bg); border: 1px solid var(--border-color, #e2e8f0); box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 4px 10px -5px rgba(0, 0, 0, 0.1); color: var(--text-primary); } .tippy-box[data-theme~='light-border'] .tippy-arrow { color: var(--card-bg); border: 1px solid var(--border-color, #e2e8f0); } .form-row { display: grid; grid-template-columns: 1fr 1fr; /* Two equal columns */ gap: 1rem; } /* Labels */ label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.5rem; } /* Input fields */ input[type="text"], input[type="date"], select, textarea { width: 100%; padding: 0.75rem 1rem; font-size: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-primary); color: var(--text-primary); transition: var(--transition); font-family: inherit; resize: vertical; } /* Focus state - when user clicks into input */ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.2); /* Subtle violet glow */ } body.dark-mode input:focus, body.dark-mode select:focus, body.dark-mode textarea:focus { box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.2); } body.ocean-mode input:focus, body.ocean-mode select:focus, body.ocean-mode textarea:focus { box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.2); } body.sunset-mode input:focus, body.sunset-mode select:focus, body.sunset-mode textarea:focus { box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.2); } /* Placeholder text color */ input::placeholder, textarea::placeholder { color: var(--text-secondary); } /* Calendar icon in date inputs - dark mode */ body.dark-mode input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); } /* =================================== BUTTONS =================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 500; border: none; border-radius: var(--radius); cursor: pointer; transition: var(--transition); } .btn svg { width: 18px; height: 18px; } /* Primary button - main actions */ .btn-primary { background: var(--accent); color: white; } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); /* Subtle lift effect */ box-shadow: var(--shadow); } /* Secondary button - cancel, etc. */ .btn-secondary { background: var(--bg-hover); color: var(--text-primary); border: 1px solid var(--border); } .btn-secondary:hover { background: var(--border); } /* =================================== TO-DO LIST =================================== */ .todo-list { display: flex; flex-direction: column; gap: 0.75rem; } /* Individual to-do item */ .todo-item { display: flex; align-items: flex-start; gap: 1rem; background: var(--bg-secondary); padding: 1rem 1.25rem; border-radius: var(--radius); border: 1px solid var(--border); transition: var(--transition); position: relative; } .todo-item:hover { box-shadow: var(--shadow); } /* Completed to-do styling */ .todo-item.completed { opacity: 0.6; } .todo-item.completed .todo-title { text-decoration: line-through; color: var(--text-secondary); } /* SortableJS drag/drop styles */ /* Ghost = placeholder left behind when dragging - HIDE IT */ .todo-item.sortable-ghost { opacity: 0 !important; visibility: hidden !important; } /* Chosen = item being picked up (stays in place) */ .todo-item.sortable-chosen { opacity: 0.3 !important; } /* Drag = the actual element being dragged (desktop, native drag) */ .sortable-drag { opacity: 1 !important; cursor: grabbing !important; box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.35), 0 0 0 3px var(--accent, #3b82f6) !important; transform: scale(1.05) !important; z-index: 99999 !important; background: var(--card-bg) !important; border-radius: 12px !important; pointer-events: none !important; } /* Fallback = the cloned element that follows cursor (mobile, forceFallback: true) */ /* THIS IS WHAT FOLLOWS YOUR FINGER ON MOBILE */ .sortable-fallback { opacity: 1 !important; cursor: grabbing !important; box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4), 0 0 0 4px var(--accent, #3b82f6) !important; transform: scale(1.05) !important; z-index: 999999 !important; background: var(--card-bg) !important; border-radius: 12px !important; pointer-events: none !important; /* Ensure it's visible and positioned correctly */ position: fixed !important; will-change: transform !important; } .todo-content { cursor: grab; } .todo-content:active { cursor: grabbing; } /* Checkbox */ .todo-checkbox { flex-shrink: 0; /* Don't shrink */ } .todo-checkbox input { width: 20px; height: 20px; cursor: pointer; accent-color: var(--accent); } /* To-do content */ .todo-content { flex: 1; /* Take remaining space */ min-width: 0; /* Allow text to truncate */ } .todo-title { display: block; font-weight: 500; color: var(--text-primary); margin-bottom: 0.25rem; } .todo-description { display: block; font-size: 0.875rem; color: var(--text-secondary); margin-bottom: 0.25rem; line-height: 1.4; } /* Meta info (date, priority) */ .todo-meta { display: flex; align-items: center; gap: 0.75rem; font-size: 0.875rem; } .todo-date { color: var(--text-secondary); display: flex; align-items: center; gap: 0.25rem; } .todo-date svg { width: 14px; height: 14px; } /* Day.js date formatting classes */ .todo-date.date-today { color: var(--primary-color); font-weight: 600; } .todo-date.date-tomorrow { color: var(--priority-medium, #f59e0b); } .todo-date.date-this-week { color: var(--text-secondary); } .todo-date.date-future { color: var(--text-secondary); } .todo-date.date-overdue { color: var(--priority-high, #ef4444); font-weight: 500; } /* Priority badges */ .priority-badge { padding: 0.125rem 0.5rem; border-radius: 9999px; /* Fully rounded */ font-size: 0.75rem; font-weight: 600; text-transform: uppercase; } .priority-badge.low { background: rgba(34, 197, 94, 0.15); color: var(--priority-low); } .priority-badge.medium { background: rgba(245, 158, 11, 0.15); color: var(--priority-medium); } .priority-badge.high { background: rgba(239, 68, 68, 0.15); color: var(--priority-high); } /* Action buttons */ .todo-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } .btn-icon { background: transparent; border: none; padding: 0.5rem; cursor: pointer; color: var(--text-secondary); border-radius: var(--radius); transition: var(--transition); } .btn-icon:hover { background: var(--bg-hover); color: var(--text-primary); } .btn-icon.btn-delete:hover { color: var(--priority-high); } .btn-icon svg { width: 18px; height: 18px; } /* =================================== LOADING STATE =================================== */ .loading { text-align: center; padding: 3rem; color: var(--text-secondary); } /* =================================== EMPTY STATE =================================== */ .empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-secondary); } .empty-icon { width: 64px; height: 64px; margin-bottom: 1rem; opacity: 0.5; } /* =================================== MODAL =================================== The modal is hidden by default, shown via JavaScript adding .show class */ .modal { display: none; /* Hidden by default */ position: fixed; inset: 0; /* top: 0; right: 0; bottom: 0; left: 0; */ background: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay */ z-index: 1000; align-items: center; justify-content: center; padding: 1rem; } /* Show modal when .show class is added */ .modal.show { display: flex; } .modal-content { background: var(--bg-secondary); border-radius: var(--radius-lg); width: 100%; max-width: 480px; box-shadow: var(--shadow-lg); animation: modalSlideIn 0.2s ease; } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } .modal-header { display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border); } .modal-header h2 { font-size: 1.25rem; font-weight: 600; } .close-btn { background: transparent; border: none; cursor: pointer; padding: 0.25rem; color: var(--text-secondary); transition: var(--transition); } .close-btn:hover { color: var(--text-primary); } .close-btn svg { width: 20px; height: 20px; } .modal-content .todo-form { border: none; box-shadow: none; margin-bottom: 0; } .modal-actions { display: flex; justify-content: flex-end; gap: 0.75rem; margin-top: 1rem; } /* =================================== TOAST NOTIFICATIONS =================================== Small popup messages for feedback */ .toast { position: fixed; bottom: 2rem; right: 2rem; background: var(--bg-secondary); color: var(--text-primary); padding: 0.75rem 1.25rem; border-radius: var(--radius); box-shadow: var(--shadow-lg); border: 1px solid var(--border); z-index: 1001; animation: toastSlideIn 0.3s ease; } @keyframes toastSlideIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .toast.success { border-left: 4px solid var(--priority-low); } .toast.error { border-left: 4px solid var(--priority-high); } /* =================================== RESPONSIVE DESIGN =================================== Adjust layout for smaller screens (mobile) */ /* Tablet and smaller */ @media (max-width: 640px) { .container { padding: 1rem; } .header h1 { font-size: 1.5rem; } .form-row { grid-template-columns: 1fr; /* Stack on mobile */ } .todo-item { flex-wrap: wrap; gap: 0.5rem; padding: 0.75rem; padding-right: 0.5rem; } .todo-checkbox { order: 1; flex-shrink: 0; } .todo-content { flex: 1; min-width: 0; order: 2; padding-right: 3.5rem; /* Space for action buttons */ } .todo-meta { flex-wrap: wrap; } .todo-actions { position: absolute; top: 0.5rem; right: 0.5rem; order: 3; } .modal-content { margin: 1rem; } } /* =================================== ACCESSIBILITY =================================== Improve experience for keyboard users */ /* Focus visible - only show focus ring when using keyboard */ .btn:focus-visible, .btn-icon:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* =================================== WELCOME SCREEN =================================== Shown when user first opens the app (no list ID in URL) Friendly, simple interface for creating or joining a list */ .welcome-screen { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; position: relative; } /* Settings button container for welcome page */ .welcome-settings { position: absolute; top: 1rem; right: 1rem; z-index: 10; } .welcome-content { max-width: 480px; width: 100%; text-align: center; } .welcome-icon { width: 80px; height: 80px; margin: 0 auto 1.5rem; background: var(--bg-secondary); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--border); } .welcome-icon svg { width: 40px; height: 40px; color: var(--accent); } .welcome-content h1 { font-size: 2rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.5rem; } .welcome-subtitle { color: var(--text-secondary); font-size: 1.1rem; margin-bottom: 2rem; } .welcome-form { background: var(--bg-secondary); padding: 2rem; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow); text-align: left; } .welcome-form label { font-size: 1rem; font-weight: 600; color: var(--text-primary); } .welcome-form input { margin-top: 0.5rem; font-size: 1.1rem; padding: 1rem; } .form-hint { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.5rem; } .btn-large { width: 100%; padding: 1rem 1.5rem; font-size: 1.1rem; margin-top: 1rem; } .welcome-divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; color: var(--text-secondary); } .welcome-divider::before, .welcome-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); } .welcome-join { text-align: left; padding: 1.25rem; background: var(--bg-secondary); border-radius: var(--radius); border: 1px solid var(--border); } .welcome-join label { display: block; font-size: 0.9rem; font-weight: 500; color: var(--text-secondary); margin-bottom: 0.75rem; } .join-input-group { display: flex; gap: 0.5rem; } .join-input-group input { flex: 1; padding: 0.75rem 1rem; font-size: 0.95rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-primary); color: var(--text-primary); } .join-input-group input:focus { outline: none; border-color: var(--accent); } .join-input-group .btn { padding: 0.75rem 1.25rem; flex-shrink: 0; } /* Also hide share-info when header is hidden */ .welcome-screen ~ .container .share-info { display: none; } /* Show share-info when app is visible */ body.has-list .share-info { display: flex; } /* =================================== NAVIGATION TABS =================================== Tab navigation between Add Task and Task List views */ .nav-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; background: var(--bg-secondary); padding: 0.5rem; border-radius: var(--radius-lg); border: 1px solid var(--border); } .nav-tab { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; font-size: 0.95rem; font-weight: 500; color: var(--text-secondary); background: transparent; border: none; border-radius: var(--radius); cursor: pointer; transition: var(--transition); } .nav-tab:hover { color: var(--text-primary); background: var(--bg-hover); } .nav-tab.active { color: var(--accent); background: var(--bg-primary); box-shadow: var(--shadow); } .nav-tab svg { width: 18px; height: 18px; } .task-count { background: var(--accent); color: white; font-size: 0.75rem; font-weight: 600; padding: 0.125rem 0.5rem; border-radius: 9999px; min-width: 20px; text-align: center; } .nav-tab.active .task-count { background: var(--accent); } .nav-tab:not(.active) .task-count { background: var(--text-secondary); } /* =================================== VIEWS =================================== */ .view { animation: fadeIn 0.2s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } #add-view .btn-large { margin-top: 0.5rem; } /* =================================== WELCOME SCREEN - MOBILE =================================== Smaller sizes for mobile devices */ @media (max-width: 480px) { .welcome-screen { padding: 1rem; align-items: flex-start; padding-top: 2rem; } .welcome-icon { width: 60px; height: 60px; margin-bottom: 1rem; } .welcome-icon svg { width: 30px; height: 30px; } .welcome-content h1 { font-size: 1.5rem; } .welcome-subtitle { font-size: 0.95rem; margin-bottom: 1.5rem; } .welcome-form { padding: 1.25rem; } .welcome-form label { font-size: 0.9rem; } .welcome-form input { font-size: 1rem; padding: 0.75rem; } .btn-large { padding: 0.75rem 1rem; font-size: 1rem; } .welcome-join { padding: 1rem; } .welcome-join label { font-size: 0.85rem; } .join-input-group { flex-direction: column; } .join-input-group .btn { width: 100%; } }