@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch&family=Montserrat&family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    font-family: 'Ubuntu', 'sans-serif';
    font-style: normal;
}

*::-webkit-scrollbar{
    display: none;
}

:root {
    /* ================ CORES ================ */
    --firstColor: #;
    --firstColorLowOpacity: #;
    --firstColorTransparent: #;

    --secondColor: #;
    --secondColorLowOpacity: #;
    --secondColorTransparent: #;

    --thirdColor: #;
    --thirdColorLowOpacity: #;
    --thirdColorTransparent: #;

    /* ============ TEMA AMARELO ============ */
    --pastelYellowColor: #F9EC7C;
    --pastelYellowColorLowOpacity: #F9EC7C80;
    --pastelYellowColorTransparent: #F9EC7C20;

    --middleYellowColor: #BDB150;
    --middleYellowColorLowOpacity: #BDB15080;
    --middleYellowColorTransparent: #BDB15020;

    --darkYellowColor: #807523;
    --darkYellowColorLowOpacity: #80752380;
    --darkYellowColorTransparent: #80752320;


    /* ============= TEMA AZUL ============= */
    --pastelBlueColor: #7DEBFA;
    --pastelBlueColorLowOpacity: #7DEBFA80;
    --pastelBlueColorTransparent: #7DEBFA20;

    --middleBlueColor: #40AEBD;
    --middleBlueColorLowOpacity: #40AEBD80;
    --middleBlueColorTransparent: #40AEBD20;

    --darkBlueColor: #037180;
    --darkBlueColorLowOpacity: #03718080;
    --darkBlueColorTransparent: #03718020;


    /* ============= TEMA ROSA ============= */
    --pastelPinkColor: #FA7EBD;
    --pastelPinkColorLowOpacity: #FA7EBD80;
    --pastelPinkColorTransparent: #FA7EBD20;

    --middlePinkColor: #CF4A8E;
    --middlePinkColorLowOpacity: #CF4A8E80;
    --middlePinkColorTransparent: #CF4A8E20;

    --darkPinkColor: #A3155F;
    --darkPinkColorLowOpacity: #A3155F80;
    --darkPinkColorTransparent: #A3155F20;


    --whiteColor: #FFFFFF;
    --grayColor: #808080;
    --blackColor: #000000;
    --redColor: #C84A60;
    --translucidColor: #80808010;

    /* ================ FONTES ================ */
    --sizeFontTitle: 26px;
    --sizeFontIcons: 18px;
    --sizeFontSubtitle: 16px;
    --sizeFontText: 14px;
}

.Y-theme {
    /* ============= Variaveis de Substituicao ============= */

    --firstColor: #F9EC7C;
    --firstColorLowOpacity: #F9EC7C80;
    --firstColorTransparent: #F9EC7C20;

    --secondColor: #BDB150;
    --secondColorLowOpacity: #BDB15080;
    --secondColorTransparent: #BDB15020;

    --thirdColor: #807523;
    --thirdColorLowOpacity: #80752380;
    --thirdColorTransparent: #80752320;

    /* ================== Variaveis Fixas =================== */

    --pastelYellowColor: #F9EC7C;
    --pastelYellowColorLowOpacity: #F9EC7C80;
    --pastelYellowColorTransparent: #F9EC7C20;

    --middleYellowColor: #BDB150;
    --middleYellowColorLowOpacity: #BDB15080;
    --middleYellowColorTransparent: #BDB15020;

    --darkYellowColor: #807523;
    --darkYellowColorLowOpacity: #80752380;
    --darkYellowColorTransparent: #80752320;
}

.B-theme {
    /* ============= Variaveis de Substituicao ============= */

    --firstColor: #7DEBFA;
    --firstColorLowOpacity: #7DEBFA80;
    --firstColorTransparent: #7DEBFA20;

    --secondColor: #40AEBD;
    --secondColorLowOpacity: #40AEBD80;
    --secondColorTransparent: #40AEBD20;

    --thirdColor: #037180;
    --thirdColorLowOpacity: #03718080;
    --thirdColorTransparent: #03718020;

    /* ================== Variaveis Fixas =================== */

    --pastelBlueColor: #7DEBFA;
    --pastelBlueColorLowOpacity: #7DEBFA80;
    --pastelBlueColorTransparent: #7DEBFA20;

    --middleBlueColor: #40AEBD;
    --middleBlueColorLowOpacity: #40AEBD80;
    --middleBlueColorTransparent: #40AEBD20;

    --darkBlueColor: #037180;
    --darkBlueColorLowOpacity: #03718080;
    --darkBlueColorTransparent: #03718020;
}

.P-theme {
    /* ============= Variaveis de Substituicao ============= */

    --firstColor: #FA7EBD;
    --firstColorLowOpacity: #FA7EBD80;
    --firstColorTransparent: #FA7EBD20;

    --secondColor: #CF4A8E;
    --secondColorLowOpacity: #CF4A8E80;
    --secondColorTransparent: #CF4A8E20;

    --thirdColor: #A3155F;
    --thirdColorLowOpacity: #A3155F80;
    --thirdColorTransparent: #A3155F20;

    /* ================== Variaveis Fixas =================== */

    --pastelPinkColor: #FA7EBD;
    --pastelPinkColorLowOpacity: #FA7EBD80;
    --pastelPinkColorTransparent: #FA7EBD20;

    --middlePinkColor: #CF4A8E;
    --middlePinkColorLowOpacity: #CF4A8E80;
    --middlePinkColorTransparent: #CF4A8E20;

    --darkPinkColor: #A3155F;
    --darkPinkColorLowOpacity: #A3155F80;
    --darkPinkColorTransparent: #A3155F20;
}

main{
    position: relative;
}

html, body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

.backCells {
    position: absolute;
    right: 0;
    top: -4rem;
}

.backCells.cellsLeft {
    left: 0;
    transform: scaleX(-1);
}

.Ho-iconLabel {
    color: var(--secondColor);
}

.pageIcon {
    color: var(--grayColor);
}

body.P-theme .pageImageIcon.active,
body.P-theme .pageImageIcon:hover {
    filter: brightness(0) saturate(100%) invert(42%) sepia(61%) saturate(1820%) hue-rotate(302deg) brightness(87%) contrast(85%);
}

body.B-theme .pageImageIcon.active,
body.B-theme .pageImageIcon:hover {
    filter: brightness(0) saturate(100%) invert(63%) sepia(81%) saturate(331%) hue-rotate(139deg) brightness(83%) contrast(87%);
}

body.Y-theme .pageImageIcon.active,
body.Y-theme .pageImageIcon:hover {
    filter: brightness(0) saturate(100%) invert(66%) sepia(48%) saturate(459%) hue-rotate(16deg) brightness(97%) contrast(85%);
}

button.confirmBtn {
    position: relative;
    display: flex;
    background-color: var(--secondColor);
    padding: 0.5rem 1rem;
    border: 2px solid transparent;
    border-radius: 100rem;
    color: var(--whiteColor);
    font-weight: 900;
    font-size: 0.8rem;
    cursor: pointer;
    transition: 0.2s;
}

button.confirmBtn.active,
button.confirmBtn:hover {
    transition: 0.3s;
    background-color: var(--whiteColor);
    color: var(--secondColor);
    border-color: var(--secondColor);
}

a {
    text-decoration: none;
    color: var(--blackColor);
}

/*====================================================================================================
========================================== HEADER LANDING ============================================
====================================================================================================*/

.headerLanding {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    gap: 3rem;
    height: 4rem;
    padding: 0.5rem 1rem;
    z-index: 998;
    background: linear-gradient(#ffffff95 95%, transparent 100%);
    backdrop-filter: blur(6px);
}

.headerLanding.active{
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--whiteColor);
    flex-direction: column;
}

.headerLanding .A-headerLogo {
    width: 10rem;
    max-width: 22rem;
    cursor: pointer;
}

.headerLanding .A-headerLinks {
    display: flex;
    gap: 2.5rem;
}

.headerLanding .A-headerLinks h4 {
    cursor: pointer;
    font-weight: 500;
}

.headerLanding .A-headerLinks h4 a {
    text-decoration: none;
    color: var(--blackColor);
}

.La-toggleHeader{
    display: none;
    position: fixed;
    top: 0.7rem;
    right: 0.7rem;
    font-size: 2rem;
    cursor: pointer;
    z-index: 999;
    background-color: #80808010;
    border-radius: 0.5rem;
    padding: 0.2rem 0.3rem;
}

.headerLanding .A-signButtons {
    display: flex;
    gap: 1rem;
}

.headerLanding .A-signButtons a {
    text-decoration: none;
}

.headerLanding .A-signButtons h4 {
    display: flex;
    height: 2rem;
    width: 7rem;
    color: var(--secondColor);
    border: 1px solid var(--secondColor);
    border-radius: 10rem;
    cursor: pointer;
    text-decoration: none;
}

.headerLanding .A-signButtons .A-signIn {
    color: var(--whiteColor);
    background-color: var(--secondColor);
}

@media (max-width: 768px) {
    .La-toggleHeader{
        display: flex;
        position: fixed;
    }

    .headerLanding{
        display: none;
        padding: 3rem;
    }

    .headerLanding .A-headerLogo {
        width: 100vw;
    }

    .headerLanding .A-headerLinks {
        flex-direction: column;
        gap: 2.5rem;
        font-size: 2rem;
    }

    .headerLanding .A-signButtons {
        gap: 1rem;
        flex-direction: column;
    }

    .headerLanding .A-signButtons h4 {
        font-size: 1.5rem;
        height: 3.5rem;
        width: 13rem;
    }
}

/*====================================================================================================
============================================ HEADER HOME =============================================
====================================================================================================*/

.headerHome {
    position: sticky;
    top: 0;
    left: 0;
    display: flex;
    gap: 5rem;
    justify-content: space-between;
    height: 12vh;
    width: 100%;
    padding: 0 1rem;
    background: var(--whiteColor);
    border-bottom: 1px solid var(--grayColor);
    z-index: 998;
}

.headerHome.active{
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--whiteColor);
    flex-direction: column;
}

.Ho-toggleHeader{
    display: none;
    position: fixed;
    top: 0.7rem;
    left: 0.7rem;
    font-size: 2rem;
    cursor: pointer;
    z-index: 999;
    background-color: #80808010;
    border-radius: 0.5rem;
    padding: 0.2rem 0.3rem;
}

.headerHome .A-headerLogo {
    width: 30vw;
    max-width: 10rem;
    cursor: pointer;
}

.headerHome .headerIcon {
    width: 2rem;
    cursor: pointer;
}

.headerHome .headerPageLinks {
    position: relative;
    display: flex;
    gap: 5vw;
    height: 100%;
}

@media(max-width: 1024px){
    .headerHome .headerPageLinks {
        display: none;
    }
}

.headerHome .headerPageLinks .pageLink {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    cursor: pointer;
    height: 100%;
    font-weight: 500;
    color: var(--grayColor);
    text-decoration: none;
    cursor: pointer;
    padding: 1rem 0 0.5rem 0;
}

.headerHome .headerPageLinks .pageLink.active,
.headerHome .headerPageLinks .pageLink:hover {
    color: var(--secondColor);
}

.headerHome .headerPageLinks .pageLink .pageSelector {
    position: absolute;
    width: 200%;
    height: 3px;
    bottom: -2px;
    border-radius: 100rem;
}

.headerHome .headerPageLinks .pageLink.active .pageSelector {
    background-color: var(--secondColor);
}

.headerHome .headerPageLinks .pageLink .headerIcon{
    min-width: 2rem;
    width: 4vh;
    max-width: 3rem;
}

body.P-theme .headerHome .headerPageLinks .pageLink.active .headerIcon,
body.P-theme .headerHome .headerPageLinks .pageLink:hover .headerIcon {
    filter: brightness(0) saturate(100%) invert(42%) sepia(61%) saturate(1820%) hue-rotate(302deg) brightness(87%) contrast(85%);
}

body.B-theme .headerHome .headerPageLinks .pageLink.active .headerIcon,
body.B-theme .headerHome .headerPageLinks .pageLink:hover .headerIcon {
    filter: brightness(0) saturate(100%) invert(63%) sepia(81%) saturate(331%) hue-rotate(139deg) brightness(83%) contrast(87%);
}

body.Y-theme .headerHome .headerPageLinks .pageLink.active .headerIcon,
body.Y-theme .headerHome .headerPageLinks .pageLink:hover .headerIcon {
    filter: brightness(0) saturate(100%) invert(66%) sepia(48%) saturate(459%) hue-rotate(16deg) brightness(97%) contrast(85%);
}

.headerHome .userContainer {
    display: flex;
    gap: 2rem;
    height: 4rem;
}

.headerHome .userContainer .notificationIconContainer{
    position: relative;

}

.headerHome .userContainer .notificationIconContainer .notificationsModalIcon {
    width: 2rem;
    position: relative;
}

.headerHome .userContainer .notificationIconContainer .notificationAlert {
    position: absolute;
    top: -0.1rem;
    right: -0.1rem;
    width: 1rem;
    height: 1rem;
    background-color: var(--secondColor);
    border: 3px solid var(--whiteColor);
    border-radius: 50%;
    display: inline-block;
    z-index: 1;
}

.headerHome .userContainer .userInformations {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

@media(max-width: 500px){
    .headerHome .userContainer .userInformations {
        display: none;
    }
}

.headerHome .userContainer .userInformations .userNickname {
    font-size: 0.65rem;
    font-weight: 500;
    color: var(--grayColor);
}

.headerHome .userContainer .userAccount {
    position: relative;
    min-width: 3rem;
    min-height: 3rem;
    width: 3.5vw;
    height: 3.5vw;
    max-width: 5rem;
    max-height: 5rem;
}

.headerHome .userContainer .userAccount .userProfileImage {
    position: relative;
    width: 100%;
    height: 100%;
    border: 1px solid var(--thirdColor);
    border-radius: 100%;
    overflow: hidden;
    background-color: var(--secondColor);
}

.headerHome .userContainer .userAccount .userProfileImage img {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
}


.headerHome .userContainer .makeAPost {
    display: flex;
    gap: 0.2rem;
}

.headerHome .userContainer .makeAPost .makeAPostBtn {
    background-color: var(--secondColor);
    padding: 0.45rem 0.5rem 0.45rem 1rem;
    border: 2px solid transparent;
    border-top-left-radius: 100rem;
    border-bottom-left-radius: 100rem;
    color: var(--whiteColor);
    font-weight: 900;
    font-size: 1rem;
    cursor: pointer;
}

.headerHome .userContainer .makeAPost  .postBtnMobile{
    display: none;
    width: 2rem;
    height: 2rem;
    background-color: var(--secondColor);
    color: var(--whiteColor);
    font-weight: bolder;
    font-size: 1rem;
    border-radius: 0.5rem;
}

@media(max-width: 500px){
    .headerHome .userContainer .makeAPost .makeAPostBtn,
    .headerHome .userContainer .makeAPost .postStyle {
        display: none;
    }

    .headerHome .userContainer .makeAPost  .postBtnMobile{
        display: flex;
    }
}

.headerHome .userContainer .makeAPost .postStyle {
    border: 2px solid transparent;
    background-color: var(--secondColor);
    padding: 0.7rem 0.5rem 0.55rem 0.3rem;
    border-top-right-radius: 100rem;
    border-bottom-right-radius: 100rem;
    font-size: 0.7rem;
    cursor: pointer;
}

.headerHome .userContainer .makeAPost .postStyle .pageIcon {
    color: var(--whiteColor);
}

.headerHome .userContainer .makeAPost:hover .makeAPostBtn,
.headerHome .userContainer .makeAPost:hover .postStyle,
.headerHome .userContainer .makeAPost.active .makeAPostBtn,
.headerHome .userContainer .makeAPost.active .postStyle {
    transition: 0.3s;
    background-color: var(--whiteColor);
    color: var(--secondColor);
    border-color: var(--secondColor);
}

.headerHome .userContainer .makeAPost:hover .postStyle .pageIcon,
.headerHome .userContainer .makeAPost.active .postStyle .pageIcon {
    color: var(--secondColor);
}

.headerHome .headerModal {
    display: flex;
    position: absolute;
    top: 100%;
    border-bottom-left-radius: 1.3rem;
    border-bottom-right-radius: 1.3rem;
    background-color: var(--whiteColor);
    z-index: 99999;
}

.headerHome .headerModal.close {
    display: none;
}

.headerHome .headerModal:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    border-bottom-left-radius: 1.3rem;
    border-bottom-right-radius: 1.3rem;
    border: 4px solid transparent;
    border-top: none;
    background: linear-gradient(var(--whiteColor), var(--whiteColor)) padding-box, linear-gradient(to bottom, var(--middleYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
    opacity: 0.4;
    z-index: -1;
}

.headerHome .makeAPostModal {
    right: 3.5rem;
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

@media(max-width: 500px){
    .headerHome .makeAPostModal {
        right: 1rem;
    }
}

.headerHome .makeAPostModal.close {
    display: none;
}

.headerHome .makeAPostModal .modalHeader {
    position: relative;
    display: flex;
    justify-content: space-between;
    padding: 0 0 1rem 1rem;
    width: 100%;
}

.headerHome .makeAPostModal .modalHeader h1 {
    font-size: 1.8rem;
}

.headerHome .makeAPostModal .postStyleSummary {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    width: 20rem;
    cursor: pointer;
}

.headerHome .makeAPostModal .postStyleSummary .postStyleTitle {
    position: relative;
    display: flex;
    gap: 0.7rem;
    justify-content: flex-start;
    width: 100%;
}

.headerHome .makeAPostModal .postStyleSummary .postStyleTitle span {
    position: relative;
    width: 100%;
    height: 1px;
    background-color: var(--grayColor);
    border-radius: 100%;
}

.headerHome .makeAPostModal .postStyleSummary .postStyleTitle span:first-of-type {
    width: 2rem;
}

.headerHome .makeAPostModal .postStyleSummary .postStyleTitle h4 {
    color: var(--grayColor);
    transition: 0.2s;
}

.headerHome .makeAPostModal .postStyleSummary:hover .postStyleTitle h4 {
    color: var(--secondColor);
    transition: 0.2s;
}

.headerHome .makeAPostModal .postStyleSummary .postStyleTitle img {
    width: 1.1rem;
    transition: 0.2s;
}

body.P-theme .makeAPostModal .postStyleSummary:hover .postStyleTitle img {
    filter: brightness(0) saturate(100%) invert(42%) sepia(61%) saturate(1820%) hue-rotate(302deg) brightness(87%) contrast(85%);
    transition: 0.2s;
}

body.B-theme .makeAPostModal .postStyleSummary:hover .postStyleTitle img {
    filter: brightness(0) saturate(100%) invert(63%) sepia(81%) saturate(331%) hue-rotate(139deg) brightness(83%) contrast(87%);
    transition: 0.2s;
}

body.Y-theme .makeAPostModal .postStyleSummary:hover .postStyleTitle img {
    filter: brightness(0) saturate(100%) invert(66%) sepia(48%) saturate(459%) hue-rotate(16deg) brightness(97%) contrast(85%);
    transition: 0.2s;
}

.headerHome .makeAPostModal .postStyleSummary p {
    position: relative;
    width: 100%;
    white-space: wrap;
    font-size: 0.8rem;
    text-align: justify;
    transition: 0.2s;
}

.headerHome .makeAPostModal .postStyleSummary p span {
    font-weight: 600;
}

.headerHome .makeAPostModal .postStyleSummary:hover p span {
    color: var(--secondColor);
    transition: 0.2s;
}

.headerHome .makeAPostModal .postStyleSummary .postBtn {
    position: relative;
    display: flex;
    color: var(--whiteColor);
    background-color: var(--secondColorLowOpacity);
    width: 5rem;
    height: 1.8rem;
    border: none;
    border-radius: 100rem;
    font-size: 0.8rem;
    transition: 0.2s;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
}

.headerHome .makeAPostModal .postStyleSummary .postBtn:hover,
.headerHome .makeAPostModal .postStyleSummary:hover .postBtn {
    transition: 0.3s;
    transform: scale(1.1);
    background-color: var(--whiteColor);
    color: var(--secondColor);
    border-color: var(--secondColor);
}

.headerHome .notificationsModal {
    display: flex;
    justify-content: flex-start;
    right: 15rem;
    width: fit-content;
    max-height: 65vh;
    padding: 1rem;
    padding-bottom: 0;
    flex-direction: column;
    align-items: flex-start;
}

@media(max-width: 500px){
    .headerHome .notificationsModal {
        right: 1rem;
    }
}

.headerHome .notificationsModal .notificationsCenter{
    position: relative;
    width: 100%;
    overflow-y: scroll;
}

.headerHome .notificationsModal .modalHeader{
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 2rem;
    padding: 0 1rem 0.5rem 1rem;
}

.headerHome .notificationsModal .notificationsCenter .notificationsRelativeDate{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    width:100%;
}

.headerHome .notificationsModal .notificationsCenter .notificationsRelativeDate span{
    position: relative;
    content: '';
    width: 2rem;
    height: 1px;
    background-color: #000000;
}

.headerHome .notificationsModal .notificationsCenter .notificationsRelativeDate span:first-child {
    width: 2rem;
}

.headerHome .notificationsModal .notificationsCenter .notificationsRelativeDate span:last-child {
    flex-grow: 1;
}

.headerHome .notificationsModal .notificationsCenter .notificationsRelativeDate p {
    margin: 0 8px;
    white-space: nowrap;
}

.headerHome .notificationsModal .notificationsCenter .notificationsContainer{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.7rem;
}
.headerHome .notificationsModal .notificationsCenter .notificationsContainer .notification{
    display: flex;
    flex-direction: row;
    text-wrap: wrap;
    cursor: pointer;
    width:100%;
    justify-content: flex-start;
    gap:1rem;
}
.headerHome .notificationsModal .notificationsCenter .notificationsContainer .notification:hover{
    background-color: var(--translucidColor);
}
.headerHome .notificationsModal .notificationsCenter .notificationsContainer .notification .postOwnerImage{
    min-width: 3rem;
    max-width: 3rem;
    min-height: 3rem;
    max-height: 3rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    border: 1px solid var(--thirdColor);
    border-radius: 100%;
    background-color: var(--secondColor);
}

.headerHome .notificationsModal .notificationsCenter .notificationsContainer .notification .postOwnerImage img{
    height: 3rem;
    width: 3rem;
}

.headerHome .userFunctionsModal {
    right: 1rem;
    padding: 1rem;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.headerHome .userFunctionsModal.close {
    display: none;
}

.headerHome .userFunctionsModal a {
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    border-radius: 0.5rem;
    width: 10rem;
    height: 1.7rem;
    padding: 0 0.6rem;
    background-color: #80808025;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--blackColor);
    text-decoration: none;
}

.headerHome .userFunctionsModal span {
    text-align: center;
    position: relative;
    width: 100%;
    height: 1px;
    background-color: #80808070;
    left: 50%;
    transform: translateX(-50%);
}

.headerHome .userFunctionsModal span:last-of-type {
    width: 50%;
}

.headerHome .userFunctionsModal a .pageIcon {
    font-size: 0.9rem;
}

.Ho-postSomething {
    position: relative;
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid var(--grayColor);
    padding: 1rem;
}

.Ho-postSomething .Ho-postTop {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
}

.Ho-postSomething .Ho-postTop .Ho-userProfileImage {
    position: relative;
    min-width: 4rem;
    min-height: 4rem;
    width: 4rem;
    height: 4rem;
    max-width: 4rem;
    max-height: 4rem;
    border: 1px solid var(--secondColor);
    border-radius: 100%;
    overflow: hidden;
}

.Ho-postSomething .Ho-postTop .Ho-userProfileImage img {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
}

.Ho-postSomething .Ho-postTop .Ho-postText {
    position: relative;
    width: fit-content;
}

@keyframes shake {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-5px);
    }

    50% {
        transform: translateX(5px);
    }

    75% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

.Ho-postSomething .Ho-postTop .Ho-postText .characterBlocked {
    animation: shake 0.7s;
}

.Ho-postSomething .Ho-postTop .Ho-postTitle label .characterBlocked {
    animation: shake 0.7s;
}

.Ho-postSomething .Ho-postTop .Ho-postText .Ho-postMainContent{
    position: relative;
}

.Ho-postSomething .Ho-postTop .Ho-postText .Ho-postMainContent .Ho-postTextContent {
    position: relative;
    width: 100%;
    height: 100%;
    outline: none;
    border: 1px solid var(--grayColor);
    padding: 0.5rem 2.5rem 0.5rem 1rem;
    background-color: transparent;
    border-radius: 0.7rem;
    font-size: 0.9rem;
}

.Ho-postSomething .Ho-postTop .Ho-postText .Ho-postMainContent .Ho-postTextContent::-webkit-scrollbar {
    display: none;
}

.Ho-postSomething .Ho-postTop .Ho-postText .Ho-postMainContent .Ho-characters {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
    color: var(--grayColor);
    font-size: 0.65rem;
}

.Ho-postSomething .Ho-postTop .Ho-identifyMyself{
    position: relative;
    float: right;
    right: 0;
    bottom: 0;
    margin: 0.5rem 0.5rem 0 0;
    cursor: pointer;
    font-size: 0.85rem;
    display: flex;
    gap: 0.5rem;
}

.Ho-postSomething .Ho-postTop .Ho-identifyMyself #Ho-identifyMyselfIcon{
    font-size: 0.8rem;
    color: var(--grayColor);
}

.Ho-postSomething .Ho-postTop .Ho-identifyMyself #Ho-identifyMyselfIcon:hover{
    color: var(--secondColor);
}

.Ho-postSomething .Ho-identifyMyselfModal{
    position: absolute;
    border-radius: 1.3rem;
    right: -45%;
    bottom: 1.5rem;
    padding: 1rem;
    width: 16.5rem;
    background-color: var(--whiteColor);
    transition: 0.25s ease-in;
    transform: translateX(0);
    opacity: 1;
    z-index: -1;
}

.Ho-postSomething .Ho-identifyMyselfModal.close{
    transform: translateX(-5rem);
    transition: 0.25s ease-in;
    opacity: 0;
}

.Ho-postSomething .Ho-identifyMyselfModal:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    border-radius: 1.3rem;
    border: 4px solid transparent;
    background: linear-gradient(var(--whiteColor), var(--whiteColor)) padding-box, linear-gradient(to bottom, var(--middleYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
    opacity: 0.4;
    z-index: -1;
}

.Ho-postSomething .Ho-identifyMyselfModal .Ho-identifyHeader{
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding-bottom: 0.5rem;
}

.Ho-postSomething .Ho-identifyMyselfModal .Ho-identifyHeader .Ho-relatosIcon{
    position: relative;
    width: 1.2rem;
    filter: brightness(0) saturate(100%) invert(66%) sepia(48%) saturate(459%) hue-rotate(16deg) brightness(97%) contrast(85%);
}

.Ho-postSomething .Ho-identifyMyselfModal .Ho-identifyHeader h3{
    font-size: 0.9rem;
}

.Ho-postSomething .Ho-identifyMyselfModal p{
    word-break: break-all;
    font-size: 0.8rem;
    text-align: justify;
}

.Ho-postSomething .Ho-identifyMyselfModal p span{
    font-weight: bold;
    color: var(--redColor);
}

.Ho-postSomething .Ho-identifyMyselfModal p span:first-of-type{
    color: var(--thirdColor);
}

.Ho-postSomething .Ho-postBottom {
    position: relative;
    display: flex; 
    width: 100%; 
    gap: 1.5rem;
    padding-left: 2rem;
    justify-content: space-between;
}

.Ho-postSomething .Ho-postBottom .Ho-postAttachments{
    display: flex;
    gap: 2rem;
}

.Ho-postSomething .Ho-postBottom .Ho-postInputLabel{
    display: flex;
    gap: 0.5rem;
}

.Ho-postSomething .Ho-postBottom .Ho-postInputLabel label {
    display: flex;
    gap: 0.5rem;
    width: fit-content;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9rem;
}

.Ho-postSomething .Ho-postBottom .Ho-postInputLabel img{
    width: 1rem;
    filter: brightness(0) saturate(100%) invert(66%) sepia(48%) saturate(459%) hue-rotate(16deg) brightness(97%) contrast(85%);
}

.Ho-postSomething .Ho-postBottom .Ho-iconLabel {
    font-size: 1rem;
    cursor: pointer;
}

.Ho-postSomething .Ho-postBottom .Ho-imageInput input {
    display: none
}

.Ho-postSomething .Ho-postBottom .Ho-showPixKey .noPix{
    color: var(--redColor);
}

.Ho-postSomething .Ho-postBottom .Ho-showPixKey img.noPix{
    filter: brightness(0) saturate(100%) invert(39%) sepia(36%) saturate(961%) hue-rotate(300deg) brightness(96%) contrast(97%);
}

.Ho-postSomething .Ho-postBottom .Ho-showPixKey .bi-info-circle-fill{
    font-size: 0.8rem;
    color: var(--grayColor);
    cursor: pointer;
}

.Ho-postSomething .Ho-postBottom .Ho-showPixKey .bi-info-circle-fill:hover{
    color: var(--secondColor);
}

.Ho-postSomething .Ho-postBottom .Ho-showPixKey .Ho-showPixKeyModal{
    position: absolute;
    border-radius: 1.3rem;
    top: 2rem;
    padding: 1rem;
    width: 13rem;
    background-color: var(--whiteColor);
    transition: 0.25s ease-in;
    transform: translateX(0);
    opacity: 1;
    z-index: -1;
    font-size: 0.8rem;
}

.Ho-postSomething .Ho-postBottom .Ho-showPixKey .Ho-showPixKeyModal.close{
    transform: translateY(-5rem);
    transition: 0.25s ease-in;
    opacity: 0;
}

.Ho-postSomething .Ho-postBottom .Ho-showPixKey .Ho-showPixKeyModal:before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 100%;
    border-radius: 1.3rem;
    border: 4px solid transparent;
    background: linear-gradient(var(--whiteColor), var(--whiteColor)) padding-box, linear-gradient(to bottom, var(--middleYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
    opacity: 0.4;
    z-index: -1;
}

.Ho-postSomething .Ho-postBottom .Ho-showPixKey .Ho-showPixKeyModal p:nth-of-type(2){
    margin: 5px 0;
    color: var(--thirdColor);
}

.Ho-postSomething .Ho-postBottom .Ho-showPixKey .Ho-showPixKeyModal p span{
    color: var(--blackColor);
    font-weight: bold;
}

.Ho-postSomething .Ho-postBottom .confirmBtn {
    position: relative;
    display: flex;
    font-size: 1rem;
    padding: 0.4rem 1.5rem;
}

.Ho-postSomething .Ho-imagePreview {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding-left: 1.5rem;
}

.Ho-postSomething .Ho-imagePreview .Ho-preview img {
    margin-top: -1rem;
    width: 4rem;
    opacity: 0.5;
    transition: 0.3s;
    border-radius: 0.5rem;
    cursor: pointer;
    border: 1px solid var(--grayColor);
}

.Ho-postSomething .Ho-imagePreview .Ho-preview img:hover {
    opacity: 1;
    transition: 0.3s;
}

.navMobile {
    position: fixed;
    left: 0;
    bottom: 0;
    display: none;
    gap: 10vw;
    height: 12vh;
    width: 100%;
    padding-bottom: 1rem;
    background: var(--whiteColor);
    border-top: 1px solid var(--grayColor);
    z-index: 1;
}

@media(max-width: 1024px){
    .navMobile {
        display: flex;
    }
}

.navMobile.active{
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: var(--whiteColor);
    flex-direction: column;
}

.navMobile .pageLink {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    cursor: pointer;
    height: 100%;
    font-weight: 500;
    color: var(--grayColor);
    text-decoration: none;
    cursor: pointer;
    padding: 1rem 0 0.5rem 0;
}

.navMobile .pageLink.active,
.navMobile .pageLink:hover {
    color: var(--secondColor);
}

.navMobile .pageLink .pageSelector {
    position: absolute;
    width: 200%;
    height: 3px;
    bottom: -2px;
    border-radius: 100rem;
}

.navMobile .pageLink.active .pageSelector {
    background-color: var(--secondColor);
}

.navMobile .pageLink .headerIcon{
    width: 6vh;
}

body.P-theme .navMobile .pageLink.active .headerIcon,
body.P-theme .navMobile .pageLink:hover .headerIcon {
    filter: brightness(0) saturate(100%) invert(42%) sepia(61%) saturate(1820%) hue-rotate(302deg) brightness(87%) contrast(85%);
}

body.B-theme .navMobile .pageLink.active .headerIcon,
body.B-theme .navMobile .pageLink:hover .headerIcon {
    filter: brightness(0) saturate(100%) invert(63%) sepia(81%) saturate(331%) hue-rotate(139deg) brightness(83%) contrast(87%);
}

body.Y-theme .navMobile .pageLink.active .headerIcon,
body.Y-theme .navMobile .pageLink:hover .headerIcon {
    filter: brightness(0) saturate(100%) invert(66%) sepia(48%) saturate(459%) hue-rotate(16deg) brightness(97%) contrast(85%);
}
/*====================================================================================================
============================================== FOOTER ================================================
====================================================================================================*/

.footerLanding {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 3rem;
    width: 100%;
    min-height: 10rem;
    padding: 0 2rem 5rem 1rem;
    background-color: var(--blackColor);
    color: var(--whiteColor);
}

.footerLanding .footerLink {
    position: absolute;
    height: 7vh;
    width: 100%;
    scroll-behavior: smooth;
    margin-left: -1rem;
}

.footerLanding h4 {
    font-size: 1.4em;
    line-height: 4rem;
    pointer-events: none;
}

.footerLanding .A-footerLeft .A-footerSocialMedias {
    display: flex;
    justify-content: space-evenly;
    gap: 5rem;
    font-size: 1.3rem;
    width: fit-content;
}

.footerLanding .A-footerLeft .A-footerSocialMedias .bi-instagram {
    color: var(--pastelYellowColor);
    cursor: pointer;
}

.footerLanding .A-footerLeft .A-footerSocialMedias .bi-envelope-fill {
    color: var(--pastelBlueColor);
    cursor: pointer;
}

.footerLanding #A-copyrightSign {
    position: absolute;
    display: flex;
    bottom: 1rem;
    left: 50%;
    transform: translate(-50%);
    font-size: 0.7rem;
    text-align: center;
}

.footerLanding .A-footerRight {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-wrap: wrap;
    column-gap: 6rem;
    row-gap: 1rem;
}

.footerLanding .A-footerRight li{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.5rem;
}

.footerLanding .A-footerRight li a {
    cursor: pointer;
    text-decoration: none;
    color: var(--whiteColor);
}

.footerLanding .A-footerRight li.A-footerAbout h4 {
    color: var(--pastelYellowColor);
}

.footerLanding .A-footerRight li.A-footerHelp h4 {
    color: var(--pastelBlueColor);
}

.footerLanding .A-footerRight li.A-footerPolitic h4 {
    color: var(--pastelPinkColor);
}

/*====================================================================================================
====================================== PÁGINA DE APRESENTAÇÃO ========================================
====================================================================================================*/

.La-landing .La-quote {
    position: relative;
}

.La-landing {
    background: linear-gradient(
     var(--whiteColor) 5%,
     #F9EC7C50 10%,
     #7DEBFA50 30%,
     
     #FA7EBD50 39%,
     #F9EC7C50 47%,
     #7DEBFA50 58%, 
     var(--whiteColor) 69%, 
     #F9EC7C50 79%,
     #7DEBFA50 90%) !important;
    overflow: hidden;
}

.La-landing .La-quote {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    text-align: center;
    padding: 10rem;
    width: 80vw;
    font-size: 4rem;
    left: 50%;
    transform: translateX(-50%);
}

.La-landing .La-quote::before,
.La-landing .La-quote::after {
    content: '';
    top: 50%;
    width: 20%;
    height: 3px;
    border-radius: 15%;
    margin-top: 4.5rem;
    background: linear-gradient(to left, var(--middleYellowColor),  var(--whiteColor));
    z-index: 0;
}
.La-landing .La-quote::after {
    background: linear-gradient(to right, var(--middleYellowColor),  var(--whiteColor));
}

.La-landing .La-quote::before{
    left: 0;
}

.La-landing .La-quote{
    right: 0;
}

.La-landingSections{
    position: relative;
    padding: 5vh 0 5vh 0;
}

.La-landingSections:first-of-type{
    padding: 0 0 3rem 3rem;
}

.La-landingSections:first-of-type .backCells {
    position: absolute;
    right: 0;
    top: -20rem;
    height: 125%;
    z-index: -10;
}

@media (max-width: 1200px) {
    .La-landing .backCells {
      opacity: 0.09;
    }
}  

@media (max-width: 850px) {
    .La-landing {
        background: linear-gradient(
         var(--whiteColor) 5%,
         #F9EC7C15 15%,
         #7DEBFA15 28%,
         #7DEBFA15 33%,
         #FA7EBD15 40%,
         #FA7EBD15 41%,
         #F9EC7C15 45%,
         #F9EC7C15 49%,
         #7DEBFA15 53%, 
         #7DEBFA15 63%, 
         var(--whiteColor) 67%, 
         var(--whiteColor) 75%, 
         #F9EC7C15 82%,
         #7DEBFA15 90%);
        overflow: hidden;
    }

    .La-quote{
        font-size: 3rem;
        padding: 5rem;
    }

    .La-landingSections:first-of-type{
        padding: 0 0 3rem 2rem;
    }
}  

@media (max-width: 425px) {
    .La-landingSections:first-of-type{
        padding: 0 0 3rem 1rem;
    }
}

.La-landingSections article {
    display: flex;
    justify-content: flex-start;
    gap: 3rem;
    font-size: 1.25rem;
    text-align: justify;
    width: 80vw;
}

.La-landingSections article .La-momImages  {
    width: 35rem;
    margin: -7rem;
}

@media (max-width: 700px) {
    .La-landingSections article .La-momImages {
        display: none;
    }
}

.La-landing .La-seccaoDeTextoEsquerda {
    text-align: left;
    margin-right: auto;
}

.La-landing .La-seccaoDeTextoDireita {
    text-align: right;
    margin-left: auto;
}

.La-landing .La-tituloSeccao{
    font-size: 2.3rem;
    margin-bottom: 1.3rem;
}

.La-landing .La-subtituloSeccao{
    font-size: 1.9rem;
    font-weight: 100;
    margin-bottom: 1.3rem;
}

.La-landingSections .La-articleHighlight {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
    height: 100%;
}

.La-landingSections .La-articleHighlight .La-articleBar {
    position: relative;
    height: 20rem;
    width: 2px;
    border-radius: 10rem;
}

.La-landingSections .La-articleHighlight .La-articleBar::before {
    content: "";
    position: absolute;
    transform: translateY(-15%);
    height: 200%;
    inset: -7px;
    filter: blur(20px);
    opacity: 0.5;
}

.La-landingSections .La-articleConectaMaes .La-articleHighlight .La-articleBar {
    background: var(--middleYellowColor);
}

.La-landingSections .La-articleConectaMaes .La-articleHighlight .La-articleBar::before{
    background: var(--pastelYellowColor);
}

.La-landingSections .La-articleEquip .La-articleHighlight .La-articleBar::before {
    background: var(--pastelBlueColor);
}

.La-landingSections .La-Sharing .La-articleHighlight .La-articleBar {
    background: linear-gradient(var(--middleYellowColor) 20%, var(--middleBlueColor) 100%);
}

.La-landingSections .La-Sharing .La-articleHighlight .La-articleBar::before {
    background: linear-gradient(var(--pastelYellowColor) 20%, var(--pastelBlueColor) 100%);
}

.La-landingSections .La-articleFollowing .La-articleHighlight .La-articleBar {
    background-color: var(--middleBlueColor);
}

.La-landingSections .La-articleFollowing .La-articleHighlight .La-articleBar::before {
    background-color: var(--pastelBlueColor);
}

.La-landingSections .La-articleHelping .La-articleHighlight .La-articleBar {
    background: linear-gradient(var(--middleBlueColor) 20%, var(--middlePinkColor) 100%);
}

.La-landingSections .La-articleHelping .La-articleHighlight .La-articleBar::before {
    background: linear-gradient(var(--pastelBlueColor) 20%, var(--pastelPinkColor) 100%);
}

.La-landingSections .La-articleRating .La-articleHighlight .La-articleBar {
    background: linear-gradient(var(--middlePinkColor), transparent);
}

.La-landingSections .La-articleRating .La-articleHighlight .La-articleBar::before {
    background: linear-gradient(var(--pastelPinkColor), transparent);
}

.La-landingSections .La-articleConectaMaes .La-focus,
.La-landingSections .La-Sharing .La-focus,
.La-landingSections .La-testSing .La-focus,
.La-landingSections .La-creatAccountSing .La-focus {
    font-weight: bolder;
    color: var(--middleYellowColor);
}

.La-landingSections .La-articleFollowing .La-focus,
.La-landingSections .La-articleHelping .La-focus {
    font-weight: bolder;
    color: var(--middleBlueColor);
}

.La-landingSections .La-articleRating .La-focus,
.La-landingSections .La-contactSection .La-focus {
    font-weight: bolder;
    color: var(--middlePinkColor);
}

.La-landingSections .La-articleTitle{
    text-align: center;
    font-size: 3rem;
}

.La-landing .La-landingSections .La-testSing  p {
    text-align: center;
    font-size: 1.3rem;
}

.La-landing .La-landingSections .La-testSing {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    left: 50%;
    transform: translate(-50%);
    width: 50%;
}

.La-landing .La-landingButtons{
    display: flex;
    padding: 0.7rem 3.5rem;
    border-radius: 10rem;
    color: var(--whiteColor);
    background-color: transparent;
    box-shadow: 0 0 30px 2px transparent;
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid transparent;
    margin: 2rem;
    text-decoration: none;
    transition: 0.2s;
}

.La-landing .La-landingButtons:hover{
    transform: scale(1.1);
    transition: 0.2s;
}

.La-landing .La-landingSections .La-testSing .La-landingButtons,
.La-landingSections .La-creatAccountSing .La-landingButtons{
    background-color: var(--middleYellowColor);
    box-shadow: 0 0 30px 1px var(--pastelYellowColor);
    border-color: var(--darkYellowColor);
}

.La-landing .La-landingSections .La-testSing .La-landingButtons:hover,
.La-landingSections .La-creatAccountSing .La-landingButtons:hover{
    box-shadow: 0 0 60px 3px var(--pastelYellowColor);
}

.La-landing .La-landingSections:nth-of-type(3){
    z-index: 1;
}

.La-landing .La-landingSections .La-frequentQuestions {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    left: 50%;
    transform: translate(-50%);
    width: 60vw;
}

.La-landing .La-landingSections .La-frequentQuestions .faqList .La-faqQuestions{
    position: relative;
    border-bottom: 2px solid var(--grayColor);
    cursor: pointer;
    padding: 1.7rem 2rem 1.7rem 1.5rem;
    margin: 0.25rem 0 0.25rem 0;
    transition: background-color 0.3s ease;
    list-style: none;
}

@media (max-width: 768px){
    .La-landing .La-landingSections .La-frequentQuestions .faqList .La-faqQuestions{
        padding: 1.5rem 2rem 1.5rem 1.5rem;
    }
}

@media (max-width: 428px){
    .La-landing .La-landingSections .La-frequentQuestions .faqList .La-faqQuestions{
        padding: 1rem 2rem 1rem 1.5rem;
    }
}

.La-landing .La-landingSections .La-frequentQuestions .faqList .La-faqQuestions.active{
    transition: 0.5s;
    border-color: var(--middleBlueColor);
}

.La-landing .La-landingSections .La-frequentQuestions .faqList .La-faqQuestions p {
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

.La-landing .La-landingSections .La-frequentQuestions .faqList .La-faqQuestions:hover p{
    color: var(--darkBlueColor);
    transition: 0.1s;
}

.La-landing .La-landingSections .La-frequentQuestions .faqList .La-faqQuestions.active p {
    color: var(--middleBlueColor);
    font-weight: 500;
}

.La-landing .La-landingSections .La-frequentQuestions .faqList .La-faqQuestions .bi-chevron-right{
    position: absolute;
    right: 0;
    top: 1.7rem;
    font-size: 1.5rem;
    transition: 0.2s;
}

.La-landing .La-landingSections .La-frequentQuestions .faqList .La-faqQuestions .bi-chevron-right {
    position: absolute;
    right: 0;
    top: 1.7rem;
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.La-landing .La-landingSections .La-frequentQuestions .faqList .La-faqQuestions.active .bi-chevron-right{
    color: var(--middleBlueColor);
    font-weight: 600;
    transform: rotate(90deg);
    transition: 0.2s;
}

.La-landing .La-landingSections .La-frequentQuestions .faqList .La-faqQuestions .La-faqAnswers{
    position: relative;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    padding: 0.5rem 0 0 1rem;
}

.La-landing .La-landingSections .La-frequentQuestions .faqList .La-faqQuestions.active .La-faqAnswers{
    opacity: 1;
}

.La-landing .La-landingSections .La-frequentQuestions .La-observation{
    position: relative;
}

@media (max-width: 768px){
    .La-landing .La-landingSections .La-frequentQuestions .La-observation{
        position: relative;
        width: 150%;
    }
}

@media (max-width: 320px){
    .La-landing .La-landingSections .La-frequentQuestions .La-observation{
        position: relative;
        width: 200%;
    }
}

.La-landing .La-landingSections .La-frequentQuestions .La-observation a {
    font-weight: bold;      
    color: var(--middleBlueColor);
    cursor: pointer;
}

.La-landing .La-landingSections .La-contactSection {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    left: 50%;
    transform: translate(-50%);
    width: 60vw;
}

.La-contactSectionBackgroundImage{
    position: absolute;
    height: 110vh;
    right: 66%;
    opacity: 0.5;
    top: 40%;
    transform: translateY(-50%);
}

.La-landing .La-contactForm {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    row-gap: 2.5rem;
    max-width: 45rem;
}

.La-contactInfos{
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.La-landing .La-contactForm .La-contactField {
    position: relative;
    width: 45%;
    background-color: transparent;
    display: flex;
    justify-content: flex-end;
}

.La-landing .La-contactForm .La-contactField.fullField {
    width: 100%; 
}

.La-landing .La-contactField:after{
    position: absolute;
    content: '';
    width: 100%;
    height: 0.21vh;
    bottom: 0;
    left: 0;
    background: linear-gradient(transparent, transparent) padding-box, linear-gradient(to left, var(--middleYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
}

.La-landing .La-contactField .La-contactDados{    
    border: none;
    outline: none;
    width: 100%;
    height: 100%;
    resize: none;
    background-color: transparent;
    font-size: 1rem;
    padding: 0.5rem;
}

.La-landing .La-contactField .La-contactfakePlaceHolder {
    position: absolute;
    left: 10px;
    top: 40%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    color: var(--middlePinkColor);
    padding: 0 5px;
    transition: 0.3s ease;
    pointer-events: none;
}

.La-contactDados:focus + .La-contactfakePlaceHolder,
.La-contactDados:valid + .La-contactfakePlaceHolder {
    top: -10px;
    left: 10px;
    font-size: 1rem;
    color: var(--pastelPinkColor);
}

.La-landing .La-landingSections .La-contactSection .La-landingButtons{
    background-color: var(--middlePinkColor);
    box-shadow: 0 0 30px 1px var(--pastelPinkColor);
    border-color: var(--darkPinkColor);
}

.La-landing .La-landingSections .La-contactSection .La-landingButtons:hover{
    box-shadow: 0 0 60px 3px var(--pastelPinkColor);
}

.La-landing .La-contactSectionLink {
    color: var(--middlePinkColor);
    text-decoration: none;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.La-cantactSectionIcon {
    display: flex; 
    justify-content: center; 
    align-items: center;
    gap: 0.9rem; 
    margin-top: -0.5rem; 
    margin-bottom: 2rem; 
}

.La-cantactSectionIconLink {
    text-decoration: none; 
    position: relative;
    width: 40px;
    transition: 0.2s;
}

.La-cantactSectionIconLink:hover{
    box-shadow: 0 0 30px 1px var(--middlePinkColor);
    border-radius: 100%;
    transition: 0.2s;
}

.La-cantactSectionIconLink img {
    width: 100%;
    display: block;
    transition: 0.2s;
}

.La-cantactSectionIconLink img.overlay {
    position: absolute;
    width: 110%;
    top: -5%;
    left: -5%;
    opacity: 0;
    transition: 0.2s;
}

.La-cantactSectionIconLink:hover img.overlay {
    opacity: 1;
}

.La-cantactSectionIconLink:hover img.base {
    opacity: 0;
}

.La-landingSections .La-creatAccountSing  p {
    text-align: center;
    font-size: 1.3rem;
}

.La-landingSections .La-creatAccountSing{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    left: 50%;
    transform: translate(-50%);
    width: 50%;
}

.La-landingSections .La-articleEquip {
    position: relative;
    justify-content: center;
    width: 100%;
    padding-top: 10rem;
}

.La-landingSections .La-articleEquip .La-equipCells{
    position: absolute;
    right: 0;
}

@media (max-width: 850px) {
    .La-equipCells {
        display: none;
    }
}
    
.La-landingSections .La-articleEquip .La-articleHighlight {
    position: absolute;
    left: 1rem;
    top: 0;
    display: flex;
    flex-direction: row;
    gap: 1rem;
    height: fit-content;
}

.La-equipeSectionCollum{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
}

.La-landingSections .La-articleEquip .La-articleHighlight .La-articleBar {
    height: 8rem;
    background: linear-gradient(var(--middleBlueColor), transparent);
    border-radius: 15%;
}

.La-equipIcon {
    width: 60px;
    height: auto;
    align-items: start;
}

.La-landingSections .La-articleEquip .La-equipContainer {
    display: flex;
    flex-wrap: wrap;
    width: 50vw;
    gap: 5rem;
    padding: 1rem;
}

.La-landingSections .La-articleEquip .La-equipContainer .La-equipMember .La-memberImage .La-memberImageIcon{
    width: 100%;
}

.La-memberImage{
    position: relative;
    min-width: 6rem;
    width: 12vw;
    width: 12rem;
    border-radius: 100%;
    margin-bottom: 0.5rem;
}

.La-memberSocialMidiaIcon{
    position: absolute;
    width: 20px;
    height: 20px;
}

.La-landingSections .La-articleEquip .La-equipContainer .La-equipMember .La-memberImage .La-memberSocialMidia .La-memberSocialMidiaIcon img{
    width: 100%;
}

.La-memberSocialMidiaIcon:nth-child(1) {
    top: 60%;
    right: -15px;
    transform: translate(-50%, -50%);
}

.La-memberSocialMidiaIcon:nth-child(2) {
    bottom: 15px;
    right: 4%;
    transform: translate(-50%, -50%);
}

.La-memberSocialMidiaIcon:nth-child(3) {
    bottom: -8px;
    left: 50%;
    transform: translate(50%, -50%);
}

.La-landingSections .La-articleEquip .La-equipContainer .La-equipMember .La-memberInformation {
    line-height: 1.4rem;
    text-align: center;
}

.La-landingSections .La-articleEquip .La-equipContainer .La-equipMember .La-memberInformation .La-memberName {
    font-size: 1.7rem;
    font-weight: 600;
}

.La-landingSections .La-articleEquip .La-equipContainer .La-equipMember .La-memberInformation .La-memberFamilyName {
    font-weight: 500;
    font-size: 1.2rem;
}

.La-landingSections .La-articleEquip .La-equipContainer .La-equipMember .La-memberInformation .La-memberFunction {
    font-weight: 400;
    font-size: 1rem;
}

/*====================================================================================================
==================================== PÁGINAS DE LOGIN/REGISTRO =======================================
====================================================================================================*/

.Lo-Login,
.Re-register {
    position: relative;
    display: flex;
    background: linear-gradient(var(--whiteColor) 0%, var(--firstColorLowOpacity) 95%);
    padding: 3vh;
    height: 100vh;
    overflow: hidden;
}

.Lo-loginForm,
.Re-registerForm {
    position: relative;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    padding: 9vh 0 2rem 0;
    border: 2px solid transparent;
    background: linear-gradient(var(--whiteColor), var(--whiteColor)) padding-box, linear-gradient(var(--pastelYellowColor), var(--pastelBlueColor), var(--pastelPinkColor)) border-box;
    border-radius: 1rem;
    min-width: 28rem;
    width: 33.5vw;
    max-width: 35rem;
    min-height: 29rem;
    height: 78vh;
    max-height: max-content;
    box-shadow: 0 4px 16px 0px #00000040;
    overflow-y: hidden;
    gap: 5vh;
}

@media(min-width: 2560px){
    .Lo-loginForm,
    .Re-registerForm {
        width: 100%;
        height: 100%;
    }
}

@media(max-width: 768px){
    .Lo-loginForm,
    .Re-registerForm {
        width: 100%;
        height: 100%;
    }
}

@media(max-width: 500px){
    .Lo-Login,
    .Re-register {
        padding: 0;
        height: 100%;
    }

    .Lo-loginForm,
    .Re-registerForm {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border: none;
    }

    .Lo-loginForm .Lo-backButton,
    .Re-registerForm .Re-backButton {
        left: 3rem;
        top: 1.5rem;
        font-size: 1.8rem;
    }
}

@media(max-width: 320px){
    .Lo-Login,
    .Re-register {
        padding: 0;
        height: 100%;
    }

    .Lo-loginForm,
    .Re-registerForm {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border: none;
    }

    .Lo-loginForm .Lo-backButton,
    .Re-registerForm .Re-backButton {
        left: 5rem;
        top: 1.5rem;
    }
}

.Lo-loginForm .Lo-loginHeader,
.Re-registerForm .Re-registerHeader {
    position: relative;
    text-align: center;
    font-size: 0.8rem;
    color: var(--thirdColor);
}

.Lo-loginForm .Lo-backButton,
.Re-registerForm .Re-backButton {
    position: absolute;
    left: 2rem;
    top: 2rem;
    font-size: 1.5rem;
    cursor: pointer;
    transition: 0.2s;
    color: var(--secondColor);
}

.Lo-loginForm .Lo-backButton {
    left: -0;
    top: -2rem;
}

.Lo-loginForm .Lo-backButton:hover,
.Re-registerForm .Re-backButton:hover {
    transform: scale(1.2);
    transition: 0.2s;
}

.Lo-loginForm .Lo-backButton.close,
.Re-registerForm .Re-backButton.close {
    display: none;
}

.Lo-loginForm .Lo-loginHeader .Lo-loginTitle,
.Re-registerForm .Re-registerHeader .Re-registerTitle {
    position: relative;
    color: var(--secondColor);
    text-transform: uppercase;
    font-size: 3.7rem;
    text-shadow: 0 2px 4px #00000040;
}

.Lo-loginForm .Lo-loginCenter,
.Re-registerForm .Re-registerCenter {
    height: 20rem;
    width: 100%;
}

.Lo-loginForm .Lo-loginCenter .Lo-userSection {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-top: 1rem;
}

.Re-registerForm .Re-registerCenter .Re-registerSections,
.Lo-loginForm .Lo-loginCenter .Lo-loginSections {
    display: grid;
    grid-template-columns: repeat(2, 50%);
    gap: 1rem;
    width: 100%;
    padding: 0 1.5rem;
}

@media(max-width: 500px){
    .Re-registerForm .Re-registerCenter .Re-registerSections,
    .Lo-loginForm .Lo-loginCenter .Lo-loginSections {
        grid-template-columns: repeat(1, 80%);
    }
}

@media(max-width: 350px){
    .Re-registerForm .Re-registerCenter .Re-registerSections,
    .Lo-loginForm .Lo-loginCenter .Lo-loginSections {
        grid-template-columns: repeat(1, 70%);
    }
}

.Re-registerForm .Re-registerCenter .Re-registerSections.close {
    display: none;
}

.Lo-loginForm .Lo-loginCenter .Lo-loginSections {
    padding: 0 2rem;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input,
.Lo-loginForm .Lo-loginCenter .Lo-userSection .Re-input {
    position: relative;
    border-radius: 1.1rem;
    border: 2px solid transparent;
    background: linear-gradient(var(--whiteColor), var(--whiteColor)) padding-box, linear-gradient(to right, var(--middleYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
    outline: none;
    color: var(--blackColor);
    width: 100%;
    min-height: 3rem;
    height: 5vh;
    max-height: 4.5rem;
    opacity: 0.5;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input.inputBio{
    min-height: 6rem;
    height: 100%;
    padding: 0.5rem 0;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input.inputBio textarea::-webkit-scrollbar{
    display: none;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input:hover,
.Lo-loginForm .Lo-loginCenter .Lo-userSection .Re-input:hover {
    opacity: 1;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input.input-full,
.Lo-loginForm .Lo-loginCenter .Lo-userSection .Re-input.input-full {
    grid-column: span 2;
}

@media(max-width: 500px){
    .Re-registerForm .Re-registerCenter .Re-registerSections .Re-input.input-full,
    .Lo-loginForm .Lo-loginCenter .Lo-userSection .Re-input.input-full {
        grid-column: span 1;
    }
}

.Lo-loginForm .Lo-loginCenter .Lo-userSection .Re-input .Re-userInput,
.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input .Re-userInput {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0.8rem 2rem 0.8rem 1.5rem;
    border-radius: 1rem;
    outline: none;
    border: none;
    color: var(--blackColor);
    resize: none;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input.inputDataNasc .Re-userInput{
    padding-right: 1rem;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input.inputDataNasc .Re-userInput::-webkit-calendar-picker-indicator {
    cursor: pointer;
    transform: translateY(2px);
}

.Lo-loginForm .Lo-loginCenter .Lo-userSection .Re-input .Re-fakePlaceholder,
.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input .Re-fakePlaceholder {
    position: absolute;
    color: var(--secondColor);
    font-weight: 400;
    cursor: text;
    transition: 0.25s, 0s color;
    font-size: 1rem;
    top: 50%;
    transform: translateY(-50%);
    left: 1rem;
    padding: 0 0.3rem;
    white-space: nowrap;
}

.Lo-loginForm .Lo-loginCenter .Lo-userSection .Re-input .Re-userInput:focus + .Re-fakePlaceholder,
.Lo-loginForm .Lo-loginCenter .Lo-userSection .Re-input .Re-fakePlaceholder.notEmpty,
.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input .Re-userInput:focus + .Re-fakePlaceholder,
.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input .Re-fakePlaceholder.notEmpty,
.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input.inputBio .Re-fakePlaceholder.notEmpty {
    top: -3px;
    font-size: 0.8rem;
    transition: 0.3s, 0s color;
    background: linear-gradient(var(--whiteColor) 70%, transparent 70%);
    font-weight: 500;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input.inputBio .Re-fakePlaceholder{
    top: 1.5rem;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input.inputBio .Re-charactersCounter{
    position: absolute;
    font-size: 0.65rem;
    bottom: 0.5rem;
    right: 0.5rem;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input.inputLocal .CEPResult{
    position: absolute;
    color: var(--thirdColor);
    cursor: text;
    transform: translateY(-50%);
    left: 1rem;
    padding: 0 0.3rem;
    white-space: nowrap;
    bottom: -15px;
    font-size: 0.8rem;
    background: linear-gradient(transparent 45%, var(--whiteColor) 45%);
    font-weight: 500;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input .Re-fakePlaceholder.notEmpty + span.userArroba {
    display: block;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input span.userArroba {
    display: none;
    position: absolute;
    top: 50%;
    left: 0.6rem;
    transform: translateY(-50%);
    color: var(--grayColor);
    font-size: 0.85rem;
    margin-bottom: 2px;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input .errorIcon {
    display: none;
    font-size: 0.8rem;
    color: var(--redColor);
    position: absolute;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: +1;
    cursor: pointer;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input.inputDataNasc .errorIcon{
    right: 2.5rem;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input.inputBio .errorIcon{
    top: 1.5rem;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input .errorMessageContainer {
    position: absolute;
    top: 112%;
    right: 0;
    width: fit-content;
    height: fit-content;
    word-wrap: break-word;
    padding: 1rem;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border: 1px solid transparent;
    gap: 1rem;
    background: linear-gradient(var(--whiteColor), var(--whiteColor)) padding-box, linear-gradient(var(--middleYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
    border-radius: 1rem;
    box-shadow: 0 2px 6px 0px #00000010;
    cursor: pointer;
    font-size: 0.8rem;
    z-index: +2;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input.inputBio .errorMessageContainer{
    top: 30%;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input .errorMessageContainer .errorMessageContent {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    white-space: wrap;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-input .errorMessageContainer .errorMessageContent .mainError {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-start;
    align-items: flex-start;
    color: var(--redColor);
}

.Lo-loginForm .Lo-loginCenter .Re-input.Lo-loginAssistants {
    position: relative;
    width: 200%;
    background: transparent;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 0rem 0 1rem;
    font-size: 0.7rem;
    margin-top: -1.3rem;
    color: var(--blackColor);
    gap: 0.4rem;
    border: none;
    opacity: 1;
}

.Lo-loginForm .Lo-loginCenter .Lo-loginAssistants .Lo-rememberMe {
    display: flex;
    gap: 5px;
    white-space: nowrap;
}

.Lo-loginForm .Lo-loginCenter .Lo-loginAssistants .Lo-rememberMe input {
    background: linear-gradient(var(--whiteColor) 8%, #80752350 16%, #03718050 45%, #a3155f50 75%, #80752350 85%);
}

.Lo-loginForm .Lo-loginCenter .Lo-loginAssistants .Lo-forgetPassword {
    text-decoration: none;
    color: var(--blackColor);
    white-space: nowrap;
}

.Re-registerForm .Re-registerCenter .Re-accountInformations .Re-themeInfo {
    width: fit-content;
    height: fit-content;
}

.Re-registerForm .Re-registerCenter .Re-accountInformations .Re-themeInfo p {
    font-weight: 400;
    line-height: 2.5rem;
    font-size: 1rem;
}

.Re-registerForm .Re-registerCenter .Re-accountInformations .Re-themeInfo .Re-themeOptions {
    display: flex;
    gap: 1.5rem;
    font-size: 0.8rem;
    padding-left: 1rem;
}

.Re-registerForm .Re-registerCenter .Re-accountInformations .Re-themeInfo .Re-themeOptions input {
    transform: translateY(1px);
    cursor: pointer;
    appearance: none;
    background-color: var(--whiteColor);
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 100%;
    border: none;
    box-shadow: 0 0 0 1px var(--whiteColor), 0 0 0 2px var(--blackColor);
}

.Re-registerForm .Re-registerCenter .Re-accountInformations .Re-themeInfo .Re-themeOptions input:checked {
    background-color: var(--secondColor);
    box-shadow: 0 0 0 2px var(--whiteColor), 0 0 0 3px var(--thirdColor);
}

.Re-registerForm .Re-registerCenter .Re-accountInformations .Re-themeInfo .Re-themeOptions label {
    margin-left: -0.8rem;
    cursor: pointer;
}

.Re-registerForm .Re-registerCenter .Re-accountInformations .Re-themeInfo .Re-themeOptions input#Re-yellowTheme:checked + label,
.Re-registerForm .Re-registerCenter .Re-accountInformations .Re-themeInfo .Re-themeOptions input#Re-blueTheme:checked + label,
.Re-registerForm .Re-registerCenter .Re-accountInformations .Re-themeInfo .Re-themeOptions input#Re-pinkTheme:checked + label {
    color: var(--thirdColor);
    font-weight: 500;
}

.Re-registerForm .Re-registerCenter .Re-userInformations .Re-input input#biografiaUsuario {
    position: relative;
    width: 25.3rem;
}

.Re-registerForm .Re-registerCenter .Re-registerResult {
    position: relative;
    display: flex;
    gap: 1rem;
    padding: 0 2rem;
}

@media(max-width: 500px){
    .Re-registerForm .Re-registerCenter .Re-registerResult {
        flex-direction: column;
    } 
}

.Re-registerForm .Re-registerCenter .Re-registerResult .Re-userInfoContainer{
    position: relative;
    width: 60%;
}

.Re-registerForm .Re-registerCenter .Re-registerSections .Re-addImageProfile{
    display: flex;
    position: relative;
    border-radius: 1.1rem;
    border: 2px solid transparent;
    background: linear-gradient(var(--secondColor), var(--secondColor)) padding-box, linear-gradient(to top, var(--pastelYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
    outline: none;
    color: var(--blackColor);
    min-width: 6rem;
    min-height: 6rem;
    width: 20vh;
    height: 20vh;
    max-height: 10rem;
    max-width: 10rem;
    border-radius: 100%;
    opacity: 1;
}

.Re-registerForm .Re-registerCenter .Re-registerResult .Re-addImageProfile .Re-imageProfileLabel {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 1;
}

@media(max-width: 768px){
    .Re-registerForm .Re-registerCenter .Re-registerResult .Re-addImageProfile {
        min-height: 7rem;
        min-width: 7rem;
        width: 25vw;
        height: 25vw;  
        max-height: 8em;
        max-width: 8rem;
    } 
}

.Re-registerForm .Re-registerCenter .Re-registerResult .Re-addImageProfile .Re-imageProfileLabel div{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 100%;
}

.Re-registerForm .Re-registerCenter .Re-registerResult .Re-addImageProfile .Re-userImage {
    object-fit: cover;
}

.Re-registerForm .Re-registerCenter .Re-registerResult .Re-addImageProfile input[type="file"] {
    display: none;
}

.Re-registerForm .Re-registerCenter .Re-registerResult .Re-addImageProfile .Re-addImageIcon {
    position: absolute;
    display: flex;
    right: 0rem;
    bottom: 0rem;
    width: 6vh;
    height: 6vh;
    max-width: 3.5rem;  
    max-height: 3.5rem;  
    background-color: var(--whiteColor);
    border-radius: 100%;
    font-size: 1.5rem;
    color: var(--grayColor);
}

@media(max-width: 768px){
    .Re-registerForm .Re-registerCenter .Re-registerResult .Re-addImageProfile .Re-addImageIcon {
        width: 7vh;
        height: 7vh; 
        max-width: 4rem;
        max-height: 4rem;  
    } 
}

.Re-registerForm .Re-registerCenter .Re-registerResult .Re-addImageProfile .errorIcon {
    display: none;
    font-size: 1rem;
    color: var(--redColor);
    position: absolute;
    right: -0.5rem;
    top: 0.5rem;
    transform: translateY(-50%);
    z-index: +1;
    cursor: pointer;
}

.Re-registerForm .Re-registerCenter .Re-registerResult .Re-addImageProfile .errorMessageContainer {
    position: absolute;
    top: 112%;
    right: 0;
    width: fit-content;
    height: fit-content;
    word-wrap: break-word;
    padding: 1rem;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    border: 1px solid transparent;
    gap: 1rem;
    background: linear-gradient(var(--whiteColor), var(--whiteColor)) padding-box, linear-gradient(var(--middleYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
    border-radius: 1rem;
    box-shadow: 0 2px 6px 0px #00000010;
    cursor: pointer;
    font-size: 0.8rem;
    z-index: +2;
}

.Re-registerForm .Re-registerCenter .Re-registerResult .Re-addImageProfile .errorMessageContainer .errorMessageContent {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 100%;
    white-space: wrap;
}

.Re-registerForm .Re-registerCenter .Re-registerResult .Re-userInfoContainer .Re-userInformations {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 0.9rem;
    line-height: 3vh;
    flex-wrap: wrap;
    width: 100%;
}

.Re-registerForm .Re-registerCenter .Re-registerResult .Re-userInfoContainer .Re-userInformations .Re-userInfo {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
    font-size: 0.9rem;
    word-break: break-all;
}

.Re-registerForm .Re-registerCenter .Re-registerResult .Re-userInfoContainer .Re-userInformations .Re-resultLable{
    position: relative;
    font-weight: 600;
    color: var(--thirdColor);
    word-break: keep-all;
    text-wrap: nowrap;
    width: fit-content;
}

.Re-registerResult .Re-addImageProfile {
    position: relative;
}

.Re-registerResult .Re-userImage {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.Re-registerResult .Re-userImage #imagesSelector {
    display: none;
}

.Re-registerResult .Re-userImage .Re-addImageIcon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
}

.Re-registerTerms{
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    width: 90%;
    max-width: 30rem;
    height: 70vh;
    max-height: 30rem;
    border-radius: 0.7rem;
    border: 1px solid transparent;
    background: linear-gradient(var(--whiteColor), var(--whiteColor)) padding-box, linear-gradient(var(--middleYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
    z-index: 999;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    box-shadow: 0 3px 9px 0px #00000040;
    overflow: hidden;
}

@media(max-width: 500px){
    .Re-registerTerms{
        width: 90%;
        height: 100%;
        border: none;
    } 
}

.Re-registerTerms.close{
    display: none;
}

.Re-registerTerms .Re-termsHeader {
    position: relative;
    display: flex;
    justify-content: space-evenly;
    width: 100%;
    height: 3.5rem;
    color: var(--grayColor);
    border-bottom: 1px solid var(--grayColor);
    padding-left: 1.8rem;
    gap: 1.5rem;
}

@media(max-width: 500px){
    .Re-registerTerms .Re-termsHeader {
        width: 100%;
        margin: auto;
    } 
}

.Re-termsHeader h4 {
    cursor: pointer;
    position: relative;
    display: flex;
    height: 100%;
    cursor: pointer;
}

.Re-termsHeader h4.active {
    color: var(--secondColor);
}

.Re-termsHeader .Re-termsSelector{
    position: absolute;
    width: 50%;
    height: 3px;
    bottom: -2px;
    background-color: var(--secondColor);
    border-radius: 1rem;
    transition: 0.2s ease;
    left: 0;
}

.Re-termsHeader .Re-usingTerms.active ~ .Re-termsSelector{
    transform: translateX(0);
    transition: 0.2s ease;
}

.Re-termsHeader .Re-privacyTerms.active ~ .Re-termsSelector{
    transform: translateX(100%);
    transition: 0.2s ease;
}

.Re-registerTerms .Re-termsPDF {
    position: relative;
    width: 90%;
    height: 35vh;
    padding: 1rem;
    background-color: #F8F8F8;
    border: 1px solid var(--grayColor);
    border-radius: 0.4rem;
    overflow: hidden; /* Adicionado para garantir que nada saia da área visível */
}

.Re-registerTerms .Re-usingTermsPDF,
.Re-registerTerms .Re-privacyTermsPDF {
    position: absolute; /* Ambos se posicionam dentro da div com position: relative */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.Re-registerTerms .Re-usingTermsPDF .embedPDF,
.Re-registerTerms .Re-privacyTermsPDF .embedPDF {
    width: 100%;
    height: 100%;
}

@media(max-width: 500px) {
    .Re-registerTerms .Re-termsPDF {
        width: 90%;
        height: 50vh;
    }
}


.Re-registerTerms .Re-termsCheckboxes{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.85rem;
}

.Re-registerTerms .Re-termsCheckboxes .Re-termsCheckbox{
    display: flex;
    flex-wrap: nowrap;
    width: fit-content;
    gap: 0.5rem;
    cursor: pointer;
}

.Re-registerTerms .Re-termsCheckboxes .Re-termsCheckbox label{
    width: fit-content;
    white-space: nowrap;
    cursor: pointer;
}

.Re-registerTerms .Re-termsCheckboxes .Re-termsCheckbox label a {
    color: var(--thirdColor);
    font-weight: 500;
    text-decoration: underline;
}

.Re-registerTerms .Re-termsButtons{
    position: relative;
    float: right;
    display: flex;
    gap: 1rem;
    padding: 0rem 1rem;
}

.Re-registerTerms .Re-termsButtons .confirmBtn{
    font-size: 1rem;
}

.Re-registerTerms .Re-termsButtons .Re-denyTermsBtn{
    color: var(--secondColor);
    cursor: pointer;
}

.Re-registerTerms .Re-termsButtons .Re-denyTermsBtn:hover{
    color: var(--grayColor);
}

.Lo-loginForm .Lo-loginBottom,
.Re-registerForm .Re-registerBottom {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    font-size: 0.8rem;
}

@media(max-width: 500px){
    .Lo-loginForm .Lo-loginBottom,
    .Re-registerForm .Re-registerBottom {
        transform: translateY(1rem);
    } 
}

.Re-registerForm .Re-registerBottom .confirmBtn,
.Lo-loginForm .Lo-loginBottom .confirmBtn {
    padding: 0;
    width: 8.5rem;
    height: 2.7rem;
    display: flex;
    font-size: 1.3rem;
    box-shadow: 0 2px 4px 0px #00000040;
    transition: 0s background-color;
}

.Re-registerForm .Re-registerBottom .confirmBtn.close {
    display: none;
}

.Lo-loginForm .Lo-loginBottom .Lo-goRegister a,
.Re-registerForm .Re-registerBottom .Re-goLogin a {
    position: relative;
    color: var(--secondColor);
    font-weight: 700;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    margin: 0;
    display: none;
}


/*====================================================================================================
======================================= PÁGINA INICIAL (HOME) ========================================
====================================================================================================*/

.Ho-Main {
    position: relative;
    width: 100vw;
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    height: 88vh;
}

.Ho-Main .timeline {
    position: relative;
    border: 1px solid var(--grayColor);
    border-bottom: none;
    border-top: none;
    width: 50vw;
    min-height: 90vh;
    height: 100%;
    overflow: auto;
}

.Ho-Main .timeline::-webkit-scrollbar {
    display: none;
}

.Ho-postFilter {
    position: sticky;
    top: 0;
    width: 100%;
    height: 4.5rem;
    display: flex;
    justify-content: space-evenly;
    border-bottom: 1px solid var(--grayColor);
    background-color: var(--whiteColor);
    z-index: 2;
}

.Ho-postFilter h1 {
    display: flex;
    position: relative;
    height: 100%;
    width: 13rem;
    font-size: 1.3rem;
    cursor: pointer;
    color: var(--grayColor);
    transition: 0.2s, color 0.15s;
}

.Ho-postFilter h1.active {
    color: var(--secondColor);
    transform: scale(1.25);
    letter-spacing: 1px;
    transition: 0.2s;
}

.Ho-post {
    position: relative;
    width: 100%;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1rem;
    cursor: pointer;
}

.Ho-post:hover{
    background-color: var(--translucidColor);
}

.Ho-post .postDate {
    position: absolute;
    right: 20%;
    top: 1.5rem;
    color: var(--thirdColor);
    font-size: 0.75rem;
}

.postOwnerImage {
    position: relative;
    min-width: 3rem;
    min-height: 3rem;
    width: 100%;
    height: 100%;
    max-width: 3rem;
    max-height: 3rem;
    border: 1px solid var(--thirdColor);
    border-radius: 100%;
    overflow: hidden;
    background-color: var(--secondColor);
}

.postOwnerImage img {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
}

.Ho-post .postContent {
    position: relative;
    height: 100%;
    width: 100%;
}

.Ho-post .postContent .postTimelineTop {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-top: 0.1rem;
}

.Ho-post .postContent .postTimelineTop .postUserNames {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: 0.5rem;
    align-items: flex-end;
    justify-content: flex-start;
    max-width: 90%;
}

.Ho-post .postContent .postTimelineTop .postUserNames p:first-of-type {
    font-size: 1em;
    font-weight: bolder;
}

.Ho-post .postContent .postTimelineTop .postUserNames p:last-of-type {
    color: var(--grayColor);
    font-size: 0.7rem;
}

.Ho-post .postContent .postTimelineTop .postInfo{
    display: flex;
    gap: 7rem;
}

.Ho-post .postInfo .postMoreButton{
    position: relative;
    font-size: 1.2rem;
    color: var(--grayColor);
    float: right;
    transition: 0.2s;
    cursor: pointer;
}

.Ho-post .postInfo .postMoreButton:hover {
    color: var(--secondColor);
}

.Ho-post .postInfo .postMoreButton .postFunctionsModal {
    position: absolute;
    right: 0;
    top: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--whiteColor);
    padding: 10px;
    border-radius: 1rem;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03);
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1;
}

.Ho-post .postInfo .postMoreButton .postFunctionsModal.close{
    display: none;
}

.Ho-post .postInfo .postMoreButton .postFunctionsModal:after{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    border: 1px solid transparent;
    background: linear-gradient(var(--whiteColor), var(--whiteColor)) padding-box, linear-gradient(to bottom, var(--middleYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
    opacity: 0.4;
}

.Ho-post .postInfo .postMoreButton .postFunctionsModal button{
    display: flex;
    justify-content: flex-start;
    gap: 0.5rem;
    border-radius: 0.5rem;
    width: 11rem;
    height: 1.7rem;
    padding: 0 0.6rem;
    background-color: #80808025;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--blackColor);
    outline: none;
    border: none;
    z-index: +5;
    cursor: pointer;
}

.Ho-post .postContent .postTexts {
    position: relative;
    font-size: 0.85rem;
    display: flex;
    width: 100%;
    gap: 0.3rem;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
}

.Ho-post .postContent .postTexts .postTitle {
    font-weight: bolder;
    font-size: 0.9rem;
    word-break: break-all;
}

.Ho-post .postContent .postTexts .postFullText{
    word-break: break-all;
}

.Ho-post .postContent .postImageContainer {
    min-width: 15rem;
    width: 25vw;
    height: 15vw;
    max-width: 20rem;
    min-height: 9rem;
    max-height: 12rem;
    overflow: hidden;
    position: relative;
}

.Ho-post .postContent .postImageContainer .postImage {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.Ho-post .postContent .postTimelineBottom {
    width: 50%;
    position: relative;
    height: 2.5rem;
    display: flex;
    justify-content: space-between;
    gap: 10rem;
    color: var(--grayColor);
}

.Ho-post .postContent .postTimelineBottom button {
    display: flex;
    font-size: 0.8rem;
    gap: 0.3rem;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    background-color: transparent;
    cursor: pointer;
    border: none;
    color: var(--grayColor);
    transition: 0.1s;
}

.Ho-post .postContent .postTimelineBottom button:hover {
    color: var(--secondColor);
}

.Ho-post .postContent .postTimelineBottom button.postLiked{
    color: var(--secondColor);
}

.endTimeline{
    position: relative;
    display: flex;
    text-align: center;
    font-size: 1.2rem;
    color: var(--secondColor);
    letter-spacing: 2px;
    cursor: default;
    padding: 1.5rem;
}

.Ho-Main .asideLeft {
    display: block;
    width: 20vw;
    height: 90vh;
}

.Ho-Main .asideRight {
    position: relative;
    width: 30vw;
    height: 90vh;
    padding: 1rem;
}

@media (max-width: 1024px) {
    .Ho-Main .asideLeft{
        display: none;
    }
    
    .Ho-Main .timeline {
        width: 70vw;
    }

    .Ho-Main .asideRight{
        display: none;
    }
}

@media (max-width: 768px) {
    .Ho-Main .timeline {
        width: 100vw;
    }
}

.asideRight .searchBar {
    position: relative;
    display: flex;
    background-color: #e4e4e4;
    border-radius: 100rem;
    width: 100%;
    height: 2rem;
    min-width: 13.5rem;
    padding: 0 0.6rem 0 0.6rem;
    gap: 0.4rem;
    opacity: 0.6;
    font-size: 0.8rem;
    color: var(--grayColor);
    border: 1px solid var(--grayColor);
    left: 50%;
    transform: translateX(-50%);
}

.asideRight .searchBarInput {
    background-color: transparent;
    outline: none;
    border: none;
    color: var(--blackColor);
    width: 100%;
    font-weight: 400;
    font-size: 0.9rem;
}

.asideRight .searchBar .bi-search {
    font-size: 0.8rem;
}

.asideRight .searchBar .bi-search,
.asideRight .searchBarInput::placeholder {
    color: var(--blackColor);
}

.asideRight .asideRightFooter {
    position: absolute;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-size: 0.6rem;
    font-weight: 700;
    width: 30vw;
    height: 3.5rem;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

.asideRight .asideRightFooter div{
    position: relative;
    display: flex;
    justify-content: space-evenly;
    gap: 1rem;
    width: 100%;
}

.asideRight .asideRightFooter a {
    color: var(--blackColor);
    text-decoration: none;
    white-space: nowrap;
}

.asideRight .asideRightFooter a:hover {
    text-decoration: underline;
    color: var(--thirdColor);
}

.asideRight .asideRightFooter h4 {
    color: var(--thirdColor);
    white-space: nowrap;
}

.asideRight .asideSectionTitle{
    margin: 1rem;
}
.asideRight .mySuggestions .sugesttionsAside{
    border: 1px solid var(--grayColor);
    border-radius: 1rem;
}

.asideRight .mySuggestions .sugesttionsAside .suggestionListItem{
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 1rem;
}

.asideRight .mySuggestions .sugesttionsAside .suggestionListItem .suggestionInfos{
    position: relative;
    display: flex;
    gap: 0.5rem;
}

.asideRight .mySuggestions .sugesttionsAside .suggestionListItem .suggestionInfos .suggestionImageProfile{
    position: relative;
    width: 3rem;
    height: 3rem;
    background-color: var(--secondColor);
    border: 1px solid var(--thirdColor);
    border-radius: 100%;
    display: flex;
    overflow: hidden;
}

.asideRight .mySuggestions .sugesttionsAside .suggestionListItem .suggestionInfos .suggestionImageProfile img{
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.asideRight .mySuggestions .sugesttionsAside .suggestionListItem .suggestionInfos .suggestUserNames .userName{
    font-size: 1rem;
    font-weight: bold;
}

.asideRight .mySuggestions .sugesttionsAside .suggestionListItem .suggestionInfos .suggestUserNames .userNick{
    font-size: 0.7rem;
    font-weight: normal;
    color: var(--grayColor);
}

/*====================================================================================================
========================================= PÁGINA DE PEDIDOS ==========================================
====================================================================================================*/

.Au-main {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.Au-allAuxilios {
    position: relative;
    column-gap: 1rem;
    padding: 1rem;
    column-count: 3;
}

@media (min-width: 2560px) {
    .Au-allAuxilios {
        column-count: 4;
    }
}

@media (max-width: 1440px) {
    .Au-allAuxilios {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .Au-allAuxilios {
        column-count: 1;
    }
}

.Ho-auxilioCard {
    position: relative;
    margin-bottom: 1rem;
    break-inside: avoid;
    padding: 1.5rem 1rem;
    border-radius: 1rem;
    border: 1px solid var(--secondColor);
    display: inline-block;
}

.Ho-auxilioCard .postDate {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    color: var(--thirdColor);
    font-size: 0.75rem
}

.Ho-auxilioCard .postContent {
    position: relative;
    height: 100%;
    width: 100%;
}

.Ho-auxilioCard .postOwnerImage {
    position: relative;
    min-width: 3rem;
    min-height: 3rem;
    width: 100%;
    height: 100%;
    max-width: 3rem;
    max-height: 3rem;
    border: 1px solid var(--thirdColor);
    border-radius: 100%;
    overflow: hidden;
    background-color: var(--secondColor);
}

.Ho-auxilioCard .postOwnerImage img {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
}

.Ho-auxilioCard .postContent .postTimelineTop {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.1rem;
}

.Ho-post .postContent .postTimelineTop .postUserNames {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: 0;
    column-gap: 0.5rem;
    align-items: flex-start;
    justify-content: flex-start;
}

.Ho-auxilioCard .postContent .postTexts {
    padding: 0.5rem;
}

.Ho-auxilioCard .postContent .postTimelineBottom {
    position: relative;
    width: 100%;
    height: 2.5rem;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 0.2rem;
    color: var(--grayColor);
}

.Ho-auxilioCard .postTimelineBottom .Au-openAuxilio {
    font-size: 0.8rem;
    right: 0;
    padding: 0.3rem 1.3rem 0.3rem 1.3rem;
}

.Ho-auxilioCard .postContent .postTimelineBottom .Au-openAuxilio {
    position: relative;
    display: flex;
    padding: 0.5rem 1rem;
    border: 2px solid transparent;
    border-radius: 100rem;
    color: var(--whiteColor);
    font-weight: 900;
    font-size: 0.8rem;
    cursor: pointer;
    transition: 0.2s;
    background-color: var(--secondColor);
}

.Ho-auxilioCard .postContent .postTimelineBottom .Au-openAuxilio:hover {
    transition: 0.3s;
    background-color: var(--whiteColor);
    color: var(--secondColor);
    border-color: var(--secondColor);
    transform: scale(1);
}

.endTimeline{
    position: relative;
    display: flex;
    text-align: center;
    font-size: 1.2rem;
    color: var(--secondColor);
    letter-spacing: 2px;
    cursor: default;
    padding: 1.5rem;
}

.modalSection .Au-auxilioModal {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.7rem;
    width: 45vw;
    height: 90vh;
    background-color: var(--whiteColor);
    padding: 0.5rem 1rem 2rem 1rem;
    border-radius: 1rem;
    border: 2px solid var(--firstColor);
    overflow-x: hidden;
    overflow-y: auto;
}

.modalSection .Au-auxilioModal.close {
    display: none;
}

.modalSection .Au-auxilioModal .Au-modalHeader {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-left: 1.5rem;
    height: 3rem;
    background-color: var(--whiteColor);
}

.modalSection .Au-auxilioModal .Au-modalHeader .postInfo{
    position: relative;
    display: flex;
    gap: 0.5rem;
}

.modalSection .Au-auxilioModal .Au-modalHeader .auxilioDate {
    color: var(--blackColor);
    font-size: 0.8rem;
}

.modalSection .Au-auxilioModal .Au-modalHeader .postInfo .closeModal {
    font-size: 2rem;
    color: var(--grayColor);
    transition: 0.2s;
    font-weight: bolder;
    cursor: pointer;
}

.modalSection .Au-auxilioModal .Au-modalHeader .postInfo .closeModal:hover {
    color: var(--secondColor);
    transform: scale(1.2);
    transition: 0.2s;
}

.modalSection .Au-auxilioModal .Au-modalHeader .postInfo .concludeAuxilio i{
    font-size: 1.1rem;
    margin-right: -3px;
    margin-left: -2px;
}

.modalSection .Au-auxilioModal .Au-auxilioUser {
    position: relative;
    display: flex;
    gap: 1rem;
}

.modalSection .Au-auxilioModal .Au-auxilioUser .postOwnerImage {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    min-width: 3.5rem;
    min-height: 3.5rem;
    max-width: 3.5rem;
    max-height: 3.5rem;
    float: left;
    border-radius: 100%;
    overflow: hidden;
}

.modalSection .Au-auxilioModal .Au-auxilioUser img {
    position: relative;
    width: 100%;
    object-fit: cover;
}

.modalSection .Au-auxilioModal .Au-auxilioUser .postOwner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.modalSection .Au-auxilioModal .Au-auxilioUser .postOwner .postOwnerName {
    font-size: 1rem;
    font-weight: bolder;
    display: flex;
    align-items: flex-end;
    gap: 0.3rem;
}

.modalSection .Au-auxilioModal .Au-auxilioUser .postOwner .postOwnerName .postOwnerUser {
    font-size: 0.7rem;
    font-weight: normal;
    color: var(--grayColor);
}

.modalSection .Au-auxilioModal .Au-auxilioUser .postOwner .followersNumber{
    display: flex;
    gap: 0.3rem;
    font-size: 0.8rem;
}

.modalSection .Au-auxilioModal .Au-auxilioUser .postOwner .followersNumber .followers{
    font-weight: bolder;
    color: var(--thirdColor);
}

.modalSection .Au-auxilioModal .Au-auxilioUser .confirmBtn {
    padding: 0.4rem 1rem;
    font-size: 1rem;
}

.modalSection .Au-auxilioModal .Au-postExtraInfos {
    display: flex;
    justify-content: flex-start;
    column-gap: 2rem;
    padding-left: 1rem;
}

.modalSection .Au-auxilioModal .Au-postExtraInfos .Au-extraInfos {
    position: relative;
    display: flex;
    gap: 0.5rem;
    font-size: 0.8rem;
}

.modalSection .Au-auxilioModal .Au-postExtraInfos .Au-extraInfos img{
    width: 1.5rem;
}

.modalSection .Au-auxilioModal .auxilioTitle {
    position: relative;
    width: 100%;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
    color: var(--thirdColor);
}

.modalSection .Au-auxilioModal .Au-textPost {
    position: relative;
    width: 100%;
    height: fit-content;
    font-size: 0.8rem;
    text-align: justify;
}

.modalSection .Au-auxilioModal .postsImages {
    position: relative;
    display: flex;
    width: 100%;
    height: 15rem;
    background-color: #d1d1d1;
    border: 1px solid var(--grayColor);
    border-radius: 0.5rem;
    cursor: pointer;
}

.modalSection .Au-auxilioModal .postsImages .auxilioImg{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 0.5rem;
}

.modalSection .Au-auxilioModal .postsImages img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modalSection .Au-auxilioModal .postInteractions {
    position: relative;
    display: flex;
    width: 100%;
    gap: 0.5rem;
    color: var(--grayColor);
}

.modalSection .Au-auxilioModal .postInteractions h3 {
    color: var(--secondColor);
}

.modalSection .Au-auxilioModal .postInteractions button {
    position: relative;
    display: flex;
    font-size: 0.8rem;
    gap: 0.3rem;
    cursor: pointer;
    display: flex;
    gap: 0.5rem;
    cursor: pointer;
    border: none;
    color: var(--grayColor);
    transition: 0.1s;
}

.modalSection .Au-auxilioModal .postInteractions button:hover {
    color: var(--secondColor);
}

.modalSection .Au-auxilioModal .postInteractions button.postLiked{
    color: var(--secondColor);
}

.modalSection .Au-auxilioModal .postInteractions span {
    height: 1px;
    width: 3rem;
    background-color: var(--grayColor);
}

.modalSection .Au-auxilioModal .postInteractions span:nth-of-type(2) {
    width: 100%;
}

.modalSection .Au-auxilioModal .Ho-postSomething.postAuxilioComent {
    position: relative;
    display: flex;
    flex-direction: column;
    border: none;
    margin-bottom: 1rem;
}

.modalSection .Au-auxilioModal .Ho-postSomething.postAuxilioComent .Ho-postTop {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.5rem;
    width: 100%;
}

.modalSection .Au-auxilioModal .Ho-postSomething.postAuxilioComent .Ho-postTop .Ho-userProfileImage {
    position: relative;
    min-width: 3.5rem;
    min-height: 3.5rem;
    width: 3.5rem;
    height: 3.5rem;
    max-width: 3.5rem;
    max-height: 3.5rem;
    border: 1px solid var(--secondColor);
    border-radius: 100%;
    overflow: hidden;
}

.modalSection .Au-auxilioModal .Ho-postSomething.postAuxilioComent .Ho-postTop .Ho-userProfileImage img {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
}

.modalSection .Au-auxilioModal .Ho-postSomething.postAuxilioComent .Ho-postBottom .confirmBtn{
    display: flex;
    margin: 0.5rem 0;
    transform: scale(0.9);
}

.modalSection .Au-auxilioModal .Ho-auxiliosComments{
    position: relative;
    width: 100%;
}

.modalSection .Au-auxilioModal .Ho-auxiliosComments .Ho-post{
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.asideRight .myAuxilios{
    position: relative;
    width: 100%;
}

.asideRight .myAuxilios .auxiliosAside{
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    color:var(--whiteColor);
    width: 100%;
}

.asideRight .myAuxilios .auxiliosAside .auxilioListItem{
    position: relative;
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    padding: 0.65rem 5rem 0.65rem 1.5rem;
    background: var(--secondColor);
    border-radius: 1.5rem;
    cursor: pointer;
    width: 100%;
}

.asideRight .myAuxilios .auxilioListItem.hidden{
    display: none;
}

.asideRight .myAuxilios .auxilioListItem .estado{
    position: absolute;
    right: 0;
    display: flex;
    justify-content: right;
    background: var(--whiteColor);
    padding: 0.2rem 1rem;
    width: 6rem;
    color:var(--secondColor);
    font-weight: bold;
    border-radius: 1rem;
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

.asideRight .myAuxilios .auxilioListItem .titulo{
    position: relative;
    width: 80%;
    text-overflow: ellipsis;
    overflow: hidden;
}

#verTodosBtn{
    position: relative;
    text-decoration: none;
    font-weight: 500;
    color: var(--secondColor);
    font-size: 0.9rem;
    text-align: right;
    transform: translateY(1rem);
    cursor: pointer;
    z-index: 1;
}

.asideRight .myAuxilios .auxilioListItem .comentarios{
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
}

/*====================================================================================================
====================================== PÁGINA DE CONFIGURAÇÕES =======================================
====================================================================================================*/


.Se-settingsCenter {
    position: relative;
    border: 1px solid var(--grayColor);
    border-bottom: none;
    border-top: none;
    width: 40vw;
    height: 90vh;
}

.Se-asideLeft {
    position: relative;
    width: 20vw;
    height: 100%;
    overflow-y: hidden;
}

.Ho-Main .Se-asideLeft .backCells {
    top: -2rem;
}

.Ho-Main .Se-asideRight {
    position: relative;
    width: 40vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    overflow-x: hidden;
}

.Se-settingsCenter .Se-centerHeader {
    position: relative;
    display: flex;
    gap: 1.5rem;
    justify-content: flex-start;
    padding: 2rem 1.5rem;
}

.Se-settingsCenter .Se-centerHeader .bi-arrow-left-circle {
    font-size: 1.5rem;
    color: var(--grayColor);
    transition: 0.2s transform;
    cursor: pointer;
}

.Se-settingsCenter .Se-centerHeader .bi-arrow-left-circle:hover {
    transform: scale(1.1);
    color: var(--secondColor);
    transition: 0.2s transform;
}

.Se-settingsCenter .Se-centerHeader h1 {
    font-size: 1.8rem;
}

.Se-settingsCenter .Se-centerSections .Se-sectionTitle {
    display: flex;
    justify-content: space-between;
    padding: 0 2rem;
    border-top: 1px solid var(--grayColor);
    width: 100%;
    height: 4rem;
    cursor: pointer;
    color: var(--blackColor);
    text-decoration: none;
}

.Se-settingsCenter .Se-centerSections .Se-sectionTitle.active,
.Se-settingsCenter .Se-centerSections .Se-sectionTitle:hover {
    border-color: var(--secondColor);
    color: var(--secondColor);
    font-weight: 700;
}

.Se-settingsCenter .Se-centerSections .Se-sectionTitle:nth-child(3){
    display: none;
}

.Se-settingsCenter .Se-centerSections .Se-sectionTitle:last-of-type {
    border-bottom: 1px solid var(--grayColor);
}

.Se-settingsCenter .Se-centerSections .Se-sectionTitle div {
    display: flex;
    gap: 1rem;
}

.Se-settingsCenter .Se-centerSections .Se-sectionTitle div img.pageIcon {
    width: 1.2rem;
}

.Se-settingsCenter .Se-centerSections .Se-sectionTitle.active div img.pageIcon,
.Se-settingsCenter .Se-centerSections .Se-sectionTitle:hover div img.pageIcon {
    width: 1.3rem;
}

.Se-settingsCenter .Se-centerSections .Se-sectionTitle.active .bi {
    transform: rotate(0);
}

.Se-settingsCenter .Se-centerSections .Se-sectionTitle .bi-chevron-right {
    transform: rotate(90deg);
}

.Se-settingsCenter .Se-centerSections .Se-sectionTitle .bi-box-arrow-up-right {
    font-size: 0.8rem;
}

body.P-theme .Se-settingsCenter .Se-centerSections .Se-sectionTitle.active div img.pageIcon,
body.P-theme .Se-settingsCenter .Se-centerSections .Se-sectionTitle:hover div img.pageIcon {
    filter: brightness(0) saturate(100%) invert(42%) sepia(61%) saturate(1820%) hue-rotate(302deg) brightness(87%) contrast(85%);
}

body.B-theme .Se-settingsCenter .Se-centerSections .Se-sectionTitle.active div img.pageIcon,
body.B-theme .Se-settingsCenter .Se-centerSections .Se-sectionTitle:hover div img.pageIcon {
    filter: brightness(0) saturate(100%) invert(63%) sepia(81%) saturate(331%) hue-rotate(139deg) brightness(83%) contrast(87%);
}

body.Y-theme .Se-settingsCenter .Se-centerSections .Se-sectionTitle.active div img.pageIcon,
body.Y-theme .Se-settingsCenter .Se-centerSections .Se-sectionTitle:hover div img.pageIcon {
    filter: brightness(0) saturate(100%) invert(66%) sepia(48%) saturate(459%) hue-rotate(16deg) brightness(97%) contrast(85%);
}

.Se-asideRight .Se-subSection {
    position: relative;
    display: none;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem;
    height: 100%;
    width: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0 2rem 2rem 2rem;
}

.Se-asideRight .Se-subSection.active {
    display: flex;
}

.Se-asideRight .Se-subSection .Se-sectionHeader {
    position: relative;
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    padding-top: 2rem;
    width: 100%;
}

.Se-asideRight .Se-subSection .Se-sectionHeader .pageIcon {
    width: 1.5rem;
}

body.P-theme .Se-asideRight .Se-subSection .Se-sectionHeader .pageIcon {
    filter: brightness(0) saturate(100%) invert(42%) sepia(61%) saturate(1820%) hue-rotate(302deg) brightness(87%) contrast(85%);
}

body.B-theme .Se-asideRight .Se-subSection .Se-sectionHeader .pageIcon {
    filter: brightness(0) saturate(100%) invert(63%) sepia(81%) saturate(331%) hue-rotate(139deg) brightness(83%) contrast(87%);
}

body.Y-theme .Se-asideRight .Se-subSection .Se-sectionHeader .pageIcon {
    filter: brightness(0) saturate(100%) invert(66%) sepia(48%) saturate(459%) hue-rotate(16deg) brightness(97%) contrast(85%);
}

.Se-asideRight .Se-accountInformations .Se-userInfo {
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
}

.Se-asideRight .Se-accountInformations .Se-userInfo .Re-addImageProfile .Re-imageProfileLabel {
    position: relative;
    display: flex;
    width: 7rem;
    height: 7rem;
    border-radius: 100%;
    border: 2px solid var(--thirdColor);
    overflow: hidden;
}

.Se-asideRight .Se-accountInformations .Se-userInfo .Re-addImageProfile .Re-userImage {
    object-fit: cover;
}

.Se-asideRight .Se-accountInformations .Se-userInfo .Re-addImageProfile input[type="file"] {
    display: none;
}

.Se-asideRight .Se-accountInformations .Se-userInfo .Re-addImageProfile .Re-addImageIcon {
    position: absolute;
    display: flex;
    right: 0rem;
    bottom: 0rem;
    width: 2.3rem;
    height: 2.3rem;
    background-color: var(--whiteColor);
    border-radius: 100%;
    font-size: 1.5rem;
    color: var(--grayColor);
    cursor: pointer;
}

.Se-asideRight .Se-accountInformations .Se-userInfo .Re-userInfoContainer .Re-userInformations {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-start;
    align-items: flex-start;
    font-size: 0.8rem;
    width: 15rem;
    line-height: 2rem;
}

.Se-asideRight .Se-accountInformations .Se-userInfo .Re-userInfoContainer .Re-userInformations .Re-infoLabel {
    font-weight: 500;
    font-size: 0.95rem;
}

.Se-asideRight .Se-accountInformations .Se-userInfo .Re-addImageProfile {
    position: relative;
}

.Se-asideRight .Se-accountInformations .Se-userInfo .Re-userImage {
    width: 100%;
    height: 100%;
    object-fit: fill;
}

.Se-asideRight .Se-accountInformations .Se-userInfo .Re-userImage .Re-addImageIcon {
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
}

.Se-asideRight .Se-accountInformations .Se-editInfo {
    position: relative;
    width: 100%;
    margin: 1rem 0;
}

.Se-asideRight .Se-accountInformations .Se-editInfo .Se-userInput {
    position: relative;
    padding: 0.7rem 0rem 0.5rem 1rem;
    border-radius: 0.7rem;
    border: 1px solid var(--blackColor);
    min-height: 2.5rem;
    cursor: pointer;
}

.Se-asideRight .Se-accountInformations .Se-editInfo .Se-userInput label {
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    background-color: var(--whiteColor);
    padding: 0 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
}

.Se-asideRight .Se-accountInformations .Se-editInfo .Se-userInput input,
.Se-asideRight .Se-accountInformations .Se-editInfo .Se-userInput textarea,
.Se-asideRight .Se-accountInformations .Se-editInfo .Se-userInput select {
    position: relative;
    width: 100%;
    border: none;
    outline: none;
    cursor: pointer;
    padding-right: 2rem;
    resize: none;
}

.Se-asideRight .Se-accountInformations .Se-editInfo .Se-userInput textarea::-webkit-scrollbar {
    display: none;
}

.Se-asideRight .Se-accountInformations .Se-editInfo .Se-userInput .Se-editIcon {
    position: absolute;
    right: 1rem;
    font-size: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondColor);
}

.errorMessageContainer {
    margin-bottom: 1rem;
    display: flex;
    clear: both;
    width: 100%;
}

.errorMessageContent {
    color: var(--redColor);
    font-size: 14px;
    line-height: 1;
}

.Se-asideRight .Se-accountInformations .Re-themeInfo {
    display: flex;
    justify-content: flex-start;
    gap: 1.2rem;
}

.Se-asideRight .Se-accountInformations .Re-themeInfo p {
    font-weight: 500;
}

.Se-asideRight .Se-accountInformations .Re-themeInfo .Re-themeOptions {
    position: relative;
    display: flex;
    gap: 0.5rem;
    font-size: 0.8rem;
    transform: translateY(1px);
}

.Se-asideRight .Se-accountInformations .Re-themeInfo .Re-themeOptions input {
    cursor: pointer;
    appearance: none;
    background-color: var(--whiteColor);
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 100%;
    border: none;
    box-shadow: 0 0 0 1px var(--whiteColor), 0 0 0 2px var(--blackColor);
}

.Se-asideRight .Se-accountInformations .Re-themeInfo .Re-themeOptions input:checked {
    background-color: var(--secondColor);
    box-shadow: 0 0 0 2px var(--whiteColor), 0 0 0 3px var(--thirdColor);
}

.Se-asideRight .Se-accountInformations .Re-themeInfo .Re-themeOptions label {
    cursor: pointer;
    margin-right: 0.4rem;
}

.Se-asideRight .Se-accountInformations .Re-themeInfo .Re-themeOptions input:checked+label {
    color: var(--thirdColor);
    font-weight: 500;
}

.Se-asideRight .Se-accountInformations .Se-dateCriation {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    display: flex;
    flex-wrap: nowrap;
    gap: 0.5rem;
    width: fit-content;
    font-size: 0.8rem;
}

.Se-asideRight .Se-accountInformations .Se-accountDate {
    color: var(--thirdColor);
    font-weight: 600;
}

.Se-asideRight .Se-accountInformations .confirmBtn{
    position: fixed;
    bottom: 1.5vh;
    right: 1.5vh;
    padding: 0.7rem 1rem;
}

.Se-asideRight .Se-childInformations .Se-userChild {
    position: relative;
    width: 100%;
    height: fit-content;
}

.Se-asideRight .Se-childInformations .Se-userChild .Se-childHeader {
    position: relative;
    display: flex;
    justify-content: flex-start;
    gap: 2rem;
    padding: 1rem 0;
    width: 100%;
}

.Se-asideRight .Se-childInformations .Se-userChild .Se-childHeader img {
    width: 1.5rem;
}

body.P-theme .Se-asideRight .Se-childInformations .Se-userChild .Se-childHeader img {
    filter: brightness(0) saturate(100%) invert(42%) sepia(61%) saturate(1820%) hue-rotate(302deg) brightness(87%) contrast(85%);
}

body.B-theme .Se-asideRight .Se-childInformations .Se-userChild .Se-childHeader img {
    filter: brightness(0) saturate(100%) invert(63%) sepia(81%) saturate(331%) hue-rotate(139deg) brightness(83%) contrast(87%);
}

body.Y-theme .Se-asideRight .Se-childInformations .Se-userChild .Se-childHeader img {
    filter: brightness(0) saturate(100%) invert(66%) sepia(48%) saturate(459%) hue-rotate(16deg) brightness(97%) contrast(85%);
}

.Se-asideRight .Se-childInformations .Se-userChild .Se-childHeader input {
    position: relative;
    font-size: 1.1rem;
    font-weight: 600;
    width: 100%;
    padding-right: 2.5rem;
    border: none;
    outline: none;
    cursor: pointer;
}

.Se-asideRight .Se-childInformations .Se-userChild .Se-childHeader .Se-editIcon {
    position: absolute;
    right: 1rem;
    color: var(--secondColor);
    font-size: 0.8rem;
}

.Se-asideRight .Se-childInformations .Se-childInputs {
    position: relative;
    padding-left: 2rem;
}

.Se-asideRight .Se-childInformations .Se-childInputs .Se-childInfoContainer {
    position: relative;
    display: flex;
    justify-content: flex-start;
    gap: 1rem;
    font-size: 0.8rem;
    transform: translateY(2px);
}

.Se-asideRight .Se-childInformations .Se-childInputs .Se-childInfoContainer p {
    font-size: 0.9rem;
    font-weight: 500;
}

.Se-asideRight .Se-childInformations .Se-childInputs .Se-childInfoContainer .Re-sexOptions {
    position: relative;
    display: flex;
    gap: 0.7rem;
}

.Se-asideRight .Se-childInformations .Se-childInputs .Se-childInfoContainer .Re-sexOptions input {
    transform: translateY(1px);
    cursor: pointer;
    appearance: none;
    background-color: var(--whiteColor);
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 100%;
    border: none;
    box-shadow: 0 0 0 1px var(--whiteColor), 0 0 0 2px var(--blackColor);
}

.Se-asideRight .Se-childInformations .Se-childInputs .Se-childInfoContainer .Re-sexOptions input:checked {
    background-color: var(--secondColor);
    box-shadow: 0 0 0 2px var(--whiteColor), 0 0 0 3px var(--thirdColor);
}


.Se-asideRight .Se-childInformations .Se-childInputs .Se-childInfoContainer .Re-sexOptions label {
    cursor: pointer;
    margin-right: 0.4rem;
    font-size: 0.8rem;
}

.Se-asideRight .Se-childInformations .Se-childInputs .Se-childInfoContainer .Re-sexOptions input:checked+label {
    font-weight: 500;
}

.Se-asideRight .Se-childInformations .Se-childInputs .Se-childInfoContainer .Se-childInfo {
    font-size: 0.8rem;
    font-weight: 400;
}

.Se-asideRight .Se-childInformations .Se-childInputs .Se-childInfoContainer select {
    position: relative;
    width: 97%;
    border: none;
    transform: translateY(1px);
}

.Se-asideRight .Se-childInformations .Se-childBottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    cursor: pointer;
    padding: 1rem 0;
    font-weight: 600;
}

.Se-asideRight .Se-childInformations .Se-childBottom .Se-deleteChild {
    color: var(--redColor);
}

.Se-asideRight .Se-childInformations .Se-childBottom .confirmBtn {
    background-color: var(--secondColorLowOpacity);
    padding: 0.5rem 1.2rem 0.5rem 1.2rem;
    font-size: 0.7rem;
}

.Se-asideRight .Se-childInformations .confirmBtn {
    position: fixed;
    bottom: 1.5vh;
    right: 1.5vh;
    padding: 0.7rem 1rem;
}

.Se-asideRight .Se-childInformations .Se-myChildBtn {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    align-self: center;
    width: 80%;
    height: 2.75rem;
    background-color: var(--whiteColor);
    border: var(--secondColor) 2px solid;
    border-radius: 1.5rem;
    position: relative;
    padding: 0;
    overflow: hidden;
    transition: height 0.4s ease-out;
}

.Se-asideRight .Se-childInformations .Se-myChildBtn.expanded {
    height: auto;
    min-height: 275px;
}

.Se-asideRight .Se-childInformations .Se-myChildBtn .childHeader {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    background-color: var(--secondColor);
    width: 100%;
    margin: 0;
    position: absolute;
    top: 0; 
    left: 0; 
    padding: 0.75rem 0;
    border-radius: 1.25rem;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    color: var(--whiteColor);
    cursor:pointer;
}

.Se-asideRight .Se-childInformations .Se-myChildBtn .childHeader .childIcon{
    filter: brightness(0) saturate(100%) invert(98%) sepia(100%) saturate(10%) hue-rotate(183deg) brightness(102%) contrast(100%);
    position: absolute;
    left:2.5rem;
}

.Se-asideRight .Se-childInformations .Se-myChildBtn .childHeader .childName{
    font-weight: bold;
}

.Se-asideRight .Se-childInformations .Se-myChildBtn .childHeader .deleteChildButton{
    background-color: transparent; 
    border: none; 
    color: var(--whiteColor); 
    padding: 0; 
    cursor: pointer; 
    font-size: 1.5rem;
    font-size: bold;
    position: absolute;
    right:2.5rem;
}

.Se-asideRight .Se-childInformations .Se-myChildBtn .childData {
    display: none; 
}

.Se-asideRight .Se-childInformations .Se-myChildBtn.expanded .childData {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 2.5rem; 
    gap:0.25rem;
    width: 100%;
}

.Se-asideRight .Se-childInformations .Se-myChildBtn.expanded .childData.closed {
    display: none;
}

.Se-asideRight .Se-childInformations .Se-myChildBtn .childData .childSpecificData{
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    position: relative;
    left:1rem;
    gap: 1rem; 
}

.Se-asideRight .Se-childInformations .Se-myChildBtn .childData .editarFilho{
    display: flex;
    background-color: var(--secondColor);
    padding: 0.45rem 1rem;
    border: 2px solid transparent;
    border-radius: 2rem;
    color: var(--whiteColor);
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
    align-self: flex-end;
    position:relative;
    right:1rem;
    justify-content: center;
    align-items: center;
}

.Se-asideRight .Se-childInformations .Se-myChildBtn .editChildForm {
    display: none;
}

.Se-asideRight .Se-childInformations .Se-myChildBtn.expanded .editChildForm.open {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
    top: 1rem;
    left: 1rem;
    gap:0.5rem;
    height:auto;
    width:100%;
}

.Se-asideRight .Se-childInformations .Se-myChildBtn.expanded .editChildForm.open .childNameEditor,
.Se-asideRight .Se-childInformations .Se-myChildBtn.expanded .editChildForm.open .childSexEditor,
.Se-asideRight .Se-childInformations .Se-myChildBtn.expanded .editChildForm.open .childBirthEditor,
.Se-asideRight .Se-childInformations .Se-myChildBtn.expanded .editChildForm.open .childButtons{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
}

.Se-asideRight .Se-childInformations .Se-myChildBtn.expanded .editChildForm.open .childDisabilityEditor{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.Se-asideRight .Se-security ul {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 0 2rem;
}

.Se-asideRight .Se-security ul li{
    position: relative;
    width: 100%;
}

.Se-asideRight .Se-security ul li form {
    position: relative;
    gap: 1rem;
    width: 100%;
}

.Se-asideRight .Se-security ul li form h4{
    margin-bottom: 2rem;
}

.Se-asideRight .Se-security .Se-editPassword .Se-passwordInputs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.7rem;
    width: 100%;
}

.Se-asideRight .Se-security .Se-editPassword .Se-passwordInputs .Se-passInput {
    position: relative;
    padding: 0.7rem 0.5rem 0.5rem 1rem;
    width: 100%;
    min-height: 2.5rem;
    height: 5vh;
    max-height: 4rem;
    border-radius: 0.7rem;
    border: 1px solid var(--blackColor);
}

.Se-asideRight .Se-security .Se-editPassword .Se-passwordInputs .Se-passInput input {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
}

.Se-asideRight .Se-security .Se-editPassword .Se-passwordInputs .Se-passInput label {
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    background-color: var(--whiteColor);
    padding: 0 1rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.Se-asideRight .Se-security .Se-editPassword .Se-passwordInputs .Se-passInput .Se-forgotPassword {
    position: absolute;
    right: 0;
    bottom: -1rem;
    font-size: 0.75rem;
    cursor: pointer;
}

.Se-asideRight .Se-security .Se-editPhoneNumber .Se-phoneInput{
    position: relative;
    padding: 0.7rem 0.5rem 0.5rem 1rem;
    width: 100%;
    min-height: 2.5rem;
    height: 5vh;
    max-height: 4rem;
    border-radius: 0.7rem;
    border: 1px solid var(--blackColor);
}

.Se-asideRight .Se-security .Se-editPhoneNumber .Se-phoneInput input {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
}

.Se-asideRight .Se-security .Se-editPhoneNumber .Se-phoneInput label {
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    background-color: var(--whiteColor);
    padding: 0 1rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.Se-asideRight .Se-security .Se-editPhoneNumber .Se-phoneInput .Se-editIcon {
    position: absolute;
    right: 1rem;
    font-size: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondColor);
}

.Se-asideRight .Se-security .Se-editPassword .confirmBtn,
.Se-asideRight .Se-security .Se-editPhoneNumber .confirmBtn,
.Se-asideRight .Se-security .Se-editPixKey .confirmBtn {
    padding: 0.5rem 1.3rem 0.5rem 1.3rem;
    font-size: 0.8rem;
    float: inline-end;
    margin: 0 0.5rem 0 1rem;
}

.Se-asideRight .Se-security .Se-editPixKey .Se-pixInput{
    position: relative;
    padding: 0.7rem 0.5rem 0.5rem 1rem;
    width: 100%;
    min-height: 2.5rem;
    height: 5vh;
    max-height: 4rem;
    border-radius: 0.7rem;
    border: 1px solid var(--blackColor);
}

.Se-asideRight .Se-security .Se-editPixKey .Se-pixInput input {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
}

.Se-asideRight .Se-security .Se-editPixKey .Se-pixInput label {
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    background-color: var(--whiteColor);
    padding: 0 1rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.Se-asideRight .Se-security .Se-editPixKey .Se-pixInput .Se-editIcon {
    position: absolute;
    right: 1rem;
    font-size: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--secondColor);
}

.Se-asideRight .Se-security .Se-reportPrivacy {
    display: flex;
    flex-direction: column;
}

.Se-asideRight .Se-security .Se-reportPrivacy h4 {
    display: flex;
    align-self: flex-start;
    margin-bottom: 1.5rem;
}

.Se-asideRight .Se-security .Se-reportPrivacy .relatoAnonimo {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    border: 1px solid #000;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}

.Se-asideRight .Se-security .Se-reportPrivacy .raHeader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
    gap:0.25rem;
}

.Se-asideRight .Se-security .Se-reportPrivacy .raHeader .raTitle {
    font-size: 1.2rem;
    font-weight: 500;
    flex-grow: 1;
}

.Se-asideRight .Se-security .Se-reportPrivacy .raHeader .raIdentify {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 1rem;
}
.Se-asideRight .Se-security .Se-reportPrivacy .raHeader .raIdentify label{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.Se-asideRight .Se-security .Se-reportPrivacy .raHeader input[type="checkbox"] {
    width: 16px;
    height: 16px;
}

.Se-asideRight .Se-security .Se-reportPrivacy .raHeader i {
    font-size: 0.75rem;
    color: #888;
    cursor: pointer;
}

.Se-asideRight .Se-security .Se-reportPrivacy .raContentContainer {
    font-size: 1rem;
    line-height: 1.25;
    width:100%;
}

.Se-asideRight .Se-security .Se-reportPrivacy .raContentContainer .raContent {
    margin-top: 0;
    margin-bottom: 10px;
    flex-wrap: wrap;
    white-space: pre-wrap;
    word-wrap: break-word;
}

.Se-asideRight .Se-security .Se-reportPrivacy button{
    align-self: flex-end;
}

.Se-asideRight .Se-notifications .notificacaoForm{
    position: relative;
    width: 100%;
}

.Se-asideRight .Se-notifications .notificacaoForm .notificationsBlock {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 1rem;
}

.Se-asideRight .Se-notifications .notificacaoForm .notificationsBlock .notificationsOptions{
    padding-left: 1rem;
    display: flex;
    gap: 1rem;
}

.Se-asideRight .Se-notifications .notificacaoForm .notificationsBlock .notificationsOptions .notificationsCheckbox {
    position: relative;
    display: flex;
    width: 2rem;
    height: 1.2rem;
}

.Se-asideRight .Se-notifications .notificacaoForm .slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    border: 1px solid var(--grayColor);
    transition: 0.3s;
    border-radius: 1rem;
}

.Se-asideRight .Se-notifications .notificacaoForm .slider:before {
    position: absolute;
    content: "";
    height: 1rem;
    width: 1rem;
    left: 1px;
    margin: auto 0;
    background-color: var(--whiteColor);
    transition: 0.3s;
    border-radius: 50%;
}

.Se-asideRight .Se-notifications .notificacaoForm input:checked + .slider {
    background-color: var(--secondColor);
    border-color: var(--thirdColor);
}

.Se-asideRight .Se-notifications .notificacaoForm input:checked + .slider:before {
    transform: translateX(80%);
}

.Se-asideRight .Se-notifications .notificacaoForm .confirmBtn{
    padding: 0.5rem 1.3rem 0.5rem 1.3rem;
    font-size: 0.8rem;
    float: inline-end;
    margin: 0 0.5rem 0 1rem;
}

.Se-asideRight .Se-security .Se-accountDelete{
    position: fixed;
    bottom: 1.5vh;
    right: 1.5vh;
    padding: 0.7rem 1rem;
    background-color: var(--redColor);
}

.Se-asideRight .Se-security .Se-accountDelete:hover{
    border-color: var(--redColor);
    background-color: var(--whiteColor);
    color: var(--redColor);
}

/*====================================================================================================
===================================== MODAIS DAS CONFIGURAÇÕES =======================================
====================================================================================================*/

.modalSection {
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    display: flex;
    background-color: #00000060;
    backdrop-filter: blur(3px);
    z-index: 999;
}

.modalSection.close {
    display: none;
}

.pageModal {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--whiteColor);
    padding: 2rem;
    border-radius: 1rem;
    border: 2px solid var(--firstColor);
    z-index: 999;
}

.modalSection .pageModal .modalHeader {
    position: relative;
    display: flex;
    gap: 1.5rem;
    justify-content: flex-start;
    width: 100%;
}

.modalSection .pageModal .modalHeader .bi-arrow-left-circle {
    font-size: 1.4rem;
    color: var(--grayColor);
    transition: 0.2s transform;
    cursor: pointer;
}

.modalSection .pageModal .modalHeader .bi-arrow-left-circle:hover {
    transform: scale(1.1);
    color: var(--secondColor);
    transition: 0.2s transform;
}

.modalSection .pageModal .modalHeader h1 {
    font-size: 1.8rem;
}

.modalSection .Se-addNewChildModal .Se-childInputs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.modalSection .Se-addNewChildModal .Se-childInputs .Se-childInput {
    position: relative;
    padding: 0.7rem 0.5rem 0.5rem 1.5rem;
    width: 22rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    border: 1px solid var(--blackColor);
}

.modalSection .Se-addNewChildModal .Se-childInputs .Se-childInput input,
.modalSection .Se-addNewChildModal .Se-childInputs .Se-childInput select {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
}

.modalSection .Se-addNewChildModal .Se-childInputs .Se-childInput .pageIcon {
    position: absolute;
    right: 0.65rem;
    width: 0.9rem;
    filter: brightness(0) saturate(100%)
}

.modalSection .Se-addNewChildModal .Se-childInputs .Se-childInput label {
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    background-color: var(--whiteColor);
    padding: 0 1rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.modalSection .Se-addNewChildModal .Se-childInputs .Re-childBoxSex {
    position: relative;
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    transform: translateY(2px);
    margin-bottom: 1rem;
}

.modalSection .Se-addNewChildModal .Se-childInputs .Re-childBoxSex p {
    font-size: 1rem;
    font-weight: 600;
    color: var(--secondColor);
}

.modalSection .Se-addNewChildModal .Se-childInputs .Re-childBoxSex .Re-sexOptions {
    position: relative;
    display: flex;
    gap: 0.7rem;
}

.modalSection .Se-addNewChildModal .Se-childInputs .Re-childBoxSex .Re-sexOptions input {
    transform: translateY(1px);
    cursor: pointer;
    appearance: none;
    background-color: var(--whiteColor);
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 100%;
    border: none;
    box-shadow: 0 0 0 1px var(--whiteColor), 0 0 0 2px var(--blackColor);
}

.modalSection .Se-addNewChildModal .Se-childInputs .Re-childBoxSex .Re-sexOptions input:checked {
    background-color: var(--secondColor);
    box-shadow: 0 0 0 2px var(--whiteColor), 0 0 0 3px var(--thirdColor);
}


.modalSection .Se-addNewChildModal .Se-childInputs .Re-childBoxSex .Re-sexOptions label {
    cursor: pointer;
    margin-right: 0.4rem;
}

.modalSection .Se-addNewChildModal .Se-childInputs .Re-childBoxSex .Re-sexOptions input:checked+label {
    font-weight: 600;
}

.modalSection .Se-addNewChildModal .Se-modalSubmit {
    top: 10%;
}
.modalSection .Se-addNewChildModal .errorMessageContainer{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}
.modalSection .Se-addNewChildModal .errorMessageContainer .errorMessageContent {
    color: var(--redColor);
    font-size: 12px;
}

.modalSection .Se-deleteAccountModal {
    border-color: var(--redColor);
}

.modalSection .Se-deleteAccountModal .Se-deleteInputs {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.modalSection .Se-deleteAccountModal .Se-deleteInputs .Se-deleteInput {
    position: relative;
    padding: 0.7rem 0.5rem 0.5rem 1rem;
    width: 22rem;
    height: 2.5rem;
    border-radius: 0.7rem;
    border: 1px solid var(--blackColor);
}

.modalSection .Se-deleteAccountModal .Se-deleteInputs .Se-deleteInput input {
    width: 100%;
    height: 100%;
    outline: none;
    border: none;
}

.modalSection .Se-deleteAccountModal .Se-deleteInputs .Se-deleteInput label {
    position: absolute;
    top: -0.5rem;
    left: 1rem;
    background-color: var(--whiteColor);
    padding: 0 1rem;
    font-size: 0.8rem;
    font-weight: 500;
}

.modalSection .Se-deleteAccountModal .Se-deleteInputs .Se-deleteInput:first-of-type {
    display: flex;
    pointer-events: none;
}

.modalSection .Se-deleteAccountModal .Se-deleteInputs .Se-deleteInput:first-of-type::placeholder {
    color: var(--redColor);
    font-size: 2rem;
    text-align: center;
}

.modalSection .Se-deleteAccountModal .Se-deleteInputs .Se-deleteInput:first-of-type .Re-fakePlaceholder {
    background-color: var(--whiteColor);
}

.modalSection .Se-deleteAccountModal .Se-deleteInputs .Se-deleteInput:first-of-type .Re-fakePlaceholder img {
    width: 0.7rem;
}

.modalSection .Se-deleteAccountModal .confirmBtn {
    background-color: var(--redColor);
    opacity: 0.5;
}

.modalSection .Se-deleteAccountModal .confirmBtn:hover {
    background-color: var(--redColor);
    opacity: 1;
}

.modalSection .Ho-postSomething {
    padding: 2.5rem 1rem 0 0.8rem;
}

.Ho-postSomething .closeModal {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    font-size: 1.6rem;
    color: var(--grayColor);
    transition: 0.2s transform;
    cursor: pointer;
}

.Ho-postSomething .closeModal:hover {
    transform: scale(1.2);
    color: var(--secondColor);
    transition: 0.2s transform;
}

.Ho-postSomething .Ho-postTop .Ho-postTitle {
    position: relative;
    margin-bottom: 0.5rem;
    color: var(--grayColor);
    width: 100%;
    display: flex;
    gap: 0.5rem;
}

.Ho-postSomething .Ho-postTop .Ho-postTitle label {
    font-weight: 600;
    font-size: 0.9rem;
}

.Ho-postSomething .Ho-postTop .Ho-postTitle .Ho-postTitleInput {
    position: relative;
    outline: none;
    border: none;
    border-bottom: 1px solid var(--grayColor);
    background-color: transparent;
    font-size: 0.9rem;
    width: 100%;
    padding-right: 3rem;
}

.Ho-postSomething .Ho-postTop .Ho-postTitle .Ho-titleCharacters {
    position: absolute;
    right: 0.5rem;
    bottom: 0.1rem;
    color: var(--grayColor);
    font-size: 0.65rem;
}

.Ho-postSomething .Ho-postBottom .Ho-extraInputs .Ho-maxColabsInput {
    cursor: text;
    margin-left: 1rem;
}

.Ho-postSomething .Ho-postBottom .Ho-extraInputs .Ho-maxColabsInput input {
    width: 3rem;
    outline: none;
    font-size: 1rem;
    border: none;
    overflow: visible;
}

.Ho-postSomething .Ho-postBottom .Ho-extraInputs .Ho-maxColabsInput input:focus {
    border-bottom: 1px solid var(--grayColor);
}

.Ho-postSomething .Ho-postBottom .Ho-extraInputs .Ho-maxColabsInput input::placeholder {
    color: var(--blackColor);
    font-size: 1rem;
    overflow: visible;
}

.modalSection {
    left: 0;
    cursor: default;
}

.Re-registerForm .Re-registerCenter .Re-registerChild .Re-childInformations .Re-childInfo{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

.modalBack{
    position: fixed;
    width: 100vw;
    height: 100vh;
    top: 0;
    display: flex;
    background-color: #00000060;
    backdrop-filter: blur(3px);
    z-index: +999;
}

.modalBack.close {
    display: none;
}

.Re-registerChild {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background-color: var(--whiteColor);
    padding: 3rem;
    border-radius: 1rem;
    border: 2px solid var(--firstColor);
    height: fit-content;
    width: fit-content;
}

.Re-registerChild .closeChildModal:first-of-type{
    position: absolute;
    font-size: 2rem;
    top: 1rem;
    right: 1rem;
    cursor: pointer;
    transition: 0.3s;
}

.Re-registerChild .closeChildModal:first-of-type{
    color: var(--secondColor);
    transition: 0.3s;
    transform: scale(1.2);
}

.Re-registerChild .Re-addChildBtn,
.Re-registerChild .Re-myChildBtn{
    position: relative;
    display: flex;
    background: linear-gradient(to right, var(--pastelYellowColor) 0%, var(--pastelBlueColor) 50%, var(--pastelPinkColor) 100%);
    border-radius: 100rem;
    width: 23rem;
    height: 2.3rem;
    box-shadow: 0 3px 3px 0px #00000020;
    font-weight: 900;
    font-size: 1.2rem;
    text-shadow: 0 0 3px #00000050;
    color: var(--whiteColor);
    cursor: pointer;
    padding: 1rem;
    transition: 0.2s;
}

.Re-registerChild .Re-myChildBtn{
    justify-content: space-between;
    background: var(--secondColor);
}

.Re-registerChild .Re-myChildBtn:hover,
.Re-registerChild .Re-addChildBtn:hover{
    transform: scale(1.06);
    transition: 0.2s;
}

.Re-registerChild .Re-myChildBtn img{
    width: 1.3rem;
    filter: brightness(0) saturate(100%) invert(98%) sepia(100%) saturate(10%) hue-rotate(183deg) brightness(102%) contrast(100%);
}

.Re-registerChild .deleteChildButton{
    border: none;
    outline: none;
    background-color: transparent;
    cursor: pointer;
    color: var(--whiteColor);
    font-size: 1.5rem;
    transition: 0.2s;
    transform: translateY(1px);
}

.Re-registerChild .deleteChildButton:hover{
    transform: scale(1.2) translateY(2px);
}

.Re-registerChild p{
    position: relative;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}


.Re-registerChild .Re-myChild i{
    font-size: 1.5rem;
}

.Re-registerChild .Re-addChildBox{
    position: relative;
    border: 1px solid var(--blackColor);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.3rem;
    border: 2px solid transparent;
    background: linear-gradient(var(--whiteColor), var(--whiteColor)) padding-box, linear-gradient(to right, var(--middleYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
    border-radius: 1rem;
    width: 26rem;   
    height: 18rem;
    box-shadow: 0 4px 16px 0px #00000020;
    z-index: +1;
    overflow: hidden;
}

.Re-registerChild .Re-addChildBox.close{
    display: none;
}

.Re-registerChild .Re-addChildBox .Re-childBoxHeader{
    position: relative;
    display: flex;
    width: 100%;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid transparent;
    background: linear-gradient(to right, var(--pastelYellowColor), var(--pastelBlueColor), var(--pastelPinkColor)) padding-box, linear-gradient(to right, var(--middleYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
}

.Re-registerChild .Re-addChildBox .Re-childBoxHeader i{
    color: var(--whiteColor);
    font-weight: 900;
    font-size: 1.5rem;
    width: 1.5rem;
}

.Re-registerChild .Re-addChildBox .Re-childBoxHeader .toggleAddChildModal{
    font-size: 2rem;
    cursor: pointer;
}

.Re-registerChild .Re-addChildBox .Re-childBoxHeader .Re-childName{
    display: flex;
    position: relative;
    width: 100%;
    height: 100%;
    border: none;
    outline: none;
    font-size: 1.1rem;
    font-weight: 550;
    color: var(--whiteColor);
    background-color: transparent;
    text-shadow: 0 0 3px #00000050;
    text-align: center;
}

.Re-registerChild .Re-addChildBox .Re-childBoxHeader .Re-childName::placeholder{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    font-size: 1.3rem;
    font-weight: 550;
    color: var(--whiteColor);
    text-shadow: 0 0 3px #00000050;
}

.Re-registerChild .Re-addChildBox .Re-childBoxSex{
    display: flex;
    gap: 0.8rem;
    width: fit-content;
    height: fit-content;
    padding: 1.2rem 0;
}

.Re-registerChild .Re-addChildBox .Re-childBoxSex p{
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--secondColor);
}

.Re-registerChild .Re-addChildBox .Re-childBoxSex .Re-sexOptions{
    display: flex;
    gap: 1rem;
    font-size: 0.8rem;
    padding-left: 1rem;
}

.Re-registerChild .Re-addChildBox .Re-childBoxSex .Re-sexOptions label{
    margin-left: -0.8rem;
    white-space: nowrap;
}

.Re-registerChild .Re-addChildBox .Re-childBoxInputs{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.Re-registerChild .Re-addChildBox .Re-childBoxInputs .Re-input{
    position: relative;
    border: 1px solid transparent;
    background: linear-gradient(var(--whiteColor), var(--whiteColor)) padding-box, linear-gradient(to right, var(--middleYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
    border-radius: 10rem;
    width: 22rem;
    height: 2.5rem;
    padding-right: 1.4rem;
}

.Re-registerChild .Re-addChildBox .Re-childBoxInputs .Re-input input,
.Re-registerChild .Re-addChildBox .Re-childBoxInputs .Re-input select{
    position: relative;
    background-color: transparent;
    outline: none;
    border: none;
    width: 100%;
    height: 100%;
    padding-left: 1.5rem;
    border-radius: 10rem;
}

.Re-registerChild .Re-addChildBox .Re-childBoxInputs .Re-input label{
    position: absolute;
    top: -10px;
    left: 1rem;
    font-size: 0.8rem;
    background-color: var(--whiteColor);
    padding: 0 0.5rem;
    color: var(--secondColor);
    font-weight: 500;
}

.Re-registerChild.Re-addChildBox .Re-childBoxInputs .Re-input .Re-inputIcon{
    position: absolute;
    font-size: 0.8rem;
    right: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
}

.Re-registerChild .Re-confirmAddChild {
    position: absolute;
    display: flex;
    bottom: 1rem;
    right: 2rem;
    height: 2rem;
    width: 6rem;    
    padding: 0;
    color: var(--whiteColor);
    background-color: var(--secondColor);
    border: 2px solid var(--secondColor);
    border-radius: 10rem;
    transition: 0.2s;
}

.Re-registerChild .Re-confirmAddChild:hover {
    color: var(--secondColor);
    background-color: var(--whiteColor);
    border-color: var(--secondColor);
    transition: 0.2s;
}

/*====================================================================================================
========================================= PÁGINA DE PERFIL ==========================================
====================================================================================================*/

.Pe-main .timeline .Pe-userProfileSection{
    position: relative;
    border-bottom: 1px solid transparent;
    background: linear-gradient(var(--whiteColor), var(--whiteColor)) padding-box, linear-gradient(to right, var(--middleYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
    padding: 3rem 1rem 1rem 3rem;
}

.Pe-main .timeline .Pe-userProfileSection .bi-arrow-left-circle {
    position: absolute;
    top: 1rem;
    left: 1rem;
    font-size: 1.5rem;
    color: var(--grayColor);
    transition: 0.2s transform;
    cursor: pointer;
}

.Pe-main .timeline .Pe-userProfileSection .bi-arrow-left-circle:hover {
    color: var(--secondColor);
    transition: 0.2s transform;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-lastTimeOnline{
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    color: var(--grayColor);
    font-size: 0.8rem;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-lastTimeOnline span{
    position: relative;
    background: linear-gradient(to right, var(--middleBlueColor), var(--middlePinkColor), var(--middleYellowColor));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations{
    position: relative;
    width: fit-content;
    display: flex;
    gap: 1.5rem;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations .Pe-userImage {
    position: relative;
    min-width: 6rem;
    min-height: 6rem;
    width: 10vw;
    height: 10vw;
    max-width: 9rem;
    max-height: 9rem;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations .Pe-userImage .Pe-userProfileImage {
    position: relative;
    width: 100%;
    height: 100%;
    border: 2px solid var(--thirdColor);
    border-radius: 100%;
    overflow: hidden;
    background-color: var(--secondColor);
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations .Pe-userImage .Pe-userProfileImage img {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer;
    object-fit: cover;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations .Pe-userTextInformations {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    white-space: nowrap;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations .Pe-userTextInformations div{
    display: flex;
    gap: 0.5rem;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations .Pe-userTextInformations .Pe-userChildren .Pe-childPortrait{
    position: relative;
    display: flex;
    background-color: var(--secondColor);
    border-radius: 100%;
    width: 2.15rem;
    height: 2.15rem;
    border: 1px solid transparent;
    background: linear-gradient(var(--secondColor), var(--secondColor)) padding-box, linear-gradient(to top, var(--middleYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
    cursor: pointer;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations .Pe-userTextInformations .Pe-userChildren .Pe-childPortrait .Pe-childIcon{
    position: relative;
    width: 100%;
    height: 100%;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7484%) hue-rotate(165deg) brightness(103%) contrast(104%);
    border: 2px solid var(--whiteColor);
    border-radius: 100%;
    padding: 0.3rem;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations .Pe-userTextInformations .Pe-userNames{
    display: block;
    text-align: start;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations .Pe-userTextInformations .Pe-userNames .Pe-userRealName{
    font-size: 1.5rem;
    width: fit-content;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations .Pe-userTextInformations .Pe-userNames .Pe-userNickname {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--grayColor);
    width: fit-content;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations .Pe-userTextInformations .Pe-userNumbers{
    column-gap: 5vh;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations .Pe-userTextInformations .Pe-userNumbers p{
    font-weight: normal;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations .Pe-userTextInformations .Pe-userNumbers .Pe-followingNumbers .Pe-following{
    color: var(--darkYellowColor);
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations .Pe-userTextInformations .Pe-userNumbers .Pe-postsNumber .Pe-posts{
    color: var(--darkBlueColor);
}

.Pe-main .timeline .Pe-userProfileSection .Pe-userInformations .Pe-userTextInformations .Pe-userNumbers .Pe-followersNumber .Pe-followers{
    color: var(--darkPinkColor);
}

.Pe-main .timeline .Pe-userProfileSection .Pe-sectionBottom{
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    width: 100%;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-sectionBottom .Pe-userBiography{
    position: relative;
    padding: 0.5rem 1rem 1rem 1rem;
    width: 100%;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-sectionBottom .Pe-userBiography p{
    font-weight: 500;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-sectionBottom .Pe-userBiography span{
    padding: 0.5rem;
    font-size: 0.8rem;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-sectionBottom .Pe-editAccount,
.Pe-main .timeline .Pe-userProfileSection .Pe-sectionBottom .Pe-followUser{
    display: flex;
    min-width: 10rem;
    max-width: 10rem;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.Pe-main .timeline .Pe-userProfileSection .Pe-sectionBottom .Pe-editAccount p,
.Pe-main .timeline .Pe-userProfileSection .Pe-sectionBottom .Pe-followUser p{
    width: fit-content;
    word-break: keep-all;
}

.Pe-main .timeline .Pe-profilePostType{
    position: relative;
    width: 100%;
    display: flex;
    column-gap: 1rem;
    row-gap: 0.5rem;
    justify-content: space-evenly;
    padding: 0 1rem;
    min-height: 4rem;
    height: fit-content;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.Pe-main .timeline .Pe-profilePostType .Pe-searchBar {
    position: absolute;
    left: 2rem;
    top: 1rem;
    display: flex;
    align-items: center;
    background-color: #e4e4e4;
    border-radius: 100rem;
    width: 90%;
    height: 2.5rem;
    padding: 0.5rem 0.8rem 0.5rem 2.8rem;
    gap: 0.4rem;
    opacity: 0.8;
    font-size: 1rem;
    color: var(--grayColor);
    transition: width 0.3s ease, padding 0.3s ease, opacity 0.3s ease;
}

.Pe-main .timeline .Pe-profilePostType .Pe-searchBar.close {
    width: 2.5rem;
    cursor: pointer;
    padding: 0;
}

.Pe-main .timeline .Pe-profilePostType .Pe-searchBar .Pe-searchBarInput {
    flex: 1;
    background-color: transparent;
    outline: none;
    border: none;
    color: var(--blackColor);
    width: 100%;
    font-weight: 400;
    font-size: 0.9rem;
}

.Pe-main .timeline .Pe-profilePostType .Pe-searchBar.close .Pe-searchBarInput {
    display: none;
}

.Pe-main .timeline .Pe-profilePostType .Pe-searchBar .bi-search{
    position: absolute;
    left: 0.8rem;
    z-index: +10;
    cursor: pointer;
}

.Pe-main .timeline .Pe-profilePostType .Pe-searchBar .bi-arrow-counterclockwise{
    position: absolute;
    right: -1.8rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--blackColor);
}

.Pe-main .timeline .Pe-profilePostType .Pe-searchBar.close .bi-arrow-counterclockwise{
    display: none;
}

.Pe-main .timeline .Pe-profilePostType .Pe-postType{
    position: relative;
    display: flex;
    gap: 1rem;
    height: 3rem;
    color: var(--grayColor);
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
}

.Pe-main .timeline .Pe-profilePostType .Pe-postType.active,
.Pe-main .timeline .Pe-profilePostType .Pe-postType:hover{
    color: var(--secondColor);
}

.Pe-main .timeline .Pe-profilePostType .Pe-postType span{
    position: absolute;
    width: 70%;
    height: 1px;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    transition: 0.2s;
}

.Pe-main .timeline .Pe-profilePostType .Pe-postType.active span,
.Pe-main .timeline .Pe-profilePostType .Pe-postType:hover span{
    background-color: var(--secondColor);
}

.Pe-main .timeline .Pe-profilePostType .Pe-postType .Pe-postTypeIcon{
    width: 1.5rem;
    transition: 0.15s;
}

body.Y-theme .Pe-main .timeline .Pe-profilePostType .Pe-postType.active .Pe-postTypeIcon,
body.Y-theme .Pe-main .timeline .Pe-profilePostType .Pe-postType:hover .Pe-postTypeIcon{
    filter: brightness(0) saturate(100%) invert(66%) sepia(48%) saturate(459%) hue-rotate(16deg) brightness(97%) contrast(85%);
    transition: 0.15s;
}

body.B-theme .Pe-main .timeline .Pe-profilePostType .Pe-postType.active .Pe-postTypeIcon,
body.B-theme .Pe-main .timeline .Pe-profilePostType .Pe-postType:hover .Pe-postTypeIcon{
    filter: brightness(0) saturate(100%) invert(63%) sepia(81%) saturate(331%) hue-rotate(139deg) brightness(83%) contrast(87%);
    transition: 0.15s;
}

body.P-theme .Pe-main .timeline .Pe-profilePostType .Pe-postType.active .Pe-postTypeIcon,
body.P-theme .Pe-main .timeline .Pe-profilePostType .Pe-postType:hover .Pe-postTypeIcon{
    filter: brightness(0) saturate(100%) invert(42%) sepia(61%) saturate(1820%) hue-rotate(302deg) brightness(87%) contrast(85%);
    transition: 0.15s;
}

.Pe-allPosts.active{
    display: flex;
}

.Pe-allPosts{
    display: none;
    flex-direction: column;
}

.Pe-postsAuxilios.active{
    display: block;
    position: relative;
    column-gap: 1rem;
    padding: 1rem;
    column-count: 3;
}

@media (min-width: 2560px) {
    .Pe-postsAuxilios.active {
        column-count: 2;
    }
}

@media (max-width: 1024px) {
    .Pe-postsAuxilios.active {
        column-count: 2;
    }
}

@media (max-width: 600px) {
    .Pe-postsAuxilios.active {
        column-count: 1;
    }
}

/*========================================================================================================
========================================= PÁGINA DE COMENTÁRIOS ==========================================
=========================================================================================================*/

.Co-Main .timeline .Co-mainPost {
    position: sticky;
    top: 0;
    border-bottom: 1px solid var(--grayColor);
    background-color: var(--whiteColor);
    z-index: +1;
}

.Co-Main .timeline .Co-mainPost .Co-timelineHeader {
    position: relative;
    display: flex;
    gap: 1.5rem;
    justify-content: flex-start;
    padding: 1rem 1.5rem;
}

.Co-Main .timeline .Co-mainPost .Co-timelineHeader .bi-arrow-left-circle {
    font-size: 1.5rem;
    color: var(--grayColor);
    transition: 0.2s transform;
    cursor: pointer;
}

.Co-Main .timeline .Co-mainPost .Co-timelineHeader .bi-arrow-left-circle:hover {
    transform: scale(1.1);
    color: var(--secondColor);
    transition: 0.2s transform;
}

.Co-Main .timeline .Co-mainPost .Co-timelineHeader h1 {
    font-size: 1.8rem;
}

.Co-Main .timeline .Co-mainPost .endTimeline {
    display: none;
}

.Co-Main .timeline .Co-mainPost .commentBtnn {
    position: absolute;
    right: 0.5rem;
    bottom: 0.5rem;
}

/*====================================================================================================
========================================= PÁGINA DE SUPORTE ==========================================
====================================================================================================*/

.Su-suporte {
    overflow: hidden;
    min-height: 100vh;
}

.Su-cellsBackground {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 3vh;
    width: 100%;
    height: 40vh;
    background-image: url("../imagens/figuras/suportBack.png");
}

.Su-cellsBackground h1 {
    position: relative;
    color: var(--whiteColor);
    font-size: 5rem;
    font-weight: bold;
}

.Su-cellsBackground .Su-searchbar {
    position: relative;
    display: flex;
    justify-content: center;
    min-width: 28rem;
    width: 100%;
    height: 3rem;
}

.Su-cellsBackground .Su-searchbar .bi-search{
    color: var(--grayColor);
    transform: translateX(2rem);
}

.Su-cellsBackground .Su-searchbar input {
    border-radius: 10rem;
    border: none;
    width: 50%;
    height: 100%;
    padding: 0 1rem 0 3rem;
    font-size: 1rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    outline: none;
    transition: all 0.3s ease;
}

.Su-cellsBackground .Su-searchbar input::placeholder {
    color: #999;
}

.Su-cellsBackground .Su-searchbar input:focus {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.Su-sectionTitle{
    font-size: 2.5rem;
    text-align: center;
    margin-top: 10rem;
    margin-bottom:4rem;
}

.Su-helpSection .Su-articleCards {
    position: relative;
    text-align: center;
    width: 60vw;
    display: flex; 
    column-gap: 1rem;
    row-gap: 1.5rem;
    flex-wrap: wrap;
    margin: auto;
    padding: 0 1.5rem 1.5rem 1.5rem;
}

.Su-card {
    position: relative; 
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0rem 1rem 0rem 1rem;
    margin: 10px;
    min-width: 15rem;
    width: 20vw;
    max-width: 18rem;
    min-height: 12.5rem;
    border: 2px solid transparent;
    background: linear-gradient(var(--whiteColor), var(--whiteColor)) padding-box, linear-gradient(to right, var(--middleYellowColor), var(--middleBlueColor), var(--middlePinkColor)) border-box;
    border-radius: 1rem;
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none;    
}

.Su-card:hover {
    transform: scale(1.05);
    background: var(--whiteColor);
    border-color: var(--darkBlueColor);
}

.Su-card:nth-of-type(1):hover,
.Su-card:nth-of-type(4):hover{
    border-color: var(--middleYellowColor);
}

.Su-card:nth-of-type(2):hover,
.Su-card:nth-of-type(5):hover{
    border-color: var(--middleBlueColor);
}

.Su-card:nth-of-type(3):hover{
    border-color: var(--middlePinkColor);
}

.Su-card a {
    display: block;
    text-decoration: none;
    color: inherit;
}

.Su-cardIcons {
    width: 50px; 
}

.Su-card h3 {
    font-size: 1.2rem;
    transition: color 0.2s ease; 
    color: var(--blackColor);
}

.Su-card:nth-of-type(1):hover h3,
.Su-card:nth-of-type(4):hover h3{
    color: var(--middleYellowColor);
}
.Su-card:nth-of-type(2):hover h3,
.Su-card:nth-of-type(5):hover h3{
    color: var(--middleBlueColor);
}
.Su-card:nth-of-type(3):hover h3{
    color: var(--middlePinkColor);
}

.Su-suporte .Su-helpSection .Su-card .Su-focusblue,
.Su-suporte .Su-helpSection .Su-card .Su-focusyellow,
.Su-suporte .Su-helpSection .Su-card .Su-focuspink {
    color: inherit; /* Inicialmente, as cores são herdadas, ou seja, sem cor */
}

.Su-suporte .Su-helpSection .Su-card:hover .Su-focusblue {
    color: var(--middleBlueColor); 
}

.Su-suporte .Su-helpSection .Su-card:hover .Su-focusyellow {
    color: var(--middleYellowColor); 
}

.Su-suporte .Su-helpSection .Su-card:hover .Su-focuspink {
    color: var(--middlePinkColor); 
}

.Su-card p {
    font-size: 0.8rem;
    color: #000000;
}

.Su-card p span{
    font-weight: bolder;
}
.Su-navigator{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}
.Su-navLink{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap: 1rem;
}
.Su-navIcon{
    min-width: 2rem;
    max-width: 2rem;
    min-height: 2rem;
    max-height: 2rem;
}

.Su-suporte .Su-patchNotes {
    position: relative;
    
    margin: 2rem 0;
    padding: 2rem;
    max-width: 1200px;
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    color: var(--blackColor);
}

@media (min-width: 1206px) {
    .Su-suporte .Su-patchNotes {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 1205px) {
    .Su-suporte .Su-patchNotes {
        left: 0;
        padding: 1.5rem;
    }
}

@media (max-width: 992px) {
    .Su-suporte .Su-patchNotes {
        left: 0;
        padding: 1.2rem;
    }
}

@media (max-width: 768px) {
    .Su-suporte .Su-patchNotes {
        left: 0;
        width: 100%;
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    .Su-suporte .Su-patchNotes {
        left: 0;
        width: 100%;
        padding: 1rem;
    }

    .Su-patchNotes h2 {
        font-size: 1.6rem;
    }

    .Su-patchNotes p {
        font-size: 1rem;
    }

    .Su-patchNotes strong {
        font-weight: 700;
    }

    .Su-patchNotes h3 {
        font-size: 1.3rem;
    }

    .Su-patchNotes ul li {
        font-size: 1rem;
    }
}

.Su-patchNotes h2 {
    font-size: 2rem;
    font-weight: bold;
    color:var(--darkYellowColor);
    margin-bottom: 1rem;
}

.Su-patchNotes p {
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.Su-patchNotes strong {
    font-weight: 700;
    color: var(--darkYellowColor);
}

.Su-patchNotes h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--middleYellowColor);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.Su-patchNotes ul {
    list-style-type: none;
    padding-left: 0;
    margin-top: 1rem;
}

.Su-patchNotes ul li {
    font-size: 1.1rem;
    margin-bottom: 0.75rem;
    padding-left: 1.25rem;
    position: relative;
}

.Su-patchNotes ul li::before {
    position: absolute;
    left: 0;
    top: 0;
    color: var(--middleYellowColor);
    font-weight: bold;
}

.Su-patchNotes ul:nth-of-type(1) li::before {
    content: "✔";  
}

.Su-patchNotes ul:nth-of-type(2) li::before {
    content: "⏳";  
}

.Su-patchNotes > p {
    font-size: 1.2rem;
    color: var(--blackColor);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.Su-suporte .Su-interfaces{
    margin-top: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap:1.5rem;
}

.Su-suporte .Su-interfaces.mainInterfacePage{
    margin-top: 5rem;
}

.Su-suporte .Su-interfaces h1{
    font-size: 2rem;
}

.Su-suporte .Su-interfaces.mainInterfacePage .Su-navIntLinks.mainInterfaces{
    margin-top: 5rem;
}

.Su-suporte .Su-interfaces.mainInterfacePage .Su-navIntLinks.mainInterfaces .Su-navIntLink .Su-navIcon{
    width: 10rem; height: 10rem;
}

.Su-navIntLinks{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
    gap:5rem;
}

.Su-navIntLinks .Su-navIntLink{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.Su-suporte .In-landing {
    background-color: var(--whiteColor);
    padding: 5rem;
}

.Su-suporte .In-landing .In-landing-content {
    max-width: 900px;
    margin: 0 auto;
}

.Su-suporte .In-landing .In-landing-content .In-sectionTitle {
    font-size: 2rem;
    color: var(--darkBlueColor);
    margin-bottom: 20px;
}

.Su-suporte .In-landing .In-landing-content .In-description {
    font-size: 1.2rem;
    color: var(var(--blackColor));
    margin-bottom: 30px;
}

.Su-suporte .In-landing .In-landing-content .In-feature-section, .In-nav-section, .In-faq-section, .In-contact-section, .In-cta-section, .In-team-section {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 1.25rem;
    margin-bottom: 2rem;
    border-radius: 0.5rem;
}

.Su-suporte .In-landing .In-landing-content .In-feature-section h3, .In-nav-section h3, .In-faq-section h3, .In-contact-section h3, .In-cta-section h3, .In-team-section h3 {
    font-size: 1.5rem;
    color: var(--middleBlueColor);
    margin-bottom: 10px;
}

.In-feature-section p, .In-nav-section p, .In-faq-section p, .In-contact-section p, .In-cta-section p, .In-team-section p {
    font-size: 1rem;
    color: var(--blackColor);
    line-height: 1.6;
}

.In-navLink {
    display: inline-block;
    background-color: var(--middleBlueColor);
    color: #fff;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    margin-top: 10px;
    transition: background-color 0.3s;
}

.In-navLink:hover {
    background-color: var(--darkBlueColor);
}

.In-faq-section p a{
    font-weight: bold;
}
.In-faq-section p a:hover{
    color: var(--middleBlueColor);
}
.In-cta-section a {
    font-size: 1.2rem;
    text-decoration: none;
    background-color: var(--middleBlueColor);
    padding: 12px 25px;
    border-radius: 5px;
    color: #fff;
    transition: background-color 0.3s;
}

.In-cta-section a:hover {
    background-color: var(--darkBlueColor);
}

.In-contact-section a {
    color: var(--middleBlueColor);
    text-decoration: none;
    font-weight: bold;
}

.In-contact-section a:hover {
    text-decoration: underline;
}

.In-registerAndLogin {
    background-color: var(--whiteColor);
    padding: 40px;
    max-width: 900px;
    margin: 2rem auto;
}

.In-registerAndLogin .In-registerContent p a{
    font-weight: bold;
}

.In-registerAndLogin .In-registerContent p a:hover{
    color: var(--middleBlueColor);
}

.In-sectionTitle {
    font-size: 2rem;
    color: var(--darkBlueColor);
    margin-bottom: 20px;
}

.In-register-step {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
}
.In-register-step:first-of-type{
    margin-top: 2rem;
}

.In-register-step h4 {
    font-size: 1.5rem;
    color: var(--middleBlueColor);
    margin-bottom: 10px;
}

.In-register-step ul {
    list-style: none;
    padding-left: 20px;
    margin-top: 2rem;
}

.In-register-step ul li {
    font-size: 1rem;
    color: var(--blackColor);
    line-height: 1.6;
}

.In-registerAndLogin .In-registerContent hr{
    margin-bottom: 2rem;
}

/* Estilizando a seção In-homeNavigation */
.In-homeNavigation {
    padding: 20px;
    background-color: var(--whiteColor);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: Arial, sans-serif;
    margin-top: 2rem;
    width: 80%;
    margin: 2rem auto;
}

/* Título principal da seção */
.In-homeNavigation h2 {
    font-size: 24px;
    color: var(--darkBlueColor);
    margin-bottom: 20px;
    font-weight: bold;
}

.In-homeNavigation h3 {
    font-size: 20px;
    color: var(--middleBlueColor);
    margin-top: 20px;
    font-weight: bold;
}

.In-homeNavigation p {
    font-size: 16px;
    color: var(--blackColor);
    line-height: 1.6;
    margin-bottom: 15px;
}

.In-homeNavigation strong {
    font-weight: bold;
}
.In-homeNavigation strong:hover{
    color: var(--middleBlueColor);
}

/* Adicionando margens entre os parágrafos */
.In-homeNavigation p + p {
    margin-top: 10px;
}

/* Estilo para o layout responsivo - Ajuste para telas menores */
@media (max-width: 768px) {
    .In-homeNavigation {
        padding: 15px;
    }

    .In-homeNavigation h2 {
        font-size: 20px;
    }

    .In-homeNavigation h3 {
        font-size: 18px;
    }

    .In-homeNavigation p {
        font-size: 14px;
    }
}

.In-profileNavigation {
    padding: 20px;
    background-color: var(--whiteColor);  /* Cor de fundo suave */
    border-radius: 8px; /* Bordas arredondadas para suavizar a aparência */
    width:80%;
    margin: 2rem auto;
}

/* Título principal da seção */
.In-profileNavigation h2 {
    font-size: 2rem;
    color: var(--darkBlueColor);  /* Cor escura para o título */
    margin-bottom: 15px;
}

/* Estilo para os subtítulos dentro da descrição */
.In-profileNavigation h3 {
    font-size: 1.5rem;
    color: var(--middleBlueColor);  /* Cor de texto um pouco mais clara para os subtítulos */
    margin-top: 25px;
    margin-bottom: 10px;
}

/* Estilo do texto explicativo */
.In-profileNavigation p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--blackColor);  /* Cor mais suave para o texto */
    margin-bottom: 15px;
}

/* Listagem dos tópicos explicados na seção */
.In-profileNavigation ul {
    list-style-type: disc;  /* Marcadores como bolinhas */
    margin-left: 20px;
    margin-bottom: 15px;
}

/* Estilo das listagens dentro da seção */
.In-profileNavigation li {
    font-size: 1rem;
    color: var(--blackColor);
    margin-bottom: 8px;
}

/* Estilo para a área de texto explicativo em geral */
.In-profileDescription {
    background-color: #fff; /* Cor de fundo branca para a área de explicação */
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Tornando o layout mais responsivo */
@media (max-width: 768px) {
    .In-profileNavigation {
        padding: 15px;
    }
    
    .In-profileNavigation h2 {
        font-size: 1.8rem;
    }

    .In-profileNavigation h3 {
        font-size: 1.3rem;
    }

    .In-profileNavigation p {
        font-size: 0.95rem;
    }

    .In-profileNavigation ul {
        margin-left: 15px;
    }
}

.Su-suporte .In-supportNavigation{
    width: 80%;
    margin: 2rem auto;
}

.Su-suporte .In-supportNavigation h2{
    color: var(--darkBlueColor);
}

.Su-suporte .In-supportNavigation .In-sNavLink {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--middleBlueColor);
    padding: 0.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Efeito ao passar o mouse sobre os links */
.Su-suporte .In-supportNavigation .In-sNavLink:hover {
    background-color: #ecf0f1;
    color: var(--darkBlueColor);
    transform: scale(1.05);
}

/* Estilo de link ativo */
.Su-suporte .In-supportNavigation .In-sNavLink.active {
    color: #fff;
    background-color: var(--darkBlueColor);
}

/* Sublistas dentro de cada item de navegação */
.Su-suporte .In-supportNavigation .Su-navLinks li {
    list-style-type: none;
    padding-left: 20px;
}

.Su-suporte .In-supportNavigation .Su-navLinks li ul li {
    margin-bottom: 0.5rem;
}

.Su-suporte .In-supportNavigation .Su-navLinks li ul li .In-sNavLink {
    font-size: 1rem;
    color: var(--middleBlueColor);
    transition: all 0.3s ease;
}

.Su-suporte .In-supportNavigation .Su-navLinks li ul li .In-sNavLink:hover {
    color: var(--darkBlueColor);
    text-decoration: underline;
}

/* Responsividade para telas pequenas */
@media (max-width: 768px) {
    .Su-suporte .In-supportNavigation {
        padding: 1rem;
    }

    .Su-suporte .In-supportNavigation h2 {
        font-size: 1.5rem;
    }

    .Su-suporte .In-supportNavigation p {
        font-size: 0.9rem;
    }

    .Su-suporte .In-supportNavigation .Su-navLinks {
        padding-left: 0;
    }
}

.Su-settings{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin: 4rem auto;
}
.Su-settings h1{
    color: var(--darkPinkColor);
    font-size: 2rem;
}

.Su-settings .Su-navSetLinks{
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-evenly;
}

.Su-settings .Su-navSetLinks a.Su-navSetLink{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.Su-suporte .sSe-accountInfo {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
}

.Su-suporte .sSe-accountInfo h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--darkPinkColor);
}

.Su-suporte .sSe-accountInfo p {
    font-size: 16px;
    color: var(--blackColor);
    margin-bottom: 20px;
    line-height: 1.7;
}

.Su-suporte .sSe-accountInfo h3 {
    font-size: 20px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 10px;
    color: var(--middlePinkColor);
}

.Su-suporte .sSe-accountInfo ul {
    list-style-type: none;
    padding-left: 20px;
}

.Su-suporte .sSe-accountInfo ul li {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.8;
}

.Su-suporte .sSe-accountInfo ul li strong {
    color: var(--middlePinkColor);
}

.sSe-childInfo {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
}

.sSe-childInfo h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    color: var(--darkPinkColor);
}

.sSe-childInfo p {
    font-size: 16px;
    color: var(--blackColor);
    margin-bottom: 20px;
    line-height: 1.7;
}

.sSe-childInfo h3 {
    font-size: 20px;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 10px;
    color: var(--middlePinkColor);
}

.sSe-childInfo ul {
    list-style-type: none;
    padding-left: 20px;
}

.sSe-childInfo ul li {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 1.8;
}

.sSe-notifications {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
}

.sSe-notifications h2 {
    font-size: 24px;
    font-weight: bold;
    color: var(--darkPinkColor);
    margin-bottom: 20px;
}

.sSe-notifications p {
    font-size: 16px;
    color: var(--blackColor);
    line-height: 1.7;
    margin-bottom: 20px;
}

.sSe-notifications p strong {
    color: var(--middlePinkColor);
}

.sSe-securityAndPrivacy {
    background-color: var(--whiteColor);
    padding: 30px;
    width:80%;
    margin: 0 auto 2rem;
    border-radius: 8px;
}

/* Título principal da seção */
.sSe-securityAndPrivacy h2 {
    font-size: 28px;
    font-weight: bold;
    color: var(--darkPinkColor);
    margin-bottom: 20px;
}

/* Títulos das subseções */
.sSe-securityAndPrivacy h3 {
    font-size: 24px;
    font-weight: bold;
    color: var(--middlePinkColor);
    margin-top: 20px;
    margin-bottom: 15px;
}

/* Parágrafos explicativos */
.sSe-securityAndPrivacy p {
    font-size: 16px;
    color: var(--blackColor);
    line-height: 1.6;
    margin-bottom: 15px;
}

/* Estilo para listas */
.sSe-securityAndPrivacy ul {
    padding-left: 20px;
    list-style-type: disc;
}

.sSe-securityAndPrivacy ul li {
    font-size: 16px;
    color: var(--blackColor);
    margin-bottom: 10px;
}

/* Estilo para itens de lista importantes */
.sSe-securityAndPrivacy ul li strong {
    color: var(--middlePinkColor);
}

.Su-policyDocs{
    width: 80%;
    position:relative;
    left:10%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 3rem;
}
.Su-policyDocs > h2{
    margin-bottom: 1rem;
    color: var(--middleYellowColor);
}
.Su-policyDocs > p{
    margin-bottom: 1rem;
    font-size: 1.1rem;
}
.Su-documents {
    width: 100%;
    display: flex;
    gap: 20px;
    justify-content: space-evenly;
    margin-top: 20px;
}

.Su-docLink {
    text-align: center;
}

.Su-docIcon {
    width: 5rem;
    height: 5rem;
    margin-bottom: 10px;
}

.Su-docItem {
    text-decoration: underline;
    color: inherit;
}

.Su-docItem h4 {
    font-size: 16px;
    font-weight: bold;
}

/* Estilo da seção FAQ */
.Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 2rem;
    left: 50%;
    transform: translate(-50%);
    width: 60vw;
}

/* Estilo da lista de perguntas */
.Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .faqList {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Estilo das perguntas */
.Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .faqList .Su-faqQuestions {
    position: relative;
    border-bottom: 2px solid var(--grayColor);
    cursor: pointer;
    padding: 1.7rem 2rem 1.7rem 1.5rem;
    margin: 0.25rem 0;
    transition: background-color 0.3s ease;
}

/* Estilo para diferentes tamanhos de tela */
@media (max-width: 768px) {
    .Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .faqList .Su-faqQuestions {
        padding: 1.5rem 2rem 1.5rem 1.5rem;
    }
}

@media (max-width: 428px) {
    .Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .faqList .Su-faqQuestions {
        padding: 1rem 2rem 1rem 1.5rem;
    }
}

/* Estilo da pergunta ativa */
.Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .faqList .Su-faqQuestions.active {
    border-color: var(--middleBlueColor);
}

/* Estilo do texto da pergunta */
.Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .faqList .Su-faqQuestions p {
    font-size: 1.5rem;
    transition: color 0.3s ease;
}

/* Mudança de cor quando o usuário passa o mouse */
.Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .faqList .Su-faqQuestions:hover p {
    color: var(--darkBlueColor);
    transition: 0.1s;
}

/* Estilo da pergunta ativa (focada) */
.Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .faqList .Su-faqQuestions.active p {
    color: var(--middleBlueColor);
    font-weight: 500;
}

/* Ícone de seta à direita */
.Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .faqList .Su-faqQuestions .bi-chevron-right {
    position: absolute;
    right: 0;
    top: 1.7rem;
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

/* Mudança de estado do ícone quando a pergunta está ativa */
.Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .faqList .Su-faqQuestions.active .bi-chevron-right {
    color: var(--middleBlueColor);
    font-weight: 600;
    transform: rotate(90deg);
}

/* Resposta da pergunta (inicialmente oculta) */
.Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .faqList .Su-faqQuestions .Su-faqAnswers {
    position: relative;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease;
    padding: 0.5rem 0 0 1rem;
    font-size:1.2rem;
}

/* Mostra a resposta quando a pergunta está ativa */
.Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .faqList .Su-faqQuestions.active .Su-faqAnswers {
    opacity: 1;
}

/* Estilo da observação */
.Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .Su-observation {
    position: relative;
}

/* Estilo da observação em telas menores */
@media (max-width: 768px) {
    .Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .Su-observation {
        width: 150%;
    }
}

@media (max-width: 320px) {
    .Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .Su-observation {
        width: 200%;
    }
}

/* Link na observação */
.Su-suporte .Su-faqQuestionsSection .Su-frequentQuestions .Su-observation a {
    font-weight: bold;
    color: var(--middleBlueColor);
    cursor: pointer;
}


@media (max-width: 900px) {
    .Su-cellsBackground {
        height: 30vh;
    }
}

@media (max-width: 480px) {
    .Su-cellsBackground h1 {
        font-size: 3rem;
    }

    .Su-cellsBackground .Su-searchbar {
        height: 2.5rem;
    }
}