:host{
    contain:style size;
    position:fixed;
    top:100%;
    left:7px;
    z-index:99999999999
}
a{
    color:#b3ddff;
    text-decoration:none
}
p,h2,h3{
	padding:0;
	margin:0
}
.notify{
    display:inline-grid;
    align-items:center;
    grid-auto-flow:column;
    justify-content:start;
    gap:10px;
    contain:style paint layout;
    background:rgba(74,74,74,.9);
    margin-top:-10px;
    border-radius:30px;
    transition:.3s transform,.3s opacity;
    color:#fff;
    font:normal 14px/150% Arial,sans-serif
}
.img_wrap,
.msg{
    max-width:410px;
    display:grid;
    align-items:center;
    grid-auto-flow:column;
    gap:10px
}
.img_wrap{
    grid-template-columns:repeat(auto-fit,minmax(30px, 1fr));
    gap:5px
}
.msg img{
    width:30px;
    height:30px;
    background:#fff;
    padding:2px;
    object-fit:cover;
    border-radius:8px
}
.tf_fa{
	display:inline-block;
    width:1em;
    height:1em;
    stroke-width:2;
    stroke:currentColor;
    overflow:visible;
    vertical-align:middle;
    pointer-events:none;
    fill:currentColor
}
.show{
    padding:12px;
    padding-inline-end:20px;
    transform:translateY(-100%);
    opacity:1
}
.show .icon{
	display:block
}
.icon{
    border-radius:50%;
	background-color:var(--tf_nf_c,#73aaff);
    padding:4px 8px
}
.warning .icon{
    --tf_nf_c:#FFC007;
    font-size:1.3em;
    display:flex;
    padding:6px
}
.tf_close{
	transition:none;
	pointer-events:none
}
.done{
    --tf_nf_c:#8ec931
}
.error .icon{
    width:14px;
    height:14px;
    padding:8px;
    --tf_nf_c:#f24334
}
.warning svg{
    stroke-width:1;
    transform:translateY(-2px)
}
.wc_errors{
	display:var(--tf_not_wc_e_d,inline-grid);
    grid-auto-flow:var(--tf_not_wc_e_gaf,column);
    gap:var(--tf_not_wc_e_gap,inherit);
    align-items:center
}
a.button{
	display:inline-block;
	background:var(--tf_not_a_btn_bg,#000);
	color:var(--tf_not_a_btn_col,#fff);
	padding:var(--tf_not_a_btn_p,.4em 1em);
	border-radius:var(--tf_not_a_btn_r,30px)
}