:root { --red: #d9534f; --green: #5cb85c; --orange: #f0ad4e; --blue-0: rgb(0, 0, 0); --blue-1: rgb(204, 250, 255); --blue-2: rgb(178, 242, 255); --blue-3: rgb(153, 229, 255); --blue-4: rgb(127, 212, 255); --blue-5: rgb(101, 191, 255); --blue-6: rgb(76, 165, 255); --blue-7: rgb(90, 136, 255); --blue-8: rgb(25, 101, 240); --blue-9: rgb(0, 63, 200); --border-style: 1px solid rgba(0,0,0,.125); }

@import url('https://fonts.googleapis.com/css?family=Roboto');
body { overflow-x: hidden; }
button { background-color: var(--blue-6); color: white; }
    button:hover, button:focus { background-color: var(--blue-7); color: white !important; }
.list-unstyled { padding-left: 0; list-style: none; }

.align-items-stretch { -webkit-box-align: stretch !important; -ms-flex-align: stretch !important; align-items: stretch !important; }
.wrapper { width: 100%; display: flex; }
textarea.form-control { height: 55px; }
/*2 rows.*/


#sidebar .menu-wrapper { width: 250px; }
#sidebar { min-width: 250px; max-width: 250px; height: 100vh; display: inline-flex; position: relative; background: var(--blue-6); color: #fff; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; position: relative; }
    #sidebar .h6 { color: #fff; }
    #sidebar.active { margin-left: -250px; }
        #sidebar.active .custom-menu { margin-right: -50px; }
    #sidebar h1 { margin-bottom: 10px; font-weight: 700; margin-top: 10px; font-size: 32px; }
        #sidebar h1 .logo { color: #fff; }
    #sidebar ul.components { padding: 0; }
    #sidebar ul li { font-size: 16px; }
        #sidebar ul li > ul { margin-left: 10px; }
            #sidebar ul li > ul li { font-size: 14px; }
        #sidebar ul li a { padding: 10px; display: block; color: rgba(255, 255, 255, 0.8); border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
            #sidebar ul li a:hover { color: #fff; }
        #sidebar ul li.active > a { background: transparent; color: #fff; }
    #sidebar .footer { padding: 10px; position: absolute; bottom: 0px; }

    #sidebar h1 { padding: 10px; }

    #sidebar .custom-menu { display: inline-block; position: absolute; top: 20px; right: 0; margin-right: -50px; -webkit-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; z-index: 999; }

        #sidebar .custom-menu .btn { width: 40px; height: 40px; border-radius: 50%; }
            #sidebar .custom-menu .btn.btn-primary { background: var(--blue-6); border-color: var(--blue-7); }
                #sidebar .custom-menu .btn.btn-primary:hover, #sidebar .custom-menu .btn.btn-primary:focus { background: var(--blue-8) !important; border-color: #6749b9 !important; }

a[data-toggle="collapse"] { position: relative; }

.dropdown-toggle::after { display: block; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); }

#content { width: 100%; padding: 0px; height: 100vh; display: inline-flex; position: relative; -webkit-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; }

    #content #header-bar { display: inline-block; width: 100%; margin-top: 20px;}
    #content .title { padding-left: 60px; width: 49%; display: inline-block; margin-top:0px; margin-bottom: 0px;  }
    #content .buttons { width: 49%; display: inline-block; }
        #content .buttons button, #content .buttons a { float: right; margin-right: 5px; }
        #content .buttons button:first-child { margin-right: 0px; }

    #content .content-body { width: 100%; position: absolute; top: 75px; padding: 0px 15px; }



@media (max-width: 991.98px) {
    #sidebarCollapse span { display: none; }

    #sidebar { margin-left: -250px; }
        #sidebar.active { margin-left: 0; }
}


@media (prefers-reduced-motion: reduce) {
    #sidebar .custom-menu { -webkit-transition: none; -o-transition: none; transition: none; }
}

/* Hide/rearrange for smaller screens */
@media screen and (max-width: 767px) { /* Hide captions */
    .carousel-caption { display: none; }
}