@charset "utf-8";
/* CSS Document */

   /* Configurações Padrões */
    ul.menu,
    .menu li,
    .menu a {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
    }

    /* Configurações nivel 1 */
    ul.menu {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 1em;
        border-radius: 5px;
        padding: 0 5px;
        display: flex;
        flex-wrap: wrap; /* Adicionado para permitir que os itens do menu sejam quebrados em linhas */
        justify-content: flex-start; /* Alterado para alinhar à esquerda */
    }

    .menu li {
        position: relative;
    }

    .menu li a {
        display: block;
        padding: 0 20px;
        line-height: 40px;
        transition: all 0.1s linear;
    }

    /* Configurações nivel 2 */
    .menu li:hover>ul {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        padding: 5px;
        border-radius: 0 0 5px 5px;
		background-color: #2a447a;/*cor do submenu*/
    }

    .menu ul {
        display: none;
        background: #999;
    }

    .menu ul a {
        padding: 5px 20px;
        border-radius: 5px;
        white-space: nowrap;
    }

    /* Configurações nivel 3 */
    .menu ul li:hover>ul {
        top: 0;
        left: 100%;
        padding: 5px;
        border-radius: 0 5px 5px 5px;
		background-color: #149c0f;/*cor do submenu*/
    }

    /* Configurações de cores */
    .menu {
        background: #CCC;
    }

    .menu a {
        color: #000;
    }

    .menu li:hover>a {
        background:#2ca3b8;/*cor do fundo quando passa mouse menu superior*/
        color: #fff;
    }

    .menu ul li:hover>a {
        background: rgb(3, 33, 168); /*cor de seleção de submenu*/
        /*height: 30px; /* Define a altura fixa de 50px 
            line-height: 30px; /* Centraliza o texto verticalmente */
    }

    .menu ul ul {
        background: #333;
    }

    .menu ul ul a {
        color: #fff;
    }

    .menu ul ul li:hover>a {
        background: #000;
    }
    
    /* Estilos para tornar o menu responsivo */
    @media only screen and (max-width: 768px) {
        .menu {
            flex-direction: column;
            align-items: flex-start; /* Alterado para alinhar à esquerda */
        }
        
        .menu li {
            position: static;
        }
        
        .menu li a {
            height: auto;
            line-height: 30px;
            padding: 0 10px;
            white-space: normal;
        }
        
        .menu li:hover>ul {
            top: 100%;
            left: 0;
            padding: 5px;
            width: 100%;
            border-radius: 0;
            position: static; /* Alterado para exibir o submenu abaixo do item pai */
        }
    }

    /* Estilos das bandeiras */
       .flags {
        position: fixed;
        top: 10px;
        right: 10px;
        display: flex;
        align-items: center;
        z-index: 9999; /* Garante que a div esteja acima de outros elementos */
    }

    .flag {
        margin-left: 10px;
        cursor: pointer;
        filter: grayscale(100%); /* Adicionado filtro de escala de cinza inicial */
        transition: filter 0.3s ease-in-out; /* Adicionado efeito de transição suave */
    }

    .flag:hover {
        filter: grayscale(0%); /* Removido filtro de escala de cinza ao passar o mouse */
    }
.container {
  display: flex;
}

.div1, .div2 {
  flex: 1;
  padding: 10px;
}