.sidebar .sidebar-toggle {
    color: #fff;
    background: #fff;
}

    .sidebar .sidebar-toggle:hover {
        color: #f6f6f6;
        background-color: #5c34a4
    }

.main-sidebar {
    background-color: #264653;
}

.sidebar-menu > li > a {
    color: #fff;
    text-decoration: none;
}

    .sidebar-menu > li > a:hover {
        color: #333
    }

.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a {
    color: #fff;
    background: #3c5965;
}

.sidebar-menu .treeview-menu > li > a {
    color: #333;
}

    .sidebar-menu .treeview-menu > li > a:hover {
        color: #fff;
        background: #3c5965;
        border-radius: 5px;
    }

.sidebar-menu .treeview-menu > li.active > a {
    color: #fff;
    background: #3c5965;
    border-radius: 5px;
}

.fixed .main-header, .fixed .main-sidebar, .fixed .left-side {
    position: fixed
}

.fixed .main-header {
    top: 0;
    right: 0;
    left: 0
}

.fixed .content-wrapper {
    margin-top: 45px
}

.content-wrapper {
    height: 100%;
    z-index: 800;
    margin-left: 245px;
    z-index: 820;
    padding: 15px;
    transition: all 0.3s ease-in-out
}

.main-sidebar .sidebar-toggle {
    float: left;
    background-color: transparent;
    background-image: none;
    padding: 11px 15px;
    font-family: fontAwesome;
    position: relative;
    transition: all 0.3s ease;
    max-height: 50px;
    color: #fff;
    text-decoration: none;
}

    .main-sidebar .sidebar-toggle:before {
        content: "\f0c9";
        font-size: 21px
    }

    .main-sidebar .sidebar-toggle.Mobile {
        display: block;
        z-index: 999;
        position: absolute;
        left: 0;
        top: 50px;
    }

.sidebar-toggle.Desktop {
    display: none;
}

.tile-toggle {
    float: left;
    background-color: #e68e34;
    background-image: none;
    padding: 10px 14.5px;
    font-family: fontAwesome;
    position: relative;
    transition: all 0.3s ease;
    max-height: 50px;
    color: #fff;
    text-decoration: none;
}

    .tile-toggle:before {
        content: "\f00a";
        font-size: 15px
    }


.sidebar-toggle { /*background-color:#3c5965;*/
    background-image: none;
    padding: 8px 10px 0;
    font-family: fontAwesome;
    position: relative;
    transition: all 0.3s ease;
    max-height: 53px;
    color: #fff;
    text-decoration: none;
    float: left;
}

    .sidebar-toggle:before {
        content: "\f0c9";
        font-size: 27px
    }

    .sidebar-toggle:hover {
        color: #fff;
    }

    .sidebar-toggle:focus, .sidebar-toggle:active {
        color: #fff;
    }

.main-sidebar {
    position: absolute;
    top: 50px;
    left: 0;
    min-height: 100vh;
    width: 245px;
    z-index: 810;
    box-shadow: 0px 8px 17px rgba(0,0,0,0.2);
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out
}


.slimScrollDiv {
    border-bottom: 1px solid #777;
}

.slimScrollBar {
    background: #fff !important;
    width: 8px !important;
    opacity: 1 !important;
    z-index: 9 !important;
    right: 0;
    display: none;
}

.sidebar .sidebar-toggle {
    color: #fff;
    background: #fff;
}

    .sidebar .sidebar-toggle:hover {
        color: #f6f6f6;
        background-color: #5c34a4
    }

.main-sidebar {
    background-color: #264653;
}

.sidebar-menu > li > a {
    color: #cfcfcf;
    text-decoration: none;
    font-size: 15px;
}

    .sidebar-menu > li > a:hover {
        color: #333
    }

.sidebar-menu > li:hover > a, .sidebar-menu > li.active > a {
    color: #fff;
    background: #3c5965;
}

.sidebar-menu .treeview-menu > li > a {
    color: #fff;
}

    .sidebar-menu .treeview-menu > li > a:hover {
        color: #fff;
    }

.sidebar-menu .treeview-menu > li.active > a {
    color: #fff;
}

.fixed .main-header, .fixed .main-sidebar, .fixed .left-side {
    position: fixed
}

.fixed .main-header {
    top: 0;
    right: 0;
    left: 0
}

.fixed .content-wrapper {
    margin-top: 40px
}


.content-wrapper {
    height: 100%;
    z-index: 800;
    margin-left: 245px;
    z-index: 820;
    padding: 15px;
    transition: all 0.3s ease-in-out
}

.main-sidebar .sidebar-toggle {
    float: left;
    background-color: transparent;
    background-image: none;
    padding: 11px 15px;
    font-family: fontAwesome;
    position: relative;
    transition: all 0.3s ease;
    max-height: 50px;
    color: #fff;
    text-decoration: none;
}

    .main-sidebar .sidebar-toggle:before {
        content: "\f0c9";
        font-size: 21px
    }

    .main-sidebar .sidebar-toggle.Mobile {
        display: block;
        z-index: 999;
        position: absolute;
        left: 0;
        top: 50px;
    }

.sidebar-toggle.Desktop {
    display: none;
}

.tile-toggle {
    float: left;
    background-color: #e68e34;
    background-image: none;
    padding: 10px 14.5px;
    font-family: fontAwesome;
    position: relative;
    transition: all 0.3s ease;
    max-height: 50px;
    color: #fff;
    text-decoration: none;
}

    .tile-toggle:before {
        content: "\f00a";
        font-size: 15px
    }


.sidebar-toggle { /*background-color:#3c5965;*/
    background-image: none;
    padding: 6px 15px;
    font-family: fontAwesome;
    position: relative;
    transition: all 0.3s ease;
    max-height: 53px;
    color: #fff;
    text-decoration: none;
    float: left;
}

    .sidebar-toggle:before {
        content: "\f0c9";
        font-size: 21px
    }

    .sidebar-toggle:hover {
        color: #fff;
    }

    .sidebar-toggle:focus, .sidebar-toggle:active {
        color: #fff;
    }

.sidebar-collapse .slimScrollDiv {
    overflow: visible !important;
}

.sidebar-collapse .sidebar {
    overflow: visible !important;
}

.main-sidebar {
    position: absolute;
    top: 50px;
    left: 0;
    min-height: 100vh;
    width: 245px;
    z-index: 810;
    box-shadow: 0px 8px 17px rgba(0,0,0,0.2);
    transition: transform 0.3s ease-in-out, width 0.3s ease-in-out
}

.sidebar {
    padding-bottom: 10px;
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    height: 90vh;
}

    .sidebar-menu:hover {
        overflow: visible
    }

    .sidebar-menu > li {
        position: relative;
        margin: 0;
        padding: 0;
    }

        .sidebar-menu > li > a {
            padding: 7px 5px;
            display: block;
            position: relative;
        }

            .sidebar-menu > li > a > {
                width: 20px;
                text-align: center;
            }

        .sidebar-menu > li .label, .sidebar-menu > li .badge {
            margin-top: 3px;
            margin-right: 5px
        }

    .sidebar-menu li.header {
        padding: 10px 25px 10px 15px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden
    }

    .sidebar-menu li > a > .fa-angle-down {
        width: auto;
        height: auto;
        position: absolute;
        right: 0;
        padding: 0;
        float: none;
        margin-right: 10px;
        margin-top: 3px;
        transition: all 0.3s ease
    }

    .sidebar-menu li.active > a > .fa-angle-down {
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        -ms-transform-origin: center;
        transform-origin: center
    }

    .sidebar-menu li.active > .treeview-menu {
        display: block
    }

    .sidebar-menu .treeview-menu {
        display: none;
        list-style: none;
        margin: -6px 0 0;
        padding-left: 5px;
        padding-top: 5px;
        padding-bottom: 5px;
    }

        .sidebar-menu .treeview-menu > li {
            margin: 0
        }

            .sidebar-menu .treeview-menu > li > a {
                padding: 5px 5px 5px 15px;
                display: block;
                position: relative;
                text-decoration: none;
            }

                .sidebar-menu .treeview-menu > li > a > .fa-angle-down, .sidebar-menu .treeview-menu > li > a > .fa-angle-down {
                    width: auto
                }

                .sidebar-menu .treeview-menu > li > a > i:first-of-type {
                    margin-right: 5px
                }


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

    .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .main-footer {
        margin-left: 50px !important;
        z-index: 99999
    }

    .sidebar-mini.sidebar-collapse .main-sidebar {
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        width: 50px !important;
        z-index: 99999
    }

    .sidebar-mini.sidebar-collapse .sidebar-menu > li {
        position: relative
    }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
            margin-right: 0;
            position: relative;
            transition: none
        }

            .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .fa-angle-down {
                display: none
            }

            .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
                border-top-right-radius: 4px;
                padding: 9px 0 !important;
            }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span {
            border-bottom-right-radius: 4px
        }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
            padding-top: 5px;
            padding-bottom: 5px;
            border-bottom-right-radius: 4px
        }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right), .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
            display: block !important;
            position: absolute;
            width: 220px;
            left: 50px
        }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
            top: 0;
            margin-left: -3px;
            padding: 9px 5px 9px 10px;
            background-color: inherit
        }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
            top: 46px;
            margin-left: 0
        }

    .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info {
        display: none !important;
        transform: translateZ(0)
    }

    .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span, .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu, .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right {
        display: none !important;
        transform: translateZ(0);
        position: relative;
        z-index: 9999;
    }

    .sidebar-mini.sidebar-collapse .sidebar-menu li.header {
        display: none !important;
        transform: translateZ(0)
    }

    .sidebar-collapse .sidebar-menu .bi {
        font-size: 18px;
    }
}


@media (max-width: 768px) {
    .sidebar-collapse .content-wrapper {
        margin-left: 0
    }

    .top-nav {
        margin-right: 20px
    }

    .Inner_Container {
        margin: 10px 0 10px !important;
    }

    .main-sidebar {
        top: 55px;
    }
}

@media (max-width: 767px) {
    .fixed .content-wrapper {
        margin-top: 50px
    }

    .content-wrapper {
        margin-left: 0
    }

    .sidebar-open .content-wrapper {
        -ms-transform: translate(230px, 0);
        transform: translate(230px, 0)
    }

    .main-header {
        position: relative
    }

    .logo {
        width: auto;
        height: 50px;
        padding: 0 0 0 50px;
    }

    .navbar {
        width: 100%;
        float: none;
        margin: 0
    }

    .main-sidebar {
        padding-top: 0px;
        -ms-transform: translate(-230px, 0);
        transform: translate(-230px, 0)
    }

    .sidebar-open .main-sidebar {
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    .sidebar-toggle.Mobile {
        display: none;
        z-index: 999;
        position: absolute;
    }

    .sidebar-toggle.Desktop {
        display: block;
        z-index: 999;
        position: absolute;
    }

    .tile-toggle.Mobile {
        display: block;
        z-index: 999;
        position: absolute;
        left: 0;
    }

    .sidebar .user-panel {
        margin-top: 20px;
    }
}

.sidebar-menu {
    list-style: none;
    margin: 0;
    padding: 5px;
    white-space: nowrap;
    overflow: hidden;
    height: 80vh;
}

    .sidebar-menu:hover {
        overflow: visible
    }

    .sidebar-menu > li {
        position: relative;
        margin: 3px 0;
        padding: 0;
    }

        .sidebar-menu > li > a {
            padding: 8px 5px;
            display: block;
            position: relative;
            border-radius: 5px;
        }

            .sidebar-menu > li > a > {
                width: 20px;
                text-align: center;
            }

        .sidebar-menu > li .label, .sidebar-menu > li .badge {
            margin-top: 3px;
            margin-right: 5px
        }

    .sidebar-menu li.header {
        padding: 10px 25px 10px 15px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden
    }

    .sidebar-menu li > a > .fa-angle-down {
        width: auto;
        height: auto;
        position: absolute;
        right: 0;
        padding: 0;
        float: none;
        margin-right: 10px;
        margin-top: 3px;
        transition: all 0.3s ease
    }

    .sidebar-menu li.active > a > .fa-angle-down {
        -ms-transform: rotate(180deg);
        transform: rotate(180deg);
        -ms-transform-origin: center;
        transform-origin: center
    }

    .sidebar-menu li.active > .treeview-menu {
        display: block
    }

    .sidebar-menu .treeview-menu {
        display: none;
        list-style: none;
        margin: 0 0 0 10px;
        padding: 5px;
        border-left: 1px solid #3c5965;
        background: #264653;
    }

        .sidebar-menu .treeview-menu > li {
            margin: 0
        }

            .sidebar-menu .treeview-menu > li > a {
                padding: 5px 5px 5px 10px;
                display: block;
                position: relative;
                text-decoration: none;
                font-size: 15px;
            }

                .sidebar-menu .treeview-menu > li > a > .fa-angle-down, .sidebar-menu .treeview-menu > li > a > .fa-angle-down {
                    width: auto
                }

                .sidebar-menu .treeview-menu > li > a > i:first-of-type {
                    margin-right: 5px
                }

@media (max-width: 480px) {
    .page-title {
        margin-top: -10px;
        margin-left: -10px;
        margin-right: -10px;
        padding: 20px
    }
}

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

    .sidebar-mini.sidebar-collapse .content-wrapper, .sidebar-mini.sidebar-collapse .main-footer {
        margin-left: 50px !important;
        z-index: 840
    }

    .sidebar-mini.sidebar-collapse .main-sidebar {
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
        width: 50px !important;
        z-index: 850
    }

    .sidebar-mini.sidebar-collapse .sidebar-menu > li {
        position: relative
    }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li > a {
            margin-right: 0;
            position: relative;
            transition: none
        }

            .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .fa-angle-down {
                display: none
            }

            .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span {
                border-top-right-radius: 4px;
                padding: 9px 0 !important;
            }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li:not(.treeview) > a > span {
            border-bottom-right-radius: 4px
        }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu {
            padding-top: 5px;
            padding-bottom: 5px;
            border-bottom-right-radius: 4px
        }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span:not(.pull-right), .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
            display: block !important;
            position: absolute;
            width: 220px;
            left: 35px;
            z-index: 99;
        }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > a > span {
            top: 0;
            margin-left: -3px;
            padding: 9px 5px 9px 10px;
            background-color: inherit
        }

        .sidebar-mini.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
            top: 40px;
            margin-left: 0
        }

    .sidebar-mini.sidebar-collapse .main-sidebar .user-panel > .info {
        display: none !important;
        transform: translateZ(0)
    }

    .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > span, .sidebar-mini.sidebar-collapse .sidebar-menu > li > .treeview-menu, .sidebar-mini.sidebar-collapse .sidebar-menu > li > a > .pull-right {
        display: none !important;
        transform: translateZ(0);
        position: relative;
        z-index: 9999;
    }

    .sidebar-mini.sidebar-collapse .sidebar-menu li.header {
        display: none !important;
        transform: translateZ(0)
    }

    .sidebar-collapse .sidebar-menu .bi {
        font-size: 18px;
    }
}

@media (max-width: 768px) {
    .sidebar-collapse .content-wrapper {
        margin-left: 0
    }

    .top-nav {
        margin-right: 20px
    }

    .Inner_Container {
        margin: 10px 0 10px !important;
    }

    .main-sidebar {
        top: 50px;
    }
}


@media (max-width: 767px) {
    .fixed .content-wrapper {
        margin-top: 50px
    }

    .content-wrapper {
        margin-left: 0
    }

    .sidebar-open .content-wrapper {
        -ms-transform: translate(245px, 0);
        transform: translate(245px, 0)
    }

    .main-header {
        position: relative
    }

    .logo {
        width: auto;
        height: 50px;
        padding: 0 0 0 50px;
    }

    .navbar {
        width: 100%;
        float: none;
        margin: 0
    }

    .main-sidebar {
        padding-top: 0px;
        -ms-transform: translate(-245px, 0);
        transform: translate(-245px, 0)
    }

    .sidebar-open .main-sidebar {
        -ms-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    .sidebar-toggle.Mobile {
        display: none;
        z-index: 999;
        position: absolute;
    }

    .sidebar-toggle.Desktop {
        display: block;
        z-index: 999;
        position: absolute;
    }

    .tile-toggle.Mobile {
        display: block;
        z-index: 999;
        position: absolute;
        left: 0;
    }

    .sidebar .user-panel {
        margin-top: 20px;
    }
}

@media (max-width: 480px) {
    .page-title {
        margin-top: -10px;
        margin-left: -10px;
        margin-right: -10px;
        padding: 20px
    }
}