/* =========================================================
   ESCOLA AMARANTE — CORREÇÃO FINAL DOS MENUS DROPDOWN
   ========================================================= */

/* O menu principal pode ultrapassar a altura normal */
.nav{
    position:relative !important;
    overflow:visible !important;
    z-index:1000 !important;
}

/* Cada área com submenu */
.nav .drop{
    position:relative !important;
}

/* =========================================================
   SUBMENUS NORMAIS
   ========================================================= */

.nav .drop > .menu{
    display:none !important;

    position:absolute !important;
    top:100% !important;
    left:0 !important;
    right:auto !important;

    min-width:210px !important;
    width:max-content !important;
    max-width:280px !important;

    margin:0 !important;
    padding:0 !important;

    background:#fff !important;

    border-radius:0 0 8px 8px !important;

    box-shadow:0 8px 20px rgba(0,0,0,.22) !important;

    overflow:hidden !important;

    z-index:10000 !important;
}

/* Abrir ao passar o rato */
.nav .drop:hover > .menu{
    display:block !important;
}

/* =========================================================
   OPÇÕES DOS SUBMENUS
   ========================================================= */

.nav .drop > .menu a{
    display:block !important;

    width:100% !important;
    box-sizing:border-box !important;

    padding:10px 14px !important;

    margin:0 !important;

    background:#fff !important;
    color:#17416a !important;

    text-decoration:none !important;
    font-weight:700 !important;

    white-space:nowrap !important;

    overflow:visible !important;
}

/* Rato sobre opção normal */
.nav .drop > .menu a:hover{
    background:#eaf3fc !important;
    color:#17416a !important;
}

/* =========================================================
   OPÇÃO ATUALMENTE ABERTA
   ========================================================= */

.nav .drop > .menu a.ativo{
    background:#0757a8 !important;
    color:#fff !important;
}

/* O ativo mantém-se azul escuro com o rato */
.nav .drop > .menu a.ativo:hover{
    background:#0757a8 !important;
    color:#fff !important;
}

/* =========================================================
   ÁREA PRINCIPAL ATIVA
   ========================================================= */

.nav > a.ativo,
.nav .drop > a.ativo{
    background:#0757a8 !important;
    color:#fff !important;
}

/* Não alterar o ativo ao passar o rato */
.nav > a.ativo:hover,
.nav .drop > a.ativo:hover{
    background:#0757a8 !important;
    color:#fff !important;
}

/* =========================================================
   ATIVIDADES — ESTÁ NO EXTREMO DIREITO
   ========================================================= */

/*
 * O submenu de Atividades abre para a esquerda.
 * Assim fica sempre dentro da largura da página.
 */

.nav .drop-atividades > .menu{
    left:auto !important;
    right:0 !important;

    min-width:230px !important;
    width:230px !important;
    max-width:230px !important;
}

/* =========================================================
   ATIVIDADES — OPÇÕES
   ========================================================= */

.nav .drop-atividades > .menu a{
    width:230px !important;
    max-width:230px !important;

    box-sizing:border-box !important;

    padding:10px 13px !important;

    white-space:nowrap !important;
}

/* =========================================================
   ATIVIDADES — OPÇÃO ATIVA
   ========================================================= */

.nav .drop-atividades > .menu a.ativo{
    background:#0757a8 !important;
    color:#fff !important;
}

.nav .drop-atividades > .menu a.ativo:hover{
    background:#0757a8 !important;
    color:#fff !important;
}

/* Botão principal Atividades ativo */
.nav .drop-atividades > a.ativo{
    background:#0757a8 !important;
    color:#fff !important;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */

@media(max-width:700px){

    .nav .drop > .menu{
        min-width:200px !important;
        max-width:calc(100vw - 20px) !important;
    }

    .nav .drop-atividades > .menu{
        width:220px !important;
        min-width:220px !important;
        max-width:calc(100vw - 20px) !important;
        right:0 !important;
        left:auto !important;
    }

    .nav .drop-atividades > .menu a{
        width:100% !important;
        max-width:100% !important;
    }
}