/* Template Name: Shreyu - Responsive Bootstrap 4 Admin Dashboard Author: CoderThemes Version: 1.0.0 Website: https://coderthemes.com/ Contact: support@coderthemes.com File: Main Css File */ /* ======================= TABLE OF CSS 1. Fonts 2. General 3. Left Menu 4. Topbar 5. Page Head 6. Footer 7. Horizontal Nav 8. Right Sidebar 9. Layouts 10. Helper 11. Social 12. Widgets 13. Custom Checkbox 14. Custom Radio 15. Print 16. Preloader 17. Plugins 18. Components Demo 19. Tasks 20. Email 21. Timeline 22. Extra Pages 23. Authentication ======================= */ /* 1. Fonts */ @import url("https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,900&display=swap"); /* 2. General */ html { position: relative; min-height: 100%; } body { padding-bottom: 60px; overflow-x: hidden; } /* 3. Left Menu */ .nav-second-level li a, .nav-thrid-level li a { padding: 8px 20px; color: #6e768e; display: block; position: relative; -webkit-transition: all 0.4s; transition: all 0.4s; } .nav-second-level li a:focus, .nav-second-level li a:hover, .nav-thrid-level li a:focus, .nav-thrid-level li a:hover { color: #bcc1cc; } .nav-second-level li > a.active, .nav-thrid-level li > a.active { color: #bcc1cc; } #wrapper { height: 100%; overflow: hidden; width: 100%; } .content-page { margin-left: 250px; overflow: hidden; padding: 0px 12.5px 5px 12.5px; min-height: 80vh; margin-top: 72px; } .left-side-menu { width: 250px; background: #323742; bottom: 0; padding: 0 0 30px 0; position: fixed; top: 72px; -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-box-shadow: 1px 0.05rem 0.01rem rgba(75, 75, 90, 0.075); box-shadow: 1px 0.05rem 0.01rem rgba(75, 75, 90, 0.075); z-index: 99; } .left-side-menu .sidebar-content { height: 100%; padding-bottom: 30px; } #sidebar-menu { padding-bottom: 30px; } #sidebar-menu > ul > li.mm-active > a { border-left: 3px solid #bcc1cc; color: #bcc1cc; background-color: #292d36; } #sidebar-menu > ul > li.mm-active > a svg { color: #bcc1cc; fill: rgba(188, 193, 204, 0.1); } #sidebar-menu > ul > li > a { color: #6e768e; display: block; padding: 12px 30px; font-size: 15px; font-weight: 400; position: relative; -webkit-transition: all 0.4s; transition: all 0.4s; border-left: 3px solid transparent; } #sidebar-menu > ul > li > a svg { display: inline-block; width: 16px; height: 16px; margin: 0 10px 0 3px; color: #6e768e; fill: rgba(110, 118, 142, 0.12); } #sidebar-menu > ul > li > a:hover, #sidebar-menu > ul > li > a:focus, #sidebar-menu > ul > li > a:active { color: #bcc1cc; text-decoration: none; background-color: #292d36; } #sidebar-menu > ul > li > a:hover svg, #sidebar-menu > ul > li > a:focus svg, #sidebar-menu > ul > li > a:active svg { color: #bcc1cc; fill: rgba(188, 193, 204, 0.1); } #sidebar-menu > ul > li > a > span { vertical-align: middle; } #sidebar-menu > ul > li > a i { display: inline-block; line-height: 1rem; margin: 0 10px 0 3px; text-align: center; vertical-align: middle; width: 20px; } #sidebar-menu > ul > li > a.active { border-left: 3px solid #bcc1cc; color: #bcc1cc; background-color: #292d36; } #sidebar-menu > ul > li > a.active svg { color: #bcc1cc; fill: rgba(188, 193, 204, 0.1); } #sidebar-menu > ul > li > ul { padding-left: 43px; } #sidebar-menu > ul > li > ul ul { padding-left: 20px; } #sidebar-menu .menu-arrow { -webkit-transition: -webkit-transform .15s; transition: -webkit-transform .15s; transition: transform .15s; transition: transform .15s, -webkit-transform .15s; position: absolute; right: 30px; display: inline-block; font-family: 'unicons'; text-rendering: auto; line-height: 1.3rem; font-size: 0.9rem; -webkit-transform: translate(0, 0); transform: translate(0, 0); top: 15px; } #sidebar-menu .menu-arrow:before { content: "\e82f"; } #sidebar-menu .badge { margin-top: 3px; } #sidebar-menu .nav-second-level > li .menu-arrow { top: 8px; } #sidebar-menu li.mm-active > a > span.menu-arrow { -webkit-transform: rotate(90deg); transform: rotate(90deg); } #sidebar-menu .menu-title { padding: 15px 30px 10px 30px; letter-spacing: .05em; pointer-events: none; cursor: default; font-size: 0.6875rem; text-transform: uppercase; color: #6e768e; } .user-profile { padding: 15px 20px 15px 30px; } .user-profile .avatar-xs { display: none; } .user-profile .pro-user-name { color: #6e768e; font-weight: 600; } .user-profile .pro-user-desc { text-transform: uppercase; font-size: 0.6rem; font-weight: 700; letter-spacing: 1px; } .user-profile .dropdown-toggle svg { width: 18px; height: 18px; color: #6e768e; background-color: rgba(110, 118, 142, 0.1); border-radius: 3px; } .left-side-menu-condensed .logo { width: 70px !important; text-align: center; } .left-side-menu-condensed .logo span.logo-lg { display: none; } .left-side-menu-condensed .logo span.logo-sm { display: block !important; } .left-side-menu-condensed .navbar-custom { left: 0 !important; padding-left: 10px; } .left-side-menu-condensed .navbar-custom .button-menu-mobile.disable-btn { display: block !important; } .left-side-menu-condensed .left-side-menu { position: absolute; width: 70px !important; z-index: 5; } .left-side-menu-condensed .left-side-menu .slimScrollDiv, .left-side-menu-condensed .left-side-menu .slimscroll-menu { overflow: inherit !important; height: auto !important; } .left-side-menu-condensed .left-side-menu .slimScrollBar { visibility: hidden; } .left-side-menu-condensed .left-side-menu .sidebar-content { height: auto; } .left-side-menu-condensed .left-side-menu #sidebar-menu .menu-title, .left-side-menu-condensed .left-side-menu #sidebar-menu .menu-arrow, .left-side-menu-condensed .left-side-menu #sidebar-menu .label, .left-side-menu-condensed .left-side-menu #sidebar-menu .badge { display: none !important; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li { position: relative; white-space: nowrap; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li > a { padding: 15px; min-height: 54px; -webkit-transition: none; transition: none; margin: 0px; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li > a:hover, .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li > a:active, .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li > a:focus { color: #bcc1cc; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li > a svg { width: 26px; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li > a span { display: none; padding-left: 25px; vertical-align: baseline; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li > a.active { background-color: #292d36; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li:hover > a { position: relative; width: calc(190px + 70px); color: #bcc1cc !important; background-color: #292d36; -webkit-transition: none; transition: none; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li:hover > a span { display: inline; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li:hover a.open :after, .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li:hover a.mm-active :after { display: none; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li:hover > ul { display: block; left: 70px; position: absolute; width: 190px; height: auto !important; -webkit-box-shadow: 0 0.05rem 0.01rem rgba(161, 168, 184, 0.075); box-shadow: 0 0.05rem 0.01rem rgba(161, 168, 184, 0.075); } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li:hover > ul ul { -webkit-box-shadow: 0 0.05rem 0.01rem rgba(161, 168, 184, 0.075); box-shadow: 0 0.05rem 0.01rem rgba(161, 168, 184, 0.075); } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li:hover > ul a { -webkit-box-shadow: none; box-shadow: none; padding: 8px 20px; position: relative; width: 190px; z-index: 6; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li:hover > ul a:hover { color: #bcc1cc; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul ul { padding: 5px 0; z-index: 9999; display: none; background-color: #323742; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul ul li:hover > ul { display: block; left: 190px; margin-top: -36px; height: auto !important; position: absolute; width: 190px; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul ul li > a span.pull-right { position: absolute; right: 20px; top: 12px; -webkit-transform: rotate(270deg); transform: rotate(270deg); } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul ul li.active a { color: #564ab1; } .left-side-menu-condensed .user-profile { padding: 15px; } .left-side-menu-condensed .user-profile .avatar-sm { display: none; } .left-side-menu-condensed .user-profile .avatar-xs { display: block; } .left-side-menu-condensed .user-profile .pro-user-name, .left-side-menu-condensed .user-profile .pro-user-desc { display: none; } .left-side-menu-condensed .user-profile .profile-dropdown-menu .dropdown-toggle svg { background-color: transparent; } .left-side-menu-condensed .content-page { margin-left: 70px !important; } .left-side-menu-condensed .footer { left: 70px !important; } .left-side-menu-condensed .user-box { display: none; } @media (min-width: 769px) { body.left-side-menu-condensed { min-height: 1200px; } } @media (max-width: 1024px) { .left-side-menu { top: 72px; padding: 12px 0; } .left-side-menu-condensed .left-side-menu { padding-top: 12px; } } @media (max-width: 767.98px) { body { overflow-x: hidden; } .left-side-menu { display: none; z-index: 10 !important; top: 72px; } .sidebar-enable .left-side-menu { display: block; } .content-page, .left-side-menu-condensed .content-page { margin-left: 0 !important; padding: 0 10px; } .pro-user-name { display: none; } .logo-box { display: none; } } /* ============= Menu - Dark ============= */ .left-side-menu-dark .metismenu li a[aria-expanded=true] { color: #564ab1 !important; } .left-side-menu-dark .left-side-menu { background-color: #f5f5fb; -webkit-box-shadow: none; box-shadow: none; } .left-side-menu-dark .left-side-menu #sidebar-menu > ul > li.mm-active > a { color: #564ab1; background-color: white; } .left-side-menu-dark .left-side-menu #sidebar-menu > ul > li.mm-active > a svg { color: #564ab1; fill: rgba(255, 255, 255, 0.12); } .left-side-menu-dark .left-side-menu #sidebar-menu > ul > li > a { color: #9097a7; } .left-side-menu-dark .left-side-menu #sidebar-menu > ul > li > a svg { color: #9097a7; fill: rgba(255, 255, 255, 0.12); } .left-side-menu-dark .left-side-menu #sidebar-menu > ul > li > a:hover, .left-side-menu-dark .left-side-menu #sidebar-menu > ul > li > a:focus, .left-side-menu-dark .left-side-menu #sidebar-menu > ul > li > a:active { color: #564ab1; background-color: white; } .left-side-menu-dark .left-side-menu #sidebar-menu > ul > li > a.active { color: #564ab1; background-color: white; } .left-side-menu-dark .left-side-menu #sidebar-menu > ul > li > a.active svg { color: #564ab1; fill: rgba(255, 255, 255, 0.12); } .left-side-menu-dark .left-side-menu #sidebar-menu .menu-title { color: #6b768d; } .left-side-menu-dark .nav-second-level li a, .left-side-menu-dark .nav-thrid-level li a { color: #9097a7; } .left-side-menu-dark .nav-second-level li a:focus, .left-side-menu-dark .nav-second-level li a:hover, .left-side-menu-dark .nav-thrid-level li a:focus, .left-side-menu-dark .nav-thrid-level li a:hover { background-color: transparent; color: #564ab1; } .left-side-menu-dark .nav-second-level li.mm-active > a, .left-side-menu-dark .nav-thrid-level li.mm-active > a { color: #564ab1; } .left-side-menu-dark.left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li:hover > a { background-color: white; color: #564ab1 !important; } .left-side-menu-dark.left-side-menu-condensed .nav-second-level li.mm-active > a, .left-side-menu-dark.left-side-menu-condensed .nav-thrid-level li.mm-active > a { color: #bcc1cc; } .left-side-menu-dark .user-profile .pro-user-name, .left-side-menu-dark .user-profile .pro-user-desc { color: #6b768d; } .left-side-menu-dark .user-profile .profile-dropdown-menu .dropdown-toggle svg { background-color: white; color: #fff; } /* 4. Topbar */ .navbar-custom { padding: 0 22px 0 37px; position: fixed; top: 0px; left: 0px; right: 0px; height: 72px; z-index: 100; background-color: #323742; -webkit-box-shadow: 0 0.05rem 0.01rem rgba(161, 168, 184, 0.075); box-shadow: 0 0.05rem 0.01rem rgba(161, 168, 184, 0.075); /* Search */ } .navbar-custom .topnav-menu > li { float: left; } .navbar-custom .topnav-menu .nav-link { padding: 0 15px; color: #6e768e; min-width: 32px; display: block; line-height: 72px; text-align: center; max-height: 72px; } .navbar-custom .topnav-menu .nav-link svg { height: 20px; width: 20px; color: #6e768e; fill: rgba(110, 118, 142, 0.12); } .navbar-custom .topnav-menu .nav-link:hover svg, .navbar-custom .topnav-menu .nav-link:focus svg, .navbar-custom .topnav-menu .nav-link:active svg { color: #bcc1cc; fill: rgba(188, 193, 204, 0.1); } .navbar-custom .dropdown.show .nav-link { background-color: rgba(255, 255, 255, 0.05); } .navbar-custom .menu-left { overflow: hidden; } .navbar-custom .app-search { padding: 17px 0; overflow: hidden; margin-left: 15px; margin-right: 15px; } .navbar-custom .app-search form { max-width: 320px; } .navbar-custom .app-search .form-control { border: 1px solid transparent; height: 38px; padding-left: 40px; padding-right: 20px; background-color: #292d36; -webkit-box-shadow: none; box-shadow: none; border-radius: .3rem; } .navbar-custom .app-search .form-control:focus { background-color: #fff; border: 1px solid #292d36; } .navbar-custom .app-search svg { position: absolute; z-index: 10; font-size: 18px; color: #6b768d; line-height: 38px; left: 10px; top: 10px; width: 20px; height: 20px; } .navbar-custom .button-menu-mobile { border: none; color: #6b768d; display: block; height: 72px; line-height: 72px; width: 60px; background-color: transparent; font-size: 24px; cursor: pointer; margin-right: 45px; } .navbar-custom .button-menu-mobile.disable-btn { display: none; } .navbar-custom .button-menu-mobile .menu-icon { display: inline-block; } .navbar-custom .button-menu-mobile .close-icon { display: none; } .navbar-custom .button-menu-mobile.open .menu-icon { display: none; } .navbar-custom .button-menu-mobile.open .close-icon { display: inline-block; } .navbar-custom .logo span.logo-sm { display: none; } .text-logo { text-transform: uppercase; font-weight: 900; letter-spacing: 1px; } /* Notification */ @-webkit-keyframes blinker { 50% { opacity: 0; } } @keyframes blinker { 50% { opacity: 0; } } .noti-scroll { max-height: 230px; } .notification-list { margin-left: 0; } .notification-list .noti-title { background-color: transparent; padding: 7px 20px 15px; } .notification-list .noti-icon { font-size: 21px; vertical-align: middle; } .notification-list .noti-icon-badge { display: inline-block; position: absolute; top: 24px; right: 16px; width: 12px; height: 12px; background-color: #ff5c75; border: 2px solid #323742; border-radius: 50%; -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); -webkit-animation: blinker 3s linear infinite; animation: blinker 3s linear infinite; -webkit-animation-fill-mode: initial; animation-fill-mode: initial; } .notification-list .notify-item { padding: 12px 20px; } .notification-list .notify-item .notify-icon { float: left; height: 36px; width: 36px; font-size: 16px; line-height: 36px; text-align: center; margin-right: 10px; border-radius: 50%; color: #fff; } .notification-list .notify-item .notify-details { margin-bottom: 5px; overflow: hidden; margin-left: 45px; text-overflow: ellipsis; white-space: nowrap; color: #bcc1cc; line-height: 1.5; } .notification-list .notify-item .notify-details b { font-weight: 500; } .notification-list .notify-item .notify-details small { display: block; } .notification-list .notify-item .notify-details span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; } .notification-list .notify-item .user-msg { margin-left: 45px; white-space: normal; line-height: 16px; } .notification-list .profile-dropdown-items .notify-item { padding: 0.35rem 1.5rem; } .profile-dropdown { display: none; } .profile-dropdown-items { width: 170px; } .profile-dropdown-items i { vertical-align: middle; margin-right: 5px; } .nav-user { padding: 0 12px !important; } .nav-user img { height: 32px; width: 32px; } @media (max-width: 1024px) { .navbar-custom { left: 0; padding: 0 10px; margin: 0px; } .navbar-custom .button-menu-mobile.disable-btn { display: block; } .navbar-custom .logo { display: none; } } @media (max-width: 575.98px) { .navbar-custom .page-title { display: none; } } /* 5. Page Head */ .page-title-topbar { font-size: 20px; margin: 0; line-height: 72px; } .page-title { padding: 20px 0; } .page-title .breadcrumb { background-color: transparent; padding: 0; margin-bottom: 0; } .page-title h4 { font-size: 19px; } /* 6. Footer */ .footer { bottom: 0; padding: 19px 15px 20px; position: absolute; right: 0; color: #8790a4; left: 250px; } .footer .footer-links a { color: #8790a4; margin-left: 1.5rem; -webkit-transition: all .4s; transition: all .4s; } .footer .footer-links a:hover { color: #d6d9e0; } .footer .footer-links a:first-of-type { margin-left: 0; } .footer-alt { left: 0 !important; text-align: center; background-color: transparent; } @media (max-width: 767.98px) { .footer { left: 0 !important; text-align: center; } } /* 7. Horizontal Nav */ body[data-layout="topnav"] .container-fluid { padding-right: 24px; padding-left: 24px; } body[data-layout="topnav"] .navbar-custom { position: relative; padding: 0px; } body[data-layout="topnav"] .navbar-custom .topnav-menu .nav-link:hover svg, body[data-layout="topnav"] .navbar-custom .topnav-menu .nav-link:focus svg, body[data-layout="topnav"] .navbar-custom .topnav-menu .nav-link:active svg { color: #6e768e; } body[data-layout="topnav"] .content-page { margin-top: 0px; margin-left: 0px !important; padding: 05px 0px 5px 0; } body[data-layout="topnav"] .footer { left: 0; } body[data-layout="topnav"] .user-profile { padding: 20px 0px; } body[data-layout="topnav"] .profile-dropdown { display: block; } .topnav { background: #323742; } .topbar-nav { margin: 0; padding: 0; } .topbar-nav .badge { display: none; } .topbar-nav .metismenu { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin: 0; } .topbar-nav .metismenu .has-arrow:after { width: 0.4em; height: 0.4em; right: 1rem; -webkit-transform: rotate(45deg) translate(0, -50%); transform: rotate(45deg) translate(0, -50%); } .topbar-nav .metismenu .menu-title { display: none; } .topbar-nav .metismenu li:hover, .topbar-nav .metismenu li:focus, .topbar-nav .metismenu li:active { color: #bcc1cc; text-decoration: none; } .topbar-nav .metismenu li:hover svg, .topbar-nav .metismenu li:focus svg, .topbar-nav .metismenu li:active svg { color: #bcc1cc; fill: rgba(188, 193, 204, 0.1); } .topbar-nav .metismenu li a { color: #6e768e; font-size: 1rem; position: relative; padding: 1rem; display: block; } .topbar-nav .metismenu li a svg { display: inline-block; width: 16px; height: 16px; margin: 0 5px 0 0; color: #6e768e; fill: rgba(110, 118, 142, 0.12); } .topbar-nav .metismenu li a > span { vertical-align: middle; } .topbar-nav .metismenu li a:hover, .topbar-nav .metismenu li a:focus, .topbar-nav .metismenu li a:active { color: #bcc1cc; text-decoration: none; } .topbar-nav .metismenu li a:hover svg, .topbar-nav .metismenu li a:focus svg, .topbar-nav .metismenu li a:active svg { color: #bcc1cc; fill: rgba(188, 193, 204, 0.1); } .topbar-nav .metismenu li:nth-child(2) a { padding-left: 0px; } .topbar-nav .metismenu li .menu-arrow { -webkit-transition: -webkit-transform .15s; transition: -webkit-transform .15s; transition: transform .15s; transition: transform .15s, -webkit-transform .15s; display: inline-block; font-family: 'unicons'; text-rendering: auto; line-height: 1.3rem; font-size: 1.25rem; -webkit-transform: translate(0, 0); transform: translate(0, 0); vertical-align: middle; margin-left: 5px; } .topbar-nav .metismenu li .menu-arrow:before { content: "\e82d"; } .topbar-nav .metismenu li.mm-active > a { color: #bcc1cc; } .topbar-nav .metismenu li.mm-active > a svg { color: #bcc1cc; fill: rgba(188, 193, 204, 0.1); } .topbar-nav .metismenu li.mm-active > a > span.menu-arrow { -webkit-transform: rotate(180deg); transform: rotate(180deg); } .topbar-nav .metismenu li.active > a { color: #bcc1cc; } .topbar-nav .metismenu li.active > a svg { color: #bcc1cc; fill: rgba(188, 193, 204, 0.1); } .topbar-nav .metismenu li .nav-second-level { color: #6e768e; background-color: #323742; background-clip: padding-box; border-radius: 0 0 0.3rem 0.3rem; min-width: calc(10rem + 1.5rem); font-size: calc(0.9rem - 0.01rem); -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.175); padding: 0.5rem 0; } .topbar-nav .metismenu li .nav-second-level li:hover, .topbar-nav .metismenu li .nav-second-level li:focus, .topbar-nav .metismenu li .nav-second-level li:active { color: #bcc1cc; text-decoration: none; } .topbar-nav .metismenu li .nav-second-level li:first-of-type { padding-top: 0.5rem; } .topbar-nav .metismenu li .nav-second-level li:last-of-type { padding-bottom: 0.5rem; } .topbar-nav .metismenu li .nav-second-level a { display: block; width: 100%; padding: 0.35rem 1.5rem !important; clear: both; font-size: 0.9rem; font-weight: 400; line-height: 1.5; white-space: nowrap; background-color: transparent; border: 0; } .topbar-nav .metismenu li .nav-second-level a:hover, .topbar-nav .metismenu li .nav-second-level a:focus { color: #e5e6eb; text-decoration: none; background-color: #3b414e; } .topbar-nav .metismenu li .nav-second-level .has-arrow:after { margin-top: -2px; } .topbar-nav .metismenu li .nav-second-level .menu-arrow { float: right; } .topbar-nav .metismenu li .nav-third-level { color: #6e768e; min-width: calc(10rem + 1.5rem); } .topbar-nav .metismenu li .nav-third-level li:hover, .topbar-nav .metismenu li .nav-third-level li:focus, .topbar-nav .metismenu li .nav-third-level li:active { color: #bcc1cc; text-decoration: none; } .topbar-nav .metismenu li .nav-third-level li:first-of-type { padding-top: 0.5rem; } .topbar-nav .metismenu li .nav-third-level li:last-of-type { padding-bottom: 0.5rem; } .topbar-nav .metismenu li .nav-third-level a { display: block; width: 100%; padding: 0.35rem 1.5rem !important; clear: both; font-size: 0.9rem; font-weight: 400; line-height: 1.5; white-space: nowrap; background-color: transparent; border: 0; padding-left: 2.2rem !important; } .topbar-nav .metismenu li .nav-third-level a:hover, .topbar-nav .metismenu li .nav-third-level a:focus { color: #e5e6eb; text-decoration: none; background-color: #3b414e; } .topbar-nav .metismenu li .nav-third-level .has-arrow:after { margin-top: -2px; } .topbar-nav .metismenu li .nav-third-level .menu-arrow { float: right; } @media (min-width: 992px) { body[data-layout="topnav"] .container-fluid { max-width: 85%; } body[data-layout="topnav"] .navbar-custom .logo { display: block; } body[data-layout="topnav"] .navbar-custom .logo span.logo-sm { display: none !important; } body[data-layout="topnav"] .navbar-custom .logo span.logo-lg { display: block; } body[data-layout="topnav"].left-side-menu-condensed .navbar-custom .button-menu-mobile.disable-btn { display: none !important; } body[data-layout="topnav"].boxed-layout .container-fluid { max-width: 97%; } .topbar-nav .metismenu { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; } .topbar-nav .metismenu > li { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } .topbar-nav .metismenu > li > ul { position: absolute; z-index: 1001; } .topbar-nav .metismenu .side-nav-item:first-of-type .side-nav-link { padding-left: 0; } .navbar-toggle { display: none; } } @media (max-width: 991.98px) { body[data-layout=topnav] .navbar-custom .container-fluid { padding-right: 12px; padding-left: 12px; } .topnav { overflow: auto; } .topbar-nav { max-height: 400px; } .topbar-nav .metismenu li a { padding: 15px 0px; } .topbar-nav .metismenu li .nav-second-level { -webkit-box-shadow: none; box-shadow: none; padding-top: 0px; } .topbar-nav .metismenu li .nav-second-level li:first-of-type { padding: 0; } .topbar-nav .metismenu li .nav-second-level a { padding-right: 0px !important; } .topbar-nav .metismenu li .nav-second-level a:hover, .topbar-nav .metismenu li .nav-second-level a:focus { background-color: transparent; } .topbar-nav .metismenu li .menu-arrow { float: right; margin-top: 2px; } } @media (min-width: 992px) and (max-width: 1180px) { .topbar-nav .metismenu li .menu-arrow { display: none; } } /* 8. Right Sidebar */ .right-bar { background-color: #323742; -webkit-box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02); box-shadow: 0 0 24px 0 rgba(0, 0, 0, 0.06), 0 1px 0 0 rgba(0, 0, 0, 0.02); display: block; position: fixed; -webkit-transition: all 200ms ease-out; transition: all 200ms ease-out; width: 260px; z-index: 9999; float: right !important; right: -270px; top: 0; bottom: 0; padding-bottom: 60px; } .right-bar .rightbar-title { padding: 25px 25px; } .right-bar .right-bar-toggle { height: 24px; width: 24px; line-height: 24px; text-align: center; border-radius: 50%; margin-top: -4px; } .right-bar .demo-img { height: 200px; } .rightbar-overlay { background-color: rgba(188, 193, 204, 0.55); position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: none; z-index: 9998; -webkit-transition: all .2s ease-out; transition: all .2s ease-out; } .right-bar-enabled .right-bar { right: 0; } .right-bar-enabled .rightbar-overlay { display: block; } @media (max-width: 767.98px) { .right-bar { overflow: auto; } .right-bar .slimscroll-menu { height: auto !important; } } .activity-widget .activity-list { border-bottom: 1px solid #323742; padding: 12px 0px; } .activity-widget .activity-list:last-child { border: none; } .upgrade-wid .laptop-img { position: relative; bottom: 22px; } /* 9. Layouts */ @media (min-width: 1200px) { .scrollable-layout { padding-bottom: 0; } .scrollable-layout #wrapper { display: -webkit-box; display: -ms-flexbox; display: flex; } .scrollable-layout .left-side-menu { position: relative; min-width: 250px; min-height: 100vh; } .scrollable-layout .navbar-custom { position: absolute; } .scrollable-layout .content-page { margin-left: 0; width: 100%; padding-bottom: 60px; } .scrollable-layout.left-side-menu-condensed .left-side-menu { min-width: 70px; } .scrollable-layout.left-side-menu-condensed .content-page { margin-left: 0px !important; } } .boxed-layout { background: #252830; } .boxed-layout #wrapper { max-width: 1300px; margin: 0 auto; -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); background: #292d36; } .boxed-layout .navbar-custom { max-width: 1300px; margin: 0 auto; } .boxed-layout .footer { margin: 0 auto; max-width: calc(1300px - 250px); background: #292d36; } .boxed-layout.left-side-menu-condensed { min-height: auto; } .boxed-layout.left-side-menu-condensed .footer { max-width: calc(1300px - 70px); } /* 10. Helper */ .width-xs { min-width: 80px; } .width-sm { min-width: 95px; } .width-md { min-width: 110px; } .width-lg { min-width: 140px; } .width-xl { min-width: 160px; } .font-family-secondary { font-family: "Nunito Sans", sans-serif; } .avatar-xs { height: 1.5rem; width: 1.5rem; } .avatar-sm { height: 2.25rem; width: 2.25rem; } .avatar { height: 3rem; width: 3rem; } .avatar-md { height: 3.5rem; width: 3.5rem; } .avatar-lg { height: 4.5rem; width: 4.5rem; } .avatar-xl { height: 6rem; width: 6rem; } .avatar-xxl { height: 7.5rem; width: 7.5rem; } .avatar-title { -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: #fff; display: -webkit-box; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 100%; } .avatar-group { padding-left: 12px; } .avatar-group .avatar-group-item { margin: 0 0 10px -12px; display: inline-block; border: 2px solid #fff; border-radius: 50%; } .font-weight-medium { font-weight: 500; } .font-weight-semibold { font-weight: 600; } .sp-line-1, .sp-line-2, .sp-line-3, .sp-line-4 { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } .sp-line-1 { -webkit-line-clamp: 1; } .sp-line-2 { -webkit-line-clamp: 2; } .sp-line-3 { -webkit-line-clamp: 3; } .sp-line-4 { -webkit-line-clamp: 4; } .pull-in { margin-left: -1.25rem; margin-right: -1.25rem; } /* 11. Social */ .social-list-item { height: 2rem; width: 2rem; line-height: calc(2rem - 4px); display: block; border: 2px solid #6b768d; border-radius: 50%; color: #6b768d; } /* 12. Widgets */ .widget-flat { position: relative; overflow: hidden; } .widget-flat i.widget-icon { font-size: 36px; } /* Chat widget */ .conversation-list { list-style: none; height: 332px; padding: 0 7px; } .conversation-list li { margin-bottom: 24px; } .conversation-list .chat-avatar { float: left; text-align: center; width: 34px; } .conversation-list .chat-avatar img { border-radius: 100%; width: 100%; } .conversation-list .chat-avatar i { font-size: 12px; font-style: normal; } .conversation-list .ctext-wrap { background: #f0f2fe; color: #5369f8; border-radius: 0.3rem; display: inline-block; padding: 4px 12px; position: relative; min-width: 160px; } .conversation-list .ctext-wrap i { display: block; font-size: 12px; font-style: normal; font-weight: 700; position: relative; } .conversation-list .ctext-wrap p { margin: 0; padding-top: 3px; } .conversation-list .ctext-wrap:after { right: 98%; top: 0; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-top-color: #f0f2fe; border-width: 6px; margin-left: -1px; border-right-color: #f0f2fe; } .conversation-list .conversation-text { float: left; font-size: 12px; margin-left: 12px; width: 70%; } .conversation-list .odd .chat-avatar { float: right !important; } .conversation-list .odd .conversation-text { float: right !important; margin-right: 12px; text-align: right; width: 70% !important; } .conversation-list .odd .ctext-wrap { background-color: #3b414e; color: #a1a8b8; } .conversation-list .odd .ctext-wrap:after { border-color: transparent; border-left-color: #3b414e; border-top-color: #3b414e; left: 99% !important; } /* profile / users */ .profile-widget { position: relative; } .profile-widget .card-action { position: absolute; right: 7px; top: 12px; z-index: 100; } .profile-widget .card-img-top { max-height: 220px; } .profile-widget .profile-info { margin-top: -2.7rem; } .calendar-widget .flatpickr-calendar { -webkit-box-shadow: none; box-shadow: none; border: 1px solid #3b414e !important; } /* 13. Custom Checkbox */ .checkbox label { display: inline-block; padding-left: 8px; position: relative; font-weight: normal; margin-bottom: 0; } .checkbox label::before { background-color: #3b414e; border-radius: 3px; border: 2px solid #3b414e; content: ""; display: inline-block; height: 18px; left: 0; margin-left: -18px; position: absolute; -webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; width: 18px; outline: none !important; top: 2px; } .checkbox label::after { color: #a1a8b8; display: inline-block; font-size: 11px; height: 18px; left: 0; margin-left: -18px; padding-left: 3px; padding-top: 2px; position: absolute; top: 0; width: 18px; } .checkbox input[type="checkbox"] { cursor: pointer; opacity: 0; z-index: 1; outline: none !important; } .checkbox input[type="checkbox"]:disabled + label { opacity: 0.65; } .checkbox input[type="checkbox"]:focus + label::before { outline-offset: -2px; outline: none; } .checkbox input[type="checkbox"]:checked + label::after { content: ""; position: absolute; top: 6px; left: 7px; display: table; width: 4px; height: 8px; border: 2px solid #a1a8b8; border-top-width: 0; border-left-width: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .checkbox input[type="checkbox"]:disabled + label::before { background-color: #3b414e; cursor: not-allowed; } .checkbox.checkbox-circle label::before { border-radius: 50%; } .checkbox.checkbox-inline { margin-top: 0; } .checkbox.checkbox-single input { height: 18px; width: 18px; position: absolute; } .checkbox.checkbox-single label { height: 18px; width: 18px; } .checkbox.checkbox-single label:before { margin-left: 0; } .checkbox.checkbox-single label:after { margin-left: 0; } .checkbox-primary input[type="checkbox"]:checked + label::before { background-color: #5369f8; border-color: #5369f8; } .checkbox-primary input[type="checkbox"]:checked + label::after { border-color: #fff; } .checkbox-secondary input[type="checkbox"]:checked + label::before { background-color: #292d36; border-color: #292d36; } .checkbox-secondary input[type="checkbox"]:checked + label::after { border-color: #fff; } .checkbox-success input[type="checkbox"]:checked + label::before { background-color: #43d39e; border-color: #43d39e; } .checkbox-success input[type="checkbox"]:checked + label::after { border-color: #fff; } .checkbox-info input[type="checkbox"]:checked + label::before { background-color: #25c2e3; border-color: #25c2e3; } .checkbox-info input[type="checkbox"]:checked + label::after { border-color: #fff; } .checkbox-warning input[type="checkbox"]:checked + label::before { background-color: #ffbe0b; border-color: #ffbe0b; } .checkbox-warning input[type="checkbox"]:checked + label::after { border-color: #fff; } .checkbox-danger input[type="checkbox"]:checked + label::before { background-color: #ff5c75; border-color: #ff5c75; } .checkbox-danger input[type="checkbox"]:checked + label::after { border-color: #fff; } .checkbox-light input[type="checkbox"]:checked + label::before { background-color: #3b414e; border-color: #3b414e; } .checkbox-light input[type="checkbox"]:checked + label::after { border-color: #fff; } .checkbox-dark input[type="checkbox"]:checked + label::before { background-color: #bcc1cc; border-color: #bcc1cc; } .checkbox-dark input[type="checkbox"]:checked + label::after { border-color: #fff; } /* 14. Custom Radio */ .radio label { display: inline-block; padding-left: 8px; position: relative; font-weight: normal; margin-bottom: 0; } .radio label::before { -o-transition: border 0.5s ease-in-out; -webkit-transition: border 0.5s ease-in-out; background-color: #fff; border-radius: 50%; border: 2px solid #8790a4; content: ""; display: inline-block; height: 18px; left: 0; margin-left: -18px; position: absolute; transition: border 0.5s ease-in-out; width: 18px; outline: none !important; } .radio label::after { -moz-transition: -moz-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); -o-transition: -o-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); -webkit-transform: scale(0, 0); -webkit-transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); background-color: #a1a8b8; border-radius: 50%; content: " "; display: inline-block; height: 10px; left: 6px; margin-left: -20px; position: absolute; top: 4px; transform: scale(0, 0); transition: -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); transition: transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33), -webkit-transform 0.1s cubic-bezier(0.8, -0.33, 0.2, 1.33); width: 10px; } .radio input[type="radio"] { cursor: pointer; opacity: 0; z-index: 1; outline: none !important; } .radio input[type="radio"]:disabled + label { opacity: 0.65; } .radio input[type="radio"]:focus + label::before { outline-offset: -2px; outline: 5px auto -webkit-focus-ring-color; outline: thin dotted; } .radio input[type="radio"]:checked + label::after { -webkit-transform: scale(1, 1); transform: scale(1, 1); } .radio input[type="radio"]:disabled + label::before { cursor: not-allowed; } .radio.radio-inline { margin-top: 0; } .radio.radio-single label { height: 17px; } .radio-primary input[type="radio"] + label::after { background-color: #5369f8; } .radio-primary input[type="radio"]:checked + label::before { border-color: #5369f8; } .radio-primary input[type="radio"]:checked + label::after { background-color: #5369f8; } .radio-secondary input[type="radio"] + label::after { background-color: #292d36; } .radio-secondary input[type="radio"]:checked + label::before { border-color: #292d36; } .radio-secondary input[type="radio"]:checked + label::after { background-color: #292d36; } .radio-success input[type="radio"] + label::after { background-color: #43d39e; } .radio-success input[type="radio"]:checked + label::before { border-color: #43d39e; } .radio-success input[type="radio"]:checked + label::after { background-color: #43d39e; } .radio-info input[type="radio"] + label::after { background-color: #25c2e3; } .radio-info input[type="radio"]:checked + label::before { border-color: #25c2e3; } .radio-info input[type="radio"]:checked + label::after { background-color: #25c2e3; } .radio-warning input[type="radio"] + label::after { background-color: #ffbe0b; } .radio-warning input[type="radio"]:checked + label::before { border-color: #ffbe0b; } .radio-warning input[type="radio"]:checked + label::after { background-color: #ffbe0b; } .radio-danger input[type="radio"] + label::after { background-color: #ff5c75; } .radio-danger input[type="radio"]:checked + label::before { border-color: #ff5c75; } .radio-danger input[type="radio"]:checked + label::after { background-color: #ff5c75; } .radio-light input[type="radio"] + label::after { background-color: #3b414e; } .radio-light input[type="radio"]:checked + label::before { border-color: #3b414e; } .radio-light input[type="radio"]:checked + label::after { background-color: #3b414e; } .radio-dark input[type="radio"] + label::after { background-color: #bcc1cc; } .radio-dark input[type="radio"]:checked + label::before { border-color: #bcc1cc; } .radio-dark input[type="radio"]:checked + label::after { background-color: #bcc1cc; } /* 15. Print */ @media print { .left-side-menu, .right-bar, .page-title-box, .navbar-custom, .footer { display: none; } .card-body, .content-page, .right-bar, .content, body { padding: 0; margin: 0; } } /* 16. Preloader */ #preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #292d36; z-index: 9999; } #status { height: 80px; position: absolute; left: 50%; top: 50%; margin: -40px 0 0 -40px; } .spinner > div { display: inline-block; width: 16px; height: 16px; background: #fff; border: 2px solid #5369f8; border-radius: 50%; -webkit-animation: circle-loader 1s infinite ease-in-out both; animation: circle-loader 1s infinite ease-in-out both; margin: 0px 7px; } .spinner .circle1 { -webkit-animation-delay: -0.32s; animation-delay: -0.32s; } .spinner .circle2 { -webkit-animation-delay: -0.16s; animation-delay: -0.16s; } @-webkit-keyframes circle-loader { 0%, 80%, 100% { -webkit-transform: scale(0.4); transform: scale(0.4); } 40% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes circle-loader { 0%, 80%, 100% { -webkit-transform: scale(0.4); transform: scale(0.4); } 40% { -webkit-transform: scale(1); transform: scale(1); } } /* 17. Plugins */ .slimScrollDiv { height: auto !important; } .apex-charts { min-height: 10px !important; } .apex-charts text { font-family: "Nunito Sans", sans-serif !important; fill: #a1a8b8; } .apex-charts .apexcharts-canvas { margin: 0 auto; } .apexcharts-tooltip-title, .apexcharts-tooltip-text { font-family: "Nunito Sans", sans-serif !important; } .apexcharts-legend-series { font-weight: 400; } .apexcharts-gridline { pointer-events: none; stroke: #3b414e; } .apexcharts-legend-text { color: #8790a4 !important; font-family: "Nunito Sans", sans-serif !important; font-size: 13px !important; } .apexcharts-pie-label { fill: #fff !important; } .apexcharts-yaxis text, .apexcharts-xaxis text { font-family: "Nunito Sans", sans-serif !important; fill: #6b768d; } .apexcharts-point-annotations text, .apexcharts-xaxis-annotations text, .apexcharts-yaxis-annotations text { fill: #fff; } .apexcharts-radar-series polygon { fill: transparent; stroke: #3b414e; } .apexcharts-radar-series line { stroke: #3b414e; } .apexcharts-pie-label, .apexcharts-datalabel, .apexcharts-datalabel-label, .apexcharts-datalabel-value { fill: #fff !important; } .calendar { float: left; margin-bottom: 0; } .fc-view { margin-top: 30px; } .none-border .modal-footer { border-top: none; } .fc-toolbar { margin: 10px 0 5px 0; } .fc-toolbar h2 { font-size: 1.25rem; line-height: 1.875rem; text-transform: uppercase; } .fc-day-grid-event .fc-time { font-weight: 500; } th.fc-day-header { padding: 0.5rem 0; } .fc-day { background: transparent; } .fc-toolbar .fc-state-active, .fc-toolbar .ui-state-active, .fc-toolbar button:focus, .fc-toolbar button:hover, .fc-toolbar .ui-state-hover { z-index: 0; } .fc th.fc-widget-header { background: #3b414e; font-size: 13px; line-height: 20px; padding: 10px 0; text-transform: uppercase; font-weight: 500; } .fc-unthemed th, .fc-unthemed td, .fc-unthemed thead, .fc-unthemed tbody, .fc-unthemed .fc-divider, .fc-unthemed .fc-row, .fc-unthemed .fc-popover { border-color: #3b414e; } .fc-unthemed td.fc-today, .fc-unthemed .fc-divider { background: #3b414e; } .fc-button { background: #3b414e; border: none; color: #a1a8b8; text-transform: capitalize; -webkit-box-shadow: none; box-shadow: none; border-radius: 3px; margin: 0 3px; padding: 6px 12px; height: auto; } .fc-text-arrow { font-family: inherit; font-size: 1rem; } .fc-state-hover { background: #3b414e; } .fc-state-highlight { background: #3b414e; } .fc-state-down, .fc-state-active, .fc-state-disabled { background-color: #5369f8; color: #fff; text-shadow: none; } .fc-cell-overlay { background: #3b414e; } .fc-unthemed .fc-today { background: #fff; } .fc-event { border-radius: 2px; border: none; cursor: move; font-size: 0.8125rem; margin: 5px 7px; padding: 5px 5px; text-align: center; } .external-event { cursor: move; margin: 10px 0; padding: 8px 10px; color: #fff; border-radius: 4px; } .fc-basic-view td.fc-week-number span { padding-right: 8px; } .fc-basic-view td.fc-day-number { padding-right: 8px; } .fc-basic-view .fc-content { color: #fff; } .fc-time-grid-event .fc-content { color: #fff; } @media (max-width: 767.98px) { .fc-toolbar { display: block; } .fc-toolbar .fc-left, .fc-toolbar .fc-right, .fc-toolbar .fc-center { float: none; display: block; clear: both; margin: 10px 0; } .fc .fc-toolbar > * > * { float: none; } .fc-today-button { display: none; } } .fc-toolbar .btn { padding: 0.25rem 0.5rem; font-size: 0.7875rem; line-height: 1.5; border-radius: 0.2rem; } .select2-container { width: 100% !important; } .select2-container .select2-selection--single { border: 1px solid #3b414e; height: calc(1.5em + 0.94rem + 2px); background-color: #363c48; outline: none; border-radius: 0.3rem; } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 36px; padding-left: 12px; color: #a1a8b8; } .select2-container .select2-selection--single .select2-selection__arrow { height: 34px; width: 34px; right: 3px; } .select2-container .select2-selection--single .select2-selection__arrow b { border-color: #6b768d transparent transparent transparent; border-width: 6px 6px 0 6px; } .select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #6b768d transparent !important; border-width: 0 6px 6px 6px !important; } .select2-results__option { padding: 6px 12px; } .select2-dropdown { border: 1px solid #3b414e; -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); background-color: #323742; } .select2-container--default .select2-search--dropdown { padding: 10px; background-color: #373d49; } .select2-container--default .select2-search--dropdown .select2-search__field { outline: none; border: 1px solid #3b414e; background-color: #363c48; color: #a1a8b8; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #5369f8; } .select2-container--default .select2-results__option[aria-selected=true] { background-color: #373d49; color: #e5e6eb; } .select2-container--default .select2-results__option[aria-selected=true]:hover { background-color: #5369f8; color: #fff; } .select2-container .select2-selection--multiple { min-height: calc(1.5em + 0.94rem + 2px); border: 1px solid #3b414e !important; background-color: #363c48; } .select2-container .select2-selection--multiple .select2-selection__rendered { padding: 2px 10px; } .select2-container .select2-selection--multiple .select2-search__field { border: 0; color: #a1a8b8; } .select2-container .select2-selection--multiple .select2-selection__choice { background-color: #5369f8; border: none; color: #fff; border-radius: 3px; padding: 0 7px; margin-top: 6px; } .select2-container .select2-selection--multiple .select2-selection__choice__remove { color: #fff; margin-right: 5px; } .select2-container .select2-selection--multiple .select2-selection__choice__remove:hover { color: #fff; } .ms-container { background: transparent url("../images/plugin/multiple-arrow.png") no-repeat 50% 50%; width: auto; max-width: 370px; } .ms-container .ms-list { -webkit-box-shadow: none; box-shadow: none; border: 1px solid #3b414e; } .ms-container .ms-list.ms-focus { -webkit-box-shadow: none; box-shadow: none; border: 1px solid #3f4654; } .ms-container .ms-selectable { background-color: #363c48; } .ms-container .ms-selectable li.ms-elem-selectable { border: none; padding: 5px 10px; color: #8790a4; } .ms-container .ms-selectable li.ms-hover { background-color: #5369f8; color: #fff; } .ms-container .ms-selection { background-color: #363c48; } .ms-container .ms-selection li.ms-elem-selection { border: none; padding: 5px 10px; color: #8790a4; } .ms-container .ms-selection li.ms-hover { background-color: #5369f8; color: #fff; } .ms-selectable { -webkit-box-shadow: none; box-shadow: none; outline: none !important; } .ms-optgroup-label { font-weight: 500; font-family: "Nunito Sans", sans-serif; color: #bcc1cc !important; font-size: 13px; } .flatpickr-calendar { overflow: hidden; background-color: #323742; -webkit-box-shadow: none; box-shadow: none; border: 2px solid #3b414e; } .flatpickr-calendar .flatpickr-time { border: none !important; } .flatpickr-calendar .flatpickr-time input, .flatpickr-calendar .flatpickr-time .flatpickr-am-pm { color: #8790a4; } .flatpickr-calendar .flatpickr-time input:focus, .flatpickr-calendar .flatpickr-time input:hover, .flatpickr-calendar .flatpickr-time .flatpickr-am-pm:focus, .flatpickr-calendar .flatpickr-time .flatpickr-am-pm:hover { background: #3b414e; } .flatpickr-day { color: #8790a4; } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay { background: #5369f8; border-color: #5369f8; } .flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)), .flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)) { -webkit-box-shadow: -10px 0 0 #5369f8; box-shadow: -10px 0 0 #5369f8; } .flatpickr-day.today { border-color: #3b414e; } .flatpickr-day.inRange { background: #292d36; border-color: #292d36; -webkit-box-shadow: -10px 0 0 #292d36; box-shadow: -10px 0 0 #292d36; } .flatpickr-day.inRange.nextMonthDay { background: #292d36; border-color: #292d36; } .flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay, .flatpickr-day.notAllowed, .flatpickr-day.notAllowed.prevMonthDay, .flatpickr-day.notAllowed.nextMonthDay { color: rgba(135, 144, 164, 0.4); } .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.today:hover, .flatpickr-day.today:focus, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus { background: #3b414e; border-color: #3b414e; color: #8790a4; } .flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus { background: #212529; } .flatpickr-months .flatpickr-month { height: 48px; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { fill: #a1a8b8; } .flatpickr-current-month { color: #a1a8b8; font-size: 1rem; padding: 8px 0 0 0; } .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { color: #a1a8b8; } .flatpickr-weekdays { background: #5369f8; } .flatpickr-weekday { color: rgba(255, 255, 255, 0.6) !important; } .bootstrap-touchspin .btn .input-group-text { padding: 0; border: none; background-color: transparent; color: inherit; } .parsley-errors-list { margin: 0; padding: 0; } .parsley-errors-list > li { list-style: none; color: #ff5c75; margin-top: 10px; padding: 4px 7px 4px 28px; position: relative; display: inline-block; background-color: rgba(255, 92, 117, 0.2); border-radius: 7px; } .parsley-errors-list > li:before { content: "\ebee"; font-family: "unicons"; position: absolute; left: 8px; top: 4px; } .parsley-errors-list > li:after { content: ""; border: 8px solid transparent; border-bottom-color: rgba(255, 92, 117, 0.2); position: absolute; left: 14px; top: -16px; } .parsley-error { border-color: #ff5c75; } .parsley-success { border-color: #43d39e; } .sw-main { -webkit-box-shadow: none; box-shadow: none; border: 1px solid #373c48; } .sw-main .sw-toolbar { background: transparent; padding: 10px; } .sw-main .step-content { background-color: transparent !important; } .sw-theme-default .step-content { background-color: transparent; } .sw-theme-default > ul.step-anchor > li > a { color: #8790a4; } .sw-theme-default > ul.step-anchor > li > a:hover { color: #8790a4; } .sw-theme-default > ul.step-anchor > li > a:after { background: #5369f8; } .sw-theme-default > ul.step-anchor > li.active > a { color: #5369f8 !important; } .sw-theme-default > ul.step-anchor > li.done > a { color: #8790a4 !important; } .sw-theme-default > ul.step-anchor > li.done > a:after { background: #43d39e; } .sw-theme-arrows > ul.step-anchor { background: #3b414e; border-bottom-color: #3b414e; } .sw-theme-arrows > ul.step-anchor > li > a, .sw-theme-arrows > ul.step-anchor > li > a:hover { background: #3b414e; color: #8790a4; } .sw-theme-arrows > ul.step-anchor > li > a::after { border-left-color: #3b414e !important; } .sw-theme-arrows > ul.step-anchor > li > a::before { border-left-color: #576073 !important; } .sw-theme-arrows > ul.step-anchor > li.active > a { background: #5369f8 !important; border-color: #5369f8 !important; } .sw-theme-arrows > ul.step-anchor > li.active > a:after { border-left-color: #5369f8 !important; } .sw-theme-arrows > ul.step-anchor > li.done > a { background: #c9d0fd !important; border-color: #c9d0fd !important; } .sw-theme-arrows > ul.step-anchor > li.done > a:after { border-left-color: #c9d0fd !important; } .sw-theme-arrows > ul.step-anchor > li.done > a::before { border-left-color: #5369f8 !important; } .sw-theme-circles > ul.step-anchor { margin-top: 30px; background-color: transparent; } .sw-theme-circles > ul.step-anchor:before { background-color: #3b414e; } .sw-theme-circles > ul.step-anchor > li > a { font-size: 14px; width: 40px; height: 40px; padding: 12px 0; background-color: #3b414e; border-color: #323742 !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .sw-theme-circles > ul.step-anchor > li > a:hover { background-color: #3b414e; } .sw-theme-circles > ul.step-anchor > li > a small { bottom: -20px; width: 100%; } .sw-theme-circles > ul.step-anchor > li > a, .sw-theme-circles > ul.step-anchor > li > a:hover { color: #8790a4; } .sw-theme-circles > ul.step-anchor > li > a small, .sw-theme-circles > ul.step-anchor > li > a:hover small { color: #8790a4; } .sw-theme-circles > ul.step-anchor > li.active > a { background: #5369f8 !important; border-color: #5369f8 !important; color: #fff !important; } .sw-theme-circles > ul.step-anchor > li.active > a > small { color: #5369f8; } .sw-theme-circles > ul.step-anchor > li.done > a { background: #43d39e !important; border-color: #43d39e !important; color: #fff !important; } .sw-theme-circles > ul.step-anchor > li.done > a > small { color: #43d39e; } .sw-theme-dots > ul.step-anchor { background-color: transparent; } .sw-theme-dots > ul.step-anchor:before { background-color: #3b414e; } .sw-theme-dots > ul.step-anchor > li > a:before { bottom: -6px; background: #3b414e; } .sw-theme-dots > ul.step-anchor > li > a:after { left: 45%; bottom: -8px; background: #576073; } .sw-theme-dots > ul.step-anchor > li > a, .sw-theme-dots > ul.step-anchor > li > a:hover, .sw-theme-dots > ul.step-anchor > li > a:focus { color: #8790a4; } .sw-theme-dots > ul.step-anchor > li.active > a { color: #5369f8; } .sw-theme-dots > ul.step-anchor > li.active > a:after { background: #5369f8; } .sw-theme-dots > ul.step-anchor > li.done > a { color: #43d39e; } .sw-theme-dots > ul.step-anchor > li.done > a:after { background: #43d39e; } @media (max-width: 768px) { .sw-main > ul.step-anchor > li { display: block; width: 100%; } .sw-theme-circles > ul.step-anchor > li > a > small { bottom: 14px; left: 76px; } .sw-theme-dots > ul.step-anchor > li > a:after { top: -36px; left: -31px !important; } } @font-face { font-family: "summernote"; font-style: normal; font-weight: normal; src: url("../fonts/summernote.eot"); src: url("../fonts/summernote.eot?#iefix") format("embedded-opentype"), url("../fonts/summernote.woff?") format("woff"), url("../fonts/summernote.ttf?") format("truetype"); } .note-editor.note-frame { border: 2px solid #3b414e; -webkit-box-shadow: none; box-shadow: none; margin: 0; } .note-editor.note-frame .note-statusbar { background-color: #363c48; border-top: 1px solid #3b414e; } .note-editor.note-frame .note-editing-area .note-editable { border: none; color: #8790a4; background-color: transparent; } .note-status-output { display: none; } .note-editable { border-radius: 0.3rem; padding: 0.47rem 0.75rem; } .note-editable p:last-of-type { margin-bottom: 0; } .note-popover .popover-content .note-color .dropdown-menu, .card-header.note-toolbar .note-color .dropdown-menu { min-width: 344px; } .note-popover { border-color: #3b414e; } .note-popover .popover-content, .card-header.note-toolbar { background-color: #3b414e; } .note-toolbar { z-index: 1; background-color: transparent !important; border-bottom: 2px solid #3b414e; } .dropzone { border: 2px dashed rgba(188, 193, 204, 0.2); background: #3b414e; border-radius: 6px; } .dataTables_wrapper.container-fluid { padding: 0; } table.dataTable { border-collapse: collapse !important; margin-bottom: 15px !important; } table.dataTable tbody > tr.selected, table.dataTable tbody > tr > .selected { background-color: #5369f8; } table.dataTable tbody > tr.selected td, table.dataTable tbody > tr > .selected td { border-color: #5369f8; } table.dataTable tbody td:focus { outline: none !important; } table.dataTable tbody th.focus, table.dataTable tbody td.focus { outline: 2px solid #5369f8 !important; outline-offset: -1px; color: #5369f8; background-color: rgba(83, 105, 248, 0.15); } .dataTables_info { font-weight: 500; } table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr[role=row] > th:first-child:before { -webkit-box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175); background-color: #43d39e; top: 0.75rem; } table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td:first-child:before, table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th:first-child:before { background-color: #ff5c75; top: 0.75rem; } div.dt-button-info { background-color: #5369f8; border: none; color: #fff; -webkit-box-shadow: none; box-shadow: none; border-radius: 3px; text-align: center; z-index: 21; } div.dt-button-info h2 { border-bottom: none; background-color: rgba(255, 255, 255, 0.2); color: #fff; } @media (max-width: 767.98px) { li.paginate_button.previous, li.paginate_button.next { display: inline-block; font-size: 1.5rem; } li.paginate_button { display: none; } .dataTables_paginate ul { text-align: center; display: block; margin: 1rem 0 0 !important; } div.dt-buttons { display: inline-table; margin-bottom: 1rem; } } .activate-select .sorting_1 { background-color: #212529; } #pagination-list .pagination li a { padding: .5rem .75rem; border-radius: 50%; display: block; line-height: 1.25; margin: 0 3px; } #pagination-list .pagination li.active a { background-color: #5369f8; color: #fff; } #transaction-list .sort { background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='%23bcc1cc' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e") no-repeat right 0.75rem center/8px 10px; } #noresult-list .error-message { display: none; } .tasklist { min-height: 40px; margin-bottom: 0; } .tasklist > li { background-color: #323742; -webkit-box-shadow: 0 0.05rem 0.01rem rgba(161, 168, 184, 0.075); box-shadow: 0 0.05rem 0.01rem rgba(161, 168, 184, 0.075); padding: 20px; margin-bottom: 24px; border-radius: 7px; } .tasklist > li:last-of-type { margin-bottom: 0; } .tasklist > li:last-of-type .btn-sm { padding: 2px 8px; font-size: 12px; } .task-placeholder { border: 1px dashed #3b414e !important; background-color: #323742 !important; padding: 20px; -webkit-box-shadow: none !important; box-shadow: none !important; } /*! * metismenujs - v1.1.0 * A menu plugin * https://github.com/onokumus/metismenujs#readme * * Made by Osman Nuri Okumus (https://github.com/onokumus) * Under MIT License */ .metismenu .arrow { float: right; line-height: 1.42857; } *[dir="rtl"] .metismenu .arrow { float: left; } /* * Require Bootstrap 3.x * https://github.com/twbs/bootstrap */ .metismenu .glyphicon.arrow:before { content: "\e079"; } .metismenu .mm-active > a > .glyphicon.arrow:before { content: "\e114"; } /* * Require Font-Awesome * http://fortawesome.github.io/Font-Awesome/ */ .metismenu .fa.arrow:before { content: "\f104"; } .metismenu .mm-active > a > .fa.arrow:before { content: "\f107"; } /* * Require Ionicons * http://ionicons.com/ */ .metismenu .ion.arrow:before { content: "\f3d2"; } .metismenu .mm-active > a > .ion.arrow:before { content: "\f3d0"; } .metismenu .plus-times { float: right; } *[dir="rtl"] .metismenu .plus-times { float: left; } .metismenu .fa.plus-times:before { content: "\f067"; } .metismenu .mm-active > a > .fa.plus-times { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .metismenu .plus-minus { float: right; } *[dir="rtl"] .metismenu .plus-minus { float: left; } .metismenu .fa.plus-minus:before { content: "\f067"; } .metismenu .mm-active > a > .fa.plus-minus:before { content: "\f068"; } .metismenu .mm-collapse:not(.mm-show) { display: none; } .metismenu .mm-collapsing { position: relative; height: 0; overflow: hidden; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: 0.35s; transition-duration: 0.35s; -webkit-transition-property: height, visibility; transition-property: height, visibility; } .metismenu .has-arrow { position: relative; } .metismenu .has-arrow::after { position: absolute; content: ""; width: 0.5em; height: 0.5em; border-width: 1px 0 0 1px; border-style: solid; border-color: initial; right: 1em; -webkit-transform: rotate(-45deg) translate(0, -50%); transform: rotate(-45deg) translate(0, -50%); -webkit-transform-origin: top; transform-origin: top; top: 50%; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } *[dir="rtl"] .metismenu .has-arrow::after { right: auto; left: 1em; -webkit-transform: rotate(135deg) translate(0, -50%); transform: rotate(135deg) translate(0, -50%); } .metismenu .mm-active > .has-arrow::after, .metismenu .has-arrow[aria-expanded="true"]::after { -webkit-transform: rotate(-135deg) translate(0, -50%); transform: rotate(-135deg) translate(0, -50%); } *[dir="rtl"] .metismenu .mm-active > .has-arrow::after, *[dir="rtl"] .metismenu .has-arrow[aria-expanded="true"]::after { -webkit-transform: rotate(225deg) translate(0, -50%); transform: rotate(225deg) translate(0, -50%); } .metismenu { padding: 0; } .metismenu li { list-style: none; } .metismenu li a[aria-expanded="true"] { color: #bcc1cc !important; } .metismenu ul { padding: 0; } .metismenu ul li { width: 100%; } .metismenu .mm-collapse:not(.mm-show) { display: none; } .metismenu .mm-collapsing { position: relative; height: 0; overflow: hidden; -webkit-transition-timing-function: ease; transition-timing-function: ease; -webkit-transition-duration: .35s; transition-duration: .35s; -webkit-transition-property: height, visibility; transition-property: height, visibility; } /* 18. Components Demo */ .button-list { margin-left: -8px; margin-bottom: -12px; } .button-list .btn { margin-bottom: 12px; margin-left: 8px; } .icons-list-demo div { cursor: pointer; line-height: 45px; white-space: nowrap; text-overflow: ellipsis; display: block; overflow: hidden; color: #8790a4; } .icons-list-demo div p { margin-bottom: 0; line-height: inherit; } .icons-list-demo i { text-align: center; vertical-align: middle; font-size: 22px; width: 50px; height: 50px; line-height: 50px; margin-right: 12px; border-radius: 50%; display: inline-block; -webkit-transition: all 0.2s; transition: all 0.2s; } .icons-list-demo .col-lg-4 { border-radius: 3px; background-clip: padding-box; margin-top: 10px; } .icons-list-demo .col-lg-4:hover i { background-color: #5369f8; color: #fff; text-shadow: 5px 5px rgba(255, 255, 255, 0.2); } .icons-list .icon-item { padding: 15px 0; color: #8790a4; } .icons-list .icon-item svg { margin-right: 10px; } .icons-list .icon-item span { line-height: 30px; display: inline-block; vertical-align: middle; } /* 19. Tasks */ .board { display: block; white-space: nowrap; overflow-x: auto; } .tasks { display: inline-block; width: 22rem; padding: 0 1rem 1rem 1rem; vertical-align: top; margin-bottom: 24px; background-color: #323742; border-radius: 0.2rem; } .tasks.tasks:not(:last-child) { margin-right: 1.25rem; } .tasks .card { white-space: normal; margin-top: 1rem; } .tasks .task-header { background-color: #323742; padding: 1rem; margin: 0 -1rem; border-radius: 0.2rem; } .task-list-items { min-height: 100px; position: relative; } .task-list-items .card { cursor: pointer; } .task-list-items:before { content: "No Tasks"; position: absolute; line-height: 110px; width: 100%; text-align: center; font-weight: 600; } .task-modal-content .form-control-light { background-color: #373d49 !important; border-color: #373d49 !important; } .gantt-task-details { min-width: 220px; } .task-search .search-input { padding-left: 32px; z-index: 10; } .task-search .icon-search { z-index: 11; position: absolute; left: 10px; top: 10px; } /* 20. Email */ .email-container { margin-bottom: 24px; background-color: #323742; } .email-container .inbox-leftbar { padding: 1.25rem; width: 250px; float: left; padding-bottom: 184px; margin-bottom: -184px; } .email-container .inbox-rightbar { margin-left: 250px; border-left: 5px solid #292d36; padding: 0 0 1.5rem 25px; } .message-list { display: block; padding-left: 0; } .message-list li { position: relative; display: block; height: 48px; line-height: 48px; cursor: default; -webkit-transition-duration: .3s; transition-duration: .3s; background: #323742; margin-bottom: 1px; -webkit-box-shadow: 0 0.05rem 0.01rem rgba(161, 168, 184, 0.075); box-shadow: 0 0.05rem 0.01rem rgba(161, 168, 184, 0.075); } .message-list li a { color: #a1a8b8; } .message-list li:hover { -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); -webkit-transition-duration: .05s; transition-duration: .05s; } .message-list li .col-mail { float: left; position: relative; } .message-list li .col-mail-1 { width: 320px; } .message-list li .col-mail-1 .star-toggle, .message-list li .col-mail-1 .checkbox-wrapper-mail, .message-list li .col-mail-1 .dot { display: block; float: left; } .message-list li .col-mail-1 .dot { border: 4px solid transparent; border-radius: 100px; margin: 22px 26px 0; height: 0; width: 0; line-height: 0; font-size: 0; } .message-list li .col-mail-1 .checkbox-wrapper-mail { margin: 15px 10px 0 20px; } .message-list li .col-mail-1 .star-toggle { color: #6b768d; margin-left: 10px; } .message-list li .col-mail-1 .title { position: absolute; top: 0; left: 100px; right: 0; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-bottom: 0; line-height: 50px; } .message-list li .col-mail-2 { position: absolute; top: 0; left: 320px; right: 0; bottom: 0; } .message-list li .col-mail-2 .subject, .message-list li .col-mail-2 .date { position: absolute; top: 0; } .message-list li .col-mail-2 .subject { left: 0; right: 110px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .message-list li .col-mail-2 .date { right: 0; width: 100px; padding-left: 10px; } .message-list li.active, .message-list li.mail-selected { background: #212529; -webkit-transition-duration: .05s; transition-duration: .05s; } .message-list li.active, .message-list li.active:hover { -webkit-box-shadow: inset 3px 0 0 #25c2e3; box-shadow: inset 3px 0 0 #25c2e3; } .message-list li.unread a { color: #aeb4c1; } .message-list .checkbox-wrapper-mail { cursor: pointer; height: 20px; width: 20px; position: relative; display: inline-block; -webkit-box-shadow: inset 0 0 0 2px #576073; box-shadow: inset 0 0 0 2px #576073; border-radius: 3px; } .message-list .checkbox-wrapper-mail input { opacity: 0; cursor: pointer; } .message-list .checkbox-wrapper-mail input:checked ~ label { opacity: 1; } .message-list .checkbox-wrapper-mail label { position: absolute; top: 3px; left: 3px; right: 3px; bottom: 3px; cursor: pointer; background: #8790a4; opacity: 0; margin-bottom: 0 !important; -webkit-transition-duration: .05s; transition-duration: .05s; } .message-list .checkbox-wrapper-mail label:active { background: #87949b; } .mail-list a { color: #a1a8b8; padding: 7px 10px; display: block; } .reply-box { border: 2px solid #3b414e; } @media (max-width: 648px) { .email-container .inbox-leftbar { width: 100%; float: none; margin-bottom: 21px; padding-bottom: 1.25rem; } .email-container .inbox-rightbar { margin-left: 0; border: 0; padding-left: 0; } } @media (max-width: 520px) { .inbox-rightbar > .btn-group { margin-bottom: 10px; } .message-list li .col-mail-1 { width: 150px; } .message-list li .col-mail-1 .title { left: 80px; } .message-list li .col-mail-2 { left: 160px; } .message-list li .col-mail-2 .date { text-align: right; padding-right: 10px; padding-left: 20px; } } .chatbox { position: fixed; right: 35px; bottom: 10px; width: 300px; background-color: #323742; border-radius: 0.3rem; -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15); z-index: 99; } .chatbox .chat-input .form-control { padding-right: 60px; } .chatbox .chat-link { position: absolute; right: 4px; top: 10px; } /* 21. Timeline */ /************** Horizontal timeline **************/ .left-timeline .events { border-left: 3px solid #3b414e; padding-left: 35px; } .left-timeline .events .event-list { position: relative; } .left-timeline .events .event-list::before { content: ""; position: absolute; left: -45px; top: 6px; height: 18px; width: 18px; background-color: #5369f8; border-radius: 50%; border: 5px solid #323742; z-index: 9; } .left-timeline .events .event-list::after { content: ""; position: absolute; left: -38px; top: 14px; height: 3px; width: 30px; background-color: #3b414e; } .left-timeline .album img { height: 36px; width: auto; border-radius: 4px; } .timeline { margin-bottom: 50px; position: relative; } .timeline:before { background-color: #3b414e; bottom: 0; content: ""; left: 50%; position: absolute; top: 30px; width: 2px; z-index: 0; } .timeline .time-show { margin-bottom: 30px; margin-top: 30px; position: relative; } .timeline .timeline-box { display: block; position: relative; padding: 20px; } .timeline .timeline-album { margin-top: 12px; } .timeline .timeline-album a { display: inline-block; margin-right: 5px; } .timeline .timeline-album img { height: 36px; width: auto; border-radius: 3px; } @media (min-width: 768px) { .timeline .time-show { right: 69px; text-align: right; } .timeline .timeline-box { margin-left: 15px; } .timeline .timeline-icon { background: #5369f8; border-radius: 50%; display: block; height: 20px; left: -24px; margin-top: -10px; position: absolute; text-align: center; top: 15%; width: 20px; border: 5px solid #323742; z-index: 9; } .timeline .timeline-icon:before { content: ""; position: absolute; height: 3px; width: 19px; background-color: #3b414e; left: 15px; top: 3px; } .timeline .timeline-desk { display: table-cell; vertical-align: top; width: 50%; } .timeline-item { display: -webkit-box; display: -ms-flexbox; display: flex; } .timeline-item:before { content: ""; display: block; width: 50%; } .timeline-item.timeline-item-left:after { content: ""; display: block; width: 50%; } .timeline-item.timeline-item-left .timeline-desk .album { float: right; margin-top: 20px; } .timeline-item.timeline-item-left .timeline-desk .album a { float: right; margin-left: 5px; } .timeline-item.timeline-item-left .timeline-icon { left: auto; right: -26px; } .timeline-item.timeline-item-left .timeline-icon:before { left: auto; right: 15px; } .timeline-item.timeline-item-left:before { display: none; } .timeline-item.timeline-item-left .timeline-box { margin-right: 15px; margin-left: 0; text-align: right; } } @media (max-width: 767.98px) { .timeline .time-show { text-align: center; position: relative; } .timeline .event-date { float: left !important; margin-right: 1.5rem; margin-left: 0 !important; } .timeline .timeline-icon { display: none; } } /* 22. Extra Pages */ .card-pricing .card-pricing-features li { padding: 10px; } .card-pricing .card-pricing-features li:before { color: #5369f8; } /* 23. Authentication */ body.authentication-bg { background-size: cover; background-repeat: no-repeat; padding-bottom: 0; } .authentication-form .form-group .input-group-text { background-color: transparent; } .authentication-form .form-group .input-group-text svg { height: 22px; width: 22px; } .icon-fb { color: #3c5a98; } .icon-google { color: #e94134; } .auth-page-sidebar { padding: 0; background-image: url("../images/auth-bg.jpg"); background-repeat: no-repeat; background-size: cover; height: 100%; position: relative; } .auth-page-sidebar .overlay { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background-color: rgba(0, 0, 0, 0.4); } .auth-page-sidebar .auth-user-testimonial { text-align: center; color: #fff; position: absolute; margin: 0 auto; padding: 0 1.75rem; bottom: 3rem; left: 0; right: 0; }