body #content.blur-it{
    filter: blur(5px);
}

.single .valid-countries-wrapper{
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    margin-bottom: 12px;
}

.single .valid-countries-wrapper summary{
    color: red;
}
.single .valid-countries-names{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.single .gaming-material-wrapper{
    display: flex;
    color: red;
    gap: 5px;
    flex-direction: row;
    margin-bottom: 10px;
}
.single .single-gaming-material-wrapper{
    display: flex;
    flex-wrap: wrap;
    border-radius: 10px;
    gap: 5px;
}

.single-country.hide{
    display: none;
}

/*--------------------------styling popup------------------------*/

div.add-country-popup-wrapper{
    display: flex;
    flex-direction: column;
    position: fixed;
    z-index: 99999;
    padding: 10px;
    font-weight: bold;
    top: -50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 50%;
    height: 50%;
    border-radius: 10px;
    background-color: rgb(58, 136, 174);
    color: black;
    animation: all 300ms ease;
}

div.add-country-popup-wrapper .inside-wrapper{
    display: flex;
    padding-bottom: 5px;
    margin-bottom: 15px;
    border-bottom: 1px solid white;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
}

div.add-country-popup-wrapper .popup-title-inside-ceproduit-wrapper{
    display: flex;
    flex-direction: column;
    line-height: 20px;

}

div.add-country-popup-wrapper .pour-ce-produit{
    color: white;
    margin: 0px 5px;
}

input[name='popup-search-country']{
    border-radius: 100vmax !important;
    padding: 5px 5px;
}

div.add-country-popup-wrapper .add-country-popup-title{
    color: #fff;
    font-size: 20px;
    margin: 2px 5px;
}

div.add-country-popup-wrapper .popup-container{
    color: white !important;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 2px 5px;
    gap: 5px;
    overflow-y: scroll;
}

div.add-country-popup-wrapper .popup-container:has(.inline-style){
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex-direction: row;
}

div.add-country-popup-wrapper .popup-container:has(.inline-style), div.add-country-popup-wrapper .popup-container:has(.inline-style) p.popup-text{
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    flex-direction: row;
}

div.add-country-popup-wrapper .popup-container::-webkit-scrollbar {
  width: 5px; /* Width of the scrollbar */
}

div.add-country-popup-wrapper .popup-container::-webkit-scrollbar-thumb {
  background: #888; /* Color of the thumb */
  border-radius: 5px;
}

div.add-country-popup-wrapper .popup-container::-webkit-scrollbar-track {
  background: #f1f1f1; /* Color of the track */
  border-radius: 5px;
}

div.add-country-popup-wrapper.show{
    top: 50%;
}

.add-country-overlay{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    pointer-events: auto;
    animation: smoothFade 350ms ease forwards;
}

div.add-country-popup-wrapper .popup-close-button{
    position: absolute;
    display: grid;
    text-align: center;
    border-radius: 50%;
    background-color: gray;
    line-height: 25px;
    top: 0;
    left: 100%;
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 2;

}

div.add-country-popup-wrapper p{
    margin-bottom: 2px;
}

div.add-country-popup-wrapper .popup-close-button .bi{
    width: 25px;
    height: 25px;
}


/*--------------media screen---------*/

@media screen and (max-width: 921px) {

    div.add-country-popup-wrapper{
        width: 90%;
    }
    
}

/*-----------------Keyframes---------*/

@keyframes smoothFade{
    0%{
        opacity:0;
        background: gray;
    }
    100%{
        opacity:0.3;
        background: gray;
    }
}