/
home
/
obinna
/
html
/
mixchief_app
/
public
/
css
/
Upload File
HOME
/*************** 1. Sass Variables ***************/ /*************** 2.Mixins ***************/ @import url('https://fonts.googleapis.com/css?family=Open+Sans|Work+Sans'); @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?vm1dio'); src: url('fonts/icomoon.eot?vm1dio#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?vm1dio') format('truetype'), url('fonts/icomoon.woff?vm1dio') format('woff'), url('fonts/icomoon.svg?vm1dio#icomoon') format('svg'); font-weight: normal; font-style: normal; } /************************************************ ************************************************ Body CSS ************************************************ ************************************************/ html { height: 100%; } body { min-height: 100%; position: relative; } body { margin: 0; padding: 0; font-family:'Work Sans', sans-serif; color: #2e323c; background: #f2f3f9; } body::-webkit-scrollbar { width: 10px; } body::-webkit-scrollbar-track { background: #e6e6e6; } body::-webkit-scrollbar-thumb { background-color: #cccccc; outline: 1px solid #cccccc; } 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.login-bg { background: url("../img/login-bg.jpg") no-repeat; background-size: cover; background-position: center center; } body.error-bg { background: url("../img/login-slider.jpg") no-repeat; background-size: cover; background-position: center center fixed; } /************************************************ ************************************************ Common CSS ************************************************ ************************************************/ a { color: #333333; text-decoration: none; } a:hover { color: #000000; text-decoration: none; } a:focus { outline: none; text-decoration: none; color: #000000; } ul { margin: 0; padding: 0; } ul li { list-style-type: none; } hr { margin-top: 10px; margin-bottom: 10px; border-top: 1px solid #e1e5f1; } /************************************************ ************************************************ Reusable CSS ************************************************ ************************************************/ /*************** Card Fixed Heights ***************/ .card333 { height: 326px; } .card160 { height: 159px; } /*************** Spacers ***************/ .spacer10 { height: 10px; } .spacer20 { height: 20px; } .spacer30 { height: 30px; } .spacer50 { height: 50px; } .spacer60 { height: 60px; } .spacer70 { height: 70px; } /************* Background Colors **************/ .bg-primary { background-color: #000 !important; } .bg-secondary { background-color: #f8ba00 !important; } .bg-success { background-color: #4CAF50 !important; } .bg-light-green { background-color: #A5D6A7 !important; } .bg-info { background-color: #1976D2 !important; } .bg-light-blue { background-color: #90CAF9 !important; } .bg-warning { background-color: #FFC107 !important; } .bg-light-yellow { background-color: #FFE082 !important; } .bg-danger { background-color: #f44336 !important; } .bg-light-red { background-color: #ef9a9a !important; } .bg-pink { background-color: #f8ba00 !important; } .bg-light-pink { background-color: #F8BBD0 !important; } .bg-purple { background-color: #9C27B0 !important; } .bg-orange { background-color: #FF9800 !important; } .bg-brown { background-color: #795548 !important; } .bg-light-brown { background-color: #D7CCC8 !important; } .bg-light { background-color: #e4d8ff !important; } .bg-dark { background-color: #3c3c3c !important; } /************* Text Colors **************/ .text-primary { color: #000 !important; } .text-secondary { color: #f8ba00 !important; } .text-success { color: #4CAF50 !important; } .text-info { color: #1976D2 !important; } .text-warning { color: #FFC107 !important; } .text-danger { color: #f44336 !important; } .text-pink { color: #f8ba00 !important; } .text-light { color: #90CAF9 !important; } .text-dark { color: #000000 !important; } .text-muted { color: #8796af !important; } /************* Overflows Scrolls **************/ .overflow-scroll { overflow: auto; } /************* Char Count **************/ .charCount { font-size: .7rem; } /************* Image Sizes **************/ .img-30 { width: 30px; height: 30px; } /************************************************ ************************************************ Layout CSS ************************************************ ************************************************/ .app { min-height: 100%; } .app-wrap { min-height: 100vh; position: relative; } .app-header { /*padding: 0;*/ background: #000; /*position: fixed;*/ /*z-index: 1020;*/ /*top: 0;*/ /*left: 0;*/ /*right: 0; }*/ } .app-header.primary { background: #000; border-bottom: 1px solid #000; } .app-header.primary a.mini-nav-btn { border-right: 1px solid #53309d; } .app-header.primary a.mini-nav-btn i { color: #ffffff; } .app-header.primary .header-actions > li { border-left: 1px solid #53309d; } .app-header.primary .header-actions > li > a i { color: #ffffff; } .app-header.primary .header-actions > li:first-child { border-left: 0; } .app-header.primary a.onoffcanvas-toggler { border-right: 1px solid #53309d; } .app-header.primary a.onoffcanvas-toggler i { color: #ffffff; } @media (max-width: 576px) { .app-header { position: inherit; } } .app-container { position: relative; background: #f2f3f9; /*top: 66px;*/ padding-bottom: 20px; } @media (max-width: 576px) { .app-container { top: inherit; } } .app-main { width: 100%; 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: 1rem .5rem; background: #000; position: relative; -webkit-box-shadow: 0 10px 20px -10px #c8cce6; -moz-box-shadow: 0 10px 20px -10px #c8cce6; box-shadow: 0 10px 20px -10px #c8cce6; z-index: 10; } .main-heading .page-icon { float: left; border-right: 1px solid rgba(255, 255, 255, 0.2); padding-right: 10px; } .main-heading .page-icon i { font-size: 24px; color: #f8ba00; margin: 9px 6px 9px 0; display: block; } .main-heading .page-title { margin-left: 60px; } .main-heading .page-title h5 { margin: 0; padding: 0; line-height: 120%; color: #ffffff; } .main-heading .page-title h6.sub-heading { margin: 5px 0 0 0; padding: 0; font-size: .80rem; color: rgba(255, 255, 255, 0.4); } .main-heading .right-actions { float: right; margin-top: 2px; } @media (max-width: 992px) { .main-heading .right-actions { float: none; } } @media (max-width: 576px) { .main-heading .right-actions { display: none; } } /*************** Date Range ***************/ .date-range .form-control { max-width: 170px; float: left; margin-right: 1px; } .main-content { position: relative; margin-bottom: auto; padding: 1.5rem; min-height: 1250px; background: #f2f3f9; } .main-footer { background: #ffffff; padding: .7rem 1rem; font-size: .65rem; color: #8796af; } .main-footer.fixed-btm { z-index: 1002; bottom: 0; position: fixed; left: 0; right: 0; } .main-footer.no-bdr { border: 0; } .app-side { margin: 0; width: 230px; position: absolute; top: 0; bottom: 0; left: 0; margin: auto; z-index: 1000; background: #000; -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: 66px 0 0 0; } .app-side.left-toggle { left: -230px; } @media (min-width: 1170px) { .app-side { left: 0; } .app-side.is-open { left: -230px; } } @media (max-width: 1170px) { .app-side { left: -230px; } .app-side.is-open { left: 0; } } .side-content { margin-bottom: auto; } .side-content .user-profile { padding: 30px 10px 20px 10px; text-align: center; background: url("../img/profile-bg.jpg") no-repeat center center; background-size: cover; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; color: #ffffff; position: relative; } .side-content .user-profile img.profile-thumb { width: 72px; height: 72px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 0 0 15px #1f123c; margin: 0 auto; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); } .side-content .user-profile h6.profile-name { margin: 25px 0 0 0; font-size: .9rem; } .side-content ul.profile-actions { display: flex; align-items: center; justify-content: center; margin-top: 20px; } .side-content ul.profile-actions > li { border-right: 1px solid rgba(255, 255, 255, 0.2); } .side-content ul.profile-actions > li a { font-size: .65rem; text-align: center; display: block; width: 50px; color: #ffffff; position: relative; padding: 3px 0; } .side-content ul.profile-actions > li a i { font-size: 24px; margin: auto; } .side-content ul.profile-actions > li a .count-label { position: absolute; top: 0px; right: 10px; width: 8px; height: 8px; border: 2px solid #ffdd48; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .side-content ul.profile-actions > li a .count-label.red { border: 2px solid #f8ba00; } .side-content ul.profile-actions > li a .count-label.green { border: 2px solid #4CAF50; } .side-content ul.profile-actions > li a .count-label.yellow { border: 2px solid #FFC107; } .side-content ul.profile-actions > li a:hover { color: #f8ba00; } .side-content ul.profile-actions > li:last-child { border-right: 0; } .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: 1rem 0; } .side-nav .unifyMenu > li { position: relative; background: #000; } .side-nav .unifyMenu > li.selected:after { position: absolute; content: ""; right: -1px; top: 8px; border-right: 11px solid #f2f3f9; border-top: 12px solid transparent; border-bottom: 12px solid transparent; z-index: 2020; } .side-nav .unifyMenu > li.selected > a { color: #ffffff; background: #000; } .side-nav .unifyMenu > li.selected .current-page { color: #f8ba00; pointer-events: 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: #000; color: #fff; } .side-nav .unifyMenu a:active, .side-nav .unifyMenu a:focus, .side-nav .unifyMenu a:hover { color: #f8ba00; background: #000; } .side-nav .unifyMenu ul { background: #ffffff; } .side-nav .unifyMenu ul a { padding: .5em; padding-left: 4rem; } .side-nav .unifyMenu ul ul a { padding-left: 5rem; } .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%; margin-top: 2px; -webkit-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; } .side-nav .has-arrow.main-dash::after { transform: rotate(225deg) translate(0, -50%); } .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; } .side-nav { position: fixed; } @media (min-width: 992px) { .app-side.is-mini { width: 65px; left: 0; } .app-side.is-mini ~ .app-main { margin-left: 65px; } .app-side.is-mini .unifyMenu > li.selected:after { border-right: 11px solid transparent; } .app-side.is-mini .unifyMenu > li.selected:before { border-right: 11px solid 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 #e1e3f1; } .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: #000; } .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: #000; } .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 .nav-title { display: none; } .app-side.is-mini .user-profile img.profile-thumb { width: 44px; height: 44px; padding: 0; border: 0; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; margin: 20px auto 10px auto; } .app-side.is-mini .user-profile h6.profile-name { display: none; } .app-side.is-mini .user-profile .profile-actions { display: none; } } @media (max-width: 1170px) { .app-main { margin-left: 0; } } .has-icon { width: 65px; -webkit-box-flex: 0; -webkit-flex: 0 0 65px; -ms-flex: 0 0 65px; flex: 0 0 65px; height: 2.5rem; font-size: 1.5em; 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; } .onoffcanvas { visibility: hidden; } .onoffcanvas.is-open { visibility: visible; } /*************** Sidebar Dark ***************/ .sidebar-dark { background: #1b2947; color: #ffffff; } .sidebar-dark .side-content .user-profile { background: #141e35; } .sidebar-dark .side-content ul.profile-actions > li { border-right: 1px solid #0d1422; border-left: 1px solid #223459; } .sidebar-dark .side-content ul.profile-actions > li:first-child { border-left: 0; } .sidebar-dark .side-content ul.profile-actions > li:last-child { border-right: 0; } .sidebar-dark .side-nav .unifyMenu > li { background: #1b2947; } .sidebar-dark .side-nav .unifyMenu a { background: #1b2947; color: #8796af; } .sidebar-dark .side-nav .unifyMenu a:hover { background: #261360; } /************************************************ ************************************************ Main CSS ************************************************ ************************************************/ /*************** Logo ***************/ .logo { display: inline-block; min-width: 230px; background: #000; padding: 15px 20px; position: relative; left: -15px; text-align: center; } .logo img { max-height: 36px; max-width: 100%; margin: auto; } .logos { width: 150px; height: 42px; margin-top: 18px; padding-left: 15px; } @media (max-width: 576px) { .logo { min-width: 120px; max-width: 120px; padding: 23px 20px; } .logo img { max-height: 24px; } } /*************** Header Actions ***************/ .header-actions { float: right; } .header-actions > li { float: left; border-left: 1px solid #fff; } .header-actions > li > a { padding: 22px 28px; display: block; position: relative; } .header-actions > li > a > i { font-size: 21px; vertical-align: middle; color: #ffffff; } .header-actions > li > a .count-label { position: absolute; top: 20px; right: 20px; width: 8px; height: 8px; border: 2px solid #ffdd48; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .header-actions > li > a .count-label.red { border: 2px solid #f8ba00; } .header-actions > li > a .count-label.green { border: 2px solid #4CAF50; } .header-actions > li > a .count-label.yellow { border: 2px solid #FFC107; } .header-actions > li > a.user-settings { padding: 13px 10px 13px 28px; } .header-actions > li > a.user-settings img.avatar { max-width: 40px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .header-actions > li > a:hover i { color: #f8ba00; } .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; } .header-actions > li > a.user-settings { padding: 13px 6px 13px 6px; } } .logout-btn { margin: 10px 10px 0 10px; } .logout-btn .btn { display: block; width: 100%; } ul.imp-notify li { padding: 10px 15px; } 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; background: #000; color: #ffffff; } ul.imp-notify li .icon.secondary { background: #f8ba00; } ul.imp-notify li .details { font-size: .85rem; display: block; margin-left: 55px; } ul.imp-notify li .details p { margin: 0; line-height: 160%; color: #8796af; } ul.imp-notify li .details p span { display: block; margin-bottom: 5px; color: #2e323c; } ul.stats-widget { margin: 0; padding: 0; list-style-type: none; } ul.stats-widget li { padding: 10px 15px; border-bottom: 1px solid #e1e5f1; } ul.stats-widget li h4 { text-transform: uppercase; margin: 5px 0; padding: 0; } ul.stats-widget li p { color: #8796af; margin: 0 0 5px 0; padding: 0; font-size: .75rem; line-height: 100%; } ul.stats-widget li p span { float: right; } ul.stats-widget li .progress { margin-bottom: 10px; height: 4px; } ul.stats-widget li:last-child { border-bottom: 0 solid #e1e5f1; padding-bottom: 0; } ul.stats-widget li:first-child { padding-top: 0; } /*************** User Settings ***************/ ul.user-settings-list { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; margin: 15px 0; } ul.user-settings-list > li { border-right: 1px solid #e1e5f1; width: 33.33%; } ul.user-settings-list > li a { font-size: 13px; text-align: center; display: block; } ul.user-settings-list > li a .icon { width: 36px; height: 36px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; display: -webkit-flex; display: flex; margin: 0 auto 5px auto; border: 2px solid #000; } ul.user-settings-list > li a .icon i { font-size: 18px; margin: 7px; display: block; color: #8796af; } ul.user-settings-list > li a .icon.red { border: 2px solid #f8ba00; } ul.user-settings-list > li a .icon.green { border: 2px solid #4CAF50; } ul.user-settings-list > li a .icon.yellow { border: 2px solid #FFC107; } ul.user-settings-list > li a p { margin: 0; } ul.user-settings-list > li a:hover { color: #000; } ul.user-settings-list > li:last-child { border-right: 0; } /*************** Toggle Mini Nav ***************/ a.mini-nav-btn { padding: 8px 20px 8px 5px; display: inline-block; } a.mini-nav-btn i { font-size: 24px; vertical-align: middle; color: #ffffff; } @media (max-width: 992px) { a.mini-nav-btn { display: none; } } /*************** Toggle Sidebar ***************/ a.onoffcanvas-toggler { padding: 8px 20px 8px 5px; display: none; } a.onoffcanvas-toggler i { font-size: 24px; vertical-align: middle; color: #ffffff; } @media (max-width: 992px) { a.onoffcanvas-toggler { display: inline-block; padding: 8px 8px 8px 8px; } } /************************************************ ************************************************ Widgets ************************************************ ************************************************/ /*************** Stats Widget ***************/ .stats-widget a.stats-label { position: absolute; right: 0; top: 15px; background: #f8ba00; text-align: center; font-size: .65rem; color: #ffffff; padding: 2px 6px; line-height: 100%; } .stats-widget a.stats-label:before { position: absolute; left: -20px; bottom: 0; content: ""; border-right: 9px solid #f8ba00; border-left: 11px solid transparent; border-top: 11px solid transparent; } .stats-widget a.stats-label:after { position: absolute; top: 0; left: -20px; content: ""; border-right: 9px solid #f8ba00; border-left: 11px solid transparent; border-bottom: 11px solid transparent; } .stats-widget .stats-widget-header { margin-bottom: 10px; } .stats-widget .stats-widget-header i { font-size: 36px; color: #000; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .stats-widget .stats-widget-body ul { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-flow: row wrap; justify-content: space-around; } .stats-widget .stats-widget-body ul > li { border-right: 1px solid #e1e5f1; } .stats-widget .stats-widget-body ul > li:last-child { border-right: 0; } .stats-widget .stats-widget-body h6.title { margin: 5px 0 0 0; font-size: 95%; line-height: 130%; color: #8796af; } .stats-widget .stats-widget-body h4.total { margin: 0; text-align: right; color: #f8ba00; } @media (max-width: 576px) { .stats-widget .stats-widget-body h6.title { margin: 5px 0 0 0; } } /*************** Stats Graph Widget ***************/ .stats-graph-widget { position: relative; } .stats-graph-widget h4 { margin: 0 0 3rem 0; text-align: right; } .stats-graph-widget h6 { margin: 0 0 3rem 0; color: #8796af; } .stats-graph-widget .stats-graph { margin: 10px 0 0 0; } .stats-graph-widget p.growth { font-size: .75rem; padding: 0; text-align: right; margin: 5px 0 0 0; } .stats-graph-widget p.growth i { vertical-align: middle; margin-left: 2px; font-size: 18px; } .stats-graph-widget p.growth i.up { color: #4CAF50; } .stats-graph-widget p.growth i.down { color: #f44336; } /*************** Stats Graph Widget ***************/ ul.social-stats li { margin-bottom: 18px; } ul.social-stats li .month-type { float: left; width: 90px; height: 75px; } ul.social-stats li .month-type .circliful { margin-top: -15px; } ul.social-stats li .social-info { margin-left: 90px; } ul.social-stats li .social-info h4 { margin: 0; padding: 8px 0 0 0; } ul.social-stats li .social-info h4 i { vertical-align: middle; font-size: 20px; margin-left: 5px; } ul.social-stats li p { color: #8796af; margin: 0; } ul.social-stats li:last-child { margin-bottom: 0; } /*************** Sales Widget ***************/ .sales-widget { position: relative; } .sales-widget .sales-graph { height: 80px; } .sales-widget h6.title { margin: 0; font-size: .9rem; color: #8796af; } .sales-widget h4.total { margin: 3px 0; } /*************** 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; } /*************** Monthly Average Widget ***************/ .monthly-avg { background: #ffffff; -webkit-box-shadow: 0px 1px 15px 1px rgba(110, 106, 200, 0.08); -moz-box-shadow: 0px 1px 15px 1px rgba(110, 106, 200, 0.08); box-shadow: 0px 1px 15px 1px rgba(110, 106, 200, 0.08); padding: 1rem .3rem; text-align: center; } .monthly-avg h6 { font-size: 95%; margin: 15px 20px 35px 20px; line-height: 150%; } .monthly-avg .avg-block { margin-bottom: 35px; } .monthly-avg .avg-block h4.avg-total { margin: 0; } .monthly-avg .avg-block h6.avg-label { margin: auto; color: #8796af; } .monthly-avg .avg-block:last-child { margin-bottom: 0; } .monthly-avg.plain { border: 1px solid #ffffff; } @media (max-width: 767px) { .monthly-avg { margin: 30px 0; } } .download-details p { text-align: center; margin: 0; color: #8796af; } /*************** Income Widget ***************/ .income-stats { padding: 1rem 0 1rem 1rem; color: #ffffff; } .income-stats h4.total { margin: 0; } .income-stats p.income-title { margin: 5px 0 0 0; } .income-stats p.income-title span.income-label { width: 8px; height: 8px; margin-right: 5px; border: 2px solid #ffdd48; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; display: inline-block; } .income-stats p.income-title span.income-label.secondary { border: 2px solid #f8ba00; } /*************** Events Widget ***************/ .events .all-events { padding: 10px 15px; background: rgba(0, 0, 0, 0.1); margin-bottom: 15px; } .events .all-events #today-date { display: inline-block; font-size: .85rem; margin: 5px 0 0 0; vertical-align: middle; color: #ffffff; } .events .all-events .btn { float: right; margin-left: 10px; padding: .25rem 1rem; background: #ffffff; color: #f8ba00; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .events .event-list { padding: 0 1rem; } .events .event-list li { padding: .5rem 0; margin-bottom: 5px; } .events .event-list li a .event-status-icon { float: left; margin: 7px 0; } .events .event-list li a .event-status-icon img { max-width: 30px; max-height: 30px; } .events .event-list li a .event-info { color: #ffffff; margin-left: 48px; } .events .event-list li a .event-info .event-time { font-size: 1rem; } .events .event-list li a .event-info .event-desc { margin: 3px 0 0 0; } /*************** Project activity widget ***************/ ul.project-activity { margin-left: 10px; padding: 30px 0 20px 0; border-left: 1px solid #ebeef6; } ul.project-activity li.activity-list { position: relative; } ul.project-activity li.activity-list .lbl { background-color: #000; color: #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; content: ""; height: 31px; width: 31px; line-height: 31px; text-align: center; text-transform: uppercase; position: absolute; top: 0px; left: -16px; } ul.project-activity li.activity-list .lbl.secondary { background-color: #f8ba00; } ul.project-activity li.activity-list .lbl.danger { background-color: #f44336; } ul.project-activity li.activity-list .lbl.success { background-color: #4CAF50; } ul.project-activity li.activity-list .lbl.warning { background-color: #FFC107; } ul.project-activity li.activity-list .lbl.pink { background-color: #f8ba00; } ul.project-activity li.activity-list .lbl.grey { background-color: #cccccc; color: #000000; } 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: #8796af; } ul.project-activity li.activity-list .detail-info a.activity-status { color: #8796af; font-size: .75rem; } ul.project-activity li.activity-list .detail-info a.activity-status i { font-size: 13px; vertical-align: middle; margin-right: 5px; color: #4CAF50; } ul.team-activity { margin-bottom: 5px; } ul.team-activity li.product-list { border-bottom: 1px dotted #e1e5f1; } ul.team-activity li.product-list .product-time { border-right: 1px solid #e1e5f1; float: left; } ul.team-activity li.product-list .product-time .badge { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; min-width: 90px; text-align: left; font-size: .75rem; margin: 0 -1px 17px 0; } ul.team-activity li.product-list .product-time p.date { color: #8796af; font-size: .75rem; margin: 15px 0 5px 0; } ul.team-activity li.product-list .product-info { padding: 15px 0 16px 0; margin-left: 105px; } ul.team-activity li.product-list .product-info h5 { margin: 0; padding: 0; font-size: 14px; line-height: 150%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ul.team-activity li.product-list .product-info p { margin: 4px 0 0 0; padding: 0; color: #8796af; line-height: 160%; font-size: .75rem; } ul.team-activity li.product-list .product-info .progress { margin: 10px 0 5px 0; } ul.team-activity li.product-list:last-child { border-bottom: 0; } /*************** Orders Widget ***************/ ul.order-list li { padding: .8rem 0; } ul.order-list li .order-num { margin: 0 0 7px 0; color: #000; border-left: 3px solid #000; padding-left: 10px; } ul.order-list li .order-num.placed { color: #4CAF50; border-left: 3px solid #4CAF50; } ul.order-list li .order-num.cancelled { color: #f44336; border-left: 3px solid #f44336; } ul.order-list li .order-desc { margin: 0 0 0 15px; } 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; } /*************** Chat Widget ***************/ .chats { position: relative; padding: 0; } .chats li { margin-bottom: 25px; } .chats li.chats-left, .chats li.chats-right { position: relative; } .chats li img { width: 50px; height: 50px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .chats li .chats-avatar { float: left; } .chats li.chats-right > .chats-avatar { float: right; } .chats li .chats-name { font-size: .75rem; text-align: center; margin-top: 5px; color: #8796af; } .chats li .chats-hour { margin-left: 70px; padding: 2px; margin-bottom: 20px; font-size: .65rem; } .chats li .chats-hour > span { font-size: 16px; color: #4CAF50; } .chats li .chats-text { margin-left: 70px; padding: 15px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; background-color: #f8ba00; left: 15px; line-height: 160%; color: #ffffff; } .chats li .chats-text:before { content: ''; position: absolute; width: 0; height: 0; top: 10px; left: 50px; border: 10px solid; border-color: transparent #f8ba00 transparent transparent; } .chats li.chats-right > .chats-text { text-align: right; right: 16px; margin-right: 70px; background-color: #000; color: #ffffff; } .chats li.chats-right > .chats-text:before { left: auto; right: 50px; border-color: transparent transparent transparent #000; } .chats li.chats-right > .chats-hour { text-align: right; margin-right: 70px; } /*************** Graph Info Widget ***************/ .info-stats { text-align: center; } .info-stats p.info-title { margin: 6px 0; color: #8796af; } .info-stats h6.info-title { margin: 9px 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: 0; line-height: 145%; } .info-stats span.info-label { width: 8px; height: 8px; border: 2px solid #000; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; display: inline-block; } .info-stats span.info-label.red { border: 2px solid #f44336; } .info-stats span.info-label.green { border: 2px solid #4CAF50; } .info-stats span.info-label.yellow { border: 2px solid #FFC107; } .info-stats2 { margin-top: 16px; } .info-stats2 h5 { margin: 0; line-height: 150%; } .info-stats2 h5 span { color: #8796af; font-size: .75rem; } .info-stats2 p { margin: 0; color: #8796af; } .info-stats3 { padding: 15px; background: #ffffff; -webkit-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); -moz-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); margin-bottom: .9rem; -webkit-border-radius: 0.15rem; -moz-border-radius: 0.15rem; border-radius: 0.15rem; } .info-stats3 .sale-num { margin: 0 0 0 55px; } .info-stats3 .sale-num h4 { margin: 0; line-height: 100%; } .info-stats3 .sale-num p { margin: 0; padding: 0; color: #8796af; } .info-stats3 .icon-type { height: 40px; width: 40px; float: left; position: relative; margin-right: 10px; text-align: center; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; border-radius: 0.5rem; } .info-stats3 .icon-type i { font-size: 21px; line-height: 40px; text-align: center; color: #ffffff; } .info-stats3.green .icon-type { background: #4CAF50; box-shadow: -4px 4px 0 #409343; } .info-stats3.blue .icon-type { background: #000; box-shadow: -4px 4px 0 #4d2c92; } .info-stats3.yellow .icon-type { background: #FFC107; box-shadow: -4px 4px 0 #dda600; } .info-stats3.red .icon-type { background: #f8ba00; box-shadow: -4px 4px 0 #ca1452; } .info-stats4 { padding: 15px; background: #ffffff; -webkit-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); -moz-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); margin-bottom: .5rem; -webkit-border-radius: 0.15rem; -moz-border-radius: 0.15rem; border-radius: 0.15rem; } .info-stats4 .sale-num { margin: 0 0 0 55px; } .info-stats4 .sale-num h4 { margin: 0; line-height: 100%; } .info-stats4 .sale-num p { margin: 0; padding: 0; color: #8796af; } .info-stats4 .icon-type { height: 40px; width: 40px; float: left; position: relative; margin-right: 10px; text-align: center; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; border-radius: 0.5rem; border: 2px solid #f8ba00; box-shadow: -4px 4px 0 #e1e3f1; } .info-stats4 .icon-type i { font-size: 21px; line-height: 38px; text-align: center; color: #f8ba00; } /*************** Graphs Stats Widget ***************/ .graph-stats { text-align: center; } .graph-stats .graph { margin: 20px auto 5px auto; } .graph-stats h6.graph-title { color: #8796af; font-size: 14px; margin: 10px 0; } /*************** Compare Line ***************/ .vs { margin: auto; width: 0; text-align: center; position: relative; } .vs:before { position: absolute; background: #e1e5f1; width: 1px; height: 150px; content: ""; top: 50%; left: 0; margin-top: -75px; } .vs:after { position: absolute; content: "vs"; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; width: 36px; height: 36px; background: #000; top: 50%; left: 0; margin-left: -18px; margin-top: -18px; color: #ffffff; line-height: 36px; text-align: center; } @media (max-width: 576px) { .vs { min-height: 90px; } .vs:before { height: 90px; margin-top: -45px; } } .or { margin: 20px auto; width: 100%; text-align: center; position: relative; height: 1px; background: #e1e5f1; } .or:before { position: absolute; content: "or"; background: #ffffff; width: 20px; height: 20px; color: #000; top: 50%; left: 50%; margin-top: -10px; margin-left: -10px; line-height: 20px; } /*************** Toggle switch ***************/ .toggle-switch { position: relative; width: 40px; height: 20px; background-color: #000; overflow: hidden; } .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 { box-shadow: inset 0 0 0 20px #f8ba00; } .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: #f44336; 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: #ffffff; 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: #000; 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: 12px; right: 15px; } .toggle-switch.tr-xl { position: absolute; top: 16px; right: 15px; } /*************** Stocks Widget ***************/ ul.stocks li { margin-bottom: 15px; } ul.stocks li p { margin: 0; } ul.stocks li p span { float: right; } ul.stocks li p span i { font-size: 14px; margin-right: 10px; vertical-align: middle; } ul.stocks li p span small { margin-left: 10px; } ul.stocks li:last-child { margin-bottom: 0; } /*************** 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: 50px; -moz-border-radius: 50px; border-radius: 50px; color: #ffffff; text-align: center; line-height: 60px; background: #000; } .message-wrapper li .empty-avatar.green { background: #4CAF50; } .message-wrapper li .empty-avatar.red { background: #f44336; } .message-wrapper li .empty-avatar.yellow { background: #FFC107; } .message-wrapper li .empty-avatar.blue { background: #000; } .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: #000; 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: 140%; } .message-wrapper li.in .message { text-align: left; margin-left: 70px; } .message-wrapper li.out { text-align: right; } .message-wrapper li.out .message { margin-right: 70px; 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; } /*************** Email Quotes Widget ***************/ .email-quotes { margin-bottom: 20px; } .email-quotes .quotes-header { background: #fff; color: #ffffff; font-size: 18px; padding: 12px 15px; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .email-quotes ul { background: #000; -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; } .email-quotes ul li { color: #ffffff; width: 20%; padding: 15px 10px; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; border-right: 1px solid #683dc4; } .email-quotes ul li:last-child { border-right: 0; } .email-quotes ul li h1 { margin: 0; padding: 0; font-size: 48px; } .email-quotes ul li p { margin: 0; } @media (max-width: 767px) { .email-quotes ul li { width: 50%; border: 0; } .email-quotes ul li:last-child { width: 100%; } } /*************** Icon Stats Widget ***************/ ul.stats li { line-height: 30px; margin-bottom: 15px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } ul.stats li span.icon { background: #000; width: 30px; height: 30px; 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: 16px; line-height: 30px; } /*************** Newsticker Widget ***************/ .scroll-stats { text-align: center; margin: 0 auto; } .scroll-stats i { font-size: 36px; color: #000; cursor: pointer; width: 36px; height: 36px; line-height: 36px; display: inline-block; margin: auto; } ul#newsticker li { overflow: hidden; padding: 15px 0; min-height: 90px; text-align: left; line-height: 150%; border-bottom: 1px dotted #f2f3f9; } 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: 0.5rem; -moz-border-radius: 0.5rem; border-radius: 0.5rem; } ul#newsticker li .ticker-wrapper { margin: 5px 0 0 70px; } ul#newsticker li .ticker-wrapper a { color: #000; text-decoration: underline; } ul#newsticker li .ticker-wrapper a:hover { color: #482a8a; } /*************** 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: 40px; color: #8796af; } .task-list li.list span:before { margin-right: 10px; font-size: .75rem; content: "\e5ca"; font-family: 'icomoon'; vertical-align: middle; border: 2px solid #8796af; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding: 3px; } .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: #000; border: 2px solid #000; 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: 40px; } .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: #8796af; } .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; } /*************** Weather widget ***************/ .weather-widget { margin-bottom: .5rem; background-position: bottom center; color: #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding: 1rem 1rem 1rem 2.5rem; text-align: right; } .weather-widget.rainy { background: url("../img/unify-rainy.jpg") no-repeat; background-size: cover; } .weather-widget.sunny { background: url("../img/unify-sunny.jpg") no-repeat; background-size: cover; } .weather-widget.cloudy { background: url("../img/unify-cloudy.jpg") no-repeat; background-size: cover; } .weather-widget h2 { margin: 0; line-height: 120%; } .weather-widget h3 { margin: 0; line-height: 160%; } .weather-widget p { margin: 0; line-height: 180%; } .weather-widget small { color: #ffffff; } /*************** Simple Widget ***************/ .simple-widget { position: relative; padding: 15px; background: #000; -webkit-border-radius: 0.15rem; -moz-border-radius: 0.15rem; border-radius: 0.15rem; margin-bottom: .9rem; } .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-color: #000; /* Fallback Color */ background-image: -webkit-gradient(linear, left top, left bottom, from(#8664d0), to(#000)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #8664d0, #000); /* Chrome 10+, Saf5.1+, iOS 5+ */ background-image: -moz-linear-gradient(top, #8664d0, #000); /* FF3.6 */ background-image: -ms-linear-gradient(top, #8664d0, #000); /* IE10 */ background-image: -o-linear-gradient(top, #8664d0, #000); /* Opera 11.10+ */ background-image: linear-gradient(top, #8664d0, #000); color: #ffffff; text-align: center; box-shadow: 0 10px 10px rgba(0, 0, 0, 0.5); } .simple-widget h3 { margin: 0 0 15px 0; } .simple-widget p { text-transform: uppercase; margin: 0; padding: 0 0 10px 0; } .simple-widget .progress { background: rgba(255, 255, 255, 0.2); } .simple-widget .progress .progress-bar { background: #f0f4f9; } /*************** Custom Accordions ***************/ .accordion-icons a { position: relative; padding-left: 30px; } .accordion-icons a:before { position: absolute; left: 0; content: "\e903"; font-family: 'icomoon'; font-size: 18px; } .accordion-icons a.collapsed:before { content: "\e902"; } /*************** Settings ***************/ .settings li { border-bottom: 1px dotted #cfd3e9; 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 #acb3d9; width: 24px; height: 24px; line-height: 24px; text-align: center; } .settings li a.cancel i { font-size: 18px; color: #acb3d9; } .settings li a.cancel.cancelled { border: 2px solid #f44336; } .settings li a.cancel.cancelled i { color: #f44336; } .settings li:first-child { padding-top: 0; } .settings li:last-child { padding-bottom: 0; border-bottom: 0; } /************************************************ ************************************************ Pages ************************************************ ************************************************/ /*************** Invoice Page ***************/ .invoice-container { padding: 1rem; background-color: #f2f3f9; } .invoice-container img.invoice-logo { max-width: 120px; } /*************** Icons Page ***************/ .icons { text-align: center; } .icons span { font-size: 24px; 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; color: #000000; background: #f2f3f9; margin-bottom: 3px; } .icons span:hover { background-color: #000; color: #ffffff; text-shadow: 0 10px 10px #000000; } /*************** Gallery Page ***************/ .gallery { margin: 0 auto; } .gallery a { border: 3px solid #eff0f7; position: relative; overflow: hidden; -moz-box-shadow: 0 0 10px #acb3d9; /* FF3.5+ */ -webkit-box-shadow: 0 0 10px #acb3d9; /* Saf3.0+, Chrome */ box-shadow: 0 0 10px #acb3d9; /* 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: 150px; } .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 #FFC107; text-align: center; color: #FFC107; 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; } /*************** Profile Page ***************/ .block-140 { background: #ffffff; -webkit-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); -moz-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); display: block; height: 146px; } .block-300 { background: #ffffff; -webkit-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); -moz-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); display: block; height: 300px; } a.block-140 { background: #ffffff; -webkit-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); -moz-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); display: block; height: 146px; padding: 30px 15px; margin-bottom: .5rem; text-align: center; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; box-shadow: none; } a.block-140 .icon { width: 48px; height: 48px; -webkit-border-radius: 0.5rem; -moz-border-radius: 0.5rem; border-radius: 0.5rem; margin: 0 auto 10px auto; background: #f2f3f9; color: #ffffff; padding: 8px; text-align: center; line-height: 32px; } a.block-140 .icon i { font-size: 1.2rem; vertical-align: middle; } a.block-140 .icon.info { background: #1976D2; } a.block-140 .icon.warning { background: #FFC107; } a.block-140 .icon.danger { background: #f44336; } a.block-140 .icon.success { background: #4CAF50; } a.block-140 .icon.pink { background: #f8ba00; } a.block-140 .icon.violet { background: #673AB7; } a.block-140 h5 { margin: 5px 0 0 0; padding: 0; overflow: hidden; } a.block-140 p { margin: 0; padding: 0; font-size: 90%; color: #8796af; } a.block-300 { background: #ffffff; -webkit-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); -moz-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; margin-bottom: .5rem; padding: 0; display: block; height: 300px; text-align: center; color: #000; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; box-shadow: none; } a.block-300:hover { color: #f44336; } .user-profile { padding: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .user-profile img.profile-thumb { width: 100px; height: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; margin: 10px auto 15px auto; } .user-profile h5.profile-name { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .user-profile h6.profile-designation { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; line-height: 130%; } .user-profile p.profile-location { margin: 0 0 15px 0; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } a.blog-sm { display: block; padding-bottom: 5px; } a.blog-sm img.blog-thumb { margin-bottom: 15px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 2px solid #000; max-height: 180px; } a.blog-sm h6.blog-title { margin: 0 0 15px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 130%; } a.blog-sm p.blog-content { margin: 0 0 15px 0; line-height: 180%; } a.blog-sm p.blog-date { margin: 0; font-size: .75rem; color: #000; position: relative; } a.blog-sm p.blog-date:after { content: ''; position: absolute; bottom: -5px; left: 0; width: 30px; height: 2px; background: #000; } @media (max-width: 767px) { a.blog-sm p.blog-date { margin: 0 0 15px 0; } } /************************************************ ************************************************ Plugins Overwrite CSS ************************************************ ************************************************/ /*************** Map/Chart/Graph Heights ***************/ .chart-height { position: relative; height: 210px; } .chart-height-2 { position: relative; height: 158px; } .chart-height-md { position: relative; height: 190px; } .chart-height-lg { position: relative; height: 280px; } .chart-height-lgx { position: relative; height: 251px; } /*************** Gmap Skins ***************/ .map { width: 100%; height: 240px; background: #f2f3f9; } /*************** 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; } /*************** Flot Chart ***************/ .legendLabel { padding-left: 5px; padding-right: 10px; font-size: 10px; } /*************** Notify ***************/ .notify-notifications .btn { margin: 3px; min-width: 120px; float: left; } /*************** Rating ***************/ .stars { margin: 5px 0 0 0; width: 100% !important; } .stars img { width: 18px; height: 18px; } /*************** Login Signup Screens ***************/ .login-screen { padding-top: 70px; } .login-screen .login-logo { margin: 20px 0 20px 0; text-align: left; display: block; } .login-screen .login-logo > img { margin: 0; max-height: 36px; } .login-container { position: relative; box-shadow: 0px 25px 15px -15px #cfd3e9; background: #ffffff; margin: 0 auto; } .login-container .login-box { padding: 50px 50px; } .login-container .login-box h5 { margin: 0 0 20px 0; color: #000; } .login-container .actions { margin-top: 15px; display: block; margin-bottom: 30px; } .login-container .actions a { color: #000; text-decoration: none; margin-top: 12px; display: inline-block; } .login-container .actions a:hover { text-decoration: underline; } .login-container .actions .btn { float: right; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; padding: 8px 25px; } .login-container a.additional-link { color: #000; text-decoration: none; margin: 40px auto 0 auto; text-align: center; display: block; } .login-container a.additional-link span { text-decoration: underline; color: #000000; } .login-container p.info { padding: 0; margin: 0 0 20px 0; line-height: 150%; color: #8796af; } .login-slider { background: url("../img/login-slider.jpg") center center no-repeat; background-size: cover; height: 100%; position: relative; } .login-slider .play-icon { position: absolute; top: 50%; left: 50%; width: 90px; height: 90px; margin-left: -35px; margin-top: -35px; } .signup-slider { background: url("../img/login-slider.jpg") center center no-repeat; background-size: cover; height: 100%; position: relative; } @media (max-width: 767px) { .login-slider { display: none; } .signup-slider { display: none; } } /*************** 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; } .lock-screen .avatar .lock { position: absolute; top: -10px; right: -10px; width: 32px; height: 32px; background: #000; -webkit-border-radius: 100%; -moz-border-radius: 100%; border-radius: 100%; } .lock-screen .avatar .lock i { color: #ffffff; line-height: 32px; } .lock-screen h5 { margin: 0 0 10px 0; color: #000; } .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 #000; } .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: #000; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .lock-screen-input .lock-btn i { font-size: 21px; vertical-align: middle; line-height: 42px; } /*************** Error screen ***************/ .error-screen { position: absolute; top: 50%; left: 0; right: 0; height: 240px; margin-top: -120px; text-align: center; } .error-screen h1 { font-size: 8rem; color: #000; line-height: 100%; margin: 0; font-family: 'BalooBhaina', arial, sans-serif; } .error-screen h4 { line-height: 100%; margin-bottom: 30px; } /*************** Pricing Plans ***************/ .plan-one { margin: 0 0 20px 0; width: 100%; position: relative; float: left; background-color: #000; color: #ffffff; } .plan-one .pricing-header { position: relative; padding: 20px 10px; margin-bottom: 10px; } .plan-one .pricing-header i { font-size: 48px; margin: 0 15px; color: #ffffff; display: inline-block; float: left; } .plan-one .plan-title { top: 0; font-size: 1.2rem; margin: 0 0 5px 0; text-transform: uppercase; letter-spacing: 1px; } .plan-one .plan-cost { margin: 0; } .plan-one .plan-cost .plan-price { font-size: 20px; } .plan-one .plan-cost .plan-type { opacity: 0.8; font-size: 0.80rem; text-transform: uppercase; } .plan-one .plan-features { padding: 0; margin: 0 0 20px 0; text-align: center; list-style: outside none none; font-size: 14px; text-align: left; } .plan-one .plan-features li { padding: 7px 10px 7px 15px; border-left: 3px solid #f8ba00; margin: 3px 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .plan-one .plan-features li:hover { color: #ffffff; } .plan-one .plan-select { background-color: #53309d; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; text-align: center; } .plan-one .plan-select a { color: #ffffff; text-decoration: none; padding: 15px 20px; margin: 20px; border-radius: 40px; text-transform: uppercase; display: inline-block; background-color: #000; } .plan-one .plan-select a:hover { background-color: #000; } @media (max-width: 767px) { .plan-one .pricing-header { text-align: center; } .plan-one .pricing-header i { display: block; float: none; margin-bottom: 20px; } } .plan-two { margin: 0 0 20px 0; width: 100%; position: relative; float: left; background-color: #ffffff; border: 2px solid #000; color: #000; } .plan-two .pricing-header { position: relative; padding: 20px 10px; margin-bottom: 10px; } .plan-two .pricing-header i { font-size: 48px; margin: 0 15px; color: #000; display: inline-block; float: left; } .plan-two .plan-title { top: 0; font-size: 1.2rem; margin: 0 0 5px 0; text-transform: uppercase; letter-spacing: 1px; } .plan-two .plan-cost { margin: 0; } .plan-two .plan-cost .plan-price { font-size: 20px; } .plan-two .plan-cost .plan-type { opacity: 0.8; font-size: 0.80rem; text-transform: uppercase; } .plan-two .plan-features { padding: 0; margin: 0 0 20px 0; text-align: center; list-style: outside none none; font-size: 14px; text-align: left; } .plan-two .plan-features li { padding: 7px 10px 7px 15px; border-left: 3px solid #f8ba00; margin: 3px 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .plan-two .plan-features li:hover { color: #000000; } .plan-two .plan-select { background-color: #f2f3f9; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; text-align: center; } .plan-two .plan-select a { color: #ffffff; text-decoration: none; padding: 15px 20px; margin: 20px; border-radius: 40px; text-transform: uppercase; display: inline-block; background-color: #000; } .plan-two .plan-select a:hover { background-color: #000; } @media (max-width: 767px) { .plan-two .pricing-header { text-align: center; } .plan-two .pricing-header i { display: block; float: none; margin-bottom: 20px; } } .plan-three { margin: 0 0 20px 0; width: 100%; position: relative; float: left; background-color: #ffffff; border: 2px solid #e1e5f1; color: #000000; } .plan-three .pricing-header { position: relative; padding: 20px 10px; margin-bottom: 10px; } .plan-three .pricing-header i { font-size: 48px; margin: 0 15px; color: #000; display: inline-block; float: left; } .plan-three .plan-title { top: 0; font-size: 1.2rem; margin: 0 0 5px 0; text-transform: uppercase; letter-spacing: 1px; } .plan-three .plan-cost { margin: 0; } .plan-three .plan-cost .plan-price { font-size: 20px; } .plan-three .plan-cost .plan-type { opacity: 0.8; font-size: 0.80rem; text-transform: uppercase; } .plan-three .plan-features { padding: 0; margin: 0 0 20px 0; text-align: center; list-style: outside none none; font-size: 14px; text-align: left; } .plan-three .plan-features li { padding: 7px 10px 7px 15px; border-left: 3px solid #e1e5f1; margin: 3px 20px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .plan-three .plan-features li:hover { color: #000; } .plan-three .plan-select { background-color: #f2f3f9; -webkit-border-radius: 0 0 8px 8px; -moz-border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px; text-align: center; } .plan-three .plan-select a { color: #ffffff; text-decoration: none; padding: 15px 20px; margin: 20px; border-radius: 40px; text-transform: uppercase; display: inline-block; background-color: #000; } .plan-three .plan-select a:hover { background-color: #000; } @media (max-width: 767px) { .plan-three .pricing-header { text-align: center; } .plan-three .pricing-header i { display: block; float: none; margin-bottom: 20px; } } /*************** 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: 1px dashed #cfd3e9; 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: #000; font-size: 1rem; } .timeline-row .timeline-time small { display: block; margin-top: 5px; color: #8796af; } .timeline-row .timeline-dot { position: absolute; top: 40px; left: 50%; margin-left: -10px; width: 20px; height: 20px; text-align: center; overflow: hidden; padding: 2px; color: #ffffff; z-index: 100; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .timeline-row .timeline-content { position: relative; padding: 20px; } .timeline-row .timeline-content:after { content: ""; position: absolute; top: 40px; height: 3px; width: 40px; } .timeline-row .timeline-content h4 { margin: 0 0 10px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-transform: uppercase; font-size: 14px; } .timeline-row .timeline-content p { margin-bottom: 10px; line-height: 140%; } .timeline-row .timeline-content i { font-size: 30px; color: #ffffff; line-height: 100%; } .timeline-row:nth-child(even) .timeline-content { background: #f8ba00; margin-left: 40px; text-align: left; } .timeline-row:nth-child(even) .timeline-content:after { left: -39px; border-right: 18px solid #f8ba00; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .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: #000; margin-right: 40px; margin-left: 0; text-align: right; } .timeline-row:nth-child(odd) .timeline-content:after { right: -39px; border-left: 18px solid #000; 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 { 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 #000; 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; } } /*************** Loading ***************/ @-webkit-keyframes loading { 0% { -webkit-transform: perspective(160px); } 50% { -webkit-transform: perspective(160px) rotateY(-180deg); } 100% { -webkit-transform: perspective(160px) rotateY(-180deg) rotateX(-180deg); } } @keyframes loading { 0% { transform: perspective(160px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(160px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(160px) rotateX(-180deg) rotateY(0deg); -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(0deg); } 100% { transform: perspective(160px) rotateX(-180deg) rotateY(-180deg); -webkit-transform: perspective(160px) rotateX(-180deg) rotateY(-180deg); } } .loading-wrapper { position: fixed; top: 0; bottom: 0; right: 0; left: 0; background: #f2f3f9; z-index: 10000; } .loading-wrapper .loading { position: absolute; width: 70px; height: 70px; top: 50%; margin-top: -25px; text-align: center; left: 50%; margin-left: -25px; } .loading-wrapper .loading span { display: block; width: 70px; height: 70px; background-color: #f8ba00; -webkit-animation: loading 1s infinite ease-in-out; animation: loading 1s infinite ease-in-out; } /************************************************ ************************************************ Bootstrap Overwrite CSS ************************************************ ************************************************/ /*************** Modals ***************/ .modal-content { border: 1px solid #e1e5f1; } .modal-header { padding: 10px 15px; border-bottom: 1px solid #e1e5f1; } /*************** Carousel ***************/ .carousel-item { max-height: 450px; } /*************** Buttons ***************/ .btn { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; cursor: pointer; } .btn .icon { font-size: 1.4rem; vertical-align: middle; margin-top: -2px; } .btn.focus, .btn:focus { color: #ffffff; } .btn-sm .icon { font-size: 1rem; vertical-align: middle; margin-top: -2px; } .btn-rounded { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .btn-primary { background-color: #000; border-color: #000; color: #ffffff; } .btn-primary:hover { background-color: #53309d; border-color: #53309d; color: #ffffff; } .btn-primary:focus { box-shadow: 0 0 0 3px #c3b2e8; } .btn-secondary, .btn-pending, .btn-pending:hover { background-color: #f8ba00; border-color: #f8ba00; color: #ffffff; } .btn-secondary:hover { background-color: #d81557; border-color: #d81557; color: #ffffff; } .btn-secondary:focus { box-shadow: 0 0 0 3px #f380a7; } .btn-success, .btn-completed { background-color: #4CAF50; border-color: #4CAF50; } .btn-success:hover { background-color: #449d48; border-color: #449d48; } .btn-success:focus { box-shadow: 0 0 0 3px #c0e4c1; } .btn-danger { background-color: #f44336; border-color: #f44336; } .btn-danger:hover { background-color: #f32c1e; border-color: #f32c1e; } .btn-danger:focus { box-shadow: 0 0 0 3px #faa6a0; } .btn-warning { background-color: #FFC107; border-color: #FFC107; color: #ffffff; } .btn-warning:hover { background-color: #ecb100; border-color: #ecb100; color: #ffffff; } .btn-warning:focus { box-shadow: 0 0 0 3px #ffe7a0; color: #ffffff; } .btn-info { background-color: #1976D2; border-color: #1976D2; } .btn-info:hover { background-color: #1669bb; border-color: #1669bb; } .btn-info:focus { box-shadow: 0 0 0 3px #a9cff5; } .btn-light { background-color: #e4d8ff; border-color: #e4d8ff; } .btn-light:hover { background-color: #d2bfff; border-color: #d2bfff; } .btn-light:focus { box-shadow: 0 0 0 3px #c1a5ff; } .btn-dark { background-color: #f8ba00; border-color: #f8ba00; } .btn-dark:hover { background-color: #d81557; border-color: #d81557; } .btn-dark:focus { box-shadow: 0 0 0 3px #f27ba3; } .btn-link { color: #000; } .btn-link:hover { text-decoration: none; } .btn-outline-primary { border-color: #000; color: #000; } .btn-outline-primary:hover { background-color: #000; border-color: #000; color: #ffffff; } .btn-outline-primary:focus { box-shadow: 0 0 0 3px #c3b2e8; } .btn-outline-secondary { border-color: #c1134e; color: #f8ba00; } .btn-outline-secondary:hover { background-color: #c1134e; border-color: #c1134e; color: #ffffff; } .btn-outline-secondary:focus { box-shadow: 0 0 0 3px #f380a7; } .btn-outline-success { border-color: #4CAF50; color: #4CAF50; } .btn-outline-success:hover { background-color: #4CAF50; border-color: #4CAF50; color: #ffffff; } .btn-outline-success:focus { box-shadow: 0 0 0 3px #c0e4c1; } .btn-outline-danger { border-color: #f44336; color: #f44336; } .btn-outline-danger:hover { background-color: #f44336; border-color: #f44336; color: #ffffff; } .btn-outline-danger:focus { box-shadow: 0 0 0 3px #faa6a0; } .btn-outline-warning { border-color: #FFC107; color: #FFC107; } .btn-outline-warning:hover { background-color: #FFC107; border-color: #FFC107; color: #ffffff; } .btn-outline-warning:focus { box-shadow: 0 0 0 3px #ffe7a0; } .btn-outline-info { border-color: #1976D2; color: #1976D2; } .btn-outline-info:hover { background-color: #1976D2; border-color: #1976D2; color: #ffffff; } .btn-outline-info:focus { box-shadow: 0 0 0 3px #a9cff5; } .btn-outline-light { border-color: #e4d8ff; color: #e4d8ff; color: #ffdd48; } .btn-outline-light:hover { background-color: #e4d8ff; border-color: #e4d8ff; color: #ffdd48; } .btn-outline-light:focus { box-shadow: 0 0 0 3px #c1a5ff; } .btn-outline-dark { border-color: #ffdd48; color: #000000; } .btn-outline-dark:hover { background-color: #ffd82e; border-color: #ffd82e; color: #ffffff; } .btn-outline-dark:focus { box-shadow: 0 0 0 3px #fff0ae; } .btn.disabled, .btn:disabled { pointer-events: none; } .btn-group > .btn:first-child { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .btn-group > .btn:last-child { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } /*************** Dropdown Menu ***************/ .dropdown-menu { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 0; -webkit-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); -moz-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); min-width: 12rem; } .dropdown-menu.lg { min-width: 18rem; } .dropdown-menu:before { content: ""; position: absolute; top: -8px; left: 5px; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #e1e5f1; } .dropdown-menu:after { content: ""; position: absolute; top: -7px; left: 6px; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ffffff; } .dropdown-menu .dropdown-item { font-size: 13px; padding: .25rem 1rem; } .dropdown-menu .dropdown-item:hover { background: #90CAF9; } .dropdown-menu.dropdown-menu-right:before { content: ""; position: absolute; top: -8px; right: 5px; left: auto; width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #e1e5f1; } .dropdown-menu.dropdown-menu-right:after { content: ""; position: absolute; top: -7px; right: 6px; left: auto; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 7px solid #ffffff; } .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 #e1e5f1; border-bottom: inherit; } .dropup .dropdown-menu:after { content: ""; position: absolute; bottom: -7px; left: 6px; top: auto; width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 7px solid #ffffff; border-bottom: inherit; } /*************** Media ***************/ .media { margin-top: 0; } .media .media-left a { display: block; } .media .media-left a img { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; width: 64px; height: 64px; } .media a .empty-avatar { height: 64px; width: 64px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; color: #ffffff; text-align: center; display: block; line-height: 60px; background: #000; } .media a .empty-avatar.secondary { background: #f8ba00; } .media a .empty-avatar.green { background: #4CAF50; } .media a .empty-avatar.red { background: #f44336; } .media a .empty-avatar.yellow { background: #FFC107; } .media a .empty-avatar.pink { background: #f8ba00; } .media a .empty-avatar.blue { background: #1976D2; } .media .media-body h5.media-heading { font-size: 1rem; } .media .media-body h5.media-heading span.date { color: #8796af; font-size: .75rem; padding-left: 5px; } .media .media-body p { padding: 0 0 0 15px; margin: 15px 0; line-height: 170%; border-left: 3px solid #e1e5f1; } .media.disabled { opacity: 0.2; cursor: no-drop; } .comments-footer { margin-bottom: 25px; } .comments-footer ul li { float: left; margin-right: 15px; } .comments-footer ul li a { color: #8796af; } .comments-footer ul li a span.count { margin-right: 2px; } .comments-footer ul li a.high { color: #4CAF50; } .comments-footer ul li a.low { color: #f44336; } .comments-footer ul li a:hover { color: #000; } .comments-form .form-group { margin-bottom: 10px; } /*************** Card ***************/ .card { border: 0; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; margin-bottom: .5rem; -webkit-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); -moz-box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); box-shadow: 0px 1px 10px 1px rgba(110, 106, 200, 0.08); background: #ffffff; } .card.top-blue-bdr { border-top: 2px solid #000; } .card.top-grey-bdr { border-top: 2px solid #333333; } .card.top-red-bdr { border-top: 2px solid #f44336; } .card .card-body { padding: 1rem; position: relative; } .card .card-header { background: #ffffff; border-bottom: 0; font-size: 1rem; padding: .75rem 1rem; position: relative; } .card .card-header h5 { font-size: 1rem; } .card .card-header h5 a { color: #000; } .card .card-header a.link { position: absolute; right: 15px; top: 15px; font-size: .75rem; color: #000; } .card .card-footer { background: #ffffff; border-top: 1px solid #e1e5f1; font-size: 1rem; padding: .75rem 1rem; position: relative; } .card .card-footer h5 { font-size: 1rem; } .card .card-footer h5 a { color: #000; } .card h6.card-title { text-align: center; margin: 1rem; } .card.bg-primary { border: 1px solid #000; } .card.bg-primary .card-header { background: #000; border-bottom: 1px solid #53309d; } .card.bg-primary-solid { border: 0; background: #000; } .card.bg-primary-solid .card-header { color: #ffffff; background: #000; } .card.bg-secondary { border: 1px solid #f8ba00; } .card.bg-secondary .card-header { background: #f8ba00; border-bottom: 1px solid #ca1452; } .card.bg-secondary-solid { border: 0; background: #f8ba00; } .card.bg-secondary-solid .card-header { color: #ffffff; background: #f8ba00; } .card.bg-dark { border: 1px solid #3c3c3c; } .card.bg-dark .card-header { background: #3c3c3c; border-bottom: 1px solid #282828; } .card.bg-light { border: 1px solid #e4d8ff; } .card.bg-light .card-header { background: #e4d8ff; border-bottom: 1px solid #d2bfff; } .card.bg-success { border: 1px solid #4CAF50; } .card.bg-success .card-header { background: #4CAF50; border-bottom: 1px solid #449d48; } .card.bg-info { border: 1px solid #1976D2; } .card.bg-info .card-header { background: #1976D2; border-bottom: 1px solid #1669bb; } .card.bg-warning { border: 1px solid #FFC107; } .card.bg-warning .card-header { background: #FFC107; border-bottom: 1px solid #dda600; } .card.bg-danger { border: 1px solid #f44336; } .card.bg-danger .card-header { background: #f44336; border-bottom: 1px solid #f32c1e; } .card.bg-grey { background: #333333; border: 1px solid #333333; } .card.bg-grey .card-header { background: #333333; border-bottom: 1px solid #1f1f1f; } .card.bg-brown { background: #795548; border: 1px solid #795548; } .card.bg-brown .card-header { background: #795548; border-bottom: 1px solid #5f4339; } .card.bg-facebook { background: #3B5998; border: 1px solid #3B5998; } .card.bg-facebook .card-header { background: #3B5998; border-bottom: 1px solid #30487b; } .card-message { background-color: #ffffff; padding: 12px 20px; border-bottom: 1px solid #e1e5f1; } .card-message i { font-size: 2rem; margin-right: 10px; float: left; } /*************** Card Header Tabs ***************/ .card-header-tabs { margin-right: 0; margin-left: 0; border-bottom: 1px solid #e1e5f1; } /*************** Tooltip ***************/ .tooltip { font-size: 0.75rem; } .tooltip-inner { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } /*************** Badges ***************/ .badge { padding: 0.4em 1em 0.4em 1em; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; font-weight: 400; font-size: .75rem; } .badge-pill { padding: 0.4em 1em 0.4em 1em; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .badge-primary { background-color: #000; } .badge-primary[href]:focus, .badge-primary[href]:hover { background-color: #53309d; } .badge-secondary { background-color: #f8ba00; } .badge-secondary[href]:focus, .badge-secondary[href]:hover { background-color: #d81557; } .badge-success { background-color: #4CAF50; } .badge-success[href]:focus, .badge-success[href]:hover { background-color: #449d48; } .badge-danger { background-color: #f44336; } .badge-danger[href]:focus, .badge-danger[href]:hover { background-color: #f32c1e; } .badge-warning { background-color: #FFC107; } .badge-warning[href]:focus, .badge-warning[href]:hover { background-color: #ecb100; } .badge-info { background-color: #1976D2; } .badge-info[href]:focus, .badge-info[href]:hover { background-color: #1669bb; } .badge-light { background-color: #e4d8ff; } .badge-light[href]:focus, .badge-light[href]:hover { background-color: #d2bfff; } .badge-dark { background-color: #ffdd48; } .badge-dark[href]:focus, .badge-dark[href]:hover { background-color: #ffd82e; } .badge-bdr, .badge-bdr-pill { background-color: 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: #000; border: 1px solid #000; } .badge-bdr.badge-secondary, .badge-bdr-pill.badge-secondary { color: #f8ba00; border: 1px solid #f8ba00; } .badge-bdr.badge-danger, .badge-bdr-pill.badge-danger { color: #f44336; border: 1px solid #f44336; } .badge-bdr.badge-success, .badge-bdr-pill.badge-success { color: #4CAF50; border: 1px solid #4CAF50; } .badge-bdr.badge-warning, .badge-bdr-pill.badge-warning { color: #FFC107; border: 1px solid #FFC107; } .badge-bdr.badge-info, .badge-bdr-pill.badge-info { color: #1976D2; border: 1px solid #1976D2; } .badge-bdr.badge-dark, .badge-bdr-pill.badge-dark { color: #ffdd48; border: 1px solid #ffdd48; } .badge-bdr.badge-light, .badge-bdr-pill.badge-light { color: #e4d8ff; border: 1px solid #e4d8ff; } /*************** Alerts ***************/ .alert { padding: .75rem 1rem; position: relative; background: #ffffff; border: 1px solid #e1e3f1; -webkit-border-radius: 0.15rem; -moz-border-radius: 0.15rem; border-radius: 0.15rem; 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: #e1e5f1; } .alert-dismissible .close { padding: .5rem 1rem; top: -.70rem; } .close { text-shadow: none; font-size: 1.2rem; } .alert-success { color: #2e323c; } .alert-success i { color: #4CAF50; } .alert-success hr { border-top-color: #5cb860; } .alert-danger { color: #2e323c; } .alert-danger i { color: #f44336; } .alert-danger hr { border-top-color: #f55a4e; } .alert-warning { color: #2e323c; } .alert-warning i { color: #FFC107; } .alert-warning hr { border-top-color: #ffc721; } .alert-info { color: #2e323c; } .alert-info i { color: #1976D2; } .alert-info hr { border-top-color: #2083e4; } .alert-dark { background-color: #ffdd48; color: #000000; } /*************** Progressbars ***************/ .progress { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; background-color: #f0f4f9; } .progress.md { height: 8px; } .progress.sm { height: 5px; } .progress.xs { height: 3px; } .progress-bar { background: #000; } /*************** Popovers ***************/ .popover { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; border: 1px solid #e1e5f1; } .popover .popover-header { background: #f2f3f9; } /*************** Tabs, Pills & Navs ***************/ .nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active { border-color: #e1e5f1 #e1e5f1 #f2f3f9; color: #2e323c; background: #ffffff; border-bottom: 1px solid #ffffff; } .nav-tabs .nav-link { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .nav-link { border: none; position: relative; padding: .5rem 1.3rem; } .nav-link:hover { color: #000; } .nav-link.active { text-decoration: none; } .nav-link.active:after { content: ""; position: absolute; bottom: 2px; left: 1rem; right: 1rem; height: 3px; background: #000; } .nav-link.disabled { pointer-events: none; } .tab-content { padding: 1rem; border: 1px solid #e1e5f1; border-top: 0; } .tab-content.plain { padding: 0; border: 0; } .custom-tabs .nav-tabs .nav-item.show .nav-link, .custom-tabs .nav-tabs .nav-link.active { border: 1px solid transparent; padding: .5rem 0; } .custom-tabs .nav-tabs .nav-link:focus, .custom-tabs .nav-tabs .nav-link:hover { border: 1px solid transparent; } .custom-tabs .nav-link.active:before { content: ""; position: absolute; right: 1rem; bottom: -4px; height: 7px; width: 7px; background: #000; } .custom-tabs .nav-link.active:after { right: 1rem; left: 1rem; bottom: -2px; } .custom-tabs .nav-tabs { border: 0; } .custom-tabs .tab-content { border: 0; padding: 1rem 0; } /*************** Pills ***************/ .nav-pills .nav-link { -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } /*************** Page Item ***************/ .page-item.active .page-link { background-color: #000; border-color: #000; } /*************** Breadcrumbs ***************/ .breadcrumb { background-color: #f2f3f9; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .breadcrumb .breadcrumb-item a { color: #000; } .breadcrumb .breadcrumb-item a i { font-size: 16px; } .breadcrumb .breadcrumb-item.active { color: #8796af; } .breadcrumb.light { background-color: #e4d8ff; } /*************** jumbotron ***************/ .jumbotron { background-color: #f2f3f9; } /*************** List Group ***************/ .list-group-item { border: 1px solid #e1e5f1; } .list-group-item-primary { background: #000; color: #ffffff; } .list-group-item-secondary { background: #f8ba00; color: #ffffff; } .list-group-item-success { background: #4CAF50; color: #ffffff; } .list-group-item-danger { background: #f44336; color: #ffffff; } .list-group-item-info { background: #1976D2; color: #ffffff; } .list-group-item-warning { background: #FFC107; color: #ffffff; } .list-group-item-light { background: #e4d8ff; color: #1976D2; } .list-group-item-dark { background: #ffdd48; color: #ffffff; } a.list-group-item-primary { background: #000; color: #ffffff; } a.list-group-item-primary:hover { background: #53309d; color: #ffffff; } a.list-group-item-secondary { background: #f8ba00; color: #ffffff; } a.list-group-item-secondary:hover { background: #d81557; color: #ffffff; } a.list-group-item-success { background: #4CAF50; color: #ffffff; } a.list-group-item-success:hover { background: #449d48; color: #ffffff; } a.list-group-item-danger { background: #f44336; color: #ffffff; } a.list-group-item-danger:hover { background: #f32c1e; color: #ffffff; } a.list-group-item-info { background: #1976D2; color: #ffffff; } a.list-group-item-info:hover { background: #1669bb; color: #ffffff; } a.list-group-item-warning { background: #FFC107; color: #ffffff; } a.list-group-item-warning:hover { background: #ecb100; color: #ffffff; } a.list-group-item-light { background: #e4d8ff; color: #1976D2; } a.list-group-item-light:hover { background: #d2bfff; color: #1976D2; } a.list-group-item-dark { background: #ffdd48; color: #ffffff; } a.list-group-item-dark:hover { background: #ffd82e; color: #ffffff; } /*************** 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: #000; border: 1px solid #e1e5f1; } .page-link:hover { background: #f2f3f9; border-color: #e1e5f1; } /*************** Forms ***************/ address { border-left: 2px solid #000; padding-left: 20px; line-height: 170%; } .form-control { font-size: .9rem; border: 1px solid #e1e5f1; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; } .form-control:focus { border: 1px solid #000; } .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; } label { line-height: 1.8; } .input-group-addon { padding: .8rem .75rem; margin-bottom: 0; font-size: 1rem; font-weight: 400; line-height: 1.25; color: #495057; text-align: center; background-color: #e9ecef; border: 1px solid rgba(0,0,0,.15); border-radius: .25rem; } .input-group-addon { border: 1px solid #e1e5f1; background: #f2f3f9; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; color: #8796af; } /*************** Tables ***************/ .table-hover tbody tr:hover { background-color: #f2f3f9; } .table td, .table th { vertical-align: middle; } .thead-default th { background: #f2f3f9; } .table-inverse { background: #000; } .table-inverse td, .table-inverse th, .table-inverse thead th { border-color: #53309d; } .thead-inverse th { background-color: #000; } .table thead th { border-bottom: 1px solid #e1e5f1; } .table-success, .table-success > td, .table-success > th { background-color: #A5D6A7; } .table-danger, .table-danger > td, .table-danger > th { background-color: #ef9a9a; } .table-warning, .table-warning > td, .table-warning > th { background-color: #FFE082; } .table-info, .table-info > td, .table-info > th { background-color: #90CAF9; } .table-light, .table-light > td, .table-light > th { background-color: #f2f3f9; } .table-striped tbody tr:nth-of-type(odd) { background-color: #f2f3f9; } /*************** Gutters ***************/ .gutters { margin-right: -4px; margin-left: -4px; } .gutters > .col, .gutters > [class*="col-"] { padding-right: 4px; padding-left: 4px; } .no-gutters { margin-right: -0px; margin-left: -0px; } .no-gutters > .col, .no-gutters > [class*="col-"] { padding-right: 0px; padding-left: 0px; } [class^="icon-"], [class*=" icon-"] { color: #f8ba00; } .pull-right { float: right; } .cover { padding-top: 10px; } .select2.select2-container.select2-container--default.select2-container--focus { width: 100% !important; } .supply-items { padding-top: 30px; } #adds, #removes { padding: 5px 10px; font-size: 24px; margin-left: 5px; } #adds:focus, #removes:focus { padding: 5px 10px; font-size: 24px; margin-left: 5px; } .settings-form .form-group { display: flex; } .settings-form .settings-label { flex: 2; } .settings-form input { flex: 1; margin: auto; display: flex; } .labels { display: flex; } table th { font-weight: bold; } table tbody tr a.action-icon { margin-right: 7px; border-radius: 5px; font-size: 20px; } table tbody tr a.action-icon.link-warning { color: #ffc107; } table tbody tr a.action-icon.link-danger { color: #f44336; } input, select { height: 50px !important; font-size: 18px; } .card-body { clear: both; } .card-body .add-item-part { float: right; } .app-container { display: flex; min-height: 100vh; top: 0; } .login-form { margin: auto; width: 40%; margin-top: 10%; } .pull-right-push { float: right; } @media (max-width: 767px) { .login-form { width: 90%; } .pull-right-push { float: none; display: block; margin-top: 15px; } } .register-form { width: 40%; margin: 100px auto; } .register-form > .card { padding: 30px; border-radius: 10px; background: #fff; } @media (max-width: 980px) { .register-form { width: 90%; margin: 50px auto; } .register-form > .card { padding: 10px; } } #stockform .row { padding-bottom: 15px; padding-top: 15px; } .confirmation-message { width: 80%; margin: 200px auto; } .confirmation-message span { color: #28a745;; } #error { color: red; } .alert { margin-top: 0; } .alert-success { background-color: #d4edda; color: #155724; } .alert-danger { background-color: #f8d7da; color: #721c24; } .alert-warning { background-color: #fff3cd; color: #856404; } .form-control:focus { box-shadow: none; } input.form-control.error { border-color: red; } .stockitem { display: none; } #supplyitems>.row:not(#initial) { border-top: 1px solid #ccc; padding-top: 17px; /*padding-bottom: 10px;*/ } .icon-home:before { content: "\e900"; } .icon-cart:before { content: "\e93a"; } .icon-credit-card:before { content: "\e93f"; } .icon-database:before { content: "\e964"; } .icon-cog:before { content: "\e994"; } .icon-truck:before { content: "\e9b0"; } .icon-list-numbered:before { content: "\e9b9"; } .icon-list:before { content: "\e9ba"; } .icon-list2:before { content: "\e9bb"; } .icon-tree:before { content: "\e9bc"; } .icon-menu:before { content: "\e9bd"; } .icon-flag:before { content: "\e9cc"; } .icon-bookmark:before { content: "\e9d2"; } .icon-bookmarks:before { content: "\e9d3"; } .icon-paragraph-justify:before { content: "\ea7a"; } .icon-share2:before { content: "\ea82"; } .select2-container--default .select2-selection--single .select2-selection__arrow { top: 12px; } .select2-container .select2-selection--single { height: 50px; } .select2-container--default .select2-selection--single .select2-selection__rendered { padding-top: 2%; } table { width: 100%; table-layout: fixed; } .flex-big { display: flex; } @media (max-width: 980px){ .flex-big { /*display: block;*/ } .flex-big a { margin-bottom: 5px; } .main-content { padding: 0; } .col-sm-hidden { display: none !important; } } .col-lg-hidden { display: none !important; } @media (min-width: 1170px) { a.user-settings.open-menu img { display: none; } } @media (max-width: 1170px) { .new-item-add { margin-top: 20px; } .margin-auto { margin: 5px auto; } } #unifyMenu>li>ul>li>a { padding-left: 5rem; } #unifyMenu>li>ul.collapse { display: block; } .card .card-header { padding-top: 1.5rem; } .br-5 { border-radius: 5px; } .card.col-xl-4 { margin-right: 10px; } .col-xl-4 { flex-width: 32%; flex: 0 0 32%; } .col-md-4 { flex-width: 32%; flex: 0 0 32%; } .col-sm-4 { flex-width: 32%; flex: 0 0 32%; } .col-lg-4 { flex-width: 32%; flex: 0 0 32%; } .col-md-12, .col-sm-12 { flex-width: 100%; flex: 0 0 100%; } .side-nav .unifyMenu a.active { color: #f8ba00; } .no-margin { margin: 0 !important; } .navbar-brand { padding-top: 10px; } .logo { width: 150px; min-width: 45px; padding: 0; height: 45px; margin-left: 50px; } @media (max-width: 980px) { .stats-graph-widget .center-small { text-align: center; float: none; } .logo { margin-left: 10px; } .login-form { margin-top: 30%; } } .gutters > .sales-chart { padding-left: 0; } @media (max-width: 992px){ .gutters > .sales-chart, .subscription { order: 1; } .gutters > .recent, .sales-update { order: 2; } } @media screen and (min-width: 992px){ div.dataTables_wrapper div.dataTables_filter input { width: 70% !important; } } .clickable-row { cursor: pointer; } #stockitems hr, #stockform hr { margin: 0; } #stockitems .row:nth-of-type(2n), #stockform .row:nth-of-type(2n) { background: #f8f8f8; } .new-item-add .card-body { padding: 0; } .new-item-add .form-group { padding-bottom: 1rem; margin-bottom: 0; } .items .item { padding-right: 15px; padding-left: 15px; } .new-item-add .save-button { margin-left: 15px; margin-top: 10px; } .items .added { border-top: 1px solid #ccc; padding-top: 15px; } .items .added:nth-of-type(2n) { background: #f8f8f8; } .current-logo { display: flex; width: 150px; margin: 15px 15px 15px 0; } .no-margin.alert.fixed-top { z-index: 1; }