/* popup states */
    
    #popupStatesExternalContainer{
        background-color: #0a070794;
        width: 100vw;
        height: 100vh;
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 100;
    }
    
    .popup{
        background-color: var(--lqc-message-bg-color);
        padding: 20px;
        width: 500px;
        border-radius: 10px;
        border: solid 4px var(--e-global-color-primary);
        max-width: 90%;
        max-height: 90%;
        animation: objectAppearTop .4s;       
    }
    
    .popup_header{
        color: var(--e-global-color-primary);
    }
    
    .popup_header .titlePopup h4{
        text-align: center;
        color: var(--e-global-color-primary);
        font-size: 27px;
        animation: objectAppearTop 1s;
    }
    
    .popup_content{
        color: grey;
        font-size: 16px;
        font-weight: 500;
        text-align: center;
    }
    
    .popup_content .text_info{
        animation: objectAppearTop 1s;
    }
    
    .popup .iconState{
        height: 80px;
        font-size: 60px;
        text-align: center;
        animation: objectZoomIn 1s;
    }
    
    .popup .buttonContainer{
        text-align: center;
        margin-top: 20px;
    }
    
    .popup .buttonContainer button{
        width: 100%;
        border-radius: 10px;
        background-color: var(--e-global-color-primary);
        animation: resizeFullWidth 1s;
        height: 50px;
    }
    
    .popup .buttonContainer button > span{
        animation: textInsideObjectAppear 1s;
        font-size: 18px;
    }
    
    .popup .buttonContainer button:hover, .popup .buttonContainer button:active, .popup .buttonContainer button:focus{
        filter: saturate(2);
    }
    
    
    @keyframes objectAppearTop{
        0%{
            transform: translateY(50%);
            opacity: 0;
        }
        
        100%{
            transform: translateY(0);
            opacity: 1;
        }
    }
    
    @keyframes objectZoomIn{
        0%{
            transform: rotate(0deg) scale(.2);
            opacity: .4;
        }
        
        100%{
            transform: rotate(360deg) scale(1);
            opacity: 1;
        }
    }
    
    @keyframes resizeFullWidth{
        0%{
            width: 0%;     
            opacity: .4;
        }
        
        100%{
            width: 100%;
            opacity: 1;
        }
    }
    
    @keyframes textInsideObjectAppear{
        0%{
            opacity: .5;
            font-size: 0;
        }
        
        100%{
            opacity: 1;
        }
    }