/*-------AMERICA LATINA---------*/
.MEX:hover, .PER:hover, .ECU:hover, .CRI:hover, .CHL:hover, .BRA:hover, .URY:hover, .PAN:hover, .PRY:hover {
    fill: red !important;
    stroke: red;
    cursor: url(icons8-cursor-128.png), auto;
}

.MEX, .PER, .ECU, .CRI, .CHL, .BRA, .URY, .PAN, .PRY {
    fill: lightcoral !important;
}

/*-------EUROPA---------*/
.ESP, .FR7, .PRT, .ITA, .IRL {
    fill: lightskyblue !important;
}

    .ESP:hover, .FR7:hover, .PRT:hover, .ITA:hover, .IRL:hover {
        fill: cornflowerblue !important;
        stroke: cornflowerblue;
        cursor: url(icons8-cursor-128.png), auto;
    }


/*-------EAU E INDIA---------*/
.ARE:hover, .IND:hover {
    fill: orange !important;
    stroke: orange;
    cursor: url(icons8-cursor-128.png), auto;
}

.ARE, .IND {
    fill: moccasin !important;
}

/*-------ÁFRICA---------*/
.MAR, .TUN {
    fill: gold !important;
}

    .MAR:hover, .TUN:hover {
        fill: yellow !important;
        stroke: yellow;
        cursor: url(icons8-cursor-128.png), auto;
    }


 

.countries {
    width: fit-content;
    height: fit-content;
    
}
svg {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    position: center !important;
    background-color: white;
}

#leyenda {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 100px !important;
    box-sizing: border-box;
}

 #leyenda .row {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
        /* Estilos para la ventana emergente */
#popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    border: 5px solid gray;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none;
    border-radius: 10px;
    padding: 20px; /* Ajustar el padding */
}
#bandera {
    width: 70px;
    height: auto;
    margin-right: 10px;
    padding-top:30px
}

#popup .parallax-counter-v2 {
    padding: 10px; /* Reducir el padding interno */
}