/* Template Name: Moltran Dashboard Author: CoderThemes Email: coderthemes@gmail.com File: Topbar,Left-sidebar,Right-sidebar */ .topbar { -webkit-box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.2); background: #ffffff; box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.2); left: 0px; /*position: fixed; right: 0; top: 0px;*/ z-index: 999; } .topbar .topbar-left { background-color: #eeeeee; float: left; height: 50px; position: relative; width: 240px; z-index: 1; } .topbar .container { background-color: #fff; } .logo { color: #212121 !important; font-size: 18px; font-weight: 700; letter-spacing: .05em; line-height: 50px; text-transform: uppercase; } .logo h1 { height: 50px; margin: 0px auto; text-align: center; } .logo i { color: #ee6e73; font-size: 30px; margin-right: 5px; } .navbar-default { background-color: #ffffff; border-radius: 0px; border: none; margin-bottom: 0px; } .navbar-default .navbar-nav > .open > a { background-color: transparent; } .navbar-default .navbar-nav > .open > a:focus { background-color: transparent; } .navbar-default .navbar-nav > .open > a:hover { background-color: transparent; } .nav > li > a { color: #333333 !important; line-height: 50px; padding: 0px 15px; position: relative; } .nav > li > a i { font-size: 20px; } .nav > li > a .badge { position: absolute; right: 10px; top: 18px; } .profile img { border: 2px solid #edf0f0; height: 36px; width: 36px; } .dropdown-menu-lg { width: 300px; } .dropdown-menu-lg .list-group { margin-bottom: 0px; } .dropdown-menu-lg .list-group-item { border: none; padding: 10px 20px; } .dropdown-menu-lg .media-heading { margin-bottom: 0px; } .dropdown-menu-lg .media-body p { color: #828282; } .notifi-title { border-bottom: 1px solid rgba(0, 0, 0, 0.1); color: #000000; font-size: 16px; font-weight: 400; padding: 5px 0px 10px; } .navbar-form { border: none; box-shadow: none; padding: 0px; } .search-bar { background-color: transparent !important; border: none !important; box-shadow: none !important; color: #212121; font-size: 14px; height: 50px; margin-top: 3px; } .btn-search { display: none; } input.search-bar::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.9); } input.search-bar:-moz-placeholder { color: rgba(0, 0, 0, 0.9); } input.search-bar::-moz-placeholder { color: rgba(0, 0, 0, 0.9); } input.search-bar:-ms-input-placeholder { color: rgba(0, 0, 0, 0.9); } .navbar-nav { margin: 0px; height:50px; } .side-menu { bottom: 0; top: 0; width: 240px; z-index: 2; } .side-menu.left { background: #2f353f; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); position: absolute; top: 50px; } body.fixed-left .side-menu.left { bottom: 50px; height: 100%; margin-bottom: -50px; margin-top: 0px; padding-bottom: 50px; position: fixed; } .content-page { margin-left: 240px; overflow: hidden; } .content-page > .content { margin-bottom: 60px; /*margin-top: 50px;*/ /*padding: 20px 5px 15px 5px;*/ padding: 20px 0px 0px 0px; } .button-menu-mobile { background: transparent; border: none; color: #888888; font-size: 21px; line-height: 50px; padding: 0px 15px; } .button-menu-mobile:hover { color: #212121; } .sidebar-inner { height: 100%; } #sidebar-menu, #sidebar-menu ul, #sidebar-menu li, #sidebar-menu a { border: 0; font-weight: normal; line-height: 1; list-style: none; margin: 0; padding: 0; position: relative; text-decoration: none; } #sidebar-menu { background-color: #2f353f; padding-bottom: 50px; /*width: 100%;*/ margin-left: -10px; } #sidebar-menu a { line-height: 1.3; } #sidebar-menu ul ul { display: none; } #sidebar-menu ul .in { display: block; } #sidebar-menu ul ul li { border-top: 0; } #sidebar-menu ul ul li.active a { color: #ffffff; } #sidebar-menu ul ul a { color: #75798B; display: block; padding: 10px 25px 10px 65px; } #sidebar-menu ul ul a:hover { color: #ffffff; } #sidebar-menu ul ul a i { margin-right: 5px; } #sidebar-menu ul ul ul a { padding-left: 80px; } #sidebar-menu > ul > li > a { color: #a7b1c2; display: block; padding: 15px 25px; background: #2f353f; } #sidebar-menu > ul > li > a:hover { background: #272c35; text-decoration: none; } #sidebar-menu > ul > li > a > span { vertical-align: middle; } #sidebar-menu > ul > li > a > i { display: inline-block; font-size: 18px; line-height: 17px; margin-left: 3px; margin-right: 15px; text-align: center; vertical-align: middle; width: 20px; } #sidebar-menu > ul > li > a > i.i-right { float: right; margin: 3px 0 0 0; } #sidebar-menu > ul > li > a.active { background: #272c35 !important; color: #ffffff; } #sidebar-menu > ul > li > a.active.subdrop { background: #272c35 !important; } .subdrop { background: #272c35 !important; } #wrapper.enlarged #sidebar-menu ul ul { box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); } #wrapper.enlarged .left.side-menu { /*padding-top: 80px;*/ width: 50px; z-index: 5; } #wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a:hover { background-color: #272c35 !important; } #wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a:active { background-color: #272c35 !important; } #wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a:focus { background-color: #272c35 !important; } #wrapper.enlarged .left.side-menu #sidebar-menu > ul > li > a i { margin-right: 20px !important; margin-left: 0px !important; font-size: 20px; } #wrapper.enlarged .left.side-menu span.pull-right { display: none !important; } #wrapper.enlarged .left.side-menu #sidebar-menu ul > li { position: relative; white-space: nowrap; } #wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > a { position: relative; width: 260px; } #wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul { display: block; left: 50px; position: absolute; width: 190px; } #wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul a { background: #ffffff; border-left: 3px solid #edf0f0; border: none; box-shadow: none; padding-left: 15px; position: relative; width: 190px; z-index: 6; } #wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover > ul a:hover { color: #212121; } #wrapper.enlarged .left.side-menu #sidebar-menu ul > li:hover a span { display: inline; } #wrapper.enlarged .left.side-menu #sidebar-menu a.subdrop { color: #ffffff !important; } #wrapper.enlarged .left.side-menu #sidebar-menu ul > li > ul { display: none; } #wrapper.enlarged .left.side-menu #sidebar-menu ul ul li:hover > ul { display: block; left: 190px; margin-top: -36px; position: absolute; width: 190px; } #wrapper.enlarged .left.side-menu #sidebar-menu ul ul li > a span.pull-right { -ms-transform: rotate(270deg); -webkit-transform: rotate(270deg); position: absolute; right: 20px; top: 12px; transform: rotate(270deg); } #wrapper.enlarged .left.side-menu #sidebar-menu ul ul li.active a { color: #212121; } #wrapper.enlarged .left.side-menu #sidebar-menu ul > li > a span { display: none; padding-left: 10px; } #wrapper.enlarged .left.side-menu .user-details { display: none; } #wrapper.enlarged .content-page { margin-left: 50px; } #wrapper.enlarged .topbar .topbar-left { /*width: 50px !important;*/ width:0px !important; } #wrapper.enlarged .topbar .topbar-left .logo span { display: none; opacity: 0; } #wrapper.enlarged .topbar .topbar-left .logo i { margin-right: 0px; } #wrapper.enlarged #sidebar-menu > ul > li:hover > a.open after { display: none; } #wrapper.enlarged #sidebar-menu > ul > li:hover > a.active after { display: none; } #wrapper.enlarged .footer { left: 50px; } .user-details { min-height: 80px; padding: 20px; position: relative; } .user-details img { position: relative; z-index: 9999; } .user-details .user-info { color: #444444; margin-left: 60px; position: relative; z-index: 99999; } .user-details .user-info a.dropdown-toggle { color: #ffffff; display: block; font-family: 'Roboto', sans-serif; font-size: 16px; font-weight: 600; padding-top: 5px; } #wrapper.right-bar-enabled .right-bar { right: 0; } #wrapper.right-bar-enabled .left-layout { left: 0; } .side-bar.right-bar { float: right !important; right: -266px; top: 50px; } .side-bar { -moz-transition: all 200ms ease-out; -webkit-transition: all 200ms ease-out; background-color: #ffffff; box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1); display: block; float: left; height: 100%; overflow-y: auto; position: fixed; transition: all 200ms ease-out; width: 240px; } .right-bar { background: #ffffff !important; z-index: 99 !important; } .right-bar h4 { border-bottom: 1px solid #eeeeee; padding-bottom: 10px; } .contact-list { max-height: 600px; } .contact-list .list-group-item { border: none; } .contact-list .list-group-item:hover { background: #f5f5f5; } .contact-list i.offline { color: #ef5350; } .contact-list i.away { color: #ffd740; } .contacts-list .avatar { display: inline-block; float: left; margin-right: 5px; width: 30px; } .contacts-list .avatar img { border-radius: 50%; width: 100%; } .contacts-list .list-group-item span.name { color: #707780; display: inline-block; float: left; overflow: hidden; padding-left: 5px; padding-top: 6px; text-overflow: ellipsis; white-space: nowrap; width: 130px; } .contacts-list i.online { color: #a0d269; } .contacts-list i { color: #dddddd; float: right; font-size: 9px; line-height: 30px; }