/*---------------------------------------------- Author : www.webthemez.com License: Commons Attribution 3.0 http://creativecommons.org/licenses/by/3.0/ ------------------------------------------------*/ /*---------------------------------------------- COMMON STYLES ------------------------------------------------*/ body { font-family: 'Open Sans', sans-serif; } #wrapper { width: 100%; background: #2b2e33; } #page-wrapper { padding: 15px 15px; min-height: 600px; background: #f3f3f3; } #page-inner { width:100%; margin:10px 20px 10px 0px; background-color:transparent; padding:10px; min-height:1200px; } .text-center { text-align:center; } .no-boder { border:1px solid #f3f3f3; } h1, .h1, h2, .h2, h3, .h3 { margin-top: 7px; margin-bottom: -5px; } h2 { color: #000; } h4 { padding-top:10px; } .square-btn-adjust { border: 0px solid transparent; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } p { font-size:16px; line-height:25px; padding-top:20px; } .panel{ border-radius:0px; } .navbar-side .nav > li > a > i{ color: #B5B5B5; padding: 8px; width: 30px; text-align: center; } .top-navbar{ position: fixed; width: 100%; z-index: 300; -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05); box-shadow: 0 3px 3px rgba(0, 0, 0, 0.05); } .navbar-side { z-index: 1; position: fixed; width: 260px; top: 80px; } #page-wrapper { position: relative; top: 55px; } .top-navbar .nav > li > a:hover, .top-navbar .nav > li > a:focus { text-decoration: none; background-color: #2497BA; color: #fff; } .nav .open > a, .nav .open > a:hover, .nav .open > a:focus { background-color: #2497BA; border-color: #428bca; } .breadcrumb { padding: 0; margin-bottom: 20px; list-style: none; /* background-color: #FAFAFA; */ border-radius: 0; } /*---------------------------------------------- DASHBOARD STYLES ------------------------------------------------*/ .page-header { padding-bottom: 9px; margin: 10px 0 20px; border-bottom: 1px solid transparent; } .panel-left{ width: 35%; height: 158px; background: #5CB85C; } .panel-left .fa-5x { font-size: 11em; color: rgba(255, 255, 255, 0.15); padding: 40px 0; margin-bottom:30px; } .panel-right{ width: 65%; height: 158px; background: transparent; margin-bottom: 0; color: #fff; } .panel-right h3{ font-size: 50px; padding: 31px 10px 13px; color: rgba(255, 255, 255, 0.96); } .panel-back { background-color:#fff; } .panel-default { border-color: #ECECEC; } .panel-default > .panel-heading { color: #000; border-color: #FFF; font-weight:bold; background: #FFFFFF; font-size: 16px; } .panel-heading { padding: 15px 15px 0px; border-bottom: 1px solid transparent; border-top-left-radius: 3px; border-top-right-radius: 3px; } .jumbotron, .well{ background:#fff; } .noti-box { min-height: 100px; padding: 20px; } .noti-box .icon-box { display: block; float: left; margin: 0 15px 10px 0; width: 70px; height: 70px; line-height: 75px; vertical-align: middle; text-align: center; font-size: 40px; } .text-box p{ margin: 0 0 3px; } .main-text { font-size: 25px; font-weight:600; } .set-icon { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .panel-primary{ display:inline-block; margin-bottom:30px; width:100%; } .green { background-color: #5cb85c; color: #fff; } .blue { background-color: #4CB1CF; color: #fff } .red { background-color: #F0433D; color:#fff; } .brown { background-color: #f0ad4e; color:#fff; } .back-footer-red { background-color: #F0433D; color:#fff; border-top: 0px solid #fff; } .icon-box-right { display: block; float: right; margin: 0 15px 10px 0; width: 70px; height: 70px; line-height: 75px; vertical-align: middle; text-align: center; font-size: 40px; } .main-temp-back { background: #8702A8; color: #FFFFFF; font-size: 16px; font-weight: 300; text-align: center; } .main-temp-back .text-temp { font-size: 40px; } .back-dash { padding:20px; font-size:20px; font-weight:500; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; background-color:#2EA7EB; color:#fff; } .back-dash p { padding-top:16px; font-size:13px; color:#fff; line-height:25px; text-align:justify; } .color-bottom-txt { color: #000; font-size: 16px; line-height: 30px; } /*CHAT PANEL*/ /*Charts*/ .main-chart { background: #fff; } .easypiechart-panel { text-align: center; padding: 1px 0; margin-bottom: 20px; } .placeholder h2 { margin-bottom: 0px; } .donut { width: 100%; } .easypiechart { position: relative; text-align: center; width: 120px; height: 120px; margin: 20px auto 10px auto; } .easypiechart .percent { display: block; position: absolute; font-size: 26px; top: 38px; width: 120px; } #easypiechart-blue .percent { color: #30a5ff;} #easypiechart-teal .percent { color: #1ebfae;} #easypiechart-orange .percent { color: #ffb53e;} #easypiechart-red .percent { color: #ef4040;} .chat-panel .panel-body { height: 450px; overflow-y: scroll; } .chat-box { margin: 0; padding: 0; list-style: none; } .chat-box li { margin-bottom: 15px; padding-bottom: 5px; border-bottom: 1px dotted #808080; } .chat-box li.left .chat-body { margin-left: 90px; } .chat-box li .chat-body p { margin: 0; color: #8d8888; } .chat-img>img { margin-left:20px; } footer p{ font-size: 14px; } /*---------------------------------------------- MENU STYLES ------------------------------------------------*/ .user-image { margin: 25px auto; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; max-height:170px; max-width:170px; } .top-navbar{ margin:0px; } .top-navbar .navbar-brand { color: #fff; width: 260px; text-align: left; height: 60px; font-size: 30px; font-weight: 700; text-transform: uppercase; line-height: 30px; background: #32323a; } .navbar-brand b{ color: #2DAFCB; } .top-navbar .nav > li { position: relative; display: inline-block; margin: 0px; padding: 0px; } .top-navbar .nav > li > a { position: relative; display: block; padding: 20px; color: #FFFFFF; margin: 0px; } .top-navbar .nav > li > a:hover, .top-navbar .nav > li > a:focus { text-decoration: none; color: #319DB5 !important; background: transparent; } .top-navbar .dropdown-menu{ min-width: 230px; border-radius: 0 0 4px 4px; } .top-navbar .dropdown-menu > li > a:hover, .top-navbar .dropdown-menu > li > a:focus{ color: #225081; background:none; } .dropdown-tasks{ width: 255px; } .dropdown-tasks .progress { height: 8px; margin-bottom: 8px; overflow: hidden; background-color: #f5f5f5; border-radius: 0px; } .dropdown-tasks > li > a { padding: 0px 15px; } .dropdown-tasks p { font-size: 13px; line-height: 21px; padding-top: 4px; } .active-menu { background-color: #2DAFCB !important; color: #fff !important; } .active-menu i{ color: #fff !important; } .arrow { float: right; margin-top: 8px; } .fa.arrow:before { content: "\f104"; } .active > a > .fa.arrow:before { content: "\f107"; } .nav-second-level li, .nav-third-level li { border-bottom: none !important; } .nav-second-level li a { padding-left: 37px; } .nav-third-level li a { padding-left: 55px; } .sidebar-collapse , .sidebar-collapse .nav{ background:none; } .sidebar-collapse .nav { padding:0; } .sidebar-collapse .nav > li > a { color: #B5B5B5; background:transparent; text-shadow:none; } .sidebar-collapse > .nav > li > a { padding: 12px 10px; } .sidebar-collapse > .nav > li { border-bottom: 1px solid rgba(107, 108, 109, 0.19); } ul.nav.nav-second-level.collapse.in { background: #17191B; } .sidebar-collapse .nav > li > a:hover, .sidebar-collapse .nav > li > a:focus { outline:0; } .navbar-side { border:none; background-color: transparent; } .top-navbar { background: #fff; border-bottom:none; } .top-navbar .nav > li > a > i { margin-right: 2px; } .top-navbar .navbar-brand:hover { color: #2DAFCB; background-color: rgb(43, 46, 51); } .dropdown-user li { margin: 8px 0; } .navbar-default { border:0px solid black; } .navbar-header { background: transparent; } .navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: #B40101; } .navbar-default .navbar-toggle { border-color: #fff; } .navbar-default .navbar-toggle .icon-bar { background-color: #FFF; } .nav > li > a > i { margin-right:10px; color: #666; } /*---------------------------------------------- UI ELEMENTS STYLES ------------------------------------------------*/ .btn-circle { width: 50px; height: 50px; padding: 6px 0; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; text-align: center; font-size: 12px; line-height: 1.428571429; } /*---------------------------------------------- MEDIA QUERIES ------------------------------------------------*/ @media(min-width:768px) { #page-wrapper{ margin: 0 0 0 260px; padding: 15px 30px; min-height: 1200px; } .navbar-side { z-index: 1; width: 260px; } .navbar { border-radius: 0px; } } @media(max-width:480px) { .page-header small { display: block; padding-top: 14px; font-size: 19px; } }