/************************************************ ************************************************ A1. Importing Sass Variables ************************************************ ************************************************/ /*************** 2.Mixins ***************/ /************************************************ ************************************************ A2. Importing Web Fonts ************************************************ ************************************************/ @import url("../../../css"); /************************************************ ************************************************ Body Css ************************************************ ************************************************/ html { height: 100%; font-size: 100%; } body { margin: 0; padding: 0; font: 400 .8rem 'Open Sans', sans-serif; color: #333333; background: #eff1f5; min-height: 100%; position: relative; } body.authentication { display: flex; align-items: center; justify-content: center; background: #1b1b1b; } body.countdown { background: #1b1b1b; } /*************** Loading ***************/ #loading-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 5000; background: rgba(0, 0, 0, 0.95); display: flex; align-items: center; justify-content: center; } #loading-wrapper .spinner-border { width: 5rem; height: 5rem; color: #01902d; } /************************************************ ************************************************ Re Usable Css ************************************************ ************************************************/ a { color: #000000; } a:hover { text-decoration: none; } img { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } ul { list-style-type: none; margin: 0; padding: 0; } ul.custom { font-size: .825rem; margin: 20px 0 0 20px; font-weight: 400; } ul.custom li { line-height: 180%; } ul.custom-list2 { font-size: .825rem; list-style-type: disc; margin: 0 0 0 15px; } ul.custom-list2 li { line-height: 100%; } ul.custom-list2 li a { display: flex; line-height: 200%; } ul.custom-list2 li a:hover { text-decoration: underline; color: #01902d; } h1, h2, h3, h4, h5, h6 { font-weight: 600; } h1 { font-size: 2.5rem; margin-bottom: .8rem; } h2 { font-size: 2rem; margin-bottom: .5rem; } h3 { font-size: 1.5rem; margin-bottom: .5rem; } h4 { font-size: 1.25rem; margin-bottom: .4rem; } h5 { font-size: 1rem; margin-bottom: .3rem; } h6 { font-size: .85rem; margin-bottom: .2rem; } p { margin-bottom: .2rem; line-height: 180%; } h1.styled { text-align: center; position: relative; line-height: 180%; padding-bottom: .2rem; margin-bottom: 3rem; font-weight: 400; } h1.styled:after { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; content: ""; position: absolute; bottom: 0; left: 50%; margin-left: -35px; background: #01902d; height: 5px; width: 70px; } h2.styled { text-align: center; position: relative; line-height: 180%; padding-bottom: .2rem; margin-bottom: 3rem; font-weight: 400; } h2.styled:after { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; content: ""; position: absolute; bottom: 0; left: 50%; margin-left: -25px; background: #01902d; height: 4px; width: 50px; } h3.styled { text-align: center; position: relative; line-height: 180%; padding-bottom: .2rem; margin-bottom: 3rem; font-weight: 400; } h3.styled:after { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; content: ""; position: absolute; bottom: 0; left: 50%; margin-left: -15px; background: #01902d; height: 3px; width: 30px; } .text-primary { color: #01902d !important; } .text-secondary { color: #484848 !important; } .text-light { color: #d0d0d0 !important; } .text-dark { color: #1b1b1b !important; } .text-success { color: #18800c !important; } .text-info { color: #074694 !important; } .text-warning { color: #e69f00 !important; } .text-danger { color: #e40000 !important; } .text-muted { color: #888888 !important; } .bg-primary, a.bg-primary { background-color: #01902d !important; } .bg-primary:hover, .bg-primary:focus, a.bg-primary:hover, a.bg-primary:focus { background-color: #017725 !important; } .bg-secondary, a.bg-secondary { background-color: #484848 !important; } .bg-secondary:hover, .bg-secondary:focus, a.bg-secondary:hover, a.bg-secondary:focus { background-color: #3b3b3b !important; } .bg-light, a.bg-light { background-color: #d0d0d0 !important; } .bg-light:hover, .bg-light:focus, a.bg-light:hover, a.bg-light:focus { background-color: #c3c3c3 !important; } .bg-dark, a.bg-dark { background-color: #1b1b1b !important; } .bg-dark:hover, .bg-dark:focus, a.bg-dark:hover, a.bg-dark:focus { background-color: #0e0e0e !important; } .bg-success, a.bg-success { background-color: #18800c !important; } .bg-success:hover, .bg-success:focus, a.bg-success:hover, a.bg-success:focus { background-color: #14690a !important; } .bg-info, a.bg-info { background-color: #074694 !important; } .bg-info:hover, .bg-info:focus, a.bg-info:hover, a.bg-info:focus { background-color: #063a7c !important; } .bg-warning, a.bg-warning { background-color: #e69f00 !important; } .bg-warning:hover, .bg-warning:focus, a.bg-warning:hover, a.bg-warning:focus { background-color: #cd8d00 !important; } .bg-danger, a.bg-danger { background-color: #e40000 !important; } .bg-danger:hover, .bg-danger:focus, a.bg-danger:hover, a.bg-danger:focus { background-color: #cb0000 !important; } .bg-pink, a.bg-pink { background-color: #f77eb9 !important; } .bg-pink:hover, .bg-pink:focus, a.bg-pink:hover, a.bg-pink:focus { background-color: #f666ac !important; } .img-48 { max-width: 48px; max-height: 48px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .img-72 { max-width: 72px; max-height: 72px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .img-90 { max-width: 90px; max-height: 90px; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .rounded-2 { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .rounded-3 { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .rounded-4 { -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } /************************************************ ************************************************ Animations Css ************************************************ ************************************************/ @-webkit-keyframes slideInUp { from { -webkit-transform: translate3d(0, 7%, 0); transform: translate3d(0, 7%, 0); visibility: visible; opacity: 0.2; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 2; } } @keyframes slideInUp { from { -webkit-transform: translate3d(0, 7%, 0); transform: translate3d(0, 7%, 0); visibility: visible; opacity: 0.2; } to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1; } } /************************************************ ************************************************ Layout Css ************************************************ ************************************************/ .header { padding: 0 1.5rem; z-index: 100; position: fixed; left: 230px; right: 0; background: #ffffff; border-bottom: 1px solid #e0e3e8; min-height: 50px; display: flex; align-items: center; justify-content: space-between; transition: left .3s ease; } .header .toggle-btns #pin-sidebar, .header .toggle-btns #toggle-sidebar { display: flex; justify-content: center; align-items: center; width: 38px; height: 38px; background: #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 0 15px #e5e9ec; border-bottom: 1px solid #eeeeee; } .header .toggle-btns #pin-sidebar i, .header .toggle-btns #toggle-sidebar i { font-size: 1rem; font-weight: 600; color: #01902d; } .header .toggle-btns #pin-sidebar:hover, .header .toggle-btns #toggle-sidebar:hover { background: #01902d; border: 1px solid #01902d; border-bottom: 1px solid #af772b; } .header .toggle-btns #pin-sidebar:hover i, .header .toggle-btns #toggle-sidebar:hover i { color: #ffffff; } .header .toggle-btns #toggle-sidebar { display: none; } @media (max-width: 768px) { .header { margin: 0 0 .75rem 0; left: 0 !important; } .header .toggle-btns #pin-sidebar { display: none; } .header .toggle-btns #toggle-sidebar { display: flex; } } .header-items { display: flex; align-items: center; justify-content: flex-end; } .custom-search { margin: 0 10px 0 0; position: relative; } .custom-search ::-webkit-input-placeholder { color: #333333; } .custom-search :-moz-placeholder { color: #333333; } .custom-search ::-moz-placeholder { color: #333333; } .custom-search :-ms-input-placeholder { color: #333333; } .custom-search .search-query { padding: 7px 15px; color: #333333; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; line-height: 20px; width: 240px; border: 1px solid #dedede; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; } .custom-search .search-query:focus { outline: none; background: #ffffff; width: 280px; } .custom-search i { padding: 0 15px; height: 36px; line-height: 36px; cursor: pointer; position: absolute; right: 0; top: 0; font-size: 1.2rem; border-left: 1px solid #dedede; } .custom-search i:hover { color: #01902d; } @media (max-width: 992px) { .custom-search { display: none; } } .header-actions { display: flex; align-items: center; } .header-actions > li > a { padding: 1rem; display: flex; position: relative; align-items: center; justify-content: center; } .header-actions > li > a > i { font-size: 1.2rem; color: #01902d; } .header-actions > li > a .count-label { position: absolute; top: 8px; right: 5px; width: 16px; height: 16px; line-height: 16px; font-size: .6rem; font-weight: 600; text-align: center; background: #484848; color: #ffffff; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .header-actions > li > a.user-settings { padding: .315rem 0 .315rem 1rem; color: #333333; } .header-actions > li > a.user-settings .avatar { position: relative; margin: 0; width: 40px; height: 40px; } .header-actions > li > a.user-settings .avatar > img { width: 40px; height: 40px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .header-actions > li > a.user-settings .avatar .status { position: absolute; top: -3px; right: -3px; width: 15px; height: 15px; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 3px solid #ffffff; } .header-actions > li > a.user-settings .avatar .status.busy { background: #e40000; } .header-actions > li > a.user-settings .avatar .status.online { background: #18800c; } .header-actions > li > a.user-settings .avatar .status.away { background: #e69f00; } .header-actions > li > a.user-settings span.user-name { margin-right: 8px; vertical-align: middle; font-size: .825rem; display: inline-block; max-width: 90px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .header-actions > li:hover > a, .header-actions > li:focus > a { background: #eff1f5; } .header-actions > li:hover > a i, .header-actions > li:focus > a i { color: #484848; } .header-actions > li:hover .dropdown-menu, .header-actions > li:focus .dropdown-menu { margin-top: 0; display: block; } @media (max-width: 576px) { .header-actions > li > a.user-settings span.user-name { display: none; } .header-actions > li:nth-child(2n) { display: none; } .header-actions > li:first-child { display: none; } } ul.header-notifications li a { padding: .7rem 1rem; display: flex; align-items: center; flex-direction: row; } ul.header-notifications li a > .user-img { position: relative; margin: 0 10px 0 0; } ul.header-notifications li a > .user-img img { width: 36px; height: 36px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } ul.header-notifications li a > .user-img:after { content: ''; position: absolute; right: -3px; bottom: 5px; width: 10px; height: 10px; border: 1px solid #ffffff; background: #01902d; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } ul.header-notifications li a > .user-img.online:after { background: #18800c; } ul.header-notifications li a > .user-img.busy:after { background: #e40000; } ul.header-notifications li a > .user-img.away:after { background: #e69f00; } ul.header-notifications li a .details { display: flex; flex-direction: column; } ul.header-notifications li a .details > .user-title { font-weight: 600; font-size: .875rem; margin: 0 0 5px 0; } ul.header-notifications li a .details .noti-details { font-size: .825rem; line-height: 150%; } ul.header-notifications li a .details .noti-date { opacity: 0.4; line-height: 150%; font-size: .725rem; } ul.header-notifications li a:hover { background: #eff1f5; color: #333333; } ul.header-tasks li { padding: 1rem .8rem; border-bottom: 1px solid #f2f4f9; } ul.header-tasks li p { margin: 0 0 10px 0; padding: 0; line-height: 100%; font-weight: 600; font-size: .9rem; } ul.header-tasks li p span { float: right; font-size: .8rem; color: #888888; } ul.header-tasks li .progress { margin-bottom: 0px; height: 4px; } ul.header-tasks:last-child { border-bottom: 0; } .header-profile-actions { margin: 0; padding: .8rem 0; } .header-profile-actions .header-user-profile { display: flex; flex-direction: column; align-items: center; margin-bottom: .5rem; } .header-profile-actions .header-user-profile .header-user { margin-bottom: .5rem; } .header-profile-actions .header-user-profile .header-user img { width: 4rem; height: 4rem; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .header-profile-actions .header-user-profile p { color: #888888; font-size: .825rem; } .header-profile-actions a { border-bottom: 1px dotted rgba(1, 118, 192, 0.1); padding: .5rem 1rem; display: flex; align-items: center; color: #333333; font-size: .8rem; } .header-profile-actions a:hover { background: #01902d; color: #ffffff; } .header-profile-actions a i { font-weight: 700; margin-right: .5rem; font-size: 1rem; vertical-align: text-top; } .header-profile-actions a:last-child { border-bottom: 0; } /************************************************ ************************************************ Layout CSS ************************************************ ************************************************/ @-webkit-keyframes swing { 0%, 30%, 50%, 70%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 10% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } @keyframes swing { 0%, 30%, 50%, 70%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 10% { -webkit-transform: rotate(10deg); transform: rotate(10deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } .page-wrapper { background: #eff1f5; } .page-wrapper .sidebar-wrapper { width: 230px; height: 100%; background: #ffffff; position: fixed; top: 0; left: 0; z-index: 999; -webkit-transition: left .3s ease, width .3s ease; transition: left .3s ease, width .3s ease; } .page-wrapper .sidebar-wrapper .sidebar-brand { margin: 0 0 1rem 0; background: #01902d; overflow: hidden; } .page-wrapper .sidebar-wrapper .sidebar-brand .logo { padding: 20px 13px 20px 13px; min-height: 50px; display: flex; align-items: center; } .page-wrapper .sidebar-wrapper .sidebar-brand .logo img { max-width: 160px; max-height: 50px; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .page-wrapper .sidebar-wrapper .sidebar-content { position: relative; height: calc(100% - 90px) !important; } .page-wrapper .sidebar-wrapper .sidebar-menu { padding-bottom: 10px; } .page-wrapper .sidebar-wrapper .sidebar-menu .header-menu { font-size: .7rem; font-weight: 400; padding: 20px 20px 5px 15px; display: flex; color: #888888; text-transform: uppercase; pointer-events: none; } .page-wrapper .sidebar-wrapper .sidebar-menu ul li a { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; text-decoration: none; position: relative; padding: 5px 35px 5px 15px; width: 100%; color: #555555; font-size: .825rem; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .page-wrapper .sidebar-wrapper .sidebar-menu ul li a i { margin-right: 7px; font-size: 1.2rem; color: #777777; width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; -ms-flex-negative: 0; flex-shrink: 0; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; } .page-wrapper .sidebar-wrapper .sidebar-menu ul li a .menu-text { -webkit-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; white-space: nowrap; text-overflow: ellipsis; -ms-flex-negative: 1; flex-shrink: 1; overflow: hidden; } .page-wrapper .sidebar-wrapper .sidebar-menu ul li a:hover { background: #eae9e9; color: #555555; } .page-wrapper .sidebar-wrapper .sidebar-menu ul li a:hover i { color: #555555; } .page-wrapper .sidebar-wrapper .sidebar-menu ul li.active-page-link { position: relative; } .page-wrapper .sidebar-wrapper .sidebar-menu ul li.active-page-link a { background: #dcf7e4; color: #555555; } .page-wrapper .sidebar-wrapper .sidebar-menu ul li.active-page-link a i { color: #01902d; } .page-wrapper .sidebar-wrapper .sidebar-menu ul li.active-page-link:after { content: ''; position: absolute; width: 0; height: 0; top: 50%; right: 0px; margin: -10px 0 0 0; border: 10px solid; border-color: transparent #eff1f5 transparent transparent; } .page-wrapper .sidebar-wrapper .sidebar-menu ul li.active > a { background: #dcf7e4; } .page-wrapper .sidebar-wrapper .sidebar-menu ul li.active > a i { color: #01902d; } .page-wrapper .sidebar-wrapper .sidebar-menu ul li.active a.current-page { position: relative; font-weight: 600; color: #01902d; } .page-wrapper .sidebar-wrapper .sidebar-menu ul li.active .sidebar-submenu { display: block; } .page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after { font-family: "icomoon"; font-weight: 400; font-size: 1rem; content: "\e90f"; display: inline-block; position: absolute; right: 15px; top: 15px; -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; } .page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu { display: none; } .page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul { padding: 0; } .page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 9px 35px 9px 42px; font-size: .8rem; } .page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a:before { font-family: "icomoon"; font-weight: 700; content: "\e91b"; margin: 0 10px 0 0; font-size: .5rem; } .page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul li a:hover { background: #e8e8e8; } .page-wrapper .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after { -webkit-transform: rotate(-180deg); transform: rotate(-180deg); right: 15px; } .page-wrapper .page-content { display: inline-block; width: 100%; -webkit-transition: padding-left .3s ease; transition: padding-left .3s ease; min-height: 100vh; padding-left: 230px; } .page-wrapper.pinned .page-content { padding-left: 65px; } .page-wrapper.pinned .header { left: 65px; } @media screen and (max-width: 768px) { .page-wrapper .sidebar-wrapper { left: -230px; } .page-wrapper.toggled .sidebar-wrapper { left: 0px; } .page-wrapper.toggled .header { left: 230px !important; } .page-wrapper .page-content { padding-left: 0px; } .page-wrapper.pinned .page-content { padding-left: 0; } } @media (min-width: 768px) { .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper { width: 65px; } .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-header { padding: 10px; } .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-menu .header-menu { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; display: block; } .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-menu .sidebar-submenu, .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-menu ul > li > a > span, .page-wrapper.pinned:not(.sidebar-hovered) .sidebar-wrapper .sidebar-menu ul > li > a::after { display: none !important; } } .main-container { padding: 0 1.5rem 1.5rem 1.5rem; } .main-container.fixed-height { height: calc(100vh - 110px); padding: 0; } .main-container .fixedBodyScroll { margin: 0; } .main-container .content-wrapper { padding: 0 1.5rem 1.5rem 1.5rem; } /************************************************ ************************************************ Page Header ************************************************ ************************************************/ .page-header { padding: 0 1.5rem; margin: 50px 0 0 0; display: flex; align-items: center; justify-content: space-between; } .app-actions { display: flex; flex-direction: row; } .app-actions li a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: .8rem; color: #01902d; background: #ffffff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .app-actions li a i { font-size: 1rem; margin: 0; } .app-actions li a:hover { background: #01902d; border-bottom: 1px solid #af772b; color: #ffffff; } .app-actions li a#reportrange { padding: .3rem 0.85rem; cursor: pointer; display: flex; align-items: center; background: transparent; box-shadow: none; border: 0; width: auto; color: #333333; font-size: .8rem; } .app-actions li a#reportrange span.range-text { margin: 0 5px 0 5px; } .app-actions li:first-child { border-left: 0; } .app-actions li:last-child { border-right: 0; } @media (max-width: 576px) { .app-actions { display: none; } } /************************************************ ************************************************ Components ************************************************ ************************************************/ .chart-height { position: relative; height: 250px; } .chart-height-md { position: relative; height: 190px; } .chart-height-md1 { position: relative; height: 245px; } .chart-height-md2 { position: relative; height: 200px; } .chart-height-sm { position: relative; height: 150px; } .chart-height-xs { position: relative; height: 120px; } .map-xl { width: 100%; height: calc(100vh - 160px); background: #f6f8fa; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .h-150 { min-height: 150px; } .h-180 { min-height: 180px; } .h-124 { min-height: 124px; } .h-265 { min-height: 265px; } .h-310 { min-height: 310px; } .h-350 { min-height: 350px; } .h-167 { min-height: 167px; } .h-340 { height: 340px; } .h-150 { height: 150px; } .h-360 { min-height: 360px; } .h-400 { min-height: 400px; } .h-420 { min-height: 420px; } .h-200 { min-height: 200px; } /************************************************ ************************************************ Login, Signup, Lock and Error Screens ************************************************ ************************************************/ .error-screen { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; color: #ffffff; height: 100vh; } .error-screen h1 { font-family: 'Erica One'; font-size: 15rem; font-weight: 400; } .error-screen h5 { margin-bottom: 1rem; line-height: 150%; font-size: 1rem; font-weight: 400; } .error-screen .btn { padding: .5rem 1rem; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .login-screen { position: relative; background: #ffffff; margin: 60px auto; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; min-width: 320px; max-width: 320px; } .login-screen .login-logo { margin: 1rem 0 2rem 0; display: flex; font-size: 2rem; font-weight: 700; } .login-screen .login-logo img { max-width: 110px; } .login-screen .login-box { padding: 1.5rem; } .login-screen .login-box h5 { margin: 0 0 1rem 0; font-size: .9rem; line-height: 150%; font-weight: 400; color: #888888; } .login-screen .actions { margin-bottom: .5rem; display: flex; justify-content: flex-end; align-items: center; } .login-screen .actions a.link { color: #333333; } .login-screen .actions a.link:hover { color: #666666; } .login-screen .actions .btn { margin-left: 10px; } .login-screen .actions.align-left { justify-content: flex-start; } .login-screen .forgot-pwd { margin-bottom: .5rem; display: flex; justify-content: flex-start; align-items: center; } .login-screen .forgot-pwd a { color: #333333; } .login-screen .forgot-pwd a:hover { color: #666666; } .login-screen .custom-control { min-height: auto; color: #888888; } .login-screen p.info { padding: 0; margin: 0 0 20px 0; line-height: 150%; color: #888888; text-align: center; } .or { position: relative; text-align: center; margin-bottom: 20px; } .or::before { content: ''; position: absolute; top: 50%; left: 15%; width: 70%; height: 1px; background-color: #f2f4f9; } .or span { position: relative; background-color: #ffffff; padding: 0 10px; z-index: 10; } /*********************** *********************** Pages *********************** ***********************/ /************************************************ ************************************************ User Profile Page ************************************************ ************************************************/ .skillset-container { padding: 1rem; background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; margin-bottom: 1rem; display: flex; flex-direction: column; } .skillset-container h5 { font-size: 1rem; margin: 0 0 1rem 0; } .skillset-container .categories { margin: 5rem 0 0 0; } /************************************************ ************************************************ Icons Page ************************************************ ************************************************/ .icons { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; } .icons span { font-size: 1rem; text-align: center; cursor: pointer; width: 60px; height: 60px; line-height: 60px; color: #333333; -webkit-transition: all 0.5s ease-in-out; -moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; background: #eff1f5; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; margin: 2px; } .icons span:hover { background-color: #01902d; color: #ffffff; } /************************************************ ************************************************ Search Results Page ************************************************ ************************************************/ .search-result { margin-bottom: 3rem; } .search-result a { color: #333333; font-size: 1rem; margin: 0 0 1rem 0; font-weight: 600; display: inline-block; } .search-result p.title { font-size: .9rem; color: #888888; margin: 0 0 .7rem 0; } .search-result p.desc { font-size: .9rem; margin: 0; } @media (max-width: 767px) { .search-result { max-width: 100%; } } /************************************************ ************************************************ Contacts Page ************************************************ ************************************************/ figure.user-card { background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; padding: 2rem 1rem; text-align: center; position: relative; } figure.user-card a.edit-card { position: absolute; right: 15px; top: 15px; width: 36px; height: 36px; display: flex; justify-content: center; align-items: center; background: #ffffff; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; box-shadow: 0 0 15px #e5e9ec; border-bottom: 1px solid #e0e3e8; margin: 0 0 0 5px; opacity: 0.7; } figure.user-card a.edit-card i { font-size: 1rem; color: #01902d; } figure.user-card a.edit-card:hover { background: #01902d; border-bottom: 1px solid #af772b; opacity: 1; } figure.user-card a.edit-card:hover i { color: #ffffff; } figure.user-card .profile { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; max-width: 72px; margin-bottom: 20px; } figure.user-card h5 { margin: 0 0 1rem 0; } figure.user-card h6 { margin: 0 0 15px 0; } figure.user-card h6.designation { margin: 0 0 15px 0; color: #888888; } figure.user-card p { margin: 0; padding: 0 0 15px 0; } figure.user-card .list-group { margin: 0; } .upload-photo-container { padding: 2rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #01902d; margin: 0 0 1rem 0; align-items: center; justify-content: center; display: flex; } .upload-photo-container img.user-thumb { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; width: 60px; height: 60px; margin: 0 10px 0 0; } .upload-photo-container .custom-file-label { border-color: #01902d; } .upload-photo-container .custom-file-label::after { border-left: 0; background: #015d1d; color: #ffffff; -webkit-border-radius: 0 1px 1px 0; -moz-border-radius: 0 1px 1px 0; border-radius: 0 1px 1px 0; } /************************************************ ************************************************ Comments Page ************************************************ ************************************************/ .media.comments { margin-top: 1rem; } .media.comments .media-left a { display: block; } .media.comments a .empty-avatar { height: 64px; width: 64px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; color: #ffffff; background: #01902d; box-shadow: 0 0 15px #e5e9ec; border-bottom: 1px solid #eeeeee; font-size: 1.2rem; text-align: center; display: block; line-height: 60px; } .media.comments a .empty-avatar.sm { width: 48px; height: 48px; line-height: 48px; } .media.comments .media-body h5.media-heading { font-size: 1rem; } .media.comments .media-body h5.media-heading span.date { font-size: .75rem; padding-left: 5px; color: #888888; } .media.comments .media-body p { padding: 0 0 0 15px; margin: 15px 0; border-left: 3px solid #dedede; } .media.comments .comments-footer { margin: 25px 0 50px 20px; } .media.comments .comments-footer ul li { float: left; margin-right: 10px; } .media.comments .comments-form .form-group { margin-bottom: 10px; } .media.disabled { opacity: 0.3; cursor: no-drop; } @media (max-width: 767px) { .media.comments { overflow: auto; } } .media .thumb { width: 60px; height: 60px; } .media .thumb.mr { margin-right: 15px; } .media .thumb.ml { margin-left: 15px; } .media .thumb.mb { margin-bottom: 15px; } .media.center { text-align: center; } .media .media-heading { font-weight: 600; margin: 0 0 1rem 0; } /************************************************ ************************************************ Invoice Page ************************************************ ************************************************/ .invoice-container { padding: 2rem; } .invoice-container .invoice-header .invoice-logo { margin: .8rem 0 0 0; display: inline-block; } .invoice-container .invoice-header .invoice-logo img { max-width: 130px; } .invoice-container .invoice-header address { font-size: .8rem; color: #888888; margin: 0; } .invoice-container .invoice-details { margin: 1rem 0 0 0; padding: 1rem; line-height: 180%; background: #ffffff; border: 1px solid #d3d9e0; } .invoice-container .invoice-details .invoice-num { text-align: right; font-size: .8rem; } .invoice-container .invoice-body { padding: 1rem 0; } .invoice-container .invoice-footer { text-align: center; font-size: .8rem; } .invoice-status { text-align: center; padding: 1rem; background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; margin-bottom: 1rem; } .invoice-status h2.status { margin: 0 0 .8rem 0; } .invoice-status h5.status-title { margin: 0 0 .8rem 0; font-weight: 400; font-size: .85rem; } .invoice-status p.status-type { margin: 0; padding: 0; } .invoice-status i { font-size: 2rem; margin: 0 0 1rem 0; display: inline-block; padding: 1rem; background: #ffffff; border-bottom: 1px solid #e0e3e8; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; color: #01902d; } @media (max-width: 767px) { .invoice-container { padding: 1rem; } } /************************************************ ************************************************ Timeline Page ************************************************ ************************************************/ .timeline { position: relative; background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; padding: 5rem; margin: 0 auto; overflow: hidden; } .timeline:after { content: ""; position: absolute; top: 0; left: 50%; margin-left: -1px; border-right: 2px dashed #eeeeee; 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: #333333; font-size: 1.5rem; } .timeline-row .timeline-time small { display: block; font-size: .8rem; } .timeline-row .timeline-content { position: relative; padding: 20px 30px; background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 0 0 3px #e5e9ec; border-bottom: 1px solid #e0e3e8; } .timeline-row .timeline-content:after { content: ""; position: absolute; top: 20px; height: 3px; width: 40px; } .timeline-row .timeline-content:before { content: ""; position: absolute; top: 20px; right: -50px; width: 20px; height: 20px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; z-index: 100; background: #ffffff; border: 2px dashed #e0e3e8; } .timeline-row .timeline-content h4 { margin: 0 0 20px 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 150%; } .timeline-row .timeline-content p { margin-bottom: 30px; line-height: 150%; } .timeline-row .timeline-content i { font-size: 2rem; color: #01902d; line-height: 100%; padding: 12px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; background: #ffffff; box-shadow: 0 0 3px #e5e9ec; border-bottom: 1px solid #e0e3e8; margin-bottom: 10px; display: inline-block; } .timeline-row .timeline-content .thumbs { margin-bottom: 20px; } .timeline-row .timeline-content .thumbs img { margin-bottom: 10px; } .timeline-row .timeline-content .badge { background: #01902d; border-bottom: 1px solid rgba(0, 0, 0, 0.2); color: #ffffff; } .timeline-row:nth-child(even) .timeline-content { margin-left: 40px; text-align: left; } .timeline-row:nth-child(even) .timeline-content:after { left: -39px; border-right: 18px solid #ffffff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } .timeline-row:nth-child(even) .timeline-content:before { left: -50px; right: initial; } .timeline-row:nth-child(odd) { padding-left: 0; padding-right: 50%; } .timeline-row:nth-child(odd) .timeline-time { right: auto; left: 50%; text-align: left; margin-right: 0; margin-left: 20px; } .timeline-row:nth-child(odd) .timeline-content { margin-right: 40px; margin-left: 0; text-align: right; } .timeline-row:nth-child(odd) .timeline-content:after { right: -39px; border-left: 18px solid #ffffff; border-top: 10px solid transparent; border-bottom: 10px solid transparent; } @media (max-width: 767px) { .timeline { padding: 15px 10px; } .timeline:after { left: 28px; } .timeline .timeline-row { padding-left: 0; margin-bottom: 16px; } .timeline .timeline-row .timeline-time { position: relative; right: auto; top: 0; text-align: left; margin: 0 0 6px 56px; } .timeline .timeline-row .timeline-time strong { display: inline-block; margin-right: 10px; } .timeline .timeline-row .timeline-icon { top: 52px; left: -2px; margin-left: 0; } .timeline .timeline-row .timeline-content { padding: 15px; margin-left: 56px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); position: relative; } .timeline .timeline-row .timeline-content:after { right: auto; left: -39px; top: 32px; } .timeline .timeline-row:nth-child(odd) { padding-right: 0; } .timeline .timeline-row:nth-child(odd) .timeline-time { position: relative; right: auto; left: auto; top: 0; text-align: left; margin: 0 0 6px 56px; } .timeline .timeline-row:nth-child(odd) .timeline-content { margin-right: 0; margin-left: 55px; } .timeline .timeline-row:nth-child(odd) .timeline-content:after { right: auto; left: -39px; top: 32px; border-right: 18px solid #01902d; 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; } } /************************************************ ************************************************ Blog Page ************************************************ ************************************************/ .blog { background: #ffffff; margin-bottom: 1.25rem; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; margin-bottom: 1rem; } .blog .blog-body { padding: 1.25rem; position: relative; } .blog .blog-body h1.blog-title { margin: 0 0 1rem 0; } .blog .blog-body h2.blog-title { margin: 0 0 1rem 0; font-size: 1.5rem; } .blog .blog-body h3.blog-title { margin: 0 0 1rem 0; } .blog .blog-body h6.blog-date { font-size: .7rem; font-weight: 400; margin: 0 0 1rem 0; } .blog .blog-body h6.blog-date .category { font-style: italic; color: #01902d; margin-right: .7rem; } .blog .blog-body h6.blog-date .divider { color: #888888; margin-right: .5rem; } .blog .blog-body h6.blog-date .date { color: #888888; } .blog .blog-body .blog-description { margin: 0 0 1rem 0; } .blog .blog-body .blog-description p { margin: 0 0 1.5rem 0; } .blog .blog-body ul.blog-list { margin: 2rem 0 2rem 4rem; } .blog .blog-body ul.blog-list li { padding: .5rem 0; } .blog .blog-body ul.blog-list li:before { content: ""; display: block; float: left; margin-top: 0.75em; margin-left: -20px; width: 5px; height: 5px; vertical-align: middle; background: #e40000; } .blog .blog-body .img-fluid { margin: 0 0 1rem 0; } .blog .blog-body .blog-actions { margin: 2rem 0 0 0; display: flex; align-items: center; justify-content: space-between; } .blog .blog-body .blog-actions .actions { display: flex; } .blog .blog-body .blog-actions .actions a { margin: 0 1rem; color: #000000; font-weight: 600; font-size: .725rem; display: flex; align-items: center; } .blog .blog-body .blog-actions .actions a i { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; width: 30px; height: 30px; margin-right: .3rem; color: #ffffff; font-size: 1rem; display: flex; align-items: center; justify-content: center; } .blog .blog-body .blog-actions .actions a i.red { background: #484848; } .blog .blog-body .blog-actions .actions a i.green { background: #01902d; } .blog .blog-body .blog-actions .actions a i.blue { background: #074694; } .blog .blog-body .blog-actions .actions a i.grey { background: #888888; } .blog img.blog-img { width: 100%; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } @media (max-width: 767px) { .blog { background: #ffffff; margin-bottom: 1.25rem; } .blog .blog-body .blog-actions { flex-direction: column; } .blog .blog-body .blog-actions .actions a { margin: 1rem .3rem 0 .3rem; } } .categories { display: flex; flex-wrap: wrap; } .categories .badge { margin: 0 .3rem .3rem 0; color: #333333; background: #eff1f5; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .categories .badge.badge-primary { color: #ffffff; } .categories .label { margin: 0 .3rem .3rem 0; } .popular-posts a { border-bottom: 1px solid rgba(0, 0, 0, 0.1); padding: 0 0 .7rem 0; margin: 0 0 .7rem 0; color: #000000; display: flex; align-items: center; } .popular-posts a img.post-img { max-width: 60px; margin-right: .8rem; } .popular-posts a .post-content h6.post-title { margin: 0 0 .4rem 0; font-size: .7rem; } .popular-posts a .post-content h6.post-date { font-size: .7rem; font-weight: 400; margin: 0; } .popular-posts a .post-content h6.post-date .category { text-transform: uppercase; color: #01902d; margin-right: .2rem; font-weight: 600; } .popular-posts a .post-content h6.post-date .divider { color: #888888; margin-right: .2rem; } .popular-posts a .post-content h6.post-date .date { color: #888888; } .popular-posts a:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } /************************************************ ************************************************ Accounts Settings Page ************************************************ ************************************************/ .account-settings .user-profile { margin: 0 0 1rem 0; border-bottom: 1px solid #f2f2f2; padding-bottom: 1rem; text-align: center; } .account-settings .user-profile .user-avatar { margin: 0 0 1rem 0; } .account-settings .user-profile .user-avatar img { width: 90px; height: 90px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .account-settings .user-profile h5.user-name { margin: 0 0 .5rem 0; } .account-settings .user-profile h6.user-email { margin: 0; font-weight: 400; color: #888888; } .account-settings .setting-links a { display: flex; align-items: center; padding: .3rem 0; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .account-settings .setting-links a i { font-size: .9rem; color: #01902d; margin: 0 .8rem 0 0; vertical-align: middle; position: relative; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: #f2f4f9; } .account-settings .setting-links a:hover { color: #333333; background: #f2f4f9; } /************************************************ ************************************************ Grid Page ************************************************ ************************************************/ .grid-container .column { border: 1px solid #01902d; background: #01902d; color: #ffffff; padding: .5rem .8rem; font-size: .725rem; margin: .2rem 0; border-radius: 2px; } /************************************************ ************************************************ Thumbnails/Images Page ************************************************ ************************************************/ .avatar-group { display: flex; align-items: center; } .avatar-group .avatar { display: inline-block; } .avatar { width: 48px; height: 48px; position: relative; margin: .5rem; } .avatar img { width: 100%; height: 100%; object-fit: cover; } .avatar img.circle { border-radius: 100% !important; } .avatar img.half-circle { border-radius: 30% !important; } .avatar img.rounded { border-radius: 10% !important; } .avatar.xs { width: 24px; height: 24px; } .avatar.sm { width: 36px; height: 36px; } .avatar.md { width: 48px; height: 48px; } .avatar.lg { width: 64px; height: 64px; } .avatar.xl { width: 72px; height: 72px; } .avatar.xxl { width: 90px; height: 90px; } .avatar.xxxl { width: 120px; height: 120px; } .text-avatar-group { display: flex; align-items: center; } .text-avatar { display: flex; justify-content: center; align-items: center; margin: .5rem; background: #01902d; color: #ffffff; font-weight: 700; border-radius: 4px; position: relative; } .text-avatar.secondary { background: #484848; } .text-avatar.success { background: #18800c; } .text-avatar.warning { background: #e69f00; } .text-avatar.danger { background: #e40000; } .text-avatar.info { background: #074694; } .text-avatar.dark { background: #1b1b1b; } .text-avatar.xs { width: 24px; height: 24px; font-size: 11px; } .text-avatar.sm { width: 36px; height: 36px; font-size: 14px; } .text-avatar.md { width: 48px; height: 48px; font-size: 18px; } .text-avatar.lg { width: 64px; height: 64px; font-size: 21px; } .text-avatar.xl { width: 72px; height: 72px; font-size: 30px; } .text-avatar.xxl { width: 90px; height: 90px; font-size: 36px; } .text-avatar.xxxl { width: 120px; height: 120px; font-size: 48px; } .text-avatar.circle { border-radius: 100% !important; } .text-avatar.rounded { border-radius: 10% !important; } /************************************************ ************************************************ Tasks Page ************************************************ ************************************************/ .task-section { background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; } .labels-container { position: relative; padding: 1rem 0; border-right: 1px solid #ededed; height: calc(100vh - 160px); display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } .labels-container .filters-block { margin: 1rem 0 2rem 0; } .labels-container .filters-block h5 { font-size: .8rem; text-transform: uppercase; margin: 0 0 1rem 0; padding: 0 1rem; } .labels-container .filters-block .filters a { font-size: .75rem; padding: .5rem 1rem; color: #888888; display: flex; align-items: center; } .labels-container .filters-block .filters a i { font-size: 1rem; margin: 0 .5rem 0 0; } .labels-container .filters-block .filters a:hover { background: #dcf7e4; color: #333333; } .labels-container .filters-block .filters a.active { background: #dcf7e4; color: #01902d; } .labels-container .tags-block { margin: 1rem 0 1rem 0; } .labels-container .tags-block h5 { font-size: .8rem; text-transform: uppercase; margin: 0 0 .8rem 0; padding: 0 1rem; } .labels-container .tags-block .tags a { font-size: .75rem; padding: .3rem 1rem; color: #888888; display: flex; align-items: center; } .labels-container .tags-block .tags a i { font-size: 1rem; margin: 0 .5rem 0 0; } .labels-container .tags-block .tags a:hover { background: #dcf7e4; color: #333333; } @media (max-width: 767px) { .labels-container .filters-block h5 { padding: 0 .75rem; } .labels-container .filters-block .filters a { padding: .5rem .75rem; } .labels-container .tags-block h5 { padding: 0 .75rem; } .labels-container .tags-block .tags a { padding: .5rem .75rem; } } .tasks-container { position: relative; padding: 0 0 1rem 0; height: calc(100vh - 230px); } .tasks-container .tasks-header { display: flex; align-items: center; justify-content: space-between; flex-direction: row; padding: .5rem 1.5rem; border-bottom: 1px solid #ededed; -webkit-border-radius: 0 3px 0 0; -moz-border-radius: 0 3px 0 0; border-radius: 0 3px 0 0; } .tasks-container .tasks-header h3 { margin: 0; } .tasks-container .tasks-header h3 span { display: flex; font-size: .8rem; line-height: 180%; font-weight: 400; color: #01902d; } @media (max-width: 767px) { .tasks-container .tasks-header { padding: 1rem 1rem; } .tasks-container .tasks-header h3 { display: none; } } .task-list { position: relative; height: 100%; } .task-list .task-block { position: relative; display: flex; align-items: center; flex-direction: row; padding: 1.5rem 2rem; border-bottom: 1px solid #f2f2f2; } .task-list .task-block .task-checkbox { margin: 0 2rem 0 0; position: relative; } .task-list .task-block .task-checkbox input[type="checkbox"] { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; } .task-list .task-block .task-checkbox input[type="checkbox"]:focus { outline: 0; } .task-list .task-block .task-checkbox input[type="checkbox"]:checked + .ripple-container .check-off { border-color: #000000; } .task-list .task-block .task-checkbox input[type="checkbox"]:checked + .ripple-container .check-on { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); -webkit-transition: -webkit-transform 0.3s; -moz-transition: -moz-transform 0.3s; transition: transform 0.3s; color: #000000; position: absolute; left: 2px; top: 2px; } .task-list .task-block .task-checkbox input[type="checkbox"]:checked + .ripple-container .check-on i { font-size: 1.3rem; font-weight: 700; } .task-list .task-block .task-checkbox input[type="checkbox"] + .ripple-container { width: auto; position: relative; display: inline-block; width: 25px; height: 25px; top: 0; pointer-events: none; } .task-list .task-block .task-checkbox input[type="checkbox"] + .ripple-container:before { content: ""; position: absolute; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; display: block; height: auto; left: 0; top: 0; right: 0; bottom: 0; -webkit-transition: all 0.5s; -moz-transition: all 0.5s; transition: all 0.5s; } .task-list .task-block .task-checkbox input[type="checkbox"] + .ripple-container .check-off { position: absolute; width: 25px; height: 25px; left: 0; top: 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 2px solid #666666; transition: border-color ease 0.28s; } .task-list .task-block .task-checkbox input[type="checkbox"] + .ripple-container .check-on { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0); -webkit-transition: all 0s; -moz-transition: all 0s; transition: all 0s; } .task-list .task-block .task-details { -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; opacity: 1; flex: 1; } .task-list .task-block .task-details .task-name { margin-bottom: 1rem; font-size: .9rem; font-weight: 600; } .task-list .task-block .task-details .task-desc { margin-bottom: 1rem; color: #888888; line-height: 180%; } .task-list .task-block .task-details .task-types { margin: 0; } .task-list .task-block ul.task-actions { width: 110px; display: flex; flex: 0 0 1%; align-items: center; justify-content: flex-end; } .task-list .task-block ul.task-actions li > a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; color: #333333; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .task-list .task-block ul.task-actions li > a i { font-size: 1.4rem; } .task-list .task-block ul.task-actions li > a:hover { background: #f2f4f9; } .task-list .task-block ul.task-actions li > a.important.active { color: #e40000; } .task-list .task-block ul.task-actions li > a.star.active { color: #e69f00; } .task-list .task-block.task-checked { background: #dcf7e4; } .task-list .task-block.task-checked .task-details { opacity: 0.7; text-decoration: line-through; } .task-list .task-block.task-checked ul.task-actions { opacity: 0.7; } .task-list .task-block .dropdown-menu { background: #262b31; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .task-list .task-block .dropdown-menu:before { border-bottom: 9px solid #262b31; right: 10px; left: initial; } .task-list .task-block .dropdown-menu a { padding: .3rem 1rem; color: #ffffff; display: flex; align-items: center; } .task-list .task-block .dropdown-menu a i { font-size: .9rem; margin: 0 .5rem 0 0; } .task-list .task-block .dropdown-menu a:hover { background: #1b1e23; } @media (max-width: 767px) { .task-list .task-block { align-items: flex-start; flex-direction: column; padding: 1rem 1rem; } .task-list .task-block .task-checkbox { margin: 0 0 1rem 0; } .task-list .task-block .task-details .task-types .badge { max-width: 30px; overflow: hidden; white-space: nowrap; padding: .35rem .3rem; text-overflow: ellipsis; } } /*************** 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: #888888; } .chats li .chats-hour { margin: 0 0 0 70px; padding: 2px; margin-bottom: 20px; font-size: .65rem; } .chats li .chats-hour > span { font-size: 16px; color: #18800c; } .chats li .chats-text { margin: 0 0 0 70px; padding: 15px; -webkit-border-radius: 25px; -moz-border-radius: 25px; border-radius: 25px; background-color: #eff1f5; left: 15px; line-height: 200%; } .chats li .chats-text:before { content: ''; position: absolute; width: 0; height: 0; top: 25px; left: 50px; border: 10px solid; border-color: transparent #eff1f5 transparent transparent; } .chats li.chats-right > .chats-text { text-align: right; right: 16px; margin: 0 70px 0 0; background-color: #dfe3eb; } .chats li.chats-right > .chats-text:before { left: auto; right: 50px; border-color: transparent transparent transparent #dfe3eb; } .chats li.chats-right > .chats-hour { text-align: right; margin: 0 70px 0 0; } /************************************************ ************************************************ Chat Page ************************************************ ************************************************/ .chat-section { background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; } .chat-search-box { -webkit-border-radius: 3px 0 0 0; -moz-border-radius: 3px 0 0 0; border-radius: 3px 0 0 0; padding: .75rem 1rem; } .chat-search-box .input-group .form-control { -webkit-border-radius: 2px 0 0 2px; -moz-border-radius: 2px 0 0 2px; border-radius: 2px 0 0 2px; border-right: 0; } .chat-search-box .input-group .form-control:focus { border-right: 0; } .chat-search-box .input-group .input-group-btn .btn { -webkit-border-radius: 0 2px 2px 0; -moz-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; margin: 0; } .chat-search-box .input-group .input-group-btn .btn i { font-size: 1.2rem; line-height: 100%; vertical-align: middle; } @media (max-width: 767px) { .chat-search-box { display: none; } } .users-container { position: relative; padding: 1rem 0; border-right: 1px solid #ededed; height: calc(100vh - 160px); display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } .users { padding: 0; } .users .person { position: relative; width: 100%; padding: 10px 1rem; cursor: pointer; display: flex; align-items: center; } .users .person:hover { background: #f2f4f9; } .users .person.active-user { background: #dcf7e4; } .users .person:last-child { border-bottom: 0; } .users .person .user { position: relative; margin-right: 10px; } .users .person .user img { width: 36px; height: 36px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .users .person .user .status { width: 14px; height: 14px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; background: #f2f4f9; position: absolute; top: 25px; right: 0; border: 2px solid #ffffff; } .users .person .user .status.online { background: #18800c; } .users .person .user .status.offline { background: #cfd6e9; } .users .person .user .status.away { background: #e69f00; } .users .person .user .status.busy { background: #e40000; } .users .person p.name-time { font-weight: 600; font-size: .85rem; line-height: 150%; } .users .person p.name-time .time { font-weight: 400; font-size: .7rem; text-align: right; color: #888888; display: flex; } @media (max-width: 767px) { .users .person p.name-time { display: none; } .users .person p.name-time .time { display: none; } } .active-user-chatting { display: flex; align-items: center; justify-content: space-between; flex-direction: row; padding: .75rem 1rem; border-bottom: 1px solid #ededed; -webkit-border-radius: 0 3px 0 0; -moz-border-radius: 0 3px 0 0; border-radius: 0 3px 0 0; } .active-user-chatting .active-user-info { display: flex; align-items: center; } .active-user-chatting .active-user-info img.avatar { margin: 0 10px 0 0; width: 40px; height: 40px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .active-user-chatting .active-user-info > .avatar-info h5 { font-size: .9rem; } .active-user-chatting .active-user-info > .avatar-info .typing { color: #888888; font-size: .725rem; } .active-user-chatting .chat-actions { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; } .active-user-chatting .chat-actions a { width: 48px; height: 36px; display: flex; justify-content: center; align-items: center; background: #ffffff; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; box-shadow: 0 0 3px #e5e9ec; border-bottom: 1px solid #e0e3e8; margin: 0 0 0 5px; } .active-user-chatting .chat-actions a i { font-size: 1rem; color: #01902d; } .active-user-chatting .chat-actions a:hover { background: #01902d; border-bottom: 1px solid #af772b; } .active-user-chatting .chat-actions a:hover i { color: #ffffff; } @media (max-width: 767px) { .active-user-chatting { align-items: flex-start; flex-direction: column; } .active-user-chatting .chat-actions { display: none; } } .chat-container { position: relative; padding: 1rem 0 1rem 1rem; height: calc(100vh - 290px); } .chat-container .chat-box { padding: 0 1rem 0 0; } .chat-container .chat-box li.chat-left, .chat-container .chat-box li.chat-right { display: flex; flex: 1; flex-direction: row; margin-bottom: 40px; } .chat-container .chat-box li img { width: 48px; height: 48px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .chat-container .chat-box li .chat-avatar { margin-right: 20px; } .chat-container .chat-box li .chat-hour { padding: 0; font-size: .75rem; margin: 10px 0 0 0; } .chat-container .chat-box li .chat-hour > span { font-size: 16px; color: #18800c; } .chat-container .chat-box li .chat-name { font-size: .75rem; color: #999999; text-align: center; } .chat-container .chat-box li .chat-text { padding: .9rem 1rem; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; background: #ffffff; border-bottom: 1px solid #eeeeee; line-height: 150%; position: relative; max-width: 70%; font-size: .825rem; } .chat-container .chat-box li .chat-text p { font-weight: 400; } .chat-container .chat-box li .chat-text:before { content: ''; position: absolute; width: 0; height: 0; top: 10px; left: -20px; border: 10px solid; border-color: transparent #ffffff transparent transparent; } .chat-container .chat-box li.chat-right { justify-content: flex-end; } .chat-container .chat-box li.chat-right > .chat-avatar { margin-left: 20px; margin-right: 0; } .chat-container .chat-box li.chat-right > .chat-text { text-align: right; } .chat-container .chat-box li.chat-right > .chat-text:before { right: -20px; border-color: transparent transparent transparent #ffffff; left: inherit; } .chat-container .chat-box li.divider { position: relative; display: flex; align-items: center; margin: 2rem 0; color: #888888; font-size: .7rem; font-weight: 600; letter-spacing: .5px; text-transform: uppercase; } .chat-container .chat-box li.divider:before { content: ''; display: block; flex: 1; height: 1px; background-color: #dedede; margin-right: 10px; } .chat-container .chat-box li.divider:after { content: ''; display: block; flex: 1; height: 1px; background-color: #dedede; margin-left: 10px; } @media (max-width: 767px) { .chat-container { padding: .5rem 0 .5rem 1rem; height: calc(100vh - 220px); } .chat-container .chat-box li.chat-left, .chat-container .chat-box li.chat-right { flex-direction: column; margin-bottom: 30px; } .chat-container .chat-box li img { width: 32px; height: 32px; } .chat-container .chat-box li.chat-left { align-items: flex-start; } .chat-container .chat-box li.chat-left .chat-avatar { margin: 0 0 5px 0; display: flex; align-items: center; } .chat-container .chat-box li.chat-left .chat-name { margin-left: 5px; } .chat-container .chat-box li.chat-right { align-items: flex-end; } .chat-container .chat-box li.chat-right .chat-avatar { order: -1; margin: 0 0 5px 0; align-items: center; display: flex; justify-content: right; flex-direction: row-reverse; } .chat-container .chat-box li.chat-right .chat-name { margin-right: 5px; } .chat-container .chat-box li .chat-text { font-size: .8rem; } .chat-container .chat-box li .chat-text:before { border: 0; } } .chat-form { margin: 1rem 1rem 0 0; } .chat-form .form-group { display: flex; align-items: center; justify-content: center; flex-direction: row; } .chat-form .form-group textarea { height: 45px; } .chat-form .form-group .btn { display: flex; width: 60px; height: 45px; margin-left: .3rem; display: flex; align-items: center; justify-content: center; } .chat-form .form-group .btn i { font-size: 1.5rem; color: #ffffff; } @media (max-width: 767px) { .chat-form { display: none; } } .call-container { margin: 2rem 0; display: flex; align-items: center; justify-content: center; flex-direction: column; } .call-container .current-user { margin: 0 0 1.5rem 0; } .call-container .current-user img { width: 90px; height: 90px; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } .call-container h5.calling-user-name { font-weight: 700; margin: 0 0 2rem 0; } .call-container h5.calling-user-name .calling { color: #01902d; } .call-container .calling-btns { display: flex; align-items: center; justify-content: center; flex-direction: row; } .call-container .calling-btns .btn { width: 60px; height: 60px; margin: .3rem .5rem; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .call-container .calling-btns .btn i { font-size: 1.7rem; } /************************************************ ************************************************ Documents Page ************************************************ ************************************************/ .documents-section { background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; } .docs-type-container { position: relative; padding: 1rem 0; border-right: 1px solid #ededed; height: calc(100vh - 160px); display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; } .docs-type-container .docs-block { margin: 1rem 0 2rem 0; } .docs-type-container .docs-block h5 { font-size: .8rem; text-transform: uppercase; margin: 0 0 .5rem 0; padding: 0 1.5rem; } .docs-type-container .docs-block .doc-labels a { font-size: .85rem; padding: .7rem 1.5rem; color: #888888; display: flex; align-items: center; } .docs-type-container .docs-block .doc-labels a i { font-size: 1rem; margin: 0 .5rem 0 0; } .docs-type-container .docs-block .doc-labels a:hover { background: #484848; color: #ffffff; } .docs-type-container .docs-block .doc-labels a.active { background: #01902d; color: #ffffff; } @media (max-width: 767px) { .docs-type-container .docs-block h5 { padding: 0 .75rem; } .docs-type-container .docs-block .doc-labels a { padding: .5rem .75rem; } } .documents-container { position: relative; padding: 0 0 1rem 0; height: calc(100vh - 245px); } .documents-container .documents-header { display: flex; align-items: center; justify-content: space-between; flex-direction: row; padding: 1rem 1.5rem; border-bottom: 1px solid #ededed; } .documents-container .documents-header h3 { margin: 0; } .documents-container .documents-header h3 span { display: flex; font-size: .9rem; line-height: 180%; color: #01902d; } .documents-container .documents-body { padding: 1.5rem; } @media (max-width: 767px) { .documents-container .documents-header { padding: 1rem 1rem; } .documents-container .documents-header h3 { display: none; } .documents-container .documents-body { padding: 1rem 1rem; } } .doc-block { position: relative; display: flex; align-items: center; flex-direction: column; padding: 3rem 1.5rem; background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 1px solid #dedede; border-bottom: 1px solid #e0e3e8; margin: 0 0 1rem 0; } .doc-block .doc-icon { width: 100px; height: 100px; padding: 1rem; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; margin: 0 0 1rem 0; background: #ffffff; box-shadow: 0 0 2px #e5e9ec; border-bottom: 1px solid #eeeeee; } .doc-block .doc-icon img { width: 50px; height: 50px; } .doc-block .doc-title { font-size: .9rem; font-weight: 600; margin: 0 0 1rem 0; } /************************************************ ************************************************ Pricing Page ************************************************ ************************************************/ .pricing-plan { margin: 0 0 1.5rem 0; width: 100%; position: relative; background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; } .pricing-plan .pricing-header { padding: 0; margin-bottom: 1rem; text-align: center; background: #01902d; -webkit-border-radius: 10px 10px 0px 0px; -moz-border-radius: 10px 10px 0px 0px; border-radius: 10px 10px 0px 0px; } .pricing-plan .pricing-header .pricing-title { font-size: 1.2rem; color: #ffffff; padding: 1rem 0; text-transform: uppercase; font-weight: 600; margin: 0; text-shadow: 0 30px 10px rgba(0, 0, 0, 0.15); } .pricing-plan .pricing-header .pricing-cost { color: #ffffff; padding: 1rem 0; font-size: 2.5rem; font-weight: 700; text-shadow: 0 30px 10px rgba(0, 0, 0, 0.15); } .pricing-plan .pricing-header .pricing-save { color: #ffffff; padding: .8rem 0; font-size: 1rem; font-weight: 700; } .pricing-plan .pricing-header.secondary { background: #484848; } .pricing-plan .pricing-features { padding: 2rem; margin: 20px 0; text-align: left; } .pricing-plan .pricing-features li { padding: 15px 15px 15px 40px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; position: relative; line-height: 100%; } .pricing-plan .pricing-features li:before { position: absolute; left: 15px; top: 15px; font-size: 1rem; color: #000000; content: "\e9ec"; font-family: 'icomoon'; } .pricing-plan .pricing-footer { -webkit-border-radius: 0 0 3px 3px; -moz-border-radius: 0 0 3px 3px; border-radius: 0 0 3px 3px; text-align: center; padding: 1rem 0 2rem 0; } @media (max-width: 767px) { .pricing-plan .pricing-header { text-align: center; } .pricing-plan .pricing-header i { display: block; float: none; margin-bottom: 1.5rem; } } /************************************************ ************************************************ Coming Soon ************************************************ ************************************************/ .countdown-container { padding: 4rem 0; text-align: center; color: #888888; } .countdown-container h3.countdown-title { font-family: 'ZCOOL KuaiLe', cursive; } #countdown { margin: 70px auto 30px auto; display: flex; justify-content: center; font-family: 'ZCOOL KuaiLe', cursive; } #countdown li { min-width: 180px; display: flex; align-items: center; flex-direction: column; } #countdown li.num { font-size: 6rem; font-weight: 600; line-height: 120%; color: #ffffff; } #countdown li .text { font-size: .9rem; font-weight: 400; display: block; padding: .7rem 0; font-style: italic; line-height: 120%; } @media (max-width: 992px) { #countdown li { min-width: 150px; } #countdown li.num { font-size: 3rem; } #countdown li .text { font-size: .8rem; } } @media (max-width: 767px) { #countdown li { min-width: 90px; } #countdown li.num { font-size: 2rem; } #countdown li .text { font-size: .7rem; } } .countdown-form { display: inline-block; margin: 2rem 0 1rem 0; position: relative; font: 400 .8rem 'Open Sans', sans-serif; } .countdown-form input.countdown-email { width: 320px; height: 54px; padding: 13px 5px 13px 20px; float: left; font-size: .9rem; color: #888888; border: 0; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; outline: none; } .countdown-form .countdown-btn { position: absolute; right: 5px; top: 5px; border: none; height: 44px; background: #01902d; padding: 0 15px; font-size: .9rem; font-weight: 600; color: #ffffff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .countdown-form .countdown-btn:hover, .countdown-form .countdown-btn:focus { color: #ffffff; background-color: #017725; outline: none; cursor: pointer; } .countdown-note { color: #ffffff; } .social-btns { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; padding: 50px 0 0 0; } .social-btns .social-icon { display: flex; align-items: center; justify-content: center; cursor: pointer; margin: .7rem; width: 48px; height: 48px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; text-align: center; position: relative; z-index: 1; color: #ffffff; background: rgba(255, 255, 255, 0.05); -webkit-transition: background 0.2s, color 0.2s; -moz-transition: background 0.2s, color 0.2s; transition: background 0.2s, color 0.2s; } .social-btns .social-icon:after { top: -7px; left: -7px; padding: 7px; box-shadow: 0 0 0 3px #ffffff; -webkit-transition: -webkit-transform 0.2s, opacity 0.2s; -webkit-transform: scale(0.8); -moz-transition: -moz-transform 0.2s, opacity 0.2s; -moz-transform: scale(0.8); -ms-transform: scale(0.8); transition: transform 0.2s, opacity 0.2s; transform: scale(0.8); opacity: 0; pointer-events: none; position: absolute; width: 100%; height: 100%; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; content: ''; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; } .social-btns .social-icon:before { speak: none; font-size: 24px; line-height: 48px; font-style: normal; font-weight: normal; font-variant: normal; text-transform: none; display: block; -webkit-font-smoothing: antialiased; } .social-btns .social-icon:hover { background: #ffffff; color: #01902d; } .social-btns .social-icon:hover:after { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); transform: scale(1); opacity: 1; } /************************************************ ************************************************ Widgets CSS ************************************************ ************************************************/ .vs { margin: auto; width: 0; text-align: center; position: relative; height: 100%; } .vs:before { position: absolute; background: #dedede; width: 1px; height: 150px; content: ""; top: 50%; left: 0; margin-top: -75px; } .vs:after { position: absolute; top: 50%; left: 0; content: "vs"; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; width: 36px; height: 36px; background: #dedede; margin-left: -18px; margin-top: -18px; color: #333333; line-height: 36px; text-align: center; } @media (max-width: 992px) { .vs { margin: 30px auto; min-height: 90px; } .vs:before { height: 90px; margin-top: -45px; } } ul.customer-rating li { margin-bottom: 15px; display: flex; justify-content: flex-start; } ul.customer-rating li .customer { margin-right: 10px; } ul.customer-rating li .customer img { width: 48px; height: 48px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } ul.customer-rating li .customer-review .stars { margin: 10px 0 15px 0; width: 100%; } ul.customer-rating li .customer-review .stars img { width: 12px; height: 12px; } ul.customer-rating li .customer-review h5 { margin: 0 0 10px 0; font-size: .875rem; } ul.customer-rating li .customer-review h6.by { margin: 0 0 10px 0; font-size: .8rem; font-weight: 400; } ul.customer-rating li .customer-review h6.by a { color: #888888; } ul.customer-rating li .customer-review p { margin: 0 0 5px 0; line-height: 150%; } ul.customer-rating li:last-child { margin-bottom: 0px; } .invoices-status { text-align: center; } .invoices-status ul li { padding: .5rem 1rem; color: #ffffff; } .invoices-status ul li:first-child { -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; background: #016d22; } .invoices-status ul li:nth-child(2) { background: #01902d; } .invoices-status ul li:nth-child(3) { background: #01b338; } .invoices-status ul li:last-child { -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; background: #01d743; } .invoices-status ul h2 { margin: 0; } .invoices-status ul h6 { font-weight: 400; } .overall-rating .rating-header { padding: 0; } .overall-rating .rating-header .rating-number { font-size: 2.5rem; font-weight: 700; display: inline-block; vertical-align: middle; } .overall-rating .rating-header .rating-box { display: inline-block; margin-left: .5rem; } .overall-rating .rating-header .rating-box img.star { max-width: 18px; max-height: 18px; margin: 0; } .revenue .revenue-header { padding: 0; } .revenue .revenue-header .revenue-number { font-size: 2.5rem; font-weight: 700; display: inline-block; vertical-align: middle; } .revenue .revenue-header i { margin: 0 .3rem; font-size: 1.5rem; vertical-align: middle; } .revenue .revenue-header small { font-size: .8rem; color: #888888; } .traffic .traffic-header { padding: 0; } .traffic .traffic-header .traffic-number { font-size: 2.5rem; font-weight: 700; display: inline-block; vertical-align: middle; } .traffic .traffic-header i { margin: 0 .3rem; font-size: 1.5rem; vertical-align: middle; } .traffic .traffic-header small { font-size: .8rem; color: #888888; } .graphs-stats { padding: 0; } .graphs-stats .count { font-size: 2.5rem; font-weight: 700; display: inline-block; vertical-align: middle; } .graphs-stats i { margin: 0 .3rem; font-size: 1.5rem; vertical-align: middle; } .graphs-stats small { font-size: .8rem; color: #888888; } table.projects-table { margin: 0; font-size: .825rem; border: 0; background: #ffffff; -webkit-border-radius: 0 0 10px 10px; -moz-border-radius: 0 0 10px 10px; border-radius: 0 0 10px 10px; } table.projects-table thead th { background-color: #01902d; padding: .8rem 1.25rem; border: 0; color: #ffffff; } table.projects-table td { padding: 1rem 1.25rem; vertical-align: middle; border-top: 0; } table.projects-table .project-details { display: flex; flex-direction: row; align-items: center; } table.projects-table .project-details img.avatar { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; height: 40px; width: 40px; margin: 0 .5rem 0 0; } table.projects-table .project-details .project-info { display: flex; flex-direction: column; } table.projects-table .project-details .project-info p { line-height: 150%; margin: 0; font-size: .825rem; font-weight: 600; } table.projects-table .project-details .project-info p:last-of-type { font-size: .725rem; font-weight: 400; color: gray; } table.projects-table .project-details .project-info .progress { margin: 0; height: 6px; } table.projects-table .project-details .project-info .progress .progress-bar { background: #01902d; } table.projects-table .project-details .project-info .status { display: flex; align-items: center; } table.projects-table .project-details .project-info .status i { display: inline-block; margin-right: 5px; font-size: 1.2rem; vertical-align: middle; } table.projects-table .member figure, table.projects-table .member .member-info { display: inline-block; vertical-align: top; margin: 0; } table.projects-table .member img { -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; height: 40px; width: 40px; } .draggable-events { margin: 50px 0 0 0; } .draggable-events h6 { line-height: 100%; margin: 0 0 10px 0; } .draggable-events #externalDraggableEvents { margin: 0 0 .5rem 0; } .draggable-events .fc-event { padding: .2rem .5rem; margin: 0 0 1px 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; cursor: move; } .custom-btn-group { margin: auto; display: flex; justify-content: center; flex-wrap: wrap; } .custom-btn-group .btn { margin: .3rem; min-width: 90px; } .custom-actions-btns { margin: auto; display: flex; justify-content: flex-end; } .custom-actions-btns .btn { margin: .3rem 0 .3rem .3rem; } .custom-dropdown-group .dropdown { margin: 0 .3rem .3rem 0; display: inline-block; } .custom-dropdown-group .btn-toolbar { margin: 0 .3rem .3rem 0; display: inline-block; } .alert-notify { background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; margin: 1rem 0; } .alert-notify.info .type { background: #074694; } .alert-notify.danger .type { background: #e40000; } .alert-notify.success .type { background: #18800c; } .alert-notify .alert-notify-body { padding: 1.5rem 1.25rem .75rem 1.25rem; position: relative; } .alert-notify .alert-notify-body .type { position: absolute; left: 1.25rem; top: -.5rem; padding: .3rem .7rem; color: #ffffff; font-size: .75rem; display: inline-block; line-height: 100%; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .alert-notify .alert-notify-body .alert-notify-title { margin-bottom: .5rem; font-size: .9rem; font-weight: 700; line-height: 150%; } .alert-notify .alert-notify-body .alert-notify-title img { float: right; margin-left: 1rem; max-width: 48px; max-height: 48px; vertical-align: top; } .alert-notify .alert-notify-body .alert-notify-title i { float: right; margin-left: 1rem; font-size: 2.5rem; vertical-align: top; } .alert-notify .alert-notify-body .alert-notify-text { margin-bottom: .25rem; font-size: .75rem; line-height: 140%; } .ticket { text-align: center; padding: 11px 0 11px 0; } .ticket h1.count { margin: 0; line-height: 100%; font-size: 3rem; color: #ffffff; } .ticket p.type { color: #ffffff; margin: 0; } .ticket.critical { background: #074694; -webkit-border-radius: 3px 0 0 3px; -moz-border-radius: 3px 0 0 3px; border-radius: 3px 0 0 3px; } .ticket.medium { background: #18800c; } .ticket.low { background: #404040; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; } .todo-container { margin: 0 0 0 10px; } .todo-container .todo-body { margin: 0; padding: 0; border-left: 1px solid #dedede; } .todo-container .todo-body li.todo-list { position: relative; display: block; cursor: pointer; } .todo-container .todo-body li.todo-list .dot { position: absolute; top: 4px; left: -10px; color: #01902d; } .todo-container .todo-body li.todo-list .dot:before { font-size: 1.2rem; content: "\e836"; font-family: 'icomoon'; background: #ffffff; } .todo-container .todo-body li.todo-list .todo-info { line-height: 100%; margin: 0 0 0 20px; padding-bottom: 20px; } .todo-container .todo-body li.todo-list .todo-info p { line-height: 100%; margin-bottom: .5rem; } .todo-container .todo-body li.todo-list .todo-info p span.time { float: right; font-size: .8rem; } .todo-container .todo-body li.todo-list .todo-info p.dt { color: #888888; font-size: .775rem; } .todo-container .todo-body li.todo-list .todo-info .todo-type { color: #888888; font-size: .825rem; } .todo-container .todo-body li.todo-list.done { text-decoration: line-through; -webkit-transition: all 0.3s ease-out; -moz-transition: all 0.3s ease-out; -ms-transition: all 0.3s ease-out; -o-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: rgba(0, 0, 0, 0.4); } .todo-container .todo-body li.todo-list.done .dot:before { content: "\e86c"; font-family: 'icomoon'; } .todo-container .todo-body li.todo-list:last-child .todo-info { padding-bottom: 0; } ul.recent-links { margin: 0; } ul.recent-links li a { padding: .7rem 0 .7rem 0; position: relative; color: #333333; display: flex; align-items: center; } ul.recent-links li a:before { content: '\e968'; font-family: 'icomoon' !important; margin: 0 10px 0 0; color: #01902d; font-size: 1.2rem; } ul.recent-links li a:hover { text-decoration: underline; } ul.recent-links li:first-child a { padding-top: 0; } ul.recent-links li:last-child a { padding-bottom: 0; } ul.bookmarks { margin: 0; } ul.bookmarks li a { padding: .7rem 0 .7rem 0; position: relative; color: #333333; display: flex; align-items: center; } ul.bookmarks li a:before { content: '\e838'; font-family: 'icomoon' !important; margin: 0 10px 0 0; color: #01902d; font-size: 1rem; } ul.bookmarks li a:hover { text-decoration: underline; } ul.bookmarks li:first-child a { padding-top: 0; } ul.bookmarks li:last-child a { padding-bottom: 0; } ul.statistics { margin: 0; } ul.statistics li { display: flex; align-items: center; margin: 0 0 15px 0; } ul.statistics li .stat-icon { background: #01902d; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; margin: 0 10px 0 0; } ul.statistics li .stat-icon i { font-size: 1rem; color: #ffffff; } .social-tile { position: relative; padding: 1.2rem 1rem; background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; margin: 0 0 1rem 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } .social-tile .social-icon { height: 60px; width: 60px; display: flex; align-items: center; justify-content: center; margin: 0 0 15px 0; background: #ffffff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; box-shadow: 0 0 3px #e5e9ec; border-bottom: 1px solid #e0e3e8; } .social-tile .social-icon i { font-size: 1.5rem; color: #01902d; } .social-tile h2 { margin: 0; } .social-tile p { color: #888888; } .share-thoughts-container .form-control { margin: 0 0 .3rem 0; } .share-thoughts-container .share-thoughts-footer { display: flex; align-items: center; justify-content: space-between; } .share-thoughts-container .share-thoughts-footer .share-icons { display: flex; } .share-thoughts-container .share-thoughts-footer .share-icons a { width: 32px; height: 32px; margin: 0 .3rem 0 0; display: flex; align-items: center; justify-content: center; background: #eff1f5; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .share-thoughts-container .share-thoughts-footer .share-icons a i { color: #333333; font-size: .9rem; } .info-stats { text-align: center; margin: 1rem 0 0 0; } .info-stats span.info-label { width: 8px; height: 8px; border: 2px solid #01902d; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; display: inline-block; } .info-stats span.info-label.secondary { border: 2px solid #484848; } .info-stats h3.info-total { margin: 0; } .info-stats h2.info-total { margin: 0; } .info-stats p.info-title { margin: .3rem 0; line-height: 100%; color: #888888; text-transform: uppercase; } .info-stats2 { display: flex; justify-content: space-between; flex-direction: row; align-items: flex-end; margin: .5rem 0 0 0; } .info-stats2 > .details h3 { margin: 0 0 .35rem 0; } .info-stats2 > .details h6 { margin: 0; color: #888888; font-weight: 400; } .info-stats2 > .notification { display: flex; align-items: flex-end; } .info-stats2 > .notification i { font-size: 2rem; } .info-stats3 { display: flex; justify-content: center; flex-direction: column; align-items: center; margin: 1rem 0 0 0; } .info-stats3 i { margin: 0 0 .5rem 0; font-size: .9rem; font-weight: 600; } .info-stats3 h6 { color: #888888; font-weight: 400; } .info-stats3 h3 { margin: 0; } .info-stats3.shade-one-a i { color: #01902d; } .info-stats3.shade-one-b i { color: #01902d; } .info-stats3.shade-one-c i { color: #01b93a; } .info-stats3.shade-two-a i { color: #484848; } .info-stats3.shade-two-b i { color: #5a5a5a; } .info-stats3.shade-two-c i { color: #6e6e6e; } .info-stats4 { background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; margin-bottom: 1rem; display: flex; align-items: center; flex-direction: row; padding: 1rem; } .info-stats4 .info-icon { height: 60px; width: 60px; display: flex; align-items: center; justify-content: center; margin-right: 15px; text-align: center; background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; box-shadow: 0 0 2px #e5e9ec; border-bottom: 1px solid #eeeeee; } .info-stats4 .info-icon i { font-size: 1.5rem; color: #01902d; } .info-stats4 .sale-num h3 { margin: 0; } .info-stats4 .sale-num p { margin: 0; padding: 0; color: #888888; } .info-tiles { position: relative; padding: 20px 20px; min-height: 100px; background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; margin-bottom: 1rem; } .info-tiles .info-icon { height: 60px; width: 60px; float: left; position: relative; justify-content: center; display: flex; align-items: center; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background: #ffffff; box-shadow: 0 0 2px #e5e9ec; border-bottom: 1px solid #eeeeee; margin-bottom: 1rem; } .info-tiles .info-icon i { font-size: 1.5rem; color: #01902d; } .info-tiles .info-icon.secondary i { color: #e40000; } .info-tiles .stats-detail { margin: 0 0 0 70px; } .info-tiles h3 { margin: .3rem 0 .3rem 0; line-height: 100%; } .info-tiles h2 { margin: .3rem 0 .3rem 0; line-height: 100%; } .info-tiles p { margin: 0; line-height: 100%; color: #888888; } .goal-card { background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; padding: 1rem 2rem; margin: 0 0 1rem 0; position: relative; display: flex; align-items: center; justify-content: flex-end; flex-direction: column; min-height: 147px; } .goal-card i { margin: 0 .6rem 0 0; color: #01902d; font-size: 2rem; position: absolute; top: 20px; left: 15px; } .goal-card h6 { color: #888888; font-weight: 400; margin: 0; display: flex; align-items: center; } .goal-card h2 { margin: 0 0 .2rem 0; } .timeline-activity { margin: 0; } .timeline-activity .activity-log { padding-left: 1.8rem; padding-bottom: 1.5rem; position: relative; display: flex; flex-direction: column; } .timeline-activity .activity-log:before { content: ""; position: absolute; top: 5px; left: 0px; background: #01902d; border: 3px solid #d0d0d0; width: 15px; height: 15px; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; z-index: 1; } .timeline-activity .activity-log:after { content: ""; position: absolute; left: 7px; top: 10px; border-left: 1px dashed #dedede; height: 100%; width: 1px; } .timeline-activity .activity-log .log-name { font-weight: 600; } .timeline-activity .activity-log .log-details { font-size: .8rem; color: #888888; } .timeline-activity .activity-log .log-time { color: #888888; margin-left: .5rem; } .timeline-activity .activity-log:last-child { padding-bottom: 0; } .stacked-images { display: flex; } .stacked-images img { display: flex; align-items: center; justify-content: center; text-align: center; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; overflow: hidden; margin-right: -10px; margin-right: -10px; border: 3px solid #ffffff; background: #ffffff; letter-spacing: .03rem; } .stacked-images img.sm { width: 36px; height: 36px; } .stacked-images .plus { display: flex; align-items: center; justify-content: center; text-align: center; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; overflow: hidden; margin-right: -10px; margin-right: -10px; border: 3px solid #ffffff; background: #01902d; letter-spacing: .03rem; font-weight: 700; font-size: .8rem; } .stacked-images .plus.sm { width: 36px; height: 36px; color: #ffffff; } .ticket-status-card { background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; padding: 1rem; margin: 0 0 1rem 0; } .ticket-status-card h3 { font-weight: 700; margin: 0; color: #01902d; } .overview-box { background: #01902d; border-bottom: 1px solid #af772b; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 1rem; display: flex; flex-direction: column; justify-content: center; color: #ffffff; position: relative; overflow: hidden; margin: 0 0 1rem 0; } .overview-box:after { content: ''; position: absolute; top: 20%; right: -20%; opacity: 0.2; background: url(../img/stripes.png) no-repeat; background-size: 100%; width: 70%; height: 70%; } .overview-box.orange { background: #f18024; } .overview-box h4 { font-weight: 700; margin: 0 0 1rem 0; } .overview-box p { line-height: 150%; margin: 0; } .overview-box2 { background: #01902d; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding: 2rem 1rem; display: flex; flex-direction: column; color: #ffffff; margin: 0 0 1rem 0; position: relative; overflow: hidden; } .overview-box2:after { content: ''; position: absolute; bottom: -60px; right: 0px; opacity: 0.2; background: url(../img/stripes.png) no-repeat; background-size: 50%; background-position: right center; width: 100%; height: 100%; } .overview-box2.orange { background: #f18024; } .overview-box2 i { font-size: 3rem; margin: 0 0 1rem 0; } .overview-box2 h5 { margin: 0 0 1.5rem 0; } .overview-box2 h4 { font-weight: 700; margin: 0; } .overview-box2 p { line-height: 150%; margin: 0; } .launch-box { background: #01902d; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #af772b; padding: 1rem; display: flex; flex-direction: column; color: #ffffff; text-align: center; margin: 0 0 1rem 0; position: relative; overflow: hidden; } .launch-box:after { content: ''; position: absolute; top: 20%; left: 0; right: 0; opacity: 0.4; background: url(../img/stripes.png) no-repeat; background-size: 70%; background-position: center center; width: 100%; height: 100%; } .launch-box h6 { font-weight: 700; margin: 0 0 2rem 0; } .launch-box .num { text-align: center; font-size: 2rem; font-weight: 700; } .launch-box .num span { text-transform: uppercase; font-size: .8rem; display: block; text-align: center; } .launch-box p { line-height: 150%; margin: 0 0 .5rem 0; } .project-budget { background: #01902d; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding: 1rem; display: flex; flex-direction: column; color: #ffffff; text-align: center; margin: 0 0 1rem 0; } .project-budget h3 { margin: 1rem 0 0 0; font-weight: 700; } .project-budget p { line-height: 150%; margin: 0 0 1rem 0; font-size: .8rem; } .project-budget h6 { font-weight: 700; margin: 0 0 2rem 0; } ul.project-activity { margin: 0 0 0 10px; } ul.project-activity li.activity-list { position: relative; border-left: 1px solid #dedede; } ul.project-activity li.activity-list:after { background-color: #ffffff; border: 2px solid #01902d; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; bottom: 0; content: ""; height: 12px; width: 12px; left: 0; margin-left: -6px; position: absolute; top: 5px; } ul.project-activity li.activity-list:before { border: 4px solid #e0e0e0; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; bottom: 0; content: ""; height: 20px; width: 20px; left: 0; margin-left: -10px; position: absolute; top: 1px; } ul.project-activity li.activity-list .detail-info { margin: 0 0 0 20px; padding-bottom: 1.5rem; } ul.project-activity li.activity-list .detail-info p.date { margin: 0; padding: 0; font-size: .9rem; font-weight: 600; } ul.project-activity li.activity-list .detail-info p.info { margin: 0; line-height: 160%; } ul.project-activity li.activity-list:last-child .detail-info { padding-bottom: 0; } .risks-block { background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; padding: 1rem; display: flex; align-items: center; flex-direction: row; margin: 0 0 1rem 0; } .risks-block i { font-size: 2.5rem; margin: 0 1.5rem 0 0; } .risks-block .risk-details h2 { margin: 0; } .risks-block .risk-details h5 { margin: 0; line-height: 160%; font-weight: 400; } .risks-block .risk-details h5 span { color: #888888; display: block; font-size: .725rem; } .risks-block.high i { color: #484848; } .risks-block.high h2 { color: #484848; } .risks-block.low i { color: #01902d; } .risks-block.low h2 { color: #01902d; } .graph-label-container .graph-label { padding: .8rem 0; display: flex; align-items: center; flex-direction: row; } .graph-label-container .graph-label i { font-size: 1.5rem; margin: 0 .5rem 0 0; color: #01902d; } .graph-label-container .graph-label .label-detail h5 { margin: 0; } .graph-label-container .graph-label .label-detail p { margin: 0; font-weight: 400; line-height: 100%; color: #888888; } .logs-container { margin: 0 0 0 10px; } .logs-container .logs-body { margin: 0; padding: 0; border-left: 1px solid #ffffff; } .logs-container .logs-body .log-list { position: relative; } .logs-container .logs-body .log-list i { font-size: 1rem; position: absolute; top: 4px; left: -10px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background: #ffffff; } .logs-container .logs-body .log-list .log-info { line-height: 100%; margin: 0 0 0 20px; padding: 0 0 25px 0; } .logs-container .logs-body .log-list .log-info .log-title { margin: 0 0 .8rem 0; font-size: .875rem; font-weight: 600; } .logs-container .logs-body .log-list .log-info .log-message { margin: 0 0 .8rem 0; } .logs-container .logs-body .log-list .log-info .log-user { color: #888888; font-size: .7rem; } .logs-container .logs-body .log-list .log-info .log-user span.name { padding: 0 .5rem 0 0; } .logs-container .logs-body .log-list .log-info .log-user span.dt { padding: 0 0 0 .3rem; } .activity-logs { margin: 0; } .activity-logs .activity-log-list { display: flex; align-items: center; justify-content: center; flex-direction: row; padding: 7px 0; } .activity-logs .activity-log-list .sts { width: 14px; height: 14px; border: 2px solid #01902d; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; margin: 0 10px 0 0; } .activity-logs .activity-log-list .sts.red { border: 2px solid #e40000; } .activity-logs .activity-log-list .log { font-size: .8rem; } .activity-logs .activity-log-list .log-time { margin: 0 0 0 auto; } ul.recent-orders li { margin-bottom: 25px; display: flex; align-items: center; flex-direction: row; } ul.recent-orders li .order-img { position: relative; } ul.recent-orders li .order-img img { height: 75px; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } ul.recent-orders li .order-img .badge { position: absolute; top: 10px; left: 0px; font-weight: 400; -webkit-border-radius: 0 3px 3px 0; -moz-border-radius: 0 3px 3px 0; border-radius: 0 3px 3px 0; font-size: .7rem; padding: 3px 4px 4px 4px; } ul.recent-orders li .order-details { margin-left: 15px; } ul.recent-orders li .order-details h5.order-title { margin: 0 0 5px 0; line-height: 120%; font-size: .9rem; } ul.recent-orders li .order-details p.order-desc { line-height: 120%; font-size: .8rem; } ul.recent-orders li .order-details span.order-date { color: #01902d; font-size: .7rem; } .project-status-card { background: #ffffff; border: 1px solid #dedede; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; padding: 1rem; margin: 0 0 1rem 0; text-align: center; } .project-status-card h6 { margin: 0; } .project-status-card svg { width: 130px; } .project-progress { padding: 1rem 0; margin: 0 0 1rem 0; text-align: center; } .project-progress.progress-arrow { position: relative; } .project-progress.progress-arrow:after { position: absolute; right: -20px; top: 50%; font-size: 1.3rem; content: "\e9d3"; color: #888888; font-family: 'icomoon' !important; } .project-progress h6 { margin: 0 0 .5rem 0; } .project-progress p { font-weight: 600; margin: 0; font-size: .7rem; line-height: 100%; } .project-progress p.completed { color: #01902d; } .project-progress p.waiting { color: #888888; } .project-progress p.inprogress { color: #484848; } .project-progress svg { width: 100px; } @media (max-width: 576px) { .project-progress { margin: 0 0 2rem 0; } .project-progress.progress-arrow { position: relative; } .project-progress.progress-arrow:after { left: 0; top: auto; bottom: -25px; margin-left: -10px; transform: rotate(90deg); } } .income-stats-container .income-stats { margin: 0 0 1px 0; display: flex; align-items: center; flex-direction: row; } .income-stats-container .income-stats .income-graph { width: 78px; height: 78px; } .income-stats-container .income-stats .income-graph .circliful { margin: 0; } .income-stats-container .income-stats .income-info h3 { margin: 0; padding: 0; } .income-stats-container .income-stats .income-info h3 i { font-size: 1.3rem; margin-left: .3rem; } .income-stats-container .income-stats p { color: #888888; margin: 0; } .income-stats-container .income-stats:last-child { margin-bottom: 0; } .user-ratings .total-ratings { display: flex; margin: 0 0 1.5rem 0; } .user-ratings .total-ratings h2 { margin: 0; line-height: 100%; } .user-ratings .total-ratings .rating-stars { margin: .3rem 0 0 .7rem; } .user-ratings .total-ratings .rating-stars > div { width: auto !important; } .user-ratings .total-ratings .rating-stars img { width: 20px; } .user-ratings .ratings-list-container .ratings-list { display: flex; padding: 0 0 .6rem 0; margin: 0 0 .7rem 0; border-bottom: 1px solid #f7f7f7; } .user-ratings .ratings-list-container .ratings-list:last-child { border-bottom: 0; padding: 0; margin: 0; } .user-ratings .ratings-list-container .ratings-list .rating-level { margin: 0 .5rem 0 0; font-size: .9rem; } .user-ratings .ratings-list-container .ratings-list .rating-stars { line-height: 100%; margin: .1rem 0 0 0; } .user-ratings .ratings-list-container .ratings-list .rating-stars img { max-width: 14px; } .user-ratings .ratings-list-container .ratings-list .total { margin-left: auto; font-weight: 600; } .user-ratings .ratings-list-container .ratings-list .total .percentage { margin-left: 10px; font-size: .725rem; font-weight: 700; color: #888888; } .top-agents-container { margin: 0; } .top-agents-container .top-agent { margin: 0 0 1rem 0; padding-bottom: .5rem; display: flex; align-items: flex-start; } .top-agents-container .top-agent img.avatar { -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; width: 40px; height: 40px; margin: 0 10px 0 0; } .top-agents-container .top-agent .agent-details { flex-direction: column; flex: 1; } .top-agents-container .top-agent .agent-details h6 { margin: 0 0 .5rem 0; font-size: .825rem; } .top-agents-container .top-agent .agent-details .agent-score .progress { height: 4px; margin: 0 0 .4rem 0; } .top-agents-container .top-agent .agent-details .agent-score .points { display: flex; justify-content: space-between; } .top-agents-container .top-agent .agent-details .agent-score .points .left { color: #888888; } .top-agents-container .top-agent:last-child { margin-bottom: 0; padding-bottom: 0; } ul.user-messages li { margin-bottom: 1.5rem; } ul.user-messages li:last-child { margin-bottom: 0; } ul.user-messages li:last-child .delivery-details p { margin-bottom: 0; } ul.user-messages li .customer { float: left; width: 48px; height: 48px; line-height: 48px; font-size: 1rem; text-align: center; color: #01902d; background: #ffffff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; box-shadow: 0 0 2px #e5e9ec; border-bottom: 1px solid #e0e3e8; } ul.user-messages li .delivery-details { margin-left: 65px; } ul.user-messages li .delivery-details .badge { font-size: .7rem; padding: 3px 10px 4px 10px; margin: 5px 0 5px 0; color: #ffffff; background: #01902d; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } ul.user-messages li .delivery-details h5 { line-height: 180%; font-size: .9rem; margin: .5rem 0 .3rem 0; } ul.user-messages li .delivery-details p { line-height: 160%; } .quick-analytics a { display: flex; align-items: center; margin: 10px 0; font-size: .825rem; } .quick-analytics a i { font-size: 1.2rem; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 10px 0 0; color: #01902d; background: #ffffff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; box-shadow: 0 0 2px #e5e9ec; border-bottom: 1px solid #e0e3e8; } .quick-analytics a:hover { color: #333333; } .agenda-bg { background: url(../img/agenda-bg.png) no-repeat !important; background-size: cover !important; background-position: center center !important; } .agenda .todays-date { margin: 0 0 2.5rem 0; } .agenda .todays-date h5 { font-size: 1rem; } .agenda .todays-date h5 span { font-size: .7rem; color: #01902d; } .agenda .agenda-list li { display: flex; align-items: center; padding: 0 0 1.5rem 0; } .agenda .agenda-list li:last-child { padding: 0; } .agenda .agenda-list li .bullet { width: 7px; height: 7px; background: #01902d; } .agenda .agenda-list li .bullet.secondary { background: #484848; } .agenda .agenda-list li .details { margin: 0 0 0 1rem; } .agenda .agenda-list li .details p { margin: 0 0 .3rem 0; line-height: 100%; } .agenda .agenda-list li .details small { display: block; color: #888888; } .overall-earnings { position: relative; margin: 2rem 0 1rem 0; text-align: center; } .overall-earnings .earnings-icon { height: 50px; width: 50px; margin: 2rem auto 1rem auto; position: relative; justify-content: center; display: flex; align-items: center; background: #ffffff; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; box-shadow: 0 0 10px #e5e9ec; border-bottom: 1px solid #eeeeee; } .overall-earnings .earnings-icon i { font-size: 1.5rem; color: #01902d; } .overall-earnings .earnings-icon.secondary i { color: #484848; } .overall-earnings .earnings-icon.dark i { color: #f18024; } .overall-earnings .earnings-stats { margin: 0; } .overall-earnings .earnings-stats h3 { margin: 0; line-height: 100%; } .overall-earnings .earnings-stats p { color: #888888; text-transform: uppercase; font-size: .7rem; } /************************************************ ************************************************ Vendor Css ************************************************ ************************************************/ .btn-bs-select { padding: .375rem 1rem !important; } .bs-actionsbox, .bs-donebutton, .bs-searchbox { padding: 4px 0px; } .bootstrap-select .dropdown-menu { box-shadow: none; border: 1px solid #dddddd; border-radius: 0; margin: 0; border-top: 0; width: inherit; padding: 3px; } .bootstrap-select .dropdown-menu.inner li.selected { background: #074694; } .bootstrap-select .dropdown-menu.inner li.selected a { color: #ffffff; } .bootstrap-select .dropdown-menu.inner li.selected a:hover { pointer-events: none; background: #074694; color: #ffffff; } .bootstrap-select .dropdown-menu.inner li.selected:hover { pointer-events: none; } .bootstrap-select .dropdown-menu.inner li.selected .text-muted { color: rgba(255, 255, 255, 0.7) !important; } .bootstrap-select .dropdown-menu .dropdown-header { padding: 0.5rem 0.5rem; } .bootstrap-select > .dropdown-toggle { height: 34px; line-height: 18px; font-size: .825rem; -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; } .bootstrap-select .dropdown-item.active { background: #074694; color: #ffffff; } .bootstrap-select .dropdown-item:focus { outline: none; } .bootstrap-select .dropdown-item.bg-success { color: #ffffff; } .bootstrap-select .dropdown-item.bg-success:hover { background: #14690a !important; } .bootstrap-select .dropdown-item.bg-danger { color: #ffffff; } .bootstrap-select .dropdown-item.bg-danger:hover { background: #cb0000 !important; } .bootstrap-select .dropdown-item.bg-info { color: #ffffff; } .bootstrap-select .dropdown-item.bg-info:hover { background: #063a7c !important; } .bootstrap-select .dropdown-item.bg-warning { color: #ffffff; } .bootstrap-select .dropdown-item.bg-warning:hover { background: #cd8d00 !important; } .gallery { margin: 0 auto; } .gallery a { border: 1px solid #f2f2f2; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; position: relative; 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; display: block; margin: 0 0 15px 0; opacity: 1; padding: 3px; } .gallery a img { -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; } .gallery a .overlay { top: 0; bottom: 0; left: 0; right: 0; opacity: 0; position: absolute; z-index: 20; background: rgba(0, 0, 0, 0.7); overflow: hidden; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; } .gallery a .expand { position: absolute; top: 50%; left: 50%; z-index: 100; border: 2px solid #e69f00; text-align: center; color: #e69f00; line-height: 32px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; font-size: 20px; margin-left: -18px; margin-top: -18px; width: 36px; height: 36px; -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: 36px; height: 36px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } .photo-gallery img { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; margin: 0 0 .8rem 0; } .jvectormap-container { width: 100%; height: 100%; position: relative; overflow: hidden; touch-action: none; } .jvectormap-tip { position: absolute; display: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; background: #000000; color: #ffffff; font-size: .75rem; padding: 6px 12px; } @keyframes showHideDot { 0% { opacity: 0; } 50% { opacity: 1; } 60% { opacity: 1; } 100% { opacity: 0; } } .jvectormap-marker { opacity: 0; animation: showHideDot 1.5s ease-in-out infinite; } .flotTip { padding: .2rem .3rem; background-color: #000000; z-index: 100; color: #ffffff; opacity: .8; font-size: .8rem; } #creditCardType { display: flex; align-items: center; flex-direction: row; } #creditCardType .credit-card { margin: 5px 5px 0 0; display: inline-block; } #creditCardType .credit-card img { max-width: 36px; filter: grayscale(100%); } #creditCardType .credit-card.highlight img { filter: grayscale(10%); } /************************************************ ************************************************ Bootstrap Overwrite Css ************************************************ ************************************************/ .accordion .accordion-container { padding: 0; margin: 0 0 .5rem 0; background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; } .accordion .accordion-container .accordion-header { padding: .8rem 1rem; border-bottom: 1px solid #e0e3e8; } .accordion .accordion-container .accordion-header a { color: #01902d; cursor: pointer; font-weight: 600; font-size: .9rem; } .accordion .accordion-container .accordion-header a.collapsed { color: #333333; } .accordion .accordion-container .accordion-header a:hover { color: #01902d; } .accordion .accordion-container .accordion-header a i.icon { margin-right: .5rem; font-size: 1.3rem; vertical-align: middle; } .accordion .accordion-container .accordion-body { padding: 1.5rem; } .accordion .accordion-container:last-child .accordion-header { border-radius: 0 0 5px 5px; border-bottom: 0; } .accordion .accordion-container:first-child .accordion-header { border-radius: 5px 5px 0 0; } .accordion.toggle-icons a { position: relative; display: block; } .accordion.toggle-icons a[aria-expanded="true"]:before { position: absolute; right: 0; top: 0; font-size: 1.3rem; content: "\e916"; font-family: 'icomoon' !important; } .accordion.toggle-icons a[aria-expanded="false"]:before { position: absolute; right: 0; top: 0; font-size: 1.3rem; content: "\e90f"; font-family: 'icomoon' !important; } .accordion.lg .accordion-container { padding: 0; } .accordion.lg .accordion-container .accordion-header { padding: 1.25rem 1.5rem; } .alert { margin-bottom: .5rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; border: 0; padding: .75rem 1rem; font-size: .8rem; color: #ffffff; display: flex; align-items: center; } .alert .alert-link { color: #ffffff; font-weight: 600; margin-left: 5px; } .alert.alert-primary { color: #ffffff; background: #01902d; } .alert.alert-primary hr { border-top-color: #01a935; } .alert.alert-secondary { color: #ffffff; background: #484848; } .alert.alert-secondary hr { border-top-color: #555555; } .alert.alert-success { background: #18800c; } .alert.alert-success hr { border-top-color: #1c970e; } .alert.alert-danger { background: #e40000; } .alert.alert-danger hr { border-top-color: #fe0000; } .alert.alert-info { background: #074694; } .alert.alert-info hr { border-top-color: #0852ac; } .alert.alert-warning { background: #e69f00; } .alert.alert-warning hr { border-top-color: #ffb000; } .alert i { font-size: 1.1rem; margin-right: 10px; vertical-align: middle; } .alert .alert-link { text-decoration: underline; font-weight: 400; } .alert .alert-heading { font-weight: 600; margin-bottom: 1rem; } .alert.alert-dismissible .close { padding: .6rem 1rem; font-weight: 600; } .alert.alert-dismissible .close:hover { color: #ffffff; } .badge { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-weight: 600; padding: .35rem .7rem; line-height: 100%; vertical-align: middle; } .badge.badge-primary { background: #01902d; } .badge.badge-primary:hover { background: #01902d; } .badge.badge-secondary { background: #484848; } .badge.badge-secondary:hover { background: #484848; } .badge.badge-success { background: #18800c; } .badge.badge-success:hover { background: #18800c; } .badge.badge-info { background: #074694; } .badge.badge-info:hover { background: #074694; } .badge.badge-danger { background: #e40000; } .badge.badge-danger:hover { background: #e40000; } .badge.badge-warning { background: #e69f00; color: #ffffff; } .badge.badge-warning:hover { background: #e69f00; } .badge.badge-orange { background: #f18024; color: #ffffff; } .badge.badge-orange:hover { background: #f18024; } .badge.badge-light { background: #d0d0d0; } .badge.badge-light:hover { background: #d0d0d0; } .badge.badge-dark { background: #1b1b1b; } .badge.badge-dark:hover { background: #1b1b1b; } .badge.badge-white { background: #ffffff; color: #333333; } .badge.badge-white:hover { background: #ffffff; } .badge.badge-pill { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .blockquote { font-size: .9rem; margin-bottom: 2rem; } .blockquote .blockquote-footer { font-size: 95%; } .breadcrumb { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; background: transparent; margin: 0; padding: 1.5rem 0; font-size: .825rem; align-items: center; font-weight: 600; } .breadcrumb .breadcrumb-item { color: #333333; } .breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: #333333; font-family: 'icomoon' !important; content: '\e9f1'; font-size: .85rem; } .breadcrumb .breadcrumb-item a { color: #333333; } .breadcrumb .breadcrumb-item.active { color: #01902d; } button:focus { outline: none; } .btn { -webkit-border-radius: 3px; -moz-border-radius: 3px; border-radius: 3px; border: 1px solid transparent; font-size: .825rem; } .btn .badge { top: 0; } .btn i { vertical-align: middle; } .btn-rounded { -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; } .btn-white { color: #333333; background: #f1f1f1; border-color: #f1f1f1; border-bottom: 1px solid #d7d7d7; } .btn-white:hover { color: #333333; background-color: #e4e4e4; border-color: #e4e4e4; border-bottom: 1px solid #d7d7d7; } .btn-white:focus, .btn-white.focus { box-shadow: 0 0 0 0.2rem rgba(228, 228, 228, 0.3); background-color: #e4e4e4; border-color: #e4e4e4; border-bottom: 1px solid #d7d7d7; } .btn-white.disabled, .btn-white:disabled { color: #333333; background-color: #f1f1f1; border-color: #f1f1f1; border-bottom: 1px solid #d7d7d7; } .btn-white:not(:disabled):not(.disabled):active, .btn-white:not(:disabled):not(.disabled).active { color: #333333; background-color: #e4e4e4; border-color: #e4e4e4; border-bottom: 1px solid #d7d7d7; } .show > .btn-white.dropdown-toggle { color: #333333; background-color: #e4e4e4; border-color: #e4e4e4; border-bottom: 1px solid #d7d7d7; } .btn-white:not(:disabled):not(.disabled):active:focus, .btn-white:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(228, 228, 228, 0.3); } .show > .btn-white.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(228, 228, 228, 0.3); } .btn-primary { color: #ffffff; background-color: #01902d; border-color: #01902d; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-primary:hover { color: #ffffff; background-color: #017725; border-color: #017725; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 0.2rem rgba(0, 144, 45, 0.2); background-color: #017725; border-color: #017725; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-primary.disabled, .btn-primary:disabled { color: #ffffff; background-color: #01902d; border-color: #01902d; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active { color: #ffffff; background-color: #017725; border-color: #017725; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .show > .btn-primary.dropdown-toggle { color: #ffffff; background-color: #017725; border-color: #017725; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(0, 144, 45, 0.2); } .show > .btn-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(0, 144, 45, 0.2); } .btn-secondary { color: #ffffff; background-color: #484848; border-color: #484848; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-secondary:hover { color: #ffffff; background-color: #3b3b3b; border-color: #3b3b3b; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-secondary:focus, .btn-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(43, 42, 41, 0.2); background-color: #3b3b3b; border-color: #3b3b3b; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-secondary.disabled, .btn-secondary:disabled { color: #ffffff; background-color: #484848; border-color: #484848; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active { color: #ffffff; background-color: #3b3b3b; border-color: #3b3b3b; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .show > .btn-secondary.dropdown-toggle { color: #ffffff; background-color: #3b3b3b; border-color: #3b3b3b; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(43, 42, 41, 0.2); } .show > .btn-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(43, 42, 41, 0.2); } .btn-light { color: #333333; background-color: #d0d0d0; border-color: #d0d0d0; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-light:hover { color: #333333; background-color: #c3c3c3; border-color: #c3c3c3; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-light:focus, .btn-light.focus { box-shadow: 0 0 0 0.2rem rgba(198, 195, 192, 0.3); background-color: #c3c3c3; border-color: #c3c3c3; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-light.disabled, .btn-light:disabled { color: #333333; background-color: #d0d0d0; border-color: #d0d0d0; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active { color: #333333; background-color: #c3c3c3; border-color: #c3c3c3; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .show > .btn-dark.dropdown-toggle { color: #333333; background-color: #c3c3c3; border-color: #c3c3c3; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(198, 195, 192, 0.3); } .show > .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(198, 195, 192, 0.3); } .btn-dark { color: #ffffff; background-color: #1b1b1b; border-color: #1b1b1b; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-dark:hover { color: #ffffff; background-color: #0e0e0e; border-color: #0e0e0e; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-dark:focus, .btn-dark.focus { box-shadow: 0 0 0 0.2rem rgba(43, 42, 41, 0.2); background-color: #0e0e0e; border-color: #0e0e0e; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-dark.disabled, .btn-dark:disabled { color: #ffffff; background-color: #1b1b1b; border-color: #1b1b1b; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-dark:not(:disabled):not(.disabled):active, .btn-dark:not(:disabled):not(.disabled).active { color: #ffffff; background-color: #0e0e0e; border-color: #0e0e0e; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .show > .btn-dark.dropdown-toggle { color: #ffffff; background-color: #0e0e0e; border-color: #0e0e0e; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-dark:not(:disabled):not(.disabled):active:focus, .btn-dark:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(43, 42, 41, 0.2); } .show > .btn-dark.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(43, 42, 41, 0.2); } .btn-success { color: #ffffff; background-color: #18800c; border-color: #18800c; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-success:hover { color: #ffffff; background-color: #14690a; border-color: #14690a; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-success:focus, .btn-success.focus { box-shadow: 0 0 0 0.2rem rgba(16, 140, 42, 0.2); background-color: #14690a; border-color: #14690a; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-success.disabled, .btn-success:disabled { color: #ffffff; background-color: #18800c; border-color: #18800c; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active { color: #ffffff; background-color: #14690a; border-color: #14690a; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .show > .btn-success.dropdown-toggle { color: #ffffff; background-color: #14690a; border-color: #14690a; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(16, 140, 42, 0.2); } .show > .btn-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(16, 140, 42, 0.2); } .btn-info { color: #ffffff; background-color: #074694; border-color: #074694; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-info:hover { color: #ffffff; background-color: #063a7c; border-color: #063a7c; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-info:focus, .btn-info.focus { box-shadow: 0 0 0 0.2rem rgba(27, 82, 142, 0.2); background-color: #063a7c; border-color: #063a7c; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-info.disabled, .btn-info:disabled { color: #ffffff; background-color: #074694; border-color: #074694; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active { color: #ffffff; background-color: #063a7c; border-color: #063a7c; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .show > .btn-info.dropdown-toggle { color: #ffffff; background-color: #063a7c; border-color: #063a7c; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(27, 82, 142, 0.2); } .show > .btn-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(27, 82, 142, 0.2); } .btn-danger { color: #ffffff; background-color: #e40000; border-color: #e40000; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-danger:hover { color: #ffffff; background-color: #cb0000; border-color: #cb0000; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-danger:focus, .btn-danger.focus { box-shadow: 0 0 0 0.2rem rgba(235, 73, 12, 0.2); background-color: #cb0000; border-color: #cb0000; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-danger.disabled, .btn-danger:disabled { color: #ffffff; background-color: #e40000; border-color: #e40000; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active { color: #ffffff; background-color: #cb0000; border-color: #cb0000; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .show > .btn-danger.dropdown-toggle { color: #ffffff; background-color: #cb0000; border-color: #cb0000; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(235, 73, 12, 0.2); } .show > .btn-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(235, 73, 12, 0.2); } .btn-warning { color: #ffffff; background-color: #e69f00; border-color: #e69f00; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-warning:hover { color: #ffffff; background-color: #cd8d00; border-color: #cd8d00; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-warning:focus, .btn-warning.focus { box-shadow: 0 0 0 0.2rem rgba(193, 146, 13, 0.2); background-color: #cd8d00; border-color: #cd8d00; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-warning.disabled, .btn-warning:disabled { color: #ffffff; background-color: #e69f00; border-color: #e69f00; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active { color: #ffffff; background-color: #cd8d00; border-color: #cd8d00; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .show > .btn-warning.dropdown-toggle { color: #ffffff; background-color: #cd8d00; border-color: #cd8d00; border-bottom: 1px solid rgba(0, 0, 0, 0.2); } .btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(193, 146, 13, 0.2); } .show > .btn-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(193, 146, 13, 0.2); } .btn-transparent { color: #ffffff; background-color: rgba(0, 0, 0, 0.4); border-color: transparent; } .btn-transparent:hover { color: #ffffff; background-color: rgba(0, 0, 0, 0.5); border-color: transparent; } .btn-transparent:focus, .btn-transparent.focus { box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.7); background-color: rgba(0, 0, 0, 0.5); border-color: transparent; } .btn-transparent.disabled, .btn-transparent:disabled { color: #ffffff; background-color: rgba(0, 0, 0, 0.3); border-color: transparent; } .btn-transparent:not(:disabled):not(.disabled):active, .btn-transparent:not(:disabled):not(.disabled).active { color: #ffffff; background-color: rgba(0, 0, 0, 0.3); border-color: transparent; } .show > .btn-transparent.dropdown-toggle { color: #ffffff; background-color: rgba(0, 0, 0, 0.5); border-color: transparent; } .btn-transparent:not(:disabled):not(.disabled):active:focus, .btn-transparent:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.7); } .show > .btn-transparent.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.4); } .btn-outline-primary { color: #01902d; border-color: #01902d; } .btn-outline-primary:hover { color: #ffffff; background-color: #01902d; border-color: #01902d; } .btn-outline-primary:focus, .btn-outline-primary.focus { box-shadow: 0 0 0 0.2rem rgba(0, 144, 45, 0.2); color: #ffffff; background-color: #01902d; border-color: #01902d; } .btn-outline-primary.disabled, .btn-outline-primary:disabled { color: #01902d; background-color: transparent; } .btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active { color: #ffffff; background-color: #01902d; border-color: #01902d; } .show > .btn-outline-primary.dropdown-toggle { color: #ffffff; background-color: #01902d; border-color: #01902d; } .btn-outline-primary:not(:disabled):not(.disabled):active:focus, .btn-outline-primary:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(0, 144, 45, 0.2); } .show > .btn-outline-primary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(0, 144, 45, 0.2); } .btn-outline-secondary { color: #484848; border-color: #484848; } .btn-outline-secondary:hover { color: #ffffff; background-color: #484848; border-color: #484848; } .btn-outline-secondary:focus, .btn-outline-secondary.focus { box-shadow: 0 0 0 0.2rem rgba(72, 72, 72, 0.2); color: #ffffff; background-color: #484848; border-color: #484848; } .btn-outline-secondary.disabled, .btn-outline-secondary:disabled { color: #484848; background-color: transparent; } .btn-outline-secondary:not(:disabled):not(.disabled):active, .btn-outline-secondary:not(:disabled):not(.disabled).active { color: #ffffff; background-color: #484848; border-color: #484848; } .show > .btn-outline-secondary.dropdown-toggle { color: #ffffff; background-color: #484848; border-color: #484848; } .btn-outline-secondary:not(:disabled):not(.disabled):active:focus, .btn-outline-secondary:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(72, 72, 72, 0.2); } .show > .btn-outline-secondary.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(72, 72, 72, 0.2); } .btn-outline-success { color: #18800c; border-color: #18800c; } .btn-outline-success:hover { color: #ffffff; background-color: #18800c; border-color: #18800c; } .btn-outline-success:focus, .btn-outline-success.focus { box-shadow: 0 0 0 0.2rem rgba(16, 140, 42, 0.2); color: #ffffff; background-color: #18800c; border-color: #18800c; } .btn-outline-success.disabled, .btn-outline-success:disabled { color: #18800c; background-color: transparent; } .btn-outline-success:not(:disabled):not(.disabled):active, .btn-outline-success:not(:disabled):not(.disabled).active { color: #ffffff; background-color: #18800c; border-color: #18800c; } .show > .btn-outline-success.dropdown-toggle { color: #ffffff; background-color: #18800c; border-color: #18800c; } .btn-outline-success:not(:disabled):not(.disabled):active:focus, .btn-outline-success:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(16, 140, 42, 0.2); } .show > .btn-outline-success.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(16, 140, 42, 0.2); } .btn-outline-info { color: #074694; border-color: #074694; } .btn-outline-info:hover { color: #ffffff; background-color: #074694; border-color: #074694; } .btn-outline-info:focus, .btn-outline-info.focus { box-shadow: 0 0 0 0.2rem rgba(27, 82, 142, 0.2); color: #ffffff; background-color: #074694; border-color: #074694; } .btn-outline-info.disabled, .btn-outline-info:disabled { color: #074694; background-color: transparent; } .btn-outline-info:not(:disabled):not(.disabled):active, .btn-outline-info:not(:disabled):not(.disabled).active { color: #ffffff; background-color: #074694; border-color: #074694; } .show > .btn-outline-info.dropdown-toggle { color: #ffffff; background-color: #074694; border-color: #074694; } .btn-outline-info:not(:disabled):not(.disabled):active:focus, .btn-outline-info:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(27, 82, 142, 0.2); } .show > .btn-outline-info.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(27, 82, 142, 0.2); } .btn-outline-warning { color: #e69f00; border-color: #e69f00; } .btn-outline-warning:hover { color: #ffffff; background-color: #e69f00; border-color: #e69f00; } .btn-outline-warning:focus, .btn-outline-warning.focus { box-shadow: 0 0 0 0.2rem rgba(193, 146, 13, 0.2); color: #ffffff; background-color: #e69f00; border-color: #e69f00; } .btn-outline-warning.disabled, .btn-outline-warning:disabled { color: #e69f00; background-color: transparent; } .btn-outline-warning:not(:disabled):not(.disabled):active, .btn-outline-warning:not(:disabled):not(.disabled).active { color: #ffffff; background-color: #e69f00; border-color: #e69f00; } .show > .btn-outline-warning.dropdown-toggle { color: #ffffff; background-color: #e69f00; border-color: #e69f00; } .btn-outline-warning:not(:disabled):not(.disabled):active:focus, .btn-outline-warning:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(193, 146, 13, 0.2); } .show > .btn-outline-warning.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(193, 146, 13, 0.2); } .btn-outline-danger { color: #e40000; border-color: #e40000; } .btn-outline-danger:hover { color: #ffffff; background-color: #e40000; border-color: #e40000; } .btn-outline-danger:focus, .btn-outline-danger.focus { box-shadow: 0 0 0 0.2rem rgba(235, 73, 12, 0.2); color: #ffffff; background-color: #e40000; border-color: #e40000; } .btn-outline-danger.disabled, .btn-outline-danger:disabled { color: #e40000; background-color: transparent; } .btn-outline-danger:not(:disabled):not(.disabled):active, .btn-outline-danger:not(:disabled):not(.disabled).active { color: #ffffff; background-color: #e40000; border-color: #e40000; } .show > .btn-outline-danger.dropdown-toggle { color: #ffffff; background-color: #e40000; border-color: #e40000; } .btn-outline-danger:not(:disabled):not(.disabled):active:focus, .btn-outline-danger:not(:disabled):not(.disabled).active:focus { box-shadow: 0 0 0 0.2rem rgba(235, 73, 12, 0.2); } .show > .btn-outline-danger.dropdown-toggle:focus { box-shadow: 0 0 0 0.2rem rgba(235, 73, 12, 0.2); } .btn-lg, .btn-group-lg > .btn { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .btn-sm, .btn-group-sm > .btn { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .btn-link { color: #01902d; border: 0; padding: .5rem .5rem; background: transparent; } .btn-link:hover { color: #02dc45; text-decoration: none; } .btn-link:focus, .btn-link.focus { text-decoration: none; box-shadow: none; } .btn-link:disabled, .btn-link.disabled { color: #017725; opacity: 0.7; pointer-events: none; } .btn-link.secondary { color: #484848; } .btn-link.secondary:hover { color: #222222; } .btn-link.secondary:disabled, .btn-link.secondary.disabled { color: #222222; } .btn-link.info { color: #074694; } .btn-link.info:hover { color: #04234b; } .btn-link.info:disabled, .btn-link.info.disabled { color: #04234b; } .btn-link.success { color: #18800c; } .btn-link.success:hover { color: #0b3a05; } .btn-link.success:disabled, .btn-link.success.disabled { color: #0b3a05; } .btn-link.warning { color: #e69f00; } .btn-link.warning:hover { color: #9a6a00; } .btn-link.warning:disabled, .btn-link.warning.disabled { color: #9a6a00; } .btn-link.danger { color: #e40000; } .btn-link.danger:hover { color: #980000; } .btn-link.danger:disabled, .btn-link.danger.disabled { color: #980000; } .carousel { margin-bottom: 2rem; } .card { background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border: 0; border-bottom: 1px solid #e0e3e8; margin-bottom: 1rem; } .card .card-header { background: transparent; border: 0; font-size: 1rem; font-weight: 600; padding: 1rem 1.25rem 1rem 1.25rem; } .card .card-header .card-title { margin: 0; font-size: 1rem; font-weight: 600; line-height: 100%; } .card .card-header .card-sub-title { margin-top: 1rem; font-size: .8rem; font-weight: 400; color: #888888; line-height: 150%; } .card.primary { background: #01902d; color: #ffffff; } .card.secondary { background: #484848; color: #ffffff; } .card .card-body { padding: 1.25rem 1.25rem; position: relative; } .card .card-body .card-title { margin-bottom: .7rem; font-size: 1rem; line-height: 100%; } .card .card-body .card-sub-title { margin-bottom: 1rem; font-size: .8rem; color: #888888; line-height: 140%; } .card .card-body .card-text { margin-bottom: 1rem; line-height: 180%; } .card .card-footer { background: transparent; border-top: 0; padding: 1rem 1.25rem; } .card .card-footer .view-all { color: rgba(0, 0, 0, 0.4); font-size: .8rem; } .card .card-footer .view-all i { font-size: 1.2rem; vertical-align: middle; } .card .card-footer .view-all:hover { color: #01902d; } .card .card-footer a.view { color: rgba(0, 0, 0, 0.4); font-size: .825rem; color: #01902d; font-weight: 700; } .card .card-footer a.view i { font-size: 1.5rem; margin: 0 10px; vertical-align: middle; } .card .card-link { color: #01902d; font-weight: 600; } .card .card-link.primary { color: #01902d; } .card .card-link.secondary { color: #484848; } .card .card-img-bottom { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; border-top-right-radius: 0; border-top-left-radius: 0; } .card .card-img-top { border-top-right-radius: 10px; border-top-left-radius: 10px; border-bottom-right-radius: 0; border-bottom-left-radius: 0; } .card.highlight { border: 1px solid #01902d; background: #01902d; } @media (max-width: 767px) { .card .card-header { padding: 1rem .75rem .5rem .75rem; } .card .card-body { padding: .75rem; } } .card-deck { margin-right: -10px; margin-left: -10px; } .card-deck .card { margin-right: 10px; margin-left: 10px; margin-bottom: 1.25rem; } .custom-checkbox .custom-control-label::before { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .custom-control-label::before { top: .1rem; border-color: #bbbbbb; background: #ffffff; } .custom-control-label::after { top: .1rem; } .custom-control-input:checked ~ .custom-control-label::before { background: #01902d; border-color: #01902d; } .custom-control.custom-switch .custom-control-label::after { top: 4px; } .custom-control-input:focus ~ .custom-control-label::before { box-shadow: none; } .custom-control-input:disabled ~ .custom-control-label::before { background-color: #f2f4f9; border-color: #dddddd; } .dropdown-menu { border: 0; -webkit-border-radius: 0 0 4px 4px; -moz-border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px; box-shadow: 20px 30px 30px rgba(0, 0, 0, 0.2); width: 11rem; font-size: .75rem; } .dropdown-menu:before { position: absolute; top: -9px; left: 12px; content: ''; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 9px solid #ffffff; } .dropdown-menu.dropdown-menu-right:before { right: 15px; left: auto; top: -9px; } .dropdown-menu.sm { width: 10rem; min-width: auto; } .dropdown-menu.lrg { width: 18rem; } .dropdown-menu .dropdown-item { padding: .5rem 1rem .5rem 1rem; font-size: .8rem; line-height: 100%; position: relative; color: #333333; } .dropdown-menu .dropdown-item:hover { background: #01902d; } .dropdown-menu .dropdown-item:first-child { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .dropdown-menu .dropdown-item:last-child { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .dropdown-menu .dropdown-item.active-page { color: #01902d; background: #f4f5fb; pointer-events: none; cursor: not-allowed; } .dropdown-menu .dropdown-menu-header { padding: .7rem 1rem; margin-bottom: .5rem; background: #eff1f5; font-size: .85rem; font-weight: 700; } .dropdown-toggle::after { vertical-align: middle; } .dropdown-toggle.sub-nav-link::after { float: right; margin: .15rem 0 0 0; border-right: 0; border-left: 5px solid; border-top: 4px solid transparent; border-bottom: 4px solid transparent; } .dropdown-divider { margin: .3rem 0; } .dropdown-toggle-split { padding-right: .8rem; padding-left: .8rem; } .form-group { margin: 0 0 1rem 0; } .form-control { border: 1px solid #dddddd; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-size: .825rem; } .form-control:hover { border: 1px solid #bbbbbb; } .form-control:focus { border-color: #01902d; box-shadow: none; } .input-group-text { border: 1px solid #dddddd; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; font-size: .825rem; background: #ffffff; } .input-group-sm > .input-group-prepend > .input-group-text { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .input-group-lg > .input-group-prepend > .input-group-text { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .custom-select { font-size: .825rem; } .custom-file-input { font-size: .825rem; } .custom-file-label { font-size: .825rem; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .custom-file-label::after { background: #ffffff; -webkit-border-radius: 0 2px 2px 0; -moz-border-radius: 0 2px 2px 0; border-radius: 0 2px 2px 0; } label { margin-bottom: .3rem; font-size: .8rem; font-weight: 600; } .form-control.is-invalid, .was-validated .form-control:invalid { border-color: #e40000; } .form-control.is-valid, .was-validated .form-control:valid { border-color: #18800c; } .jumbotron { background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; margin-bottom: 1rem; } .lead { margin: 0 0 1rem 0; } .list-group { margin-bottom: 2rem; background: #ffffff; border: 1px solid #dedede; border: 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-bottom: 1rem; } .list-group .list-group-item { background: #ffffff; font-size: .825rem; padding: .5rem .75rem; border: 1px solid #dedede; } .list-group .list-group-item:first-child { -webkit-border-radius: 6px 6px 0 0; -moz-border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0; } .list-group .list-group-item:last-child { -webkit-border-radius: 0 0 6px 6px; -moz-border-radius: 0 0 6px 6px; border-radius: 0 0 6px 6px; } .list-group .list-group-item.active { background-color: #ffffff; border-color: #f2f2f2; color: #333333; } .list-group .list-group-item.disabled { color: #666666; } .list-group a.list-group-item { color: #01902d; } .list-group a.list-group-item:hover { color: #484848; } .list-group .list-group-item-default { background: #f2f4f9; border: 0; margin: 0; color: #333333; } .list-group .list-group-item-default.active { background: #e8ebf4; } .list-group a.list-group-item-default:hover { background: #e8ebf4; } .list-group .list-group-item-primary { background: #01902d; border: 0; margin: 0; color: rgba(255, 255, 255, 0.8) !important; } .list-group .list-group-item-primary.active { background: #018128; } .list-group a.list-group-item-primary:hover { background: #018128; } .list-group .list-group-item-secondary { background: #484848; border: 0; margin: 0; color: rgba(255, 255, 255, 0.8) !important; } .list-group .list-group-item-secondary.active { background: #404040; } .list-group a.list-group-item-secondary { color: #ffffff; } .list-group a.list-group-item-secondary:hover { background: #404040; } .list-group .list-group-item-success { background: #18800c; border: 0; margin: 0; color: rgba(255, 255, 255, 0.8); } .list-group .list-group-item-success.active { background: #15720b; } .list-group a.list-group-item-success { color: #ffffff; } .list-group a.list-group-item-success:hover { background: #15720b; } .list-group .list-group-item-danger { background: #e40000; border: 0; margin: 0; color: rgba(255, 255, 255, 0.8); } .list-group .list-group-item-danger.active { background: #d50000; } .list-group a.list-group-item-danger { color: #ffffff; } .list-group a.list-group-item-danger:hover { background: #d50000; } .list-group .list-group-item-warning { background: #e69f00; border: 0; margin: 0; color: #ffffff; } .list-group .list-group-item-warning.active { background: #d79400; } .list-group a.list-group-item-warning { color: #ffffff; } .list-group a.list-group-item-warning:hover { background: #d79400; } .list-group .list-group-item-info { background: #074694; border: 0; margin: 0; color: #ffffff; } .list-group .list-group-item-info.active { background: #063f85; } .list-group a.list-group-item-info { color: #ffffff; } .list-group a.list-group-item-info:hover { background: #063f85; } .modal { text-align: left; } .modal .modal-content { -webkit-border-radius: 3pxpx; -moz-border-radius: 3pxpx; border-radius: 3pxpx; } .modal .modal-dialog { margin-top: 5rem; } .modal .modal-dialog.modal-dialog-centered { margin: 0 auto; } .modal .modal-header { background: #01902d; color: #ffffff; border: 0; -webkit-border-radius: 3px 3px 0 0; -moz-border-radius: 3px 3px 0 0; border-radius: 3px 3px 0 0; } .modal .modal-footer.custom { padding: 0; } .modal .modal-footer.custom .left-side, .modal .modal-footer.custom .right-side { display: inline-block; text-align: center; width: 49%; } .modal .modal-footer.custom .divider { background-color: #dedede; display: inline-block; float: inherit; width: 1px; height: 60px; margin: 0px -3px; } .modal .modal-footer.custom .btn-link { padding: 1rem; font-size: .9rem; text-transform: uppercase; font-weight: 700; } .modal-backdrop.show { opacity: 0.8; } .close { color: #ffffff; text-shadow: 0 1px 0 #000000; } .nav-link { color: #333333; } .nav-link.active { color: #01902d; } .nav-link.disabled { color: #888888; } .nav-pills .nav-link { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .nav-pills .nav-link:hover { background: #f2f4f9; color: #333333; } .nav-pills .nav-link.active { background-color: #01902d; pointer-events: none; } .nav-pills.primary .nav-link.active { background-color: #01902d; } .nav-pills.secondary .nav-link.active { background-color: #484848; } .nav-pills.danger .nav-link.active { background-color: #e40000; } .nav-pills.info .nav-link.active { background-color: #074694; } .nav-pills.success .nav-link.active { background-color: #18800c; } .nav-pills.warning .nav-link.active { background-color: #e69f00; } .navbar-toggler { display: none; padding: 0; border: 0; width: 36px; height: 36px; margin: 4px; vertical-align: top; -webkit-transition: all .3s; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; background: #01902d; position: relative; } .navbar-toggler[aria-expanded="false"] .navbar-toggler-icon { width: auto; height: auto; } .navbar-toggler[aria-expanded="false"] .navbar-toggler-icon i { position: absolute; display: block; height: 2px; background: #ffffff; width: 25px; left: 6px; -webkit-transition: all .3s; transition: all .3s; } .navbar-toggler[aria-expanded="false"] .navbar-toggler-icon i:nth-child(1) { top: 11px; } .navbar-toggler[aria-expanded="false"] .navbar-toggler-icon i:nth-child(2) { top: 17px; } .navbar-toggler[aria-expanded="false"] .navbar-toggler-icon i:nth-child(3) { top: 24px; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { width: auto; height: auto; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon i { position: absolute; display: block; height: 2px; background: #ffffff; width: 25px; left: 6px; -webkit-transition: all .3s; transition: all .3s; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon i:nth-child(1) { top: 18px; -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon i:nth-child(2) { background: transparent; } .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon i:nth-child(3) { top: 18px; -webkit-transform: rotateZ(-45deg); transform: rotateZ(-45deg); } @media (max-width: 992px) { .navbar-toggler { display: inline-block; } } .custom-navbar { margin-bottom: 0; background: #2e343c; padding: 0; -webkit-border-radius: 4px 4px 0 0; -moz-border-radius: 4px 4px 0 0; border-radius: 4px 4px 0 0; } .custom-navbar ul.navbar-nav li.nav-item .nav-link { position: relative; padding: .7rem 1rem .7rem 1rem; color: #dfe5ec; font-size: .725rem; text-transform: uppercase; background: transparent; min-width: 100px; text-align: center; border-right: 1px solid #39414a; border-left: 1px solid #23272e; } .custom-navbar ul.navbar-nav li.nav-item .nav-link i.nav-icon { font-size: 1.2rem; display: block; margin: 0 auto 3px auto; text-align: center; } .custom-navbar ul.navbar-nav li.nav-item .nav-link.active-page { position: relative; color: #ffffff; background: #01902d; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .custom-navbar ul.navbar-nav li.nav-item .nav-link.active-page:hover { color: #ffffff !important; background: #01902d !important; } .custom-navbar ul.navbar-nav li.nav-item .nav-link:hover { color: #333333; background: #ffffff; } .custom-navbar ul.navbar-nav li.nav-item:first-child .nav-link { border-left: 0; -webkit-border-radius: 4px 0 0 0; -moz-border-radius: 4px 0 0 0; border-radius: 4px 0 0 0; } .custom-navbar ul.navbar-nav li.nav-item:first-child .nav-link:hover { -webkit-border-radius: 4px 0 0 0; -moz-border-radius: 4px 0 0 0; border-radius: 4px 0 0 0; } .custom-navbar ul.navbar-nav li.nav-item:first-child:hover { -webkit-border-radius: 4px 0 0 0; -moz-border-radius: 4px 0 0 0; border-radius: 4px 0 0 0; } .custom-navbar ul.navbar-nav li.nav-item:first-child ul.dropdown-menu { margin: 0 0 0 0; } .custom-navbar ul.navbar-nav li.nav-item:last-child .nav-link { border-right: 1px solid #2e343c; } .custom-navbar ul.navbar-nav li.nav-item:hover, .custom-navbar ul.navbar-nav li.nav-item.show { color: #333333; background: #ffffff; } .custom-navbar ul.navbar-nav li.nav-item:hover > a, .custom-navbar ul.navbar-nav li.nav-item.show > a { color: #333333; } .custom-navbar ul.navbar-nav li.nav-item:hover .nav-link.active-page, .custom-navbar ul.navbar-nav li.nav-item.show .nav-link.active-page { color: #ffffff; background: #01902d; } .custom-navbar ul.navbar-nav li.nav-item:hover .nav-link.active-page > a, .custom-navbar ul.navbar-nav li.nav-item.show .nav-link.active-page > a { color: #ffffff; } .custom-navbar ul.navbar-nav ul.dropdown-menu { margin: 0 0 0 1px; -webkit-border-radius: 0 4px 4px 4px; -moz-border-radius: 0 4px 4px 4px; border-radius: 0 4px 4px 4px; -webkit-animation-name: slideInUp; animation-name: slideInUp; -webkit-animation-duration: .3s; animation-duration: .3s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .custom-navbar ul.navbar-nav ul.dropdown-menu a.dropdown-item { padding: .7rem 1rem .7rem 1rem; } .custom-navbar ul.navbar-nav ul.dropdown-menu a.dropdown-item:hover { background: #01902d; color: #ffffff; } .custom-navbar ul.navbar-nav ul.dropdown-menu li { position: relative; } .custom-navbar ul.navbar-nav ul.dropdown-menu li a.sub-nav-link { padding: .7rem 1rem .7rem 1rem; display: block; font-size: .8rem; line-height: 100%; color: #333333; } .custom-navbar ul.navbar-nav ul.dropdown-menu li a.sub-nav-link:hover { background: #01902d; } .custom-navbar ul.navbar-nav ul.dropdown-menu li a.sub-nav-link.active-page { color: #01902d; background: #f4f5fb; } .custom-navbar ul.navbar-nav ul.dropdown-menu li ul.dropdown-menu { -webkit-border-radius: 4px 0 4px 4px; -moz-border-radius: 4px 0 4px 4px; border-radius: 4px 0 4px 4px; margin: 0; } .custom-navbar ul.navbar-nav ul.dropdown-menu li ul.dropdown-menu-right { -webkit-border-radius: 0 4px 4px 4px; -moz-border-radius: 0 4px 4px 4px; border-radius: 0 4px 4px 4px; margin: 0; } .custom-navbar ul.navbar-nav ul.dropdown-menu li:hover > a.sub-nav-link { background: #01902d; color: #ffffff; } .custom-navbar ul.navbar-nav ul.dropdown-menu-right { margin: 0 1px 0 0; -webkit-border-radius: 4px 0 4px 4px; -moz-border-radius: 4px 0 4px 4px; border-radius: 4px 0 4px 4px; } @media (max-width: 991px) { .custom-navbar { -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-bottom: .5rem; } .custom-navbar ul.navbar-nav li.nav-item a.nav-link { padding: .8rem 1rem; font-size: .9rem; text-align: left; border: 0; margin: 0; } .custom-navbar ul.navbar-nav li.nav-item a.nav-link img.nav-icon { max-width: 21px; max-height: 21px; display: inline-block; margin: 0 10px 0 0; vertical-align: text-bottom; } .custom-navbar ul.navbar-nav li.nav-item a.nav-link i.nav-icon { font-size: 1.2rem; display: inline-block; margin: 0 10px 0 0; vertical-align: bottom; } .custom-navbar ul.navbar-nav li.nav-item a.nav-link.dropdown-toggle::after { float: right; margin-top: 8px; } .custom-navbar ul.navbar-nav li.nav-item a.nav-link.active-page { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .custom-navbar ul.navbar-nav li.nav-item a.nav-link.active-page:before { background: none !important; } .custom-navbar ul.navbar-nav ul.dropdown-menu { position: relative; width: auto; margin: 0 10px 0 10px; top: 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; } .custom-navbar ul.navbar-nav ul.dropdown-menu li { position: relative; } .custom-navbar ul.navbar-nav ul.dropdown-menu li ul.dropdown-menu { left: 0 !important; background: #f2f4f9; } .custom-navbar ul.navbar-nav ul.dropdown-menu li ul.dropdown-menu:before { border-bottom: 9px solid #f2f4f9; } } @media (min-width: 992px) { .custom-navbar ul.navbar-nav li.nav-item:hover > ul.dropdown-menu { display: block; } .custom-navbar ul.navbar-nav ul.dropdown-menu li ul.dropdown-menu { display: none; } .custom-navbar ul.navbar-nav ul.dropdown-menu li:hover ul.dropdown-menu { top: 0; left: 11rem; display: block; } .custom-navbar ul.navbar-nav ul.dropdown-menu li:hover ul.dropdown-menu:before { position: absolute; top: 10px; left: -17px; right: 100%; content: ''; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 9px solid #ffffff; } .custom-navbar ul.navbar-nav ul.dropdown-menu li.open-left:hover ul.dropdown-menu { top: 0; left: -11rem !important; display: block; } .custom-navbar ul.navbar-nav ul.dropdown-menu li.open-left:hover ul.dropdown-menu:before { position: absolute; top: 10px; right: -9px; left: 100%; content: ''; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 9px solid #ffffff; border-right: 0; } } .nav-tabs-container { background: #ffffff; border: 1px solid #dedede; border: 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; margin-bottom: 1rem; } .nav-tabs { padding: 1.25rem 1.25rem 0 1.25rem; border-bottom: 1px solid #ededed; } .nav-tabs .nav-item .nav-link { position: relative; border: 0; font-weight: 600; display: flex; align-items: center; justify-content: center; padding: .6rem 1.8rem; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; border-top: 1px solid transparent; } .nav-tabs .nav-item .nav-link i { font-size: 1rem; margin: 0 .3rem 0 0; } .nav-tabs .nav-item .nav-link i.block { display: block; text-align: center; margin: 0 .3rem 0 0; } .nav-tabs .nav-item .nav-link.active { color: #01902d; border: 1px solid #f2f2f2; border-bottom: 0; border-top: 3px solid #01902d; pointer-events: none; } .nav-tabs .nav-item .nav-link:hover { color: #01902d; border: 0; border-top: 1px solid transparent; } .nav-tabs.light .nav-item .nav-link { color: rgba(255, 255, 255, 0.8); } .nav-tabs.light .nav-item .nav-link.active { color: #000000; border-top: 3px solid rgba(0, 0, 0, 0.5); } .nav-tabs.primary .nav-item .nav-link { color: rgba(255, 255, 255, 0.8); } .nav-tabs.primary .nav-item .nav-link.active { color: #000000; border-top: 3px solid #01c33d; } .nav-tabs.danger .nav-item .nav-link { color: rgba(255, 255, 255, 0.8); } .nav-tabs.danger .nav-item .nav-link.active { color: #000000; border-top: 3px solid #ff1818; } .nav-tabs.info .nav-item .nav-link { color: rgba(255, 255, 255, 0.8); } .nav-tabs.info .nav-item .nav-link.active { color: #021833; border-top: 3px solid #021833; } .tab-content { padding: 1.25rem; } .pagination .page-item .page-link { background: transparent; color: #333333; margin: 0; border: 0; -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; min-width: 28px; text-align: center; display: flex; align-items: center; justify-content: center; } .pagination .page-item .page-link:hover { background: #f2f4f9; color: #333333; } .pagination .page-item .page-link i { font-weight: 700; vertical-align: middle; font-size: .95rem; } .pagination .page-item.active .page-link { background: #01902d; color: #ffffff; pointer-events: none; box-shadow: 0 0 0 0.2rem rgba(0, 144, 45, 0.2); } .pagination .page-item.disabled .page-link { background: #f2f4f9; color: #888888; } .pagination.primary .page-item.active .page-link { background: #01902d; box-shadow: 0 0 0 0.2rem rgba(0, 144, 45, 0.2); } .pagination.secondary .page-item.active .page-link { background: #484848; box-shadow: 0 0 0 0.2rem rgba(72, 72, 72, 0.2); } .pagination.success .page-item.active .page-link { background: #18800c; box-shadow: 0 0 0 0.2rem rgba(16, 140, 42, 0.2); } .pagination.info .page-item.active .page-link { background: #074694; box-shadow: 0 0 0 0.2rem rgba(27, 82, 142, 0.2); } .pagination.warning .page-item.active .page-link { background: #e69f00; box-shadow: 0 0 0 0.2rem rgba(193, 146, 13, 0.2); } .pagination.danger .page-item.active .page-link { background: #e40000; box-shadow: 0 0 0 0.2rem rgba(235, 73, 12, 0.2); } .pagination.rounded .page-item .page-link { -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .pagination.rounded .page-item .page-link:hover { -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .pagination.rounded .page-item.active .page-link { -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .popover { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .progress { margin-bottom: 1rem; border: 0; background: #eff1f5; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; } .progress .progress-bar { background-color: #074694; } .progress.md { height: .9rem; } .progress.sm { height: .6rem; } .progress.xs { height: .3rem; } .progress.xsl { height: .15rem; } .table-container { padding: .6rem; background: #ffffff; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; border-bottom: 1px solid #e0e3e8; margin-bottom: 1rem; } .table-container h5.table-title { font-size: .9rem; padding: 10px 15px; margin: 0; } .table-container .t-header { margin: -10px -.6rem 0 -.6rem; padding: 12px 10px; font-weight: 700; } .table { background: #ffffff; color: #333333; } .table tr { transition: all 0.5s ease; } .table th { padding: .8rem 1rem; font-weight: 600; border-bottom: 2px solid #d3d9e0; } .table td { border-top: 1px solid #d3d9e0; vertical-align: middle; padding: .65rem 1rem; } .table .td-actions { display: flex; align-items: center; justify-content: flex-end; flex-direction: row; } .table .td-actions a.icon { margin: 0 3px; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; color: #ffffff; } .table .td-actions a.icon i { font-size: .725rem; } .table .td-actions a.icon.red { background: #e40000; } .table .td-actions a.icon.green { background: #18800c; } .table .td-actions a.icon.blue { background: #074694; } .table a.link { color: #01902d; font-weight: 600; text-decoration: underline; } .table .flag-img { width: 18px; height: 18px; margin: 0 10px 0 0; } .table-hover tbody tr:hover { background: #eff1f5; } .table-striped tbody tr:nth-of-type(odd) { background: #f2f4f9; } .table-bordered { border: 1px solid #d3d9e0; } .table-sm th { padding: .5rem .7rem; } .table-sm td { padding: .3rem .7rem; } .table-dark { background: #2e343c; color: #ffffff; } .table-dark thead th { border-color: #3a424c; } .table-dark th { border-color: #3a424c; } .table-dark td { border-color: #3a424c; } .table-primary { background: #01902d; color: #ffffff; } .table-primary thead th { border-color: #017725; } .table-primary th { border-color: #017725; } .table-primary td { border-color: #017725; } .custom-table { border: 1px solid #d3d9e0; } .custom-table thead { background: #eef0f5; } .custom-table thead th { border: 0; } .custom-table > tbody tr:hover { background: #eff3f6; } .custom-table > tbody tr:nth-of-type(even) { background-color: #f6f8fa; } .custom-table > tbody td { border: 1px solid #d9dee4; } .tooltip { font-size: .7rem; } .tooltip-inner { -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; } .gutters { margin-right: -8px; margin-left: -8px; } .gutters > .col, .gutters > [class*="col-"] { padding-right: 8px; padding-left: 8px; } .less-gutters { margin-right: -1px; margin-left: -1px; } .less-gutters > .col, .less-gutters > [class*="col-"] { padding-right: 1px; padding-left: 1px; } code { color: #01902d; word-break: break-word; }