* {
    box-sizing: border-box;
}

.locale-list {
    width: 300px;
    height: fit-content;
    background-color: white;
    border-radius: 30px;
    border-top-right-radius: 0px;
    box-shadow: 4px 4px 4px rgba(0,0,0,0.2);

    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;

    padding: 20px;

    .locale-option {
        background-color: transparent;
        width: 100%;
        border: 2px solid #add804;
        padding: 10px;
        display: inline-flex;
        align-items: center;
        border-radius: 50px;

        div.locale-img {
            width: 25px;
            height: 25px;
            border-radius: 500px;
            background-size: cover;
            background-position: center;
        }

        div.locale-img.en {
            background-image: url("../images/flag_en.png");   
        }

        div.locale-img.it {
            background-image: url("../images/flag_it.png");
        }

        div.locale-img.fr {
            background-image: url("../images/flag_fr.png");
        }

        p.locale-name {
            font-family: 'Montserrat', 'sans-serif';
            font-weight: 600;
            color: #014a09;
            width: 80%;
            margin: 0;
            text-align: center;
        }
    }

    .locale-option:hover {
        cursor: pointer;
        background-color: #add8042e;
        transition: all 0.25s ease-in-out;
    }

    .locale-option.selected {
        background-color: #add804;
        transition: all 0.25s ease-in-out;
    }

    .confirm-btn {
        font-family: 'Montserrat', 'sans-serif';
        font-weight: 600;
        color: #014a09;
        font-size: 0.8em;

        display: inline-flex;
        align-items: center;
        gap: 5px;
        background-color: #add804;
        border-radius: 50px;
        padding-left: 20px;
        padding-right: 20px;
        border: none;

        svg {
            width: 20px;
        }
        transition: all 0.25s ease-in-out;
    }

    .confirm-btn:hover {
        cursor: pointer;
        transform: rotate(1deg) scale(1.1);
        transition: all 0.25s ease-in-out;
    }

    .confirm-btn:active {
        background-color: #014a09;
        color: white;
        transform: scale(0.9);
        transition: all 0.25s ease-in-out;
    }

}