/*------------------------------------------------------------ [Table of contents] 1. Global Styles 2. CSS Utilities ------------------------------------------------------------*/ /*------------------------------------------------------------ [1. Global Styles] ------------------------------------------------------------*/ html, body { font-size: 13px; width: 100%; height: 100%; } html { overflow-x: hidden; } body { background-color: #F4F7FC; font-weight: normal; color: #384C6D; line-height: 1.6; } a, a:hover { color: #037AFB; } p { line-height: 1.6; } small { font-size: 80%; font-weight: 400; } menu { padding-left: 0px; } body, span, text, a { font-family: 'Poppins', sans-serif; } a:hover, a:active, a:focus { outline: none!important; text-decoration: none!important; } b, strong, .bold { font-weight: 600; } /* Utilities */ /* Divider */ .divider { display: block; content: ''; width: 100%; height: 1px; background: #dfe7f5; margin: 30px 0; } /* Margins & Paddings */ .no-s { margin: 0px!important; padding: 0px!important; } .no-m { margin: 0; } .no-p { padding: 0; } .m { margin: 15px; } .m-t-xxs { margin-top: 5px; } .m-r-xxs { margin-right: 5px; } .m-b-xxs { margin-bottom: 5px; } .m-l-xxs { margin-left: 5px; } .m-t-xs { margin-top: 10px; } .m-r-xs { margin-right: 10px; } .m-b-xs { margin-bottom: 10px; } .m-l-xs { margin-left: 10px; } .m-t-sm { margin-top: 15px; } .m-r-sm { margin-right: 15px; } .m-b-sm { margin-bottom: 15px; } .m-l-sm { margin-left: 15px; } .m-t-md { margin-top: 20px; } .m-r-md { margin-right: 20px; } .m-b-md { margin-bottom: 20px; } .m-l-md { margin-left: 20px; } .m-t-lg { margin-top: 25px; } .m-r-lg { margin-right: 25px; } .m-b-lg { margin-bottom: 25px; } .m-l-lg { margin-left: 25px; } .m-t-xxl { margin-top: 30px; } .m-r-xxl { margin-right: 30px; } .m-b-xxl { margin-bottom: 30px; } .m-l-xxl { margin-left: 30px; } .m-t-n-xxs { margin-top: -5px; } .m-r-n-xxs { margin-right: -5px; } .m-b-n-xxs { margin-bottom: -5px; } .m-l-n-xxs { margin-left: -5px; } .m-t-n-xs { margin-top: -10px; } .m-r-n-xs { margin-right: -10px; } .m-b-n-xs { margin-bottom: -10px; } .m-l-n-xs { margin-left: -10px; } .m-t-n-sm { margin-top: -15px; } .m-r-n-sm { margin-right: -15px; } .m-b-n-sm { margin-bottom: -15px; } .m-l-n-sm { margin-left: -15px; } .m-t-n-md { margin-top: -20px; } .m-r-n-md { margin-right: -20px; } .m-b-n-md { margin-bottom: -20px; } .m-l-n-md { margin-left: -20px; } .m-t-n-lg { margin-top: -25px; } .m-r-n-lg { margin-right: -25px; } .m-b-n-lg { margin-bottom: -25px; } .m-l-n-lg { margin-left: -25px; } .m-t-n-xxl { margin-top: -30px; } .m-r-n-xxl { margin-right: -30px; } .m-b-n-xxl { margin-bottom: -30px; } .m-l-n-xxl { margin-left: -30px; } .p { padding: 15px; } .p-h-xxs { padding-left: 5px; padding-right: 5px; } .p-h-xs { padding-left: 10px; padding-right: 10px; } .p-h-sm { padding-left: 15px; padding-right: 15px; } .no-p-h { padding-left: 0; padding-right: 0; } .no-p-v { padding-top: 0; padding-bottom: 0; } .p-h-md { padding-left: 20px; padding-right: 20px; } .p-h-lg { padding-left: 25px; padding-right: 25px; } .p-h-xxl { padding-left: 30px; padding-right: 30px; } .p-v-xxs { padding-top: 5px; padding-bottom: 5px; } .p-v-xs { padding-top: 10px; padding-bottom: 10px; } .p-v-sm { padding-top: 15px; padding-bottom: 15px; } .p-v-md { padding-top: 20px; padding-bottom: 20px; } .p-v-lg { padding-top: 25px; padding-bottom: 25px; } .p-v-xxl { padding-top: 30px; padding-bottom: 30px; } /* Width & Height */ .full-height { height: 100%!important; } .full-width { width: 100%!important; } .w-xxs { width: 50px; } .w-xs { width: 90px; } .w-sm { width: 140px; } .w { width: 200px; } .w-md { width: 240px; } .w-lg { width: 280px; } .w-xl { width: 330px; } .w-xxl { width: 370px; } .w-auto { width: auto; } .h-auto { height: auto; } /* Borders */ .no-b { border: 0!important; } .b { border: 1px solid #E6E6E6; } .b-t { border-top: 1px solid #E6E6E6; } .b-r { border-right: 1px solid #E6E6E6; } .b-b { border-bottom: 1px solid #E6E6E6; } .b-l { border-left: 1px solid #E6E6E6; } .b-default { border-color: #E6E6E6; } .b-primary { border-color: #037AFB; } .b-info { border-color: #5780F7; } .b-success { border-color: #59BB56; } .b-warning { border-color: #FACC35; } .b-danger { border-color: #EB463F; } .b-2 { border-width: 2px; } .b-3 { border-width: 3px; } .b-4 { border-width: 4px; } .b-n-t { border-top: 0; } .b-n-r { border-right: 0; } .b-n-b { border-bottom: 0; } .b-n-l { border-left: 0; } /* Radius */ .no-r { border-radius: 0!important; } .r { border-radius: 2px; } .r-t-l { border-top-left-radius: 2px; } .r-t-r { border-top-right-radius: 2px; } .r-b-l { border-bottom-left-radius: 2px; } .r-b-r { border-bottom-right-radius: 2px; } .no-r-t-l { border-top-left-radius: 0!important; } .no-r-t-r { border-top-right-radius: 0!important; } .no-r-b-l { border-bottom-left-radius: 0!important; } .no-r-b-r { border-bottom-right-radius: 0!important; } /* Backgrounds */ .bg-primary { background-color: #037AFB!important; } .bg-secondary { background-color: #E6E6E6!important; } .bg-success { background-color: #06BA54!important; } .bg-danger { background-color: #EB3F3F!important; } .bg-warning { background-color: #FFCD36!important; } .bg-info { background-color: #5780F7!important; } .bg-light { background-color: #F4F4F5!important; } .bg-dark { background-color: #37414D!important; } /* Text Colors */ .text-primary { color: #037AFB!important; } .text-secondary { color: #E6E6E6!important; } .text-success { color: #06BA54!important; } .text-danger { color: #EB3F3F!important; } .text-warning { color: #FFCD36!important; } .text-info { color: #5780F7!important; } .text-light { color: #F4F4F5!important; } .text-dark { color: #37414D!important; } /* Header */ .lime-header { padding: 30px; width: 100%; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; z-index: 9; display: block; } .header-fixed .lime-header { position: fixed; top: 0; width: 100%; } .lime-header.scroll-header { padding: 0 30px; background: #037AFB; box-shadow: 0 3px 10px rgba(62, 85, 120,.045); } .sidebar-show .lime-header { transform: translateX(300px); } .lime-header .navbar { padding: 8px 13px; } .lime-header .navbar-brand { color: #037AFB; font-size: 22px; font-weight: 700; margin-right: 25px } .lime-header.scroll-header .navbar-brand { color: #fff; } .navbar-toggler { padding: 0; line-height: 32px; font-size: 24px; border: none; color: #7D7D83; outline: 0!important; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .navbar-toggler:hover { color: #000; } .lime-header .search { width: 40%; position: absolute; left: 50%; transform: translateX(-50%); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .lime-header .search input { border: none; padding: 15px 15px 15px 50px; height: 50px; width: 100%; font-size: 13px; background: rgba(255,255,255,.95); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; opacity: 0.95; color: #838D91; border-radius: 4px; } .lime-header .search:hover input, .lime-header .search input:focus, .lime-header .search input:active { opacity: 1; outline: 0 none!important; box-shadow: 0 3px 10px rgba(62, 85, 120,.045); background: rgba(255,255,255,1); } .lime-header .search input::-webkit-input-placeholder { color: rgba(131, 141, 145,.6); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .lime-header .search:before { display: block; content: 'search'; font-family: 'Material Icons'; font-size: 20px; height: 50px; line-height: 50px; padding: 0 20px; position: absolute; z-index: 99; color: rgba(131, 141, 145,.6); } .search-results { visibility: hidden; opacity: 0; width: 100%; position: fixed; top: 126px; bottom: 0; left: 0; right: 0; z-index: 999; background: rgba(244, 247, 252,.975); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; overflow-y: auto; } .search-results .search-results-header { padding: 50px 40px; overflow: hidden; display: block; margin-bottom: 50px; } .search-results .search-results-header h4 { float: left; margin-bottom: 0; } .search-results .search-results-header a#closeSearch { float: right; vertical-align: middle; color: #384C6D; opacity: .7; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .search-results .search-results-header a#closeSearch:hover { opacity: 1; } .searching { overflow-y: hidden; } .searching .search-results { visibility: visible; opacity: 1; } .search-result-list { list-style-type: none; padding: 0 40px; } .search-result-list li { display: block; clear: both; margin-bottom: 40px; overflow: hidden; } .search-result-list.user-search li img { width: 50px; border-radius: 50px; float: left; } .search-result-list.user-search li p { display: block; float: left; padding: 5px 15px; width: calc(100% - 50px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .search-result-list span.search-input-value { font-weight: bold; } .search-result-list.article-search li p { margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid rgba(131, 141, 145,.3); } .search-result-list.article-search li span:not(.search-input-value) { opacity: .6; } .search-result-list.social-search li .social-search-icon { float: left; display: inline-block; margin: 0 10px 0 0; width: 50px; height: 50px; text-align: center; line-height: 50px; background: #000; color: #fff; border-radius: 50px; } .search-result-list.social-search li .social-search-icon.facebook-icon-bg { background: #4267B2; } .search-result-list.social-search li .social-search-icon.twitter-icon-bg { background: #1DA1F2; } .search-result-list.social-search li .social-search-icon.google-icon-bg { background: #DD5044; } .search-result-list.social-search li .social-search-text { display: inline-block; float: left; padding: 5px; } .search-result-list.social-search li .social-search-text p { line-height: 40px; } .lime-header .navbar-nav > li > a { font-size: 13px; color: #7D7D83; line-height: 30px; padding: 10px!important; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .lime-header.scroll-header .navbar-nav > li > a { color: rgba(255,255,255,.8)!important; } .lime-header .navbar-nav > li > a:hover, .lime-header .navbar-nav > li.show > a { color: #000; } .lime-header.scroll-header .navbar-nav > li > a:hover, .lime-header.scroll-header .navbar-nav > li.show > a { color: rgba(255,255,255,1)!important; } .lime-header .navbar-nav > li > a > i { font-size: 21px; vertical-align: middle; } .lime-header .navbar-nav .dropdown a.dropdown-toggle::after { display: none; } .lime-header .navbar-nav .dropdown .dropdown-menu { position: absolute; background: #fff; padding: 8px 0px; margin-top: 12px; list-style-type: none; opacity: 0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; visibility: hidden; border-radius: 4px; box-shadow: 0 3px 10px rgba(62, 85, 120,.045); z-index: 99; display: block; border: none; } .lime-header .navbar-nav .dropdown.show .dropdown-menu { opacity: 1; margin-top: 0px; visibility: visible; } .lime-header .navbar-nav .dropdown .dropdown-menu a { color: #838D91; padding: 8px 16px; display: block; margin: 0; font-size: 13px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .lime-header .navbar-nav .dropdown .dropdown-menu a:hover { background: #F4F7FC; color: #037AFB; } .lime-header .navbar-nav .dropdown .dropdown-menu li.divider { display: block; width: 100%; height: 1px; background: #F2F2F2; margin: 8px 0; } /* Sidebar Toggle */ .material-design-hamburger a { display: block; border: none; background: none; outline: 0; margin-right: 10px; } .material-design-hamburger__icon { padding: 15px; cursor: pointer; background: transparent; border: none; } .material-design-hamburger__icon:focus, .material-design-hamburger__icon:active { outline: 0; } .material-design-hamburger__layer { display: block; width: 13px; height: 2px; background: #7D7D83; position: relative; animation-duration: 200ms; animation-timing-function: ease-in-out; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .material-design-hamburger:hover .material-design-hamburger__layer { background: #000; } .lime-header.scroll-header .material-design-hamburger__layer { background: rgba(255,255,255,.8); } .lime-header.scroll-header .material-design-hamburger:hover .material-design-hamburger__layer { background: rgba(255,255,255,1); } .material-design-hamburger__layer:before, .material-design-hamburger__layer:after { display: block; width: inherit; height: 2px; position: absolute; background: inherit; left: 0; content: ''; animation-duration: 100ms; animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1); } .material-design-hamburger__layer:before { bottom: 250%; } .material-design-hamburger__layer:after { top: 250%; } .material-design-hamburger__icon--to-arrow { animation-name: material-design-hamburger__icon--slide; animation-fill-mode: forwards; } .material-design-hamburger__icon--to-arrow:before { animation-name: material-design-hamburger__icon--slide-before; animation-fill-mode: forwards; bottom: 200%; } .material-design-hamburger__icon--to-arrow:after { animation-name: material-design-hamburger__icon--slide-after; animation-fill-mode: forwards; top: 200%; } .material-design-hamburger__icon--from-arrow { animation-name: material-design-hamburger__icon--slide-from; } .material-design-hamburger__icon--from-arrow:before { animation-name: material-design-hamburger__icon--slide-before-from; } .material-design-hamburger__icon--from-arrow:after { animation-name: material-design-hamburger__icon--slide-after-from; } @keyframes material-design-hamburger__icon--slide { 0% { } 100% { transform: rotate(180deg); } } @keyframes material-design-hamburger__icon--slide-before { 0% { } 100% { transform: rotate(45deg); margin: -5% 40%; width: 75%; } } @keyframes material-design-hamburger__icon--slide-after { 0% { } 100% { transform: rotate(-45deg); margin: -5% 40%; width: 75%; } } @keyframes material-design-hamburger__icon--slide-from { 0% { transform: rotate(-180deg); } 100% { } } @keyframes material-design-hamburger__icon--slide-before-from { 0% { transform: rotate(45deg); margin: -5% 40%; width: 75%; } 100% { } } @keyframes material-design-hamburger__icon--slide-after-from { 0% { transform: rotate(-45deg); margin: -5% 40%; width: 75%; } 100% { } } /* Sidebar */ .lime-sidebar { position: fixed; display: block; left: 0; top: 0; bottom: 0; height: 100%; background: #fff; box-shadow: 0 3px 10px rgba(62, 85, 120,.045); width: 300px; z-index: 999; transform: translateX(-100%); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; opacity: 0; } .sidebar-show .lime-sidebar { transform: translateX(0); opacity: 1; } .lime-sidebar .lime-sidebar-inner { padding: 57px 50px; } .lime-sidebar .slimScrollDiv, .lime-sidebar .lime-sidebar-inner { height: 100%!important; } .lime-sidebar .lime-sidebar-inner ul { list-style-type: none; padding: 0; margin: 0; } .lime-sidebar .lime-sidebar-inner ul li { display: block; overflow: hidden; } .lime-sidebar .lime-sidebar-inner ul li a { display: block; color: rgba(27, 29, 93, .5); margin: 9px 0px; font-weight: normal; font-size: 13px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .lime-sidebar .lime-sidebar-inner ul li a:hover, .lime-sidebar .lime-sidebar-inner ul li.open > a { color: rgba(27, 29, 93, 1); } .lime-sidebar .lime-sidebar-inner ul li a i:not(.has-sub-menu) { font-size: 18px; vertical-align:top; margin-right: 10px; } .lime-sidebar .lime-sidebar-inner ul li a i.has-sub-menu { vertical-align: middle; font-size: 19px; float: right; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .lime-sidebar .lime-sidebar-inner ul li.open > a > i.has-sub-menu { transform: rotate(-90deg); } .lime-sidebar .lime-sidebar-inner ul li a.active { color: #037AFB; } .lime-sidebar .lime-sidebar-inner ul li.sidebar-title { display: block; text-transform: uppercase; font-weight: 600; color: rgba(131, 141, 145,1); font-size: 12px; margin: 40px 0 10px 0; display: block; overflow:hidden; float: none; } .lime-sidebar .lime-sidebar-inner ul li.sidebar-title:first-child { margin-top: 0; } .lime-sidebar .lime-sidebar-inner ul li ul.sub-menu { margin-left: 8px; border-left: 2px solid #f1f1f1; display: none; position: relative; overflow: hidden; padding: 8px 0px 8px 18px; } .lime-sidebar .lime-sidebar-inner ul li ul.sub-menu li a { font-size: 12px; margin: 6px 0; } .lime-sidebar .lime-sidebar-inner ul li ul.sub-menu li { display: block; overflow: hidden; } .lime-sidebar .lime-sidebar-inner ul li ul.sub-menu li a.active { color: rgba(27, 29, 93, 1); } .lime-sidebar .lime-sidebar-inner ul li.active-page > a { color: #037AFB; } /* Theme Settings */ .theme-settings-sidebar { right: 0; top: 0; bottom: 0; background: #fff; width: 300px; display: block; position: fixed; z-index: 100; box-shadow: 0 3px 10px rgba(62, 85, 120,.045); transform: translateX(100%); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .show-theme-settings .theme-settings-sidebar { transform: translateX(0); } .theme-settings-sidebar .theme-settings-inner { padding: 57px 50px; } .theme-settings-sidebar .theme-sidebar-title { font-size: 12px; text-transform: uppercase; font-weight: 600; color: rgba(131, 141, 145,1); margin-bottom: 20px; display: block; } .theme-settings-sidebar .themes-info { color: rgba(131, 141, 145,1); } .theme-settings-sidebar .theme-item { display: block; overflow: hidden; padding: 5px; background: rgba(55, 65, 77,.4); position: relative; margin-top: 20px; border-radius: 4px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; opacity: .8; } .theme-settings-sidebar .theme-item:hover, .theme-settings-sidebar .theme-item.active { box-shadow: 0 3px 10px rgba(62, 85, 120,.045); background: rgba(55, 65, 77,.6); opacity: 1; } .theme-settings-sidebar .theme-item img { width: 100%; display: block; } .theme-settings-sidebar .theme-item .theme-title { font-size: 12px; margin: 10px 10px 5px 10px; text-transform: uppercase; color: rgba(255,255,255,1); font-weight: 600; } .theme-settings-sidebar .theme-item .coming-theme { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: rgba(255,255,255,.7); text-align: center; line-height: 148px; text-transform: uppercase; font-size: 12px; color: #384C6D; font-weight: bold; } /* Page Container */ .lime-container { display: block; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .header-fixed .lime-container { margin-top: 129px; } .sidebar-show .lime-container { transform: translateX(300px); } .lime-container .lime-body .container-fluid, .lime-container .lime-footer .container-fluid { padding-left: 50px; padding-right: 50px; } /* Page Title */ .page-title h3 { padding: 0 25px; display: block; margin: 0 0 30px 0; font-size: 22px; } .page-title .breadcrumb { background: transparent; } .page-title .page-desc { font-size: 14px; margin: 0 25px 30px; } .page-title .divider { height: 1px; width: 100%; margin: 20px 0 30px; background: #dfe7f5; } /* Footer */ .lime-footer .footer-text { display: block; padding: 10px 25px 30px; } /*** UI ELEMENTS ***/ /* Cards */ .card { border: 0; box-shadow: 0 3px 10px rgba(62, 85, 120,.045); margin-bottom: 25px; border-radius: 4px; } .card .card-body { padding: 25px; } .card .card-body .card-title { font-size: 14px; margin-bottom: 20px; color: #000000; } .card-img-top { border-top-left-radius: 4px; border-top-right-radius: 4px; } .card-header { padding: 10px 15px; margin-bottom: 0; background-color: #F2F2F2; border-bottom: 1px solid #E6E6E6; border-top-left-radius: 4px!important; border-top-right-radius: 4px!important; } .card-header-pills { margin-right: 0; margin-left: 0; } .card-header-tabs { margin-right: 0; margin-bottom: -10px; margin-left: 0; border-bottom: 0; } .card-footer { padding: 10px 15px; background-color: #F2F2F2; border-top: 1px solid #E6E6E6; } .card.text-white .card-title { color: #fff; } .card.card-transparent { background: transparent!important; box-shadow: 0 3px 10px rgba(62, 85, 120,.045); } .head-card { background: transparent; box-shadow: none; margin-bottom: 0; } /* Breadcrumb */ .breadcrumb { background: transparent; padding: 15px 25px; background: #F4F4F5; } .breadcrumb-item.active { color: #384C6D; } .breadcrumb-item + .breadcrumb-item::before { color: rgba(27, 29, 93, .3); vertical-align: middle; } .breadcrumb-separator-1 .breadcrumb-item+.breadcrumb-item::before, .breadcrumb-separator-2 .breadcrumb-item+.breadcrumb-item::before { font-family: "Material Icons"; } .breadcrumb-separator-1 .breadcrumb-item+.breadcrumb-item::before { content: '\e315'; } .breadcrumb-separator-2 .breadcrumb-item+.breadcrumb-item::before { content: '\e5c8'; } /* Alerts */ .alert { border: 0; padding: 15px 25px; } .alert.alert-primary { background: #037AFB; color: #fff; } .alert.alert-secondary { background: #e6e6e6; color: #384C6D; } .alert.alert-success { background: #b7ffb5; color: #137a10; } .alert.alert-danger { background: #ffcecc; color: #cf1b15; } .alert.alert-warning { background: #ffeaa3; color: #9c7c11; } .alert.alert-info { background: #ccdaff; color: #284ebf; } .alert.alert-light { background: #F4F4F5; color: #384C6D; } .alert.alert-dark { background: #37414d; color: #fff; } .alert .alert-link { color: inherit!important; font-weight: 600; } /* Badge */ .badge { padding: 6px 10px; font-weight: 600; } .badge.badge-primary { background: #037AFB; } .badge.badge-secondary { background: #e6e6e6; color: #384C6D; } .badge.badge-success { background: #06ba54; } .badge.badge-danger { background: #eb3f3f; } .badge.badge-warning { background: #ffcd36; } .badge.badge-info { background: #5780F7; } .badge.badge-light { background: #F4F4F5; color: #384C6D; } .badge.badge-dark { background: #37414d; } /* Buttons */ .btn { padding: 6px 10px; font-size: 13px; border: none; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .btn-xs { padding: 4px 7px; font-size: 11px; } .btn-sm { padding: 5px 8px; font-size: 12px; } .btn-lg { padding: 9px 15px; font-size: 14px; } .btn:disabled:hover, .btn:disabled:focus, .btn:disabled.active, .btn:disabled:active { box-shadow: none!important; } .btn.btn-primary { background: #037AFB; } .btn.btn-primary:hover { background: #1c89ff!important; } .btn.btn-primary:focus, .btn.btn-primary.active, .btn.btn-primary:active { background: #1c89ff!important; box-shadow: 0 0 0 0.2rem rgba(3, 122, 251, 0.25); } .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus, .show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(3, 122, 251, 0.5); } .btn.btn-secondary { background: #e6e6e6; color: #384C6D; } .btn.btn-secondary:hover { background: #dbdbdb!important; color: #384C6D!important; } .btn.btn-secondary:focus, .btn.btn-secondary.active, .btn.btn-secondary:active { background: #dbdbdb!important; box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.25); } .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus, .show > .btn-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(230, 230, 230, 0.5); } .btn.btn-success { background: #06ba54; } .btn.btn-success:hover { background: #02c958!important; } .btn.btn-success:focus, .btn.btn-success.active, .btn.btn-success:active { background: #02c958!important; box-shadow: 0 0 0 0.2rem rgba(6, 186, 84, 0.25); } .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus, .show > .btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(6, 186, 84, 0.5); } .btn.btn-danger { background: #eb3f3f; } .btn.btn-danger:hover { background: #fc6060!important; } .btn.btn-danger:focus, .btn.btn-danger.active, .btn.btn-danger:active { background: #fc6060!important; box-shadow: 0 0 0 0.2rem rgba(235, 63, 63, 0.25); } .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus, .show > .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(235, 63, 63, 0.5); } .btn.btn-warning { background: #ffcd36; } .btn.btn-warning:hover { background: #ffd659!important; } .btn.btn-warning:focus, .btn.btn-warning.active, .btn.btn-warning:active { background: #ffd659!important; box-shadow: 0 0 0 0.2rem rgba(255, 205, 54, 0.25); } .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus, .show > .btn-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(255, 205, 54, 0.5); } .btn.btn-info { background: #5780F7; } .btn.btn-info:hover { background: #6f92fc!important; } .btn.btn-info:focus, .btn.btn-info.active, .btn.btn-info:active { background: #6f92fc!important; box-shadow: 0 0 0 0.2rem rgba(87, 128, 247, 0.25); } .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus, .show > .btn-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(87, 128, 247, 0.5); } .btn.btn-light { background: #F4F4F5; color: #384C6D; } .btn.btn-light:hover { background: #f0f0f0!important; color: #384C6D!important; } .btn.btn-light:focus, .btn.btn-light.active, .btn.btn-light:active { background: #f0f0f0!important; box-shadow: 0 0 0 0.2rem rgba(244, 244, 245, 0.25); } .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus, .show > .btn-light.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(244, 244, 245, 0.5); } .btn.btn-dark { background: #37414d; } .btn.btn-dark:hover { background: #4d5a69!important; } .btn.btn-dark:focus, .btn.btn-dark.active, .btn.btn-dark:active { background: #4d5a69!important; box-shadow: 0 0 0 0.2rem rgba(55, 65, 77, 0.25); } .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus, .show > .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(55, 65, 77, 0.5); } .btn.btn-link { color: #037AFB; text-decoration: none!important; } .btn.btn-link:hover { background: #E9F1FE!important; } .btn.btn-outline-primary { border: 1px solid #037AFB; color: #037AFB; } .btn.btn-outline-primary:hover { background: #037AFB; border-color: #037AFB; color: #fff; } .btn.btn-outline-secondary { border: 1px solid #e6e6e6; color: #384C6D; } .btn.btn-outline-secondary:hover { background: #e6e6e6; border-color: #e6e6e6; color: #384C6D; } .btn.btn-outline-success { border: 1px solid #06ba54; color: #06ba54; } .btn.btn-outline-success:hover { background: #06ba54; border-color: #06ba54; color: #fff; } .btn.btn-outline-danger { border: 1px solid #eb3f3f; color: #eb3f3f; } .btn.btn-outline-danger:hover { background: #eb3f3f; border-color: #eb3f3f; color: #fff; } .btn.btn-outline-warning { border: 1px solid #ffcd36; color: #ffcd36; } .btn.btn-outline-warning:hover { background: #ffcd36; border-color: #ffcd36; color: #384C6D; } .btn.btn-outline-info { border: 1px solid #5780F7; color: #5780F7; } .btn.btn-outline-info:hover { background: #5780F7; border-color: #5780F7; color: #fff; } .btn.btn-outline-light { border: 1px solid #F4F4F5; color: #384C6D; } .btn.btn-outline-light:hover { background: #F4F4F5; border-color: #F4F4F5; color: #384C6D; } .btn.btn-outline-dark { border: 1px solid #37414d; color: #37414d; } .btn.btn-outline-dark:hover { background: #37414d; border-color: #37414d; color: #fff; } /* Dropdowns */ .dropdown-menu { background: #fff; padding: 8px 0px; margin-top: 12px; list-style-type: none; border-radius: 4px; box-shadow: 0 3px 10px rgba(62, 85, 120,.145); z-index: 99; border: none; } .dropdown-menu a { color: #838D91; padding: 8px 16px; display: block; margin: 0; font-size: 13px; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .dropdown-menu a.disabled { opacity: .4; } .dropdown-menu a:hover { background: #F4F7FC; color: #037AFB; } .dropdown-divider { display: block; width: 100%; height: 1px; background: #F2F2F2; margin: 8px 0; } .dropdown-header { padding: 8px 16px; margin-bottom: 0; font-size: 11px; color: #384C6D; white-space: nowrap; font-weight: 600; text-transform: uppercase; } .dropdown-menu .divider { margin: 8px 0; } /* List Group */ .list-group-item { padding: 10px 15px; border: 1px solid #F2F2F2; } .list-group-item.active { background-color: #037AFB; border-color: #037AFB; } /* Media Object */ .media img { border-radius: 4px; } /* Modal */ body.modal-open { overflow: visible; } .modal-content { border: 0; box-shadow: 0 3px 10px rgba(62, 85, 120,.045); border-radius: 4px; } .modal-header { border-bottom: 0; padding: 25px 25px 20px; } .modal-title { font-size: 14px; color: #000; } .modal-body { padding: 0 25px; } .modal-footer { padding: 20px 25px 25px; border: 0; } .modal-header .close i { font-size: 18px!important; color: #7D7D83; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; text-shadow: none; } .modal-header .close:hover i, .modal-header .close:focus { color: #000; outline: 0; } /* Navs */ .nav-link { color: #384C6D; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .nav-link:hover, .nav-link.active { color: #037AFB; } .nav-tabs { border-bottom: 1px solid #E6E6E6; } .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { border-color: #E6E6E6 #E6E6E6 #fff; } .nav-pills .nav-link.active, .nav-pills .show>.nav-link { background-color: #037AFB; } /* Pagination */ .page-link { border: none; background: #E6E6E6; padding: 9px 15px; color: #384C6D; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .page-item.active .page-link, .page-link:focus, .page-link:active, .page-link:hover { border: none; background: #037AFB; color: #fff; outline: 0!important; box-shadow: none!important; } .pagination-circle .page-link { border-radius: 34px!important; margin-right: 5px; } /* Popovers */ .popover { border: 0; box-shadow: 0 3px 10px rgba(62, 85, 120,.045); } .popover-header { padding: 9px 15px; background: #F2F2F2; border-bottom-color: #E6E6E6; } .popover-body { padding: 9px 15px; font-size: 13px; } .popover .arrow:before { display: none; } /* Progress */ .progress { border-radius: 4px; } /* Spinners */ .btn .spinner-grow, .btn .spinner-border { vertical-align: middle; } /* Toasts */ .toast { border: none; border-radius: 4px; } .toast-header { padding: 6px 10px; } .toast-header button.close i { font-size: 18px; vertical-align: middle; } .toast-body { padding: 6px 10px; } .toast-body .toast-message { padding-left: 20px; display: block; float: left; } /* Tables */ .table { color: #384C6D; } .table * { border-color: #E6E6E6!important; } .table-striped tbody tr:nth-of-type(odd) { background-color: #F2F2F2; } .table td, .table th { padding: 12px 20px; } .table thead th { font-weight: 600; border-top: 0; } .table.table-hover tbody tr { -webkit-transition: all .2s; -moz-transition: all .2s; -o-transition: all .2s; transition: all .2s; } .table.table-hover tbody tr:hover { background: #F2F2F2; } /* Icons */ .icon-list-row { margin-top: 30px; } .icon-list-row i { font-size: 23px; } /* Plugins */ /* Image Crop */ .img-preview { height: 150px; width: 220px; overflow: hidden; margin-bottom: 10px; } .image-crop img { width: 100%; height: 100; } .crop-img-text { font-weight: 600; font-size: 14px; margin-bottom: 15px; } /* Select2 */ .select2-selection { height: auto!important; padding: 10px 15px; border-radius: 4px!important; box-shadow: none; border-color: #E6E6E6!important; } .select2-selection .select2-selection__rendered { line-height: 1.5!important; padding-left: 0!important; color: #384C6D!important; } .select2-selection .select2-selection__arrow { height: 41px!important; } .select2-selection.select2-selection--multiple { padding: 10px 15px!important; min-height: 0px!important; } .select2-selection.select2-selection--multiple .select2-selection__rendered { margin-top: 3px; margin-bottom: -3px; } .select2-selection.select2-selection--multiple .select2-selection__rendered input { margin-top: 0!important; } .select2-search--dropdown .select2-search__field { padding: 10px 12px!important; border-radius: 4px!important; box-shadow: none; border-color: #E6E6E6!important; line-height: 19px; color: #384C6D; } .select2-search--dropdown .select2-search__field:focus, .select2-search--dropdown .select2-search__field:active { box-shadow: none!important; border-color: #E6E6E6!important; outline:none; } .select2-dropdown { padding: 10px 12px!important; border-color: #E6E6E6!important; border-top: 1px solid #E6E6E6!important; margin-top: 3px!important; border-radius: 4px!important; } .select2-dropdown--above { margin-top: -3px!important; border-bottom: 1px solid #E6E6E6!important; } .select2-selection__choice { margin-top: 0!important; height: 19px!important; border: 0!important; background: #F4F7FC!important; color: #037AFB!important; font-size: 12px!important; font-weight: 500!important; } .select2-results__option { border-radius: 4px; border-radius: 4px; } .select2-selection__choice span { color: rgba(0,0,0,.3)!important; } .select2-container--default .select2-results__option .select2-results__option { border-radius: 4px; margin: 2px 0; } .select2-container--default .select2-results__option[aria-selected=true]:hover, .select2-container--default .select2-results__option--highlighted[aria-selected] { background: #F4F7FC; color: #037AFB; } .select2-container--default .select2-results__group { padding: 6px; font-size: 11px; text-transform: uppercase; } .select2-container--default .select2-results__option[aria-selected=true] { background: #F2F2F2; color: #384C6D; } /* Plupload */ .plupload_button { padding: 6px 10px; font-size: 13px; border: none; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; background: #e6e6e6; color: #384C6D; } .plupload_button:hover{ background: #dbdbdb!important; color: #384C6D!important; } .plupload_disabled, a.plupload_disabled { background: #e6e6e6; color: #384C6D; } .plupload_disabled:hover, a.plupload_disabled:focus { box-shadow: none; } li.plupload_delete a { background: none; margin-top: -6px; } li.plupload_delete a::before { background: none; content: '\e15c'; font-family: 'Material Icons'; font-size: 19px; display: block; color: #EB463F; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } li.plupload_delete a:hover::before { color: #fc6060; } /* Toastr */ #toast-container { right: 30px; top: 126px; } #toast-container .toast { border-radius: 4px; box-shadow: 0 3px 10px rgba(62, 85, 120,.045); background: #fff!important; opacity: .8; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; padding: 15px 25px; } #toast-container .toast .toast-message { line-height: 19px; font-size: 13px; } #toast-container .toast .toast-message::before { background: none; content: ''; font-family: 'Material Icons'; font-size: 19px; display: block; color: #fff; float: left; vertical-align: middle; line-height: 19px; margin-right: 10px; height: 100%; clear: both; } #toast-container .toast:hover { box-shadow: 0 3px 10px rgba(62, 85, 120,.045); opacity: 1; } #toast-container .toast.toast-success { background: #59BB56!important; } #toast-container .toast.toast-success .toast-message::before { content: '\e876'; } #toast-container .toast.toast-info { background: #5780F7!important; } #toast-container .toast.toast-info .toast-message::before { content: '\e88f'; } #toast-container .toast.toast-warning { background: #FACC35!important; } #toast-container .toast.toast-warning .toast-message::before { content: '\e002'; } #toast-container .toast.toast-error { background: #EB463F!important; } #toast-container .toast.toast-error .toast-message::before { content: '\e001'; } /* Sliders */ .irs--flat .irs-line, .irs--flat .irs-min, .irs--flat .irs-max { background-color: #F2F2F2; color: #384C6D; } .irs--flat .irs-grid-text { color: #384C6D; } .irs--flat .irs-bar { background-color: #2690ff; } .irs--flat .irs-handle > i:first-child, .irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-single { background-color: #037AFB; } .irs--flat .irs-handle:hover > i:first-child, .irs--flat .irs-handle:focus > i:first-child, .irs--flat .irs-handle.state_hover > i:first-child { background-color: #1c89ff!important; } .irs--flat .irs-from:before, .irs--flat .irs-to:before, .irs--flat .irs-single:before { border-top-color: #037AFB; } /* Forms */ .form-control { padding: 10px 15px; border-color: #E6E6E6; border-radius: 4px; height: auto; color: #838D91; } .form-control::-webkit-input-placeholder { color: rgba(131, 141, 145,.6); } .form-control:hover { border-color: #dbdbdb; } .form-control:focus { border-color: #75b7ff; box-shadow: none; color: #384C6D; box-shadow: 0 0 0 0.2rem rgba(3, 122, 251, 0.25); } .custom-control-input:checked~.custom-control-label::before { color: #fff; border-color: #037AFB; background-color: #037AFB; } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 0.2rem rgba(3, 122, 251, 0.25); } .custom-control-input:focus:not(:checked) ~ .custom-control-label::before { border-color: #80bdff; } .custom-control-label::after { top: 3px; left: -21px; width: 15px; height: 15px; } .custom-checkbox .custom-control-input:checked~.custom-control-label::after { top: 2px; left: -21px; width: 15px; height: 15px; } .custom-range:focus::-webkit-slider-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(3, 122, 251, 0.25); } .custom-range:focus::-moz-range-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(3, 122, 251, 0.25); } .custom-range:focus::-ms-thumb { box-shadow: 0 0 0 1px #fff, 0 0 0 0.2rem rgba(3, 122, 251, 0.25); } .custom-range::-webkit-slider-thumb { background-color: #037AFB; } .custom-range::-webkit-slider-thumb:active { background-color: #80bdff; } .custom-range::-moz-range-thumb { background-color: #037AFB; } .custom-range::-moz-range-thumb:active { background-color: #80bdff; } .custom-range::-ms-thumb { background-color: #037AFB; } .custom-range::-ms-thumb:active { background-color: #80bdff; } .input-group-text { border-color: #E6E6E6; background: #F2F2F2; border-radius: 4px; } .custom-file-label { padding: 10px 15px; border-color: #E6E6E6; height: auto; border-radius: 4px; } .custom-file-label::after { padding: 10px 15px; height: auto; border-top-right-radius: 3px; border-bottom-right-radius: 3px; } .invalid-feedback { color: #EB463F; } .valid-feedback { color: #59BB56; } /* PAGES */ /* Invoice */ .invoice-header { padding: 0 0 30px 0; display: block; } .invoice-header h5 { font-size: 22px; font-weight: bold; } .invoice-info { display: block; } .invoice-info p span { float: right; } /* Pricing Tables */ .pricing { text-align: center; border: 1px solid #E6E6E6; font-size: 13px; padding-left: 0; border-radius: 4px; } .pricing li:first-child, .pricing li:last-child { padding: 20px 13px; } .pricing li { list-style: none; padding: 12px 8px; } .pricing li + li { border-top: 1px solid #E6E6E6; } .pricing h1 { font-size: 24px; } .pricing h3 { margin-bottom: 0; font-size: 32px; } .pricing span { font-size: 12px; color: rgba(27, 29, 93, .5); font-weight: normal; } .pricing li:nth-last-child(2) { padding: 30px 13px; } /* Help Center */ .help-menu { display: block; } .help-menu h3 { font-size: 12px; font-weight: 600; color: rgba(27, 29, 93, 1); text-transform: uppercase; margin-bottom: 10px; } .help-menu ul li a { color: rgba(27, 29, 93, .5); padding: 5px 0; display: block; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .help-menu ul li a.active, .help-menu ul li a.active:hover { color: #037AFB; font-weight: normal; } .help-menu ul li a:hover { color: rgba(27, 29, 93, 1); } .help-topics li a { display: block; margin: 5px 0; color: rgba(27, 29, 93, .5); -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .help-topics li a:hover { color: #037AFB; } .help-topics { display: block; border-radius: 6px; margin-top: 15px; } .help-topics h3 { font-weight: 600; margin-bottom: 15px; font-size: 12px; text-transform: uppercase; } /* Error Pages */ .error-page .container, .error-page .error-container { height: 100%; position: relative; } .error-info { position: absolute; top: 50%; transform: translateY(-50%); } .error-info h1 { font-size: 148px; color: #384C6D; font-weight: bold; } .error-info p { font-size: 14px; } .error-image { position: absolute; right: 0; height: 100%; width: 50%; background: url(../images/404.svg) center center no-repeat; background-size: contain; } body.err-500 .error-image { background: url(../images/500.svg) center center no-repeat; background-size: contain; } @media (max-width: 992px) { .error-image { display: none; } .error-info { width: 100%; text-align: center; } } .coming-soon h1 { font-size: 64px; } .coming-soon .error-image { background: url(../images/coming-soon.svg) center center no-repeat; background-size: contain; } /* Authentication */ .login-page { background: url(../images/login.jpg) center center no-repeat; background-size: auto; } .login-page::before { display: block; content: ''; position: absolute; background: rgba(0,0,0,.5); width: 0; /* Ubah lebar menjadi 0 */ height: 0; /* Ubah tinggi menjadi 0 */ } .login-page .lfh { height: 100vh; margin: 0 auto; } .login-page .login-box { position: absolute; width: 100%; top: 100%; transform: translateY(-50%); } .login-page .login-box .forgot-link { line-height: 31px; } /* APPS */ /* Profile */ .profile-cover { width: 100%; display: block; position: relative; border-radius: 4px; z-index: 1; height: 350px; background: url(../images/profile-bg.jpg) center center no-repeat; background-size: cover; } .profile-cover:after { display: block; content: ' '; width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; left: 0; right: 0; border-radius: 6px; background: linear-gradient(rgba(0,0,0,.3), black); } .profile-header { display: block; width: 100%; margin-top: -110px; padding: 0 30px; overflow: hidden; z-index: 2; position: relative; margin-bottom: 20px; } .profile-header .profile-img img { width: 150px; height: 150px; border-radius: 150px; border: 5px solid white; } .profile-header .profile-img { float: left; } .profile-header .profile-name { float: left; margin-top: 50px; margin-left: 30px; } .profile-header .profile-name h3 { color: #fff; font-weight: 400; font-size: 22px; line-height: 50px; } .profile-header .profile-header-menu { float: right; height: 100%; margin-top: 39px; } .profile-header .profile-header-menu ul li { float: left; height: 100%; padding: 25px; } .profile-header .profile-header-menu ul li a { color: #7D7D83; display: block; font-weight: normal; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .profile-header .profile-header-menu ul li a:hover, .profile-header .profile-header-menu ul li a.active { color: #fff; } .profile-about-list { margin-bottom: 0; } .profile-about-list li { margin-bottom: 8px; position: relative; } .profile-about-list li:last-child { margin-bottom: 0px; } .profile-about-list li i { font-size: 17px; width: 25px; position: absolute; top: 2px; } .profile-about-list li span { padding-left: 25px; display: block; } .post-header, .post-body { display: block; overflow: hidden; width: 100%; } .post-header img { width: 50px; height: 50px; border-radius: 50px; float: left; } .post-header .post-info { float: left; padding: 5px 15px 0 15px;; } .post-header .post-info span.post-author { font-size: 14px; font-weight: 600; color: #333; } .post-header .post-info span.post-date { font-size: 13px; } .post-header .post-header-actions { float: right; padding: 15px 0; } .post-header .post-header-actions a { line-height: 20px; color: #646464; } .post-header .post-header-actions a:hover { color: #333; } .post-body { padding: 15px 0 0 0; position: relative; } .post-body p { margin-bottom: 0; } .post-body .post-image { display: block; width: 100%; border-radius: 6px; margin-top: 15px; } .post-actions, .post-actions ul { display: block; overflow: hidden; margin-bottom: 0; } .post-actions { border-top: 1px solid #E6E6E6; margin-top: 15px; padding: 5px 10px 0; } .post-actions ul li a { display: inline-block; float: left; padding: 5px 8px; color: #384C6D; font-size: 13px; margin-right: 10px; } .post-actions ul li a:hover { color: #000; } .post-actions ul li a.liked { color: #844FF1; } .post-actions ul li a.liked i:before { content: '\f004'; } .post-actions ul li a i { margin-right: 7px; } .post-comments { margin-top: 5px; border-top: 1px solid #E6E6E6; padding-top: 15px; } .post-comments .post-comm { display: block; margin-bottom: 10px; background: #fafafa; border-radius: 4px; padding: 15px; overflow: hidden; } .post-comments .post-comm:last-child { margin-bottom: 0; } .post-comments .post-comm img { width: 30px; height: 30px; border-radius: 30px; float: left; } .post-comments .post-comm .comment-container { float: left; padding: 0 10px; width: calc(100% - 30px); display: block; } .post-comments .post-comm .comment-container span.comment-author { color: #333; font-weight: 600; display: block; line-height: 30px; } .post-comments .post-comm .comment-container span.comment-author small { float: right; font-size: 12px; color: #646464; } .post-comments .post-comm .comment-text { padding: 10px 0 0 0; display: inline-block; } .story-list .story { overflow: hidden; display: block; margin-bottom: 10px; } .story-list .story:last-child { margin-bottom: 0; } .story-list .story img { width: 50px; height: 50px; border-radius: 50px; border: 2px solid #037AFB; padding: 2px; float: left; display: inline-block; } .story-list .story .story-info { display: inline-block; float: left; padding: 5px 15px; } .story-list .story .story-info span.story-author { display: block; line-height: 20px; font-weight: 500; color: #000; } .story-list .story .story-info span.story-time { line-height: 20px; font-size: 12px; } .mutual-friends-list { display: block; } .mutual-friends-list img { float: left; width: 40px; height: 40px; border-radius: 40px; border: 3px solid #fff; margin-left: -8px; z-index: 1; display: inline-block; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; cursor: pointer; } .mutual-friends-list img:first-child { margin-left: 0; } .mutual-friends-list img:hover { z-index: 999; transform: translateY(-5px); } .mutual-friends-list span { line-height: 40px; padding: 0 10px; } @media (max-width: 1200px) { .profile-header { margin-top: -60px; } .profile-cover { height: 200px; } .profile-img { display: block; float: none!important; } .profile-img img { margin: 0 auto; display: inherit; width: 100px!important; height: 100px!important; border-radius: 100px!important; } .profile-name { display: block; float: none!important; text-align: center; margin: 0!important; } .profile-name h3 { color: #333!important; } .profile-header .profile-header-menu { display: block; float: none; margin: 0; text-align: center; } .profile-header .profile-header-menu ul li { display: block; padding: 0; width: calc(100%/6); text-align: center; } .profile-header .profile-header-menu ul li a { padding: 10px; text-align: center; height: auto!important; } .profile-header .profile-header-menu ul li a:hover, .profile-header .profile-header-menu ul li a.active { color: #000; } } /* Mailbox */ .mailbox-options { height: 41px; } .mail-count { line-height: 41px; margin: 0 10px 0 10px; } .mailbox-menu ul li a { color: #384C6D; display: block; margin: 0px 0 15px 0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .mailbox-menu ul li a:hover, .mailbox-menu ul li a.active { color: #037AFB; } .mailbox-menu ul li a i { font-size: 16px; width: 30px; display: inline-block; vertical-align: text-bottom; } .email-list { max-height: 510px; overflow-y: auto; } .email-list ul { margin-bottom: 0px; } .email-list-item { color: #000; } .email-list-item .email-author img { width: 35px; border-radius: 100%; } .email-list-item .email-author span.author-name { margin-left: 7px; font-weight: 600; line-height: 25px; } .email-list-item .email-author span.email-date { float: right; opacity: .6; line-height: 25px; font-size: 12px; } .email-list-item .email-info { display: block; margin-top: 8px; } .email-list-item .email-info .email-subject { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; } .email-list-item .email-info .email-text { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: block; opacity: .7; } .email-list li a:active, .email-list li a:focus, .email-menu li a:active, .email-menu li a:focus { color: #2b2b2b; } .email-list li a { display: block; padding: 18px 12px; border-bottom: 1px solid #dfe7f5; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .email-list li:last-child a { border-color: transparent; } .email-list li a:hover { background: rgba(0,0,0,.03); } .email-list li.active a { background: rgba(0,0,0,.03); } .email-actions .compose { width: 100%; } .mail-header { width: 100%; display: block; overflow: hidden; } .mail-header .mail-title { float: left; line-height: 38px; font-size: 16px; font-weight: 600; color: #384C6D; } .mail-header .mail-actions { float: right; } .mail-info { display: block; width: 100%; overflow: hidden; margin-top: 15px; } .mail-info .mail-author { float: left; } .mail-info .mail-author img { width: 50px; border-radius: 50px; border: 4px solid #dfe7f5; float: left; } .mail-info .mail-author-info { padding: 0 15px; display: inline-block; height: 50px; } .mail-info .mail-author span.mail-author-name { display: block; font-weight: 600; line-height: 25px; } .mail-info .mail-author span.mail-author-address { display: block; line-height: 25px; } .mail-info .mail-other-info { float: right; display: inline-block; } .mail-info .mail-other-info span { line-height: 50px; } .mailbox .card { min-height: calc(100% - 25px); } /* Todo */ .todo-menu h3 { font-size: 12px; font-weight: 600; color: #384C6D; text-transform: uppercase; margin: 30px 0 10px 0!important; } .todo-menu ul li a { color: #384C6D; display: block; padding: 5px 0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .todo-menu ul li a:hover, .todo-menu ul li.active a { color: #037AFB; } .todo-menu ul li a i { width: 25px; display: inline-block; vertical-align: middle; } .todo-list ul li a { display: block; background: #F2F2F2; border: 1px solid #E6E6E6; width: 100%; margin-bottom: 5px; padding: 12px 20px 12px 43px; color: #384C6D; border-radius: 4px; } .todo-list ul li a.done, .todo-list ul li a.done:hover { text-decoration: line-through!important; } /* File Manager */ .file-manager-menu { margin-top: 20px; } .file-manager-menu .fmm-title { padding: 10px 15px; text-transform: uppercase; font-size: 12px; font-weight: 600; opacity: .4; } .file-manager-menu ul li a { margin: 10px 15px; display: block; color: #384C6D; opacity: .6; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .file-manager-menu ul li a.active, .file-manager-menu ul li a:hover { color: #037AFB; opacity: 1; } .file-manager-menu ul li a i { font-size: 18px; vertical-align: top; margin-right: 10px; } .file-manager-menu.label-menu ul li a i { width: 6px; height: 6px; border-radius: 6px; background: #000; display: inline-block; vertical-align: middle; margin: 0 16px 0 6px; } .storage-info { display: block; padding: 10px 15px; } .storage-info .storage-info-title { text-transform: uppercase; font-size: 12px; font-weight: 600; opacity: .4; display: block; margin-bottom: 15px; } .storage-info .storage-info-text { margin-bottom: 10px; display: block; font-weight: 500; font-size: 12px; } .file-list, .recent-files .file { margin-bottom: 0; } .file-options { position: absolute; right: 0; top: 0; visibility: hidden; opacity: 0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .file:hover .file-options, .folder:hover .file-options { visibility: visible; opacity: 1; } .file-options > a { margin: 15px 10px; display: block; color: #384C6D; opacity: 0.6; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .file-options > a i { font-size: 19px; } .file-options > a:hover { opacity: 1; } .file-options > a::after { display: none; } .file .file-icon { vertical-align: middle; font-size: 48px; text-align: center; line-height: 100px; } .file .file-icon i { vertical-align: middle; font-size: 48px; } .file.photo .file-icon i { color: #5780F7; } .file.pdf .file-icon i { color: #EB463F; } .file .file-info p { font-weight: 500; margin-bottom: 0; } .file .file-info span.file-size { color: rgba(0,0,0,.4); } .file .file-info span.file-date { font-size: 12px; color: rgba(0,0,0,.4); margin-top: 10px; display: block; } .folder .folder-icon { float: left; } .folder .folder-icon i { font-size: 36px; } .folder .folder-info { display: block; margin-left: 20px; float: left; } .folder .folder-info a { font-weight: 500; margin-bottom: 0; color: #384C6D; display: block; } .folder .folder-info span { font-size: 12px; color: rgba(0,0,0,.4); } .upgrade-text ul { list-style-type: circle; color: rgba(255,255,255,.7); padding-left: 25px; font-weight: 500; } .upgrade-image { height: 180px; background: url(../images/file-manager-upgrade.svg) center center no-repeat; background-size: contain; } @media (max-width: 1200px) { .file { margin-bottom: 20px!important; } } /* Dashboard */ .stat-card p { float: left; opacity: .7; } .stat-card h2 { margin-top: -7px; font-size: 28px; } .stat-card .progress { clear: both; } .info-text ul { list-style-type: circle; color: rgba(255,255,255,.7); padding-left: 25px; font-weight: 500; } .info-image { height: 200px; background: url(../images/dashboard-info.svg) center center no-repeat; background-size: contain; } #visitorsChart { height: 157px!important; margin-top: 30px!important; display: block; } .social-media-list { margin-top: 26px; display: block; } .social-media-list .social-media-item { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f1f1f1; overflow: hidden; } .social-media-list .social-media-item:last-child { border-bottom: 0; margin-bottom: 0; } .social-media-item .social-icon { float: left; margin-right: 5px; border-radius: 100%; width: 40px; background: #5780F7; height: 40px; text-align: center; color: #fff; line-height: 40px; } .social-media-item .social-icon i { vertical-align: middle; } .social-media-item .social-text { display: block; float: left; padding: 5px 10px; width: calc(100% - 50px); } .social-media-item .social-text p { margin-bottom: 2px; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .social-media-item .social-text span { font-size: 12px; opacity: .6; } .social-media-item .social-icon.twitter { background: #1DA1F2; } .social-media-item .social-icon.google { background: #DD5044; } .social-media-item .social-icon.facebook { background: #4267B2; } .popular-products { height: 365px; overflow: hidden; position: relative; } .popular-products canvas { margin-top: 10px; } .popular-product-list { margin-top: 10px; } .popular-product-list ul li { padding: 12px 12px; border-bottom: 1px solid #E5E9EC; } .popular-product-list ul li:last-child { border-bottom: none; } .popular-product-list ul li span.badge { float: right; } /* RESPONSIVE */ @media (max-width: 991px) { .lime-header { padding: 15px; } .navbar-collapse { height: 0px!important; opacity: 0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; margin-top: 0px; } .navbar-collapse.show { height: 50px!important; opacity: 1; margin-top: 20px; } .lime-header .navbar-nav { flex-direction: row; float: right; margin-right: -13px; } .lime-header .search { width: calc(100% - 90px); left: 0; transform: translateX(0); margin: 0!important; } .mailbox-search { margin-top: 10px; } .email-list { border-left: 0; border-right: 0; margin-bottom: 30px; } .search-results { top: 158px; } .search-result-list { list-style-type: none; padding: 0 40px; } .search-results .search-results-header { padding: 20px 40px; margin-bottom: 20px; } } @media (max-width: 576px) { .mailbox-options button { display: block; width: 100%; margin: 0 0 5px 0!important; } .mailbox-options { display: block!important; } .mail-count { margin: 0 auto; display: block; text-align: center; width: auto; } .mail-left-btn { float: left; display: inline-block; width: auto!important; } .mail-right-btn { float: right; display: inline-block; width: auto!important; } .icon-list-row i { font-size: 32px; margin: 10px; width: 100%; text-align: center; } .login-page .login-box { width: calc(100% - 30px); } } /* Loader */ .loader { position: fixed; height: 100%; width: 100%; background: #fff; z-index: 9999; top: 0; bottom: 0; left: 0; right: 0; -webkit-transition: all .2s ease-in-out; -moz-transition: all .2s ease-in-out; -o-transition: all .2s ease-in-out; transition: all .2s ease-in-out; } .loader .spinner-grow { top: 50%; left: 50%; margin: -13px 0 0 -13px; position: absolute; } .no-loader .loader { visibility: hidden; opacity: 0; }