I’ve been messing around with Anas Box’s Mushroom based animated cards and finally got it set up the way I like it. I want to have Temp and Humidity cards stacked left to right as shown in the screenshot below. When I took it the next step to add in the minigraph card via vertical stack in card, it ends up becoming a full width card and to have the line up nicely you have to place them in a grid card. But no matter what I try for the ha-card styling, I can’t seem to make the background as transparent as before and I can’t eliminate the gap for a seamless effect.
The screenshot shows each individual card on the top row of the section. The bottom row is the grid card. You can see how visible the gap is and how the background doesn’t blend as nicely into the background of the dashboard.
Here’s the beginning of my grid card YAML:
square: false
type: grid
columns: 2
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.grid {
gap: 0px !important;
row-gap: 0px !important;
column-gap: 0px !important;
}
cards:
- type: custom:vertical-stack-in-card
cards:
Any suggestions or advice on what to try would be appreciated!
And if you want to paste the whole thing and troubleshoot from there here’s the full card YAML below:
square: false
type: grid
columns: 2
card_mod:
style: |
ha-card {
background: transparent !important;
box-shadow: none !important;
border: none !important;
}
.grid {
gap: 0px !important;
row-gap: 0px !important;
column-gap: 0px !important;
}
cards:
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.outside_temp_average
tap_action:
action: more-info
icon: mdi:temperature-celsius
primary_info: state
secondary_info: none
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{# ========== CONFIG ========== #}
{% set temp = states('sensor.outside_temp_average') | float(0) %}
{# DEFAULTS (will be overridden by ranges) #}
{% set rgb = '0,140,255' %}
{% set anim = 'temp-cold-breathe' %}
{% set glow_anim = 'temp-cold-glow' %}
{% set halo_anim = 'temp-cold-halo' %}
{% set duration = 4.0 %}
{% set intensity = 0.5 %}
{# ============================= #}
{# NEW RANGES / COLORS (°C) #}
{# ============================= #}
{% if temp < -10 %}
{# VERY COLD - snowy / icy (almost white) #}
{% set rgb = '235,250,255' %}
{% set anim = 'temp-verycold-freeze' %}
{% set glow_anim = 'temp-verycold-glow' %}
{% set halo_anim = 'temp-verycold-halo' %}
{% set duration = 6.0 %}
{% set intensity = 0.30 %}
{% elif temp < 5 %}
{# COLD - blue #}
{% set rgb = '0,140,255' %}
{% set anim = 'temp-cold-breathe' %}
{% set glow_anim = 'temp-cold-glow' %}
{% set halo_anim = 'temp-cold-halo' %}
{% set duration = 4.4 %}
{% set intensity = 0.40 %}
{% elif temp < 15 %}
{# COOL - light blue #}
{% set rgb = '120,210,255' %}
{% set anim = 'temp-cool-wave' %}
{% set glow_anim = 'temp-cool-glow' %}
{% set halo_anim = 'temp-cool-halo' %}
{% set duration = 3.4 %}
{% set intensity = 0.55 %}
{% elif temp < 25 %}
{# COMFY - yellow #}
{% set rgb = '255,210,40' %}
{% set anim = 'temp-comfy-breathe' %}
{% set glow_anim = 'temp-comfy-glow' %}
{% set halo_anim = 'temp-comfy-halo' %}
{% set duration = 3.0 %}
{% set intensity = 0.60 %}
{% elif temp < 30 %}
{# WARM - orange #}
{% set rgb = '255,150,40' %}
{% set anim = 'temp-warm-pulse' %}
{% set glow_anim = 'temp-warm-glow' %}
{% set halo_anim = 'temp-warm-halo' %}
{% set duration = 2.4 %}
{% set intensity = 0.80 %}
{% else %}
{# HOT - red #}
{% set rgb = '255,40,40' %}
{% set anim = 'temp-hot-shimmer' %}
{% set glow_anim = 'temp-hot-glow' %}
{% set halo_anim = 'temp-hot-halo' %}
{% set duration = 2.0 %}
{% set intensity = 1.0 %}
{% endif %}
{# Apply variables #}
--temp-rgb: {{ rgb }};
--temp-intensity: {{ intensity }};
--shape-animation: {{ anim }} {{ duration }}s ease-in-out infinite;
--temp-glow-animation: {{ glow_anim }} {{ (duration * 0.9) | round(2) }}s ease-in-out infinite;
--temp-halo-animation: {{ halo_anim }} {{ (duration * 1.15) | round(2) }}s ease-in-out infinite;
opacity: 1;
/* Icon color follows the temperature */
--icon-color: rgba({{ rgb }}, 1);
/* Neutral pill */
background-color: rgba(77, 77, 77,0.1) !important;
box-shadow: none !important;
border: 1px solid rgba(255,255,255,0.06);
position: relative;
transform-origin: 50% 60%;
animation: var(--shape-animation);
}
/* Glow layers */
.shape::before,
.shape::after {
content: '';
position: absolute;
border-radius: inherit;
pointer-events: none;
}
.shape::before {
inset: -8px;
animation: var(--temp-glow-animation);
}
.shape::after {
inset: -22px;
animation: var(--temp-halo-animation);
mix-blend-mode: screen;
}
/* ========== VERY COLD (NEW) ========== */
/* Minimal movement + occasional tiny “ice crack” twitch */
@keyframes temp-verycold-freeze {
0% { transform: scale(1); filter: saturate(0.9) brightness(1.05); }
88% { transform: scale(1); filter: saturate(0.9) brightness(1.05); }
92% { transform: scale(1.006); filter: saturate(1.0) brightness(1.15); }
96% { transform: scale(0.998); filter: saturate(0.85) brightness(1.05); }
100% { transform: scale(1); filter: saturate(0.9) brightness(1.05); }
}
@keyframes temp-verycold-glow {
0% {
box-shadow:
0 0 14px 0 rgba(var(--temp-rgb), 0.30),
0 0 26px 5 rgba(var(--temp-rgb), 0.22);
}
50% {
box-shadow:
0 0 18px 2 rgba(var(--temp-rgb), 0.45),
0 0 34px 8 rgba(var(--temp-rgb), 0.35);
}
100% {
box-shadow:
0 0 14px 0 rgba(var(--temp-rgb), 0.30),
0 0 26px 5 rgba(var(--temp-rgb), 0.22);
}
}
@keyframes temp-verycold-halo {
0% {
box-shadow:
0 0 70px 18px rgba(var(--temp-rgb), 0.20),
0 -18px 70px -16px rgba(245, 255, 255, 0.35);
}
50% {
box-shadow:
0 0 110px 28px rgba(var(--temp-rgb), 0.28),
0 -28px 90px -12px rgba(255, 255, 255, 0.55);
}
100% {
box-shadow:
0 0 70px 18px rgba(var(--temp-rgb), 0.20),
0 -18px 70px -16px rgba(245, 255, 255, 0.35);
}
}
/* ========== COLD ========== */
@keyframes temp-cold-breathe {
0% { transform: scale(0.96); }
50% { transform: scale(1.03); }
100% { transform: scale(0.96); }
}
@keyframes temp-cold-glow {
0% {
box-shadow:
0 0 20px 0 rgba(var(--temp-rgb), 0.6),
0 0 34px 6 rgba(var(--temp-rgb), 0.55);
}
50% {
box-shadow:
0 0 30px 4 rgba(var(--temp-rgb), 0.95),
0 0 50px 10px rgba(var(--temp-rgb), 0.85);
}
100% {
box-shadow:
0 0 20px 0 rgba(var(--temp-rgb), 0.6),
0 0 34px 6 rgba(var(--temp-rgb), 0.55);
}
}
@keyframes temp-cold-halo {
0% {
box-shadow:
0 0 80px 20px rgba(var(--temp-rgb), 0.35),
0 -20px 80px -14px rgba(220, 240, 255, 0.55);
}
50% {
box-shadow:
0 0 130px 36px rgba(var(--temp-rgb), 0.5),
0 -34px 100px -8px rgba(240, 250, 255, 0.8);
}
100% {
box-shadow:
0 0 80px 20px rgba(var(--temp-rgb), 0.35),
0 -20px 80px -14px rgba(220, 240, 255, 0.55);
}
}
/* ========== COOL ========== */
@keyframes temp-cool-wave {
0% { transform: translateX(0); }
25% { transform: translateX(-1px); }
50% { transform: translateX(1px) translateY(-1px); }
75% { transform: translateX(-1px); }
100% { transform: translateX(0); }
}
@keyframes temp-cool-glow {
0% {
box-shadow:
0 0 22px 0 rgba(var(--temp-rgb), 0.6),
0 0 34px 4 rgba(var(--temp-rgb), 0.7);
}
50% {
box-shadow:
0 0 28px 2 rgba(var(--temp-rgb), 0.95),
0 0 48px 12px rgba(var(--temp-rgb), 0.85);
}
100% {
box-shadow:
0 0 22px 0 rgba(var(--temp-rgb), 0.6),
0 0 34px 4 rgba(var(--temp-rgb), 0.7);
}
}
@keyframes temp-cool-halo {
0% {
box-shadow:
0 0 90px 26px rgba(var(--temp-rgb), 0.35),
0 18px 80px -12px rgba(0, 220, 255, 0.35);
}
50% {
box-shadow:
0 0 140px 42px rgba(var(--temp-rgb), 0.45),
0 30px 110px -10px rgba(0, 255, 255, 0.5);
}
100% {
box-shadow:
0 0 90px 26px rgba(var(--temp-rgb), 0.35),
0 18px 80px -12px rgba(0, 220, 255, 0.35);
}
}
/* ========== COMFY ========== */
@keyframes temp-comfy-breathe {
0% { transform: scale(0.98); }
50% { transform: scale(1.05); }
100% { transform: scale(0.98); }
}
@keyframes temp-comfy-glow {
50% {
box-shadow:
0 0 26px 4 rgba(var(--temp-rgb), 0.9),
0 0 42px 10px rgba(var(--temp-rgb), 0.85);
}
}
@keyframes temp-comfy-halo {
50% {
box-shadow:
0 0 120px 40px rgba(var(--temp-rgb), 0.45),
0 26px 80px -10px rgba(180,255,200,0.5);
}
}
/* ========== WARM ========== */
@keyframes temp-warm-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.07); }
100% { transform: scale(1); }
}
@keyframes temp-warm-glow {
50% {
box-shadow:
0 0 30px 4 rgba(var(--temp-rgb), 0.95),
0 0 54px 14px rgba(var(--temp-rgb), 0.9);
}
}
@keyframes temp-warm-halo {
50% {
box-shadow:
0 0 140px 48px rgba(var(--temp-rgb), 0.55),
0 26px 100px -10px rgba(255,210,150,0.5);
}
}
/* ========== HOT ========== */
@keyframes temp-hot-shimmer {
0% { transform: scale(1); filter: blur(0); }
50% { transform: scale(1.08); filter: blur(0.6px); }
100% { transform: scale(1); filter: blur(0); }
}
@keyframes temp-hot-glow {
50% {
box-shadow:
0 0 34px 6 rgba(var(--temp-rgb), 1),
0 0 62px 14px rgba(var(--temp-rgb), 0.95);
}
}
@keyframes temp-hot-halo {
50% {
box-shadow:
0 0 160px 60px rgba(var(--temp-rgb), 0.6),
0 34px 120px -12px rgba(255,150,100,0.6);
}
}
mushroom-state-info$: |
.container {
flex: 1 1 auto !important;
min-width: 0 !important;
align-items: flex-start; /* CHANGED: was flex-end */
text-align: left; /* CHANGED: was right */
}
.primary {
display: none !important;
}
.container::after {
{% set card_entity = config.entity if (config is defined and config.entity is defined) else 'sensor.outside_temp_average' %}
{% set raw_state = states(card_entity) | default('') %}
{% set raw_l = (raw_state | string).lower() | trim %}
{% set missing_vals = ['', 'unknown', 'unavailable', 'offline', 'none', 'uninitialized'] %}
{% if raw_l in missing_vals %}
{% set display_state = '?' %}
{% else %}
{% set temp_val = raw_state | float(0) %}
{% set display_state = temp_val | round(1) | string + '°C' %}
{% endif %}
content: "{{ display_state }}";
display: block;
width: 100%;
min-width: 0;
text-align: left; /* CHANGED: was right */
font-size: var(--card-primary-font-size, 1.5rem);
line-height: var(--card-primary-line-height, 1.3);
font-weight: 500;
color: var(--primary-text-color, inherit);
}
.: |
mushroom-shape-icon {
--icon-size: 64px;
/* ✅ FIX: use temp variable, not hum */
--icon-color: rgba(var(--temp-rgb),1) !important;
display: flex;
margin: -18px 0 10px -20px !important;
padding-right: 22px;
padding-bottom: 0px;
}
ha-card {
background: none !important;
box-shadow: none !important;
border: none !important;
--ha-card-border-width: 0px;
--ha-card-border-color: transparent;
--ha-card-border-radius: 0px;
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
--card-primary-font-size: 1.5rem !important;
--card-primary-line-height: 1.3 !important;
}
grid_options:
columns: 6
rows: 1
- type: custom:vertical-stack-in-card
cards:
- type: custom:mini-graph-card
entities:
- sensor.outside_temp_average
hours_to_show: 24
line_width: 5
show:
name: false
icon: false
state: false
labels: false
legend: false
color_thresholds:
- value: 5
color: blue
- value: 15
color: lightblue
- value: 25
color: yellow
- value: 30
color: orange
- value: 35
color: red
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
opacity: 50%;
border: none;
width: 250x;
mask-image: radial-gradient(
ellipse at center,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0) 90%
);
}
card_mod:
style:
.: |
ha-card {
background: none;
box-shadow: none;
border: none;
margin: 8px 12px;
position: absolute;
bottom: -10px;
right: -10px;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-entity-card
entity: sensor.outside_humidity_average
tap_action:
action: more-info
icon: mdi:water-percent
primary_info: state
secondary_info: none
grid_options:
columns: 6
rows: 1
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{# Robustly read the configured entity from the card config #}
{% set card_entity = config.entity if (config is defined and config.entity is defined) else 'sensor.outside_humidity_average' %}
{% set raw_state = states(card_entity) | default('') %}
{% set raw_l = (raw_state | string).lower() | trim %}
{# Determine display_state: '?' only for truly missing/unavailable states #}
{% set missing_vals = ['', 'unknown', 'unavailable', 'offline', 'none', 'uninitialized'] %}
{% if raw_l in missing_vals %}
{% set display_state = '?' %}
{% else %}
{% set display_state = raw_state %}
{% endif %}
{# For animation coloring, parse a numeric value from the raw_state if possible.
Strip common unit characters and punctuation, then safe-float. #}
{% set cleaned = (raw_state | replace('%','') | replace('°','') | replace(' ','') | replace(',','')) %}
{% if cleaned != '' %}
{% set hum = cleaned | float(0) %}
{% else %}
{% set hum = 0 %}
{% endif %}
{# DEFAULTS #}
{% set rgb = '120,210,255' %}
{% set anim = 'hum-good-breathe' %}
{% set glow_anim = 'hum-good-glow' %}
{% set halo_anim = 'hum-good-halo' %}
{% set duration = 3.2 %}
{# RANGES / COLORS #}
{% if display_state == '?' %}
{# Offline/unknown styling (dim color but keep animations) #}
{% set rgb = '120,120,120' %}
{% set anim = 'hum-good-breathe' %}
{% set glow_anim = 'hum-good-glow' %}
{% set halo_anim = 'hum-good-halo' %}
{% set duration = 3.2 %}
{% elif hum < 30 %}
{% set rgb = '180,230,255' %}
{% set anim = 'hum-bad-pulse' %}
{% set glow_anim = 'hum-bad-glow' %}
{% set halo_anim = 'hum-bad-halo' %}
{% set duration = 2.8 %}
{% elif hum <= 60 %}
{% set rgb = '70,160,255' %}
{% set anim = 'hum-good-breathe' %}
{% set glow_anim = 'hum-good-glow' %}
{% set halo_anim = 'hum-good-halo' %}
{% set duration = 3.4 %}
{% else %}
{% set rgb = '0,90,180' %}
{% set anim = 'hum-mid-wave' %}
{% set glow_anim = 'hum-mid-glow' %}
{% set halo_anim = 'hum-mid-halo' %}
{% set duration = 3.0 %}
{% endif %}
--hum-rgb: {{ rgb }};
--shape-animation: {{ anim }} {{ duration }}s ease-in-out infinite;
--hum-glow-animation: {{ glow_anim }} {{ (duration * 0.9) | round(2) }}s ease-in-out infinite;
--hum-halo-animation: {{ halo_anim }} {{ (duration * 1.1) | round(2) }}s ease-in-out infinite;
--icon-color: rgba({{ rgb }}, 1);
background-color: rgba(77,77,77,0.2) !important;
box-shadow: none !important;
border: 1px solid rgba(255,255,255,0.06);
opacity: 1;
position: relative;
transform-origin: 50% 60%;
animation: var(--shape-animation);
}
.shape::before,
.shape::after {
content: '';
position: absolute;
border-radius: inherit;
pointer-events: none;
}
.shape::before {
inset: -8px;
animation: var(--hum-glow-animation);
}
.shape::after {
inset: -22px;
animation: var(--hum-halo-animation);
mix-blend-mode: screen;
}
/* ----- All original keyframes and animations preserved ----- */
@keyframes hum-good-breathe {
0% { transform: scale(0.98); }
50% { transform: scale(1.04); }
100% { transform: scale(0.98); }
}
@keyframes hum-good-glow {
0% {
box-shadow:
0 0 18px 0 rgba(var(--hum-rgb), 0.55),
0 0 30px 4 rgba(var(--hum-rgb), 0.6);
}
50% {
box-shadow:
0 0 24px 4 rgba(var(--hum-rgb), 0.9),
0 0 44px 10px rgba(var(--hum-rgb), 0.85);
}
100% {
box-shadow:
0 0 18px 0 rgba(var(--hum-rgb), 0.55),
0 0 30px 4 rgba(var(--hum-rgb), 0.6);
}
}
@keyframes hum-good-halo {
0% {
box-shadow:
0 0 80px 24px rgba(var(--hum-rgb), 0.35),
0 18px 70px -12px rgba(180,230,255,0.3);
}
50% {
box-shadow:
0 0 120px 40px rgba(var(--hum-rgb), 0.45),
0 26px 90px -10px rgba(200,240,255,0.45);
}
100% {
box-shadow:
0 0 80px 24px rgba(var(--hum-rgb), 0.35),
0 18px 70px -12px rgba(180,230,255,0.3);
}
}
@keyframes hum-mid-wave {
0% { transform: translateX(0); }
25% { transform: translateX(-1px); }
50% { transform: translateX(1px) translateY(-1px); }
75% { transform: translateX(-1px); }
100% { transform: translateX(0); }
}
@keyframes hum-mid-glow {
0% {
box-shadow:
0 0 20px 0 rgba(var(--hum-rgb), 0.6),
0 0 32px 4 rgba(var(--hum-rgb), 0.7);
}
50% {
box-shadow:
0 0 28px 3 rgba(var(--hum-rgb), 0.95),
0 0 48px 10px rgba(var(--hum-rgb), 0.85);
}
100% {
box-shadow:
0 0 20px 0 rgba(var(--hum-rgb), 0.6),
0 0 32px 4 rgba(var(--hum-rgb), 0.7);
}
}
@keyframes hum-mid-halo {
0% {
box-shadow:
0 0 90px 26px rgba(var(--hum-rgb), 0.4),
0 18px 80px -12px rgba(80,190,255,0.35);
}
50% {
box-shadow:
0 0 135px 42px rgba(var(--hum-rgb), 0.5),
0 28px 105px -10px rgba(100,210,255,0.5);
}
100% {
box-shadow:
0 0 90px 26px rgba(var(--hum-rgb), 0.4),
0 18px 80px -12px rgba(80,190,255,0.35);
}
}
@keyframes hum-bad-pulse {
0% { transform: scale(0.97); }
40% { transform: scale(1.03); }
100% { transform: scale(0.97); }
}
@keyframes hum-bad-glow {
0% {
box-shadow:
0 0 18px 0 rgba(var(--hum-rgb), 0.6),
0 0 28px 4 rgba(var(--hum-rgb), 0.7);
}
50% {
box-shadow:
0 0 26px 4 rgba(var(--hum-rgb), 0.95),
0 0 44px 12px rgba(var(--hum-rgb), 0.9);
}
100% {
box-shadow:
0 0 18px 0 rgba(var(--hum-rgb), 0.6),
0 0 28px 4 rgba(var(--hum-rgb), 0.7);
}
}
@keyframes hum-bad-halo {
0% {
box-shadow:
0 0 80px 22px rgba(var(--hum-rgb), 0.45),
0 18px 75px -10px rgba(0,70,160,0.5);
}
50% {
box-shadow:
0 0 130px 40px rgba(var(--hum-rgb), 0.6),
0 26px 100px -8px rgba(0,90,190,0.65);
}
100% {
box-shadow:
0 0 80px 22px rgba(var(--hum-rgb), 0.45),
0 18px 75px -10px rgba(0,70,160,0.5);
}
}
mushroom-state-item$: |
.container {
width: 100% !important;
flex-direction: row-reverse !important;
justify-content: space-between !important;
align-items: center !important;
}
mushroom-state-info$: >
.container {
flex: 1 1 auto !important;
min-width: 0 !important; /* critical for ellipsis/containment */
align-items: flex-end;
text-align: right;
}
.primary,
.secondary {
width: 100%;
min-width: 0 !important;
text-align: right;
justify-content: flex-end;
}
/* hide the default primary text, we'll inject our own via ::after
*/
.primary {
display: none !important;
}
/* inject replacement text: show actual state or '?' as decided
above */
.container::after {
{% set card_entity = config.entity if (config is defined and config.entity is defined) else 'sensor.outside_humidity_average' %}
{% set raw_state = states(card_entity) | default('') %}
{% set raw_l = (raw_state | string).lower() | trim %}
{% set missing_vals = ['', 'unknown', 'unavailable', 'offline', 'none', 'uninitialized'] %}
{% if raw_l in missing_vals %}
{% set display_state = '?' %}
{% else %}
{% set cleaned = (raw_state | replace('%','') | replace('°','') | replace(' ','') | replace(',','')) %}
{% set hum_val = cleaned | float(0) %}
{% set display_state = hum_val | round(1) | string + '%' %}
{% endif %}
content: "{{ display_state }}";
display: block;
width: 100%;
min-width: 0;
text-align: right;
font-size: var(--card-primary-font-size, 1.5rem);
line-height: var(--card-primary-line-height, 1.3);
font-weight: 500;
color: var(--primary-text-color, inherit);
}
.: |
mushroom-shape-icon {
--icon-size: 64px;
--icon-color: rgba(var(--hum-rgb),1) !important;
display: flex;
/* mirror of: margin: -18px 0 10px -20px */
margin: -18px -22px 10px 0 !important;
/* mirror of: padding-right: 22px */
padding-left: 22px;
padding-right: 0;
padding-bottom: 0px;
flex: 0 0 auto;
}
ha-card {
background: none !important;
box-shadow: none !important;
border: none !important;
--ha-card-border-width: 0px;
--ha-card-border-color: transparent;
--ha-card-border-radius: 0px;
clip-path: inset(0 0 0 0 round var(--ha-card-border-radius, 14px));
--card-primary-font-size: 1.5rem !important;
--card-primary-line-height: 1.3 !important;
}
- type: custom:vertical-stack-in-card
cards:
- type: custom:mini-graph-card
entities:
- sensor.outside_temp_average
hours_to_show: 24
line_width: 5
show:
name: false
icon: false
state: false
labels: false
legend: false
color_thresholds:
- value: 5
color: blue
- value: 15
color: lightblue
- value: 25
color: yellow
- value: 30
color: orange
- value: 35
color: red
card_mod:
style: |
ha-card {
background: none;
box-shadow: none;
opacity: 50%;
border: none;
width: 250px;
mask-image: radial-gradient(
ellipse at center,
rgba(0,0,0,1) 0%,
rgba(0,0,0,0) 90%
);
}
card_mod:
style:
.: |
ha-card {
background: none;
box-shadow: none;
border: none;
margin: 8px 12px;
position: absolute;
bottom: -10px;
right: -10px;
}