/* Font */
@import url('https://fonts.googleapis.com/css2?family=Chonburi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Chonburi&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

.lep{
    --lep-bg: 255,255,255; --lep-bgd: 242,242,242; --lep-bgl: 255,255,255;
    --lep-de: 75,75,75;    --lep-ded: 30,30,30;    --lep-del: 115,115,115;
    --lep-mc: 85,161,154;  --lep-mcd: 65,141,134;  --lep-mcl: 105,181,174;
    --lep-sc: 168,86,219;  --lep-scd: 148,66,199;  --lep-scl: 188,106,239;
    --lep-tc: 51,155,207;  --lep-tcd: 21,125,177;  --lep-tcl: 81,185,237;
    --lep-qc: 254,198,1;   --lep-qcd: 194,138,0;   --lep-qcl: 255,218,21;
    --lep-gr: 226,226,226; --lep-grl: 246,246,246; --lep-grd: 165,165,165;
    
    --lep-bl: 0,0,0; --lep-wh: 255,255,255; --lep-tr: transparent;
    
    --lep-mf: 'Roboto', sans-serif;
    --lep-sf: 'Chonburi', cursive;
    
    --lep-sz: 16px;
    --lep-rg: 400;
    --lep-bd: 500;
    --lep-lh: 1.6;
    
    --lep-radius: 5px;
    --lep-shadow: 0px 2px 8px rgba(0,0,0, .1);
    
    position: static !important;
    margin: 0; padding: 0;
    
    font-family: var(--lep-mf);
    font-size: var(--lep-sz);
    font-weight: var(--lep-rg);
    line-height: var(--lep-lh);
    
    color: rgb(var(--lep-de));
}
    .lep b{
        font-weight: var(--lep-bd);
    }
    .lep *{
        position: relative; z-index: 5;
        margin: 0; padding: 0;
    }

.lep-btn{
    display: inline-flex;
    justify-content: center; align-items: center;
    
    height: 2.75em; padding: 1em;
    
    font-size: 1em; font-weight: var(--lep-rg);
    
    background-color: rgb(var(--lep-qc)); color: rgb(var(--lep-ded));
    border-radius: var(--lep-radius);
    
    transition: all 180ms ease-in-out;
}
    .lep-btn:hover{
        background-color: rgb(var(--lep-qcd));
    }

.lep-notification{
    position: fixed; z-index: 9999;
    bottom: 10px; right: 10px;
    
    font-size: 16px;
    
    max-width: calc(100% - 20px);
    pointer-events: none;
}
body.isSuperAdmin .lep-notification{
    bottom: 50px; right: 50px;
}
    
    .lep-notification-open{
        position: absolute; z-index: 4;
        bottom: 0; right: 0;
        
        display: flex;
        justify-content: center; align-items: center;
        width: 30px; height: 30px;
        
        background: rgb(var(--lep-ded)); color: rgb(var(--lep-wh));
        border-radius: var(--lep-radius);
        
        font-family: var(--if, "Font Awesome Pro");
        font-size: 1.125em; font-weight: 400;
        
        box-shadow: 0px 0px 10px rgba(0,0,0 .1);
        
        pointer-events: all;
        transition: all 180ms ease-in-out;
    }
    
    .lep-notification-frame{
        position: relative; z-index: 5;
        width: 26.25em; max-width: 100%;
        
        background: rgb(var(--lep-bg));
        
        border-radius: var(--lep-radius);
        box-shadow: var(--lep-shadow);
        
        opacity: 0; pointer-events: none;
        transition: all 180ms ease-in-out;
    }
    
        .lep-notification-title{
            display: flex;
            justify-content: space-between; align-items: center;
            
            height: 50px;
            padding: 0 1.25em;
            
            font-family: var(--lep-sf);
            
            background: rgb(var(--lep-ded)); color: rgb(var(--lep-wh));
            border-radius: var(--lep-radius) var(--lep-radius) 0 0;
            
            overflow: hidden;
        }
            .lep-notification-inactive .lep-notification-title{
                text-decoration: line-through;
            }
            
            .lep-notification-close{
                position: absolute;
                top: 0; right: 0; bottom: 0;
                
                display: flex;
                justify-content: center; align-items: center;
                width: 50px; height: 50px;
                
                font-family: var(--if, "Font Awesome Pro");
                font-size: 1.125em; font-weight: 400;
            }
        
        .lep-notification-alert{
            display: flex;
            align-items: center;
            gap: 10px;
            
            width: 100%;
            padding: 5px 10px;
            
            background-color: rgba(231, 76, 60, .25); color: rgb(231, 76, 60);
            border: 1px solid rgba(231, 76, 60, .25);
            border-radius: var(--lep-radius);
        }
            .lep-notification-alert-icon{
                font-family: var(--if, "Font Awesome Pro");
                font-size: 1em; font-weight: 400;
            }
            .lep-notification-alert-text{
                font-weight: var(--lep-bd);
            }
        
        .lep-notification-content{
            display: flex; flex-wrap: wrap;
            align-items: center;
            
            gap: 1.25em;
            
            padding: 1.25em;
            border-radius: 0 0 var(--lep-radius) var(--lep-radius);
        }
        
        /* DUMPS */
        .lep-notification-text{
            width: 100%;
            
            font-size: .875em;
            font-weight: var(--lep-bd);
        }
        
        .lep-notification-demos{
            display: flex; flex-direction: column;
            gap: 10px;
            margin-top: -10px;
        }
            .lep-notification-demo{
                display: grid;
                align-items: start;
                
                grid-template-columns: 50px 1fr;
                gap: 0px 10px;
            }
                .lep-notification-demo-type{
                    display: flex;
                    justify-content: center; align-items: center;
                    width: 100%; height: 30px; flex: none;
                    
                    background-color: rgb(var(--lep-site-color, var(--lep-de))); color: rgb(var(--lep-wh));
                    border-radius: 30px;
                    
                    font-size: .875em; font-weight: var(--lep-bd);
                    
                    transition: all 180ms ease-in-out;
                }
                .lep-notification-demo-link{
                    line-height: 1;
                    font-weight: var(--lep-bd);
                    flex: 1;
                    transition: all 180ms ease-in-out;
                }
                .lep-notification-demo-infos{
                    width: 100%;
                    font-size: .75em;
                    margin-top: -10px;
                    grid-column: 2;
                }
            .lep-notification-demo[data-is-type="EC"] {--lep-site-color: var(--lep-mc); --lep-site-color-darken: var(--lep-mcd);}
            .lep-notification-demo[data-is-type="CGP"]{--lep-site-color: var(--lep-sc); --lep-site-color-darken: var(--lep-scd);}
            .lep-notification-demo[data-is-type="NOT"]{--lep-site-color: var(--lep-tc); --lep-site-color-darken: var(--lep-tcd);}
            .lep-notification-demo[data-is-type="AV"] {--lep-site-color: var(--lep-qc); --lep-site-color-darken: var(--lep-qcd);}
            
            .lep-notification-demo:hover .lep-notification-demo-type{background-color: rgb(var(--lep-site-color-darken, var(--lep-bl)));}
            .lep-notification-demo:hover .lep-notification-demo-link{color: rgb(var(--lep-site-color, var(--lep-bl)));}
        
        /* DEMOS */
        .lep-notification-logo{
            flex: none;
            margin: 1.25em;
        }
            .lep-notification-logo img{
                width: 10em;
            }
        
        .lep-notification-contact{
            display: flex; flex-direction: column;
            flex: 1;
            text-align: center;
            
            white-space: nowrap;
        }
        
        .lep-notification-tels{
            display: flex; flex-direction: column;
            gap: 1em;
            
            margin-top: .625em;
        }
        .lep-notification-tel{
            display: flex; flex-direction: column;
            color: rgb(var(--lep-grd));
        }


.lep-notification-active .lep-notification-open{
    opacity: 0; pointer-events: none;
}

.lep-notification-active .lep-notification-frame{
    opacity: 1; pointer-events: all;
}
        
        
/* RESPONSIVE */
@media (max-width: 1199px){ /* XL */
    .lep-notification{
        font-size: 15px;
    }
}

@media (max-width: 991px){ /* LG */
    .lep-notification{
        font-size: 14px;
    }
}

@media (max-width: 575px){
    .lep-notification{
        top: auto; bottom: 10px;
        
    }
        
        .lep-notification-content{
            flex-direction: column;
            
            gap: 1em;
            padding: 1.25em 1em;
        }
        
        .lep-notification-tels{
            flex-direction: row;
        }
}