.light-theme {
    --color-header:                                         #175796;
    --color-header-blur:                                    #07315b;
    --color-footer-font:                                    #175796;

    --color-logo-header:                                    #FFFFFF;
    --color-logo-main:                                      #175796;

    --color-background-avatar:                              #333333;

    --color-background-displaced-menu-mobile-retracted:     #175796;
    --color-background-displaced-menu-mobile-expanded:      #FFFFFF;
    --color-shadow-displaced-menu-panel:                    #17569620;
    --color-title-displaced-menu-panel:                     #175796;
    --color-text-displaced-menu-panel:                      #333333;
    --color-text-displaced-menu-panel-selected:             #175796;
    --color-displaced-menu-panel-logo:                      #175796;

    --color-header-right-logo:                              #FFFFFF;
}

.dark-theme {
    --color-header:                                         #19487D;
    --color-header-blur:                                    #0d2e53;
    --color-footer-font:                                    #6699FF;

    --color-logo-header:                                    #FFFFFF;
    --color-logo-main:                                      #6699FF;

    --color-background-avatar:                              #333333;

    --color-background-displaced-menu-mobile-retracted:     #19487D;
    --color-background-displaced-menu-mobile-expanded:      #242437;
    --color-shadow-displaced-menu-panel:                    #191921;
    --color-title-displaced-menu-panel:                     #6699FF;
    --color-text-displaced-menu-panel:                      #FFFFFF;
    --color-text-displaced-menu-panel-selected:             #6699FF;
    --color-displaced-menu-panel-logo:                      #FFFFFF;

    --color-header-right-logo:                              #FFFFFF;
}

.main {
    flex: 1;
    flex-basis: auto;
    display: flex;
    margin-top: 100px;

    position: relative;
}

.logo--header {
    height: 60px;
    margin-left: 5%;
    top: 17px;
    position: fixed;
    display: inline-block;
    left: -25px; 

    fill: var(--color-logo-header);
}

.logo--main {
    fill: var(--color-logo-main);
}

.header {   
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: start;

    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100px;

    z-index: 9997;

    gap: 10px;

    background-color: var(--color-header);
}

.header-left {
    display: flex;
    justify-content: start;
    align-items: center;
    text-align: center;

    width: 330px;
    min-height: 100px;

    cursor: pointer;

    /* background-color: pink; */
}

.header-nav {
    flex: 1;
    min-height: 100px;

    padding-left: 5px;
    padding-right: 5px;
}

.header-nav-block {
    display: flex;
    flex-direction: row;
    justify-content: left;
    align-items: center;
    text-align: center;

    flex: 1;
    min-height: 100px;

    gap: 20px;

    flex-wrap: wrap;

    /* background-color: green; */
}

.header-nav-button {
    justify-content: center;
    align-items: center;
    text-align: center;

    border:                                                     0;
    padding:                                                    0;
    margin:                                                     0;
    box-shadow:                                                 none;
    outline:                                                    none;
    background:                                                 none;

    cursor:                                                     pointer;

    font-size:                                                  15px;
    font-weight:                                                500;
    letter-spacing:                                             0.75px;

    min-width:                                                  145px;
    min-height:                                                     45px;

    color:                                                      var(--fontcolor-header-button);
    /* background-color:                                           var(--background-header-button); */
    background-color:                                           unset;
    transition:                                                 background-color 0.4s ease, color 0.4s ease;
}

.header-nav-button--mobile {
    display: none;
}

/*
.header-nav-button:hover {
    color: var(--fontcolor-header-button-hover);
    border-bottom: solid 1px var(--background-header-button-hover);
    background-color: var(--background-header-button-hover);
}
*/

.header-right {
    display: flex;
    justify-content: space-around;
    align-items: center;

    gap: 10px;

    /* width: 160px; */
    min-width: 170px;
    min-height: 100px;

    margin-right: 2px;

    padding-left: 15px;
    padding-right: 15px;

    /* background-color: red; */
}

/* .header-right--default {
    width: 100px;
    min-width: 100px;
} */

/* .header-right--logged {
    width: 190px;
    min-width: 190px;
} */

.header-right-icon {
    display: flex;
    justify-content: center;
    align-items: center;

    min-width: 30px;
    min-height: 100px;
    
    /* background-color: orange; */
}

.header-right-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.header-right-logo--disabled {
    display: none;
}

.header-right-logo-svg {
    width: 60px !important;
    height: 60px !important;

    fill: var(--color-header-right-logo);
}

.header-right-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;

    width: 60px;
    height: 60px;

    object-fit: cover;
    border-radius: 50%;

    border: 0;

    cursor: pointer;

    background-color: var(--color-background-avatar);
}

.header-right-avatar--disabled {
    display: none;
}

.header-right-avatar-img {
    width: 56px;
    height: 56px;

    /* object-fit: cover; */
    border-radius: 50%;
}

.logged-mode {
    width: 100%;
    height: 40px;

    background-color: pink;
}


.displaced-menu-wrapper {
    display: none;
}


.footer {
    flex: 0 1 40px;
    display: flex;
}

.footer-content {
    flex: 1;
    flex-basis: auto;

    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
}

.footer-content-div {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 31%;
    height: 50px;
}

.footer-text {
    font-family: "Gabarito", sans-serif;
    font-size: 17px;
    font-weight: 600;

    color: var(--color-footer-font);
}

@media (max-width: 1490px) {
    .main {
        margin-top: 80px !important;
    }

    .main--auth {
        margin-top: 0px !important;
    }

    .logo--header {
        /* width: 77.25px !important; */
        height: 30px !important;
        position: unset !important;
        top: unset !important;
        left: 0px !important;
        margin-left: 0px !important;
    }

    .header {
        min-height: unset !important;
        height: 80px !important;
        align-items: center !important;
        width: 100vw !important;
        gap: 2.5px !important;
    }

    .header-left {
        flex-direction: column !important;
        justify-content: center !important;
        text-align: center !important;
        flex-basis: unset !important;
        height: 80px !important;
        min-height: 80px !important;
        width: 130px !important;
        min-width: 130px !important;
        max-width: 130px !important;
        padding: 0px !important;
        margin: 0px !important;
    }

    .header-nav {
        display: none !important;
    }

    .header-nav-button {
        font-size: 12.5px !important;
    }

    .header-right {
        min-width: 50px !important;
        height: 80px !important;
        min-height: 80px !important;
    }

    .header-right-icon {
        display: none !important;
    }

    .header-right-avatar {
        width: 45px !important;
        height: 45px !important;
    }

    .header-right-avatar-img {
        width: 41px !important;
        height: 41px !important;
    }

    .header-right-logo-svg {
        height: 40px !important;
    }

    .displaced-menu-wrapper {
        display: flex !important;
    }

    .displaced-menu-trigger {
        position: fixed;
        top: 125px;
        right: 0;

        width: 40px;
        height: 70px;

        display: flex;
        align-items: center;
        justify-content: center;

        border: 0;
        cursor: pointer;

        border-radius: 50px 0 0 50px;
        background: var(--color-background-displaced-menu-mobile-retracted);

        box-shadow: 0 4px 8px var(--color-shadow-displaced-menu-panel);
        z-index: 9991;
        transition: opacity 0.2s ease;
    }

    .displaced-menu-panel {
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: center;
        text-align: center;

        gap: 20px;

        position: fixed;
        top: 80px; /* abaixo do header */
        right: 0;

        width: 200px;
        height: calc(100vh - 80.2px);
        /* height: calc(100% - 80px); */

        background: var(--color-background-displaced-menu-mobile-expanded);

        transform: translateX(100%);
        transition: transform 0.35s ease;

        z-index: 9990;
    }

    /* aberto */
    .displaced-menu-panel.is-open {
        transform: translateX(0);
        box-shadow: -4px 0 8px var(--color-shadow-displaced-menu-panel);
    }   

    .displaced-menu-panel.is-open ~ .displaced-menu-trigger,
    .displaced-menu-trigger.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

    .displaced-menu-panel-options {
        width: 170px;
        flex: 1;

        /* background-color: red; */
    }

    /* .displaced-menu-panel-options-group { */
        /* width: 100%;
        min-height: 70px; */

        /* background-color: blue; */

        /* border: 2px solid red; */
    /* } */

    .displaced-menu-panel-options-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

        min-height: 40px;

        font-size: 20px;
        font-weight: 700;
        color: var(--color-title-displaced-menu-panel);

        margin-bottom: 10px;

        /* background-color: pink; */
    }

    .displaced-menu-panel-options-opt {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;

        min-height: 30px;

        margin-bottom: 5px;
    }

    .displaced-menu-panel-options-opt-text {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        text-align: center;

        width: 100%;
        min-height: 45px;

        font-size: 18px;
        font-weight: 500;
        color: var(--color-text-displaced-menu-panel);
        border-bottom: 1px solid var(--color-text-displaced-menu-panel);
    }

    .displaced-menu-panel-options-opt-text--selected {
        color: var(--color-text-displaced-menu-panel-selected);
        border-bottom: 1px solid var(--color-text-displaced-menu-panel-selected);
    }

    .displaced-menu-panel-options-opt-text--retreated {
        flex-direction: row;
        justify-content: left;
        align-items: center;
        text-align: center;

        min-height: 40px;

        gap: 20px;

        font-size: 13px;
        font-weight: 200;

        width: calc(100% - 15px);
        margin-left: 15px;

        /* padding-top: 5px;
        padding-bottom: 5px; */
    }

    .displaced-menu-panel-options-opt-text--hidden {
        display: none;
    }



    /* .displaced-menu-panel-options-opt--nested { */
        /* display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: start;
        text-align: center;

        min-height: 30px;

        font-size: 18px;
        font-weight: 400;
        color: var(--color-text-displaced-menu-panel); */
        /* border-bottom: 0px; */

        /* margin-bottom: 5px; */
    /* } */

    .displaced-menu-panel-logo {
        width: 65px;
        height: 65px;
        fill: var(--color-displaced-menu-panel-logo);

        margin-bottom: 20px;
    }

    .displaced-menu-trigger.is-hidden {
        opacity: 0;
        pointer-events: none;
    }

    .footer-content {
        height: 45px !important;
    }

    .footer-content-div {
        flex: 1 !important;
        width: unset !important;
        height: 45px !important;
    }

    .footer-content-div--mobile-max-content {
        flex: unset !important;
        width: max-content !important;

        padding-left: 2.5px !important;
        padding-right: 2.5px !important;
    }

    .footer-text {
        font-size: 11px !important;
    }
}

@media (max-width: 640px) {
    /* .header {
        min-height: 60px !important;
    } */

    /* .header-left {
        min-height: 60px !important;
    } */

    .header-nav {
        height: unset !important;
        /* min-height: 60px !important; */
    }

    .header-nav-button {
        height: 30px !important;
    }

    /* .header-right {
        min-height: 60px !important;
    } */

    /* .header-right-button-avatar {
        width: 40px !important;
        height: 40px !important;
    } */
}

@media (max-width: 440px) {
    .header-nav {
        min-width: 220px !important;
    }
}