/**************************************************************************************************************/
/*                                                  Menu                                                      */
/*v1.0.0 
Copyright 2015 CIJUN.
Licensed under MIT */
/**************************************************************************************************************/

@import url(https://fonts.googleapis.com/css?family=Varela+Round);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,500,200&subset=latin,latin-ext);

/* Menu Button */
.menu-button {
    position: relative;
    z-index: 1000;
    padding: 0;
    border: none;
    text-indent: 2.5em;
    font-size: 1.5em;
    color: transparent;
    background: transparent;
    float: right;
    /* Quiñones - Ajustes */
    font-family: 'Varela Round', sans-serif, Arial;
    color: #373A47;
    width: 115px;
    text-indent: -38px;
    line-height: 48px;
    font-size: 14px;
}

.novo-menu .menu-button {
    background: transparent none repeat scroll 0 0;
    border: medium none;
    color: #373a47;
    float: right;
    font-family: sans-serif,Arial;
    font-size: 14px;
    line-height: 48px;
    padding: 0 6px 0 0;
    text-indent: 0;
    width: auto;
    z-index: 1000;
}

.menu-button:hover {
    opacity: 0.6;
}

.menu-button:focus {
    outline: none;
}

#label-menu {
    position: relative;
    display: block;
    right: 55px;
    top: 0px;
    margin: 0px;
    padding: 0px;
    float: right;
}

.novo-menu.navBarMedio #label-menu,
.novo-menu.navBarPequeno #label-menu {
    display: none;
}

.novo-menu #label-menu {
    display: block;
    float: left;
    margin: 0 10px 0 0;
    padding: 0;
    position: relative;
    right: 0;
    top: 0;
    width: 38px;
}

#hamburger {
    border-radius: 3px;
    cursor: pointer;
    display: block;
    padding: 3px 0;
    position: relative;
    width: 40px;
    float: right;
    height: 47px;
}

.novo-menu #hamburger {
    border-radius: 3px;
    cursor: pointer;
    display: block;
    float: left;
    height: 47px;
    padding: 3px 0;
    position: relative;
    right: 0;
    top: 0;
    width: 40px;
}

#hamburger div {
    border-radius: 4px;
    width: 100%;
    height: 3px;
    border: 3px solid #555;
    margin-top: 5.5px;
}

.menu-buttonAlterado #label-menu {
    color: #418BFF;
}

.menu-buttonAlterado #hamburger div {
    border: 3px solid #418BFF;
}

.close-button {
    width: 1em;
    height: 1em;
    position: absolute;
    right: 1em;
    top: 1em;
    overflow: hidden;
    text-indent: 1em;
    font-size: 0.75em;
    border: none;
    background: transparent;
    color: transparent;
}

    .close-button::before,
    .close-button::after {
        content: '';
        position: absolute;
        width: 3px;
        height: 100%;
        top: 0;
        left: 50%;
        background: #bdc3c7;
    }

    .close-button::before {
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .close-button::after {
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

/* Menu */
.menu-wrap {
    position: fixed;
    z-index: 1031; /*1001; -- 1031 porque o menu superior é 1030 e a sombra sobrepões o menu-wrap */
    width: 253px;
    height: 100%;
    max-height: -moz-calc(100%); /* Firefox */
    max-height: -webkit-calc(100%); /* Chrome, Safari */
    max-height: calc(100%); /* IE9+ and future browsers */
    background: RGBA(0,0,0,0.75); /*RGBA(85,85,85,0.9);/*#00334D;*/
    padding: 0; /*2.5em 0.5em 0;*/
    font-size: 1.15em;
    right: -320px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

    .menu-wrap a {
        color: #D7D7D7;
        font-size: 16px;
        font-family: 'Roboto',sans-serif, Arial;
        margin: 0px; /*6px;*/
        display: block;
        padding: 6px; /*0.5em;*/
        text-decoration: none;
    }

    .menu-wrap span {
        margin-left: 10px;
        font-weight: 300; /*700;*/
    }

    .menu-wrap a:hover {
        background-color: #000;
    }

    .menu-wrap #icon-actions a:focus {
        background-color: transparent;
    }

        .menu-wrap #icon-actions a:focus:hover {
            background-color: #000;
        }

    .menu-wrap a span {
        margin: 0 5px 0 0; /*10px;*/
        font-weight: 400; /*700;*/
    }

        .menu-wrap a span.glyphicon {
            font-size: 12px;
        }

    .menu-wrap .menu-niveis-active > a {
        background-color: #000 !important;
    }

    .menu-wrap #icon-actions {
        bottom: 0;
        margin: 0 0 0 3px;
        position: absolute;
        text-align: center;
        width: 100%;
    }

        .menu-wrap #icon-actions > a {
            border-radius: 6px;
            display: inline-block;
            font-size: 14px;
            margin: 0;
            outline: 0 none;
            padding: 12px 0 14px;
            text-align: center;
            width: 82px;
        }

            .menu-wrap #icon-actions > a svg,
            .menu-wrap #icon-actions > a img {
                height: 40px;
                margin: 0 auto;
                width: auto;
                vertical-align: bottom;
            }

            .menu-wrap #icon-actions > a span {
                display: block;
                line-height: 22px;
                margin: 3px 0 0;
                white-space: nowrap;
            }
/* SubMenu*/
.menu-wrapSubmenu1 {
    position: absolute;
    z-index: 1032;
    width: 235px; /*310px;*/
    height: auto;
    background: RGBA(30,30,30,0.75); /*RGBA(103,103,103,0.75);/*#003956;*/
    padding: 0;
    font-size: 14px; /*0.9em;*/
    right: 253px;
    display: none;
    top: 0; /*-40px;*/
}

.menu-wrapSubmenu2 {
    position: absolute;
    z-index: 1033;
    width: 225px;
    height: auto;
    background: RGBA(60,60,60,0.75);
    padding: 0;
    margin: 0;
    font-size: 14px;
    right: 235px;
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    top: 0px;
}

.menu-niveis-active > .menu-wrapSubmenu1,
.menu-niveis-active > .menu-wrapSubmenu2 {
    display: block;
}

@media all and (max-width: 730px) {
    .menu-wrap {
        background: RGBA(30,30,30,1);
    }

        .menu-wrap .nivel1 a:hover {
            background: transparent;
        }

        .menu-wrap.has-active .nivel1,
        .menu-wrap .nivel1.has-active .nivel2 {
            display: none;
        }

            .menu-wrap.has-active .nivel1.menu-niveis-active,
            .menu-wrap .nivel1.has-active .nivel2.menu-niveis-active {
                position: relative;
                display: block;
            }

    .menu-wrapSubmenu1,
    .menu-wrapSubmenu2 {
        width: 100%;
        left: 0;
        top: 100%;
        background: RGBA(60,60,60,1);
    }

    .menu-wrapSubmenu2 {
        background: RGBA(90,90,90,1);
    }
}

@media all and (max-width: 380px) {
    .menu-wrap {
        width: 100%;
        right: -100%;
    }
}

/* Largura da barra de rolagem */
.menu-wrapSubmenu1::-webkit-scrollbar {
    width: 5px;
}

/* Fundo da barra de rolagem */
.menu-wrapSubmenu1::-webkit-scrollbar-track-piece {
    background-color: #4C4E5A;
}

/* Cor do indicador de rolagem */
.menu-wrapSubmenu1::-webkit-scrollbar-thumb:vertical,
.menu-wrapSubmenu1::-webkit-scrollbar-thumb:horizontal {
    background-color: #BAC0C4;
}
    /* Cor do indicador de rolagem - ao passar o mouse */
    .menu-wrapSubmenu1::-webkit-scrollbar-thumb:vertical:hover,
    .menu-wrapSubmenu1::-webkit-scrollbar-thumb:horizontal:hover {
        background-color: #717171;
    }

.menu {
    height: 100%;
    padding-bottom: 50px;
}

.icon-list {
    position: relative;
    top: 100%;
    height: 100%;
    padding-bottom: 50px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

    .icon-list a {
        display: block;
        padding: 6px; /*0.5em;*/
    }

        .icon-list a:hover {
            background-color: #000; /*#454754;*/
        }

        .icon-list a span {
            margin: 0 5px 0 0; /*10px;*/
            font-weight: 300; /*700;*/
        }

            .icon-list a span.glyphicon {
                font-size: 12px;
            }

/* Shown menu */
.show-menu .menu-wrap {
    right: 0;
}

.show-menu .icon-list,
.show-menu .icon-list a {
    top: 0;
}

.toolbar-botoes-fixa .navbar-btn {
    margin-top: 2px !important;
    margin-bottom: 2px !important;
}

.show-menu .content::before {
    opacity: 1;
    -webkit-transition: opacity 0.5s; /*0.8s;*/
    transition: opacity 0.5s; /*0.8s;*/
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

/* Breadcrumbs */
#breadcrumbs-box {
    width: 73%;
    float: left;
    padding-bottom: 6px;
}

.novo-menu.navBarPequeno .logoNavbar {
    display: none;
}

.novo-menu.navBarPequeno #breadcrumbs-box {
    width: 90%;
}

#breadcrumbs-two {
    overflow: hidden;
    width: 100%;
    margin: 1px 0 0;
    padding: 0;
    list-style: none;
}

.novo-menu.navBarPequeno ul#breadcrumbs-two {
    background-image: url(//src.cijun.sp.gov.br/img/logos/logotipo-siim-402x385.png);
    background-repeat: no-repeat;
    background-position: 2px 12px;
    background-size: 22px;
    padding: 0 0 0 40px;
}

#breadcrumbs-two li {
    float: left;
    margin: 0px 21px 0px 0px /* Mudado */;
}

.novo-menu.navBarMedio ul#breadcrumbs-two li {
    margin: 0 12px 0 0;
}

.novo-menu.navBarPequeno ul#breadcrumbs-two li {
    margin: 0 12px 0 0;
}

#breadcrumbs-two li:first-child a::before {
    border: none;
}

.novo-menu #breadcrumbs-two > li#menuLoginSIIM {
    text-transform: capitalize;
}

#breadcrumbs-two a {
    font-family: 'Roboto', sans-serif, Arial;
    background: #DDD;
    padding: .7em 1.1em;
    float: left;
    text-decoration: none;
    color: #444;
    position: relative;
    font-size: 14px;
    font-weight: 400;
    margin-top: 8px;
    height: 32px;
    line-height: 13px;
}

.novo-menu #breadcrumbs-two a {
    font-family: 'Roboto', sans-serif, Arial;
    background: #DDD;
    padding: 0 10px;
    float: left;
    text-decoration: none;
    color: #444;
    position: relative;
    font-size: 15px;
    font-weight: 300;
    margin-top: 8px;
    height: 31px;
    line-height: 30px;
    cursor: default;
}

.novo-menu #breadcrumbs-two li#menuLoginSIIM a,
.novo-menu #breadcrumbs-two li#menuHome a,
.novo-menu #breadcrumbs-two li#menuPopoverAjuda a {
    cursor: pointer;
}

.novo-menu.navBarMedio ul#breadcrumbs-two li a,
.novo-menu.navBarMedio ul#breadcrumbs-two li#menuPopoverAjuda a,
.novo-menu.navBarMedio ul#breadcrumbs-two li#menuLoginSIIM a {
    color: #444;
    background: transparent none repeat scroll 0 0;
    padding: 0;
}

.novo-menu.navBarPequeno ul#breadcrumbs-two li a,
.novo-menu.navBarPequeno ul#breadcrumbs-two li#menuPopoverAjuda a,
.novo-menu.navBarPequeno ul#breadcrumbs-two li#menuLoginSIIM a {
    background: transparent none repeat scroll 0 0;
    padding: 0;
}

.novo-menu.navBarPequeno ul#breadcrumbs-two li:first-child a {
    color: #444;
    font-size: 0;
    white-space: nowrap;
    width: 24px;
}

#breadcrumbs-two a:hover {
    background: #888;
    color: #FFF;
}

.novo-menu.navBarMedio ul#breadcrumbs-two li a:hover {
    background: transparent none repeat scroll 0 0;
    color: #444;
}

.novo-menu.navBarPequeno ul#breadcrumbs-two li a:hover {
    background: transparent none repeat scroll 0 0;
    color: #444;
}

.novo-menu #breadcrumbs-two a:hover {
    background: #aaa;
    color: #FFF;
}

#breadcrumbs-two a::before {
    content: "";
    position: absolute;
    top: 55%;
    margin-top: -18px;
    border-width: 1.2em 0px 1.2em 1.2em;
    border-style: solid;
    border-color: #DDD #DDD #DDD transparent;
    left: -1.1em;
    outline: none;
}

.novo-menu #breadcrumbs-two a::before {
    content: "";
    position: absolute;
    top: 53%;
    margin-top: -16px;
    border-width: 15px 0 16px 17px;
    border-style: solid;
    border-color: #DDD #DDD #DDD transparent;
    left: -16px;
    outline: none;
}

#breadcrumbs-two a:hover::before {
    border-color: #888 #888 #888 transparent;
    outline: none
}

.novo-menu #breadcrumbs-two a:hover::before {
    border-color: #aaa #aaa #aaa transparent;
    outline: none
}

.novo-menu.navBarMedio ul#breadcrumbs-two li a::before {
    border: 0 none;
    content: ">";
    font-family: ​sans-serif,​Arial;
    font-size: 17px;
    left: -11px;
    line-height: 31px;
}

.novo-menu.navBarPequeno ul#breadcrumbs-two li a::before {
    border: 0 none;
    content: ">";
    font-family: ​sans-serif,​Arial;
    font-size: 17px;
    left: -11px;
    line-height: 31px;
}

#breadcrumbs-two a::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -16px;
    border-top: 1.2em solid transparent;
    border-bottom: 1.2em solid transparent;
    border-left: 1.2em solid #DDD;
    right: -1.11em;
    outline: none
}

.novo-menu #breadcrumbs-two a::after {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -15px;
    border-top: 15px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 17px solid #DDD;
    right: -17px;
    outline: none
}

#breadcrumbs-two a:hover::after {
    border-left-color: #888;
    outline: none
}

.novo-menu #breadcrumbs-two a:hover::after {
    border-left-color: #aaa;
    outline: none
}

.novo-menu.navBarMedio ul#breadcrumbs-two li a::after,
.novo-menu.navBarPequeno ul#breadcrumbs-two li a::after {
    border: 0 none;
}

.novo-menu #breadcrumbs-two > li#menuPopoverAjuda a,
.novo-menu #breadcrumbs-two > li#menuLoginSIIM a {
    padding-right: 28px;
}

#breadcrumbs-two a .lightbulb,
.novo-menu #breadcrumbs-two a .user-card {
    background-image: url("//src.cijun.sp.gov.br/img/media/line-version/PNG/69-lights/24px/lightbulb-4.png");
    background-repeat: no-repeat;
    background-size: 20px auto;
    display: block;
    height: 20px;
    opacity: 0.8;
    position: absolute;
    right: 2px;
    top: 4px;
    width: 20px;
    pointer-events: none;
}

    .novo-menu #breadcrumbs-two a .user-card svg {
        fill: currentcolor;
        height: 20px;
        width: auto;
    }

.novo-menu #breadcrumbs-two a .user-card {
    background-image: none;
    top: 5px;
}

.novo-menu.navBarMedio ul#breadcrumbs-two li a span,
.novo-menu.navBarPequeno ul#breadcrumbs-two li a span {
    display: none;
}

    .novo-menu.navBarPequeno ul#breadcrumbs-two li a span.user-card {
        display: block;
    }
/* Raíz */
#breadcrumbs-two a.root {
    background: #000;
    color: #FFF;
}

    #breadcrumbs-two a.root:hover {
        background: #444;
        color: #FFF
    }

    #breadcrumbs-two a.root::before {
        border-color: #000 #000 #000 transparent;
    }

    #breadcrumbs-two a.root:hover::before {
        border-color: #444 #444 #444 transparent;
    }

    #breadcrumbs-two a.root::after {
        border-left-color: #000;
    }

    #breadcrumbs-two a.root:hover::after {
        border-left-color: #444;
    }
/* Login */
#breadcrumbs-two a.login {
    background: #0098db;
    color: #FFF;
}

    #breadcrumbs-two a.login:hover {
        background: #888;
        color: #FFF
    }

    #breadcrumbs-two a.login::before {
        border-color: #0098db #0098db #0098db transparent;
    }

    #breadcrumbs-two a.login:hover::before {
        border-color: #888 #888 #888 transparent;
    }

    #breadcrumbs-two a.login::after {
        border-left-color: #0098db;
    }

    #breadcrumbs-two a.login:hover::after {
        border-left-color: #888;
    }

#breadcrumbs-two.homologa a.login {
    background: #fd9049;
    color: #fff;
}

    #breadcrumbs-two.homologa a.login::before {
        border-color: #fd9049 #fd9049 #fd9049 transparent;
    }

    #breadcrumbs-two.homologa a.login::after {
        border-left-color: #fd9049;
    }

.popover-content {
    margin-top: -12px;
    padding: 9px 14px 9px;
}
/* Ativo */
#breadcrumbs-two a.atual {
    background: #9ED49B;
    color: #444;
}

    #breadcrumbs-two a.atual:hover {
        background: #888;
        color: #FFF
    }

    #breadcrumbs-two a.atual::before {
        border-color: #9ED49B #9ED49B #9ED49B transparent;
    }

    #breadcrumbs-two a.atual:hover::before {
        border-color: #888 #888 #888 transparent;
    }

    #breadcrumbs-two a.atual::after {
        border-left-color: #9ED49B;
    }

    #breadcrumbs-two a.atual:hover::after {
        border-left-color: #888;
    }