:root {

    /*Fundos das telas de iframe de cada monitoramento*/
    --fundo_5: #e2e2e2;

    /*padrão de fonts*/
    --font_titulo: fonteTi;
    --font_conteudo: fonteTa;

    /*Cor matriz*/
    --Matriz: #ffffff;

    /*Paleta de cores padrão*/
    --Cor_Primaria_1: #1B8C51;
    --Cor_Primaria_2: #1B8C77;
    --Cor_Primaria_3: #1B7C8C;
    --Cor_Primaria_4: #1B8C2A;
    --Cor_Primaria_5: #1B588C;

    /*Paleta de cores padrão claro*/
    --Cor_Segundaria_1_1: #22bb6c;
    --Cor_Segundaria_2_1: #22c0a3;
    --Cor_Segundaria_3_1: #26b1c7;
    --Cor_Segundaria_4_1: #26c03a;
    --Cor_Segundaria_5_1: #1478cf;

    /*Paleta de cores padrão escuro*/
    --Cor_Segundaria_1_1: #115834;
    --Cor_Segundaria_2_2: #125f51;
    --Cor_Segundaria_3_2: #1B7C8C;
    --Cor_Segundaria_4_2: #105018;
    --Cor_Segundaria_5_2: #123655;

}


/*Usar para construir toda a estrutura padrão do ambiente */
.matriz {
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 5vh;

}

/* ------------------- Primeiro painel de dedicado para conter as personalizações unicas do usuário  -------------------------- */

.capitulo_1 {
    width: 4vw;
    height: 100vh;
    background-color: var(--Cor_Segundaria_5_1);
    position: absolute;
    top: 0px;
    left: 0;
    overflow: hidden;
    transition: 1s ease;

}


div.ativo {
    background-color: var(--Cor_Segundaria_5_2);
}



.capitulo_1.expansao {

    width: 15vw;
    transition: 1s ease;

    .Corpo_1 .Colunas_1 {

        width: 15vw;
        height: 26.5vh;
        transition: 1s ease;
    }

    .Corpo_1 .Colunas_1 .seguimentos_2 .user_1 .icon_subcab2_1 {
        opacity: 1;
        filter: blur(0px);
        transition: 1s ease;

    }


    .Corpo_1 .Colunas_1 .seguimentos_2 .user_1 .icon_subcab2_2 {
        opacity: 0;
        margin-top: 5vh;
        transform: scale(2.1);
        transition: 1s ease;
    }

    .Corpo_1 .Colunas_2 {
        width: 15vw;
        height: 73.5vh;
        transition: 1s ease;

    }



}

.capitulo_1:hover {

    width: 15vw;
    transition: 1s ease;

    .Corpo_1 .Colunas_1 {

        width: 15vw;
        height: 26.5vh;
        transition: 1s ease;
    }

    .Corpo_1 .Colunas_1 .seguimentos_2 .user_1 .icon_subcab2_1 {
        opacity: 1;
        filter: blur(0px);
        transition: 1s ease;

    }

    .Corpo_1 .Colunas_1 .seguimentos_2 .user_1 .icon_subcab2_2 {
        opacity: 0;
        filter: blur(20px);
        margin-top: 5vh;
        transform: scale(2.1);
        transition: 1s ease;
    }

    .Corpo_1 .Colunas_2 {
        width: 15vw;
        height: 73.5vh;
        transition: 1s ease;

    }

}


.Corpo_1 {
    display: flex;
    flex-direction: column;
}

.Corpo_1 .Colunas_1 {
    display: flex;
    flex-direction: row;

    background-image: url(../../Acessts/Imagens/Capa\ 1.png);
    background-position: center;
    background-size: cover;
    width: 15vw;
    height: 10vh;
    overflow: hidden;
    transition: 1s ease;

}

.Corpo_1 .Colunas_1 .seguimentos_1 {
    width: 15%;
    height: 30vh;
    background-color: #12365552;
    backdrop-filter: blur(8px);
    display: flex;
    order: 2;
    justify-content: center;
    align-items: start;
    align-content: center;




}

.Corpo_1 .Colunas_1 .seguimentos_1 button {
    background: none;
    outline: none;
    border: none;

}


.Corpo_1 .Colunas_1 .seguimentos_1 img {
    width: 1.5vw;
    margin-top: 1vh;
    padding: 0.5vh 0.5vw;
    border-radius: 10% 10% 10% 10%;


}

.Corpo_1 .Colunas_1 .seguimentos_1 img:hover {
    background-color: var(--Cor_Segundaria_2_1);


}


.Corpo_1 .Colunas_1 .seguimentos_2 {
    width: 85%;
    height: 30vh;

    order: 1;
    display: flex;
    color: var(--Matriz);
    flex-direction: column;


}


.Corpo_1 .Colunas_1 .seguimentos_2 .user_1 img {

    width: 6vw;
    margin-top: 2vh;
    margin-left: 35%;


}

.Corpo_1 .Colunas_1 .seguimentos_2 .user_1 .icon_subcab2_1 {
    opacity: 0;
    filter: blur(20px);
    transition: 1s ease;

}


.Corpo_1 .Colunas_1 .seguimentos_2 .user_2 {

    font-family: var(--font_titulo);
    font-size: 1.4vw;
    margin-left: 13%;
    text-align: center;

}

.Corpo_1 .Colunas_1 .seguimentos_2 .user_1 .icon_subcab2_2 {

    width: 2.5vw;
    opacity: 1;
    filter: blur(0px);
    position: absolute;
    top: 0;
    left: -0.8vw;
    transition: 1s ease;
}


/* ------------------- Segundo painel que apresenta as opições do ambiente do usuário, que está dividido em duas subpartes -------------------------- */

.Corpo_1 .Colunas_2 {
    display: flex;
    flex-direction: row;
    position: relative;
    width: 15vw;
    background-color: var(--Cor_Primaria_5_1);
    height: 90vh;
    transition: 1s ease;

}

.Corpo_1 .Colunas_2 .seguimentos_2 img {
    width: 1.5vw;
    padding-left: 1vw;

}

.Corpo_1 .Colunas_2 .seguimentos_2 a {

    font-family: var(--font_titulo);
    text-decoration: none;
    color: var(--Matriz);

}

.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1 .forg .item_menu {
    font-family: var(--font_titulo);
    text-decoration: none;
    color: var(--Matriz);

}

.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1 .forg .item_menu:hover {
    color: var(--Matriz);

}


.Corpo_1 .Colunas_2 .seguimentos_2 a:hover {
    color: var(--Matriz);

}

.sessao_1 {

    list-style: none;

}

.sessao_1 .item_menu {

    display: flex;
    gap: 2vw;
    align-items: center;
    align-content: center;

}

.sub_menu {
    display: flex;
    overflow: hidden;
    width: 100%;
    height: 1vh;
    transition: ease 1s;
}

.sub_menu.show {
    width: 100%;
    height: 15vh;

    background-color: var(--Cor_Segundaria_5_2);
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    align-items: start;
    align-content: start;
    justify-content: start;
    transition: ease 1s;

}

.sub_item_1,
.sub_item_2,
.sub_item_3 {
    display: flex;
    align-items: center;
    justify-content: start;
    align-content: start;

    gap: 1vw;
    width: 15vw;
    height: 5vh;
}


.sub_item_1 p,
.sub_item_2 p,
.sub_item_3 p {
    color: var(--Matriz);
    font-family: var(--font_titulo);
    font-size: 0.9vw;
}

.sub_item_1 img,
.sub_item_2 img,
.sub_item_3 img {

    width: 1.5vw;
    padding-left: 1vw;


}

.sessao_2 .item_menu:hover,
.sessao_1 .item_menu:hover {
    background-color: var(--Cor_Segundaria_5_2);
    transition: 1s ease;
}


.sub_item_1:hover,
.sub_item_2:hover,
.sub_item_3:hover {
    background-color: var(--Cor_Segundaria_2_1);
    transition: 1s ease;

    .Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1 .forg .item_menu {
        color: var(--variante_font_4);

    }


}

.sessao_2 .item_menu {

    display: flex;
    gap: 2vw;
    align-items: center;
    align-content: center;

}

.sessao_1 .item_menu p,
.sessao_2 .item_menu p {
    font-size: 1vw;
}

.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1,
.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_2 {
    width: 100%;


}

.Corpo_1 .Colunas_2 .seguimentos_2 .sessao_1 {
    margin-top: 3vh;
}

.Corpo_1 .Colunas_2 .seguimentos_2 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;

}