/* Careers form. Extends the site tokens in style.css; defines nothing global. */ /* ---- .sr-only ------------------------------------------------------------- src/style.css does not define this, and the page relies on it for the aria-live step announcement. Without it that text renders visibly in the middle of the form. Defined here rather than in style.css so this feature ships self-contained; if it is ever promoted to the global sheet, delete it from here rather than leaving two definitions to drift apart. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---- fact list ------------------------------------------------------------ A ruled label/value list, not a grid of cards - short facts read better this way and it is what the house public-site rules call for. */ .cr-facts { margin: var(--space-lg) 0 0; } .cr-facts dt { font-weight: 600; color: var(--text-secondary); padding-top: var(--space-md); border-top: 1px solid var(--border-light); } .cr-facts dd { margin: 0 0 var(--space-md); } @media (min-width: 601px) { .cr-facts { display: grid; grid-template-columns: 148px 1fr; column-gap: var(--space-lg); } .cr-facts dt { grid-column: 1; } .cr-facts dd { grid-column: 2; padding-top: var(--space-md); border-top: 1px solid var(--border-light); } } /* ---- progress -------------------------------------------------------- */ .cr-progress { display: none; margin: 0 0 var(--space-2xl); } .cr-progress ol { display: flex; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; counter-reset: crstep; } .cr-step { flex: 1; min-width: 0; } .cr-step .bar { display: block; height: 3px; border-radius: 2px; background: transparent; border: 1px solid var(--border-medium); } .cr-step[data-state="done"] .bar, .cr-step[data-state="current"] .bar { background: var(--accent-green); border-color: var(--accent-green); } .cr-step .lbl { display: block; margin-top: var(--space-sm); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cr-step[data-state="current"] .lbl { color: var(--accent-green); } /* State is carried by the filled/outline bar as well as by colour, so it does not rely on colour alone (WCAG 1.4.1). */ .cr-step button { display: block; width: 100%; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: inherit; min-height: 44px; } .cr-step[data-state="todo"] button { cursor: default; } @media (max-width: 600px) { .cr-step:not([data-state="current"]) .lbl { display: none; } } /* ---- screens --------------------------------------------------------- */ /* Without JS every screen shows and the form submits as one long page. The stepped flow is the ENHANCEMENT, gated on a .js class that only a running script can add - so if the script never executes, the page still works. (The previous no-js flavour inverted this and was permanently on, because the remove() ran in before the add() in . All four screens rendered at once and the nav buttons were hidden.) */ .cr-screen { display: block; } .js .cr-screen { display: none; } .js .cr-screen.is-active { display: block; } .js .cr-progress { display: flex; } /* ---- floating label -------------------------------------------------- */ .cr-field { position: relative; margin-bottom: var(--space-lg); } .cr-field > input, .cr-field > textarea, .cr-field > select { width: 100%; min-height: 56px; /* 44px target plus room for the label */ padding: 22px 14px 8px; /* top padding reserves the floated row */ font-family: var(--font-body); font-size: 1rem; color: #1a1a1a; background: var(--white); border: 2px solid var(--border-medium); border-radius: var(--radius-md); } .cr-field > textarea { min-height: 132px; resize: vertical; } .cr-field > label { position: absolute; left: 15px; top: 17px; font-size: 1rem; color: #5a5a5a; pointer-events: none; transition: transform var(--transition-fast), font-size var(--transition-fast); transform-origin: left top; } /* :not(:placeholder-shown) is why every input ships placeholder=" ". That one space is what lets the label float with no JavaScript at all. */ .cr-field > input:focus + label, .cr-field > input:not(:placeholder-shown) + label, .cr-field > textarea:focus + label, .cr-field > textarea:not(:placeholder-shown) + label, .cr-field > select:focus + label, .cr-field > select:valid + label { transform: translateY(-11px) scale(0.75); color: #444; /* 4.5:1 on white at the smaller size */ } .cr-field > :is(input, textarea, select):focus { outline: none; border-color: var(--accent-green); box-shadow: 0 0 0 3px rgba(0, 255, 65, 0.25); } @media (prefers-reduced-motion: reduce) { .cr-field > label { transition: none; } } /* Hints live BELOW the box - the box already holds a label and a value. */ .cr-hint { display: block; margin-top: 6px; font-size: 0.85rem; color: var(--text-muted); } .cr-err { display: block; margin-top: 6px; font-size: 0.85rem; color: #ff6b62; } .cr-field.has-error > :is(input, textarea, select) { border-color: #ff6b62; } /* ---- the "we read this from your resume" marker ---------------------- */ .cr-ai-filled { position: absolute; right: 12px; top: 19px; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: #0a7a2a; pointer-events: none; } /* ---- role cards ------------------------------------------------------ */ .cr-cards { display: grid; gap: var(--space-md); } @media (min-width: 601px) { .cr-cards { grid-template-columns: 1fr 1fr; } } .cr-card { position: relative; } .cr-card input { position: absolute; opacity: 0; width: 1px; height: 1px; } .cr-card span { display: block; min-height: 44px; padding: var(--space-md); border: 2px solid var(--border-medium); border-radius: var(--radius-md); cursor: pointer; } .cr-card input:checked + span { border-color: var(--accent-green); background: rgba(0,255,65,0.07); } .cr-card input:focus-visible + span { box-shadow: 0 0 0 3px rgba(0,255,65,0.35); } .cr-card b { display: block; margin-bottom: 4px; } .cr-card em { font-style: normal; color: var(--text-muted); font-size: 0.9rem; } /* ---- drop zone ------------------------------------------------------- */ .cr-drop { border: 2px dashed var(--border-medium); border-radius: var(--radius-lg); padding: var(--space-2xl) var(--space-lg); text-align: center; } .cr-drop.is-over { border-color: var(--accent-green); background: rgba(0,255,65,0.05); } .cr-drop input[type="file"] { display: block; margin: var(--space-md) auto 0; } .cr-nav { display: none; gap: var(--space-md); margin-top: var(--space-xl); } .js .cr-nav { display: flex; } /* The mirror image of .cr-nav: the Send control that exists FOR the no-JS visitor, hidden the moment a script has run and the stepped nav is real. Exactly one submit button is reachable in either mode. */ .cr-nojs-send { display: block; margin-top: var(--space-xl); } .js .cr-nojs-send { display: none; } .hp-careers { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --------------------------------------------------------------------------- Measured alignment pass. Every number below fixes a discrepancy observed in the rendered page, not a guess. Recorded so nobody "tidies" them away: - fieldset shipped a UA border, pushing legend and .cr-cards to x=226 while every sibling sat at x=224 - rendered 58px tall against 56px for every other control, and the date field's label sat 11px off the others - the experience/education row containers and their Add buttons had no bottom margin, so field gaps ran 24 / 64 / 132 instead of a single value --------------------------------------------------------------------------- */ /* One left edge for everything in the form column. */ #cr-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; } #cr-form legend { padding: 0; margin: 0 0 var(--space-md); float: left; width: 100%; } #cr-form legend + * { clear: both; } /* One control height, one label offset, on every control type. appearance:none is what stops select and date from applying their own intrinsic box metrics on top of ours. */ .cr-field > input, .cr-field > textarea, .cr-field > select { -webkit-appearance: none; appearance: none; height: 56px; line-height: 1.2; margin: 0; box-sizing: border-box; } .cr-field > textarea { height: 132px; } /* Restore the select chevron that appearance:none removes. */ .cr-field > select { background-image: linear-gradient(45deg, transparent 50%, #5a5a5a 50%), linear-gradient(135deg, #5a5a5a 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 40px; } /* Safari renders date fields with its own inner padding; strip it so the label lands at the same 17px as every other field. */ .cr-field > input[type="date"]::-webkit-datetime-edit { padding: 0; } .cr-field > input[type="date"]::-webkit-calendar-picker-indicator { margin: 0; } /* One vertical rhythm. Row groups and their Add buttons were the outliers. */ #cr-form h4 { margin: var(--space-xl) 0 var(--space-md); } #cr-exp-rows, #cr-edu-rows { margin: 0; } #cr-exp-rows + .btn, #cr-edu-rows + .btn { margin-bottom: var(--space-lg); } .cr-row { margin-bottom: var(--space-lg); } .cr-row:last-child { margin-bottom: var(--space-md); } /* Controls are inline-block by default, so they sit on a text baseline and inherit leading above them. On that pushed the control 11px down inside its wrapper and the floating label landed at 6px instead of the 17px every other field used. display:block removes the baseline entirely. */ .cr-field > input, .cr-field > textarea, .cr-field > select { display: block; } /* The Add button is inline-flex, so its bottom margin does not collapse with the next heading's top margin and the gap came out 24+32=56. Let the heading own that spacing alone. */ #cr-exp-rows + .btn, #cr-edu-rows + .btn { margin-bottom: 0; } /* A date input is never :placeholder-shown - it always renders its own mm/dd/yyyy hint - so its label floats permanently and correctly. Stating it explicitly so the 6px-vs-17px difference reads as a decision, not a bug: an at-rest label here would sit on top of the browser's format text. */ .cr-field > input[type="date"] + label { transform: translateY(-11px) scale(0.75); color: #444; } /* The JS moves focus to each screen's heading so screen readers announce the change. That heading is tabindex="-1", so it is NOT keyboard-reachable and a focus ring on it communicates nothing - it just draws a stray box around the title. Suppressing it is safe under WCAG 2.4.7, which governs keyboard- operable controls; every real control keeps its ring (see :focus-visible rules above). */ #cr-form h3[tabindex="-1"]:focus { outline: none; } /* --------------------------------------------------------------------------- Vertical compaction. Measured before: page 2710px against a 722px viewport, and the first input sat at y=1784 - two and a half screens of scrolling before a visitor could do anything. The hero alone was 738px, of which 264px was padding for one headline and one line of text. The scale here is deliberate and tight: 8 / 12 / 16 / 24. Nothing is arbitrary, and no rule below exists to "look denser" - each one removes space that was carrying no information. --------------------------------------------------------------------------- */ /* The fact list carries five short rows; at 148px + gap it was scanning as a page section. Tighter rows, hairline rules, no outer padding. */ .cr-facts { margin: 0; } .cr-facts dt, .cr-facts dd { padding-top: 8px; padding-bottom: 8px; font-size: 0.94rem; } .cr-facts dd { margin-bottom: 0; } @media (min-width: 601px) { .cr-facts { grid-template-columns: 132px 1fr; column-gap: var(--space-md); } } /* The form band. Was 96px top and bottom for no reason. */ /* .header is position:fixed and 73px tall, so this top padding is not decoration - it is what keeps the progress bar out from behind it. */ #apply.section { padding: 92px 0 48px; scroll-margin-top: 12px; } /* Progress: the bar and its label do not need 32px under them. */ .cr-progress { margin: 0 0 20px; } .cr-step .lbl { margin-top: 6px; font-size: 0.68rem; } /* Screen headings were 34px tall with 16px under them. */ #cr-form h3 { font-size: 1.28rem; line-height: 1.2; margin: 0 0 6px; } #cr-form h4 { margin: 20px 0 8px; } .cr-screen > p { font-size: 0.94rem; margin: 0 0 16px; } /* Controls: 56px was generous for a text input and still clears the 44px WCAG 2.5.5 target at 48px. The floated label rides up to match. */ .cr-field { margin-bottom: 12px; } .cr-field > input, .cr-field > select { height: 48px; padding: 18px 14px 4px; } .cr-field > textarea { height: 84px; padding: 18px 14px 6px; min-height: 84px; } .cr-field > label { top: 13px; font-size: 0.95rem; } .cr-field > input:focus + label, .cr-field > input:not(:placeholder-shown) + label, .cr-field > textarea:focus + label, .cr-field > textarea:not(:placeholder-shown) + label, .cr-field > select:focus + label, .cr-field > select:valid + label, .cr-field > input[type="date"] + label { transform: translateY(-9px) scale(0.75); } /* The drop zone was 163px tall to hold one file input. */ .cr-drop { padding: 20px 16px; border-radius: var(--radius-md); } .cr-drop p { margin: 0 0 10px; font-size: 0.94rem; } .cr-drop input[type="file"] { margin-top: 0; } /* Role cards: the description is one short line, not a paragraph. */ .cr-cards { gap: 8px; } .cr-card span { padding: 10px 12px; min-height: 44px; } .cr-card b { margin-bottom: 2px; font-size: 0.95rem; } .cr-card em { font-size: 0.85rem; line-height: 1.35; } #cr-form fieldset { margin-bottom: 16px; } #cr-form legend { margin-bottom: 8px; } .cr-nav { margin-top: 16px; } .cr-row { margin-bottom: 12px; } .cr-row:last-child { margin-bottom: 8px; } .cr-hint, .cr-err { margin-top: 4px; } /* The AI notice is required to stay visible and readable - it is the Illinois HB 3773 applicant notice, not decoration. Tightened, never hidden. */ #cr-form .card { padding: 14px 16px; margin-top: 16px; } #cr-form .card h4 { margin-top: 0; } #cr-form .card p { font-size: 0.86rem; line-height: 1.5; margin-bottom: 8px; } #cr-form .card p:last-child { margin-bottom: 0; } /* --------------------------------------------------------------------------- Two-column, zero-gap field groups. Adjacent fields overlap by their 2px border so the group reads as one block with hairline dividers instead of a stack of separate boxes. The overlap is what "no spacing between fields" actually requires - a gap of 0 alone still leaves two 2px borders touching, which renders as a 4px seam. --------------------------------------------------------------------------- */ .cr-grid { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 12px; } .cr-grid-3 { grid-template-columns: 2fr 1.4fr 1fr; } .cr-span2 { grid-column: 1 / -1; } .cr-grid .cr-field { margin: 0; } .cr-grid .cr-field > input, .cr-grid .cr-field > textarea, .cr-grid .cr-field > select { border-radius: 0; } /* Pull each cell onto its neighbour's border. */ .cr-grid > .cr-field:not(:first-child) { margin-left: -2px; } .cr-grid > .cr-field.cr-span2 { margin-left: 0; } .cr-grid.cr-grid-3 > .cr-field:nth-child(3n+1) { margin-left: 0; } .cr-grid > .cr-field:nth-child(n+3) { margin-top: -2px; } .cr-grid.cr-grid-3 > .cr-field:nth-child(n+4) { margin-top: -2px; } /* A focused or errored cell must paint its border above its neighbours, otherwise the overlap hides half the focus ring. */ .cr-grid .cr-field:focus-within, .cr-grid .cr-field.has-error { position: relative; z-index: 2; } /* Shorter controls. 44px is the WCAG 2.5.5 floor and this sits exactly on it. */ .cr-field > input, .cr-field > select { height: 44px; padding: 16px 12px 3px; } .cr-field > textarea { height: 64px; min-height: 64px; padding: 16px 12px 4px; } .cr-field > label { top: 12px; left: 13px; font-size: 0.9rem; } .cr-field > input:focus + label, .cr-field > input:not(:placeholder-shown) + label, .cr-field > textarea:focus + label, .cr-field > textarea:not(:placeholder-shown) + label, .cr-field > select:focus + label, .cr-field > select:valid + label, .cr-field > input[type="date"] + label { transform: translateY(-8px) scale(0.72); } /* Single fields outside a grid keep a small gap; nothing else changes. */ .cr-field { margin-bottom: 8px; } @media (max-width: 600px) { /* One column on a phone, and the overlap flips from horizontal to vertical. */ .cr-grid, .cr-grid-3 { grid-template-columns: 1fr; } .cr-grid > .cr-field:not(:first-child) { margin-left: 0; margin-top: -2px; } } /* --------------------------------------------------------------------------- Sticky progress bar with arrow navigation, and group rhythm. Two different kinds of space, which the first compaction pass wrongly treated as one. INSIDE a group (the cells of a .cr-grid) the gap is zero and the borders overlap - that is the point. BETWEEN groups (a card grid and the legend after it, one fieldset and the next) there has to be real air, or the reader cannot tell where one question ends and the next begins. --------------------------------------------------------------------------- */ /* .header is fixed and 73px tall; the bar parks directly under it. */ .cr-progress { position: sticky; top: 73px; z-index: 40; display: flex; align-items: center; gap: 12px; margin: 0 0 28px; padding: 10px 0 8px; background: var(--bg-dark); border-bottom: 1px solid var(--border-light); } .cr-progress ol { flex: 1; min-width: 0; } .cr-arrow { flex: none; width: 44px; height: 44px; /* WCAG 2.5.5 */ display: inline-flex; align-items: center; justify-content: center; background: none; color: var(--accent-green); border: 2px solid var(--border-medium); border-radius: var(--radius-md); cursor: pointer; padding: 0; transition: border-color var(--transition-fast), color var(--transition-fast); } .cr-arrow:hover:not(:disabled) { border-color: var(--accent-green); } .cr-arrow:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(0,255,65,.35); } .cr-arrow:disabled { color: var(--text-light); border-color: var(--border-light); cursor: default; } /* The last step submits; there is nothing to advance to. */ .cr-arrow.cr-next[hidden] { display: none; } /* With arrows in the sticky bar, the per-screen Back/Continue are a second set of the same control. The Send button on the last screen is not - it submits. */ .js .cr-screen .cr-nav .cr-back, .js .cr-screen .cr-nav .cr-next { display: none; } .js .cr-screen[data-screen="4"] .cr-nav { display: flex; } /* ---- group rhythm: this is the spacing the screenshots were missing ---- */ #cr-form fieldset { margin: 0 0 28px; } #cr-form legend { margin: 0 0 10px; font-size: 0.95rem; color: var(--text-secondary); } .cr-cards + * { margin-top: 0; } #cr-form fieldset + .cr-grid, .cr-cards + .cr-grid { margin-top: 28px; } .cr-grid { margin-bottom: 28px; } #cr-form h4 { margin: 28px 0 10px; } #cr-exp-rows + .btn, #cr-edu-rows + .btn { margin-bottom: 4px; } .cr-row { margin-bottom: 10px; } /* ---- the notice, now at the point of collection ------------------------ It moved off the last screen onto the upload step: disclosing what happens to a resume is more use beside the file input than three screens later. It is a

, not a tooltip - this is the Illinois HB 3773 applicant notice and it has to be reachable by keyboard and on touch, which hover-only content is not. The one-line summary above it always shows. */ .cr-microcopy { margin: 12px 0 6px; font-size: 0.86rem; line-height: 1.5; color: var(--text-secondary); max-width: 62ch; } .cr-notice { margin: 0 0 4px; } .cr-notice > summary { cursor: pointer; display: inline-block; font-size: 0.84rem; color: var(--accent-green); padding: 4px 0; min-height: 24px; } .cr-notice > summary:focus-visible { outline: 2px solid var(--accent-green); outline-offset: 2px; } .cr-notice > div { margin-top: 8px; padding: 12px 14px; background: var(--bg-card); border: 1px solid var(--border-light); border-radius: var(--radius-md); max-width: 68ch; } .cr-notice p { font-size: 0.85rem; line-height: 1.55; margin: 0 0 8px; } .cr-notice p:last-child { margin: 0; } /* ---- the read-back ------------------------------------------------------ Was one flat run of ten label/value pairs at the same weight, which gave the reader nothing to aim at. Grouped, with the labels demoted and the values promoted, and the long answer given its own block and measure. */ .cr-recap { margin: 0 0 20px; } .cr-recap h4 { margin: 0 0 8px; font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); font-weight: 500; } .cr-recap dl { display: grid; grid-template-columns: 132px 1fr; margin: 0; } .cr-recap dt { font-size: 0.85rem; color: var(--text-muted); padding: 7px 0; border-top: 1px solid var(--border-light); } .cr-recap dd { font-size: 0.95rem; color: var(--text-dark); margin: 0; padding: 7px 0; border-top: 1px solid var(--border-light); overflow-wrap: anywhere; } .cr-recap-long p { font-size: 0.95rem; line-height: 1.6; max-width: 62ch; margin: 0; padding: 10px 12px; background: var(--bg-card); border-left: 2px solid var(--accent-green); border-radius: 0 var(--radius-md) var(--radius-md) 0; } .cr-change { margin-top: 4px; } @media (max-width: 600px) { .cr-recap dl { grid-template-columns: 1fr; } .cr-recap dt { padding-bottom: 0; border-top: 1px solid var(--border-light); } .cr-recap dd { padding-top: 2px; border-top: 0; } } /* ---- the sticky bar's Send ---------------------------------------------- */ .cr-send { flex: none; height: 44px; padding: 0 18px; white-space: nowrap; } .cr-send[hidden] { display: none; } /* With Back an arrow and Send in the bar, screen 4's own pair is a duplicate. The no-JS Send is separate and stays. */ .js .cr-screen[data-screen="4"] .cr-nav { display: none; } /* Role and situation cards are now just labels, so they tile three across and shed the height the descriptions were carrying. */ .cr-cards { grid-template-columns: repeat(3, 1fr); gap: 8px; } .cr-card span { display: flex; align-items: center; min-height: 44px; padding: 8px 12px; text-align: left; } .cr-card b { margin: 0; font-size: 0.92rem; font-weight: 500; } @media (max-width: 700px) { .cr-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 420px) { .cr-cards { grid-template-columns: 1fr; } } /* An empty .cr-nav still occupies a row on screens 1-3 once its two buttons moved into the sticky bar. */ .js .cr-screen[data-screen="1"] .cr-nav, .js .cr-screen[data-screen="2"] .cr-nav, .js .cr-screen[data-screen="3"] .cr-nav { display: none; } /* ---- Skip resume -------------------------------------------------------- */ .cr-skip-row { display: flex; align-items: center; gap: 12px; margin: 12px 0 4px; flex-wrap: wrap; } .cr-skip { height: 40px; padding: 0 16px; } .cr-skip-note { font-size: 0.84rem; color: var(--text-muted); } /* ---- row delete --------------------------------------------------------- Was a full-width "Remove" button sitting under each row, which read as heavier than the row itself and doubled the group's height. It is now a cell in the row's own grid, flush to the right. */ .cr-grid-3 { grid-template-columns: 2fr 1.4fr 1fr 44px; } .cr-grid-2 { grid-template-columns: 1fr 1fr 44px; } .cr-trash { width: 44px; height: 44px; /* WCAG 2.5.5 */ display: inline-flex; align-items: center; justify-content: center; margin-left: -2px; background: none; color: var(--text-muted); cursor: pointer; border: 2px solid var(--border-medium); border-radius: 0 var(--radius-md) var(--radius-md) 0; transition: color var(--transition-fast), border-color var(--transition-fast); } .cr-trash:hover { color: #ff6b62; border-color: #ff6b62; } .cr-trash:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255,107,98,.35); position: relative; z-index: 2; } /* The trash is the last cell, so the row's right corners belong to it. */ @media (max-width: 600px) { .cr-grid-3, .cr-grid-2 { grid-template-columns: 1fr; } .cr-trash { width: 100%; margin-left: 0; margin-top: -2px; border-radius: 0 0 var(--radius-md) var(--radius-md); } } /* --------------------------------------------------------------------------- Corners inside a joined group. The previous rules computed which corner to round from :nth-child, and got it wrong wherever a row had a different number of cells - adjacent cells each rounded the edge they shared, leaving a notch between them. Square is not a compromise here: a group whose cells share their borders has no interior corners to round, and guessing at the exterior ones from position is what produced the artefact. The group's outer edge stays crisp. --------------------------------------------------------------------------- */ .cr-grid .cr-field > input, .cr-grid .cr-field > textarea, .cr-grid .cr-field > select, .cr-row .cr-field > input, .cr-row .cr-field > textarea, .cr-row .cr-field > select { border-radius: 0 !important; } .cr-trash { border-radius: 0 !important; } @media (max-width: 600px) { .cr-trash { border-radius: 0 !important; } }