/*
* Skin: R Green 
* Remplacer.ch
* -----------
*/

/*GENERAL*/
html, body {
    font-family: Roboto,"Helvetica Neue",sans-serif;
}

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}

/*TOP NAV*/
.skin-R-green .main-header .navbar,
.skin-R-green .main-header {
    background-color: #3dffd7;
    padding: 0px;
    font-family: Roboto,"Helvetica Neue",sans-serif;
}

    .skin-R-green .main-header .logo {
        background: rgba(0, 0, 0, 0.1);
        font-family: Roboto,"Helvetica Neue",sans-serif;
    }

    .skin-R-green .main-header .navbar .nav > li > a {
        color: #ffffff;
    }

        .skin-R-green .main-header .navbar .nav > li > a:hover,
        .skin-R-green .main-header .navbar .nav > li > a:active,
        .skin-R-green .main-header .navbar .nav > li > a:focus,
        .skin-R-green .main-header .navbar .nav .open > a,
        .skin-R-green .main-header .navbar .nav .open > a:hover,
        .skin-R-green .main-header .navbar .nav .open > a:focus,
        .skin-R-green .main-header .navbar .nav > .active > a,
        .skin-R-green .main-header .navbar .sidebar-toggle:hover {
            background: rgba(0, 0, 0, 0.1);
        }

    .skin-R-green .main-header .logo:hover {
        background: rgba(0, 0, 0, 0.2);
    }

    .skin-R-green .main-header .navbar .sidebar-toggle,
    .skin-R-green .main-header .logo {
        color: #ffffff;
    }


        /*NAV MIN*/
        .skin-R-green .main-header .logo > .logo-mini {
            color: #1a2226;
            font-weight: bold;
        }

.navbar-minimize > a {
    width: 50px;
    float: left;
    color: #FFFFFF;
    text-align: center;
}

.navbar-minimize .material-icons {
    font-size: 24px !important;
    vertical-align: middle;
    line-height: 50px;
}

.navbar-minimize > a:hover {
    background: rgba(0, 0, 0, 0.1);
}


/*NAVBAR-RIGHT*/
.navbar-right > li > a {
    width: 50px;
    float: left;
    color: #FFFFFF;
    text-align: center;
}



.navbar .notification {
    position: absolute;
    top: 5px;
    right: 7px;
    font-size: 9px;
    background: #f44336;
    color: #FFFFFF;
    padding: 0px 3px;
    line-height: 16px;
}

.navbar-right .material-icons {
    vertical-align: middle;
    line-height: 50px;
}

.navbar-right > li > a:hover {
    background: rgba(0, 0, 0, 0.1);
}


/*SIDE NAV*/
.skin-R-green .wrapper,
.skin-R-green .main-sidebar,
.skin-R-green .left-side {
    background-color: #222d32;
}

.skin-R-green .sidebar-menu .material-icons {
    color: #b8c7ce;
    margin-left: -4px;
}

.skin-R-green .sidebar-menu > li > a {
    border-left: 3px solid transparent;
    line-height: normal !important;
}

    .skin-R-green .sidebar-menu > li > a > span {
        vertical-align: super;
        padding-left: 10px;
    }

.skin-R-green .sidebar-menu > li:hover > a {
    border-left-color: #b8c7ce;
    background: #1e282c;
}

.skin-R-green .sidebar-menu > li.active > a,
.skin-R-green .sidebar-menu > li.menu-open > a {
    color: #ffffff;
    background: #1e282c;
    border-left-color: #3dffd7;
}

.skin-R-green .sidebar-menu > li.active > a {
    border-left-color: #3dffd7;
}

.skin-R-green .sidebar-menu > li > .treeview-menu {
    background: #2c3b41;
}

.skin-R-green .sidebar a {
    color: #b8c7ce;
}

.skin-R-green .sidebar-menu .treeview-menu > li > a {
    color: #8aa4af;
}

    .skin-R-green .sidebar-menu .treeview-menu > li.active > a,
    .skin-R-green .sidebar-menu .treeview-menu > li > a:hover {
        color: #ffffff;
    }

.skin-R-green .sidebar a > .caret {
    float:right;
}

@media (min-width: 768px) {
    .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span,
    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
        width: 210px !important;
        min-height: 48px;
    }
}

@media (min-width: 768px) {
    .sidebar-mini:not(.sidebar-mini-expand-feature).sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
        top: 48px;
    }
}
.sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .caret {
    display: none;
}



/*SIDE NAV MOBILE*/
@media (max-width: 767px) {
    .skin-R-green .sidebar a {
        font-size: 16px;
        line-height:30px;
    }
    .skin-R-green .sidebar-menu > li > a {
        padding: 10px 5px 10px 15px;
    }

    .main-sidebar {
        /*width: 100vw;
        -webkit-transform: translate(-768px, 0);
        -ms-transform: translate(-768px, 0);
        -o-transform: translate(-768px, 0);
        transform: translate(-768px, 0);*/
    }

    .skin-R-green .sidebar .material-icons {
        font-size: 24px;
    }
}

@media (min-width: 768px) {
    .sidebar-collapse .main-sidebar {
        -webkit-transform: translate(-768px, 0);
        -ms-transform: translate(-768px, 0);
        -o-transform: translate(-768px, 0);
        transform: translate(-768px, 0);
    }
}

/*USER MENU*/
.navbar-nav > .user-menu > .dropdown-menu {
    padding: 0;
}

.skin-R-green .main-header li.user-header {
    background-color: #222d32;
}

.skin-R-green .user-panel > .info,
.skin-R-green .user-panel > .info > a {
    color: #fff;
}

.navbar-nav > .user-menu > .dropdown-menu > li.user-header > img {
    border-radius: 50%;
}

/*PAGE*/
.content-wrapper {
    background-color: #F5F5F6 !important;
}

/*FOOTER*/
.main-footer {
    padding: 0;
    border-top: 1px solid #e7e7e7;
    background-color: #F5F5F6 !important;
    min-height: 55px;
}

footer ul {
    margin-bottom: 0;
    padding: 0;
    list-style: none;
}

footer ul li {
    display: inline-block;
    }

footer ul li a {
    color: inherit;
    padding: 15px;
            font-size: 12px;
            text-transform: uppercase;
            text-decoration: none;
            position: relative;
            display: block;
        }

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

footer .copyright {
    padding: 15px;
    margin: 0;
}

@media (max-width: 768px) {
    .main-footer {
        min-height: 45px;
    }
    footer .copyright {
        display: none;
    }
    footer ul li a {
        padding:10px;
      font-size:10px;
    }
}