.tcp-cloud-container {
--tcp-cloud-text: var(--tcp-desktop-text, #26323f);
--tcp-cloud-muted: var(--tcp-desktop-muted, #64748b);
--tcp-cloud-surface: var(--tcp-desktop-surface, #ffffff);
--tcp-cloud-border: var(--tcp-desktop-border, #d8dee6);
--tcp-cloud-accent: var(--tcp-desktop-accent, #cc0000);
--tcp-cloud-hover-bg: var(--tcp-desktop-hover-bg, #cc0000);
--tcp-cloud-hover-text: var(--tcp-desktop-hover-text, #ffffff);
--tcp-cloud-font-size: var(--tcp-desktop-font-size, 15px);
--tcp-cloud-gap: var(--tcp-desktop-gap, 9px);
--tcp-cloud-radius: var(--tcp-desktop-radius, 3px);
--tcp-cloud-level-1-text: #cc0000;
--tcp-cloud-level-2-text: #a30000;
--tcp-cloud-level-3-text: #7f1d1d;
--tcp-cloud-level-4-text: #5f1f2a;
--tcp-cloud-level-5-text: #3f2a2a;
--tcp-cloud-level-6-text: #334155;
--tcp-cloud-level-7-text: #526071;
--tcp-cloud-level-8-text: #55606d;
--tcp-cloud-level-9-text: #4a535e;
--tcp-cloud-level-10-text: #3d444e;
--tcp-cloud-shadow: 0 14px 34px rgba(15, 23, 42, 0.14);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--tcp-cloud-gap);
box-sizing: border-box;
font-size: var(--tcp-cloud-font-size);
line-height: 1.25;
}
.tcp-cloud-container,
.tcp-cloud-container * {
box-sizing: border-box;
}
.tcp-widget-layout {
margin: 10px 0 0;
padding: 0;
}
.tcp-cloud-container .tcp-tag-item,
.tcp-cloud-container .tcp-tag-item:link,
.tcp-cloud-container .tcp-tag-item:visited {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
max-width: 100%;
min-height: 2.1em;
margin: 0;
padding: 0.42em 0.72em;
border: 1px solid var(--tcp-cloud-border) !important;
border-bottom: 1px solid var(--tcp-cloud-border) !important;
border-radius: var(--tcp-cloud-radius);
background: var(--tcp-cloud-surface);
background-image: none !important;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
color: var(--tcp-tag-tier-color, var(--tcp-cloud-text)) !important;
font-family: inherit;
font-style: normal;
letter-spacing: 0;
line-height: 1.1;
text-align: center;
text-decoration: none !important;
text-decoration-line: none !important;
text-underline-offset: 0;
text-shadow: none;
word-break: keep-all;
overflow-wrap: anywhere;
transform: translateY(0);
transform-origin: center;
isolation: isolate;
transition:
background-color 180ms ease,
background-image 180ms ease,
border-color 180ms ease,
box-shadow 180ms ease,
color 180ms ease,
opacity 180ms ease,
transform 180ms ease;
}
.tcp-cloud-container .tcp-tag-item::before,
.tcp-cloud-container .tcp-tag-item::after {
display: none !important;
content: none !important;
}
.tcp-cloud-container .tcp-tag-item[hidden] {
display: none !important;
}
.tcp-cloud-container .tcp-tag-item:hover,
.tcp-cloud-container .tcp-tag-item:focus {
border-color: var(--tcp-cloud-hover-bg) !important;
border-bottom-color: var(--tcp-cloud-hover-bg) !important;
background: var(--tcp-cloud-hover-bg) !important;
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.13), rgba(0, 0, 0, 0.04)) !important;
box-shadow: var(--tcp-cloud-hover-shadow, var(--tcp-cloud-shadow));
color: var(--tcp-cloud-hover-text) !important;
opacity: 1;
text-decoration: none !important;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
transform: translateY(-2px) scale(var(--tcp-cloud-hover-scale, 1.02));
}
.tcp-cloud-container .tcp-tag-item:active {
background: var(--tcp-cloud-hover-bg) !important;
box-shadow: 0 5px 14px rgba(15, 23, 42, 0.16);
color: var(--tcp-cloud-hover-text) !important;
transform: translateY(0);
}
.tcp-cloud-container .tcp-tag-item:focus-visible {
outline: 2px solid var(--tcp-cloud-accent);
outline-offset: 3px;
}
.tcp-cloud-container .tcp-tag-item.level-1-peak {
padding: 0.5em 0.9em;
border-color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-1-text)) !important;
background: var(--tcp-cloud-surface);
color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-1-text)) !important;
font-size: 1.2em;
font-weight: 800;
}
.tcp-cloud-container .tcp-tag-item.level-2-prime {
border-color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-2-text)) !important;
background: var(--tcp-cloud-surface);
color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-2-text)) !important;
font-size: 1.14em;
font-weight: 750;
}
.tcp-cloud-container .tcp-tag-item.level-3-strong {
color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-3-text)) !important;
font-size: 1.08em;
font-weight: 720;
}
.tcp-cloud-container .tcp-tag-item.level-4-high {
color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-4-text)) !important;
font-size: 1.03em;
font-weight: 680;
}
.tcp-cloud-container .tcp-tag-item.level-5-solid {
color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-5-text)) !important;
font-size: 0.99em;
font-weight: 640;
}
.tcp-cloud-container .tcp-tag-item.level-6-medium {
color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-6-text)) !important;
font-size: 0.96em;
font-weight: 600;
}
.tcp-cloud-container .tcp-tag-item.level-7-soft {
color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-7-text)) !important;
font-size: 0.93em;
font-weight: 560;
}
.tcp-cloud-container .tcp-tag-item.level-8-light {
color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-8-text)) !important;
font-size: 0.9em;
font-weight: 530;
}
.tcp-cloud-container .tcp-tag-item.level-9-faint {
color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-9-text)) !important;
font-size: 0.88em;
font-weight: 500;
}
.tcp-cloud-container .tcp-tag-item.level-10-muted {
color: var(--tcp-tag-tier-color, var(--tcp-cloud-level-10-text)) !important;
font-size: 0.86em;
font-weight: 480;
opacity: 0.88;
}
.tcp-cloud-container .tcp-tag-item.level-10-muted:hover,
.tcp-cloud-container .tcp-tag-item.level-10-muted:focus {
opacity: 1;
}
.tcp-cloud-container .tcp-tag-item:hover,
.tcp-cloud-container .tcp-tag-item:focus,
.tcp-cloud-container .tcp-tag-item:hover:visited,
.tcp-cloud-container .tcp-tag-item:focus:visited,
.tcp-cloud-container .tcp-tag-item.level-1-peak:hover,
.tcp-cloud-container .tcp-tag-item.level-1-peak:focus,
.tcp-cloud-container .tcp-tag-item.level-2-prime:hover,
.tcp-cloud-container .tcp-tag-item.level-2-prime:focus,
.tcp-cloud-container .tcp-tag-item.level-3-strong:hover,
.tcp-cloud-container .tcp-tag-item.level-3-strong:focus,
.tcp-cloud-container .tcp-tag-item.level-4-high:hover,
.tcp-cloud-container .tcp-tag-item.level-4-high:focus,
.tcp-cloud-container .tcp-tag-item.level-5-solid:hover,
.tcp-cloud-container .tcp-tag-item.level-5-solid:focus,
.tcp-cloud-container .tcp-tag-item.level-6-medium:hover,
.tcp-cloud-container .tcp-tag-item.level-6-medium:focus,
.tcp-cloud-container .tcp-tag-item.level-7-soft:hover,
.tcp-cloud-container .tcp-tag-item.level-7-soft:focus,
.tcp-cloud-container .tcp-tag-item.level-8-light:hover,
.tcp-cloud-container .tcp-tag-item.level-8-light:focus,
.tcp-cloud-container .tcp-tag-item.level-9-faint:hover,
.tcp-cloud-container .tcp-tag-item.level-9-faint:focus,
.tcp-cloud-container .tcp-tag-item.level-10-muted:hover,
.tcp-cloud-container .tcp-tag-item.level-10-muted:focus {
color: var(--tcp-cloud-hover-text) !important;
-webkit-text-fill-color: var(--tcp-cloud-hover-text);
}
@media (max-width: 767px) {
.tcp-cloud-container:not(.tcp-cloud-context-widget) {
--tcp-cloud-text: var(--tcp-mobile-text, #26323f);
--tcp-cloud-muted: var(--tcp-mobile-muted, #64748b);
--tcp-cloud-surface: var(--tcp-mobile-surface, #ffffff);
--tcp-cloud-border: var(--tcp-mobile-border, #d8dee6);
--tcp-cloud-accent: var(--tcp-mobile-accent, #cc0000);
--tcp-cloud-hover-bg: var(--tcp-mobile-hover-bg, #cc0000);
--tcp-cloud-hover-text: var(--tcp-mobile-hover-text, #ffffff);
--tcp-cloud-font-size: var(--tcp-mobile-font-size, 14px);
--tcp-cloud-gap: var(--tcp-mobile-gap, 7px);
--tcp-cloud-radius: var(--tcp-mobile-radius, 3px);
}
.tcp-cloud-container .tcp-tag-item,
.tcp-cloud-container .tcp-tag-item:link,
.tcp-cloud-container .tcp-tag-item:visited {
min-height: 2em;
padding: 0.38em 0.62em;
}
.tcp-cloud-container .tcp-tag-item.level-1-peak {
font-size: 1.1em;
}
.tcp-cloud-container .tcp-tag-item.level-2-prime {
font-size: 1.02em;
}
}
.tcp-cloud-container.tcp-cloud-context-widget {
--tcp-cloud-text: var(--tcp-widget-text, #26323f);
--tcp-cloud-muted: var(--tcp-widget-muted, #64748b);
--tcp-cloud-surface: var(--tcp-widget-surface, #ffffff);
--tcp-cloud-border: var(--tcp-widget-border, #d8dee6);
--tcp-cloud-accent: var(--tcp-widget-accent, #cc0000);
--tcp-cloud-hover-bg: var(--tcp-widget-hover-bg, #cc0000);
--tcp-cloud-hover-text: var(--tcp-widget-hover-text, #ffffff);
--tcp-cloud-font-size: var(--tcp-widget-font-size, 13px);
--tcp-cloud-gap: var(--tcp-widget-gap, 7px);
--tcp-cloud-radius: var(--tcp-widget-radius, 3px);
}