.post-box-post .media-fragment-embed iframe,
.post-box-post .media-fragment-embed audio {
pointer-events: auto;
}
@media (width > 768px) {
body[data-global-nav="side"]:is(.gns-collapsed, :has(#app-space.state-on)) #global-nav-side::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
backdrop-filter: blur(5px) saturate(2) brightness(1.1);
-webkit-backdrop-filter: blur(5px) saturate(2) brightness(1.1);
}
}
body[data-global-nav="side"] #workspace-calendar-toolbar {
padding: 13px;
}
.leaflet-marker-icon {
object-fit: cover;
}
#images-map-photos .leaflet-control-layers-toggle {
display: none;
}
a[href] {
cursor: default;
}
.pat-modal-panel {
--pat-well-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.pat-modal-panel.panel-upload-progress .upload-progress-files {
margin: 0 0 1rem;
font-size: 0.9em;
color: var(--colour-muted, #666);
word-break: break-word;
max-height: 6em;
overflow-y: auto;
}
.pat-modal-panel.panel-upload-progress .upload-progress-bar {
display: block;
width: 100%;
height: 1.25rem;
margin: 0 0 0.5rem;
appearance: none;
-webkit-appearance: none;
border: none;
border-radius: 4px;
background: rgba(0,0,0,0.08);
}
.pat-modal-panel.panel-upload-progress .upload-progress-bar::-webkit-progress-bar {
background: rgba(0,0,0,0.08);
border-radius: 4px;
}
.pat-modal-panel.panel-upload-progress .upload-progress-bar::-webkit-progress-value {
background: var(--accent-colour, #2c7be5);
border-radius: 4px;
transition: width 120ms linear;
}
.pat-modal-panel.panel-upload-progress .upload-progress-bar::-moz-progress-bar {
background: var(--accent-colour, #2c7be5);
border-radius: 4px;
}
.pat-modal-panel.panel-upload-progress .upload-progress-meta {
margin: 0 0 var(--default-tail-white);
display: flex;
justify-content: space-between;
gap: 1rem;
font-variant-numeric: tabular-nums;
}
.pat-modal-panel.panel-upload-progress .upload-progress-percent {
font-weight: 600;
}
.pat-modal-panel.panel-upload-progress .upload-progress-count {
color: var(--colour-muted, #666);
}
.pat-modal-panel.panel-upload-progress .upload-progress-error[hidden] {
display: none;
}
* {
-webkit-tap-highlight-color: transparent;
}
@media (max-width: 680px) {
:root {
--pat-rich-header-level-1-font-size: 30px;
--pat-rich-header-level-1-line-height: 30px;
}
}
#global-header {
padding-left: var(--sidebar-padding-left, 25px);
}
#global-header .kik-header-fullscreen,
#global-header .kik-header-switch-env {
color: #6B6560;
cursor: default;
}
@media (hover: hover) {
#global-header .kik-header-fullscreen:hover,
#global-header .kik-header-switch-env:hover {
color: var(--colour-header-elements, #000);
}
}
#global-header .kik-header-fullscreen,
#global-header .kik-header-switch-env {
font-size: 19px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
}
#global-header .kik-header-fullscreen span::before,
#global-header .kik-header-switch-env span::before {
margin: 0;
}
#global-header .kik-header-fullscreen .kik-fs-exit {
display: none;
}
html:fullscreen #global-header .kik-header-fullscreen .kik-fs-enter {
display: none;
}
html:fullscreen #global-header .kik-header-fullscreen .kik-fs-exit {
display: inline-block;
}
@media (max-width: 680px), ((orientation: landscape) and (max-height: 599px)) {
#global-header .kik-header-fullscreen {
display: none;
}
}
@media (display-mode: standalone), (display-mode: minimal-ui), (display-mode: window-controls-overlay) {
#global-header .kik-header-fullscreen {
display: none;
}
}
.kik-no-fullscreen .kik-header-fullscreen,
.kik-no-fullscreen .kik-fullscreen-toggle {
display: none !important;
}
.canvas-separation-header {
margin-top: var(--default-tail-white);
margin-bottom: var(--default-tail-white);
padding-bottom: 0.4rem;
font-family: var(--pat-rich-header-level-2-font-family);
font-size: var(--pat-rich-header-level-2-font-size);
line-height: var(--pat-rich-header-level-2-line-height);
font-weight: var(--pat-rich-header-level-2-font-weight);
}
.canvas-separation-header > a {
display: block;
color: inherit;
text-decoration: none;
}
.image-selector .canvas-separation-header {
grid-column: 1 / -1;
text-align: center;
border-bottom: none;
}
.pat-well:has(.pat-lazy-load:not(.infinite-scrolling)) {
position: relative;
}
.pat-well > .panel-content:has(.pat-lazy-load:not(.infinite-scrolling)) {
min-height: 6rem;
}
.pat-well .pat-lazy-load:not(.infinite-scrolling) {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
text-align: center;
}
.kik-portlet-more .pat-lazy-load.infinite-scrolling {
--pat-lazy-lead: 8rem;
--pat-lazy-pull: 6rem;
--pat-lazy-reserve: var(--kik-portlet-reserve, 5rem);
}
.application-body.application-films #films-doc-cards > li.films-load-more > .pat-lazy-load {
--pat-lazy-lead: 40vh;
--pat-lazy-pull: 40vh;
--pat-lazy-reserve: 60px;
height: auto;
}
.sidebar-extras .item a::before {
margin-top: -9px;
}
@media (prefers-reduced-motion: reduce) {
.pat-lazy-load::before,
[class*="injecting"]::before {
opacity: 1 !important;
}
}
html.kik-app .pat-lazy-load::before {
opacity: 1 !important;
animation: none !important;
content: var(--glyph-hourglass-1);
font-size: 35px;
}
html.kik-app [class*="injecting"]::before {
opacity: 1 !important;
}
.feed-letter {
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--body-font-family, system-ui, sans-serif);
color: #fff;
font-weight: 700;
line-height: 1;
text-transform: uppercase;
overflow: hidden;
vertical-align: middle;
flex: 0 0 auto;
}
.pat-rich figure img {
margin: 0 auto;
}
@keyframes news-refresh-fade {
from { opacity: 0; } to { opacity: 1; } }
.news-refreshed-fade {
animation: news-refresh-fade 0.45s ease;
}
#portlet-events .events-event-glyph,
#portlet-today-content .events-event-glyph,
.portlet-today-content .events-event-glyph {
display: inline-block;
margin-inline-end: 4px;
}
#portlet-events .events-glyph-video-conf:before,
#portlet-today-content .events-glyph-video-conf:before,
.portlet-today-content .events-glyph-video-conf:before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.15em;
background-color: currentColor;
-webkit-mask: var(--kik-svg-videocam) center / contain no-repeat;
mask: var(--kik-svg-videocam) center / contain no-repeat;
}
.events-glyph-video-conf:before {
color: var(--app-colour-meetings);
}
.pat-link-list li .item-title .events-event-glyph {
float: right;
margin-inline-end: 0;
margin-inline-start: 4px;
}
body[dir=rtl] .pat-link-list li .item-title .events-event-glyph {
float: left;
}
#portlet-events .events-glyph-birthday:before,
#portlet-today-content .events-glyph-birthday:before,
.portlet-today-content .events-glyph-birthday:before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
vertical-align: -0.15em;
background-color: currentColor;
-webkit-mask: var(--kik-svg-birthday) center / contain no-repeat;
mask: var(--kik-svg-birthday) center / contain no-repeat;
}
:root {
--kik-file-pages-mark: url("data:image/svg+xml;utf8,");
}
.icon-file-pages::before {
content: "";
display: inline-block;
min-width: 1em;
min-height: 1em;
vertical-align: -0.125em;
background-image: var(--kik-file-pages-mark);
background-repeat: no-repeat;
background-position: center;
background-size: 1em 1em;
}
.pat-form .button-field {
display: flex;
}
.pat-form .button-field > input {
flex: 0 0 auto;
margin: 0;
}
.kik-map-marker-links {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
#location-map-preview:has(*) {
margin-top: 10px;
}
#location-map-preview .map-embed {
--kik-map-preview-radius: var(--pat-form-input-field-border-radius, var(--form-fields-border-radius, var(--border-radii)));
border-radius: var(--kik-map-preview-radius);
overflow: hidden;
clip-path: inset(0 round var(--kik-map-preview-radius));
}
@container screen style(--screen-small: true) {
body:has(.collabora-editor-shell) #global-header,
body:has(.onlyoffice-editor-shell) #global-header {
display: none;
}
}
@container screen style(--screen-small: true) {
body:has(.collabora-editor-shell) #app-space,
body:has(.onlyoffice-editor-shell) #app-space {
top: 0 !important;
}
}
@container screen style(--screen-small: true) {
@media all and (display-mode: standalone) {
.document-content .collabora-editor-frame,
.document-content.onlyoffice-editor-shell iframe,
#document-content.onlyoffice-editor-shell iframe {
bottom: 0;
height: calc(100% - env(safe-area-inset-top));
}
}
}
.pat-modal-panel.small .modal-panel-body {
max-width: 100%;
}
.pat-modal-panel .modal-panel-body > .modal-panel-main-button-bar {
margin-left: -10px;
margin-right: -10px;
padding-left: 10px;
padding-right: 10px;
}
.application-body > .pat-lazy-load,
#application-body > .pat-lazy-load {
opacity: 1;
top: calc(50% - var(--global-header-height, 0px) / 2);
transform: translate(-50%, -50%);
margin: 0;
text-align: center;
}
.application-body > .pat-lazy-load::before,
#application-body > .pat-lazy-load::before {
opacity: 1;
animation: spin 2s infinite linear;
}
.application-body.injecting:has(.pat-lazy-load:not(.load-more):not(.infinite-scrolling))::before,
#application-body.injecting:has(.pat-lazy-load:not(.load-more):not(.infinite-scrolling))::before {
content: none !important;
}
.application-body.injecting::before,
#application-body.injecting::before {
opacity: 1;
animation: spin 2s infinite linear;
}
.document-body > .pat-lazy-load:not(.load-more):not(.infinite-scrolling),
.document-content > .pat-lazy-load:not(.load-more):not(.infinite-scrolling),
[id^="document-body"] > .pat-lazy-load:not(.load-more):not(.infinite-scrolling),
[id^="document-content"] > .pat-lazy-load:not(.load-more):not(.infinite-scrolling) {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin: 0;
text-align: center;
}
@media (max-width: 680px) {
.kiki-dock {
bottom: var(--kik-dock-clearance,
calc(0.5rem + env(safe-area-inset-bottom, 0px)));
max-width: none;
}
}
.kiki-dock .kik-chat-settle {
text-align: center;
font-size: 0.78em;
color: var(--gray-600, #868e96);
margin: 0.4rem 0;
}
.kiki-dock .kiki-chat-subtitle {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
text-align: end;
font-size: 0.78em;
color: var(--gray-600, #868e96);
}
.kiki-dock .kik-cursor {
opacity: 0.5;
}
.kiki-dock .kiki-turn-actions {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin-block-start: 0.5rem;
}
.kiki-dock .kiki-turn-actions .pat-button {
font-size: 0.8em;
}
.update-social.post-box:not(.post *),
.update-social.comment-box:not(.post *) {
margin: 2rem auto;
}
.sidebar-normal .sidebar .update-social.post-box:not(.post *),
.sidebar-normal .sidebar .update-social.comment-box:not(.post *) {
margin: 0 auto;
}
.kik-cloud-card .pat-link-list:not(.cards):not(.cards-auto) {
--pat-x-list-scrim-colour:
var(--kik-cloud-card-solid, var(--pat-well-background-colour, white));
}
.quaive-portlet .post {
background: var(--pat-well-background-colour);
border: 1px solid rgba(0, 0, 0, 0.12);
box-shadow: none;
backdrop-filter: var(--pat-surface-backdrop-filter);
}
.quaive-portlet .activity-stream .stream-items {
gap: 20px;
}
:root {
--kik-window-shadow: var(--kik-window-shadow-theme, 0 12px 48px rgb(0 0 0 / 0.35));
--kik-window-move-duration: var(--base-animation-duration, 0.3s);
}
:root {
--portal-tabs-padding-left: 20px;
}
.application-body {
--pat-surface-background-colour-hover:
color-mix(in srgb, var(--app-colour, var(--colour-accent))
var(--pat-surface-hover-mix, 12%),
var(--pat-surface-hover-ground, rgba(255, 255, 255, 0.94)));
--pat-surface-background-colour-highlight:
color-mix(in srgb, var(--pat-surface-background-colour-hover) 50%,
var(--pat-surface-highlight-ground, #fff));
--pat-toolbar-hover-background: var(--pat-surface-background-colour-hover);
--pat-toolbar-icon-background-colour-hover: var(--pat-toolbar-hover-background);
--pat-toolbar-button-background-colour-hover: var(--pat-toolbar-hover-background);
--pat-button-background-colour-hover: var(--pat-toolbar-hover-background);
--pat-select-box-background-colour-hover: var(--pat-toolbar-hover-background);
--sidebar-extras-background-colour-hover: var(--pat-surface-background-colour-hover);
--pat-table-icon-background-colour-active: var(--app-colour, var(--colour-accent));
}
.sidebar-extras .item a {
display: flex;
align-items: center;
gap: 8px;
background-color: var(--pat-well-background-colour);
box-shadow: var(--pat-well-box-shadow);
border-radius: var(--border-radii);
padding: 8px 8px 8px var(--pat-well-padding-left);
font-size: min(var(--pat-well-well-header-font-size), 20px);
font-weight: var(--pat-well-well-header-font-weight);
font-family: var(--pat-well-well-header-font-family, var(--base-font-family));
line-height: var(--pat-well-header-line-height);
color: var(--pat-well-header-text-colour);
min-height: var(--kik-extras-control-height);
backdrop-filter: var(--pat-surface-backdrop-filter);
}
.sidebar-normal aside.sidebar .pat-well > .well-title-group {
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
.well-title-group:not(:has(hgroup .byline)) > .pat-toolbar {
--pat-toolbar-button-height: calc(1.3 * var(--pat-well-well-header-font-size));
--pat-toolbar-button-line-height: calc(1.3 * var(--pat-well-well-header-font-size));
}
.well-title-group > .pat-toolbar :is(.icon, .pat-button, button) {
position: relative;
}
.well-title-group > .pat-toolbar :is(.icon, .pat-button, button)::after {
content: '';
position: absolute;
inset-block: -100%;
inset-inline: calc(-0.5 * var(--pat-toolbar-element-separation, 10px));
}
.well-title-group .quaive-page-head {
zoom: 1;
--kik-app-icon-box: var(--pat-well-well-header-font-size, 20px);
gap: 0;
}
.well-title-group .quaive-page-head h1,
.well-title-group .quaive-page-head h2 {
font-size: var(--pat-well-well-header-font-size, 20px);
font-weight: var(--pat-well-well-header-font-weight, 700);
font-family: var(--pat-well-well-header-font-family, inherit);
line-height: var(--pat-well-header-line-height, 1.3);
color: var(--pat-well-header-text-colour, inherit);
margin: 0;
}
.sidebar-normal aside.sidebar .pat-well > .well-title-group > h2.well-header {
position: relative;
}
.sidebar-normal aside.sidebar .pat-well > .well-title-group > h2.well-header.collapsible-closed::after,
.sidebar-normal aside.sidebar .pat-well > .well-title-group > h2.well-header.collapsible-open::after {
content: '';
position: absolute;
inset: -10px 0 -10px -15px;
}
@media (hover: hover) {
.well-title-group:has(> h2.well-header.collapsible-closed:hover) .open-close-toggle,
.well-title-group:has(> h2.well-header.collapsible-open:hover) .open-close-toggle {
background-color: var(--pat-toolbar-hover-background);
color: var(--pat-toolbar-icon-text-colour-hover);
}
}
@container screen style(--screen-small: true) {
.sidebar-extras .item a {
--pat-well-padding-left: var(--pat-well-padding-small);
--kik-extras-control-height: 35px;
}
}
@container screen style(--screen-small: true) {
aside.sidebar .pat-well .well-header[class*='icon-']::before,
aside.sidebar .pat-well .well-header > .icon,
aside.sidebar .pat-well .well-header > svg,
aside.sidebar .pat-well .well-title-group .quaive-page-head > .app-icon {
display: block;
}
}
@container screen style(--screen-small: true) {
aside.sidebar .pat-well > .well-title-group {
padding-top: 8px;
padding-right: 8px;
padding-bottom: 8px;
}
}
@container main (width <= 680px) {
.sidebar-extras .item a.current {
background-color: var(--pat-well-background-colour);
color: var(--pat-well-header-text-colour);
box-shadow: var(--pat-well-box-shadow);
backdrop-filter: var(--pat-surface-backdrop-filter);
}
}
.sidebar-extras .item a::before {
position: static;
margin: 0;
width: 1.3em;
text-align: center;
font-size: 1em;
}
aside.sidebar .pat-well .well-title-group .quick-functions {
gap: 8px;
}
aside.sidebar .pat-well .well-header svg.well-vendor-brandmark {
width: 22px;
height: 22px;
flex: 0 0 auto;
align-self: center;
}
aside.sidebar .pat-well .well-header img.well-brandmark {
width: 22px;
height: 22px;
flex: 0 0 auto;
align-self: center;
object-fit: contain;
border-radius: calc(0.5 * var(--border-radii));
}
#application-body-people aside.sidebar .pat-link-list.tile-icons li a:not(.pat-lazy-load)::before,
#application-body-people aside.sidebar .pat-link-list.tile-icons li a > .icon {
border-radius: 50%;
}
#application-body-people aside.sidebar .pat-link-list li a {
padding: 8px;
border-radius: var(--border-radii);
}
#application-body-people aside.sidebar .pat-link-list li a.current {
background-color: color-mix(in srgb, var(--app-colour) 14%, transparent);
}
.kik-media-player {
--kik-media-player-padding: 0.8rem;
position: fixed;
inset-inline-end: 1.25rem;
top: calc(var(--global-header-height, 0px) + 1.25rem);
z-index: 1200;
width: 21rem;
max-width: calc(100vw - 2rem);
--kik-media-player-radius: var(--pat-context-menu-radii, var(--border-radii-medium, var(--border-radii)));
border-radius: var(--kik-media-player-radius);
background-color: var(--pat-surface-background-colour);
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 30px rgba(0, 0, 0, 0.1);
border: var(--pat-toolbar-border, none);
--pat-button-background-colour: var(--pat-toolbar-button-background-colour);
--pat-button-background-colour-hover: var(--pat-toolbar-button-background-colour-hover);
--pat-button-text-colour: var(--pat-toolbar-button-text-colour);
--pat-button-text-colour-hover: var(--pat-toolbar-button-text-colour-hover);
--pat-button-box-shadow: var(--pat-toolbar-button-box-shadow);
}
.kik-media-player.is-dragging {
user-select: none;
}
.kik-media-player.is-video {
cursor: grab;
}
.kik-media-player.is-video.is-dragging {
cursor: grabbing;
}
.kik-media-player.is-video .kik-media-player-controls {
cursor: default;
}
.kik-media-player-head {
--kik-media-player-head-gap: 0.6rem;
display: flex;
align-items: center;
gap: var(--kik-media-player-head-gap);
padding: var(--kik-media-player-padding);
cursor: grab;
touch-action: none;
}
.kik-media-player.is-dragging .kik-media-player-head {
cursor: grabbing;
}
.kik-media-player-head .pat-toolbar {
--pat-toolbar-padding: 0;
zoom: 0.8;
width: auto;
margin: 0;
padding: 0;
flex: 0 0 auto;
padding-right: 6px;
flex: none;
display: flex;
align-items: center;
}
.kik-media-player-head .pat-toolbar .toolbar-area.navigation {
display: none;
}
.kik-media-player-head .pat-toolbar .icon::before {
transform: translateY(1.9px);
}
@supports (-moz-appearance: none) {
.kik-media-player-head .pat-toolbar .icon::before {
transform: translateY(0.6px);
}
}
.kik-media-player-cover {
width: 2.6rem;
height: 2.6rem;
flex: none;
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: var(--border-radii-small, 6px);
overflow: hidden;
background: var(--pat-toolbar-button-background-colour);
}
.kik-media-player-cover:empty {
background-color: color-mix(in srgb, var(--app-colour-music, #1DB954) 14%, white);
position: relative;
}
.kik-media-player-cover:empty::after {
content: '';
position: absolute;
inset: 22%;
background-color: var(--app-colour-music, #1DB954);
opacity: 0.45;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.kik-media-player-cover img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.kik-media-player-meta {
min-width: 0;
flex: 1 1 auto;
display: flex;
flex-direction: column;
line-height: 1.25;
overflow: hidden;
--kik-media-player-meta-fade-start: 55%;
--kik-media-player-meta-fade-end: 74%;
margin-inline-end: calc(-1 * var(--kik-media-player-head-gap));
-webkit-mask-image: linear-gradient(to right, #000 var(--kik-media-player-meta-fade-start), transparent var(--kik-media-player-meta-fade-end));
mask-image: linear-gradient(to right, #000 var(--kik-media-player-meta-fade-start), transparent var(--kik-media-player-meta-fade-end));
}
.kik-media-player-title,
.kik-media-player-byline {
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
}
.kik-media-player-byline {
font-size: 0.8em;
opacity: 0.7;
}
.kik-media-player video {
display: none;
color-scheme: light;
}
.kik-media-player.is-video {
width: var(--kmp-video-width, 34rem);
container: kik-media-player / inline-size;
background-color: #000;
overflow: hidden;
color: #fff;
--pat-button-text-colour: #fff;
--pat-button-text-colour-hover: #fff;
--pat-button-background-colour: rgba(255, 255, 255, 0.14);
--pat-button-background-colour-hover: rgba(255, 255, 255, 0.26);
transition: width 0.42s cubic-bezier(0.2, 0, 0, 1),
left 0.42s cubic-bezier(0.2, 0, 0, 1),
top 0.42s cubic-bezier(0.2, 0, 0, 1);
}
.kik-media-player.is-video video {
transition: aspect-ratio 0.42s cubic-bezier(0.2, 0, 0, 1);
display: block;
width: 100%;
aspect-ratio: var(--kmp-video-aspect, 16 / 9);
object-fit: cover;
object-position: center;
background: transparent;
position: relative;
z-index: 1;
border-radius: inherit;
}
.kik-media-player.is-video :is(.kik-media-player-head, .kik-media-player-controls) {
position: absolute;
inset-inline: 0;
z-index: 2;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease;
}
.kik-media-player.is-video .kik-media-player-head {
top: 0;
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.62), transparent);
padding-bottom: calc(var(--kik-media-player-padding) + 0.6rem);
}
.kik-media-player.is-video .kik-media-player-controls {
display: flex;
bottom: 0;
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.68), transparent);
padding-top: calc(var(--kik-media-player-padding) + 0.6rem);
}
.kik-media-player.is-video .kik-media-player-cover {
display: none;
}
.kik-media-player.is-video .kik-media-player-meta {
--kik-media-player-meta-fade-start: calc(100% - 6rem);
--kik-media-player-meta-fade-end: calc(100% - 1rem);
}
@media (hover: hover) {
.kik-media-player.is-video .kik-media-player-controls .icon:not(:disabled):not([aria-expanded="true"]):hover {
background: rgba(255, 255, 255, 0.2);
}
}
.kmp-poster {
display: none;
}
.kik-media-player.is-video .kmp-poster {
display: block;
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
border-radius: inherit;
z-index: 0;
opacity: 1;
transition: opacity 0.25s ease;
pointer-events: none;
}
.kik-media-player.is-video:not(.is-poster) .kmp-poster {
opacity: 0;
}
.kik-media-player.is-video.is-unplayable .kmp-poster {
display: none;
}
.kmp-buffering {
display: none;
}
.kik-media-player.is-video.is-buffering .kmp-buffering {
--pat-throbber-size: 44px;
display: block;
position: absolute;
top: 50%;
left: 50%;
width: var(--pat-throbber-size, 44px);
height: var(--pat-throbber-size, 44px);
margin: calc(var(--pat-throbber-size, 44px) / -2) 0 0
calc(var(--pat-throbber-size, 44px) / -2);
z-index: 1;
pointer-events: none;
font: var(--pat-throbber-size, 44px)/var(--pat-throbber-size, 44px) fontello;
text-align: center;
color: #fff;
text-shadow: 0 0 6px rgba(0, 0, 0, 0.55);
animation: spin 2s infinite linear;
}
.kik-media-player.is-video.is-buffering .kmp-buffering::before {
content: var(--glyph-spinner);
}
@media (prefers-reduced-motion: reduce) {
.kik-media-player.is-video.is-buffering .kmp-buffering {
animation: none;
}
}
.kmp-unplayable {
display: none;
}
.kik-media-player.is-video .kmp-unplayable:not([hidden]) {
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 1;
pointer-events: none;
max-width: min(28rem, calc(100% - 3rem));
text-align: center;
text-wrap: balance;
color: #fff;
font-size: 0.95rem;
line-height: 1.4;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}
.kik-media-player.is-unplayable video {
visibility: hidden;
}
@media (hover: hover) {
.kik-media-player.is-video:hover :is(.kik-media-player-head, .kik-media-player-controls) {
opacity: 1;
pointer-events: auto;
}
}
.kik-media-player.is-video.is-controls-visible :is(.kik-media-player-head, .kik-media-player-controls) {
opacity: 1;
pointer-events: auto;
}
.kmp-resize {
display: none;
}
.kik-media-player.is-video .kmp-resize {
display: block;
position: absolute;
width: 12px;
height: 12px;
z-index: 3;
}
.kik-media-player.is-video .kmp-resize-nw {
top: 0;
left: 0;
cursor: nwse-resize;
}
.kik-media-player.is-video .kmp-resize-ne {
top: 0;
right: 0;
cursor: nesw-resize;
}
.kik-media-player.is-video .kmp-resize-sw {
bottom: 0;
left: 0;
cursor: nesw-resize;
}
.kik-media-player.is-video .kmp-resize-se {
bottom: 0;
right: 0;
cursor: nwse-resize;
}
.kik-media-player.is-resizing {
user-select: none;
}
.kik-media-player.is-resizing,
.kik-media-player.is-resizing video,
.kik-media-player.is-dragging,
.kik-media-player.is-dragging video {
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.kik-media-player.is-video,
.kik-media-player.is-video video {
transition: none;
}
}
.kik-media-player:fullscreen {
transition: none;
inset: 0 !important;
width: 100% !important;
max-width: none;
height: 100%;
border-radius: 0;
box-shadow: none;
}
.kik-media-player:fullscreen video {
transition: none;
width: 100%;
height: 100%;
aspect-ratio: auto;
}
.kik-media-controls {
padding: 0;
margin: 0.75rem 0 0.25rem;
max-width: 32rem;
}
.kik-media-controls .kmp-toggle {
background: color-mix(in srgb, var(--app-colour) 14%, white);
color: var(--app-colour);
}
@media (hover: hover) {
.kik-media-controls .kmp-toggle:not(:disabled):hover {
background: color-mix(in srgb, var(--app-colour) 24%, white);
}
}
.kik-media-player-controls {
display: flex;
align-items: center;
--kmp-controls-gap: 0.4rem;
gap: var(--kmp-controls-gap);
padding: 0 var(--kik-media-player-padding) var(--kik-media-player-padding);
}
.kik-media-player-controls .kmp-skip {
margin-inline-start: calc(-1 * var(--kmp-controls-gap));
}
.kik-media-player-controls .kmp-prev {
margin-inline-end: calc(-1 * var(--kmp-controls-gap));
}
.kik-media-player-controls .kmp-prev > svg.kik-icon {
transform: scaleX(-1);
}
.kik-media-player-controls .kmp-fullscreen > svg.kik-icon:nth-of-type(2),
.kik-media-player-controls .kmp-fullscreen.is-fullscreen > svg.kik-icon:nth-of-type(1) {
display: none;
}
.kik-media-player-controls .kmp-fullscreen.is-fullscreen > svg.kik-icon:nth-of-type(2) {
display: block;
}
.kik-media-player:not(.is-video) .kmp-fullscreen {
display: none;
}
.kik-media-player-controls .icon {
flex: none;
width: 2rem;
height: 2rem;
padding: 0;
border: none;
border-radius: 50%;
background: transparent;
color: inherit;
}
.kik-media-player-controls .icon::before {
font-family: fontello;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
.kik-media-player-controls .icon:disabled {
opacity: 0.35;
}
@media (hover: hover) {
.kik-media-player-controls .icon:not(:disabled):not([aria-expanded="true"]):hover {
background: rgba(0, 0, 0, 0.06);
}
}
.kik-media-player-controls .kmp-toggle::before {
content: "";
background-color: currentColor;
-webkit-mask: var(--kik-svg-play) calc(50% + 1px) 50% / 55% no-repeat;
mask: var(--kik-svg-play) calc(50% + 1px) 50% / 55% no-repeat;
}
.kik-media-player-controls .kmp-toggle.is-playing::before {
-webkit-mask-image: var(--kik-svg-pause);
mask-image: var(--kik-svg-pause);
-webkit-mask-position: center;
mask-position: center;
}
:is(.kik-media-player-controls, .kik-media-controls) .icon {
display: inline-flex;
align-items: center;
justify-content: center;
text-indent: 0;
}
:is(.kik-media-player-controls, .kik-media-controls) .icon > svg.kik-icon {
width: var(--kik-toolbar-icon-size, 1.15em);
height: var(--kik-toolbar-icon-size, 1.15em);
}
:is(.kik-media-player-controls, .kik-media-controls) .kmp-toggle > svg.kik-icon:nth-of-type(2),
:is(.kik-media-player-controls, .kik-media-controls) .kmp-toggle.is-playing > svg.kik-icon:nth-of-type(1) {
display: none;
}
:is(.kik-media-player-controls, .kik-media-controls) .kmp-toggle.is-playing > svg.kik-icon:nth-of-type(2) {
display: block;
}
.kik-media-player-controls .kmp-skip::before {
content: "";
background-color: currentColor;
-webkit-mask: var(--kik-svg-skip) center / 60% no-repeat;
mask: var(--kik-svg-skip) center / 60% no-repeat;
}
.kik-media-player-controls .kmp-mute::before,
.kik-media-player-controls .kmp-volume-trigger::before {
content: "";
background-color: currentColor;
-webkit-mask: var(--kik-svg-volume) center / 60% no-repeat;
mask: var(--kik-svg-volume) center / 60% no-repeat;
}
.kik-media-player-controls .kmp-mute.is-muted::before,
.kik-media-player-controls .kmp-volume-trigger.is-muted::before {
-webkit-mask-image: var(--kik-svg-mute);
mask-image: var(--kik-svg-mute);
}
.kmp-volume-wrap {
position: relative;
flex: none;
display: flex;
z-index: calc(var(--pat-toolbar-z-index, 10) + 1);
}
.kmp-volume-popover {
position: absolute;
bottom: calc(100% + 0.4rem);
right: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.3rem;
padding: 12px 5px 5px;
border-radius: var(--border-radii);
background-color: var(--pat-surface-background-colour);
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter, none);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter, none);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 30px rgba(0, 0, 0, 0.1);
z-index: 2;
}
.kmp-volume-popover[hidden] {
display: none;
}
.kmp-volume-popover .kmp-volume {
writing-mode: vertical-lr;
direction: rtl;
width: 1rem;
}
.kik-media-player-controls .kmp-volume-trigger[aria-expanded="true"] {
background: var(--colour-accent);
color: var(--colour-accent-text, white);
}
.kik-media-player-controls input[type="range"] {
accent-color: var(--colour-accent);
height: 8rem;
margin: 0;
}
.kik-media-player-controls input.kmp-seek {
height: 1rem;
}
.kik-media-player-controls .kmp-seek {
flex: 1 1 auto;
min-width: 3rem;
}
.kik-media-player.is-live .kmp-seek,
.kik-media-player.is-live .kmp-times {
display: none;
}
.kik-media-player.is-live .kmp-volume-wrap {
margin-inline-start: auto;
}
@container kik-media-player (width < 21rem) {
.kik-media-player-controls .kmp-seek,
.kik-media-player-controls .kmp-times {
display: none;
}
}
@container kik-media-player (width < 21rem) {
.kik-media-player-controls .kmp-volume-wrap {
margin-inline-start: auto;
}
}
.kmp-times {
flex: none;
font-size: 0.75rem;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.kmp-time {
font-weight: 600;
}
.kmp-time-sep,
.kmp-duration {
opacity: 0.5;
}
.kmp-transport {
display: none;
}
.kmp-transport .kmp-big-toggle {
flex: none;
width: 4.75rem;
height: 4.75rem;
padding: 0;
border: none;
border-radius: 50%;
background: var(--colour-accent, var(--app-colour));
color: #fff;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.kmp-transport .kmp-big-toggle::before {
content: "";
width: 2rem;
height: 2rem;
background-color: currentColor;
-webkit-mask: var(--kik-svg-play) center / contain no-repeat;
mask: var(--kik-svg-play) center / contain no-repeat;
transform: translateX(2px);
}
.kmp-transport .kmp-big-toggle.is-playing::before {
-webkit-mask-image: var(--kik-svg-pause);
mask-image: var(--kik-svg-pause);
transform: none;
}
.kmp-transport .kmp-jump {
position: relative;
flex: none;
width: 3.1rem;
height: 3.1rem;
padding: 0;
border: none;
background: transparent;
color: inherit;
opacity: 0.7;
}
.kmp-transport .kmp-jump svg {
display: block;
width: 100%;
height: 100%;
}
.kmp-transport .kmp-jump-secs {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding-top: 0.18rem;
font-size: 0.78rem;
font-weight: 600;
letter-spacing: -0.02em;
}
@media (hover: hover) {
.kmp-transport .kmp-jump:hover {
color: var(--colour-accent, var(--app-colour));
opacity: 1;
}
}
@media (max-width: 680px) {
.kik-media-player {
inset: 0 !important;
width: auto !important;
max-width: none;
height: 100dvh;
border: none;
border-radius: 0;
box-shadow: none;
display: flex;
flex-direction: column;
padding-bottom: env(safe-area-inset-bottom, 0px);
background-color: var(--colour-base-background, #fff);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
@media (max-width: 680px) {
.kik-media-player[hidden] {
display: none;
}
}
@media (max-width: 680px) {
.kik-media-player {
--kik-media-player-padding: 1.8rem;
touch-action: none;
}
}
@media (max-width: 680px) {
#kik-media-player-min {
transform: rotate(180deg);
}
}
@media (max-width: 680px) {
.kik-media-player-head {
display: grid;
justify-items: center;
align-content: center;
gap: 1rem;
flex: 1 1 auto;
min-height: 0;
cursor: default;
padding-top: 5.5rem;
}
}
@media (max-width: 680px) {
.kik-media-player-head .pat-toolbar {
order: -1;
position: absolute;
top: calc(env(safe-area-inset-top, 0px) + 15px);
right: 15px;
justify-self: end;
zoom: 1;
padding-right: 0;
}
}
@media (max-width: 680px) {
.kik-media-player-head .pat-toolbar .icon::before {
transform: none;
}
}
@media (max-width: 680px) {
.kik-media-player-cover {
width: min(78vw, 44vh);
height: auto;
aspect-ratio: 1;
border-radius: var(--border-radii-medium);
}
}
@media (max-width: 680px) {
.kik-media-player-meta {
flex: none;
max-width: 100%;
align-items: center;
text-align: center;
margin-inline-end: 0;
-webkit-mask-image: none;
mask-image: none;
}
}
@media (max-width: 680px) {
.kik-media-player-title,
.kik-media-player-byline {
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
}
@media (max-width: 680px) {
.kik-media-player-title {
font-size: 1.15rem;
font-weight: 600;
-webkit-line-clamp: 3;
line-clamp: 3;
margin-bottom: 0.35rem;
}
}
@media (max-width: 680px) {
.kik-media-player-byline {
font-size: 0.95rem;
}
}
@media (max-width: 680px) {
.kmp-transport {
display: flex;
align-items: center;
justify-content: center;
gap: 1.6rem;
padding: 0.25rem var(--kik-media-player-padding) 2.25rem;
}
}
@media (max-width: 680px) {
.kik-media-player.is-video {
width: auto !important;
justify-content: center;
}
}
@media (max-width: 680px) {
.kik-media-player.is-video .kik-media-player-head {
display: flex;
flex: none;
min-height: 0;
padding-top: calc(env(safe-area-inset-top, 0px) + 15px);
}
}
@media (max-width: 680px) {
.kik-media-player.is-video .kik-media-player-meta {
align-items: flex-start;
text-align: start;
}
}
@media (max-width: 680px) {
.kik-media-player.is-video .kmp-transport {
display: none;
}
}
@media (max-width: 680px) {
.kik-media-player.is-video #kik-media-player-controls .kmp-toggle {
display: inline-flex;
}
}
@media (max-width: 680px) {
.kik-media-player.is-video .kik-media-player-controls .kmp-skip {
margin-inline-start: calc(-1 * var(--kmp-controls-gap));
}
}
@media (max-width: 680px) {
.kik-media-player.is-video video {
flex: 1 1 auto;
min-height: 0;
height: auto;
aspect-ratio: auto;
border-radius: 0;
}
}
@media (max-width: 680px) {
#kik-media-player-controls {
margin-bottom: 2.25rem;
}
}
@media (max-width: 680px) {
#kik-media-player-controls .kmp-toggle {
display: none;
}
}
@media (max-width: 680px) {
#kik-media-player-controls .kmp-skip {
margin-inline-start: 0;
}
}
.kik-media-player-chip {
position: fixed;
top: 0.5rem;
left: 0.75rem;
z-index: 1200;
width: var(--pat-toolbar-button-height, 2.25rem);
height: var(--pat-toolbar-button-height, 2.25rem);
border: var(--pat-toolbar-border, none);
border-radius: var(--border-radii-small, 6px);
color: var(--pat-toolbar-button-text-colour);
background-color: var(--pat-surface-background-colour);
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
box-shadow: var(--pat-toolbar-box-shadow, 0 6px 24px rgba(0, 0, 0, 0.16));
}
body[data-global-nav="top"] .kik-media-player-chip {
--kik-chip-size: var(--pat-toolbar-button-height, 2.25rem);
--kik-chip-gap: calc(var(--application-label-white-space, 10px) + 5px);
--kik-tabs-bar-offset: calc(
var(--portal-quick-nav-left) +
2 * (var(--global-header-height) - var(--application-label-white-space)));
left: calc(var(--kik-tabs-bar-offset) - var(--kik-chip-size) - var(--kik-chip-gap));
top: calc((var(--global-header-height) - var(--kik-chip-size)) / 2);
}
#global-header .kik-media-player-chip.in-header .kmp-chip-art {
display: block;
position: relative;
flex: 0 0 33px;
width: 33px;
height: 33px;
border-radius: var(--kik-global-nav-icon-radius);
transform: scale(var(--kal-icon-scale-active, 0.8));
overflow: hidden;
}
#global-header .kik-media-player-chip.in-header .kmp-chip-art > * {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
border: 0;
}
#global-header .kik-media-player-chip.in-header .kmp-chip-art:empty {
background-color: color-mix(in srgb, var(--app-colour-music, #1DB954) 14%, var(--kal-chip-bg, white));
}
#global-header .kik-media-player-chip.in-header::before {
display: none;
}
#global-header .kik-media-player-chip.in-header .kmp-chip-art:empty::before {
content: '';
position: absolute;
inset: 0;
margin: auto;
width: 58%;
height: 58%;
background-color: var(--app-colour-music, #1DB954);
-webkit-mask: var(--kik-media-chip-note);
mask: var(--kik-media-chip-note);
transform: translateY(-4%);
animation: kik-media-chip-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
#global-header .kik-media-player-chip.in-header .kmp-chip-art:empty::before {
animation: none;
}
}
#global-header .kik-media-player-chip.in-header .kmp-chip-meta {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
margin-inline-end: auto;
text-align: start;
min-width: 0;
max-width: 100px;
line-height: 1.2;
overflow: hidden;
text-align: start;
}
#global-header .kik-media-player-chip.in-header .kmp-chip-title {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
color: var(--app-colour, var(--colour-accent));
}
#global-header .kik-media-player-chip.in-header .kmp-chip-byline {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 11px;
line-height: 12px;
opacity: 0.5;
color: var(--colour-header-elements, black);
}
#global-header .kik-media-player-chip.in-header .kmp-chip-art::after {
content: '';
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: var(--kik-svg-play-white) calc(50% + 1px) 50% / 13px no-repeat, rgba(0, 0, 0, 0.45);
opacity: 0;
transition: opacity 0.15s ease;
}
#global-header .kik-media-player-chip.in-header.is-playing .kmp-chip-art::after {
background-image: var(--kik-svg-pause-white);
background-position: center;
}
@media (hover: hover) {
#global-header .kik-media-player-chip.in-header:hover .kmp-chip-art::after {
opacity: 1;
}
}
body[data-global-nav="top"]:has(li.portal-section-bookmarks) .kik-media-player-chip,
body[data-global-nav="top"]:has(li.portal-section-favourites) .kik-media-player-chip {
--kik-tabs-bar-offset: calc(
var(--portal-quick-nav-left) +
3 * (var(--global-header-height) - var(--application-label-white-space)));
}
.kik-media-player-chip .kmp-chip-art {
display: contents;
border-radius: inherit;
}
.kik-media-player-chip .kmp-chip-meta {
display: contents;
}
.kik-media-player-chip .kmp-chip-title,
.kik-media-player-chip .kmp-chip-byline {
display: none;
}
.kik-media-player-chip .kmp-chip-close {
position: absolute;
top: 1px;
inset-inline-end: 1px;
z-index: 3;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 15px;
height: 15px;
border-radius: 50%;
color: #fff;
background-color: rgba(0, 0, 0, 0.55);
opacity: 0;
pointer-events: none;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.kik-media-player-chip .kmp-chip-close::before {
content: var(--glyph-cancel);
font-family: fontello;
font-size: 9px;
line-height: 1;
}
@media (hover: hover) {
.kik-media-player-chip:hover .kmp-chip-close {
opacity: 1;
pointer-events: auto;
}
}
@media (hover: hover) {
.kik-media-player-chip .kmp-chip-close:hover {
background-color: rgba(0, 0, 0, 0.75);
}
}
@media (hover: none) {
.kik-media-player-chip .kmp-chip-close {
opacity: 1;
pointer-events: auto;
}
}
.kik-media-player-chip .kmp-chip-close:focus-visible {
opacity: 1;
pointer-events: auto;
}
.kik-media-player-chip:not(.in-header) .kmp-chip-close {
display: none;
}
#global-header .kik-media-player-chip.in-header .kmp-chip-close {
border: 1px solid var(--app-colour, var(--colour-accent));
color: var(--app-colour, var(--colour-accent));
--kik-dock-close-face: color-mix(in srgb,
var(--app-colour, var(--colour-accent)) 22%, var(--kal-chip-bg, #fff));
}
.kik-media-player-chip[hidden] {
display: none;
}
.kik-media-player-chip {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
}
.kik-media-player-chip:not(.has-art) {
background-color: color-mix(in srgb, var(--app-colour-music, #1DB954) 14%, white);
}
.kik-media-player-chip {
--kik-media-chip-note: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.kik-media-player-chip::before {
content: '';
width: 58%;
height: 58%;
background-color: var(--app-colour-music, #1DB954);
-webkit-mask: var(--kik-media-chip-note);
mask: var(--kik-media-chip-note);
transform: translateY(-4%);
animation: kik-media-chip-pulse 2.4s ease-in-out infinite;
}
@keyframes kik-media-chip-pulse {
0%, 100% { opacity: 0.55; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.kik-media-player-chip::before {
animation: none;
}
}
.kik-media-player-chip.has-art::before {
display: none;
}
.kik-media-player-chip img,
.kik-media-player-chip video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
display: block;
}
.kik-media-player-chip.has-video {
background-color: #000;
overflow: hidden;
}
.kik-media-player-chip.has-video::before {
display: none;
}
#cloud-nav-rail .kik-media-player-chip video {
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 10px;
}
#cloud-nav-rail .kik-media-player-chip[hidden] {
display: none;
}
#cloud-nav-rail .kik-media-player-chip {
position: relative;
flex: 0 0 auto;
width: 36px;
height: 36px;
margin: 10px 0 0;
border: none;
border-radius: 10px;
color: #6B6560;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
font-size: 18px;
}
@media (hover: hover) {
#cloud-nav-rail .kik-media-player-chip:hover {
background-color: rgba(0, 0, 0, 0.06);
color: #000;
}
}
.kik-media-player-ghost {
position: fixed;
z-index: 2000;
pointer-events: none;
background-color: var(--pat-surface-background-colour, rgba(255, 255, 255, 0.9));
background-size: cover;
background-position: center;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15), 0 0 30px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.kik-media-player-ghost.kik-ghost-no-art {
background-color: color-mix(in srgb, var(--app-colour-music, #1DB954) 14%, white);
}
.kik-media-player-ghost.kik-ghost-no-art::after {
content: '';
position: absolute;
inset: 25%;
background-color: var(--app-colour-music, #1DB954);
opacity: 0.45;
-webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
mask: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.kik-media-player {
view-transition-name: kik-media-player;
}
.kik-media-player-chip {
view-transition-name: kik-media-player;
}
::view-transition-group(kik-media-player) {
animation-duration: 300ms;
animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
html.kik-vt-noart::view-transition-old(kik-media-player) {
display: none;
}
html.kik-vt-noart::view-transition-new(kik-media-player) {
animation: none;
opacity: 1;
}
::view-transition-old(kik-media-player),
::view-transition-new(kik-media-player) {
width: 100%;
height: 100%;
mix-blend-mode: normal;
}
#cloud-nav-rail .kik-media-player-chip:not(.has-art) {
background-color: color-mix(in srgb, var(--app-colour-music, #1DB954) 14%, white);
border-radius: 10px;
}
@media (hover: hover) {
#cloud-nav-rail .kik-media-player-chip:not(.has-art):hover {
background-color: color-mix(in srgb, var(--app-colour-music, #1DB954) 22%, white);
}
}
#global-header .kik-media-player-chip.in-header[hidden] {
display: none;
}
:root {
--kik-dock-tab-width: calc(33px + 2px + 100px + 9px + 2px);
}
#global-header .kik-media-player-chip.in-header {
position: static;
float: right;
display: inline-flex;
align-items: center;
gap: 2px;
box-sizing: border-box;
width: var(--kik-dock-tab-width);
height: 36px;
padding: 0;
padding-inline-end: 9px;
margin: 0 2px 0 0;
position: relative;
top: calc((var(--global-header-height, 54px) - 36px) / 2 + 0.5px);
left: auto;
right: auto;
border: 1px solid var(--kal-chip-border, rgba(0, 0, 0, 0.08));
border-radius: var(--kal-corner-radius, 8px);
background-color: color-mix(in srgb,
var(--app-colour, var(--colour-accent)) 10%, var(--kal-chip-bg, #fff));
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
z-index: auto;
overflow: visible;
}
@media (hover: hover) {
#global-header .kik-media-player-chip.in-header:hover {
background-color: color-mix(in srgb,
var(--app-colour, var(--colour-accent)) 20%, var(--kal-chip-bg, #fff));
}
}
body[dir="rtl"] #global-header .kik-media-player-chip.in-header {
float: left;
}
#cloud-nav-rail .kik-media-player-chip img {
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 10px;
}
.quaive-bookmark-icon .bookmark.active::before {
color: var(--colour-accent);
}
.quaive-bookmark-fieldset {
display: contents;
border: 0;
margin: 0;
padding: 0;
min-inline-size: 0;
}
body {
-webkit-user-select: none;
user-select: none;
}
input,
textarea,
select,
[contenteditable="true"],
[contenteditable=""] {
-webkit-user-select: text;
user-select: text;
}
.pat-form label > .password-toggle {
top: auto;
bottom: 0;
}
.kik-catalogue-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
align-items: stretch;
gap: 1rem;
margin: 0 0 2rem;
}
.kik-catalogue-card,
.kik-catalogue-card-button {
min-width: 0;
}
@supports (display: grid-lanes) {
.kik-catalogue-grid {
display: grid-lanes;
align-items: start;
}
}
@supports (display: grid-lanes) {
.kik-catalogue-card,
.kik-catalogue-card .kik-catalogue-card-button {
height: auto;
}
}
.kik-catalogue-card {
margin: 0;
height: 100%;
}
.kik-catalogue-card-button,
.kik-catalogue-card.has-actions {
position: relative;
height: 100%;
display: flex;
align-items: flex-start;
gap: 0.85rem;
width: 100%;
text-align: start;
padding: 0.7rem 0.8rem;
border: 2px solid var(--line-colour, #e4e4e7);
border-radius: 12px;
background: var(--panel-bg, #fff);
color: var(--body-font-colour, #1a1a1a);
font: inherit;
cursor: default;
transition: border-color 0.15s ease, box-shadow 0.15s ease;
box-sizing: border-box;
}
.kik-catalogue-card.has-actions {
flex-direction: column;
gap: 0.75rem;
}
.kik-catalogue-card.has-actions .kik-catalogue-card-body::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
}
.kik-catalogue-card.has-actions .kik-catalogue-card-actions {
position: relative;
z-index: 1;
}
a.kik-catalogue-card-body {
text-decoration: none;
color: inherit;
}
.kik-catalogue-card.has-actions .kik-catalogue-card-body {
display: flex;
align-items: flex-start;
gap: 0.85rem;
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
background: transparent;
font: inherit;
color: inherit;
text-align: start;
cursor: default;
}
.kik-catalogue-card.has-actions .kik-catalogue-card-actions {
margin-block-start: auto;
gap: 0.4rem;
margin-block-end: 0;
}
.kik-catalogue-card-actions .pat-button {
--pat-button-height: 23px;
font-size: 0.8rem;
padding-inline: 0.45rem 0.85rem;
flex: 1 1 auto;
white-space: nowrap;
}
@media (hover: hover) {
.kik-catalogue-card-button:hover,
.kik-catalogue-card.has-actions:hover {
border-color: var(--app-colour);
box-shadow: 0 3px 14px rgba(0, 0, 0, 0.08);
}
}
.kik-catalogue-card.selected .kik-catalogue-card-button,
.kik-catalogue-card.selected.has-actions {
border-color: var(--app-colour);
box-shadow: 0 0 0 1px var(--app-colour);
background: color-mix(in srgb, var(--app-colour) 8%, var(--panel-bg, #fff));
}
.kik-catalogue-card-icon {
flex: 0 0 auto;
}
.kik-catalogue-card-icon img.icon,
.kik-catalogue-card-icon .kik-catalogue-card-letter {
display: block;
width: 42px;
height: 42px;
border-radius: 9px;
object-fit: cover;
}
.kik-catalogue-card-icon .kik-catalogue-card-letter {
display: flex;
align-items: center;
justify-content: center;
background: var(--app-colour);
color: #fff;
font-size: 1.15rem;
font-weight: 600;
text-transform: uppercase;
}
.kik-catalogue-card-text {
display: flex;
flex-direction: column;
gap: 0.2rem;
min-width: 0;
}
.kik-catalogue-card-name {
font-size: 0.95rem;
font-weight: 600;
line-height: 1.25;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kik-catalogue-card-desc {
font-size: 0.8rem;
line-height: 1.35;
color: var(--muted-colour, #767676);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: anywhere;
}
.kik-catalogue-card-tick {
position: absolute;
top: 0.5rem;
inset-inline-end: 0.5rem;
color: var(--app-colour);
opacity: 0;
transition: opacity 0.15s ease;
}
.kik-catalogue-card.selected .kik-catalogue-card-tick {
opacity: 1;
}
.kik-catalogue-card.has-actions .kik-catalogue-card-tick {
display: none;
}
@container screen style(--screen-small: true) {
.kik-catalogue-grid {
grid-template-columns: 1fr;
gap: calc(0.5 * var(--small-screen-padding));
}
}
.kik-audio-tile.kik-audio-tile-empty {
background-color: color-mix(in srgb, var(--app-colour) 14%, white);
position: relative;
}
.kik-audio-tile.kik-audio-tile-empty::before {
content: '';
position: absolute;
inset: 22%;
background-color: var(--app-colour);
opacity: 0.45;
-webkit-mask: var(--kik-audio-tile-glyph) center / contain no-repeat;
mask: var(--kik-audio-tile-glyph) center / contain no-repeat;
}
:root {
--kik-audio-tile-glyph: url('data:image/svg+xml;utf8,');
}
.kik-cover-grid .pat-link-list {
columns: 9em;
--pat-x-list-column-width: 9em;
gap: 1.25rem 1rem;
}
.kik-cover-grid .pat-link-list > li {
margin-bottom: 0;
width: auto;
}
.kik-cover-grid .pat-link-list > li[class$="-load-more"] {
grid-column: 1 / -1;
text-align: center;
}
.kik-cover-grid .pat-link-list li a > .icon,
.kik-cover-grid .pat-link-list li a > .icon::before,
.kik-cover-grid .pat-link-list li .preview,
.kik-cover-grid .pat-link-list li .preview img {
border-radius: var(--border-radii-small, 4px);
}
.pat-link-list li a > .kik-audio-tile,
.pat-table .item-name a.name > .kik-audio-tile {
cursor: default;
}
.kik-audio-tile-metered {
position: relative;
}
.pat-link-list li a > .kik-audio-tile.kik-audio-tile-metered::after,
.pat-table .item-name a.name > .kik-audio-tile.kik-audio-tile-metered::after {
content: '';
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.42);
-webkit-backdrop-filter: blur(2px);
backdrop-filter: blur(2px);
background-clip: padding-box;
opacity: 1;
pointer-events: none;
}
.pat-link-list > li:not(.is-playing) a > .kik-audio-tile.kik-audio-tile-metered::after,
.pat-table tbody tr:not(.is-playing) .item-name a.name > .kik-audio-tile.kik-audio-tile-metered::after {
background: rgba(0, 0, 0, 0.24);
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.kik-audio-tile-metered .music-spl {
position: absolute;
inset: auto 0 20% 0;
transform: none;
height: 34%;
padding: 0 12%;
box-sizing: border-box;
color: #fff;
z-index: 1;
}
.kik-audio-tile-metered .music-spl i {
width: 3px;
border-radius: 3px;
}
.kik-audio-tile.kik-audio-tile-metered .music-spl-vu {
inset: 0;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: auto;
height: 100%;
max-width: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
padding-block-end: 16%;
transform: none;
}
.kik-audio-tile.kik-audio-tile-metered .music-vu-face {
width: 84%;
height: auto;
flex: 0 0 auto;
}
.kik-audio-tile-metered .music-vu-arc {
stroke: rgba(255, 255, 255, 0.88);
}
.kik-audio-tile-metered .music-vu-needle {
fill: #fff;
}
.kik-audio-tile-metered .music-vu-red {
stroke: #ff5a5a;
}
@media (hover: hover) {
.pat-link-list li a > .kik-audio-tile.kik-audio-tile-metered:hover::after,
.pat-table .item-name a.name > .kik-audio-tile.kik-audio-tile-metered:hover::after {
background:
rgba(0, 0, 0, 0.38)
url('data:image/svg+xml;utf8,')
center / 38% no-repeat;
background-clip: padding-box;
}
}
@media (hover: hover) {
.pat-link-list li.is-playing a > .kik-audio-tile.kik-audio-tile-metered:hover::after {
background:
rgba(0, 0, 0, 0.38)
url('data:image/svg+xml;utf8,')
center / 34% no-repeat;
background-clip: padding-box;
}
}
@media (hover: hover) {
.pat-link-list li a > .kik-audio-tile-metered:hover .music-spl,
.pat-table .item-name a.name > .kik-audio-tile-metered:hover .music-spl {
opacity: 0;
}
}
.pat-link-list li a:has(> .preview) > figure.preview > img {
object-position: center;
}
.pat-link-list li a > figure.preview:has(> .kik-hover-preview) {
position: relative;
}
.pat-link-list li a > figure.preview > .kik-hover-preview {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
transition: opacity 0.25s ease-in-out;
pointer-events: none;
}
.pat-link-list li a > figure.preview > .kik-hover-preview.is-playing {
opacity: 1;
}
.pat-link-list > li:has(.pat-context-menu[aria-expanded="true"]) > a:not(.pat-context-menu),
.pat-link-list > li:has(.pat-context-menu.tooltip-active-click) > a:not(.pat-context-menu) {
background-color: var(--pat-surface-background-colour-highlight);
--pat-x-list-scrim-colour: var(--pat-surface-background-colour-highlight);
}
@media (hover: hover) {
.pat-link-list.cards:not(.preview-cards) li:hover > a:where(:not(.pat-lazy-load)):not(.more),
.pat-link-list:not(.preview-cards) li:hover > a.card:where(:not(.pat-lazy-load)):not(.more),
.pat-link-list.cards-auto:not(.columns-none):not(.preview-cards) li:hover > a:where(:not(.pat-lazy-load)):not(.more) {
--pat-x-list-scrim-colour: var(--pat-surface-background-colour-highlight);
}
}
@media (hover: hover) {
@container preview-cards (min-width: 350px) {
.pat-link-list.cards-auto.preview-cards li:hover:not(:has(.pat-context-menu[aria-expanded="true"])):not(:has(.pat-context-menu.tooltip-active-click)) > a:where(:not(.pat-lazy-load)):not(.more) {
background-color: var(--pat-surface-background-colour);
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
}
}
}
@media (hover: hover) {
@container (min-width: calc(38em + 10px)) {
.pat-link-list.cards-auto.preview-cards:not(.columns-none) li:hover:not(:has(.pat-context-menu[aria-expanded="true"])):not(:has(.pat-context-menu.tooltip-active-click)) > a:where(:not(.pat-lazy-load)):not(.more) {
background-color: var(--pat-surface-background-colour);
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
}
}
}
.pat-link-list li a[href]:hover,
.pat-link-list li a[href]:hover .item-title,
.pat-link-list li a[href]:hover .link-title {
text-decoration: none;
color: var(--colour-link);
}
.pat-link-list.cards li a.pat-inject.current {
box-shadow: 0 0 0 2px var(--colour-accent);
}
.kik-vault {
--kik-vault-gap: var(--spacing-medium, 1rem);
}
.kik-vault .kik-vault-lock {
display: none;
}
.kik-vault.is-locked .kik-vault-lock {
display: block;
}
.kik-vault.is-locked .kik-vault-body {
display: none;
}
.kik-vault .kik-vault-lead {
font-size: var(--font-size-large, 1.125rem);
margin-block-end: var(--kik-vault-gap);
}
.kik-vault .kik-vault-warning {
margin-block-start: var(--kik-vault-gap);
max-inline-size: 42em;
}
.kik-vault.is-busy .kik-vault-body {
opacity: 0.5;
}
.kik-vault-preview:has(> .page-module.type-pdf) {
inline-size: min(100%, 56rem);
}
.kik-vault-preview {
display: block;
width: fit-content;
margin: 0 auto;
}
.kik-vault-preview img,
.kik-vault-preview video {
max-inline-size: 100%;
max-block-size: 70vh;
block-size: auto;
object-fit: contain;
margin-inline: auto;
}
.kik-vault-preview audio {
inline-size: 100%;
}
.kik-vault-preview .page-module.type-pdf {
inline-size: 100%;
}
.kik-vault-preview .kik-vault-preview-text {
max-block-size: 70vh;
overflow: auto;
padding: var(--kik-vault-gap, 1rem);
border-radius: var(--border-radius, 0.5rem);
background: var(--panel-bg, rgb(0 0 0 / 3%));
white-space: pre-wrap;
overflow-wrap: anywhere;
tab-size: 4;
}
.kik-vault-upload {
position: relative;
overflow: hidden;
}
.kik-vault-upload input[type="file"] {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.documents-personal-list a.kik-vault-folder::before {
color: var(--font-color, currentColor);
}
.kik-vault-unlock-auto {
position: absolute;
inline-size: 1px;
block-size: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.document-body.kik-vault-dropping {
outline: 2px dashed var(--colour-accent);
outline-offset: -8px;
border-radius: var(--border-radii);
}
.kik-vault-table tr.kik-vault-dragging {
opacity: 0.4;
}
.kik-vault-table tr[draggable] .item-name a.name::after {
pointer-events: none;
}
@media (hover: hover) {
.kik-vault-table tbody tr[draggable]:hover {
--pat-table-cell-background-colour: var(--pat-surface-background-colour-hover);
background-color: var(--pat-surface-background-colour-hover);
}
}
.kik-vault-table tr.kik-vault-drop-target {
outline: 2px dashed var(--colour-accent);
outline-offset: -2px;
border-radius: var(--border-radii);
}
.pat-toolbar .pat-back-button.kik-vault-drop-target {
--pat-back-button-background-colour: var(--pat-back-button-background-colour-hover);
--pat-back-button-border-colour: var(--colour-accent);
color: var(--pat-back-button-text-colour-hover);
}
.kik-vault-preview:has(> .kik-vault-note) {
inline-size: min(100%, var(--quaive-document-max-width, 46rem));
}
.kik-vault-note {
inline-size: 100%;
text-align: start;
}
.document-content:has(.kik-vault.is-editing) > .pat-toolbar {
display: none;
}
.kik-vault-grid .kik-vault-tile.is-loading .follow {
background: color-mix(in srgb, var(--colour-base-background, #faf6ef) 60%, var(--colour-accent, #888) 12%);
}
.kik-vault-grid .kik-vault-tile .follow {
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 1 / 1;
overflow: hidden;
}
.kik-vault-grid .kik-vault-tile img {
width: 100%;
height: 100%;
object-fit: cover;
}
.kik-vault-grid .kik-vault-mark {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
height: 100%;
padding: 1rem;
box-sizing: border-box;
text-align: center;
color: var(--body-font-colour);
}
.kik-vault-grid .kik-vault-mark svg {
width: 2.4rem;
height: 2.4rem;
}
.kik-vault-grid .kik-vault-mark .kik-vault-mark-name {
font-size: var(--font-size-small, 0.85em);
overflow-wrap: anywhere;
max-height: 3.6em;
overflow: hidden;
}
.kik-vault.is-editing-photo .kik-vault-photo-editor {
display: block;
min-height: 60vh;
}
.kik-vault-photo-editor .kik-vault-photo-stage {
margin: 0;
min-height: 60vh;
}
.kik-progress:empty,
.kik-vault .kik-vault-status:empty {
display: none;
}
.kik-progress,
.kik-vault .kik-vault-status {
position: fixed;
inset-block-start: 50%;
inset-inline-start: 50%;
transform: translate(-50%, -50%);
z-index: 30;
margin: 0;
padding: 0.75rem 1.25rem;
border-radius: var(--border-radii);
background-color: var(--pat-well-background-colour);
-webkit-backdrop-filter: var(--pat-surface-backdrop-filter, blur(10px) saturate(1.5));
backdrop-filter: var(--pat-surface-backdrop-filter, blur(10px) saturate(1.5));
box-shadow: var(--pat-well-box-shadow, var(--default-box-shadow));
pointer-events: none;
}
.kik-progress,
.kik-vault .kik-vault-status {
display: grid;
justify-items: center;
gap: 0.5rem;
min-inline-size: 12rem;
}
.kik-progress-bar,
.kik-vault .kik-vault-status-bar {
display: none;
inline-size: 100%;
block-size: 0.25rem;
overflow: hidden;
border-radius: var(--border-radii);
background-color: var(--pat-x-list-background-colour, rgba(127, 127, 127, 0.25));
}
.kik-progress.is-working .kik-progress-bar,
.kik-vault .kik-vault-status.is-working .kik-vault-status-bar {
display: block;
}
.kik-progress-bar > span,
.kik-vault .kik-vault-status-bar > span {
display: block;
block-size: 100%;
border-radius: inherit;
background-color: var(--brand-colour, currentColor);
}
.kik-progress:not(.is-measured) .kik-progress-bar > span,
.kik-vault .kik-vault-status:not(.is-measured) .kik-vault-status-bar > span {
inline-size: 33%;
animation: kik-progress-slide 1.4s ease-in-out infinite;
}
.kik-progress.is-measured .kik-progress-bar > span,
.kik-vault .kik-vault-status.is-measured .kik-vault-status-bar > span {
transition: inline-size 0.2s linear;
}
@keyframes kik-progress-slide {
from { transform: translateX(-100%); }
to { transform: translateX(300%); }
}
.pat-table.cards tr:is([data-drive-move], [data-drive-drop]) .item-name a.name::after {
pointer-events: none;
}
@media (hover: hover) {
.pat-table.cards tbody tr:is([data-drive-move], [data-item-tag], [data-drive-drop]):hover,
.pat-table.cards tbody tr:is([data-drive-move], [data-item-tag], [data-drive-drop]):has(
.item-name a[href]:not(.icon):not(.current):hover),
.kik-vault-table tbody tr[draggable]:hover,
.kik-vault-table tbody tr[draggable]:has(
.item-name a[href]:not(.icon):not(.current):hover) {
--pat-table-cell-background-colour: var(--pat-surface-background-colour-hover);
background-color: var(--pat-surface-background-colour-hover);
--kik-row-state-colour: transparent;
}
}
@media (hover: hover) {
.pat-table:is(.cards, .preview-cards).functions-overlay tbody
tr:is([data-drive-move], [data-item-tag], [data-drive-drop]):hover td.functions
> *:not(template):not(.tooltip-active-click):not([aria-expanded="true"]),
.kik-vault-table.functions-overlay tbody tr[draggable]:hover td.functions
> *:not(template):not(.tooltip-active-click):not([aria-expanded="true"]) {
background-color: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
.pat-table tr.kik-drive-dragging {
opacity: 0.4;
}
.pat-table tr.kik-drive-moving {
opacity: 0.6;
}
.pat-table tr.kik-drive-moved {
opacity: 0;
transition: opacity 0.25s ease-out;
}
.pat-table tr.kik-drive-drop-target {
outline: 2px dashed var(--colour-accent);
outline-offset: -2px;
border-radius: var(--border-radii);
}
.pat-toolbar-breadcrumbs > a.kik-drive-drop-target {
color: var(--colour-accent);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-style: dashed;
}
.pat-toolbar .icon.back.kik-drive-drop-target {
background-color: var(--pat-toolbar-icon-background-colour-hover);
outline: 2px dashed var(--colour-accent);
outline-offset: -2px;
}
.pat-menu-list a.kik-drive-drop-target {
outline: 2px dashed var(--colour-accent);
outline-offset: -2px;
border-radius: var(--border-radii);
}
.pat-table tbody tr.kik-drive-copied,
.pat-link-list > li.kik-drive-copied {
background-color: var(--kik-selected-ground, rgba(0, 0, 0, 0.06));
transition: background-color var(--base-animation-duration, 0.2s) ease-out;
}
.film-roll-item.kik-photo-dragging {
opacity: 0.4;
}
[data-photo-drop].kik-photo-drop-target {
outline: 2px dashed var(--colour-accent);
outline-offset: -2px;
border-radius: var(--border-radii);
}
[data-photo-drop].kik-photo-drop-busy {
outline: 2px solid var(--colour-accent);
outline-offset: -2px;
border-radius: var(--border-radii);
}
[data-photo-drop].kik-photo-drop-done {
color: var(--colour-accent);
}
[data-photo-drop].kik-photo-drop-failed {
color: var(--colour-danger, #b00020);
}
.pat-table.cards tr[data-item-tag] .item-name a.name::after,
.pat-table.preview-cards tr[data-item-tag] .item-name a.name::after {
pointer-events: none;
}
.pat-table tr.kik-item-dragging,
.pat-link-list > li.kik-item-dragging {
opacity: 0.4;
}
.sidebar-extras li:has(> a.kik-item-drop-target),
.pat-menu-list li:has(> a.kik-item-drop-target) {
outline: 2px dashed var(--colour-accent);
outline-offset: -2px;
border-radius: var(--border-radii);
}
.sidebar-extras a.kik-item-drop-target:not(li > a),
.pat-menu-list a.kik-item-drop-target:not(li > a) {
outline: 2px dashed var(--colour-accent);
outline-offset: -2px;
border-radius: var(--border-radii);
}
.sidebar-extras a.kik-item-drop-busy,
.pat-menu-list a.kik-item-drop-busy {
opacity: 0.6;
}
.sidebar-extras a.kik-item-drop-done,
.pat-menu-list a.kik-item-drop-done {
background-color: var(--pat-surface-background-colour-hover);
transition: background-color 0.25s ease-out;
}
.sidebar-extras a.kik-item-drop-failed,
.pat-menu-list a.kik-item-drop-failed {
outline: 2px solid var(--colour-warning, #c92a2a);
outline-offset: -2px;
border-radius: var(--border-radii);
}
.pat-table tbody tr[data-drive-move],
.pat-table tbody tr[data-item-tag],
.pat-table tbody tr[data-drive-drop],
.kik-vault-table tbody tr[draggable],
.pat-link-list > li[data-item-tag] {
user-select: none;
}
.pat-link-list > li.kik-selected {
background-color: var(--kik-selected-ground);
outline: 2px solid var(--colour-accent);
outline-offset: -2px;
}
@media (hover: hover) {
.pat-link-list > li.kik-selected:hover {
background-color: var(--kik-selected-ground);
}
}
.pat-table tbody tr.kik-selected,
.pat-link-list > li.kik-selected {
--kik-selected-ground:
color-mix(in srgb, var(--colour-accent) 14%,
var(--pat-surface-background-colour,
var(--colour-base-background, white)));
}
.pat-table tbody tr.kik-selected:not(.table-load-more),
.pat-table tbody tr.kik-selected:not(.table-load-more):has(
.item-name a[href]:not(.icon):not(.current):hover),
.pat-table tbody tr.kik-selected:not(.table-load-more):has(td.functions:hover) {
--kik-row-state-colour: var(--kik-selected-ground);
--pat-table-cell-background-colour: transparent;
}
.pat-table.cards tbody tr.kik-selected:not(.table-load-more),
.pat-table.cards tbody tr.kik-selected:not(.table-load-more):has(
.item-name a[href]:not(.icon):not(.current):hover),
.pat-table.cards tbody tr.kik-selected:not(.table-load-more):has(td.functions:hover) {
background-color: var(--kik-selected-ground);
outline: 2px solid var(--colour-accent);
outline-offset: -2px;
}
.pat-table:not(.cards):not(.preview-cards) tbody tr.kik-selected:not(.table-load-more) {
outline: none;
}
.pat-table:not(.cards):not(.preview-cards) tbody tr.kik-selected:not(.table-load-more)
> :is(th, td) {
box-shadow: none;
}
.pat-table:not(.cards):not(.preview-cards) tbody tr.kik-selected:not(.table-load-more)
> :is(th, td):not(.audio-track-cover):not(.music-track-cover)::after,
.pat-table:not(.cards):not(.preview-cards) tbody tr.kik-selected:not(.table-load-more)
> :is(th, td):is(.audio-track-cover, .music-track-cover)::before {
box-shadow: inset 0 2px 0 0 var(--colour-accent),
inset 0 -2px 0 0 var(--colour-accent),
var(--kik-ring-start, inset 0 0 0 0 transparent),
var(--kik-ring-end, inset 0 0 0 0 transparent);
}
.pat-table:not(.cards):not(.preview-cards) tbody tr.kik-selected:not(.table-load-more)
> :is(th, td):not(.audio-track-cover):not(.music-track-cover):first-child::after,
.pat-table:not(.cards):not(.preview-cards) tbody tr.kik-selected:not(.table-load-more)
> :is(th, td):is(.audio-track-cover, .music-track-cover):first-child::before {
--kik-ring-start: inset 2px 0 0 0 var(--colour-accent);
}
.pat-table:not(.cards):not(.preview-cards) tbody tr.kik-selected:not(.table-load-more)
> :is(th, td):not(.audio-track-cover):not(.music-track-cover):last-child::after {
--kik-ring-end: inset -2px 0 0 0 var(--colour-accent);
}
.pat-table.functions-overlay:not(.cards):not(.preview-cards) tbody
tr.kik-selected:not(.table-load-more) > :is(th, td).item-name::after {
--kik-ring-end: inset -2px 0 0 0 var(--colour-accent);
}
.pat-table.functions-overlay:not(.cards):not(.preview-cards) tbody
tr.kik-selected:not(.table-load-more) > td.functions::after {
display: none;
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows:not(.cards):not(.preview-cards) tbody
tr.kik-selected:not(.table-load-more) > :is(th, td).item-name::after {
--kik-ring-end: inset -2px 0 0 0 var(--colour-accent);
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows:not(.cards):not(.preview-cards) tbody
tr.kik-selected:not(.table-load-more) > td.functions::after {
display: none;
}
}
@media (hover: hover) {
.pat-table:not(.cards):not(.preview-cards) tbody tr.kik-selected:not(.table-load-more):hover,
.pat-table:not(.cards):not(.preview-cards) tbody tr.kik-selected:not(.table-load-more):has(
.item-name a[href]:not(.icon):not(.current):hover),
.pat-table:not(.cards):not(.preview-cards) tbody tr.kik-selected:not(.table-load-more):has(
.item-state a[href]:not(.icon):not(.current):hover),
.pat-table:not(.cards):not(.preview-cards) tbody tr.kik-selected:not(.table-load-more):has(td.functions:hover) {
--kik-row-state-colour: var(--kik-selected-ground);
--pat-table-cell-background-colour: transparent;
}
}
.pat-table.preview-cards tbody tr:is([data-drive-move], [data-item-tag], [data-drive-drop]):hover,
.pat-table.preview-cards tbody tr:is([data-drive-move], [data-item-tag], [data-drive-drop]):has(
.item-name a[href]:not(.icon):not(.current):hover),
.pat-table.preview-cards tbody tr.kik-selected:not(.table-load-more) {
--kik-card-frame: 6px;
--kik-card-wash: var(--pat-surface-hover-ground, rgba(255, 255, 255, 0.94));
border-radius: var(--kik-card-art-radius, var(--border-radii-medium, var(--border-radii)));
background-color: var(--kik-card-wash);
box-shadow: 0 0 0 var(--kik-card-frame) var(--kik-card-wash);
outline: 1px solid color-mix(in srgb, var(--body-font-colour) 16%, transparent);
outline-offset: var(--kik-card-frame);
--pat-table-cell-background-colour: transparent;
}
.pat-table.preview-cards tbody tr.kik-selected:not(.table-load-more) {
--kik-card-wash: var(--kik-selected-ground);
outline: 3px solid var(--colour-accent);
outline-offset: calc(var(--kik-card-frame) - 3px);
}
@media (hover: hover) {
.pat-table.preview-cards tbody tr.kik-selected:not(.table-load-more):hover,
.pat-table.preview-cards tbody tr.kik-selected:not(.table-load-more):has(
.item-name a[href]:not(.icon):not(.current):hover) {
--kik-card-wash: var(--kik-selected-ground);
outline: 3px solid var(--colour-accent);
outline-offset: calc(var(--kik-card-frame) - 3px);
}
}
@media (hover: hover) {
.pat-table tbody tr.kik-selected:not(.table-load-more):hover,
.pat-table tbody tr.kik-selected:not(.table-load-more):has(
.item-name a[href]:not(.icon):not(.current):hover),
.pat-table tbody tr.kik-selected:not(.table-load-more):has(
.item-state a[href]:not(.icon):not(.current):hover),
.pat-table tbody tr.kik-selected:not(.table-load-more):has(td.functions:hover) {
--pat-table-cell-background-colour: var(--kik-selected-ground);
--kik-row-state-colour: transparent;
}
}
@media (hover: hover) {
.pat-table.cards tbody tr.kik-selected:not(.table-load-more):hover,
.pat-table.cards tbody tr.kik-selected:not(.table-load-more):has(
.item-name a[href]:not(.icon):not(.current):hover),
.pat-table.cards tbody tr.kik-selected:not(.table-load-more):has(td.functions:hover) {
background-color: var(--kik-selected-ground);
}
}
.pat-table.preview-cards tbody tr:not(.kik-selected):not(.table-load-more):is(
.current, :has(.current)) {
border-radius: var(--kik-card-art-radius,
var(--border-radii-medium, var(--border-radii)));
outline: 1px solid color-mix(in srgb, var(--body-font-colour) 16%, transparent);
outline-offset: var(--kik-card-frame, 6px);
}
.pat-table:not(.cards):not(.preview-cards) tbody tr:not(.kik-selected):not(.table-load-more):is(
.current, :has(.current)) > :is(th, td):not(.audio-track-cover):not(.music-track-cover)::after,
.pat-table:not(.cards):not(.preview-cards) tbody tr:not(.kik-selected):not(.table-load-more):is(
.current, :has(.current)) > :is(th, td):is(.audio-track-cover, .music-track-cover)::before {
box-shadow: inset 0 1px 0 0 var(--kik-active-hairline),
inset 0 -1px 0 0 var(--kik-active-hairline),
var(--kik-ring-start, inset 0 0 0 0 transparent),
var(--kik-ring-end, inset 0 0 0 0 transparent);
}
.pat-table:not(.cards):not(.preview-cards) tbody tr:not(.kik-selected):not(.table-load-more):is(
.current, :has(.current)) > :is(th, td):not(.audio-track-cover):not(.music-track-cover):first-child::after,
.pat-table:not(.cards):not(.preview-cards) tbody tr:not(.kik-selected):not(.table-load-more):is(
.current, :has(.current)) > :is(th, td):is(.audio-track-cover, .music-track-cover):first-child::before {
--kik-ring-start: inset 1px 0 0 0 var(--kik-active-hairline);
}
.pat-table:not(.cards):not(.preview-cards) tbody tr:not(.kik-selected):not(.table-load-more):is(
.current, :has(.current))
> :is(th, td):not(.audio-track-cover):not(.music-track-cover):last-child::after {
--kik-ring-end: inset -1px 0 0 0 var(--kik-active-hairline);
}
.pat-table.functions-overlay:not(.cards):not(.preview-cards) tbody
tr:not(.kik-selected):not(.table-load-more):is(.current, :has(.current))
> :is(th, td).item-name::after {
--kik-ring-end: inset -1px 0 0 0 var(--kik-active-hairline);
}
.pat-table.functions-overlay:not(.cards):not(.preview-cards) tbody
tr:not(.kik-selected):not(.table-load-more):is(.current, :has(.current))
> td.functions::after {
display: none;
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows:not(.cards):not(.preview-cards) tbody
tr:not(.kik-selected):not(.table-load-more):is(.current, :has(.current))
> :is(th, td).item-name::after {
--kik-ring-end: inset -1px 0 0 0 var(--kik-active-hairline);
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows:not(.cards):not(.preview-cards) tbody
tr:not(.kik-selected):not(.table-load-more):is(.current, :has(.current))
> td.functions::after {
display: none;
}
}
.pat-table.cards tbody tr:not(.kik-selected):not(.table-load-more):is(
.current, :has(.current)) {
outline: 1px solid var(--kik-active-hairline);
outline-offset: -1px;
}
.pat-table tbody tr,
.pat-link-list > li {
--kik-active-hairline: color-mix(in srgb, var(--body-font-colour) 16%, transparent);
}
.pat-link-list > li {
margin-bottom: 10px;
}
.pat-table.functions-overlay tbody tr.kik-selected td.functions
> *:not(template):not(.tooltip-active-click):not([aria-expanded="true"]),
.kik-vault-table.functions-overlay tbody tr.kik-selected td.functions
> *:not(template):not(.tooltip-active-click):not([aria-expanded="true"]) {
background-color: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
html.kik-select-mode .toolbar-section.quick-functions:has(> .kik-select-mode-toggle)
> *:not(.kik-select-mode-toggle):not(.kik-select-action) {
display: none;
}
.pat-toolbar .kik-select-action {
display: none;
}
html.kik-select-mode .pat-toolbar .kik-select-action {
display: inline-block;
}
.kik-select-action[disabled] {
opacity: 0.4;
}
.project-code-input {
text-transform: uppercase;
max-width: 8em;
letter-spacing: 0.08em;
}
.kik-ooxml-preview .kik-ooxml-page {
box-shadow: var(--quaive-document-box-shadow);
border-radius: var(--border-radii-medium, var(--border-radii));
overflow: hidden;
}
.kik-ooxml-preview .kik-ooxml-page.kik-ooxml-sheet {
--kik-ooxml-sheet-margin: 3rem;
box-sizing: border-box;
padding: var(--kik-ooxml-sheet-margin);
background-color: #fff;
}
@media (max-width: 680px) {
.kik-ooxml-preview .kik-ooxml-page.kik-ooxml-sheet {
--kik-ooxml-sheet-margin: 1rem;
}
}
.kik-ooxml-preview .kik-ooxml-page.kik-ooxml-page canvas {
box-shadow: none;
border-radius: 0;
}
.kik-ooxml-preview.is-preparing {
position: relative;
min-block-size: 40vh;
}
.kik-ooxml-preview.is-preparing::before {
content: var(--glyph-spinner);
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
inline-size: 50px;
block-size: 50px;
margin-block-start: -25px;
margin-inline-start: -25px;
font: var(--pat-throbber-size, 40px)/var(--pat-throbber-size, 40px) fontello;
text-align: center;
color: var(--pat-throbber-colour, black);
text-shadow: var(--pat-throbber-text-shadow, none);
-webkit-text-stroke: 1px var(--pat-throbber-text-stroke, transparent);
opacity: 0;
animation: spin 2s infinite linear, fadeIn 1s 1s linear 1 forwards;
}
@media (prefers-reduced-motion: reduce) {
.kik-ooxml-preview.is-preparing::before {
animation: none;
opacity: 1;
}
}
body:not(:has(.pat-iframe--dark-adapted)):not(:has(.pat-iframe--dark-original)) .kik-mail-original-item {
display: none;
}
.kik-mail-original-item .kik-when-adapted,
.kik-mail-original-item .kik-when-original {
display: none;
}
body:has(.pat-iframe--dark-adapted) .kik-mail-original-item .kik-when-adapted {
display: inline;
}
body:has(.pat-iframe--dark-original) .kik-mail-original-item .kik-when-original {
display: inline;
}
.pat-iframe.message-body iframe {
border-radius: 0 !important;
}
.pat-modal-panel.mail-panel > .modal-panel-contents {
background-color: var(--kik-mail-chrome-tint, var(--colour-base-background));
}
.pat-well.mail-event-well {
margin: 0;
padding: var(--small-screen-padding);
}
.pat-well.mail-event-well .byline .agenda-status {
display: block;
font-weight: 600;
}
.pat-well.mail-event-well .byline .agenda-status.planned {
color: var(--colour-success, #16a34a);
}
.pat-well.mail-event-well .byline .agenda-status.conflict {
color: var(--colour-alert, #dc2626);
}
#mail-suggested-event {
display: flex;
flex-direction: column;
gap: 1rem;
}
@container screen style(--screen-small: true) {
.pat-well.mail-event-well > .well-title-group:has(.pat-toolbar) {
grid-template-columns: minmax(0, 1fr);
row-gap: 1rem;
}
}
@container screen style(--screen-small: true) {
.pat-well.mail-event-well > .well-title-group > .pat-toolbar .toolbar-section.quick-functions {
justify-self: start;
justify-content: start;
}
}
kik-promo {
display: block;
text-align: center;
padding: var(--kik-promo-padding, 1rem 0 0.5rem);
}
.kik-promo-logo {
display: block;
width: min(15rem, 70%);
height: auto;
margin: 0 auto var(--kik-promo-logo-gap, 1.25rem);
color: var(--kik-promo-ink, var(--font-color, currentColor));
}
kik-promo {
--kik-promo-in-duration: 700ms;
--kik-promo-in-delay: 400ms;
--kik-promo-in-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--kik-promo-in-step: calc(var(--kik-promo-in-duration) * 0.6);
}
.kik-promo-lettering,
.kik-promo-swirl,
.kik-promo-letter {
animation: kik-promo-part-in var(--kik-promo-in-duration, 700ms)
var(--kik-promo-in-ease, cubic-bezier(0.22, 0.61, 0.36, 1))
var(--kik-promo-in-delay, 400ms) both;
}
@keyframes kik-promo-part-in {
from { transform: scale(1.1); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
.kik-promo-lettering,
.kik-promo-swirl {
transform-box: fill-box;
transform-origin: center;
}
.kik-promo-lettering {
animation-name: kik-promo-lettering-in;
}
@keyframes kik-promo-lettering-in {
from { transform: translate(0, -1.9500007px) scale(1.1); opacity: 0; }
to { transform: translate(0, -1.9500007px) scale(1); opacity: 1; }
}
.kik-promo-swirl {
animation-name: kik-promo-swirl-in;
}
@keyframes kik-promo-swirl-in {
from { transform: rotate(-90deg) scale(1.1); opacity: 0; }
to { transform: rotate(0deg) scale(1); opacity: 1; }
}
.kik-promo-letter {
display: inline-block;
transform-origin: center;
}
.kik-promo-letter:nth-child(1) {
animation-delay: calc(var(--kik-promo-in-delay, 400ms)
+ var(--kik-promo-in-step, 420ms));
}
.kik-promo-letter:nth-child(2) {
animation-delay: calc(var(--kik-promo-in-delay, 400ms)
+ var(--kik-promo-in-step, 420ms) * 2);
}
.kik-promo-letter:nth-child(3) {
animation-delay: calc(var(--kik-promo-in-delay, 400ms)
+ var(--kik-promo-in-step, 420ms) * 3);
}
@media (prefers-reduced-motion: reduce) {
.kik-promo-lettering,
.kik-promo-swirl,
.kik-promo-letter {
animation: none;
}
}
.kik-promo-intro {
margin: 30px 0;
}
.kik-promo-products {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
gap: var(--kik-promo-products-gap, 0.75rem);
text-align: start;
}
.kik-promo-product {
display: flex;
flex-direction: column;
gap: 0.5rem;
padding: var(--kik-promo-product-padding, 1rem);
border: 1px solid var(--kik-promo-product-border,
var(--border-color, rgb(0 0 0 / 0.15)));
border-radius: var(--kik-promo-product-radius, var(--border-radius, 0.75rem));
color: inherit;
text-decoration: none;
background: var(--kik-promo-product-background, white);
}
@media (hover: hover) {
.kik-promo-product:hover {
border-color: var(--kik-promo-product-hover-border, var(--app-colour, currentColor));
background-color: var(--kik-promo-product-hover-background, rgb(0 0 0 / 0.03));
}
}
.kik-promo-product-icon {
display: flex;
align-items: center;
justify-content: center;
inline-size: 2.375rem;
block-size: 2.375rem;
border-radius: var(--kik-promo-icon-radius, 0.625rem);
background: var(--kik-promo-icon-background, rgb(234 108 26 / 0.12));
color: var(--kik-promo-icon-colour, #8c3f0d);
}
.kik-promo-product-icon .kik-icon {
inline-size: 1.3rem;
block-size: 1.3rem;
}
.kik-promo-product-name {
font-weight: 500;
line-height: 1.2;
}
.kik-promo-product-sub {
font-size: 0.85em;
color: var(--font-color-light, inherit);
}
.kik-promo-product-cta {
display: flex;
align-items: center;
gap: 0.25em;
font-size: 0.9em;
color: var(--kik-promo-cta-colour, #c25a12);
}
.kik-promo-product-cta .kik-icon {
inline-size: 1em;
block-size: 1em;
}
.kik-promo-product-cta .kik-icon:dir(rtl) {
scale: -1 1;
}
.kik-promo-lockup {
--kik-promo-lockup-mark: min(9.5rem, 50vw);
display: flex;
align-items: baseline;
justify-content: center;
gap: calc(var(--kik-promo-lockup-mark, 9.5rem) * 0.1);
margin-block-end: var(--kik-promo-logo-gap, 1.25rem);
}
.kik-promo-lockup .kik-promo-logo {
inline-size: var(--kik-promo-lockup-mark, 9.5rem);
margin: 0;
}
.kik-promo-lockup-product {
font-size: calc(var(--kik-promo-lockup-mark, 9.5rem) * 0.268);
font-weight: 400;
font-variation-settings: 'wght' var(--kik-promo-lockup-product-weight, 300);
line-height: 1;
white-space: nowrap;
transform: translateY(calc(var(--kik-promo-lockup-mark, 9.5rem) * -0.03));
color: var(--kik-promo-lockup-product-colour, #a5a2ab);
}
.kik-preview-msg {
--pat-button-bar-margin-top-bottom: 7px;
--pat-x-list-border-radius: 10px;
--pat-x-list-gutter: 7px;
}
.kiki-bubble {
white-space: normal;
overflow-wrap: anywhere;
}
.kiki-bubble > * + .pat-rich {
margin-block-start: var(--kik-bubble-part-gap, 0.6rem);
}
.kiki-bubble > .pat-rich:first-child {
margin-block-start: 0;
}
.kiki-bubble > .pat-rich:not(:last-child) {
margin-block-end: var(--pat-rich-tail-white);
}
.kiki-bubble > .pat-rich:last-child {
margin-block-end: 0;
}
.kiki-bubble > .pat-rich > :first-child {
margin-block-start: 0;
}
.kiki-bubble > .pat-rich > :last-child {
margin-block-end: 0;
}
.kiki-bubble > .pat-link-list {
margin-inline: 0;
padding-inline: 0;
}
.kiki-bubble table,
.kik-msg-body table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
font-size: 0.78em;
line-height: 1.35;
overflow-wrap: normal;
word-break: normal;
hyphens: none;
}
.kiki-bubble table th,
.kiki-bubble table td,
.kik-msg-body table th,
.kik-msg-body table td {
padding: 0.2em 0.4em;
vertical-align: top;
min-width: 2.5em;
text-wrap: pretty;
}
.kiki-bubble table code,
.kik-msg-body table code {
overflow-wrap: anywhere;
}
.kiki-restaurants {
margin: 0.6rem 0;
}
.kiki-restaurant-cards {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4rem;
}
.kiki-restaurant {
padding: 0.55rem 0.7rem;
border: 1px solid var(--gray-lighter, #e2e2e2);
border-radius: var(--pat-x-list-border-radius, 10px);
background: var(--white, #fff);
border-left-width: 3px;
}
.kiki-restaurant.state-free {
border-left-color: var(--success, #3c9a5f);
}
.kiki-restaurant.state-full {
border-left-color: var(--gray-light, #b9b9b9);
}
.kiki-restaurant.state-unknown {
border-left-color: var(--warning, #d8a13a);
}
.kiki-restaurant .item-title {
display: block;
font-weight: 600;
}
.kiki-restaurant .item-byline {
display: block;
font-size: 0.82em;
opacity: 0.75;
}
.kiki-restaurant-slots {
margin-top: 0.4rem;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.kiki-slot-day {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 0.25rem;
}
.kiki-slot-date,
.kiki-slot-shift {
font-size: 0.78em;
opacity: 0.7;
}
.kiki-slot-shift {
font-style: italic;
}
a.kiki-slot {
display: inline-block;
padding: 0.1rem 0.4rem;
border-radius: 0.5rem;
background: var(--gray-lightest, #f2f2f2);
color: var(--text-color, #1f1f1f);
font-size: 0.82em;
text-decoration: none;
white-space: nowrap;
}
a.kiki-slot:hover,
a.kiki-slot:focus {
background: var(--brand-color, #2b6cb0);
color: var(--white, #fff);
}
.kiki-restaurant-note {
margin: 0.35rem 0 0;
font-size: 0.82em;
opacity: 0.8;
}
.kiki-restaurant-menus {
margin: 0.35rem 0 0;
font-size: 0.82em;
}
.kiki-restaurant-menus .kiki-menus-label {
opacity: 0.7;
}
.kiki-restaurant-menus .kiki-menu:not(:last-child)::after {
content: " · ";
opacity: 0.5;
}
.kiki-restaurant-links {
margin: 0.45rem 0 0;
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.82em;
}
.kiki-restaurants-map {
margin-top: 0.5rem;
height: 260px;
min-height: 260px !important;
border-radius: var(--pat-x-list-border-radius, 10px);
overflow: hidden;
}
.kik-msg-bubble.is-speaking,
.kik-preview-msg.is-speaking {
box-shadow: inset 3px 0 0 var(--app-colour, #F37021);
}
.pat-button.kiki-speech-toggle.active {
color: var(--colour-accent);
}
.kiki-speech-toggle[hidden] {
display: none;
}
.kik-msg-bubble > .kiki-speak-bubble,
.kik-preview-msg > .kiki-speak-bubble {
position: absolute;
top: 0.3rem;
right: 2.2rem;
z-index: 6;
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.6rem;
height: 1.6rem;
padding: 0;
border: none;
border-radius: 50%;
color: var(--pat-toolbar-icon-text-colour, inherit);
background-color: var(--pat-toolbar-icon-background-colour);
-webkit-backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
cursor: default;
opacity: 0;
transition: opacity 0.12s ease-out;
}
.kik-msg-bubble > .kiki-speak-bubble[hidden],
.kik-preview-msg > .kiki-speak-bubble[hidden] {
display: none;
}
@media (hover: hover) {
.kik-msg:hover > .kik-msg-bubble > .kiki-speak-bubble {
opacity: 1;
}
}
@media (hover: hover) {
.kik-preview-msg:hover > .kiki-speak-bubble {
opacity: 0.65;
}
}
@media (hover: hover) {
.kik-msg-bubble > .kiki-speak-bubble:hover,
.kik-preview-msg > .kiki-speak-bubble:hover {
opacity: 1;
color: var(--pat-toolbar-icon-text-colour-hover, inherit);
background-color: var(--pat-toolbar-icon-background-colour-hover);
}
}
@media (hover: none) {
.kik-msg-bubble > .kiki-speak-bubble {
opacity: 1;
}
}
@media (hover: none) {
.kik-preview-msg > .kiki-speak-bubble {
opacity: 0.65;
}
}
.kik-msg-bubble > .kiki-speak-bubble:focus-visible,
.kik-preview-msg > .kiki-speak-bubble:focus-visible,
.kik-msg-bubble > .kiki-speak-bubble[aria-pressed="true"],
.kik-preview-msg > .kiki-speak-bubble[aria-pressed="true"] {
opacity: 1;
}
.kik-msg-bubble > .kiki-speak-bubble[aria-pressed="true"],
.kik-preview-msg > .kiki-speak-bubble[aria-pressed="true"] {
color: var(--app-colour, #F37021);
}
.kiki-dock .kik-preview-msg > .kiki-speak-bubble {
top: 6px;
right: 36px;
}
.kik-msg-bubble:has(> .kiki-speak-bubble:not([hidden])),
.kiki-dock .kik-preview-msg:has(> .kiki-speak-bubble:not([hidden])) {
padding-right: 3.9rem;
}
.kik-choice {
--kik-choice-radius: 12px;
--kik-choice-border: color-mix(in srgb, currentColor 16%, transparent);
--kik-choice-row-hover: color-mix(in srgb, currentColor 6%, transparent);
--kik-choice-accent: var(--app-colour, var(--colour-primary, #7A5AF8));
margin-block: 0.7rem 0.2rem;
border: 1px solid var(--kik-choice-border);
border-radius: var(--kik-choice-radius);
background: color-mix(in srgb, currentColor 3%, transparent);
overflow: hidden;
}
.kik-choice .kik-choice-question {
margin: 0;
padding: 0.7rem 0.85rem 0.6rem;
font-weight: 600;
line-height: 1.35;
}
.kik-choice .kik-choice-options {
margin: 0;
padding: 0;
list-style: none;
}
.kik-choice .kik-choice-options > li {
margin: 0;
list-style: none;
border-block-start: 1px solid var(--kik-choice-border);
}
.kik-choice .kik-choice-option {
display: flex;
gap: 0.6rem;
align-items: flex-start;
width: 100%;
margin: 0;
padding: 0.6rem 0.85rem;
border: 0;
border-radius: 0;
background: transparent;
color: inherit;
font: inherit;
text-align: start;
transition: background-color 0.12s ease-out;
}
.kik-choice .kik-choice-marker {
flex: 0 0 auto;
inline-size: 1rem;
block-size: 1rem;
margin-block-start: 0.15rem;
border: 1.5px solid var(--kik-choice-border);
border-radius: 50%;
transition: border-color 0.12s ease-out, box-shadow 0.12s ease-out;
}
.kik-choice .kik-choice-text {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-inline-size: 0;
}
.kik-choice .kik-choice-label {
line-height: 1.35;
}
.kik-choice .kik-choice-description {
font-size: 0.82em;
opacity: 0.7;
line-height: 1.35;
}
.kik-choice .kik-choice-foot {
display: flex;
justify-content: flex-end;
padding: 0.55rem 0.85rem;
border-block-start: 1px solid var(--kik-choice-border);
}
.kik-choice .kik-choice-option.is-picked {
background: color-mix(in srgb, var(--kik-choice-accent) 8%, transparent);
}
.kik-choice .kik-choice-option.is-picked .kik-choice-marker {
border-color: var(--kik-choice-accent);
box-shadow: inset 0 0 0 3px var(--kik-choice-accent);
}
.kik-choice .kik-choice-option.is-picked .kik-choice-label {
font-weight: 600;
}
.kik-choice.is-spent .kik-choice-option:not(.is-picked) {
opacity: 0.55;
}
.kik-choice.is-spent .kik-choice-foot {
display: none;
}
@media (hover: hover) {
.kik-choice:not(.is-spent) .kik-choice-option:hover {
background: var(--kik-choice-row-hover);
}
}
.kik-choice .kik-choice-option:focus-visible {
outline: 2px solid var(--kik-choice-accent);
outline-offset: -2px;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) [data-kiki-chat-body] {
display: none;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-chat-timeline {
display: flex;
flex-direction: column;
gap: 0.6rem;
padding: 50px 0 110px;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-chat-placeholder {
margin: auto;
opacity: 0.7;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg {
display: flex;
gap: 0.5rem;
align-items: flex-end;
max-width: 80%;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg .pat-avatar.icon {
width: 1.75rem;
height: 1.75rem;
flex: 0 0 auto;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg .pat-avatar.kik-has-avatar {
overflow: hidden;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg .pat-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg .pat-avatar.kik-avatar-kiki {
width: 1.75rem;
height: 1.75rem;
flex: 0 0 auto;
border-radius: 50%;
background: var(--colour-accent, #F37021);
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg .pat-avatar.kik-avatar-kiki svg {
width: 64%;
height: 64%;
display: block;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg .pat-avatar.kik-avatar-kiki svg path {
fill: var(--colour-accent-text, #fff);
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-bubble {
min-width: 0;
padding: 0.4rem 0.7rem;
border-radius: 0.9rem;
background: var(--kik-msg-bubble-background, #fff);
border: 1px solid var(--kik-msg-bubble-border, rgba(0, 0, 0, 0.18));
position: relative;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg.is-mine {
margin-left: auto;
flex-direction: row-reverse;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg.is-mine .kik-msg-bubble {
background: var(--kik-msg-bubble-background, #fff);
color: inherit;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg.is-mine .kik-msg-bubble a {
color: inherit;
text-decoration: underline;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-author {
display: block;
font-size: 0.72rem;
font-weight: 600;
opacity: 0.8;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg.is-mine .kik-msg-author {
display: none;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-body {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-body.pat-rich {
white-space: normal;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-body.pat-rich > :first-child {
margin-top: 0;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-body.pat-rich > :last-child {
margin-bottom: 0;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-foot {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 0.15rem;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-time {
font-size: 0.65rem;
opacity: 0.6;
margin-left: auto;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-typing {
display: inline-flex;
gap: 0.25rem;
padding: 0.1rem 0;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-typing span {
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: currentColor;
opacity: 0.35;
animation: kik-typing 1s infinite ease-in-out;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-typing span:nth-child(2) {
animation-delay: 0.15s;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-typing span:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes kik-typing {
0%, 60%, 100% { opacity: 0.25; } 30% { opacity: 0.8; } }
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg:has(.kik-msg-status, .kik-msg-typing) {
width: min(24rem, 80%);
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg:has(.kik-cursor) {
min-width: min(24rem, 80%);
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg:has(.kik-msg-status, .kik-msg-typing, .kik-cursor) .kik-msg-bubble {
flex: 1 1 auto;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-interrupted {
margin: 0;
opacity: 0.75;
font-style: italic;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-status {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.85em;
opacity: 0.7;
margin-bottom: 0.2rem;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-chat-composer {
position: sticky;
bottom: 20px;
left: 0;
right: 0;
margin: 20px;
z-index: 2;
display: flex;
flex-direction: column;
align-items: stretch;
align-self: end;
gap: 0.4rem;
padding: 0.5rem 0.75rem;
color: var(--pat-toolbar-button-text-colour);
background: var(--pat-toolbar-button-background-colour);
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
border-radius: 32px;
box-shadow: var(--pat-toolbar-box-shadow);
--composer-control-size: 2.6rem;
transition: margin 0.18s ease-out, border-radius 0.18s ease-out, padding 0.18s ease-out;
}
@container screen style(--screen-small: true) {
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-chat-composer {
--kik-composer-inset: var(--kik-dock-clearance, 15px);
bottom: var(--kik-composer-inset);
margin: 0 15px 0;
border-radius: 32px;
padding-bottom: 0.5rem;
}
}
@container screen style(--screen-small: true) {
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-chat-composer:focus-within {
--kik-composer-inset: 15px;
}
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-native-chat-body:not(:has(#kiki-chat-input:focus)) .pat-toolbar.sticky.auto-hide {
--pat-toolbar-auto-hide-offset: 0;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-chat-composer-row {
position: relative;
display: flex;
align-items: flex-end;
gap: 0.4rem;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-cmd-popover {
position: absolute;
bottom: calc(100% + 8px);
left: 0.25rem;
right: 0.25rem;
z-index: 3;
background: var(--pat-toolbar-button-background-colour, rgba(255, 255, 255, 0.92));
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
border-radius: 18px;
box-shadow: var(--pat-toolbar-box-shadow, 0 6px 24px rgba(0, 0, 0, 0.16));
overflow: hidden;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-cmd-popover ul {
list-style: none;
margin: 0;
padding: 0.3rem;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-cmd-popover li {
display: flex;
align-items: baseline;
gap: 0.6rem;
padding: 0.45rem 0.75rem;
border-radius: 12px;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-cmd-popover li b {
flex: 0 0 auto;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-cmd-popover li span {
opacity: 0.7;
font-size: 0.9em;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-cmd-popover li.selected {
background: var(--colour-accent, #F37021);
color: var(--colour-accent-text, #fff);
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-cmd-popover li.selected span {
opacity: 0.92;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-chat-input {
flex: 1 1 auto;
box-sizing: border-box;
field-sizing: content;
min-height: var(--composer-control-size);
max-height: calc(3lh + 0.9rem + 2px);
overflow-y: auto;
resize: none;
padding: 0.45rem 2.5rem 0.45rem 0.9rem;
background: var(--kik-chat-input-background, rgba(255, 255, 255, 0.5));
border: 1px solid var(--kik-chat-input-border, var(--gray-300, #ced4da));
border-radius: 1.3rem;
font: inherit;
line-height: 1.45;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-composer-plus,
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-chat-composer .pat-button {
flex: 0 0 auto;
width: var(--composer-control-size);
height: var(--composer-control-size);
min-height: var(--composer-control-size);
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-composer-plus::before,
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-chat-composer .pat-button::before {
margin: 0;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-composer-plus {
background: transparent;
color: var(--body-font-colour, inherit);
text-decoration: none;
cursor: default;
}
@media (hover: hover) {
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-composer-plus:hover {
background: var(--gray-100, #f1f3f5);
}
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) #kiki-chat-send {
position: absolute;
right: 1px;
bottom: 1px;
transform: scale(0.75);
transform-origin: center;
z-index: 1;
overflow: visible;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) #kiki-chat-send::after {
content: '';
position: absolute;
inset: -18px;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-chat-composer .sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-chat-pending {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
padding: 0 0.25rem 0.5rem;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-chat-pending[hidden] {
display: none;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-pending-item {
display: inline-flex;
align-items: center;
gap: 0.4rem;
max-width: 15rem;
padding: 0.3rem 0.4rem 0.3rem 0.5rem;
background: var(--colour-base-light, #fff);
color: var(--body-font-colour);
border: 1px solid var(--default-border-colour, #ced4da);
border-radius: 12px;
font-size: 0.85em;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-pending-item.is-uploading {
opacity: 0.6;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-pending-thumb {
width: 1.9rem;
height: 1.9rem;
object-fit: cover;
border-radius: 6px;
flex: 0 0 auto;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-pending-icon {
flex: 0 0 auto;
opacity: 0.8;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-pending-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-pending-remove {
flex: 0 0 auto;
border: 0;
background: transparent;
padding: 0.1rem;
opacity: 0.7;
line-height: 1;
}
@media (hover: hover) {
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-pending-remove:hover {
opacity: 1;
}
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-pending-item.is-scope {
background: color-mix(in srgb, var(--colour-accent, #7A5AF8) 14%, transparent);
border-color: color-mix(in srgb, var(--colour-accent, #7A5AF8) 40%, transparent);
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-picker {
position: fixed;
inset: 0;
z-index: 40;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.35);
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-picker[hidden] {
display: none;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-picker-panel {
width: min(28rem, 92vw);
max-height: 74vh;
display: flex;
flex-direction: column;
background: var(--body-background-colour, #fff);
border-radius: 16px;
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
overflow: hidden;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-picker-head,
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-picker-foot {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-picker-head {
justify-content: space-between;
border-bottom: 1px solid var(--gray-200, #e9ecef);
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-picker-foot {
justify-content: flex-end;
border-top: 1px solid var(--gray-200, #e9ecef);
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-picker-close {
border: 0;
background: transparent;
padding: 0.25rem;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-crumbs {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.25rem;
padding: 0.5rem 1rem;
font-size: 0.9em;
opacity: 0.85;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-crumbs button {
border: 0;
background: transparent;
padding: 0.1rem 0.25rem;
color: var(--colour-accent, #7A5AF8);
text-decoration: underline;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-crumbs .sep {
opacity: 0.5;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-list {
list-style: none;
margin: 0;
padding: 0.25rem;
overflow-y: auto;
flex: 1 1 auto;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-list li {
margin: 0;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-list button.kiki-folder-row {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
text-align: left;
border: 0;
background: transparent;
padding: 0.55rem 0.7rem;
border-radius: 10px;
font: inherit;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-list button.kiki-folder-row.is-selected {
background: color-mix(in srgb, var(--colour-accent, #7A5AF8) 16%, transparent);
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-list .kiki-folder-row .name {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-folder-list .kiki-folder-empty {
padding: 1rem;
opacity: 0.6;
text-align: center;
}
@container main (width > 768px) {
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .toggle-sidebar,
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) aside.sidebar.left::after {
bottom: 100px;
}
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-actions {
position: static;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-more {
position: absolute;
top: 0.3rem;
right: 0.3rem;
z-index: 6;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 1.6rem;
height: 1.6rem;
min-width: 0;
margin: 0;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
color: var(--body-font-colour, #333);
box-shadow: var(--default-box-shadow);
opacity: 0;
transition: opacity 0.15s ease;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-more:before {
display: none;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-more > svg.kik-icon {
width: 1rem;
height: 1rem;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-more .sr-only {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
@media (hover: hover) {
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-more:hover {
color: var(--pat-button-text-colour-hover);
background-color: var(--pat-button-background-colour-hover);
box-shadow: var(--pat-button-box-shadow-hover);
}
}
@media (hover: hover) {
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg:hover .kik-msg-more {
opacity: 1;
}
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-more:focus-visible,
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-more[aria-expanded="true"] {
opacity: 1;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-toast {
position: fixed;
left: 50%;
bottom: 90px;
transform: translate(-50%, 12px);
z-index: 1100;
max-width: 90vw;
padding: 0.6rem 1.1rem;
border-radius: 999px;
background: var(--app-colour, #2b6cb0);
color: #fff;
font-size: 0.85rem;
box-shadow: var(--default-box-shadow);
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
pointer-events: none;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-toast.is-shown {
opacity: 1;
transform: translate(-50%, 0);
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-toast.is-error {
background: var(--colour-error, #d24b3e);
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-chat-mic:not(.is-recording) {
background: transparent;
color: var(--body-font-colour, inherit);
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-input-ghost {
position: absolute;
pointer-events: none;
overflow: hidden;
box-sizing: border-box;
white-space: pre-wrap;
overflow-wrap: anywhere;
z-index: 1;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-input-ghost[hidden] {
display: none;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-chat-composer-row:has(.kiki-input-ghost:not([hidden])) .kik-chat-input::placeholder {
color: transparent;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-input-ghost .g-mirror {
color: transparent;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-input-ghost .g-live {
font-style: italic;
opacity: 0.55;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-cap-row {
display: flex;
align-items: center;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-cap-row .kiki-cap-key {
flex: 1;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-risk {
margin-bottom: 0;
margin-inline-start: .5em;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-risk .tag {
font-size: .7rem;
font-weight: 600;
background-color: color-mix(in srgb, var(--colour-accent) 16%, white);
color: color-mix(in srgb, var(--colour-accent) 65%, black);
vertical-align: middle;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-risk .tag:before {
content: none;
margin-right: 0;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-risk .tag {
margin-right: 0;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-risk .is-low {
--colour-accent: #8b9099;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-risk .is-medium {
--colour-accent: #E08A1E;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-risk .is-approval {
--colour-accent: var(--app-colour);
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-risk .is-pending {
--colour-accent: #E08A1E;
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-risk .is-approved {
--colour-accent: var(--colour-success);
}
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kiki-risk .is-denied {
--colour-accent: var(--colour-alert);
}
@media (hover: none) {
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg .kik-msg-more {
opacity: 0 !important;
pointer-events: none;
}
}
@media (hover: none) {
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-bubble {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
}
@media (hover: none) {
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-bubble pre,
.application-body:has([data-kiki-chat], [data-kiki-chat-body]) .kik-msg-bubble code {
-webkit-user-select: text;
user-select: text;
}
}
#app-space .application-body.state-on .document-body > .kik-chat-composer:not(.kik-chat-host *) {
position: fixed;
left: auto;
right: auto;
box-sizing: border-box;
width: calc(100cqw - 2 * 20px);
}
@container screen style(--screen-small: true) {
#app-space .application-body.state-on .document-body > .kik-chat-composer:not(.kik-chat-host *) {
width: calc(100cqw - 2 * 15px);
}
}
#app-space .application-body.state-on .document-body:has(> .kik-chat-composer):not(.kik-chat-host *)::after {
content: "";
display: block;
flex: none;
height: var(--kik-composer-h, 0px);
}
@container screen style(--screen-small: false) {
body[data-platform-mode="hub"] #app-space .application-body.state-on .document-body > .kik-chat-composer:not(.kik-chat-host *) {
bottom: 0;
}
}
.document-content.kik-support-page {
display: flex;
flex-direction: column;
min-block-size: 100%;
box-sizing: border-box;
}
.document-content.kik-support-page > .pat-container {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-block-size: 0;
inline-size: 100%;
}
.kik-support-chat {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-block-size: 0;
}
.kik-support-timeline {
display: flex;
flex-direction: column;
flex: 1 1 auto;
gap: 0.6rem;
padding: 20px 0 110px;
}
.kik-support-chat .kik-msg {
display: flex;
gap: 0.5rem;
align-items: flex-end;
max-width: 80%;
}
.kik-support-chat .kik-msg .pat-avatar.icon {
width: 1.75rem;
height: 1.75rem;
flex: 0 0 auto;
}
.kik-support-chat .kik-msg .pat-avatar.kik-has-avatar {
overflow: hidden;
}
.kik-support-chat .kik-msg .pat-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.kik-support-chat .kik-msg .pat-avatar.kik-avatar-kiki {
width: 1.75rem;
height: 1.75rem;
flex: 0 0 auto;
border-radius: 50%;
background: var(--colour-accent, #F37021);
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.kik-support-chat .kik-msg .pat-avatar.kik-avatar-kiki svg {
width: 64%;
height: 64%;
display: block;
}
.kik-support-chat .kik-msg .pat-avatar.kik-avatar-kiki svg path {
fill: var(--colour-accent-text, #fff);
}
.kik-support-chat .kik-msg-bubble {
min-width: 0;
padding: 0.4rem 0.7rem;
border-radius: 0.9rem;
background: var(--kik-msg-bubble-background, #fff);
border: 1px solid var(--kik-msg-bubble-border, rgba(0, 0, 0, 0.18));
position: relative;
}
.kik-support-chat .kik-msg.is-mine {
margin-left: auto;
flex-direction: row-reverse;
}
.kik-support-chat .kik-msg-author {
display: block;
font-size: 0.72rem;
font-weight: 600;
opacity: 0.8;
}
.kik-support-chat .kik-msg.is-mine .kik-msg-author {
display: none;
}
.kik-support-chat .kik-msg-body {
white-space: pre-wrap;
overflow-wrap: anywhere;
}
.kik-support-shot {
display: block;
max-width: min(320px, 60vw);
max-height: 320px;
border-radius: 0.6rem;
object-fit: contain;
}
.kik-support-placeholder {
margin: auto;
opacity: 0.7;
}
.kik-support-chat .kik-msg-typing {
display: inline-flex;
gap: 0.25rem;
padding: 0.1rem 0;
}
.kik-support-chat .kik-msg-typing span {
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
background: currentColor;
opacity: 0.35;
animation: kik-support-typing 1s infinite ease-in-out;
}
.kik-support-chat .kik-msg-typing span:nth-child(2) {
animation-delay: 0.15s;
}
.kik-support-chat .kik-msg-typing span:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes kik-support-typing {
0%, 60%, 100% { opacity: 0.25; }
30% { opacity: 0.8; }
}
.kik-support-shot-ask {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
margin-block: 0.7rem 0.2rem;
}
.kik-support-shot-ask .kik-support-shot-input {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.kik-support-shot-ask .kik-support-shot-note {
font-size: 0.82em;
opacity: 0.7;
}
.kik-support-shot-ask.is-busy {
opacity: 0.6;
}
.kik-support-composer {
position: sticky;
bottom: 20px;
left: 0;
right: 0;
margin: 20px;
z-index: 2;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0.4rem;
padding: 0.5rem 0.75rem;
color: var(--pat-toolbar-button-text-colour);
background: var(--pat-toolbar-button-background-colour);
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
border-radius: 32px;
box-shadow: var(--pat-toolbar-box-shadow);
--composer-control-size: 2.6rem;
transition: margin 0.18s ease-out, border-radius 0.18s ease-out,
padding 0.18s ease-out;
}
@container screen style(--screen-small: true) {
.kik-support-composer {
--kik-composer-inset: var(--kik-dock-clearance, 15px);
bottom: var(--kik-composer-inset);
margin: 0 15px 0;
border-radius: 32px;
padding-bottom: 0.5rem;
}
}
@container screen style(--screen-small: true) {
.kik-support-composer:focus-within {
--kik-composer-inset: 15px;
}
}
.kik-support-composer-row {
position: relative;
display: flex;
align-items: flex-end;
gap: 0.4rem;
}
.kik-support-input {
flex: 1 1 auto;
box-sizing: border-box;
field-sizing: content;
min-height: var(--composer-control-size);
max-height: calc(3lh + 0.9rem + 2px);
overflow-y: auto;
resize: none;
padding: 0.45rem 2.5rem 0.45rem 0.9rem;
background: var(--kik-chat-input-background, rgba(255, 255, 255, 0.5));
border: 1px solid var(--kik-chat-input-border, var(--gray-300, #ced4da));
border-radius: 1.3rem;
font: inherit;
line-height: 1.45;
}
.kik-support-composer .pat-button {
flex: 0 0 auto;
width: var(--composer-control-size);
height: var(--composer-control-size);
min-height: var(--composer-control-size);
padding: 0;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
}
.kik-support-composer .pat-button::before {
margin: 0;
}
#help-support-send {
position: absolute;
right: 1px;
bottom: 1px;
transform: scale(0.75);
transform-origin: center;
z-index: 1;
overflow: visible;
}
#help-support-send::after {
content: '';
position: absolute;
inset: -18px;
}
.kik-support-composer .sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
.audio-tracks {
table-layout: fixed;
width: 100%;
}
.audio-tracks tr td.audio-track-number,
.audio-tracks tr th.audio-track-number {
width: 0;
min-width: calc(var(--kik-table-media-size, 2.4rem)
+ 2 * var(--kik-table-media-inset, 5px));
--pat-table-cell-padding-top: var(--kik-table-media-inset, 5px);
--pat-table-cell-padding-bottom: var(--kik-table-media-inset, 5px);
--pat-table-cell-padding-left: var(--kik-table-media-inset, 5px);
--pat-table-cell-padding-right: var(--kik-table-media-inset, 5px);
padding: var(--kik-table-media-inset, 5px);
text-align: center;
vertical-align: middle;
font-variant-numeric: tabular-nums;
color: color-mix(in srgb, currentColor 60%, transparent);
position: relative;
}
.pat-table svg.icon {
width: var(--kik-table-media-size, 2.4rem);
height: var(--kik-table-media-size, 2.4rem);
flex: none;
}
.audio-tracks td.audio-track-number .audio-track-number-value {
display: grid;
place-items: center;
box-sizing: border-box;
width: var(--kik-table-media-size, 2.4rem);
height: var(--kik-table-media-size, 2.4rem);
margin-inline: auto;
border-radius: var(--kik-table-media-radius, 4px);
background: rgb(0 0 0 / 0.05);
box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
overflow: hidden;
white-space: normal;
overflow-wrap: anywhere;
line-height: 1.1;
font-size: calc(var(--kik-table-media-size, 2.4rem) / 3.6);
}
.audio-tracks td.audio-track-number.long-number .audio-track-number-value {
font-size: calc(var(--kik-table-media-size, 2.4rem) / 4.6);
padding-inline: max(0px, calc((var(--kik-table-media-size, 2.4rem)
- 3.2ch) / 2));
}
.audio-tracks td.audio-track-number::before {
content: "";
background-color: currentColor;
-webkit-mask: var(--kik-svg-play) center / 45% no-repeat;
mask: var(--kik-svg-play) center / 45% no-repeat;
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
color: rgb(0 0 0 / 0.55);
transition: color 0.12s ease-out;
}
@media (hover: hover) {
.audio-tracks td.audio-track-number:hover::before {
color: rgb(0 0 0 / 0.9);
}
}
.audio-tracks tr.is-playing td.audio-track-number::before {
-webkit-mask-image: var(--kik-svg-pause);
mask-image: var(--kik-svg-pause);
}
@media (hover: hover) {
.audio-tracks tr:hover td.audio-track-number {
color: transparent;
}
}
@media (hover: hover) {
.audio-tracks tr:hover td.audio-track-number::before {
display: flex;
}
}
.audio-tracks tr:has(.current) td.audio-track-number {
color: transparent;
}
.audio-tracks tr:hover td.audio-track-number .audio-track-number-value,
.audio-tracks tr:has(.current) td.audio-track-number .audio-track-number-value {
color: transparent;
}
.audio-tracks td.audio-track-number.has-spl {
color: transparent;
}
.audio-tracks td.audio-track-number.has-spl .audio-track-number-value {
color: transparent;
}
.audio-tracks tr:has(.current) td.audio-track-number::before {
display: flex;
color: var(--colour-accent, var(--app-colour));
}
.audio-tracks tr th.item-name,
.music-track-table tr th.item-name {
overflow: hidden;
vertical-align: middle;
}
.audio-tracks th.item-name .audio-track-link,
.audio-tracks th.item-name .audio-track-title,
.audio-tracks th.item-name .audio-track-byline {
width: 100%;
max-width: 100%;
}
.audio-tracks col.audio-col-number {
width: calc(var(--kik-table-media-size, 2.4rem)
+ 2 * var(--kik-table-media-inset, 5px));
}
.audio-tracks col.audio-col-name {
width: 100%;
}
.audio-tracks col.audio-col-duration {
width: 4.5rem;
}
.audio-tracks col.audio-col-functions {
width: 3.5rem;
}
.audio-tracks col.audio-col-cover {
width: calc(var(--kik-table-media-size, 2.4rem)
+ 2 * var(--kik-table-media-inset, 5px));
}
.music-track-table col.music-col-cover {
width: calc(var(--kik-table-media-size, 2.4rem)
+ 2 * var(--kik-table-media-inset, 5px));
}
.music-track-table col.music-col-artist {
width: 11rem;
}
.music-track-table col.music-col-album {
width: 16rem;
}
.music-track-table col.music-col-duration {
width: 5rem;
}
.music-track-table col.music-col-functions {
width: 3.5rem;
}
#app-content-music,
#app-content-podcasts,
#app-content-radio {
container-type: inline-size;
container-name: pat-table;
}
#app-content-music:has(.pat-table:is(.collapse-cards, .collapse-rows)),
#app-content-podcasts:has(.pat-table:is(.collapse-cards, .collapse-rows)),
#app-content-radio:has(.pat-table:is(.collapse-cards, .collapse-rows)) {
container-name: pat-table pat-table-collapse;
}
@container pat-table-list (max-width: 680px) {
.pat-table.collapse-list {
display: block;
background-color: transparent;
border-bottom: 0;
box-shadow: none;
padding: 0;
margin: 0;
border-spacing: 0;
--pat-table-cell-background-colour: transparent;
--pat-surface-backdrop-filter: none;
}
}
@container pat-table-list (max-width: 680px) {
.pat-table.collapse-list thead {
display: none;
}
}
@container pat-table-list (max-width: 680px) {
.pat-table.collapse-list tbody,
.pat-table.collapse-list tr,
.pat-table.collapse-list th,
.pat-table.collapse-list td {
display: block;
background-color: transparent;
-webkit-backdrop-filter: none;
backdrop-filter: none;
box-shadow: none;
outline: none;
border: 0;
border-radius: 0;
text-align: start;
}
}
@container pat-table-list (max-width: 680px) {
.pat-table.collapse-list tr {
position: relative;
padding: 0.4em 0;
width: auto;
overflow: visible;
}
}
@container pat-table-list (max-width: 680px) {
.pat-table.collapse-list th,
.pat-table.collapse-list td {
padding: 0;
width: auto;
max-width: none;
white-space: normal;
}
}
@container pat-table-list (max-width: 680px) {
.pat-table.collapse-list tr > th:first-child {
font-size: 0.8em;
font-weight: bold;
line-height: 1.4;
color: var(--body-font-colour);
opacity: 0.6;
margin-bottom: 0.1em;
}
}
@container pat-table-list (max-width: 680px) {
.pat-table.collapse-list:not(.preview-cards) tbody
tr:not(.table-load-more):not(.table-note) > td.functions {
position: absolute;
top: 0.4em;
inset-inline-end: 0;
padding: 0;
width: auto;
}
}
@container pat-table-list (max-width: 680px) {
.pat-table.collapse-list:not(.preview-cards) tbody tr {
--kik-row-state-colour: transparent;
}
}
@container pat-table-list (max-width: 680px) {
.pat-table.collapse-list tbody td.functions a.icon.more {
--pat-menu-list-more-size: 1.4rem;
--pat-menu-list-more-glyph-size: 0.85rem;
box-sizing: border-box;
width: var(--pat-menu-list-more-size);
height: var(--pat-menu-list-more-size);
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: transparent;
box-shadow: none;
transition: background-color 0.15s ease, box-shadow 0.15s ease;
}
}
@container pat-table-list (max-width: 680px) {
.pat-table.collapse-list tbody td.functions a.icon.more > svg.kik-icon {
width: var(--pat-menu-list-more-glyph-size);
height: var(--pat-menu-list-more-glyph-size);
font-size: var(--pat-menu-list-more-glyph-size);
}
}
@container pat-table-list (max-width: 680px) {
@media (hover: hover) {
.pat-table.collapse-list tbody tr:hover td.functions a.icon.more,
.pat-table.collapse-list tbody td.functions a.icon.more:hover {
background-color: var(--pat-toolbar-icon-frost-background,
var(--pat-surface-background-colour));
box-shadow: var(--pat-button-box-shadow);
-webkit-backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
}
}
}
@container pat-table-list (max-width: 680px) {
.pat-table.collapse-list tbody td.functions a.icon.more.tooltip-active-click,
.pat-table.collapse-list tbody td.functions a.icon.more[aria-expanded="true"] {
background-color: var(--pat-toolbar-icon-frost-background,
var(--pat-surface-background-colour));
box-shadow: var(--pat-button-box-shadow);
-webkit-backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
}
}
@container pat-table-list (max-width: 680px) {
.pat-table.collapse-list tbody td.functions a.icon.more.tooltip-active-click > svg.kik-icon,
.pat-table.collapse-list tbody td.functions a.icon.more[aria-expanded="true"] > svg.kik-icon {
color: var(--body-font-colour);
}
}
@container pat-table-collapse (max-width: 680px) {
.pat-table.collapse-rows {
--pat-table-cell-background-colour: transparent;
--kik-table-collapsed-row-gap: 2px;
border-spacing: 0 var(--kik-table-collapsed-row-gap);
--pat-table-cell-padding-top: 0;
--pat-table-cell-padding-bottom: 0;
--pat-table-cell-padding-left: 0;
--pat-surface-backdrop-filter: none;
}
}
@container pat-table-collapse (max-width: 680px) {
.music-track-table.collapse-rows tr td.music-track-cover.mobile-keep {
padding-inline-start: 2px;
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows tr td.audio-track-cover.mobile-keep {
--pat-table-cell-padding-left: 6px;
padding-inline-start: 6px;
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows tr td.functions {
position: relative;
width: 0;
--pat-table-cell-padding-left: 0;
--pat-table-cell-padding-right: 0;
padding: 0 !important;
--kik-table-menu-inset: 6px;
--kik-row-control-size: 1.6rem;
--kik-row-control-gap: 2px;
--kik-row-control-step: calc(var(--kik-row-control-size)
+ var(--kik-row-control-gap));
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows tr td.functions > * {
position: absolute;
top: 50%;
inset-inline-end: var(--kik-table-menu-inset);
transform: translateY(-50%);
display: grid;
place-items: center;
width: var(--kik-row-control-size);
height: var(--kik-row-control-size);
border-radius: 50%;
opacity: 0;
pointer-events: none;
transition: opacity var(--base-animation-duration, 0.3s);
z-index: 2;
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows tr td.functions
> *:not(.tooltip-active-click):not([aria-expanded="true"]) {
--pat-surface-backdrop-filter: blur(4px) saturate(4);
background-color: var(--pat-surface-background-colour,
var(--colour-base-background, white));
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter, none);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter, none);
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows tr td.functions > *:nth-last-child(2) {
inset-inline-end: calc(var(--kik-table-menu-inset)
+ var(--kik-row-control-step));
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows tr td.functions > *:nth-last-child(3) {
inset-inline-end: calc(var(--kik-table-menu-inset)
+ 2 * var(--kik-row-control-step));
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows tr td.functions > *:nth-last-child(4) {
inset-inline-end: calc(var(--kik-table-menu-inset)
+ 3 * var(--kik-row-control-step));
}
}
@container pat-table-collapse (max-width: 680px) {
@media (hover: hover) {
.audio-tracks.collapse-rows tr:hover td.functions > * {
opacity: 1;
pointer-events: auto;
}
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows tr td.functions:has(.tooltip-active-click) > * {
opacity: 1;
pointer-events: auto;
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows tbody tr > th.item-name {
border-start-end-radius: var(--pat-table-border-radius);
border-end-end-radius: var(--pat-table-border-radius);
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows tbody tr > td.functions {
background-color: transparent;
border-radius: 0;
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows tbody tr > th,
.audio-tracks.collapse-rows tbody tr > td {
padding-block: 4px;
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows tr td.audio-track-cover.mobile-keep::after {
top: 50%;
transform: translateY(-50%);
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks.collapse-rows tr td.audio-track-cover.mobile-keep .music-spl {
top: 50%;
}
}
@container pat-table-collapse (max-width: 680px) {
.music-track-table.collapse-rows tr td.music-track-cover.mobile-keep::after {
inset-inline-start: 2px;
top: 50%;
transform: translateY(-50%);
}
}
@container pat-table-collapse (max-width: 680px) {
[dir=rtl] .music-track-table.collapse-rows tr td.music-track-cover.mobile-keep::after {
left: auto;
}
}
@container pat-table-collapse (max-width: 680px) {
.pat-table.audio-tracks.collapse-rows {
table-layout: auto;
--kik-table-media-size: 2.4rem;
--kik-table-collapsed-bleed: 4px;
margin: calc(-1 * var(--kik-table-collapsed-bleed)
- var(--kik-table-collapsed-row-gap, 0px))
calc(-1 * var(--kik-table-collapsed-bleed))
calc(6px - var(--kik-table-collapsed-row-gap, 0px));
width: calc(100% + 2 * var(--kik-table-collapsed-bleed));
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks col.audio-col-number,
.audio-tracks col.audio-col-cover,
.audio-tracks col.audio-col-name,
.audio-tracks col.audio-col-duration,
.audio-tracks col.audio-col-functions,
.music-track-table col.music-col-cover,
.music-track-table col.music-col-name,
.music-track-table col.music-col-artist,
.music-track-table col.music-col-album,
.music-track-table col.music-col-duration,
.music-track-table col.music-col-functions {
width: auto;
}
}
@container pat-table-collapse (max-width: 680px) {
.audio-tracks tr th.item-name,
.audio-tracks tr td.item-name,
.music-track-table tr th.item-name,
.music-track-table tr td.item-name {
max-width: 0;
width: 100%;
}
}
.audio-tracks tr td.audio-track-duration {
padding-inline-end: 0;
}
.audio-tracks tr td.audio-track-duration,
.audio-tracks tr th.audio-track-duration {
width: 0;
white-space: nowrap;
text-align: right;
vertical-align: middle;
}
.audio-tracks tr:not(:has(.current)) td.audio-track-duration {
color: color-mix(in srgb, currentColor 60%, transparent);
}
.audio-track-link {
display: flex;
flex-direction: column;
min-width: 0;
text-decoration: none;
color: inherit;
}
.audio-tracks.documents-personal-table th.item-name a.audio-track-link {
gap: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
min-height: 100%;
}
.audio-track-title,
.audio-track-byline {
line-height: 1.08;
margin: 0;
padding: 0;
}
@media (hover: hover) {
.audio-tracks a.audio-track-link:hover,
.audio-tracks a.audio-track-link:hover .audio-track-title,
.audio-tracks a.audio-track-link:hover .audio-track-byline {
text-decoration: none !important;
}
}
.pat-table tbody tr,
.pat-table.collapse-rows tbody tr,
.pat-table.collapse-cards tbody tr {
border-radius: var(--pat-table-border-radius);
}
.pat-table:not(.preview-cards) tbody tr {
overflow: visible;
--kik-row-state-bleed: 0px;
--kik-row-state-colour-pressed:
color-mix(in srgb, var(--body-font-colour, rgb(0, 0, 0)) 8%,
var(--pat-surface-background-colour-hover, transparent));
--kik-row-state-colour-current:
color-mix(in srgb, var(--colour-accent) 14%, transparent);
--pat-table-row-outline: none;
}
@container pat-table-collapse (max-width: 680px) {
.pat-table.collapse-rows:not(.preview-cards) tbody tr {
--kik-row-state-bleed: 7px;
}
}
@container pat-table-collapse (max-width: 680px) {
.kik-cloud-card .pat-table.collapse-rows:not(.preview-cards) tbody tr {
--kik-row-state-bleed: 0px;
}
}
.pat-table:not(.preview-cards) tbody tr:not(.table-load-more):not(.table-note)
> :is(th, td) {
position: relative;
isolation: isolate;
}
.pat-table:not(.preview-cards) tbody tr:not(.table-load-more):not(.table-note)
> :is(th, td):not(.audio-track-cover):not(.music-track-cover)::after,
.pat-table:not(.preview-cards) tbody tr:not(.table-load-more):not(.table-note)
> :is(th, td):is(.audio-track-cover, .music-track-cover)::before {
content: "";
position: absolute;
z-index: -1;
top: 0;
bottom: 0;
inset-inline: 0;
border-radius: 0;
background-color: var(--kik-row-state-colour, transparent);
pointer-events: none;
}
.pat-table:not(.preview-cards) tbody tr:not(.table-load-more):not(.table-note)
> :is(th, td):not(.audio-track-cover):not(.music-track-cover):first-child::after,
.pat-table:not(.preview-cards) tbody tr:not(.table-load-more):not(.table-note)
> :is(th, td):is(.audio-track-cover, .music-track-cover):first-child::before {
inset-inline-start: calc(-1 * var(--kik-row-state-bleed));
border-start-start-radius: var(--pat-table-border-radius);
border-end-start-radius: var(--pat-table-border-radius);
}
.pat-table:not(.preview-cards) tbody tr:not(.table-load-more):not(.table-note)
> :is(th, td):not(.audio-track-cover):not(.music-track-cover):last-child::after,
.pat-table.functions-overlay:not(.preview-cards) tbody tr:not(.table-load-more):not(.table-note)
> :is(th, td).item-name::after {
inset-inline-end: calc(-1 * var(--kik-row-state-bleed));
border-start-end-radius: var(--pat-table-border-radius);
border-end-end-radius: var(--pat-table-border-radius);
}
@media (hover: hover) {
.pat-table:not(.preview-cards) tbody tr:where(
:has(.item-name a[href]:not(.icon):not(.current):hover),
:has(.item-state a[href]:not(.icon):not(.current):hover),
:has(td.functions:hover)) {
--kik-row-state-colour: var(--pat-surface-hover-ground,
rgba(255, 255, 255, 0.94));
}
}
@media (hover: hover) {
.pat-table:not(.preview-cards) tbody tr:where(
:has(.item-name a[href]:not(.icon):active),
:has(.item-state a[href]:not(.icon):active)) {
--kik-row-state-colour: var(--kik-row-state-colour-pressed);
}
}
.pat-table:not(.preview-cards) tbody tr:where(
:has(.tooltip-active-click),
:has(.pat-context-menu[aria-expanded="true"])) {
--kik-row-state-colour: var(--pat-surface-background-colour-hover);
}
.pat-table:not(.preview-cards) tbody tr:where(.current, :has(.current)) {
--kik-row-state-colour: var(--kik-row-state-colour-current);
}
.pat-table:not(.preview-cards) tbody tr:has(.item-name a[href]:not(.icon):not(.current):hover),
.pat-table:not(.preview-cards) tbody tr:has(.item-state a[href]:not(.icon):not(.current):hover),
.pat-table:not(.preview-cards) tbody tr:has(td.functions:hover),
.pat-table:not(.preview-cards) tbody tr:has(.tooltip-active-click),
.pat-table:not(.preview-cards) tbody tr:has(.pat-context-menu[aria-expanded="true"]),
.pat-table:not(.preview-cards) tbody tr.current,
.pat-table:not(.preview-cards) tbody tr:has(.current) {
outline: none;
background-color: transparent;
--pat-table-cell-background-colour: inherit;
}
.pat-table.cards tbody tr:has(.item-name a[href]:not(.icon):not(.current):hover),
.pat-table.cards tbody tr:has(.item-state a[href]:not(.icon):not(.current):hover),
.pat-table.cards tbody tr:has(td.functions:hover) {
background-color: var(--pat-surface-background-colour-hover);
--pat-table-cell-background-colour: var(--pat-surface-background-colour-hover);
}
@container pat-table-collapse (max-width: 680px) {
.pat-table.collapse-cards tbody tr:has(.item-name a[href]:not(.icon):not(.current):hover),
.pat-table.collapse-cards tbody tr:has(.item-state a[href]:not(.icon):not(.current):hover),
.pat-table.collapse-cards tbody tr:has(td.functions:hover) {
background-color: var(--pat-surface-background-colour-hover);
--pat-table-cell-background-colour: var(--pat-surface-background-colour-hover);
}
}
@container pat-table-collapse (max-width: 680px) {
.pat-table:not(.collapse-rows):not(.preview-cards) tbody
tr:not(.table-load-more):not(.table-note)
> :is(th, td):not(.audio-track-cover):not(.music-track-cover)::after {
content: none;
}
}
.pat-table.functions-overlay tbody td.functions > *:not(template) {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.pat-table.functions-overlay tbody td.functions
> *:not(template) + *:not(template) {
margin-inline-start: var(--kik-row-control-gap, 6px);
}
@media (hover: hover) {
.pat-table.functions-overlay tbody tr {
--kik-table-menu-inset: 10px;
--kik-row-control-size: 1.75rem;
--kik-row-control-gap: 6px;
--kik-row-control-step: calc(var(--kik-row-control-size)
+ var(--kik-row-control-gap));
--kik-functions-count: 3;
--kik-functions-clear: calc(var(--kik-table-menu-inset)
+ var(--kik-functions-count)
* var(--kik-row-control-step));
--kik-functions-ramp: 3rem;
--pat-table-functions-mask: linear-gradient(
to left,
transparent 0,
transparent var(--kik-functions-clear),
#000 calc(var(--kik-functions-clear) + var(--kik-functions-ramp)));
}
}
@media (hover: hover) {
.pat-table.functions-overlay tbody td.functions {
position: relative;
width: 0;
--pat-table-cell-padding-left: 0;
--pat-table-cell-padding-right: 0;
padding: 0 !important;
z-index: 10;
}
}
@media (hover: hover) {
.pat-table.functions-overlay tbody td.functions > *:not(template) {
position: absolute;
top: 50%;
inset-inline-end: var(--kik-table-menu-inset);
transform: translateY(-50%);
display: grid;
place-items: center;
width: var(--kik-row-control-size);
height: var(--kik-row-control-size);
margin: 0;
border-radius: 50%;
opacity: 0;
pointer-events: none;
transition: opacity var(--base-animation-duration, 0.3s);
z-index: 2;
}
}
@media (hover: hover) {
.pat-table.functions-overlay tbody td.functions
> *:not(template):not(.tooltip-active-click):not([aria-expanded="true"]) {
--pat-surface-backdrop-filter: blur(4px) saturate(4);
background-color: var(--pat-toolbar-icon-frost-background,
var(--pat-surface-background-colour,
var(--colour-base-background, white)));
-webkit-backdrop-filter: var(--pat-toolbar-icon-backdrop-filter, none);
backdrop-filter: var(--pat-toolbar-icon-backdrop-filter, none);
box-shadow: var(--pat-toolbar-button-box-shadow,
var(--pat-button-box-shadow, none));
border: var(--button-border, none);
transition: opacity var(--base-animation-duration, 0.3s),
background-color 0.12s ease;
}
}
@media (hover: hover) {
.pat-table.functions-overlay tbody td.functions > *:not(template),
.pat-table.functions-overlay tbody td.functions > *:not(template) > svg {
color: var(--pat-toolbar-button-text-colour,
var(--pat-button-text-colour, currentColor));
}
}
@media (hover: hover) {
.pat-table.functions-overlay tbody td.functions
> *:not(template):not(.tooltip-active-click):not([aria-expanded="true"]):hover {
background-color: var(--pat-toolbar-icon-background-colour-hover,
var(--pat-surface-background-colour-hover,
var(--pat-toolbar-icon-frost-background,
rgba(0, 0, 0, 0.06))));
}
}
@media (hover: hover) {
.pat-table.functions-overlay tbody tr > :is(th, td).item-name {
border-start-end-radius: var(--pat-table-border-radius);
border-end-end-radius: var(--pat-table-border-radius);
}
}
@media (hover: hover) {
[dir=rtl] .pat-table.functions-overlay tbody tr > :is(th, td).item-name {
border-start-end-radius: 0;
border-end-end-radius: 0;
border-start-start-radius: var(--pat-table-border-radius);
border-end-start-radius: var(--pat-table-border-radius);
}
}
@media (hover: hover) {
.pat-table.functions-overlay tbody td.functions
> *:nth-last-child(2 of :not(template)) {
inset-inline-end: calc(var(--kik-table-menu-inset)
+ var(--kik-row-control-step));
}
}
@media (hover: hover) {
.pat-table.functions-overlay tbody td.functions
> *:nth-last-child(3 of :not(template)) {
inset-inline-end: calc(var(--kik-table-menu-inset)
+ 2 * var(--kik-row-control-step));
}
}
@media (hover: hover) {
.pat-table.functions-overlay tbody td.functions
> *:nth-last-child(4 of :not(template)) {
inset-inline-end: calc(var(--kik-table-menu-inset)
+ 3 * var(--kik-row-control-step));
}
}
@media (hover: hover) {
.pat-table.functions-overlay tbody tr:hover td.functions > *:not(template),
.pat-table.functions-overlay tbody tr:focus-within td.functions > *:not(template) {
opacity: 1;
pointer-events: auto;
}
}
@media (hover: hover) {
.pat-table.functions-overlay tbody td.functions:has(.tooltip-active-click) > *:not(template),
.pat-table.functions-overlay tbody td.functions:has([aria-expanded="true"]) > *:not(template) {
opacity: 1;
pointer-events: auto;
}
}
@media (hover: hover) {
.pat-table.functions-overlay tbody tr:hover :is(th, td).item-name a.name,
.pat-table.functions-overlay tbody tr:focus-within :is(th, td).item-name a.name {
-webkit-mask-image: var(--pat-table-functions-mask);
mask-image: var(--pat-table-functions-mask);
}
}
@media (hover: hover) {
.pat-table.functions-overlay tbody tr:has(td.functions .tooltip-active-click) :is(th, td).item-name a.name,
.pat-table.functions-overlay tbody tr:has(td.functions [aria-expanded="true"]) :is(th, td).item-name a.name {
-webkit-mask-image: var(--pat-table-functions-mask);
mask-image: var(--pat-table-functions-mask);
}
}
@media (hover: none) {
.pat-table.functions-overlay tbody td.functions {
position: relative;
width: 0;
--pat-table-cell-padding-left: 0;
--pat-table-cell-padding-right: 0;
padding: 0 !important;
}
}
@media (hover: none) {
.pat-table.functions-overlay tbody td.functions > *:not(template) {
position: absolute;
inset-inline-end: 0;
top: 50%;
transform: translateY(-50%);
opacity: 0;
pointer-events: none;
}
}
.pat-table:not(.hd):has(tbody .item-name a.name > .byline) {
--pat-table-icon-height: 42px;
--pat-table-icon-width: 42px;
}
.pat-table:not(.cards) tbody .item-name a.name > img.icon {
width: var(--pat-table-icon-width, 42px);
height: var(--pat-table-icon-width, 42px);
object-fit: cover;
border-radius: var(--kik-table-media-radius, 4px);
align-self: center;
flex: none;
}
.pat-table.photo-rows:not(.hd) {
--pat-table-icon-height: 56px;
--pat-table-icon-width: 56px;
}
@container pat-table (min-width: 681px) {
.pat-table:not(.cards) tbody td.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline),
.pat-table:not(.cards) tbody th.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) {
display: grid;
grid-template-columns: var(--pat-table-icon-width, auto) minmax(0, 1fr) auto;
grid-template-areas:
"icon title markers"
"icon byline markers";
align-items: center;
column-gap: 9px;
row-gap: 0;
}
}
@container pat-table (min-width: 681px) {
.pat-table:not(.cards) tbody td.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline)::before,
.pat-table:not(.cards) tbody th.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline)::before {
grid-area: icon;
align-self: center;
}
}
@container pat-table (min-width: 681px) {
.pat-table:not(.cards) tbody td.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .link-title,
.pat-table:not(.cards) tbody th.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .link-title {
grid-area: title;
min-width: 0;
}
}
@container pat-table (min-width: 681px) {
.pat-table:not(.cards) tbody td.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .byline,
.pat-table:not(.cards) tbody th.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .byline {
grid-area: byline;
min-width: 0;
}
}
@container pat-table (min-width: 681px) {
.pat-table:not(.cards) tbody td.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .marker,
.pat-table:not(.cards) tbody th.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .marker {
grid-area: markers;
justify-self: end;
}
}
@container pat-table (min-width: 681px) {
.pat-table:not(.cards) tbody td.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .icon,
.pat-table:not(.cards) tbody td.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .avatar,
.pat-table:not(.cards) tbody th.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .icon,
.pat-table:not(.cards) tbody th.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .avatar {
grid-area: icon;
}
}
@container pat-table (min-width: 681px) {
.pat-table:not(.cards) tbody td.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline):not([class*="icon-"]):not(:has(> .icon)):not(:has(> .avatar)):not(:has(> .table-art)):not(:has(> .table-art-placeholder)),
.pat-table:not(.cards) tbody th.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline):not([class*="icon-"]):not(:has(> .icon)):not(:has(> .avatar)):not(:has(> .table-art)):not(:has(> .table-art-placeholder)) {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"title markers"
"byline markers";
}
}
@container pat-table-collapse (max-width: 680px) {
.pat-table.collapse-rows tbody td.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline),
.pat-table.collapse-rows tbody th.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) {
display: grid;
grid-template-columns: var(--pat-table-icon-width, auto) minmax(0, 1fr) auto;
grid-template-areas:
"icon title markers"
"icon byline markers";
align-items: center;
column-gap: 9px;
row-gap: 0;
}
}
@container pat-table-collapse (max-width: 680px) {
.pat-table.collapse-rows tbody td.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline)::before,
.pat-table.collapse-rows tbody th.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline)::before {
grid-area: icon;
align-self: center;
}
}
@container pat-table-collapse (max-width: 680px) {
.pat-table.collapse-rows tbody td.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .link-title,
.pat-table.collapse-rows tbody th.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .link-title {
grid-area: title;
min-width: 0;
}
}
@container pat-table-collapse (max-width: 680px) {
.pat-table.collapse-rows tbody td.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .byline,
.pat-table.collapse-rows tbody th.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .byline {
grid-area: byline;
min-width: 0;
}
}
@container pat-table-collapse (max-width: 680px) {
.pat-table.collapse-rows tbody td.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .marker,
.pat-table.collapse-rows tbody th.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .marker {
grid-area: markers;
justify-self: end;
}
}
@container pat-table-collapse (max-width: 680px) {
.pat-table.collapse-rows tbody td.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .icon,
.pat-table.collapse-rows tbody td.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .avatar,
.pat-table.collapse-rows tbody th.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .icon,
.pat-table.collapse-rows tbody th.item-name:has(a.name) a.name:not(.audio-track-link):has(> .byline) > .avatar {
grid-area: icon;
}
}
.pat-table.truncate tbody .item-name .link-title,
.pat-table.truncate tbody .item-name .byline {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pat-table tbody a.status-read .link-title {
font-weight: normal;
}
.pat-table .item-name .marker {
flex: 0 0 auto;
opacity: 0.65;
font-size: 0.85em;
white-space: nowrap;
}
.audio-tracks td.audio-track-number + th.item-name .audio-track-link {
padding-left: 0;
}
@container pat-table (min-width: 681px) {
.audio-tracks td.audio-track-number + th.item-name .audio-track-link {
padding-left: 8px;
}
}
.audio-track-title,
.audio-track-byline {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
max-width: 100%;
}
.audio-track-byline {
font-size: 0.85rem;
line-height: 1.02;
padding-block-end: 0.2em;
margin-block-end: -0.2em;
font-weight: normal;
color: color-mix(in srgb, currentColor 60%, transparent);
}
.kik-progress-host {
position: relative;
}
.kik-progress-line {
position: absolute;
overflow: hidden;
pointer-events: none;
z-index: 10;
display: none;
}
.kik-progress-track {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 10px;
background: transparent;
pointer-events: auto;
transition: background-color 0.15s ease-out;
}
.kik-progress-track > i {
position: absolute;
bottom: 0;
inset-inline-start: 0;
height: 3px;
background-color: var(--colour-accent, var(--app-colour));
transition: width 0.25s linear, height 0.15s ease-out, border-radius 0.15s ease-out;
border-radius: 999px;
}
@media (hover: hover) {
.kik-progress-track:hover {
background-color: rgb(0 0 0 / 0.08);
}
}
@media (hover: hover) {
.kik-progress-track:hover > i {
height: 10px;
border-radius: 3px;
}
}
@media (hover: hover) {
.audio-track .pat-context-menu {
opacity: 0;
}
}
@media (hover: hover) {
.audio-track:hover .pat-context-menu,
.audio-track:focus-within .pat-context-menu {
opacity: 1;
}
}
@container screen style(--screen-small: true) {
.audio-tracks tr td.audio-track-duration {
width: 4rem;
text-align: right;
vertical-align: middle;
font-variant-numeric: tabular-nums;
}
}
.audio-tracks tr:has(.current) td.audio-track-number.has-spl::before,
.audio-tracks tr:hover td.audio-track-number.has-spl::before {
display: none;
}
@media (hover: hover) {
.audio-tracks tr:hover td.audio-track-number.has-spl:hover::before {
display: flex;
}
}
@media (hover: hover) {
.audio-tracks tr:hover td.audio-track-number.has-spl:hover .music-spl {
opacity: 0;
}
}
.music-spl {
position: absolute;
left: 0;
right: 0;
top: 50%;
transform: translateY(-50%);
height: 1em;
display: flex;
align-items: flex-end;
justify-content: center;
gap: 1px;
color: var(--colour-accent, var(--app-colour));
}
.audio-tracks td.audio-track-number .music-spl {
left: 50%;
right: auto;
top: 50%;
transform: translate(-50%, -50%);
width: var(--kik-table-meter-size);
height: var(--kik-table-meter-size);
box-sizing: border-box;
padding: 0;
gap: 2px;
z-index: 2;
}
.audio-tracks td.audio-track-cover .music-spl,
.music-track-table td.music-track-cover .music-spl {
left: calc(var(--pat-table-cell-padding-left, 5px)
+ var(--kik-table-media-size) / 2);
right: auto;
top: calc(var(--pat-table-cell-padding-top, 5px)
+ var(--kik-table-media-size) / 2);
transform: translate(-50%, -50%);
width: var(--kik-table-meter-size);
height: var(--kik-table-meter-size);
padding: 0;
gap: 2px;
box-sizing: border-box;
z-index: 1;
color: white;
}
.audio-tracks td.audio-track-number .music-spl i,
.audio-tracks td.audio-track-cover .music-spl i,
.music-track-table td.music-track-cover .music-spl i {
flex: 1 1 0;
width: auto;
border-radius: 3px;
}
.audio-tracks td.audio-track-cover .music-vu-red,
.music-track-table td.music-track-cover .music-vu-red {
stroke: #f2963c;
}
.audio-tracks td.audio-track-cover .music-vu-arc,
.music-track-table td.music-track-cover .music-vu-arc {
stroke: rgba(255, 255, 255, 0.88);
}
.audio-tracks td.audio-track-cover .music-vu-needle,
.music-track-table td.music-track-cover .music-vu-needle {
fill: #fff;
}
.audio-tracks td.audio-track-cover .music-spl-vu.is-paused .music-vu-needle,
.music-track-table td.music-track-cover .music-spl-vu.is-paused .music-vu-needle {
fill: rgba(255, 255, 255, 0.6);
}
.audio-tracks tr:has(.current) td.audio-track-cover.has-spl::after,
.music-track-table tr:has(.current) td.music-track-cover.has-spl::after {
background-image: none;
opacity: 1;
}
.audio-tracks tr:has(.current):not(.is-playing) td.audio-track-cover.has-spl::after,
.music-track-table tr:has(.current):not(.is-playing) td.music-track-cover.has-spl::after {
-webkit-backdrop-filter: blur(0px);
backdrop-filter: blur(0px);
}
.pat-table.audio-tracks td.audio-track-cover::after,
.pat-table.audio-tracks td.music-track-cover::after,
.pat-table.music-track-table td.music-track-cover::after {
transition: opacity var(--base-animation-duration, 0.3s),
-webkit-backdrop-filter var(--base-animation-duration, 0.3s),
backdrop-filter var(--base-animation-duration, 0.3s);
}
@media (prefers-reduced-motion: reduce) {
.pat-table.audio-tracks td.audio-track-cover::after,
.pat-table.audio-tracks td.music-track-cover::after,
.pat-table.music-track-table td.music-track-cover::after {
transition: none;
}
}
@media (hover: hover) {
.audio-tracks tr:has(.current):not(.is-playing) td.audio-track-cover.has-spl:hover::after,
.music-track-table tr:has(.current):not(.is-playing) td.music-track-cover.has-spl:hover::after {
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
}
@media (hover: hover) {
.audio-tracks tr:has(.current) td.audio-track-cover.has-spl:hover::after,
.music-track-table tr:has(.current) td.music-track-cover.has-spl:hover::after {
background-image: var(--kik-svg-play-white);
}
}
@media (hover: hover) {
.audio-tracks tr:has(.current).is-playing td.audio-track-cover.has-spl:hover::after,
.music-track-table tr:has(.current).is-playing td.music-track-cover.has-spl:hover::after {
background-image: var(--kik-svg-pause-white);
}
}
@media (hover: hover) {
.audio-tracks tr:has(.current) td.audio-track-cover.has-spl:hover .music-spl,
.music-track-table tr:has(.current) td.music-track-cover.has-spl:hover .music-spl {
opacity: 0;
}
}
.music-spl i {
width: 2px;
min-height: 2px;
height: 30%;
border-radius: 2px;
background: currentColor;
transition: height 60ms linear;
}
.music-spl.is-paused i {
opacity: 0.55;
}
.music-spl-vu {
height: auto;
width: auto;
max-width: none;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background: none;
margin: -1px 0 0;
transform: translateY(-50%);
}
.music-spl-vu .music-vu-face {
width: 2.25em;
max-width: 100%;
flex: 0 0 auto;
}
.music-vu-face {
width: 100%;
height: auto;
display: block;
overflow: hidden;
}
.music-vu-arc {
fill: none;
stroke: color-mix(in srgb, CanvasText 38%, Canvas);
stroke-width: 1.95;
opacity: 1;
stroke-linecap: round;
}
.music-vu-red {
fill: none;
stroke: #d64545;
stroke-width: 2.6;
opacity: 0.9;
stroke-linecap: round;
}
.music-vu-needle {
fill: CanvasText;
stroke: none;
opacity: 1;
}
.music-spl-vu.is-paused .music-vu-needle {
opacity: 1;
fill: color-mix(in srgb, CanvasText 55%, Canvas);
}
@media (prefers-reduced-motion: reduce) {
.music-spl i {
transition: none;
}
}
.table-preview {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.pat-table.data-preview {
table-layout: auto;
width: auto;
min-width: 100%;
}
.pat-table.data-preview th,
.pat-table.data-preview td {
max-width: 32em;
overflow-wrap: anywhere;
vertical-align: top;
}
.pat-table.data-preview th.numeric,
.pat-table.data-preview td.numeric {
text-align: right;
font-variant-numeric: tabular-nums;
}
.page-module.type-table .byline {
margin-top: 0.5em;
opacity: 0.7;
}
.mode-select .pat-table th.item-name label:has(.pat-avatar)::before {
align-self: center;
top: 0;
transform: none !important;
}
.pat-table th.item-name label:has(.pat-avatar) .name {
align-items: center;
}
[dir=rtl] .pat-table tbody th.item-name:has(.avatar) .name,
[dir=rtl] .pat-table tbody th.item-name:has(.icon) .name {
justify-content: start;
}
.pat-table tr.lazy-loaded > td,
.pat-table tr.lazy-loaded > th {
animation: kik-table-row-fade-in 1s ease-out both;
}
@keyframes kik-table-row-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.pat-table tr.lazy-loaded > td,
.pat-table tr.lazy-loaded > th {
animation: none;
}
}
.pat-table tr.table-load-more,
.pat-table tr.table-load-more > td {
background: transparent;
background-color: transparent;
box-shadow: none;
border: 0;
}
.pat-well .table-load-more .pat-lazy-load {
position: static;
transform: none;
}
.pat-table.show-tombstoned tr[hidden] {
display: table-row;
opacity: 0.45;
}
.pat-table tr.archived {
opacity: 0.45;
}
tr:has(.pat-context-menu[aria-expanded="true"]),
tr:has(.pat-context-menu.tooltip-active-click) {
background-color: var(--pat-surface-background-colour-highlight);
}
tr:has(.pat-lazy-load),
td:has(.pat-lazy-load) {
--pat-surface-backdrop-filter: none;
}
@container pat-table-collapse (max-width: 680px) {
.pat-table.collapse-cards tr {
background-color: var(--pat-surface-background-colour);
-webkit-backdrop-filter: var(--pat-surface-backdrop-filter);
backdrop-filter: var(--pat-surface-backdrop-filter);
}
}
@container pat-table-collapse (max-width: 680px) {
@media (hover: hover) {
.pat-table.collapse-cards tr:hover {
background-color: var(--pat-surface-background-colour-highlight);
-webkit-backdrop-filter: var(--pat-surface-backdrop-filter);
backdrop-filter: var(--pat-surface-backdrop-filter);
}
}
}
@container pat-table-collapse (max-width: 680px) {
.pat-table.collapse-cards tbody tr.current,
.pat-table.collapse-cards tbody tr:has(.current),
.pat-table.collapse-cards tbody tr:has(.pat-context-menu[aria-expanded="true"]),
.pat-table.collapse-cards tbody tr:has(.pat-context-menu.tooltip-active-click) {
background-color: var(--pat-surface-background-colour-highlight);
-webkit-backdrop-filter: var(--pat-surface-backdrop-filter);
backdrop-filter: var(--pat-surface-backdrop-filter);
}
}
@container pat-table-collapse (max-width: 680px) {
.pat-table.collapse-cards tbody tr:has(.pat-lazy-load) {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
}
.pat-table td .value.description {
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.pat-table .item-name a.name.icon-file-word {
--ll-file-bg: color-mix(in srgb, var(--colour-file-icon-word) 8%, var(--kik-file-tile-ground, #fff));
}
.pat-table .item-name a.name.icon-file-word::before,
.pat-table .item-name a.name.icon-file-word > svg {
color: var(--colour-file-icon-word);
}
.pat-table .item-name a.name.icon-file-pages {
--ll-file-bg: color-mix(in srgb, var(--colour-file-icon-pages) 8%, var(--kik-file-tile-ground, #fff));
}
.pat-table .item-name a.name.icon-file-pages::before,
.pat-table .item-name a.name.icon-file-pages > svg {
color: var(--colour-file-icon-pages);
}
.pat-table .item-name a.name.icon-file-excel {
--ll-file-bg: color-mix(in srgb, var(--colour-file-icon-excel) 8%, var(--kik-file-tile-ground, #fff));
}
.pat-table .item-name a.name.icon-file-excel::before,
.pat-table .item-name a.name.icon-file-excel > svg {
color: var(--colour-file-icon-excel);
}
.pat-table .item-name a.name.icon-file-powerpoint {
--ll-file-bg: color-mix(in srgb, var(--colour-file-icon-powerpoint) 8%, var(--kik-file-tile-ground, #fff));
}
.pat-table .item-name a.name.icon-file-powerpoint::before,
.pat-table .item-name a.name.icon-file-powerpoint > svg {
color: var(--colour-file-icon-powerpoint);
}
.pat-table .item-name a.name.icon-file-pdf {
--ll-file-bg: color-mix(in srgb, var(--colour-file-icon-pdf) 8%, var(--kik-file-tile-ground, #fff));
}
.pat-table .item-name a.name.icon-file-pdf::before,
.pat-table .item-name a.name.icon-file-pdf > svg {
color: var(--colour-file-icon-pdf);
}
.pat-table .item-name a.name.icon-markdown {
--ll-file-bg: color-mix(in srgb, var(--colour-file-icon-markdown) 8%, var(--kik-file-tile-ground, #fff));
}
.pat-table .item-name a.name.icon-markdown::before,
.pat-table .item-name a.name.icon-markdown > svg {
color: var(--colour-file-icon-markdown);
}
.pat-table .item-name a.name.icon-doc-text {
--ll-file-bg: color-mix(in srgb, var(--colour-file-icon-text) 8%, var(--kik-file-tile-ground, #fff));
}
.pat-table .item-name a.name.icon-doc-text::before,
.pat-table .item-name a.name.icon-doc-text > svg {
color: var(--colour-file-icon-text);
}
.pat-table .item-name a.name.icon-folder {
--ll-file-bg: color-mix(in srgb, var(--colour-file-icon-folder) 8%, var(--kik-file-tile-ground, #fff));
}
.pat-table .item-name a.name.icon-folder::before,
.pat-table .item-name a.name.icon-folder > svg {
color: var(--colour-file-icon-folder);
}
.pat-table .item-name a.name.icon-file-audio {
--ll-file-bg: color-mix(in srgb, var(--colour-file-icon-audio) 8%, var(--kik-file-tile-ground, #fff));
}
.pat-table .item-name a.name.icon-file-audio::before,
.pat-table .item-name a.name.icon-file-audio > svg {
color: var(--colour-file-icon-audio);
}
.pat-table .item-name a.name.icon-picture-1 {
--ll-file-bg: color-mix(in srgb, var(--colour-file-icon-image) 8%, var(--kik-file-tile-ground, #fff));
}
.pat-table .item-name a.name.icon-picture-1::before,
.pat-table .item-name a.name.icon-picture-1 > svg {
color: var(--colour-file-icon-image);
}
.pat-table .item-name a.name.icon-file-image {
--ll-file-bg: color-mix(in srgb, var(--colour-file-icon-image) 8%, var(--kik-file-tile-ground, #fff));
}
.pat-table .item-name a.name.icon-file-image::before,
.pat-table .item-name a.name.icon-file-image > svg {
color: var(--colour-file-icon-image);
}
.pat-table .item-name a.name.icon-file-video {
--ll-file-bg: color-mix(in srgb, var(--colour-file-icon-video) 8%, var(--kik-file-tile-ground, #fff));
}
.pat-table .item-name a.name.icon-file-video::before,
.pat-table .item-name a.name.icon-file-video > svg {
color: var(--colour-file-icon-video);
}
.pat-table .item-name a.name.icon-sitemap {
--ll-file-bg: color-mix(in srgb, var(--colour-file-icon-diagram) 8%, var(--kik-file-tile-ground, #fff));
}
.pat-table .item-name a.name.icon-sitemap::before,
.pat-table .item-name a.name.icon-sitemap > svg {
color: var(--colour-file-icon-diagram);
}
@container pat-table-collapse (max-width: 680px) {
.pat-table.collapse-cards tbody th.item-name a[href]:not(.icon):not(.current):hover:has(.link-title),
.pat-table.collapse-cards tbody td.item-name a[href]:not(.icon):not(.current):hover:has(.link-title),
.pat-table.collapse-cards tbody th.item-name a[href]:not(.icon):not(.current):hover:has(.link-title) .link-title,
.pat-table.collapse-cards tbody td.item-name a[href]:not(.icon):not(.current):hover:has(.link-title) .link-title,
.pat-table.collapse-cards tbody th.item-name a[href]:not(.icon):not(.current):hover::before,
.pat-table.collapse-cards tbody td.item-name a[href]:not(.icon):not(.current):hover::before {
text-decoration: none;
}
}
@container pat-table-collapse (max-width: 680px) {
.pat-table.collapse-cards {
--bullet-space: 20px;
}
}
.pat-table.cards {
--bullet-space: 20px;
}
@media (hover: none) and (max-width: 680px) {
.pat-table tbody td.functions a.icon.more {
display: none;
}
}
.pat-table.preview-cards tbody tr:not(:has(.preview)):has(.item-name a.name > svg),
.pat-table.preview-cards tbody tr:not(:has(.preview)):has(.item-name a.name > .icon) {
grid-template-columns: 1fr;
grid-template-areas:
"preview"
"title"
"byline";
column-gap: 0;
align-items: start;
}
.pat-table.preview-cards tbody tr:not(:has(.preview)):has(.item-name a.name > svg) td.item-name a.name::before,
.pat-table.preview-cards tbody tr:not(:has(.preview)):has(.item-name a.name > svg) th.item-name a.name::before,
.pat-table.preview-cards tbody tr:not(:has(.preview)):has(.item-name a.name > .icon) td.item-name a.name::before,
.pat-table.preview-cards tbody tr:not(:has(.preview)):has(.item-name a.name > .icon) th.item-name a.name::before {
display: none;
}
.pat-table.preview-cards tbody tr:not(:has(.preview)):has(.item-name a.name > svg) .item-name a.name > svg,
.pat-table.preview-cards tbody tr:not(:has(.preview)):has(.item-name a.name > .icon) .item-name a.name > svg {
grid-area: preview;
display: block;
box-sizing: border-box;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
padding: 30%;
margin: 0 0 var(--pat-x-list-gutter);
border-radius: var(--border-radii-medium, var(--border-radii));
background-color: var(--pat-surface-background-colour, var(--ll-file-bg, rgba(0, 0, 0, 0.02)));
box-shadow: var(--default-box-shadow);
color: var(--body-font-colour);
opacity: 0.7;
}
.pat-table.preview-cards tbody tr {
position: relative;
box-sizing: border-box;
margin: 0;
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"preview"
"title"
"byline";
grid-auto-rows: auto;
row-gap: 0;
hyphens: auto;
background: none;
border: 0;
padding: 0;
box-shadow: none;
--pat-table-row-outline: none;
border-radius: 0;
overflow: visible;
}
.pat-table.preview-cards tbody td.item-name:has(a.name[class]) ~ td:not(.functions):not(.select):not(:empty),
.pat-table.preview-cards tbody th.item-name:has(a.name[class]) ~ td:not(.functions):not(.select):not(:empty) {
grid-area: byline;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
pointer-events: none;
align-self: start;
margin: 0;
padding: 0 0 10px 0;
font-weight: normal;
color: var(--body-font-colour);
line-height: 1.3;
zoom: 0.8;
}
.pat-table.preview-cards tbody {
--kik-card-gap: 16px;
gap: var(--kik-card-gap);
}
@container screen style(--screen-small: true) {
.pat-table.preview-cards tbody tr {
flex-basis: calc((100% - 1 * var(--kik-card-gap)) / 2);
}
}
@container preview-cards (min-width: 350px) {
.pat-table.preview-cards tbody tr {
flex-basis: calc((100% - 1 * var(--kik-card-gap)) / 2);
}
}
@container preview-cards (min-width: 530px) {
.pat-table.preview-cards tbody tr {
flex-basis: calc((100% - 2 * var(--kik-card-gap)) / 3);
}
}
@container preview-cards (min-width: 890px) {
.pat-table.preview-cards tbody tr {
flex-basis: calc((100% - 5 * var(--kik-card-gap)) / 6);
}
}
@container preview-cards (min-width: 420px) {
.application-present .pat-table.preview-cards tbody tr {
flex-basis: calc((100% - 1 * var(--kik-card-gap)) / 2);
}
}
@container preview-cards (min-width: 760px) {
.application-present .pat-table.preview-cards tbody tr {
flex-basis: calc((100% - 2 * var(--kik-card-gap)) / 3);
}
}
.pat-table.preview-cards tbody td.item-name:has(a.name[class]),
.pat-table.preview-cards tbody th.item-name:has(a.name[class]) {
font-size: 0.9em;
}
.pat-table.preview-cards tbody tr:not(.table-load-more) {
flex-grow: 0;
}
@media (hover: hover) {
.pat-table.preview-cards tbody tr:not(:has(.preview)):has(.item-name a.name > svg) .item-name a.name > svg,
.pat-table.preview-cards tbody tr:not(:has(.preview)):has(.item-name a.name > .icon) .item-name a.name > svg {
transition: background-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease;
}
}
@media (hover: hover) {
.pat-table.preview-cards tbody tr:not(:has(.preview)):has(.item-name a.name > svg):hover .item-name a.name > svg,
.pat-table.preview-cards tbody tr:not(:has(.preview)):has(.item-name a.name > .icon):hover .item-name a.name > svg {
background-color: var(--pat-surface-background-colour-hover, var(--pat-surface-background-colour));
box-shadow: var(--default-box-shadow-hover, var(--default-box-shadow));
opacity: 1;
}
}
.pat-table tr.kik-realtime-added > td,
.pat-table tr.kik-realtime-added > th {
animation: kik-table-row-fade-in 1s ease-out both;
}
@media (prefers-reduced-motion: reduce) {
.pat-table tr.kik-realtime-added > td,
.pat-table tr.kik-realtime-added > th {
animation: none;
}
}
.pat-table tr.kik-row-leaving > td,
.pat-table tr.kik-row-leaving > th {
opacity: 0;
pointer-events: none;
transition: opacity 150ms ease-out;
}
.pat-table tr.kik-row-follow > td,
.pat-table tr.kik-row-follow > th {
transition: transform 250ms ease-in-out;
will-change: transform;
}
.pat-table tr.kik-row-settle > td,
.pat-table tr.kik-row-settle > th {
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.pat-table tr.kik-row-leaving > td,
.pat-table tr.kik-row-leaving > th,
.pat-table tr.kik-row-follow > td,
.pat-table tr.kik-row-follow > th {
transition: none;
}
}
.pat-table-box:has(> .pat-table[data-pat-table*="swipe-"]) {
position: relative;
}
.pat-table[data-pat-table*="swipe-"] tbody tr > td,
.pat-table[data-pat-table*="swipe-"] tbody tr > th {
touch-action: pan-y pinch-zoom;
}
.pat-table[data-pat-table*="swipe-"] tbody tr.pat-table-swipe-settle > td,
.pat-table[data-pat-table*="swipe-"] tbody tr.pat-table-swipe-settle > th {
transition: transform 200ms ease-out;
}
.pat-table-swipe-reveal {
position: absolute;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 0;
min-width: 4.5rem;
padding: 0 0.75rem;
z-index: 1;
--pat-table-swipe-progress: 1;
opacity: var(--pat-table-swipe-progress);
transition: opacity 200ms ease-out;
}
.pat-table-swipe-reveal.dragging {
transition: none;
}
.pat-table-swipe-reveal.swipe-right {
justify-content: flex-start;
}
.pat-table-swipe-reveal.closing {
opacity: 0;
pointer-events: none;
}
.pat-table-swipe-action {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 2.75rem;
height: 2.75rem;
margin: 0;
padding: 0;
border: 0;
border-radius: 0.75rem;
background: var(--colour-accent, #2d6cdf);
color: #fff;
font-size: 0;
line-height: 1;
cursor: default;
transform: scale(calc(0.6 + 0.4 * var(--pat-table-swipe-progress)));
transition: transform 200ms ease-out, opacity 200ms ease-out;
}
.pat-table-swipe-reveal.dragging .pat-table-swipe-action {
transition: none;
}
.pat-table-swipe-action > svg {
width: 1.375rem;
height: 1.375rem;
flex: none;
}
.pat-table-swipe-reveal.danger .pat-table-swipe-action {
background: var(--colour-alert, #dc2626);
}
.pat-table-swipe-reveal.past .pat-table-swipe-action {
transform: scale(1.12);
}
.pat-table-swipe-reveal.commit .pat-table-swipe-action {
transform: scale(0.3);
opacity: 0;
}
.pat-table-swipe-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
.pat-table[data-pat-table*="swipe-"] tbody tr.pat-table-swipe-settle > td,
.pat-table[data-pat-table*="swipe-"] tbody tr.pat-table-swipe-settle > th,
.pat-table-swipe-reveal,
.pat-table-swipe-action {
transition: none;
}
}
.pat-table .item-name a.name:has(> svg.kik-file-mark)::before {
content: none !important;
}
.pat-table .item-name a.name:has(> svg.kik-file-mark) > svg.kik-file-mark {
grid-area: icon;
justify-self: end;
align-self: center;
width: var(--pat-table-file-tile-size, 24px);
height: var(--pat-table-file-tile-size, 24px);
}
.pat-table.tile-icons .item-name a.name > svg.kik-file-mark {
width: auto;
height: auto;
}
.kik-internal-cards {
list-style: none;
margin: 0.6em 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.4em;
}
.kik-internal-card a {
display: flex;
align-items: center;
gap: 0.7em;
padding: 0.5em;
border: 1px solid var(--border-colour, rgba(0, 0, 0, 0.12));
border-radius: var(--border-radii, 8px);
background: var(--panel-background-colour, rgba(255, 255, 255, 0.6));
text-decoration: none;
color: inherit;
}
.kik-internal-card a * {
pointer-events: none;
}
@media (hover: hover) {
.kik-internal-card a:hover {
border-color: var(--main-colour, #7c4dff);
background: rgba(124, 77, 255, 0.04);
}
}
.kik-internal-card-art {
flex: none;
width: 3.4em;
height: 3.4em;
border-radius: var(--border-radii-small, 4px);
overflow: hidden;
background: var(--quiet-background-colour, rgba(0, 0, 0, 0.06));
}
.kik-internal-card-art img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.kik-internal-card-letter {
display: flex;
align-items: center;
justify-content: center;
font-size: 1.4em;
font-weight: 600;
opacity: 0.55;
}
.kik-internal-card-text {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.1em;
}
.kik-internal-card-title {
font-weight: 600;
line-height: 1.25;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
}
.kik-internal-card-byline,
.kik-internal-card-source {
font-size: 0.85em;
opacity: 0.7;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kik-internal-card-source {
font-size: 0.78em;
opacity: 0.55;
}
.kik-chips {
display: flex;
flex-wrap: wrap;
gap: 0.35rem;
margin: 0 0 0.75rem;
}
.kik-chip {
background: color-mix(in srgb, var(--app-colour) 12%, white);
color: color-mix(in srgb, var(--app-colour) 60%, black);
border-radius: 999px;
padding: 0.15rem 0.7rem;
font-size: 0.75rem;
white-space: nowrap;
text-decoration: none;
cursor: default;
}
a.kik-chip {
cursor: default;
}
@media (hover: hover) {
a.kik-chip:hover {
background: color-mix(in srgb, var(--app-colour) 22%, white);
color: var(--app-colour);
text-decoration: none;
}
}
.kik-bio {
font-size: 0.9rem;
line-height: 1.6;
display: -webkit-box;
-webkit-line-clamp: 4;
line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.kik-bio-toggle:checked ~ .kik-bio {
display: block;
-webkit-line-clamp: none;
line-clamp: none;
overflow: visible;
}
.kik-bio-meta {
margin: 0.3rem 0 0;
font-size: 0.75rem;
color: color-mix(in srgb, currentColor 55%, transparent);
}
.kik-bio-more {
color: var(--app-colour);
margin-right: 0.6rem;
}
.kik-bio-toggle:checked ~ .kik-bio-meta .kik-bio-more {
display: none;
}
.kik-bio-meta a {
color: inherit;
}
.dup-panel {
display: flex;
flex-direction: column;
gap: 1rem;
}
.dup-panel .pat-well .pat-toolbar .dup-merge {
margin: 0;
white-space: nowrap;
}
.organise-review {
padding: 0 1.5rem 4rem;
max-width: 60rem;
}
.organise-review .organise-title {
margin: 1rem 0 0.25rem;
font-size: 1.15rem;
}
.organise-review .organise-scope {
color: var(--kik-text-muted, rgba(0, 0, 0, 0.55));
font-weight: normal;
}
.organise-review .organise-scope::before {
content: '— ';
}
.organise-review .organise-status,
.organise-review .organise-hint {
margin: 0.25rem 0 0.75rem;
color: var(--kik-text-muted, rgba(0, 0, 0, 0.55));
font-style: italic;
}
.organise-review .organise-error {
color: var(--kik-danger, #a40e26);
font-style: normal;
}
.organise-review .organise-summary {
display: flex;
gap: 1.25rem;
margin: 0.75rem 0 0.25rem;
color: var(--kik-text-muted, rgba(0, 0, 0, 0.55));
}
.organise-review .organise-summary strong {
color: inherit;
}
.organise-review ol.organise-plan {
margin: 0.5rem 0;
padding-inline-start: 1.5rem;
}
.organise-review .organise-op {
margin: 0.25rem 0;
}
.organise-groups {
display: flex;
flex-direction: column;
gap: 0.5rem;
margin: 0.5rem 0 1.25rem;
}
.organise-group {
background-color: var(--pat-surface-background-colour);
-webkit-backdrop-filter: var(--pat-surface-backdrop-filter);
backdrop-filter: var(--pat-surface-backdrop-filter);
border-radius: var(--border-radii, 0.5rem);
overflow: hidden;
}
.organise-group.is-off {
opacity: 0.5;
}
.organise-group-head,
.organise-file {
--pat-checklist-checkbox-vertical-position: calc(0.5 * var(--pat-checklist-checkbox-size, 18px));
--pat-checklist-margin-bottom: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.organise-group-head > .organise-pick,
.organise-file > .organise-pick {
margin-bottom: 0;
min-width: 0;
}
.organise-group-head {
padding: 0.5rem 0.75rem;
font-weight: 500;
}
@media (hover: hover) {
.organise-group-head:hover {
background-color: var(--pat-surface-background-colour-highlight);
}
}
.organise-chip {
margin-inline-start: auto;
padding: 0.05rem 0.5rem;
border-radius: 1rem;
font-size: 0.75rem;
font-weight: normal;
color: var(--kik-success-text, #1a7f37);
background: var(--kik-success-bg, rgba(26, 127, 55, 0.1));
}
.organise-files {
margin: 0;
padding: 0;
list-style: none;
}
.organise-file {
padding: 0.4rem 0.75rem 0.4rem 1.75rem;
border-top: 1px solid var(--kik-border-subtle, rgba(0, 0, 0, 0.08));
}
@media (hover: hover) {
.organise-file:hover {
background-color: var(--pat-surface-background-colour-highlight);
}
}
.organise-file .organise-pick-label {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.organise-file > .organise-pick {
flex: 0 0 auto;
}
.organise-file-name {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.organise-actions {
display: flex;
gap: 0.75rem;
align-items: center;
padding: 0.75rem 0;
}
.organise-count {
color: var(--kik-text-muted, rgba(0, 0, 0, 0.55));
}
.image-panel-content .kik-generated-image {
height: 100%;
}
.kik-generated-image {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
align-items: stretch;
--form-input-field-border-radius: var(--border-radii-medium);
}
.kik-generated-image > img {
display: block;
height: 100%;
border-radius: var(--border-radii-medium);
max-height: 100%;
max-width: 100%;
min-height: 0;
min-width: 0;
align-self: start;
justify-self: center;
}
.kik-generated-image > fieldset {
display: flex;
flex-direction: column;
height: 100%;
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
}
.kik-generated-image .kik-generated-image-prompt {
flex: 1 1 auto;
min-height: 0;
margin: 0;
}
.kik-generated-image .kik-generated-image-prompt textarea {
min-height: 0;
padding: 11px 15px;
resize: none;
field-sizing: fixed;
}
.kik-generated-image .pat-button-bar {
margin-bottom: 0;
padding-bottom: 0;
}
.pat-form fieldset.vertical .kik-generated-image-prompt {
grid-template-rows: auto 1fr;
row-gap: 0;
}
.pat-form fieldset.vertical .kik-generated-image-prompt > textarea {
margin-top: 0;
}
.kik-personal-selector-folders {
margin-bottom: 1rem;
}
.kik-personal-selector-folders .item.folder figure {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: .3rem;
padding: .5rem .25rem;
background-color: rgba(0, 0, 0, 0.05);
border-radius: var(--border-radii);
}
.kik-personal-selector-folders .item.folder figure figcaption {
position: static;
padding: 0;
height: auto;
overflow: visible;
white-space: normal;
text-align: center;
}
.kik-personal-selector-folders .kik-personal-folder-glyph.icon-folder::before {
color: var(--app-colour-documents, #888);
font-size: 2rem;
}
.kik-personal-selector-folders .item.folder .item-byline {
display: block;
opacity: .6;
font-size: .8em;
}
.kik-personal-selector .item.image .follow {
display: block;
width: 100%;
height: 100%;
}
.kik-personal-selector-batch {
display: contents;
}
#image-selector-content:has(> .kik-personal-selector-folders > .kik-personal-selector-first) {
position: relative;
}
.kik-personal-selector-folders > .kik-personal-selector-first {
position: absolute;
inset: 0;
width: 60px;
height: 60px;
margin: auto;
}
.kik-mic {
position: relative;
}
.kik-mic.is-recording {
color: #E5484D;
background: color-mix(in srgb, #E5484D 12%, white);
box-shadow:
0 0 0 calc(3px + var(--mic-level, 0) * 26px)
rgba(229, 72, 77, 0.35),
0 0 calc(8px + var(--mic-level, 0) * 30px)
calc(var(--mic-level, 0) * 12px)
rgba(229, 72, 77, 0.3);
transition: box-shadow 0.09s linear;
}
.kik-mic.is-busy::after {
content: '';
position: absolute;
inset: -1px;
border-radius: 50%;
background: conic-gradient(
var(--colour-accent, #F37021) 0deg,
var(--gray-300, #d8d5cf) 72deg,
var(--gray-300, #d8d5cf) 360deg);
-webkit-mask: radial-gradient(farthest-side,
transparent calc(100% - 3px), #000 calc(100% - 2px));
mask: radial-gradient(farthest-side,
transparent calc(100% - 3px), #000 calc(100% - 2px));
animation: kik-mic-spin 1s linear infinite;
}
@keyframes kik-mic-spin {
to { transform: rotate(360deg); }
}
.kik-mic.is-error {
box-shadow: 0 0 0 3px rgba(229, 72, 77, 0.55);
transition: box-shadow 0.15s ease-out;
}
.kik-call-frame {
--kik-call-bar-height: 2.25rem;
--kik-call-grip: 18px;
--kik-call-edge: 0px;
--kik-call-dock-height: calc(35px + 2 * 8px + 10px);
--kik-call-toolbar-space: clamp(
calc(var(--kik-call-dock-height) + 10px), 22%, 104px);
--kik-call-tile-width: clamp(104px, 34%, 168px);
--kik-call-tile-height: clamp(76px, 30%, 116px);
position: fixed;
z-index: 10005;
transform-origin: top left;
transition: box-shadow var(--base-animation-duration, 0.2s) ease;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--border-radii, 10px);
background: #000;
box-shadow: var(--kik-window-shadow);
padding: var(--kik-call-edge);
touch-action: none;
}
.kik-call-frame.is-dragging {
user-select: none;
}
.kik-call-frame.is-dragging iframe {
pointer-events: none;
}
.kik-call-frame .kik-call-bar {
display: none;
}
.kik-call-frame.is-fallback .kik-call-bar {
display: flex;
align-items: center;
gap: 0.5rem;
height: var(--kik-call-bar-height);
min-height: var(--kik-call-bar-height);
padding-inline: 0.75rem;
background: rgba(255, 255, 255, 0.08);
color: #fff;
cursor: move;
flex: 0 0 auto;
}
.kik-call-frame .kik-call-shield {
position: absolute;
inset: 0;
bottom: var(--kik-call-toolbar-space);
z-index: 1;
cursor: move;
background-color: rgba(0, 0, 0, 0.001);
clip-path: polygon(
0 0,
100% 0,
100% calc(100% - var(--kik-call-tile-height)),
calc(100% - var(--kik-call-tile-width))
calc(100% - var(--kik-call-tile-height)),
calc(100% - var(--kik-call-tile-width)) 100%,
0 100%);
}
.kik-call-frame .kik-call-title {
flex: 1 1 auto;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.85rem;
}
.kik-call-frame .kik-call-hangup {
flex: 0 0 auto;
min-width: 0;
padding: 0.15rem 0.6rem;
font-size: 0.8rem;
}
.kik-call-frame .kik-call-stage {
flex: 1 1 auto;
position: relative;
overflow: hidden;
border-radius: 0 0
calc(var(--border-radii, 10px) - var(--kik-call-edge))
calc(var(--border-radii, 10px) - var(--kik-call-edge));
}
.kik-call-frame .kik-call-stage iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
border-radius: inherit;
}
.kik-call-frame .kik-call-leave {
position: absolute;
top: 0.6rem;
right: 0.6rem;
z-index: 4;
width: 35px;
height: 35px;
border: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
color: #fff;
background: #dc3545;
transition: background-color 0.15s ease;
}
.kik-call-frame .kik-call-leave > svg.kik-icon {
width: 20px;
height: 20px;
display: block;
}
@media (hover: hover) {
.kik-call-frame .kik-call-leave:hover {
background: #b02a37;
}
}
.kik-call-frame.is-fallback .kik-call-leave {
display: none;
}
.kik-call-frame.is-jitsi-hangup .kik-call-leave {
display: none;
}
.kik-call-frame .kik-call-grip {
position: absolute;
width: var(--kik-call-grip);
height: var(--kik-call-grip);
z-index: 3;
background-color: rgba(0, 0, 0, 0.001);
}
.kik-call-frame .kik-call-grip[data-corner="nw"] {
top: 0;
left: 0;
cursor: nwse-resize;
}
.kik-call-frame .kik-call-grip[data-corner="ne"] {
top: 0;
right: 0;
cursor: nesw-resize;
}
.kik-call-frame .kik-call-grip[data-corner="sw"] {
bottom: 0;
left: 0;
cursor: nesw-resize;
}
.kik-call-frame .kik-call-grip[data-corner="se"] {
bottom: 0;
right: 0;
cursor: nwse-resize;
}
#main.injecting > .kik-call-frame {
opacity: 1;
}
.kik-call-ring {
position: fixed;
inset: 0;
z-index: 10010;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
background: rgba(0, 0, 0, 0.55);
backdrop-filter: blur(4px);
}
.kik-call-ring .kik-call-ring-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 1.25rem;
width: min(22rem, 100%);
padding: 2rem 1.5rem;
border-radius: var(--border-radii, 10px);
background: var(--colour-base-background, #fff);
color: var(--body-text-colour, #222);
box-shadow: var(--kik-window-shadow);
text-align: center;
}
.kik-call-ring .kik-call-ring-avatar {
width: 7rem;
height: 7rem;
font-size: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background-color: var(--avatar-background-colour, var(--app-colour, #5b7fb8));
color: #fff;
overflow: hidden;
}
.kik-call-ring .kik-call-ring-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.kik-call-ring .kik-call-ring-line {
margin: 0;
font-size: 1.15rem;
}
.kik-call-ring .kik-call-ring-actions {
display: flex;
gap: 1rem;
}
.kik-call-ring .kik-call-answer,
.kik-call-ring .kik-call-decline {
min-width: 7.5rem;
}
.kik-call-ring .kik-call-ring-avatar {
animation: kik-call-pulse 2s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.kik-call-ring .kik-call-ring-avatar {
animation: none;
}
}
@keyframes kik-call-pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
body.messages-call-invite {
margin: 0;
background: #000;
}
.kik-call-guest {
position: fixed;
inset: 0;
}
.kik-call-guest .kik-call-guest-stage {
position: absolute;
inset: 0;
}
.kik-call-guest .kik-call-guest-stage iframe {
width: 100%;
height: 100%;
border: 0;
}
.kik-call-guest .kik-call-guest-fallback {
position: absolute;
inset-inline: 0;
bottom: 12vh;
margin: 0;
text-align: center;
}
.kik-call-guest-over {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1.75rem;
padding: 2rem;
background: var(--colour-base-background, #fff);
color: var(--body-text-colour, #222);
text-align: center;
}
.kik-call-guest-over .kik-call-guest-logo {
width: min(9rem, 40vw);
height: auto;
border-radius: var(--border-radii, 10px);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.kik-call-guest-over .kik-call-guest-over-line {
margin: 0;
font-size: clamp(1.2rem, 4.5vw, 1.5rem);
line-height: 1.3;
text-align: center;
text-wrap: balance;
max-width: 22ch;
}
.kik-call-guest-over .kik-call-guest-back {
min-width: 10rem;
text-align: center;
}
.kik-call-guest-over .kik-call-guest-ringing {
margin: 0;
text-align: center;
opacity: 0.75;
}
.kik-call-guest-over.is-ringing {
background: rgba(0, 0, 0, 0.72);
color: #fff;
backdrop-filter: blur(3px);
}
.kik-call-guest-farewell {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2.5rem;
background: var(--colour-base-background, #fff);
color: var(--body-text-colour, #222);
text-align: center;
padding: 2rem;
text-decoration: none;
}
.kik-call-guest-farewell .kik-call-guest-away {
position: absolute;
inset: 0;
z-index: 0;
}
.kik-call-guest-farewell .kik-call-guest-logo {
position: relative;
width: min(17rem, 62vw);
height: auto;
pointer-events: none;
}
.kik-call-guest-farewell .kik-call-guest-tagline {
position: relative;
margin: 0;
font-size: clamp(1.5rem, 6vw, 2.1rem);
line-height: 1.25;
text-align: center;
text-wrap: balance;
max-width: 20ch;
color: inherit;
pointer-events: none;
}
.kik-call-guest-farewell .kik-call-guest-signup {
position: relative;
z-index: 1;
text-align: center;
background: var(--colour-accent, #F37021);
border-color: var(--colour-accent, #F37021);
color: #fff;
font-size: 1.1rem;
padding: 0.7em 1.8em;
}
.kik-call-audio {
background: #fff;
}
.kik-call-veil {
position: absolute;
inset: 0;
z-index: 2;
cursor: move;
background: #fff;
border-radius: inherit;
}
.kik-call-waiting {
position: absolute;
inset: 0;
z-index: 1;
cursor: move;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
padding: 1rem;
background: #111;
color: #fff;
text-align: center;
}
.kik-call-waiting .kik-call-waiting-face {
width: 5.5rem;
height: 5.5rem;
font-size: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
overflow: hidden;
background-color: var(--avatar-background-colour, #5b7fb8);
color: #fff;
}
.kik-call-waiting .kik-call-waiting-face img {
width: 100%;
height: 100%;
object-fit: cover;
}
.kik-call-waiting .kik-call-waiting-line {
margin: 0;
font-size: 1rem;
opacity: 0.85;
}
.kik-call-guest-over .kik-call-guest-face {
width: min(9rem, 40vw);
height: min(9rem, 40vw);
border-radius: 50%;
object-fit: cover;
}
.kik-call-frame.is-anchored {
z-index: 100;
border-radius: var(--border-radii, 10px);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.kik-call-frame.is-anchored .kik-call-shield,
.kik-call-frame.is-anchored .kik-call-grip {
display: none;
}
.kik-call-frame.is-anchored .kik-call-dock {
display: none;
}
.kik-call-frame .kik-call-win {
display: none;
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored .kik-call-stage {
border-end-start-radius: 0;
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored.kik-call-win-floating.kik-call-win-sidebar-closed {
border-start-start-radius: var(--border-radii, 10px);
border-end-start-radius: var(--border-radii, 10px);
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored.kik-call-win-floating.kik-call-win-sidebar-closed .kik-call-stage {
border-end-start-radius: calc(var(--border-radii, 10px) - var(--kik-call-edge));
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored:not(.kik-call-win-floating),
body[data-platform-mode="pro"] .kik-call-frame.is-anchored:not(.kik-call-win-floating) .kik-call-stage {
border-radius: 0;
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored .kik-call-dock {
display: none;
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored .kik-call-win {
display: contents;
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored .kik-call-win > button {
position: absolute;
z-index: 4;
padding: 0;
border: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--pat-toolbar-icon-text-colour);
background-color: var(--pat-toolbar-icon-frost-background);
-webkit-backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
transition: background-color 0.15s ease;
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored .kik-call-win > button[hidden] {
display: none;
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored .kik-call-win > button > svg {
width: var(--kik-toolbar-icon-size, 20px);
height: var(--kik-toolbar-icon-size, 20px);
display: block;
fill: var(--kik-icon-fill, none);
stroke-width: var(--kik-toolbar-icon-stroke-width);
pointer-events: none;
}
@media (hover: hover) {
body[data-platform-mode="pro"] .kik-call-frame.is-anchored .kik-call-win > button:hover {
background-color: var(--pat-toolbar-icon-background-colour-hover);
}
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored .kik-call-win > .kik-call-win-drag {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 3;
touch-action: none;
background-color: rgba(0, 0, 0, 0.001);
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored .kik-call-win > .kik-call-win-edge {
position: absolute;
z-index: 5;
touch-action: none;
background-color: rgba(0, 0, 0, 0.001);
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored .kik-call-win > .kik-call-win-edge[hidden] {
display: none;
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored .kik-call-win > [data-for="kik-win-max"] > svg:nth-of-type(1) {
display: none;
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored .kik-call-win > [data-for="kik-win-side"] > svg {
display: block;
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored.kik-call-win-floating .kik-call-win > [data-for="kik-win-max"] > svg:nth-of-type(1) {
display: block;
}
body[data-platform-mode="pro"] .kik-call-frame.is-anchored.kik-call-win-floating .kik-call-win > [data-for="kik-win-max"] > svg:nth-of-type(2) {
display: none;
}
.kik-call-frame .kik-call-ended {
display: none;
}
.kik-call-frame.is-ended .kik-call-ended {
position: absolute;
inset: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
border-radius: inherit;
background: #fff;
}
.kik-call-frame.is-ended .kik-call-leave,
.kik-call-frame.is-ended .kik-call-dock {
display: none;
}
.kik-meeting-gate {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2rem;
width: 100%;
height: 100%;
padding: 1rem;
border-radius: var(--border-radii, 10px);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
background: var(--colour-base-background, #fff);
}
.kik-meeting-gate .kik-meeting-join {
background-color: var(--app-colour-meetings, limegreen);
border-color: var(--app-colour-meetings, limegreen);
}
@media (hover: hover) {
.kik-meeting-gate .kik-meeting-join:hover {
background-color: var(--app-colour-meetings, limegreen);
border-color: var(--app-colour-meetings, limegreen);
filter: brightness(1.08);
}
}
.kik-meeting-gate .kik-meeting-upcoming {
width: min(400px, 100%);
margin: 0;
padding: 0;
list-style: none;
font-size: 0.875rem;
}
.kik-meeting-gate .kik-meeting-upcoming li {
display: flex;
gap: 0.75rem;
align-items: baseline;
padding: 0.5rem 0;
}
.kik-meeting-gate .kik-meeting-upcoming li + li {
border-top: 1px solid var(--colour-border, rgba(0, 0, 0, 0.1));
}
.kik-meeting-gate .kik-meeting-upcoming time {
flex: 0 0 auto;
font-variant-numeric: tabular-nums;
color: var(--body-text-colour-lighter, #767676);
}
.kik-meeting-gate .kik-meeting-upcoming .kmu-title {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.kik-call-chip-seat {
display: block;
flex: 0 0 auto;
width: var(--pat-toolbar-button-height, 2.25rem);
height: var(--pat-toolbar-button-height, 2.25rem);
pointer-events: none;
}
.kik-call-chip-seat.in-header {
float: right;
box-sizing: border-box;
width: var(--kik-dock-tab-width);
height: 36px;
margin-block: 0;
margin-inline-start: var(--application-label-white-space, 10px);
margin-inline-end: var(--application-label-white-space, 10px);
position: relative;
top: calc((var(--global-header-height, 54px) - 36px) / 2 + 0.5px);
}
.kik-call-chip-seat.in-rail {
box-sizing: border-box;
width: 38px;
height: 38px;
margin: 3px 3px 3px 5px;
margin-top: auto;
}
#global-nav-side:has(.kik-call-chip-seat.in-rail) .gns-app-launcher {
margin-top: 0;
}
body[dir="rtl"] .kik-call-chip-seat.in-rail {
margin-inline: 5px 3px;
}
body[dir="rtl"] .kik-call-chip-seat.in-header {
float: left;
}
.kik-call-frame .kik-call-dock {
position: absolute;
top: 0.6rem;
right: calc(0.6rem + 35px + 0.4rem);
z-index: 4;
width: 35px;
height: 35px;
border: 0;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--pat-toolbar-icon-text-colour);
background-color: var(--pat-toolbar-icon-frost-background);
-webkit-backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
transition: background-color 0.15s ease;
}
.kik-call-frame .kik-call-dock > svg.kik-icon {
width: 20px;
height: 20px;
display: block;
}
@media (hover: hover) {
.kik-call-frame .kik-call-dock:hover {
background-color: var(--pat-toolbar-icon-background-colour-hover);
}
}
.kik-call-frame.is-jitsi-hangup .kik-call-dock {
right: 0.6rem;
}
.kik-call-frame .kik-call-meta {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
overflow: hidden;
}
.kik-call-frame .kik-call-byline {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
font-size: 0.72rem;
opacity: 0.7;
font-variant-numeric: tabular-nums;
}
.kik-call-frame .kik-call-face {
display: none;
}
.kik-call-frame.is-docked {
box-sizing: border-box;
padding: 0;
overflow: hidden;
border-radius: var(--border-radii-small, 6px);
box-shadow: var(--pat-toolbar-box-shadow, 0 6px 24px rgba(0, 0, 0, 0.16));
background: #000;
z-index: 1201;
}
.kik-call-frame.is-docked .kik-call-bar,
.kik-call-frame.is-docked .kik-call-grip,
.kik-call-frame.is-docked .kik-call-dock,
.kik-call-frame.is-docked .kik-call-waiting,
.kik-call-frame.is-docked .kik-call-veil {
display: none;
}
.kik-call-frame.is-docked .kik-call-stage {
overflow: hidden;
}
.kik-call-frame.is-docked .kik-call-stage iframe {
inset: 0 auto auto 0 !important;
width: var(--kik-call-chip-source, 320px) !important;
height: var(--kik-call-chip-source, 320px) !important;
transform: scale(var(--kik-call-chip-scale, 0.11));
transform-origin: top left;
pointer-events: none;
}
.kik-call-frame.is-docked .kik-call-shield {
inset: 0;
cursor: default;
clip-path: none;
}
.kik-call-frame.is-docked:is(.is-audio, .is-waiting) .kik-call-face {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
border-radius: inherit;
font-size: 1rem;
}
.kik-call-frame.is-docked:is(.is-audio, .is-waiting) .kik-call-face::before {
border-radius: inherit;
}
.kik-call-frame.is-docked:is(.is-audio, .is-waiting) .kik-call-face img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.kik-call-frame.is-docked .kik-call-leave {
display: none;
}
@media (hover: hover) {
.kik-call-frame.is-docked:not(.in-rail):hover .kik-call-leave {
display: flex;
inset: 0;
top: auto;
right: auto;
width: 100%;
height: 100%;
border-radius: inherit;
background: rgba(220, 53, 69, 0.82);
z-index: 5;
}
}
@media (hover: hover) {
.kik-call-frame.is-docked:not(.in-rail):hover .kik-call-leave > svg.kik-icon {
width: 55%;
height: 55%;
}
}
.kik-call-frame.is-docked.is-over-art {
border-radius: var(--border-radii-medium, 12px);
box-shadow:
0 0 0 2px var(--pat-surface-background-colour, #1b1f27),
0 4px 14px rgba(0, 0, 0, 0.4);
}
.kik-call-frame.is-docked.in-rail {
border-radius: var(--kik-global-nav-icon-radius, 8px);
}
.kik-call-frame.is-docked.in-header {
--app-colour: var(--app-colour-messages, var(--colour-accent));
display: flex;
flex-direction: row;
align-items: center;
gap: 2px;
padding: 0;
padding-inline-end: 9px;
height: 36px;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: var(--kal-corner-radius, 8px);
background: color-mix(in srgb, var(--app-colour) 10%, #fff);
color: var(--pat-toolbar-button-text-colour);
box-shadow: none;
overflow: visible;
}
.kik-call-frame.is-docked.in-header .kik-call-stage {
order: -1;
flex: 0 0 33px;
width: 33px;
height: 33px;
border-radius: var(--kik-global-nav-icon-radius);
transform: scale(var(--kal-icon-scale-active, 0.8));
overflow: hidden;
}
.kik-call-frame.is-docked.in-header .kik-call-bar {
display: contents;
}
.kik-call-frame.is-docked.in-header .kik-call-meta {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
min-width: 0;
max-width: 100px;
line-height: 1.2;
overflow: hidden;
text-align: start;
}
.kik-call-frame.is-docked.in-header .kik-call-title {
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 12px;
font-weight: 600;
line-height: 1.2;
color: var(--app-colour);
}
.kik-call-frame.is-docked.in-header .kik-call-byline {
display: block;
max-width: 100%;
font-size: 11px;
line-height: 12px;
opacity: 0.5;
color: black;
}
.kik-call-frame.is-docked.in-header:is(.is-audio, .is-waiting) .kik-call-face {
inset: auto;
left: 1px;
top: 50%;
width: 33px;
height: 33px;
border-radius: var(--kik-global-nav-icon-radius);
transform: translateY(-50%) scale(var(--kal-icon-scale-active, 0.8));
}
@media (hover: hover) {
.kik-call-frame.is-docked.in-header:hover {
background: color-mix(in srgb, var(--app-colour) 20%, #fff);
}
}
@media (hover: hover) {
.kik-call-frame.is-docked.in-header:hover .kik-call-leave {
inset: auto;
left: 1px;
top: 50%;
width: 33px;
height: 33px;
border-radius: var(--kik-global-nav-icon-radius);
transform: translateY(-50%) scale(var(--kal-icon-scale-active, 0.8));
}
}
.kik-scribe-notice {
position: fixed;
z-index: 1000;
inset-block-end: 1rem;
inset-inline-start: 1rem;
display: flex;
align-items: center;
gap: .5rem;
padding: .375rem .5rem .375rem .75rem;
border-radius: 1.25rem;
background: var(--kik-scribe-notice-bg, rgb(0 0 0 / .72));
color: var(--kik-scribe-notice-colour, #fff);
font-size: .8125rem;
line-height: 1.25rem;
backdrop-filter: blur(4px);
}
.kik-scribe-notice .kik-scribe-dot {
inline-size: .5rem;
block-size: .5rem;
border-radius: 50%;
background: var(--kik-scribe-dot-colour, #e5484d);
animation: kik-scribe-pulse 2s ease-in-out infinite;
}
.kik-scribe-notice .kik-scribe-text {
white-space: nowrap;
}
.kik-scribe-notice .kik-scribe-stop {
border: 0;
border-radius: 1rem;
padding: .125rem .625rem;
background: rgb(255 255 255 / .16);
color: inherit;
font: inherit;
font-weight: 600;
}
@media (hover: hover) {
.kik-scribe-notice .kik-scribe-stop:hover {
background: rgb(255 255 255 / .28);
}
}
@keyframes kik-scribe-pulse {
0%, 100% { opacity: 1; }
50% { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
.kik-scribe-notice .kik-scribe-dot {
animation: none;
}
}
.kik-photo-upload-button::before {
content: var(--glyph-upload);
font-family: fontello;
font-weight: normal;
}
.kik-camera-overlay {
--kik-camera-shutter-size: 68px;
--kik-camera-bar-inset: 28px;
position: fixed;
inset: 0;
z-index: 10000;
background: #000;
display: flex;
align-items: center;
justify-content: center;
}
.kik-camera-overlay .kik-camera-preview {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
.kik-camera-overlay .kik-camera-bar {
position: absolute;
inset-inline: 0;
bottom: var(--kik-camera-bar-inset);
display: flex;
align-items: center;
justify-content: center;
gap: 1.5rem;
padding-inline: 1.5rem;
}
.kik-camera-overlay .kik-camera-shutter {
width: var(--kik-camera-shutter-size);
height: var(--kik-camera-shutter-size);
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.9);
background: rgba(255, 255, 255, 0.25);
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35);
transition: background 0.12s ease-in-out;
}
.kik-camera-overlay .kik-camera-shutter:active {
background: rgba(255, 255, 255, 0.75);
}
@media (hover: hover) {
.kik-camera-overlay .kik-camera-shutter:hover {
background: rgba(255, 255, 255, 0.45);
}
}
.kik-camera-overlay .kik-camera-cancel,
.kik-camera-overlay .kik-camera-phone,
.kik-camera-overlay .kik-camera-flip {
color: #fff;
background: rgba(255, 255, 255, 0.14);
border: 0;
border-radius: 999px;
padding: 0.5rem 1rem;
font-size: 0.95rem;
}
@media (hover: hover) {
.kik-camera-overlay .kik-camera-cancel:hover,
.kik-camera-overlay .kik-camera-phone:hover,
.kik-camera-overlay .kik-camera-flip:hover {
background: rgba(255, 255, 255, 0.28);
}
}
.kik-camera-overlay .kik-camera-flip {
width: 2.75rem;
font-size: 0;
}
.kik-camera-overlay .kik-camera-flip::before {
content: "\21bb";
font-size: 1.4rem;
line-height: 1;
}
.kik-camera-overlay .kik-camera-phone {
position: fixed;
top: max(0.75rem, env(safe-area-inset-top));
inset-inline-end: 0.75rem;
max-width: 45vw;
padding: 0.35rem 0.7rem;
font-size: 0.8rem;
white-space: normal;
text-align: center;
line-height: 1.2;
}
.kik-camera-overlay .kik-camera-phone[hidden] {
display: none;
}
.kik-camera-overlay .kik-camera-flip[hidden] {
display: block;
visibility: hidden;
}
.kik-camera-tile-capture {
display: none;
}
@media (pointer: coarse) {
.kik-camera-tile-capture {
display: block;
position: absolute;
inset: 0;
z-index: 2;
background: transparent;
border-radius: inherit;
margin: 0;
}
}
@media (pointer: coarse) {
.kik-camera-tile-shutter {
display: block;
width: 100%;
height: 100%;
}
}
@media (pointer: coarse) {
.tile.app .pat-context-menu,
.tile.app .context-menu {
position: relative;
z-index: 3;
}
}
#kik-camera-launch-form.pat-assistive-element {
top: 0;
left: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
}
.kik-drop-zone {
--kik-drop-zone-inset: 0.75rem;
position: fixed;
z-index: 900;
box-sizing: border-box;
pointer-events: none;
padding: var(--kik-drop-zone-inset);
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.kik-drop-zone::before {
content: "";
position: absolute;
inset: var(--kik-drop-zone-inset);
border: 5px dashed black;
border-radius: 1.25rem;
background: rgba(0, 0, 0, 0.2);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.kik-drop-zone .kik-drop-zone-message {
position: relative;
margin: 0;
padding: 0.75rem 1.25rem;
max-width: 24em;
font-size: 1.35rem;
font-weight: 600;
line-height: 1.3;
color: white;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.kik-drop-zone[hidden] {
display: none;
}
.document-content:has(.events-calendar-pane) {
padding-top: var(--sidebar-margin-top);
padding-left: var(--sidebar-margin-top);
padding-right: var(--sidebar-margin-top);
padding-bottom: var(--sidebar-margin-top);
display: flex;
flex-direction: column;
}
.events-calendar-pane {
position: relative;
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
opacity: 0;
transition: opacity 0.35s ease;
animation: kik-events-cal-reveal 0.01s linear 4s forwards;
}
@media (prefers-reduced-motion: reduce) {
.events-calendar-pane {
transition: none;
}
}
.events-calendar-pane.kik-fc-ready {
opacity: 1;
animation: none;
}
.kik-events-calendar {
--fc-page-bg-color: var(--colour-canvas, #fff);
--fc-border-color: var(--kik-fc-border, var(--colour-separation-lines, #ddd)) !important;
--fc-neutral-bg-color: var(--pat-surface-background-colour, rgba(208, 208, 208, 0.3));
--fc-neutral-text-color: var(--colour-byline, gray);
--fc-list-event-hover-bg-color: var(--pat-surface-background-colour-hover, #f5f5f5);
--fc-today-bg-color: var(--kik-fc-today-bg, rgba(255, 220, 40, 0.15));
flex: 1 1 auto;
min-height: 0;
padding: 0;
position: relative;
}
.kik-events-calendar .kik-fc-toolbar-button:not(.kik-fc-grouped)::before {
line-height: var(--button-height);
}
.kik-fc-nav-chunk {
display: flex;
align-items: center;
gap: var(--pat-toolbar-section-gap, 0.5rem);
}
@container document (width < 480px) {
.kik-events-calendar .kik-fc-toolbar {
column-gap: 4px;
}
}
@container document (width < 480px) {
.kik-events-calendar .kik-fc-toolbar > * {
gap: 4px;
}
}
@container document (width < 650px) {
.kik-events-calendar .kik-fc-toolbar > .kik-fc-nav-chunk:not(.kik-fc-title-chunk) {
position: absolute;
inset-inline: var(--small-screen-padding);
bottom: var(--small-screen-padding);
z-index: 3;
padding: 0;
min-height: 0;
width: auto;
max-width: none;
justify-content: space-between;
align-items: center;
height: var(--pat-toolbar-button-height);
background: none;
box-shadow: none;
border-radius: 0;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 0;
}
}
@container document (width < 650px) {
.kik-events-calendar .kik-fc-nav-chunk > *:has(.kik-fc-view-month) {
order: -1;
}
}
@container document (width < 650px) {
.kik-events-calendar .kik-fc-toolbar.kik-fc-toolbar,
body[data-platform-mode="hub"] .kik-events-calendar .kik-fc-toolbar.kik-fc-toolbar {
flex-wrap: nowrap;
padding-block: 0;
min-height: calc(var(--pat-toolbar-button-height)
+ 2 * var(--small-screen-padding));
align-items: center;
}
}
@container document (width < 650px) {
.kik-events-calendar .kik-fc-toolbar > *:not(.kik-fc-title-chunk):not(.kik-fc-nav-chunk) {
padding-top: 0;
min-height: var(--pat-toolbar-button-height);
}
}
@container document (width < 650px) {
.kik-events-calendar .kik-fc-toolbar > .kik-fc-title-chunk {
order: 0;
flex: 0 1 auto;
justify-content: flex-start;
transform: none;
margin-bottom: 0;
min-height: var(--pat-toolbar-button-height);
padding-top: 0;
display: flex;
align-items: center;
}
}
@container document (width < 650px) {
.kik-events-calendar:has(.kik-fc-nav-chunk) {
--kik-fc-bottom-strip: calc(var(--pat-toolbar-button-height)
+ 2 * var(--small-screen-padding));
padding-bottom: var(--kik-fc-bottom-strip);
}
}
@container document (width < 650px) {
.kik-events-calendar .kik-fc-toolbar {
display: flex;
align-items: center;
align-content: start;
justify-content: space-between;
row-gap: calc((var(--kik-win-toolbar-height, 85px) - var(--pat-toolbar-button-height)) / 4);
min-height: 0;
}
}
@container document (width < 650px) {
.kik-events-calendar .kik-fc-toolbar > *:not(.kik-fc-title-chunk) {
min-height: var(--pat-toolbar-button-height);
padding-top: calc((var(--kik-win-toolbar-height, 85px) - var(--pat-toolbar-button-height)) / 2);
display: flex;
align-items: center;
}
}
@container document (width < 650px) {
.kik-events-calendar .kik-fc-title-chunk {
order: 1;
flex: 1 0 100%;
display: flex;
justify-content: center;
transform: translateX(calc((var(--kik-fc-bar-gutter-end, 0px) - var(--kik-fc-bar-gutter-start, 0px)) / 2));
margin-bottom: calc((var(--kik-win-toolbar-height, 85px) - var(--pat-toolbar-button-height)) / 4);
}
}
.document-body > .document-content:has(.events-calendar-pane) {
padding-top: 0;
}
.document-body:has(.events-calendar-pane) {
--document-content-no-toolbar-seat: 0px;
}
.kik-events-calendar .kik-fc-toolbar {
min-height: var(--kik-win-toolbar-height, 85px);
align-items: center;
margin: 0;
}
.kik-events-calendar .kik-fc-toolbar.kik-fc-toolbar,
body[data-platform-mode="hub"] .kik-events-calendar .kik-fc-toolbar.kik-fc-toolbar {
flex-wrap: nowrap;
}
.kik-events-calendar .kik-fc-toolbar > * {
min-width: 0;
}
.kik-events-calendar .kik-fc-toolbar > *:not(.kik-fc-title-chunk) {
flex-shrink: 0;
}
.kik-events-calendar .kik-fc-toolbar > .kik-fc-title-chunk {
flex-shrink: 1;
}
body[data-platform-mode="hub"] .kik-events-calendar .kik-fc-toolbar {
padding: 15px 0;
min-height: 0;
}
@media (width > 768px) {
body[data-platform-mode="hub"] .application-body.sidebar-left-closed .kik-events-calendar .kik-fc-toolbar {
padding: 35px 10px 35px 55px;
}
}
@media (width <= 768px) {
body[data-platform-mode="hub"] .application-body.focus-document .kik-events-calendar .kik-fc-toolbar {
padding-inline-start: var(--kik-win-slot, calc(var(--pat-toolbar-button-height) + 10px));
}
}
.application-body:has(.events-calendar-pane) aside.sidebar .icon.create,
.application-body:has(.events-calendar-pane) aside.sidebar .kik-events-invites-trigger {
display: none;
}
.kik-fc-toolbar .kik-events-invites-trigger {
display: inline-block;
position: relative;
width: var(--pat-toolbar-button-height);
height: var(--pat-toolbar-button-height);
min-width: var(--pat-toolbar-button-height);
line-height: var(--pat-toolbar-button-height);
text-align: center;
vertical-align: middle;
border-radius: var(--button-border-radius);
background-color: var(--pat-toolbar-icon-frost-background);
color: var(--pat-toolbar-icon-text-colour);
box-shadow: var(--pat-toolbar-button-box-shadow);
-webkit-backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
text-decoration: none;
cursor: default;
font-size: 0;
}
.kik-fc-toolbar .kik-events-invites-trigger .counter {
font-size: 12px;
}
.kik-fc-toolbar .kik-events-invites-trigger > svg {
vertical-align: middle;
}
@media (hover: hover) {
.kik-fc-toolbar .kik-events-invites-trigger:not(.tooltip-active-click):hover {
color: var(--pat-toolbar-icon-text-colour-hover);
background-color: var(--pat-toolbar-icon-background-colour-hover);
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter-hover);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter-hover);
text-decoration: none;
}
}
@media (hover: hover) {
.kik-fc-toolbar .kik-events-invites-trigger:not(.tooltip-active-click):hover > svg {
color: var(--pat-toolbar-icon-text-colour-hover);
}
}
.kik-fc-toolbar .kik-events-invites-trigger.tooltip-active-click {
background-color: var(--colour-accent);
color: var(--colour-accent-text, white);
}
.kik-fc-toolbar .kik-events-invites-trigger.tooltip-active-click > svg {
color: var(--colour-accent-text, white);
}
.kik-fc-toolbar .icon.create {
display: inline-block;
position: relative;
width: var(--pat-toolbar-button-height);
height: var(--pat-toolbar-button-height);
min-width: var(--pat-toolbar-button-height);
text-indent: -1000em;
font-family: fontello;
font-size: var(--pat-toolbar-font-size);
line-height: var(--pat-toolbar-button-line-height);
border-radius: var(--button-border-radius);
background-color: var(--pat-toolbar-icon-frost-background);
color: var(--pat-toolbar-icon-text-colour);
box-shadow: var(--pat-toolbar-button-box-shadow);
-webkit-backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
cursor: default;
}
.kik-fc-toolbar .icon.create:before {
content: var(--glyph-plus);
font-family: fontello;
font-size: 1.3em;
text-indent: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: var(--pat-toolbar-button-line-height);
text-align: center;
border-radius: var(--button-border-radius);
box-sizing: border-box;
}
@media (hover: hover) {
.kik-fc-toolbar .icon.create:hover {
color: var(--pat-toolbar-icon-text-colour-hover);
background-color: var(--pat-toolbar-icon-background-colour-hover);
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter-hover);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter-hover);
text-decoration: none;
}
}
.kik-events-calendar .kik-fc-title-chunk {
pointer-events: none;
}
.kik-events-calendar .kik-fc-toolbar select,
.kik-events-calendar .kik-fc-view select {
margin-right: 0;
}
.kik-fc-event {
position: relative;
}
.kik-events-calendar .kik-fc-event {
cursor: default !important;
}
.kik-fc-event.kik-fc-event-selected {
outline: var(--pat-selection-outline, 2px solid var(--body-font-colour));
outline-offset: var(--pat-selection-outline-offset, 1px);
z-index: 3;
}
.kik-fc-event > .kik-fc-event-menu {
position: absolute;
top: 0;
inset-inline-end: 0;
z-index: 2;
box-sizing: border-box;
width: 1rem;
height: 1rem;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: inherit;
background-color: var(--pat-surface-background-colour, #fff);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
text-decoration: none;
cursor: default;
opacity: 0;
pointer-events: none;
transition: opacity 0.12s ease;
}
.kik-fc-event > .kik-fc-event-menu > svg {
width: 0.75rem;
height: 0.75rem;
}
@media (prefers-reduced-motion: reduce) {
.kik-fc-event > .kik-fc-event-menu {
transition: none;
}
}
@media (hover: hover) {
.kik-fc-event:hover > .kik-fc-event-menu,
.kik-fc-event.kik-fc-event-selected > .kik-fc-event-menu,
.kik-fc-event > .kik-fc-event-menu:focus-visible,
.kik-fc-event > .kik-fc-event-menu[aria-expanded="true"],
.kik-fc-event > .kik-fc-event-menu.tooltip-active-click {
opacity: 1;
pointer-events: auto;
}
}
.sidebar .sidebar-extras .item a .counter,
.sidebar .sidebar-content .pat-menu-list .counter {
color: color-mix(in srgb, currentColor 75%, transparent);
background-color: rgb(0 0 0 / 0.06);
border: none;
font-weight: normal;
}
.sidebar .sidebar-extras .item a .counter.unread {
color: white;
background-color: red;
border: white 1px solid;
font-weight: normal;
}
.sidebar .sidebar-content .pat-menu-list > li > a:has(.counter) {
position: relative;
padding-inline-end: 3em;
}
.sidebar .sidebar-content .pat-menu-list .counter {
position: absolute;
inset-inline-end: 4px;
top: 50%;
transform: translateY(-50%);
margin: 0;
}
.sidebar .sidebar-extras .item.current .counter,
.sidebar .sidebar-content .pat-menu-list a.current .counter {
color: color-mix(in srgb, white 92%, transparent);
background-color: rgb(255 255 255 / 0.18);
}
aside.sidebar {
--default-tail-white: 12px;
}
.application-body {
--sidebar-backdrop-filter: none;
}
.application-body.application-people,
.application-body.application-images,
.application-body.application-maps {
--sidebar-backdrop-filter: var(--pat-surface-backdrop-filter);
}
aside.sidebar .pat-link-list,
aside.sidebar .pat-table {
--pat-surface-backdrop-filter: none;
}
aside.sidebar.left {
--default-box-shadow: var(--kik-sidebar-keyline, 0 0 0 1px rgba(0, 0, 0, 0.1));
--pat-well-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
body[data-platform-mode="cloud"] aside.sidebar.left {
--sidebar-background-colour: var(--kik-sidebar-flat-colour, var(--pat-surface-background-colour));
}
.application-body.application-people aside.sidebar.left,
.application-body.application-images aside.sidebar.left,
.application-body.application-maps aside.sidebar.left {
--sidebar-background-colour: var(--pat-surface-background-colour);
}
aside.sidebar.left .pat-toolbar .toggle-sidebar-size {
display: none;
}
@container main style(--screen-small: true) {
aside.sidebar.left .pat-toolbar .toggle-sidebar-size {
display: none !important;
}
}
body[data-platform-mode="hub"] .application-body.state-on {
--kik-hub-sidebar-bar-gap: 10px;
--kik-hub-sidebar-bar-padding: 10px;
}
body[data-platform-mode="hub"] .application-body.state-on aside.sidebar.left {
--pat-toolbar-top-distance: 0.0001px;
}
body[data-platform-mode="hub"] .application-body.state-on aside.sidebar.left > :is(#sidebar-content, .sidebar-content):is(:has(> .pat-toolbar), :has(> form > .pat-toolbar)) {
padding-top: 0;
}
body[data-platform-mode="hub"] .application-body.state-on aside.sidebar.left > :is(#sidebar-content, .sidebar-content):not(:has(> .pat-toolbar)):not(:has(> form > .pat-toolbar)) {
padding-top: var(--sidebar-padding-right);
}
body[data-platform-mode="hub"] .application-body.state-on aside.sidebar.left :is(#sidebar-content, .sidebar-content) > .pat-toolbar:not(.well-title-group *),
body[data-platform-mode="hub"] .application-body.state-on aside.sidebar.left :is(#sidebar-content, .sidebar-content) > form > .pat-toolbar:not(.well-title-group *) {
--kik-sidebar-bar-inset: var(--kik-win-inset);
height: auto;
padding-top: var(--kik-sidebar-bar-inset);
padding-bottom: var(--kik-sidebar-bar-inset);
top: 0;
}
@media (width > 768px) {
body[data-platform-mode="hub"] .application-body.state-on aside.sidebar.left :is(#sidebar-content, .sidebar-content) > .pat-toolbar:not(.well-title-group *),
body[data-platform-mode="hub"] .application-body.state-on aside.sidebar.left :is(#sidebar-content, .sidebar-content) > form > .pat-toolbar:not(.well-title-group *) {
--kik-sidebar-bar-inset: var(--kik-hub-sidebar-bar-padding, 10px);
margin-top: var(--kik-hub-sidebar-bar-gap, 10px);
margin-left: 0;
margin-right: 0;
top: var(--kik-hub-sidebar-bar-gap, 10px);
border-radius: var(--pat-toolbar-backdrop-border-radius, 40px);
--kik-sidebar-bar-blur-reach: var(--kik-hub-sidebar-bar-gap, 10px);
}
}
@media (width > 768px) {
body[data-platform-mode="hub"] .application-body.state-on:not(#application-body-reminders, #application-body-team-spaces, #application-body-code) aside.sidebar.left :is(#sidebar-content, .sidebar-content) > .pat-toolbar:not(.well-title-group *):not(:has(:is(a, button, input:not([type="hidden"]), select, textarea, label, .pat-context-menu):not(.toggle-sidebar-size, .toggle-sidebar-size *))),
body[data-platform-mode="hub"] .application-body.state-on:not(#application-body-reminders, #application-body-team-spaces, #application-body-code) aside.sidebar.left :is(#sidebar-content, .sidebar-content) > form > .pat-toolbar:not(.well-title-group *):not(:has(:is(a, button, input:not([type="hidden"]), select, textarea, label, .pat-context-menu):not(.toggle-sidebar-size, .toggle-sidebar-size *))) {
visibility: hidden;
height: 0;
min-height: 0;
padding: 0;
top: 0;
margin: var(--sidebar-padding-right, 20px) 0 0;
overflow: hidden;
}
}
@media (width > 768px) {
body[data-platform-mode="hub"] .application-body.state-on:not(#application-body-reminders, #application-body-team-spaces, #application-body-code) aside.sidebar.left :is(#sidebar-content, .sidebar-content) > .pat-toolbar:not(.well-title-group *):not(:has(:is(a, button, input:not([type="hidden"]), select, textarea, label, .pat-context-menu):not(.toggle-sidebar-size, .toggle-sidebar-size *)))::after,
body[data-platform-mode="hub"] .application-body.state-on:not(#application-body-reminders, #application-body-team-spaces, #application-body-code) aside.sidebar.left :is(#sidebar-content, .sidebar-content) > form > .pat-toolbar:not(.well-title-group *):not(:has(:is(a, button, input:not([type="hidden"]), select, textarea, label, .pat-context-menu):not(.toggle-sidebar-size, .toggle-sidebar-size *)))::after {
content: none;
}
}
@media (width > 768px) {
body[data-platform-mode="hub"] .application-body.state-on.sidebar-large aside.sidebar.left :is(#sidebar-content, .sidebar-content) > .pat-toolbar:not(.well-title-group *),
body[data-platform-mode="hub"] .application-body.state-on.sidebar-large aside.sidebar.left :is(#sidebar-content, .sidebar-content) > form > .pat-toolbar:not(.well-title-group *) {
margin-left: calc(var(--gns-left) + var(--gns-width-collapsed) + var(--sidebar-padding-left, 20px) - var(--sidebar-margin-left, 15px) - var(--sidebar-padding-left-large, 50px));
margin-right: calc(var(--sidebar-padding-right, 20px) - var(--sidebar-padding-right-large, 50px));
width: auto;
}
}
@media (width > 768px) {
body[data-platform-mode="hub"] #app-space .application-body.state-on.sidebar-large aside.sidebar.left :is(#sidebar-content, .sidebar-content) > .pat-toolbar:not(.well-title-group *),
body[data-platform-mode="hub"] #app-space .application-body.state-on.sidebar-large aside.sidebar.left :is(#sidebar-content, .sidebar-content) > form > .pat-toolbar:not(.well-title-group *) {
width: calc(100cqw
- (var(--gns-left) + var(--gns-width-collapsed) + var(--sidebar-padding-left, 20px) - var(--sidebar-margin-left, 15px) - var(--sidebar-padding-left-large, 50px))
- (var(--sidebar-padding-right, 20px) - var(--sidebar-padding-right-large, 50px)));
}
}
#app-space .application-body.state-on aside.sidebar.left {
contain: layout;
}
#app-space .application-body.state-on aside.sidebar.left :is(#sidebar-content, .sidebar-content) > .pat-toolbar:not(.well-title-group *),
#app-space .application-body.state-on aside.sidebar.left :is(#sidebar-content, .sidebar-content) > form > .pat-toolbar:not(.well-title-group *) {
position: fixed;
left: auto;
right: auto;
margin-top: 0;
box-sizing: border-box;
width: 100cqw;
z-index: var(--pat-toolbar-z-index, 11);
}
#app-space .application-body.state-on aside.sidebar.left > :is(#sidebar-content, .sidebar-content):has(> .pat-toolbar, > form > .pat-toolbar) {
padding-top: var(--kik-sidebar-bar-h, calc(var(--pat-toolbar-button-height) + 2 * var(--pat-toolbar-padding)));
}
@media (max-width: 680px) {
#app-space .application-body.state-on aside.sidebar.left :is(#sidebar-content, .sidebar-content) > .pat-toolbar:not(.well-title-group *),
#app-space .application-body.state-on aside.sidebar.left :is(#sidebar-content, .sidebar-content) > form > .pat-toolbar:not(.well-title-group *) {
width: calc(100cqw + 2 * var(--small-screen-padding));
}
}
#app-space .application-body.state-on:is(.application-people, .application-images, .application-maps) aside.sidebar.left > :is(#sidebar-content, .sidebar-content) {
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
#app-space .application-body.state-on:is(.application-people, .application-images, .application-maps) aside.sidebar.left::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
pointer-events: none;
-webkit-backdrop-filter: var(--sidebar-backdrop-filter, var(--pat-surface-backdrop-filter));
backdrop-filter: var(--sidebar-backdrop-filter, var(--pat-surface-backdrop-filter));
}
aside.sidebar.left :is(#sidebar-content, .sidebar-content) > .pat-toolbar:not(.well-title-group *)::before,
aside.sidebar.left :is(#sidebar-content, .sidebar-content) > form > .pat-toolbar:not(.well-title-group *)::before {
content: none;
}
aside.sidebar.left :is(#sidebar-content, .sidebar-content) > .pat-toolbar:not(.well-title-group *)::after,
aside.sidebar.left :is(#sidebar-content, .sidebar-content) > form > .pat-toolbar:not(.well-title-group *)::after {
content: "";
position: absolute;
top: calc(-1 * var(--kik-sidebar-bar-blur-reach, 0px));
bottom: 0;
inset-inline-start: calc(-1 * var(--kik-sidebar-bar-bleed-start, 0px));
inset-inline-end: calc(-1 * var(--kik-sidebar-bar-bleed-end, 0px));
border-start-start-radius: var(--kik-sidebar-bar-radius, 0px);
border-start-end-radius: var(--kik-sidebar-bar-radius, 0px);
z-index: -1;
pointer-events: none;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
-webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent);
mask-image: linear-gradient(to bottom, #000 50%, transparent);
}
aside.sidebar.left:is(.pat-scroll-box:not(.scroll-position-top), .kik-scrolled) :is(#sidebar-content, .sidebar-content) > .pat-toolbar:not(.well-title-group *)::after,
aside.sidebar.left:is(.pat-scroll-box:not(.scroll-position-top), .kik-scrolled) :is(#sidebar-content, .sidebar-content) > form > .pat-toolbar:not(.well-title-group *)::after,
aside.sidebar.left :is(#sidebar-content, .sidebar-content):is(.pat-scroll-box:not(.scroll-position-top), .kik-scrolled) > .pat-toolbar:not(.well-title-group *)::after,
aside.sidebar.left :is(#sidebar-content, .sidebar-content):is(.pat-scroll-box:not(.scroll-position-top), .kik-scrolled) > form > .pat-toolbar:not(.well-title-group *)::after {
bottom: -24px;
}
.sidebar .sidebar-extras .item a {
font-size: min(var(--pat-well-well-header-font-size), 20px);
font-weight: var(--pat-well-well-header-font-weight);
font-family: var(--pat-well-well-header-font-family, var(--base-font-family));
line-height: var(--pat-well-header-line-height);
}
@container main (width > 768px) {
.sidebar-left-closed.sidebar-large aside.sidebar.left {
--sidebar-width: var(--sidebar-width-normal, 475px);
--sidebar-margin-left: var(--sidebar-margin-left-closed);
}
}
.sidebar-normal aside.sidebar.left .sidebar-content .well-title-group .pat-toolbar,
aside.sidebar .well-title-group .pat-toolbar {
zoom: 1;
--pat-toolbar-button-height: 20px;
--pat-toolbar-button-line-height: 20px;
}
aside.sidebar .well-title-group .pat-toolbar :is(.icon, .pat-button, button) {
box-sizing: border-box;
position: relative;
width: 20px;
min-width: 20px;
height: 20px;
padding: 0;
font-size: 13px;
line-height: 20px;
}
aside.sidebar .well-title-group .pat-toolbar :is(.icon, .pat-button, button)::after {
content: '';
position: absolute;
inset: -8px;
}
aside.sidebar .well-title-group .pat-toolbar .pat-button {
overflow: visible;
}
aside.sidebar .well-title-group .pat-toolbar .icon:has(> svg) > svg {
--kik-toolbar-icon-size: calc(0.55 * var(--pat-toolbar-button-height));
--kik-toolbar-icon-stroke-width: 1;
--kik-icon-vector-effect: non-scaling-stroke;
}
.application-body {
--kik-sidebar-drawer: true;
}
.application-body.kik-sidebar-first {
--kik-sidebar-drawer: false;
}
@container main (width <= 768px) {
@container screen style(--kik-sidebar-drawer: true) {
.application-body aside.sidebar.left {
--kik-drawer-width: 85;
right: auto;
width: calc(var(--kik-drawer-width) * 1%);
max-height: none;
z-index: 3;
transform: none;
visibility: visible;
transition:
transform var(--base-animation-duration, 0.3s) ease,
visibility 0s linear 0s;
}
}
}
@container main (width <= 768px) {
@container screen style(--kik-sidebar-drawer: true) {
.application-body.focus-document aside.sidebar.left {
transform: translateX(-100%);
visibility: hidden;
transition:
transform var(--base-animation-duration, 0.3s) ease,
visibility 0s linear var(--base-animation-duration, 0.3s);
}
}
}
@container main (width <= 768px) {
@container screen style(--kik-sidebar-drawer: true) {
body[dir="rtl"] .application-body aside.sidebar.left {
left: auto;
right: 0;
}
}
}
@container main (width <= 768px) {
@container screen style(--kik-sidebar-drawer: true) {
body[dir="rtl"] .application-body.focus-document aside.sidebar.left {
transform: translateX(100%);
}
}
}
@container main (width <= 768px) {
@container screen style(--kik-sidebar-drawer: true) {
@media (prefers-reduced-motion: reduce) {
.application-body aside.sidebar.left,
.application-body.focus-document aside.sidebar.left {
transition: none;
}
}
}
}
@container main (width <= 768px) {
@container screen style(--kik-sidebar-drawer: true) {
.application-body.focus-sidebar .document-body {
filter: blur(4px);
}
}
}
.application-body.state-on.sidebar-large aside.sidebar.left .pat-toolbar:not(.well-title-group *) .toolbar-section.quick-functions {
padding-inline-end: var(--kik-win-trailing-slot, 0px);
}
.application-body.sidebar-large .sidebar .sidebar-extras .item a.current {
background-color: var(--sidebar-extras-background-colour);
color: var(--sidebar-extras-text-colour);
}
@media (hover: hover) {
.application-body.sidebar-large .sidebar .sidebar-extras .item a.current:hover {
background-color: var(--sidebar-extras-background-colour-hover);
color: var(--sidebar-extras-text-colour-hover);
filter: var(--sidebar-extras-filter-hover);
-webkit-backdrop-filter: var(--sidebar-extras-backdrop-filter-hover);
backdrop-filter: var(--sidebar-extras-backdrop-filter-hover);
box-shadow: var(--sidebar-extras-box-shadow-hover);
}
}
@container main (width > 680px) {
.application-body.sidebar-large aside.sidebar .well-title-group .pat-toolbar {
--pat-toolbar-button-height: 28px;
--pat-toolbar-button-line-height: 28px;
}
}
@container main (width > 680px) {
.application-body.sidebar-large aside.sidebar .well-title-group .pat-toolbar :is(.icon, .pat-button, button) {
width: 28px;
min-width: 28px;
height: 28px;
font-size: 17px;
line-height: 28px;
}
}
aside.sidebar .pat-well {
--kik-sidebar-row-bleed: 7px;
--kik-sidebar-row-padding-inline: 9px;
--kik-sidebar-row-padding-block: 4px;
--kik-sidebar-row-text-seat: 1.5em;
}
aside.sidebar .pat-well .pat-menu-list > li {
margin: 0 calc(-1 * var(--kik-sidebar-row-bleed));
position: relative;
}
aside.sidebar .pat-well .pat-menu-list > li > a,
aside.sidebar .pat-well .pat-menu-list > li > label,
aside.sidebar .pat-well .pat-menu-list > li > button,
aside.sidebar .pat-well .pat-menu-list > li > form > label,
aside.sidebar .pat-well .pat-menu-list > li > form > button,
aside.sidebar .pat-well .pat-menu-list > li > form > fieldset > label,
aside.sidebar .pat-well .pat-menu-list > li > fieldset.pat-checklist label {
padding: var(--kik-sidebar-row-padding-block) var(--kik-sidebar-row-padding-inline);
grid-template-columns: var(--kik-sidebar-row-text-seat) minmax(0, 1fr);
}
aside.sidebar .pat-well .pat-menu-list > li > a > svg.icon,
aside.sidebar .pat-well .pat-menu-list > li > a > svg.kik-icon,
aside.sidebar .pat-well .pat-menu-list > li > label > svg.icon,
aside.sidebar .pat-well .pat-menu-list > li > label > svg.kik-icon,
aside.sidebar .pat-well .pat-menu-list > li > button > svg.icon,
aside.sidebar .pat-well .pat-menu-list > li > button > svg.kik-icon,
aside.sidebar .pat-well .pat-menu-list > li > form > label > svg.icon,
aside.sidebar .pat-well .pat-menu-list > li > form > label > svg.kik-icon,
aside.sidebar .pat-well .pat-menu-list > li > form > button > svg.icon,
aside.sidebar .pat-well .pat-menu-list > li > form > button > svg.kik-icon,
aside.sidebar .pat-well .pat-menu-list > li > form > fieldset > label > svg.icon,
aside.sidebar .pat-well .pat-menu-list > li > form > fieldset > label > svg.kik-icon,
aside.sidebar .pat-well .pat-menu-list > li > fieldset.pat-checklist label > svg.icon,
aside.sidebar .pat-well .pat-menu-list > li > fieldset.pat-checklist label > svg.kik-icon {
justify-self: start;
}
aside.sidebar .pat-well .pat-menu-list > li:not(:has(.current)):has(> a.pat-context-menu[aria-expanded="true"]),
aside.sidebar .pat-well .pat-menu-list > li:not(:has(.current)):has(> a.pat-context-menu.tooltip-active-click) {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--body-font-colour, #333) 10%, transparent);
}
@media (hover: hover) {
aside.sidebar .pat-well .pat-menu-list > li:not(:has(.current)):hover {
box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--body-font-colour, #333) 10%, transparent);
}
}
aside.sidebar .pat-well:not(.pat-collapsible):has(> .panel-content) {
padding: 0;
}
aside.sidebar .pat-well:not(.pat-collapsible):has(> .panel-content):not(:has(> .well-title-group)) > .panel-content {
padding-top: var(--pat-form-panel-padding);
}
aside.sidebar .pat-well:not(.pat-collapsible):has(> .panel-content) > .well-title-group {
padding-left: var(--pat-form-panel-padding);
}
aside.sidebar .pat-well:not(.pat-collapsible):has(> .panel-content) > .panel-content {
padding: 0 var(--pat-form-panel-padding) var(--pat-form-panel-padding);
}
.application-body.sidebar-normal aside.sidebar {
--pat-button-cluster-compact: true;
}
@container screen style(--screen-small: true) {
aside.sidebar {
--pat-button-cluster-compact: true;
}
}
.application-body:not(.sidebar-large) aside.sidebar .pat-table tbody
tr:has(th.item-name a.icon-folder) > td.functions {
opacity: 1;
}
.application-body:not(.sidebar-large) aside.sidebar .pat-table tbody
tr:has(th.item-name a.icon-folder):not(:hover):not(:focus-within)
> td.functions:not(:has(.tooltip-active-click)):not(:has([aria-expanded="true"]))
> *:not(template) {
opacity: 0;
}
.application-body:not(.sidebar-large) aside.sidebar .pat-table tbody
tr:has(th.item-name a.icon-folder) > td.functions::before {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: var(--kik-svg-angle-right) center / contain no-repeat;
mask: var(--kik-svg-angle-right) center / contain no-repeat;
opacity: 0.45;
pointer-events: none;
transition: opacity var(--base-animation-duration, 0.3s) ease;
}
body[dir="rtl"] .application-body:not(.sidebar-large) aside.sidebar .pat-table tbody
tr:has(th.item-name a.icon-folder) > td.functions::before {
-webkit-mask-image: var(--kik-svg-angle-left);
mask-image: var(--kik-svg-angle-left);
}
@media (hover: hover) {
.application-body:not(.sidebar-large) aside.sidebar .pat-table tbody
tr:has(th.item-name a.icon-folder):has(td.functions .pat-context-menu):hover
> td.functions::before {
opacity: 0;
}
}
.application-body:not(.sidebar-large) aside.sidebar .pat-table tbody
tr:has(th.item-name a.icon-folder):has(td.functions .pat-context-menu):focus-within
> td.functions::before {
opacity: 0;
}
@container screen style(--screen-small: false) {
body[data-global-nav="compact"] #tabs-bar {
display: flex;
align-items: center;
}
}
@container screen style(--screen-small: false) {
body[data-global-nav="compact"] #tabs-bar .tab {
order: 2;
}
}
@container screen style(--screen-small: false) {
body[data-global-nav="compact"] #tabs-bar .tab.pinned {
order: 1;
}
}
@container screen style(--screen-small: false) {
body[data-global-nav="compact"] #tabs-bar .tab.pinned {
display: inline-flex;
}
}
@container screen style(--screen-small: false) {
body[data-global-nav="compact"] #tabs-bar .tab.pinned:not(.current) .title-fragment {
font-size: 0;
}
}
@container screen style(--screen-small: false) {
body[data-global-nav="compact"] #tabs-bar .tab.pinned:not(.current) .title-fragment > * {
font-size: 1rem;
}
}
@container screen style(--screen-small: false) {
body[data-global-nav="compact"] #tabs-bar .tab.pinned:not(.current) .object-name {
display: none;
}
}
.kik-apps-grid {
--kik-apps-tile: 90px;
--kik-apps-gap: 0px;
--kik-apps-margin: 0;
--kik-app-icon-box: 60%;
--kik-app-icon-box-ratio: 0.6;
--app-tile-padding: 0px;
--kik-apps-tile-extras: none;
--kik-apps-more-inset: 4%;
display: grid;
grid-template-columns: repeat(
auto-fill,
minmax(min(calc(var(--kik-apps-tile) / var(--kik-squeeze, 1)), 100%), 1fr)
);
grid-auto-rows: auto;
gap: var(--kik-apps-gap);
justify-content: stretch;
align-content: start;
flex: 1 1 auto;
width: 100%;
min-width: 0;
box-sizing: border-box;
margin: var(--kik-apps-margin);
padding: 0 0 calc(0.25 * var(--kik-apps-tile));
}
.pat-toolbar + .kik-apps-grid {
margin-top: 0;
}
@container screen style(--screen-small: true) {
.kik-apps-grid {
grid-template-columns: repeat(
var(--kik-apps-cols-small, 4),
var(--kik-apps-track-small, minmax(0, 1fr))
);
}
}
@media (max-width: 680px) {
.kik-apps-grid {
--kik-app-icon-box: 70%;
--kik-app-icon-box-ratio: 0.7;
}
}
.kik-apps-grid .tile[hidden] {
display: none !important;
}
body.kik-pac .kik-apps-grid .tile a:active .icon {
filter: brightness(0.85);
transition: none;
}
.kik-apps-grid .tile {
width: 100%;
position: relative;
aspect-ratio: 1;
min-width: 0;
min-height: 0;
container-type: inline-size;
--app-tile-border-coloured: var(--app-colour) 1px solid;
}
.kik-apps-grid .tile > .link {
position: relative;
display: block;
width: 100%;
height: 100%;
box-sizing: border-box;
cursor: default;
}
.kik-apps-grid .tile .icon.app-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--kik-app-icon-box);
height: var(--kik-app-icon-box);
margin: 0;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.kik-apps-grid .tile .icon.app-icon svg {
width: 100%;
height: 100%;
}
@media (hover: hover) {
.kik-apps-grid .tile:hover .icon.app-icon {
transform: translate(-50%, -50%) scale(1.05);
box-shadow: var(--kik-apps-tile-shadow-hover,
var(--default-box-shadow-hover, var(--tile-box-shadow)));
}
}
@media (hover: hover) {
.kik-apps-grid .tile .link:hover {
text-decoration: none;
}
}
.kik-apps-grid .tile .icon,
.kik-apps-grid .tile .tile-title:before {
width: calc(100% - calc(2 * var(--app-tile-padding)));
display: block;
margin: 0 auto 10px;
aspect-ratio: 1 / 1;
color: white;
border-radius: var(--app-icon-border-radius, var(--border-radii));
filter: var(--tile-icon-filter);
box-shadow: var(--tile-box-shadow);
position: relative;
z-index: 1;
overflow: hidden;
border: var(--app-tile-border, var(--app-tile-border-coloured));
box-sizing: border-box;
}
.quaive-portlet .kik-apps-grid .tile .icon,
.quaive-portlet .kik-apps-grid .tile .tile-title:before {
box-shadow: var(--tile-box-shadow-portlet, var(--tile-box-shadow));
}
.kik-apps-grid .tile .icon:has(> svg) {
padding: 12%;
}
.kik-apps-grid .tile span.icon.app-icon {
background-color: var(--kik-apps-grid-tile-background-colour, white);
-webkit-backdrop-filter: var(--pat-surface-backdrop-filter);
backdrop-filter: var(--pat-surface-backdrop-filter);
}
@media (max-width: 680px) {
.kik-apps-grid .tile span.icon.app-icon {
background-color: var(--app-tile-background-colour,
var(--app-tile-icon-colour, var(--app-colour)));
}
}
@media (max-width: 680px) {
.kik-apps-grid .tile span.icon.app-icon svg > * {
stroke: var(--app-icon-contrast-colour, #fff);
fill: color-mix(in srgb, var(--app-icon-contrast-colour, #fff)
var(--app-icon-fill-opacity, 0%), transparent);
}
}
@media (max-width: 680px) {
.kik-apps-grid .tile span.icon.app-icon svg {
opacity: var(--kik-app-glyph-opacity, 0.65);
}
}
@media (max-width: 680px) {
.kik-apps-grid .tile .icon:has(> svg) {
padding: 9%;
}
}
.kik-apps-grid .tile svg {
box-sizing: border-box;
width: 100%;
height: auto;
background-color: var(--kik-apps-glyph-backdrop, transparent);
border-radius: inherit;
aspect-ratio: 1 / 1;
}
.kik-apps-grid .tile svg > * {
stroke: var(--app-tile-icon-colour, var(--app-colour));
stroke-width: var(--app-icon-stroke-width, 1.1px);
vector-effect: var(--app-icon-vector-effect, none);
fill: color-mix(in srgb,
var(--app-tile-icon-colour, var(--app-colour))
var(--app-icon-fill-opacity, 0%), transparent);
}
.kik-apps-grid .tile svg #dots {
fill: transparent;
}
.kik-apps-grid .tile.category-external:after {
background-color: var(--tile-background-colour, color-mix(in srgb, var(--app-colour) 90%, white));
}
.kik-apps-grid .tile .tile-title {
position: absolute;
left: 0;
right: 0;
bottom: -4%;
font-weight: normal;
display: block;
box-sizing: border-box;
max-width: 100%;
padding: 0 2px 2px;
color: var(--body-font-colour);
text-align: center;
font-size: 14cqw;
line-height: 1.15;
overflow-wrap: anywhere;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kik-apps-grid .tile .tile-title:before {
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
}
@media (max-width: 680px) {
.kik-apps-grid .tile .tile-title {
bottom: -7%;
font-weight: 500;
}
}
.kik-apps-grid .tile .more-menu-toggle {
color: transparent;
display: inline-block;
overflow: hidden;
height: var(--pat-button-height);
width: var(--pat-button-height);
padding: 0;
position: absolute;
top: calc((0.3 * var(--border-radii)) + 0px);
left: calc((0.3 * var(--border-radii)) + 0px + var(--app-tile-padding));
opacity: 0;
pointer-events: none;
transition: opacity 0.1s;
transition-delay: 0.5s;
cursor: default;
z-index: 1;
}
@container screen style(--screen-small: true) {
.kik-apps-grid .tile .more-menu-toggle {
display: none;
}
}
.kik-apps-grid .tile .more-menu-toggle.tooltip-active-click {
text-decoration: none;
opacity: 1;
transition: none;
}
.kik-apps-grid .tile .more-menu-toggle.tooltip-active-click:before {
background-color: var(--pat-button-background-colour-hover);
backdrop-filter: var(--pat-surface-backdrop-filter);
}
@media (hover: hover) {
.kik-apps-grid .tile .more-menu-toggle:hover {
text-decoration: none;
opacity: 1;
transition: none;
}
}
@media (hover: hover) {
.kik-apps-grid .tile .more-menu-toggle:hover:before {
background-color: var(--pat-button-background-colour-hover);
backdrop-filter: var(--pat-surface-backdrop-filter);
}
}
.kik-apps-grid .tile .more-menu-toggle.tooltip-active-click:before {
background-color: var(--colour-accent);
color: white;
}
.kik-apps-grid .tile .more-menu-toggle:before {
color: var(--app-tile-icon-colour, var(--app-colour));
border-radius: var(--border-radii);
line-height: var(--pat-button-height);
height: var(--pat-button-height);
width: var(--pat-button-height);
text-align: center;
display: block;
margin: 0;
}
@media (hover: hover) {
.kik-apps-grid .tile:hover .more-menu-toggle {
opacity: 1;
pointer-events: auto;
}
}
.kik-apps-grid .tile .icon-bookmark,
.kik-apps-grid .tile .icon-bookmark-empty {
font-size: 1.6em;
float: right;
top: -2px;
color: rgba(0, 0, 0, 0.2);
overflow: hidden;
text-decoration: none;
position: relative;
display: inline-block;
white-space: nowrap;
line-height: 10px;
border-style: none;
background-image: none;
filter: none !important;
outline: none !important;
width: 1.3em;
cursor: default;
text-overflow: initial !important;
padding: 0;
background-color: transparent;
position: absolute;
box-shadow: none;
opacity: 0.6;
transition: opacity 0.8s;
}
.kik-apps-grid .tile .icon-bookmark:active,
.kik-apps-grid .tile .icon-bookmark-empty:active {
box-shadow: none;
}
@media (hover: hover) {
.kik-apps-grid .tile .icon-bookmark:hover,
.kik-apps-grid .tile .icon-bookmark-empty:hover {
text-decoration: none;
}
}
.kik-apps-grid .tile .icon-bookmark:before,
.kik-apps-grid .tile .icon-bookmark-empty:before {
text-indent: 0;
display: inline-block;
margin: 0 10px 0 0;
}
body[dir=rtl] .kik-apps-grid .tile .icon-bookmark:before,
body[dir=rtl] .kik-apps-grid .tile .icon-bookmark-empty:before {
margin: 0 0 10px 0;
}
.kik-apps-grid .tile .icon-bookmark.active,
.kik-apps-grid .tile .icon-bookmark-empty.active {
opacity: 1;
color: white;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
}
@container screen style(--screen-small: false) {
.kik-apps-grid .tile .icon-bookmark,
.kik-apps-grid .tile .icon-bookmark-empty {
left: 37px;
}
}
@container screen style(--screen-small: true) {
.kik-apps-grid .tile .icon-bookmark,
.kik-apps-grid .tile .icon-bookmark-empty {
left: 23px;
}
}
.application-bookmarks .kik-apps-grid .tile .icon-bookmark,
.application-bookmarks .kik-apps-grid .tile .icon-bookmark-empty {
color: white;
}
.kik-apps-grid .tile .counter {
top: var(--app-icon-border-radius, var(--border-radii));
right: var(--app-icon-border-radius, var(--border-radii));
transform: translate(50%, -50%);
--kik-badge: calc(0.34 * var(--kik-app-icon-box-ratio, 0.6) * 100cqw);
font-size: calc(0.6 * var(--kik-badge));
min-width: var(--kik-badge);
height: var(--kik-badge);
line-height: calc(var(--kik-badge) - 2px);
position: absolute;
background-color: red;
text-align: center;
color: white;
border-radius: calc(var(--kik-badge) / 2);
border: white 1px solid;
padding: 0 calc(0.25 * var(--kik-badge));
box-sizing: border-box;
z-index: 1;
}
.kik-apps-grid .tile .more-menu-toggle,
.kik-apps-grid .tile .icon-bookmark,
.kik-apps-grid .tile .icon-bookmark-empty {
display: var(--kik-apps-tile-extras);
}
.kik-apps-grid .tile > a.more {
position: absolute;
top: calc((100% - var(--kik-app-icon-box)) / 2 + var(--kik-apps-more-inset));
left: calc((100% - var(--kik-app-icon-box)) / 2 + var(--kik-apps-more-inset));
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 26px;
height: 26px;
min-width: 0;
margin: 0;
padding: 0;
border: 0;
border-radius: var(--border-radii);
background-color: var(--pat-toolbar-icon-frost-background);
-webkit-backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.06),
0 1px 2px rgba(0, 0, 0, 0.12);
font-size: 0;
line-height: 1;
text-decoration: none;
cursor: default;
opacity: 0;
pointer-events: none;
transition: opacity 0.18s ease, background-color 0.12s ease;
}
.kik-apps-grid .tile > a.more:before {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 3px;
height: 3px;
margin: 0;
padding: 0;
border: 0;
border-radius: 50%;
aspect-ratio: auto;
background: currentColor;
box-shadow: -5px 0 currentColor, 5px 0 currentColor;
color: var(--body-font-colour);
}
.kik-apps-grid .tile > a.more.tooltip-active-click,
.kik-apps-grid .tile > a.more[aria-expanded="true"] {
background-color: var(--pat-toolbar-icon-background-colour-hover);
text-decoration: none;
}
@media (hover: hover) {
.kik-apps-grid .tile > a.more:hover {
background-color: var(--pat-toolbar-icon-background-colour-hover);
text-decoration: none;
}
}
.kik-apps-grid .tile > a.more.tooltip-active-click {
background-color: var(--colour-accent);
}
.kik-apps-grid .tile > a.more.tooltip-active-click:before {
color: white;
}
.kik-apps-grid .tile:focus-within > a.more,
.kik-apps-grid .tile > a.more.tooltip-active-click,
.kik-apps-grid .tile > a.more[aria-expanded="true"] {
opacity: 1;
pointer-events: auto;
}
@media (hover: hover) {
.kik-apps-grid .tile:hover > a.more {
opacity: 1;
pointer-events: auto;
}
}
@media (hover: none) {
.kik-apps-grid .tile > a.more {
opacity: 1;
pointer-events: auto;
}
}
.kik-apps-grid .tile > a.more.touch-only.trigger-long-press,
.kik-apps-grid .tile:focus-within > a.more.touch-only.trigger-long-press {
opacity: 0;
pointer-events: none;
}
.kik-apps-grid .tile:has(> a.more.tooltip-active-click) > a.link,
.kik-apps-grid .tile:has(> a.more[aria-expanded="true"]) > a.link {
pointer-events: none;
}
.kik-apps-grid .tile.app-events span.icon.app-icon {
display: grid;
}
.kik-apps-grid .tile.app-events span.icon.app-icon > svg {
grid-area: 1 / 1;
}
.kik-apps-grid .tile.app-events span.icon.app-icon svg [data-dots] {
display: none;
}
.kik-apps-grid .tile.app-events span.icon.app-icon svg.kik-app-icon-date {
height: 100%;
}
.kik-apps-grid .tile.app-events span.icon.app-icon svg.kik-app-icon-date > text {
font-size: 8px;
font-weight: bold;
stroke: none;
fill: var(--app-tile-icon-colour, var(--app-colour));
}
@media (max-width: 680px) {
.kik-apps-grid .tile.app-events span.icon.app-icon svg.kik-app-icon-date > text {
fill: var(--app-icon-contrast-colour, #fff);
}
}
.kik-apps-grid .tile p.calendar-date {
width: calc(100% - calc(2 * var(--app-tile-padding)));
margin: 0 auto 0 20px;
aspect-ratio: 1 / 1;
position: absolute;
top: 0;
left: 0;
color: var(--tile-date-text-colour, var(--app-colour-calendar));
font-weight: bold;
box-sizing: border-box;
display: block;
z-index: 1;
container-type: inline-size;
}
.kik-apps-grid .tile p.calendar-date .date {
width: 28%;
margin: 51cqw auto 0;
line-height: 15cqw;
display: block;
font-weight: bold;
font-size: 17cqw;
text-align: center;
background-color: var(--app-tile-date-background-colour, transparent);
}
.kik-apps-grid .tile p.calendar-date .month {
display: block;
width: 28%;
margin: 0 auto;
line-height: 11cqw;
font-size: 8cqw;
text-align: center;
background-color: var(--app-tile-date-background-colour, transparent);
}
.context-menu-popover.kik-tile-app-menu {
max-width: min(80vw, 320px);
}
.context-menu-popover.kik-tile-app-menu .context-menu-content {
min-width: 0;
max-height: calc(100dvh - 120px);
}
[id$="-personal-photo-page-toolbar"] .icon.prev.disabled,
[id$="-personal-photo-page-toolbar"] .icon.next.disabled,
#films-detail-toolbar .icon.up.disabled,
#films-detail-toolbar .icon.down.disabled {
opacity: .3;
pointer-events: none;
}
@media (max-width: 680px) {
[id$="-personal-photo-page-toolbar"] .icon.prev,
[id$="-personal-photo-page-toolbar"] .icon.next {
display: none;
}
}
.application-body .quaive-document.type-image .quaive-illustration.type-video {
border-radius: 0;
}
.application-body .quaive-document .pat-well .quaive-illustration.type-video .pat-picture {
border-radius: 0;
background: #1c1f24;
box-shadow: none;
overflow: hidden;
}
.application-body .quaive-document .pat-well .quaive-illustration.type-video .pat-picture video {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: 0;
box-shadow: none;
background: #1c1f24;
}
body[data-global-nav="compact"] .application-body .quaive-document.type-image .quaive-illustration,
body[data-global-nav="compact"] .application-body .quaive-document.type-video .quaive-illustration {
min-height: 60vh;
margin: 0;
}
body[data-global-nav="compact"] .application-body .quaive-document.type-image figcaption,
body[data-global-nav="compact"] .application-body .quaive-document.type-video figcaption {
position: absolute;
bottom: 29px;
left: 0;
right: 0;
transform: none;
text-align: center;
z-index: 1;
color: var(--kik-photo-caption-ink, #f2eee8);
background: transparent;
opacity: 0.7;
padding: 2px 18px;
font-size: 16px;
}
@media (hover: hover) {
body[data-global-nav="compact"] .application-body .quaive-document.type-image figcaption:hover,
body[data-global-nav="compact"] .application-body .quaive-document.type-video figcaption:hover {
opacity: 0.8;
}
}
html.kik-one.kik-windowed #app-space .application-body.state-on.kik-floating .quaive-document.type-image figcaption,
html.kik-one.kik-windowed #app-space .application-body.state-on.kik-floating .quaive-document.type-video figcaption {
bottom: 15px;
}
body[data-global-nav="compact"] .application-body .quaive-document.type-image .pat-picture,
body[data-global-nav="compact"] .application-body .quaive-document.type-video .pat-picture {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
body[data-global-nav="compact"] .application-body .quaive-document.type-image .pat-picture img,
body[data-global-nav="compact"] .application-body .quaive-document.type-video .pat-picture img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
color: transparent;
}
.photo-carousel {
--kik-photo-stage-ground: #1c1f24;
--kik-photo-caption-ink: #f2eee8;
--kik-photo-caption-ink-faint: #b6bcc4;
background: var(--kik-photo-stage-ground);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
min-height: 60vh;
margin: 0;
touch-action: pan-y;
-webkit-user-select: none;
user-select: none;
--kik-photo-stage-inset-x: 0px;
--kik-photo-stage-inset-y: 0px;
--kik-photo-stage-inset-bottom: var(--kik-photo-stage-inset-y);
--kik-photo-stage-gap: 0px;
}
.photo-carousel.is-pinching {
touch-action: none;
}
.photo-carousel.is-zoomed .photo-carousel-frame {
overflow: hidden;
}
.photo-carousel .photo-carousel-frame img {
transform-origin: center center;
}
.photo-carousel .photo-carousel-frame {
position: absolute;
will-change: transform;
}
.photo-carousel .photo-carousel-frame img {
transition: opacity 1s ease;
}
.photo-carousel .photo-carousel-frame img.is-loading {
opacity: 0;
transition: none;
}
.photo-carousel .photo-carousel-frame img.is-instant {
transition: none;
}
.photo-carousel img.photo-carousel-frame,
.photo-carousel .photo-carousel-frame img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
color: transparent;
-webkit-user-drag: none;
}
.photo-carousel .photo-carousel-frame.is-prev {
transform: translateX(calc(-100% - var(--kik-photo-stage-gap, 0px)));
}
.photo-carousel .photo-carousel-frame.is-next {
transform: translateX(calc(100% + var(--kik-photo-stage-gap, 0px)));
}
.photo-carousel.is-settling .photo-carousel-frame {
transition: transform var(--photo-carousel-duration, 320ms)
var(--photo-carousel-easing, cubic-bezier(0.4, 0, 0.22, 1));
}
.photo-carousel figcaption {
z-index: 2;
}
.photo-carousel .photo-caption-rename {
display: block;
width: 100%;
}
.photo-carousel .photo-caption-rename input[name="title"] {
width: 100%;
box-sizing: border-box;
border: 0;
padding: 0;
background: transparent;
box-shadow: none;
color: var(--kik-photo-caption-ink, #f2eee8);
font: inherit;
text-align: center;
}
.photo-carousel .photo-caption-rename input[name="title"]::placeholder {
color: var(--kik-photo-caption-ink-faint, #b6bcc4);
opacity: 1;
}
.photo-carousel .photo-caption-rename input[name="title"]:focus {
outline: none;
box-shadow: 0 1px 0 0 currentColor;
}
.photo-carousel.is-handing-off .photo-carousel-frame {
visibility: hidden;
}
.application-body .quaive-document.type-image .pat-well .photo-carousel .photo-carousel-frame,
.application-body .quaive-document.type-video .pat-well .photo-carousel .photo-carousel-frame,
.application-body .quaive-page-module .photo-carousel .photo-carousel-frame {
position: absolute;
inset: var(--kik-photo-stage-inset-y, 0px)
var(--kik-photo-stage-inset-x, 0px)
var(--kik-photo-stage-inset-bottom, var(--kik-photo-stage-inset-y, 0px))
var(--kik-photo-stage-inset-x, 0px);
width: auto;
height: auto;
}
.quaive-document.type-image .pat-well .photo-carousel,
.quaive-document.type-video .pat-well .photo-carousel,
.quaive-page-module .photo-carousel,
.quaive-document.type-image .pat-well .photo-carousel .pat-picture,
.quaive-document.type-video .pat-well .photo-carousel .pat-picture,
.quaive-page-module .photo-carousel .photo-carousel-frame {
border-radius: 0;
}
.quaive-document.type-image .pat-well .photo-carousel .pat-picture,
.quaive-document.type-video .pat-well .photo-carousel .pat-picture {
background: none;
box-shadow: none;
border-radius: 0;
overflow: visible;
}
.photo-carousel-holdover {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
pointer-events: none;
overflow: hidden;
background: var(--kik-photo-stage-ground, #1c1f24);
}
.photo-carousel-holdover > img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
@container screen style(--screen-small: false) {
.photo-carousel-holdover {
background: transparent;
}
}
@container screen style(--screen-small: false) {
.photo-carousel-holdover > img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
border-radius: var(--border-radii-medium, var(--border-radii));
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
}
}
@container screen style(--screen-small: false) {
.photo-carousel {
--kik-photo-stage-inset-x: var(--pat-toolbar-padding, 10px);
--kik-photo-stage-inset-y: calc(
var(--pat-toolbar-button-height, 35px)
+ 2 * var(--pat-toolbar-padding, 10px));
--kik-photo-stage-gap: calc(2 * var(--pat-toolbar-padding, 10px));
background: transparent;
}
}
@container screen style(--screen-small: false) {
.application-body .quaive-document.type-image .pat-well .photo-carousel .photo-carousel-frame,
.application-body .quaive-document.type-video .pat-well .photo-carousel .photo-carousel-frame,
.application-body .quaive-page-module .photo-carousel .photo-carousel-frame {
display: flex;
align-items: center;
justify-content: center;
}
}
@container screen style(--screen-small: false) {
.application-body .quaive-document.type-image .pat-well .photo-carousel .photo-carousel-frame img,
.application-body .quaive-document.type-video .pat-well .photo-carousel .photo-carousel-frame img,
.application-body .quaive-page-module .photo-carousel .photo-carousel-frame img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
border-radius: var(--border-radii-medium, var(--border-radii));
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.5);
}
}
@media (prefers-reduced-motion: reduce) {
.photo-carousel.is-settling .photo-carousel-frame {
transition: none;
}
}
@media (prefers-reduced-motion: reduce) {
.photo-carousel-frame img {
transition: none;
}
}
.photo-carousel .photo-carousel-frame img.is-thumb {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.photo-carousel img.photo-full-overlay {
position: absolute;
z-index: 2;
opacity: 0;
transition: opacity 400ms ease;
pointer-events: none;
border-radius: inherit;
}
.photo-carousel img.photo-full-overlay.is-in {
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.photo-carousel img.photo-full-overlay {
transition: none;
}
}
@container screen style(--screen-small: false) {
.photo-carousel img.photo-full-overlay {
border-radius: var(--border-radii-medium, var(--border-radii));
}
}
.photo-edit-toolbar-controls {
display: none;
}
.application-body.state-photo-edit [id$="-personal-photo-page-toolbar"] .toolbar-section.micro-navigation,
.application-body.state-photo-edit [id$="-personal-photo-page-toolbar"] .toolbar-section.quick-functions > :not(.photo-edit-toolbar-controls) {
display: none;
}
.application-body.state-photo-edit .photo-edit-toolbar-controls {
display: contents;
}
.application-body:has(.photo-edit-panels) {
--kik-photo-edit-panel-width: min(24rem, 85%);
}
aside.sidebar.photo-edit-panels {
position: absolute;
z-index: 3;
top: 0;
right: 0;
bottom: 0;
width: var(--kik-photo-edit-panel-width);
box-sizing: border-box;
overflow: auto;
padding: var(--kik-photo-stage-inset-y, 60px)
var(--kik-photo-stage-inset-x, 25px)
var(--kik-photo-stage-inset-x, 25px);
--sidebar-padding: 0;
--sidebar-padding-top: 0px;
--sidebar-padding-right: 0px;
--sidebar-padding-bottom: 0px;
--sidebar-padding-left: 0px;
transform: translateX(110%);
visibility: hidden;
transition: transform 0.3s ease, visibility 0s linear 0.3s;
--form-input-field-border-radius: var(--border-radii-medium);
}
aside.sidebar.photo-edit-panels .pat-well {
margin: 0;
}
aside.sidebar.photo-edit-panels .pat-form-field-range {
display: grid;
grid-template-columns: 1fr auto;
gap: 0 0.5rem;
}
aside.sidebar.photo-edit-panels .pat-form-field-range > input[type="range"] {
grid-column: 1 / -1;
width: 100%;
margin: 0;
}
aside.sidebar.photo-edit-panels .range-output {
grid-area: 1 / 2;
align-self: center;
justify-self: end;
text-align: right;
font-variant-numeric: tabular-nums;
opacity: 0.6;
font-size: 0.9em;
}
aside.sidebar.photo-edit-panels .sidebar-content {
display: flex;
flex-direction: column;
gap: var(--default-tail-white);
padding: 0;
background: transparent;
}
aside.sidebar.photo-edit-panels .pat-well {
background: color-mix(in srgb, var(--colour-base-background, #faf6ef) 72%, transparent);
-webkit-backdrop-filter: blur(6px);
backdrop-filter: blur(6px);
}
.application-body.state-photo-edit aside.sidebar.photo-edit-panels {
transform: translateX(0);
visibility: visible;
transition: transform 0.3s ease;
}
html.kik-one .application-body.state-on aside.sidebar.photo-edit-panels {
--sidebar-padding-top: 0px;
--sidebar-padding-left: 0px;
--sidebar-padding-right: 0px;
}
html.kik-one .application-body.state-on aside.sidebar.photo-edit-panels:not(:has(> .pat-toolbar)) {
--sidebar-padding-top: 0px;
}
html.kik-one .application-body.state-on aside.sidebar.photo-edit-panels > :is(#sidebar-content, .sidebar-content) {
padding: 0;
}
.application-body.state-photo-edit .quaive-sidebar-toggle {
display: none;
}
@container main (width > 768px) {
.application-body.state-photo-edit.sidebar-left-open aside.sidebar.left {
--sidebar-margin-left: var(--sidebar-margin-left-closed);
}
}
@container main (width > 768px) {
.application-body.state-photo-edit.sidebar-left-open:not(.sidebar-left-closed):has(aside.sidebar) .document-body,
.application-body.state-photo-edit .document-body,
.application-body.state-photo-edit #document-body-images {
--document-body-left-distance: 0px;
--document-body-left-distance-sidebar-open: 0px;
left: 0;
transition: left 0.3s ease;
}
}
.application-body.state-photo-edit .quaive-document.type-image .pat-well .photo-carousel .photo-carousel-frame.is-current,
.application-body.state-photo-edit .quaive-page-module .photo-carousel .photo-carousel-frame.is-current {
right: var(--kik-photo-edit-panel-width, min(24rem, 85%));
transition: right 0.3s ease;
}
.application-body.state-photo-edit .quaive-document.type-image .pat-well .photo-carousel .photo-carousel-frame,
.application-body.state-photo-edit .quaive-page-module .photo-carousel .photo-carousel-frame {
overflow: visible;
}
.application-body.state-photo-edit .quaive-page-module .photo-carousel .photo-carousel-frame.is-prev,
.application-body.state-photo-edit .quaive-page-module .photo-carousel .photo-carousel-frame.is-next,
.application-body.state-photo-edit .photo-carousel figcaption {
display: none;
}
.photo-carousel .photo-carousel-frame.is-current img {
filter: var(--photo-edit-filter, none);
}
.photo-edit-crop {
position: absolute;
z-index: 2;
outline: 100vmax solid rgb(0 0 0 / 0.55);
border: 1px solid rgb(255 255 255 / 0.9);
pointer-events: auto;
cursor: move;
touch-action: none;
}
.photo-edit-crop-handle {
position: absolute;
width: 12px;
height: 12px;
background: rgb(255 255 255 / 0.95);
border: 1px solid rgb(0 0 0 / 0.45);
border-radius: 2px;
touch-action: none;
}
.photo-edit-crop-handle.handle-nw {
top: -6px;
left: -6px;
cursor: nwse-resize;
}
.photo-edit-crop-handle.handle-se {
bottom: -6px;
right: -6px;
cursor: nwse-resize;
}
.photo-edit-crop-handle.handle-ne {
top: -6px;
right: -6px;
cursor: nesw-resize;
}
.photo-edit-crop-handle.handle-sw {
bottom: -6px;
left: -6px;
cursor: nesw-resize;
}
.photo-edit-crop-handle.handle-n {
top: -6px;
left: calc(50% - 6px);
cursor: ns-resize;
}
.photo-edit-crop-handle.handle-s {
bottom: -6px;
left: calc(50% - 6px);
cursor: ns-resize;
}
.photo-edit-crop-handle.handle-w {
top: calc(50% - 6px);
left: -6px;
cursor: ew-resize;
}
.photo-edit-crop-handle.handle-e {
top: calc(50% - 6px);
right: -6px;
cursor: ew-resize;
}
.photo-carousel.is-cropping {
cursor: crosshair;
}
.photo-carousel.is-saving::after {
content: "";
position: absolute;
inset: 0;
z-index: 4;
background: rgb(0 0 0 / 0.25);
}
@media (prefers-reduced-motion: reduce) {
aside.sidebar.photo-edit-panels,
.application-body.state-photo-edit aside.sidebar.photo-edit-panels,
.application-body.state-photo-edit .photo-carousel .photo-carousel-frame.is-current {
transition: none;
}
}
.photo-carousel .photo-expand-preview {
position: absolute;
z-index: 3;
border-radius: var(--border-radii-medium);
overflow: hidden;
box-shadow: 0 3px 20px rgb(0 0 0 / 0.5);
}
.photo-carousel .photo-expand-preview > canvas,
.photo-carousel .photo-expand-preview > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
filter: var(--photo-edit-filter, none);
}
.photo-carousel .photo-expand-preview > .expand-shimmer {
position: absolute;
inset: 0;
background: linear-gradient(110deg,
rgb(255 255 255 / 0) 25%,
rgb(255 255 255 / 0.9) 50%,
rgb(255 255 255 / 0) 75%);
background-size: 250% 100%;
mask-size: 100% 100%;
-webkit-mask-size: 100% 100%;
animation: photo-expand-shimmer 2.8s linear infinite;
}
.photo-carousel .photo-expand-preview > .expand-result {
opacity: 0;
transition: opacity 500ms ease;
}
.photo-carousel .photo-expand-preview > .expand-result.is-in {
opacity: 1;
}
@keyframes photo-expand-shimmer {
from { background-position: 200% 0; }
to { background-position: -50% 0; }
}
.application-body.is-photo-outpainting .photo-edit-toolbar-controls button,
.application-body.is-photo-outpainting aside.sidebar.photo-edit-panels {
pointer-events: none;
}
.application-body.is-photo-outpainting .photo-edit-toolbar-controls button:not([data-photo-edit-crop]) {
opacity: 0.4;
}
.application-body.is-photo-outpainting .photo-edit-toolbar-controls [data-photo-edit-crop] {
position: relative;
}
.application-body.is-photo-outpainting .photo-edit-toolbar-controls [data-photo-edit-crop] svg {
visibility: hidden;
}
.application-body.is-photo-outpainting .photo-edit-toolbar-controls [data-photo-edit-crop]::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1.25em;
height: 1.25em;
margin: -0.625em 0 0 -0.625em;
background: currentColor;
mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cpath d=%22M38.9,56.5c-4.5.8-7.9.7-8,.7s0,0,0,0c-3.5-.2-6.9-1-10.1-2.5-11.4-4.6-17.7-17.8-13.4-28.6,2.9-8.5,12.3-14.1,21.9-11.9,6.1,1.3,11.9,5.5,12.9,11.6.4,3.1-.6,6.2-3,8.3-2.2,2-6.3,2.7-8.7.5-.4-.3,0-1,.4-.9,3.2,0,5.4-2,6.1-4.7,1-4.5-4.1-7.9-8.9-8.4-8.5-1-14.1,6.6-13.5,13.8.4,12.8,16.8,19.6,28.6,15.6,4.3-1.3,8.3-3.8,11.5-7.3.5-.6,1.5,0,1.2.7-2.9,6.8-9.5,11.4-17.1,13.1ZM47.4,19.4c1.8,2.8,2.6,5,2.6,5.1s0,0,0,0c.8,2.3,1.1,4.8.9,7.2-.4,8.5-8.5,15.6-17.7,15.2-7.1,0-13.8-4.9-14.7-11.7-.6-4.3.9-9.1,5.2-11.1,2.2-1,4.8-1,7,0,2.1,1,3.7,3.6,2.6,5.6-.2.3-.7.3-.8,0-.8-2.1-2.9-3.1-5.1-3-3.6.4-4.8,4.5-3.9,7.7,1.5,5.8,8.6,7.8,13.9,5.8,9.4-3.2,10.1-15.4,4-22.3-2.1-2.5-5.8-4-9.2-5.3-.6-.2-.4-1,.2-1,5.9.4,11.8,3.1,15,7.7ZM49.1,42.8c-1.7,1.2,10.6-11.2,2-23.8-4.8-7-16-14.8-33.5-7.5-.6.3-.9-.9-.3-1.2,36.9-17.3,48.7,21.1,31.9,32.5Z%22/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 64 64%22%3E%3Cpath d=%22M38.9,56.5c-4.5.8-7.9.7-8,.7s0,0,0,0c-3.5-.2-6.9-1-10.1-2.5-11.4-4.6-17.7-17.8-13.4-28.6,2.9-8.5,12.3-14.1,21.9-11.9,6.1,1.3,11.9,5.5,12.9,11.6.4,3.1-.6,6.2-3,8.3-2.2,2-6.3,2.7-8.7.5-.4-.3,0-1,.4-.9,3.2,0,5.4-2,6.1-4.7,1-4.5-4.1-7.9-8.9-8.4-8.5-1-14.1,6.6-13.5,13.8.4,12.8,16.8,19.6,28.6,15.6,4.3-1.3,8.3-3.8,11.5-7.3.5-.6,1.5,0,1.2.7-2.9,6.8-9.5,11.4-17.1,13.1ZM47.4,19.4c1.8,2.8,2.6,5,2.6,5.1s0,0,0,0c.8,2.3,1.1,4.8.9,7.2-.4,8.5-8.5,15.6-17.7,15.2-7.1,0-13.8-4.9-14.7-11.7-.6-4.3.9-9.1,5.2-11.1,2.2-1,4.8-1,7,0,2.1,1,3.7,3.6,2.6,5.6-.2.3-.7.3-.8,0-.8-2.1-2.9-3.1-5.1-3-3.6.4-4.8,4.5-3.9,7.7,1.5,5.8,8.6,7.8,13.9,5.8,9.4-3.2,10.1-15.4,4-22.3-2.1-2.5-5.8-4-9.2-5.3-.6-.2-.4-1,.2-1,5.9.4,11.8,3.1,15,7.7ZM49.1,42.8c-1.7,1.2,10.6-11.2,2-23.8-4.8-7-16-14.8-33.5-7.5-.6.3-.9-.9-.3-1.2,36.9-17.3,48.7,21.1,31.9,32.5Z%22/%3E%3C/svg%3E");
-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
animation: photo-outpaint-spin 2.4s linear infinite;
}
@keyframes photo-outpaint-spin {
to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
.photo-carousel .photo-expand-preview > .expand-shimmer {
animation: none;
background: rgb(255 255 255 / 0.35);
}
}
@media (prefers-reduced-motion: reduce) {
.photo-carousel .photo-expand-preview > .expand-result {
transition: none;
}
}
.photo-carousel .photo-expand-preview > .expand-failed-note {
position: absolute;
left: 50%;
bottom: 6%;
transform: translateX(-50%);
margin: 0;
max-width: 90%;
padding: 0.35em 0.9em;
border-radius: 999px;
background: rgb(0 0 0 / 0.65);
color: rgb(255 255 255 / 0.95);
font-size: 0.85rem;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.photo-carousel .photo-save-failed-note {
position: absolute;
left: 50%;
bottom: calc(var(--kik-photo-stage-inset-y, 60px) + 1rem);
transform: translateX(-50%);
z-index: 5;
margin: 0;
max-width: 90%;
padding: 0.35em 0.9em;
border-radius: 999px;
background: rgb(0 0 0 / 0.65);
color: rgb(255 255 255 / 0.95);
font-size: 0.85rem;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kik-video-unplayable {
position: absolute;
inset: auto 0 0 0;
margin: 0;
padding: var(--space-s, 0.75rem) var(--space-m, 1rem);
background: rgba(0, 0, 0, 0.72);
color: #fff;
font-size: var(--font-size-s, 0.875rem);
line-height: 1.4;
text-align: center;
text-wrap: balance;
}
.film-roll-item {
position: relative;
}
.film-roll-video-thumb {
display: block;
width: 100%;
height: 100%;
min-height: 100px;
position: relative;
overflow: hidden;
background:
radial-gradient(circle at center,
rgba(255, 255, 255, .10), rgba(0, 0, 0, .04) 60%),
#2b2f36;
}
.film-roll-video-poster {
position: absolute;
inset: 0;
z-index: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.video-duration {
position: absolute;
right: 4px;
bottom: 4px;
z-index: 1;
padding: 1px 5px;
border-radius: 3px;
background: rgba(0, 0, 0, .72);
color: #fff;
font-variant-numeric: tabular-nums;
font-size: 11px;
font-weight: 600;
line-height: 1.45;
letter-spacing: .02em;
pointer-events: none;
}
.film-roll-video-thumb.has-duration::after {
content: none;
}
.image-section video.collection-video {
display: block;
width: 100%;
height: var(--modal-panel-image-social-image-max-height, calc(94vh - 100px));
object-fit: contain;
margin: 0 auto;
background: #000;
border-radius: calc(0.4 * var(--border-radii));
}
.quaive-document video.collection-video {
display: block;
width: 100%;
height: 80vh;
object-fit: contain;
margin: 0 auto;
background: #000;
border-radius: calc(0.4 * var(--border-radii));
}
@container screen style(--screen-small: true) {
.image-section video.collection-video,
.quaive-document video.collection-video {
height: 40vh;
}
}
.film-roll-video-thumb::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-style: solid;
border-width: 13px 0 13px 22px;
border-color: transparent transparent transparent rgba(255, 255, 255, .92);
transform: translate(-40%, -50%);
}
:is(.portlet-weather, .weather-app, .kik-cloud-card-summary) {
--weather-icon-sun: #F5A623;
--weather-icon-rain: #3D8BF2;
--weather-icon-cloud: var(--colour-ink-medium, #a1a1aa);
}
:is(.portlet-weather, .weather-app, .kik-cloud-card-summary) .weather-unavailable {
opacity: .7;
margin: .25rem 0;
}
:is(.portlet-weather, .weather-app, .kik-cloud-card-summary) .weather-source {
font-size: .7em;
opacity: .55;
margin: .5rem 0 0;
}
:is(.portlet-weather, .weather-app, .kik-cloud-card-summary) .weather-icon {
width: 1em;
height: 1em;
display: block;
overflow: visible;
}
:is(.portlet-weather, .weather-app, .kik-cloud-card-summary) .weather-icon .wi-cloud {
fill: var(--weather-icon-cloud);
}
:is(.portlet-weather, .weather-app, .kik-cloud-card-summary) .weather-icon .wi-cloud-back {
opacity: .45;
}
:is(.portlet-weather, .weather-app, .kik-cloud-card-summary) .weather-icon .wi-sun {
fill: var(--weather-icon-sun);
}
:is(.portlet-weather, .weather-app, .kik-cloud-card-summary) .weather-icon .wi-bolt {
fill: var(--weather-icon-sun);
}
:is(.portlet-weather, .weather-app, .kik-cloud-card-summary) .weather-icon .wi-hail {
fill: var(--weather-icon-rain);
}
:is(.portlet-weather, .weather-app, .kik-cloud-card-summary) .weather-icon .wi-ray {
stroke: var(--weather-icon-sun);
stroke-width: 1.7;
stroke-linecap: round;
}
:is(.portlet-weather, .weather-app, .kik-cloud-card-summary) .weather-icon .wi-drop {
stroke: var(--weather-icon-rain);
stroke-width: 1.7;
stroke-linecap: round;
}
:is(.portlet-weather, .weather-app, .kik-cloud-card-summary) .weather-icon .wi-flake {
stroke-width: 1.3;
}
:is(.portlet-weather, .weather-app, .kik-cloud-card-summary) .weather-icon .wi-mist {
stroke: var(--weather-icon-cloud);
stroke-width: 1.7;
stroke-linecap: round;
opacity: .7;
}
:is(.portlet-weather, .weather-app, .kik-cloud-card-summary) .weather-current {
display: flex;
gap: .75rem;
margin: .15rem 0 .35rem;
}
:is(.portlet-weather, .weather-app) .weather-current-icon {
font-size: 2.4rem;
flex: none;
}
:is(.portlet-weather, .weather-app) .weather-now {
min-width: 0;
}
:is(.portlet-weather, .weather-app) .weather-headline {
display: flex;
align-items: baseline;
gap: .45rem;
}
:is(.portlet-weather, .weather-app) .weather-temp {
font-family: var(--pat-rich-header-level-1-font-family, 'TeX Gyre Pagella', Palatino, Georgia, serif);
font-size: 2.1rem;
line-height: 1;
font-weight: 400;
font-variant-numeric: tabular-nums;
}
:is(.portlet-weather, .weather-app) .weather-desc {
font-size: .85em;
color: var(--colour-ink-dark, #52525b);
}
:is(.portlet-weather, .weather-app) .weather-place {
font-size: .8em;
color: var(--colour-byline, #9e9eae);
margin-top: 0;
margin-bottom: 10px;
}
:is(.portlet-weather, .weather-app) .weather-nowcast-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: .5rem;
flex-wrap: wrap;
}
:is(.portlet-weather, .weather-app) .weather-nowcast.is-dry .weather-nowcast-dry {
white-space: normal;
}
:is(.portlet-weather, .weather-app) .weather-nowcast-title {
font-size: .7em;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--colour-ink-medium, #a1a1aa);
}
:is(.portlet-weather, .weather-app) .weather-nowcast-dry {
font-size: .72em;
font-weight: 500;
color: var(--colour-primary, #374151);
white-space: nowrap;
}
:is(.portlet-weather, .weather-app) .weather-nowcast-bars {
margin-top: .5rem;
display: flex;
align-items: flex-end;
gap: 3px;
height: 30px;
}
:is(.portlet-weather, .weather-app) .weather-nowcast-step {
flex: 1 1 0;
min-width: 0;
height: 100%;
display: flex;
align-items: flex-end;
}
:is(.portlet-weather, .weather-app) .weather-nowcast-bar {
width: 100%;
border-radius: 3px;
background: var(--weather-icon-rain);
}
:is(.portlet-weather, .weather-app) .weather-nowcast-bar.is-light {
min-height: 5px;
background: color-mix(in srgb, var(--weather-icon-rain) 42%, transparent);
}
:is(.portlet-weather, .weather-app) .weather-nowcast-bar.is-moderate {
min-height: 5px;
background: color-mix(in srgb, var(--weather-icon-rain) 70%, transparent);
}
:is(.portlet-weather, .weather-app) .weather-nowcast-bar.is-heavy {
min-height: 5px;
}
:is(.portlet-weather, .weather-app) .weather-nowcast-axis {
margin-top: .3rem;
display: flex;
justify-content: space-between;
font-size: .62em;
color: var(--colour-ink-medium, #a1a1aa);
font-variant-numeric: tabular-nums;
}
:is(.portlet-weather, .weather-app) .weather-forecast {
list-style: none;
margin: .55rem 0 0;
padding: 0;
}
:is(.portlet-weather, .weather-app) .weather-day {
display: grid;
grid-template-columns: 2.6em 1.5em 1fr auto;
align-items: center;
gap: .6rem;
padding: .32rem 0;
border-bottom: 1px solid var(--colour-separation-lines, #e4e4e7);
}
:is(.portlet-weather, .weather-app) .weather-day:last-child {
border-bottom: 0;
}
:is(.portlet-weather, .weather-app) .weather-day-name {
font-size: .8em;
font-weight: 500;
text-transform: capitalize;
}
:is(.portlet-weather, .weather-app) .weather-day-icon {
font-size: 1.25rem;
}
:is(.portlet-weather, .weather-app) .weather-day-desc {
font-size: .78em;
color: var(--colour-byline, #9e9eae);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
:is(.portlet-weather, .weather-app) .weather-day-temps {
font-size: .8em;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
:is(.portlet-weather, .weather-app) .weather-day-max {
font-weight: 600;
}
:is(.portlet-weather, .weather-app) .weather-day-min {
color: var(--colour-ink-medium, #a1a1aa);
margin-left: .3em;
}
.weather-app {
columns: 22rem;
column-gap: 1.25rem;
width: 100%;
box-sizing: border-box;
}
.weather-app > .pat-well {
break-inside: avoid;
margin-bottom: 1.25rem;
}
.weather-app > .weather-source,
.weather-app > .weather-unavailable {
column-span: all;
}
.weather-app .weather-current {
gap: 1.1rem;
margin: 0 0 1rem;
}
.weather-app .weather-current-icon {
font-size: 3.6rem;
}
.weather-app .weather-temp {
font-size: 3rem;
}
.weather-app .weather-desc {
font-size: 1.05rem;
}
.weather-app .weather-place {
font-size: .95em;
margin-top: .3rem;
}
.weather-app .weather-metrics {
display: flex;
flex-wrap: wrap;
gap: .25rem 1.25rem;
margin: .35rem 0 0;
font-size: .9em;
color: var(--colour-byline, #9e9eae);
}
.weather-app .weather-metrics dt {
display: inline;
}
.weather-app .weather-metrics dd {
display: inline;
margin: 0;
}
.weather-app .weather-nowcast {
margin: 1.25rem 0 0;
padding: .8rem 1rem;
}
.weather-app .weather-nowcast-title {
font-size: .8em;
}
.weather-app .weather-nowcast-dry {
font-size: .85em;
}
.weather-app .weather-nowcast-bars {
height: 46px;
gap: 4px;
}
.weather-app .weather-nowcast-axis {
font-size: .72em;
}
.weather-app .weather-forecast {
margin: 1.25rem 0 0;
}
.weather-app .weather-day {
padding: .55rem 0;
grid-template-columns: 3.2em 1.9em 1fr auto;
}
.weather-app .weather-day-name {
font-size: .95em;
}
.weather-app .weather-day-icon {
font-size: 1.6rem;
}
.weather-app .weather-day-desc {
font-size: .92em;
}
.weather-app .weather-day-temps {
font-size: .95em;
}
.weather-app .weather-source {
font-size: .75em;
margin: 1.25rem 0 0;
}
.weather-app .weather-hours {
margin-top: 1.25rem;
}
.weather-app .weather-hours-table .wh-sky .weather-icon {
font-size: 1.1rem;
margin: 0 auto;
}
.weather-app .weather-well .panel-content > :first-child {
margin-top: 0;
}
.weather-app .weather-well .weather-current {
margin-bottom: 0;
}
.weather-app .weather-well .weather-current + .weather-nowcast {
margin-top: 1.25rem;
}
.weather-app .weather-well .weather-forecast,
.weather-app .weather-well .weather-hours {
margin-top: 0;
}
.weather-hours {
display: none;
}
.quaive-portlet.type-weather .weather-hours,
.portlet.type-weather .weather-hours {
display: block;
}
.kik-cloud-card[data-kik-w="2"] .weather-hours,
.kik-cloud-card[data-kik-w="3"] .weather-hours,
.kik-cloud-card[data-kik-w="4"] .weather-hours,
.kik-cloud-card[data-kik-h="2"] .weather-hours,
.kik-cloud-card[data-kik-h="3"] .weather-hours,
.kik-cloud-card[data-kik-h="4"] .weather-hours {
display: block;
}
.weather-hours-title {
font-size: .7em;
text-transform: uppercase;
letter-spacing: .04em;
opacity: .6;
margin: .5rem 0 .2rem;
}
.weather-hours {
width: 100%;
box-sizing: border-box;
}
.weather-hours-scroll {
width: 100%;
box-sizing: border-box;
max-height: 210px;
overflow: auto;
}
.weather-hours-table {
width: 100% !important;
min-width: 100%;
border-collapse: collapse;
font-size: .8em;
table-layout: fixed;
}
.weather-hours-table td {
padding: 1px 4px;
vertical-align: middle;
}
.weather-hours-table .wh-time {
width: 3.2em;
opacity: .7;
white-space: nowrap;
}
.weather-hours-table .wh-bar {
width: auto;
}
.weather-hours-table .wh-bar > span {
display: block;
min-width: 2px;
height: 8px;
border-radius: 3px;
background: #4a90d9;
}
.weather-hours-table .wh-mm {
width: 2.6em;
text-align: right;
opacity: .7;
white-space: nowrap;
}
.weather-hourly-table .wh-temp {
white-space: nowrap;
}
.weather-hourly-table .wh-temp .wh-feels {
opacity: .55;
font-size: .9em;
}
.weather-hourly-table .wh-rain {
width: 3em;
text-align: right;
opacity: .7;
white-space: nowrap;
}
.weather-hourly-table .wh-sky {
width: 1.6em;
text-align: center;
}
.kik-cloud-card[data-kik-h="1"]:is([data-kik-w="2"],[data-kik-w="3"],[data-kik-w="4"]) .panel-content:has(.weather-hours) {
display: flex;
min-height: 0;
}
.kik-cloud-card[data-kik-h="1"]:is([data-kik-w="2"],[data-kik-w="3"],[data-kik-w="4"]) #portlet-weather-content:has(.weather-hours) {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1 1 auto;
}
.kik-cloud-card[data-kik-h="1"]:is([data-kik-w="2"],[data-kik-w="3"],[data-kik-w="4"]) [data-weather-pane]:not([hidden]) {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1 1 auto;
}
.kik-cloud-card[data-kik-h="1"]:is([data-kik-w="2"],[data-kik-w="3"],[data-kik-w="4"]) [data-weather-pane]:not([hidden]) .weather-hours {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1 1 auto;
}
.kik-cloud-card[data-kik-h="1"]:is([data-kik-w="2"],[data-kik-w="3"],[data-kik-w="4"]) .weather-hours-scroll {
max-height: none;
flex: 1 1 auto;
min-height: 0;
}
.weather-app .weather-hours {
display: block;
}
.weather-app .weather-hours-scroll {
max-height: none;
overflow: visible;
}
.weather-radar-img {
width: 100%;
height: auto;
display: block;
}
.weather-app .weather-radar-wrap {
position: relative;
overflow: hidden;
line-height: 0;
border-radius: var(--border-radii-small, var(--border-radii));
background: var(--pat-surface-background-colour, rgba(127, 127, 127, .08));
}
.weather-app .weather-radar-stage {
transition: transform .25s ease;
}
.weather-app .weather-radar-marker {
position: absolute;
width: 12px;
height: 12px;
margin: -6px 0 0 -6px;
border-radius: 50%;
background: var(--colour-alert, #e53935);
box-shadow: 0 0 0 2px #fff, 0 0 6px 2px rgba(229, 57, 53, .7);
}
.weather-app .weather-radar-zoom {
position: absolute;
right: 8px;
bottom: 8px;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: none;
border-radius: 50%;
background: rgba(255, 255, 255, .92);
color: #333;
box-shadow: 0 1px 4px rgba(0, 0, 0, .35);
font-size: 1rem;
line-height: 1;
}
.kik-cloud-card[data-kik-w="1"][data-kik-h="1"] .panel-content:has([data-weather-pane="radar"]:not([hidden])) {
display: flex;
min-height: 0;
}
.kik-cloud-card[data-kik-w="1"][data-kik-h="1"] #portlet-weather-content:has([data-weather-pane="radar"]:not([hidden])) {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1 1 auto;
}
.kik-cloud-card[data-kik-w="1"][data-kik-h="1"] [data-weather-pane="radar"]:not([hidden]) {
display: flex;
flex-direction: column;
min-height: 0;
flex: 1 1 auto;
}
.kik-cloud-card[data-kik-w="1"][data-kik-h="1"] [data-weather-pane="radar"]:not([hidden]) .weather-radar-wrap {
flex: 1 1 auto;
min-height: 0;
}
.kik-cloud-card[data-kik-w="1"][data-kik-h="1"] [data-weather-pane="radar"]:not([hidden]) .weather-radar-stage {
height: 100%;
}
.kik-cloud-card[data-kik-w="1"][data-kik-h="1"] [data-weather-pane="radar"]:not([hidden]) .weather-radar-img {
height: 100%;
object-fit: cover;
object-position: top center;
}
.portlet-today-content .today-weather {
margin: 0 0 1rem;
}
.portlet-today-content .today-weather .weather-current {
margin-top: 0;
}
.portlet-today-content .today-weather .weather-current-icon {
font-size: 3.2rem;
}
.portlet-today-content .today-weather .weather-current-icon {
order: 1;
margin-inline-start: auto;
}
.portlet-today-content .today-weather {
--weather-icon-cloud: color-mix(in srgb, var(--colour-ink-medium, #a1a1aa) 60%, var(--colour-ink-dark, #52525b));
}
.portlet-today-content .today-weather .weather-nowcast {
margin-bottom: 0;
}
.sabra-portlet-card {
display: flex;
flex-direction: column;
}
.sabra-portlet-card .panel-content {
flex: 1 1 auto;
min-height: 0;
height: auto;
display: flex;
}
.sabra-portlet-card .sabra-portlet-content {
min-height: 5rem;
}
.sabra-portlet-content .sabra-card {
min-height: 0;
}
.sabra-portlet-content {
min-height: 7rem;
}
.sabra-portlet-content {
perspective: 550px;
display: flex;
flex: 1 1 auto;
align-self: stretch;
width: 100%;
align-items: stretch;
justify-content: center;
}
.sabra-portlet-content .sabra-card {
cursor: default;
position: relative;
flex: 1 1 auto;
align-self: stretch;
width: 100%;
min-height: 6rem;
transition: transform .15s ease;
}
@media (hover: hover) {
.sabra-portlet-content .sabra-card:hover {
transform: translateY(-1px) translateZ(10px);
}
}
.sabra-portlet-content .sabra-flipper {
position: absolute;
inset: 0;
transform-style: preserve-3d;
transition: transform .32s cubic-bezier(.17, .67, .66, 1.66);
}
.sabra-portlet-content .sabra-flipper.show-back {
transform: rotateY(180deg);
}
.sabra-portlet-content .sabra-flipper .front,
.sabra-portlet-content .sabra-flipper .back {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: .5rem;
border-radius: var(--border-radii-medium, .75rem);
background: #fff;
opacity: 1;
box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
transition: box-shadow .15s ease;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
@media (hover: hover) {
.sabra-portlet-content .sabra-card:hover .front,
.sabra-portlet-content .sabra-card:hover .back {
box-shadow: 0 3px 8px rgba(0, 0, 0, .12);
}
}
.sabra-portlet-content .sabra-flipper .back {
transform: rotateY(180deg);
}
.sabra-portlet-content .sabra-term {
font-size: 1.4em;
margin: 0;
}
.sabra-portlet-content .sabra-translit {
margin: .15em 0 0;
opacity: .65;
font-size: .85em;
}
.sabra-portlet-content .sabra-english {
font-size: 1.15em;
margin: 0;
}
.couple-phone {
margin-block-start: 0.75rem;
}
.couple-phone-label {
display: block;
margin-block-end: 0.35rem;
}
.couple-phone-input {
width: 100%;
max-width: 22rem;
margin-block-end: 0.6rem;
}
.couple-code {
margin-block-start: 0.75rem;
max-width: 28rem;
}
.couple-code-help {
margin-block-end: 0.5rem;
}
.couple-code-value {
font-family: var(--font-family-monospace, monospace);
font-size: 1.6rem;
font-weight: 600;
letter-spacing: 0.18em;
user-select: all;
}
.couple-open-app {
margin-block-start: 0.5rem;
}
.whatsapp-qr-image {
margin-block-end: 1rem;
}
.whatsapp-qr-image img {
display: block;
width: 100%;
max-width: 14rem;
height: auto;
}
.couple-relink {
margin-block: 0.6rem 0;
max-width: 100%;
}
.couple-relink .couple-relink-detail {
display: block;
margin-block-start: 0.25rem;
font-size: 0.875rem;
opacity: 0.8;
}
.couple-toggle {
margin-block-start: 0.75rem;
font-size: 0.875rem;
}
.editor-toolbar .button-chokhmah-fragment::before {
content: "\05D7";
font-family: "Frank Ruhl Libre", "David Libre", "Times New Roman", serif;
font-weight: 700;
font-size: 1.4rem;
line-height: 1;
display: inline-block;
align-content: center;
}
.editor-toolbar .pat-menu-list .button-chokhmah-fragment::before {
font-size: 1.15rem;
width: var(--bullet-space);
height: var(--bullet-space);
display: flex;
align-items: center;
justify-content: center;
}
@container screen style(--screen-small: true) {
#chokhmah-body.search-body {
margin-left: -15px;
margin-right: -15px;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box;
width: auto;
}
}
.panel-chokhmah-fragment .pat-toolbar.modal-toolbar .toolbar-section.navigation {
position: absolute;
pointer-events: none;
opacity: 0;
}
.panel-chokhmah-fragment .pat-toolbar.modal-toolbar .toolbar-section.micro-navigation {
grid-column: 1 / -1;
justify-self: center;
}
.panel-chokhmah-fragment .chokhmah-picker {
display: grid;
grid-template-columns: minmax(0, 44fr) minmax(0, 56fr);
gap: 24px;
align-items: start;
border: 0;
margin: 0;
padding: 0;
}
.panel-chokhmah-fragment .chokhmah-picker-finder,
.panel-chokhmah-fragment .chokhmah-picker-preview {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
border: 0;
margin: 0;
padding: 0;
}
.panel-chokhmah-fragment .chokhmah-picker-search {
--search-field-font-size: 1rem;
border: 0;
margin: 0;
padding: 0;
}
.panel-chokhmah-fragment .chokhmah-picker-search .search-field {
--kik-ask-height: 44px;
margin-bottom: 0;
}
.panel-chokhmah-fragment .chokhmah-picker-results:has(.pat-checklist) {
max-height: clamp(269px, calc(47svh + 49px), 569px);
overflow-y: auto;
border: 1px solid color-mix(in srgb, var(--body-font-colour) 12%, transparent);
border-radius: var(--border-radii-medium);
scrollbar-gutter: stable;
padding: 4px 6px 8px 10px;
}
.panel-chokhmah-fragment .chokhmah-picker-results fieldset.group > legend,
.panel-chokhmah-fragment .chokhmah-picker-results fieldset.group > .legend,
.panel-chokhmah-fragment .chokhmah-picker-results fieldset > legend,
.panel-chokhmah-fragment .chokhmah-picker-results fieldset > .legend {
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--colour-byline);
padding-block: 10px 4px;
}
.panel-chokhmah-fragment .chokhmah-picker-results .pat-checklist > label {
border-radius: var(--border-radii-medium);
padding: 7px 10px;
}
.panel-chokhmah-fragment .chokhmah-picker-results .pat-checklist > label:has(> input:checked) {
background: color-mix(in srgb,
var(--app-colour, var(--colour-accent)) 12%,
var(--colour-base-light, #fff));
}
@media (hover: hover) {
.panel-chokhmah-fragment .chokhmah-picker-results .pat-checklist > label:hover:not(:has(> input:checked)) {
background: color-mix(in srgb,
var(--app-colour, var(--colour-accent)) 6%,
var(--colour-base-light, #fff));
}
}
.panel-chokhmah-fragment .chokhmah-picker-results .label-fragment-description {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
}
.panel-chokhmah-fragment .chokhmah-picker-results .label-fragment-description mark {
background: color-mix(in srgb, var(--colour-accent) 22%, transparent);
color: inherit;
border-radius: 2px;
}
.panel-chokhmah-fragment .chokhmah-picker-chosen .chokhmah-passage {
max-width: none;
}
.panel-chokhmah-fragment .chokhmah-picker-chosen {
padding-inline: 0;
padding-block-end: 0;
}
.panel-chokhmah-fragment .chokhmah-picker-chosen > .well-title-group {
padding-inline: 20px;
padding-bottom: 20px;
}
.panel-chokhmah-fragment .chokhmah-picker-preview {
height: 618px;
}
.panel-chokhmah-fragment #chokhmah-chosen {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
scrollbar-gutter: stable;
padding-top: 20px;
}
.panel-chokhmah-fragment fieldset.chokhmah-picker-mode {
margin-bottom: 0 !important;
}
.panel-chokhmah-fragment .chokhmah-picker-chosen > .panel-content {
padding: 0 20px 20px 20px;
}
@container modal-space (width <= 680px) {
.panel-chokhmah-fragment .chokhmah-picker {
grid-template-columns: minmax(0, 1fr);
gap: 16px;
}
}
@container modal-space (width <= 680px) {
.panel-chokhmah-fragment .chokhmah-picker-results {
max-height: 38svh;
}
}
.kik-embed-facade {
border: 1px solid var(--kik-border-subtle, rgba(0, 0, 0, 0.12));
border-radius: var(--kik-radius-m, 0.5rem);
padding: 0.9rem 1rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
max-width: 34rem;
background: var(--kik-surface-sunken, rgba(0, 0, 0, 0.02));
}
.kik-embed-facade-provider {
display: flex;
align-items: center;
gap: 0.4rem;
font-weight: 600;
margin: 0;
}
.kik-embed-facade-link {
overflow-wrap: anywhere;
font-size: 0.9em;
}
.kik-embed-facade-note {
margin: 0;
font-size: 0.82em;
opacity: 0.75;
}
.kik-embed-facade-actions {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.kik-embed-facade.is-loaded {
border: 0;
padding: 0;
background: none;
}
@media (prefers-color-scheme: dark) {
.kik-embed-facade {
border-color: var(--kik-border-subtle, rgba(255, 255, 255, 0.16));
background: var(--kik-surface-sunken, rgba(255, 255, 255, 0.04));
}
}
.kik-mention-suggest {
position: absolute;
z-index: 1100;
min-width: 220px;
max-width: 360px;
max-height: 16em;
overflow-y: auto;
padding: 4px;
background: var(--menu-background, var(--body-background, #fff));
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: var(--border-radii, 6px);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
font-size: 0.95rem;
}
.kik-mention-suggest[hidden] {
display: none;
}
.kik-mention-suggest .item {
display: flex;
align-items: center;
gap: 0.5em;
padding: 5px 8px;
border-radius: calc(0.5 * var(--border-radii, 6px));
color: var(--body-font-colour, #333);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kik-mention-suggest .item.active {
background: var(--menu-item-hover-background, rgba(0, 0, 0, 0.08));
}
@media (hover: hover) {
.kik-mention-suggest .item:hover {
background: var(--menu-item-hover-background, rgba(0, 0, 0, 0.08));
}
}
.kik-mention-suggest .item::before {
font-family: "fontello";
font-size: 1rem;
opacity: 0.7;
flex: 0 0 auto;
}
.kik-mention-suggest .item .title {
overflow: hidden;
text-overflow: ellipsis;
}
#document-body-notes:has(.kik-graph-stage),
#document-body-notes.kik-graph-body {
overflow: hidden;
}
.kik-graph-stage {
position: absolute;
inset: 0;
touch-action: none;
}
#kik-graph-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
cursor: grab;
}
#kik-graph-canvas.is-grabbing {
cursor: grabbing;
}
#kik-graph-canvas.on-node {
cursor: default;
}
.kik-graph-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: var(--colour-muted, #888);
font-size: 1.1rem;
}
.kik-graph-spinner {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
z-index: 10;
font: var(--pat-throbber-size, 40px)/var(--pat-throbber-size, 40px) fontello;
text-align: center;
color: var(--pat-throbber-colour, rgba(0,0,0,0.45));
animation: spin 2s infinite linear;
}
.kik-graph-spinner:before {
content: var(--glyph-spinner);
}
.kik-graph-spinner.is-done {
display: none;
}
.tiptap-table-bubble {
position: absolute;
z-index: 1000;
display: flex;
gap: 2px;
padding: 3px;
background: var(--menu-background, var(--body-background, #fff));
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: var(--border-radii, 6px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
}
.tiptap-table-bubble[hidden] {
display: none;
}
.tiptap-table-bubble button {
appearance: none;
border: none;
background: none;
width: 28px;
height: 28px;
padding: 0;
border-radius: calc(0.5 * var(--border-radii, 6px));
font-size: 1rem;
line-height: 1;
color: var(--body-font-colour, #333);
display: inline-flex;
align-items: center;
justify-content: center;
}
.tiptap-table-bubble button::before {
font-family: "fontello";
font-size: 1rem;
}
@media (hover: hover) {
.tiptap-table-bubble button:hover {
background: rgba(0, 0, 0, 0.08);
}
}
.tiptap-table-bubble .sep {
width: 1px;
margin: 3px 2px;
background: rgba(0, 0, 0, 0.12);
}
@media (hover: hover) {
.tiptap-table-bubble .danger:hover {
background: rgba(200, 0, 0, 0.12);
color: #b00;
}
}
#document-body-whiteboard:has(.kik-wb-stage),
#document-body-whiteboard.kik-wb-body {
overflow: hidden;
}
.kik-wb-stage {
position: absolute;
inset: 0;
}
.kik-wb-editor {
position: absolute;
inset: 0;
}
.kik-wb-editor .imageEditorContainer {
width: 100%;
height: 100%;
}
.kik-wb-spinner {
position: absolute;
top: 50%;
left: 50%;
width: 50px;
height: 50px;
margin: -25px 0 0 -25px;
z-index: 20;
font: var(--pat-throbber-size, 40px)/var(--pat-throbber-size, 40px) fontello;
text-align: center;
color: var(--pat-throbber-colour, rgba(0,0,0,0.45));
animation: spin 2s infinite linear;
pointer-events: none;
}
.kik-wb-spinner:before {
content: var(--glyph-spinner);
}
.kik-wb-spinner.is-done {
display: none;
}
.kik-wb-stage {
--kik-wb-inset: var(--sidebar-margin, 15px);
--kik-wb-icon-size: calc(0.68 * var(--pat-toolbar-button-height));
}
.kik-wb-editor .imageEditorContainer {
--background-color-1: var(--colour-base-background, #ffffff);
--foreground-color-1: var(--pat-toolbar-button-text-colour, #2b2b2b);
--background-color-2: var(--colour-base-background, #f4f1ec);
--foreground-color-2: var(--pat-toolbar-button-text-colour, #2b2b2b);
--background-color-3: color-mix(in srgb, var(--pat-toolbar-icon-text-colour, #888) 12%, var(--colour-base-background, #fff));
--foreground-color-3: var(--pat-toolbar-button-text-colour, #2b2b2b);
--selection-background-color: var(--colour-accent, #6b46c1);
--selection-foreground-color: #ffffff;
--primary-action-foreground-color: var(--colour-accent, #6b46c1);
--icon-color: var(--pat-toolbar-icon-text-colour, #3a3a3a);
--shadow-color: rgba(0, 0, 0, 0.18);
--background-color-transparent: rgba(0, 0, 0, 0.30);
font-family: inherit;
}
.kik-wb-editor .toolbar-root.toolbar-edge-toolbar {
position: absolute;
top: var(--kik-wb-inset);
left: 50%;
transform: translateX(-50%);
z-index: var(--pat-toolbar-z-index, 2);
box-sizing: border-box;
width: max-content;
max-width: calc(100% - 2 * var(--kik-wb-inset));
flex-wrap: nowrap;
margin: 0;
padding: 0;
gap: var(--pat-toolbar-element-separation, 10px);
background: none;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
--toolbar-button-height: var(--pat-toolbar-button-height);
--toolbar-button-size: var(--pat-toolbar-button-height);
}
.kik-wb-editor .toolbar-edge-toolbar > div.toolbar-element.toolbar-tool-row,
.kik-wb-editor .toolbar-edge-toolbar > div.toolbar-element.toolbar-action-row {
background: transparent;
color: var(--pat-toolbar-icon-text-colour);
--icon-color: var(--pat-toolbar-icon-text-colour);
gap: var(--pat-toolbar-element-separation, 10px);
scrollbar-width: none;
-ms-overflow-style: none;
}
.kik-wb-editor .toolbar-edge-toolbar > div.toolbar-element::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
.kik-wb-editor .toolbar-edge-toolbar > div.toolbar-element.toolbar-action-row {
border-right: none;
margin-right: calc(0.6 * var(--pat-toolbar-element-separation, 10px));
}
@container screen style(--screen-small: true) {
.kik-wb-editor .toolbar-root.toolbar-edge-toolbar {
left: auto;
right: var(--kik-wb-inset);
transform: none;
max-width: calc(100% - 3 * var(--kik-wb-inset) - var(--pat-toolbar-button-height));
}
}
.kik-wb-editor .toolbar-edge-toolbar .toolbar-toolContainer > .toolbar-button,
.kik-wb-editor .toolbar-edge-toolbar > div.toolbar-element > button {
box-sizing: border-box;
width: var(--pat-toolbar-button-height);
min-width: var(--pat-toolbar-button-height);
height: var(--pat-toolbar-button-height);
padding: 0;
border: none;
border-radius: var(--button-border-radius);
background-color: var(--pat-toolbar-icon-frost-background);
color: var(--pat-toolbar-icon-text-colour);
box-shadow: var(--pat-toolbar-button-box-shadow);
-webkit-backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
}
.kik-wb-editor .toolbar-edge-toolbar .toolbar-toolContainer > .toolbar-button.has-dropdown {
padding: 0;
}
.kik-wb-editor .toolbar-edge-toolbar .toolbar-toolContainer.selected > .toolbar-button {
background-color: var(--selection-background-color);
color: var(--selection-foreground-color);
--icon-color: var(--selection-foreground-color);
}
.kik-wb-editor .toolbar-button,
.kik-wb-editor .toolbar-element button,
.kik-wb-editor .toolbar-element details > summary,
.kik-wb-editor .toolbar-element .clr-field * {
cursor: default;
}
.kik-wb-editor .toolbar-root .toolbar-button:focus-visible,
.kik-wb-editor .toolbar-root button:focus-visible {
outline: var(--pat-form-input-field-outline-focus);
outline-offset: var(--pat-form-input-field-outline-offset);
}
@media (hover: hover) {
.kik-wb-editor .toolbar-edge-toolbar .toolbar-toolContainer:not(.selected) > .toolbar-button:not(.disabled):hover,
.kik-wb-editor .toolbar-edge-toolbar > div.toolbar-element > button:not(:disabled):hover {
color: var(--pat-toolbar-icon-text-colour-hover);
background-color: var(--pat-toolbar-icon-background-colour-hover);
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter-hover);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter-hover);
text-decoration: none;
}
}
.kik-wb-editor .toolbar-root .toolbar-icon {
width: var(--kik-wb-icon-size);
height: var(--kik-wb-icon-size);
min-width: 0;
min-height: 0;
margin: auto;
flex-shrink: 0;
}
.kik-wb-editor .toolbar-edge-toolbar .toolbar-toolContainer:not(.selected):not(.dropdownShowable) > .toolbar-button > .toolbar-showHideDropdownIcon,
.kik-wb-editor .toolbar-edge-toolbar .toolbar-button > .toolbar-showHideDropdownIcon {
display: none;
}
.kik-wb-editor .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button > label,
.kik-wb-editor .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button > label {
background-color: var(--kik-tip-background);
color: var(--kik-tip-text-colour);
font-size: var(--kik-tip-font-size);
font-weight: var(--kik-tip-font-weight);
padding: var(--kik-tip-padding);
border-radius: var(--kik-tip-border-radius);
box-shadow: var(--kik-tip-box-shadow);
white-space: nowrap;
top: calc(100% + var(--kik-tip-gap));
left: 50%;
margin: 0;
transform: translateX(-50%);
}
@media (hover: hover) {
.kik-wb-editor .toolbar-edge-toolbar .toolbar-toolContainer:not(.no-icon):not(.label-inline) .toolbar-button:hover:not(:focus-visible) > label,
.kik-wb-editor .toolbar-edge-toolbar.one-row > * > .toolbar-toolContainer.label-inline > .toolbar-button:hover:not(:focus-visible) > label {
opacity: 1;
}
}
@container screen style(--screen-small: false) {
.kik-wb-editor .toolbar-edge-toolbar > div.toolbar-element.toolbar-tool-row,
.kik-wb-editor .toolbar-edge-toolbar > div.toolbar-element.toolbar-action-row {
overflow: visible;
}
}
@container screen style(--screen-small: false) {
.kik-wb-editor .toolbar-edge-toolbar > div.toolbar-element.has-scroll {
--button-label-hover-offset-y: var(--label-hover-offset-size);
--button-label-hover-offset-x: 0;
}
}
.kik-wb-editor .toolbar-edgemenu {
border-top-left-radius: var(--pat-toolbar-backdrop-border-radius, var(--border-radii));
border-top-right-radius: var(--pat-toolbar-backdrop-border-radius, var(--border-radii));
box-shadow: 0 -8px 34px rgba(0, 0, 0, 0.24);
padding-bottom: 10px;
}
.kik-wb-editor .toolbar-dropdown {
border-radius: var(--border-radii);
background-color: var(--background-color-1);
box-shadow: var(--default-box-shadow, 0 6px 24px rgba(0, 0, 0, 0.2));
border: var(--button-border);
padding: var(--pat-toolbar-padding, 10px);
}
.kik-wb-editor .toolbar-edgemenu-container button,
.kik-wb-editor .toolbar--pen-tool-toggle-buttons > * {
border-radius: var(--button-border-radius);
cursor: default;
}
.kik-wb-editor .toolbar--pen-tool-toggle-buttons > * {
margin-top: 4px;
}
.kik-wb-back {
position: absolute;
top: var(--kik-wb-inset);
left: var(--kik-wb-inset);
z-index: calc(var(--pat-toolbar-z-index, 2) + 1);
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
width: var(--pat-toolbar-button-height);
height: var(--pat-toolbar-button-height);
border: none;
border-radius: var(--button-border-radius);
background-color: var(--pat-toolbar-icon-frost-background);
color: var(--pat-toolbar-icon-text-colour);
box-shadow: var(--pat-toolbar-button-box-shadow);
-webkit-backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
cursor: default;
text-decoration: none;
}
.kik-wb-back > svg.kik-icon {
width: var(--kik-wb-icon-size);
height: var(--kik-wb-icon-size);
}
.kik-wb-back:focus {
outline: var(--pat-form-input-field-outline-focus);
outline-offset: var(--pat-form-input-field-outline-offset);
}
@media (hover: hover) {
.kik-wb-back:hover {
color: var(--pat-toolbar-icon-text-colour-hover);
background-color: var(--pat-toolbar-icon-background-colour-hover);
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter-hover);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter-hover);
text-decoration: none;
}
}
@media (hover: hover) {
.kik-wb-back[data-kik-wb-tip]:hover:after {
content: attr(data-kik-wb-tip);
position: absolute;
top: calc(100% + var(--kik-tip-gap));
left: 0;
background-color: var(--kik-tip-background);
color: var(--kik-tip-text-colour);
font-size: var(--kik-tip-font-size);
font-weight: var(--kik-tip-font-weight);
padding: var(--kik-tip-padding);
border-radius: var(--kik-tip-border-radius);
box-shadow: var(--kik-tip-box-shadow);
white-space: nowrap;
pointer-events: none;
}
}
.kik-wb-saving {
position: absolute;
top: 16px;
right: 16px;
z-index: 30;
font-size: 0.8rem;
color: var(--colour-muted, #888);
opacity: 0;
transition: opacity 0.2s ease;
pointer-events: none;
}
.kik-wb-saving.is-on {
opacity: 1;
}
.kik-wb-saving.is-failed {
color: var(--colour-warning, #b3261e);
font-weight: 600;
}
html.kik-one.kik-windowed .application-body.state-on .kik-wb-stage {
--kik-wb-inset: var(--kik-win-inset, 15px);
}
.kik-wikilink-suggest {
position: absolute;
z-index: 1100;
min-width: 220px;
max-width: 360px;
max-height: 16em;
overflow-y: auto;
padding: 4px;
background: var(--menu-background, var(--body-background, #fff));
border: 1px solid rgba(0, 0, 0, 0.15);
border-radius: var(--border-radii, 6px);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
font-size: 0.95rem;
}
.kik-wikilink-suggest[hidden] {
display: none;
}
.kik-wikilink-suggest .item {
display: flex;
align-items: center;
gap: 0.5em;
padding: 5px 8px;
border-radius: calc(0.5 * var(--border-radii, 6px));
color: var(--body-font-colour, #333);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.kik-wikilink-suggest .item.active {
background: var(--menu-item-hover-background, rgba(0, 0, 0, 0.08));
}
@media (hover: hover) {
.kik-wikilink-suggest .item:hover {
background: var(--menu-item-hover-background, rgba(0, 0, 0, 0.08));
}
}
.kik-wikilink-suggest .item::before {
font-family: "fontello";
font-size: 1rem;
opacity: 0.7;
flex: 0 0 auto;
}
.kik-wikilink-suggest .item .title {
overflow: hidden;
text-overflow: ellipsis;
}
.quaive-document-edit.type-markdown .ProseMirror {
font-family: var(--document-font-family);
font-size: 1.2rem;
}
.ProseMirror code:not(pre code) {
display: inline-block;
background-color: rgba(0, 0, 0, 0.15);
border-radius: var(--border-radii-small);
padding: 0 0.4em;
font-size: 0.8em;
font-family: monospace;
max-width: 100%;
overflow-wrap: anywhere;
}
.ProseMirror .kik-cl-mk {
display: none;
}
.ProseMirror ul.kik-cl-list {
list-style: none;
margin-top: 0;
margin-left: 0;
padding-left: 0;
margin-bottom: var(--pat-checklist-margin-bottom, 1rem);
}
.ProseMirror ul.kik-cl-list li.kik-cl-item {
list-style: none;
position: relative;
margin: 0 0 var(--pat-checklist-item-separation, 0.2em) 0 !important;
padding-left: var(--pat-checklist-padding-start, 1.5em) !important;
line-height: var(--pat-checklist-line-height, 24px);
}
.ProseMirror ul li.kik-cl-item::before {
content: none !important;
display: none !important;
}
.ProseMirror li.kik-cl-item > p {
margin: 0;
min-height: var(--pat-checklist-line-height, 24px);
}
.ProseMirror li.kik-cl-item > p > br.kik-cl-break + br.ProseMirror-trailingBreak {
display: none;
}
.ProseMirror .kik-cl-box {
position: absolute;
left: 0;
top: var(--pat-checklist-checkbox-vertical-position, 12px);
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--pat-checklist-checkbox-size, 18px);
height: var(--pat-checklist-checkbox-size, 18px);
box-shadow: var(--pat-checklist-checkbox-box-shadow, inset 0 0 0 2px black);
background-color: var(--pat-checklist-checkbox-background-colour, white);
border-radius: var(--pat-checklist-checkbox-border-radius, calc(0.25 * var(--pat-checklist-checkbox-size, 18px)));
cursor: default;
user-select: none;
transition: all 0.2s ease-out;
}
.ProseMirror .kik-cl-box.checked {
background-color: var(--pat-checklist-checkbox-background-colour-checked, var(--colour-accent));
box-shadow: var(--pat-checklist-checkbox-box-shadow-checked, none);
}
.ProseMirror .kik-cl-box.checked::before {
font-family: fontello;
content: var(--glyph-ok, '\e829');
color: white;
font-size: calc(0.7 * var(--pat-checklist-checkbox-size, 18px));
line-height: 1;
}
.post.item .type-diagram.document-preview figure {
box-sizing: border-box;
padding: var(--pat-well-padding, 20px);
margin: 0;
}
.post.item .type-diagram.document-preview .diagram-frame {
pointer-events: none;
}
.stream-items > .post.item {
min-width: 0;
}
.post.item .type-diagram.document-preview figure > a {
display: block;
}
.diagram-preview {
color-scheme: light;
background: #fff;
color: #1a1a1a;
}
body kik-diagram-frame:not(:defined),
kik-diagram-frame {
display: block;
}
.pat-toolbar .icon.create.kik-browse-create {
border-radius: 50%;
background-color: var(--app-colour, var(--button-background-colour-default));
color: var(--button-text-colour-default, #fff);
box-shadow: var(--pat-button-box-shadow-default);
}
.pat-toolbar .icon.create.kik-browse-create:before {
border-radius: 50%;
color: inherit;
}
.pat-toolbar .icon.create.kik-browse-create > svg.kik-icon {
color: inherit;
}
@media (hover: hover) {
.pat-toolbar .icon.create.kik-browse-create:hover {
background-color: var(--app-colour, var(--button-background-colour-default));
color: var(--button-text-colour-default, #fff);
filter: brightness(1.12);
}
}
.push-enable-banner {
position: fixed;
left: 12px;
right: 12px;
z-index: 9999;
bottom: var(--kik-dock-clearance, calc(12px + env(safe-area-inset-bottom, 0px)));
display: flex;
align-items: center;
gap: 14px;
padding: 16px 18px;
background: #fff;
color: #17191c;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
font: 16px/1.35 var(--body-font-family, system-ui, sans-serif);
max-width: 560px;
margin: 0 auto;
}
.push-enable-banner[hidden] {
display: none;
}
.push-enable-banner__icon {
font-size: 30px;
line-height: 1;
}
.push-enable-banner__icon img {
width: 40px;
height: 40px;
border-radius: 9px;
display: block;
}
.push-enable-banner__body {
flex: 1;
min-width: 0;
}
.push-enable-banner__title {
font-weight: 600;
}
.push-enable-banner__cta {
appearance: none;
border: 0;
background: var(--colour-primary, #17191c);
color: #fff;
padding: 11px 18px;
border-radius: 999px;
font-weight: 600;
white-space: nowrap;
font-size: inherit;
}
.push-enable-banner__cta:disabled {
opacity: 0.6;
}
.push-enable-banner__dismiss {
appearance: none;
background: transparent;
border: 0;
font-size: 26px;
line-height: 1;
color: #666;
padding: 4px 8px;
}
.pwa-install-banner {
position: fixed;
left: 12px;
right: 12px;
bottom: 12px;
z-index: 9999;
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
color: #17191c;
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
font: 14px/1.3 var(--body-font-family, system-ui, sans-serif);
max-width: 480px;
margin: 0 auto;
}
.pwa-install-banner[hidden] {
display: none;
}
.pwa-install-banner__icon img {
width: 36px;
height: 36px;
border-radius: 8px;
display: block;
}
.pwa-install-banner__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
}
.pwa-install-banner__title {
font-weight: 600;
}
.pwa-install-banner__hint {
font-size: 12px;
color: #666;
margin-top: 2px;
}
.pwa-install-banner__cta {
appearance: none;
border: 0;
background: var(--colour-primary, #17191c);
color: #fff;
padding: 8px 14px;
border-radius: 999px;
font-weight: 600;
white-space: nowrap;
}
.pwa-install-banner__cta:disabled {
opacity: 0.6;
cursor: default;
}
.pwa-install-banner__dismiss {
appearance: none;
background: transparent;
border: 0;
font-size: 22px;
line-height: 1;
color: #666;
padding: 4px 6px;
}
@media (display-mode: standalone) {
.pwa-install-banner {
display: none !important;
}
}
#global-nav-side .gns-apps .gns-item.gns-app-team-spaces:not(:has([data-gns-pinned])) {
display: none;
}
@container screen style(--screen-small: true) {
body[data-global-nav="side"] #global-nav-side .gns-apps .gns-item.gns-app-team-spaces {
display: block;
order: 1;
}
}
@container screen style(--screen-small: true) {
body[data-global-nav="side"] #global-nav-side .gns-more-item {
order: 2;
}
}
.pat-grid-list dd .functions .icon {
position: relative;
display: inline-block;
overflow: hidden;
text-indent: -1000em;
width: 1.8em;
height: 1.8em;
line-height: 1.8em;
text-align: left;
cursor: default;
}
body[dir='rtl'] .pat-grid-list dd .functions .icon {
text-align: right;
}
.pat-grid-list dd .functions .icon::before {
font-family: fontello;
text-indent: 0;
position: absolute;
inset: 0;
margin: 0;
width: 100%;
line-height: 1.8em;
text-align: center;
}
.select2-drop {
width: max-content !important;
min-width: min(var(--pat-context-menu-min-width, 250px), calc(100vw - 10px));
max-width: min(var(--pat-context-menu-max-width, 350px), calc(100vw - 10px));
margin-top: var(--pat-context-menu-gap, 14px);
background-color: transparent;
background-image: linear-gradient(
var(--pat-context-menu-fade-direction, to bottom),
var(--pat-context-menu-tip-colour) 0,
var(--pat-context-menu-background) 100%);
-webkit-backdrop-filter: var(--pat-context-menu-backdrop-filter, var(--pat-toolbar-button-backdrop-filter));
backdrop-filter: var(--pat-context-menu-backdrop-filter, var(--pat-toolbar-button-backdrop-filter));
border: var(--pat-context-menu-border, none);
border-radius: var(--pat-context-menu-radii);
box-shadow: var(--pat-context-menu-shadow, var(--default-box-shadow));
overflow: hidden;
}
@media (max-width: 680px) {
.select2-drop {
left: var(--small-screen-padding) !important;
right: var(--small-screen-padding) !important;
width: auto !important;
min-width: 0;
max-width: none;
}
}
.select2-drop.select2-drop-above {
margin-top: 0;
margin-bottom: var(--pat-context-menu-gap, 14px);
border-radius: var(--pat-context-menu-radii);
box-shadow: var(--pat-context-menu-shadow, var(--default-box-shadow));
}
.select2-container.select2-dropdown-open .select2-choice,
.select2-container.select2-dropdown-open .select2-choices,
.select2-container.select2-dropdown-open.select2-drop-above .select2-choice,
.select2-container.select2-dropdown-open.select2-drop-above .select2-choices,
.select2-container.select2-container-active .select2-choice,
.select2-container.select2-container-active .select2-choices {
border-top-left-radius: var(--pat-form-input-field-border-radius, var(--border-radii)) !important;
border-top-right-radius: var(--pat-form-input-field-border-radius, var(--border-radii)) !important;
border-bottom-right-radius: var(--pat-form-input-field-border-radius, var(--border-radii)) !important;
border-bottom-left-radius: var(--pat-form-input-field-border-radius, var(--border-radii)) !important;
}
.select2-drop .select2-results {
background: transparent;
}
.pat-toolbar .select2-container {
display: inline-flex;
align-items: center;
height: var(--pat-toolbar-button-height);
vertical-align: middle;
max-width: min(20rem, 45vw);
}
.pat-toolbar .select2-container:has(+ input[data-pat-autosuggest*="max-selection-size: 1;"]),
.pat-toolbar .select2-container:has(+ input[data-pat-autosuggest$="max-selection-size: 1"]) {
min-width: min(16rem, 45vw);
}
.pat-toolbar .select2-container .select2-choice {
max-width: 100%;
height: var(--pat-toolbar-button-height) !important;
min-height: var(--pat-toolbar-button-height);
box-sizing: border-box;
padding: 0 calc(var(--pat-select-arrow-space, 29px) + 26px) 0 var(--pat-select-box-padding-right-left, 20px);
line-height: var(--pat-toolbar-button-height);
font-size: var(--pat-toolbar-font-size);
border-radius: var(--pat-form-input-field-border-radius, var(--border-radii));
background-color: var(--pat-toolbar-icon-frost-background);
box-shadow: var(--pat-toolbar-button-box-shadow);
-webkit-backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
overflow: hidden;
}
@media (hover: hover) {
.pat-toolbar .select2-container .select2-choice:hover {
background-color: var(--pat-toolbar-icon-background-colour-hover);
}
}
.pat-toolbar .select2-container.select2-dropdown-open .select2-choice,
.pat-toolbar .select2-container.select2-container-active .select2-choice {
background-color: var(--pat-toolbar-icon-background-colour-hover);
box-shadow: var(--pat-toolbar-button-box-shadow);
}
.pat-toolbar .select2-container .select2-choice > .select2-chosen {
line-height: inherit;
margin: 0;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.select2-drop {
color: var(--body-font-colour);
}
.select2-results li em {
background: transparent;
color: inherit;
font-weight: 600;
}
.select2-results .select2-result-label {
white-space: pre-line;
}
.select2-results .kik-suggest-name,
.select2-results .kik-suggest-byline {
display: block;
}
.select2-results .kik-suggest-byline {
font-size: 0.85em;
opacity: 0.65;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.select2-drop .select2-search input,
.select2-drop .select2-results li,
.select2-drop .select2-results .select2-result-label {
border-radius: var(--border-radii);
}
.select2-container .select2-choice abbr.select2-search-choice-close {
--kik-select-clear-size: 11px;
--kik-select-clear-gap: 8px;
--kik-select-arrow-ink-width: 15px;
width: var(--kik-select-clear-size);
height: var(--kik-select-clear-size);
right: calc(var(--pat-auto-suggest-cancel-button-edge-distance, 12px)
+ var(--kik-select-arrow-ink-width)
+ var(--kik-select-clear-gap));
top: 50%;
transform: translateY(-50%);
color: var(--body-font-colour);
opacity: 0.55;
}
@media (hover: hover) {
.select2-container .select2-choice abbr.select2-search-choice-close:hover {
opacity: 1;
}
}
.select2-container .select2-choice abbr.select2-search-choice-close:before {
content: '';
position: absolute;
inset: 0;
width: auto;
height: auto;
background-color: currentColor;
-webkit-mask: url('/assets/libraries/quaive/glyphs/svg/close.svg') center / 207% no-repeat;
mask: url('/assets/libraries/quaive/glyphs/svg/close.svg') center / 207% no-repeat;
}
.select2-drop.kik-drop-sheet {
--kik-sheet-outset: 8px;
margin-top: calc(-1 * (var(--kik-drop-field-rise,
var(--pat-toolbar-button-height))
+ var(--kik-sheet-outset)));
margin-left: calc(-1 * var(--kik-sheet-outset));
--kik-sheet-width: max(calc(var(--kik-drop-field-width, 0px)
+ 2 * var(--kik-sheet-outset)),
var(--pat-context-menu-max-width, 350px));
width: var(--kik-sheet-width) !important;
max-width: calc(100vw - 10px);
min-width: 0;
border-radius: calc(var(--border-radii) + 4px);
overflow: hidden;
}
.select2-drop.kik-drop-sheet .select2-search {
padding: var(--kik-sheet-outset) var(--kik-sheet-outset) 0;
margin: 0;
position: relative;
}
.select2-drop.kik-drop-sheet .select2-search input {
box-sizing: border-box;
width: 100%;
height: var(--kik-drop-field-height, var(--pat-toolbar-button-height));
min-height: var(--kik-drop-field-height,
var(--pat-toolbar-button-height));
line-height: var(--kik-drop-field-height,
var(--pat-toolbar-button-height));
font-size: var(--pat-toolbar-font-size);
font-family: var(--body-font-family);
color: var(--body-font-colour);
padding: 0 calc(var(--pat-select-arrow-space, 29px) + 26px)
0 var(--pat-select-box-padding-right-left, 20px);
background: var(--colour-base-background);
border: none;
box-shadow: var(--pat-toolbar-button-box-shadow);
border-radius: var(--border-radii);
outline: none;
}
.select2-drop.kik-drop-sheet .select2-search input::placeholder {
color: var(--pat-form-placeholder-colour);
opacity: 1;
}
.select2-drop.kik-drop-sheet .select2-search::after {
content: "";
position: absolute;
top: var(--kik-sheet-outset);
bottom: 0;
right: calc(var(--kik-sheet-outset)
+ var(--pat-auto-suggest-cancel-button-edge-distance, 12px));
width: 18px;
background-color: currentColor;
color: var(--body-font-colour);
-webkit-mask-image: url("/assets/libraries/quaive/glyphs/svg/search.svg");
mask-image: url("/assets/libraries/quaive/glyphs/svg/search.svg");
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: 16px 16px;
mask-size: 16px 16px;
pointer-events: none;
}
.select2-drop.kik-drop-sheet .select2-search .kik-search-clear {
--kik-select-clear-size: 11px;
--kik-select-clear-gap: 8px;
--kik-select-arrow-ink-width: 15px;
position: absolute;
top: calc(var(--kik-sheet-outset)
+ var(--kik-drop-field-height,
var(--pat-toolbar-button-height)) / 2);
right: calc(var(--kik-sheet-outset)
+ var(--pat-auto-suggest-cancel-button-edge-distance, 12px)
+ var(--kik-select-arrow-ink-width)
+ var(--kik-select-clear-gap));
width: var(--kik-select-clear-size);
height: var(--kik-select-clear-size);
transform: translateY(-50%);
padding: 0;
border: 0;
background: transparent;
overflow: hidden;
text-indent: -1000em;
color: var(--body-font-colour);
opacity: 0.55;
z-index: 1;
}
.select2-drop.kik-drop-sheet .select2-search .kik-search-clear::before {
content: "";
position: absolute;
inset: 0;
background-color: currentColor;
-webkit-mask: url("/assets/libraries/quaive/glyphs/svg/close.svg") center / 207% no-repeat;
mask: url("/assets/libraries/quaive/glyphs/svg/close.svg") center / 207% no-repeat;
}
@media (hover: hover) {
.select2-drop.kik-drop-sheet .select2-search .kik-search-clear:hover {
opacity: 1;
}
}
.select2-drop.kik-drop-sheet .select2-search input:placeholder-shown ~ .kik-search-clear {
display: none;
}
.select2-drop.kik-drop-sheet .select2-results {
padding: 14px var(--kik-sheet-outset) var(--kik-sheet-outset);
margin: 0;
}
.select2-drop.kik-drop-maps .select2-results .select2-highlighted {
background: var(--app-colour-maps, var(--colour-accent));
}
.context-menu-popover[popover] {
position: fixed;
inset: auto;
margin: 0;
padding: 0;
border: 0;
overflow: visible;
width: max-content;
max-width: min(var(--pat-context-menu-max-width), calc(100vw - 10px));
box-sizing: border-box;
background: transparent;
color: var(--body-font-colour);
font-size: var(--body-font-size);
user-select: none;
border-radius: var(--pat-context-menu-radii);
-webkit-backdrop-filter: var(--pat-context-menu-backdrop-filter, var(--pat-toolbar-button-backdrop-filter));
backdrop-filter: var(--pat-context-menu-backdrop-filter, var(--pat-toolbar-button-backdrop-filter));
}
@media (hover: hover) {
.context-menu-popover[popover]:hover {
-webkit-backdrop-filter: var(--pat-context-menu-backdrop-filter-hover, var(--pat-toolbar-button-backdrop-filter-hover));
backdrop-filter: var(--pat-context-menu-backdrop-filter-hover, var(--pat-toolbar-button-backdrop-filter-hover));
}
}
.context-menu-popover[popover]:focus-visible {
outline: none;
}
@media print {
.context-menu-popover[popover] {
display: none !important;
}
}
.context-menu-content {
padding: var(--pat-context-menu-padding);
min-width: var(--pat-context-menu-min-width);
max-height: calc(100vh - 140px);
max-height: calc(100dvh - 140px);
overflow: auto;
box-sizing: border-box;
background-color: transparent;
background-image: linear-gradient(
var(--pat-context-menu-fade-direction, to bottom),
var(--pat-context-menu-tip-colour) 0,
var(--pat-context-menu-background) 100%);
border: var(--pat-context-menu-border, none);
border-radius: var(--pat-context-menu-radii);
box-shadow: var(--pat-context-menu-shadow, var(--default-box-shadow));
display: flex;
flex-direction: column;
gap: var(--pat-x-list-gutter, 8px);
}
.context-menu-content > *:last-child {
margin-bottom: 0;
}
.context-menu-popover::before,
.context-menu-popover::after {
content: '';
position: absolute;
width: var(--pat-context-menu-arrow-size);
height: var(--pat-context-menu-arrow-size);
background-color: var(--pat-context-menu-tip-colour);
transform: rotate(45deg);
}
.context-menu-popover::after {
z-index: -1;
border: var(--pat-context-menu-border, none);
box-shadow: var(--pat-context-menu-shadow, var(--default-box-shadow));
}
.context-menu-popover::before {
z-index: 0;
}
.context-menu-popover.no-tip::before,
.context-menu-popover.no-tip::after {
display: none;
}
.long-press-host {
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
}
@media (hover: none) {
.long-press-host,
.long-press-host a,
.long-press-host img {
-webkit-user-drag: none;
}
}
.pat-context-menu.touch-only.trigger-long-press {
position: absolute;
inset-inline-end: 0;
pointer-events: none;
opacity: 0;
}
.context-menu-popover[data-placement^="bottom"] {
--pat-context-menu-fade-direction: to bottom;
}
.context-menu-popover[data-placement^="top"] {
--pat-context-menu-fade-direction: to top;
}
.context-menu-popover[data-placement^="right"] {
--pat-context-menu-fade-direction: to right;
}
.context-menu-popover[data-placement^="left"] {
--pat-context-menu-fade-direction: to left;
}
.context-menu-popover[data-placement^="bottom"]::after {
top: calc(var(--pat-context-menu-arrow-size) / -2);
left: var(--pat-context-menu-arrow-offset, 50%);
}
.context-menu-popover[data-placement^="bottom"]::before {
top: calc(var(--pat-context-menu-arrow-size) / -2 + var(--pat-context-menu-border-width));
left: var(--pat-context-menu-arrow-offset, 50%);
}
.context-menu-popover[data-placement^="top"]::after {
bottom: calc(var(--pat-context-menu-arrow-size) / -2);
left: var(--pat-context-menu-arrow-offset, 50%);
}
.context-menu-popover[data-placement^="top"]::before {
bottom: calc(var(--pat-context-menu-arrow-size) / -2 + var(--pat-context-menu-border-width));
left: var(--pat-context-menu-arrow-offset, 50%);
}
.context-menu-popover[data-placement^="right"]::after {
left: calc(var(--pat-context-menu-arrow-size) / -2);
top: var(--pat-context-menu-arrow-offset, 50%);
}
.context-menu-popover[data-placement^="right"]::before {
left: calc(var(--pat-context-menu-arrow-size) / -2 + var(--pat-context-menu-border-width));
top: var(--pat-context-menu-arrow-offset, 50%);
}
.context-menu-popover[data-placement^="left"]::after {
right: calc(var(--pat-context-menu-arrow-size) / -2);
top: var(--pat-context-menu-arrow-offset, 50%);
}
.context-menu-popover[data-placement^="left"]::before {
right: calc(var(--pat-context-menu-arrow-size) / -2 + var(--pat-context-menu-border-width));
top: var(--pat-context-menu-arrow-offset, 50%);
}
.context-menu-popover .context-menu-content.pat-injection-sentinel.injecting {
position: relative;
min-height: 72px;
min-width: 108px;
--pat-throbber-size: 36px;
}
@supports (interpolate-size: allow-keywords) {
.context-menu-popover .context-menu-content {
interpolate-size: allow-keywords;
transition: width 160ms ease, height 160ms ease;
}
}
@supports (interpolate-size: allow-keywords) {
.context-menu-popover .context-menu-content.pat-injection-sentinel.injecting {
width: 108px;
height: 72px;
min-width: 0;
min-height: 0;
}
}
@supports (interpolate-size: allow-keywords) {
@media (prefers-reduced-motion: reduce) {
.context-menu-popover .context-menu-content {
transition: none;
}
}
}
@supports not (interpolate-size: allow-keywords) {
.context-menu-popover .context-menu-content > * {
animation: pat-context-menu-content-in 160ms ease both;
}
}
@supports not (interpolate-size: allow-keywords) {
@media (prefers-reduced-motion: reduce) {
.context-menu-popover .context-menu-content > * {
animation: none;
}
}
}
@keyframes pat-context-menu-content-in {
from {
opacity: 0;
transform: translateY(-3px);
}
to {
opacity: 1;
transform: none;
}
}
.context-menu-content .pat-menu-list {
margin: 0 -7px;
padding: 0;
list-style-type: none;
--pat-checklist-label-padding-start: var(--pat-menu-list-item-padding-start);
--pat-checklist-label-padding-end: 0.2em;
--pat-checklist-item-separation: 0;
}
.context-menu-content label.pat-checklist:has(input:checked)::before,
.context-menu-content .pat-checklist label:has(input:checked)::before {
color: var(--pat-checklist-checkbox-tick-colour, white);
}
.context-menu-content .separation-header {
margin: 10px 0;
color: var(--body-font-colour);
font-weight: bold;
font-size: 1em;
}
.context-menu-content .separation-header:first-child {
margin-top: 0;
}
.context-menu-content .separation-subheader {
margin: 12px 0 2px;
color: var(--body-font-colour);
font-weight: 600;
font-size: 0.8em;
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0.65;
}
.context-menu-content .separation-header + .separation-subheader {
margin-top: 4px;
}
.context-menu-content .pat-link-list + .pat-link-list {
margin-top: 1em;
}
.context-menu-popover.toolbar-menu .context-menu-content {
max-height: calc(100vh - 260px);
}
.context-menu-popover.toolbar-menu-hero .context-menu-content {
max-height: calc(100vh - 470px);
}
.context-menu-popover.candy-box .context-menu-content,
.context-menu-popover.app-label-menu .context-menu-content {
min-width: 0;
}
.context-menu-popover.candy-box {
width: min(92vw, 460px);
max-width: min(92vw, 460px);
}
@container screen style(--screen-small: false) {
.context-menu-popover[popover] .context-menu-content {
min-width: 220px;
}
}
@container screen style(--screen-small: false) {
.context-menu-popover .context-menu-content.pat-injection-sentinel.injecting {
min-width: 220px;
width: 220px;
}
}
@container screen style(--screen-small: true) {
.context-menu-popover.candy-box,
.context-menu-popover.app-label-menu,
.context-menu-popover.personal-menu {
inset: calc(var(--global-header-height) + 15px) 15px auto 15px !important;
max-width: none !important;
width: auto !important;
}
}
@container screen style(--screen-small: true) {
.context-menu-popover.app-label-menu {
inset: calc(var(--global-header-height) + 15px) 50px auto 15px !important;
}
}
@container screen style(--screen-small: true) {
.context-menu-popover.personal-menu {
inset: calc(var(--global-header-height) + 15px) 15px auto 50px !important;
}
}
@container screen style(--screen-small: true) {
.context-menu-popover.candy-box .context-menu-content,
.context-menu-popover.app-label-menu .context-menu-content,
.context-menu-popover.personal-menu .context-menu-content {
max-height: calc(100vh - var(--global-header-height) - 30px);
max-height: calc(100dvh - var(--global-header-height) - 30px);
}
}
@container screen style(--screen-small: true) {
.context-menu-popover.candy-box::before,
.context-menu-popover.candy-box::after,
.context-menu-popover.app-label-menu::before,
.context-menu-popover.app-label-menu::after,
.context-menu-popover.personal-menu::before,
.context-menu-popover.personal-menu::after {
display: none;
}
}
@container screen style(--screen-small: false) {
.context-menu-popover[popover] .context-menu-content {
min-width: 220px;
}
}
.context-menu-popover[popover] .context-menu-content:has(.pat-well) {
gap: var(--pat-context-menu-padding);
}
.context-menu-popover[popover] .pat-well {
margin-bottom: 0;
}
.context-menu-popover[popover] .pat-well {
border-radius: var(--border-radii-small);
}
.context-menu-popover[popover] .pat-message {
border-radius: var(--border-radii-small);
--pat-message-padding: var(--pat-context-menu-padding);
--default-tail-white: var(--pat-context-menu-padding);
--pat-message-margin-bottom: var(--default-tail-white);
}
.pat-context-menu .menu-trigger-badge {
position: absolute;
top: 0;
inset-inline-end: 0;
transform: translate(40%, -40%);
margin: 0;
z-index: 1;
box-sizing: border-box;
min-width: 20px;
height: 20px;
padding: 0 5px;
border-radius: 10px;
border: 1px solid white;
background-color: red;
color: white;
font-size: 12px;
line-height: 17px;
text-align: center;
text-indent: 0;
}
body[dir=rtl] .pat-context-menu .menu-trigger-badge {
transform: translate(-40%, -40%);
}
.pat-context-menu .menu-trigger-badge:not(.has-unread) {
display: none;
}
.pat-context-menu:has(> .menu-trigger-badge) {
position: relative;
overflow: visible;
}
.pat-button {
max-width: 100%;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
label.pat-button > input[type="file"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
label.pat-button:focus-within {
outline: var(--pat-form-input-field-outline-focus);
outline-offset: var(--pat-form-input-field-outline-offset);
}
.pat-button {
filter: var(--pat-button-filter);
}
.pat-button.default {
filter: var(--pat-button-filter-default);
}
.pat-button.warning {
filter: var(--pat-button-filter-warning);
}
.pat-button.success {
filter: var(--pat-button-filter-success);
}
@media (hover: hover) {
.pat-button:hover {
filter: var(--pat-button-filter-hover);
}
}
@media (hover: hover) {
.pat-button.default:hover {
filter: var(--pat-button-filter-default-hover);
}
}
@media (hover: hover) {
.pat-button.warning:hover {
filter: var(--pat-button-filter-warning-hover);
}
}
@media (hover: hover) {
.pat-button.success:hover {
filter: var(--pat-button-filter-success-hover);
}
}
.pat-button:disabled,
.pat-button[disabled],
.pat-button.disabled {
opacity: 0.5;
filter: saturate(0.3);
}
.pat-well .panel-content > :last-child {
margin-bottom: 0;
}
.pat-well .panel-content * {
--border-radii: var(--border-radii-medium);
--pat-form-input-field-border-radius: var(--border-radii-medium);
--pat-table-border-radius: var(--border-radii-medium);
}
.pat-well > .well-title-group:last-child {
margin-bottom: 0;
padding: 0;
}
.well-title-group .quaive-page-head:has(> h1:only-child) {
display: flex;
align-items: center;
min-height: var(--kik-app-icon-box, 36px);
}
.well-title-group .quaive-page-head:has(> h1:only-child) > h1 {
margin: 0;
}
.pat-lazy-load.infinite-scrolling {
--pat-lazy-lead: 120vh;
--pat-lazy-pull: 90vh;
--pat-lazy-reserve: 60vh;
display: block;
margin-top: calc(-1 * var(--pat-lazy-pull));
padding-top: var(--pat-lazy-lead);
padding-bottom: var(--pat-lazy-reserve);
pointer-events: none;
}
.pat-lazy-load.infinite-scrolling.is-lazy-failed {
pointer-events: auto;
}
.pat-lazy-load.infinite-scrolling::before {
top: var(--pat-lazy-lead);
opacity: 1;
z-index: 0;
}
@media (prefers-reduced-motion: no-preference) {
.pat-lazy-load.infinite-scrolling::before {
animation: spin 2s infinite linear;
}
}
.pat-link-list > li.lazy-loaded {
animation: kik-lazy-fade-in 1s ease-out both;
}
@keyframes kik-lazy-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.pat-link-list > li.lazy-loaded {
animation: none;
}
}
li:has(> .pat-lazy-load.infinite-scrolling) {
column-span: all;
}
a.pat-lazy-load[data-pat-inject*="trigger: autoload"] {
pointer-events: none;
}
.pat-grid-list.mobile-rows {
display: grid;
grid-column-gap: 0;
grid-template-columns: var(--grid-list-label-col, 40%) minmax(0, 1fr);
}
.pat-grid-list.mobile-rows > dt {
width: auto;
float: none;
display: block;
clear: none;
margin: 0;
overflow: visible;
padding-right: 2%;
padding-bottom: 0.5em;
border-top: none;
}
.pat-grid-list.mobile-rows > dd {
width: auto;
float: none;
border: none;
overflow: visible;
}
.pat-grid-list.mobile-rows > dd::before {
content: '';
position: absolute;
inset-inline: 0;
top: auto;
translate: 0 calc(-1 * var(--grid-list-row-pad, 0.5em));
border-top: 1px solid var(--default-border-colour);
}
@media print {
.pat-grid-list.mobile-rows > dd::before {
display: none;
}
}
.pat-grid-list dd:has(> .icon) > :not(.icon) {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pat-grid-list.vertical {
display: block;
border-bottom: none;
}
.pat-grid-list.vertical > dt {
width: auto;
float: none;
clear: none;
overflow: visible;
border-top: none;
margin: 0;
padding: 0 0 0.15em;
font-size: var(--grid-list-label-size, 0.6em);
font-weight: var(--grid-list-label-weight, 600);
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--grid-list-label-colour, var(--colour-byline, #888));
}
.pat-grid-list.vertical > dd {
width: auto;
float: none;
overflow: visible;
border: none;
padding: 0;
margin: 0 0 var(--grid-list-vertical-gap, 1.1em);
}
.pat-grid-list.vertical > dd::before {
content: none;
}
.pat-grid-list.vertical > dd:last-of-type {
margin-bottom: 0;
}
.pat-grid-list dd {
-webkit-user-select: text;
user-select: text;
}
.pat-grid-list dd .icon,
.pat-grid-list dd .functions {
-webkit-user-select: none;
user-select: none;
}
.pat-depends.hidden {
display: none;
}
.modal-space {
transition: all var(--base-animation-duration);
position: fixed;
inset: 0;
pointer-events: none;
container-type: size;
container-name: modal-space;
background-color: rgba(0, 0, 0, 0);
}
.modal-space.injecting:before {
opacity: 1;
position: absolute;
top: 50%;
left: 50%;
content: var(--glyph-spinner);
width: 50px;
height: 50px;
margin-top: -25px;
margin-left: -25px;
z-index: 1000;
font: var(--pat-throbber-size)/var(--pat-throbber-size) fontello;
text-shadow: white 0 0 2px;
text-align: center;
opacity: 0;
animation: spin 2s infinite linear, fadeIn 1s 1s linear 1 forwards;
color: var(--pat-throbber-colour, black);
text-shadow: var(--pat-throbber-text-shadow, none);
-webkit-text-stroke: 1px var(--pat-throbber-text-stroke, transparent);
align-self: center;
justify-self: center;
}
@media (prefers-reduced-motion: reduce) {
.modal-space.injecting:before {
animation: none;
content: var(--glyph-hourglass-1);
font-size: 35px;
}
}
.modal-space::after {
content: '';
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
opacity: 0;
transition: opacity var(--base-animation-duration);
background-color: var(--pat-modal-panel-space-background-colour);
-webkit-backdrop-filter: var(--pat-modal-panel-space-backdrop-filter);
backdrop-filter: var(--pat-modal-panel-space-backdrop-filter);
}
.modal-space:has(dialog[open]),
.modal-space.injecting {
pointer-events: initial;
}
.modal-space:has(dialog[open])::after,
.modal-space.injecting::after {
opacity: 1;
}
.modal-space:has(dialog[open]):first-child::after,
.modal-space.injecting:first-child::after {
background: var(--colour-base);
}
.application-body:has(> .modal-space) {
position: relative;
}
.application-body > .modal-space {
position: absolute;
z-index: var(--modal-space-z-index, 9997);
}
.application-body > .modal-space > .pat-modal-panel {
position: absolute;
}
.pat-modal-panel > .modal-panel-contents {
container-name: screen document;
container-type: inline-size;
--screen-small: false;
--screen-medium: false;
--screen-large: false;
}
@container modal-space (width <= 680px) {
.pat-modal-panel > .modal-panel-contents {
--screen-small: true;
}
}
@container modal-space (481px <= width <= 1025px) {
.pat-modal-panel > .modal-panel-contents {
--screen-medium: true;
}
}
@container modal-space (width > 1279px) {
.pat-modal-panel > .modal-panel-contents {
--screen-large: true;
}
}
.application-body > .modal-space {
container-name: screen modal-space;
--screen-small: false;
--screen-medium: false;
--screen-large: false;
}
@container main (width <= 680px) {
.application-body > .modal-space {
--screen-small: true;
}
}
@container main (481px <= width <= 1025px) {
.application-body > .modal-space {
--screen-medium: true;
}
}
@container main (width > 1279px) {
.application-body > .modal-space {
--screen-large: true;
}
}
@container screen style(--screen-small: false) {
.pat-modal-panel:is(.medium, .large) .quaive-document-edit {
--quaive-document-padding-left: 0;
--quaive-document-padding-right: 0;
}
}
.pat-modal-panel {
--pat-modal-inset: 25px;
--pat-toolbar-padding: var(--pat-modal-inset);
--modal-panel-body-left-right-padding: var(--pat-modal-inset);
}
@container screen style(--screen-small: true) {
.pat-modal-panel {
--pat-modal-inset: var(--small-screen-padding);
}
}
.pat-modal-panel:has(.pat-miller-columns) > .modal-panel-contents > * {
--modal-panel-body-left-right-padding: var(--pat-toolbar-padding);
}
@container screen style(--screen-small: true) {
.modal-panel-body {
--quaive-document-padding-left: 0;
--quaive-document-padding-right: 0;
}
}
@container screen style(--screen-medium: true) {
.modal-panel-body {
--quaive-document-padding-left: 0;
--quaive-document-padding-right: 0;
}
}
.application-body:has(.kiki-dock:not(.closing)):has(> .modal-space > dialog.pat-modal-panel[open]) {
--kik-kiki-dock-inset: var(--modal-panel-gap);
--pat-modal-panel-panel-box-shadow: var(--kik-kiki-dock-box-shadow);
}
.application-body:has(.kiki-dock:not(.closing)):has(> .modal-space > dialog.pat-modal-panel[open])::after {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: calc(var(--kik-kiki-dock-width) + var(--kik-kiki-dock-inset));
z-index: var(--modal-space-z-index, 9997);
pointer-events: none;
background-color: var(--pat-modal-panel-space-background-colour);
-webkit-backdrop-filter: var(--pat-modal-panel-space-backdrop-filter);
backdrop-filter: var(--pat-modal-panel-space-backdrop-filter);
}
.application-body:has(.kiki-dock:not(.closing)):has(> .modal-space > dialog.pat-modal-panel[open]) > .modal-space {
right: calc(var(--kik-kiki-dock-width) + var(--kik-kiki-dock-inset));
}
.application-body:has(.kiki-dock:not(.closing)):has(> .modal-space > dialog.pat-modal-panel[open]) > .modal-space > .pat-modal-panel {
--modal-panel-side-slot: 0px;
--modal-panel-edge-clearance: var(--modal-panel-gap);
}
.application-body:has(.kiki-dock:not(.closing)):has(> .modal-space > dialog.pat-modal-panel[open]) > .modal-space .modal-panel-step {
opacity: 0;
pointer-events: none;
transition: opacity var(--base-animation-duration) ease;
}
.application-body {
--modal-panel-edge-clearance: 10px;
--modal-panel-gap: 20px;
}
@media (max-width: 680px) {
.application-body > .modal-space {
--modal-space-z-index: 10000;
z-index: 10000;
}
}
@media (max-width: 680px) {
.application-body:has(.kiki-dock:not(.closing)):has(> .modal-space > dialog.pat-modal-panel[open])::after {
content: none;
}
}
@media (max-width: 680px) {
.application-body:has(.kiki-dock:not(.closing)):has(> .modal-space > dialog.pat-modal-panel[open]) > .modal-space {
left: 0;
right: 0;
}
}
@media (max-width: 680px) {
.application-body:has(.kiki-dock:not(.closing)):has(> .modal-space > dialog.pat-modal-panel[open]) .kiki-dock {
z-index: 10001;
max-height: min(60dvh,
calc(100dvh
- var(--kik-dock-clearance, 0.5rem)
- var(--small-screen-padding)));
}
}
.application-body:has(> .modal-space > dialog.pat-modal-panel[open]) .kiki-dock {
z-index: 9999;
}
.pat-modal-panel {
--modal-close-slot: calc(var(--pat-toolbar-button-height) + var(--pat-toolbar-element-separation, 0.5rem));
}
.pat-modal-panel:not(:has(> .modal-panel-close-button)) {
--modal-close-slot: 0px;
}
.pat-modal-panel:has(> .modal-panel-close-button:not(.mobile-close)):not(:has(.modal-panel-footer .pat-button.close-panel)) .modal-toolbar .toolbar-section.quick-functions {
padding-inline-end: var(--modal-close-trailing-reserve, var(--modal-close-slot));
}
@container screen style(--screen-small: true) {
.pat-modal-panel:has(> .modal-panel-close-button) .modal-toolbar .toolbar-section.quick-functions {
padding-inline-end: var(--modal-close-trailing-reserve, var(--modal-close-slot));
}
}
.pat-modal-panel {
position: fixed;
z-index: 9998;
--modal-panel-edge-clearance: 10px;
--modal-panel-gap: 20px;
--kik-dock-reserve: var(--kik-dock-clearance, 0px);
--modal-panel-gutter-block: var(--modal-panel-gap);
--modal-panel-side-slot: calc(var(--pat-toolbar-button-height) + var(--pat-toolbar-element-separation, 0.5rem));
--modal-panel-gutter-inline: calc(var(--modal-panel-side-slot) + var(--modal-panel-edge-clearance));
max-width: calc(100% - 2 * var(--modal-panel-gutter-inline));
max-height: calc(100% - 2 * var(--modal-panel-gutter-block));
width: var(--modal-panel-width-medium);
top: 50%;
left: 50%;
right: auto;
transform: translate(-50%, -50%);
animation: fadeIn var(--base-animation-duration);
padding: 0;
margin: 0;
z-index: 9998;
border: none;
background-color: transparent;
color: var(--body-font-colour);
}
.pat-modal-panel[open] {
display: flex;
flex-direction: column;
}
body:has(.application-body.state-on.focus-document .document-body:is(.scroll-position-bottom, .scroll-down:not(.scroll-position-top))) .pat-modal-panel,
body:has(.application-body.state-on.focus-sidebar .sidebar-content:is(.scroll-position-bottom, .scroll-down:not(.scroll-position-top))) .pat-modal-panel {
--kik-dock-reserve: 0px;
}
@container screen style(--screen-small: true) {
.pat-modal-panel {
--modal-panel-side-slot: 0px;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel:not(.collapse-screen) {
top: calc(50% - var(--kik-dock-reserve, 0px) / 2);
max-height: calc(100% - 1 * var(--modal-panel-gutter-block)
- var(--kik-dock-reserve, 0px));
transition:
top calc(var(--base-animation-duration, 0.25s) * 2) ease,
max-height calc(var(--base-animation-duration, 0.25s) * 2) ease;
}
}
.pat-modal-panel.small {
width: var(--modal-panel-width-small);
}
.pat-modal-panel .modal-panel-contents {
position: relative;
background-color: var(--colour-base-background);
border-radius: var(--border-radii);
box-shadow: var(--pat-modal-panel-panel-box-shadow);
}
.pat-modal-panel .modal-panel-contents:after {
content: ' ';
display: table;
clear: both;
}
.pat-modal-panel .modal-panel-header {
margin: 0;
padding: 20px 20px;
}
.pat-modal-panel .modal-panel-header .modal-panel-title {
font-weight: bold;
text-overflow: ellipsis;
overflow: hidden;
text-align: center;
font-size: 20px;
}
.pat-modal-panel .modal-panel-header .modal-panel-close-button {
position: absolute;
top: 1.5em;
right: 1.5em;
width: var(--close-button-height);
height: var(--close-button-height);
border-radius: var(--border-radii);
color: transparent !important;
filter: none;
border: none;
background: none;
outline: none;
display: block;
padding: 0;
margin: 0;
transition: transform var(--base-animation-duration) ease-out;
z-index: 2;
font-size: 0;
position: absolute;
top: 20px;
right: 20px;
z-index: 1;
color: transparent;
}
.pat-modal-panel .modal-panel-header .modal-panel-close-button:focus {
outline: var(--pat-form-input-field-outline-focus);
outline-offset: var(--pat-form-input-field-outline-offset);
}
.pat-modal-panel .modal-panel-header .modal-panel-close-button:active {
box-shadow: inherit;
transform: scale(0.9);
box-shadow: none;
}
.pat-modal-panel .modal-panel-header .modal-panel-close-button:before {
font-family: fontello;
content: var(--glyph-cancel);
display: block;
width: var(--close-button-height);
text-align: center;
font-size: calc(0.7 * var(--close-button-height));
margin: 0;
display: block;
border-radius: var(--border-radii);
text-indent: 1%;
line-height: calc(0.95 * var(--close-button-height));
height: var(--close-button-height);
color: var(--button-text-colour);
background-color: var(--button-background-colour);
}
@media (hover: hover) {
.pat-modal-panel .modal-panel-header .modal-panel-close-button:before:hover {
color: var(--button-text-colour-hover);
background-color: var(--button-background-colour-hover);
text-decoration: none;
}
}
.pat-modal-panel .pat-toolbar {
margin-bottom: 10px;
}
.pat-modal-panel .modal-toolbar {
--pat-toolbar-margin-bottom: 0;
padding-inline-start: var(--pat-toolbar-padding);
padding-inline-end: calc(var(--pat-toolbar-padding) + var(--modal-toolbar-trailing-reserve, 0px));
margin-bottom: 10px;
}
.pat-modal-panel .modal-toolbar .toolbar-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 20px !important;
}
.pat-modal-panel .modal-floating-icon,
.pat-modal-panel > .modal-panel-close-button {
position: absolute;
z-index: calc(var(--pat-toolbar-z-index, 100) + 1);
box-sizing: border-box;
width: var(--pat-toolbar-button-height);
height: var(--pat-toolbar-button-height);
min-width: var(--pat-toolbar-button-height);
padding: 0;
margin: 0;
border: none;
font-size: 0;
line-height: var(--pat-toolbar-button-line-height);
text-align: center;
text-decoration: none;
border-radius: var(--button-border-radius);
background-color: var(--pat-toolbar-icon-frost-background);
color: var(--pat-toolbar-icon-text-colour);
box-shadow: var(--pat-toolbar-button-box-shadow);
-webkit-backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
cursor: default;
}
.pat-modal-panel .modal-floating-icon > svg.kik-icon,
.pat-modal-panel > .modal-panel-close-button > svg.kik-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: var(--kik-toolbar-icon-size);
height: var(--kik-toolbar-icon-size);
display: block;
pointer-events: none;
color: var(--pat-toolbar-icon-text-colour);
}
.pat-modal-panel .modal-floating-icon:focus,
.pat-modal-panel > .modal-panel-close-button:focus {
outline: var(--pat-form-input-field-outline-focus);
outline-offset: var(--pat-form-input-field-outline-offset);
}
@media (hover: hover) {
.pat-modal-panel .modal-floating-icon:hover,
.pat-modal-panel > .modal-panel-close-button:hover {
background-color: var(--pat-toolbar-icon-background-colour-hover);
color: var(--pat-toolbar-icon-text-colour-hover);
text-decoration: none;
}
}
@media (hover: hover) {
.pat-modal-panel .modal-floating-icon:hover > svg.kik-icon,
.pat-modal-panel > .modal-panel-close-button:hover > svg.kik-icon {
color: var(--pat-toolbar-icon-text-colour-hover);
}
}
.pat-modal-panel > .modal-panel-close-button {
top: var(--pat-toolbar-padding);
inset-inline-end: var(--pat-toolbar-padding);
inset-inline-start: auto;
}
@container screen style(--screen-small: true) {
.pat-modal-panel > .modal-panel-close-button {
--pat-toolbar-padding: var(--pat-modal-inset);
}
}
.pat-modal-panel:has(.modal-panel-footer .pat-button.close-panel) > .modal-panel-close-button,
.pat-modal-panel > .modal-panel-close-button.mobile-close {
display: none;
}
.pat-modal-panel > .modal-panel-close-button > svg.kik-icon:nth-of-type(2) {
display: none;
}
.pat-modal-panel .modal-panel-contents:has(> .modal-panel-body) {
flex: 0 1 auto;
min-height: 0;
max-height: none;
overflow: auto;
overscroll-behavior: contain;
}
.pat-modal-panel .modal-panel-contents:has(> .modal-panel-body) > .modal-toolbar {
position: fixed;
top: 0;
inset-inline: 0;
margin-bottom: 0;
z-index: var(--pat-toolbar-z-index, 2);
border-start-start-radius: var(--border-radii);
border-start-end-radius: var(--border-radii);
}
@container screen style(--screen-small: true) {
.pat-modal-panel .modal-panel-contents:has(> .modal-panel-body) > .modal-toolbar {
border-start-start-radius: 0;
border-start-end-radius: 0;
}
}
.pat-modal-panel .modal-panel-contents:has(> .modal-panel-body) > .modal-toolbar::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-start-start-radius: inherit;
border-start-end-radius: inherit;
background-color: var(--pat-surface-background-colour);
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
border-bottom: 1px solid var(--default-border-colour);
opacity: 0;
transition: opacity var(--base-animation-duration, 0.3s);
pointer-events: none;
}
.pat-modal-panel .modal-panel-contents:has(> .modal-panel-body):not(.scroll-position-top) > .modal-toolbar::after {
opacity: 1;
}
.pat-modal-panel .modal-panel-contents:has(> .modal-panel-body) > .modal-panel-body {
min-height: 200px;
max-height: none;
overflow: visible;
padding-top: calc(var(--pat-toolbar-button-height)
+ 2 * var(--pat-toolbar-padding));
}
.pat-modal-panel .modal-panel-contents:not(:has(.modal-panel-footer)) > .modal-panel-body {
padding-bottom: var(--modal-panel-body-left-right-padding);
}
.pat-modal-panel .modal-panel-contents:not(:has(> .modal-toolbar)):has(> .modal-panel-body) > .modal-panel-body {
padding-top: var(--pat-modal-inset);
}
.pat-modal-panel .modal-panel-body {
overflow: visible;
max-height: none;
min-height: 200px;
width: 100%;
max-width: 100%;
padding: var(--modal-panel-body-top-padding) var(--pat-modal-inset) 0;
box-sizing: border-box;
}
.pat-modal-panel .modal-panel-body > .form-fields {
padding-bottom: 20px;
}
.pat-modal-panel .modal-panel-body > .modal-panel-main-button-bar {
position: -webkit-sticky !important;
position: sticky !important;
bottom: 0;
margin-top: 0;
margin-bottom: 0;
margin-bottom: 1px;
background: var(--colour-base-background);
padding-bottom: calc(var(--pat-toolbar-padding) - 1px);
padding-top: var(--pat-toolbar-padding);
border-top: 1px solid var(--kik-modal-footer-hairline, white);
z-index: 10;
}
.pat-modal-panel .modal-panel-body > .modal-panel-main-button-bar.bumped-bottom {
border-top: var(--default-border);
padding-bottom: var(--pat-toolbar-padding);
}
.pat-modal-panel .sliding-sheets {
width: 100%;
overflow-x: scroll;
overflow-y: hidden;
scroll-snap-type: x mandatory;
display: grid;
grid-auto-flow: column;
grid-auto-columns: 100%;
scroll-behavior: smooth;
margin-bottom: 77px;
-ms-overflow-style: none;
scrollbar-width: none;
}
.pat-modal-panel .sliding-sheets .modal-panel-body {
width: var(--modal-panel-width-large);
}
.pat-modal-panel .sliding-sheets::-webkit-scrollbar {
display: none;
}
.pat-modal-panel .sliding-sheets .modal-panel-footer {
display: none;
}
.pat-modal-panel .sliding-sheets .modal-panel-footer,
.pat-modal-panel .sliding-sheets + .modal-panel-footer {
position: absolute;
bottom: 0;
right: 30px;
left: 30px;
margin: 0;
padding-top: 20px;
padding-bottom: 20px;
border-top: var(--default-border);
background-color: var(--colour-base-background);
}
.pat-modal-panel .sliding-sheets .modal-panel-body {
scroll-snap-align: center;
}
.pat-modal-panel .sliding-sheets .modal-panel-body:target .modal-panel-footer,
.pat-modal-panel .sliding-sheets .modal-panel-body:first-child .modal-panel-footer {
display: block;
}
.pat-modal-panel.large {
width: var(--modal-panel-width-large);
}
.pat-modal-panel.preview-image {
--kik-preview-ratio: 1.5;
aspect-ratio: var(--kik-preview-ratio);
height: auto;
width: max(
calc(2 * var(--pat-toolbar-button-height) + 4 * var(--pat-modal-inset)),
min(
var(--kik-preview-natural-width, 100%),
calc(100% - 2 * var(--modal-panel-gutter-inline)),
calc((100cqh - 2 * var(--modal-panel-gutter-block)) * var(--kik-preview-ratio))
)
);
}
.pat-modal-panel.preview-image > .modal-panel-contents {
min-height: 0;
height: 100%;
overflow: hidden;
}
.pat-modal-panel.preview-image > .modal-panel-contents > .pat-toolbar.modal-toolbar {
position: absolute;
inset: 0 0 auto;
z-index: 2;
background: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
border: 0;
}
.pat-modal-panel.preview-image .modal-panel-body,
.pat-modal-panel.preview-image .quaive-document,
.pat-modal-panel.preview-image .quaive-page-modules,
.pat-modal-panel.preview-image .page-module.type-image,
.pat-modal-panel.preview-image figure.quaive-illustration,
.pat-modal-panel.preview-image figure.quaive-illustration > a,
.pat-modal-panel.preview-image figure.quaive-illustration picture {
display: block;
margin: 0;
padding: 0;
gap: 0;
min-height: 0;
height: 100%;
border: 0;
background: none;
box-shadow: none;
}
.pat-modal-panel.preview-image figure.quaive-illustration img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
border-radius: inherit;
}
@media print {
body.modal-active > *:not(.pat-modal) {
display: none;
}
}
@keyframes show-sheet {
0% {
opacity: 0;
transform: translate(-50%, 100%);
}
100% {
opacity: 1;
transform: translate(-50%, 0);
}
}
@media screen {
div.pat-modal.sheet {
position: absolute;
left: 50%;
max-width: 840px;
width: 90%;
bottom: 0;
top: 80px !important;
z-index: 10000;
animation: show-sheet 0.4s;
box-sizing: border-box;
transform: translate(-50%, 0);
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
}
@media print {
div.pat-modal.sheet {
transform: translate(0, 0) !important;
}
}
div.pat-modal.sheet .close-panel {
position: absolute;
top: 25px;
right: 25px;
z-index: 1;
color: transparent;
}
@media (hover: hover) {
div.pat-modal.sheet .close-panel:hover:before {
background-color: rgba(black, 0.4);
}
}
div.pat-modal.sheet .close-panel:before {
font-family: fontello;
content: var(--glyph-cancel);
color: white;
border-radius: 50%;
background-color: rgba(black, 0.3);
width: var(--close-button-height);
height: var(--close-button-height);
line-height: var(--close-button-height);
text-align: center;
display: block;
font-size: 28px;
}
@media print {
div.pat-modal.sheet .close-panel {
display: none !important;
}
}
@media screen {
div.pat-modal.sheet .panel-content {
overflow: auto;
padding: 80px;
background-color: var(--colour-base-background);
border-top-left-radius: var(--border-radii);
border-top-right-radius: var(--border-radii);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
box-shadow: var(--pat-modal-panel-panel-box-shadow);
}
}
@media print {
div.pat-modal.sheet .panel-content {
overflow: visible;
}
}
@media screen {
div.pat-modal.sheet:before {
position: absolute;
top: -2000px;
right: -2000px;
bottom: -2000px;
left: -2000px;
content: ' ';
z-index: -1;
background-color: rgba(0,0,0,0.15);
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
animation: fadeIn 1s;
}
}
div.pat-modal.panel {
position: fixed;
z-index: 9998;
max-width: 95%;
width: 550px !important;
height: auto !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%);
animation: fadeIn 0.2s;
background-color: transparent;
border-radius: var(--border-radii);
}
div.pat-modal.panel.carousel .panel-content .panel-body {
overflow-y: visible;
max-height: auto;
padding-bottom: 0;
}
div.pat-modal.panel.carousel .panel-content .panel-body * {
-webkit-user-select: none;
user-select: none;
}
div.pat-modal.panel.carousel .panel-content .panel-body:has(.pat-button-bar) {
padding-bottom: 20px;
}
div.pat-modal.panel.carousel .panel-content .panel-body .pat-toolbar {
margin-bottom: 30px;
margin-top: -10px;
}
div.pat-modal.panel.carousel .panel-content .panel-body .panel-sheets.pat-carousel {
margin-left: calc(-1 * var(--modal-panel-body-left-right-padding));
margin-right: calc(-1 * var(--modal-panel-body-left-right-padding));
margin-top: 0;
margin-bottom: 0;
}
div.pat-modal.panel.carousel .panel-content .panel-body .panel-sheets.pat-carousel .slick-list {
position: static;
}
div.pat-modal.panel.carousel .panel-content .panel-body .panel-sheets.pat-carousel .slick-list .slick-track {
position: static;
transform: none !important;
}
div.pat-modal.panel.carousel .panel-content .panel-body .panel-sheets.pat-carousel .slick-list .slick-track .slick-slide {
padding: 0 var(--modal-panel-body-left-right-padding);
max-height: calc(100vh - 390px);
overflow-y: auto;
position: static;
}
div.pat-modal.panel.carousel .panel-content .panel-body .panel-sheets.pat-carousel .slick-list .slick-track .slick-slide .sheet-content:has(.pat-button-bar) {
padding-bottom: 80px;
}
div.pat-modal.panel.carousel .panel-content .panel-body .panel-sheets.pat-carousel .slick-list .slick-track .slick-slide .sheet-content .modal-panel-main-button-bar {
position: absolute;
bottom: 0;
right: 30px;
left: 30px;
margin: 0;
padding-top: 20px;
border-top: 1px silver solid;
background-color: var(--colour-base-background);
display: none;
}
div.pat-modal.panel.carousel .panel-content .panel-body .panel-sheets.pat-carousel .slick-list .slick-track .slick-slide.slick-current .sheet-content .modal-panel-main-button-bar {
display: block;
}
div.pat-modal.panel.carousel .panel-content .panel-body .container > .pat-button-bar:last-child,
div.pat-modal.panel.carousel .panel-content .panel-body .container .main.pat-button-bar {
position: relative !important;
bottom: 0;
border-top: 1px solid silver;
}
div.pat-modal.panel.carousel .panel-content .panel-body .slick-slide:not(.slick-active) .sheet-content > .pat-button-bar:last-child {
opacity: 0;
}
div.pat-modal.panel.small {
animation: bounceInCentred 0.5s;
}
div.pat-modal.panel.medium {
width: 900px !important;
}
div.pat-modal.panel.large {
width: 1200px !important;
}
div.pat-modal.panel.large.object {
height: calc(100vh - 80px) !important;
height: 100%;
box-sizing: border-box;
}
div.pat-modal.panel.large.object object {
height: 100%;
width: 100%;
}
div.pat-modal.panel.large.object .panel-content {
box-sizing: border-box;
height: 100%;
}
div.pat-modal.panel.full {
width: 95% !important;
}
div.pat-modal.panel > .header {
position: absolute;
top: 0;
left: 0;
right: 0;
}
div.pat-modal.panel > .header h1 {
text-align: center;
font-size: 1em;
font-weight: bold;
margin: 0;
padding: 20px;
text-overflow: ellipsis;
overflow: hidden;
}
div.pat-modal.panel > .header .button-fullscreen,
div.pat-modal.panel > .header .close-panel {
display: none;
position: absolute;
top: 15px;
height: var(--image-details-social-button-bar-height);
width: var(--image-details-social-button-bar-height);
line-height: var(--image-details-social-button-bar-height);
background-color: var(--button-background-colour-default);
color: transparent;
}
@media (hover: hover) {
div.pat-modal.panel > .header .button-fullscreen:hover,
div.pat-modal.panel > .header .close-panel:hover {
background-color: var(--button-background-colour-default-hover);
}
}
div.pat-modal.panel > .header .button-fullscreen:before,
div.pat-modal.panel > .header .close-panel:before {
content: "";
background-color: var(--button-text-colour-default);
-webkit-mask: var(--kik-svg-close) center / 24px no-repeat;
mask: var(--kik-svg-close) center / 24px no-repeat;
width: 100%;
height: 100%;
display: block;
}
div.pat-modal.panel > .header .button-fullscreen {
right: 65px;
}
div.pat-modal.panel > .header .button-fullscreen:before {
-webkit-mask-image: var(--kik-svg-resize-full);
mask-image: var(--kik-svg-resize-full);
}
div.pat-modal.panel > .header .close-panel {
right: 15px;
}
div.pat-modal.panel.object > .header .close-panel,
div.pat-modal.panel.object > .header .button-fullscreen {
display: block;
}
div.pat-modal.panel.object:-webkit-full-screen {
width: 100%;
height: 100%;
background-color: var(--body-font-colour);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
div.pat-modal.panel.object:-ms-fullscreen {
width: 100%;
height: 100%;
background-color: var(--body-font-colour);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
div.pat-modal.panel.object:fullscreen {
width: 100%;
height: 100%;
background-color: var(--body-font-colour);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
div.pat-modal.panel .panel-content {
background: var(--colour-base-background);
box-shadow: var(--pat-modal-panel-panel-box-shadow);
padding-top: 68px;
border-radius: var(--border-radii);
}
div.pat-modal.panel .panel-content .panel-body {
max-height: calc(100vh - 250px);
overflow-y: auto;
padding-top: var(--modal-panel-body-top-padding);
}
div.pat-modal.panel .panel-content .panel-body > .pat-button-bar:last-child,
div.pat-modal.panel .panel-content .panel-body .container > .pat-button-bar:last-child,
div.pat-modal.panel .panel-content .panel-body .container > form > .pat-button-bar:last-child,
div.pat-modal.panel .panel-content .panel-body .container > .panel-sheets > .sheet-content > form > .pat-button-bar:last-child {
position: -webkit-sticky !important;
position: sticky !important;
bottom: -21px;
background: var(--colour-base-background);
padding-bottom: 20px;
padding-top: 20px;
border-top: 1px solid white;
z-index: 10;
}
div.pat-modal.panel .panel-content .panel-body > .pat-button-bar:last-child.bumped,
div.pat-modal.panel .panel-content .panel-body .container > .pat-button-bar:last-child.bumped,
div.pat-modal.panel .panel-content .panel-body .container > form > .pat-button-bar:last-child.bumped,
div.pat-modal.panel .panel-content .panel-body .container > .panel-sheets > .sheet-content > form > .pat-button-bar:last-child.bumped {
border-top: var(--default-border);
}
div.pat-modal.panel .panel-content > .pat-button-bar,
div.pat-modal.panel .panel-content .container > .pat-button-bar {
margin: 0;
padding-bottom: 5px;
}
div.pat-modal.panel:after {
position: fixed;
top: -2000px;
right: -2000px;
bottom: -2000px;
left: -2000px;
content: ' ';
z-index: -1;
background-color: rgba(0,0,0,0.15);
-webkit-backdrop-filter: blur(3px) saturate(0.5);
backdrop-filter: blur(3px) saturate(0.5);
animation: fadeIn 1s;
}
div.pat-modal.panel .panel-body {
padding-bottom: 20px;
}
div.pat-modal.panel .panel-footer {
padding-bottom: 10px;
}
div.pat-modal.panel .panel-footer .container:before {
content: ' ';
height: 1px;
display: block;
margin-bottom: 20px;
background: var(--pat-modal-panel-footer-border-colour);
}
div.pat-modal.panel .panel-footer .container .pat-button {
margin: 0 10px 10px 0;
}
div.pat-modal.panel .panel-footer .container .float-after {
margin-right: 0;
float: right;
}
div.pat-modal.panel .container {
width: 100%;
padding: 0 var(--modal-panel-body-left-right-padding);
}
div.pat-modal:not(.panel):not(.sheet),
div.pat-modal.document-content:not(.panel):not(.sheet) {
background-color: rgba(255,255,255,0.95);
box-sizing: border-box;
position: fixed;
z-index: 9998;
width: 100% !important;
height: 100% !important;
top: 0 !important;
left: 0 !important;
}
.backdropfilter div.pat-modal:not(.panel):not(.sheet),
.backdropfilter div.pat-modal.document-content:not(.panel):not(.sheet) {
background-color: rgba(255,255,255,0.15);
-webkit-backdrop-filter: blur(100px) saturate(4) brightness(1.2);
backdrop-filter: blur(100px) saturate(4) brightness(1.2);
}
div.pat-modal:not(.panel):not(.sheet) .filter-bar,
div.pat-modal.document-content:not(.panel):not(.sheet) .filter-bar {
margin-bottom: 2em;
}
div.pat-modal:not(.panel):not(.sheet) .filter-bar input[type=search],
div.pat-modal.document-content:not(.panel):not(.sheet) .filter-bar input[type=search] {
float: right;
width: 14em;
}
div.pat-modal:not(.panel):not(.sheet) .header,
div.pat-modal.document-content:not(.panel):not(.sheet) .header {
color: gray;
padding: 0;
position: relative;
z-index: 2;
background-color: transparent;
height: 0;
}
div.pat-modal:not(.panel):not(.sheet) .header *,
div.pat-modal.document-content:not(.panel):not(.sheet) .header * {
display: none;
}
div.pat-modal:not(.panel):not(.sheet) .header .close-panel,
div.pat-modal.document-content:not(.panel):not(.sheet) .header .close-panel {
position: absolute;
top: 1.5em;
right: 1.5em;
width: var(--close-button-height);
height: var(--close-button-height);
border-radius: var(--border-radii);
color: transparent !important;
filter: none;
border: none;
background: none;
outline: none;
display: block;
padding: 0;
margin: 0;
transition: transform var(--base-animation-duration) ease-out;
z-index: 2;
font-size: 0;
font-size: 20px;
background: none;
}
div.pat-modal:not(.panel):not(.sheet) .header .close-panel:focus,
div.pat-modal.document-content:not(.panel):not(.sheet) .header .close-panel:focus {
outline: var(--pat-form-input-field-outline-focus);
outline-offset: var(--pat-form-input-field-outline-offset);
}
div.pat-modal:not(.panel):not(.sheet) .header .close-panel:active,
div.pat-modal.document-content:not(.panel):not(.sheet) .header .close-panel:active {
box-shadow: inherit;
transform: scale(0.9);
box-shadow: none;
}
div.pat-modal:not(.panel):not(.sheet) .header .close-panel:before,
div.pat-modal.document-content:not(.panel):not(.sheet) .header .close-panel:before {
font-family: fontello;
content: var(--glyph-cancel);
display: block;
width: var(--close-button-height);
text-align: center;
font-size: calc(0.7 * var(--close-button-height));
margin: 0;
display: block;
border-radius: var(--border-radii);
text-indent: 1%;
line-height: calc(0.95 * var(--close-button-height));
height: var(--close-button-height);
color: var(--button-text-colour);
background-color: var(--button-background-colour);
}
@media (hover: hover) {
div.pat-modal:not(.panel):not(.sheet) .header .close-panel:before:hover,
div.pat-modal.document-content:not(.panel):not(.sheet) .header .close-panel:before:hover {
color: var(--button-text-colour-hover);
background-color: var(--button-background-colour-hover);
text-decoration: none;
}
}
div.pat-modal:not(.panel):not(.sheet).small .panel-content .container,
div.pat-modal:not(.panel):not(.sheet) > .panel-content .panel-class-small .container,
div.pat-modal.document-content:not(.panel):not(.sheet).small .panel-content .container,
div.pat-modal.document-content:not(.panel):not(.sheet) > .panel-content .panel-class-small .container {
max-width: 640px;
}
div.pat-modal:not(.panel):not(.sheet).small > .panel-content > h1,
div.pat-modal:not(.panel):not(.sheet) h1.panel-class-small,
div.pat-modal.document-content:not(.panel):not(.sheet).small > .panel-content > h1,
div.pat-modal.document-content:not(.panel):not(.sheet) h1.panel-class-small {
max-width: 530px;
}
@container screen style(--screen-small: false) and style(--screen-large: false) {
div.pat-modal:not(.panel):not(.sheet).small > .panel-content > h1,
div.pat-modal:not(.panel):not(.sheet) h1.panel-class-small,
div.pat-modal.document-content:not(.panel):not(.sheet).small > .panel-content > h1,
div.pat-modal.document-content:not(.panel):not(.sheet) h1.panel-class-small {
max-width: 580px;
padding: 0 2.25em;
}
}
div.pat-modal:not(.panel):not(.sheet).medium .panel-content .container,
div.pat-modal:not(.panel):not(.sheet) > .panel-content .panel-class-small .container,
div.pat-modal.document-content:not(.panel):not(.sheet).medium .panel-content .container,
div.pat-modal.document-content:not(.panel):not(.sheet) > .panel-content .panel-class-small .container {
max-width: 840px;
}
div.pat-modal:not(.panel):not(.sheet).medium > .panel-content > h1,
div.pat-modal:not(.panel):not(.sheet) h1.panel-class-small,
div.pat-modal.document-content:not(.panel):not(.sheet).medium > .panel-content > h1,
div.pat-modal.document-content:not(.panel):not(.sheet) h1.panel-class-small {
max-width: 730px;
}
@container screen style(--screen-small: false) and style(--screen-large: false) {
div.pat-modal:not(.panel):not(.sheet).medium > .panel-content > h1,
div.pat-modal:not(.panel):not(.sheet) h1.panel-class-small,
div.pat-modal.document-content:not(.panel):not(.sheet).medium > .panel-content > h1,
div.pat-modal.document-content:not(.panel):not(.sheet) h1.panel-class-small {
max-width: 780px;
padding: 0 2.25em;
}
}
div.pat-modal:not(.panel):not(.sheet) > .panel-content,
div.pat-modal.document-content:not(.panel):not(.sheet) > .panel-content {
background-color: transparent;
position: absolute;
z-index: 1;
overflow: hidden;
width: 100%;
max-height: 100%;
display: block;
margin: 0 auto;
top: 50%;
left: 50%;
opacity: 0;
padding: 5em 3em;
transform: scale(1.5) translate(-50%, -50%);
transform-origin: 0;
transition: var(--base-animation-duration) all;
overflow: auto;
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
box-sizing: border-box;
}
div.pat-modal:not(.panel):not(.sheet) > .panel-content > *,
div.pat-modal.document-content:not(.panel):not(.sheet) > .panel-content > * {
max-width: var(--break-large);
margin-left: auto;
margin-right: auto;
}
div.pat-modal:not(.panel):not(.sheet) > .panel-content > h1,
div.pat-modal.document-content:not(.panel):not(.sheet) > .panel-content > h1 {
max-width: 1280px;
font-weight: 200;
font-size: 2em;
line-height: 1.3;
margin-bottom: 0.7em;
padding: 0 3em;
box-sizing: border-box;
}
@container screen style(--screen-small: true) {
div.pat-modal:not(.panel):not(.sheet) > .panel-content > h1,
div.pat-modal.document-content:not(.panel):not(.sheet) > .panel-content > h1 {
display: none;
}
}
@container screen style(--screen-small: false) and style(--screen-large: false) {
div.pat-modal:not(.panel):not(.sheet) > .panel-content > h1,
div.pat-modal.document-content:not(.panel):not(.sheet) > .panel-content > h1 {
padding: 0 2.25em;
}
}
@container screen style(--screen-large: true) {
div.pat-modal:not(.panel):not(.sheet) > .panel-content > h1,
div.pat-modal.document-content:not(.panel):not(.sheet) > .panel-content > h1 {
padding: 0 6.7rem;
}
}
.modal-active div.pat-modal:not(.panel):not(.sheet) > .panel-content,
.modal-active div.pat-modal.document-content:not(.panel):not(.sheet) > .panel-content {
transform: scale(1) translate(-50%,-50%);
opacity: 1;
}
@container screen style(--screen-small: true) {
div.pat-modal:not(.panel):not(.sheet) > .panel-content,
div.pat-modal.document-content:not(.panel):not(.sheet) > .panel-content {
padding: 5em 1.5rem;
}
}
div.pat-modal:not(.panel):not(.sheet).max-height > .panel-content,
div.pat-modal.document-content:not(.panel):not(.sheet).max-height > .panel-content {
height: 100%;
}
div.pat-modal:not(.panel):not(.sheet) img,
div.pat-modal.document-content:not(.panel):not(.sheet) img {
max-width: 100%;
}
div.pat-modal:not(.panel):not(.sheet) .wizard-box,
div.pat-modal.document-content:not(.panel):not(.sheet) .wizard-box {
padding: 0;
}
div.pat-modal:not(.panel):not(.sheet) .wizard-box .panel-body,
div.pat-modal.document-content:not(.panel):not(.sheet) .wizard-box .panel-body {
padding: 0 3em 0;
margin-bottom: 0;
margin-top: 0;
}
@container screen style(--screen-small: true) {
div.pat-modal:not(.panel):not(.sheet) .wizard-box .panel-body,
div.pat-modal.document-content:not(.panel):not(.sheet) .wizard-box .panel-body {
padding: 5em 1em 0;
}
}
div.pat-modal:not(.panel):not(.sheet) .wizard-box .panel-footer,
div.pat-modal.document-content:not(.panel):not(.sheet) .wizard-box .panel-footer {
margin: 0;
height: 1.6em;
padding: 0.8em 3em;
}
@container screen style(--screen-small: true) {
div.pat-modal:not(.panel):not(.sheet) .wizard-box .panel-footer,
div.pat-modal.document-content:not(.panel):not(.sheet) .wizard-box .panel-footer {
padding: 0.8em 1em;
}
}
div.pat-modal:not(.panel):not(.sheet).max-height .wizard-box,
div.pat-modal.document-content:not(.panel):not(.sheet).max-height .wizard-box {
overflow: hidden;
}
div.pat-modal:not(.panel):not(.sheet).max-height .wizard-box .panel-body,
div.pat-modal.document-content:not(.panel):not(.sheet).max-height .wizard-box .panel-body {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
padding: 5em 3em;
overflow: auto;
}
div.pat-modal:not(.panel):not(.sheet).max-height .wizard-box .panel-footer,
div.pat-modal.document-content:not(.panel):not(.sheet).max-height .wizard-box .panel-footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
border-top: 1px solid #dedede;
background: rgba(255,255,255,0.9);
z-index: 10000;
}
@container screen style(--screen-small: true) {
div.pat-modal:not(.panel):not(.sheet),
div.pat-modal.document-content:not(.panel):not(.sheet) {
width: 100% !important;
height: 100% !important;
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
max-width: inherit !important;
max-height: inherit !important;
margin: 0 !important;
border: none !important;
}
}
@container screen style(--screen-small: true) {
div.pat-modal:not(.panel):not(.sheet) > .panel-content,
div.pat-modal.document-content:not(.panel):not(.sheet) > .panel-content {
height: 100%;
padding-top: 4em;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
}
@container screen style(--screen-small: true) {
div.pat-modal:not(.panel):not(.sheet) .wizard-box,
div.pat-modal.document-content:not(.panel):not(.sheet) .wizard-box {
overflow: hidden;
}
}
@container screen style(--screen-small: true) {
div.pat-modal:not(.panel):not(.sheet) .header,
div.pat-modal.document-content:not(.panel):not(.sheet) .header {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 2;
}
}
@container screen style(--screen-small: true) {
div.pat-modal:not(.panel):not(.sheet) .panel-body,
div.pat-modal.document-content:not(.panel):not(.sheet) .panel-body {
position: absolute;
top: 2em;
bottom: 57px;
right: 0;
left: 0;
}
}
@container screen style(--screen-small: true) {
div.pat-modal:not(.panel):not(.sheet) .panel-footer,
div.pat-modal.document-content:not(.panel):not(.sheet) .panel-footer {
position: absolute;
bottom: 0;
right: 0;
left: 0;
}
}
.splash-header {
margin-bottom: var(--pat-modal-inset);
display: flex;
justify-content: center;
}
.splash-header img {
filter: var(--kik-logo-filter, none);
}
@container screen style(--screen-small: true) {
.pat-modal-panel {
--pat-toolbar-padding: var(--pat-modal-inset);
--modal-panel-body-left-right-padding: var(--pat-modal-inset);
--modal-panel-body-bottom-padding: var(--pat-modal-inset);
max-height: calc(100vh - 5vw);
max-height: calc(100dvh - 5vw);
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel .modal-panel-header {
padding: 14px 16px;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel .modal-panel-header .modal-panel-title {
padding: 0 44px;
box-sizing: border-box;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel .modal-panel-header .modal-panel-close-button.mobile-close {
display: block;
top: 9px;
right: 12px;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel:has(.modal-panel-footer .pat-button.close-panel) > .modal-panel-close-button,
.pat-modal-panel > .modal-panel-close-button {
display: block;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel .modal-panel-body > .modal-panel-main-button-bar {
padding-top: 14px;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel .pat-button-bar .pat-button.close-panel:not(.default):not(.warning):not([class*="icon-"]):not(.pat-inject),
.pat-modal-panel .pat-button-bar .pat-button.close-panel.icon-cancel:not(.default),
.pat-modal-panel .pat-button-bar .pat-button.close-panel.icon-cancel-circle:not(.default),
.pat-modal-panel .pat-button-bar .pat-button.cancel:not(.default) {
display: none;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel .pat-button-bar .pat-button[class*="icon-"]:not(.default):not(.warning) {
flex: 0 0 auto;
position: relative;
box-sizing: border-box;
aspect-ratio: 1;
min-width: 0;
max-width: none;
padding-left: 0;
padding-right: 0;
overflow: hidden;
text-indent: -1000em;
text-align: left;
}
}
@container screen style(--screen-small: true) {
body[dir=rtl] .pat-modal-panel .pat-button-bar .pat-button[class*="icon-"]:not(.default):not(.warning) {
text-align: right;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel .pat-button-bar .pat-button[class*="icon-"]:not(.default):not(.warning)::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
text-indent: 0;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
}
}
.modal-panel-nav {
display: contents;
}
.modal-panel-step {
position: absolute;
top: 0;
bottom: 0;
width: calc((100cqw - 100%) / 2);
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
font-size: 0;
cursor: default;
-webkit-user-drag: none;
user-select: none;
-webkit-user-select: none;
}
.modal-panel-step.previous {
inset-inline-end: 100%;
inset-inline-start: auto;
}
.modal-panel-step.next {
inset-inline-start: 100%;
inset-inline-end: auto;
}
.modal-panel-step > .modal-floating-icon {
-webkit-user-drag: none;
position: static;
}
@media (hover: hover) {
.modal-panel-step:hover > .modal-floating-icon {
background-color: var(--pat-toolbar-icon-background-colour-hover);
color: var(--pat-toolbar-icon-text-colour-hover);
}
}
@media (hover: hover) {
.modal-panel-step:hover > .modal-floating-icon > svg.kik-icon {
color: var(--pat-toolbar-icon-text-colour-hover);
}
}
@container screen style(--screen-small: true) {
.modal-panel-step {
display: none;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel.collapse-screen {
inset: 0;
bottom: 0;
width: 100%;
max-width: none;
height: auto;
max-height: none;
transform: none;
border-radius: 0;
--modal-close-trailing-reserve: var(--modal-toolbar-trailing-reserve, 0px);
--modal-close-trailing-reserve: var(--modal-toolbar-trailing-reserve, 0px);
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel.collapse-screen .modal-panel-contents {
display: flex;
flex-direction: column;
height: 100%;
max-height: none;
min-height: 0;
border-radius: 0;
box-shadow: none;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel.collapse-screen .modal-panel-contents > .modal-panel-body,
.pat-modal-panel.collapse-screen .modal-panel-contents:has(> .modal-panel-body) > .modal-panel-body {
flex: 1 0 auto;
min-height: 0;
max-height: none;
width: 100%;
padding-bottom: calc(var(--kik-dock-clearance, 0px)
+ var(--small-screen-padding));
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel.collapse-screen:has(.modal-toolbar :is(a.icon.back, .pat-back-button)) {
--modal-close-slot: 0px;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel.collapse-screen:has(.modal-toolbar :is(a.icon.back, .pat-back-button)) > .modal-panel-close-button {
inset-inline-start: auto;
inset-inline-end: calc(var(--pat-toolbar-padding) + var(--modal-toolbar-trailing-reserve, 0px));
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel.collapse-screen:has(.modal-toolbar :is(a.icon.back, .pat-back-button)) > .modal-panel-close-button > svg.kik-icon:nth-of-type(1) {
display: block;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel.collapse-screen:has(.modal-toolbar :is(a.icon.back, .pat-back-button)) > .modal-panel-close-button > svg.kik-icon:nth-of-type(2) {
display: none;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel.collapse-screen:has(.modal-toolbar :is(a.icon.back, .pat-back-button)) .modal-toolbar {
padding-inline-end: calc(var(--pat-toolbar-padding)
+ var(--pat-toolbar-button-height)
+ var(--pat-toolbar-element-separation, 0.5rem));
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel.collapse-screen > .modal-panel-close-button {
inset-inline-end: auto;
inset-inline-start: var(--pat-toolbar-padding);
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel.collapse-screen > .modal-panel-close-button > svg.kik-icon:nth-of-type(1) {
display: none;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel.collapse-screen > .modal-panel-close-button > svg.kik-icon:nth-of-type(2) {
display: block;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel.collapse-screen .modal-toolbar {
padding-inline-start: calc(var(--pat-toolbar-padding) + var(--modal-close-slot));
padding-inline-end: var(--pat-toolbar-padding);
border-radius: 0;
margin-bottom: 0;
}
}
.application-body > .modal-space > .pat-modal-panel:not(.collapse-screen) .modal-panel-contents:has(> .modal-panel-body) {
max-height: calc(100cqh - 2 * var(--modal-panel-gutter-block));
}
@media (width <= 768px) {
.pat-modal-panel .modal-panel-contents > .modal-panel-body {
bottom: calc(var(--kik-dock-clearance, 0px)
+ var(--small-screen-padding));
}
}
@container screen style(--screen-small: true) {
.pat-toolbar .modal-toolbar-cta:not(:where(.context-menu-popover, .context-menu-popover *)) {
position: relative;
box-sizing: border-box;
width: var(--pat-toolbar-button-height);
min-width: var(--pat-toolbar-button-height);
height: var(--pat-toolbar-button-height);
padding: 0;
overflow: hidden;
text-indent: -1000em;
text-align: left;
}
}
@container screen style(--screen-small: true) {
body[dir=rtl] .pat-toolbar .modal-toolbar-cta:not(:where(.context-menu-popover, .context-menu-popover *)) {
text-align: right;
}
}
.pat-modal-panel .preview-block {
margin: 0 0 1rem;
display: flex;
justify-content: center;
}
.pat-modal-panel .preview-block .preview {
display: block;
width: min(12rem, 50cqw);
aspect-ratio: 1;
border-radius: 50%;
overflow: hidden;
background-color: var(--colour-base-background);
}
.pat-modal-panel .preview-block .preview img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.kik-offline nav.tile.app:not([data-offline-capable]) {
opacity: 0.38;
transition: opacity 120ms ease-out;
}
.kik-offline nav.tile.app:not([data-offline-capable]) > .link {
cursor: default;
}
.kik-offline nav.tile.app[data-offline-capable] {
opacity: 1;
}
.kik-offline nav.tile.app.kik-offline-refused {
opacity: 0.6;
animation: kik-offline-refuse 420ms ease-in-out;
}
@keyframes kik-offline-refuse {
0%,
100% {
transform: translateX(0);
}
20% {
transform: translateX(-4px);
}
40% {
transform: translateX(4px);
}
60% {
transform: translateX(-3px);
}
80% {
transform: translateX(2px);
}
}
@media (prefers-reduced-motion: reduce) {
.kik-offline nav.tile.app.kik-offline-refused {
animation: none;
}
}
.kik-offline .kik-messages-unread-badge,
.kik-offline .kik-mail-unread-badge {
display: none !important;
}
:root {
--sidebar-slide-duration: 0.3s;
}
@container screen style(--screen-small: false) {
#app-space .application-body.sidebar-left-open aside.sidebar.left.kik-sidebar-arriving {
animation: kik-sidebar-slide-in var(--sidebar-slide-duration, 0s) ease-out;
}
}
@container screen style(--screen-small: false) {
body[dir="rtl"] #app-space .application-body.sidebar-left-open aside.sidebar.left.kik-sidebar-arriving {
animation-name: kik-sidebar-slide-in-rtl;
}
}
@container screen style(--screen-small: false) {
body[data-global-nav="side"] #app-space .application-body.sidebar-left-open
aside.sidebar.left:not(.kik-sidebar-arriving) {
animation: none;
}
}
@keyframes kik-sidebar-slide-in {
from {
transform: translateX(-48px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@keyframes kik-sidebar-slide-in-rtl {
from {
transform: translateX(48px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
#app-space .application-body.sidebar-left-open aside.sidebar.left.kik-sidebar-arriving {
animation: none;
}
}
@container main (width <= 768px) {
@container screen style(--kik-sidebar-drawer: true) {
#app-space .application-body aside.sidebar.left,
#app-space .application-body aside.sidebar.left.kik-sidebar-arriving {
animation: none;
}
}
}
.kik-win-toggle {
display: none;
}
.application-body.state-on > .kik-win-toggle {
position: fixed;
z-index: calc(var(--pat-toolbar-z-index, 11) + 1);
width: var(--pat-toolbar-button-height);
height: var(--pat-toolbar-button-height);
min-width: var(--pat-toolbar-button-height);
padding: 0;
border: none;
line-height: var(--pat-toolbar-button-line-height);
border-radius: var(--button-border-radius);
background-color: var(--pat-toolbar-icon-frost-background);
color: var(--pat-toolbar-icon-text-colour);
box-shadow: var(--pat-toolbar-button-box-shadow);
-webkit-backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
backdrop-filter: var(--pat-toolbar-icon-backdrop-filter);
top: var(--kik-win-inset);
}
.application-body.state-on > .kik-win-toggle:before {
font-family: fontello;
font-size: calc(0.6 * var(--pat-toolbar-button-height));
line-height: var(--pat-toolbar-button-line-height);
text-align: center;
position: absolute;
inset: 0;
display: inline-block;
border-radius: var(--button-border-radius);
box-sizing: border-box;
}
.application-body.state-on > .kik-win-toggle:focus {
outline: var(--pat-form-input-field-outline-focus);
outline-offset: var(--pat-form-input-field-outline-offset);
}
@media (hover: hover) {
.application-body.state-on > .kik-win-toggle:hover {
color: var(--pat-toolbar-icon-text-colour-hover);
background-color: var(--pat-toolbar-icon-background-colour-hover);
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter-hover);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter-hover);
text-decoration: none;
}
}
@media (hover: hover) {
.application-body.state-on > .kik-win-toggle:hover:before {
color: var(--pat-toolbar-icon-text-colour-hover);
}
}
.application-body.state-on > .kik-win-side {
left: var(--kik-win-inset);
}
.application-body.state-on > .kik-win-side:before {
content: var(--glyph-sidebar);
}
@media (width > 768px) {
body[data-global-nav="side"] .application-body.state-on > .kik-win-side {
left: calc(var(--gns-left) + var(--gns-width-collapsed) + var(--kik-win-inset));
}
}
@media (width > 768px) {
body[data-global-nav="side"] .application-body.state-on:not(.sidebar-left-closed) > .kik-win-side {
top: calc(var(--sidebar-margin-top, 15px) + var(--kik-hub-sidebar-bar-gap, 10px) + var(--kik-hub-sidebar-bar-padding, 10px));
}
}
@media (width > 768px) {
body[data-global-nav="side"] .application-body.state-on.sidebar-left-closed > .kik-win-side {
top: calc(var(--kik-hub-bar-gap, 20px) + var(--kik-hub-bar-padding, 15px));
}
}
@container main (width > 768px) {
.application-body.state-on.sidebar-left-closed:has(> aside.sidebar) .document-body .pat-toolbar.kik-win-main-toolbar:not(.well-title-group *):not(:has(.toolbar-section.micro-navigation > *)) .toolbar-section.navigation {
padding-left: var(--kik-win-lead-slot, var(--kik-win-slot));
}
}
@container main (width > 680px) {
.application-body.state-on.sidebar-left-closed:has(> aside.sidebar):not(:has(.kiki-dock:not(.closing))) .document-body .pat-toolbar.kik-win-main-toolbar:not(.well-title-group *) .toolbar-section.micro-navigation:has(> *) {
margin-left: var(--kik-win-lead-slot, var(--kik-win-slot));
}
}
@container main (width > 768px) {
.application-body.state-on.sidebar-left-closed:has(> aside.sidebar) .document-body .pat-toolbar.kik-win-main-toolbar:not(.well-title-group *):not(:has(.toolbar-section.navigation)) .toolbar-area.functions > :first-child {
margin-left: var(--kik-win-lead-slot, var(--kik-win-slot));
}
}
@container main (width > 680px) {
.application-body.state-on.sidebar-left-closed:has(> aside.sidebar):not(:has(.kiki-dock:not(.closing))) .document-body .pat-toolbar.kik-win-main-toolbar:not(.well-title-group *):has(.toolbar-section.navigation):not(:has(.toolbar-section.navigation .pat-tabs)) .toolbar-area.functions > :first-child {
margin-left: var(--kik-win-lead-slot, var(--kik-win-slot));
}
}
@container main (width <= 768px) {
#app-space .application-body.state-on.focus-document:not(.sidebar-large):has(> .kik-win-side) .document-body .pat-toolbar.kik-win-main-toolbar.kik-landing:not(.well-title-group *) {
padding-left: calc(var(--kik-win-inset) + var(--kik-win-lead-slot, var(--kik-win-slot)));
}
}
@container main (width <= 768px) {
#app-space .application-body.state-on.focus-document:not(.sidebar-large):has(> .kik-win-side) .document-body .pat-toolbar.kik-win-main-toolbar.kik-landing:not(.well-title-group *) .toolbar-section.navigation:not(:has(.pat-tabs.tabs-wrapped)) {
margin-inline-start: calc(-1 * var(--kik-win-lead-slot, var(--kik-win-slot)));
}
}
.application-body.state-on aside.sidebar .pat-toolbar:not(.well-title-group *) .toolbar-section.navigation:has(.pat-tabs) {
padding-inline-start: var(--kik-win-side-slot, 0px);
}
.application-body.state-on aside.sidebar .pat-toolbar:not(.well-title-group *) .toolbar-section.micro-navigation:has(> *) {
margin-inline-start: var(--kik-win-side-slot, 0px);
}
.application-body.state-on aside.sidebar .pat-toolbar:not(.well-title-group *):not(:has(.toolbar-section.navigation .pat-tabs)):not(:has(.toolbar-section.micro-navigation > *)) .toolbar-area.functions > :first-child {
margin-inline-start: var(--kik-win-side-slot, 0px);
}
.application-body.state-on aside.sidebar .pat-toolbar .toolbar-section .pat-toolbar-search-field:is(.focus, .has-value, .fixed) input[type="search"],
.application-body.state-on aside.sidebar .pat-toolbar .pat-toolbar-search-field:is(.focus, .has-value, .fixed):after {
inset-inline-start: calc(var(--pat-toolbar-inset-inline, var(--pat-toolbar-padding)) + var(--kik-win-side-slot, 0px));
}
.application-body.state-on.sidebar-left-closed > .kik-win-side:before {
content: var(--glyph-sidebar-left-open);
}
.application-body.state-on:has(> aside.sidebar .sidebar-content) > .kik-win-side {
display: inline-block;
}
.application-body.state-on > .kik-win-side > :is(.open, .close) {
position: absolute;
inset: 0;
display: none;
background: none;
border: 0;
padding: 0;
margin: 0;
font-size: 0;
line-height: 0;
color: transparent;
overflow: hidden;
}
.application-body.state-on:not(.sidebar-left-open) > .kik-win-side > .open,
.application-body.state-on.sidebar-left-closed > .kik-win-side > .open,
.application-body.state-on.sidebar-left-open:not(.sidebar-left-closed) > .kik-win-side > .close {
display: block;
}
.application-body.state-on > .kik-win-side {
transition: transform var(--pat-toolbar-auto-hide-speed, 0.5s) ease;
}
html:not(.kik-windowed) .application-body.state-on.sidebar-left-open:has(:is(#sidebar-content, .sidebar-content).kik-scroll-down) > .kik-win-side,
html:not(.kik-windowed) .application-body.state-on.sidebar-left-closed:has(.kik-win-main-toolbar.auto-hide):has(.document-body:is(.scrolling-down, .scroll-down):not(.scroll-position-top)) > .kik-win-side,
html:not(.kik-windowed) .application-body.state-on.sidebar-left-closed:has(.kik-win-main-toolbar.auto-hide):has(.document-body.scroll-position-bottom:not(.scroll-position-top)) > .kik-win-side,
html:not(.kik-windowed) .application-body.state-on.sidebar-left-closed:has(.kik-win-main-toolbar.auto-hide):has(.document-body.kik-scroll-down) > .kik-win-side {
transform: translateY(calc(-100% - var(--kik-win-inset) - 4px));
}
@container main (width <= 768px) {
html:not(.kik-windowed) .application-body.state-on.focus-document:has(.kik-win-main-toolbar.auto-hide):has(.document-body:is(.scrolling-down, .scroll-down):not(.scroll-position-top)) > .kik-win-side,
html:not(.kik-windowed) .application-body.state-on.focus-document:has(.kik-win-main-toolbar.auto-hide):has(.document-body.scroll-position-bottom:not(.scroll-position-top)) > .kik-win-side,
html:not(.kik-windowed) .application-body.state-on.focus-document:has(.kik-win-main-toolbar.auto-hide):has(.document-body.kik-scroll-down) > .kik-win-side {
transform: translateY(calc(-100% - var(--kik-win-inset) - 4px));
}
}
@container main (width <= 768px) {
html:not(.kik-windowed) .application-body.state-on.focus-document:has(:is(#sidebar-content, .sidebar-content).kik-scroll-down) > .kik-win-side {
transform: none;
}
}
@container main (width <= 768px) {
@container screen style(--kik-sidebar-drawer: true) {
#app-space .application-body.state-on > .kik-win-side > .open {
display: block;
}
}
}
@container main (width <= 768px) {
@container screen style(--kik-sidebar-drawer: true) {
#app-space .application-body.state-on > .kik-win-side > .close,
#app-space .application-body.state-on.focus-sidebar > .kik-win-side > .open {
display: none;
}
}
}
@container main (width <= 768px) {
@container screen style(--kik-sidebar-drawer: true) {
#app-space .application-body.state-on.focus-sidebar > .kik-win-side > .close {
display: block;
}
}
}
@container main (width <= 768px) {
@container screen style(--kik-sidebar-drawer: true) {
#app-space .application-body.state-on.focus-document:not(:has(.document-body :is(.pat-toolbar.kik-landing, .kik-fc-toolbar))) > .kik-win-side {
display: none !important;
}
}
}
@container main (width <= 768px) {
@container screen style(--kik-sidebar-drawer: true) {
#app-space .application-body.state-on.focus-sidebar > .kik-win-side:has(> svg) > svg {
color: var(--app-colour, var(--colour-accent));
}
}
}
@container main (width <= 768px) {
@container screen style(--kik-sidebar-drawer: true) {
.application-body.state-on aside.sidebar {
--kik-win-side-slot: var(--kik-win-slot);
}
}
}
@container main (width <= 768px) {
@container screen style(--kik-sidebar-drawer: true) {
#app-space .application-body.state-on.focus-sidebar > .kik-sb-scrim {
display: block;
position: absolute;
inset: 0;
z-index: 2;
background: none;
border: 0;
padding: 0;
margin: 0;
font-size: 0;
line-height: 0;
color: transparent;
overflow: hidden;
}
}
}
.kik-sb-scrim {
display: none;
}
@container main (width > 680px) {
.application-body.state-on aside.sidebar {
--kik-win-side-slot: var(--kik-win-slot);
}
}
@container main (width <= 680px) {
@container screen style(--kik-sidebar-drawer: false) {
#app-space .application-body.state-on.focus-sidebar > .kik-win-side {
display: none !important;
}
}
}
@container main (width <= 680px) {
@container screen style(--kik-sidebar-drawer: false) {
#app-space .application-body.state-on.focus-document > .kik-win-side > .open {
display: block;
}
}
}
@container main (width <= 680px) {
@container screen style(--kik-sidebar-drawer: false) {
#app-space .application-body.state-on.focus-document > .kik-win-side > .close {
display: none;
}
}
}
.application-body.state-on.state-photo-edit > .kik-win-side {
display: none !important;
}
.application-body.state-on.sidebar-large > .kik-win-side {
display: none !important;
}
.application-body.state-on.sidebar-large aside.sidebar {
--kik-win-side-slot: 0px;
}
.application-body.state-on > .kik-win-side > :is(.open, .close) > svg {
display: none;
}
@media (width > 768px) {
body[data-platform-mode="hub"] #app-space .application-body.state-on {
--kik-win-lead-slot: 0px;
}
}
@media (width > 768px) {
body[data-platform-mode="hub"] #app-space .application-body.state-on aside.sidebar {
--kik-win-side-slot: 0px;
}
}
@media (width > 768px) {
body[data-platform-mode="hub"] #app-space .application-body.state-on > .kik-win-side {
top: auto;
bottom: calc(var(--sidebar-margin-bottom, 15px) + 40px);
left: calc(var(--sidebar-margin-left, 15px) + var(--sidebar-width, 475px));
transform: none !important;
transition: left var(--base-animation-duration, 0.3s);
width: 28px;
min-width: 28px;
height: calc(1.4 * var(--pat-toolbar-button-height));
padding: 0;
border-radius: 0 var(--border-radii) var(--border-radii) 0;
background-color: var(--sidebar-background-colour);
-webkit-backdrop-filter: var(--sidebar-backdrop-filter, var(--pat-surface-backdrop-filter));
backdrop-filter: var(--sidebar-backdrop-filter, var(--pat-surface-backdrop-filter));
box-shadow: var(--default-box-shadow);
clip-path: inset(-10px -10px -10px 0);
}
}
@media (width > 768px) {
body[data-platform-mode="hub"] #app-space .application-body.state-on > .kik-win-side > svg.kik-icon {
display: none !important;
}
}
@media (width > 768px) {
body[data-platform-mode="hub"] #app-space .application-body.state-on > .kik-win-side > :is(.open, .close) > svg {
display: block;
position: absolute;
inset: 0;
margin: auto;
width: 17px;
height: 17px;
color: var(--pat-button-text-colour);
}
}
@media (width > 768px) {
@media (hover: hover) {
body[data-platform-mode="hub"] #app-space .application-body.state-on > .kik-win-side:hover > :is(.open, .close) > svg {
color: var(--pat-button-text-colour-hover);
}
}
}
@media (width > 768px) {
body[data-platform-mode="hub"] #app-space #application-body-messages.state-on > .kik-win-side {
bottom: calc(var(--sidebar-margin-bottom, 15px) + 70px);
}
}
@media (width > 768px) {
body[data-platform-mode="hub"] #app-space .application-body.state-on.sidebar-left-closed > .kik-win-side {
left: calc(var(--gns-width-collapsed, 50px) + var(--sidebar-margin-left, 15px) + 0.5 * var(--sidebar-padding-left, 20px));
}
}
:root {
--kik-bar-float-shadow: var(--pat-toolbar-box-shadow);
}
#app-space .application-body.state-on {
--kik-win-inset: var(--sidebar-padding-top, 25px);
--kik-win-toolbar-height: calc(var(--pat-toolbar-button-height) + 2 * var(--kik-win-inset));
--kik-win-slot: calc(var(--pat-toolbar-button-height) + var(--pat-toolbar-element-separation, 0.5rem));
--kik-win-trailing-slot: 0px;
}
@media (max-width: 680px) {
#app-space .application-body.state-on {
--kik-win-inset: var(--small-screen-padding);
}
}
@container main (width <= 680px) {
#app-space .application-body.state-on .document-body,
#app-space .application-body.state-on aside.sidebar,
#app-space .application-body.state-on .pat-modal-panel,
#app-space .application-body.state-on > .kik-win-toggle {
--kik-win-inset: var(--small-screen-padding);
--kik-win-toolbar-height: calc(var(--pat-toolbar-button-height) + 2 * var(--small-screen-padding));
}
}
@container main (width > 768px) {
.application-body.state-on .document-body {
--kik-win-db-left: var(--document-body-left-distance);
--kik-win-db-right: var(--document-body-right-distance, 0px);
}
}
@container main (width > 768px) {
.application-body.state-on.sidebar-left-open:not(.sidebar-left-closed):has(aside.sidebar) .document-body {
--kik-win-db-left: var(--document-body-left-distance-sidebar-open);
}
}
#app-space .application-body.state-on .document-body .pat-toolbar:not(.well-title-group *):not(.kik-win-floating-toolbar) {
--pat-toolbar-top-distance: 0.0001px;
--pat-toolbar-padding: var(--kik-win-inset);
--pat-toolbar-box-shadow: none;
top: 0;
left: 0;
right: 0;
border-radius: 0;
}
#app-space .application-body.state-on .document-body .pat-toolbar.kik-win-main-toolbar:not(.well-title-group *) {
position: fixed;
top: 0;
left: var(--kik-win-db-left, 0px);
right: var(--kik-win-db-right, 0px);
width: auto;
margin: 0;
padding-left: var(--kik-win-inset);
padding-right: var(--kik-win-inset);
z-index: var(--pat-toolbar-z-index, 11);
}
#app-space .application-body.state-on .document-body > .document-content:has(.kik-win-main-toolbar) {
padding-top: calc(var(--kik-win-toolbar-height) + var(--document-content-padding-top, 50px) - var(--kik-win-inset));
}
#app-space .application-body.state-on .document-body:has(.kik-win-main-toolbar):not(:has(.document-content .kik-win-main-toolbar)) {
padding-top: var(--kik-win-toolbar-height);
}
@container main (width <= 680px) {
#app-space .application-body.state-on .document-body > .document-content:has(.kik-win-main-toolbar) {
padding-top: var(--kik-win-toolbar-height);
}
}
@container screen style(--screen-small: true) {
#app-space .application-body.state-on .quaive-page-head:not(.well-title-group *) {
margin-bottom: 1rem;
}
}
#app-space .application-body.state-on .document-body .pat-toolbar.sticky.auto-hide {
animation: none !important;
}
#app-space .application-body.state-on .document-body.kik-scroll-down .pat-toolbar.sticky.auto-hide.kik-win-main-toolbar:not(:has(.tiptap-focus, .focus, :focus)) {
transform: translateY(var(--pat-toolbar-auto-hide-offset));
}
#app-space .application-body.state-on .document-body .pat-toolbar:not(.kik-win-floating-toolbar):before {
opacity: 0 !important;
}
#app-space .application-body.state-on .document-body .kik-win-main-toolbar::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
background-color: var(--pat-surface-background-colour);
-webkit-backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
backdrop-filter: var(--pat-toolbar-button-backdrop-filter);
border-bottom: 1px solid var(--default-border-colour);
opacity: 0;
transition: opacity var(--base-animation-duration, 0.3s);
pointer-events: none;
}
#app-space .application-body.state-on .document-body:not(.scroll-position-top) .kik-win-main-toolbar::after,
#app-space .application-body.state-on .document-body.kik-scrolled .kik-win-main-toolbar::after {
opacity: 1;
}
body[data-platform-mode="hub"] #app-space .application-body.state-on {
--kik-hub-bar-gap: 20px;
--kik-hub-bar-padding: 15px;
--kik-hub-bar-height: calc(var(--pat-toolbar-button-height) + 2 * var(--kik-hub-bar-padding));
}
@media (width > 768px) {
body[data-platform-mode="hub"] #app-space .application-body.state-on .document-body .pat-toolbar.kik-win-main-toolbar:not(.well-title-group *) {
--pat-toolbar-padding: var(--kik-hub-bar-padding);
top: var(--kik-hub-bar-gap);
left: calc(var(--kik-win-db-left, 0px) + var(--kik-hub-bar-gap));
right: calc(var(--kik-win-db-right, 0px) + var(--kik-hub-bar-gap));
padding-left: var(--kik-hub-bar-padding);
padding-right: var(--kik-hub-bar-padding);
border-radius: var(--pat-toolbar-backdrop-border-radius, 40px);
}
}
@media (width > 768px) {
body[data-platform-mode="hub"] #app-space .application-body.state-on .document-body .kik-win-main-toolbar::after {
border-radius: var(--pat-toolbar-backdrop-border-radius, 40px);
border-bottom: 0;
box-shadow: var(--kik-bar-float-shadow);
}
}
@media (width > 768px) {
body[data-platform-mode="hub"] #app-space .application-body.state-on:is(.sidebar-left-closed, :not(:has(> aside.sidebar .sidebar-content))) .document-body {
--kik-win-db-left: calc(var(--gns-left) + var(--gns-width-collapsed));
}
}
@media (width > 768px) {
body[data-platform-mode="hub"] #app-space .application-body.state-on .document-body > .document-content:has(.kik-win-main-toolbar) {
padding-top: calc(var(--kik-hub-bar-gap) + var(--kik-hub-bar-height) + var(--document-content-padding-top, 50px) - var(--kik-hub-bar-padding));
}
}
@media (width > 768px) {
body[data-platform-mode="hub"] #app-space .application-body.state-on .document-body:has(.kik-win-main-toolbar):not(:has(.document-content .kik-win-main-toolbar)) {
padding-top: calc(var(--kik-hub-bar-gap) + var(--kik-hub-bar-height));
}
}
@media (min-width: 681px) {
body[data-kik-desk-under-chrome] #main {
background-color: var(--kik-sw-stage);
transition: background-color var(--kik-window-move-duration, 0.3s) ease;
}
}
@media (min-width: 681px) {
body[data-kik-desk-under-chrome] #app-space {
background: transparent;
}
}
@media (min-width: 681px) {
body[data-kik-desk-under-chrome] #application-body-dashboard,
body[data-kik-desk-under-chrome] #document-body-dashboard {
--application-body-background-colour: transparent;
background: transparent;
}
}
@media (min-width: 681px) {
body[data-kik-desk-under-chrome] #app-space #application-body-dashboard :is(#portal, #document-content-dashboard) {
background-color: transparent;
}
}
@media (min-width: 681px) {
html.kik-desk-peek body[data-kik-desk-under-chrome] #main {
background-color: var(--kik-desk-peek-stage);
}
}
:root {
--kik-dock-close-inset: 7px;
--kik-dock-close-mark-scale: 0.6;
--kik-dock-close-duration: 0.2s;
--kik-dock-close-delay: 0.2s;
--kik-dock-close-rest-scale: 0.6;
--kik-dock-close-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
--kik-dock-title-fade: 30px;
--kik-dock-close-hover-shade: 10%;
}
@property --kik-dock-title-fade-now {
syntax: "";
inherits: false;
initial-value: 0px;
}
@media (hover: hover) {
body[data-global-nav="compact"] #global-header kik-app-label[data-open] .kal-close,
#global-header .kik-media-player-chip.in-header .kmp-chip-close {
position: absolute;
inset-block: var(--kik-dock-close-inset);
inset-inline-end: var(--kik-dock-close-inset);
width: auto;
min-width: 0;
height: auto;
aspect-ratio: 1;
margin: 0;
background-color: var(--kik-dock-close-face, #fff);
translate: none;
transform: scale(var(--kik-dock-close-rest-scale));
opacity: 0;
pointer-events: none;
transition:
opacity var(--kik-dock-close-duration) ease,
transform var(--kik-dock-close-duration) ease,
background-color var(--kik-dock-close-duration) ease,
pointer-events var(--kik-dock-close-duration);
transition-behavior: allow-discrete;
}
}
@media (hover: hover) {
body[data-global-nav="compact"] #global-header kik-app-label[data-open]:hover .kal-close,
#global-header .kik-media-player-chip.in-header:hover .kmp-chip-close {
opacity: 1;
pointer-events: auto;
transform: scale(1);
transition:
opacity var(--kik-dock-close-duration) ease var(--kik-dock-close-delay),
transform var(--kik-dock-close-duration) var(--kik-dock-close-spring) var(--kik-dock-close-delay),
background-color var(--kik-dock-close-duration) ease,
pointer-events var(--kik-dock-close-duration) var(--kik-dock-close-delay);
transition-behavior: allow-discrete;
}
}
@media (hover: hover) {
body[data-global-nav="compact"] #global-header kik-app-label[data-open]:active .kal-close:not(:active),
#global-header .kik-media-player-chip.in-header:active .kmp-chip-close:not(:active) {
pointer-events: none;
}
}
@media (hover: hover) {
body[data-global-nav="compact"] #global-header kik-app-label[data-open] .kal-close:hover,
#global-header .kik-media-player-chip.in-header .kmp-chip-close:hover {
background-color: color-mix(in srgb,
var(--kik-dock-close-face, #fff),
black var(--kik-dock-close-hover-shade));
}
}
@media (hover: hover) {
body[data-global-nav="compact"] #global-header kik-app-label[data-open] .kal-close::before,
#global-header .kik-media-player-chip.in-header .kmp-chip-close::before {
content: '';
width: calc(var(--kik-dock-close-mark-scale) * (100% + 2px));
height: calc(var(--kik-dock-close-mark-scale) * (100% + 2px));
background-color: currentColor;
-webkit-mask: url('/assets/libraries/quaive/glyphs/svg/close.svg') center / contain no-repeat;
mask: url('/assets/libraries/quaive/glyphs/svg/close.svg') center / contain no-repeat;
}
}
@media (hover: hover) {
body[data-global-nav="compact"] #global-header kik-app-label[data-open] .kal-name,
#global-header .kik-media-player-chip.in-header .kmp-chip-title,
#global-header .kik-media-player-chip.in-header .kmp-chip-byline {
-webkit-mask-image: linear-gradient(to var(--kik-dock-mask-end, right),
#000 calc(100% - var(--kik-dock-title-fade-now)),
transparent calc(100% - var(--kik-dock-title-fade-now) * 0.25));
mask-image: linear-gradient(to var(--kik-dock-mask-end, right),
#000 calc(100% - var(--kik-dock-title-fade-now)),
transparent calc(100% - var(--kik-dock-title-fade-now) * 0.25));
transition: --kik-dock-title-fade-now var(--kik-dock-close-duration) ease;
}
}
@media (hover: hover) {
body[dir="rtl"] #global-header kik-app-label[data-open] .kal-name,
body[dir="rtl"] #global-header .kik-media-player-chip.in-header .kmp-chip-title,
body[dir="rtl"] #global-header .kik-media-player-chip.in-header .kmp-chip-byline {
--kik-dock-mask-end: left;
}
}
@media (hover: hover) {
body[data-global-nav="compact"] #global-header kik-app-label[data-open]:hover .kal-name,
#global-header .kik-media-player-chip.in-header:hover .kmp-chip-title,
#global-header .kik-media-player-chip.in-header:hover .kmp-chip-byline {
--kik-dock-title-fade-now: var(--kik-dock-title-fade);
}
}
.kik-toc.pat-well {
padding: var(--small-screen-padding);
}
.page-module.pat-well.type-diagram {
background-color: var(--kik-diagram-background, var(--pat-well-background-colour));
}
@container screen style(--screen-small: true) {
.pat-modal-panel:has(.pat-miller-columns) .modal-toolbar .toolbar-section.quick-functions .pat-button.default[class*="icon-"] {
width: auto;
min-width: 0;
padding: 0 1em;
overflow: visible;
text-indent: 0;
font-family: inherit;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel:has(.pat-miller-columns) .modal-toolbar .toolbar-section.quick-functions .pat-button.default[class*="icon-"]::before {
content: none;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel:has(.pat-miller-columns) .modal-toolbar .toolbar-section.quick-functions .pat-button.default[class*="icon-"] > svg.kik-icon {
position: static;
transform: none;
display: inline-block;
height: 1lh;
vertical-align: top;
margin: 0;
margin-inline-end: 0.35em;
}
}
@container screen style(--screen-small: true) {
.pat-modal-panel:has(.pat-miller-columns) .modal-toolbar:has(.toolbar-section.quick-functions .pat-button) .toolbar-title {
display: none;
}
}
.kik-people-item.is-suggested .pat-avatar {
outline: 2px dashed #000;
outline-offset: 3px;
}
.kik-people-naming {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--kik-space-m, 1rem);
margin-block-end: var(--kik-space-m, 1rem);
}
.kik-people-naming form {
display: flex;
align-items: flex-end;
gap: var(--kik-space-s, 0.5rem);
}
.kik-people-naming .pat-avatar {
flex: none;
}
.kik-photo-people-list {
display: flex;
flex-wrap: wrap;
gap: var(--kik-space-s, 0.5rem);
}
.kik-photo-people-list a {
display: inline-flex;
align-items: center;
gap: 0.4em;
}
.kik-photo-people-list .pat-avatar {
inline-size: 1.8em;
block-size: 1.8em;
flex: none;
}
.image-selector .item.image.kik-face-framed > a {
display: block;
overflow: hidden;
}
.image-selector .item.image.kik-face-framed img {
object-fit: cover;
object-position: var(--kik-face-x, 50%) var(--kik-face-y, 50%);
transform-origin: var(--kik-face-ox, 50%) var(--kik-face-oy, 50%);
translate: var(--kik-face-tx, 0px) var(--kik-face-ty, 0px);
scale: var(--kik-face-scale, 1);
opacity: 0;
}
.image-selector .item.image.kik-face-framed.kik-face-ready img {
opacity: 1;
transition:
object-position var(--base-animation-duration, 0.2s) ease-in-out,
translate var(--base-animation-duration, 0.2s) ease-in-out,
scale var(--base-animation-duration, 0.2s) ease-in-out;
}
@media (hover: hover) {
.image-selector .item.image.kik-face-framed:hover img {
object-position: 50% 50%;
translate: 0px 0px;
scale: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.image-selector .item.image.kik-face-framed img {
transition: none;
}
}
.pat-message.kik-people-progress .kik-people-progress-bar {
display: block;
height: 6px;
margin-top: 0.6rem;
border-radius: 3px;
background-color: color-mix(in srgb, currentColor 14%, transparent);
overflow: hidden;
}
.pat-message.kik-people-progress .kik-people-progress-bar > span {
display: block;
height: 100%;
min-width: 3px;
border-radius: inherit;
background-color: var(--colour-accent, #888);
transition: width 0.4s ease-out;
}
kik-code-editor {
display: block;
padding-top: calc(var(--kik-win-toolbar-height, 0px) + var(--document-content-padding-top, 50px) - var(--kik-win-inset, 0px));
padding-right: 2px;
position: relative;
flex: 1 1 auto;
min-height: 0;
height: 100%;
}
#code-editor-form {
display: flex;
flex-direction: column;
min-height: 0;
height: 100%;
flex: 1 1 auto;
}
.kik-code-editor-surface {
height: 100%;
width: 100%;
}
kik-code-editor > script {
display: none;
}
kik-code-editor[data-failed]::after {
content: attr(data-label-unavailable);
display: block;
padding: var(--default-screen-padding, 20px);
color: var(--colour-byline);
}
#code-toolbar.code-dirty .toolbar-title::after {
content: '';
display: inline-block;
width: 0.5em;
height: 0.5em;
margin-inline-start: 0.4em;
border-radius: 50%;
background: var(--colour-accent);
vertical-align: middle;
}
.code-tree {
list-style: none;
margin: 0;
padding: 0;
}
.code-tree ul {
list-style: none;
margin: 0;
padding-inline-start: 1em;
}
.code-node > .panel-content > .code-tree-level {
list-style: none;
margin: 0;
padding-inline-start: 1em;
}
.code-node-label {
display: flex;
align-items: center;
gap: 0.4em;
width: 100%;
box-sizing: border-box;
padding: 0.15em 0.3em;
border: 0;
background: none;
color: inherit;
font: inherit;
text-align: start;
border-radius: var(--border-radii, 6px);
}
.code-node-label svg {
flex: 0 0 auto;
width: 1em;
height: 1em;
}
.code-node-label .code-node-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (hover: hover) {
.code-node-label:hover {
background: var(--item-selector-hover-colour);
}
}
.code-node.current > .code-node-label {
background: var(--item-selector-hover-colour);
font-weight: var(--font-weight-bold);
}
.code-node.is-opaque > .code-node-label {
color: var(--colour-byline);
}
.code-node.code-dir > .code-node-label > svg:first-of-type {
transition: transform var(--base-animation-duration, 0.2s);
}
.code-node.code-dir.open > .code-node-label > svg:first-of-type {
transform: rotate(90deg);
}
.pat-toolbar .pat-select.code-project-select .select-label {
display: inline;
max-width: 14em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pat-toolbar .pat-select.code-project-select .select-glyph {
margin-inline-end: 0.35em;
}
.monaco-editor .monaco-scrollable-element > .scrollbar {
background-color: transparent;
transition: background-color var(--base-animation-duration, 0.2s);
}
.monaco-editor .monaco-scrollable-element > .scrollbar > .slider {
background-color: transparent;
}
.monaco-editor .monaco-scrollable-element > .scrollbar > .slider::after {
content: '';
position: absolute;
border-radius: 999px;
background-color: rgba(0, 0, 0, 0.26);
background-color: color-mix(in srgb, var(--body-font-colour) 26%, transparent);
transition: width var(--base-animation-duration, 0.2s),
height var(--base-animation-duration, 0.2s),
background-color var(--base-animation-duration, 0.2s);
}
.monaco-editor .monaco-scrollable-element > .scrollbar.vertical > .slider::after {
top: 0;
bottom: 0;
right: 3px;
width: 3px;
}
.monaco-editor .monaco-scrollable-element > .scrollbar.horizontal > .slider::after {
left: 0;
right: 0;
bottom: 3px;
height: 3px;
}
.monaco-editor .monaco-scrollable-element > .scrollbar.vertical > .slider.active::after {
width: 10px;
}
.monaco-editor .monaco-scrollable-element > .scrollbar.horizontal > .slider.active::after {
height: 10px;
}
.monaco-editor .monaco-scrollable-element > .scrollbar > .slider.active::after {
background-color: rgba(0, 0, 0, 0.74);
background-color: color-mix(in srgb, var(--body-font-colour) 74%, transparent);
}
@media (hover: hover) {
.monaco-editor .monaco-scrollable-element > .scrollbar.kik-bar-hot {
background-color: rgba(0, 0, 0, 0.07);
background-color: color-mix(in srgb, var(--body-font-colour) 7%, transparent);
}
}
@media (hover: hover) {
.monaco-editor .monaco-scrollable-element > .scrollbar.kik-bar-hot > .slider::after {
background-color: rgba(0, 0, 0, 0.62);
background-color: color-mix(in srgb, var(--body-font-colour) 62%, transparent);
}
}
@media (hover: hover) {
.monaco-editor .monaco-scrollable-element > .scrollbar.vertical.kik-bar-hot > .slider::after {
width: 10px;
}
}
@media (hover: hover) {
.monaco-editor .monaco-scrollable-element > .scrollbar.horizontal.kik-bar-hot > .slider::after {
height: 10px;
}
}
kik-code-editor,
.kik-code-editor-surface,
.monaco-editor,
.monaco-editor .overflow-guard,
.monaco-editor-background,
.monaco-editor .margin {
background-color: transparent;
}
.portlet-reorder-list .kik-portlet-row {
display: flex;
align-items: center;
gap: 12px;
}
.portlet-reorder-list .kik-portlet-row .portlet-icon {
flex: 0 0 auto;
display: inline-grid;
place-content: center;
width: 28px;
height: 28px;
}
.portlet-reorder-list .kik-portlet-row .portlet-icon svg {
width: 24px;
height: 24px;
}
.portlet-reorder-list .kik-portlet-row .title {
flex: 1 1 auto;
min-width: 0;
margin: 0;
}
.portlet-reorder-list .kik-portlet-row select {
flex: 0 0 auto;
margin-inline-start: auto;
}
.portlet-reorder-list .kik-portlet-row .pat-form-field-toggle {
flex: 0 0 auto;
margin: 0 0 0 auto;
padding: 0;
border: 0;
}
.kik-image-picker {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
min-width: 0;
}
.kik-image-picker .kik-image-picker-tile {
position: relative;
display: block;
aspect-ratio: 4 / 3;
margin: 0;
padding: 0;
border-radius: 12px;
background: var(--colour-base-background, #fafaf8);
}
.kik-image-picker .kik-image-picker-tile img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.kik-image-picker .kik-image-picker-tile .kik-image-picker-dark {
clip-path: inset(0 0 0 50%);
}
.kik-image-picker .kik-image-picker-tile::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
pointer-events: none;
}
.kik-image-picker .kik-image-picker-tile input,
.kik-image-picker .kik-image-picker-tile .kik-image-picker-name {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
opacity: 0;
}
.kik-image-picker .kik-image-picker-tile:has(input:checked) {
box-shadow:
0 0 0 2px var(--colour-base-light, #ffffff),
0 0 0 4px var(--colour-accent, #f37021);
}
.kik-image-picker .kik-image-picker-tile:has(input:checked)::before {
content: "";
position: absolute;
z-index: 1;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: var(--colour-accent, #f37021);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
background-size: 14px 14px;
background-position: center;
background-repeat: no-repeat;
box-shadow: 0 0 0 2px var(--colour-base-light, #ffffff);
}
.kik-image-picker .kik-image-picker-tile:has(input:focus-visible) {
outline: 2px solid currentColor;
outline-offset: 6px;
}
@media (hover: hover) {
.kik-image-picker .kik-image-picker-tile:not(:has(input:checked)):hover {
box-shadow: 0 0 0 2px var(--colour-base-light, #ffffff), 0 0 0 4px rgba(0, 0, 0, 0.18);
}
}
@media (max-width: 680px) {
.kik-image-picker {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
}
}