﻿


.p-5{padding:5px;}
.pr-5{padding-right:5px;}
.ml5 {margin-right: 5px;}
.d-flex{display:flex;}
.pl-10{padding-left:10px;}
.wrap {display:inline-flex;padding-top: 66px;width:100%;}


/*---SITE HEADER & SIDE MENU start---*/
.nav-bar{background:#ffffff;box-shadow: 0px 0px 10px rgba(123, 123, 123, 0.3);position: fixed;width:100%;top:0;z-index:1;display: inline-block;}
.nav-bar .navbar-brand {margin-top: 0px;width: 10.4em;display: inline-table;padding: 8px 2px;outline: none;float:left;}
.nav-bar .navbar-brand > img{width: 140px;display:block;}
.nav-bar a.btn_home {color: #116fa0;background: #edebe9;font-size: 20px;margin-top: 15px;display: inline-block;width: 34px;height: 34px;text-align: center;line-height: 34px;outline: none;text-decoration: none;cursor: pointer;float:left;}
.nav-bar a.btn_home:hover{color: #ffffff;background: #116fa0;}
.nav-bar .nav.menu {float: right !important;margin:0; margin-top: 0px;display:inline-block;}
.nav-bar .nav.menu>li{float:left !important;}
.nav-bar .nav.menu > li .wallet {height: 50px;display: inline-block;text-align: center;margin: 8px 5px 0 5px;border-radius: 5px;overflow: hidden;background: #f6f8fb;}
.nav-bar .nav.menu > li .wallet .lbl {background: #0080ff;display: block;color: #ffffff;font-size: 13px;padding: 0px 15px;}
.nav-bar .nav.menu > li .wallet .amt {font-size: 18px;display: inline-block;color: #111111;margin-top: 2px;font-weight: 500;}
.nav-bar .nav.menu > li .wallet .amt i {margin-right: 2px;font-size: 16px;color: #0080ff;}
.nav-bar .nav.menu>li.dropdown > a {display:inline-block;color: #116fa0;font-size: 15px;font-weight: 400;line-height: 60px;background-color: transparent;padding: 0px 15px;height: 65px;}
.nav-bar .nav.menu>li.dropdown > a:hover,
.nav-bar .nav.menu>li.dropdown > a:focus{background:transparent;}
.nav-bar .nav.menu>li.dropdown > a.link1{color: #116fa0;background-color: transparent;border-radius: 5px;}
.nav-bar .nav.menu>li.dropdown > a.link1:hover{background-color: #f3f3f3;}
.nav-bar .nav.menu>li.dropdown .user_icon{border: 2px solid #e6e6e6;width: 44px;height: 44px;display: inline-block;vertical-align: middle;background: #f4f4f4;position: relative;overflow: hidden;border-radius: 50%;text-align: center;line-height: 42px;font-size: 24px;color: #116fa0;}
.nav-bar .nav.menu>li.dropdown .user_icon .im{width: 44px; height:44px;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.nav-bar .nav.menu>li.dropdown span.fa{margin-left: 10px;font-size: 14px;}
.nav-bar .nav.menu>li .dropdown-menu.ddl {background: #fff;left: auto;min-width: 200px;right: 0;border: 0px solid #efefef;padding:0;inset: 0px 13px auto auto !important;-webkit-box-shadow: 0 6px 12px rgb(0 0 0 / 18%);box-shadow: 0 6px 12px rgb(0 0 0 / 18%);border-radius:0;}
.nav-bar .nav.menu>li .dropdown-menu.ddl::before{content: "";position: absolute;top: -8px;right: 19px;transform: translate(-50%, 0) rotate(45deg);text-align: center;box-shadow: -2px -2px 5px -2px rgba(0, 0, 0, 0.2);background: #116fa0;height: 16px;width: 16px;z-index: -1;}
.nav-bar .nav.menu>li .dropdown-menu.ddl > li{border-bottom: 1px solid #f0f0f0;text-align:center;}
.nav-bar .nav.menu>li .dropdown-menu.ddl > li .user{color: #ffffff;background: #116fa0;display: block;padding: 5px;font-weight: 500;}
.nav-bar .nav.menu>li .dropdown-menu.ddl > li:last-child{border:0;}
.nav-bar .nav.menu>li .dropdown-menu.ddl > li > a {color: #76838f;padding: 8px;text-decoration:none;display:block;font-size:13px;}
.nav-bar .nav.menu>li .dropdown-menu.ddl > li > a:hover{background:#f2f2f2;}
.nav-bar .nav.menu>li .dropdown-menu.ddl > li > a span.icon {    margin-right: 5px;color: #76838f;font-size: 16px;line-height: 18px;vertical-align: middle;}
.nav-bar .nav.menu li .top-bar {display:none;}
.nav-bar .nav .dropdown-menu > li > a:hover {background: #3355ff;}
.side-menu-link {left: 21em;}
.burger {position: relative;width: 30px;height: 30px;left: 5px;top: 5px;z-index: 500000;display:inline-block;}
.burger .burger_inside {position: absolute;background-color: #282b2b;width: 26px;height: 3px;left: 2.5px;-webkit-transition: all 0.5s ease-out;-moz-transition: all 0.5s ease-out;-ms-transition: all 0.5s ease-out;-o-transition: all 0.5s ease-out;transition: all 0.5s ease-out;}
.burger #bgrOne {top: 0;}
.burger #bgrTwo {top: 8px;}
.burger #bgrThree {top: 16px;}
#side-menu {position: sticky;z-index: 111;background: #fafafa;width: 15em;padding-top: 0;padding-right: 0;padding-left: 0;float: left;display: block;left: 0;min-height: calc(100vh - 66px);border-right: 0px solid #e6e6e6;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-ms-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;top:0;}
.wrap>.content {width:100%;min-height: calc(100vh - 66px)}
.wrap>.content .top-bar {height: 40px;background: #ddd;}
.wrap>.content .content-inner {padding: 10px 0;margin: 0;background: #ffffff;display: block;border: 1px solid #f0f0f0;min-height: 100%;}

.module-list {display: inline-block;margin: 0;padding: 5px;list-style: none;width: 50px;float: left;background: #f0f0f0;min-height: 100%;}
.module-list li {margin-bottom: 10px;}
.module-list li a {display: inline-flex;width: 40px;height: 40px;border-radius: 4px;justify-content: center;text-decoration: none;align-items: center;position: relative;color:#616161;}
.module-list li a .material-symbols-outlined {font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 48;font-size: 24px;}
.module-list li a:hover {background: #ffffff;color: #116fa0;}
.module-list li a:hover .material-symbols-outlined {font-variation-settings: 'FILL' 1;}
.module-list li.active a {color: #116fa0;background: #ffffff;}
.module-list li.active a .material-symbols-outlined {font-variation-settings: 'FILL' 1;}
.module-list li.active a::after {position: absolute;content: "";background: #116fa0;width: 2px;top: 5px;bottom: 5px;left: -2px;}

.wrap ul.accordion {width: calc(100% - 50px);background: transparent;display: inline-block;float: left;overflow: auto;max-height: 90vh;}
.wrap ul.accordion::-webkit-scrollbar-track{border-radius: 0px;background-color: #F5F5F5;}
.wrap ul.accordion::-webkit-scrollbar{width: 8px;background-color: #F5F5F5; height:10px;}
.wrap ul.accordion::-webkit-scrollbar-thumb{border-radius: 6px;background-color: #e6e6e6;}
.wrap ul.accordion::-webkit-scrollbar-thumb:hover{background-color: #bbbbbb;}
.wrap.active .c_overlay {background: #000000;position: fixed;left: 0;top: 0;bottom: 0;right: 0;z-index: -1;opacity: 0.7;display: block;-webkit-transition: opacity .3s, width 0s .3s, height 0s .3s;transition: opacity .3s, width 0s .3s, height 0s .3s;}
.c_overlay{display:none;}
.wrap ul.accordion .link {cursor: pointer;display: block;padding: 10px 5px;color: #bbbbbb;font-size: 14px;margin: 0; display: flex;align-items: center;}
.wrap ul.accordion .link:hover .link_lbl{color:#111111;}
.wrap ul.accordion>li:first-child .link{border-top: 0;}
.wrap ul.accordion>li:last-child .link{border-bottom: 0px solid #ebebeb;}
.wrap ul.accordion li .link i {font-size: 14px;width: 18px;display: block;text-align: center;-webkit-transition: all 0.25s ease;-o-transition: all 0.25s ease;transition: all 0.25s ease;}
.wrap ul.accordion li .link .link_lbl{position: relative;display: block;color: #666666;width: 100%;padding: 5px 0;font-weight: 500;}
.wrap ul.accordion a {text-decoration: none; display:block;padding: 0; background: #f9f9f9;}
.wrap ul.accordion li.open .link .link_lbl{color:#111111;}
.wrap ul.accordion li.open .link i {transform: rotate(90deg);-webkit-transition: all 0.25s ease;-o-transition: all 0.25s ease;transition: all 0.25s ease;}

.wrap ul.accordion li.open .link.pointer_none{pointer-events:none;}
.wrap ul.accordion li ul.submenu {display: none;background: transparent;font-size: 14px;padding: 0;}
.wrap ul.accordion li ul.submenu li {list-style: none;}
.wrap ul.accordion li ul.submenu li a {display: block;text-decoration: none;color: #666666;padding: 10px 2px 10px 15px;-webkit-transition: all 0.25s ease;-o-transition: all 0.25s ease;transition: all 0.25s ease;font-size: 13px; font-weight:400;letter-spacing:0;}
.wrap ul.accordion li ul.submenu li a:hover {background: #edebe9;color: #116fa0;}
.wrap ul.accordion li ul.submenu li.active{color:#116fa0;display: block;padding: 11px 2px 11px 15px;background: #ffffff;font-size: 13px; font-weight:400;position:relative;letter-spacing: 0;}
.wrap ul.accordion li ul.submenu li.active::before{content: "\f0d9";font-family: 'FontAwesome';position: absolute;right: 0px;height: 100%;top: 0;font-size: 27px;border-right: 2px solid #116fa0;width: 8px;overflow:hidden;}
.wrap ul.accordion li ul.submenu li span.bull {width: 6px;height: 6px;display: inline-block;background: #d0d0d0;border-radius: 10px;margin: 0px 18px 2px 8px;}
.wrap ul.accordion li ul.submenu li.active span.bull{background:#116fa0;}

.wrap>.content { background:transparent;height: 90vh;overflow:auto;padding:8px;}
.wrap>.content::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);border-radius: 0px;background-color: #F5F5F5;}
.wrap>.content::-webkit-scrollbar{width: 12px;background-color: #F5F5F5; height:10px;}
.wrap>.content::-webkit-scrollbar-thumb{border-radius: 5px;-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.1);background-color: #e6e6e6;}
.wrap>.content::-webkit-scrollbar-thumb:hover{background-color: #bbbbbb;}



@media screen and (max-width: 768px) {
    .nav-bar .navbar-brand {margin-top: 0;padding-left: 0;width:auto;}
    .nav-bar .navbar-brand > img {width: 50px;margin-top:15px;}
    .nav-bar a.btn_home{display:none;}
    .nav-bar .nav.menu {margin-top: 5px;}
    .nav-bar .nav.menu li .top-bar {display:block;width: 40px;margin-top: 14px;}
    .wrap #side-menu{left:-21em;position:absolute;}
    .wrap.active #side-menu {left: 0;box-shadow: 6px 13px 10px 0px rgb(0 0 0 / 20%);}
    .wrap .side-menu-link {display: inline-block;}
    .wrap #side-menu #qform {position: absolute;top: 10px;}
    .wrap .content {left: 0;overflow: auto;}
    .wrap.active #bgrOne {top: 10px;transform: rotate(225deg);}
    .wrap.active #bgrTwo {opacity: 0;}
    .wrap.active #bgrThree {top: 10px;transform: rotate(315deg);}

    .nav-bar .nav.menu > li .wallet {
        margin: 8px 2px 0 2px;
    }
        .nav-bar .nav.menu > li .wallet .lbl {
            font-size: 10px;
            padding: 0px 5px;
            letter-spacing: 0;
        }
        .nav-bar .nav.menu > li .wallet .amt {
            font-size: 13px;
        }
            .nav-bar .nav.menu > li .wallet .amt i {
                font-size: 12px;
            }
    .nav-bar .nav.menu > li.dropdown > a {
        font-size: 13px;
        padding: 0px 5px;
    }
    .nav-bar .nav.menu > li.dropdown .user_icon {
        width: 38px;
        height: 38px;
        line-height: 36px;
        font-size: 18px;
    }


}

@media screen and (max-width: 548px) {
    .nav-bar .nav.menu{margin-top: 0;}
    .nav-bar .nav.menu li {position:static;}
    .nav-bar .nav.menu li.dropdown{margin-right: 35px;}

    .nav-bar .nav.menu li .top-bar {position: absolute;top: 4px;right: 10px;}
}


@media screen and (min-width: 769px) {
    .side-menu-link {display: none;}

}
/*---SITE HEADER & SIDE MENU end---*/
