*{
    box-sizing:border-box;
}


:root{
    --bell-left:25px;
    --bell-bottom:25px;
    --bell-size:70px;
    --bell-icon-size:34px;
    
    --counter-size:24px;
    --counter-font-size:12px;
    --counter-top:-4px;
    --counter-right:-4px;
    
    --popup-left:110px;
    --popup-bottom:25px;
    --popup-width:340px;

    --popup-title-font-size:16px;
    --popup-body-font-size:15px;
    --popup-footer-font-size:12px;

    --popup-header-padding:12px;
    --popup-body-padding:18px;
    --popup-footer-padding:10px 15px;        
    
    --popup-title-icon-size:20px;
    --popup-close-icon-size:18px;
    --popup-title-icon-margin:8px;    
}

body{
    margin:0;
    font-family:Arial,Helvetica,sans-serif;
    background:#f3f5f8;
}

/*************************************************/
/* CAMPANA */
/*************************************************/
#bell{
    position:fixed;
    left:var(--bell-left);
    bottom:var(--bell-bottom);
    width:var(--bell-size);
    height:var(--bell-size);
    border-radius:50%;
    background:#1976d2;
    display:flex;
    justify-content:center;
    align-items:center;
    cursor:pointer;
    box-shadow:0 10px 25px rgba(0,0,0,.30);
    transition:.30s;
    z-index:9999;
}

#bell a{
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
}

#bell:hover{
    transform:scale(1.08);
}

#bell svg{
    width:var(--bell-icon-size);
    height:var(--bell-icon-size);
    fill:#fff;
    display:block;
}

#bell.hasMessages{
    animation:bellShake 1.5s infinite;
}

@keyframes bellShake{
0%{transform:rotate(0deg);}
5%{transform:rotate(-15deg);}
10%{transform:rotate(15deg);}
15%{transform:rotate(-12deg);}
20%{transform:rotate(12deg);}
25%{transform:rotate(0deg);}
100%{transform:rotate(0deg);}
}

#counter{
    position:absolute;
    right:var(--counter-right);
    top:var(--counter-top);
    width:var(--counter-size);
    height:var(--counter-size);
    border-radius:50%;
    background:#e53935;
    color:#fff;
    font-size:var(--counter-font-size);
    font-weight:bold;
    display:flex;
    justify-content:center;
    align-items:center;
}


/*************************************************/
/* POPUP */
/*************************************************/
.popup{
    position:fixed;
    left:var(--popup-left);
    bottom:var(--popup-bottom);
    width:var(--popup-width);
    background:#fff;
    border-left:5px solid #1976d2;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 10px 35px rgba(0,0,0,.28);
    animation:popupShow .35s;
    z-index:99999;
}

@keyframes popupShow{
from{
opacity:0;
transform:translateX(-70px);
}
to{
opacity:1;
transform:translateX(0);
}
}

.popupHeader{
    background:#1976d2;
    color:white;
    padding:var(--popup-header-padding);
    font-size:var(--popup-title-font-size);
    font-weight:bold;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

.popupHeaderLeft{
    display:flex;
    align-items:center;
}

.popupHeaderLeft svg{
    width:var(--popup-title-icon-size);
    height:var(--popup-title-icon-size);
    margin-right:var(--popup-title-icon-margin);
    fill:white;
}

.popupClose svg{
    width:var(--popup-close-icon-size);
    height:var(--popup-close-icon-size);
    fill:white;
}

.popupBody{
    padding:var(--popup-body-padding);
    color:#444;
    font-size:var(--popup-body-font-size);
    line-height:1.4;
}

.popupFooter{
    background:#fafafa;
    border-top:1px solid #eee;
    padding:var(--popup-footer-padding);
    color:#777;
    font-size:var(--popup-footer-font-size);
}