/*----------------------------------------------------------------------------------- Theme Name: Crizal - Responsive Admin Dashboard Template Description: Responsive Admin Dashboard Template Author: Chitrakoot Web -----------------------------------------------------------------------------------*/ /* ---------------------------------- 01. Common styles 02. CSS utilities 2.1 Position 2.2 Box Shadow 2.3 Typography 2.4 Margin 2.5 Padding 2.6 Width & Height 2.7 Borders 2.8 Radius 03. Components 3.1 Text 3.2 Label 3.3 Icon Size 3.4 Blockquote 3.5 Page Title 3.6 Breadcrumb 3.7 Card 3.8 Alert 3.9 Backgrounds 3.10 Text Color 3.11 Btn Color 3.12 Buttons 3.13 Progress Bars 3.14 Nav Pills 3.15 Tabs 3.16 Forms 3.17 Pager 3.18 Dropzone and Plupload_button 3.19 Tables 3.20 Dropdowns 3.21 Page Header Nav 3.22 Popover 3.23 Accordion style 04. Layout 4.1 Page Container 4.2 Page Header 4.3 Page Right Sidebar 4.4 Page Left Sidebar 4.5 Collapsed Sidebar 4.6 Search 4.7 Page Content 4.8 Page Inner 05. Plugins 5.1 jsTree 5.2 Toastr 5.3 To Do 06. Pages 6.1 Error Page 6.2 Profile 6.3 Timeline 6.4 Maps 6.5 Authentication 6.6 Pricing Tables 6.7 Charts 6.8 Email 6.9 Calendar 6.10 Grid Gallery 6.11 Dashboard ---------------------------------- */ @import url(https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800&display=swap); /* =================================== Common styles ====================================== */ /* loader */ #preloader { position: fixed; left: 0; top: 0; z-index: 99999; width: 100%; height: 100%; overflow: visible; background: #fff; display: table; text-align: center; } .loader { display: table-cell; vertical-align: middle; position: relative; width: 200px; height: 200px; } .loader-icon { width: 80px; height: 80px; border: 5px solid #00b838; border-right-color: #eee; border-radius: 50%; position: relative; animation: loader-rotate 1s linear infinite; margin: 0 auto; } @keyframes loader-rotate { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } } html { font-size: 15px; width: 100%; height: 100%; } body { font-size: 15px; width: 100%; height: 100%; background-color: #303030; font-weight: 400; color: #303030; } a { color: #303030; } a:hover { color: #303030; } p { line-height: 1.6; } img { max-width: 100%; height: auto; } small { font-size: 80%; font-weight: 400; } menu { padding-left: 0px; } body, span, text { font-family: 'Montserrat', sans-serif; } a { font-family: 'Montserrat', sans-serif; } a:hover, a:active, a:focus { outline: none !important; text-decoration: none !important; } hr { border-color: #D0D4D9; } .cross-page-line { display: block; height: 1px; width: 100%; margin: 20px 0px; background: #E0E0E0; } @media screen and (max-width: 991px) { body { font-size: 14px; } } /* =================================== CSS utilities ====================================== */ /* position */ .position-top-right, .position-top-left, .position-bottom-right, .position-bottom-left { position: absolute; } .position-top-right { top: 0; right: 0; } .position-top-left { top: 0; left: 0; } .position-bottom-right, .position-bottom-left { bottom: 0; right: 0; } /* box shadow */ .bs-n { -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; } .bs-dark { -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.6); box-shadow: 0 0 3px rgba(0, 0, 0, 0.6); } .bs-light { -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); } .bs-t { -webkit-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 -1px 1px rgba(0, 0, 0, 0.05); } .bs-r { -webkit-box-shadow: 1px 0 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: 1px 0 1px rgba(0, 0, 0, 0.05); box-shadow: 1px 0 1px rgba(0, 0, 0, 0.05); } .bs-b { -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05); } .bs-l { -webkit-box-shadow: -1px 0 1px rgba(0, 0, 0, 0.05); -moz-box-shadow: -1px 0 1px rgba(0, 0, 0, 0.05); box-shadow: -1px 0 1px rgba(0, 0, 0, 0.05); } /* typography */ .f-thin { font-weight: 300; } .f-normal { font-weight: normal; } .f-bold { font-weight: 600; } .f-s-10 { font-size: 10px; } .f-s-11 { font-size: 11px; } .f-s-12 { font-size: 12px; } .f-s-13 { font-size: 13px; } .f-s-14 { font-size: 14px; } .f-s-15 { font-size: 15px; } .f-s-16 { font-size: 16px; } .f-s-17 { font-size: 17px; } .f-s-18 { font-size: 18px; } .f-s-20 { font-size: 20px; } .f-s-22 { font-size: 22px; } .f-s-24 { font-size: 24px; } .f-s-26 { font-size: 26px; } .f-s-28 { font-size: 28px; } .f-s-30 { font-size: 30px; } .f-s-32 { font-size: 32px; } .secondary-link { font-size: 13px; color: #2196f3; font-weight: bold; } /* margin */ .no-s { margin: 0px !important; padding: 0px !important; } .no-m { margin: 0; } .no-p { padding: 0; } .m { margin: 15px; } .m-t-xxs { margin-top: 5px; } .m-r-xxs { margin-right: 5px; } .m-b-xxs { margin-bottom: 5px; } .m-l-xxs { margin-left: 5px; } .m-t-xs { margin-top: 10px; } .m-r-xs { margin-right: 10px; } .m-b-xs { margin-bottom: 10px; } .m-l-xs { margin-left: 10px; } .m-t-sm { margin-top: 15px; } .m-r-sm { margin-right: 15px; } .m-b-sm { margin-bottom: 15px; } .m-l-sm { margin-left: 15px; } .m-t-md { margin-top: 20px; } .m-r-md { margin-right: 20px; } .m-b-md { margin-bottom: 20px; } .m-l-md { margin-left: 20px; } .m-t-lg { margin-top: 25px; } .m-r-lg { margin-right: 25px; } .m-b-lg { margin-bottom: 25px; } .m-l-lg { margin-left: 25px; } .m-t-xxl { margin-top: 30px; } .m-r-xxl { margin-right: 30px; } .m-b-xxl { margin-bottom: 30px; } .m-l-xxl { margin-left: 30px; } .m-t-n-xxs { margin-top: -5px; } .m-r-n-xxs { margin-right: -5px; } .m-b-n-xxs { margin-bottom: -5px; } .m-l-n-xxs { margin-left: -5px; } .m-t-n-xs { margin-top: -10px; } .m-r-n-xs { margin-right: -10px; } .m-b-n-xs { margin-bottom: -10px; } .m-l-n-xs { margin-left: -10px; } .m-t-n-sm { margin-top: -15px; } .m-r-n-sm { margin-right: -15px; } .m-b-n-sm { margin-bottom: -15px; } .m-l-n-sm { margin-left: -15px; } .m-t-n-md { margin-top: -20px; } .m-r-n-md { margin-right: -20px; } .m-b-n-md { margin-bottom: -20px; } .m-l-n-md { margin-left: -20px; } .m-t-n-lg { margin-top: -25px; } .m-r-n-lg { margin-right: -25px; } .m-b-n-lg { margin-bottom: -25px; } .m-l-n-lg { margin-left: -25px; } .m-t-n-xxl { margin-top: -30px; } .m-r-n-xxl { margin-right: -30px; } .m-b-n-xxl { margin-bottom: -30px; } .m-l-n-xxl { margin-left: -30px; } /* padding */ .p { padding: 15px; } .p-h-xxs { padding-left: 5px; padding-right: 5px; } .p-h-xs { padding-left: 10px; padding-right: 10px; } .p-h-sm { padding-left: 15px; padding-right: 15px; } .no-p-h { padding-left: 0; padding-right: 0; } .no-p-v { padding-top: 0; padding-bottom: 0; } .p-h-md { padding-left: 20px; padding-right: 20px; } .p-h-lg { padding-left: 25px; padding-right: 25px; } .p-h-xxl { padding-left: 30px; padding-right: 30px; } .p-v-xxs { padding-top: 5px; padding-bottom: 5px; } .p-v-xs { padding-top: 10px; padding-bottom: 10px; } .p-v-sm { padding-top: 15px; padding-bottom: 15px; } .p-v-md { padding-top: 20px; padding-bottom: 20px; } .p-v-lg { padding-top: 25px; padding-bottom: 25px; } .p-v-xxl { padding-top: 30px; padding-bottom: 30px; } /* width & height */ .full-height { height: 100% !important; } .full-width { width: 100% !important; } .w-xxs { width: 50px; } .w-xs { width: 90px; } .w-sm { width: 140px; } .w { width: 200px; } .w-md { width: 240px; } .w-lg { width: 280px; } .w-xl { width: 330px; } .w-xxl { width: 370px; } .w-auto { width: auto; } .h-auto { height: auto; } /* borders */ .no-b { border: 0 !important; } .b { border: 1px solid #f1f1f1; } .b-t { border-top: 1px solid #f1f1f1; } .b-r { border-right: 1px solid #f1f1f1; } .b-b { border-bottom: 1px solid #f1f1f1; } .b-l { border-left: 1px solid #f1f1f1; } .b-default { border-color: #f1f1f1; } .b-primary { border-color: #756BB0; } .b-info { border-color: #14A2BB; } .b-success { border-color: #2EC5D3; } .b-warning { border-color: #DFBA47; } .b-danger { border-color: #DE4D4D; } .b-2 { border-size: 2px; } .b-3 { border-size: 3px; } .b-4 { border-size: 4px; } .b-n-t { border-top: 0; } .b-n-r { border-right: 0; } .b-n-b { border-bottom: 0; } .b-n-l { border-left: 0; } /* radius */ .no-r { border-radius: 0 !important; } .r { border-radius: 2px; } .r-t-l { border-top-left-radius: 2px; } .r-t-r { border-top-right-radius: 2px; } .r-b-l { border-bottom-left-radius: 2px; } .r-b-r { border-bottom-right-radius: 2px; } .no-r-t-l { border-top-left-radius: 0 !important; } .no-r-t-r { border-top-right-radius: 0 !important; } .no-r-b-l { border-bottom-left-radius: 0 !important; } .no-r-b-r { border-bottom-right-radius: 0 !important; } /* =================================== Components ====================================== */ /* text */ .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { color: #2b2b2b; } .center { float: none; margin: 0px auto; } /* label */ label { font-weight: 400; } .label { font-weight: 400; padding: 4px 8px; font-size: 11px; display: inline; line-height: 1; color: #fff; text-align: center; white-space: nowrap; vertical-align: baseline; border-radius: .25em; } label.error { color: #EC5E69; font-weight: 500; margin-top: 5px; /*float: left; */ display: inline-block; font-size: 12px; } .label.label-default { background: #F1F1F1; color: #303030; } .label.label-primary { /* background: #2c7be 5; } */ background: #00b838; } .label.label-success { background: #63CB89; } .label.label-info { background: #5893DF; } .label.label-warning { background: #F1C205; } .label.label-danger { background: #EC5E69; } /* icon size */ .icon-xs { font-size: 12px; } .icon-sm { font-size: 14px; } .icon-md { font-size: 16px; } .icon-lg { font-size: 18px; } .icon-state-default { color: #E2E2E2; } .icon-state-primary { /* color: #2c7be 5; } */ color: #00b838; } .icon-state-success { color: #63CB89; } .icon-state-info { color: #5893DF; } .icon-state-warning { color: #F1C205; } .icon-state-danger { color: #EC5E69; } .fontawesome-icon-list { padding: 0 2px; } .fa-hover { cursor: pointer; line-height: 50px; white-space: nowrap; } .fa-hover:hover { background-color: #f7f7f7; } .fa-hover i { margin-right: 8px; vertical-align: middle; font-size: 18px; } .fa-hover a { color: #4f4f4f; } .lead { color: #2b2b2b; } /* blockquote */ blockquote { border-left: 5px solid #ccc; padding: 10px 20px; margin: 0 0 20px; font-size: 16px; } .blockquote-reverse { border-right: 5px solid #ccc; border-left: none; text-align: right; } blockquote.float-right { border-right: 5px solid #ccc; border-left: none; text-align: right; } blockquote .small, blockquote footer, blockquote small { display: block; font-size: 80%; line-height: 1.42857143; color: #777; } blockquote .small:before, blockquote footer:before, blockquote small:before { content: '\2014 \00A0'; } .well { border-radius: 0; box-shadow: none; border: 0; } /* page title */ .page-title { padding: 20px; background: #fff; margin-bottom: 15px; border-radius: 4px; box-shadow: 0 1px 15px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04); } /* breadcrumb */ .breadcrumb { background-color: transparent; border-radius: 0; padding: 0; font-size: 13px; } .breadcrumb li i { font-size: 14px; margin-right: 4px; color: rgba(0, 0, 0, 0.4); display: block; float: left; } .breadcrumb li a { color: rgba(0, 0, 0, 0.4); font-weight: 500; } .breadcrumb li a:hover { text-decoration: underline !important; } .breadcrumb > .active { color: rgba(0, 0, 0, 0.4); font-weight: 500; } .breadcrumb-header { font-size: 22px; font-weight: 500; color: #00b838; font-weight: 600; padding: 0; margin: 0; } /* card */ .card { padding: 25px; margin-bottom: 20px; border: initial; background: #fff; border-radius: calc(.15rem - 1px); box-shadow: 0 1px 15px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04); } .card-body { padding: 0; } .card-heading { padding: 0; border: 0; } .card-title { color: #303030; font-weight: 600; padding: 0; padding-bottom: 10px; font-size: 14px; text-transform: uppercase; letter-spacing: 1px; } .card-default > .card-heading { color: #333; background-color: #f6f9fc; border-color: #E6E8EB; } .card-default > .card-heading + .card-collapse > .card-body { padding: 20px; } .card-primary > .card-heading + .card-collapse > .card-body, .card-success > .card-heading + .card-collapse > .card-body, .card-warning > .card-heading + .card-collapse > .card-body, .card-danger > .card-heading + .card-collapse > .card-body { padding: 20px; } .card-group .card { border-radius: 4px; } .card-default > .card-heading + .card-collapse > .card-body, .card-primary > .card-heading + .card-collapse > .card-body, .card-success > .card-heading + .card-collapse > .card-body, .card-info > .card-heading + .card-collapse > .card-body, .card-warning > .card-heading + .card-collapse > .card-body, .card-danger > .card-heading + .card-collapse > .card-body { border-color: #fff; } .card-default { border-color: #E6E8EB; } .card-primary { /* border-color: #2c7be 5; } */ border-color: #00b838; } .card-success { border-color: #63CB89; } .card-info { border-color: #5893DF; } .card-warning { border-color: #F1C205; } .card-danger { border-color: #EC5E69; } .card-primary > .card-heading a, .card-success > .card-heading a, .card-info > .card-heading a, .card-warning > .card-heading a, .card-danger > .card-heading a { color: #fff !important; } .card-primary > .card-heading { /* background-color: #2c7be 5; */ /* border-color: #2c7be 5; } */ background-color: #00b838; border-color: #00b838; } .card-success > .card-heading { background-color: #63CB89; border-color: #63CB89; } .card-info > .card-heading { background-color: #5893DF; border-color: #5893DF; } .card-warning > .card-heading { background-color: #F1C205; border-color: #F1C205; } .card-danger > .card-heading { background-color: #EC5E69; border-color: #EC5E69; } .card-default .card-title > .small { color: #2b2b2b; } .card-default .card-title > .small > a { color: #2b2b2b; } .card-default .card-title > a { color: #2b2b2b; } .card-default .card-title > small { color: #2b2b2b; } .card-default .card-title > small > a { color: #2b2b2b; } /* alert */ .alert-default { background: #f6f9fc; border-color: #E6E8EB; } .alert-success .alert-link { color: #218892; } .alert-info .alert-link { color: #2f73c8; } .alert-warning .alert-link { color: #94780a; } .alert-danger .alert-link { color: #d83945; } /* backgrounds */ .bg-primary { background-color: #36a3f5 !important; } .bg-success { background-color: #63CB90 !important; } .bg-info { background-color: #01c0d6 !important; } .bg-danger { background-color: #ec5e70 !important; } .bg-warning { background-color: #ffb820 !important; } .bg-dark { background-color: #333 !important; } .bg-n { background: transparent !important; } .bg-primary.dark { background-color: #005fbf; color: #fff; } .bg-primary.light { background-color: #0580fc; color: #fff; } .bg-success.dark { background-color: #4a9b68; color: #fff; } .bg-success.light { background-color: #74eda0; color: #fff; } .bg-info.dark { background-color: #4374b2; color: #fff; } .bg-info.light { background-color: #71acf7; color: #fff; } .bg-warning.dark { background-color: #d6aa00; color: #fff; } .bg-warning.light { background-color: #ffda47; color: #fff; } .bg-danger.dark { background-color: #d3505a; color: #fff; } .bg-danger.light { background-color: #f7717b; color: #fff; } .bg-dark.dark { background-color: #2b2b2b; color: #fff; } .bg-dark.light { background-color: #3b3b3b; color: #fff; } .bg-light { background-color: #f1f1f1; } .bg-light.dark { background-color: #e5e5e5; } .bg-light.light { background-color: #f9f9f9; } .bg-gray { background-color: #ccc; } .bg-gray.dark { background-color: #b9b9b9; } .bg-gray.light { background-color: #d7d7d7; } /* text color */ .text-primary { color: #36a3f5 !important; } .text-success { color: #63CB90 !important; } .text-info { color: #01c0d6 !important; } .text-danger { color: #ec5e70 !important; } .text-warning { color: #ffb820 !important; } .text-dark { color: #333 !important; } /* btn color */ .btn-primary { background-color: #36a3f5; border-color: #36a3f5; } .btn-success { background-color: #63CB90; border-color: #63CB90; } .btn-info { background-color: #01c0d6; border-color: #01c0d6; } .btn-danger { background-color: #ec5e70; border-color: #ec5e70; } .btn-warning { background-color: #ffb820; border-color: #ffb820; } .btn-dark { background-color: #333; border-color: #333; } /* buttons */ .search-form .btn-default { background-color: #fff; } .btn-default.active, .btn-default:active { border-color: #00b838 !important; background-color: #ececec; color: #00b838; } .open > .dropdown-toggle.btn-default { border-color: #00b838 !important; background-color: #ececec; color: #00b838; } .btn-default.active:hover, .btn-default:active:hover { border-color: #E6E9EC; background-color: #E6E9EC; } .open > .dropdown-toggle.btn-default:hover { border-color: #E6E9EC; background-color: #E6E9EC; } .btn { border-radius: 4px; padding: 5px 16px; box-shadow: none !important; } .btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus { outline: 0; outline-offset: 0; } .btn:active, .btn.active { background-image: none; outline: 0; -webkit-box-shadow: none; box-shadow: none; } .btn-xs { padding: 1px 5px; } .btn-sm { padding: 5px 10px; } .btn-lg { padding: 10px 16px; } .btn-rounded { border-radius: 60px; } .btn-social { width: 45px; height: 45px; padding: 10px 0px; border-radius: 50%; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .btn-social:hover { color: #fff; opacity: 0.8; } .btn-social:focus { color: #fff; } .btn-facebook { background-color: #3B5998; color: #fff; } .btn-twitter { background-color: #55ACEE; color: #fff; } .btn-google { background-color: #DD4B39; color: #fff; } .btn-youtube { background-color: #BB0000; color: #fff; } .btn-vimeo { background-color: #1EB8EB; color: #fff; } .btn-dribbble { background-color: #ea4c89; color: #fff; } .btn-instagram { background-color: #3F729B; color: #fff; } .btn-pinterest { background-color: #BD081B; color: #fff; } .btn-vk { background-color: #507299; color: #fff; } .btn-rss { background-color: #FF6600; color: #fff; } .btn-flickr { background-color: #FF0084; color: #fff; } /* progress bars */ .progress { box-shadow: none !important; height: 4px; border-radius: 0; margin-bottom: 18px; overflow: hidden; } .progress-bar { background-color: #36a3f5; box-shadow: none; font-size: 8px; font-weight: 600; line-height: 12px; } .progress.progress-sm { height: 8px !important; } .progress.progress-sm .progress-bar { line-height: 10px; } .progress.progress-md { height: 15px !important; } .progress.progress-md .progress-bar { line-height: 15px; } .progress.progress-lg { height: 20px !important; } .progress.progress-lg .progress-bar { line-height: 20px; } .progress-rounded { border-radius: 60px; } /* nav pills */ .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: #36a3f5; } .nav-pills > li.active > a { color: #fff; background-color: #007bff; } .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus { color: #fff; background-color: #007bff; } /* tabs */ .tabs-left .nav > li:first-child > a { margin-left: 15px !important; } .tabs-left > .nav-tabs > li { float: none; } .tabs-right > .nav-tabs > li { float: none; } .tabs-left > .nav-tabs > li > a, .tabs-right > .nav-tabs > li > a { min-width: 74px; margin-bottom: 0; border-bottom: 0; } .tabs-left > .nav-tabs { float: left; margin-right: 19px; border-right: 1px solid #E2E2E2; border-bottom: 0 !important; } .tabs-left > .nav-tabs > li > a { margin-right: -1px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .tabs-left > .nav-tabs > li > a:hover, .tabs-left > .nav-tabs > li > a:focus { background: transparent; border-color: transparent; border-right: 1px solid #B6BABD !important; border-bottom: none; color: #3D464D; } .tabs-left > .nav-tabs .active > a { border-color: transparent; border-right-color: #1B2733 !important; border-bottom: 1px solid transparent; border-top-left-radius: 3px !important; border-bottom-left-radius: 3px !important; border-top-right-radius: 0 !important; } .tabs-left > .nav-tabs .active > a:hover, .tabs-left > .nav-tabs .active > a:focus { border-color: transparent; border-right-color: #1B2733 !important; border-bottom: 1px solid transparent; border-top-left-radius: 3px !important; border-bottom-left-radius: 3px !important; border-top-right-radius: 0 !important; } .tabs-right .nav > li > a { text-align: right; margin-left: -1px !important; margin-right: 0px; padding-right: 15px; } .tabs-right > .nav-tabs { border-bottom: 0; } .tabs-left > .nav-tabs { border-bottom: 0; } .tabs-right > .nav-tabs { float: right; margin-left: 19px; border-left: 1px solid #E2E2E2; border-bottom: 0 !important; } .tabs-right > .nav-tabs > li > a { padding-left: 15px; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .tabs-right > .nav-tabs > li > a:hover, .tabs-right > .nav-tabs > li > a:focus { background: transparent; border-color: transparent; border-left: 1px solid #B6BABD !important; border-bottom: none; color: #3D464D; } .tabs-right > .nav-tabs .active > a { border-color: transparent; border-left-color: #1B2733 !important; border-bottom: none; border-top-right-radius: 3px !important; border-bottom-right-radius: 3px !important; border-top-left-radius: 0 !important; } .tabs-right > .nav-tabs .active > a:hover, .tabs-right > .nav-tabs .active > a:focus { border-color: transparent; border-left-color: #1B2733 !important; border-bottom: none; border-top-right-radius: 3px !important; border-bottom-right-radius: 3px !important; border-top-left-radius: 0 !important; } .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } .tab-content > .active, .pill-content > .active { display: block; } .nav-tabs.nav-justified { border-bottom: 1px solid #E2E2E2; } .nav-tabs.nav-justified > li > a { margin-bottom: -1px; margin-left: 0px; } .nav-tabs.nav-justified > .active > a { border-color: transparent; border-bottom: 1px solid #1B2733; color: #1B2733; } .nav-tabs.nav-justified > .active > a:focus, .nav-tabs.nav-justified > .active > a:hover { border-color: transparent; border-bottom: 1px solid #1B2733; color: #1B2733; } .tab-content { margin-top: 15px; } /* forms */ .form-check { padding-left: 0; } .input-group-prepend.last { margin-right: 0; margin-left: -1px; } .input-group-prepend.last .input-group-text, .input-group-prepend.last .btn { border-radius: .25rem; border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group-btn .input-group-prepend .btn, .input-group-btn.input-group-prepend .btn { border-radius: .25rem; border-top-right-radius: 0; border-bottom-right-radius: 0; } .input-group-btn .input-group-prepend.last .btn, .input-group-btn.input-group-prepend.last .btn { border-radius: .25rem; border-top-left-radius: 0; border-bottom-left-radius: 0; } div.checker { width: 18px; height: 18px; } div.checker input, div.checker span { width: 18px; height: 18px; } input[type=checkbox], input[type=radio] { margin-right: 4px; } input.form-control.input-rounded { border-radius: 60px; } @media screen and (min-width: 768px) { .form-horizontal .col-form-label { text-align: right; } } .input-group-addon { border-radius: 4px; background-color: #f7f7f7; border-color: #C1C7CD; } .bootstrap-tagsinput { border-radius: 4px; box-shadow: none; border-color: #D7D7D7; padding: 6px 12px; } .note-editor { border-radius: 4px; border-color: #D7D7D7; } .note-editor .note-toolbar, .note-editor .note-statusbar { background: transparent; } .note-editor .note-toolbar, .note-editor .note-statusbar .note-resizebar { border-color: #D7D7D7; } .has-success .checkbox, .has-success .checkbox-inline, .has-success .col-form-label, .has-success .help-block, .has-success .radio, .has-success .radio-inline, .has-success.checkbox label, .has-success.checkbox-inline label, .has-success.radio label, .has-success.radio-inline label { color: #63CB89; } .has-success .form-control { border-color: #63CB89; } .has-success .form-control:focus { border-color: #6DD191; } .has-warning .checkbox, .has-warning .checkbox-inline, .has-warning .col-form-label, .has-warning .help-block, .has-warning .radio, .has-warning .radio-inline, .has-warning.checkbox label, .has-warning.checkbox-inline label, .has-warning.radio label, .has-warning.radio-inline label { color: #F1C205; } .has-warning .form-control { border-color: #F1C205; } .has-warning .form-control:focus { border-color: #F5CA1E; } .has-error .checkbox, .has-error .checkbox-inline, .has-error .col-form-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label { color: #EC5E69; } .has-error .form-control { border-color: #EC5E69; } .has-error .form-control:focus { border-color: #F5707A; } /* pager */ .pager li > a, .pager li > span { display: inline-block; padding: 5px 14px; background-color: #fff; border: 1px solid #00b838; border-radius: 15px; } .pager .disabled > a { opacity: .65; border: 1px solid #00b838; color: #00b838; } .pager .disabled > a:focus, .pager .disabled > a:hover { opacity: .65; border: 1px solid #00b838; color: #00b838; } .pager .disabled > span { opacity: .65; border: 1px solid #00b838; color: #00b838; } /* dropzone and plupload_button */ .dd-handle { border-radius: 0; background-color: #f7f7f7; border: none; font-weight: 500; color: #2b2b2b; } .dd3-content { border: none; background-color: #f7f7f7; font-weight: 500; } .dd3-handle { height: 36px; } .dropzone { min-height: 274px; border: 1px solid #d8d8d8; } .plupload_button { padding: 6px 12px; border-radius: 0 !important; font-size: 14px; border-color: #D7D7D7; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .plupload_button:hover { background-color: #E6E9EC; } .dropzone.dz-clickable .dz-message { line-height: 232px; margin: auto; } /* tables */ .table > tbody > tr > td, .table > tbody > tr > th { border-color: #E6E8EB; } .table > tfoot > tr > td, .table > tfoot > tr > th { border-color: #E6E8EB; } .table > thead > tr > td { border-color: #E6E8EB; } .table > thead > tr > th { border-color: #E6E8EB; border-bottom: 1px solid #E6E8EB; font-weight: 600; } .table-striped > tbody > tr:nth-of-type(odd) { background-color: #f7f7f7; } table.dataTable.display tbody tr.even > .sorting_1, table.dataTable.order-column.stripe tbody tr.even > .sorting_1, table.dataTable.stripe tbody tr.odd, table.dataTable.display tbody tr.odd { background-color: #f7f7f7; } table.dataTable thead th, table.dataTable tfoot th { font-weight: 400; } table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc { font-weight: bold !important; } .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 100%; border: none; box-shadow: none; color: #303030 !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current { border: none; box-shadow: none; background: #00b838; color: #fff !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { border: none; box-shadow: none; background: #00b838; color: #fff !important; } .dataTables_wrapper .dataTables_paginate .paginate_button:hover { border: none; box-shadow: none; background: #f1f1f1; color: #303030 !important; } .dataTables_wrapper .dataTables_paginate .paginate_button.next, .dataTables_wrapper .dataTables_paginate .paginate_button.previous { border-radius: 25px; } .dataTables_wrapper .dataTables_filter input { box-shadow: none !important; border: 1px solid #C1C7CD; color: #646464; border-radius: 4px; padding: 5px 12px; height: 32px; } .dataTables_wrapper .dataTables_filter input:focus { outline: 0; outline-offset: 0; } th { font-weight: 400; } .table > tbody > tr > td, .table > tbody > tr > th { padding: 12px 8px; } .table > tfoot > tr > td, .table > tfoot > tr > th { padding: 12px 8px; } .table > thead > tr > td, .table > thead > tr > th { padding: 12px 8px; } .table > tbody > tr.active > td, .table > tbody > tr.active > th { background-color: #f6f9fc; } .table > tbody > tr > td.active, .table > tbody > tr > th.active { background-color: #f6f9fc; } .table > tfoot > tr.active > td, .table > tfoot > tr.active > th { background-color: #f6f9fc; } .table > tfoot > tr > td.active, .table > tfoot > tr > th.active { background-color: #f6f9fc; } .table > thead > tr.active > td, .table > thead > tr.active > th { background-color: #f6f9fc; } .table > thead > tr > td.active, .table > thead > tr > th.active { background-color: #f6f9fc; } .table > tbody > tr.success > td, .table > tbody > tr.success > th { background-color: #92d1a9; } .table > tbody > tr > td.success, .table > tbody > tr > th.success { background-color: #92d1a9; } .table > tfoot > tr.success > td, .table > tfoot > tr.success > th { background-color: #92d1a9; } .table > tfoot > tr > td.success, .table > tfoot > tr > th.success { background-color: #92d1a9; } .table > thead > tr.success > td, .table > thead > tr.success > th { background-color: #92d1a9; } .table > thead > tr > td.success, .table > thead > tr > th.success { background-color: #92d1a9; } .table > tbody > tr.info > td, .table > tbody > tr.info > th { background-color: #75a0d8; } .table > tbody > tr > td.info, .table > tbody > tr > th.info { background-color: #75a0d8; } .table > tfoot > tr.info > td, .table > tfoot > tr.info > th { background-color: #75a0d8; } .table > tfoot > tr > td.info, .table > tfoot > tr > th.info { background-color: #75a0d8; } .table > thead > tr.info > td, .table > thead > tr.info > th { background-color: #75a0d8; } .table > thead > tr > td.info, .table > thead > tr > th.info { background-color: #75a0d8; } .table > tbody > tr.warning > td, .table > tbody > tr.warning > th { background-color: #e8cd61; } .table > tbody > tr > td.warning, .table > tbody > tr > th.warning { background-color: #e8cd61; } .table > tfoot > tr.warning > td, .table > tfoot > tr.warning > th { background-color: #e8cd61; } .table > tfoot > tr > td.warning, .table > tfoot > tr > th.warning { background-color: #e8cd61; } .table > thead > tr.warning > td, .table > thead > tr.warning > th { background-color: #e8cd61; } .table > thead > tr > td.warning, .table > thead > tr > th.warning { background-color: #e8cd61; } .table > tbody > tr.danger > td, .table > tbody > tr.danger > th { background-color: #ea7c84; } .table > tbody > tr > td.danger, .table > tbody > tr > th.danger { background-color: #ea7c84; } .table > tfoot > tr.danger > td, .table > tfoot > tr.danger > th { background-color: #ea7c84; } .table > tfoot > tr > td.danger, .table > tfoot > tr > th.danger { background-color: #ea7c84; } .table > thead > tr.danger > td, .table > thead > tr.danger > th { background-color: #ea7c84; } .table > thead > tr > td.danger, .table > thead > tr > th.danger { background-color: #ea7c84; } .checkbox label, .radio label { padding-left: 0px; } /* dropdowns */ .dropdown-menu { position: absolute; top: 100%; z-index: 1000; display: none; float: left; list-style: none; text-shadow: none; padding: 7px 0; margin: 10px 0px 0px 0px; background-color: #fff; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border: 1px solid #e5e9ec; -webkit-border-radius: 0px !important; -moz-border-radius: 0px !important; -ms-border-radius: 0px !important; -o-border-radius: 0px !important; border-radius: 4px !important; -webkit-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1); box-shadow: 0 5px 5px -5px rgba(0, 0, 0, 0.1); } .dropdown-menu li { font-size: 14px; font-weight: 400; } .dropdown-menu li a:hover { background: #f7f7f7; text-decoration: none; } .navbar-nav > li > .dropdown-menu { margin-top: 25px !important; } .dropdown-menu:before { position: absolute; top: -8px; left: 9px; right: auto; display: inline-block !important; border-right: 8px solid transparent; border-bottom: 8px solid #e5e9ec; border-left: 8px solid transparent; content: ''; } .dropdown-menu:after { position: absolute; top: -7px; left: 10px; right: auto; display: inline-block !important; border-right: 7px solid transparent; border-bottom: 7px solid #fff; border-left: 7px solid transparent; content: ''; } .dropdown.dropup > .dropdown-menu:after, .dropdown.dropup > .dropdown-menu:before { display: none !important; } .btn-group.dropup > .dropdown-menu:after, .btn-group.dropup > .dropdown-menu:before { display: none !important; } .dropdown-toggle.dropup > .dropdown-menu:after, .dropdown-toggle.dropup > .dropdown-menu:before { display: none !important; } .navbar-left .dropdown-menu:before, .dropdown-menu.dropdown-menu-left:before { left: 16px; right: auto; } .navbar-left .dropdown-menu:after, .dropdown-menu.dropdown-menu-left:after { left: 17px; right: auto; } .navbar-right .dropdown-menu:before, .dropdown-menu.dropdown-menu-right:before { right: 16px; left: auto; } .navbar-right .dropdown-menu:after { right: 17px; left: auto; } .dropdown-menu.dropdown-menu-right:after { right: 17px; left: auto; } .dropdown-menu.title-caret:after { border-bottom: 7px solid #fff; } .dropdown-menu > li.active > a { background: #f7f7f7; color: #2b2b2b; } .dropdown-menu > li.active > a:hover, .dropdown-menu > li.active > a:focus, .dropdown-menu > li.active > a:active, .dropdown-menu > li.active > a:hover, .dropdown-menu > li.active > a:focus { background: #f7f7f7; color: #2b2b2b; } .drop-title { display: block; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom: 1px solid #e5e9ec; background: #fff; padding: 12px; color: #6a6a6a; margin: 0px; } .drop-title-link { float: right; display: inline !important; padding: 0px !important; height: 18px; width: 18px; overflow: hidden; vertical-align: text-top; line-height: 18px !important; text-align: center; border-radius: 100%; } .drop-title-link i { margin-right: 0 !important; } .dropdown-menu li.drop-all a { padding: 10px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; color: #707070; background: #FFF; font-size: 14px; } .dropdown-menu li.drop-all a:hover { background: #f7f7f7; } .dropdown-sm { width: 190px; } .dropdown-md { width: 230px; } .dropdown-lg { width: 280px; } .dropdown-content { padding-top: 0; padding-bottom: 0; } .dropdown-menu li a { padding: 8px 15px; color: #5f5f5f; font-size: 14px; font-weight: 400; display: block; } .dropdown-menu li a i { margin-right: 10px; } .dropdown-menu li.no-link { padding: 7px 10px 7px 10px; } .dropdown-menu li.li-group { border-bottom: 1px solid #E5E9EC; padding: 5px 0px 5px 0px; } /* page header nav */ .page-header .nav .open > a { background-color: #eee; border-color: transparent; } .page-header .nav .open > a:hover, .page-header .nav .open > a:focus { background-color: #eee; border-color: transparent; } .right-sidebar-top .nav > li > a { padding: 11px 15px; position: relative; display: block; } .page-right-sidebar-inner .tab-content { margin-top: 0; } .page-header .nav > li > a { font-weight: 400; margin: 0 15px; padding: 10px 0; } .page-header .nav-tabs.nav > li:first-child > a, .page-header .nav-pills.nav > li:first-child > a { margin-left: 0px; } .page-header .navbar .dropdown .dropdown-menu { display: block; visibility: hidden; opacity: 0; transition: all 300ms ease; -moz-transition: all 300ms ease; -webkit-transition: all 300ms ease; -o-transition: all 300ms ease; -ms-transition: all 300ms ease; margin-top: 40px !important; } .page-header .navbar .dropdown .dropdown-menu.dropdown-list li:first-child { margin-top: 5px; } .page-header .navbar .dropdown .dropdown-menu.dropdown-list li:last-child { margin-bottom: 5px; } .page-header .navbar .dropdown .dropdown-menu.dropdown-list.theme-settings li:first-child { margin-top: 0; } .page-header .navbar .dropdown-menu.show { visibility: visible; opacity: 1; margin-top: 15px !important; } .page-header .navbar .dropdown { display: inline-block; } .page-header .navbar .dropdown.user-dropdown { margin-top: 2px; } .dropdown-notifications { height: auto !important; max-height: 250px; } .dropdown-notifications .dropdown-oc li a { padding-right: 0; border-bottom: 1px solid #e5e9ec; } .dropdown-notifications .dropdown-oc li a span.notification-badge { width: 30px; height: 30px; display: block; line-height: 30px; text-align: center; border-radius: 100%; display: inline-block; vertical-align: top; margin-top: 10px; } .dropdown-notifications .dropdown-oc li a span.notification-badge i { margin-right: 0px; } .dropdown-notifications .dropdown-oc li a span.notification-info { width: 204px; display: block; padding: 5px 15px; display: inline-block; vertical-align: middle; font-weight: normal; } .dropdown-notifications .dropdown-oc li a span.notification-info small { color: #aaa; } @media screen and (max-width: 991px) { .page-header { height: auto !important; padding: 0; } .page-header .navbar { height: auto !important; } .page-header .navbar-default .container-fluid, .page-header .navbar-default .navbar-collapse { height: auto !important; } .navbar li { display: block; } .navbar-collapse { padding: 0 0 0 25px !important; flex-basis: unset; flex-grow: unset; width: calc(100% + 30px); } .navbar-nav { float: right; display: inline-block; } } @media screen and (max-width: 767px) { .dropdown-lg { width: 230px; } .dropdown-notifications .dropdown-oc li a span.notification-info { width: 168px; } } /* popover */ .popover { border: 1px solid #e5e9ec; border-radius: 4px; box-shadow: none; } .popover.top > .arrow { border-top-color: #e5e9ec; } .popover.right > .arrow { border-right-color: #e5e9ec; } .popover-title { padding: 15px 15px 10px 15px; color: #303030; text-transform: uppercase; font-weight: 700; font-size: 13px; background-color: transparent; border-bottom: none; border-radius: 4px 4px 0 0; font-family: 'Ubuntu', sans-serif; } .popover-content { padding: 10px 15px 15px 15px; } /* accordion style */ .accordion-style .card { background: transparent; box-shadow: none; margin-top: 0 !important; border: none; padding: 0; margin-bottom: 0; } .accordion-style .card-header { border: 0px; padding: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.15); background: none; } .accordion-style .btn-link { background: rgba(0, 0, 0, 0.03); color: #303030; font-size: 14px; line-height: 20px; position: relative; border: none; display: block; width: 100%; text-align: left; white-space: normal; border-radius: 4px; padding: 15px 30px 15px 15px; text-decoration: none; background: #00b838; color: #fff; } .accordion-style .btn-link.collapsed { background: rgba(0, 0, 0, 0.03); color: #303030; } .accordion-style .btn-link:hover { background: #00b838; color: #fff; border: none; text-decoration: none; } .accordion-style .btn-link.collapsed:after { background: none; content: "+"; right: 15px; left: inherit; font-size: 20px; height: auto; transform: none; width: auto; top: 15px; color: #303030; } .accordion-style .btn-link:after { background: none; content: "-"; right: 17px; left: inherit; font-size: 20px; height: auto; transform: none; width: auto; top: 15px; position: absolute; color: #fff; } .accordion-style .btn-link:hover:after { color: #fff; } .accordion-style .card-body { padding: 20px; line-height: 24px; text-align: left; } #accordion .card, #accordion2 .card { padding: 0; } #accordion .card-title, #accordion2 .card-title { padding: 20px; } /* =================================== Layout ====================================== */ /* page container */ .page-container { min-height: 100%; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } .page-container:not(.container) { width: 100%; } /* page header */ .page-header { padding-bottom: 0px; margin: 0; border-bottom: none; height: 56px; position: relative; padding-top: 0; padding-right: 0; background: #f6f9fc; } .page-header .nav > li > a:focus, .page-header .nav > li > a:hover { background-color: #fff; } .page-header .nav-pills > li > a { color: #777; border-radius: 0px !important; border-radius: 4px !important; padding: 10px 15px !important; margin-right: 5px !important; } .page-header .nav-pills > li > a:hover { background-color: #E2E2E2; } .page-header-fixed .page-header { position: fixed; z-index: 99; left: 240px; right: 0; top: 0; } .page-header-fixed .page-container.container .page-header { padding-right: 15px; padding-left: 195px; left: 0; right: 0; margin: auto; } .page-header-fixed.page-sidebar-collapsed .page-container.container .page-header { padding-right: 15px; padding-left: 75px; left: 0; right: 0; margin: auto; } .page-header-fixed.page-sidebar-collapsed .page-header { left: 80px; } @media screen and (min-width: 768px) { .page-header-fixed .page-container.container .page-header { width: 750px; } } @media screen and (min-width: 992px) { .page-header-fixed .page-container.container .page-header { width: 970px; } } @media screen and (min-width: 1200px) { .page-header-fixed .page-container.container .page-header { width: 1170px; } } @media screen and (max-width: 991px) { .page-header-fixed .page-header { left: 0; } } .page-header .form-control { background-color: #fff; color: #fff; } .page-header .form-control::placeholder { color: #cfd8e7; } .page-sidebar-fixed .page-header { z-index: 41; } .page-header .navbar-default { background-color: #00b838; box-shadow: 0 1px 15px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04); border: 0; margin-bottom: 0; height: 55px; border-radius: 0; padding-right: 25px; padding-left: 0; } .page-header .navbar-default .container-fluid, .page-header .navbar-default .navbar-collapse { height: 100% !important; } .page-header .navbar-default .navbar-brand i.fixed-sidebar-button-active { background: #fff; } .page-header .navbar-nav > li.v-divider { display: block; width: 1px; height: 26px; background: #F3F3F3; margin: 21px 15px; } .page-header .navbar-nav > li > a { padding-top: 20px; padding-bottom: 20px; color: #4F4F4F; font-size: 11px; text-transform: uppercase; display: inline-block; } .page-header .navbar-nav > li > a:hover, .page-header .navbar-nav > li > a:link, .page-header .navbar-nav > li > a:focus { color: #fff !important; } .page-header .navbar-nav > li > a > img { width: 36px; border: 1px solid #d5d5d5; margin-top: -10px; display: inline-block; vertical-align: top; } .page-header .navbar-nav > li.user-dropdown > a { margin-right: 0px; padding-bottom: 0; } .navbar-default .navbar-nav > .open > a { color: #1f2229; background-color: transparent; } .navbar-default .navbar-nav > .open > a:focus, .navbar-default .navbar-nav > .open > a:hover { color: #1f2229; background-color: transparent; } .page-header .navbar-collapse { padding-right: 0px; padding-left: 0px; } .page-header .nav { padding-left: 0; margin-bottom: 0; list-style: none; } .page-header .nav > li { position: relative; display: inline-block; } .page-header .nav > li > a:hover, .page-header .nav > li > a:focus { text-decoration: none; background-color: #eee; } .page-header .nav > li.disabled > a { color: #777; } .page-header .nav > li.disabled > a:hover, .page-header .nav > li.disabled > a:focus { color: #777; text-decoration: none; cursor: not-allowed; background-color: transparent; } .page-header .nav .open > a { background-color: #eee; border-color: #337ab7; } .page-header .nav .open > a:hover, .page-header .nav .open > a:focus { background-color: #eee; border-color: #337ab7; } .page-header .nav .nav-divider { height: 1px; margin: 9px 0; overflow: hidden; background-color: #e5e5e5; } .page-header .nav > li > a > img { max-width: none; } .page-header .navbar-right .dropdown-menu { right: 0; left: auto; position: absolute; } .page-header .navbar-header { float: left; } .page-header .navbar-collapse { padding-right: 15px; padding-left: 15px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .page-header .navbar-collapse.in { overflow-y: auto; } .page-header .container > .navbar-header, .page-header .container-fluid > .navbar-header, .page-header .container > .navbar-collapse, .page-header .container-fluid > .navbar-collapse { margin-right: -15px; margin-left: -15px; } .page-header .navbar-brand { float: left; height: 50px; padding: 15px 15px; font-size: 18px; line-height: 20px; } .page-header .navbar-brand:hover, .page-header .navbar-brand:focus { text-decoration: none; } .page-header .navbar-brand > img { display: block; } .page-header .navbar-toggle { position: relative; float: right; padding: 9px 10px; margin-top: 8px; margin-right: 0; margin-bottom: 8px; background-color: transparent; background-image: none; border: 1px solid transparent; border-radius: 4px; } .page-header .navbar-toggle:focus { outline: 0; } .page-header .navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; } .page-header .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; } .page-header .navbar-nav { margin: 7.5px 0; } .page-header .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; } .page-header .navbar-default .navbar-brand { color: #777; } .page-header .navbar-default .navbar-brand:hover, .page-header .navbar-default .navbar-brand:focus { color: #5e5e5e; background-color: transparent; } .page-header .navbar-default .navbar-text { color: #777; } .page-header .navbar-default .navbar-nav > li > a { color: #fff; } .page-header .navbar-default .navbar-nav > li > a:hover, .page-header .navbar-default .navbar-nav > li > a:focus { color: #333; background-color: transparent; } .page-header .navbar-default .navbar-nav > .active > a { color: #555; background-color: #e7e7e7; } .page-header .navbar-default .navbar-nav > .active > a:hover, .page-header .navbar-default .navbar-nav > .active > a:focus { color: #555; background-color: #e7e7e7; } .page-header .navbar-default .navbar-nav > .disabled > a { color: #ccc; background-color: transparent; } .page-header .navbar-default .navbar-nav > .disabled > a:hover, .page-header .navbar-default .navbar-nav > .disabled > a:focus { color: #ccc; background-color: transparent; } .page-header .navbar-default .navbar-toggle { border-color: #ddd; background-color: #fff; } .page-header .navbar-default .navbar-toggle:hover, .page-header .navbar-default .navbar-toggle:focus { background-color: #ddd; } .page-header .navbar-default .navbar-toggle .icon-bar { background-color: #888; } .page-header .navbar-default .navbar-collapse { padding-left: 0; padding-right: 0; } .page-header .navbar-default .navbar-nav > .open > a { color: #555; background-color: #e7e7e7; } .page-header .navbar-default .navbar-nav > .open > a:hover, .page-header .navbar-default .navbar-nav > .open > a:focus { color: #555; background-color: #e7e7e7; } @media screen and (min-width: 768px) { .navbar-nav { float: left; margin-left: 0; margin-right: 0; padding: 0; } .page-header .navbar-nav > li > a > i { font-size: 14px; vertical-align: text-top; } .page-header .navbar-nav > li > a > i[class^="icon-"] { font-size: 19px; vertical-align: top; } } @media screen and (min-width: 768px) { .page-header .navbar-collapse { width: auto; border-top: 0; -webkit-box-shadow: none; box-shadow: none; } .page-header .navbar-collapse.collapse { display: block !important; height: auto !important; padding-bottom: 0; overflow: visible !important; } .page-header .navbar-collapse.in { overflow-y: visible; } .page-header .container > .navbar-header, .page-header .container-fluid > .navbar-header, .page-header .container > .navbar-collapse, .page-header .container-fluid > .navbar-collapse { margin-right: 0; margin-left: 0; } .page-header .navbar > .container .navbar-brand, .page-header .navbar > .container-fluid .navbar-brand { margin-left: -15px; } .page-header .navbar-toggle { display: none; } .page-header .navbar-nav { float: left; margin: 0; display: inline-block; } .page-header .navbar-nav > li { float: left; display: block; } .page-header .navbar-nav > li > .dropdown-menu { margin-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; } .page-header .navbar-left { float: left !important; } .page-header .navbar-right { float: right !important; margin-right: -15px; } .page-header .navbar-right ~ .navbar-right { margin-right: 0; } } @media screen and (max-width: 767px) { .page-header ul.navbar-nav:first-child { display: none; } .page-header .navbar-nav .open .dropdown-menu > li > a, .page-header .navbar-nav .open .dropdown-menu .dropdown-header { padding: 5px 15px 5px 25px; } .page-header .navbar-nav .open .dropdown-menu > li > a { line-height: 20px; } .page-header .navbar-nav .open .dropdown-menu > li > a:hover, .page-header .navbar-nav .open .dropdown-menu > li > a:focus { background-image: none; } .page-header .navbar-header { width: calc(100% + 30px); } .page-header .navbar-default { padding-right: 15px; } .page-header .navbar-default .navbar-nav .open .dropdown-menu > li > a { color: #777; } .page-header .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover, .page-header .navbar-default .navbar-nav .open .dropdown-menu > li > a:focus { color: #333; background-color: transparent; } .page-header .navbar-default .navbar-nav .open .dropdown-menu > .active > a { color: #555; background-color: #e7e7e7; } .page-header .navbar-default .navbar-nav .open .dropdown-menu > .active > a:hover, .page-header .navbar-default .navbar-nav .open .dropdown-menu > .active > a:focus { color: #555; background-color: #e7e7e7; } .page-header .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a { color: #ccc; background-color: transparent; } .page-header .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:hover, .page-header .navbar-default .navbar-nav .open .dropdown-menu > .disabled > a:focus { color: #ccc; background-color: transparent; } } /* page rightsidebar */ .page-right-sidebar { width: 231px; background: #fff; border-left: 1px solid #efefef; height: 100%; min-height: 100%; right: -231px; top: 0; z-index: 42; position: fixed; -webkit-transition: all .1s; -moz-transition: all .1s; -o-transition: all .1s; transition: all .1s; } .page-right-sidebar .nav-tabs { border-color: #E5E9EC; } .page-right-sidebar .nav-tabs > li.active > a { border-color: #E5E9EC; border-bottom-color: transparent; } .page-right-sidebar .nav-tabs > li.active > a:focus, .page-right-sidebar .nav-tabs > li.active > a:hover { border-color: #E5E9EC; border-bottom-color: transparent; } .page-right-sidebar .nav-tabs > li > a { color: #2b2b2b; } .page-right-sidebar .nav-tabs > li > a:hover { border-color: #edf1f4; border-bottom: transparent; } .page-right-sidebar .nav-justified.nav-tabs > li > a:hover { border-color: #ddd; border-bottom: transparent; } .page-right-sidebar .nav-tabs { border-bottom: 1px solid #E2E2E2 !important; } .page-right-sidebar .nav-tabs > li > a { border-radius: 0 !important; border-top-left-radius: 3px !important; border-top-right-radius: 3px !important; color: #777; border-bottom: 1px solid #E2E2E2; } .page-right-sidebar .nav-tabs > li.active > a { border: 1px solid transparent; color: #1B2733; font-weight: 700; } .page-right-sidebar .nav-tabs > li.active > a:focus, .page-right-sidebar .nav-tabs > li.active > a:hover { border: 1px solid transparent; color: #1B2733; font-weight: 700; } .page-right-sidebar div:not(.tabs-right):not(.tabs-left) > .page-right-sidebar .nav-tabs > li:not(.active) > a:hover { background: transparent; border-color: transparent; border-bottom: 1px solid #B6BABD; color: #3D464D; } .page-right-sidebar .nav-tabs > li.active > a { color: #555; cursor: default; background-color: #fff; border-bottom-color: #1B2733; } .page-right-sidebar .nav-tabs > li.active > a:hover, .page-right-sidebar .nav-tabs > li.active > a:focus { color: #555; cursor: default; background-color: #fff; border-bottom-color: #1B2733; } .page-right-sidebar.visible { right: 0; } .page-right-sidebar#chat-right-sidebar { -webkit-transition: all .1s; -moz-transition: all .1s; -o-transition: all .1s; transition: all .1s; opacity: 0; } .page-right-sidebar#chat-right-sidebar.visible { opacity: 1; } .right-sidebar-top { background: #fff; display: block; height: 56px; border-bottom: 1px solid #efefef; } #chat-right-sidebar .right-sidebar-top { height: 56px; border-bottom: 1px solid #e5e5e5; } .page-right-sidebar .right-sidebar-close { float: right; color: #4F5862; opacity: 0.6; font-size: 16px; padding: 10px 20px; height: 55px; line-height: 34px; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .page-right-sidebar .right-sidebar-close:hover { background: transparent; opacity: 1; } .page-right-sidebar .chat-sidebar-close { float: left; color: #4F5862; opacity: 0.6; font-size: 22px; padding: 17px 20px; height: 36px; line-height: 22px; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .page-right-sidebar .chat-sidebar-close:hover { background: transparent; opacity: 1; } .right-sidebar-tabs { float: left; width: 174px; height: 55px; } .right-sidebar-tabs li { width: 50%; } .right-sidebar-tabs a { height: 55px; line-height: 33px !important; font-size: 12px; color: #4F5862; opacity: 0.6; text-transform: uppercase; font-weight: 700 !important; text-align: center; padding-left: 0 !important; padding-right: 0 !important; border: 0 !important; margin-right: 0 !important; border-radius: 0 !important; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; margin-left: 0 !important; } .right-sidebar-tabs .nav-tabs { border-bottom: 0 !important; } .right-sidebar-tabs .nav-tabs > li.active > a { cursor: pointer; background-color: #fff; border: none; color: #4F5862 !important; opacity: 1 !important; } .right-sidebar-tabs .nav-tabs > li.active > a:focus, .right-sidebar-tabs .nav-tabs > li.active > a:hover { cursor: pointer; background-color: #fff; border: none; color: #4F5862 !important; opacity: 1 !important; } .right-sidebar-tabs > .nav-tabs > li > a:focus, .right-sidebar-tabs > .nav-tabs > li > a:hover { text-decoration: none; background-color: transparent; opacity: 1; border-bottom-color: transparent !important; } .chat-list .chat-item { overflow: hidden; position: relative; display: block; border-bottom: 1px solid #efefef; padding: 5px 0; } .chat-list .chat-item:last-child { border-bottom: 1px solid transparent; } .chat-list .chat-item:hover { background: #f9f9f9; } .chat-list .chat-item img { float: left; width: 40px; border-radius: 100%; margin: 10px; margin-left: 20px; } .chat-list .chat-item .user-avatar { position: relative; display: inline-block; overflow: hidden; float: left; } .chat-list .chat-item.active-user .user-avatar:after { content: ' '; display: block; width: 12px; height: 12px; border-radius: 50%; background: #44AEA1; position: absolute; bottom: 9px; right: 9px; border: 2px solid #fff; } .chat-list .chat-item .chat-info { float: left; overflow: hidden; padding: 13px 0; width: 100px; } .chat-list .chat-item .chat-info span.chat-author { display: block; color: #4F5862; opacity: 0.6; font-size: 13px; line-height: 15px; padding: 0; margin-bottom: 4px; } .chat-list .chat-item .chat-info span.chat-text { display: block; color: #4F5862; opacity: 0.6; font-size: 13px; line-height: 15px; padding: 0; margin: 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .chat-list .chat-item .chat-info span.chat-time { display: block; color: #4F5862; opacity: 0.6; font-size: 12px; line-height: 15px; padding: 0; margin: 0; position: absolute; right: 20px; top: 50%; margin-top: -7.5px; } .chat-list .chat-item.unread .chat-info span { font-weight: 600; opacity: 1; } .load-more-messages { display: block; text-align: center; width: 100%; margin: 15px auto; font-size: 14px; color: #4F5862; opacity: 0.6; } .load-more-messages:hover { color: #4F5862; opacity: 1; } .chat-top-info { float: left; padding: 10px 0px 10px 20px; } .chat-top-info span { display: block; } .chat-top-info span.chat-name { color: #555; font-size: 12px; text-transform: uppercase; font-weight: bold; } .chat-top-info span.chat-state { color: #4F5862; font-size: 12px; opacity: 0.6; } .chat-more-nav { float: right; display: block; position: relative; width: 15px; height: 15px; margin: 13px 5px; text-align: center; } .chat-more-nav > a { display: block; position: relative; font-size: 18px; width: 100%; height: 100%; } .chat-start-date { width: 100%; color: #767676; font-size: 12px; text-align: center; padding: 10px 0; } .page-right-sidebar-inner { height: 100%; } .right-sidebar-content { height: calc(100% - 56px); } .right-sidebar-content .slimScrollDiv { height: calc(100% - 56px) !important; width: 100% !important; } .right-sidebar-chat { height: 100% !important; padding-bottom: 20px; display: block; } .chat-bubble { position: relative; width: 100%; display: block; overflow: hidden; } .chat-bubble.them .chat-bubble-img-container { float: left; } .chat-bubble .chat-bubble-text-container { max-width: 60%; display: block; } .chat-bubble.them .chat-bubble-text-container { float: left; clear: right; } .chat-bubble.me .chat-bubble-text-container { float: right; clear: right; } .chat-bubble img { width: 38px; height: 38px; border-radius: 100%; } .chat-bubble.them img { margin-left: 20px; } .chat-bubble span.chat-bubble-text { padding: 5px 10px; min-height: 28px; margin: 0 10px; position: relative; font-size: 13px; font-weight: 400; line-height: 1.8; float: left; clear: both; word-wrap: break-word; max-width: 100%; } .chat-bubble.them span.chat-bubble-text { margin-left: 10px; background: #00b838; color: #fff; border-radius: 4px; border-top-left-radius: 0px; } .chat-bubble.me span.chat-bubble-text { margin-left: 10px; margin-right: 30px; background: #f1f1f1; float: right; border-radius: 4px; border-top-right-radius: 0px; } .chat-bubble span.chat-bubble-text { margin-top: 4px; } .chat-bubble span.chat-bubble-text:first-child { margin-top: 0; } .chat-bubble span.chat-bubble-text:last-child { margin-bottom: 5px; } .chat-bubble span.chat-bubble-text:first-child:before { content: ''; width: 0; height: 0; border-style: solid; } .chat-bubble.them span.chat-bubble-text:first-child:before { border-width: 0 10px 10px 0; border-color: transparent #00b838 transparent transparent; position: absolute; top: 0; left: -9px; } .chat-bubble.me span.chat-bubble-text:first-child:before { border-width: 10px 10px 0 0; border-color: #f1f1f1 transparent transparent; position: absolute; top: 0; right: -9px; } .chat-write input { background: transparent; border: 0; box-shadow: none; border-top: 1px solid #f1f1f1; height: 56px; border-radius: 0; padding: 0 20px; } .chat-write input:focus { box-shadow: none; border-color: #f1f1f1; } .right-sidebar-settings .settings-title, span.chat-title { padding: 10px 25px; text-transform: uppercase; font-weight: 700; font-size: 12px; display: block; margin: 5px 0 0 0; background: transparent; color: #4F5862; opacity: 0.6; } .sidebar-setting-list li { padding: 12px 25px; font-size: 13px; color: #4F5862; } .sidebar-setting-list li:last-child { border-color: transparent; } .sidebar-setting-list li .switchery { float: right; } /* page left sidebar */ .page-sidebar { width: 240px; background: #fff; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.05); min-height: 100%; float: left; z-index: 100; position: relative; } .page-sidebar-fixed .page-sidebar { position: fixed; top: 0; bottom: 0; z-index: 100; height: 100% !important; } .page-sidebar-fixed .page-sidebar .page-sidebar-inner { height: 100% !important; overflow: hidden; } body:not(.page-sidebar-fixed) .page-sidebar .slimScrollDiv { height: auto !important; } .page-sidebar-fixed .page-sidebar, .page-header-fixed .page-sidebar, .page-sidebar-fixed.page-header-fixed .page-sidebar { padding-top: 45px; } .page-sidebar-collapsed.page-sidebar-fixed .page-sidebar, .page-sidebar-collapsed.page-header-fixed .page-sidebar, .page-sidebar-collapsed.page-sidebar-fixed.page-header-fixed .page-sidebar { padding-top: 45px; } .logo-box { width: 240px; padding: 15px 20px 10px 25px; color: #fff !important; background: #00b838; box-shadow: 0 1px 15px rgba(0, 0, 0, 0.04), 0 1px 6px rgba(0, 0, 0, 0.04); font-weight: 800; font-size: 18px; display: block; text-decoration: none; z-index: 9999; text-transform: uppercase; line-height: 30px; } .page-header-fixed .logo-box { position: fixed; top: 0; } .logo-box:hover, .logo-box:active, .logo-box:link, .logo-box:focus { color: #fff; text-decoration: none; } .logo-box i { margin-left: 12px; float: right; height: 14px; margin-top: 9px; font-size: 13px; } .page-sidebar-fixed .logo-box { position: fixed; left: auto; border-bottom: none; z-index: 9999; top: 0; color: #fff; } .page-sidebar-menu { padding: 10px; } .page-sidebar-menu .has-sub.active-page > a.active, .page-sidebar-menu .has-sub.active-page a.active i, .page-sidebar-menu .has-sub.active-page > a.active i.accordion-icon { color: #fff; } .page-sidebar-menu .has-sub > a.active { color: #00b838; font-weight: 500; } .page-sidebar-menu .has-sub a.active i { color: #00b838; } .page-sidebar-fixed .page-sidebar .accordion-menu { margin-top: 10px; } .page-sidebar-menu ul { padding: 0; margin: 0; } .page-sidebar-menu ul li { list-style-type: none; position: relative; } .page-sidebar-menu ul li a { display: block; font-weight: 500; font-size: 14px; padding: 10px 15px; line-height: 1.5 !important; -webkit-font-smoothing: antialiased; position: relative; border-radius: 4px; } .page-sidebar-menu ul li.active-page > a i { color: #fff; } .page-sidebar-menu ul li.active-page > a i.accordion-icon { color: #fff; } .page-sidebar-menu .accordion-menu > li.active > a { color: #fff; font-weight: 500; background: #00b838; border-radius: 4px; } .page-sidebar-menu ul li.active-page > a { color: #fff; font-weight: 500; background: #00b838; border-radius: 4px; position: relative; } .page-sidebar-menu ul li a:link { text-decoration: none; } .page-sidebar-menu > ul > li > a:hover { opacity: .8; } .page-sidebar-collapsed .page-sidebar-menu > ul > li > a:hover { opacity: 1; } .page-sidebar-menu > ul > li > a:hover { text-decoration: none; } .page-sidebar-menu > ul > li > a:hover i.accordion-icon { text-decoration: none; } .page-sidebar-menu ul li a i.menu-icon { margin-right: 10px; font-size: 17px; vertical-align: middle; line-height: 22px; } .page-sidebar-menu ul li a span { vertical-align: middle; } .page-sidebar-menu ul li.menu-divider { display: block; width: 100%; height: 1px; background-color: #00b838; margin: 10px 0; } .page-sidebar-menu li.has-sub a i.accordion-icon { float: right; font-size: 15px; vertical-align: text-top; color: #303030; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; margin-top: 3px; } .page-sidebar-menu ul li a span.label { margin: 3px 0; float: right; } .page-sidebar-menu li.has-sub a.active i.accordion-icon { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg); color: #00b838; color: #00b838; } .page-sidebar-menu ul li .sub-menu a:hover { opacity: 0.8; } .accordion-menu .sub-menu { display: none; padding-left: 22px; padding-bottom: 10px; } .accordion-menu .has-sub.active-page .sub-menu { display: block; } .page-sidebar-collapsed .accordion-menu .sub-menu { padding-bottom: 0px; padding-left: 0px; } .accordion-menu .sub-menu li a { border-top: 0; padding: 8px 20px; font-size: 13px; } .accordion-menu .sub-menu li.active a { color: #00b838; } .accordion-menu .sub-menu li.active a:hover { color: #00b838 !important; } .page-sidebar-collapsed .accordion-menu .sub-menu li.active a { color: #fff; } .page-sidebar-collapsed .accordion-menu .sub-menu li.active a:hover { color: #fff !important; } .logo-sm, #sidebar-toggle-button-close { display: none; } @media screen and (max-width: 991px) { .logo-sm { display: block; } .logo-sm #sidebar-toggle-button { float: left; margin-top: 8px; margin-right: 15px; margin-left: 15px; margin-bottom: 8px; vertical-align: middle; padding: 7px 0; color: #fff !important; } .logo-sm .logo-box { float: left; padding: 2px 0; margin-top: 8px; margin-right: 15px; margin-left: 8px; margin-bottom: 8px; width: auto; box-shadow: none; } .page-sidebar-collapsed .logo-sm .logo-box { height: auto; display: block; padding: 2px 0 0 0; } .page-sidebar-fixed .logo-sm .logo-box { position: relative; z-index: 40; } .page-sidebar-collapsed .logo-sm .logo-box { text-align: left; } .page-sidebar-collapsed .logo-sm .logo-box span { display: block; } .page-sidebar-visible .page-sidebar { left: 0; } #fixed-sidebar-toggle-button { display: none; } #sidebar-toggle-button-close { margin-left: 12px; float: right; height: 14px; font-size: 18px; margin-top: 6px; display: block; } .page-sidebar-collapsed #sidebar-toggle-button-close { margin: 8px auto; float: none; } .navbar-toggle { border-radius: 100%; width: 40px; } .page-header .navbar-nav > li > a { font-size: 14px; height: auto; } } /* collapsed sidebar */ .page-sidebar-collapsed .page-sidebar, .page-sidebar-collapsed .logo-box { width: 80px; } .page-sidebar-collapsed.page-sidebar-fixed .page-sidebar { height: 100%; } .page-sidebar-collapsed .logo-box { padding: 15px 10px 11px 10px; text-align: center; height: 55px; } .page-sidebar-collapsed .logo-box span { display: none; } .page-sidebar-collapsed .logo-box i { margin: 9px auto; float: none; } .page-sidebar-collapsed:not(.page-sidebar-fixed) .page-sidebar .slimScrollDiv { overflow: visible !important; height: calc(100% - 83px) !important; } .page-sidebar-collapsed .page-sidebar .page-sidebar-inner { height: 100%; overflow-y: hidden !important; overflow-x: visible !important; } .page-sidebar .slimScrollBar { display: none !important; } .page-sidebar-collapsed .page-sidebar-menu > ul > li { width: 60px; position: relative; } .page-sidebar-collapsed .page-sidebar-menu > ul > li.has-sub > a { border-radius: 4px; border-bottom-right-radius: 0; } .page-sidebar-collapsed .page-sidebar-menu > ul > li > a { width: 60px; padding: 14px 21.5px; position: relative; } .page-sidebar-collapsed .page-sidebar-menu > ul > li > a > i.menu-icon { margin-right: 20.5px; } .page-sidebar-collapsed .page-sidebar-menu > ul > li:hover > a, .page-sidebar-collapsed .page-sidebar-menu > ul > li > a:hover { color: #fff; } .page-sidebar-collapsed .page-sidebar-menu ul li .sub-menu, .page-sidebar-collapsed .page-sidebar-menu ul li.active-page .sub-menu, .page-sidebar-collapsed .page-sidebar-menu ul li.open .sub-menu { display: none !important; width: 170px; } .page-sidebar-collapsed .page-sidebar-menu ul li a span { display: none; } .page-sidebar-collapsed .page-sidebar-menu ul li a span:not(.label) { padding-left: 25px; } .page-sidebar-collapsed .page-sidebar-menu ul li a i.accordion-icon { display: none; } .page-sidebar-collapsed .page-sidebar-menu ul li .sub-menu { position: absolute; left: 60px; z-index: 9999; padding-bottom: 14px; background-color: #00b838; } .page-sidebar-collapsed .page-sidebar-menu ul li .sub-menu a { opacity: 1; color: #fff; padding: 8px 25px 8px 25px; } .page-sidebar-collapsed .page-sidebar-menu ul li a:hover + .sub-menu, .page-sidebar-collapsed .page-sidebar-menu ul li .sub-menu:hover, .page-sidebar-collapsed .page-sidebar-menu ul li:hover a span, .page-sidebar-collapsed .page-sidebar-menu ul li a:hover span { display: inline !important; } .page-sidebar-collapsed .page-sidebar-menu > ul > li:hover > a { width: 230px; background: #00b838; } .page-sidebar-collapsed .page-sidebar.fixed-sidebar-scroll .slimScrollDiv { width: 260px !important; } /* search */ .search-form { left: 0; right: 0; position: absolute; background: #fff; height: 56px; z-index: 41; margin-top: -81px; -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; font-weight: 400; opacity: 0; } .search-form input { border: none; height: 56px; border-radius: 0; box-shadow: none; padding-left: 25px; padding-bottom: 7px; color: #303030 !important; } .search-form #close-search { background-color: #fff; color: #303030; border: none; height: 44px; border-radius: 50%; box-shadow: none; margin: 5px 40px 6px 0; padding: 0 12px; } .search-form #close-search i { font-size: 20px; vertical-align: text-top; } .search-form input:focus { border: none; box-shadow: none; } .search-form #close-search:hover, .search-form #close-search:focus { background-color: #f1f1f1 !important; opacity: 1; border: none; outline: 0; box-shadow: none; } .search-content { position: absolute; background: #fff; } .search-open .search-form { margin-top: 0; opacity: 1; } @media screen and (max-width: 991px) { .search-form { height: 65px; } } /* page content */ .page-content { min-height: 56px; vertical-align: bottom; background: #f8f8f8; width: calc(100% - 240px); float: right; } .page-sidebar-collapsed .page-content { width: calc(100% - 60px); } .page-sidebar-fixed .page-content { margin-left: 240px; } .page-sidebar-fixed.page-sidebar-collapsed .page-content { margin-left: 80px; } _::-webkit-full-page-media, _:future { vertical-align: top; } :root .page-content { vertical-align: top; } @media screen and (max-width: 991px) { .page-sidebar { position: fixed !important; left: -240px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .page-content, .page-sidebar-collapsed .page-content { width: 100%; } .page-sidebar-fixed .page-content, .page-sidebar-fixed.page-sidebar-collapsed .page-content { margin-left: 0px; } } /* page inner */ .page-inner { position: relative; min-height: calc(100% - 81px); padding: 20px 40px 60px 30px; background: #f8f8f8; } .page-inner.no-page-title { padding-top: 30px; } .page-inner.full-page { padding-left: 0px; padding-right: 0px; padding-top: 0px; } .page-inner.full-page.no-footer { padding-bottom: 0px; } .page-inner.full-page .page-footer { padding-left: 30px; padding-right: 30px; } _::-webkit-full-page-media, _:future { padding-bottom: 0px; } :root .page-inner { padding-bottom: 30px; } .page-header-fixed .page-inner { margin-top: 81px; } .page-footer { position: absolute; bottom: 0; } @media screen and (max-width: 991px) { .page-error .page-inner { vertical-align: top; padding: 40px; } .page-inner:not(.login-page) { padding: 20px 20px 42px 20px; } } /* =================================== Plugins ====================================== */ /* jsTree */ .jstree-default .jstree-clicked, .jstree-default li a:hover { background: #f1f1f1; border-radius: 0; box-shadow: inset 0 0 1px #999; } .jstree-icon.jstree-themeicon.fa { font-family: "FontAwesome" !important; } /* toastr */ #toast-container > div { box-shadow: none; border-radius: 4px; border: 1px solid transparent; } #toast-container > .toast-success { background-color: #E8F7ED; color: #30B661; border-color: #30B661; } #toast-container > .toast-info { background-color: #D9E7F9; color: #2F73C8; border-color: #2F73C8; } #toast-container > .toast-warning { background-color: #F9E69B; color: #94780A; border-color: #94780A; } #toast-container > .toast-error { background-color: #FBDBDE; color: #D83945; border-color: #D83945; } #toast-container > div:hover { box-shadow: none; } /* to do */ .todo-nav { margin-top: 10px; } .todo-list { margin: 10px 0; } .todo-list .todo-item { padding: 15px; margin: 5px 0; border-radius: 0; background: #f7f7f7; } .todo-list.only-active .todo-item.complete { display: none; } .todo-list.only-active .todo-item:not(.complete) { display: block; } .todo-list.only-complete .todo-item:not(.complete) { display: none; } .todo-list.only-complete .todo-item.complete { display: block; } .todo-list .todo-item.complete span { text-decoration: line-through; } .remove-todo-item { color: #ccc; visibility: hidden; } .remove-todo-item:hover { color: #5f5f5f; } .todo-item:hover .remove-todo-item { visibility: visible; } #uniform-all-complete { margin-left: 11px; } /* =================================== Pages ====================================== */ /* error page */ body.error-page { background-color: #fff; } .page-error { height: 100%; width: 100%; display: table; } .page-error .page-content { width: 100%; height: 100%; display: table; } .page-error .page-inner { padding: 0px; display: table-cell; vertical-align: middle; background: #f6f9fc; } .page-error p.error-page-top-text { margin-bottom: 10px; font-size: 24px; } .page-error p.error-page-bottom-text { font-size: 14px; margin-bottom: 30px; } .page-error b { font-size: 30px; color: #2b2b2b; } .error-page-logo { font-size: 88px; font-weight: 300; margin-top: 0; margin-bottom: 20px; } /* profile */ .user-profile-card { text-align: center; } .user-profile-image { width: 100px; height: 100px; margin-bottom: 10px; } .team .team-member { display: block; overflow: hidden; margin-bottom: 10px; float: left; position: relative; } .team .team-member .online { top: 5px; right: 5px; } .team .team-member img { width: 40px; float: left; border-radius: 50%; margin: 0 5px 0 5px; } .profile-timeline ul li .timeline-item-header { width: 100%; overflow: hidden; } .profile-timeline ul li .timeline-item-header img { width: 40px; height: 40px; float: left; margin-right: 10px; border-radius: 50%; } .profile-timeline ul li .timeline-item-header p { margin: 0; color: #000; font-weight: 500; } .profile-timeline ul li .timeline-item-header p span { margin: 0; color: #8E8E8E; font-weight: normal; } .profile-timeline ul li .timeline-item-header small { margin: 0; color: #8E8E8E; } .profile-timeline ul li .timeline-item-post { padding: 20px 0 0 0; position: relative; } .profile-timeline ul li .timeline-item-post > img { width: 100%; } .timeline-options { overflow: hidden; margin-top: 20px; margin-bottom: 20px; border-bottom: 1px solid #f1f1f1; padding: 10px 0 10px 0; } .timeline-options a { display: block; margin-right: 20px; float: left; color: #2b2b2b; text-decoration: none; } .timeline-options a i { margin-right: 3px; } .timeline-options a:hover { color: #00b838; } .timeline-comment { overflow: hidden; margin-bottom: 10px; width: 100%; border-bottom: 1px solid #f1f1f1; padding-bottom: 5px; } .timeline-comment .timeline-comment-header { overflow: hidden; } .timeline-comment .timeline-comment-header img { width: 30px; border-radius: 50%; float: left; margin-right: 10px; } .timeline-comment .timeline-comment-header p { color: #000; float: left; margin: 0; font-weight: 500; } .timeline-comment .timeline-comment-header small { font-weight: normal; color: #8E8E8E; } .timeline-comment p.timeline-comment-text { display: block; color: #2b2b2b; font-size: 14px; padding-left: 40px; } .post-options { overflow: hidden; margin-top: 15px; margin-left: 15px; } .post-options a { display: block; margin-top: 5px; margin-right: 20px; float: left; color: #2b2b2b; text-decoration: none; font-size: 16px !important; } .post-options a:hover { color: #00b838; } .online { position: absolute; top: 2px; right: 2px; display: block; width: 9px; height: 9px; border-radius: 50%; background: #ccc; } .online.on { background: #2EC5D3; } .online.off { background: #EC5E69; } /* timeline */ #cd-timeline::before { border: 0; background: #f1f1f1; } .cd-timeline-content p, .cd-timeline-content .cd-read-more, .cd-timeline-content .cd-date { font-size: 14px; } .cd-timeline-img.cd-success { background: #2EC5D3; } .cd-timeline-img.cd-danger { background: #EC5E69; } .cd-timeline-img.cd-info { background: #5893DF; } .cd-timeline-img.cd-warning { background: #F1C205; } .cd-timeline-img.cd-primary { background: #9F7CE1; } /* maps */ .page-inner.full-page { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; } #map { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; } #vmap { -webkit-box-flex: 1; -moz-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; line-height: 1px; position: relative; overflow: hidden; } .jqvmap-zoomin, .jqvmap-zoomout { border-radius: 4px; background: #f1f1f1; padding: 3px; color: #303030; width: 20px; height: 20px; line-height: 14px; left: 25px; } .jqvmap-zoomin:hover, .jqvmap-zoomout:hover { background: #303030; color: #fff; } /* authentication */ .login-page { width: 100%; height: 100%; background: url("../img/screen-bg.jpg") no-repeat center center fixed; background-size: cover; padding: 0px; } .login-box { width: 300px; height: 100vh; background: #fff; padding: 35px; } .login-title { font-size: 22px; font-weight: bold; margin-bottom: 35px; } .login-title span { margin-left: 5px; font-size: 12px; opacity: .7; } .forgot-link { margin-top: 10px; display: inline-block; } .lock-screen img { width: 50px; height: 50px; border-radius: 50%; display: inline-block; } .lock-screen p { margin-bottom: 20px; display: block; } .lock-screen p span { display: inline-block; margin-left: 10px; text-transform: uppercase; font-weight: bold; } @media screen and (max-width: 768px) { .login-box { width: 100%; } } /* pricing tables */ .pricing { text-align: center; border: 1px solid #E5E9EC; font-size: 14px; padding-left: 0; } .pricing li { list-style: none; padding: 12px 8px; } .pricing li:first-child, .pricing li:last-child { padding: 20px 13px; } .pricing li + li { border-top: 1px solid #E5E9EC; } .pricing h1 { font-size: 24px; color: #2b2b2b; margin-bottom: 0; } .pricing h3 { margin-bottom: 0; font-size: 32px; } .pricing span { font-size: 12px; color: #999; font-weight: normal; } .pricing li:nth-child(2) { padding: 30px 13px; } /* charts */ #nvd1, #nvd2, #nvd3, #nvd4, #nvd5, #nvd6, #flot1, #flot2 { height: 400px; } #flot3, #flot4 { height: 307px; } /* email */ .email-list { max-height: 590px; overflow-y: auto; } .email-list ul { margin-bottom: 0px; } .email-list-item .email-author img { width: 35px; border-radius: 100%; } .email-list-item .email-author span.author-name { margin-left: 7px; font-weight: bold; line-height: 25px; } .email-list-item .email-author span.email-date { float: right; opacity: .6; line-height: 25px; font-size: 12px; } .email-list-item .email-info { display: block; margin-top: 8px; } .email-list-item .email-info .email-subject { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; } .email-list-item .email-info .email-text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; opacity: .7; } .email-list li a:active, .email-list li a:focus { color: #2b2b2b; } .email-menu li a:active, .email-menu li a:focus { color: #2b2b2b; } .email-list li a { display: block; padding: 18px 12px; border-bottom: 1px solid #E0E0E0; } .email-list li a:hover { background: #f1f1f1; } .email-list li.active a { background: #ececec; } .email-actions .compose { width: 100%; } .divider { height: 1px; display: block; width: 100%; margin: 10px 0; background: #E0E0E0; } .email-menu { margin-top: 20px; } .email-menu ul li a { display: block; padding: 5px 8px; } .email-menu ul li a:hover { color: #00b838; } .email-menu ul li.active a { color: #00b838; } .email-menu ul li a i { margin-right: 10px; width: 10px; font-size: 16px; vertical-align: middle; line-height: 30px; } .email-menu ul li a span { line-height: 30px; vertical-align: middle; } .email { margin-top: 20px; } .email .email-title { font-size: 15px; font-weight: bold; } .email .email-author img { width: 35px; border-radius: 100%; } .email .email-author span.author-name { margin-left: 7px; line-height: 25px; } .email .email-author span.email-date { float: right; opacity: .6; line-height: 25px; font-size: 12px; } .email .email-reply { margin-top: 20px; display: block; } .email .email-reply .btn-default { color: #303030; border-color: #303030; } .email .email-reply .btn-default:hover, .email .email-reply .btn-default:active, .email .email-reply .btn-default.active, .email .email-reply .btn-default:focus { color: #303030 !important; border-color: #303030 !important; } @media screen and (max-width: 991px) { .email-actions { margin-top: 20px; } } /* calendar */ .fc-event { color: #fff !important; cursor: move; } .fc-event:hover { color: #fff !important; cursor: move; } @media screen and (max-width: 1199px) { .fc-toolbar { display: block; text-align: center; } .fc-toolbar .fc-left, .fc-toolbar .fc-center { width: 100%; margin-bottom: 15px; } .fc-toolbar .fc-right { width: 100%; } } /* grid gallery */ @media screen and (max-width: 991px) { .grid-gallery figcaption h3 { font-size: 13px; font-weight: bold; } } /* dashboard */ .stats-widget .stats-icon { width: 53px; height: 53px; line-height: 53px; text-align: center; border-radius: 50px; } .stats-widget .primary { background: rgba(54, 163, 245, 0.4); } .stats-widget .danger { background: rgba(236, 94, 105, 0.4); } .stats-widget .warning { background: rgba(241, 194, 5, 0.4); } .stats-widget .success { background: rgba(99, 203, 137, 0.4); } .stats-widget .stats-number { color: #303030; font-size: 25px; font-weight: 600; letter-spacing: 1px; } .stats-widget .stats-info { margin: 0px; color: #303030; } .stats-widget .stats-icon { font-size: 20px; margin-left: 10px; vertical-align: top; } .stats-widget .success.stats-icon { color: #63CB89 !important; } .stats-widget .danger.stats-icon { color: #EC5E69 !important; } .stats-widget .warning.stats-icon { color: #F1C205 !important; } #chart1 { height: 314px; } #chart2 { height: 262px; } .dashboard-doughnut #chart4 { height: 308px !important; width: 308px !important; display: inline-block !important; } @media screen and (max-width: 575px) { .dashboard-doughnut #chart4 { height: 260px !important; width: 260px !important; } } .server-load > .server-stat { display: inline-block; margin-bottom: 5px; padding-left: 0; } .server-load .server-stat span { font-size: 13px; margin-top: 3px; font-weight: 400; color: #aaa; } .server-load .server-stat p { font-weight: 600; font-size: 16px; color: rgba(0, 0, 0, 0.6); margin-bottom: 0; } .task-list .task-item { border-bottom: 1px solid #e0e0e0; padding: 9px 5px 12px 5px; } .task-list .task-item:last-child { border-bottom: none; } .task-list .task-item .progress { margin-bottom: 0px; } .task-list .task-item .task-name { font-size: 13px; margin-bottom: 10px; color: #303030; display: block; } .task-list .task-item .task-name i { margin-left: 5px; color: #303030; } .invoice-table table { margin-bottom: 0px; vertical-align: middle; } .invoice-table table th, .invoice-table table td { vertical-align: middle; } .invoice-table tbody tr th { font-weight: 500; } .invoice-table img { max-width: 35px; } .browser-stats ul, .project-stats ul { margin: 0; } .browser-stats ul li, .project-stats ul li { border-bottom: 1px solid #eee; padding: 11px 0; } .browser-stats ul li:last-child, .project-stats ul li:last-child { border-bottom: 0; } .browser-stats ul li i, .project-stats ul li i { margin-right: 10px; width: 20px; text-align: center; } .browser-stats ul li div i, .project-stats ul li div i { margin-left: 5px; margin-right: 0px; } /*# sourceMappingURL=styles.css.map */ ul.accordion-menu li a.menu-aktif{ background-color: #00aa25; color: #aaa; }