/*
Desde esta hoja de estiilos en cascada, se establecen las propiedades de estilo para los elementos de la nueva vista llamada 'sidebar'
 */
.menu-sidebar {
    background: rgba(119, 119, 119, 0.93);
    color: white;
    font-size: 14px;
    height: 100%;
    width: 230px;
    display: block;
}

.menu-sidebar-left {
    margin-left: -230px;
    position: fixed;
    top: 0;
    left: 0;
    /*z-index: 2;*/
    z-index: 1035;

    -moz-transition: margin-left 0.3s ease-out 0.1s;
    -webkit-transition: margin-left 0.3s ease-out 0.1s;
    transition: margin-left 0.3s ease-out 0.1s;
}

/*
La clase '.menu-sidebar-left-colapsable' es la propuesta para mostrar los elementos del sidebar y los submenus colapsables
 */
.menu-sidebar-left-colapsable {
    /*margin-left: 0;*/
    margin-left: -230px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1035;
    overflow-y: auto;

    -moz-transition: margin-left 0.3s ease-out 0.1s;
    -webkit-transition: margin-left 0.3s ease-out 0.1s;
    transition: margin-left 0.3s ease-out 0.1s;
}

.menu-sidebar-left-colapsable.show {
    margin-left: 0px;
    overflow-x: hidden;
}

.menu-sidebar-right {
    margin-right: -230px;
    position: fixed;
    top: 0;
    right: 0;
    /*z-index: 2;*/
    z-index: 1035;

    -moz-transition: margin-right 0.3s ease-out 0.1s;
    -webkit-transition: margin-right 0.3s ease-out 0.1s;
    transition: margin-right 0.3s ease-out 0.1s;
}

.menu-sidebar-left:hover {
    margin-left: 0px;
}
.menu-sidebar-right:hover {
    margin-right: 0px;
}

.arrow-sidebar {
    background: inherit;
    color: white;
    display: flex;
    width: 34px;
    height: 34px;
    text-align: center;
    justify-content: center;
    align-items: center;
}

/*
La clase '.arrow-sidebar-colapsable' corresponde al elemento cliqueable que va a mostrar el elemento con la clase '.menu-sidebar-left-colapsable' y mostrarlo al usuario
 */
.arrow-sidebar-colapsable {
    background: rgba(119, 119, 119, 0.93);
    color: white;
    display: flex;
    width: 15px;
    height: 100px;
    text-align: center;
    justify-content: center;
    align-items: center;
    border-radius: 0px 10px 10px 0px;
    position: fixed;
    top: 50px;
    left: 0;
}

.arrow-sidebar.arrow-sidebar-left {
    -moz-border-radius: 0px 10px 10px 0px;
    -o-border-radius: 0px 10px 10px 0px;
    -webkit-border-radius: 0px 10px 10px 0px;
    border-radius: 0px 10px 10px 0px;
    position: absolute;
    top: 170px;
    left: 100%;
}
.arrow-sidebar.arrow-sidebar-left-2 {
    -moz-border-radius: 0px 10px 10px 0px;
    -o-border-radius: 0px 10px 10px 0px;
    -webkit-border-radius: 0px 10px 10px 0px;
    border-radius: 0px 10px 10px 0px;
    position: absolute;
    top: 75vh;
    left: 100%;
}
.arrow-sidebar.arrow-sidebar-left-3 {
    -moz-border-radius: 0px 10px 10px 0px;
    -o-border-radius: 0px 10px 10px 0px;
    -webkit-border-radius: 0px 10px 10px 0px;
    background: rgba(92, 193, 223, 0.7);
    border-radius: 0px 10px 10px 0px;
    font-size: 20px;
    position: absolute;
    height: 44px;
    width: 44px;
    top: 150px;
    left: 100%;
    box-shadow: 0px 2px 2px 0px rgba(255, 255, 255, 0.7), /* bottom */
                0px -2px 2px 0px rgba(255, 255, 255, 0.7), /* top */
                2px 0px 2px 0px rgba(255, 255, 255, 0.7); /* right */
}
.arrow-sidebar.arrow-sidebar-right {
    -moz-border-radius: 10px 0px 0px 10px;
    -o-border-radius: 10px 0px 0px 10px;
    -webkit-border-radius: 10px 0px 0px 10px;
    border-radius: 10px 0px 0px 10px;
    position: absolute;
    top: 170px;
    right: 100%;
}

.menu-sidebar .element-list-sidebar {
    padding: 10px 5px 10px 10px;
}

/*
Las clases '.submenu-sidebar-colapsable-1' y '.submenu-sidebar-colapsable-2' representan los niveles de submenu colapsables que hay en el sidebar, y llevan colores de fondo para contrastar con los del elemento padre
 */
.menu-sidebar .submenu-sidebar-colapsable-1 {
    background: rgba(95, 95, 95, 0.93);
}
.menu-sidebar .submenu-sidebar-colapsable-2 {
    background: rgba(70, 70, 70, 0.93);
}

/*
Todo elemento de la clase 'element-list-sidebar' llevara la clase 'menu-options',
indicando que el elemlento en si contiene un submenu; o la clase 'has-info',
indicando la información del elemento
 */
.menu-sidebar .element-list-sidebar.menu-options,
.menu-sidebar .element-list-sidebar.has-info {
    position: relative;
}

/* Nueva clase 'submenu-sidebar' el cual es un submenu de la clase 'menu-options' */
.menu-sidebar .menu-options .submenu-sidebar,
.menu-sidebar .menu-options .submenu-sidebar-2 {
    background: rgba(119, 119, 119, 0.93);
    display: none;
    width: 100%;
}

.menu-sidebar-left .menu-options .submenu-sidebar,
.menu-sidebar-left .menu-options .submenu-sidebar-2 {
    position: absolute;
    top: 0;
    left: 100%;
}
.menu-sidebar-right .menu-options .submenu-sidebar,
.menu-sidebar-right .menu-options .submenu-sidebar-2 {
    position: absolute;
    top: 0;
    right: 100%;
}

/* Nueva clase 'information' el cual es un submenu de la clase 'has-info' */
.menu-sidebar .has-info .information {
    background: rgba(119, 119, 119, 0.93);
    cursor: default;
    display: none;
    padding: 10px 5px 10px 10px;
    width: 100%;
}

.menu-sidebar-left .has-info .information {
    position: absolute;
    top: 0;
    left: 100%;
}
.menu-sidebar-right .has-info .information {
    position: absolute;
    top: 0;
    right: 100%;
}

/* Representacion inmutable de los elementos nspan de la clase 'information' */
.menu-sidebar .has-info .information span {
    display: block;
}

.menu-sidebar .menu-options .pull-left,
.menu-sidebar .menu-options .pull-right {
    font-size: 20px;
}

.menu-sidebar .element-list-sidebar.fondoAzul {
    background: rgba(72, 106, 154, 1) !important;
}

.menu-sidebar .element-list-sidebar.fondoVerde {
    background: rgba(106, 146, 70, 0.7) !important;
}

.menu-sidebar .element-list-sidebar.fondoRojo {
    background: rgba(206, 53, 53, 0.7) !important;
}

.menu-sidebar .element-list-sidebar:hover {
    background: rgba(160, 160, 160, 0.8) !important;
    cursor: pointer;
}

.menu-sidebar .element-list-sidebar.publication-item-bg {
    background: rgba(92, 193, 223, 0.7) !important;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
    transition: background 0.5s ease,
                box-shadow 0.5s linear;
}

.menu-sidebar .element-list-sidebar.publication-item-bg:hover {
    background: rgba(147, 204, 221, 0.9) !important;
    box-shadow: 0px 2px 8px 0px rgba(255, 255, 255, 0.42);
}

/*
'submenu-sidebar' se muestra cuando el cursor pasa por encima del elemento de la clase 'menu-options';
'information' se muestra cuando el cursor pasa por encima del elemento de la clase 'has-info';
 */
.menu-sidebar .menu-options:hover .submenu-sidebar,
.menu-sidebar .has-info:hover .information {
    display: block;
}

.submenu-sidebar .menu-options:hover .submenu-sidebar-2,
.submenu-sidebar .has-info:hover .information {
    display: block;
}

.menu-sidebar .element-list-sidebar.fondoVerde:hover {
    background: rgba(141, 220, 70, 0.7) !important;
}

.menu-sidebar .element-list-sidebar.fondoRojo:hover {
    background: rgba(255, 83, 83, 0.7) !important;
}

.menu-sidebar .element-list-sidebar a {
    text-decoration: none;
    color: inherit;
}

.menu-sidebar .element-list-sidebar a.underline-sidebar {
    text-decoration: underline 0.15em rgba(255, 255, 255, 0);
    transition: text-decoration-color 0.5s linear;
}

.menu-sidebar .element-list-sidebar a.underline-sidebar:hover {
    text-decoration-color: rgba(255, 255, 255, 1);
}

.menu-sidebar .publication-promotion-container {
    align-items: center;
    display: flex;
    justify-content: center;
    margin: 0 15px 30px;
    width: 100%;
}

.menu-sidebar .publication-promotion-container .publication-promotion-button {
    -moz-border-radius: 9999px;
    -webkit-border-radius: 9999px;
    border-radius: 9999px;
    -moz-box-shadow: 0px 2px 8px 0px rgba(255, 255, 255, 0.42);
    -webkit-box-shadow: 0px 2px 8px 0px rgba(255, 255, 255, 0.42);
    box-shadow: 0px 2px 8px 0px rgba(255, 255, 255, 0.42);
}

/*
Nueva clase 'circuloPersonal' que solo encierra en un circulo los iconos correspondientes a 'Contratar Personal' y 'Renunciar Personal'.
Esta clase solo enfatiza dichas opciones mencionadas anteriormente.
 */
span.circuloPersonal {
    border: 2px solid white;
    border-radius: 50%;
    width: 19px;
    height: 19px;
    display: inline-block;
    text-align: center;
    line-height: 16px;
}

h6.version-sidebar {
    padding: 5px 20px;
    color: lightgray;
}

h6.version-sidebar:hover {
    cursor: pointer;
}

.menu-sidebar-left-colapsable > .scrollable::-webkit-scrollbar {
    width: 12px;
}

.menu-sidebar-left-colapsable > .scrollable::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
}

.menu-sidebar-left-colapsable > .scrollable::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

@media (max-height: 800px) {
    .menu-sidebar-left-colapsable > .scrollable {
        max-height: 70vh !important;
        overflow: auto !important;
    }
}