﻿
.FlagPickerView {
    position: fixed;
    top: 3%;
    left: 50%;
    width: 90svw;
    height: 94vh;
    display: flex;
    flex-direction: column;
    row-gap: 15px;
    background-color: var(--GlassColor);
    backdrop-filter: var(--GlassBlur);
    -webkit-backdrop-filter: var(--GlassBlur);
    padding: 20px;
    padding-left: 20px;
    padding-right: 20px;
    transform: translate(-50%, 0) scale(1);
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
    z-index: var(--ModalDepth);
}

.FlagPickerView .HeaderConsole {
    display: flex;
    justify-content: center;
    padding: 20px;
    background-color: var(--GlassColor);
    border-radius: 6px;
}

.FlagPickerView .Countries {
    flex-shrink: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: start;
    align-items: center;
    row-gap: 15px;
    column-gap: 15px;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.FlagPickerView .Countries .Item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
    row-gap:10px;
    padding: 25px;
    background-color: var(--GlassColor);
    backdrop-filter: var(--GlassBlur);
    -webkit-backdrop-filter: var(--GlassBlur);
    border-radius: 7px;
    cursor: pointer;
}
