@import url(https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300ita‌​lic,400italic,500,500italic,700,700italic,900italic,900);

body {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
}

:root {
    --primary: #0074d9;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;

    --aqua: #7fdbff;
    --blue: #0074d9;
    --navy: #001f3f;
    --teal: #39cccc;
    --green: #2ecc40;
    --olive: #3d9970;
    --lime: #01ff70;
    --yellow: #ffdc00;
    --orange: #ff851b;
    --red: #ff4136;
    --fuchsia: #f012be;
    --purple: #b10dc9;
    --maroon: #85144b;
    --white: #ffffff;
    --silver: #dddddd;
    --gray: #aaaaaa;
    --black: #111111;
}

.sidebar {
    color: #222;
}

#sidebar {
    width: 250px;
    padding: 0;
    top: 55px;
    background-color: #fff;
    border-right: 1px solid #eee;
}

#sidebar.closed {
    width: 50px;
}

.nav-item {
    border-bottom: 1px solid #eee;
    overflow: hidden;
    display: block;
    width: 100%;
}

#sidebar .title {
    color: #333;
    display: inline-block;
    font-size: 0.85rem;
    font-weight: 400;
    width: 170px;
}

#sidebar .child.title {
    font-size: 0.8rem;
}

.ico {
    width: 30px;
    color: var(--primary);
}

.child.ico {
    color: #666;
}

#sidebar a {
    cursor: pointer;
    display: block;
    text-decoration: none;
    text-wrap: nowrap;
}

#sidebar a:hover {
    background-color: #b4d8f8;
}

.caret-icone {
    margin-left: 13px;
    color: black;
}

@media (max-width: 767.98px) {
    #sidebar {
        position: absolute;
        z-index: 1000;
    }

    #sidebar.closed {
        width: 0;
    }
}