@charset "utf-8";

szn-login-menu { color: var(--fg); }

szn-login-menu a { color: var(--link); text-decoration: none; transition: color 300ms; }

szn-login-menu a:focus-visible { outline: rgb(64, 64, 64) solid 2px; }

szn-login-menu a:visited { color: var(--link); }

szn-login-menu a:focus, szn-login-menu a:hover { color: var(--link-hover); text-decoration: underline; }

szn-login-menu #user, szn-login-menu #users a { white-space: nowrap; display: flex; max-width: 100%; }

szn-login-menu #user p, szn-login-menu #users a p { margin: 0px 0px 0px 12px; overflow: hidden; text-overflow: ellipsis; }

szn-login-menu #user p strong, szn-login-menu #users a p strong { display: block; font-size: 18px; line-height: 24px; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; }

szn-login-menu #user { padding: 16px; }

szn-login-menu [data-action="debug"] { color: rgb(252, 103, 35); }

szn-login-menu li:has(.warning) { display: flex; align-items: center; justify-content: space-between; }

szn-login-menu .hint { margin: 2px 0px 0px; color: rgb(135, 149, 162); font-size: 12px; line-height: 1.3; font-style: italic; }

szn-login-menu .warning { display: flex; align-items: center; background-color: rgba(204, 0, 0, 0.1); border-radius: 11px; text-transform: uppercase; padding: 0px 8px 0px 0px; font-size: 10px; line-height: 20px; font-weight: bold; color: rgb(204, 0, 0); }

szn-login-menu .warning .icon { width: 16px; height: 16px; margin: 3px 8px 3px 3px; }

szn-login-menu .icon-question { display: inline-block; vertical-align: middle; width: 16px; height: 16px; margin-left: 4px; color: rgba(1, 30, 57, 0.6); }

szn-login-menu .logout-box { flex-direction: column; margin-top: 8px; padding: 16px 12px; border-radius: 12px; background-color: rgb(255, 255, 255); text-align: center; }

szn-login-menu .logout-box:not([hidden]) { display: flex; }

szn-login-menu .logout-box p { margin: 0px; padding: 0px 30px; line-height: 1.3; font-weight: bold; }

szn-login-menu .logout-box button { margin-top: 12px; font-size: 13px; height: 37px; border-radius: 8px; font-weight: 700; transition: 300ms; }

szn-login-menu .logout-box button[type="submit"] { color: rgb(255, 255, 255); background-color: rgb(204, 0, 0); }

szn-login-menu .logout-box button[type="submit"]:hover { background-color: rgb(167, 6, 6); }

szn-login-menu .logout-box button[type="button"] { color: rgb(204, 0, 0); border: 1px solid rgb(204, 0, 0); }

szn-login-menu .logout-box button[type="button"]:hover { background-color: rgba(204, 0, 0, 0.08); }

szn-login-menu .logout-box a { margin-top: 16px; font-size: 13px; color: rgb(204, 0, 0); }

szn-avatar { display: block; position: relative; }

szn-avatar .icon { position: absolute; }

szn-avatar img { display: block; border-radius: 50%; }

szn-avatar img.fade { opacity: 0.5; }

szn-avatar .icon-lock { right: -8px; bottom: -8px; }

szn-avatar .icon-premium { left: -8px; top: -8px; }

szn-avatar .unread { box-shadow: rgb(255, 255, 255) 0px 0px 0px 1px; }

szn-avatar .unread[data-style="small"] { color: transparent; width: 8px; height: 8px; right: 0px; top: 0px; }

szn-avatar .unread[data-style="big"] { width: 16px; height: 16px; right: -4px; top: -4px; }

button.stack { position: relative; padding: 8px; border-radius: 4px; }

button.stack[data-cut="number"] .unread { left: calc(50% + 2px); top: calc(50% - 18px); width: 16px; height: 16px; }

button.stack[data-cut="dot"] .unread { left: calc(50% + 2px); top: calc(50% - 14px); width: 8px; height: 8px; color: transparent; }

button.stack .icon-email-cut-dot + .unread { left: calc(50% + 9px); }

button.stack .icon-bubble-cut-dot + .unread { left: calc(50% + 8px); }

button.stack + #badge { margin-left: 8px; }

szn-notifications { padding: 12px 16px; }

szn-notifications:not([hidden]) { display: block; }

szn-notifications > header { display: flex; margin-bottom: 12px; justify-content: space-between; align-items: center; }

szn-notifications > header a { color: var(--link); text-decoration: none; transition: color 300ms; }

szn-notifications > header a:focus-visible { outline: rgb(64, 64, 64) solid 2px; }

szn-notifications > header a:visited { color: var(--link); }

szn-notifications > header a:focus, szn-notifications > header a:hover { color: var(--link-hover); text-decoration: underline; }

szn-notifications h2 { font-size: 18px; line-height: 24px; margin: 0px; padding: 0px; }

szn-notifications .onboarding { display: flex; flex-direction: column; padding: 12px 0px; gap: 16px; }

szn-notifications .onboarding img { align-self: center; }

szn-notifications .onboarding h2 { font-size: 21px; line-height: 28px; }

szn-notifications .onboarding p { margin: 0px; color: rgb(109, 109, 109); }

szn-notifications .onboarding a { margin: 0px 24px; display: flex; height: 48px; padding-top: 11px; justify-content: center; text-decoration: none; border-radius: 4px; color: rgb(255, 255, 255); font-size: 16px; font-weight: bold; background-color: rgb(204, 0, 0); box-shadow: rgba(204, 0, 0, 0.4) 0px 8px 24px -8px; transition: background-color 300ms; }

szn-notifications .onboarding a:focus-visible { outline: rgb(64, 64, 64) solid 2px; }

szn-notifications .onboarding a:hover { background-color: rgb(153, 0, 0); }

szn-notifications::before { content: ""; opacity: 0; transition: opacity 300ms 500ms; }

szn-notifications.loading::before { opacity: 1; position: absolute; top: 0px; width: 50%; height: 4px; background-color: rgb(204, 0, 0); animation: 2s ease-in-out 0s infinite alternate none running loading; }

@keyframes loading { 
  0% { left: 0px; }
  100% { left: 50%; }
}

szn-notification { background-color: var(--notification-bg); border-radius: 4px; box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 1px 0px; --line-clamp: 2; }

szn-notification:not([hidden]) { display: block; }

szn-notification.clickable:not(.clicked) { box-shadow: rgba(0, 0, 0, 0.2) 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px 1px 4px, rgba(0, 0, 0, 0.3) 0px 16px 24px -16px; }

szn-notification.clickable.clicked { background-color: transparent; }

szn-notification.clickable.clicked h3 { font-weight: normal; }

szn-notification:not(.clickable) { padding: 12px; }

szn-notification + szn-notification { margin-top: 16px; }

szn-notification .blind { position: absolute; overflow: hidden; width: 0px; }

szn-notification > a { display: block; color: inherit; text-decoration: none; padding: 12px; border-radius: 4px; }

szn-notification > a:focus-visible { outline: rgb(64, 64, 64) solid 2px; }

szn-notification h3, szn-notification p { overflow: hidden; text-overflow: ellipsis; margin: 0px; }

szn-notification header, szn-notification footer { display: flex; align-items: center; }

szn-notification header { margin-bottom: 8px; }

szn-notification header .logo { width: 32px; height: 32px; margin-right: 8px; flex: 0 0 auto; position: relative; }

szn-notification header .mid { overflow: hidden; flex: 1 1 auto; }

szn-notification header .close { padding: 0px; margin-left: auto; align-self: flex-start; }

szn-notification footer { margin-top: 8px; }

szn-notification h3 { font: inherit; }

szn-notification p.subject { white-space: nowrap; margin-bottom: 4px; }

szn-notification p.content { color: rgb(128, 128, 128); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--line-clamp); }

szn-notification[data-type="generic"] header .logo img, szn-notification[data-type="zbozi-stars"] header .logo img, szn-notification[data-type="zbozi-rating"] header .logo img { max-width: 48px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

szn-notification[data-type="generic"] h3, szn-notification[data-type="zbozi-stars"] h3, szn-notification[data-type="zbozi-rating"] h3 { white-space: nowrap; }

szn-notification[data-type="generic"] .created, szn-notification[data-type="zbozi-stars"] .created, szn-notification[data-type="zbozi-rating"] .created { font-size: 12px; line-height: 20px; color: rgb(128, 128, 128); }

szn-notification[data-type="zbozi-stars"], szn-notification[data-type="zbozi-rating"] { padding: 12px; }

szn-notification[data-type="zbozi-rating"] .rating { margin-top: 16px; display: flex; }

szn-notification[data-type="zbozi-rating"] .rating a { color: rgb(0, 0, 0); flex: 1 0 0px; padding: 16px 0px 12px; display: flex; flex-direction: column; align-items: center; border-radius: 12px; border: 2px solid rgb(240, 240, 240); background-color: rgb(240, 240, 240); font-size: 13px; line-height: 16px; text-decoration: none; }

szn-notification[data-type="zbozi-rating"] .rating a:hover { border-color: currentcolor; background-color: transparent; font-weight: bold; }

szn-notification[data-type="zbozi-rating"] .rating a + a { margin-left: 8px; }

szn-notification[data-type="zbozi-rating"] .rating a .icon { width: 24px; margin-bottom: 12px; }

szn-notification[data-type="zbozi-stars"] > a { position: relative; background-color: var(--notification-bg); padding: 8px; margin: 8px; border-radius: 16px; }

szn-notification[data-type="zbozi-stars"] > a img { display: block; margin: auto; max-width: 100%; }

szn-notification[data-type="zbozi-stars"] > a::after { content: ""; position: absolute; inset: 0px; background-color: rgba(1, 30, 57, 0.04); border-radius: 16px; }

szn-notification[data-type="zbozi-stars"] .stars { margin: 4px auto 0px; display: flex; width: 192px; justify-content: space-between; }

szn-notification[data-type="zbozi-stars"] .stars a:not(.active) .icon-star-filled { display: none; }

szn-notification[data-type="zbozi-stars"] .stars a.active .icon-star-empty { display: none; }

szn-notification[data-type="zbozi-stars"] .stars .icon { width: 32px; display: block; }

szn-notification[data-type="reactions"] { --line-clamp: 3; }

szn-notification[data-type="reactions"] .logo img { border-radius: 50%; position: absolute; }

szn-notification[data-type="reactions"] .logo img:only-child { left: 0px; top: 0px; }

szn-notification[data-type="reactions"] .logo img:not(:only-child) { border: 2px solid rgb(255, 255, 255); }

szn-notification[data-type="reactions"] .logo img:not(:only-child):nth-child(1) { right: -3px; top: -3px; }

szn-notification[data-type="reactions"] .logo img:not(:only-child):nth-child(2) { left: -3px; bottom: -3px; }

szn-notification[data-type="reactions"] footer { position: relative; padding-left: 24px; }

szn-notification[data-type="reactions"] footer img { width: 24px; height: 24px; position: absolute; left: -4px; bottom: -1px; }

szn-notification[data-type="reactions"] footer span { flex: 1 1 auto; max-width: 20px; color: rgba(150, 150, 150, 0.2); }

szn-notification[data-type="reactions"] footer span::before { content: "•"; }

szn-notification.new[data-type="generic"] .created::after { content: ""; display: inline-block; vertical-align: middle; width: 6px; height: 6px; border-radius: 50%; background-color: rgb(204, 0, 0); margin-left: 8px; margin-bottom: 2px; }

szn-notification.new[data-type="reactions"] h3::before { content: ""; display: inline-block; vertical-align: middle; width: 8px; height: 8px; border-radius: 50%; background-color: rgb(204, 0, 0); margin-right: 8px; }

button.mess { position: relative; padding: 8px; border-radius: 4px; }

button.mess[data-cut="dot"] .unread { left: calc(50% + 7px); top: calc(50% - 14px); width: 8px; height: 8px; color: transparent; }

button { border: none; background: transparent; cursor: pointer; font: inherit; position: relative; transition: color 300ms; color: rgb(192, 192, 192); }

button:focus-visible { outline: rgb(64, 64, 64) solid 2px; }

button:hover, button[aria-expanded="true"], button.active { color: var(--icon-hover); }

#buttons { display: flex; align-items: center; }

#buttons #stacks { margin-right: 8px; gap: 8px; }

#buttons #stacks:not([hidden]) { display: flex; }

.popup { position: absolute; top: 48px; z-index: var(--popup-z-index); }

.popup:not([hidden]) { animation: 300ms ease 0s 1 normal none running appear; }

@media (max-width: 415px) {
  #popup { width: 100vw; border-radius: 0px; }
}

#tabs { border-bottom: 1px solid rgba(150, 150, 150, 0.2); }

#tabs:not([hidden]) { display: flex; }

#tabs button:not([hidden]) { flex: 1 0 0px; height: 56px; display: flex; align-items: center; justify-content: center; }

#tabs button:not([hidden]) + button { border-left: 1px solid rgba(150, 150, 150, 0.2); }

ul { list-style: none; border-top: 1px solid rgba(150, 150, 150, 0.2); margin: 0px; padding: 0px; }

ul:empty { display: none; }

.icon { width: 24px; height: 24px; display: block; }

.icon path:not([fill]), .icon polygon:not([fill]), .icon circle:not([fill]) { fill: currentcolor; }

.unread { position: absolute; border-radius: 50%; font-weight: bold; font-size: 11px; line-height: 16px; background-color: rgb(204, 0, 0); color: rgb(255, 255, 255); }

#login { text-decoration: none; transition: color 300ms; color: var(--link-hover); border-radius: 4px; line-height: 40px; }

#login:focus-visible { outline: rgb(64, 64, 64) solid 2px; }

#login:visited { color: var(--link); }

#login:focus, #login:hover { color: var(--link-hover); text-decoration: underline; }

#badge { border-radius: 50%; padding: 0px; }

#badge .icon-warning { position: absolute; right: -8px; bottom: -8px; }

@keyframes appear { 
  0% { max-height: 0px; opacity: 0; }
  100% { max-height: 75vh; opacity: 1; }
}

.comments { padding-top: 5rem; max-width: 790px; margin: 0px auto; padding-inline: 1rem; padding-bottom: 6rem; }

.comments__list .comments__item:last-child { border-bottom: 1px solid var(--border-color); }

.comments__item-answer { border-bottom: 0px !important; }

.comments__item { display: flex; align-items: start; column-gap: 0.9rem; font-size: 0.925rem; line-height: 1.65; border-top: 1px solid rgb(224, 225, 226); padding-top: 0.25rem; padding-bottom: 0rem; }

.comments__item-answer { margin-top: 1.25rem; }

.comments__item-image { flex-shrink: 0; }

.comments__item-image img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }

.comments__item-body-top { display: flex; align-items: center; justify-content: space-between; column-gap: 1rem; }

.comments__item-info { display: flex; align-items: center; flex-wrap: wrap; column-gap: 0.85rem; }

.comments__item-body { flex-grow: 1; }

.comments__item-name { font-weight: 700; color: var(--primary); letter-spacing: 0.5px; }

.comments__item-date { color: var(--color-gray); font-size: 0.85rem; }

.comments__item-rating { display: flex; align-items: center; column-gap: 0.5rem; font-size: 0.85rem; }

.comments__item-rating-button { width: 1.25rem; height: 1.25rem; padding: 0.3rem; flex-shrink: 0; background-color: rgba(98, 98, 98, 0.216); display: flex; align-items: center; justify-content: center; border-radius: 100%; }

.comments__item-rating-button svg { width: 100%; height: 100%; }

.comments__item-body-top { margin-bottom: 0.35rem; }

.comments__item-body-bottom { margin-top: 1rem; text-align: end; color: var(--color-gray); font-size: 0.85rem; }

.comments__more { padding-top: 2rem; text-align: center; font-size: 1.15rem; color: var(--primary); }

.comments-list { display: flex; flex-direction: column; gap: 0px; max-width: 790px; margin: 0px auto; padding: 0px 1rem; }

.comment-item { padding: 20px 0px; border-top: 1px solid rgb(224, 225, 226); }

.comment-item:first-child { border-top: none; padding-top: 0px; }

.comment-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }

.comment-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: rgb(232, 232, 236); display: flex; align-items: center; justify-content: center; }

.comment-avatar.blue { background: rgb(220, 232, 245); color: rgb(26, 115, 232); }

.comment-avatar.green { background: rgb(218, 240, 224); color: rgb(46, 139, 87); }

.comment-avatar.orange { background: rgb(253, 232, 216); color: rgb(217, 119, 6); }

.comment-avatar.purple { background: rgb(232, 223, 245); color: rgb(124, 58, 237); }

.comment-avatar.red { background: rgb(253, 226, 226); color: rgb(204, 0, 0); }

.comment-avatar span { font-size: 14px; font-weight: 700; }

.comment-author { font-size: 14px; font-weight: 700; color: rgb(26, 26, 26); }

.comment-date { font-size: 13px; color: rgb(136, 136, 136); margin-left: auto; }

.comment-text { font-size: 15px; line-height: 1.6; color: rgb(51, 51, 51); margin-bottom: 12px; padding-left: 52px; }

.comment-text a.link { color: rgb(26, 115, 232); text-decoration: none; }

.comment-text a.link:hover { text-decoration: underline; }

.comment-actions { display: flex; align-items: center; gap: 16px; padding-left: 52px; }

.comment-action-btn { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: rgb(136, 136, 136); background: none; border: none; cursor: pointer; font-family: inherit; padding: 4px 0px; transition: color 0.15s; }

.comment-action-btn:hover { color: rgb(26, 26, 26); }

.comment-action-btn svg { width: 18px; height: 18px; stroke: currentcolor; stroke-width: 1.8; fill: none; }

.comment-action-btn .count { font-weight: 600; color: rgb(204, 0, 0); }

.comment-reply-btn { font-size: 13px; color: rgb(26, 115, 232); background: none; border: none; cursor: pointer; font-family: inherit; font-weight: 600; padding: 4px 0px; }

.comment-reply-btn:hover { text-decoration: underline; }

.comment-reply { margin-left: 52px; padding: 16px 0px 0px 16px; border-left: 2px solid rgb(232, 232, 236); }

.comment-reply .comment-item { border-top: none; padding-top: 12px; }

.comment-reply .comment-text, .comment-reply .comment-actions { padding-left: 52px; }

.comments-load-more { display: flex; justify-content: center; margin-top: 24px; padding-bottom: 40px; }

.btn-load-more { display: inline-flex; align-items: center; gap: 8px; background: none; border: 2px solid rgb(224, 225, 226); border-radius: 8px; padding: 12px 32px; font-family: inherit; font-size: 14px; font-weight: 600; color: rgb(26, 26, 26); cursor: pointer; transition: 0.2s; }

.btn-load-more:hover { border-color: rgb(26, 26, 26); background: rgb(245, 245, 245); }

.btn-load-more svg { width: 16px; height: 16px; stroke: currentcolor; stroke-width: 2; fill: none; }

@media (max-width: 768px) {
  .comment-text, .comment-actions { padding-left: 0px; }
  .comment-reply { margin-left: 20px; }
  .comment-reply .comment-text, .comment-reply .comment-actions { padding-left: 0px; }
  .comment-avatar { width: 36px; height: 36px; }
  .comment-avatar span { font-size: 12px; }
}