:root {
    /* --footer-fixed-position: absolute; */
    --footer-fixed-position: relative;
}

:root {
    --xxl : 1600px;
    --main-spacing-horizontal: 1rem;
    --main-spacing-vertical: 1rem;
    /* --transition-time: 00ms; */
}

html[data-color=light-blue] {
    --primary: #1C75BC;
}

@media(max-width: 767.98px) {
    :root {
        /* --footer-fixed-position: absolute; */
        --footer-fixed-position: relative;
    }
}

main {    
    padding-left: calc(var(--nav-size));
    /* padding-left: calc(var(--nav-size) + var(--main-spacing-horizontal)); */
    padding-right: var(--main-spacing-horizontal);
}

html[data-placement=horizontal][data-dimension=mobile] main, html[data-placement=vertical][data-dimension=mobile] main {
    padding-left: var(--main-spacing-horizontal) !important;
    /* padding-left: 0; */
    padding-top: calc(var(--nav-size-slim) + var(--main-spacing-horizontal)/2)
}

html[data-placement=vertical][data-behaviour=unpinned] main {
    padding-left: calc(var(--nav-size-slim)) !important;
}
html[data-placement=vertical] .nav-container .nav-content .logo, html[data-placement=horizontal] .nav-container.mobile-side-ready .nav-content .logo, html[data-placement=vertical] .nav-container.mobile-side-ready .nav-content .logo {
    /* margin-bottom: 20px; */
    margin-bottom: 5px;
    text-align: center
}

html[data-placement=vertical] .nav-container .nav-content .logo a, html[data-placement=horizontal] .nav-container.mobile-side-ready .nav-content .logo a, html[data-placement=vertical] .nav-container.mobile-side-ready .nav-content .logo a {
    overflow: hidden;
    display: inline-block;
    /* width: 100px */
}

html[data-placement=vertical] .nav-container .nav-content .menu-container, html[data-placement=horizontal] .nav-container.mobile-side-ready .nav-content .menu-container, html[data-placement=vertical] .nav-container.mobile-side-ready .nav-content .menu-container {
    /* margin-top: 2rem; */
    margin-top: 5px;
}

html[data-footer=true] #root>footer {
    padding-left: calc(var(--nav-size));
    padding-right: 0;
    /* padding-left: calc(var(--nav-size) + var(--main-spacing-horizontal));
    padding-right: var(--main-spacing-horizontal) */
    padding-right: 0;
}

html[data-footer=true][data-placement=horizontal] #root>footer {
    /* padding-left: var(--main-spacing-horizontal) */
    padding-left: 0;
}



@media (min-width: 1200px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 100%;
    }
}

/* @media  (min-width: 1280px) and (max-width: 1400px) {
    html:not([data-menu-animate="show"]) .userBtn span{
        display: none;
    }

    html:not([data-menu-animate="show"]) .userBtn {
        padding-left: 0;
        padding-right: 0;
        background-color: transparent;
    }
} */

@media (min-width: 1100px) {
    .container, .container-sm, .container-md, .container-lg, .container-xl {
        max-width: 100%;
    }
}

.btnShowHideButton {
    display: none;
}

@media (min-width: 991px) and (max-width: 1599px) {
    /* body {
        background-color: #1C75BC;
    } */
    
    html:not([data-menu-animate="show"]) .userBtn span,
    html[data-menu-animate="hidden"] .userBtn span{
        display: none;
    }

    html:not([data-menu-animate="show"]) .userBtn svg,
    html[data-menu-animate="hidden"] .userBtn svg {
        margin-right: 0 !important;
    }

    html:not([data-menu-animate="show"]) .userBtn,
    html[data-menu-animate="hidden"] .userBtn {
        padding-left: 0;
        padding-right: 0;
        background-color: transparent;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    html:not([data-menu-animate="show"]) .profileBtn,
    html[data-menu-animate="hidden"] .profileBtn {
        display: flex;
        flex-direction: column;
        /* width: 56px; */
        width: 100%;
        left: 0;
        padding-left: 1.2rem !important;
        padding-right: 1.2rem !important;
    }

    html:not([data-menu-animate="show"]) .profileBtn > button,
    html[data-menu-animate="hidden"] .profileBtn > button{
        display: flex;
        justify-content: center;
    }

    html:not([data-menu-animate="show"]) .profileBtn > button svg,
    html[data-menu-animate="hidden"] .profileBtn > button svg {
        margin-right: 0 !important;
    }
    
    
    .btnShowHideButton {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: #2D91E0;
        width: 32px;
        height: 32px;
        position: absolute;
        top: 50%;
        right: 0%;
        transform: translate(0%, 50%);
        border: none;
        z-index: 10;
    }

    html:not([data-menu-animate="show"]) .btnShowHideButton.LeftIcon,
    html[data-menu-animate="hidden"] .btnShowHideButton.LeftIcon {
        display: none !important;
    }

    /* html:not([data-menu-animate="show"]) .btnShowHideButton.RightIcon,
    html[data-menu-animate="hidden"] .btnShowHideButton.RightIcon {
        display: none !important;
    } */

    html[data-menu-animate="show"] .btnShowHideButton.RightIcon{
        display: none !important;
    }


    html[data-menu-animate="show"] .btnShowHideButton {
        background-color: #BADBF5;
    }
}

@media (min-width: 991px) and (max-width: 1300px) {
    .btnShowHideButton {
        width: 26px;
        height: 26px;
    }
}