body.task-addressbook{ --cmc-blue: #1a73e8; --cmc-blue-dark: #1557b0; --cmc-blue-soft: #e8f0fe; --cmc-blue-strong: #0b57d0; --cmc-selected: #d3e3fd; --cmc-surface: #f7f9fc; --cmc-surface-2: #f1f3f4; --cmc-panel: #ffffff; --cmc-text: #202124; --cmc-muted: #5f6368; --cmc-muted-2: #80868b; --cmc-border: #dadce0; --cmc-border-soft: #f1f3f4; --cmc-shadow: 0 1px 2px rgba(22, 41, 67, .08), 0 2px 8px rgba(22, 41, 67, .06)} html.dark-mode body.task-addressbook{ --cmc-blue: #8ab4f8; --cmc-blue-dark: #aecbfa; --cmc-blue-soft: #17375d; --cmc-blue-strong: #8ab4f8; --cmc-selected: #004a77; --cmc-surface: #202124; --cmc-surface-2: #292a2d; --cmc-panel: #171d25; --cmc-text: #e8eaed; --cmc-muted: #9aa0a6; --cmc-muted-2: #80868b; --cmc-border: #3c4043; --cmc-border-soft: #2d2e30; --cmc-shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 2px 8px rgba(0, 0, 0, .3)} body.task-addressbook:not(.clippymail-mobile-shell) #layout > div > .header{ height: 44px !important; min-height: 44px !important; max-height: 44px !important; line-height: 44px !important; padding: 0 8px !important; font-size: 13px !important; font-weight: 500 !important; border-bottom: 1px solid var(--cmc-border) !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout > div > .header a.button:before{ height: 44px !important; line-height: 44px !important; font-size: 1.1rem !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout > div > .header .header-title{ font-size: 13px !important; font-weight: 500 !important; color: var(--cmc-text) !important} body.task-addressbook:not(.clippymail-mobile-shell) .menu.toolbar li, body.task-addressbook:not(.clippymail-mobile-shell) .menu.toolbar a{ height: 44px !important} body.task-addressbook:not(.clippymail-mobile-shell) #addressbooktoolbar a{ padding: 0 6px !important; min-width: 32px !important; max-width: 44px !important} body.task-addressbook:not(.clippymail-mobile-shell) #addressbooktoolbar a:before{ height: 44px !important; line-height: 44px !important; font-size: 15px !important} body.task-addressbook:not(.clippymail-mobile-shell) #addressbooktoolbar a .inner{ display: none !important} body.task-addressbook:not(.clippymail-mobile-shell) #addressbooktoolbar a.create{ display: inline-flex !important; align-items: center !important; gap: 6px !important; height: 34px !important; margin: 5px 6px 5px 2px !important; padding: 0 16px 0 12px !important; min-width: 0 !important; max-width: none !important; border-radius: 17px !important; background: var(--cmc-blue) !important; color: #fff !important; font-weight: 500 !important; box-shadow: var(--cmc-shadow) !important} html.dark-mode body.task-addressbook:not(.clippymail-mobile-shell) #addressbooktoolbar a.create{ color: #202124 !important} body.task-addressbook:not(.clippymail-mobile-shell) #addressbooktoolbar a.create:before{ height: 34px !important; line-height: 34px !important; color: inherit !important} body.task-addressbook:not(.clippymail-mobile-shell) #addressbooktoolbar a.create .inner{ display: inline !important; color: inherit !important; font-size: 13px !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-list .searchbar, body.task-addressbook:not(.clippymail-mobile-shell) #layout-list .searchbar.menu{ height: 48px !important; min-height: 48px !important; max-height: 48px !important; padding: 6px 10px !important; margin: 0 !important; border-bottom: 1px solid var(--cmc-border) !important; background: transparent !important; display: flex !important; align-items: center !important; overflow: hidden !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-list .searchbar form{ flex: 1 !important; display: flex !important; align-items: center !important; height: 36px !important; border-radius: 18px !important; background: var(--cmc-surface-2) !important; padding: 0 6px 0 10px !important; transition: box-shadow .15s ease !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-list .searchbar form:focus-within{ background: var(--cmc-panel) !important; box-shadow: var(--cmc-shadow) !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-list .searchbar form:before{ height: 36px !important; line-height: 36px !important; font-size: 14px !important; color: var(--cmc-muted) !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-list .searchbar input{ height: 34px !important; line-height: 34px !important; font-size: 13px !important; padding: 0 6px !important; border: none !important; background: transparent !important; color: var(--cmc-text) !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-list .searchbar a{ height: 36px !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-list .searchbar a:before{ height: 36px !important; line-height: 36px !important; font-size: 13px !important} body.task-addressbook:not(.clippymail-mobile-shell) #searchmenu{ padding: 8px 14px 10px !important; border-bottom: 1px solid var(--cmc-border) !important; background: var(--cmc-surface) !important} body.task-addressbook:not(.clippymail-mobile-shell) #searchmenu .formcontent{ padding: 0 !important} body.task-addressbook:not(.clippymail-mobile-shell) #searchmenu .proplist{ display: flex !important; flex-wrap: wrap !important; gap: 2px 12px !important; padding: 0 !important; margin: 0 !important} body.task-addressbook:not(.clippymail-mobile-shell) #searchmenu .proplist li{ line-height: 1.5rem !important; margin-bottom: 0 !important} body.task-addressbook:not(.clippymail-mobile-shell) #searchmenu .proplist li label{ font-size: 12px !important; color: var(--cmc-muted) !important; line-height: 1.5rem !important} body.task-addressbook:not(.clippymail-mobile-shell) #searchmenu .formbuttons{ margin-top: 6px !important; padding: 0 !important} body.task-addressbook:not(.clippymail-mobile-shell) #searchmenu .formbuttons button{ height: 28px !important; padding: 0 16px !important; font-size: 12px !important; line-height: 28px !important; border-radius: 14px !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-sidebar{ min-width: 200px !important; max-width: 224px !important; flex: 2 !important; background: var(--cmc-surface) !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-sidebar > .header{ border-bottom: 1px solid var(--cmc-border) !important; background: transparent !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-sidebar .header .header-title{ text-align: left !important; padding-left: 12px !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .08em !important; color: var(--cmc-muted-2) !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-sidebar .scroller{ padding: 6px 0 !important} body.task-addressbook:not(.clippymail-mobile-shell) #directorylist li > a, body.task-addressbook:not(.clippymail-mobile-shell) #layout-sidebar .treelist li > a, body.task-addressbook:not(.clippymail-mobile-shell) #savedsearchlist li > a{ line-height: 34px !important; font-size: 13px !important; padding: 0 12px !important; color: var(--cmc-text) !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-sidebar .listing li{ border-color: transparent !important; line-height: 34px !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-sidebar .listing li a:before{ margin-right: 10px !important; font-size: 14px !important; color: var(--cmc-muted) !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-sidebar .listing li a:hover{ background: var(--cmc-surface-2) !important; border-radius: 0 17px 17px 0 !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-sidebar .listing li.selected > a, body.task-addressbook:not(.clippymail-mobile-shell) #layout-sidebar .treelist li.selected > a, body.task-addressbook:not(.clippymail-mobile-shell) #layout-sidebar .treelist li.selected > div > a{ background-color: var(--cmc-selected) !important; color: var(--cmc-blue-strong) !important; border-radius: 0 17px 17px 0 !important; font-weight: 500 !important; border-left: 0 !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-sidebar .listing li.selected > a:before{ color: var(--cmc-blue-strong) !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-list{ min-width: 300px !important; flex: 3 !important; background: var(--cmc-panel) !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-list > .header{ border-bottom: none !important} body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) #contacts-table, body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) .contactlist, body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) #contacts-table tbody, body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) .contactlist tbody{ display: block !important; width: 100% !important} body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) #contacts-table tbody tr, body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) .contactlist tbody tr{ display: flex !important; flex-wrap: wrap !important; align-items: center !important; margin: 1px 8px !important; border: none !important; border-radius: 12px !important; cursor: pointer !important; background: transparent !important} body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) #contacts-table tbody tr:hover, body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) .contactlist tbody tr:hover{ background: var(--cmc-surface-2) !important} body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) #contacts-table tbody tr.selected, body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) .contactlist tbody tr.selected{ background: var(--cmc-selected) !important} body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) #contacts-table tbody tr.selected td, body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) .contactlist tbody tr.selected td{ background: transparent !important; color: var(--cmc-text) !important} body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) #contacts-table tbody tr.cm-letter-start:before, body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) .contactlist tbody tr.cm-letter-start:before{ content: attr(data-cm-letter); flex: 0 0 100%; padding: 10px 12px 2px; font-size: 12px; font-weight: 600; color: var(--cmc-blue); cursor: default} body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) #contacts-table tbody tr td, body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) .contactlist tbody tr td{ border: none !important; background: transparent !important} body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) #contacts-table tbody tr td.selection, body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) .contactlist tbody tr td.selection{ display: flex !important; align-items: center !important; flex: 0 0 auto !important; padding: 0 0 0 10px !important} body.cm-addressbook-enhanced #contacts-table tbody tr td.selection input[type="checkbox"], body.cm-addressbook-enhanced .contactlist tbody tr td.selection input[type="checkbox"]{ -webkit-appearance: none !important; appearance: none !important; display: inline-grid !important; place-content: center !important; width: 16px !important; height: 16px !important; min-width: 16px !important; min-height: 16px !important; margin: 0 !important; border: 1.5px solid #9aa0a6 !important; border-radius: 4px !important; background: #fff !important; box-shadow: none !important; cursor: pointer !important; transition: background .12s ease, border-color .12s ease, box-shadow .12s ease !important} body.cm-addressbook-enhanced #contacts-table tbody tr td.selection input[type="checkbox"]::after, body.cm-addressbook-enhanced .contactlist tbody tr td.selection input[type="checkbox"]::after{ content: '' !important; width: 4px !important; height: 8px !important; border: solid #fff !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) scale(0) !important; transform-origin: center !important; transition: transform .1s ease !important} body.cm-addressbook-enhanced #contacts-table tbody tr td.selection input[type="checkbox"]:hover, body.cm-addressbook-enhanced .contactlist tbody tr td.selection input[type="checkbox"]:hover{ border-color: var(--cmc-blue, #1a73e8) !important; box-shadow: 0 0 0 3px rgba(26, 115, 232, .12) !important} body.cm-addressbook-enhanced #contacts-table tbody tr td.selection input[type="checkbox"]:focus-visible, body.cm-addressbook-enhanced .contactlist tbody tr td.selection input[type="checkbox"]:focus-visible{ outline: none !important; border-color: var(--cmc-blue, #1a73e8) !important; box-shadow: 0 0 0 3px rgba(26, 115, 232, .24) !important} body.cm-addressbook-enhanced #contacts-table tbody tr td.selection input[type="checkbox"]:checked, body.cm-addressbook-enhanced .contactlist tbody tr td.selection input[type="checkbox"]:checked{ border-color: #1a73e8 !important; background: #1a73e8 !important} body.cm-addressbook-enhanced #contacts-table tbody tr td.selection input[type="checkbox"]:checked::after, body.cm-addressbook-enhanced .contactlist tbody tr td.selection input[type="checkbox"]:checked::after{ transform: rotate(45deg) scale(1) !important} html.dark-mode body.cm-addressbook-enhanced #contacts-table tbody tr td.selection input[type="checkbox"], html.dark-mode body.cm-addressbook-enhanced .contactlist tbody tr td.selection input[type="checkbox"]{ border-color: #9aa0a6 !important; background: #202124 !important} html.dark-mode body.cm-addressbook-enhanced #contacts-table tbody tr td.selection input[type="checkbox"]:checked, html.dark-mode body.cm-addressbook-enhanced .contactlist tbody tr td.selection input[type="checkbox"]:checked{ border-color: #8ab4f8 !important; background: #8ab4f8 !important} body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) #contacts-table tbody tr td.name, body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) .contactlist tbody tr td.name{ display: flex !important; align-items: center !important; flex: 1 1 0 !important; flex-wrap: nowrap !important; gap: 0 12px !important; min-width: 0 !important; min-height: 52px !important; padding: 6px 10px 6px 12px !important; font-size: 14px !important} body.cm-addressbook-enhanced .cm-contact-avatar{ display: inline-grid !important; place-items: center !important; flex: 0 0 auto !important; width: 38px !important; height: 38px !important; margin-right: 0 !important; border-radius: 50% !important; background: hsl(calc(var(--cm-avatar-hue, 210) * 1deg), 62%, 44%) !important; color: #fff !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: .02em !important} body.cm-addressbook-enhanced .cm-contact-main{ display: flex !important; flex-direction: column !important; justify-content: center !important; flex: 1 1 0 !important; min-width: 0 !important; gap: 1px !important} body.cm-addressbook-enhanced .cm-contact-name{ font-weight: 500 !important; color: var(--cmc-text, #202124) !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; line-height: 1.35 !important} body.cm-addressbook-enhanced .cm-contact-secondary{ flex: none !important; padding-left: 0 !important; color: var(--cmc-muted, #5f6368) !important; font-size: 12.5px !important; line-height: 1.3 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important} body.cm-addressbook-enhanced .cm-contact-secondary:empty{ display: none !important} body.cm-addressbook-enhanced .cm-contact-compose{ flex: 0 0 auto !important; margin-left: auto !important; width: 32px !important; height: 32px !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--cmc-muted, #5f6368) !important; font-size: 15px !important; line-height: 32px !important; opacity: 0; transition: opacity .12s ease, background .12s ease !important} body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) #contacts-table tbody tr:hover .cm-contact-compose, body.cm-addressbook-enhanced:not(.clippymail-mobile-shell) .contactlist tbody tr:hover .cm-contact-compose, body.cm-addressbook-enhanced .cm-contact-compose:focus{ opacity: 1} body.cm-addressbook-enhanced .cm-contact-compose:hover{ background: var(--cmc-blue-soft, #e8f0fe) !important; color: var(--cmc-blue-dark, #1557b0) !important} body.cm-addressbook-enhanced.clippymail-mobile-shell .cm-contact-compose{ opacity: 1} body.task-addressbook .cm-contact-actions{ display: inline-flex !important; align-items: center !important; gap: 6px !important; margin-left: 10px !important} body.task-addressbook .cm-contact-actions button, body.task-addressbook .cm-contact-actions a{ border: 1px solid var(--cmc-border) !important; border-radius: 15px !important; padding: 5px 13px !important; background: var(--cmc-panel) !important; color: var(--cmc-muted) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important} body.task-addressbook .cm-contact-actions button:hover, body.task-addressbook .cm-contact-actions a:hover{ background: var(--cmc-blue-soft) !important; border-color: transparent !important; color: var(--cmc-blue-dark) !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-list > .footer, body.task-addressbook:not(.clippymail-mobile-shell) .menu.pagenav{ height: 32px !important; min-height: 32px !important; line-height: 32px !important; font-size: 11px !important; border-top: 1px solid var(--cmc-border-soft) !important; color: var(--cmc-muted) !important} body.task-addressbook:not(.clippymail-mobile-shell) .menu.pagenav a{ height: 32px !important} body.task-addressbook:not(.clippymail-mobile-shell) .menu.pagenav a:before{ line-height: 32px !important} body.task-addressbook.cm-contact-infinite-active .menu.pagenav{ justify-content: center !important} body.task-addressbook.cm-contact-infinite-active .menu.pagenav a, body.task-addressbook.cm-contact-infinite-active .menu.pagenav input{ display: none !important} body.task-addressbook.cm-contact-infinite-active .menu.pagenav .pagenav-text{ flex: 1 1 auto !important; text-align: center !important} #cm-contact-infinite-sentinel{ width: 100%; height: 1px; pointer-events: none} .cm-contact-infinite-status{ display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 6px 12px; color: var(--cmc-muted, #5f6368); font-size: 12px; text-align: center} .cm-contact-infinite-status[hidden]{ display: none !important} .cm-contact-infinite-retry{ border: 1px solid var(--cmc-border, #dadce0); border-radius: 14px; padding: 3px 10px; background: var(--cmc-panel, #fff); color: var(--cmc-blue-dark, #1557b0); font: inherit; font-weight: 500} body.task-addressbook:not(.clippymail-mobile-shell) #layout-content{ background: var(--cmc-surface) !important} body.task-addressbook:not(.clippymail-mobile-shell) #layout-content > .header{ border-bottom: 1px solid var(--cmc-border) !important; background: transparent !important} body.task-addressbook .contact-header{ display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 28px 16px 20px !important; margin: 0 !important; border-bottom: 1px solid var(--cmc-border-soft, #f1f3f4) !important} body.task-addressbook .contact-header .contact-photo{ min-width: auto !important; margin: 0 !important} body.task-addressbook #contactpic{ position: relative !important; width: 84px !important; height: 84px !important; border-radius: 50% !important; overflow: hidden !important; margin: 0 auto 12px !important; background: hsl(calc(var(--cm-avatar-hue, 210) * 1deg), 62%, 44%) !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: var(--cmc-shadow, 0 1px 2px rgba(22, 41, 67, .08)) !important} body.task-addressbook #contactpic img{ position: relative !important; z-index: 1 !important; max-width: 84px !important; max-height: 84px !important; border-radius: 50% !important; object-fit: cover !important} body.task-addressbook .cm-contact-hero-initials{ position: absolute !important; inset: 0 !important; display: grid !important; place-items: center !important; color: #fff !important; font-size: 30px !important; font-weight: 500 !important} body.task-addressbook #contacthead{ margin: 0 !important; text-align: center !important} body.task-addressbook #contacthead .names{ margin-bottom: 2px !important} body.task-addressbook #contacthead .names span.namefield{ font-size: 22px !important; font-weight: 500 !important; letter-spacing: -.01em !important; color: var(--cmc-text, #202124) !important; line-height: 1.3 !important} body.task-addressbook #contacthead.readonly .source.row{ font-size: 12px !important; color: var(--cmc-muted, #5f6368) !important; margin-bottom: 0 !important} body.task-addressbook .cm-contact-hero-actions{ display: flex !important; justify-content: center !important; gap: 18px !important; margin-top: 16px !important} body.task-addressbook .cm-contact-hero-action{ display: flex !important; flex-direction: column !important; align-items: center !important; gap: 5px !important; border: 0 !important; padding: 4px 6px !important; background: transparent !important; color: var(--cmc-blue-dark, #1557b0) !important; font-size: 11.5px !important; font-weight: 500 !important; cursor: pointer !important} body.task-addressbook .cm-contact-hero-action-disc{ display: grid !important; place-items: center !important; width: 42px !important; height: 42px !important; border-radius: 50% !important; background: var(--cmc-blue-soft, #e8f0fe) !important; font-size: 17px !important; transition: transform .1s ease !important} body.task-addressbook .cm-contact-hero-action:hover .cm-contact-hero-action-disc{ transform: scale(1.07) !important} body.task-addressbook .cm-contact-hero-action.is-primary .cm-contact-hero-action-disc{ background: var(--cmc-blue, #1a73e8) !important; color: #fff !important} body.task-addressbook .formcontent{ padding: 14px 16px 20px !important} body.task-addressbook .propform.grouped{ width: 100% !important; max-width: 640px !important; margin: 0 auto !important} body.task-addressbook .propform.grouped fieldset{ border: 1px solid var(--cmc-border, #dadce0) !important; border-radius: 14px !important; background: var(--cmc-panel, #fff) !important; padding: 12px 20px 14px !important; margin: 0 0 12px !important} body.task-addressbook .propform.grouped legend{ float: none !important; width: auto !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .07em !important; color: var(--cmc-muted-2, #80868b) !important; margin-bottom: 4px !important; padding: 0 !important; border: none !important} body.task-addressbook .propform.grouped .row.input-group{ margin-bottom: 1px !important; padding: 4px 0 !important; border-top: 1px solid var(--cmc-border-soft, #f1f3f4) !important} body.task-addressbook .propform.grouped .row.input-group:first-of-type{ border-top: none !important} body.task-addressbook .propform.grouped .row.input-group > :first-child{ min-width: 5.5rem !important} body.task-addressbook .propform.grouped .row.input-group > :first-child label{ font-size: 12px !important; color: var(--cmc-muted, #5f6368) !important} body.task-addressbook .propform.grouped .form-control-plaintext{ font-size: 14px !important; color: var(--cmc-text, #202124) !important; padding: 2px 0 !important; line-height: 1.5 !important; overflow-wrap: anywhere !important} body.task-addressbook .propform a{ color: var(--cmc-blue, #1a73e8) !important; text-decoration: none !important; overflow-wrap: anywhere !important} body.task-addressbook .propform a:hover{ text-decoration: underline !important} body.task-addressbook .formbuttons{ padding: 12px 20px !important; text-align: center !important} body.task-addressbook .formbuttons .btn{ border-radius: 18px !important; padding: 6px 22px !important; font-size: 13px !important; font-weight: 500 !important} body.task-addressbook .cm-contact-recent-conversations{ max-width: 640px !important; margin: 0 auto 12px !important; padding: 14px 20px 16px !important; border: 1px solid var(--cmc-border, #dadce0) !important; border-radius: 14px !important; background: var(--cmc-panel, #fff) !important} body.task-addressbook .cm-contact-recent-conversations h3{ margin: 0 0 4px !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: .07em !important; color: var(--cmc-muted-2, #80868b) !important} body.task-addressbook .cm-contact-recent-conversations p{ margin: 0 0 10px !important; font-size: 12.5px !important; color: var(--cmc-muted, #5f6368) !important} body.task-addressbook .cm-contact-recent-links{ display: flex !important; flex-wrap: wrap !important; gap: 8px !important} body.task-addressbook .cm-contact-recent-links a{ border-radius: 999px !important; background: var(--cmc-blue-soft, #e8f0fe) !important; color: var(--cmc-blue-dark, #1557b0) !important; padding: 6px 12px !important; text-decoration: none !important; font-size: 12px !important; overflow-wrap: anywhere !important} body.task-addressbook .cm-contact-search-toast, body.task-addressbook .cm-contact-cleanup-panel{ border: 1px solid var(--cmc-border) !important; border-radius: 14px !important; background: var(--cmc-panel) !important; color: var(--cmc-text) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important} html.dark-mode body.task-addressbook:not(.clippymail-mobile-shell) #layout-list{ background: var(--cmc-surface) !important} html.dark-mode body.cm-addressbook-enhanced .cm-contact-avatar{ background: hsl(calc(var(--cm-avatar-hue, 210) * 1deg), 45%, 38%) !important} html.dark-mode body.task-addressbook #contactpic{ background: hsl(calc(var(--cm-avatar-hue, 210) * 1deg), 45%, 38%) !important} html.dark-mode body.task-addressbook .cm-contact-hero-action.is-primary .cm-contact-hero-action-disc{ color: #202124 !important} @media screen and (max-width: 768px){ body.task-addressbook.clippymail-mobile-shell{ --cmp-bg: #ffffff; --cmp-pill: #edf2fa; --cmp-pill-focus: #ffffff; --cmp-row-hover: #f1f3f4; --cmp-icon: #444746; --cmp-divider: #eceff3; --cmp-fab-bg: #c2e7ff; --cmp-fab-text: #001d35} html.dark-mode body.task-addressbook.clippymail-mobile-shell{ --cmp-bg: #11161d; --cmp-pill: #202833; --cmp-pill-focus: #26303c; --cmp-row-hover: #1a212b; --cmp-icon: #c4c7c5; --cmp-divider: #1d242e; --cmp-fab-bg: #004a77; --cmp-fab-text: #c2e7ff} html body.task-addressbook.clippymail-mobile-shell, html body.task-addressbook.clippymail-mobile-shell #layout{ background: var(--cmp-bg) !important} html body.task-addressbook.clippymail-mobile-shell #layout-list, html.dark-mode body.task-addressbook.clippymail-mobile-shell #layout-list{ position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: auto !important; bottom: auto !important; height: calc(100dvh - var(--clippymail-mobile-bottomnav, 52px)) !important; padding: 0 !important; background: var(--cmp-bg) !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .header{ position: relative !important; top: auto !important; flex: 0 0 56px !important; height: 56px !important; min-height: 56px !important; margin: 0 !important; padding: 0 4px 0 56px !important; justify-content: flex-end !important; background: var(--cmp-bg) !important; border: 0 !important; box-shadow: none !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .header a.task-menu-button, html body.task-addressbook.clippymail-mobile-shell #layout-list > .header a.back-sidebar-button, html body.task-addressbook.clippymail-mobile-shell #layout-list > .header .header-title, html body.task-addressbook.clippymail-mobile-shell #layout-list > .header a.toolbar-list-button{ display: none !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .header a.toolbar-menu-button{ display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--cmp-icon) !important; box-shadow: none !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .header a.toolbar-menu-button:before{ position: static !important; height: auto !important; margin: 0 !important; color: var(--cmp-icon) !important; font-size: 18px !important; line-height: 1 !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .header a.toolbar-menu-button:active{ background: var(--cmp-row-hover) !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .searchbar{ position: absolute !important; top: 6px !important; left: 58px !important; right: 52px !important; z-index: 6 !important; display: flex !important; align-items: center !important; gap: 0 !important; box-sizing: border-box !important; height: 44px !important; min-height: 44px !important; max-height: 44px !important; margin: 0 !important; padding: 0 2px 0 0 !important; border: 1px solid transparent !important; border-radius: 22px !important; background: var(--cmp-pill) !important; box-shadow: none !important; overflow: hidden !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .searchbar:focus-within, html body.task-addressbook.clippymail-mobile-shell #layout-list > .searchbar.open{ background: var(--cmp-pill-focus) !important; border-color: var(--cmc-blue) !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .searchbar form{ order: 1 !important; flex: 1 1 auto !important; min-width: 0 !important; height: 42px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .searchbar form:before{ display: none !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .searchbar input#searchform{ width: 100% !important; height: 42px !important; min-height: 42px !important; margin: 0 !important; padding: 0 4px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--cmc-text) !important; font-size: 16px !important; line-height: 42px !important; box-shadow: none !important; outline: none !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .searchbar input#searchform::placeholder{ color: var(--cmc-muted) !important; opacity: 1 !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .searchbar a.button{ position: static !important; display: inline-flex !important; flex: 0 0 40px !important; align-items: center !important; justify-content: center !important; width: 40px !important; height: 42px !important; min-width: 40px !important; min-height: 42px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--cmp-icon) !important; box-shadow: none !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .searchbar a.button:before{ margin: 0 !important; color: var(--cmp-icon) !important; font-size: 16px !important; line-height: 42px !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .searchbar a.button .inner{ display: none !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .searchbar a.search{ order: 0 !important; flex-basis: 44px !important; width: 44px !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .searchbar a.reset{ order: 2 !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .searchbar:not(.active) a.reset{ display: none !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .searchbar a.options{ order: 3 !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > #searchmenu:not(.hidden){ flex: 1 1 auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 8px 16px 12px !important; background: var(--cmp-bg) !important; border-bottom: 1px solid var(--cmp-divider) !important; overflow: auto !important} html body.task-addressbook.clippymail-mobile-shell #layout-list > .scroller{ flex: 1 1 auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 0 88px !important; background: var(--cmp-bg) !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table{ width: 100% !important; margin: 0 !important; border-collapse: collapse !important; border-spacing: 0 !important; background: transparent !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table tbody tr{ background: transparent !important; border: 0 !important; box-shadow: none !important; outline: none !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table tbody tr td{ border: 0 !important; background: transparent !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table tbody tr:active td, html body.task-addressbook.clippymail-mobile-shell #contacts-table tbody tr.selected td{ background: var(--cmp-row-hover) !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table tbody tr:first-child td{ padding-top: 0 !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table tbody tr td.name{ display: flex !important; flex-wrap: nowrap !important; align-items: center !important; gap: 16px !important; min-height: 64px !important; padding: 8px 4px 8px 16px !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table tbody tr td.name:before{ display: none !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table tbody tr td.name:focus{ outline: none !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table:not(.withselection) tbody tr td.selection{ display: none !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table.withselection tbody tr td.selection{ width: 44px !important; padding: 0 0 0 12px !important; vertical-align: middle !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table .cm-contact-avatar{ flex: 0 0 40px !important; width: 40px !important; height: 40px !important; margin: 0 !important; font-size: 15px !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table .cm-contact-main{ flex: 1 1 auto !important; min-width: 0 !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table .cm-contact-name, html body.task-addressbook.clippymail-mobile-shell #contacts-table .cm-contact-secondary{ display: block !important; overflow: hidden !important; white-space: nowrap !important; text-overflow: ellipsis !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table .cm-contact-name{ color: var(--cmc-text) !important; font-size: 16px !important; font-weight: 400 !important; line-height: 22px !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table .cm-contact-secondary{ color: var(--cmc-muted) !important; font-size: 13px !important; line-height: 18px !important} html body.task-addressbook.clippymail-mobile-shell #contacts-table .cm-contact-compose{ flex: 0 0 44px !important; width: 44px !important; height: 44px !important; min-height: 44px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: transparent !important; color: var(--cmp-icon) !important; font-size: 17px !important} html body.task-addressbook.clippymail-mobile-shell.cm-contact-infinite-active #layout-list > .pagenav{ display: none !important} #cm-contacts-fab{ display: none !important} html:not(.iframe) body.task-addressbook.clippymail-mobile-shell:not(.cm-addressbook-detail-open):not(.sidebar-open):not(.cm-more-sheet-open):not(:has(#layout-list > .searchbar.open)) #cm-contacts-fab{ position: fixed !important; right: 16px !important; bottom: calc(var(--clippymail-mobile-bottomnav, 52px) + 16px) !important; z-index: 1250 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 56px !important; height: 56px !important; min-height: 56px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 16px !important; background: var(--cmp-fab-bg) !important; color: var(--cmp-fab-text) !important; font: 400 30px/1 'Google Sans', Roboto, sans-serif !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15) !important; cursor: pointer !important} html body.task-addressbook.clippymail-mobile-shell #layout-content:not(.hidden){ top: 0 !important; bottom: var(--clippymail-mobile-bottomnav, 52px) !important; height: auto !important; max-height: none !important; border-radius: 0 !important; background: var(--cmp-bg) !important} html body.task-addressbook.clippymail-mobile-shell #layout-content > .iframe-wrapper{ flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: var(--cmp-bg) !important} html body.task-addressbook.clippymail-mobile-shell #layout-content #contact-frame{ height: 100% !important; max-height: none !important; background: var(--cmp-bg) !important} html body.task-addressbook.clippymail-mobile-shell .footer.menu.toolbar.content-frame-navigation:has(a.edit){ left: auto !important; right: 16px !important; bottom: calc(var(--clippymail-mobile-bottomnav, 52px) + 16px) !important; width: auto !important; height: auto !important; min-height: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; overflow: visible !important} html body.task-addressbook.clippymail-mobile-shell .footer.content-frame-navigation:has(a.edit) .buttons{ display: flex !important; overflow: visible !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important} html body.task-addressbook.clippymail-mobile-shell .footer.content-frame-navigation a.button.edit{ display: inline-flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: auto !important; min-width: 0 !important; height: 56px !important; min-height: 56px !important; margin: 0 !important; padding: 0 20px 0 18px !important; border: 0 !important; border-radius: 16px !important; background: var(--cmp-fab-bg) !important; color: var(--cmp-fab-text) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15) !important; text-decoration: none !important} html body.task-addressbook.clippymail-mobile-shell .footer.content-frame-navigation a.button.edit:before{ position: static !important; display: inline-block !important; width: auto !important; height: auto !important; margin: 0 !important; color: var(--cmp-fab-text) !important; font-size: 17px !important; line-height: 1 !important} html body.task-addressbook.clippymail-mobile-shell .footer.content-frame-navigation a.button.edit .inner{ position: static !important; display: inline !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; clip: auto !important; clip-path: none !important; overflow: visible !important; color: var(--cmp-fab-text) !important; font: 500 15px/1 'Google Sans', Roboto, sans-serif !important; letter-spacing: .01em !important; white-space: nowrap !important} html body.task-addressbook.clippymail-mobile-shell #cm-addressbook-mobile-back{ border-color: transparent !important; border-radius: 50% !important; background: var(--cmp-pill) !important; color: var(--cmc-text) !important; box-shadow: none !important} html.dark-mode.iframe.layout-phone:has(> body.task-addressbook){ background: #11161d !important} html.iframe.layout-phone body.task-addressbook.action-show{ padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important} html.iframe.layout-phone body.task-addressbook.action-show .contact-header{ padding: 20px 16px 20px !important; border-bottom: 0 !important} html.iframe.layout-phone body.task-addressbook .formcontent > ul.nav-tabs:not(:has(> li + li)){ display: none !important} html.iframe.layout-phone body.task-addressbook .formcontent > ul.nav-tabs{ display: flex !important; gap: 4px !important; margin: 4px 0 12px !important; padding: 0 !important; border: 0 !important; border-bottom: 1px solid var(--cmc-border-soft) !important; overflow-x: auto !important; scrollbar-width: none !important} html.iframe.layout-phone body.task-addressbook .formcontent > ul.nav-tabs .nav-link{ display: block !important; margin: 0 !important; padding: 10px 14px !important; border: 0 !important; border-bottom: 3px solid transparent !important; border-radius: 0 !important; background: transparent !important; color: var(--cmc-muted) !important; font: 500 14px/1.2 'Google Sans', Roboto, sans-serif !important; text-decoration: none !important; white-space: nowrap !important} html.iframe.layout-phone body.task-addressbook .formcontent > ul.nav-tabs .nav-link.active{ color: var(--cmc-blue) !important; border-bottom-color: var(--cmc-blue) !important} html.iframe.layout-phone body.task-addressbook .propform.grouped fieldset, html.iframe.layout-phone body.task-addressbook fieldset.propform.grouped > div > fieldset, html.iframe.layout-phone body.task-addressbook .cm-contact-recent-conversations{ display: block !important; min-width: 0 !important; margin: 0 0 12px !important; padding: 14px 16px 12px !important; border: 1px solid var(--cmc-border-soft) !important; border-radius: 16px !important; background: var(--cmc-panel) !important; box-shadow: none !important} html.iframe.layout-phone body.task-addressbook .propform.grouped fieldset > legend{ float: left !important; display: block !important; width: 100% !important; margin: 0 0 6px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: var(--cmc-muted-2) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .07em !important; line-height: 16px !important; text-transform: uppercase !important} html.iframe.layout-phone body.task-addressbook .propform.grouped fieldset > legend + *{ clear: both !important} html.iframe.layout-phone body.task-addressbook .propform.grouped .row.input-group{ display: flex !important; flex-wrap: nowrap !important; align-items: baseline !important; gap: 12px !important; margin: 0 !important; padding: 8px 0 !important} html.iframe.layout-phone body.task-addressbook .propform.grouped .row.input-group > *{ width: auto !important; max-width: none !important; padding: 0 !important} html.iframe.layout-phone body.task-addressbook .propform.grouped .row.input-group > :first-child{ flex: 0 0 72px !important; min-width: 72px !important} html.iframe.layout-phone body.task-addressbook .propform.grouped .row.input-group > :last-child{ flex: 1 1 auto !important; min-width: 0 !important} html.iframe.layout-phone body.task-addressbook .propform.grouped .row.input-group label{ margin: 0 !important; color: var(--cmc-muted) !important; font-size: 13px !important} html.iframe.layout-phone body.task-addressbook .propform.grouped .form-control-plaintext, html.iframe.layout-phone body.task-addressbook .propform.grouped .form-control-plaintext a{ font-size: 15px !important}} html.iframe #cm-contacts-fab{ display: none !important}