:root{
    /* color */
    --color-primary-morado: #667eea; 
    --color-secondary-morado: #764ba2;
    --color-prmary-azul: #247dd6;
    --color-secondary-azul: #004e98;

  
    /* Neutrales */
    --color-black: #081521;
    --color-white: #F7FAFD;
    --color-white2: #ffff;
  
    /* Card */
    --shadow:8px 11px 19px -8px rgba(217,217,217,1);
    --border-radio:10px;
  
}


.popup{
    position: absolute;
    top: -150%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1.25);
    width: 30%;
    height: 50%;
    padding: 20px 30px;
    background: var(--color-white2);
    box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.15);
    border-radius: 10px;
    transition: top 0ms ease-in-out 200ms,
                opacity 200ms ease-in-out 0ms,
                transform 200ms ease-in-out 0ms;
    z-index: 3000;            
 }

.popup.active{
   top: 50%;
   opacity: 1;
   transform: translate(-50%, -50%) scale(1);
   transition: top 0ms ease-in-out 0ms,
               opacity 200ms ease-in-out 0ms,
               transform 200ms ease-in-out 0ms;    

}

.popup .close-btn{
    position: absolute;
    top: 10px;
    right: 10px;
    width:  15px;
    height: 15px;
    background: var(--color-primary-morado);
    color:var(--color-white);
    text-align: center;
    line-height: 15px;
    border-radius: var(--border-radio);
    cursor: pointer;
    transition: 0.4s;
 }

.popup-container{
    max-height: 100%;
    overflow-y: auto;
    margin-right: 1px;
}


@media (max-width: 1280px) {

    .popup{

        width: 40%; 
    }

    .popup-container{
        font-size: 13px;
    }
  }