/* Kunder, as in the draft v13: the search and the two buttons on one line, the chips, one card with a row per customer, and the customer in a sheet that slides in. Built from reviews.css; only what is specific to this page lives here. */ #account .r-page.cu-page{max-width:1000px;margin:0 auto;padding:0 0 32px} /* The green people stand as far from «Kunder» as the house from «Hjem» and the cog from «Innstillinger» (12 px, 10 px on a phone). Here the icon is a part of the heading row, which already has that gap, so the icon itself has no margin. */ #account[data-view="customers"] #workspace-content>.pilot-page-heading .pilot-page-heading-row::before{margin-right:0} #account .cu-bar{display:flex;align-items:center;gap:10px;margin:0 0 14px} #account .cu-search{flex:1;min-width:0;position:relative;display:block} #account .cu-search .r-icon{position:absolute;left:12px;top:12px;width:16px;height:16px;color:var(--r-muted)} #account .cu-search-input{width:100%;height:var(--r-control);min-height:0;margin:0;padding:0 12px 0 36px;border:.5px solid var(--r-line-strong);border-radius:8px;background:#fff;color:var(--r-ink);font:15px/1.4 var(--r-font);box-shadow:none;appearance:none;-webkit-appearance:none} #account .cu-search-input:focus{outline:2px solid var(--r-ink);outline-offset:-1px} #account .cu-bar .r-btn{height:var(--r-control);min-height:0;padding:0 16px;font:500 15px/1 var(--r-font)} #account .cu-bar .r-btn .r-icon{width:16px;height:16px} #account .cu-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px} /* REV-94: customers whose invoice was sent, above the list, for the owner to approve. */ #account .cu-invoices{margin:0 0 18px} #account .cu-invoices-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 8px} #account .cu-invoices-head .r-meta{white-space:nowrap} #account .cu-list{margin:0;padding:0} #account .cu-list .cu-row{display:flex;align-items:center;gap:14px;width:100%;min-height:0;margin:0;padding:14px 18px;border:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;box-shadow:none} #account .cu-list .cu-row+.cu-row{border-top:.5px solid var(--r-line)} #account .cu-list .cu-row:hover{background:#fafaf8} #account .cu-list .cu-row .r-initials{width:36px;height:36px;font-size:13px} #account .cu-list .cu-row .r-who{flex:1;min-width:0} #account .cu-list .cu-row .r-who>b{display:block;font:500 15px/1.5 var(--r-font);letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #account .cu-list .cu-row .r-meta{display:block;margin:0;overflow:hidden;color:var(--r-muted);font-size:13px;text-overflow:ellipsis;white-space:nowrap} #account .cu-list .cu-chev{flex:none;width:18px;height:18px;color:var(--r-muted)} /* A customer known by the number alone: a person, not digits read as initials. */ #account .cu-list .r-initials .r-icon{width:18px;height:18px;color:var(--r-muted)} /* «Skrev anmeldelse» with the stars, in ink and without a dot, as reviews.css draws a review. */ #account .cu-list .r-status.review{gap:6px} /* REV-99: an imported customer with a recipient is ready to be asked. */ #account :is(.cu-list,.cu-source-contact) .r-status.ready{background:var(--r-green-3);color:var(--r-green-11)} #account :is(.cu-list,.cu-source-contact) .r-status.ready::before{background:var(--r-green-9)} #account .cu-source-contact .cu-source-auto{margin:0 0 8px} #account .cu-list .cu-source-contact-line{display:block;font-size:13px;line-height:1.5;color:var(--r-ink-2,#555);overflow-wrap:anywhere;white-space:normal} #account .cu-source-contact-form .cu-own-contact{justify-self:start;min-height:44px;white-space:normal;text-align:left} #account :is(.cu-list,.cu-review) .cu-stars .r-star{width:13px;height:13px} #account :is(.cu-list,.cu-review) .r-star.off{color:#dadce0} #account .cu-page .cu-upload-m{display:none} /* The grey line: the job gives way first, down to its first letters. A place too long for the rest of the line ends in «…», never cut off unseen. The date is never cut. */ #account .cu-list .cu-row .r-meta.cu-meta{display:flex;gap:0;min-width:0} #account .cu-list .cu-meta>span{white-space:nowrap} #account .cu-list .cu-meta :is(.cu-what,.cu-place){min-width:0;overflow:hidden;text-overflow:ellipsis} #account .cu-list .cu-meta .cu-what{flex:1 1 4em;max-width:max-content} #account .cu-list .cu-meta .cu-place{flex:0 1 auto} #account .cu-list .cu-meta .cu-at{flex:none} #account .cu-list .cu-meta>span+span::before{content:"·";margin:0 .3em} /* The status at the right; on a phone it stands under the name with the date beside it. */ #account .cu-list .cu-side{display:flex;align-items:center;flex:none;min-width:0} #account .cu-list .cu-at-m{display:none} /* A customer just added is lit for a moment. */ #account .cu-list .cu-row.fresh{animation:cu-fresh 2.4s ease-out} @keyframes cu-fresh{0%,40%{background:var(--r-soft)}100%{background:transparent}} /* The receipt is as wide as its words, up to the screen: «left:50%» alone would break «Per er lagt til uten SMS.» on a phone. */ #account .cu-toast{position:fixed;left:50%;bottom:28px;z-index:3000;width:max-content;max-width:calc(100vw - 32px);text-wrap:balance;transform:translate(-50%,20px);padding:11px 16px;border-radius:10px;background:var(--r-ink);color:#fff;font-size:14px;line-height:1.45;text-align:center;opacity:0;transition:.2s} #account .cu-toast.show{opacity:1;transform:translate(-50%,0)} /* A receipt with the next step: the words, then «Ring …» as a white link on the same line. A long name puts «Ring …» on its own line under the words, rather than breaking the sentence. */ #account .cu-toast.act{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;text-align:left} #account .cu-toast-go{display:inline-flex;flex:none;align-items:center;gap:6px;margin:-10px 0;padding:10px 0;color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;white-space:nowrap} #account .cu-toast-go .r-icon{width:15px;height:15px;stroke:#fff} /* The sheet slides in from the right; the scrim fades. */ #account .cu-sheet{transform:translateX(100%);visibility:hidden;transition:transform .2s ease,visibility 0s .2s} #account .cu-sheet.open{transform:none;visibility:visible;transition:transform .2s ease} #account .cu-scrim{opacity:0;transition:opacity .2s} #account .cu-scrim.open{opacity:1} #account .cu-sheet .r-sheet-head{padding:18px 20px 14px} #account .cu-sheet .r-sheet-head .r-meta{display:block;margin-top:2px;overflow:hidden;color:var(--r-muted);font-size:13px;text-overflow:ellipsis;white-space:nowrap} #account .cu-when{display:block;margin-top:2px;color:var(--r-muted);font-size:14px;white-space:nowrap} #account .cu-when:empty{display:none} #account .cu-state{display:flex;align-items:center;gap:8px;padding:10px 20px;border-bottom:.5px solid var(--r-line);color:var(--r-text);font-size:14px;line-height:1.45} #account .cu-state i{flex:none;width:7px;height:7px;border-radius:50%;background:#bdc1c6} /* A customer who waits: the same short grey line, with a red dot; «Ring …» below is the black button. */ #account .cu-state.call i{background:#d93025} #account .cu-chat{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:#fafaf9} #account .cu-day{display:flex;align-items:center;gap:10px;margin:10px 0 8px;color:var(--r-muted);font-size:13px;white-space:nowrap} #account .cu-day::before,#account .cu-day::after{content:"";flex:1;height:.5px;background:var(--r-line-strong)} #account .cu-msg{display:flex;flex-direction:column;max-width:82%;margin-bottom:10px} #account .cu-msg.in{align-self:flex-start} #account .cu-msg.out{align-self:flex-end;align-items:flex-end} #account .cu-msg.off{opacity:.55} #account .cu-msg-label{margin:0 4px 3px;color:var(--r-muted);font-size:13px;white-space:nowrap} #account .cu-bubble{padding:9px 13px;border-radius:16px;font-size:14px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-line} #account .cu-msg.in .cu-bubble{background:#fff;border:.5px solid var(--r-line-strong);border-bottom-left-radius:5px;color:var(--r-ink)} #account .cu-msg.out .cu-bubble{background:var(--r-ink);color:#fff;border-bottom-right-radius:5px} #account .cu-time{margin:3px 4px 0;color:var(--r-muted);font-size:13px;white-space:nowrap} #account .cu-older{align-self:center;margin:0 0 8px} #account .cu-composer{display:flex;flex-direction:column;gap:10px;padding:12px 16px 14px;border-top:.5px solid var(--r-line);background:#fff} /* The bar at the bottom of a saved customer and of «Legg til kunde»: the same as under a conversation. */ #account .cu-foot{flex:none;display:flex;flex-direction:column;gap:10px;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));border-top:.5px solid var(--r-line);background:#fff} #account .cu-composer-row{display:flex;align-items:flex-end;gap:8px} #account .cu-composer textarea{flex:1;min-width:0;min-height:42px;max-height:140px;margin:0;padding:10px 14px;border:.5px solid var(--r-line-strong);border-radius:21px;background:#fff;color:var(--r-ink);font:15px/1.4 var(--r-font);resize:none;box-shadow:none} #account .cu-composer textarea:focus{outline:2px solid var(--r-ink);outline-offset:-1px} /* Without SMS from the app: «Ring …» as the button, and «Saken er løst» beside it at the same height. No text between. */ #account .cu-actions{display:flex;gap:8px} #account .cu-actions .r-btn{flex:1 1 0;min-width:0;height:var(--r-control);min-height:0;padding:0 14px;font:500 15px/1 var(--r-font);text-decoration:none;white-space:nowrap} #account .cu-actions .r-btn span{overflow:hidden;text-overflow:ellipsis} #account .cu-actions .r-btn .r-icon{width:16px;height:16px} /* «Send forespørsel» needs more room than «Ikke spør»; on a phone the label stays whole. */ #account .cu-actions .cu-send-sms{flex-grow:1.5} /* A link in a message is written short and can be opened; it never breaks in the middle of a word. */ #account .cu-bubble .cu-url{display:inline-flex;align-items:center;gap:4px;color:inherit;font-weight:500;text-decoration:underline;text-underline-offset:3px;white-space:nowrap;vertical-align:bottom} #account .cu-bubble .cu-url .r-icon{width:14px;height:14px} #account .cu-event{margin:4px 0 12px} /* The review the customer wrote, under the conversation. */ #account .cu-review{display:flex;flex-direction:column;gap:4px;margin:10px 0 4px;padding:12px 14px;border:.5px solid var(--r-line-strong);border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.04)} #account .cu-review-top{display:flex;align-items:center;gap:8px} #account .cu-review-when{color:var(--r-muted);font-size:13px;white-space:nowrap} #account .cu-review b{font-weight:600;font-size:14px} #account .cu-review p{margin:0;color:var(--r-text);font-size:14px;line-height:1.45} #account .cu-review-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:8px} #account .cu-review-actions .r-btn.small{height:34px;min-height:0;padding:0 12px;font-size:14px} #account .r-sheet-body>.cu-review{margin-top:0} #account .r-sheet .cu-send{display:grid;place-items:center;width:42px;height:42px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:var(--r-ink);color:#fff;cursor:pointer;flex:none} #account .r-sheet .cu-send:disabled{opacity:.5;cursor:default} #account .r-sheet .cu-send .r-icon{width:18px;height:18px;stroke:#fff} #account .cu-solve{display:flex} #account .cu-solve .r-btn.small{height:34px;min-height:0;padding:0 12px;font-size:14px} #account .cu-confirm{display:flex;flex-direction:column;gap:8px;width:100%;padding:12px;border:.5px solid var(--r-line-strong);border-radius:12px} #account .cu-confirm b{font-weight:600} /* «Lukk saken?» (19.10, Ny-06): what closing means in one line, the grey line about the follow-up, the tick that asks the customer the next working day, and the way to the switch where it is off. */ #account .cu-confirm>span{display:flex;flex-direction:column;gap:2px;color:var(--r-text);font-size:14px;line-height:1.45} #account .cu-confirm .cu-confirm-note{color:var(--r-muted);font-size:13px} #account .cu-confirm-choice{display:flex;align-items:flex-start;gap:10px;margin:4px 0 0;color:var(--r-ink);font:500 14px/1.4 var(--r-font);cursor:pointer} #account .cu-confirm-choice input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--r-ink);flex:none;cursor:pointer} #account .cu-confirm-switch{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;min-height:0;margin:0;padding:0;border:0;background:none;box-shadow:none;color:var(--r-ink);font:500 14px/1.4 var(--r-font);cursor:pointer} #account .cu-confirm-switch .r-icon{width:16px;height:16px;color:var(--r-muted)} #account .cu-confirm-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px} /* «Dette kan dere gjøre med kunden i dag» (19.10, Ny-07/08): three rows with a coloured icon tile each, as the figures on Hjem. */ #account .cu-today{display:flex;flex-direction:column;gap:12px;margin:14px 0 0;padding:14px 16px;border:.5px solid var(--r-line);border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(16,24,40,.05),0 1px 3px rgba(16,24,40,.04)} #account .cu-today[hidden]{display:none} #account .cu-today>b{color:var(--r-ink);font:600 16px/1.4 var(--r-font);letter-spacing:-.2px} #account .cu-today-row{display:flex;align-items:flex-start;gap:12px;color:var(--r-ink);font-size:14px;line-height:1.45} #account .cu-today-row>div{display:flex;flex-direction:column;min-width:0} #account .cu-today-row small{color:var(--r-muted);font-size:13px} #account .cu-today-ic{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;flex:none} #account .cu-today-ic .r-icon{width:16px;height:16px} #account .cu-today-ic.green{background:var(--r-green-3);color:var(--r-green-11)} #account .cu-today-ic.violet{background:var(--r-violet-3);color:var(--r-violet-11)} #account .cu-today-ic.amber{background:var(--r-amber-3);color:var(--r-amber-11)} #account .cu-feedback,#account .cu-reason{margin:0;color:var(--r-text);font-size:14px;line-height:1.45} #account .cu-feedback{color:#b3261e} /* Ny kunde and the contact that has not been sent to: the form as in the draft, the message as it will look. */ #account .cu-form{display:block;margin:0} #account .cu-row2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px} #account .cu-form .cu-row2 .r-field{margin:0} #account .cu-form .r-field{margin:0 0 12px} #account .cu-form .r-field>span{margin-bottom:5px;color:var(--r-text);font-size:13px} #account .cu-form .r-field>span em{font-style:normal;color:var(--r-muted)} #account .cu-form .r-field :is(input,select){height:var(--r-control)} #account .cu-label{display:block;margin:4px 0 10px;color:var(--r-muted);font-size:13px;white-space:nowrap} /* The message as it will look in the conversation: an ink bubble to the right, no grey box inside the white sheet. */ #account .cu-sms{display:flex;flex-direction:column;gap:8px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none} #account .cu-sms .cu-bub{align-self:flex-end;max-width:88%;margin:0;padding:9px 12px;border:0;border-radius:14px;border-bottom-right-radius:4px;background:var(--r-ink);color:#fff;font-size:14px;line-height:1.45;overflow-wrap:anywhere;white-space:pre-line} #account .cu-sms .cu-bub:empty{display:none} #account .cu-sms .cu-msg-label{align-self:flex-end;margin:0 4px -4px;color:var(--r-muted);font-size:13px;white-space:nowrap} #account .cu-sms:has(.cu-bub:empty) .cu-msg-label{display:none} /* What is missing stands under its field in red; the field gets a red ring. */ #account .cu-form .cu-field-error{display:block;margin-top:5px;color:#b3261e;font-size:13px;line-height:1.45} #account .cu-form .cu-field-error[hidden]{display:none} /* The place's services from Google's list under «Hva ble gjort?», one tap each. */ #account .cu-form .r-field:has(+.cu-tips:not([hidden])){margin-bottom:8px} #account .cu-tips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px} #account .cu-tips[hidden]{display:none} #account .cu-tips .r-pill{flex:none;padding:5px 11px;font:13px/1.4 var(--r-font);white-space:nowrap} #account .cu-actions .r-btn:disabled{opacity:.45;cursor:default} #account .r-sheet-body .cu-feedback:not(:first-child){margin-top:12px} #account .cu-import .cu-contacts{padding:0} #account .r-field select[aria-invalid=true]{outline:2px solid #b3261e;outline-offset:-1px} @media (max-width:820px){ #account .r-page.cu-page{padding:0} #account .cu-bar{flex-wrap:wrap} #account .cu-search{flex-basis:100%} #account .cu-new{flex:1} /* The upload is a line under the list on a phone; the main button takes the whole width. */ #account .cu-bar .cu-upload{display:none} #account .cu-page .cu-upload-m{display:inline-flex;height:44px;margin:4px 0 0} /* The chips say the same words as on a computer (19.10, Ny-05) and go over two lines when they do not fit on one; nothing is said short, nothing scrolls out of sight. The services under «Hva ble gjort?» still scroll sideways. */ #account .cu-chips{flex-wrap:wrap;gap:8px} #account .cu-chips .r-pill{flex:none;padding:5px 10px;white-space:nowrap} #account .cu-tips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch} #account .cu-tips::-webkit-scrollbar{display:none} /* The receipt stands 16 px above the menu at the bottom, never on it. */ #account .cu-toast{bottom:calc(var(--bottom-nav,60px) + 16px + env(safe-area-inset-bottom))} #account .cu-list .cu-row{display:grid;grid-template-columns:36px minmax(0,1fr) 18px;column-gap:12px;row-gap:6px;padding:14px} #account .cu-list .cu-row .r-initials{grid-column:1;grid-row:1 / span 2;align-self:center} #account .cu-list .cu-row .r-who{grid-column:2;grid-row:1} /* One line: a date that has no room beside a long status drops out of sight rather than breaking onto a line of its own. */ #account .cu-list .cu-row .cu-side{grid-column:2;grid-row:2;justify-self:stretch;flex-wrap:wrap;gap:0 10px;height:22px;overflow:hidden} /* A date with no room beside the status stands in the grey line instead (placeDates in pilot-customers.js). After the rule above that hides it there, with the same weight. */ #account .cu-list .cu-chev{grid-column:3;grid-row:1 / span 2;align-self:center} #account .cu-row2{grid-template-columns:1fr 1fr} #account .cu-msg{max-width:88%} } /* The list and the import flow that pilot-customer-contacts.js renders: inside the «Last opp liste» drawer on Kunder, and on its own where the drawer page is not on. Built from the same parts. */ #account .cu-contacts{color:var(--r-ink);font:var(--r-fs-body)/1.5 var(--r-font)} #account .cu-contacts *{box-sizing:border-box} #account .cu-contacts .r-note{margin:0} #account .cu-contacts .cu-back{margin:0 0 14px;color:var(--r-ink)} #account .cu-contacts .cu-bar-actions{margin-left:auto} #account .cu-contacts .cu-flash{display:flex;align-items:center;gap:8px;margin:0 0 12px;color:var(--r-ink)} #account .cu-contacts .cu-flash .r-icon{color:var(--r-green)} #account .cu-contacts .cu-error{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 14px;color:#b3261e} #account .cu-contacts .cu-error p{margin:0} #account .cu-contacts .cu-count{display:block;margin:0 0 8px} #account .cu-contacts .cu-tr{display:grid;grid-template-columns:minmax(200px,1.3fr) minmax(160px,2fr) 96px 104px;gap:16px;align-items:center;padding:12px 18px;border-top:.5px solid var(--r-line)} #account .cu-contacts .cu-table.with-place .cu-tr{grid-template-columns:minmax(200px,1.3fr) minmax(160px,2fr) minmax(90px,.7fr) 96px 104px} #account .cu-contacts .cu-tr:first-child{border-top:0} #account .cu-contacts .cu-head{padding-top:10px;padding-bottom:10px} #account .cu-contacts .cu-th{color:var(--r-muted);font-size:var(--r-fs-meta);white-space:nowrap} #account .cu-contacts .cu-who{display:flex;align-items:center;gap:12px;min-width:0} #account .cu-contacts .cu-who .r-who>b{font:600 var(--r-fs-body)/1.4 var(--r-font);letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #account .cu-contacts .cu-phone{display:block;color:var(--r-muted);font-size:var(--r-fs-meta);font-variant-numeric:tabular-nums;white-space:nowrap} #account .cu-contacts .cu-note{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--r-text)} #account .cu-contacts .cu-muted{color:var(--r-muted)} #account .cu-contacts .cu-place{color:var(--r-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #account .cu-contacts .cu-date{color:var(--r-muted);font-size:var(--r-fs-meta);white-space:nowrap;font-variant-numeric:tabular-nums} #account .cu-contacts .cu-more{margin-top:14px} #account .cu-contacts .cu-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:40px 24px} #account .cu-contacts .cu-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--r-soft);color:var(--r-ink)} #account .cu-contacts .cu-empty h3{margin:8px 0 0;font:600 var(--r-fs-lead)/1.4 var(--r-font)} #account .cu-contacts .cu-empty p{max-width:420px} #account .cu-contacts .cu-empty .r-actions{margin-top:12px;justify-content:center} #account .cu-contacts .cu-new{display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:24px;align-items:start} #account .cu-contacts .cu-form{max-width:520px;margin:0} #account .cu-contacts .cu-optional{margin-left:8px;color:var(--r-muted);font-weight:400} #account .cu-contacts .cu-hint,#account .cu-contacts .cu-field-error{display:block;margin-top:5px;color:var(--r-muted);font-size:var(--r-fs-meta);line-height:1.45} #account .cu-contacts .cu-field-error{color:#b3261e} #account .cu-contacts .cu-preview{position:sticky;top:24px} #account .cu-contacts .cu-preview .cu-bubble{margin-top:10px;background:var(--r-soft);border-bottom-left-radius:5px;color:var(--r-ink)} #account .cu-contacts .cu-bubble.writing{opacity:.45} #account .cu-contacts .cu-preview-meta{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:12px 0 4px;color:var(--r-muted);font-size:var(--r-fs-meta)} #account .cu-contacts .cu-preview-meta .r-icon{width:14px;height:14px} #account .cu-contacts .cu-import-body{display:grid;gap:14px;max-width:720px} #account .cu-contacts .cu-drop{display:flex;flex-direction:column;align-items:center;gap:8px;padding:32px 24px;border:.5px dashed var(--r-line-strong);border-radius:var(--r-radius);background:var(--r-panel);text-align:center} #account .cu-contacts .cu-drop.over{border-color:var(--r-ink);background:var(--r-soft)} #account .cu-contacts .cu-drop strong{font-weight:600} #account .cu-contacts .cu-drop .r-btn{margin-top:8px} #account .cu-contacts .cu-import-help{display:grid;justify-items:start;gap:8px} #account .cu-contacts .cu-import-help .r-link{margin-top:0} /* How the file looks: the three headings and one row, always as columns, also in the narrow drawer. */ #account .cu-contacts .cu-table.cu-sample{width:100%} #account .cu-contacts .cu-table.cu-sample .cu-head{display:grid} /* The name and the number are always the same two words, so their columns fit them; the job of the place's trade gets the rest, so «Service på varmepumpe» is whole also at 390 px. */ #account .cu-contacts .cu-table.cu-sample .cu-tr{grid-template-columns:7.2em 6em minmax(0,1fr) 5.4em;gap:6px;padding:8px 12px;font-size:13px} #account .cu-contacts .cu-table.cu-sample :is(.cu-td,.cu-th){overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* On a phone the four columns share 390 px: tighter gaps, and the name, the number and the date keep their whole words. */ @media (max-width:520px){#account .cu-contacts .cu-table.cu-sample .cu-tr{grid-template-columns:6.85em 6.2em minmax(0,1fr) 5.3em;gap:2px;padding:8px 7px}} #account .cu-contacts .cu-table.cu-sample .cu-note{display:block;grid-column:auto;-webkit-line-clamp:unset} /* The date of the job (19.10, Ny-08): a fourth column in the sample and in the preview of a file that has it, and the line under the sample that says the date is optional. */ #account .cu-contacts .cu-table.cu-sample .cu-date{color:var(--r-text);font-size:13px;font-variant-numeric:tabular-nums} #account .cu-contacts .cu-sample-note{margin:-2px 0 0;color:var(--r-muted);font-size:13px;line-height:1.45} #account .cu-contacts .cu-mini.with-date .cu-tr{grid-template-columns:minmax(120px,1fr) 110px minmax(120px,1.4fr) 78px} #account .cu-contacts .cu-mini .cu-date{color:var(--r-text);white-space:nowrap;font-variant-numeric:tabular-nums} /* On a phone nothing is dragged: just the button, without the dashed frame. */ @media (hover:none),(max-width:820px){ #account .cu-contacts .cu-drop{padding:0;border:0;background:none} #account .cu-contacts .cu-drop :is(.cu-mark,strong,.cu-drag){display:none} #account .cu-contacts .cu-drop .r-btn{width:100%;margin:0} } #account .cu-contacts .cu-file{display:flex;align-items:center;gap:8px;min-width:0} #account .cu-contacts .cu-file strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #account .cu-contacts .cu-file .cu-muted{white-space:nowrap} #account .cu-contacts .cu-summary{display:grid;gap:6px;margin:0;padding:0;list-style:none} #account .cu-contacts .cu-sum{display:flex;align-items:center;gap:8px} #account .cu-contacts .cu-sum.ok{color:var(--r-green);font-weight:600} #account .cu-contacts .cu-sum.muted,#account .cu-contacts .cu-sum.none{color:var(--r-muted)} #account .cu-contacts .cu-sum.warn{color:#b3261e} #account .cu-contacts .cu-mini .cu-tr{grid-template-columns:minmax(140px,1fr) 120px minmax(160px,1.6fr);padding:10px 18px} #account .cu-contacts .cu-skipped ul{margin:8px 0 0;padding-left:18px;color:var(--r-text);font-size:var(--r-fs-ui)} #account .cu-contacts .cu-skipped summary .r-icon{transition:transform .15s} #account .cu-contacts .cu-skipped[open] summary .r-icon{transform:rotate(90deg)} @media (max-width:860px){ #account .cu-contacts .cu-new{grid-template-columns:1fr} #account .cu-contacts .cu-preview{position:static} } #account .cu-contacts .cu-table{container-type:inline-size} /* Compact rows when the card itself is too narrow for its columns, measured on the card and not on the viewport: four columns need 644 px, five (with the place) 750 px, the import preview 488 px. The «Last opp liste» drawer is 460 px wide, so the list is compact there on every screen; on its own page it keeps the columns down to a 700 px window. */ @container (max-width:659px){ #account .cu-contacts .cu-table:not(.cu-mini) .cu-head{display:none} #account .cu-contacts .cu-table:not(.cu-mini) .cu-tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who status" "work work" "meta meta";row-gap:6px;padding:12px 16px} #account .cu-contacts .cu-table:not(.cu-mini) .cu-who{grid-area:who} #account .cu-contacts .cu-table:not(.cu-mini) .cu-status{grid-area:status;align-self:start} #account .cu-contacts .cu-table:not(.cu-mini) .cu-work{grid-area:work;padding-left:48px} #account .cu-contacts .cu-table:not(.cu-mini) .cu-work .cu-muted{display:none} #account .cu-contacts .cu-table:not(.cu-mini) .cu-date{grid-area:meta;padding-left:48px} } @container (max-width:759px){ #account .cu-contacts .cu-table.with-place .cu-head{display:none} #account .cu-contacts .cu-table.with-place .cu-tr{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"who status" "work work" "place place" "meta meta";row-gap:6px;padding:12px 16px} #account .cu-contacts .cu-table.with-place .cu-who{grid-area:who} #account .cu-contacts .cu-table.with-place .cu-status{grid-area:status;align-self:start} #account .cu-contacts .cu-table.with-place .cu-work{grid-area:work;padding-left:48px} #account .cu-contacts .cu-table.with-place .cu-work .cu-muted{display:none} #account .cu-contacts .cu-table.with-place .cu-place{grid-area:place;padding-left:48px;font-size:var(--r-fs-meta)} #account .cu-contacts .cu-table.with-place .cu-date{grid-area:meta;padding-left:48px} } @container (max-width:519px){ #account .cu-contacts .cu-mini .cu-head{display:none} #account .cu-contacts .cu-mini .cu-tr{grid-template-columns:minmax(0,1fr) auto;row-gap:2px;padding:10px 16px} #account .cu-contacts .cu-mini .cu-note{grid-column:1 / -1} } @media (max-width:640px){ #account .cu-contacts .cu-bar-actions{width:100%;margin-left:0} #account .cu-contacts .cu-bar-actions .r-btn{flex:1 1 0} #account .cu-contacts .cu-empty .r-actions{flex-direction:column;width:100%} } /* Every sheet closes from the top right, also where the cross comes first in the markup; inside a sheet the cross is the only way out, so the «Kunder» back link of the full page is not shown. */ #account .r-sheet-head>.r-iconbtn:first-child{order:3} #account .r-sheet .cu-back{display:none} #account .cu-source-detail,#account .cu-source-history{margin-top:24px;overflow-wrap:anywhere} #account .cu-source-detail h3,#account .cu-source-history h3{font-size:15px;line-height:1.4;margin:0 0 8px} #account .cu-source-detail p,#account .cu-source-event p{margin:6px 0} #account .cu-source-event{padding:16px 0;border-bottom:1px solid var(--r-line)} #account .cu-source-history>button{margin-top:12px} #account .cu-source-contact{margin-top:24px;overflow-wrap:anywhere}#account .cu-source-contact h3{font-size:15px;margin:0 0 8px}#account .cu-source-contact-form{display:grid;gap:12px;margin-top:16px}#account .cu-source-contact-form p{margin:0}#account .cu-source-ack{display:flex;align-items:flex-start;gap:10px;font-size:14px;line-height:1.5}#account .cu-source-ack input{flex:none;width:18px;height:18px;margin:2px 0 0} #account :is(.cu-source-contact,.cu-source-detail,.cu-source-history,.cu-source-jobs) .r-meta{white-space:normal;overflow:visible;text-overflow:clip} #account #workspace-content .cu-sheet:has(.cu-source-contact) .r-sheet-head h2{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere} /* The job review is part of the customer's existing drawer. */ #account #workspace-content .cu-source-jobs{border-top:1px solid var(--r-line,#e6e6e6);padding-top:20px;margin-top:20px;min-width:0} #account #workspace-content .cu-source-job-form,#account #workspace-content .cu-job-review{display:grid;gap:14px;min-width:0} #account #workspace-content .cu-source-jobs h4{margin:0;font-size:14px} #account #workspace-content .cu-source-jobs p{overflow-wrap:anywhere} #account #workspace-content .cu-job-preview{display:grid;gap:10px;padding:14px;background:var(--r-grey-soft,#f7f7f7);border-radius:10px;min-width:0} #account #workspace-content .cu-job-history{margin-top:16px} #account #workspace-content .cu-source-jobs input[type=date]{min-width:0;width:100%;box-sizing:border-box} #account #workspace-content .cu-job-review>p,#account #workspace-content .cu-job-preview p{margin:0} #account #workspace-content .cu-source-jobs .cu-confirm-choice{box-sizing:border-box;padding:10px 0;min-height:44px} /* REV-111: e-mail is an independent, explicitly confirmed channel. */ .cu-email{max-width:100%;overflow-wrap:anywhere}.cu-email .r-field{display:block;margin:16px 0}.cu-email .r-field>span{display:block;margin-bottom:6px} .cu-email .r-field :is(input,select){width:100%;box-sizing:border-box;min-height:44px;font:inherit;padding:10px;border:1px solid var(--rv-line-strong,#ccc);border-radius:8px} .cu-email-preview{padding:16px;border:1px solid var(--rv-line-strong,#ccc);border-radius:10px;margin:20px 0}.cu-email-preview p{white-space:pre-wrap} .cu-email-confirm{display:flex;gap:12px;align-items:center;min-height:48px;margin:20px 0;cursor:pointer}.cu-email-confirm input{appearance:auto;flex:none;width:24px;height:24px;min-height:24px;padding:0;margin:0} .cu-email button{min-height:44px}.cu-email .cu-feedback{margin:16px 0} #account #workspace-content .cu-email .r-meta{white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip} /* V3 Kunder 03.11 (KunderMobil, KunderDesktop, KundekortMobil, KundeSamtaleDesktop, InnboksMobil): the heading's buttons, five chips with counts, a table on a computer, the card beside the list, the conversation on the whole page. Statuses are a strong dot and neutral text. The selectors carry «.cu-page» so they win over the shared sheets that load after this one. */ body.customer-app #account .r-page.cu-page{position:relative;min-width:0;max-width:1000px;margin:0 auto;padding:0 0 32px} body.customer-app #account .cu-page .cu-main{display:flex;flex-direction:column;gap:16px;min-width:0} body.customer-app #account .cu-page .cu-main>*{margin:0} body.customer-app #account .cu-page .cu-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* «Last opp liste» and «Ny kunde» on the line of the heading above the page. */ body.customer-app #account .cu-page .cu-head-actions{position:absolute;top:-66px;right:0;display:flex;gap:10px} body.customer-app #account .cu-page .cu-head-actions .r-btn{height:44px;min-height:0;padding:0 16px;border-radius:10px;font:500 15px/1 var(--r-font);white-space:nowrap} body.customer-app #account .cu-page .cu-head-actions .r-icon{width:18px;height:18px} body.customer-app #account .cu-page .cu-bar{display:flex;align-items:center;gap:12px;min-width:0;margin:0} body.customer-app #account .cu-page .cu-search{flex:0 1 300px;margin-left:auto;display:flex;align-items:center;gap:10px;height:40px;padding:0 12px;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px #c3c6cd} body.customer-app #account .cu-page .cu-search:focus-within{box-shadow:inset 0 0 0 1px var(--rv-focus),0 0 0 3px #fff,0 0 0 5px var(--rv-focus)} body.customer-app #account .cu-page .cu-search .r-icon{position:static;flex:none;width:18px;height:18px;color:var(--rv-muted)} body.customer-app #account .cu-page .cu-search .cu-search-input{flex:1;min-width:0;height:38px;padding:0;border:0;outline:0;background:none;box-shadow:none;font:400 15px/1 var(--r-font);color:var(--rv-ink)} body.customer-app #account .cu-page .cu-search .cu-search-input::-webkit-search-cancel-button{display:none} body.customer-app #account .cu-page .cu-search-clear{min-height:0;display:grid;place-items:center;flex:none;width:28px;height:28px;margin:0 -6px 0 0;padding:0;border:0;border-radius:6px;background:none;color:var(--rv-muted);cursor:pointer} body.customer-app #account .cu-page .cu-search-clear .r-icon{width:16px;height:16px} body.customer-app #account .cu-page .cu-chips{display:flex;flex-wrap:nowrap;gap:8px;margin:0;min-width:0} body.customer-app #account .cu-page .cu-chips .r-pill{display:inline-flex;flex:none;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px #dcdde1;color:var(--rv-text);font:500 14px/1 var(--r-font);white-space:nowrap} body.customer-app #account .cu-page .cu-chips .r-pill .c{color:var(--rv-muted);font-weight:500} body.customer-app #account .cu-page .cu-chips .r-pill[aria-pressed=true]{background:var(--rv-ink);box-shadow:none;color:#fff} body.customer-app #account .cu-page .cu-chips .r-pill[aria-pressed=true] .c{color:rgba(255,255,255,.72)} /* The list: a white card with a header row on a computer. */ body.customer-app #account .cu-page .cu-list{display:flex;flex-direction:column;margin:0;padding:0;border:0;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} body.customer-app #account .cu-page .cu-list .cu-th{display:grid;grid-template-columns:minmax(0,1fr) 140px 150px 18px;gap:14px;align-items:center;min-height:40px;padding:0 16px;background:#f6f5f1;color:var(--rv-muted);font:600 13px/18px var(--r-font);letter-spacing:.4px;text-transform:uppercase} body.customer-app #account .cu-page .cu-list .cu-row{display:grid;grid-template-columns:minmax(0,1fr) 140px 150px 18px;gap:14px;align-items:center;width:100%;min-height:66px;margin:0;padding:12px 16px;border:0;border-top:.5px solid var(--rv-line);border-radius:0;background:#fff;color:inherit;font:inherit;text-align:left;cursor:pointer;box-shadow:none} body.customer-app #account .cu-page .cu-list>.cu-row:first-child,body.customer-app #account .cu-page .cu-list .cu-item:first-child>.cu-row{border-top:0} body.customer-app #account .cu-page .cu-list .cu-row:hover{background:#f6f5f1} body.customer-app #account .cu-page .cu-list .cu-row[aria-current=true]{background:#f6f5f1;box-shadow:inset 3px 0 0 var(--rv-ink)} body.customer-app #account .cu-page .cu-list .cu-row:focus-visible{outline:2px solid var(--rv-focus);outline-offset:-2px} /* Name cell: the initials and the two lines, side by side, in the first column. */ body.customer-app #account .cu-page .cu-list .cu-row>.r-initials{grid-column:1;grid-row:1;align-self:center} body.customer-app #account .cu-page .cu-list .cu-row>.r-who{grid-column:1;grid-row:1;min-width:0;padding-left:50px} body.customer-app #account .cu-page .cu-list .cu-row>.cu-src{grid-column:2;grid-row:1} body.customer-app #account .cu-page .cu-list .cu-row>.cu-side{grid-column:3;grid-row:1;min-width:0} body.customer-app #account .cu-page .cu-list .cu-row>.cu-chev{grid-column:4;grid-row:1;width:18px;height:18px;color:var(--rv-muted)} body.customer-app #account .cu-page .r-initials{width:38px;height:38px;border-radius:50%;background:#eef0f2;color:var(--rv-text);font:600 14px/1 var(--r-font);box-shadow:inset 0 0 0 .5px rgba(139,141,152,.4)} body.customer-app #account .cu-page .r-initials.lg{width:52px;height:52px;font-size:17px} body.customer-app #account .cu-page .r-initials .r-icon{width:19px;height:19px;color:var(--rv-text)} body.customer-app #account .cu-page .cu-list .cu-row .r-who>b{display:block;overflow:hidden;font:500 16px/22px var(--r-font);letter-spacing:0;color:var(--rv-ink);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-list .cu-row .r-who>.cu-meta{display:block;margin:2px 0 0;overflow:hidden;font:400 13px/18px var(--r-font);color:var(--rv-muted);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-src{display:flex;align-items:center;gap:8px;min-width:0;font:400 14px/20px var(--r-font);color:var(--rv-text);white-space:nowrap} body.customer-app #account .cu-page .cu-src>span{overflow:hidden;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-src .cu-src-logo{flex:none;width:18px;height:18px;border-radius:4px;object-fit:contain} body.customer-app #account .cu-page .cu-src .r-icon{flex:none;width:16px;height:16px;color:var(--rv-muted)} /* Status: a strong dot and a neutral word (wait yellow, choose blue, good green, call red, review green). */ body.customer-app #account .cu-page .r-status.wait::before{background:var(--rv-yellow)} body.customer-app #account .cu-page .r-status.choose::before{background:var(--rv-blue)} body.customer-app #account .cu-page :is(.r-status.good,.r-status.review)::before{background:var(--rv-green)} body.customer-app #account .cu-page .r-status.review{gap:7px} body.customer-app #account .cu-page .cu-note{margin:0;color:var(--rv-muted);font:400 13px/18px var(--r-font)} /* Groups under «Godkjenn først»: a small heading with the count, and the two buttons under each customer. */ body.customer-app #account .cu-page .cu-group{display:flex;justify-content:space-between;margin:4px 0 -8px;color:var(--rv-muted);font:600 12px/16px var(--r-font);letter-spacing:.4px;text-transform:uppercase} body.customer-app #account .cu-page .cu-item+.cu-item{border-top:.5px solid var(--rv-line)} body.customer-app #account .cu-page .cu-item>.cu-row{border-top:0} body.customer-app #account .cu-page .cu-approve{display:flex;justify-content:flex-end;gap:10px;padding:0 16px 14px 66px} body.customer-app #account .cu-page .cu-approve .r-btn{flex:0 1 140px;height:36px;min-height:0;padding:0 12px;border-radius:8px;font:500 14px/1 var(--r-font);justify-content:center} body.customer-app #account .cu-page .cu-approve .r-icon{width:16px;height:16px} body.customer-app #account .cu-page .cu-item>.cu-feedback{margin:0;padding:0 16px 12px 66px} body.customer-app #account .cu-page .cu-approve-all{align-self:flex-end;height:44px;min-height:0;padding:0 18px;border-radius:10px;font:500 15px/1 var(--r-font)} /* Empty, loading and error: one white card, a coloured tile, a title, a line and the way on. */ body.customer-app #account .cu-page .cu-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:32px 24px;border:0;border-radius:12px;background:#fff;text-align:center;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} body.customer-app #account .cu-page .cu-empty>b{margin:0;color:var(--rv-ink);font:600 17px/24px var(--r-font)} body.customer-app #account .cu-page .cu-empty>p{max-width:420px;margin:0;color:var(--rv-text);font:400 14px/21px var(--r-font)} body.customer-app #account .cu-page .cu-empty-actions{display:flex;flex-direction:column;gap:10px;width:min(320px,100%)} body.customer-app #account .cu-page .cu-empty-actions .r-btn{width:100%;height:44px;min-height:0;justify-content:center} body.customer-app #account .cu-page .cu-empty-actions .r-btn:only-child{width:auto;align-self:center} body.customer-app #account .cu-page .cu-tile{display:grid;flex:none;place-items:center;width:44px;height:44px;border-radius:12px} body.customer-app #account .cu-page .cu-tile .r-icon{width:20px;height:20px} body.customer-app #account .cu-page .cu-tile.sm{width:32px;height:32px;border-radius:8px} body.customer-app #account .cu-page .cu-tile.sm .r-icon{width:16px;height:16px} body.customer-app #account .cu-page .cu-tile.green{background:#e6f6eb;color:#218358} body.customer-app #account .cu-page .cu-tile.blue{background:#e6f4fe;color:#0d74ce} body.customer-app #account .cu-page .cu-tile.red{background:#feebec;color:#ce2c31} body.customer-app #account .cu-page .cu-tile.amber{background:#fff7c2;color:#ab6400} body.customer-app #account .cu-page .cu-tile.grey{background:#f0f0f3;color:#60646c} body.customer-app #account .cu-page .cu-skel{display:block;height:12px;border-radius:6px;background:#ecebe7} body.customer-app #account .cu-page .cu-skel-chips .cu-skel{width:84px;height:34px;border-radius:17px} body.customer-app #account .cu-page .cu-skel-row{display:grid;grid-template-columns:38px minmax(0,1fr) 72px;align-items:center;gap:14px;min-height:66px;padding:12px 16px;border-top:.5px solid var(--rv-line)} body.customer-app #account .cu-page .cu-skel-row:first-of-type{border-top:0} body.customer-app #account .cu-page .cu-skel.round{width:38px;height:38px;border-radius:50%} body.customer-app #account .cu-page .cu-skel-lines{display:flex;flex-direction:column;gap:8px} body.customer-app #account .cu-page .cu-skel-lines .cu-skel{width:46%} body.customer-app #account .cu-page .cu-skel-lines .cu-skel.thin{width:30%;height:10px} body.customer-app #account .cu-page .cu-skel.short{width:72px} /* The receipt: white, with a green tick. */ body.customer-app #account .cu-page .cu-toast{top:24px;bottom:auto;transform:translate(-50%,-12px);border-radius:10px;box-shadow:0 0 0 .5px var(--rv-line),0 4px 14px rgba(16,24,40,.08);font:500 14px/20px var(--r-font)} body.customer-app #account .cu-page .cu-toast.show{transform:translate(-50%,0)} body.customer-app #account .cu-page .cu-toast .cu-toast-icon{stroke:#218358} /* Sheets. The top: «‹ Kunder» on a phone, the title, and the close button on a computer. */ body.customer-app #account .cu-page .cu-sheet .r-sheet-head{display:flex;align-items:center;gap:10px;padding:20px 24px;border-bottom:.5px solid var(--rv-line);background:#fff} body.customer-app #account .cu-page .cu-sheet .r-sheet-head .cu-head-text{flex:1;min-width:0} body.customer-app #account #workspace-content .cu-page .cu-sheet .r-sheet-head h2{margin:0;font:600 20px/26px var(--r-font);letter-spacing:-.3px;color:var(--rv-ink)} body.customer-app #account .cu-page .cu-sheet .cu-back{display:none;align-items:center;gap:4px;flex:none;height:44px;margin:0 0 0 -8px;padding:0 8px;border:0;background:none;color:var(--rv-ink);font:500 15px/1 var(--r-font);white-space:nowrap;cursor:pointer} body.customer-app #account .cu-page .cu-sheet .cu-back .r-icon{width:20px;height:20px;stroke-width:2} body.customer-app #account .cu-page .cu-sheet .r-iconbtn{flex:none} /* The card: one white box with the person, three facts and the two buttons; the history under it. */ body.customer-app #account .cu-page .cu-sheet .cu-card{display:flex;flex-direction:column;gap:16px;padding:20px 24px;background:#fff} body.customer-app #account .cu-page .cu-cardbox{display:flex;flex-direction:column;gap:14px;margin:0} body.customer-app #account .cu-page .cu-card-top{display:flex;align-items:center;gap:14px;min-width:0} body.customer-app #account .cu-page .cu-card-name{display:flex;flex-direction:column;gap:2px;min-width:0} body.customer-app #account .cu-page .cu-card-name h2{margin:0;overflow:hidden;font:600 20px/26px var(--r-font);letter-spacing:-.3px;color:var(--rv-ink);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-card-name .r-meta{color:var(--rv-muted);font:400 13px/18px var(--r-font);white-space:nowrap} body.customer-app #account .cu-page .cu-quote{margin:0;padding:12px 14px;border-radius:10px;background:#f6f5f1;color:var(--rv-ink);font:400 15px/22px var(--r-font)} body.customer-app #account .cu-page .cu-card-facts{margin:0;padding:0;border:0;border-radius:0} body.customer-app #account .cu-page .cu-card-fact{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0;border:0;border-top:.5px solid var(--rv-line);font:400 14px/20px var(--r-font);white-space:nowrap} body.customer-app #account .cu-page .cu-card-fact:first-child{border-top:.5px solid var(--rv-line)} body.customer-app #account .cu-page .cu-card-fact dt{color:var(--rv-muted)} body.customer-app #account .cu-page .cu-card-fact dd{display:inline-flex;align-items:center;gap:8px;min-width:0;margin:0;overflow:hidden;color:var(--rv-ink);font-weight:500;text-align:right;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-card-fact dd .cu-src{font-weight:500;color:var(--rv-ink)} body.customer-app #account .cu-page .cu-card-actions{display:flex;gap:12px;margin:0} body.customer-app #account .cu-page .cu-card-actions>.r-btn{flex:1 1 0;min-width:0;height:44px;min-height:0;padding:0 14px;border-radius:10px;justify-content:center;font:500 15px/1 var(--r-font);text-decoration:none;white-space:nowrap} body.customer-app #account .cu-page .cu-card-actions .r-icon{width:18px;height:18px} body.customer-app #account .cu-page .cu-card-note{margin:-4px 0 0;color:var(--rv-muted);font:400 13px/18px var(--r-font)} body.customer-app #account .cu-page .cu-card-history{margin:0;padding-top:16px;border-top:.5px solid var(--rv-line)} body.customer-app #account .cu-page .cu-card-history-head{display:flex;justify-content:space-between;align-items:center;margin:0 0 14px} body.customer-app #account .cu-page .cu-card-history-head h3,body.customer-app #account .cu-page .cu-card-history-head .r-meta{margin:0;color:var(--rv-muted);font:600 13px/18px var(--r-font);letter-spacing:.4px;text-transform:uppercase} body.customer-app #account .cu-page .cu-card-timeline{display:flex;flex-direction:column;gap:16px;margin:0;padding:0;border:0;border-radius:0;list-style:none;overflow:visible} body.customer-app #account .cu-page .cu-card-event{position:relative;display:flex;gap:12px;margin:0;padding:0;border:0} body.customer-app #account .cu-page .cu-card-event:not(:last-child)::after{content:"";position:absolute;top:38px;bottom:-14px;left:15.5px;width:1px;background:var(--rv-line-strong)} body.customer-app #account .cu-page .cu-card-event-body{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0;padding-top:6px} body.customer-app #account .cu-page .cu-card-event-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:nowrap} body.customer-app #account .cu-page .cu-card-event-head b{overflow:hidden;font:500 15px/20px var(--r-font);color:var(--rv-ink);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-card-event time{flex:none;color:var(--rv-muted);font:400 13px/18px var(--r-font);white-space:nowrap} body.customer-app #account .cu-page .cu-card-event p{margin:0;color:var(--rv-muted);font:400 13px/18px var(--r-font);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:normal} body.customer-app #account .cu-page .cu-sheet .cu-sms{margin:0} /* The conversation: the strip with the status, the messages, the field at the bottom. */ body.customer-app #account .cu-page .cu-state{display:flex;align-items:center;gap:8px;min-height:52px;padding:8px 16px 8px 20px;border-bottom:.5px solid var(--rv-line);background:#fff;font:500 14px/20px var(--r-font);color:var(--rv-text);white-space:nowrap} body.customer-app #account .cu-page .cu-state i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--rv-grey)} body.customer-app #account .cu-page .cu-state.call i{background:var(--rv-red)} body.customer-app #account .cu-page .cu-state.call>b{color:var(--rv-red-text)} body.customer-app #account .cu-page .cu-state.wait i{background:var(--rv-yellow)} body.customer-app #account .cu-page .cu-state.choose i{background:var(--rv-blue)} body.customer-app #account .cu-page :is(.cu-state.good,.cu-state.review) i{background:var(--rv-green)} body.customer-app #account .cu-page .cu-state>b{font-weight:500;color:var(--rv-ink)} body.customer-app #account .cu-page .cu-state-side{margin-left:auto;overflow:hidden;color:var(--rv-muted);font-weight:400;font-size:13px;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-state .cu-solved{margin-left:auto;height:36px;min-height:0;padding:0 12px;border-radius:8px;font:500 14px/1 var(--r-font)} body.customer-app #account .cu-page .cu-state .cu-solved .r-icon{width:16px;height:16px} body.customer-app #account .cu-page .cu-conv{display:flex;flex:1;min-height:0;flex-direction:column} body.customer-app #account .cu-page .cu-thread{display:flex;flex:1;flex-direction:column;min-height:0} body.customer-app #account .cu-page .cu-thread-head,body.customer-app #account .cu-page .cu-conv-side{display:none} body.customer-app #account .cu-page .cu-sheet .cu-chat{flex:1;min-height:0;overflow:auto;padding:16px;background:var(--rv-canvas)} body.customer-app #account .cu-page .cu-sheet .cu-chat.cu-loading{display:flex;flex-direction:column;justify-content:flex-end;gap:12px} body.customer-app #account .cu-page .cu-skel-bubble{width:62%;height:44px;border-radius:14px} body.customer-app #account .cu-page .cu-skel-bubble.out{align-self:flex-end} body.customer-app #account .cu-page .cu-msg-label{color:var(--rv-muted);font-size:13px} body.customer-app #account .cu-page .cu-time{font-size:12px} body.customer-app #account .cu-page .cu-day{font:500 12px/16px var(--r-font)} body.customer-app #account .cu-page .cu-composer{flex:none;padding:10px 12px calc(12px + env(safe-area-inset-bottom,0px));border-top:.5px solid var(--rv-line);background:#fff} body.customer-app #account .cu-page .cu-composer textarea{min-height:48px;padding:13px 14px;border:0;border-radius:10px;box-shadow:inset 0 0 0 1px #c3c6cd;font:400 15px/22px var(--r-font)} body.customer-app #account .cu-page .r-sheet .cu-send{width:48px;height:48px;border-radius:10px;gap:8px} body.customer-app #account .cu-page .r-sheet .cu-send .cu-send-label{display:none;font:500 15px/1 var(--r-font);color:#fff} body.customer-app #account .cu-page .cu-composer .cu-actions .r-btn{height:44px} /* «Er saken løst?»: a sheet from the bottom over the conversation. */ body.customer-app #account .cu-page .cu-confirm-layer{position:absolute;inset:0;z-index:5;display:flex;align-items:flex-end;background:rgba(16,24,40,.32)} body.customer-app #account .cu-page .cu-confirm-layer .cu-confirm{gap:12px;width:100%;padding:24px 20px calc(20px + env(safe-area-inset-bottom,0px));border:0;border-radius:16px 16px 0 0;background:#fff;box-shadow:0 -8px 30px rgba(16,24,40,.12)} body.customer-app #account .cu-page .cu-confirm-layer .cu-confirm>b{font:600 18px/24px var(--r-font)} body.customer-app #account .cu-page .cu-confirm-layer .cu-confirm-actions{flex-direction:column;gap:10px;margin-top:8px} body.customer-app #account .cu-page .cu-confirm-layer .cu-confirm-actions .r-btn{width:100%;height:48px;min-height:0;justify-content:center;font:500 15px/1 var(--r-font)} body.customer-app #account .cu-page .cu-confirm-layer .cu-confirm-actions .r-icon{width:18px;height:18px} /* The note under a conversation on a computer. */ body.customer-app #account .cu-page .cu-notes{display:flex;flex-direction:column;gap:12px} body.customer-app #account .cu-page .cu-notes-head{display:flex;align-items:center;gap:12px} body.customer-app #account .cu-page .cu-notes-head>div{display:flex;flex-direction:column;gap:2px} body.customer-app #account .cu-page .cu-notes-head b{font:500 16px/22px var(--r-font);color:var(--rv-ink)} body.customer-app #account .cu-page .cu-notes-head .r-meta{font:400 13px/18px var(--r-font);color:var(--rv-muted)} body.customer-app #account .cu-page .cu-note-item{padding:10px 12px;border-radius:10px;background:#f6f5f1} body.customer-app #account .cu-page .cu-note-item p{margin:0 0 2px;color:var(--rv-ink);font:400 14px/20px var(--r-font);white-space:pre-wrap} body.customer-app #account .cu-page .cu-note-add{align-self:flex-start;height:40px;min-height:0;padding:0 14px;border-radius:8px;font:500 15px/1 var(--r-font)} body.customer-app #account .cu-page .cu-note-text{width:100%;min-height:96px;padding:12px 14px;border:0;border-radius:10px;box-shadow:inset 0 0 0 1px #c3c6cd;font:400 15px/22px var(--r-font);resize:vertical} /* «Ny kunde»: the fields as in the design, the mobile with +47 in front. */ body.customer-app #account .cu-page .cu-add{padding:20px 24px} body.customer-app #account .cu-page .cu-add .cu-form{display:flex;flex-direction:column;gap:18px} body.customer-app #account .cu-page .cu-add .r-field{display:flex;flex-direction:column;gap:8px;margin:0} body.customer-app #account .cu-page .cu-add .r-field>span{color:var(--rv-ink);font:500 14px/20px var(--r-font)} body.customer-app #account .cu-page .cu-add .r-field>span em{margin-left:6px;color:var(--rv-muted);font-style:normal;font-weight:400} body.customer-app #account .cu-page .cu-add :is(input,textarea,select){width:100%;min-height:48px;margin:0;padding:0 14px;border:0;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px #c3c6cd;color:var(--rv-ink);font:400 16px/22px var(--r-font)} body.customer-app #account .cu-page .cu-add select{appearance:auto;padding-right:10px} body.customer-app #account .cu-page .cu-add textarea{min-height:104px;padding:12px 14px;resize:vertical} body.customer-app #account .cu-page .cu-add :is(input,textarea,select):focus{outline:0;box-shadow:inset 0 0 0 1px var(--rv-focus),0 0 0 3px #fff,0 0 0 5px var(--rv-focus)} body.customer-app #account .cu-page .cu-add [aria-invalid=true]{box-shadow:inset 0 0 0 1.5px var(--rv-red)} body.customer-app #account .cu-page .cu-prefixed{display:flex;align-items:center;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px #c3c6cd} body.customer-app #account .cu-page .cu-prefixed:focus-within{box-shadow:inset 0 0 0 1px var(--rv-focus),0 0 0 3px #fff,0 0 0 5px var(--rv-focus)} body.customer-app #account .cu-page .cu-prefixed:has([aria-invalid=true]){box-shadow:inset 0 0 0 1.5px var(--rv-red)} body.customer-app #account .cu-page .cu-prefixed .cu-prefix{flex:none;padding:0 10px 0 14px;border-right:.5px solid var(--rv-line);color:var(--rv-muted);font:400 16px/22px var(--r-font)} body.customer-app #account .cu-page .cu-add .cu-prefixed input{background:transparent;box-shadow:none} body.customer-app #account .cu-page .cu-add .cu-prefixed input:focus{box-shadow:none} body.customer-app #account .cu-page .cu-add .cu-help,body.customer-app #account .cu-page .cu-add-note{margin:0;color:var(--rv-muted);font:400 13px/18px var(--r-font)} body.customer-app #account .cu-page .cu-field-error{display:flex;align-items:center;gap:6px;color:var(--rv-red-text);font:400 13px/18px var(--r-font)} body.customer-app #account .cu-page .cu-field-error[hidden]{display:none} body.customer-app #account .cu-page .cu-field-error .r-icon{flex:none;width:16px;height:16px} body.customer-app #account .cu-page .cu-ask .r-sheet-body p{margin:0;color:var(--rv-text);font:400 15px/22px var(--r-font)} body.customer-app #account .cu-page .cu-actions.cu-stack{flex-direction:column} /* A computer, 1100 px and wider: the card beside the list, the conversation over the whole page. */ @media (min-width:1100px){ body.customer-app #account .r-page.cu-page.cu-split{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start} body.customer-app #account .cu-page.cu-split .cu-list :is(.cu-th,.cu-row){grid-template-columns:minmax(0,1fr) 116px 128px 18px} /* The chips and the search span both columns; the list stands on the left, the card on the right, under them. */ body.customer-app #account .r-page.cu-page.cu-split{row-gap:16px} body.customer-app #account .cu-page.cu-split>.cu-main{display:contents} body.customer-app #account .cu-page.cu-split>.cu-main>*{grid-column:1} body.customer-app #account .cu-page.cu-split>.cu-main>.cu-bar{grid-column:1 / -1} body.customer-app #account .cu-page.cu-split>dialog.cu-sheet{grid-column:2;grid-row:2 / span 3} body.customer-app #account .cu-page.cu-full>.cu-main{display:none} body.customer-app:has(dialog.cu-sheet.cu-docked[open]){overflow:visible} body.customer-app #account .cu-page dialog.cu-sheet.cu-docked{position:sticky;top:24px;inset:auto;z-index:1;display:flex;flex-direction:column;width:auto;max-width:none;height:auto;max-height:calc(100dvh - 48px);margin:0;padding:0;border:0;border-radius:12px;background:#fff;overflow:auto;transform:none;visibility:visible;transition:none;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} body.customer-app #account .cu-page dialog.cu-sheet.cu-docked .r-sheet-head{position:absolute;top:10px;right:10px;padding:0;border:0;background:none} body.customer-app #account .cu-page dialog.cu-sheet.cu-docked .r-sheet-head .cu-head-text{display:none} body.customer-app #account .cu-page dialog.cu-sheet.cu-docked .cu-card{padding:20px 18px} body.customer-app #account .cu-page dialog.cu-sheet.cu-docked .cu-card-top{padding-right:40px} /* The conversation page: «‹ Kunder», the name, the strip; the SMS on the left, the customer on the right. */ body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page{position:static;max-height:none;height:auto;background:none;box-shadow:none;border-radius:0;overflow:visible} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head{position:static;display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:4px 10px;padding:0 0 12px;background:none;border:0} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head .cu-back{display:inline-flex;grid-column:1 / -1;justify-self:start;height:32px} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head .cu-head-text{display:block;grid-column:1} body.customer-app #account #workspace-content .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head h2{font:600 28px/34px var(--r-font);letter-spacing:-.5px} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head .r-meta{font-size:13px} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head>.r-iconbtn[aria-label=Lukk]{display:none} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.cu-state{margin:0 0 16px;padding:0;border:0;background:none;min-height:36px} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-conv{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:24px;align-items:start} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-thread{height:calc(100dvh - 260px);min-height:520px;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-thread-head{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:0 20px;border-bottom:.5px solid var(--rv-line);font:600 15px/20px var(--r-font)} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-chat{padding:20px 24px;background:#fff} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-composer{padding:14px 16px;border-radius:0 0 12px 12px} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-send{width:auto;padding:0 18px} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-send .cu-send-label{display:inline} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-conv-side{display:flex;flex-direction:column;gap:16px} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-conv-side>*{padding:18px;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-conv-side .cu-card-history{padding-top:0;border-top:0} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-conv-side .cu-group{margin:0} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-conv-side .cu-card-fact:first-child{border-top:0} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-confirm-layer{position:fixed;align-items:center;justify-content:center} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-confirm-layer .cu-confirm{width:480px;border-radius:16px;padding:28px} } /* A phone: «‹ Kunder» at the top of every sheet, the list as cards, the status at the right of each row. */ @media (max-width:820px){ body.customer-app #account .cu-page .cu-head-actions{top:-56px} body.customer-app #account .cu-page .cu-head-actions .cu-upload{display:none} body.customer-app #account .cu-page .cu-head-actions .r-btn{height:36px;padding:0 12px;border-radius:8px;font-size:14px} body.customer-app #account .cu-page .cu-head-actions .r-icon{width:16px;height:16px} body.customer-app #account .cu-page .cu-bar{flex-direction:column-reverse;align-items:stretch;gap:16px} body.customer-app #account .cu-page .cu-search{flex:none;width:100%;height:48px;margin:0} body.customer-app #account .cu-page .cu-chips{width:calc(100% + 32px);min-width:0;overflow-x:auto;margin:0 -16px;padding:0 16px;scrollbar-width:none} body.customer-app #account .cu-page .cu-chips::-webkit-scrollbar{display:none} body.customer-app #account .cu-page .cu-chips .r-pill{height:34px;padding:0 12px;border-radius:17px;font-size:13px} /* A finger's room: each chip takes taps 44 px high with an invisible band of 5 px above and below. The row gives the band room inside its sideways scroll (the padding is taken back by the margin), so it looks as before. */ body.customer-app #account .cu-page .cu-chips{padding-block:5px;margin-block:-5px} body.customer-app #account .cu-page .cu-chips .r-pill{position:relative} body.customer-app #account .cu-page .cu-chips .r-pill::before{content:"";position:absolute;inset:-5px 0} body.customer-app #account .cu-page .cu-list .cu-th,body.customer-app #account .cu-page .cu-list .cu-row>.cu-src,body.customer-app #account .cu-page .cu-list .cu-row>.cu-chev{display:none} body.customer-app #account .cu-page .cu-list .cu-row{grid-template-columns:minmax(0,1fr) auto;gap:12px;min-height:64px;padding:12px 16px} body.customer-app #account .cu-page .cu-list .cu-row>.cu-side{grid-column:2;justify-self:end} body.customer-app #account .cu-page .cu-list .cu-row .r-who>b{font-size:15px;line-height:20px} body.customer-app #account .cu-page .cu-approve{padding:0 16px 14px 66px} body.customer-app #account .cu-page .cu-approve .r-btn{flex:1 1 0} body.customer-app #account .cu-page .cu-approve-all{align-self:stretch;height:48px} body.customer-app #account .cu-page .cu-toast{top:16px} body.customer-app #account .cu-page dialog.cu-sheet{width:100vw;background:var(--rv-canvas)} body.customer-app #account .cu-page .cu-sheet .r-sheet-head{min-height:56px;padding:0 16px;flex-wrap:wrap} body.customer-app #account .cu-page .cu-sheet .r-sheet-head .cu-back{display:inline-flex} body.customer-app #account .cu-page .cu-sheet .r-sheet-head>.r-iconbtn[aria-label=Lukk]{display:none} /* A form's title stands under the bar, large, as the page title does. */ body.customer-app #account .cu-page .cu-sheet .r-sheet-head:not(.cu-conv-head) .cu-head-text{flex-basis:100%;padding:12px 0 4px} body.customer-app #account #workspace-content .cu-page .cu-sheet .r-sheet-head .cu-head-text h2{font-size:26px;line-height:32px;letter-spacing:-.5px} body.customer-app #account .cu-page .cu-sheet .r-sheet-head{border-bottom:0;background:var(--rv-canvas)} body.customer-app #account .cu-page .cu-sheet .r-sheet-head .cu-back{border-bottom:0} body.customer-app #account .cu-page .cu-sheet .cu-add{padding:8px 16px 20px;background:var(--rv-canvas)} /* A card: «‹ Kunder» in a white bar, then the white box with the person, the facts and the buttons, then the history. */ body.customer-app #account .cu-page .cu-sheet .r-sheet-head:has(+.cu-card),body.customer-app #account .cu-page .cu-sheet .r-sheet-head.cu-conv-head{flex-wrap:nowrap;background:#fff;border-bottom:.5px solid var(--rv-line)} body.customer-app #account .cu-page .cu-sheet .r-sheet-head:has(+.cu-card) .cu-head-text{display:none} body.customer-app #account .cu-page .cu-sheet .cu-card{padding:20px 16px;background:var(--rv-canvas);gap:16px} body.customer-app #account .cu-page .cu-sheet .cu-card>.cu-cardbox{padding:18px;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} body.customer-app #account .cu-page .cu-sheet .cu-card-name h2{font-size:18px;line-height:24px} body.customer-app #account .cu-page .cu-sheet .cu-card-history{padding-top:0;border-top:0} body.customer-app #account .cu-page .cu-sheet .cu-card-timeline{padding:18px;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} body.customer-app #account .cu-page .cu-sheet .cu-card .cu-card-history-head{padding:0 2px} /* The conversation: «‹ Kari Nordmann» and the phone at the top. */ body.customer-app #account .cu-page .cu-sheet .r-sheet-head.cu-conv-head .cu-back-label{display:none} body.customer-app #account .cu-page .cu-sheet .r-sheet-head.cu-conv-head .cu-back{margin-right:-6px;padding-right:0} body.customer-app #account #workspace-content .cu-page .cu-sheet .r-sheet-head.cu-conv-head .cu-head-text h2{font:600 17px/22px var(--r-font);letter-spacing:-.2px} body.customer-app #account .cu-page .cu-sheet .r-sheet-head.cu-conv-head .cu-head-text .r-meta{display:none} body.customer-app #account .cu-page .cu-state{margin:12px 16px 0;padding:8px 8px 8px 14px;border:0;border-radius:10px;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05)} body.customer-app #account .cu-page .cu-sheet .cu-chat{background:var(--rv-canvas)} } /* An imported customer (JobbkilderMobil2): the card at the top, then contact, jobs and history as their own white boxes. */ body.customer-app #account .cu-page .cu-source-card>:is(.cu-source-detail,.cu-source-contact,.cu-source-jobs,.cu-source-history){margin:0;padding:16px 0 0;border-top:.5px solid var(--rv-line)} body.customer-app #account .cu-page .cu-source-card>.r-note,body.customer-app #account .cu-page .cu-source-card>.r-meta{margin:0;color:var(--rv-muted);font:400 13px/18px var(--r-font)} body.customer-app #account .cu-page .cu-source-card h3{margin:0 0 8px;color:var(--rv-muted);font:600 12px/16px var(--r-font);letter-spacing:.4px;text-transform:uppercase} body.customer-app #account .cu-page .cu-source-card :is(select,input:not([type=checkbox]):not([type=radio]):not([type=tel])){min-height:44px;border:0;border-radius:10px;background:#fff;box-shadow:inset 0 0 0 1px #c3c6cd} @media (max-width:820px){ body.customer-app #account .cu-page .cu-sheet .r-sheet-head:has(+.cu-source-card) .cu-head-text{display:none} body.customer-app #account .cu-page .cu-source-card>:is(.cu-source-detail,.cu-source-contact,.cu-source-jobs,.cu-source-history){padding:16px 18px;border:0;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} } body.customer-app #account .cu-page .cu-sheet .cu-head-text .cu-when{white-space:normal} body.customer-app #account .cu-page .cu-meter{display:flex;justify-content:space-between;gap:12px;margin-top:8px;color:var(--rv-muted);font:400 13px/18px var(--r-font);white-space:nowrap} body.customer-app #account .cu-page .cu-meter .cu-count:empty+.cu-goes{margin-left:auto} @media (min-width:1100px){ body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-import{max-width:760px;padding:0;background:none;overflow:visible} } @media (min-width:1100px){body.customer-app #account .cu-page dialog.cu-sheet.cu-docked .cu-card-notes{display:none}} @media (max-width:820px){body.customer-app #account .cu-page .cu-sheet .cu-card>.cu-notes{padding:18px;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)}} /* «Godkjenne 2 kunder?»: a short question, from the bottom on a phone and in the middle on a computer (KunderMobil 5). */ body.customer-app #account .cu-page dialog.cu-sheet.cu-ask{inset:auto 0 0 0;width:100vw;height:auto;max-height:80dvh;margin:0;border-radius:16px 16px 0 0;background:#fff} body.customer-app #account .cu-page dialog.cu-sheet.cu-ask .r-sheet-head{padding:24px 20px 4px;border:0;background:#fff} body.customer-app #account .cu-page dialog.cu-sheet.cu-ask .r-sheet-head .cu-back{display:none} body.customer-app #account .cu-page dialog.cu-sheet.cu-ask .r-sheet-head .cu-head-text{flex-basis:auto;padding:0} body.customer-app #account #workspace-content .cu-page dialog.cu-sheet.cu-ask .r-sheet-head h2{font:600 18px/24px var(--r-font);letter-spacing:-.2px} body.customer-app #account .cu-page dialog.cu-sheet.cu-ask .r-sheet-body{flex:none;padding:8px 20px 16px;background:#fff} body.customer-app #account .cu-page dialog.cu-sheet.cu-ask .cu-foot{border:0} body.customer-app #account .cu-page .cu-actions.cu-stack{flex-direction:column;gap:10px;width:100%} body.customer-app #account .cu-page .cu-actions.cu-stack .r-btn{flex:none;width:100%;height:48px;justify-content:center} @media (min-width:821px){ body.customer-app #account .cu-page dialog.cu-sheet.cu-ask{inset:50% auto auto 50%;width:480px;border-radius:16px;transform:translate(-50%,-50%);box-shadow:0 20px 60px rgba(16,24,40,.25)} body.customer-app #account .cu-page dialog.cu-sheet.cu-ask .r-sheet-head{padding:28px 28px 4px} body.customer-app #account .cu-page dialog.cu-sheet.cu-ask .r-sheet-body{padding:8px 28px 8px} body.customer-app #account .cu-page dialog.cu-sheet.cu-ask .cu-foot{padding:12px 28px 28px} } /* «Last opp kunder» (ImportMobil, ImportDesktop): the file as a card, the counts as a list with the number at the right. */ body.customer-app #account .cu-page .cu-contacts .cu-file.cu-file-card{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:14px 16px;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} body.customer-app #account .cu-page .cu-contacts .cu-file-tile{display:grid;flex:none;place-items:center;width:36px;height:36px;border-radius:9px;background:#e6f6eb;color:#218358} body.customer-app #account .cu-page .cu-contacts .cu-file-tile .r-icon{width:18px;height:18px} body.customer-app #account .cu-page .cu-contacts .cu-file-name{display:flex;flex-direction:column;gap:2px;min-width:0} body.customer-app #account .cu-page .cu-contacts .cu-file-name strong{overflow:hidden;font:500 15px/20px var(--r-font);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-contacts .cu-file-name .cu-muted{font:400 13px/18px var(--r-font);white-space:nowrap} body.customer-app #account .cu-page .cu-contacts .cu-summary.cu-counts{display:flex;flex-direction:column;margin:12px 0 16px;padding:0 16px;list-style:none;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} body.customer-app #account .cu-page .cu-contacts .cu-counts .cu-sum{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;border-top:.5px solid var(--rv-line);color:var(--rv-ink);font:500 14px/20px var(--r-font);white-space:nowrap} body.customer-app #account .cu-page .cu-contacts .cu-counts .cu-sum:first-child{border-top:0} body.customer-app #account .cu-page .cu-contacts .cu-counts .cu-sum i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--rv-grey)} body.customer-app #account .cu-page .cu-contacts .cu-counts .cu-sum.ok i{background:var(--rv-green)} body.customer-app #account .cu-page .cu-contacts .cu-counts .cu-sum.warn i{background:var(--rv-red)} body.customer-app #account .cu-page .cu-contacts .cu-counts .cu-sum.warn{color:var(--rv-red-text)} body.customer-app #account .cu-page .cu-contacts .cu-counts .cu-sum b{margin-left:auto;font:600 15px/20px var(--r-font);color:var(--rv-ink)} body.customer-app #account .cu-page .cu-contacts .cu-group{margin:0 0 8px} body.customer-app #account .cu-page .cu-contacts .cu-none{display:flex;flex-direction:column;gap:6px;margin:0 0 16px;padding:24px;border-radius:12px;background:#fff;text-align:center;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05)} body.customer-app #account .cu-page .cu-contacts .cu-none p{margin:0;color:var(--rv-text);font:400 14px/21px var(--r-font)} body.customer-app #account .cu-page .cu-contacts .cu-import-actions{display:flex;gap:12px;margin-top:16px} body.customer-app #account .cu-page .cu-contacts .cu-import-actions .r-btn{height:44px;min-height:0;justify-content:center} body.customer-app #account .cu-page .cu-contacts .cu-import-actions .r-btn .r-icon{width:16px;height:16px} @media (max-width:820px){ body.customer-app #account .cu-page .cu-contacts .cu-import-actions .r-btn{flex:1 1 0} body.customer-app #account .cu-page .cu-contacts .cu-import-actions .r-btn.primary{flex-grow:2} } body.customer-app #account .cu-page .cu-contacts .cu-drop{border-radius:12px;background:#fff} body.customer-app #account .cu-page .cu-contacts .cu-limit{font:400 13px/18px var(--r-font);white-space:nowrap} /* «Send til en kunde»: «Velg kunde» and «Skriv inn» as one segmented control (SendMobil, SendDesktop). */ body.customer-app #account .cu-page .cu-sheet .cu-entry-tabs{display:grid;grid-template-columns:1fr 1fr;gap:2px;margin:0 0 20px;padding:3px;border:0;border-radius:10px;background:#eceae4} body.customer-app #account .cu-page .cu-sheet .cu-entry-tabs button{height:36px;min-height:0;margin:0;padding:0 12px;border:0;border-radius:8px;background:none;box-shadow:none;color:var(--rv-text);font:500 14px/1 var(--r-font);white-space:nowrap;cursor:pointer} body.customer-app #account .cu-page .cu-sheet .cu-entry-tabs button[aria-pressed=true]{background:#fff;color:var(--rv-ink);box-shadow:0 .5px 2px rgba(0,0,0,.12)} body.customer-app #account .cu-page .cu-sheet .cu-entry-tabs button::after{display:none} body.customer-app #account .cu-page .cu-source-contact .cu-pick-recipient{width:100%;height:44px;min-height:0;justify-content:center;font:500 15px/1 var(--r-font)} /* «Hvem skal få SMS-en?» (JobbkilderMobil2 2–3): a white list of radios, the end of the number under each name. */ body.customer-app #account .cu-page .cu-source-contact-form{display:flex;flex-direction:column;gap:14px} body.customer-app #account .cu-page .cu-recipient-head h4{margin:0;color:var(--rv-ink);font:600 18px/24px var(--r-font);letter-spacing:-.2px} body.customer-app #account .cu-page .cu-recipient-head p{margin:4px 0 0;color:var(--rv-text);font:400 14px/20px var(--r-font)} body.customer-app #account .cu-page .cu-radio-list{display:flex;flex-direction:column;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} body.customer-app #account .cu-page .cu-radio-row{display:flex;align-items:center;gap:14px;min-height:64px;margin:0;padding:12px 16px;border-top:.5px solid var(--rv-line);cursor:pointer} body.customer-app #account .cu-page .cu-radio-row:first-child{border-top:0} body.customer-app #account .cu-page .cu-radio-row:has(input:checked){background:#f6f5f1} body.customer-app #account .cu-page .cu-radio-row .cu-radio{flex:none;width:20px;height:20px;min-height:0;margin:0;padding:0;border:0;border-radius:50%;background:#fff;box-shadow:inset 0 0 0 1.5px #c3c6cd;appearance:none;-webkit-appearance:none;cursor:pointer} body.customer-app #account .cu-page .cu-radio-row .cu-radio:checked{box-shadow:inset 0 0 0 6px var(--rv-ink)} body.customer-app #account .cu-page .cu-radio-row .cu-radio:focus-visible{outline:2px solid var(--rv-focus);outline-offset:2px} body.customer-app #account .cu-page .cu-radio-row .r-who{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0} body.customer-app #account .cu-page .cu-radio-row .r-who b{overflow:hidden;font:500 16px/22px var(--r-font);color:var(--rv-ink);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-radio-row .r-who span{overflow:hidden;font:400 13px/18px var(--r-font);color:var(--rv-muted);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-recipient-own{display:flex;flex-direction:column;gap:14px} body.customer-app #account .cu-page .cu-recipient-own[hidden]{display:none} body.customer-app #account .cu-page .cu-recipient-own .r-field{display:flex;flex-direction:column;gap:8px;margin:0} body.customer-app #account .cu-page .cu-recipient-own .r-field>span:first-child{color:var(--rv-ink);font:500 14px/20px var(--r-font)} body.customer-app #account .cu-page .cu-recipient-own .cu-prefixed input{flex:1;min-width:0;min-height:48px;padding:0 14px;border:0;background:transparent;box-shadow:none;font:400 16px/22px var(--r-font)} body.customer-app #account .cu-page .cu-source-ack{display:flex;align-items:center;gap:10px;color:var(--rv-ink);font:500 15px/20px var(--r-font);cursor:pointer} body.customer-app #account .cu-page .cu-source-ack input{flex:none;width:20px;height:20px;margin:0;accent-color:var(--rv-ink)} body.customer-app #account .cu-page .cu-source-contact-form>.r-btn{height:44px;min-height:0;justify-content:center;font:500 15px/1 var(--r-font)} /* Round 3 (03.11): the details the boards draw. A heading focused for a screen reader shows no ring; the buttons under the recipient list stand side by side, «Avbryt» first. */ body.customer-app #account .cu-page .cu-sheet h2:focus{outline:none} body.customer-app #account .cu-page .cu-recipient-actions{display:grid;grid-template-columns:1fr 2fr;gap:12px} body.customer-app #account .cu-page .cu-recipient-actions .r-btn{width:100%;height:44px;min-height:0;justify-content:center;font:500 15px/1 var(--r-font)} body.customer-app #account .cu-page .cu-add .cu-form{gap:16px} body.customer-app #account .cu-page .cu-add .r-field{gap:10px} body.customer-app #account .cu-page .cu-add .cu-help{margin:-4px 0 0} body.customer-app #account .cu-page .cu-field-error{font-weight:500} @media (max-width:820px){ /* A form on a phone: «‹ Kunder» in a white bar of 56 px, the title under it on the grey page, as KundekortMobil 8 and SendMobil 2. */ body.customer-app #account .cu-page .cu-sheet .r-sheet-head:not(.cu-conv-head){position:relative;isolation:isolate} body.customer-app #account .cu-page .cu-sheet .r-sheet-head:not(.cu-conv-head)::before{content:"";position:absolute;inset:0 0 auto;z-index:-1;height:56px;background:#fff;border-bottom:.5px solid var(--rv-line)} body.customer-app #account .cu-page .cu-sheet .r-sheet-head .cu-back{height:56px} body.customer-app #account .cu-page .cu-sheet .r-sheet-head:not(.cu-conv-head) .cu-head-text{padding:20px 0 0} body.customer-app #account .cu-page .cu-sheet .r-sheet-head .cu-head-text :is(.cu-when,.r-meta){margin:4px 0 0;color:var(--rv-text);font:400 15px/22px var(--r-font);white-space:normal} body.customer-app #account .cu-page .cu-sheet .cu-add{padding:16px 16px 20px} body.customer-app #account .cu-page dialog.cu-sheet.cu-ask .r-sheet-head::before{display:none} } /* The day over the messages stands alone in the middle (KundekortMobil 2); an event in the conversation keeps its lines. */ body.customer-app #account .cu-page .cu-day:not(.cu-event){justify-content:center;margin:12px 0 6px} body.customer-app #account .cu-page .cu-day:not(.cu-event)::before,body.customer-app #account .cu-page .cu-day:not(.cu-event)::after{display:none} /* The empty list: the sources the app reads from, as small logos above the buttons (KunderMobil 7). */ body.customer-app #account .cu-page .cu-empty-logos{display:flex;gap:8px} body.customer-app #account .cu-page .cu-empty-logos .cu-logo{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#fff;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05)} body.customer-app #account .cu-page .cu-empty-logos img{width:20px;height:20px;object-fit:contain} /* «Send til en kunde»: the first SMS in a white box, «Endre teksten» with a pencil, «Går …» with a clock (SendMobil 2). */ body.customer-app #account .cu-page .cu-form .cu-sms{padding:14px;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05)} body.customer-app #account .cu-page .cu-form .cu-preview-head{margin:0 0 4px} body.customer-app #account .cu-page .cu-form .cu-preview-head .cu-msg-label{align-self:auto;margin:0;color:var(--rv-ink);font:500 14px/20px var(--r-font)} body.customer-app #account .cu-page .cu-edit-message{display:inline-flex;align-items:center;gap:6px;text-decoration:underline;text-decoration-color:rgba(22,24,29,.35);text-underline-offset:4px} body.customer-app #account .cu-page .cu-edit-message .r-icon{width:15px;height:15px} body.customer-app #account .cu-page .cu-meter .cu-goes{display:inline-flex;align-items:center;gap:6px} body.customer-app #account .cu-page .cu-meter .r-icon{width:14px;height:14px} /* «Ny kunde» and «Send»: name and mobile side by side on a phone too, as the board draws them. */ body.customer-app #account .cu-page .cu-form .cu-row2{gap:12px} @media (max-width:820px){ body.customer-app #account .cu-page .cu-list .cu-row .r-who>b{font-size:16px;line-height:22px} /* «Godkjenn først» on a phone: the buttons say what is waiting, so the row has no status of its own (KunderMobil 2). */ body.customer-app #account .cu-page .cu-approve-list .cu-item:has(.cu-approve) .cu-row>.cu-side{display:none} body.customer-app #account .cu-page .cu-approve-list .cu-item:has(.cu-approve) .cu-row{grid-template-columns:minmax(0,1fr)} body.customer-app #account .cu-page .cu-contacts .cu-drag{display:none} } /* «Last opp kunder»: a file that cannot be read says so in a white box (ImportMobil 4). */ body.customer-app #account .cu-page .cu-contacts p.cu-error{display:block;margin:0 0 12px;padding:14px 16px;border-radius:12px;background:#fff;color:var(--rv-red-text);font:500 14px/20px var(--r-font);box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05)} @media (max-width:820px){ /* The customers that are added, as rows on a phone: the name and the day of the job, then the number and what was done (ImportMobil 5). */ body.customer-app #account .cu-page .cu-contacts .cu-table.cu-mini:not(.cu-sample) .cu-tr.cu-head{display:none} /* Each cell has its own place, so a row without a job or a date never moves the number into the date's place (69). */ body.customer-app #account .cu-page .cu-contacts .cu-table.cu-mini:not(.cu-sample) .cu-tr:not(.cu-head){display:grid;grid-template-columns:38px auto minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center;padding:12px 16px} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-mini:not(.cu-sample) .cu-tr .cu-row-mark{display:grid;grid-column:1;grid-row:1 / span 2} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-mini:not(.cu-sample) .cu-tr .cu-name{grid-column:2 / 4;grid-row:1;min-width:0;overflow:hidden;font:500 16px/22px var(--r-font);color:var(--rv-ink);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-mini:not(.cu-sample) .cu-tr .cu-date{grid-column:4;grid-row:1;justify-self:end;font:400 13px/18px var(--r-font);color:var(--rv-muted);white-space:nowrap} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-mini:not(.cu-sample) .cu-tr .cu-date.cu-muted{visibility:hidden} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-mini:not(.cu-sample) .cu-tr .cu-phone{grid-column:2;grid-row:2;font:400 13px/18px var(--r-font);color:var(--rv-muted);white-space:nowrap} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-mini:not(.cu-sample) .cu-tr .cu-note{grid-column:3 / 5;grid-row:2;display:block;min-width:0;overflow:hidden;font:400 13px/18px var(--r-font);color:var(--rv-muted);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-mini:not(.cu-sample) .cu-tr .cu-note:not(.cu-muted)::before{content:"· "} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-mini:not(.cu-sample) .cu-tr .cu-note.cu-muted{visibility:hidden} } /* The file picker as a white card with a green tile (ImportMobil 1, ImportDesktop 1), on a phone too. */ body.customer-app #account .cu-page .cu-contacts .cu-drop{gap:6px;padding:28px 20px;border:0;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} body.customer-app #account .cu-page .cu-contacts .cu-drop .cu-mark{width:44px;height:44px;margin-bottom:6px;border-radius:12px;background:#e6f6eb;color:#218358} body.customer-app #account .cu-page .cu-contacts .cu-drop strong{font:600 16px/22px var(--r-font);color:var(--rv-ink)} body.customer-app #account .cu-page .cu-contacts .cu-drop .r-btn{height:44px;min-height:0;margin-top:10px;padding:0 20px} @media (max-width:820px){ body.customer-app #account .cu-page .cu-contacts .cu-drop{padding:24px 20px} body.customer-app #account .cu-page .cu-contacts .cu-drop :is(.cu-mark,strong){display:grid} body.customer-app #account .cu-page .cu-contacts .cu-drop strong{display:block} body.customer-app #account .cu-page .cu-contacts .cu-drop .r-btn{width:auto} /* «Slik ser filen ut» as four lines with the column at the left and the example at the right (ImportMobil 1). */ body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample{padding:6px 18px 4px} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample::before{content:"Slik ser filen ut";display:block;padding:12px 0 8px;color:var(--rv-ink);font:600 16px/22px var(--r-font)} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample .cu-head{display:none} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample .cu-tr{display:flex;flex-direction:column;padding:0} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample .cu-td{display:flex;justify-content:space-between;gap:12px;min-height:44px;align-items:center;border-top:.5px solid var(--rv-line);color:var(--rv-ink);font:500 14px/20px var(--r-font)} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample .cu-td::before{color:var(--rv-muted);font-weight:400} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample .cu-td:nth-child(1)::before{content:"Navn"} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample .cu-td:nth-child(2)::before{content:"Mobil"} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample .cu-td:nth-child(3)::before{content:"Hva ble gjort"} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample .cu-td:nth-child(4)::before{content:"Dato"} } @media (max-width:820px){ body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample .cu-tr.cu-head{display:none} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample .cu-tr{align-items:stretch;text-align:left} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample .cu-td{width:100%} } @media (min-width:1100px){ /* The close button stays at the top right of the card while it scrolls, and takes no room of its own. */ body.customer-app #account .cu-page dialog.cu-sheet.cu-docked:not(.cu-mode-page)>.r-sheet-head{position:sticky;top:0;right:auto;z-index:2;display:flex;align-items:flex-start;justify-content:flex-end;height:0;padding:10px 10px 0;overflow:visible} body.customer-app #account .cu-page dialog.cu-sheet.cu-docked:not(.cu-mode-page)>.r-sheet-head .r-iconbtn{background:#fff} } /* The initials in front of a customer to add show on a phone; the table on a computer has its own columns (ImportDesktop 3). */ body.customer-app #account .cu-page .cu-contacts .cu-row-mark{display:none} body.customer-app #account .cu-page .cu-contacts .cu-row-mark.r-initials{width:38px;height:38px} /* Round 4 (03.11, AVVIK 52–70). */ /* The grey line: the rest after the first part is a computer's; a phone keeps «Slutter på 301» alone (58). */ body.customer-app #account .cu-page .cu-meta-more{white-space:nowrap} /* «Hopp over» and «Godkjenn» small, side by side, under an imported customer or an invoice (55). */ body.customer-app #account .cu-page .cu-approve .r-btn{flex:0 1 auto;min-width:120px} /* The status in a page's head: the avatar, the name, the status under it, «Saken er løst» and «Ring …» to the right (59). */ body.customer-app #account .cu-page .cu-state-main{display:inline-flex;align-items:center;gap:8px;min-width:0} body.customer-app #account .cu-page .cu-head-call{display:none} /* The customer's own words between messages: «Skrev anmeldelse …», «Saken er løst …» (64). */ body.customer-app #account .cu-page .cu-chat .cu-event span{white-space:nowrap} /* The contacts in the accounts under the card, read only (65). */ body.customer-app #account .cu-page .cu-contact-list{display:flex;flex-direction:column;margin:8px 0;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05)} body.customer-app #account .cu-page .cu-contact-row{display:flex;align-items:center;gap:12px;min-height:60px;padding:10px 16px;border-top:.5px solid var(--rv-line)} body.customer-app #account .cu-page .cu-contact-row:first-child{border-top:0} body.customer-app #account .cu-page .cu-contact-row .r-who{display:flex;flex:1;flex-direction:column;gap:2px;min-width:0} body.customer-app #account .cu-page .cu-contact-row .r-who b{overflow:hidden;font:500 15px/20px var(--r-font);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-contact-row .r-who span{font:400 13px/18px var(--r-font);color:var(--rv-muted);white-space:nowrap} body.customer-app #account .cu-page .cu-cardbox>.cu-pick-recipient{width:100%;height:44px;min-height:0;justify-content:center;font:500 15px/1 var(--r-font)} body.customer-app #account .cu-page .cu-cardbox>.cu-edit-contact{align-self:flex-start;height:36px;font-size:14px} body.customer-app #account .cu-page .cu-source-contact .cu-group{margin:4px 0 0} /* «Last opp kunder»: the short line on a phone, the whole on a computer (68); «Valgfri» for what may be left out. */ body.customer-app #account .cu-page .cu-wide-only{display:inline} body.customer-app #account .cu-page .cu-contacts .cu-import-side{display:contents} body.customer-app #account .cu-page .cu-contacts .cu-side-title,body.customer-app #account .cu-page .cu-contacts .cu-side-note{display:none} body.customer-app #account .cu-page .cu-contacts [data-step=review]{display:flex;flex-direction:column} body.customer-app #account .cu-page .cu-contacts [data-step=review]>.cu-file-card{order:1} body.customer-app #account .cu-page .cu-contacts [data-step=review]>.cu-dest{order:2} body.customer-app #account .cu-page .cu-contacts [data-step=review]>.cu-sr{order:3} body.customer-app #account .cu-page .cu-contacts [data-step=review] .cu-counts{order:4} body.customer-app #account .cu-page .cu-contacts [data-step=review]>.cu-none{order:5} body.customer-app #account .cu-page .cu-contacts [data-step=review]>.cu-group{order:6} body.customer-app #account .cu-page .cu-contacts [data-step=review]>.cu-table{order:7} body.customer-app #account .cu-page .cu-contacts [data-step=review]>:is(.cu-more,.cu-warn){order:8} body.customer-app #account .cu-page .cu-contacts [data-step=review]>.cu-skipped{order:9} body.customer-app #account .cu-page .cu-contacts [data-step=review] .cu-import-actions{order:10} @media (max-width:820px){ body.customer-app #account .cu-page .cu-meta-more{display:none} body.customer-app #account .cu-page .cu-main.cu-all>:is(.cu-note,.cu-upload-m){display:none} body.customer-app #account .cu-page .cu-wide-only{display:none} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample .cu-td:nth-child(n+3){font-size:0} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample .cu-td:nth-child(n+3)::before{font-size:14px} body.customer-app #account .cu-page .cu-contacts .cu-table.cu-sample .cu-td:nth-child(n+3)::after{content:"Valgfri";color:var(--rv-muted);font:400 14px/20px var(--r-font)} /* A card on a phone stops above the menu at the bottom, which stays in sight (63); a conversation covers it, with its own field at the bottom. Both leave room at the end, so nothing hides under the menu (66). */ body.customer-app #account .cu-page dialog.cu-sheet.cu-docked.cu-phone{position:fixed;inset:0 0 auto 0;z-index:1500;display:flex;flex-direction:column;width:100vw;max-width:100vw;height:calc(100dvh - var(--bottom-nav,76px) - env(safe-area-inset-bottom,0px));max-height:none;margin:0;padding:0;border:0;border-radius:0;transform:none;visibility:visible;overflow:hidden;background:var(--rv-canvas)} body.customer-app #account .cu-page dialog.cu-sheet.cu-docked.cu-phone.cu-mode-page{z-index:1700;height:100dvh} body.customer-app #account .cu-page dialog.cu-sheet.cu-docked.cu-phone .r-sheet-body{flex:1;min-height:0;overflow:auto;padding-bottom:32px} body.customer-app:has(dialog.cu-sheet.cu-phone.cu-mode-panel[open]) .pilot-bottom-nav{z-index:1600} /* A form's buttons in the shared bar at the bottom: the bar is fixed, so the form keeps room for it. */ body.customer-app #account .cu-page .cu-foot:has(>.r-mfoot){height:calc(72px + env(safe-area-inset-bottom,0px));padding:0;border:0;background:none} } @media (min-width:821px){ /* «Send til en kunde» on a computer: small buttons at the right of the bar (52). */ body.customer-app #account .cu-page .cu-foot>.cu-actions.r-mfoot{display:flex;justify-content:flex-end;gap:10px;width:auto;margin:0} body.customer-app #account .cu-page .cu-foot>.cu-actions.r-mfoot>.r-btn{flex:none;width:auto;min-width:96px;height:44px;padding:0 18px} } @media (min-width:1100px){ /* A conversation or the upload over the whole page has no second «Kunder» above its own «‹ Kunder» (59). */ body.customer-app #account #workspace-content:has(.cu-page.cu-full)>.pilot-page-heading{display:none} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head.cu-conv-head{grid-template-columns:52px minmax(0,1fr) auto auto;column-gap:14px;row-gap:6px} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head.cu-conv-head>.r-initials{grid-column:1;grid-row:2 / span 2;align-self:center} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head.cu-conv-head>.cu-head-text{grid-column:2;grid-row:2} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head.cu-conv-head>.cu-head-text .r-meta{display:none} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head.cu-conv-head>.cu-state{display:contents} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head.cu-conv-head .cu-state-main{grid-column:2;grid-row:3;font:500 14px/20px var(--r-font)} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head.cu-conv-head .cu-state-main i{width:8px;height:8px;border-radius:50%;background:var(--rv-grey)} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head.cu-conv-head .cu-state.call .cu-state-main i{background:var(--rv-red)} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head.cu-conv-head .cu-state.call .cu-state-main b{color:var(--rv-red-text)} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head.cu-conv-head .cu-state.wait .cu-state-main i{background:var(--rv-yellow)} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head.cu-conv-head .cu-state:is(.good,.review) .cu-state-main i{background:var(--rv-green)} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head.cu-conv-head .cu-solved{grid-column:3;grid-row:2 / span 2;align-self:center;height:44px;padding:0 16px;font:500 15px/1 var(--r-font)} body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page>.r-sheet-head.cu-conv-head .cu-head-call{display:inline-flex;grid-column:4;grid-row:2 / span 2;align-self:center;height:44px;min-height:0;padding:0 16px;font:500 15px/1 var(--r-font)} /* The upload on a computer: the rows on the left, «Klar til å legge til» with the counts and the buttons on the right (70). */ body.customer-app #account .cu-page dialog.cu-mode-page .cu-contacts [data-step=review]{display:grid;grid-template-columns:minmax(0,1fr) 340px;grid-auto-flow:row dense;column-gap:24px;row-gap:12px;align-items:start} body.customer-app #account .cu-page dialog.cu-mode-page .cu-contacts [data-step=review]>*{grid-column:1} body.customer-app #account .cu-page dialog.cu-mode-page .cu-contacts [data-step=review]>.cu-import-side{display:flex;flex-direction:column;gap:12px;grid-column:2;grid-row:1 / span 8;padding:18px;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} body.customer-app #account .cu-page dialog.cu-mode-page .cu-contacts .cu-import-side .cu-side-title{display:block;font:600 16px/22px var(--r-font)} body.customer-app #account .cu-page dialog.cu-mode-page .cu-contacts .cu-import-side .cu-side-note{display:block;margin:0;font-size:13px;line-height:18px} body.customer-app #account .cu-page dialog.cu-mode-page .cu-contacts .cu-import-side .cu-counts{margin:0;padding:0;box-shadow:none} body.customer-app #account .cu-page dialog.cu-mode-page .cu-contacts .cu-import-side .cu-import-actions{flex-direction:column-reverse;margin:0} body.customer-app #account .cu-page dialog.cu-mode-page .cu-contacts .cu-import-side .cu-import-actions .r-btn{width:100%} } @media (min-width:1100px){ body.customer-app #account .cu-page dialog.cu-sheet.cu-mode-page .cu-import{max-width:none} body.customer-app #account .cu-page dialog.cu-mode-page .cu-contacts .cu-import-side>.cu-side-title{order:0} body.customer-app #account .cu-page dialog.cu-mode-page .cu-contacts .cu-import-side>.cu-counts{order:1} body.customer-app #account .cu-page dialog.cu-mode-page .cu-contacts .cu-import-side>.cu-import-actions{order:2} body.customer-app #account .cu-page dialog.cu-mode-page .cu-contacts .cu-import-side>.cu-side-note{order:3;white-space:normal} } @media (max-width:820px){ body.customer-app #account .cu-page .cu-contacts .cu-table.cu-mini:not(.cu-sample) .cu-tr .cu-note{margin-left:-8px} } @media (min-width:1100px){body.customer-app #account .cu-page dialog.cu-mode-page .cu-contacts .cu-import-body[data-step=review]{max-width:none}} body.customer-app #account .cu-page .cu-use-suggestion{display:inline-flex;align-items:center;gap:6px;align-self:flex-end;height:32px;font-size:14px} body.customer-app #account .cu-page .cu-use-suggestion .r-icon{width:14px;height:14px} body.customer-app #account .cu-page .cu-pick-list .cu-group{margin:12px 0 4px} /* V3 03.11: the owner's own customer. «Claude · i dag 09.10» under the number in «Godkjenn først» (AiSporMobil 7). */ body.customer-app #account .cu-page .cu-list .cu-row .r-who>.cu-origin-line{display:flex;align-items:center;gap:4px;min-width:0;margin:2px 0 0;overflow:hidden;font:400 13px/18px var(--r-font);color:var(--rv-muted);white-space:nowrap} body.customer-app #account .cu-page .cu-origin-line .r-icon{flex:none;width:12px;height:12px} body.customer-app #account .cu-page .cu-origin-line>span{overflow:hidden;text-overflow:ellipsis} /* «Rediger» and «Slett kunden» under the card on a computer (KunderDesktop); the pencil at the top on a phone (KundekortMobil 10). */ body.customer-app #account .cu-page .cu-card-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0;padding:16px 0 0;border-top:.5px solid var(--rv-line)} body.customer-app #account .cu-page :is(.cu-card-edit,.cu-card-delete){display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0;border:0;background:none;font:500 15px/20px var(--r-font);color:var(--rv-text);white-space:nowrap;cursor:pointer} body.customer-app #account .cu-page :is(.cu-card-edit,.cu-card-delete) .r-icon{width:16px;height:16px} body.customer-app #account .cu-page .cu-card-delete{color:var(--rv-red-text);text-decoration-color:rgba(180,35,42,.45)} body.customer-app #account .cu-page .cu-edit .cu-card-delete{align-self:flex-start;margin-top:8px} body.customer-app #account .cu-page .cu-edit-icon{display:none} body.customer-app #account .cu-page .r-btn.cu-danger{border-color:var(--rv-red-text);background:var(--rv-red-text);color:#fff} body.customer-app #account .cu-page .r-btn.cu-danger .r-icon{width:16px;height:16px} @media (max-width:820px){ body.customer-app #account .cu-page .cu-edit-icon{display:inline-flex;margin-left:auto} body.customer-app #account .cu-page .cu-card .cu-card-foot{display:none} /* «Slette Truls M.?» comes up from the bottom on a phone (KundekortMobil 7). */ body.customer-app #account .cu-page .cu-delete-confirm{position:fixed;z-index:1700;align-items:flex-end;padding:0} body.customer-app #account .cu-page .cu-delete-confirm .cu-discard-panel{border-radius:16px 16px 0 0;padding:24px 16px calc(24px + env(safe-area-inset-bottom))} } /* REV-129 «Hvilken kolonne er hva?» (ImportDesktop 2): the sheet, a row per field with its column and example, and the file. */ #account .cu-today-ic.blue{background:#e6f4fe;color:#0d74ce} body.customer-app #account .cu-page .cu-contacts .cu-today-go{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;min-height:28px;padding:0;border:0;background:none;font:500 15px/20px var(--r-font);color:var(--rv-ink);white-space:nowrap;cursor:pointer} body.customer-app #account .cu-page .cu-contacts .cu-today-go .r-icon{width:16px;height:16px} body.customer-app #account .cu-page .cu-contacts .cu-file-card .cu-file-name{flex:1} body.customer-app #account .cu-page .cu-contacts .cu-file-change{flex:none;min-height:32px;padding:0;border:0;background:none;font:500 14px/20px var(--r-font);color:var(--rv-ink);white-space:nowrap;text-decoration:underline;text-underline-offset:3px;cursor:pointer} body.customer-app #account .cu-page .cu-contacts [data-step=columns]{display:flex;flex-direction:column;gap:0} body.customer-app #account .cu-page .cu-contacts .cu-map-two{display:grid;gap:16px} body.customer-app #account .cu-page .cu-contacts .cu-map-stack{display:flex;flex-direction:column;gap:12px;min-width:0} body.customer-app #account .cu-page .cu-contacts .cu-sheetpick{display:flex;align-items:center;gap:14px} body.customer-app #account .cu-page .cu-contacts .cu-map-label{flex:none;color:var(--rv-muted);font:600 12px/16px var(--r-font);letter-spacing:.4px;text-transform:uppercase;white-space:nowrap} body.customer-app #account .cu-page .cu-contacts select.cu-select{min-width:0;min-height:44px;padding:0 36px 0 14px;border:0;border-radius:10px;background-color:#fff;box-shadow:inset 0 0 0 1px #c3c6cd;font:400 15px/20px var(--r-font);color:var(--rv-ink)} body.customer-app #account .cu-page .cu-contacts select.cu-select.cu-muted{color:var(--rv-muted)} body.customer-app #account .cu-page .cu-contacts .cu-sheetpick select.cu-select{flex:1;max-width:260px} body.customer-app #account .cu-page .cu-contacts .cu-mapcard{display:flex;flex-direction:column;padding:0;overflow:hidden} body.customer-app #account .cu-page .cu-contacts .cu-maphead{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:.5px solid var(--rv-line)} body.customer-app #account .cu-page .cu-contacts .cu-maphead h3{margin:0;font:600 16px/22px var(--r-font);color:var(--rv-ink)} body.customer-app #account .cu-page .cu-contacts .cu-maphead .r-meta{margin:0;white-space:nowrap} body.customer-app #account .cu-page .cu-contacts .cu-maprow{display:grid;grid-template-columns:150px 220px minmax(0,1fr);gap:20px;align-items:center;min-height:68px;padding:0 18px;border-top:.5px solid var(--rv-line)} body.customer-app #account .cu-page .cu-contacts .cu-maphead+.cu-maprow{border-top:0} body.customer-app #account .cu-page .cu-contacts .cu-map-field{display:flex;flex-direction:column;gap:2px;min-width:0} body.customer-app #account .cu-page .cu-contacts .cu-map-field b{font:500 15px/20px var(--r-font);color:var(--rv-ink)} body.customer-app #account .cu-page .cu-contacts .cu-map-field .r-meta{font:400 13px/18px var(--r-font);color:var(--rv-muted);white-space:nowrap} body.customer-app #account .cu-page .cu-contacts .cu-map-ex{min-width:0;overflow:hidden;font:400 14px/20px var(--r-font);color:var(--rv-text);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-contacts .cu-map-ex.cu-muted{color:var(--rv-muted)} body.customer-app #account .cu-page .cu-contacts .cu-map-actions{display:flex;gap:12px;margin:4px 0 0} body.customer-app #account .cu-page .cu-contacts .cu-map-actions .r-btn{height:44px;min-height:0;justify-content:center} body.customer-app #account .cu-page .cu-contacts .cu-map-actions .r-btn .r-icon{width:16px;height:16px} body.customer-app #account .cu-page .cu-contacts .cu-map-stack>p.cu-error{margin:0} body.customer-app #account .cu-page .cu-contacts .cu-map-stack>p.cu-error[hidden]{display:none} body.customer-app #account .cu-page .cu-contacts .cu-rawcard{display:flex;flex-direction:column;align-self:start;min-width:0;padding:16px 0 0;overflow:hidden} body.customer-app #account .cu-page .cu-contacts .cu-rawcard h3{margin:0 18px 12px;font:600 16px/22px var(--r-font);color:var(--rv-ink)} /* The file's own rows and the rows that are left out: a plain grid of short cells that never wrap. */ body.customer-app #account .cu-page .cu-contacts .cu-grid{display:grid;min-width:0;overflow-x:auto} body.customer-app #account .cu-page .cu-contacts .cu-gtr{display:grid;gap:16px;align-items:center;min-height:44px;padding:0 18px;border-top:.5px solid var(--rv-line);font:400 14px/20px var(--r-font);color:var(--rv-ink);white-space:nowrap} body.customer-app #account .cu-page .cu-contacts .cu-raw .cu-gtr{grid-template-columns:repeat(var(--cols,2),minmax(96px,1fr))} body.customer-app #account .cu-page .cu-contacts .cu-skip-table .cu-gtr{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} body.customer-app #account .cu-page .cu-contacts .cu-gtr>span{min-width:0;overflow:hidden;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-contacts .cu-gtr.cu-ghead{min-height:36px;background:#f7f8fa;color:var(--rv-muted);font:600 12px/16px var(--r-font);letter-spacing:.4px;text-transform:uppercase} body.customer-app #account .cu-page .cu-contacts .cu-gtr>.cu-muted{color:var(--rv-muted)} body.customer-app #account .cu-page .cu-contacts .cu-skip-table{margin:8px 0 0;padding:0;overflow:hidden} body.customer-app #account .cu-page .cu-contacts .cu-skip-table .cu-gtr:first-child{border-top:0} body.customer-app #account .cu-page .cu-contacts .cu-skip-help{margin:10px 0 0;color:var(--rv-muted);font:400 13px/18px var(--r-font)} body.customer-app #account .cu-page .cu-contacts .cu-skipped>summary{display:flex;align-items:center;gap:8px;min-height:44px;font:500 15px/20px var(--r-font);color:var(--rv-ink);cursor:pointer} /* «Kundene ble ikke lagt til» (ImportMobil 9): a white banner with a red tile over the file. */ body.customer-app #account .cu-page .cu-contacts .cu-import-failed{display:flex;align-items:flex-start;gap:12px;order:0;margin:0 0 12px;padding:14px 16px;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} body.customer-app #account .cu-page .cu-contacts .cu-import-failed>div{display:flex;flex-direction:column;gap:2px;min-width:0;font:400 14px/20px var(--r-font);color:var(--rv-text)} body.customer-app #account .cu-page .cu-contacts .cu-import-failed b{font:600 15px/20px var(--r-font);color:var(--rv-ink)} body.customer-app #account .cu-page .cu-contacts .cu-failed-ic{display:grid;flex:none;place-items:center;width:32px;height:32px;border-radius:9px;background:#feebec;color:#ce2c31} body.customer-app #account .cu-page .cu-contacts .cu-failed-ic .r-icon{width:16px;height:16px} @media (min-width:1100px){ body.customer-app #account .cu-page dialog.cu-mode-page .cu-contacts .cu-import-body[data-step=columns]{max-width:1112px} body.customer-app #account .cu-page dialog.cu-mode-page .cu-contacts .cu-map-two{grid-template-columns:minmax(0,1fr) 360px;gap:24px;align-items:start} } @media (max-width:1099px){ body.customer-app #account .cu-page .cu-contacts .cu-maprow{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);grid-template-areas:"field select" "ex ex";row-gap:6px;column-gap:12px;padding:12px 16px} body.customer-app #account .cu-page .cu-contacts .cu-map-field{grid-area:field} body.customer-app #account .cu-page .cu-contacts .cu-maprow select.cu-select{grid-area:select;width:100%} body.customer-app #account .cu-page .cu-contacts .cu-map-ex{grid-area:ex;font-size:13px;line-height:18px} body.customer-app #account .cu-page .cu-contacts .cu-sheetpick{flex-direction:column;align-items:stretch;gap:6px} body.customer-app #account .cu-page .cu-contacts .cu-sheetpick select.cu-select{max-width:none} } @media (max-width:820px){ body.customer-app #account .cu-page .cu-contacts .cu-map-actions .r-btn{flex:1 1 0} body.customer-app #account .cu-page .cu-contacts .cu-map-actions .r-btn.primary{flex-grow:2} body.customer-app #account .cu-page .cu-contacts .cu-gtr{padding:0 16px} } /* REV-129 «Send til en kunde» (SendMobil 3, 7, 8): the chosen customer as a row with «Bytt», why nothing goes, and «Slå på». */ body.customer-app #account .cu-page .cu-sheet .cu-entry-tabs[hidden],body.customer-app #account .cu-page .cu-chosen[hidden]{display:none} body.customer-app #account .cu-page .cu-chosen{display:flex;flex-direction:column;gap:14px} body.customer-app #account .cu-page .cu-chosen-row{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:12px;min-height:68px;padding:12px 16px;border-radius:12px;background:#fff;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} body.customer-app #account .cu-page .cu-chosen-row .r-who{display:flex;flex-direction:column;gap:2px;min-width:0} body.customer-app #account .cu-page .cu-chosen-row .r-who b{overflow:hidden;font:500 16px/22px var(--r-font);color:var(--rv-ink);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-chosen-row .r-who small{overflow:hidden;font:400 13px/18px var(--r-font);color:var(--rv-muted);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-chosen-row .cu-swap{min-height:36px;padding:0 4px;border:0;background:none;font:500 15px/20px var(--r-font);color:var(--rv-ink);white-space:nowrap;text-decoration:underline;text-underline-offset:3px;cursor:pointer} body.customer-app #account .cu-page .cu-chosen .cu-asked{margin:0;color:var(--rv-text);font:400 15px/22px var(--r-font)} body.customer-app #account .cu-page .cu-chosen .cu-asked-actions{display:flex;gap:10px;margin:0} body.customer-app #account .cu-page .cu-chosen .cu-asked-actions .r-btn{flex:1 1 0;height:44px;min-height:0;justify-content:center} body.customer-app #account .cu-page .cu-chosen>.r-btn.primary{align-self:flex-start;height:44px;min-height:0} body.customer-app #account .cu-page .cu-sheet .cu-off-note{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 16px;padding:12px 14px;border:0;border-radius:12px;background:#fff;color:var(--rv-ink);font:500 15px/20px var(--r-font);box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05)} body.customer-app #account .cu-page .cu-sheet .cu-off-note[hidden]{display:none} body.customer-app #account .cu-page .cu-sheet .cu-off-go{display:inline-flex;align-items:center;gap:2px;flex:none;min-height:32px;padding:0;border:0;background:none;font:500 15px/20px var(--r-font);color:var(--rv-ink);white-space:nowrap;cursor:pointer} body.customer-app #account .cu-page .cu-sheet .cu-off-go .r-icon{width:16px;height:16px} /* REV-129 the card, the conversation and the source history (KundekortMobil, InnboksMobil, JobbkilderMobil2). */ body.customer-app #account .cu-page .cu-tile.violet{background:#f4f0fe;color:#6550b9} body.customer-app #account .cu-page .cu-row .cu-quote-line{display:block;min-width:0;overflow:hidden;color:var(--rv-text);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-msg .cu-recipient{display:block;margin-top:2px;white-space:nowrap} body.customer-app #account .cu-page .cu-source-ref{margin:0;color:var(--rv-muted);font:400 13px/18px var(--r-font);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-source-history .cu-history-failed{display:flex;flex-direction:column;gap:4px;margin:4px 0 12px;font:400 14px/20px var(--r-font);color:var(--rv-text)} body.customer-app #account .cu-page .cu-source-history .cu-history-failed b{font:600 15px/20px var(--r-font);color:var(--rv-ink)} body.customer-app #account .cu-page .cu-source-history .cu-older-events.r-link{display:inline-flex;align-items:center;min-height:36px;padding:0;border:0;background:none;font:500 15px/20px var(--r-font);color:var(--rv-ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer} body.customer-app #account .cu-page .cu-source-history .cu-older-events[hidden]{display:none} body.customer-app #account .cu-page .cu-source-history .cu-card-event .cu-see-chat{align-self:flex-start;margin-top:6px} /* REV-138: «Neste utsending» over the list (pause, «Stopp», «Angre»), the pause question, and the SMS that waits on the customer card. One white card on the grey page; the meta lines never break, they are cut with an ellipsis. */ body.customer-app #account .cu-page .cu-queue{display:flex;flex-direction:column;margin:0;padding:0;border:0;border-radius:12px;background:#fff;overflow:hidden;box-shadow:0 0 0 .5px var(--rv-line),0 1px 2px rgba(16,24,40,.05),0 2px 6px rgba(16,24,40,.04)} body.customer-app #account .cu-page .cu-queue-head{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;row-gap:2px;align-items:center;padding:14px 16px} body.customer-app #account .cu-page .cu-queue-title{grid-column:1;grid-row:1;min-width:0;overflow:hidden;color:var(--rv-ink);font:600 16px/22px var(--r-font);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-queue.paused .cu-queue-title::before{content:"";display:inline-block;width:8px;height:8px;margin:0 8px 2px 0;border-radius:50%;background:var(--rv-yellow);vertical-align:middle} body.customer-app #account .cu-page .cu-queue-when{display:block;grid-column:1;grid-row:2;min-width:0;margin:0;overflow:hidden;color:var(--rv-muted);font:400 13px/18px var(--r-font);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-queue-head>.r-btn{grid-column:2;grid-row:1 / span 2;height:36px;min-height:0;padding:0 14px;border-radius:8px;font:500 14px/1 var(--r-font);white-space:nowrap} body.customer-app #account .cu-page .cu-queue-note{display:flex;flex-direction:column;gap:4px;padding:0 16px 14px} body.customer-app #account .cu-page .cu-queue-note p{margin:0;color:var(--rv-text);font:400 14px/20px var(--r-font)} body.customer-app #account .cu-page .cu-queue-note .cu-queue-go{color:var(--rv-ink);font:600 15px/20px var(--r-font)} body.customer-app #account .cu-page .cu-queue-foot{margin:0;padding:10px 16px 14px;border-top:.5px solid var(--rv-line);color:var(--rv-muted);font:400 13px/18px var(--r-font)} body.customer-app #account .cu-page .cu-queue-group-n{font-weight:500;letter-spacing:0;text-transform:none} body.customer-app #account .cu-page .cu-queue-list{display:flex;flex-direction:column;border-top:.5px solid var(--rv-line)} body.customer-app #account .cu-page .cu-queue-row{display:flex;align-items:center;gap:12px;min-height:58px;padding:10px 16px} body.customer-app #account .cu-page .cu-queue-row+.cu-queue-row{border-top:.5px solid var(--rv-line)} body.customer-app #account .cu-page .cu-queue-row>.r-initials{flex:none} body.customer-app #account .cu-page .cu-queue-row>.r-who{flex:1 1 auto;min-width:0} body.customer-app #account .cu-page .cu-queue-row>.r-who>b{display:block;overflow:hidden;color:var(--rv-ink);font:500 15px/20px var(--r-font);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-queue-row>.r-who>.r-meta{display:block;margin:2px 0 0;overflow:hidden;color:var(--rv-muted);font:400 13px/18px var(--r-font);white-space:nowrap;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-queue-row>.r-btn{flex:none;height:32px;min-height:0;padding:0 12px;border-radius:8px;font:500 14px/1 var(--r-font);white-space:nowrap} body.customer-app #account .cu-page .cu-queue-group{display:flex;align-items:center;gap:8px;margin:0;padding:12px 16px 8px;border-top:.5px solid var(--rv-line);color:var(--rv-muted);font:600 13px/18px var(--r-font);letter-spacing:.4px;text-transform:uppercase;white-space:nowrap} body.customer-app #account .cu-page .cu-queue-group+.cu-queue-list{border-top:0} body.customer-app #account .cu-page .cu-queue-undo-all{margin:0 0 0 auto;padding:0;border:0;background:none;color:var(--rv-ink);font:500 14px/20px var(--r-font);letter-spacing:0;text-transform:none;text-decoration:underline;text-underline-offset:3px;cursor:pointer} body.customer-app #account .cu-page .cu-queue-more{align-self:flex-start;min-height:36px;margin:0;padding:0 16px 8px;border:0;background:none;color:var(--rv-ink);font:500 14px/20px var(--r-font);text-decoration:underline;text-underline-offset:3px;cursor:pointer} body.customer-app #account .cu-page .cu-queue-more:disabled{color:var(--rv-muted);text-decoration:none;cursor:default} body.customer-app #account .cu-page .cu-queue>.cu-feedback{margin:0;padding:0 16px 12px} body.customer-app #account .cu-page .cu-queue :is(.r-btn,.cu-queue-undo-all,.cu-queue-more):focus-visible{outline:2px solid var(--rv-focus);outline-offset:2px} body.customer-app #account .cu-page .cu-ask .cu-queue-points{display:flex;flex-direction:column;gap:6px;margin:12px 0 0;padding:0 0 0 20px;color:var(--rv-text);font:400 15px/22px var(--r-font)} body.customer-app #account .cu-page .cu-next{display:flex;flex-direction:column;gap:10px;margin:0} body.customer-app #account .cu-page .cu-next .cu-card-note{margin:0} body.customer-app #account .cu-page .cu-next-note{display:flex;flex-direction:column;gap:2px;margin:0} body.customer-app #account .cu-page .cu-next-note>b{color:var(--rv-ink);font:600 15px/22px var(--r-font)} body.customer-app #account .cu-page .cu-next-note>p{margin:0;color:var(--rv-text);font:400 15px/22px var(--r-font)} body.customer-app #account .cu-page .cu-next-note>p.cu-next-back{color:var(--rv-muted);white-space:normal} body.customer-app #account .cu-page .cu-next .cu-next-when{align-self:flex-end;margin:0 4px -4px;color:var(--rv-muted);font:400 13px/18px var(--r-font);white-space:nowrap} body.customer-app #account .cu-page .cu-next>.r-btn{align-self:flex-start;height:40px;min-height:0;padding:0 16px;border-radius:10px;font:500 15px/1 var(--r-font)} body.customer-app #account .cu-page .cu-next>.r-btn .r-icon{width:16px;height:16px} #account button.cu-toast-go{border:0;background:none;font:inherit;font-weight:600;cursor:pointer} /* Before the queue comes: grey shapes in the empty card's places, so it stands as tall as the empty card. When it could not be read: «Kunne ikke hentes» and «Prøv igjen» where the pause button stands. */ body.customer-app #account .cu-page .cu-queue-wait .cu-queue-title,body.customer-app #account .cu-page .cu-queue-wait .cu-queue-when{display:flex;align-items:center} body.customer-app #account .cu-page .cu-queue-wait .cu-queue-title{height:22px} body.customer-app #account .cu-page .cu-queue-wait .cu-queue-when{height:18px} body.customer-app #account .cu-page .cu-queue-skel-title{width:132px;height:14px} body.customer-app #account .cu-page .cu-queue-skel-when{width:180px;height:10px} body.customer-app #account .cu-page .cu-queue-skel-btn{grid-column:2;grid-row:1 / span 2;width:118px;height:36px;border-radius:8px} body.customer-app #account .cu-page .cu-queue-retry .r-icon{width:16px;height:16px} body.customer-app #account .cu-page .cu-queue-head>.cu-queue-retry{display:inline-flex;align-items:center;gap:6px} /* A two-part meta line: «Faktura 4. nov. · eldre enn sju dager» on a computer, two lines on a phone. */ body.customer-app #account .cu-page .cu-queue-row>.r-who>.r-meta>span{white-space:nowrap} /* The history's tiles are white with a hairline and a coloured icon, never a light colour behind it. */ body.customer-app #account .cu-page .cu-card-timeline .cu-tile{background:#fff;box-shadow:0 0 0 .5px var(--rv-line)} @media (max-width:820px){ body.customer-app #account .cu-page .cu-queue-head{row-gap:6px} body.customer-app #account .cu-page .cu-queue-head>.r-btn{grid-row:1;padding:0 12px} body.customer-app #account .cu-page .cu-queue-when{grid-column:1 / -1} body.customer-app #account .cu-page .cu-queue-count{display:none} body.customer-app #account .cu-page .cu-queue-skel-btn{grid-row:1} body.customer-app #account .cu-page .cu-queue-sep{display:none} body.customer-app #account .cu-page .cu-queue-row>.r-who>.r-meta>.cu-queue-meta-2{display:block;overflow:hidden;text-overflow:ellipsis} body.customer-app #account .cu-page .cu-queue-row>.r-who>.r-meta>.cu-queue-meta-2::first-letter{text-transform:uppercase} /* A finger's room on a phone: every button in «Neste utsending» and on the card is 44 px high, and those in a row alike. */ body.customer-app #account .cu-page .cu-queue-head>.r-btn,body.customer-app #account .cu-page .cu-queue-skel-btn,body.customer-app #account .cu-page .cu-queue-row>.r-btn,body.customer-app #account .cu-page .cu-next>.r-btn,body.customer-app #account .cu-page .cu-note-add{height:44px} body.customer-app #account .cu-page .cu-queue-more{min-height:44px;padding-bottom:0} body.customer-app #account .cu-page .cu-queue-undo-all{min-height:44px;margin-block:-12px} #account .cu-toast-go{min-height:44px;margin:-12px 0;padding:0} }