﻿
/* ---------------------------------------------                      MENU NOVO               --------------------------------------------*/

/* Checkbox Hack */
#toggle-1 {
    display: none;
}

.aside_menu_links {
    width: 100%;
    text-align: left;
    padding-left:10%;
    /*line-height:0.4;*/
    
    /*background:blue;*/
    transition:0.4s all;
    display:block;
    
}

    .aside_menu_links:hover {
        background-color: #e5e5e5;
        width: 100%;
        transition: 0.2s all;
        text-decoration: none;
    }

.links_menu_stilo {
    /*display: flex;
    flex-direction: column;*/
    box-shadow: inset 0px 0px 25px rgba(0,0,0,0.1);
    /*background: #cbdbf2;*/
    width: 100%;
}

.lebal {
    -webkit-appearance: push-button;
    -moz-appearance: button;
    display: inline-block;
    cursor: pointer;
    padding: 5px;
}

/* CSS padrão da div */
#mostra {
    display: none;
}

/* CSS quando o checkbox está marcado */
#toggle-1:checked ~ #mostra {
    display: block;
}


/* Google Font CDN Link */
/*@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /*font-family: "Poppins", sans-serif;*/
}

:root {
    --black-color: #f2f2f2;
    --white-color: #0a2c5b;
    --sky-color: #E4E9F7;
    --light-black: #1d1b31;
    --backgroundColor: linear-gradient(90deg, #f2f2f2 20%,#cbdbf2 80%);
}

body {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
}

::selection {
    color: var(--white-color);
    background: var(--black-color);
}

.btn_abaixar_style {
    border: none;
    background-color: transparent;
    /*width:50%;*/
    padding-right: 1rem;
}

.btn_abaixar:active{
    border:none;
    box-shadow:0px;
    outline:none!important;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 55px;
    background: var(--black-color);
    /*padding: 6px 14px;*/
    z-index: 999999;
    box-shadow: 8px 0px 6px -6px rgba(0,0,0,0.2);
    transition: all 0.5s ease;
}

    .sidebar.active {
        width: 240px;
    }

    .sidebar .logo_content .logo {
        color: var(--white-color);
        display: flex;
        height: 50px;
        width: 100%;
        align-items: center;
        opacity: 0;
        pointer-events: none;
        transition: all 0.5s ease;
    }

    .sidebar.active .logo_content .logo {
        opacity: 1;
        pointer-events: none;
    }

.logo_content .logo .logo_name {
    font-size: 20px;
    font-weight: 400;
}

.sidebar #btn_hamburguer {
    position: absolute;
    color: var(--white-color);
    top: 6px;
    left: 50%;
    font-size: 22px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    transform: translateX(-50%);
    cursor: pointer;
}

.sidebar.active #btn_hamburguer {
    left: 90%;
}

.sidebar ul {
    margin-top: 20px;
}

    .sidebar ul li {
        position: relative;
        height: 50px;
        width: 100%;
        margin: 0px 0;
        list-style: none;
        line-height: 50px;
    }

        .sidebar ul li .tooltip {
            position: absolute;
            left: 125px;
            top: 0;
            transform: translate(-50%, -50%);
            border-radius: 6px;
            height: 35px;
            width: 120px;
            background: var(--white-color);
            line-height: 35px;
            text-align: center;
            box-shadow: 0 5px 10px rgba(0,0,0,0.2);
            transition: 0s;
            opacity: 0;
            pointer-events: none;
            display: block;
        }

            .sidebar ul li .tooltip::before {
                content: '';
                width: 0;
                height: 0;
                border-top: 10px solid transparent;
                border-bottom: 10px solid transparent;
                border-right: 10px solid var(--white-color);
                position: absolute;
                left: -8px;
                top: 7px;
            }

.sidebar.active ul li .tooltip {
    display: none;
}

.sidebar ul li:hover .tooltip {
    transition: all 0.5s ease;
    opacity: 1;
    top: 50%;
}

.sidebar ul li input {
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    /*border-radius: 12px;*/
    outline: none;
    border: none;
    background: #1d1b31;
    padding-left: 50px;
    font-size: 18px;
    color: var(--white-color);
}

.sidebar ul li .bx-search {
    position: relative;
    z-index: 99;
    color: var(--white-color);
    font-size: 22px;
    transition: all 0.5s ease;
}

    .sidebar ul li .bx-search:hover {
        background: var(--white-color);
        color: #1d1b31;
    }

.sidebar ul li a {
    color: var(--white-color);
    display: flex;
    align-items: center;
    text-decoration: none;
    /*border-radius: 12px;*/
    white-space: nowrap;
    transition: all 0.4s ease;
}

    .sidebar ul li a:hover {
        /*color: var(--black-color);*/
        background: var(--backgroundColor);
    }

.sidebar ul li i {
    font-size: 18px;
    font-weight: 400;
    height: 50px;
    min-width: 50px;
    /*border-radius: 12px;*/
    line-height: 50px;
    text-align: center;
}

.sidebar ul li img {
    font-size: 18px;
    font-weight: 400;
    height: 20px;
    min-width: 50px;
    /*border-radius: 12px;*/
    line-height: 50px;
    text-align: center;
}

.sidebar .links_name {
    font-size: 15px;
    font-weight: 400;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
}

.sidebar.active .links_name {
    transition: 0s;
    opacity: 1;
    pointer-events: auto;
}

.links_name{
    display:flex;
    justify-content:space-between;
    width:100%;
}

.sidebar .content {
    position: absolute;
    color: var(--white-color);
    bottom: 0;
    left: 0;
    width: 100%;
}

    .sidebar .content .user {
        position: relative;
        padding: 10px 6px;
        height: 60px;
        background: none;
        transition: all 0.4s ease;
    }

.sidebar.active .content .user {
    background: #e5e5e5;
    /*color:white;*/
}

.content .user .user_details {
    display: flex;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: all 0.4s ease;
    z-index: 1000000000;
}

.sidebar.active .user .user_details {
    opacity: 1;
    pointer-events: auto;
}

.content .user .user_details img {
    height: 45px;
    width: 45px;
    object-fit: cover;
    border-radius: 12px;
}

.name_job {
    margin-left: 10px;
}

.user_details .name {
    font-size: 15px;
    font-weight: 400;
}

.user_details .job {
    font-size: 12px;
}

#log_out {
    position: absolute;
    bottom: 5px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 50px;
    line-height: 50px;
    font-size: 20px;
    border-radius: 12px;
    text-align: center;
    transition: all 0.4s ease;
}

.sidebar.active .user #log_out {
    left: 80%;
    background: none;
}

.home_content {
    position: absolute;
    height: 100%;
    width: calc(100% - 78px);
    left: 78px;
    background: var(--sky-color);
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
    transition: all 0.5s ease;
}

.sidebar.active ~ .home_content {
    z-index: 100;
    width: calc(100% - 240px);
    left: 240px;
}

.home_content .text {
    font-size: 25px;
    font-weight: 600;
    color: var(--light-black);
    margin-bottom: 15px;
}

.home_content p {
    margin-bottom: 15px;
}
        
    /*---------------------------------------------------------------------------*/


/*STYLE ASIDE ALL*/

.master-aside {
    grid-area: aside;
    background-color: #f2f2f2;
}

.master-aside-div-navbar{
    z-index:1;
}

.master-aside-card {
    border: none;
    text-align:center;
}

.master-aside-card-icone {
    
    background-color: #f2f2f2;
    border: none;
}

.master-aside-menu-collapse {
    z-index: 2000;
    position: fixed;
    /*top: 65px;*/
    padding-top: 20px;
    /*margin-left: 94px;*/
    background-color: #0A2C5B;
    /*width: 175px;*/
    /*height: 84%;*/
    transition: 0s;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
    

.master-aside-menu-link {
    /*line-height: 1.7;
    border-bottom: 1px solid #1C76F9;*/
    

}

@media only screen and (min-width: 768px) {

    /*NÃO IMPLEMENTADO*/
}

@media only screen and (min-width: 768px) {

    .master-aside {
        padding: 25px 0px 10px 0px;
        border-bottom-right-radius: 25px;
    }

    .master-aside-div-navbar {
        height: 82%;
        text-align: center;
        vertical-align: top;
    }

    .master-aside-div-item {
        padding: 5px 0px 5px 0px;
        text-align: center;
    }
    
    .master-aside-navButton:focus {
        box-shadow: none;
    }

    .master-aside-icone {
        width: 28px;
        height: auto;
        
    }
}
