/************************************************ ************************************************ Web Fonts ************************************************ ************************************************/ @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); /************************************************ ************************************************ Table of Contents ************************************************ ************************************************/ /*---------------------------- --------------------- ----------------- 1. Body 2. Global Styles - a link, ul, hr 3. Reusable Styles 3 A. Card Fixed Height 3 B. Spacers/Heights 3 C. Background Colors 3 D. Text Colors 3 E. Font Sizes 3 F. Custom Typography 3 G. Image Sizes 3 H. Borders 4. Layout - app, app-wrap, app-header, app-container, app-main, main-heading, main-content, main-footer, app-side, side-content, side-nav, onoffcanvas, sidebar-widget, 5. Custom Headers/Custom Banners 5 A. Custom Header 5 B. Profile Page Banner 5 B 1. Welcome Message 5 B 2. User plans 5 B 3. Share footer 5.C. Widgets Page Banner 5 D. Tasks Page Banner 5 E. Search Results Page Banner 6. Custom Search Box - used in Contacts/Search and Tasks Pages 7. Date Range CSS 8. Main CSS 8 A. Logo 8 B. Header Scrolling live Updates 8 C. Header Actions 8 D. Header Messages Dropdown 8 E. Tasks Widget 8 F. User Settings 8 G. Toggle Mini Nav 8 H. Toggle Sidebar 9. Widgets 9 A. Product Status Widget 9 B. Project activity Widget 9 C. Graph Notifi Info 9 D. Orders Widget 9 E. Info Widget 9 F. Toggle switch 9 G. Messages Widget 9 H. Icon Stats Widget 9 I. Newsticker Widget 9 J. Tasks Widget 9 K. Todo Widget 9 L. Traffic Sources Widget 9 M. Revenue Widget 9 N. Simple widget 9 O. Plain widget 9 P. Settings 9 Q. Deals Widget 9 R. Invoices Widget 9 S. Tags Widget 9 T. Post Widget 9 U. Projects Table 10. Pages 10 A. Invoice Page 10 B. Icons Page 10 C. Gallery Page 10 D. News Feed Page 10 E. Social Stats Page 10 F. Small Gallery Page 10 G. Search Results Page 10 H. Custom Forms Page 10 I. Pricing Plans 10 J. Tasks 10 K. Timeline 11. Chart Heights 12. Plugins Overwrite CSS 12 A. Gmap Skins 12 B. jVector Map 12 C. Flot Chart 12 D. Notify 12 E. Rating 12 F. Google Maps 13. Login, Signup, Lock and Error Screens 13 A. Login Screen 13 B. OR | Line between two blocks 13 C. Lock Screen 13 D. Error screen 14. Loading 15. Sections 16. Inline Bagdes 17. Secure Account 18. Bootstrap Overwrite CSS 18 A. Modals 18 B. Carousel 18 C. Buttons 18 D. Outline Buttons 18 E. Dropdown Menus 18 F. Media 18 G. Cards 18 H. Card Header Tabs 18 I. Accordion Card 18 J. Tooltips 18 K. Badges 18 L. Alerts 18 M. Progress bars 18 N. Popovers 18 O. Tabs & Navs 18 P. Pills 18 Q. Page Item 18 R. Breadcrumbs 18 S. jumbotron 18 T. List Group 18 U. Pagination 18 V. Blockquote 18 W. Custom File Labels 18 X. Form Controls 18 Y. Checkbox & Radios 18 Z. Navbar 19 Tables 20 Gutters 21 Code Syntax Highlight -------------------- ------------------------- ----------------------*/ /************************************************ ************************************************ 1. Body ************************************************ ************************************************/ html { height: 100%; } body { min-height: 100%; position: relative; } body { margin: 0; padding: 0; font: normal .9rem 'Open Sans', sans-serif; color: #2e323c; background: #e6ecf3; } body.boxed { margin: 0 auto; max-width: 1200px; background: #000000; } body.boxed .app-header { max-width: 1200px; margin: 0 auto; width: 100%; left: inherit; right: inherit; } body.boxed .main-footer { max-width: 1200px; margin: 0 auto; width: 100%; left: inherit; right: inherit; } body.full-screen a.onoffcanvas-toggler { display: inline-block; } body.full-screen .app-side { left: 0; } body.full-screen .app-side.is-open { left: -230px; } @media (max-width: 992px) { body.full-screen .app-side { left: -230px; } body.full-screen .app-side.is-open { left: 0; } } body.full-screen .app-main { margin-left: 0; } @media (max-width: 1100px) { body.off-canvas a.onoffcanvas-toggler { display: inline-block; } body.off-canvas a.mini-nav-btn { display: none; } } body.error-bg { background: url("../img/carousel-img-2.jpg") no-repeat; background-size: cover; background-position: center center; } /************************************************ ************************************************ 2. Global Styles ************************************************ ************************************************/ a { color: #000000; text-decoration: none; } a:hover { color: #0d7edc; text-decoration: none; } a:focus { outline: none; text-decoration: none; color: #FF7E39; } ul { margin: 0; padding: 0; } ul li { list-style-type: none; } ul.custom { margin: 0 0 0 20px; padding: 0; } ul.custom li { list-style-type: none; line-height: 180%; } hr { margin-top: 10px; margin-bottom: 10px; border-top: 1px solid #e1e5f1; } /************************************************ ************************************************ 3. Reusable Styles ************************************************ ************************************************/ /*************** 3 A. Card Fixed Heights ***************/ .card333 { height: 324px; } .card160 { height: 159px; } /*************** 3 B. Spacers ***************/ .spacer10 { height: 10px; } .spacer20 { height: 20px; } .spacer30 { height: 30px; } .spacer50 { height: 50px; } .spacer60 { height: 60px; } .spacer70 { height: 70px; } /************* 3 C. Background Colors **************/ .bg-primary { background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#59aff5), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #59aff5, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #59aff5, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #59aff5, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #59aff5, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #59aff5, #118cf1); } .bg-secondary { background-color: #6053da; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#9a92e8), to(#6053da)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #9a92e8, #6053da); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #9a92e8, #6053da); /* FF3.6 */ background-image: -ms-linear-gradient(right, #9a92e8, #6053da); /* IE10 */ background-image: -o-linear-gradient(right, #9a92e8, #6053da); /* Opera 11.10+ */ background-image: linear-gradient(right, #9a92e8, #6053da); } .bg-success { background-color: #50b924; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b936), to(#50b924)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #a5b936, #50b924); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #a5b936, #50b924); /* FF3.6 */ background-image: -ms-linear-gradient(right, #a5b936, #50b924); /* IE10 */ background-image: -o-linear-gradient(right, #a5b936, #50b924); /* Opera 11.10+ */ background-image: linear-gradient(right, #a5b936, #50b924); } .bg-info { background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#62BCF6), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #62BCF6, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #62BCF6, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #62BCF6, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #62BCF6, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #62BCF6, #118cf1); } .bg-warning { background-color: #ffda3e; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9f3d), to(#ffda3e)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff9f3d, #ffda3e); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff9f3d, #ffda3e); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff9f3d, #ffda3e); /* IE10 */ background-image: -o-linear-gradient(right, #ff9f3d, #ffda3e); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff9f3d, #ffda3e); } .bg-danger { background-color: #ff0000; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff7f34), to(#ff0000)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff7f34, #ff0000); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff7f34, #ff0000); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff7f34, #ff0000); /* IE10 */ background-image: -o-linear-gradient(right, #ff7f34, #ff0000); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff7f34, #ff0000); } .bg-pink { background-color: #f15f79; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#b24592), to(#f15f79)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #b24592, #f15f79); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #b24592, #f15f79); /* FF3.6 */ background-image: -ms-linear-gradient(right, #b24592, #f15f79); /* IE10 */ background-image: -o-linear-gradient(right, #b24592, #f15f79); /* Opera 11.10+ */ background-image: linear-gradient(right, #b24592, #f15f79); } .bg-purple { background-color: #5a66b5; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#e96450), to(#5a66b5)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #e96450, #5a66b5); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #e96450, #5a66b5); /* FF3.6 */ background-image: -ms-linear-gradient(right, #e96450, #5a66b5); /* IE10 */ background-image: -o-linear-gradient(right, #e96450, #5a66b5); /* Opera 11.10+ */ background-image: linear-gradient(right, #e96450, #5a66b5); } .bg-violet { background-color: #712c69; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#225e9e), to(#712c69)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #225e9e, #712c69); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #225e9e, #712c69); /* FF3.6 */ background-image: -ms-linear-gradient(right, #225e9e, #712c69); /* IE10 */ background-image: -o-linear-gradient(right, #225e9e, #712c69); /* Opera 11.10+ */ background-image: linear-gradient(right, #225e9e, #712c69); } .bg-orange { background-color: #FF7E39; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFB280), to(#FF7E39)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #FFB280, #FF7E39); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #FFB280, #FF7E39); /* FF3.6 */ background-image: -ms-linear-gradient(right, #FFB280, #FF7E39); /* IE10 */ background-image: -o-linear-gradient(right, #FFB280, #FF7E39); /* Opera 11.10+ */ background-image: linear-gradient(right, #FFB280, #FF7E39); } .bg-brown { background-color: #79574b; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#e7e0e1), to(#79574b)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #e7e0e1, #79574b); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #e7e0e1, #79574b); /* FF3.6 */ background-image: -ms-linear-gradient(right, #e7e0e1, #79574b); /* IE10 */ background-image: -o-linear-gradient(right, #e7e0e1, #79574b); /* Opera 11.10+ */ background-image: linear-gradient(right, #e7e0e1, #79574b); } .bg-light { background-color: #f7f9fb; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#e6ecf3), to(#f7f9fb)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #e6ecf3, #f7f9fb); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #e6ecf3, #f7f9fb); /* FF3.6 */ background-image: -ms-linear-gradient(right, #e6ecf3, #f7f9fb); /* IE10 */ background-image: -o-linear-gradient(right, #e6ecf3, #f7f9fb); /* Opera 11.10+ */ background-image: linear-gradient(right, #e6ecf3, #f7f9fb); } .bg-dark { background-color: #0b0f14; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#17202b), to(#0b0f14)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #17202b, #0b0f14); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #17202b, #0b0f14); /* FF3.6 */ background-image: -ms-linear-gradient(right, #17202b, #0b0f14); /* IE10 */ background-image: -o-linear-gradient(right, #17202b, #0b0f14); /* Opera 11.10+ */ background-image: linear-gradient(right, #17202b, #0b0f14); } .bg-fb { background-color: #3B5998; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#4c70ba), to(#3B5998)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #4c70ba, #3B5998); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #4c70ba, #3B5998); /* FF3.6 */ background-image: -ms-linear-gradient(right, #4c70ba, #3B5998); /* IE10 */ background-image: -o-linear-gradient(right, #4c70ba, #3B5998); /* Opera 11.10+ */ background-image: linear-gradient(right, #4c70ba, #3B5998); } .bg-tw { background-color: #55ACEE; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#83c3f3), to(#55ACEE)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #83c3f3, #55ACEE); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #83c3f3, #55ACEE); /* FF3.6 */ background-image: -ms-linear-gradient(right, #83c3f3, #55ACEE); /* IE10 */ background-image: -o-linear-gradient(right, #83c3f3, #55ACEE); /* Opera 11.10+ */ background-image: linear-gradient(right, #83c3f3, #55ACEE); } .bg-gp { background-color: #E02F2F; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#e75b5b), to(#E02F2F)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #e75b5b, #E02F2F); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #e75b5b, #E02F2F); /* FF3.6 */ background-image: -ms-linear-gradient(right, #e75b5b, #E02F2F); /* IE10 */ background-image: -o-linear-gradient(right, #e75b5b, #E02F2F); /* Opera 11.10+ */ background-image: linear-gradient(right, #e75b5b, #E02F2F); } .bg-lk { background-color: #007BB5; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#009ee8), to(#007BB5)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #009ee8, #007BB5); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #009ee8, #007BB5); /* FF3.6 */ background-image: -ms-linear-gradient(right, #009ee8, #007BB5); /* IE10 */ background-image: -o-linear-gradient(right, #009ee8, #007BB5); /* Opera 11.10+ */ background-image: linear-gradient(right, #009ee8, #007BB5); } /************* 3 D. Text Colors **************/ .text-primary { color: #118cf1 !important; } .text-secondary { color: #6053da !important; } .text-success { color: #50b924 !important; } .text-info { color: #118cf1 !important; } .text-warning { color: #ffda3e !important; } .text-danger { color: #ff0000 !important; } .text-violet { color: #712c69 !important; } .text-purple { color: #5a66b5 !important; } .text-pink { color: #f15f79 !important; } .text-orange { color: #FF7E39 !important; } .text-light { color: #62BCF6 !important; } .text-dark { color: #000000 !important; } .text-muted { color: #8796af !important; } /************* 3 E. Font Sizes **************/ .font-light { font-weight: 300; } .font-regular { font-weight: 400; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /************* 3 F. Custom Typography **************/ p.custom { line-height: 180%; font-size: .85rem; } h1.custom { margin: 0 0 30px 0; line-height: 100%; } h2.custom { margin: 0 0 25px 0; line-height: 100%; } h3.custom { margin: 0 0 20px 0; line-height: 100%; } h4.custom { margin: 0 0 20px 0; line-height: 100%; } h5.custom { margin: 0 0 20px 0; line-height: 100%; } /************* 3 G. Image Sizes **************/ .img-30 { width: 30px; height: 30px; } .img-48 { width: 48px; height: 48px; } .img-60 { width: 60px; height: 60px; } .img-72 { width: 72px; height: 72px; } .img-90 { width: 90px; height: 90px; } /************* 3 H. Borders **************/ .bdr-right { border-right: 1px solid #e6ecf3; } .bdr-left { border-left: 1px solid #e6ecf3; } .bdr-top { border-top: 1px solid #e6ecf3; } .bdr-bottom { border-bottom: 1px solid #e6ecf3; } /************* Overflows Scrolls **************/ .overflow-scroll { overflow: auto; } /************* Char Count **************/ .charCount { font-size: .7rem; } /************************************************ ************************************************ 4. Layout CSS ************************************************ ************************************************/ .app { min-height: 100%; } .app-wrap { min-height: 100vh; position: relative; } .app-header { padding: 0; background: #343a4e; position: fixed; z-index: 1020; top: 0; left: 0; right: 0; } .app-header.btm-shadow { box-shadow: 0 10px 20px -10px rgba(0, 0, 0, 0.25); } @media (max-width: 1100px) { .app-header { left: 0; } } @media (max-width: 576px) { .app-header { position: inherit; } } .app-container { position: relative; background: #e6ecf3; top: 75px; } @media (max-width: 576px) { .app-container { top: inherit; } } .app-main { position: relative; -webkit-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; margin-left: 230px; } .app-main.left-toggle { margin-left: 0; } .main-heading { padding: 0 .5rem; background: #ffffff; position: relative; -webkit-box-shadow: 0 0 10px 0 #bdcddf; -moz-box-shadow: 0 0 10px 0 #bdcddf; box-shadow: 0 0 10px 0 #bdcddf; z-index: 10; } .main-heading .page-icon { float: left; border-right: 1px solid #e6ecf3; padding: 25px 20px 25px 0; } .main-heading .page-icon i { font-size: 1.5rem; color: #118cf1; margin: 0; display: block; } .main-heading .page-title { margin: 19px 0 15px 65px; } .main-heading .page-title h3 { margin: 0; padding: 0; font-weight: 300; font-size: 1.5rem; line-height: 125%; } .main-heading .page-title h6.sub-heading { margin: 0; padding: 0; font-size: .75rem; color: #8796af; } .main-heading .page-title .breadcrumb { padding: 0; margin: 0; font-size: .8rem; color: #8796af; background: transparent; } .main-heading .page-title .breadcrumb .breadcrumb-item a { color: #8796af; } .main-heading .page-title .breadcrumb .breadcrumb-item.active { color: #f75851; } @media (max-width: 768px) { .main-heading .page-icon { display: none; } .main-heading .page-title { margin: 12px 0 0 0; } } .main-content { position: relative; margin-bottom: auto; padding: 1.5rem; background: #e6ecf3; } .main-content.white { background: #ffffff; border-bottom: 1px solid #e1e5f1; } .main-footer { background: #ffffff; padding: .7rem 1.3rem; font-size: .90rem; color: #8796af; } .app-side { margin: 0; width: 230px; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; z-index: 1000; background: #1281ab; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .app-side.fixed { position: fixed; padding: 60px 0 0 0; } .app-side.left-toggle { left: -230px; } @media (max-width: 1100px) { .app-side { left: 0; box-shadow: none; } .app-side.is-open { left: -230px; } } @media (max-width: 992px) { .app-side { left: -230px; } .app-side.is-open { left: 0; } } .side-content { margin-bottom: auto; } .side-content ul.user-actions { display: block; margin: 0px auto 10px auto; padding: 10px 10px 0px 10px; text-align: center; border-bottom: 1px solid #edf1f6; font-size: 1.5em; font-weight: 900; } .side-content ul.user-actions .quick-links { margin: 0 0 20px 0; color: #000000; display: block; } .side-content ul.user-actions > li { display: inline-block; } .side-content ul.user-actions > li:nth-child(3n+3) { border-right: 0; } .side-content ul.user-actions > li:nth-child(4) { border-bottom: 0; } .side-content ul.user-actions > li:nth-child(5) { border-bottom: 0; } .side-content ul.user-actions > li:nth-child(6) { border-bottom: 0; } .side-content ul.user-actions > li a { font-size: .65rem; text-align: center; display: block; width: 36px; height: 36px; line-height: 32px; margin: 5px; float: left; background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#62BCF6), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #62BCF6, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #62BCF6, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #62BCF6, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #62BCF6, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #62BCF6, #118cf1); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .side-content ul.user-actions > li a.orange { background-color: #FF7E39; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFB280), to(#FF7E39)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #FFB280, #FF7E39); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #FFB280, #FF7E39); /* FF3.6 */ background-image: -ms-linear-gradient(right, #FFB280, #FF7E39); /* IE10 */ background-image: -o-linear-gradient(right, #FFB280, #FF7E39); /* Opera 11.10+ */ background-image: linear-gradient(right, #FFB280, #FF7E39); } .side-content ul.user-actions > li a.red { background-color: #FF7E39; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#f75851), to(#FF7E39)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #f75851, #FF7E39); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #f75851, #FF7E39); /* FF3.6 */ background-image: -ms-linear-gradient(right, #f75851, #FF7E39); /* IE10 */ background-image: -o-linear-gradient(right, #f75851, #FF7E39); /* Opera 11.10+ */ background-image: linear-gradient(right, #f75851, #FF7E39); } .side-content ul.user-actions > li a i { font-size: 1.2rem; color: #ffffff; margin: auto; vertical-align: middle; } .side-content ul.user-actions > li a .count-label { position: absolute; top: 5px; right: 7px; width: 10px; height: 10px; border: 2px solid #118cf1; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; animation: glow 1s ease-out; -moz-animation: glow 1s ease-out; -moz-animation-iteration-count: infinite; -o-animation: glow 1s ease-out; -o-animation-iteration-count: infinite; -webkit-animation: glow 1s ease-out; -ms-animation: glow 1s ease-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .side-content ul.user-actions > li a .count-label.red { border: 2px solid #ff0000; } .side-content ul.user-actions > li a .count-label.green { border: 2px solid #50b924; } .side-content ul.user-actions > li a .count-label.yellow { border: 2px solid #ffda3e; } .side-content ul.user-actions > li a:hover { color: #118cf1; } .side-content ul.user-actions > li:last-child { border-right: 0; } .side-content ul.user-actions > li:first-child { border-left: 0; margin-top:30px; } .side-content .login-user { padding: 30px 10px 20px 10px; text-align: center; position: relative; border-bottom: 1px solid #e6ecf3; margin-bottom: 5px; background: #f7f9fb; -webkit-box-shadow: 0 18px 16px -16px #dce4ee; -moz-box-shadow: 0 18px 16px -16px #dce4ee; box-shadow: 0 18px 16px -16px #dce4ee; } .side-content .login-user .profile-thumb { position: relative; width: 64px; height: 64px; margin: 0 auto 10px auto; } .side-content .login-user .profile-thumb img { width: 64px; height: 64px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; box-shadow: 0 0 15px #e6e6e6; } .side-content .login-user .profile-thumb .status { position: absolute; top: 0; right: 5px; width: 13px; height: 13px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .side-content .login-user .profile-thumb .status.busy { background: #FF7E39; } .side-content .login-user .profile-thumb .status.online { background: #50b924; } .side-content .login-user .profile-thumb .status.away { background: #ff0000; } .side-content .login-user h6.profile-name { font-size: .8rem; margin: 0; } .side-nav { margin-bottom: 1rem; } .side-nav .unifyMenu { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 0; } .side-nav .unifyMenu > li { position: relative; } .side-nav .unifyMenu > li.selected:after { position: absolute; content: ""; right: -1px; top: 0px; background: url("../img/menu-arrow.svg"); background-size: 100%; width: 9px; height: 40px; z-index: 2020; } .side-nav .unifyMenu > li.selected:before { position: absolute; content: ""; left: 0; top: 0; max-height: 40px; min-height: 40px; border-left: 3px solid #FF7E39; z-index: 2020; } .side-nav .unifyMenu > li.selected > a { color: #17202b; background-color: #edf1f6; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#edf1f6)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ffffff, #edf1f6); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ffffff, #edf1f6); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ffffff, #edf1f6); /* IE10 */ background-image: -o-linear-gradient(right, #ffffff, #edf1f6); /* Opera 11.10+ */ background-image: linear-gradient(right, #ffffff, #edf1f6); font-weight: 600; } .side-nav .unifyMenu > li.selected > a .has-icon i:before { background: -moz-linear-gradient(top, #999999 0%, #333333 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #999999), color-stop(100%, #333333)); background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .side-nav .unifyMenu > li.selected .current-page { color: #17202b; pointer-events: none; background: #f0f4f8; } .side-nav .unifyMenu > li.active a span.lbl { display: none; } .side-nav .unifyMenu > li.active a span.badge { display: none; } .side-nav .unifyMenu a { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; outline-width: 0; -webkit-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; background: #1281ab; color: #fff; font-size: .99rem; padding: 0; font-weight: 500; } .side-nav .unifyMenu a:active, .side-nav .unifyMenu a:focus, .side-nav .unifyMenu a:hover { color: #17202b; background: #f0f4f8; } .side-nav .unifyMenu a span.lbl { position: absolute; right: 30px; top: 17px; background: #62BCF6; height: 7px; width: 7px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .side-nav .unifyMenu a span.lbl.red { background: #FF7E39; } .side-nav .unifyMenu a span.lbl.green { background: #50b924; } .side-nav .unifyMenu a span.lbl.yellow { background: #ffda3e; } .side-nav .unifyMenu a span.badge { position: absolute; right: 15px; top: 14px; background: #62BCF6; height: 14px; min-width: 24px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; font-size: 10px; color: #ffffff; padding: 2px 5px; } .side-nav .unifyMenu a span.badge.orange { background: #FF7E39; } .side-nav .unifyMenu a span.badge.green { background: #50b924; } .side-nav .unifyMenu a span.badge.yellow { background: #ffda3e; } .side-nav .unifyMenu ul { background: #17202b; } .side-nav .unifyMenu ul > li.active > a { color: #000000; } .side-nav .unifyMenu ul a { padding: .5em .5em .5em 3.6em; font-size: .85rem; } .side-nav .unifyMenu ul ul a { padding-left: 5rem; color: #687b9b; } .side-nav .collapse { display: none; } .side-nav .collapse.in { display: block; } .side-nav .collapsing { position: relative; height: 0; overflow: hidden; -webkit-transition-timing-function: ease; -o-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: .35s; -o-transition-duration: .35s; transition-duration: .35s; -webkit-transition-property: height, visibility; -o-transition-property: height, visibility; transition-property: height, visibility; } .side-nav .arrow { float: right; line-height: 1.42857; } .side-nav .has-arrow { position: relative; } .side-nav .has-arrow::after { position: absolute; content: ''; width: .5em; height: .5em; border-width: 1px 0 0 1px; border-style: solid; border-color: initial; right: 1.3em; -webkit-transform: rotate(135deg) translate(0, -50%); -ms-transform: rotate(135deg) translate(0, -50%); -o-transform: rotate(135deg) translate(0, -50%); transform: rotate(135deg) translate(0, -50%); -webkit-transform-origin: top; -ms-transform-origin: top; -o-transform-origin: top; transform-origin: top; top: 50%; -webkit-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .side-nav .active > .has-arrow::after, .side-nav .has-arrow[aria-expanded="true"]::after { -webkit-transform: rotate(225deg) translate(0, -50%); -ms-transform: rotate(225deg) translate(0, -50%); -o-transform: rotate(225deg) translate(0, -50%); transform: rotate(225deg) translate(0, -50%); margin-top: 0; } @media (min-width: 992px) { .app-side.is-mini { width: 80px; left: 0; } .app-side.is-mini ~ .app-main { margin-left: 80px; } .app-side.is-mini .unifyMenu > li.selected:after { background: transparent; } .app-side.is-mini .unifyMenu > li > ul { position: absolute; top: 100%; left: 100%; display: none; } .app-side.is-mini .unifyMenu > li > ul > li > a { padding: 0.5em 0.5em 0.5em 1.5em; } .app-side.is-mini .unifyMenu > li:hover > ul { display: block; min-width: 192px; height: auto !important; box-shadow: 2px 2px 0 2px #d5dfeb; } .app-side.is-mini .unifyMenu > li:hover > a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; min-width: 257px; color: #ffffff; background: #118cf1; } .app-side.is-mini .unifyMenu > li:hover > a:active, .app-side.is-mini .unifyMenu > li:hover > a:focus, .app-side.is-mini .unifyMenu > li:hover > a:hover { color: #ffffff; background: #118cf1; } .app-side.is-mini .unifyMenu > li:hover .nav-title { display: inline-block; -webkit-align-self: center; -ms-flex-item-align: center; -ms-grid-row-align: center; align-self: center; } .app-side.is-mini .unifyMenu > li:hover > .has-arrow::after { border-width: 1px 0 0 1px; } .app-side.is-mini .unifyMenu > li > a.has-arrow::after { border-width: 0; } .app-side.is-mini .unifyMenu li:last-child { padding-bottom: 0; } .app-side.is-mini .unifyMenu ul ul a { padding-left: 2.5rem; } .app-side.is-mini .unifyMenu a span.lbl { display: none; } .app-side.is-mini .unifyMenu a span.badge { display: none; } .app-side.is-mini .nav-title { display: none; } .app-side.is-mini a.logo { padding: 20px 10px 20px 10px; } .app-side.is-mini a.logo img { max-width: 50px; } .app-side.is-mini .has-icon { width: 80px; -webkit-box-flex: 0; -webkit-flex: 0 0 80px; -ms-flex: 0 0 80px; flex: 0 0 80px; } } @media (max-width: 1100px) { .app-main { margin-left: 0; } .side-nav .unifyMenu > li.selected:after { background: transparent; } } .has-icon { margin-left: 10px; width: 40px; -webkit-box-flex: 0; -webkit-flex: 0 0 40px; -ms-flex: 0 0 40px; flex: 0 0 40px; height: 2.5rem; font-size: 1.4em; display: -webkit-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .has-icon i:before { background: -moz-linear-gradient(top, #f3f3f3 0%, #7387a9 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f3f3f3), color-stop(100%, #7387a9)); background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .onoffcanvas { visibility: hidden; } .onoffcanvas.is-open { visibility: visible; } .sidebar-widget { background: #ffffff; } .sidebar-widget ul.contributions { padding: 15px; } .sidebar-widget ul.contributions li { margin-bottom: 1.5rem; } .sidebar-widget ul.contributions li p { margin: 0 0 5px 0; font-size: .8rem; color: #8796af; } .sidebar-widget ul.contributions li p span { float: right; font-size: .9rem; font-weight: 600; } .sidebar-widget ul.contributions li:last-child { margin-bottom: 0; } @media (min-width: 992px) { .app-side.is-mini .sidebar-widget ul.contributions li p span { float: none; display: block; } } /************************************************ ************************************************ 5. Custom Headers/Custom Banners ************************************************ ************************************************/ /*************** 5 A. Custom Header ***************/ .custom-header { padding: 1rem 1rem; background-color: #343a4e; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#42a4f1), to(#343a4e)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #42a4f1, #343a4e); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #42a4f1, #343a4e); /* FF3.6 */ background-image: -ms-linear-gradient(right, #42a4f1, #343a4e); /* IE10 */ background-image: -o-linear-gradient(right, #42a4f1, #343a4e); /* Opera 11.10+ */ background-image: linear-gradient(right, #42a4f1, #343a4e); position: relative; z-index: 10; } .custom-header:before { content: ""; background-image: url("../img/header-bg2.jpg"); background-size: 100%; background-position: center 5%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.35; } .custom-header .page-title { color: #ffffff; } .custom-header .page-title h3 { font-size: 2rem; font-weight: 300; margin: 0; } .custom-header .page-title h6.sub-heading { line-height: 180%; margin: 0; font-weight: 300; font-size: .80rem; } .custom-header .daterange-container { margin: 13px 0 0 0; } .custom-header .daterange-container .form-control { border: 1px solid #ffffff; } /*************** 5 B. Profile Page Banner ***************/ .profile-header { padding: 2rem 1rem; background: #e6ecf3; position: relative; z-index: 10; } .profile-header:before { content: ""; background-image: url("../img/header-bg3.jpg"); background-size: 100%; background-position: center 5%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.5; } @media (max-width: 767px) { .profile-header .welcome-msg .btn { display: none; } .profile-header .welcome-msg .welcome-title { margin-bottom: 0; } .profile-header .welcome-msg .welcome-designation { margin-bottom: 0; } } .welcome-msg { padding-left: 0; } .welcome-msg .welcome-user-thumb { margin-bottom: 10px; } .welcome-msg .welcome-user-thumb img { width: 60px; height: 60px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .welcome-msg .welcome-title { font-size: 2rem; font-weight: 300; color: #000000; margin-bottom: .7rem; } .welcome-msg .welcome-title span { font-weight: 500; } .welcome-msg .welcome-designation { color: #000000; line-height: 100%; margin-bottom: 1rem; margin-right: 10%; } @media (max-width: 767px) { .welcome-msg .btn { display: none; } .welcome-msg .welcome-title { margin-bottom: 0; font-size: 1.5rem; } .welcome-msg .welcome-designation { margin-bottom: 0; } .welcome-msg .welcome-user-thumb img { width: 32px; height: 32px; } } .user-plans { margin: 2.5rem 0 0 0; } .user-plans .circliful text { fill: #333333; } .user-plans.sm { margin: 1rem 0 0 0; } @media (max-width: 767px) { .user-plans { margin: 1rem 0 0 0; } .user-plans.sm { margin: 1rem 0 0 0; } } .share-footer a:not(.btn) { margin-top: 4px; margin-right: 10px; font-size: 1rem; display: inline-block; } /*************** 5 C. Widgets Page Banner ***************/ .widgets-header { padding: 2rem 1rem; background: #ffffff; position: relative; z-index: 10; } .widgets-header:before { content: ""; background-image: url("../img/header-bg3.jpg"); background-size: 100%; background-position: center center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.4; } /*************** 5 D. Tasks Page Banner ***************/ .tasks-banner { padding: 1rem 1rem; background: #e6ecf3; position: relative; z-index: 10; text-align: center; } .tasks-banner:before { content: ""; background-image: url("../img/header-bg6.jpg"); background-size: 100%; background-position: center center; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .tasks-banner .page-title h3 { font-size: 2rem; font-weight: 300; margin: 0; line-height: 170%; color: #000000; } .tasks-banner .page-title h6#today-date { margin: 0 0 2rem 0; font-weight: 300; color: #f75851; } .tasks-banner .add-btn { position: absolute; background-color: #f52920; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#f75851), to(#f52920)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #f75851, #f52920); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #f75851, #f52920); /* FF3.6 */ background-image: -ms-linear-gradient(right, #f75851, #f52920); /* IE10 */ background-image: -o-linear-gradient(right, #f75851, #f52920); /* Opera 11.10+ */ background-image: linear-gradient(right, #f75851, #f52920); bottom: 0; right: 10px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; cursor: pointer; width: 40px; height: 38px; padding: 10px; text-align: center; color: #ffffff; border: 0; font-size: 1rem; } .tasks-banner .add-btn:hover { border: 0; } .tasks-banner .add-btn:focus { border: 0; outline: none; box-shadow: none; } /*************** 5 E. Search Results Page Banner ***************/ .search-results-banner { padding: 2rem 1rem; background-color: #1b2532; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#4ab2f5), to(#1b2532)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #4ab2f5, #1b2532); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #4ab2f5, #1b2532); /* FF3.6 */ background-image: -ms-linear-gradient(right, #4ab2f5, #1b2532); /* IE10 */ background-image: -o-linear-gradient(right, #4ab2f5, #1b2532); /* Opera 11.10+ */ background-image: linear-gradient(right, #4ab2f5, #1b2532); position: relative; z-index: 10; text-align: center; } .search-results-banner:before { content: ""; background-image: url("../img/header-bg4.jpg"); background-size: 100%; background-position: center 25%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.2; } .search-results-banner .page-title { color: #ffffff; } .search-results-banner .page-title h3 { font-size: 2rem; font-weight: 300; margin: 0; line-height: 250%; } .search-results-banner .page-title p { margin: 0 0 1rem 0; } /************************************************ ************************************************ 6. Custom Search Box ************************************************ ************************************************/ .tasks-search { position: relative; margin-right: 50px; } .tasks-search .form-control { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: .7rem 1rem; } .tasks-search .btn { -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; } /************************************************ ************************************************ 7. Date Range CSS ************************************************ ************************************************/ .daterange-container { float: right; margin: 18px 0; } .daterange-container .form-control { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; padding: .4rem .7rem .4rem 1rem; color: #8796af; font-size: .8rem; border: 1px solid #e6ecf3; } .daterange-container .form-control > span { float: left; margin-top: 2px; } .daterange-container .form-control i.down-arrow { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; background-color: #FF7E39; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFB280), to(#FF7E39)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #FFB280, #FF7E39); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #FFB280, #FF7E39); /* FF3.6 */ background-image: -ms-linear-gradient(right, #FFB280, #FF7E39); /* IE10 */ background-image: -o-linear-gradient(right, #FFB280, #FF7E39); /* Opera 11.10+ */ background-image: linear-gradient(right, #FFB280, #FF7E39); font-size: 1rem; color: #ffffff; width: 24px; height: 24px; text-align: center; line-height: 24px; margin-left: 20px; display: inline-block; } /************************************************ ************************************************ 8. Main CSS ************************************************ ************************************************/ /*************** 8 A. Logo ***************/ .logo-block { min-width: 215px; max-width: 215px; margin: 0; float: left; } a.logo { padding: 14px 0px 14px 5px; float: left; min-width: 165px; } a.logo img { max-width: 120px; max-height: 48px; } @media (max-width: 767px) { .logo-block { min-width: 190px; max-width: 190px; } a.logo { min-width: 140px; } a.logo img { max-width: 100px; max-height: 30px; } } /*************** 8 B. Header Scrolling live Updates ***************/ .live-updates { display: inline-block; margin-left: 25px; position: relative; top: 14px; color: #e5e7ec; } .live-updates ul.header-news li { line-height: 30px; } .live-updates ul.header-news li a { color: #8796af; font-size: .85rem; } .live-updates ul.header-news li a i { background-color: #62BCF6; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#118cf1), to(#62BCF6)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #118cf1, #62BCF6); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #118cf1, #62BCF6); /* FF3.6 */ background-image: -ms-linear-gradient(right, #118cf1, #62BCF6); /* IE10 */ background-image: -o-linear-gradient(right, #118cf1, #62BCF6); /* Opera 11.10+ */ background-image: linear-gradient(right, #118cf1, #62BCF6); padding: 5px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; width: 30px; height: 30px; font-size: 1rem; text-align: center; margin-right: 10px; line-height: 20px; float: left; color: #ffffff; } @media (max-width: 1100px) { .live-updates { display: none; } } /*************** 8 C. Header Actions ***************/ .header-actions { float: right; margin-right: 5px; margin-top: 14px; } .header-actions > li { float: left; border-left: 1px solid #48516d; } .header-actions > li > a { padding: 18px 20px; display: block; position: relative; } .header-actions > li > a > i { font-size: 1.5rem; vertical-align: middle; color: #8796af; } .header-actions > li > a .count-label { position: absolute; top: 12px; right: 10px; width: 17px; height: 17px; background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#1ad0fc), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #1ad0fc, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #1ad0fc, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #1ad0fc, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #1ad0fc, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #1ad0fc, #118cf1); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; text-align: center; font-size: .60rem; color: #ffffff; line-height: 18px; } .header-actions > li > a .count-label.red { background-color: #FF7E39; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff7f34), to(#FF7E39)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff7f34, #FF7E39); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff7f34, #FF7E39); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff7f34, #FF7E39); /* IE10 */ background-image: -o-linear-gradient(right, #ff7f34, #FF7E39); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff7f34, #FF7E39); } .header-actions > li > a .count-label.green { background-color: #50b924; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#118cf1), to(#50b924)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #118cf1, #50b924); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #118cf1, #50b924); /* FF3.6 */ background-image: -ms-linear-gradient(right, #118cf1, #50b924); /* IE10 */ background-image: -o-linear-gradient(right, #118cf1, #50b924); /* Opera 11.10+ */ background-image: linear-gradient(right, #118cf1, #50b924); } .header-actions > li > a .count-label.yellow { background-color: #ffda3e; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9f3d), to(#ffda3e)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff9f3d, #ffda3e); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff9f3d, #ffda3e); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff9f3d, #ffda3e); /* IE10 */ background-image: -o-linear-gradient(right, #ff9f3d, #ffda3e); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff9f3d, #ffda3e); } .header-actions > li > a.user-settings { padding: 10px 0 10px 18px; } .header-actions > li > a.user-settings .avatar { position: relative; width: 40px; height: 40px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#1ad0fc), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #1ad0fc, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #1ad0fc, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #1ad0fc, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #1ad0fc, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #1ad0fc, #118cf1); line-height: 40px; display: inline-block; text-align: center; color: #ffffff; } .header-actions > li > a.user-settings .avatar .status { position: absolute; top: -2px; right: -2px; width: 13px; height: 13px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border: 2px solid #343a4e; } .header-actions > li > a.user-settings .avatar .status.busy { background: #FFB280; } .header-actions > li > a.user-settings .avatar .status.online { background: #ffffff; } .header-actions > li > a.user-settings .avatar .status.away { background: #ff9f3d; } .header-actions > li > a.user-settings span.user-name { color: #e5e7ec; margin-left: 5px; vertical-align: middle; font-size: .99rem; display: inline-block; max-width: 124px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; } .header-actions > li > a.user-settings i.downarrow { -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background-color: #FF7E39; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFB280), to(#FF7E39)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #FFB280, #FF7E39); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #FFB280, #FF7E39); /* FF3.6 */ background-image: -ms-linear-gradient(right, #FFB280, #FF7E39); /* IE10 */ background-image: -o-linear-gradient(right, #FFB280, #FF7E39); /* Opera 11.10+ */ background-image: linear-gradient(right, #FFB280, #FF7E39); font-size: 1rem; color: #ffffff; margin-left: 5px; } .header-actions > li .dropdown-menu { margin-top: 0; } .header-actions > li:first-child { border-left: 0; } @media (max-width: 767px) { .header-actions > li { display: none; } .header-actions > li:last-child { display: block; border-left: 0; } } @media (max-width: 992px) { .header-actions > li > a.user-settings span.user-name { display: none; } } .logout-btn { margin: 10px 10px 0 10px; } .logout-btn .btn { display: block; width: 100%; } /*************** 8 D. Header Messages Dropdown ***************/ ul.imp-notify li { padding: 10px 15px; border-bottom: 1px solid #e6ecf3; } ul.imp-notify li:last-child { border-bottom: 0; } ul.imp-notify li .icon { float: left; width: 40px; height: 40px; line-height: 40px; text-align: center; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; color: #ffffff; background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#1ad0fc), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #1ad0fc, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #1ad0fc, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #1ad0fc, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #1ad0fc, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #1ad0fc, #118cf1); } ul.imp-notify li .icon.green { background-color: #50b924; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b936), to(#50b924)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #a5b936, #50b924); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #a5b936, #50b924); /* FF3.6 */ background-image: -ms-linear-gradient(right, #a5b936, #50b924); /* IE10 */ background-image: -o-linear-gradient(right, #a5b936, #50b924); /* Opera 11.10+ */ background-image: linear-gradient(right, #a5b936, #50b924); } ul.imp-notify li .icon.red { background-color: #FFB280; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FF7E39), to(#FFB280)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #FF7E39, #FFB280); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #FF7E39, #FFB280); /* FF3.6 */ background-image: -ms-linear-gradient(right, #FF7E39, #FFB280); /* IE10 */ background-image: -o-linear-gradient(right, #FF7E39, #FFB280); /* Opera 11.10+ */ background-image: linear-gradient(right, #FF7E39, #FFB280); } ul.imp-notify li .icon.yellow { background-color: #ffda3e; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#50b924), to(#ffda3e)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #50b924, #ffda3e); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #50b924, #ffda3e); /* FF3.6 */ background-image: -ms-linear-gradient(right, #50b924, #ffda3e); /* IE10 */ background-image: -o-linear-gradient(right, #50b924, #ffda3e); /* Opera 11.10+ */ background-image: linear-gradient(right, #50b924, #ffda3e); } ul.imp-notify li .details { display: block; margin-left: 55px; } ul.imp-notify li .details h6.username { font-weight: 600; font-size: .9rem; } ul.imp-notify li .details p.desc { font-size: .8rem; margin: 0; line-height: 130%; color: #8796af; } ul.imp-notify li .details p.time { font-size: .7rem; margin: 5px 0 0 0; color: #8796af; display: none; } /*************** 8 E. Tasks Widget ***************/ ul.tasks-widget { margin: 0; padding: 0; list-style-type: none; } ul.tasks-widget li { padding: 15px 15px; border-bottom: 1px solid #e1e5f1; } ul.tasks-widget li p { margin: 0 0 10px 0; padding: 0; line-height: 100%; } ul.tasks-widget li p span { float: right; font-size: .75rem; color: #8796af; } ul.tasks-widget li .progress { margin-bottom: 0px; height: 5px; } ul.tasks-widget li:last-child { border-bottom: 0 solid transparent; } /*************** 8 F. User Settings ***************/ .admin-settings ul.admin-settings-list { margin: 0; } .admin-settings ul.admin-settings-list > li { border-bottom: 1px solid #e6ecf3; display: block; color: #8796af; } .admin-settings ul.admin-settings-list > li a { font-size: .8rem; display: block; padding: 7px 15px; } .admin-settings ul.admin-settings-list > li a span.icon { margin-right: 10px; font-size: 1rem; vertical-align: middle; } .admin-settings ul.admin-settings-list > li a span.text-name { margin-right: 10px; vertical-align: middle; } .admin-settings ul.admin-settings-list > li a .badge { float: right; font-size: .65rem; margin-top: 1px; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .admin-settings ul.admin-settings-list > li:hover { background: #f7f9fb; } .admin-settings .actions { margin: 10px 15px 3px 15px; } .admin-settings .actions .btn { display: inline-block; font-size: 1rem; } /*************** 8 G. Toggle Mini Nav ***************/ a.mini-nav-btn { padding: 18px 10px 18px 10px; width: 50px; height: 50px; display: inline-block; position: relative; top: 10px; background-color:#e5e7ec; } a.mini-nav-btn i.open { position: absolute; display: block; height: 2px; background: #535c7c; width: 30px; left: 10px; -webkit-transition: all .3s; transition: all .3s; } a.mini-nav-btn i.open:nth-child(1) { top: 16px; } a.mini-nav-btn i.open:nth-child(2) { top: 24px; } a.mini-nav-btn i.open:nth-child(3) { top: 32px; } a.mini-nav-btn i.mini { position: absolute; display: block; height: 2px; background: #535c7c; width: 30px; left: 10px; -webkit-transition: all .3s; transition: all .3s; } a.mini-nav-btn i.mini:nth-child(1) { top: 25px; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } a.mini-nav-btn i.mini:nth-child(2) { background: transparent; } a.mini-nav-btn i.mini:nth-child(3) { top: 25px; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } @media (max-width: 1100px) { a.mini-nav-btn { display: none; } } /*************** 8 H. Toggle Sidebar ***************/ a.onoffcanvas-toggler { padding: 18px 10px 18px 10px; width: 50px; height: 50px; display: none; position: relative; top: 5px; } a.onoffcanvas-toggler i.open { position: absolute; display: block; height: 2px; background: #535c7c; width: 30px; left: 10px; -webkit-transition: all .3s; transition: all .3s; } a.onoffcanvas-toggler i.open:nth-child(1) { top: 16px; } a.onoffcanvas-toggler i.open:nth-child(2) { top: 24px; } a.onoffcanvas-toggler i.open:nth-child(3) { top: 32px; } a.onoffcanvas-toggler i.mini { position: absolute; display: block; height: 2px; background: #535c7c; width: 30px; left: 10px; -webkit-transition: all .3s; transition: all .3s; } a.onoffcanvas-toggler i.mini:nth-child(1) { top: 25px; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } a.onoffcanvas-toggler i.mini:nth-child(2) { background: transparent; } a.onoffcanvas-toggler i.mini:nth-child(3) { top: 25px; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } @media (max-width: 1100px) { a.onoffcanvas-toggler { display: inline-block; } } /************************************************ ************************************************ 9. Widgets ************************************************ ************************************************/ /*************** 9 A. Product Status Widget ***************/ ul.product-status li { margin-bottom: 15px; } ul.product-status li:last-child { margin-bottom: 0px; } ul.product-status li .customer { float: left; } ul.product-status li .customer img { width: 48px; height: 48px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } ul.product-status li .customer .empty-avatar { height: 48px; width: 48px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; text-align: center; line-height: 48px; background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#1ad0fc), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #1ad0fc, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #1ad0fc, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #1ad0fc, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #1ad0fc, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #1ad0fc, #118cf1); } ul.product-status li .customer .empty-avatar.green { background-color: #50b924; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b936), to(#50b924)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #a5b936, #50b924); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #a5b936, #50b924); /* FF3.6 */ background-image: -ms-linear-gradient(right, #a5b936, #50b924); /* IE10 */ background-image: -o-linear-gradient(right, #a5b936, #50b924); /* Opera 11.10+ */ background-image: linear-gradient(right, #a5b936, #50b924); } ul.product-status li .customer .empty-avatar.red { background-color: #FFB280; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#FFB280)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff0000, #FFB280); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff0000, #FFB280); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff0000, #FFB280); /* IE10 */ background-image: -o-linear-gradient(right, #ff0000, #FFB280); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff0000, #FFB280); } ul.product-status li .customer .empty-avatar.yellow { background-color: #ffda3e; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#50b924), to(#ffda3e)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #50b924, #ffda3e); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #50b924, #ffda3e); /* FF3.6 */ background-image: -ms-linear-gradient(right, #50b924, #ffda3e); /* IE10 */ background-image: -o-linear-gradient(right, #50b924, #ffda3e); /* Opera 11.10+ */ background-image: linear-gradient(right, #50b924, #ffda3e); } ul.product-status li .product-details { margin-left: 75px; } ul.product-status li .product-details .badge { font-size: .7rem; padding: 3px 10px 4px 10px; margin: 15px 0 10px 0; } ul.product-status li .product-details h6 { margin: 0; line-height: 180%; font-size: .9rem; } ul.product-status li .product-details p { line-height: 180%; } /*************** 9 B. Project activity Widget ***************/ ul.project-activity { margin-left: 20px; padding: 0 0 20px 0; border-left: 1px solid #e1e5f1; } ul.project-activity li.activity-list { position: relative; } ul.project-activity li.activity-list .lbl { background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#1ad0fc), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #1ad0fc, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #1ad0fc, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #1ad0fc, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #1ad0fc, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #1ad0fc, #118cf1); color: #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; content: ""; height: 10px; width: 10px; text-align: center; text-transform: uppercase; position: absolute; top: 10px; left: -6px; transform: rotate(-45deg); } ul.project-activity li.activity-list .lbl.red { background-color: #ff0000; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff7f34), to(#ff0000)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff7f34, #ff0000); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff7f34, #ff0000); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff7f34, #ff0000); /* IE10 */ background-image: -o-linear-gradient(right, #ff7f34, #ff0000); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff7f34, #ff0000); } ul.project-activity li.activity-list .lbl.green { background-color: #50b924; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b936), to(#50b924)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #a5b936, #50b924); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #a5b936, #50b924); /* FF3.6 */ background-image: -ms-linear-gradient(right, #a5b936, #50b924); /* IE10 */ background-image: -o-linear-gradient(right, #a5b936, #50b924); /* Opera 11.10+ */ background-image: linear-gradient(right, #a5b936, #50b924); } ul.project-activity li.activity-list .lbl.yellow { background-color: #ffda3e; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9f3d), to(#ffda3e)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff9f3d, #ffda3e); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff9f3d, #ffda3e); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff9f3d, #ffda3e); /* IE10 */ background-image: -o-linear-gradient(right, #ff9f3d, #ffda3e); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff9f3d, #ffda3e); } ul.project-activity li.activity-list .lbl.pink { background-color: #f15f79; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#b24592), to(#f15f79)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #b24592, #f15f79); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #b24592, #f15f79); /* FF3.6 */ background-image: -ms-linear-gradient(right, #b24592, #f15f79); /* IE10 */ background-image: -o-linear-gradient(right, #b24592, #f15f79); /* Opera 11.10+ */ background-image: linear-gradient(right, #b24592, #f15f79); } ul.project-activity li.activity-list .lbl.orange { background-color: #FF7E39; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFB280), to(#FF7E39)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #FFB280, #FF7E39); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #FFB280, #FF7E39); /* FF3.6 */ background-image: -ms-linear-gradient(right, #FFB280, #FF7E39); /* IE10 */ background-image: -o-linear-gradient(right, #FFB280, #FF7E39); /* Opera 11.10+ */ background-image: linear-gradient(right, #FFB280, #FF7E39); } ul.project-activity li.activity-list .lbl.violet { background-color: #712c69; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#225e9e), to(#712c69)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #225e9e, #712c69); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #225e9e, #712c69); /* FF3.6 */ background-image: -ms-linear-gradient(right, #225e9e, #712c69); /* IE10 */ background-image: -o-linear-gradient(right, #225e9e, #712c69); /* Opera 11.10+ */ background-image: linear-gradient(right, #225e9e, #712c69); } ul.project-activity li.activity-list:last-child .detail-info { padding-bottom: 0; } ul.project-activity li.activity-list .detail-info { line-height: 100%; margin: 0 0 0 30px; padding-bottom: 25px; } ul.project-activity li.activity-list .detail-info p.desc-info { margin: 0 0 5px 0; line-height: 150%; } ul.project-activity li.activity-list .detail-info p.desc-info span { color: #118cf1; } ul.project-activity li.activity-list .detail-info a.activity-status { color: #8796af; font-size: .85rem; } ul.project-activity li.activity-list .detail-info a.activity-status i { font-size: 1rem; vertical-align: middle; margin-right: 5px; color: #50b924; } /*************** 9 C. Graph Notifi Info ***************/ .notifi { position: absolute; } .notifi.tr { top: 1rem; right: 1rem; } .notifi.tl { top: 1rem; left: 1rem; } .notifi.bl { bottom: 1rem; left: 1rem; } .notifi.br { bottom: 1rem; right: 1rem; } .notifi a { display: inline-block; } .notifi a i { font-size: 30px; } /*************** 9 D. Orders Widget ***************/ ul.order-list li { padding: .8rem 0; } ul.order-list li .order-num { margin: 0 0 7px 0; color: #118cf1; border-left: 5px solid #118cf1; padding-left: 10px; } ul.order-list li .order-num.placed { color: #50b924; border-left: 5px solid #50b924; } ul.order-list li .order-num.cancelled { color: #ff0000; border-left: 5px solid #ff0000; } ul.order-list li .order-desc { margin: 0 0 0 15px; line-height: 180%; } ul.order-list li .order-desc span { text-decoration: underline; } ul.order-list li .order-date { color: #8796af; float: right; margin-top: 2px; font-size: .8rem; } ul.order-list li:first-child { padding-top: 0; } ul.order-list li:last-child { padding-bottom: 0; } /*************** 9 E. Info Widget ***************/ .info-stats { text-align: center; margin-bottom: 20px; } .info-stats p.info-title { margin: 5px 0; color: #8796af; } .info-stats h6.info-title { margin: 10px 0; color: #8796af; font-size: .85rem; } .info-stats h6.info-title.small { font-size: .75rem; } .info-stats h6.info-total { margin: 0; } .info-stats h5.info-total { margin: 0; } .info-stats h4.info-total { margin: 10px 0 0 0; font-size: .85rem; line-height: 140%; display: inline-block; padding: 2px 20px; color: #ffffff; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background-color: #62BCF6; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#118cf1), to(#62BCF6)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #118cf1, #62BCF6); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #118cf1, #62BCF6); /* FF3.6 */ background-image: -ms-linear-gradient(right, #118cf1, #62BCF6); /* IE10 */ background-image: -o-linear-gradient(right, #118cf1, #62BCF6); /* Opera 11.10+ */ background-image: linear-gradient(right, #118cf1, #62BCF6); } .info-stats h4.info-total.red { background-color: #FFB280; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FF7E39), to(#FFB280)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #FF7E39, #FFB280); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #FF7E39, #FFB280); /* FF3.6 */ background-image: -ms-linear-gradient(right, #FF7E39, #FFB280); /* IE10 */ background-image: -o-linear-gradient(right, #FF7E39, #FFB280); /* Opera 11.10+ */ background-image: linear-gradient(right, #FF7E39, #FFB280); } .info-stats span.info-label { width: 12px; height: 12px; border: 3px solid #118cf1; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; display: inline-block; } .info-stats span.info-label.red { border: 3px solid #ff0000; } .info-stats span.info-label.green { border: 3px solid #50b924; } .info-stats span.info-label.yellow { border: 3px solid #ffda3e; } /*************** 9 F. Toggle switch ***************/ .toggle-switch { position: relative; width: 40px; height: 20px; background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#1ad0fc), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #1ad0fc, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #1ad0fc, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #1ad0fc, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #1ad0fc, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #1ad0fc, #118cf1); overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .toggle-switch .check { position: absolute; display: block; cursor: pointer; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 6; margin: 0; } .toggle-switch .check:checked ~ .track { background-color: #FFB280; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FF7E39), to(#FFB280)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #FF7E39, #FFB280); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #FF7E39, #FFB280); /* FF3.6 */ background-image: -ms-linear-gradient(right, #FF7E39, #FFB280); /* IE10 */ background-image: -o-linear-gradient(right, #FF7E39, #FFB280); /* Opera 11.10+ */ background-image: linear-gradient(right, #FF7E39, #FFB280); } .toggle-switch .check:checked ~ .switch { right: 2px; left: 20px; transition: 0.35s cubic-bezier(0.7, 0.1, 0.15, 0.8); transition-property: left, right; transition-delay: .05s, 0s; } .toggle-switch .check:checked ~ .switch:after { position: absolute; content: "\e900"; font-size: .75rem; color: #FF7E39; font-family: 'icomoon'; line-height: 100%; top: 2px; left: 3px; } .toggle-switch .switch { position: absolute; left: 2px; top: 2px; bottom: 2px; right: 20px; background-color: #f2f2f2; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f2f2f2)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ffffff, #f2f2f2); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ffffff, #f2f2f2); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ffffff, #f2f2f2); /* IE10 */ background-image: -o-linear-gradient(right, #ffffff, #f2f2f2); /* Opera 11.10+ */ background-image: linear-gradient(right, #ffffff, #f2f2f2); -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; z-index: 1; transition: 0.35s cubic-bezier(0.7, 0.1, 0.15, 0.8); transition-property: left, right; transition-delay: 0s, .05s; } .toggle-switch .switch:after { position: absolute; content: "\e901"; font-size: .75rem; color: #118cf1; font-family: 'icomoon'; line-height: 100%; top: 2px; left: 3px; } .toggle-switch .track { position: absolute; left: 0; top: 0; right: 0; bottom: 0; transition: 0.35s cubic-bezier(0.7, 0.1, 0.15, 0.8); box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.05); } .toggle-switch.tr { position: absolute; top: 15px; right: 15px; } .toggle-switch.tr-xl { position: absolute; top: 16px; right: 15px; } /*************** 9 G. Messages Widget ***************/ .message-wrapper li { padding: 16px 0 17px 0; border-bottom: 1px dotted #e1e5f1; } .message-wrapper li img.avatar { height: 60px; width: 60px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .message-wrapper li .empty-avatar { height: 60px; width: 60px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ffffff; text-align: center; line-height: 60px; background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#1ad0fc), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #1ad0fc, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #1ad0fc, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #1ad0fc, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #1ad0fc, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #1ad0fc, #118cf1); } .message-wrapper li .empty-avatar.green { background-color: #50b924; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b936), to(#50b924)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #a5b936, #50b924); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #a5b936, #50b924); /* FF3.6 */ background-image: -ms-linear-gradient(right, #a5b936, #50b924); /* IE10 */ background-image: -o-linear-gradient(right, #a5b936, #50b924); /* Opera 11.10+ */ background-image: linear-gradient(right, #a5b936, #50b924); } .message-wrapper li .empty-avatar.red { background-color: #ff7f34; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#ff7f34)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff0000, #ff7f34); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff0000, #ff7f34); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff0000, #ff7f34); /* IE10 */ background-image: -o-linear-gradient(right, #ff0000, #ff7f34); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff0000, #ff7f34); } .message-wrapper li .empty-avatar.yellow { background-color: #ffda3e; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9f3d), to(#ffda3e)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff9f3d, #ffda3e); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff9f3d, #ffda3e); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff9f3d, #ffda3e); /* IE10 */ background-image: -o-linear-gradient(right, #ff9f3d, #ffda3e); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff9f3d, #ffda3e); } .message-wrapper li .empty-avatar.orange { background-color: #FF7E39; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#FF7E39)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff0000, #FF7E39); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff0000, #FF7E39); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff0000, #FF7E39); /* IE10 */ background-image: -o-linear-gradient(right, #ff0000, #FF7E39); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff0000, #FF7E39); } .message-wrapper li.in img.avatar { float: left; } .message-wrapper li.in .empty-avatar { float: left; } .message-wrapper li.in .plain-avatar { float: left; } .message-wrapper li .name { color: #8796af; line-height: 180%; } .message-wrapper li .date-time { color: #118cf1; font-size: .65rem; } .message-wrapper li.out img.avatar { float: right; } .message-wrapper li.out .empty-avatar { float: right; } .message-wrapper li.out .plain-avatar { float: right; } .message-wrapper li .message { display: block; padding: 0; position: relative; line-height: 180%; } .message-wrapper li.in .message { text-align: left; margin-left: 80px; } .message-wrapper li.out { text-align: right; } .message-wrapper li.out .message { margin-right: 80px; text-align: right; } .message-wrapper li .message .body { display: block; padding-top: 5px; } .message-wrapper li .message .body span { font-style: italic; } .message-wrapper li:first-child { padding-top: 0; } .message-wrapper li:last-child { border-bottom: none; } /*************** 9 H. Icon Stats Widget ***************/ ul.stats li { line-height: 36px; margin-bottom: 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 300; color: #ffffff; } ul.stats li span.icon { background: #118cf1; background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#1ad0fc), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #1ad0fc, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #1ad0fc, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #1ad0fc, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #1ad0fc, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #1ad0fc, #118cf1); width: 36px; height: 36px; text-align: center; display: inline-block; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; margin-right: 15px; float: left; } ul.stats li span.icon i { color: #ffffff; font-size: 1rem; line-height: 36px; } ul.stats li span.icon.red { background-color: #ff0000; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff7f34), to(#ff0000)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff7f34, #ff0000); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff7f34, #ff0000); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff7f34, #ff0000); /* IE10 */ background-image: -o-linear-gradient(right, #ff7f34, #ff0000); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff7f34, #ff0000); } ul.stats li span.icon.green { background-color: #50b924; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b936), to(#50b924)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #a5b936, #50b924); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #a5b936, #50b924); /* FF3.6 */ background-image: -ms-linear-gradient(right, #a5b936, #50b924); /* IE10 */ background-image: -o-linear-gradient(right, #a5b936, #50b924); /* Opera 11.10+ */ background-image: linear-gradient(right, #a5b936, #50b924); } ul.stats li span.icon.yellow { background-color: #ffda3e; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9f3d), to(#ffda3e)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff9f3d, #ffda3e); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff9f3d, #ffda3e); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff9f3d, #ffda3e); /* IE10 */ background-image: -o-linear-gradient(right, #ff9f3d, #ffda3e); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff9f3d, #ffda3e); } ul.stats li span.icon.orange { background-color: #FF7E39; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFB280), to(#FF7E39)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #FFB280, #FF7E39); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #FFB280, #FF7E39); /* FF3.6 */ background-image: -ms-linear-gradient(right, #FFB280, #FF7E39); /* IE10 */ background-image: -o-linear-gradient(right, #FFB280, #FF7E39); /* Opera 11.10+ */ background-image: linear-gradient(right, #FFB280, #FF7E39); } /*************** 9 I. Newsticker Widget ***************/ .scroll-stats { text-align: center; margin: 0 auto; } .scroll-stats i { font-size: 36px; color: #118cf1; cursor: pointer; width: 36px; height: 36px; line-height: 36px; display: inline-block; margin: auto; } ul#newsticker li { overflow: hidden; padding: 12px 0; min-height: 80px; text-align: left; line-height: 150%; border-bottom: 1px dotted #e6ecf3; } ul#newsticker li .ticker-image { width: 56px; height: 56px; float: left; padding: 3px; } ul#newsticker li .ticker-image img { width: 50px; height: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } ul#newsticker li .ticker-image .empty-avatar { height: 56px; width: 56px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; color: #ffffff; text-align: center; line-height: 56px; } ul#newsticker li .ticker-wrapper { margin: 5px 0 0 70px; } ul#newsticker li .ticker-wrapper a { color: #118cf1; text-decoration: underline; } ul#newsticker li .ticker-wrapper a:hover { color: #0c71c3; } /*************** 9 J. Tasks Widget ***************/ .task-list li { display: block; padding: 15px 0 15px 0; margin: 0; cursor: pointer; } .task-list li.list span { float: left; margin-top: 20px; color: #FF7E39; } .task-list li.list span:before { font-size: 1.5rem; content: "\e5ca"; font-family: 'icomoon'; vertical-align: middle; border: 3px solid #FF7E39; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; padding: 4px; } .task-list li.completed { text-decoration: line-through; color: #8796af; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .task-list li.completed span:before { color: #50b924; border: 3px solid #50b924; content: "\e5ca"; font-family: 'icomoon'; text-decoration: none; } .task-list li:first-child { padding-top: 0; } .task-list li:last-child { padding-bottom: 0; border-bottom: 0; } .task-list li .task-details { margin-left: 60px; } .task-list li .task-details p { margin: 0; padding: 10px 0 6px 0; line-height: 140%; } .task-list li .task-details p small { padding: 0; color: #6053da; } .task-list li .task-details p.date { padding: 0; margin: 0; font-size: .75rem; } .task-list li .task-details p.date small { text-transform: uppercase; } /*************** 9 K. Todo Widget ***************/ .todo-container #today-date { margin: 0; padding: 0; font-size: 1rem; font-weight: 600; } .todo-container .todo-body { margin-left: 25px; padding: 20px 20px 0 0; border-left: 1px solid #e6e6e6; } .todo-container .todo-body li.todo-list { position: relative; display: block; cursor: pointer; color: #000000; } .todo-container .todo-body li.todo-list .dot { border: 2px solid #118cf1; background: #ffffff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; content: ""; height: 19px; width: 19px; text-align: center; text-transform: uppercase; position: absolute; top: 4px; left: -10px; } .todo-container .todo-body li.todo-list .dot:before { font-size: .7rem; content: "\e901"; font-family: 'icomoon'; color: rgba(0, 0, 0, 0.2); } .todo-container .todo-body li.todo-list .dot.red { border: 2px solid #ff0000; } .todo-container .todo-body li.todo-list .dot.green { border: 2px solid #50b924; } .todo-container .todo-body li.todo-list .dot.yellow { border: 2px solid #ffda3e; } .todo-container .todo-body li.todo-list .dot.pink { border: 2px solid #f15f79; } .todo-container .todo-body li.todo-list .dot.orange { border: 2px solid #FF7E39; } .todo-container .todo-body li.todo-list .dot.violet { border: 2px solid #712c69; } .todo-container .todo-body li.todo-list.done { text-decoration: line-through; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #000000; } .todo-container .todo-body li.todo-list.done .dot { border: 2px solid #0c71c3; background: #118cf1; } .todo-container .todo-body li.todo-list.done .dot:before { color: #ffffff; content: "\e901"; font-family: 'icomoon'; text-decoration: none; } .todo-container .todo-body li.todo-list.done .dot.red { background: #ff0000; border: 2px solid #cc0000; } .todo-container .todo-body li.todo-list.done .dot.green { background: #50b924; border: 2px solid #3e8e1c; } .todo-container .todo-body li.todo-list.done .dot.yellow { background: #ffda3e; border: 2px solid #d7ae00; } .todo-container .todo-body li.todo-list.done .dot.pink { background: #f15f79; border: 2px solid #ed3052; } .todo-container .todo-body li.todo-list.done .dot.orange { background: #FF7E39; border: 2px solid #ff5d06; } .todo-container .todo-body li.todo-list.done .dot.violet { background: #712c69; border: 2px solid #4c1e47; } .todo-container .todo-body li.todo-list.done .todo-info p { opacity: 0.3; } .todo-container .todo-body li.todo-list.done .todo-info small { opacity: 0.3; } .todo-container .todo-body li.todo-list:last-child .detail-info { padding-bottom: 0; } .todo-container .todo-body li.todo-list .todo-info { line-height: 100%; margin: 0 0 0 20px; padding-bottom: 25px; } .todo-container .todo-body li.todo-list .todo-info p { margin: 0 0 5px 0; line-height: 150%; } .todo-container .todo-body li.todo-list .todo-info p span.time { font-size: .7rem; float: right; } /*************** 9 L. Traffic Sources Widget ***************/ ul.traffic-sources { margin: 0; } ul.traffic-sources li { padding: 6px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } ul.traffic-sources li:last-child { border-bottom: 0; padding-bottom: 4px; } ul.traffic-sources li .source-graph { float: right; } ul.traffic-sources .symbol { width: 16px; height: 16px; background: #118cf1; display: inline-block; margin-top: 3px; } ul.traffic-sources .symbol.orange { background: #FF7E39; } ul.traffic-sources .symbol.green { background: #50b924; } ul.traffic-sources .symbol.yellow { background: #ffda3e; } ul.traffic-sources .symbol.pink { background: #f15f79; } /*************** 9 M. Revenue Widget ***************/ .revenue-container { min-height: 208px; } .revenue-container .revenue-footer .live-sales { float: right; margin-top: 10px; } .revenue-container .revenue-footer .live-sales ul.sales-ticker li { line-height: 30px; } .revenue-container .revenue-footer .live-sales ul.sales-ticker li a { color: #000000; font-size: .80rem; } .revenue-container .revenue-footer .live-sales ul.sales-ticker li a .num { background-color: #333333; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#000000), to(#333333)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #000000, #333333); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #000000, #333333); /* FF3.6 */ background-image: -ms-linear-gradient(right, #000000, #333333); /* IE10 */ background-image: -o-linear-gradient(right, #000000, #333333); /* Opera 11.10+ */ background-image: linear-gradient(right, #000000, #333333); padding: 5px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; width: 30px; height: 30px; font-size: 1rem; text-align: center; margin-right: 10px; line-height: 20px; float: left; color: #ffffff; } /*************** 9 N. Simple widget ***************/ .simple-widget { position: relative; padding: 15px; -webkit-border-radius: 0.3rem; -moz-border-radius: 0.3rem; border-radius: 0.3rem; margin-bottom: .9rem; background-color: #62BCF6; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#118cf1), to(#62BCF6)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #118cf1, #62BCF6); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #118cf1, #62BCF6); /* FF3.6 */ background-image: -ms-linear-gradient(right, #118cf1, #62BCF6); /* IE10 */ background-image: -o-linear-gradient(right, #118cf1, #62BCF6); /* Opera 11.10+ */ background-image: linear-gradient(right, #118cf1, #62BCF6); } .simple-widget .growth { position: absolute; right: 15px; top: 15px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 48px; height: 48px; line-height: 48px; background: rgba(0, 0, 0, 0.05); color: #ffffff; text-align: center; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); } .simple-widget h3 { margin: 0 0 15px 0; font-size: 2rem; color: #ffffff; letter-spacing: 1px; } .simple-widget p { margin: 0; padding: 0 0 10px 0; color: #ffffff; } .simple-widget .progress { background: rgba(255, 255, 255, 0.2); } .simple-widget .progress .progress-bar { background: #f0f4f9; } .simple-widget.orange { background-color: #FFB280; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FF7E39), to(#FFB280)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #FF7E39, #FFB280); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #FF7E39, #FFB280); /* FF3.6 */ background-image: -ms-linear-gradient(right, #FF7E39, #FFB280); /* IE10 */ background-image: -o-linear-gradient(right, #FF7E39, #FFB280); /* Opera 11.10+ */ background-image: linear-gradient(right, #FF7E39, #FFB280); } /*************** 9 O. Plain widget ***************/ .plain-widget { position: relative; padding: 15px; -webkit-border-radius: 0.3rem; -moz-border-radius: 0.3rem; border-radius: 0.3rem; margin-bottom: .9rem; background: #ffffff; } .plain-widget.dark { background: #17202b; color: #ffffff; } .plain-widget.dark p { color: #ffffff; } .plain-widget.blue { background: #118cf1; color: #ffffff; } .plain-widget.blue p { color: #ffffff; } .plain-widget.orange { background: #FF7E39; color: #ffffff; } .plain-widget.orange p { color: #ffffff; } .plain-widget.pink { background: #f15f79; color: #ffffff; } .plain-widget.pink p { color: #ffffff; } .plain-widget .growth { position: absolute; right: 15px; top: 15px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 48px; height: 48px; line-height: 48px; color: #ffffff; font-weight: 600; text-align: center; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2); } .plain-widget h3 { margin: 0 0 15px 0; font-size: 2rem; font-weight: 300; } .plain-widget p { margin: 0; padding: 0 0 10px 0; color: #8796af; } /*************** 9 P. Settings ***************/ .settings li { border-bottom: 1px dotted #c4d2e2; padding: 10px 0; } .settings li p { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0; line-height: 150%; } .settings li .toggle-switch { float: right; } .settings li a.cancel { float: right; margin-left: 10px; border: 2px solid #a1b8d2; width: 24px; height: 24px; line-height: 24px; text-align: center; } .settings li a.cancel i { font-size: 18px; color: #a1b8d2; } .settings li a.cancel.cancelled { border: 2px solid #ff0000; } .settings li a.cancel.cancelled i { color: #ff0000; } .settings li:first-child { padding-top: 0; } .settings li:last-child { padding-bottom: 0; border-bottom: 0; } /*************** 9 Q. Deals Widget ***************/ .deals-widget h5 { margin: 0; padding: 0; font-size: .8rem; color: #000000; } .deals-widget p { padding: 0; margin: 0; font-size: 1.5rem; } .deals-widget p small { margin-left: 5px; font-size: 85%; } .deals-widget p i { margin-right: 5px; font-size: 1.5rem; vertical-align: middle; } .deals-widget .small-graph { margin: 10px 0 4px 0; } /*************** 9 R. Invoices Widget ***************/ .invoices-widget h5 { margin: 0; padding: 0; font-size: .8rem; color: #ffffff; } .invoices-widget p { padding: 0; margin: 0; font-size: 1.5rem; color: #ffffff; } .invoices-widget p small { margin-left: 5px; font-size: 85%; } .invoices-widget p i { margin-right: 5px; font-size: 1.5rem; vertical-align: middle; } .invoices-widget .progress { margin: 14px 0 15px 0; } /*************** 9 S. Tags Widget ***************/ .tags-container { background: #ffffff; border-bottom: 1px solid #e1e5f1; } /*************** 9 T. Post Widget ***************/ .post-slider { margin-bottom: .8rem; } .post-slider .post-bg { padding: 1rem; color: #ffffff; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background-size: cover; background-image: url("../img/carousel-img-1.jpg"); } .post-slider .post-bg.bg2 { background-image: url("../img/carousel-img-2.jpg"); } .post-slider .post-bg.bg3 { background-image: url("../img/carousel-img-3.jpg"); } .post-slider .post-body { min-height: 180px; } .post-slider .post-body h4 { margin: 0 0 10px 0; font-weight: 300; } .post-slider .post-body h6 { text-transform: uppercase; margin: 0; font-size: .8rem; line-height: 150%; } .post-slider .post-footer { padding: 15px 0 0 0; margin-bottom: 40px; } .post-slider .post-footer .like-box { margin-bottom: 10px; } .post-slider .post-footer .like-box i { font-size: 1.5rem; margin-right: 5px; color: #ffffff; vertical-align: middle; } .post-slider .post-footer .like-box i.liked { color: #ff0000; } .post-slider .post-footer .like-box span.total { font-size: .8rem; font-weight: 700; color: #ffffff; } /*************** 9 U. Projects Table ***************/ .projects-table.table { color: #8796af; } .projects-table.table i { font-size: 10px; margin-right: 5px; } .projects-table.table thead th { border-bottom: 1px solid #29394c; } .projects-table.table th, .projects-table.table td { border-top: 1px solid #29394c; } /*************** 9 V. User Cards ***************/ figure.user-card { background: #ffffff; padding: 20px; border-top: 3px solid #bfbfbf; text-align: center; } figure.user-card.red { border-top: 3px solid #ff0000; } figure.user-card.green { border-top: 3px solid #50b924; } figure.user-card.blue { border-top: 3px solid #118cf1; } figure.user-card.yellow { border-top: 3px solid #ffda3e; } figure.user-card.orange { border-top: 3px solid #FF7E39; } figure.user-card.teal { border-top: 3px solid #1abaca; } figure.user-card.pink { border-top: 3px solid #f15f79; } figure.user-card.brown { border-top: 3px solid #79574b; } figure.user-card.purple { border-top: 3px solid #5a66b5; } figure.user-card.fb { border-top: 3px solid #3B5998; } figure.user-card.gp { border-top: 3px solid #E02F2F; } figure.user-card .profile { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; max-width: 72px; margin-bottom: 20px; } figure.user-card h5 { margin: 0 0 5px 0; } figure.user-card h6 { margin: 0 0 15px 0; color: #8796af; font-size: 14px; } figure.user-card p { margin: 0; padding: 0 0 15px 0; color: #8796af; line-height: 150%; font-size: .85rem; } figure.user-card ul.contacts { margin: 0; padding: 0 0 15px 0; line-height: 150%; font-size: .85rem; } figure.user-card ul.contacts li { padding: .2rem 0; } figure.user-card ul.contacts li a { color: #118cf1; } figure.user-card ul.contacts li a i { min-width: 36px; float: left; font-size: 1rem; } figure.user-card ul.contacts li:last-child a { color: #FF7E39; } /************************************************ ************************************************ 10. Pages ************************************************ ************************************************/ /*************** 10 A. Invoice Page ***************/ .invoice-container { padding: 0; background-color: #ffffff; border: 1px solid #d0d6e9; } .invoice-container .invoice-header { padding: 1rem 1.5rem; } .invoice-container .invoice-header img.invoice-logo { max-width: 120px; } .invoice-container .invoice-address { background: #f0f4f8; padding: 1rem 1.5rem; } .invoice-container address { margin-top: 10px; font-size: .8rem; color: #8796af; } .invoice-container .invoice-details { margin-top: 2.5rem; text-align: right; } .invoice-container .invoice-body { padding: 3rem 1.5rem 1rem 1.5rem; } .invoice-container .invoice-footer { background: #f0f4f8; padding: 1rem 1.5rem; text-align: center; font-size: .7rem; } .invoice-container .invoice-payment { background: #f0f4f8; padding: 0 1.5rem 0 1.5rem; text-align: right; font-size: .8rem; line-height: 200%; } /*************** 10 B. Icons Page ***************/ .icons { text-align: center; } .icons span { font-size: 1.5rem; text-align: center; cursor: pointer; display: inline-block; width: 60px; height: 60px; line-height: 60px; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background: #f0f4f8; margin-bottom: 3px; } .icons span:before { background: #c6d2e1; /* Old browsers */ background: -moz-linear-gradient(top, #c6d2e1 0%, #29394c 100%); /* FF3.6+ */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #c6d2e1), color-stop(100%, #29394c)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(top, #c6d2e1 0%, #29394c 100%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(top, #c6d2e1 0%, #29394c 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #c6d2e1 0%, #29394c 100%); /* IE10+ */ background: linear-gradient(to bottom, #c6d2e1 0%, #29394c 100%); /* W3C */ background-clip: text; text-fill-color: transparent; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icons span:hover { background-color: #e6ecf3; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f9fb), to(#e6ecf3)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #f7f9fb, #e6ecf3); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #f7f9fb, #e6ecf3); /* FF3.6 */ background-image: -ms-linear-gradient(right, #f7f9fb, #e6ecf3); /* IE10 */ background-image: -o-linear-gradient(right, #f7f9fb, #e6ecf3); /* Opera 11.10+ */ background-image: linear-gradient(right, #f7f9fb, #e6ecf3); } /*************** 10 C. Gallery Page ***************/ .gallery { margin: 0 auto; } .gallery a { border: 3px solid #e3e9f1; position: relative; overflow: hidden; -moz-box-shadow: 0 0 10px #a1b8d2; /* FF3.5+ */ -webkit-box-shadow: 0 0 10px #a1b8d2; /* Saf3.0+, Chrome */ box-shadow: 0 0 10px #a1b8d2; /* Opera 10.5, IE9 */ -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; display: block; margin: 0 0 15px 0; opacity: 1; } .gallery a img { max-height: 180px; } .gallery a .overlay { top: 0; bottom: 0; left: 0; right: 0; opacity: 0; position: absolute; z-index: 20; background: rgba(0, 0, 0, 0.8); overflow: hidden; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .gallery a .expand { position: absolute; top: 50%; left: 50%; z-index: 100; border: 2px solid #ffda3e; text-align: center; color: #ffda3e; line-height: 44px; font-size: 30px; margin-left: -20px; margin-top: -20px; width: 48px; height: 48px; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; -o-transition: all 0.5s; transition: all 0.5s; } .gallery a:hover { opacity: 1; } .gallery a:hover .overlay { opacity: 1; } .gallery a:hover span.expand { width: 48px; height: 48px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } /*************** 10 D. News Feed ***************/ ul.news-feed { width: 100%; } ul.news-feed li { border-bottom: 1px dotted white; padding: 25px 0; } ul.news-feed li:last-child { border-bottom: 0; padding-bottom: 0; } ul.news-feed li:first-child { border-bottom: 0; } ul.news-feed li img.avatar { float: left; width: 48px; height: 48px; } ul.news-feed li blockquote { padding: 0; font-size: .85rem; line-height: 180%; color: #8796af; } ul.news-feed li .message-wrapper { margin-left: 60px; } ul.news-feed li .message-wrapper .url { font-size: .8rem; } ul.news-feed li .message-wrapper .url a { text-decoration: underline; } ul.news-feed li .message-wrapper .url i { font-size: 1rem; margin-right: 5px; vertical-align: middle; } ul.news-feed li .message-wrapper h6 { margin: 15px 0 15px 0; } ul.news-feed li .message-wrapper h6 .message-date { float: right; font-size: .75rem; font-weight: 600; color: #8796af; } ul.users-group li { margin-right: 10px; width: 36px; float: left; padding: 0; } ul.users-group li a { padding: 0; margin: 0; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } ul.users-group li a img { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; width: 36px; height: 36px; } ul.team-group li { float: left; padding: 0; } ul.team-group li a:not(.btn) { padding: 6px 10px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; border: 2px solid #ffffff; display: block; text-align: center; font-weight: 600; font-size: .8rem; color: #ffffff; } /*************** 10 E. Social Stats ***************/ .socail-stats { margin-bottom: .8rem; -webkit-border-radius: 0.3rem; -moz-border-radius: 0.3rem; border-radius: 0.3rem; padding: 10px; text-align: center; display: block; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; color: #ffffff; } .socail-stats h5 { margin: 10px 0 0 0; } .socail-stats i { font-size: 2rem; } .socail-stats:hover { opacity: 0.8; color: #ffffff; } /*************** 10 F. Small Gallery ***************/ .gallery-sm { margin: 0; } .gallery-sm img { margin: 5px auto; } /*************** 10 G. Search Results Page ***************/ .search-results { border: 1px solid #e1e5f1; background-color: #ffffff; padding: 1.5rem; -webkit-border-radius: 0.3rem; -moz-border-radius: 0.3rem; border-radius: 0.3rem; margin: 0; } .search-results .results-header { border-bottom: 1px solid #e1e5f1; color: #8796af; margin-bottom: 1.5rem; padding: 0 0 1rem 0; } .search-results .search-section { margin-bottom: 3rem; max-width: 60%; } .search-results .search-section a { color: #118cf1; font-size: 1rem; margin: 0 0 10px 0; font-weight: 700; display: inline-block; } .search-results .search-section p.title { font-size: .9rem; color: #8796af; margin: 0 0 10px 0; } .search-results .search-section p.desc { font-size: .9rem; margin: 0; line-height: 150%; } @media (max-width: 767px) { .search-results .search-section { width: 100%; max-width: 100%; } } /*************** 10 H. Custom Forms ***************/ .form-block { background: #ffffff; border: 1px solid #e1e5f1; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .form-block .form-block-header { background: #f7f9fb; border-bottom: 1px solid #e1e5f1; padding: 1rem 1.5rem; } .form-block .form-block-header h5 { margin: 0 0 8px 0; } .form-block .form-block-header h4 { margin: 0 0 15px 0; } .form-block .form-block-header h6 { margin: 0; font-size: .8rem; color: #8796af; } .form-block .form-block-body { padding: 1.5rem; } /*************** 10 I. Pricing Plans ***************/ .plan-one { margin: 0 0 20px 0; width: 100%; position: relative; background: #ffffff; -webkit-border-radius: 10px 10px 10px 10px; -moz-border-radius: 10px 10px 10px 10px; border-radius: 10px 10px 10px 10px; } .plan-one .pricing-header { padding: 0; margin-bottom: 10px; text-align: center; } .plan-one .pricing-header .plan-title { -webkit-border-radius: 10px 10px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; font-size: 1.2rem; color: #ffffff; padding: 10px 0; text-transform: uppercase; font-weight: 600; background: #118cf1; margin: 0; } .plan-one .pricing-header .plan-cost { color: #ffffff; background: #2998f2; padding: 15px 0; font-size: 2.5rem; font-weight: 700; } .plan-one .pricing-header .plan-save { color: #ffffff; background: #3ca1f4; padding: 10px 0; font-size: 1rem; font-weight: 700; } .plan-one .pricing-header.green .plan-title { background: #1abaca; } .plan-one .pricing-header.green .plan-cost { background: #1dcfe1; } .plan-one .pricing-header.green .plan-save { background: #2ed4e4; } .plan-one .pricing-header.orange .plan-title { background: #ff1a1a; } .plan-one .pricing-header.orange .plan-cost { background: #ff3333; } .plan-one .pricing-header.orange .plan-save { background: #ff4d4d; } .plan-one .plan-features { padding: 0; margin: 20px 0; text-align: left; } .plan-one .plan-features li { padding: 10px 15px 10px 40px; margin: 5px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; border-bottom: 1px solid #e6ecf3; line-height: 100%; } .plan-one .plan-features li:before { position: absolute; left: 15px; top: 10px; font-size: 1rem; color: #000000; content: "\e901"; font-family: 'icomoon'; } .plan-one .plan-footer { background: #ffffff; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; text-align: center; padding: 10px 0 30px 0; } @media (max-width: 767px) { .plan-one .pricing-header { text-align: center; } .plan-one .pricing-header i { display: block; float: none; margin-bottom: 20px; } } /***************** 10 J. Tasks *****************/ .task-checkbox { position: relative; } .task-checkbox input, .task-checkbox .label, .task-checkbox .check { display: inline-block; vertical-align: middle; } .task-checkbox .check { position: absolute; top: 0; right: 0; } .task-checkbox input[type="checkbox"] { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; } .task-checkbox input[type="checkbox"]:focus { outline: 0; } .task-checkbox input[type="checkbox"]:checked + .ripple-container .check-off { border-color: #ffffff; } .task-checkbox input[type="checkbox"]:checked + .ripple-container .check-on { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; color: #ffffff; } .task-checkbox input[type="checkbox"]:checked + .ripple-container .check-ripple:before, .task-checkbox input[type="checkbox"]:checked + .ripple-container .check-ripple:after { -webkit-transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1); -moz-transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1); transition: all 0.65s cubic-bezier(0.25, 0.8, 0.25, 1); opacity: 0; } .task-checkbox input[type="checkbox"]:checked + .ripple-container .check-ripple:before { -webkit-transform: scale(3); -moz-transform: scale(3); -ms-transform: scale(3); -o-transform: scale(3); transform: scale(3); } .task-checkbox input[type="checkbox"]:checked + .ripple-container .check-ripple:after { -webkit-transform: scale(1.5); -moz-transform: scale(1.5); -ms-transform: scale(1.5); -o-transform: scale(1.5); transform: scale(1.5); } .task-checkbox input[type="checkbox"] + .ripple-container { width: auto; position: relative; display: inline-block; width: 25px; height: 25px; top: 0; pointer-events: none; } .task-checkbox input[type="checkbox"] + .ripple-container:before { content: ""; position: absolute; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; display: block; height: auto; left: 0; top: 0; right: 0; bottom: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .task-checkbox input[type="checkbox"] + .ripple-container .check-off { position: absolute; width: 25px; height: 25px; left: 0; top: 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 2px solid rgba(255, 255, 255, 0.6); transition: border-color ease 0.28s; } .task-checkbox input[type="checkbox"] + .ripple-container .check-on { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0s; -moz-transition: all 0s; transition: all 0s; position: absolute; left: 0; top: 0; width: 100%; height: 100%; text-align: center; line-height: 25px; } .task-checkbox input[type="checkbox"] + .ripple-container .check-ripple:before, .task-checkbox input[type="checkbox"] + .ripple-container .check-ripple:after { -webkit-transition: all 0s; -moz-transition: all 0s; transition: all 0s; -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); content: ""; position: absolute; display: block; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; width: 25px; height: 25px; opacity: 1; } .task-checkbox input[type="checkbox"] + .ripple-container .check-ripple:before { background-color: rgba(255, 255, 255, 0.35); } .task-checkbox input[type="checkbox"] + .ripple-container .check-ripple:after { background-color: rgba(219, 213, 213, 0.6); } .task-container { position: relative; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .task-container:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.05; z-index: 0; background-image: url("../img/header-bg4.jpg"); background-repeat: no-repeat; background-size: cover; background-position: 5% 5%; } .task-container.high-priority { -webkit-border-radius: 10px 0 0 10px; -moz-border-radius: 10px 0 0 10px; border-radius: 10px 0 0 10px; color: #ffffff; background-color: #f75851; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#f64139), to(#f75851)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #f64139, #f75851); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #f64139, #f75851); /* FF3.6 */ background-image: -ms-linear-gradient(right, #f64139, #f75851); /* IE10 */ background-image: -o-linear-gradient(right, #f64139, #f75851); /* Opera 11.10+ */ background-image: linear-gradient(right, #f64139, #f75851); z-index: 1; } .task-container.high-priority ul li { border-top: 1px solid rgba(255, 255, 255, 0.2); } .task-container.low-priority { -webkit-border-radius: 0 10px 10px 0; -moz-border-radius: 0 10px 10px 0; border-radius: 0 10px 10px 0; color: #ffffff; background-color: #17202b; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#0e141a), to(#17202b)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #0e141a, #17202b); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #0e141a, #17202b); /* FF3.6 */ background-image: -ms-linear-gradient(right, #0e141a, #17202b); /* IE10 */ background-image: -o-linear-gradient(right, #0e141a, #17202b); /* Opera 11.10+ */ background-image: linear-gradient(right, #0e141a, #17202b); } .task-container.low-priority ul li { border-top: 1px solid #233142; } .task-container h4.task-header { padding: 1.5rem 1.5rem 0 1.5rem; font-weight: 300; color: #ffffff; font-size: 1.5rem; opacity: 0.5; } .task-container .tasks-list { color: #ffffff; padding: 1rem 1.5rem; } .task-container .tasks-list .task-name { color: #ffffff; margin-bottom: 15px; font-size: 1rem; font-weight: 600; } .task-container .tasks-list .task-desc { color: #ffffff; margin-bottom: 15px; font-size: .9rem; line-height: 180%; font-weight: 300; opacity: 0.6; } .task-container .tasks-list .task-time { font-weight: 300; font-size: .8rem; } .task-container .tasks-list .task-types { margin-top: 15px; } .task-container .tasks-list .task-types .badge { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background: rgba(255, 255, 255, 0.2); } .task-container .tasks-list ul { position: relative; z-index: 1; } .task-container .tasks-list ul li { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; padding: 1rem 0; position: relative; } .task-container .tasks-list ul li .label { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 1; line-height: 120%; margin-right: 60px; } .task-container .tasks-list ul li .task-msg { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; right: 35px; top: 12px; position: absolute; font-size: .75rem; opacity: 0; } .task-container .tasks-list ul li.task-checked .task-msg { -webkit-animation: fadeInOut 2s; -moz-animation: fadeInOut 2s; animation: fadeInOut 2s; } .task-container .tasks-list ul li.task-checked .label { opacity: 0.5; text-decoration: line-through; } .task-container .tasks-list ul li:last-child { padding-bottom: 0; } .task-container .tasks-list ul li:first-child { border-top: 0; } @media (max-width: 767px) { .task-container.high-priority { margin-bottom: 1rem; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .task-container.low-priority { margin-bottom: 1rem; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } } @-webkit-keyframes fadeInOut { 0% { opacity: 0; -webkit-transform: translate3d(10px, -50%, 0); } 30% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0); } 75% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-10px, -50%, 0); } } @-moz-keyframes fadeInOut { 0% { opacity: 0; -moz-transform: translate3d(10px, -50%, 0); } 30% { opacity: 1; -moz-transform: translate3d(0, -50%, 0); } 75% { opacity: 1; -moz-transform: translate3d(0, -50%, 0); } 100% { opacity: 0; -moz-transform: translate3d(-10px, -50%, 0); } } @keyframes fadeInOut { 0% { opacity: 0; -webkit-transform: translate3d(10px, -50%, 0); -moz-transform: translate3d(10px, -50%, 0); -ms-transform: translate3d(10px, -50%, 0); -o-transform: translate3d(10px, -50%, 0); transform: translate3d(10px, -50%, 0); } 30% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 75% { opacity: 1; -webkit-transform: translate3d(0, -50%, 0); -moz-transform: translate3d(0, -50%, 0); -ms-transform: translate3d(0, -50%, 0); -o-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0); } 100% { opacity: 0; -webkit-transform: translate3d(-10px, -50%, 0); -moz-transform: translate3d(-10px, -50%, 0); -ms-transform: translate3d(-10px, -50%, 0); -o-transform: translate3d(-10px, -50%, 0); transform: translate3d(-10px, -50%, 0); } } /*************** 10 K. Timeline ***************/ .timeline { position: relative; padding: 10px; margin: 0 auto; overflow: hidden; color: #ffffff; } .timeline:after { content: ""; position: absolute; top: 0; left: 50%; margin-left: -1px; border-right: 2px dashed #c4d2e2; height: 100%; display: block; } .timeline-row { padding-left: 50%; position: relative; margin-bottom: 30px; } .timeline-row .timeline-time { position: absolute; right: 50%; top: 31px; text-align: right; margin-right: 20px; color: #000000; font-size: 1.5rem; } .timeline-row .timeline-time small { display: block; font-size: .8rem; color: #8796af; } .timeline-row .timeline-content { position: relative; padding: 20px 30px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .timeline-row .timeline-content:after { content: ""; position: absolute; top: 20px; height: 3px; width: 40px; } .timeline-row .timeline-content:before { content: ""; position: absolute; top: 20px; right: -50px; width: 20px; height: 20px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; z-index: 100; background: #ffffff; border: 2px dashed #c4d2e2; } .timeline-row .timeline-content h4 { margin: 0 0 20px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 150%; } .timeline-row .timeline-content p { margin-bottom: 30px; line-height: 150%; } .timeline-row .timeline-content i { font-size: 2rem; color: #ffffff; line-height: 100%; padding: 10px; border: 2px solid #ffffff; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; margin-bottom: 10px; display: inline-block; } .timeline-row .timeline-content .thumbs { margin-bottom: 20px; } .timeline-row .timeline-content .thumbs img { margin-bottom: 10px; } .timeline-row:nth-child(even) .timeline-content { background-color: #FF7E39; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff0000), to(#FF7E39)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff0000, #FF7E39); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff0000, #FF7E39); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff0000, #FF7E39); /* IE10 */ background-image: -o-linear-gradient(right, #ff0000, #FF7E39); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff0000, #FF7E39); margin-left: 40px; text-align: left; } .timeline-row:nth-child(even) .timeline-content:after { left: -39px; border-right: 18px solid #FF7E39; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .timeline-row:nth-child(even) .timeline-content:before { left: -50px; right: initial; } .timeline-row:nth-child(odd) { padding-left: 0; padding-right: 50%; } .timeline-row:nth-child(odd) .timeline-time { right: auto; left: 50%; text-align: left; margin-right: 0; margin-left: 20px; } .timeline-row:nth-child(odd) .timeline-content { background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#1ad0fc), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #1ad0fc, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #1ad0fc, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #1ad0fc, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #1ad0fc, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #1ad0fc, #118cf1); margin-right: 40px; margin-left: 0; text-align: right; } .timeline-row:nth-child(odd) .timeline-content:after { right: -39px; border-left: 18px solid #1ad0fc; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } @media (max-width: 767px) { .timeline { padding: 15px 10px; } .timeline:after { left: 28px; } .timeline .timeline-row { padding-left: 0; margin-bottom: 16px; } .timeline .timeline-row .timeline-time { position: relative; right: auto; top: 0; text-align: left; margin: 0 0 6px 56px; } .timeline .timeline-row .timeline-time strong { display: inline-block; margin-right: 10px; } .timeline .timeline-row .timeline-icon { top: 52px; left: -2px; margin-left: 0; } .timeline .timeline-row .timeline-content { padding: 15px; margin-left: 56px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); position: relative; } .timeline .timeline-row .timeline-content:after { right: auto; left: -39px; top: 32px; } .timeline .timeline-row:nth-child(odd) { padding-right: 0; } .timeline .timeline-row:nth-child(odd) .timeline-time { position: relative; right: auto; left: auto; top: 0; text-align: left; margin: 0 0 6px 56px; } .timeline .timeline-row:nth-child(odd) .timeline-content { margin-right: 0; margin-left: 55px; } .timeline .timeline-row:nth-child(odd) .timeline-content:after { right: auto; left: -39px; top: 32px; border-right: 18px solid #118cf1; border-left: inherit; } .timeline.animated .timeline-row:nth-child(odd) .timeline-content { left: 20px; } .timeline.animated .timeline-row.active:nth-child(odd) .timeline-content { left: 0; } } /************************************************ ************************************************ 11. Chart Heights ************************************************ ************************************************/ /*************** Map/Chart/Graph Heights ***************/ .chart-height { position: relative; height: 210px; } .chart-height-2 { position: relative; height: 120px; } .chart-height-md { position: relative; height: 190px; } .chart-height-lg { position: relative; height: 280px; text-align: center; overflow: hidden; } .chart-height-lgx { position: relative; height: 261px; } .chart-height-xl { position: relative; height: 360px; } /************************************************ ************************************************ 12. Plugins Overwrite CSS ************************************************ ************************************************/ /*************** 12 A. Gmap Skins ***************/ .map { width: 100%; height: 320px; background: #e6ecf3; } .map-xl { width: 100%; height: 500px; background: #e6ecf3; } /*************** 12 B. jVector Map ***************/ .jvectormap-container { width: 100%; height: 100%; position: relative; overflow: hidden; touch-action: none; } .jvectormap-tip { position: absolute; display: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background: #000000; color: #ffffff; font-size: .75rem; padding: 6px 12px; } /*************** 12 C. Flot Chart ***************/ .legendLabel { padding-left: 5px; padding-right: 10px; font-size: 10px; } /*************** 12 D. Notify ***************/ .notify-notifications .btn { margin: 3px; min-width: 120px; float: left; } /*************** 12 E. Rating ***************/ .stars { margin: 5px 0 0 0; width: 100% !important; } .stars img { width: 18px; height: 18px; } /*************** 12 F. Google Maps ***************/ .map-xl *, .map-xl::after, .map-xl::before { box-sizing: initial; } .gm-style-mtc div[role=button] { background-color: #FF7E39 !important; color: #ffffff !important; font-size: 13px !important; } /************************************************ ************************************************ 13. Login, Signup, Lock and Error Screens ************************************************ ************************************************/ /*************** 13 A. Login Screen ***************/ .login-screen { position: relative; box-shadow: 0px 30px 50px #c4d2e2; background: #ffffff; margin: 25px auto; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; } .logintop { margin: 123px auto!important; } .login-screen .login-logo { margin: 20px 0 30px 0; display: block; } .login-screen .login-logo > img { margin: 0; max-height: 80px; } .login-screen .login-box { padding: 20px 30px; } .login-screen .login-box h5 { margin: 0 0 20px 0; color: #118cf1; text-align: center; } .login-screen .actions { display: block; margin-bottom: 20px; text-align: center; } .login-screen .actions a { color: #118cf1; text-decoration: none; margin-top: 12px; display: block; font-size: .8rem; } .login-screen .actions a:hover { text-decoration: underline; } .login-screen .actions .btn { padding: 8px 25px; text-transform: uppercase; } .login-screen a.additional-link { text-decoration: none; margin: 30px auto 0 auto; text-align: center; display: block; } .login-screen a.additional-link span { text-decoration: underline; color: #118cf1; } .login-screen p.info { padding: 0; margin: 0 0 20px 0; line-height: 150%; color: #8796af; text-align: center; } /*************** 13 B. OR | Line between two blocks ***************/ .or { position: relative; text-align: center; margin-bottom: 20px; } .or::before { content: ''; position: absolute; top: 50%; left: 15%; width: 70%; height: 1px; background-color: #e6ecf3; } .or span { position: relative; background-color: #ffffff; padding: 0 10px; z-index: 10; } /*************** 13 C. Lock Screen ***************/ .lock-screen { position: absolute; top: 120px; left: 50%; width: 300px; margin-left: -150px; text-align: center; } .lock-screen .avatar { position: relative; margin: auto; width: 90px; margin: 10px auto; } .lock-screen .avatar img { width: 90px; height: 90px; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .lock-screen .avatar .status { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; background: #50b924; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .lock-screen h6 { margin: 0 0 30px 0; } .lock-screen-input { margin: 20px auto; height: 52px; position: relative; } .lock-screen-input .form-control { height: 52px; padding: 12px 5px 12px 20px; border: 1px solid #FF7E39; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .lock-screen-input .lock-btn { position: absolute; right: 5px; top: 5px; border: none; height: 42px; width: 70px; text-align: center; color: #ffffff; cursor: pointer; background-color: #FF7E39; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFB280), to(#FF7E39)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #FFB280, #FF7E39); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #FFB280, #FF7E39); /* FF3.6 */ background-image: -ms-linear-gradient(right, #FFB280, #FF7E39); /* IE10 */ background-image: -o-linear-gradient(right, #FFB280, #FF7E39); /* Opera 11.10+ */ background-image: linear-gradient(right, #FFB280, #FF7E39); -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .lock-screen-input .lock-btn i { font-size: 21px; vertical-align: middle; line-height: 42px; } /*************** 13 D. Error screen ***************/ .error-screen { max-width: 600px; margin: 100px auto 50px auto; text-align: center; } .error-screen img { max-width: 480px; max-height: 480px; margin-bottom: 1rem; } .error-screen h5 { margin-bottom: 2rem; } .error-screen h6 { margin-bottom: 1rem; font-weight: 600; line-height: 150%; } .error-screen .btn i { font-size: 1.2rem; margin-top: 3px; float: right !important; margin-left: 3px; } /************************************************ ************************************************ 14. Loading ************************************************ ************************************************/ #loading-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 5000; background: #e6ecf3; } #loading-wrapper #loader { position: absolute; top: 50%; left: 50%; margin-left: -30px; margin-top: -30px; width: 60px; height: 60px; } #loading-wrapper #loader:before { content: ''; box-sizing: border-box; position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin-left: -24px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; border: 2px solid #d0d6e9; border-top-color: #118cf1; -moz-animation: spinner .6s linear infinite; -webkit-animation: spinner .6s linear infinite; animation: spinner .6s linear infinite; } @-moz-keyframes spinner { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @-webkit-keyframes spinner { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spinner { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /************************************************ ************************************************ 15. Sections ************************************************ ************************************************/ .section-container { background-color: #ffffff; padding: 1.5rem; -webkit-border-radius: 0.3rem; -moz-border-radius: 0.3rem; border-radius: 0.3rem; margin-bottom: .8rem; } .section-container h6.section-title { text-transform: uppercase; margin: 0 0 30px 0; font-weight: 600; } .section-container p.section-desc { color: #8796af; margin-bottom: 30px; line-height: 200%; } .section-container p.section-title { color: #8796af; font-weight: 600; margin-bottom: 20px; } .section-container p.section-title i { font-size: 2rem; margin-right: 10px; color: #118cf1; vertical-align: middle; } .section-container ul.section-list { margin: 0 0 20px 40px; } .section-container ul.section-list li { padding-left: 10px; list-style-type: disc; margin-bottom: 15px; line-height: 200%; } .section-container .section-wrapper { border: 1px solid #e1e5f1; background-color: #f7f9fb; padding: 30px; text-align: center; } .section-container .section-wrapper.left { text-align: left; } .section-container .section-wrapper.white { background: #ffffff; } /************************************************ ************************************************ 16. Inline Bagdes ************************************************ ************************************************/ .badges-inline .badge { margin-right: 5px; float: left; } /************************************************ ************************************************ 17. Secure Account ************************************************ ************************************************/ .acc-secure { max-width: 280px; margin: 100px auto 50px auto; text-align: center; } .acc-secure img { max-width: 250px; max-height: 250px; margin-bottom: 1rem; } .acc-secure .btn i { font-size: 1.2rem; margin-top: 3px; float: right !important; margin-left: 3px; } /************************************************ ************************************************ 18. Bootstrap Overwrite CSS ************************************************ ************************************************/ /*************** 18 A. Modals ***************/ .modal-content { border: 1px solid #e1e5f1; } .modal-header { padding: 10px 15px; border-bottom: 1px solid #e1e5f1; } .modal-title { font-size: 1rem; } .modal-danger .modal-content { border: 0; background: #f75851; } .modal-danger .modal-header { background: #f75851; border: 0; } .modal-danger .modal-header .modal-title { color: #ffffff; } .modal-danger .modal-body { background: #f86f69; } .modal-danger .modal-footer { border: 0; } .modal-danger .form-control { border: 0; } .modal-danger .form-control:focus { border: 0; } /*************** 18 B. Carousel ***************/ .carousel-item { max-height: 450px; } /*************** 18 C. Buttons ***************/ button { outline: none; } .btn { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 0; padding: .375rem 1rem; } .btn .icon { font-size: 1.4rem; vertical-align: middle; margin-top: -4px; display: inline-block; } .btn.focus, .btn:focus { color: #ffffff; } .btn-sm { padding: .25rem .75rem; } .btn-sm .icon { font-size: 1rem; vertical-align: middle; margin-top: -2px; display: inline-block; } .btn-rounded { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .btn-primary { background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#1ad0fc), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #1ad0fc, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #1ad0fc, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #1ad0fc, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #1ad0fc, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #1ad0fc, #118cf1); color: #ffffff; } .btn-primary:hover { opacity: 0.8; color: #ffffff; } .btn-primary:focus { box-shadow: 0 0 0 3px #baddfb; } .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show > .btn-primary.dropdown-toggle { background: #118cf1; } .btn-secondary { background-color: #6053da; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#c246f8), to(#6053da)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #c246f8, #6053da); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #c246f8, #6053da); /* FF3.6 */ background-image: -ms-linear-gradient(right, #c246f8, #6053da); /* IE10 */ background-image: -o-linear-gradient(right, #c246f8, #6053da); /* Opera 11.10+ */ background-image: linear-gradient(right, #c246f8, #6053da); color: #ffffff; } .btn-secondary:hover { opacity: 0.8; color: #ffffff; } .btn-secondary:focus { box-shadow: 0 0 0 3px #da90fb; } .btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle { background: #6053da; } .btn-success { background-color: #50b924; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b936), to(#50b924)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #a5b936, #50b924); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #a5b936, #50b924); /* FF3.6 */ background-image: -ms-linear-gradient(right, #a5b936, #50b924); /* IE10 */ background-image: -o-linear-gradient(right, #a5b936, #50b924); /* Opera 11.10+ */ background-image: linear-gradient(right, #a5b936, #50b924); } .btn-success:hover { opacity: 0.8; } .btn-success:focus { box-shadow: 0 0 0 3px #b2eb9a; } .btn-success:not(:disabled):not(.disabled).active, .btn-success:not(:disabled):not(.disabled):active, .show > .btn-success.dropdown-toggle { background: #50b924; } .btn-danger { background-color: #ff0000; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff7f34), to(#ff0000)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff7f34, #ff0000); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff7f34, #ff0000); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff7f34, #ff0000); /* IE10 */ background-image: -o-linear-gradient(right, #ff7f34, #ff0000); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff7f34, #ff0000); } .btn-danger:hover { opacity: 0.8; } .btn-danger:focus { box-shadow: 0 0 0 3px #ff7070; } .btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show > .btn-danger.dropdown-toggle { background: #ff0000; } .btn-warning { background-color: #ffda3e; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9f3d), to(#ffda3e)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff9f3d, #ffda3e); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff9f3d, #ffda3e); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff9f3d, #ffda3e); /* IE10 */ background-image: -o-linear-gradient(right, #ff9f3d, #ffda3e); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff9f3d, #ffda3e); color: #000000; } .btn-warning:hover { opacity: 0.8; color: #000000; } .btn-warning:focus { box-shadow: 0 0 0 3px #fff7d7; color: #000000; } .btn-warning:not(:disabled):not(.disabled).active, .btn-warning:not(:disabled):not(.disabled):active, .show > .btn-warning.dropdown-toggle { background: #ffda3e; } .btn-info { background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#62BCF6), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #62BCF6, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #62BCF6, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #62BCF6, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #62BCF6, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #62BCF6, #118cf1); } .btn-info:hover { opacity: 0.8; } .btn-info:focus { box-shadow: 0 0 0 3px #baddfb; } .btn-info:not(:disabled):not(.disabled).active, .btn-info:not(:disabled):not(.disabled):active, .show > .btn-info.dropdown-toggle { background: #118cf1; } .btn-white { background: #ffffff; color: #000000; border: 1px solid #e1e5f1; } .btn-white:hover { color: #1a1a1a; background: #f7f7f7; } .btn-white:focus { box-shadow: 0 0 0 3px #f2f2f2; color: #1a1a1a; } .btn-lighter:not(:disabled):not(.disabled).active, .btn-lighter:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle { background: #ffffff; } .btn-light { background-color: #b8c7d8; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#d9e1ea), to(#b8c7d8)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #d9e1ea, #b8c7d8); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #d9e1ea, #b8c7d8); /* FF3.6 */ background-image: -ms-linear-gradient(right, #d9e1ea, #b8c7d8); /* IE10 */ background-image: -o-linear-gradient(right, #d9e1ea, #b8c7d8); /* Opera 11.10+ */ background-image: linear-gradient(right, #d9e1ea, #b8c7d8); } .btn-light:hover { opacity: 0.8; } .btn-light:focus { box-shadow: 0 0 0 3px #d9e1ea; } .btn-light:not(:disabled):not(.disabled).active, .btn-light:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle { background: #b8c7d8; } .btn-dark { background-color: #3b516d; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#17202b), to(#3b516d)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #17202b, #3b516d); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #17202b, #3b516d); /* FF3.6 */ background-image: -ms-linear-gradient(right, #17202b, #3b516d); /* IE10 */ background-image: -o-linear-gradient(right, #17202b, #3b516d); /* Opera 11.10+ */ background-image: linear-gradient(right, #17202b, #3b516d); } .btn-dark:hover { opacity: 0.8; } .btn-dark:focus { box-shadow: 0 0 0 3px #29394c; } .btn-dark:not(:disabled):not(.disabled).active, .btn-dark:not(:disabled):not(.disabled):active, .show > .btn-dark.dropdown-toggle { background: #4c6a8f; } .btn-lighter { background: #e6ecf3; color: #000000; border: 1px solid #e1e5f1; } .btn-lighter:hover { opacity: 0.8; color: #1a1a1a; background: #f0f4f8; } .btn-lighter:focus { box-shadow: 0 0 0 3px #d9e1ea; color: #1a1a1a; } .btn-lighter:not(:disabled):not(.disabled).active, .btn-lighter:not(:disabled):not(.disabled):active, .show > .btn-light.dropdown-toggle { background: #e6ecf3; } .btn-fb { background-color: #5f7ec1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#3B5998), to(#5f7ec1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #3B5998, #5f7ec1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #3B5998, #5f7ec1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #3B5998, #5f7ec1); /* IE10 */ background-image: -o-linear-gradient(right, #3B5998, #5f7ec1); /* Opera 11.10+ */ background-image: linear-gradient(right, #3B5998, #5f7ec1); color: #ffffff; } .btn-fb:hover { opacity: 0.8; color: #ffffff; } .btn-fb:focus { box-shadow: 0 0 0 3px #4c70ba; } .btn-fb:not(:disabled):not(.disabled).active, .btn-fb:not(:disabled):not(.disabled):active, .show > .btn-fb.dropdown-toggle { background: #3B5998; } .btn-tw { background-color: #1689e0; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#55ACEE), to(#1689e0)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #55ACEE, #1689e0); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #55ACEE, #1689e0); /* FF3.6 */ background-image: -ms-linear-gradient(right, #55ACEE, #1689e0); /* IE10 */ background-image: -o-linear-gradient(right, #55ACEE, #1689e0); /* Opera 11.10+ */ background-image: linear-gradient(right, #55ACEE, #1689e0); color: #ffffff; } .btn-tw:hover { opacity: 0.8; color: #ffffff; } .btn-tw:focus { box-shadow: 0 0 0 3px #2795e9; } .btn-tw:not(:disabled):not(.disabled).active, .btn-tw:not(:disabled):not(.disabled):active, .show > .btn-tw.dropdown-toggle { background: #55ACEE; } .btn-orange { background-color: #FF7E39; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFB280), to(#FF7E39)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #FFB280, #FF7E39); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #FFB280, #FF7E39); /* FF3.6 */ background-image: -ms-linear-gradient(right, #FFB280, #FF7E39); /* IE10 */ background-image: -o-linear-gradient(right, #FFB280, #FF7E39); /* Opera 11.10+ */ background-image: linear-gradient(right, #FFB280, #FF7E39); color: #ffffff; } .btn-orange:hover { opacity: 0.8; color: #ffffff; } .btn-orange:focus { box-shadow: 0 0 0 3px #ffe2d2; color: #ffffff; } .btn-orange:not(:disabled):not(.disabled).active, .btn-orange:not(:disabled):not(.disabled):active, .show > .btn-orange.dropdown-toggle { background: #FF7E39; } .btn-link { color: #118cf1; } .btn-link:hover { text-decoration: none; } /*************** 18 D. Outline Buttons ***************/ .btn-outline-primary { border: 1px solid #118cf1; } .btn-outline-primary:hover { background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#1ad0fc), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #1ad0fc, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #1ad0fc, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #1ad0fc, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #1ad0fc, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #1ad0fc, #118cf1); } .btn-outline-secondary { border: 1px solid #6053da; } .btn-outline-secondary:hover { background-color: #6053da; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#c246f8), to(#6053da)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #c246f8, #6053da); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #c246f8, #6053da); /* FF3.6 */ background-image: -ms-linear-gradient(right, #c246f8, #6053da); /* IE10 */ background-image: -o-linear-gradient(right, #c246f8, #6053da); /* Opera 11.10+ */ background-image: linear-gradient(right, #c246f8, #6053da); } .btn-outline-success { border: 1px solid #50b924; } .btn-outline-success:hover { background-color: #50b924; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b936), to(#50b924)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #a5b936, #50b924); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #a5b936, #50b924); /* FF3.6 */ background-image: -ms-linear-gradient(right, #a5b936, #50b924); /* IE10 */ background-image: -o-linear-gradient(right, #a5b936, #50b924); /* Opera 11.10+ */ background-image: linear-gradient(right, #a5b936, #50b924); } .btn-outline-danger { border: 1px solid #ff0000; } .btn-outline-danger:hover { background-color: #ff0000; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff7f34), to(#ff0000)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff7f34, #ff0000); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff7f34, #ff0000); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff7f34, #ff0000); /* IE10 */ background-image: -o-linear-gradient(right, #ff7f34, #ff0000); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff7f34, #ff0000); } .btn-outline-warning { border: 1px solid #ffda3e; } .btn-outline-warning:hover { background-color: #ffda3e; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9f3d), to(#ffda3e)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff9f3d, #ffda3e); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff9f3d, #ffda3e); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff9f3d, #ffda3e); /* IE10 */ background-image: -o-linear-gradient(right, #ff9f3d, #ffda3e); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff9f3d, #ffda3e); } .btn-outline-info { border: 1px solid #118cf1; color: #118cf1; } .btn-outline-info:hover { background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#62BCF6), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #62BCF6, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #62BCF6, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #62BCF6, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #62BCF6, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #62BCF6, #118cf1); } .btn-outline-light { border: 1px solid #b8c7d8; color: #8796af; } .btn-outline-light:hover { background-color: #b8c7d8; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#d9e1ea), to(#b8c7d8)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #d9e1ea, #b8c7d8); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #d9e1ea, #b8c7d8); /* FF3.6 */ background-image: -ms-linear-gradient(right, #d9e1ea, #b8c7d8); /* IE10 */ background-image: -o-linear-gradient(right, #d9e1ea, #b8c7d8); /* Opera 11.10+ */ background-image: linear-gradient(right, #d9e1ea, #b8c7d8); border: 1px solid #a1b5cb; } .btn-outline-dark { border: 1px solid #17202b; } .btn-outline-dark:hover { background-color: #0e141a; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#17202b), to(#0e141a)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #17202b, #0e141a); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #17202b, #0e141a); /* FF3.6 */ background-image: -ms-linear-gradient(right, #17202b, #0e141a); /* IE10 */ background-image: -o-linear-gradient(right, #17202b, #0e141a); /* Opera 11.10+ */ background-image: linear-gradient(right, #17202b, #0e141a); } .btn-outline-orange { border: 1px solid #FF7E39; color: #FF7E39; } .btn-outline-orange:hover { background-color: #ff6d20; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FF7E39), to(#ff6d20)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #FF7E39, #ff6d20); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #FF7E39, #ff6d20); /* FF3.6 */ background-image: -ms-linear-gradient(right, #FF7E39, #ff6d20); /* IE10 */ background-image: -o-linear-gradient(right, #FF7E39, #ff6d20); /* Opera 11.10+ */ background-image: linear-gradient(right, #FF7E39, #ff6d20); color: #ffffff; } .btn-bdr-white { border: 2px solid #ffffff; background: transparent; color: #ffffff; padding: .5rem 1.5rem; } .btn-bdr-white:hover { opacity: 0.8; color: #ffffff; } .btn-bdr-white:focus { box-shadow: 0 0 0 3px white; } .btn.disabled, .btn:disabled { pointer-events: none; } /*************** 18 E. Dropdown Menu ***************/ .dropdown-menu { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 0; min-width: 12rem; -webkit-box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.06); -moz-box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.06); box-shadow: 0px 5px 10px 5px rgba(0, 0, 0, 0.06); } .dropdown-menu.lg { min-width: 14rem; } .dropdown-menu:before { content: ""; position: absolute; top: -8px; left: 10px; width: 40px; height: 10px; background: url(../img/dropdown-before.png); background-size: 100%; } .dropdown-menu .dropdown-item { font-size: 13px; padding: .25rem 1rem; } .dropdown-menu .dropdown-item:hover { background: #e6ecf3; } .dropdown-menu.dropdown-menu-right:before { content: ""; position: absolute; top: -8px; right: 10px; left: auto; width: 40px; height: 10px; background: url(../img/dropdown-before.png); background-size: 100%; } .dropup .dropdown-menu:before { content: ""; position: absolute; bottom: -8px; left: 5px; top: auto; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-top: 8px solid #ffffff; border-bottom: inherit; } /*************** 18 F. Media ***************/ .media.comments { margin-top: 0; } .media.comments .media-left a { display: block; } .media.comments a .empty-avatar { height: 64px; width: 64px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; color: #ffffff; text-align: center; display: block; line-height: 60px; } .media.comments a .empty-avatar.sm { width: 48px; height: 48px; line-height: 48px; } .media.comments .media-body h5.media-heading { font-size: 1rem; } .media.comments .media-body h5.media-heading span.date { color: #8796af; font-size: .75rem; padding-left: 5px; } .media.comments .media-body p { padding: 0 0 0 15px; margin: 15px 0; line-height: 170%; border-left: 3px solid #e1e5f1; } .media.comments .comments-footer { margin: 25px 0 50px 20px; } .media.comments .comments-footer ul li { float: left; margin-right: 10px; } .media.comments .comments-form .form-group { margin-bottom: 10px; } .media.disabled { opacity: 0.3; cursor: no-drop; } @media (max-width: 767px) { .media.comments { overflow: auto; } } /*************** 18 G. Cards ***************/ .card { border: 0; -webkit-border-radius: 0.3rem; -moz-border-radius: 0.3rem; border-radius: 0.3rem; margin-bottom: .8rem; box-shadow: none; background: #ffffff; } .card .card-header:first-child { -webkit-border-radius: 0.3rem 0.3rem 0 0; -moz-border-radius: 0.3rem 0.3rem 0 0; border-radius: 0.3rem 0.3rem 0 0; } .card.custom-bdr { border: 0; -webkit-border-radius: 0.3rem; -moz-border-radius: 0.3rem; border-radius: 0.3rem; } .card.custom-bdr .card-header { box-shadow: none; border-bottom: 1px solid #e1e5f1; } .card.bdr { border: 1px solid #e1e5f1; -webkit-border-radius: 0.3rem; -moz-border-radius: 0.3rem; border-radius: 0.3rem; } .card.bdr .card-header { box-shadow: none; } .card.bdr .collapse.show { border-top: 1px solid #e1e5f1; } .card.bdr-primary { border: 1px solid #118cf1; -webkit-border-radius: 0.3rem; -moz-border-radius: 0.3rem; border-radius: 0.3rem; } .card.bdr-primary .card-header { box-shadow: none; } .card.bdr-primary .collapse.show { border-top: 1px solid #118cf1; } .card.top-blue-bdr { border-top: 2px solid #118cf1; } .card.top-grey-bdr { border-top: 2px solid #333333; } .card.top-red-bdr { border-top: 2px solid #ff0000; } .card.top-green-bdr { border-top: 2px solid #50b924; } .card.top-pink-bdr { border-top: 2px solid #f15f79; } .card.top-orange-bdr { border-top: 2px solid #FF7E39; } .card .card-body { padding: 1rem; position: relative; } .card .card-header { background: #ffffff; border-bottom: 0; font-size: 1rem; padding: .8rem 1rem; position: relative; font-weight: 600; color: #000000; -webkit-box-shadow: 0 5px 5px -5px #c4d2e2; -moz-box-shadow: 0 5px 5px -5px #c4d2e2; box-shadow: 0 5px 5px -5px #c4d2e2; } .card .card-header h5 { font-size: 1rem; } .card .card-header h5 a { color: #118cf1; } .card .card-header a.link { position: absolute; right: 15px; top: 15px; font-size: .75rem; color: #ffffff; } .card .card-footer { background: #ffffff; border-top: 0; font-size: 1rem; padding: .75rem 1rem; position: relative; } .card .card-footer h5 { font-size: 1rem; } .card .card-footer h5 a { color: #118cf1; } .card h6.card-title { text-align: center; margin: 1rem; } .card.primary { background: #118cf1; } .card.primary .card-header { color: #ffffff; background: #118cf1; -webkit-box-shadow: 0 5px 5px -5px #0c71c3; -moz-box-shadow: 0 5px 5px -5px #0c71c3; box-shadow: 0 5px 5px -5px #0c71c3; } .card.primary .card-footer { background: #118cf1; } .card.secondary { background: #6053da; } .card.secondary .card-header { color: #ffffff; background: #6053da; -webkit-box-shadow: 0 5px 5px -5px #3c2cce; -moz-box-shadow: 0 5px 5px -5px #3c2cce; box-shadow: 0 5px 5px -5px #3c2cce; } .card.secondary .card-footer { background: #6053da; } .card.dark { background: #17202b; } .card.dark .card-header { color: #ffffff; background: #17202b; -webkit-box-shadow: 0 5px 5px -5px #05070a; -moz-box-shadow: 0 5px 5px -5px #05070a; box-shadow: 0 5px 5px -5px #05070a; } .card.dark .card-footer { background: #17202b; } .card.light { background: #b8c7d8; } .card.light .card-header { background: #b8c7d8; -webkit-box-shadow: 0 5px 5px -5px #87a0bd; -moz-box-shadow: 0 5px 5px -5px #87a0bd; box-shadow: 0 5px 5px -5px #87a0bd; } .card.light .card-footer { background: #b8c7d8; } .card.success { background: #50b924; } .card.success .card-header { background: #50b924; color: #ffffff; -webkit-box-shadow: 0 5px 5px -5px #3e8e1c; -moz-box-shadow: 0 5px 5px -5px #3e8e1c; box-shadow: 0 5px 5px -5px #3e8e1c; } .card.success .card-footer { background: #50b924; } .card.info { background: #118cf1; } .card.info .card-header { background: #118cf1; color: #ffffff; -webkit-box-shadow: 0 5px 5px -5px #0c71c3; -moz-box-shadow: 0 5px 5px -5px #0c71c3; box-shadow: 0 5px 5px -5px #0c71c3; } .card.info .card-footer { background: #118cf1; } .card.warning { background: #ffda3e; } .card.warning .card-header { background: #ffda3e; color: #000000; -webkit-box-shadow: 0 5px 5px -5px #d7ae00; -moz-box-shadow: 0 5px 5px -5px #d7ae00; box-shadow: 0 5px 5px -5px #d7ae00; } .card.warning .card-footer { background: #ffda3e; } .card.danger { background: #ff4f4f; } .card.danger .card-header { background: #ff4f4f; color: #ffffff; -webkit-box-shadow: 0 5px 5px -5px #ff1c1c; -moz-box-shadow: 0 5px 5px -5px #ff1c1c; box-shadow: 0 5px 5px -5px #ff1c1c; } .card.danger .card-footer { background: #ff0000; } .card.orange { background: #FF7E39; } .card.orange .card-header { background: #FF7E39; color: #ffffff; -webkit-box-shadow: 0 5px 5px -5px #d24900; -moz-box-shadow: 0 5px 5px -5px #d24900; box-shadow: 0 5px 5px -5px #d24900; } .card.orange .card-footer { background: #FF7E39; } .card.pink { background: #f15f79; } .card.pink .card-header { background: #f15f79; color: #ffffff; -webkit-box-shadow: 0 5px 5px -5px #ed3052; -moz-box-shadow: 0 5px 5px -5px #ed3052; box-shadow: 0 5px 5px -5px #ed3052; } .card.pink .card-footer { background: #f15f79; } .card.grey { background: #000000; } .card.grey .card-header { background: #000000; color: #ffffff; -webkit-box-shadow: 0 5px 5px -5px #1a1a1a; -moz-box-shadow: 0 5px 5px -5px #1a1a1a; box-shadow: 0 5px 5px -5px #1a1a1a; } .card.grey .card-footer { background: #000000; } .card.teal { background: #1abaca; } .card.teal .card-header { background: #1abaca; color: #ffffff; -webkit-box-shadow: 0 5px 5px -5px #14909d; -moz-box-shadow: 0 5px 5px -5px #14909d; box-shadow: 0 5px 5px -5px #14909d; } .card.teal .card-footer { background: #1abaca; } .card.brown { background: #79574b; } .card.brown .card-header { background: #79574b; color: #ffffff; -webkit-box-shadow: 0 5px 5px -5px #5a4037; -moz-box-shadow: 0 5px 5px -5px #5a4037; box-shadow: 0 5px 5px -5px #5a4037; } .card.brown .card-footer { background: #79574b; } .card.purple { background: #5a66b5; } .card.purple .card-header { background: #5a66b5; color: #ffffff; -webkit-box-shadow: 0 5px 5px -5px #444f98; -moz-box-shadow: 0 5px 5px -5px #444f98; box-shadow: 0 5px 5px -5px #444f98; } .card.purple .card-footer { background: #5a66b5; } .card.violet { background: #712c69; } .card.violet .card-header { background: #712c69; color: #ffffff; -webkit-box-shadow: 0 5px 5px -5px #4c1e47; -moz-box-shadow: 0 5px 5px -5px #4c1e47; box-shadow: 0 5px 5px -5px #4c1e47; } .card.violet .card-footer { background: #712c69; } .card.facebook { background: #3B5998; } .card.facebook .card-header { color: #ffffff; background: #3B5998; -webkit-box-shadow: 0 5px 5px -5px #2d4373; -moz-box-shadow: 0 5px 5px -5px #2d4373; box-shadow: 0 5px 5px -5px #2d4373; } .card.facebook .card-footer { background: #3B5998; } .card-deck { margin-right: -7px; margin-left: -7px; } .card-deck .card { margin: 0 7px; margin-bottom: .8rem; } .card-message { background-color: #ffffff; padding: 12px 20px; border-bottom: 1px solid #e1e5f1; } .card-message i { font-size: 2rem; margin-right: 10px; float: left; } /*************** 18 H. Card Header Tabs ***************/ .card-header-tabs { margin-right: 0; margin-left: 0; } /*************** 18 I. Accordion Card ***************/ .card-accordion .card { margin-bottom: .3rem; } .accordion-icons a { position: relative; padding-left: 30px; } .accordion-icons a:before { position: absolute; left: 0; content: "\ea8a"; font-family: 'icomoon'; font-size: 18px; } .accordion-icons a.collapsed:before { content: "\ea7f"; } /*************** 18 J. Tooltips ***************/ .tooltip { font-size: 0.75rem; } .tooltip-inner { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } /*************** 18 K. Badges ***************/ .badge { padding: 0.4em 1em 0.4em 1em; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; font-weight: 400; } .badge-pill { padding: 0.4em 1em 0.4em 1em; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .badge-primary { background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#1ad0fc), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #1ad0fc, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #1ad0fc, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #1ad0fc, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #1ad0fc, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #1ad0fc, #118cf1); } .badge-primary[href]:focus, .badge-primary[href]:hover { background: #0d7edc; } .badge-secondary { background-color: #FF7E39; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFB280), to(#FF7E39)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #FFB280, #FF7E39); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #FFB280, #FF7E39); /* FF3.6 */ background-image: -ms-linear-gradient(right, #FFB280, #FF7E39); /* IE10 */ background-image: -o-linear-gradient(right, #FFB280, #FF7E39); /* Opera 11.10+ */ background-image: linear-gradient(right, #FFB280, #FF7E39); } .badge-secondary[href]:focus, .badge-secondary[href]:hover { background: #4d3ed5; } .badge-success { background-color: #50b924; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b936), to(#50b924)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #a5b936, #50b924); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #a5b936, #50b924); /* FF3.6 */ background-image: -ms-linear-gradient(right, #a5b936, #50b924); /* IE10 */ background-image: -o-linear-gradient(right, #a5b936, #50b924); /* Opera 11.10+ */ background-image: linear-gradient(right, #a5b936, #50b924); } .badge-success[href]:focus, .badge-success[href]:hover { background: #47a420; } .badge-danger { background-color: #ff0000; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff7f34), to(#ff0000)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff7f34, #ff0000); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff7f34, #ff0000); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff7f34, #ff0000); /* IE10 */ background-image: -o-linear-gradient(right, #ff7f34, #ff0000); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff7f34, #ff0000); } .badge-danger[href]:focus, .badge-danger[href]:hover { background: #e60000; } .badge-warning { background-color: #ffda3e; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9f3d), to(#ffda3e)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff9f3d, #ffda3e); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff9f3d, #ffda3e); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff9f3d, #ffda3e); /* IE10 */ background-image: -o-linear-gradient(right, #ff9f3d, #ffda3e); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff9f3d, #ffda3e); } .badge-warning[href]:focus, .badge-warning[href]:hover { background: #ffd524; } .badge-info { background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#62BCF6), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #62BCF6, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #62BCF6, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #62BCF6, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #62BCF6, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #62BCF6, #118cf1); } .badge-info[href]:focus, .badge-info[href]:hover { background: #0d7edc; } .badge-light { background-color: #cfd9e5; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#b8c7d8), to(#cfd9e5)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #b8c7d8, #cfd9e5); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #b8c7d8, #cfd9e5); /* FF3.6 */ background-image: -ms-linear-gradient(right, #b8c7d8, #cfd9e5); /* IE10 */ background-image: -o-linear-gradient(right, #b8c7d8, #cfd9e5); /* Opera 11.10+ */ background-image: linear-gradient(right, #b8c7d8, #cfd9e5); color: #000000; } .badge-light[href]:focus, .badge-light[href]:hover { background: #a8bacf; } .badge-dark { background-color: #000000; color: #ffffff; } .badge-dark[href]:focus, .badge-dark[href]:hover { background: #4d4d4d; } .badge-white { background-color: #ffffff; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#ffffff)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ffffff, #ffffff); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ffffff, #ffffff); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ffffff, #ffffff); /* IE10 */ background-image: -o-linear-gradient(right, #ffffff, #ffffff); /* Opera 11.10+ */ background-image: linear-gradient(right, #ffffff, #ffffff); color: #000000; } .badge-white[href]:focus, .badge-white[href]:hover { background: #cfd9e5; } .badge-orange { background-color: #FF7E39; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#FFB280), to(#FF7E39)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #FFB280, #FF7E39); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #FFB280, #FF7E39); /* FF3.6 */ background-image: -ms-linear-gradient(right, #FFB280, #FF7E39); /* IE10 */ background-image: -o-linear-gradient(right, #FFB280, #FF7E39); /* Opera 11.10+ */ background-image: linear-gradient(right, #FFB280, #FF7E39); color: #ffffff; } .badge-orange[href]:focus, .badge-orange[href]:hover { background: #FF7E39; } .badge-bdr, .badge-bdr-pill { background: transparent; } .badge-bdr.badge-bdr-pill, .badge-bdr-pill.badge-bdr-pill { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .badge-bdr.badge-primary, .badge-bdr-pill.badge-primary { color: #118cf1; border: 1px solid #118cf1; } .badge-bdr.badge-secondary, .badge-bdr-pill.badge-secondary { color: #6053da; border: 1px solid #6053da; } .badge-bdr.badge-danger, .badge-bdr-pill.badge-danger { color: #ff0000; border: 1px solid #ff0000; } .badge-bdr.badge-success, .badge-bdr-pill.badge-success { color: #50b924; border: 1px solid #50b924; } .badge-bdr.badge-warning, .badge-bdr-pill.badge-warning { color: #ffda3e; border: 1px solid #ffda3e; } .badge-bdr.badge-info, .badge-bdr-pill.badge-info { color: #118cf1; border: 1px solid #118cf1; } .badge-bdr.badge-dark, .badge-bdr-pill.badge-dark { color: #c246f8; border: 1px solid #c246f8; } .badge-bdr.badge-light, .badge-bdr-pill.badge-light { color: #1ad0fc; border: 1px solid #1ad0fc; } .badge-bdr.badge-white, .badge-bdr-pill.badge-white { color: #ffffff; border: 1px solid #ededed; } .badge-bdr.badge-orange, .badge-bdr-pill.badge-orange { color: #FF7E39; border: 1px solid #FF7E39; } /*************** 18 L. Alerts ***************/ .alert { padding: .75rem 1rem; position: relative; -webkit-border-radius: 0.3rem; -moz-border-radius: 0.3rem; border-radius: 0.3rem; margin-bottom: 1rem; box-shadow: none; line-height: 160%; } .alert i { font-size: 24px; margin-right: 10px; vertical-align: middle; } .alert hr { border-top-color: rgba(255, 255, 255, 0.2); } .alert-dismissible .close { padding: .5rem 1rem; top: -.70rem; } .close { text-shadow: none; } .alert-primary { background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#1ad0fc), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #1ad0fc, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #1ad0fc, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #1ad0fc, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #1ad0fc, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #1ad0fc, #118cf1); border-color: #118cf1; color: #ffffff; } .alert-primary .alert-link { color: #ffffff; text-decoration: underline; } .alert-primary i { color: #ffffff; } .alert-secondary { background-color: #6053da; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#c246f8), to(#6053da)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #c246f8, #6053da); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #c246f8, #6053da); /* FF3.6 */ background-image: -ms-linear-gradient(right, #c246f8, #6053da); /* IE10 */ background-image: -o-linear-gradient(right, #c246f8, #6053da); /* Opera 11.10+ */ background-image: linear-gradient(right, #c246f8, #6053da); border-color: #6053da; color: #ffffff; } .alert-secondary .alert-link { color: #ffffff; text-decoration: underline; } .alert-secondary i { color: #ffffff; } .alert-success { background-color: #50b924; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#a5b936), to(#50b924)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #a5b936, #50b924); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #a5b936, #50b924); /* FF3.6 */ background-image: -ms-linear-gradient(right, #a5b936, #50b924); /* IE10 */ background-image: -o-linear-gradient(right, #a5b936, #50b924); /* Opera 11.10+ */ background-image: linear-gradient(right, #a5b936, #50b924); border-color: #50b924; color: #ffffff; } .alert-success .alert-link { color: #ffffff; text-decoration: underline; } .alert-success i { color: #ffffff; } .alert-danger { background-color: #ff0000; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff7f34), to(#ff0000)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff7f34, #ff0000); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff7f34, #ff0000); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff7f34, #ff0000); /* IE10 */ background-image: -o-linear-gradient(right, #ff7f34, #ff0000); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff7f34, #ff0000); border-color: #ff0000; color: #ffffff; } .alert-danger .alert-link { color: #ffffff; text-decoration: underline; } .alert-danger i { color: #ffffff; } .alert-warning { background-color: #ffda3e; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#ff9f3d), to(#ffda3e)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #ff9f3d, #ffda3e); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #ff9f3d, #ffda3e); /* FF3.6 */ background-image: -ms-linear-gradient(right, #ff9f3d, #ffda3e); /* IE10 */ background-image: -o-linear-gradient(right, #ff9f3d, #ffda3e); /* Opera 11.10+ */ background-image: linear-gradient(right, #ff9f3d, #ffda3e); border-color: #ffa63e; color: #ffffff; } .alert-warning .alert-link { color: #ffffff; text-decoration: underline; } .alert-warning i { color: #ffffff; } .alert-info { background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#62BCF6), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #62BCF6, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #62BCF6, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #62BCF6, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #62BCF6, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #62BCF6, #118cf1); border-color: #118cf1; color: #ffffff; } .alert-info .alert-link { color: #ffffff; text-decoration: underline; } .alert-info i { color: #ffffff; } .alert-light { background-color: #e6e6e6; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#f7f7f7), to(#e6e6e6)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #f7f7f7, #e6e6e6); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #f7f7f7, #e6e6e6); /* FF3.6 */ background-image: -ms-linear-gradient(right, #f7f7f7, #e6e6e6); /* IE10 */ background-image: -o-linear-gradient(right, #f7f7f7, #e6e6e6); /* Opera 11.10+ */ background-image: linear-gradient(right, #f7f7f7, #e6e6e6); border-color: #e6e6e6; color: #000000; } .alert-light .alert-link { color: #000000; text-decoration: underline; } .alert-light i { color: #000000; } .alert-dark { background-color: #4d4d4d; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#333333), to(#4d4d4d)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #333333, #4d4d4d); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #333333, #4d4d4d); /* FF3.6 */ background-image: -ms-linear-gradient(right, #333333, #4d4d4d); /* IE10 */ background-image: -o-linear-gradient(right, #333333, #4d4d4d); /* Opera 11.10+ */ background-image: linear-gradient(right, #333333, #4d4d4d); border-color: #333333; color: #ffffff; } .alert-dark .alert-link { color: #ffffff; text-decoration: underline; } .alert-dark i { color: #ffffff; } /*************** 18 M. Progress bars ***************/ .progress { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background-color: #f0f4f9; -webkit-box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1); -moz-box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.1); } .progress.no-shadow { box-shadow: none; } .progress .progress-bar-striped { background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); } .progress .progress-bar-striped.bg-info { background-color: #118cf1 !important; } .progress .progress-bar-striped.bg-success { background-color: #50b924 !important; } .progress .progress-bar-striped.bg-danger { background-color: #ff0000 !important; } .progress .progress-bar-striped.bg-warning { background-color: #ffda3e !important; } .progress .progress-bar-striped.bg-orange { background-color: #FF7E39 !important; } .progress .progress-bar-striped.bg-pink { background-color: #f15f79 !important; } .progress.xl { height: 20px; } .progress.md { height: 8px; } .progress.sm { height: 5px; } .progress.xs { height: 2px; } /*************** 18 N. Popovers ***************/ .popover { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 1px solid #17202b; background: #17202b; } .popover .popover-header { background: #202c3c; color: #ffffff; border-bottom: 1px solid #202c3c; } .popover .popover-body { color: #ffffff; } .bs-popover-auto[x-placement^=top] .arrow::after, .bs-popover-top .arrow::after { border-top-color: #17202b; } .bs-popover-auto[x-placement^=right] .arrow::after, .bs-popover-right .arrow::after { border-right-color: #17202b; } .bs-popover-auto[x-placement^=bottom] .arrow::after, .bs-popover-bottom .arrow::after { border-bottom-color: #17202b; } .bs-popover-auto[x-placement^=left] .arrow::after, .bs-popover-left .arrow::after { border-left-color: #17202b; } /*************** 18 O. Tabs & Navs ***************/ .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { border-color: #e1e5f1 #e1e5f1 #ffffff; color: #2e323c; background: #ffffff; } .nav-tabs { border: 1px solid #e1e5f1; padding: 10px 10px 0 10px; background: #ffffff; } .nav-tabs .nav-link { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .nav-link { border: none; position: relative; padding: .8rem 1.2rem; color: #118cf1; } .nav-link i { font-size: 1.3rem; float: left; margin-right: 5px; } .nav-link:hover { color: #0c79d2; } .nav-link.active { text-decoration: none; color: #FF7E39; font-weight: 700; } .nav-link.disabled { pointer-events: none; color: #8796af; } .tab-content { padding: 1rem 1.5rem; border: 1px solid #e1e5f1; border-top: 0; background: #ffffff; } .tab-content .tab-pane { line-height: 180%; } /*************** 18 P. Pills ***************/ .nav-pills .nav-link { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .nav-pills .nav-link:after { background: transparent; } .nav-pills .nav-link.active { background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#62BCF6), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #62BCF6, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #62BCF6, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #62BCF6, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #62BCF6, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #62BCF6, #118cf1); } /*************** 18 Q. Page Item ***************/ .page-item.active .page-link { background-color: #118cf1; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#62BCF6), to(#118cf1)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(right, #62BCF6, #118cf1); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(right, #62BCF6, #118cf1); /* FF3.6 */ background-image: -ms-linear-gradient(right, #62BCF6, #118cf1); /* IE10 */ background-image: -o-linear-gradient(right, #62BCF6, #118cf1); /* Opera 11.10+ */ background-image: linear-gradient(right, #62BCF6, #118cf1); border-color: #118cf1; } /*************** 18 R. Breadcrumbs ***************/ .breadcrumb { background-color: #e6ecf3; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .breadcrumb .breadcrumb-item a { color: #FF7E39; } .breadcrumb .breadcrumb-item a i { font-size: 1rem; } .breadcrumb .breadcrumb-item.active { color: #8796af; } .breadcrumb.light { background-color: #118cf1; } .breadcrumb.light .breadcrumb-item a { color: #8796af; } .breadcrumb.light .breadcrumb-item a i { font-size: 1rem; } .breadcrumb.light .breadcrumb-item.active { color: #ffffff; } /*************** 18 S. jumbotron ***************/ .jumbotron { background-color: #e6ecf3; } /*************** 18 T. List Group ***************/ .list-group-item.disabled { color: #8796af; } .list-group-item:disabled { color: #8796af; } .list-group-item.active { background-color: #118cf1; border-color: #118cf1; } .list-group-item-primary { background: #118cf1; color: #ffffff; } .list-group-item-primary.list-group-item-action:focus, .list-group-item-primary.list-group-item-action:hover { background: #0d84e5; color: #ffffff; } .list-group-item-secondary { background: #6053da; color: #ffffff; } .list-group-item-secondary.list-group-item-action:focus, .list-group-item-secondary.list-group-item-action:hover { background: #5446d7; color: #ffffff; } .list-group-item-success { background: #50b924; color: #ffffff; } .list-group-item-success.list-group-item-action:focus, .list-group-item-success.list-group-item-action:hover { background: #4aac22; color: #ffffff; } .list-group-item-danger { background: #ff0000; color: #ffffff; } .list-group-item-danger.list-group-item-action:focus, .list-group-item-danger.list-group-item-action:hover { background: #f00000; color: #ffffff; } .list-group-item-info { background: #118cf1; color: #ffffff; } .list-group-item-info.list-group-item-action:focus, .list-group-item-info.list-group-item-action:hover { background: #0d84e5; color: #ffffff; } .list-group-item-warning { background: #ffda3e; color: #ffffff; } .list-group-item-warning.list-group-item-action:focus, .list-group-item-warning.list-group-item-action:hover { background: #ffd72f; color: #ffffff; } .list-group-item-light { background: #1ad0fc; color: #ffffff; } .list-group-item-light.list-group-item-action:focus, .list-group-item-light.list-group-item-action:hover { background: #03c9f9; color: #ffffff; } .list-group-item-dark { background: #c246f8; color: #ffffff; } .list-group-item-dark.list-group-item-action:focus, .list-group-item-dark.list-group-item-action:hover { background: #bd37f7; color: #ffffff; } a.list-group-item-primary { background: #118cf1; color: #ffffff; } a.list-group-item-primary:hover { background: #0d7edc; color: #ffffff; } a.list-group-item-secondary { background: #6053da; color: #ffffff; } a.list-group-item-secondary:hover { background: #4d3ed5; color: #ffffff; } a.list-group-item-success { background: #50b924; color: #ffffff; } a.list-group-item-success:hover { background: #47a420; color: #ffffff; } a.list-group-item-danger { background: #ff0000; color: #ffffff; } a.list-group-item-danger:hover { background: #e60000; color: #ffffff; } a.list-group-item-info { background: #118cf1; color: #ffffff; } a.list-group-item-info:hover { background: #0d7edc; color: #ffffff; } a.list-group-item-warning { background: #ffda3e; color: #ffffff; } a.list-group-item-warning:hover { background: #ffd524; color: #ffffff; } a.list-group-item-light { background: #1ad0fc; color: #ffffff; } a.list-group-item-light:hover { background: #03c9f9; color: #ffffff; } a.list-group-item-dark { background: #c246f8; color: #ffffff; } a.list-group-item-dark:hover { background: #ba2df7; color: #ffffff; } /*************** 18 U. Pagination ***************/ .page-item:first-child .page-link { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .page-item:last-child .page-link { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .pagination-lg .page-item:first-child .page-link { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .pagination-lg .page-item:last-child .page-link { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .pagination-sm .page-item:first-child .page-link { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .pagination-sm .page-item:last-child .page-link { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .page-link { color: #118cf1; border: 1px solid #e1e5f1; } .page-link:hover { background: #e6ecf3; border-color: #e1e5f1; } .card.dark ul.pagination .page-item .page-link { background: #17202b; border-color: #29394c; color: #8796af; } .card.dark ul.pagination .page-item.active .page-link { background: #FF7E39; border-color: #FF7E39; color: #ffffff; } /*************** 18 V. Blockquote ***************/ .blockquote { font-size: 1rem; line-height: 150%; margin-bottom: 2rem; } .blockquote p { margin: 0; } /*************** 18 W. Custom File Labels ***************/ .custom-file-label { border: 1px solid #c9d0e6; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .custom-file-label::after { background: #e6ecf3; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 1px solid #e6ecf3; } .custom-file-label-primary { border: 1px solid #118cf1; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .custom-file-label-primary::after { background: #118cf1; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 1px solid #118cf1; color: #ffffff; } .custom-file-label-secondary { border: 1px solid #FF7E39; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .custom-file-label-secondary::after { background: #FF7E39; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 1px solid #FF7E39; color: #ffffff; } /*************** 18 X. Form Controls ***************/ .input-group-text { border: 1px solid #c9d0e6; background: #e6ecf3; } .input-group-text.min-w-120 { width: 120px; } .form-control { border: 1px solid #c9d0e6; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .form-control.no-bdr { border: 1px solid transparent; } .form-control:focus { border: 1px solid #118cf1; } .form-control::-webkit-input-placeholder { color: #8796af; } .form-control:-moz-placeholder { color: #8796af; } .form-control::-moz-placeholder { color: #8796af; } .form-control:-ms-input-placeholder { color: #8796af; } .input-group-text { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .custom-select.is-invalid, .form-control.is-invalid, .was-validated .custom-select:invalid, .was-validated .form-control:invalid { border-color: #ff0000; } .custom-select.is-valid, .form-control.is-valid, .was-validated .custom-select:valid, .was-validated .form-control:valid { border-color: #50b924; } .custom-select.is-warning, .form-control.is-warning { border-color: #ffa63e; } .input-group-addon { border: 1px solid #e1e5f1; background: #e6ecf3; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; color: #8796af; } /*************** 18 Y. Checkbox & Radios ***************/ .form-check { padding-bottom: .5rem; font-size: 1rem; } .form-check-label { font-size: .85rem; } .form-check-input { margin-top: .25rem; } .custom-control-label::before { top: .1rem; } .custom-control-label::after { top: .1rem; } .custom-checkbox .custom-control-input:checked ~ .custom-control-label::before { background-color: #FF7E39; } .custom-radio .custom-control-input:checked ~ .custom-control-label::before { background-color: #FF7E39; } /*************** 18 Z. Navbar ***************/ .navbar .navbar-brand { font-size: 1.2rem; font-weight: 600; } .navbar .navbar-brand img { max-height: 30px; margin-right: 10px; } /*************** 19. Tables ***************/ .table { font-size: .85rem; color: #737373; } .table-dark { color: #a6a6a6; } .table.no-border { border: 0; } .table-bordered { border: 1px solid #e6ecf3; } .table-bordered td, .table-bordered th { border: 1px solid #e6ecf3; } .table-hover tbody tr:hover { background-color: #f0f4f8; } .table thead th { border-top: 0; border-bottom: 0; } .table td { vertical-align: middle; border-top: 1px solid #e6ecf3; } .table.table-dark thead th { border-color: #404040; } .table.table-dark td { border-color: #333333; } .table .thead-light th { border-color: #f0f4f8; background: #f0f4f8; } .table-success, .table-success > td, .table-success > th { background: #d9f5cd; border-color: #a8e98d; color: #19390b; } .table-danger, .table-danger > td, .table-danger > th { background: #ffdbdb; border-color: #ffc2c2; color: #660000; } .table-warning, .table-warning > td, .table-warning > th { background: #fff7d7; border-color: #ffe98b; color: #a48500; } .table-info, .table-info > td, .table-info > th { background: #d2e9fc; border-color: #baddfb; color: #063963; } .table-light, .table-light > td, .table-light > th { background: #b8c7d8; border-color: #a1b5cb; color: #6686ab; } .table-striped tbody tr:nth-of-type(odd) { background-color: #f7f9fb; } .table-active, .table-active > td, .table-active > th { background: #e6ecf3; } /************************************************ ************************************************ 20 Gutters ************************************************ ************************************************/ .gutters { margin-right: -7px; margin-left: -7px; } .gutters > .col, .gutters > [class*="col-"] { padding-right: 7px; padding-left: 7px; } .no-gutters { margin-right: -0px; margin-left: -0px; } .no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 0px; padding-left: 0px; } /************************************************ ************************************************ 21 Code Syntax Highlight ************************************************ ************************************************/ .hll { background-color: #ffc; } .c { color: #999; } .k { color: #069; } .o { color: #555; } .cm { color: #999; } .cp { color: #099; } .c1 { color: #999; } .cs { color: #999; } .gd { background-color: #fcc; border: 1px solid #c00; } .ge { font-style: italic; } .gr { color: #f00; } .gh { color: #030; } .gi { background-color: #cfc; border: 1px solid #0c0; } .go { color: #aaa; } .gp { color: #009; } .gu { color: #030; } .gt { color: #9c6; } .kc { color: #069; } .kd { color: #069; } .kn { color: #069; } .kp { color: #069; } .kr { color: #069; } .kt { color: #078; } .m { color: #f60; } .s { color: #d44950; } .na { color: #4f9fcf; } .nb { color: #366; } .nc { color: #0a8; } .no { color: #360; } .nd { color: #99f; } .ni { color: #999; } .ne { color: #c00; } .nf { color: #c0f; } .nl { color: #99f; } .nn { color: #0cf; } .nt { color: #2f6f9f; } .nv { color: #033; } .ow { color: #000; } .w { color: #bbb; } .mf { color: #f60; } .mh { color: #f60; } .mi { color: #f60; } .mo { color: #f60; } .sb { color: #c30; } .sc { color: #c30; } .sd { font-style: italic; color: #c30; } .s2 { color: #c30; } .se { color: #c30; } .sh { color: #c30; } .si { color: #a00; } .sx { color: #c30; } .sr { color: #3aa; } .s1 { color: #c30; } .ss { color: #fc3; } .bp { color: #366; } .vc { color: #033; } .vg { color: #033; } .vi { color: #033; } .il { color: #f60; } .css .o, .css .o + .nt, .css .nt + .nt { color: #999; } .language-bash::before, .language-sh::before { color: #009; content: "$ "; user-select: none; } .language-powershell::before { color: #009; content: "PM> "; user-select: none; } .highlight { font-size: 1rem; line-height: 150%; margin-bottom: 30px; } .highlight pre { padding: 0; margin-top: 0; margin-bottom: 0; background-color: transparent; border: 0; } .highlight pre code { font-size: inherit; color: #8796af; }