/* 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: #4B4B5A; 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: #5369f8; } .nav-second-level li > a.active, .nav-thrid-level li > a.active { color: #5369f8; } #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: #ffffff; 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 #5369f8; color: #5369f8; background-color: #f7f7ff; } #sidebar-menu > ul > li.mm-active > a svg { color: #5369f8; fill: rgba(83, 105, 248, 0.1); } #sidebar-menu > ul > li > a { color: #4B4B5A; 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: #4B4B5A; fill: rgba(75, 75, 90, 0.12); } #sidebar-menu > ul > li > a:hover, #sidebar-menu > ul > li > a:focus, #sidebar-menu > ul > li > a:active { color: #5369f8; text-decoration: none; background-color: #f7f7ff; } #sidebar-menu > ul > li > a:hover svg, #sidebar-menu > ul > li > a:focus svg, #sidebar-menu > ul > li > a:active svg { color: #5369f8; fill: rgba(83, 105, 248, 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 #5369f8; color: #5369f8; background-color: #f7f7ff; } #sidebar-menu > ul > li > a.active svg { color: #5369f8; fill: rgba(83, 105, 248, 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: #4B4B5A; } .user-profile { padding: 15px 20px 15px 30px; } .user-profile .avatar-xs { display: none; } .user-profile .pro-user-name { color: #4B4B5A; 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: #4B4B5A; background-color: rgba(75, 75, 90, 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: #5369f8; } .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: #f7f7ff; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li:hover > a { position: relative; width: calc(190px + 70px); color: #5369f8 !important; background-color: #f7f7ff; -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(75, 75, 90, 0.075); box-shadow: 0 0.05rem 0.01rem rgba(75, 75, 90, 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(75, 75, 90, 0.075); box-shadow: 0 0.05rem 0.01rem rgba(75, 75, 90, 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: #5369f8; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul ul { padding: 5px 0; z-index: 9999; display: none; background-color: #ffffff; } .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: #c8cddc; } .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: #ffffff !important; } .left-side-menu-dark .left-side-menu { background-color: #323742; -webkit-box-shadow: none; box-shadow: none; } .left-side-menu-dark .left-side-menu #sidebar-menu > ul > li.mm-active > a { color: #ffffff; background-color: #3b414e; } .left-side-menu-dark .left-side-menu #sidebar-menu > ul > li.mm-active > a svg { color: #ffffff; 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: #c8cddc; background-color: #3b414e; } .left-side-menu-dark .left-side-menu #sidebar-menu > ul > li > a.active { color: #ffffff; background-color: #3b414e; } .left-side-menu-dark .left-side-menu #sidebar-menu > ul > li > a.active svg { color: #ffffff; fill: rgba(255, 255, 255, 0.12); } .left-side-menu-dark .left-side-menu #sidebar-menu .menu-title { color: #adb5bd; } .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: #c8cddc; } .left-side-menu-dark .nav-second-level li.mm-active > a, .left-side-menu-dark .nav-thrid-level li.mm-active > a { color: #ffffff; } .left-side-menu-dark.left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li:hover > a { background-color: #3b414e; color: #ffffff !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: #5369f8; } .left-side-menu-dark .user-profile .pro-user-name, .left-side-menu-dark .user-profile .pro-user-desc { color: #adb5bd; } .left-side-menu-dark .user-profile .profile-dropdown-menu .dropdown-toggle svg { background-color: #3b414e; 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: #ffffff; -webkit-box-shadow: 0 0.05rem 0.01rem rgba(75, 75, 90, 0.075); box-shadow: 0 0.05rem 0.01rem rgba(75, 75, 90, 0.075); /* Search */ } .navbar-custom .topnav-menu > li { float: left; } .navbar-custom .topnav-menu .nav-link { padding: 0 15px; color: #4B4B5A; 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: #4B4B5A; fill: rgba(75, 75, 90, 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: #5369f8; fill: rgba(83, 105, 248, 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: #f3f4f7; -webkit-box-shadow: none; box-shadow: none; border-radius: .3rem; } .navbar-custom .app-search .form-control:focus { background-color: #fff; border: 1px solid #f3f4f7; } .navbar-custom .app-search svg { position: absolute; z-index: 10; font-size: 18px; color: #adb5bd; line-height: 38px; left: 10px; top: 10px; width: 20px; height: 20px; } .navbar-custom .button-menu-mobile { border: none; color: #adb5bd; 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 #ffffff; 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: #343a40; 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: #6c757d; left: 250px; } .footer .footer-links a { color: #6c757d; margin-left: 1.5rem; -webkit-transition: all .4s; transition: all .4s; } .footer .footer-links a:hover { color: #212529; } .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: #4B4B5A; } 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: #ffffff; } .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: #5369f8; text-decoration: none; } .topbar-nav .metismenu li:hover svg, .topbar-nav .metismenu li:focus svg, .topbar-nav .metismenu li:active svg { color: #5369f8; fill: rgba(83, 105, 248, 0.1); } .topbar-nav .metismenu li a { color: #4B4B5A; 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: #4B4B5A; fill: rgba(75, 75, 90, 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: #5369f8; 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: #5369f8; fill: rgba(83, 105, 248, 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: #5369f8; } .topbar-nav .metismenu li.mm-active > a svg { color: #5369f8; fill: rgba(83, 105, 248, 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: #5369f8; } .topbar-nav .metismenu li.active > a svg { color: #5369f8; fill: rgba(83, 105, 248, 0.1); } .topbar-nav .metismenu li .nav-second-level { color: #4B4B5A; background-color: #ffffff; background-clip: padding-box; border-radius: 0 0 0.2rem 0.2rem; min-width: calc(10rem + 1.5rem); font-size: calc(0.875rem - 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: #5369f8; 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.875rem; 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: #16181b; text-decoration: none; background-color: #f8f9fa; } .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: #4B4B5A; 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: #5369f8; 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.875rem; 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: #16181b; text-decoration: none; background-color: #f8f9fa; } .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: #fff; -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(52, 58, 64, 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 #f6f6f7; 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: #edeef3; } .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: #f3f4f7; } .boxed-layout .navbar-custom { max-width: 1300px; margin: 0 auto; } .boxed-layout .footer { margin: 0 auto; max-width: calc(1300px - 250px); background: #f3f4f7; } .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 #adb5bd; border-radius: 50%; color: #adb5bd; } /* 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: #e2e7f1; color: #4B4B5A; } .conversation-list .odd .ctext-wrap:after { border-color: transparent; border-left-color: #e2e7f1; border-top-color: #e2e7f1; 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 #f6f6f7 !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: #e2e7f1; border-radius: 3px; border: 2px solid #e2e7f1; 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: #4B4B5A; 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 #4B4B5A; border-top-width: 0; border-left-width: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .checkbox input[type="checkbox"]:disabled + label::before { background-color: #f8f9fa; 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: #1e2139; border-color: #1e2139; } .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: #f8f9fa; border-color: #f8f9fa; } .checkbox-light input[type="checkbox"]:checked + label::after { border-color: #fff; } .checkbox-dark input[type="checkbox"]:checked + label::before { background-color: #343a40; border-color: #343a40; } .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 #6c757d; 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: #4B4B5A; 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: #1e2139; } .radio-secondary input[type="radio"]:checked + label::before { border-color: #1e2139; } .radio-secondary input[type="radio"]:checked + label::after { background-color: #1e2139; } .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: #f8f9fa; } .radio-light input[type="radio"]:checked + label::before { border-color: #f8f9fa; } .radio-light input[type="radio"]:checked + label::after { background-color: #f8f9fa; } .radio-dark input[type="radio"] + label::after { background-color: #343a40; } .radio-dark input[type="radio"]:checked + label::before { border-color: #343a40; } .radio-dark input[type="radio"]:checked + label::after { background-color: #343a40; } /* 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: #f3f4f7; 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: #4B4B5A; } .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: #f8f9fa; } .apexcharts-legend-text { color: #6c757d !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: #adb5bd; } .apexcharts-point-annotations text, .apexcharts-xaxis-annotations text, .apexcharts-yaxis-annotations text { fill: #fff; } .apexcharts-radar-series polygon { fill: transparent; stroke: #e2e7f1; } .apexcharts-radar-series line { stroke: #e2e7f1; } .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: #e2e7f1; 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: #e2e7f1; } .fc-unthemed td.fc-today, .fc-unthemed .fc-divider { background: #e2e7f1; } .fc-button { background: #e2e7f1; border: none; color: #4B4B5A; 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: #e2e7f1; } .fc-state-highlight { background: #e2e7f1; } .fc-state-down, .fc-state-active, .fc-state-disabled { background-color: #5369f8; color: #fff; text-shadow: none; } .fc-cell-overlay { background: #e2e7f1; } .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.76562rem; line-height: 1.5; border-radius: 0.2rem; } .select2-container { width: 100% !important; } .select2-container .select2-selection--single { border: 1px solid #e2e7f1; height: calc(1.5em + 1rem + 2px); background-color: #fff; outline: none; border-radius: 0.3rem; } .select2-container .select2-selection--single .select2-selection__rendered { line-height: 36px; padding-left: 12px; color: #4B4B5A; } .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: #adb5bd transparent transparent transparent; border-width: 6px 6px 0 6px; } .select2-container--open .select2-selection--single .select2-selection__arrow b { border-color: transparent transparent #adb5bd transparent !important; border-width: 0 6px 6px 6px !important; } .select2-results__option { padding: 6px 12px; } .select2-dropdown { border: 0 solid rgba(0, 0, 0, 0.15); -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: #fff; } .select2-container--default .select2-search--dropdown { padding: 10px; background-color: white; } .select2-container--default .select2-search--dropdown .select2-search__field { outline: none; border: 1px solid #e2e7f1; background-color: #fff; color: #4B4B5A; } .select2-container--default .select2-results__option--highlighted[aria-selected] { background-color: #5369f8; } .select2-container--default .select2-results__option[aria-selected=true] { background-color: white; color: #16181b; } .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 + 1rem + 2px); border: 1px solid #e2e7f1 !important; background-color: #fff; } .select2-container .select2-selection--multiple .select2-selection__rendered { padding: 2px 10px; } .select2-container .select2-selection--multiple .select2-search__field { border: 0; color: #4B4B5A; } .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 #e2e7f1; } .ms-container .ms-list.ms-focus { -webkit-box-shadow: none; box-shadow: none; border: 1px solid #5369f8; } .ms-container .ms-selectable { background-color: #fff; } .ms-container .ms-selectable li.ms-elem-selectable { border: none; padding: 5px 10px; color: #6c757d; } .ms-container .ms-selectable li.ms-hover { background-color: #5369f8; color: #fff; } .ms-container .ms-selection { background-color: #fff; } .ms-container .ms-selection li.ms-elem-selection { border: none; padding: 5px 10px; color: #6c757d; } .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: #343a40 !important; font-size: 13px; } .flatpickr-calendar { overflow: hidden; background-color: #fff; -webkit-box-shadow: none; box-shadow: none; border: 2px solid #e2e7f1; } .flatpickr-calendar .flatpickr-time { border: none !important; } .flatpickr-calendar .flatpickr-time input, .flatpickr-calendar .flatpickr-time .flatpickr-am-pm { color: #6c757d; } .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: #e2e7f1; } .flatpickr-day { color: #6c757d; } .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: #e2e7f1; } .flatpickr-day.inRange { background: whitesmoke; border-color: whitesmoke; -webkit-box-shadow: -10px 0 0 whitesmoke; box-shadow: -10px 0 0 whitesmoke; } .flatpickr-day.inRange.nextMonthDay { background: whitesmoke; border-color: whitesmoke; } .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(108, 117, 125, 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: #e2e7f1; border-color: #e2e7f1; color: #6c757d; } .flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus { background: #f8f9fa; } .flatpickr-months .flatpickr-month { height: 48px; } .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { fill: #6c757d; } .flatpickr-current-month { color: #6c757d; font-size: 1rem; padding: 8px 0 0 0; } .flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { color: #4B4B5A; } .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 #dbe1ee; } .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: #6c757d; } .sw-theme-default > ul.step-anchor > li > a:hover { color: #6c757d; } .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: #6c757d !important; } .sw-theme-default > ul.step-anchor > li.done > a:after { background: #43d39e; } .sw-theme-arrows > ul.step-anchor { background: #e2e7f1; border-bottom-color: #e2e7f1; } .sw-theme-arrows > ul.step-anchor > li > a, .sw-theme-arrows > ul.step-anchor > li > a:hover { background: #e2e7f1; color: #6c757d; } .sw-theme-arrows > ul.step-anchor > li > a::after { border-left-color: #e2e7f1 !important; } .sw-theme-arrows > ul.step-anchor > li > a::before { border-left-color: #ced4da !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: #e2e7f1; } .sw-theme-circles > ul.step-anchor > li > a { font-size: 14px; width: 40px; height: 40px; padding: 12px 0; background-color: #e2e7f1; border-color: #f6f6f7 !important; -webkit-box-shadow: none !important; box-shadow: none !important; } .sw-theme-circles > ul.step-anchor > li > a:hover { background-color: #e2e7f1; } .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: #6c757d; } .sw-theme-circles > ul.step-anchor > li > a small, .sw-theme-circles > ul.step-anchor > li > a:hover small { color: #6c757d; } .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: #e2e7f1; } .sw-theme-dots > ul.step-anchor > li > a:before { bottom: -6px; background: #e2e7f1; } .sw-theme-dots > ul.step-anchor > li > a:after { left: 45%; bottom: -8px; background: #ced4da; } .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: #6c757d; } .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 white; -webkit-box-shadow: none; box-shadow: none; margin: 0; } .note-editor.note-frame .note-statusbar { background-color: #fbfbfc; border-top: 1px solid white; } .note-editor.note-frame .note-editing-area .note-editable { border: none; color: #6c757d; background-color: transparent; } .note-status-output { display: none; } .note-editable { border-radius: 0.3rem; padding: 0.5rem 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: #e2e7f1; } .note-popover .popover-content, .card-header.note-toolbar { background-color: #e2e7f1; } .note-toolbar { z-index: 1; background-color: transparent !important; border-bottom: 2px solid white; } .dropzone { border: 2px dashed rgba(52, 58, 64, 0.2); background: white; 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: #f8f9fa; } #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='%23343a40' 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: #fff; -webkit-box-shadow: 0 0.05rem 0.01rem rgba(75, 75, 90, 0.075); box-shadow: 0 0.05rem 0.01rem rgba(75, 75, 90, 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 #e2e7f1 !important; background-color: #fff !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: #5369f8 !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: #6c757d; } .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: #6c757d; } .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: #fff; 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: #fff; 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: #fdfdfd !important; border-color: #fdfdfd !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: #fff; } .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 #f3f4f7; 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: #fff; margin-bottom: 1px; -webkit-box-shadow: 0 0.05rem 0.01rem rgba(75, 75, 90, 0.075); box-shadow: 0 0.05rem 0.01rem rgba(75, 75, 90, 0.075); } .message-list li a { color: #4B4B5A; } .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: #adb5bd; 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: #f8f9fa; -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: #292d32; } .message-list .checkbox-wrapper-mail { cursor: pointer; height: 20px; width: 20px; position: relative; display: inline-block; -webkit-box-shadow: inset 0 0 0 2px #ced4da; box-shadow: inset 0 0 0 2px #ced4da; 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: #6c757d; 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: #4B4B5A; padding: 7px 10px; display: block; } .reply-box { border: 2px solid #f8f9fa; } @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: #fff; 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 #e2e7f1; 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 #fff; z-index: 9; } .left-timeline .events .event-list::after { content: ""; position: absolute; left: -38px; top: 14px; height: 3px; width: 30px; background-color: #e2e7f1; } .left-timeline .album img { height: 36px; width: auto; border-radius: 4px; } .timeline { margin-bottom: 50px; position: relative; } .timeline:before { background-color: #e2e7f1; 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 #fff; z-index: 9; } .timeline .timeline-icon:before { content: ""; position: absolute; height: 3px; width: 19px; background-color: #e2e7f1; 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; } /* 24. RTL */ html { direction: rtl; } body { text-align: right; } .dropdown-menu.show { text-align: right; left: auto !important; right: 0; bottom: auto; } .dropdown-menu-right { right: auto !important; left: 0 !important; } .dropdown-menu-right.show { left: 0 !important; } ul { padding-right: 0; } .list-inline-item:not(:last-child) { margin-left: .5rem; margin-right: 0; } .btn-label { margin: -.55rem -.9rem -.55rem .9rem; } .btn-label-right { margin: -0.5rem 0.75rem -0.5rem -0.75rem; } .btn-group, .btn-group-vertical { direction: ltr; } .pagination .page-item:first-child .page-link { margin-right: 0; border-top-left-radius: 0px; border-bottom-left-radius: 0px; border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; } .pagination .page-item:last-child .page-link { border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; } .blockquote-reverse { text-align: left !important; } dd { margin-right: 0; } .modal-header .close { float: left; margin: -1rem auto -1rem -1rem; } .modal-footer > :not(:first-child) { margin-right: .25rem; margin-left: 0; } .modal-footer > :not(:last-child) { margin-left: .25rem; margin-right: 0; } .alert-dismissible { padding-left: 3.8125rem; padding-right: 1.25rem; } .alert-dismissible .close { left: 0; right: auto; } .breadcrumb-item + .breadcrumb-item { padding-right: 0.3rem; padding-left: 0px; } .breadcrumb-item + .breadcrumb-item::before { padding-left: 0.3rem; padding-right: 0px; } .form-check-inline { margin-left: .75rem; margin-right: 0; } .custom-control { padding-right: 1.5rem; padding-left: 0; } .custom-control-label::before { left: auto; right: -1.5rem; } .custom-control-label::after { left: auto; right: -1.5rem; } .custom-switch { padding-right: 2.25rem; padding-left: 0; } .custom-switch .custom-control-label::before { right: -2.25rem; left: auto; } .custom-switch .custom-control-label::after { right: calc(-2.25rem + 2px); left: auto; } .custom-switch .custom-control-input:checked ~ .custom-control-label::after { -webkit-transform: translateX(-0.75rem); transform: translateX(-0.75rem); } .custom-file-label::after { right: auto; left: 0; border-right: inherit; } .input-group-prepend { margin-left: -1px; margin-right: 0; } .input-group-append { margin-right: -1px; margin-left: 0; } .input-group > .input-group-prepend > .btn, .input-group > .input-group-prepend > .input-group-text, .input-group > .input-group-append:not(:last-child) > .btn, .input-group > .input-group-append:not(:last-child) > .input-group-text, .input-group > .input-group-append:last-child > .btn:not(:last-child):not(.dropdown-toggle), .input-group > .input-group-append:last-child > .input-group-text:not(:last-child), .input-group > .custom-select:not(:last-child), .input-group > .form-control:not(:last-child) { border-top-right-radius: 0.3rem; border-bottom-right-radius: 0.3rem; border-top-left-radius: 0; border-bottom-left-radius: 0; } .input-group > .input-group-append > .btn, .input-group > .input-group-append > .input-group-text, .input-group > .input-group-prepend:not(:first-child) > .btn, .input-group > .input-group-prepend:not(:first-child) > .input-group-text, .input-group > .input-group-prepend:first-child > .btn:not(:first-child), .input-group > .input-group-prepend:first-child > .input-group-text:not(:first-child), .input-group > .custom-select:not(:first-child), .input-group > .form-control:not(:first-child) { border-top-left-radius: 0.3rem; border-bottom-left-radius: 0.3rem; border-top-right-radius: 0; border-bottom-right-radius: 0; } .m-0 { margin: 0 !important; } .mt-0, .my-0 { margin-top: 0 !important; } .mr-0 { margin-left: 0 !important; margin-right: 0 !important; } .mb-0, .my-0 { margin-bottom: 0 !important; } .ml-0 { margin-right: 0 !important; margin-left: 0 !important; } .m-1 { margin: 0.25rem !important; } .mt-1, .my-1 { margin-top: 0.25rem !important; } .mr-1 { margin-left: 0.25rem !important; margin-right: 0 !important; } .mb-1, .my-1 { margin-bottom: 0.25rem !important; } .ml-1 { margin-right: 0.25rem !important; margin-left: 0 !important; } .m-2 { margin: 0.5rem !important; } .mt-2, .my-2 { margin-top: 0.5rem !important; } .mr-2 { margin-left: 0.5rem !important; margin-right: 0 !important; } .mb-2, .my-2 { margin-bottom: 0.5rem !important; } .ml-2 { margin-right: 0.5rem !important; margin-left: 0 !important; } .m-3 { margin: 1rem !important; } .mt-3, .my-3 { margin-top: 1rem !important; } .mr-3 { margin-left: 1rem !important; margin-right: 0 !important; } .mb-3, .my-3 { margin-bottom: 1rem !important; } .ml-3 { margin-right: 1rem !important; margin-left: 0 !important; } .m-4 { margin: 1.5rem !important; } .mt-4, .my-4 { margin-top: 1.5rem !important; } .mr-4 { margin-left: 1.5rem !important; margin-right: 0 !important; } .mb-4, .my-4 { margin-bottom: 1.5rem !important; } .ml-4 { margin-right: 1.5rem !important; margin-left: 0 !important; } .m-5 { margin: 3rem !important; } .mt-5, .my-5 { margin-top: 3rem !important; } .mr-5 { margin-left: 3rem !important; margin-right: 0 !important; } .mb-5, .my-5 { margin-bottom: 3rem !important; } .ml-5 { margin-right: 3rem !important; margin-left: 0 !important; } .p-0 { padding: 0 !important; } .pt-0, .py-0 { padding-top: 0 !important; } .pr-0 { padding-left: 0 !important; padding-right: 0 !important; } .pb-0, .py-0 { padding-bottom: 0 !important; } .pl-0 { padding-right: 0 !important; padding-left: 0 !important; } .p-1 { padding: 0.25rem !important; } .pt-1, .py-1 { padding-top: 0.25rem !important; } .pr-1 { padding-left: 0.25rem !important; padding-right: 0 !important; } .pb-1, .py-1 { padding-bottom: 0.25rem !important; } .pl-1 { padding-right: 0.25rem !important; padding-left: 0 !important; } .p-2 { padding: 0.5rem !important; } .pt-2, .py-2 { padding-top: 0.5rem !important; } .pr-2 { padding-left: 0.5rem !important; padding-right: 0 !important; } .pb-2, .py-2 { padding-bottom: 0.5rem !important; } .pl-2 { padding-right: 0.5rem !important; padding-left: 0 !important; } .p-3 { padding: 1rem !important; } .pt-3, .py-3 { padding-top: 1rem !important; } .pr-3 { padding-left: 1rem !important; padding-right: 0 !important; } .pb-3, .py-3 { padding-bottom: 1rem !important; } .pl-3 { padding-right: 1rem !important; padding-left: 0 !important; } .p-4 { padding: 1.5rem !important; } .pt-4, .py-4 { padding-top: 1.5rem !important; } .pr-4 { padding-left: 1.5rem !important; padding-right: 0 !important; } .pb-4, .py-4 { padding-bottom: 1.5rem !important; } .pl-4 { padding-right: 1.5rem !important; padding-left: 0 !important; } .p-5 { padding: 3rem !important; } .pt-5, .py-5 { padding-top: 3rem !important; } .pr-5 { padding-left: 3rem !important; padding-right: 0 !important; } .pb-5, .py-5 { padding-bottom: 3rem !important; } .pl-5 { padding-right: 3rem !important; padding-left: 0 !important; } .m-n1 { margin: -0.25rem !important; } .mt-n1, .my-n1 { margin-top: -0.25rem !important; } .mr-n1, .mx-n1 { margin-right: -0.25rem !important; } .mb-n1, .my-n1 { margin-bottom: -0.25rem !important; } .ml-n1, .mx-n1 { margin-left: -0.25rem !important; } .m-n2 { margin: -0.5rem !important; } .mt-n2, .my-n2 { margin-top: -0.5rem !important; } .mr-n2, .mx-n2 { margin-right: -0.5rem !important; } .mb-n2, .my-n2 { margin-bottom: -0.5rem !important; } .ml-n2, .mx-n2 { margin-left: -0.5rem !important; } .m-n3 { margin: -1rem !important; } .mt-n3, .my-n3 { margin-top: -1rem !important; } .mr-n3, .mx-n3 { margin-right: -1rem !important; } .mb-n3, .my-n3 { margin-bottom: -1rem !important; } .ml-n3, .mx-n3 { margin-left: -1rem !important; } .m-n4 { margin: -1.5rem !important; } .mt-n4, .my-n4 { margin-top: -1.5rem !important; } .mr-n4, .mx-n4 { margin-right: -1.5rem !important; } .mb-n4, .my-n4 { margin-bottom: -1.5rem !important; } .ml-n4, .mx-n4 { margin-left: -1.5rem !important; } .m-n5 { margin: -3rem !important; } .mt-n5, .my-n5 { margin-top: -3rem !important; } .mr-n5, .mx-n5 { margin-right: -3rem !important; } .mb-n5, .my-n5 { margin-bottom: -3rem !important; } .ml-n5, .mx-n5 { margin-left: -3rem !important; } .m-auto { margin: auto !important; } .mt-auto, .my-auto { margin-top: auto !important; } .mr-auto { margin-right: 0px !important; margin-left: auto !important; } .mb-auto, .my-auto { margin-bottom: auto !important; } .mx-auto { margin-right: auto !important; margin-left: auto !important; } .ml-auto { margin-right: auto !important; margin-left: 0px !important; } @media (min-width: 576px) { .m-sm-0 { margin: 0 !important; } .mt-sm-0, .my-sm-0 { margin-top: 0 !important; } .mr-sm-0 { margin-left: 0 !important; margin-right: 0 !important; } .mb-sm-0, .my-sm-0 { margin-bottom: 0 !important; } .ml-sm-0 { margin-right: 0 !important; margin-left: 0 !important; } .m-sm-1 { margin: 0.25rem !important; } .mt-sm-1, .my-sm-1 { margin-top: 0.25rem !important; } .mr-sm-1 { margin-left: 0.25rem !important; margin-right: 0 !important; } .mb-sm-1, .my-sm-1 { margin-bottom: 0.25rem !important; } .ml-sm-1 { margin-right: 0.25rem !important; margin-left: 0 !important; } .m-sm-2 { margin: 0.5rem !important; } .mt-sm-2, .my-sm-2 { margin-top: 0.5rem !important; } .mr-sm-2 { margin-left: 0.5rem !important; margin-right: 0 !important; } .mb-sm-2, .my-sm-2 { margin-bottom: 0.5rem !important; } .ml-sm-2 { margin-right: 0.5rem !important; margin-left: 0 !important; } .m-sm-3 { margin: 1rem !important; } .mt-sm-3, .my-sm-3 { margin-top: 1rem !important; } .mr-sm-3 { margin-left: 1rem !important; margin-right: 0 !important; } .mb-sm-3, .my-sm-3 { margin-bottom: 1rem !important; } .ml-sm-3 { margin-right: 1rem !important; margin-left: 0 !important; } .m-sm-4 { margin: 1.5rem !important; } .mt-sm-4, .my-sm-4 { margin-top: 1.5rem !important; } .mr-sm-4 { margin-left: 1.5rem !important; margin-right: 0 !important; } .mb-sm-4, .my-sm-4 { margin-bottom: 1.5rem !important; } .ml-sm-4 { margin-right: 1.5rem !important; margin-left: 0 !important; } .m-sm-5 { margin: 3rem !important; } .mt-sm-5, .my-sm-5 { margin-top: 3rem !important; } .mr-sm-5 { margin-left: 3rem !important; margin-right: 0 !important; } .mb-sm-5, .my-sm-5 { margin-bottom: 3rem !important; } .ml-sm-5 { margin-right: 3rem !important; margin-left: 0 !important; } .p-sm-0 { padding: 0 !important; } .pt-sm-0, .py-sm-0 { padding-top: 0 !important; } .pr-sm-0 { padding-left: 0 !important; padding-right: 0 !important; } .pb-sm-0, .py-sm-0 { padding-bottom: 0 !important; } .pl-sm-0 { padding-right: 0 !important; padding-left: 0 !important; } .p-sm-1 { padding: 0.25rem !important; } .pt-sm-1, .py-sm-1 { padding-top: 0.25rem !important; } .pr-sm-1 { padding-left: 0.25rem !important; padding-right: 0 !important; } .pb-sm-1, .py-sm-1 { padding-bottom: 0.25rem !important; } .pl-sm-1 { padding-right: 0.25rem !important; padding-left: 0 !important; } .p-sm-2 { padding: 0.5rem !important; } .pt-sm-2, .py-sm-2 { padding-top: 0.5rem !important; } .pr-sm-2 { padding-left: 0.5rem !important; padding-right: 0 !important; } .pb-sm-2, .py-sm-2 { padding-bottom: 0.5rem !important; } .pl-sm-2 { padding-right: 0.5rem !important; padding-left: 0 !important; } .p-sm-3 { padding: 1rem !important; } .pt-sm-3, .py-sm-3 { padding-top: 1rem !important; } .pr-sm-3 { padding-left: 1rem !important; padding-right: 0 !important; } .pb-sm-3, .py-sm-3 { padding-bottom: 1rem !important; } .pl-sm-3 { padding-right: 1rem !important; padding-left: 0 !important; } .p-sm-4 { padding: 1.5rem !important; } .pt-sm-4, .py-sm-4 { padding-top: 1.5rem !important; } .pr-sm-4 { padding-left: 1.5rem !important; padding-right: 0 !important; } .pb-sm-4, .py-sm-4 { padding-bottom: 1.5rem !important; } .pl-sm-4 { padding-right: 1.5rem !important; padding-left: 0 !important; } .p-sm-5 { padding: 3rem !important; } .pt-sm-5, .py-sm-5 { padding-top: 3rem !important; } .pr-sm-5 { padding-left: 3rem !important; padding-right: 0 !important; } .pb-sm-5, .py-sm-5 { padding-bottom: 3rem !important; } .pl-sm-5 { padding-right: 3rem !important; padding-left: 0 !important; } .m-sm-n1 { margin: -0.25rem !important; } .mt-sm-n1, .my-sm-n1 { margin-top: -0.25rem !important; } .mr-sm-n1, .mx-sm-n1 { margin-right: -0.25rem !important; } .mb-sm-n1, .my-sm-n1 { margin-bottom: -0.25rem !important; } .ml-sm-n1, .mx-sm-n1 { margin-left: -0.25rem !important; } .m-sm-n2 { margin: -0.5rem !important; } .mt-sm-n2, .my-sm-n2 { margin-top: -0.5rem !important; } .mr-sm-n2, .mx-sm-n2 { margin-right: -0.5rem !important; } .mb-sm-n2, .my-sm-n2 { margin-bottom: -0.5rem !important; } .ml-sm-n2, .mx-sm-n2 { margin-left: -0.5rem !important; } .m-sm-n3 { margin: -1rem !important; } .mt-sm-n3, .my-sm-n3 { margin-top: -1rem !important; } .mr-sm-n3, .mx-sm-n3 { margin-right: -1rem !important; } .mb-sm-n3, .my-sm-n3 { margin-bottom: -1rem !important; } .ml-sm-n3, .mx-sm-n3 { margin-left: -1rem !important; } .m-sm-n4 { margin: -1.5rem !important; } .mt-sm-n4, .my-sm-n4 { margin-top: -1.5rem !important; } .mr-sm-n4, .mx-sm-n4 { margin-right: -1.5rem !important; } .mb-sm-n4, .my-sm-n4 { margin-bottom: -1.5rem !important; } .ml-sm-n4, .mx-sm-n4 { margin-left: -1.5rem !important; } .m-sm-n5 { margin: -3rem !important; } .mt-sm-n5, .my-sm-n5 { margin-top: -3rem !important; } .mr-sm-n5, .mx-sm-n5 { margin-right: -3rem !important; } .mb-sm-n5, .my-sm-n5 { margin-bottom: -3rem !important; } .ml-sm-n5, .mx-sm-n5 { margin-left: -3rem !important; } .m-sm-auto { margin: auto !important; } .mt-sm-auto, .my-sm-auto { margin-top: auto !important; } .mr-sm-auto { margin-right: 0px !important; margin-left: auto !important; } .mb-sm-auto, .my-sm-auto { margin-bottom: auto !important; } .mx-sm-auto { margin-right: auto !important; margin-left: auto !important; } .ml-sm-auto { margin-right: auto !important; margin-left: 0px !important; } } @media (min-width: 768px) { .m-md-0 { margin: 0 !important; } .mt-md-0, .my-md-0 { margin-top: 0 !important; } .mr-md-0 { margin-left: 0 !important; margin-right: 0 !important; } .mb-md-0, .my-md-0 { margin-bottom: 0 !important; } .ml-md-0 { margin-right: 0 !important; margin-left: 0 !important; } .m-md-1 { margin: 0.25rem !important; } .mt-md-1, .my-md-1 { margin-top: 0.25rem !important; } .mr-md-1 { margin-left: 0.25rem !important; margin-right: 0 !important; } .mb-md-1, .my-md-1 { margin-bottom: 0.25rem !important; } .ml-md-1 { margin-right: 0.25rem !important; margin-left: 0 !important; } .m-md-2 { margin: 0.5rem !important; } .mt-md-2, .my-md-2 { margin-top: 0.5rem !important; } .mr-md-2 { margin-left: 0.5rem !important; margin-right: 0 !important; } .mb-md-2, .my-md-2 { margin-bottom: 0.5rem !important; } .ml-md-2 { margin-right: 0.5rem !important; margin-left: 0 !important; } .m-md-3 { margin: 1rem !important; } .mt-md-3, .my-md-3 { margin-top: 1rem !important; } .mr-md-3 { margin-left: 1rem !important; margin-right: 0 !important; } .mb-md-3, .my-md-3 { margin-bottom: 1rem !important; } .ml-md-3 { margin-right: 1rem !important; margin-left: 0 !important; } .m-md-4 { margin: 1.5rem !important; } .mt-md-4, .my-md-4 { margin-top: 1.5rem !important; } .mr-md-4 { margin-left: 1.5rem !important; margin-right: 0 !important; } .mb-md-4, .my-md-4 { margin-bottom: 1.5rem !important; } .ml-md-4 { margin-right: 1.5rem !important; margin-left: 0 !important; } .m-md-5 { margin: 3rem !important; } .mt-md-5, .my-md-5 { margin-top: 3rem !important; } .mr-md-5 { margin-left: 3rem !important; margin-right: 0 !important; } .mb-md-5, .my-md-5 { margin-bottom: 3rem !important; } .ml-md-5 { margin-right: 3rem !important; margin-left: 0 !important; } .p-md-0 { padding: 0 !important; } .pt-md-0, .py-md-0 { padding-top: 0 !important; } .pr-md-0 { padding-left: 0 !important; padding-right: 0 !important; } .pb-md-0, .py-md-0 { padding-bottom: 0 !important; } .pl-md-0 { padding-right: 0 !important; padding-left: 0 !important; } .p-md-1 { padding: 0.25rem !important; } .pt-md-1, .py-md-1 { padding-top: 0.25rem !important; } .pr-md-1 { padding-left: 0.25rem !important; padding-right: 0 !important; } .pb-md-1, .py-md-1 { padding-bottom: 0.25rem !important; } .pl-md-1 { padding-right: 0.25rem !important; padding-left: 0 !important; } .p-md-2 { padding: 0.5rem !important; } .pt-md-2, .py-md-2 { padding-top: 0.5rem !important; } .pr-md-2 { padding-left: 0.5rem !important; padding-right: 0 !important; } .pb-md-2, .py-md-2 { padding-bottom: 0.5rem !important; } .pl-md-2 { padding-right: 0.5rem !important; padding-left: 0 !important; } .p-md-3 { padding: 1rem !important; } .pt-md-3, .py-md-3 { padding-top: 1rem !important; } .pr-md-3 { padding-left: 1rem !important; padding-right: 0 !important; } .pb-md-3, .py-md-3 { padding-bottom: 1rem !important; } .pl-md-3 { padding-right: 1rem !important; padding-left: 0 !important; } .p-md-4 { padding: 1.5rem !important; } .pt-md-4, .py-md-4 { padding-top: 1.5rem !important; } .pr-md-4 { padding-left: 1.5rem !important; padding-right: 0 !important; } .pb-md-4, .py-md-4 { padding-bottom: 1.5rem !important; } .pl-md-4 { padding-right: 1.5rem !important; padding-left: 0 !important; } .p-md-5 { padding: 3rem !important; } .pt-md-5, .py-md-5 { padding-top: 3rem !important; } .pr-md-5 { padding-left: 3rem !important; padding-right: 0 !important; } .pb-md-5, .py-md-5 { padding-bottom: 3rem !important; } .pl-md-5 { padding-right: 3rem !important; padding-left: 0 !important; } .m-md-n1 { margin: -0.25rem !important; } .mt-md-n1, .my-md-n1 { margin-top: -0.25rem !important; } .mr-md-n1, .mx-md-n1 { margin-right: -0.25rem !important; } .mb-md-n1, .my-md-n1 { margin-bottom: -0.25rem !important; } .ml-md-n1, .mx-md-n1 { margin-left: -0.25rem !important; } .m-md-n2 { margin: -0.5rem !important; } .mt-md-n2, .my-md-n2 { margin-top: -0.5rem !important; } .mr-md-n2, .mx-md-n2 { margin-right: -0.5rem !important; } .mb-md-n2, .my-md-n2 { margin-bottom: -0.5rem !important; } .ml-md-n2, .mx-md-n2 { margin-left: -0.5rem !important; } .m-md-n3 { margin: -1rem !important; } .mt-md-n3, .my-md-n3 { margin-top: -1rem !important; } .mr-md-n3, .mx-md-n3 { margin-right: -1rem !important; } .mb-md-n3, .my-md-n3 { margin-bottom: -1rem !important; } .ml-md-n3, .mx-md-n3 { margin-left: -1rem !important; } .m-md-n4 { margin: -1.5rem !important; } .mt-md-n4, .my-md-n4 { margin-top: -1.5rem !important; } .mr-md-n4, .mx-md-n4 { margin-right: -1.5rem !important; } .mb-md-n4, .my-md-n4 { margin-bottom: -1.5rem !important; } .ml-md-n4, .mx-md-n4 { margin-left: -1.5rem !important; } .m-md-n5 { margin: -3rem !important; } .mt-md-n5, .my-md-n5 { margin-top: -3rem !important; } .mr-md-n5, .mx-md-n5 { margin-right: -3rem !important; } .mb-md-n5, .my-md-n5 { margin-bottom: -3rem !important; } .ml-md-n5, .mx-md-n5 { margin-left: -3rem !important; } .m-md-auto { margin: auto !important; } .mt-md-auto, .my-md-auto { margin-top: auto !important; } .mr-md-auto { margin-right: 0px !important; margin-left: auto !important; } .mb-md-auto, .my-md-auto { margin-bottom: auto !important; } .mx-md-auto { margin-right: auto !important; margin-left: auto !important; } .ml-md-auto { margin-right: auto !important; margin-left: 0px !important; } } @media (min-width: 992px) { .m-lg-0 { margin: 0 !important; } .mt-lg-0, .my-lg-0 { margin-top: 0 !important; } .mr-lg-0 { margin-left: 0 !important; margin-right: 0 !important; } .mb-lg-0, .my-lg-0 { margin-bottom: 0 !important; } .ml-lg-0 { margin-right: 0 !important; margin-left: 0 !important; } .m-lg-1 { margin: 0.25rem !important; } .mt-lg-1, .my-lg-1 { margin-top: 0.25rem !important; } .mr-lg-1 { margin-left: 0.25rem !important; margin-right: 0 !important; } .mb-lg-1, .my-lg-1 { margin-bottom: 0.25rem !important; } .ml-lg-1 { margin-right: 0.25rem !important; margin-left: 0 !important; } .m-lg-2 { margin: 0.5rem !important; } .mt-lg-2, .my-lg-2 { margin-top: 0.5rem !important; } .mr-lg-2 { margin-left: 0.5rem !important; margin-right: 0 !important; } .mb-lg-2, .my-lg-2 { margin-bottom: 0.5rem !important; } .ml-lg-2 { margin-right: 0.5rem !important; margin-left: 0 !important; } .m-lg-3 { margin: 1rem !important; } .mt-lg-3, .my-lg-3 { margin-top: 1rem !important; } .mr-lg-3 { margin-left: 1rem !important; margin-right: 0 !important; } .mb-lg-3, .my-lg-3 { margin-bottom: 1rem !important; } .ml-lg-3 { margin-right: 1rem !important; margin-left: 0 !important; } .m-lg-4 { margin: 1.5rem !important; } .mt-lg-4, .my-lg-4 { margin-top: 1.5rem !important; } .mr-lg-4 { margin-left: 1.5rem !important; margin-right: 0 !important; } .mb-lg-4, .my-lg-4 { margin-bottom: 1.5rem !important; } .ml-lg-4 { margin-right: 1.5rem !important; margin-left: 0 !important; } .m-lg-5 { margin: 3rem !important; } .mt-lg-5, .my-lg-5 { margin-top: 3rem !important; } .mr-lg-5 { margin-left: 3rem !important; margin-right: 0 !important; } .mb-lg-5, .my-lg-5 { margin-bottom: 3rem !important; } .ml-lg-5 { margin-right: 3rem !important; margin-left: 0 !important; } .p-lg-0 { padding: 0 !important; } .pt-lg-0, .py-lg-0 { padding-top: 0 !important; } .pr-lg-0 { padding-left: 0 !important; padding-right: 0 !important; } .pb-lg-0, .py-lg-0 { padding-bottom: 0 !important; } .pl-lg-0 { padding-right: 0 !important; padding-left: 0 !important; } .p-lg-1 { padding: 0.25rem !important; } .pt-lg-1, .py-lg-1 { padding-top: 0.25rem !important; } .pr-lg-1 { padding-left: 0.25rem !important; padding-right: 0 !important; } .pb-lg-1, .py-lg-1 { padding-bottom: 0.25rem !important; } .pl-lg-1 { padding-right: 0.25rem !important; padding-left: 0 !important; } .p-lg-2 { padding: 0.5rem !important; } .pt-lg-2, .py-lg-2 { padding-top: 0.5rem !important; } .pr-lg-2 { padding-left: 0.5rem !important; padding-right: 0 !important; } .pb-lg-2, .py-lg-2 { padding-bottom: 0.5rem !important; } .pl-lg-2 { padding-right: 0.5rem !important; padding-left: 0 !important; } .p-lg-3 { padding: 1rem !important; } .pt-lg-3, .py-lg-3 { padding-top: 1rem !important; } .pr-lg-3 { padding-left: 1rem !important; padding-right: 0 !important; } .pb-lg-3, .py-lg-3 { padding-bottom: 1rem !important; } .pl-lg-3 { padding-right: 1rem !important; padding-left: 0 !important; } .p-lg-4 { padding: 1.5rem !important; } .pt-lg-4, .py-lg-4 { padding-top: 1.5rem !important; } .pr-lg-4 { padding-left: 1.5rem !important; padding-right: 0 !important; } .pb-lg-4, .py-lg-4 { padding-bottom: 1.5rem !important; } .pl-lg-4 { padding-right: 1.5rem !important; padding-left: 0 !important; } .p-lg-5 { padding: 3rem !important; } .pt-lg-5, .py-lg-5 { padding-top: 3rem !important; } .pr-lg-5 { padding-left: 3rem !important; padding-right: 0 !important; } .pb-lg-5, .py-lg-5 { padding-bottom: 3rem !important; } .pl-lg-5 { padding-right: 3rem !important; padding-left: 0 !important; } .m-lg-n1 { margin: -0.25rem !important; } .mt-lg-n1, .my-lg-n1 { margin-top: -0.25rem !important; } .mr-lg-n1, .mx-lg-n1 { margin-right: -0.25rem !important; } .mb-lg-n1, .my-lg-n1 { margin-bottom: -0.25rem !important; } .ml-lg-n1, .mx-lg-n1 { margin-left: -0.25rem !important; } .m-lg-n2 { margin: -0.5rem !important; } .mt-lg-n2, .my-lg-n2 { margin-top: -0.5rem !important; } .mr-lg-n2, .mx-lg-n2 { margin-right: -0.5rem !important; } .mb-lg-n2, .my-lg-n2 { margin-bottom: -0.5rem !important; } .ml-lg-n2, .mx-lg-n2 { margin-left: -0.5rem !important; } .m-lg-n3 { margin: -1rem !important; } .mt-lg-n3, .my-lg-n3 { margin-top: -1rem !important; } .mr-lg-n3, .mx-lg-n3 { margin-right: -1rem !important; } .mb-lg-n3, .my-lg-n3 { margin-bottom: -1rem !important; } .ml-lg-n3, .mx-lg-n3 { margin-left: -1rem !important; } .m-lg-n4 { margin: -1.5rem !important; } .mt-lg-n4, .my-lg-n4 { margin-top: -1.5rem !important; } .mr-lg-n4, .mx-lg-n4 { margin-right: -1.5rem !important; } .mb-lg-n4, .my-lg-n4 { margin-bottom: -1.5rem !important; } .ml-lg-n4, .mx-lg-n4 { margin-left: -1.5rem !important; } .m-lg-n5 { margin: -3rem !important; } .mt-lg-n5, .my-lg-n5 { margin-top: -3rem !important; } .mr-lg-n5, .mx-lg-n5 { margin-right: -3rem !important; } .mb-lg-n5, .my-lg-n5 { margin-bottom: -3rem !important; } .ml-lg-n5, .mx-lg-n5 { margin-left: -3rem !important; } .m-lg-auto { margin: auto !important; } .mt-lg-auto, .my-lg-auto { margin-top: auto !important; } .mr-lg-auto { margin-right: 0px !important; margin-left: auto !important; } .mb-lg-auto, .my-lg-auto { margin-bottom: auto !important; } .mx-lg-auto { margin-right: auto !important; margin-left: auto !important; } .ml-lg-auto { margin-right: auto !important; margin-left: 0px !important; } } @media (min-width: 1200px) { .m-xl-0 { margin: 0 !important; } .mt-xl-0, .my-xl-0 { margin-top: 0 !important; } .mr-xl-0 { margin-left: 0 !important; margin-right: 0 !important; } .mb-xl-0, .my-xl-0 { margin-bottom: 0 !important; } .ml-xl-0 { margin-right: 0 !important; margin-left: 0 !important; } .m-xl-1 { margin: 0.25rem !important; } .mt-xl-1, .my-xl-1 { margin-top: 0.25rem !important; } .mr-xl-1 { margin-left: 0.25rem !important; margin-right: 0 !important; } .mb-xl-1, .my-xl-1 { margin-bottom: 0.25rem !important; } .ml-xl-1 { margin-right: 0.25rem !important; margin-left: 0 !important; } .m-xl-2 { margin: 0.5rem !important; } .mt-xl-2, .my-xl-2 { margin-top: 0.5rem !important; } .mr-xl-2 { margin-left: 0.5rem !important; margin-right: 0 !important; } .mb-xl-2, .my-xl-2 { margin-bottom: 0.5rem !important; } .ml-xl-2 { margin-right: 0.5rem !important; margin-left: 0 !important; } .m-xl-3 { margin: 1rem !important; } .mt-xl-3, .my-xl-3 { margin-top: 1rem !important; } .mr-xl-3 { margin-left: 1rem !important; margin-right: 0 !important; } .mb-xl-3, .my-xl-3 { margin-bottom: 1rem !important; } .ml-xl-3 { margin-right: 1rem !important; margin-left: 0 !important; } .m-xl-4 { margin: 1.5rem !important; } .mt-xl-4, .my-xl-4 { margin-top: 1.5rem !important; } .mr-xl-4 { margin-left: 1.5rem !important; margin-right: 0 !important; } .mb-xl-4, .my-xl-4 { margin-bottom: 1.5rem !important; } .ml-xl-4 { margin-right: 1.5rem !important; margin-left: 0 !important; } .m-xl-5 { margin: 3rem !important; } .mt-xl-5, .my-xl-5 { margin-top: 3rem !important; } .mr-xl-5 { margin-left: 3rem !important; margin-right: 0 !important; } .mb-xl-5, .my-xl-5 { margin-bottom: 3rem !important; } .ml-xl-5 { margin-right: 3rem !important; margin-left: 0 !important; } .p-xl-0 { padding: 0 !important; } .pt-xl-0, .py-xl-0 { padding-top: 0 !important; } .pr-xl-0 { padding-left: 0 !important; padding-right: 0 !important; } .pb-xl-0, .py-xl-0 { padding-bottom: 0 !important; } .pl-xl-0 { padding-right: 0 !important; padding-left: 0 !important; } .p-xl-1 { padding: 0.25rem !important; } .pt-xl-1, .py-xl-1 { padding-top: 0.25rem !important; } .pr-xl-1 { padding-left: 0.25rem !important; padding-right: 0 !important; } .pb-xl-1, .py-xl-1 { padding-bottom: 0.25rem !important; } .pl-xl-1 { padding-right: 0.25rem !important; padding-left: 0 !important; } .p-xl-2 { padding: 0.5rem !important; } .pt-xl-2, .py-xl-2 { padding-top: 0.5rem !important; } .pr-xl-2 { padding-left: 0.5rem !important; padding-right: 0 !important; } .pb-xl-2, .py-xl-2 { padding-bottom: 0.5rem !important; } .pl-xl-2 { padding-right: 0.5rem !important; padding-left: 0 !important; } .p-xl-3 { padding: 1rem !important; } .pt-xl-3, .py-xl-3 { padding-top: 1rem !important; } .pr-xl-3 { padding-left: 1rem !important; padding-right: 0 !important; } .pb-xl-3, .py-xl-3 { padding-bottom: 1rem !important; } .pl-xl-3 { padding-right: 1rem !important; padding-left: 0 !important; } .p-xl-4 { padding: 1.5rem !important; } .pt-xl-4, .py-xl-4 { padding-top: 1.5rem !important; } .pr-xl-4 { padding-left: 1.5rem !important; padding-right: 0 !important; } .pb-xl-4, .py-xl-4 { padding-bottom: 1.5rem !important; } .pl-xl-4 { padding-right: 1.5rem !important; padding-left: 0 !important; } .p-xl-5 { padding: 3rem !important; } .pt-xl-5, .py-xl-5 { padding-top: 3rem !important; } .pr-xl-5 { padding-left: 3rem !important; padding-right: 0 !important; } .pb-xl-5, .py-xl-5 { padding-bottom: 3rem !important; } .pl-xl-5 { padding-right: 3rem !important; padding-left: 0 !important; } .m-xl-n1 { margin: -0.25rem !important; } .mt-xl-n1, .my-xl-n1 { margin-top: -0.25rem !important; } .mr-xl-n1, .mx-xl-n1 { margin-right: -0.25rem !important; } .mb-xl-n1, .my-xl-n1 { margin-bottom: -0.25rem !important; } .ml-xl-n1, .mx-xl-n1 { margin-left: -0.25rem !important; } .m-xl-n2 { margin: -0.5rem !important; } .mt-xl-n2, .my-xl-n2 { margin-top: -0.5rem !important; } .mr-xl-n2, .mx-xl-n2 { margin-right: -0.5rem !important; } .mb-xl-n2, .my-xl-n2 { margin-bottom: -0.5rem !important; } .ml-xl-n2, .mx-xl-n2 { margin-left: -0.5rem !important; } .m-xl-n3 { margin: -1rem !important; } .mt-xl-n3, .my-xl-n3 { margin-top: -1rem !important; } .mr-xl-n3, .mx-xl-n3 { margin-right: -1rem !important; } .mb-xl-n3, .my-xl-n3 { margin-bottom: -1rem !important; } .ml-xl-n3, .mx-xl-n3 { margin-left: -1rem !important; } .m-xl-n4 { margin: -1.5rem !important; } .mt-xl-n4, .my-xl-n4 { margin-top: -1.5rem !important; } .mr-xl-n4, .mx-xl-n4 { margin-right: -1.5rem !important; } .mb-xl-n4, .my-xl-n4 { margin-bottom: -1.5rem !important; } .ml-xl-n4, .mx-xl-n4 { margin-left: -1.5rem !important; } .m-xl-n5 { margin: -3rem !important; } .mt-xl-n5, .my-xl-n5 { margin-top: -3rem !important; } .mr-xl-n5, .mx-xl-n5 { margin-right: -3rem !important; } .mb-xl-n5, .my-xl-n5 { margin-bottom: -3rem !important; } .ml-xl-n5, .mx-xl-n5 { margin-left: -3rem !important; } .m-xl-auto { margin: auto !important; } .mt-xl-auto, .my-xl-auto { margin-top: auto !important; } .mr-xl-auto { margin-right: 0px !important; margin-left: auto !important; } .mb-xl-auto, .my-xl-auto { margin-bottom: auto !important; } .mx-xl-auto { margin-right: auto !important; margin-left: auto !important; } .ml-xl-auto { margin-right: auto !important; margin-left: 0px !important; } } .float-left { float: right !important; } .float-right { float: left !important; } .float-none { float: none !important; } @media (min-width: 576px) { .float-sm-left { float: right !important; } .float-sm-right { float: left !important; } .float-sm-none { float: none !important; } } @media (min-width: 768px) { .float-md-left { float: right !important; } .float-md-right { float: left !important; } .float-md-none { float: none !important; } } @media (min-width: 992px) { .float-lg-left { float: right !important; } .float-lg-right { float: left !important; } .float-lg-none { float: none !important; } } @media (min-width: 1200px) { .float-xl-left { float: right !important; } .float-xl-right { float: left !important; } .float-xl-none { float: none !important; } } .text-monospace { font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !important; } .text-justify { text-align: justify !important; } .text-wrap { white-space: normal !important; } .text-nowrap { white-space: nowrap !important; } .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .text-left { text-align: right !important; } .text-right { text-align: left !important; } .text-center { text-align: center !important; } @media (min-width: 576px) { .text-sm-left { text-align: right !important; } .text-sm-right { text-align: left !important; } .text-sm-center { text-align: center !important; } } @media (min-width: 768px) { .text-md-left { text-align: right !important; } .text-md-right { text-align: left !important; } .text-md-center { text-align: center !important; } } @media (min-width: 992px) { .text-lg-left { text-align: right !important; } .text-lg-right { text-align: left !important; } .text-lg-center { text-align: center !important; } } @media (min-width: 1200px) { .text-xl-left { text-align: right !important; } .text-xl-right { text-align: left !important; } .text-xl-center { text-align: center !important; } } .text-lowercase { text-transform: lowercase !important; } .text-uppercase { text-transform: uppercase !important; } .text-capitalize { text-transform: capitalize !important; } .font-weight-light { font-weight: 300 !important; } .font-weight-lighter { font-weight: lighter !important; } .font-weight-normal { font-weight: 400 !important; } .font-weight-bold { font-weight: 700 !important; } .font-weight-bolder { font-weight: bolder !important; } .font-italic { font-style: italic !important; } .text-white { color: #fff !important; } .text-primary { color: #5369f8 !important; } a.text-primary:hover, a.text-primary:focus { color: #0a29f5 !important; } .text-secondary { color: #1e2139 !important; } a.text-secondary:hover, a.text-secondary:focus { color: #040407 !important; } .text-success { color: #43d39e !important; } a.text-success:hover, a.text-success:focus { color: #26a375 !important; } .text-info { color: #25c2e3 !important; } a.text-info:hover, a.text-info:focus { color: #158da6 !important; } .text-warning { color: #ffbe0b !important; } a.text-warning:hover, a.text-warning:focus { color: #be8b00 !important; } .text-danger { color: #ff5c75 !important; } a.text-danger:hover, a.text-danger:focus { color: #ff1034 !important; } .text-light { color: #f8f9fa !important; } a.text-light:hover, a.text-light:focus { color: #cbd3da !important; } .text-dark { color: #343a40 !important; } a.text-dark:hover, a.text-dark:focus { color: #121416 !important; } .text-body { color: #6c757d !important; } .text-muted { color: #6c757d !important; } .text-black-50 { color: rgba(0, 0, 0, 0.5) !important; } .text-white-50 { color: rgba(255, 255, 255, 0.5) !important; } .text-hide { font: 0/0 a; color: transparent; text-shadow: none; background-color: transparent; border: 0; } .text-decoration-none { text-decoration: none !important; } .text-break { word-break: break-word !important; overflow-wrap: break-word !important; } .text-reset { color: inherit !important; } .navbar-custom { padding: 0px 37px 0px 22px; } .navbar-custom .topnav-menu > li { float: right; } .navbar-custom .button-menu-mobile { margin-right: 0; margin-left: 45px; } .navbar-custom .app-search .form-control { padding-right: 40px; padding-left: 20px; } .navbar-custom .app-search svg { right: 10px; } /* Notification */ .notification-list .noti-icon-badge { left: 12px; right: auto; } .notification-list .notify-item { padding: 12px 20px; } .notification-list .notify-item .notify-icon { float: right; margin-left: 10px; margin-right: 0; } .notification-list .notify-item .notify-details, .notification-list .notify-item .user-msg { margin-left: 0; margin-right: 45px; } .notification-list .profile-dropdown i { margin-left: 5px; margin-right: 0px; float: right; } .notification-list .profile-dropdown .notify-item { padding: 7px 20px; } .page-title-box .page-title-right { float: left; } .content-page { margin-right: 250px; margin-left: 0; } #sidebar-menu > ul > li > a svg { margin: 0 3px 0 10px; } #sidebar-menu > ul > li > a.active { border-left: 0; border-right: 3px solid #5369f8; } #sidebar-menu > ul > li > ul { padding-right: 40px; padding-left: 0; } #sidebar-menu > ul > li > ul ul { padding-right: 20px; padding-left: 0; } #sidebar-menu .menu-arrow { left: 20px; right: auto; } #sidebar-menu .menu-arrow:before { content: "\e82e"; } #sidebar-menu li.mm-active > a > span.menu-arrow { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li > a i { margin-left: 20px; margin-right: 5px; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li > a span { padding-right: 25px; padding-left: 0; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul > li:hover > ul { right: 70px; left: auto; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul ul li:hover > ul { right: 190px; margin-top: -36px; } .left-side-menu-condensed .left-side-menu #sidebar-menu > ul ul li > a span.pull-right { left: 20px; right: 0; } .left-side-menu-condensed .navbar-custom { right: 0px; padding: 0 10px 0 22px; } .left-side-menu-condensed .content-page { margin-right: 70px !important; margin-left: 0 !important; } .left-side-menu-condensed .footer { left: 0 !important; right: 70px !important; } @media (max-width: 767.98px) { .content-page, .left-side-menu-condensed .content-page { margin-right: 0 !important; } } @media (max-width: 1024px) { .navbar-custom { right: 0 !important; padding: 0 10px !important; } } .scrollable-layout .content-page { margin-right: 0; } .footer { left: 0; right: 250px; } .footer-alt { right: 0 !important; } @media (max-width: 767.98px) { .footer { right: 0 !important; } } .right-bar { float: left !important; left: -270px; right: auto; } .right-bar .user-box .user-img .user-edit { right: 0; left: -5px; } .right-bar-enabled .right-bar { left: 0; right: auto; } body[data-layout=topnav] .navbar-custom { padding: 0 !important; } body[data-layout=topnav] .topbar-nav .metismenu li:nth-child(2) a { padding-left: 1.3rem; padding-right: 0; } body[data-layout=topnav] .topbar-nav .metismenu li a svg { margin: 0 0 0 5px; } body[data-layout=topnav] .topbar-nav .nav-second-level .menu-arrow { float: left; } body[data-layout=topnav] .content-page { margin-right: 0; } @media (min-width: 992px) { .topnav .dropdown .dropdown-menu { text-align: right; right: 0; left: auto; } .topnav .dropdown .dropdown-menu .dropdown .dropdown-menu { right: 100%; left: auto; } } @media (max-width: 991.98px) { .topbar-nav .metismenu li .menu-arrow { float: left; } .topbar-nav .metismenu li .nav-second-level a { padding-right: 1.5rem !important; padding-left: 0 !important; } } .nice-select { float: right; } .nice-select .list { right: 0; left: auto; } .nice-select.right { float: left; } .nice-select.right .list { left: 0; right: auto; } .select2-container .select2-selection--single .select2-selection__rendered { padding-right: 12px; } .select2-container .select2-selection--single .select2-selection__arrow { left: 3px; right: auto; } .select2-container .select2-selection--multiple .select2-selection__choice { float: right; margin-left: 5px; margin-right: 0; } .select2-container .select2-search--inline { float: right; } .dataTables_wrapper .dataTables_filter { text-align: left !important; } .dataTables_wrapper .dataTables_filter input { margin-left: 0px !important; margin-right: 0.5em; } .parsley-errors-list > li:after { right: 14px; left: auto; } .sw-theme-arrows > ul.step-anchor > li > a, .sw-theme-arrows > ul.step-anchor > li > a:hover { padding: 10px 45px 10px 0px; } .sw-theme-arrows > ul.step-anchor > li > a:after { right: 100%; border-left-color: transparent !important; border-right: 30px solid #e2e7f1; } .sw-theme-arrows > ul.step-anchor > li > a::before { right: 100%; margin-right: 1px; border-left-color: transparent !important; border-right: 30px solid #ced4da; } .sw-theme-arrows > ul.step-anchor > li:first-child > a { padding-left: 0; padding-right: 15px; } .sw-theme-arrows > ul.step-anchor > li.active > a:after { border-left-color: transparent !important; border-right-color: #5369f8 !important; } .sw-theme-arrows > ul.step-anchor > li.done > a:after { border-left-color: transparent !important; border-right-color: #c9d0fd !important; } .sw-theme-dots > ul.step-anchor > li > a:after { right: 38%; } .sw-theme-circles > ul.step-anchor > li { margin-left: 0; margin-right: 40px; } .custom-accordion .card { padding-left: 0px; padding-right: 40px; border-left: 0 !important; border-right: 2px dashed #e2e7f1 !important; } .custom-accordion .card-header:before { right: 6px; } .custom-accordion .help-icon { right: -12px; } .icons-list-demo i { margin-left: 12px; margin-right: 0; } .checkbox label { padding-right: 8px; padding-left: 0; } .checkbox label::before { left: auto; right: 0; margin-left: 0; margin-right: -18px; } .checkbox label::after { left: auto; right: 0; margin-right: -18px; margin-left: 0; padding-left: 0; padding-right: 3px; } .checkbox input[type="checkbox"]:checked + label::after { left: auto; right: 7px; -webkit-transform: rotate(45deg); transform: rotate(45deg); } .checkbox.checkbox-single label:before { margin-right: 0; } .checkbox.checkbox-single label:after { margin-right: 0; } .radio label { padding-left: 0; padding-right: 8px; } .radio label::before { left: auto; right: 0; margin-left: 0; margin-right: -18px; } .radio label::after { left: 0; right: 6px; margin-left: 0; margin-right: -20px; } .conversation-list .chat-avatar { float: right; } .conversation-list .ctext-wrap:after { left: 99%; right: auto; margin-left: 0; margin-right: -1px; border-right-color: transparent; border-left-color: white; } .conversation-list .conversation-text { float: right; margin-right: 12px; margin-left: 0; } .conversation-list .odd .chat-avatar { float: left !important; } .conversation-list .odd .conversation-text { float: left !important; margin-right: 0; margin-left: 12px; text-align: left; } .conversation-list .odd .ctext-wrap:after { border-color: transparent; border-left-color: transparent; border-right-color: #f6f6f7; border-top-color: #f6f6f7; left: auto !important; right: 99% !important; } @media print { .content-page, .content, body { margin-right: 0; } } .left-timeline .events { padding-left: 0; padding-right: 35px; border-left: 0; border-right: 3px solid #e2e7f1; } .left-timeline .events .event-list:before { right: -45px; } .left-timeline .events .event-list:after { right: -38px; } .email-contaier .inbox-leftbar { float: right; } .email-contaier .inbox-rightbar { margin-left: 0px; margin-right: 250px; border-right: 5px solid #f3f4f7; border-left: 0; padding: 0 25px 1.5rem 0; } .message-list { display: block; padding-right: 0; } .message-list li .col-mail { float: right; } .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 { float: right; } .message-list li .col-mail-1 .checkbox-wrapper-mail { margin: 15px 20px 0 10px; } .message-list li .col-mail-1 .star-toggle { margin-right: 10px; margin-left: 0; } .message-list li .col-mail-1 .title { right: 100px; left: 0; } .message-list li .col-mail-2 { right: 320px; left: 0; } .message-list li .col-mail-2 .subject { right: 0; left: 110px; } .message-list li .col-mail-2 .date { left: 0; right: auto; padding-right: 10px; padding-left: 0; } .chatbox { right: auto; left: 35px; } @media (max-width: 648px) { .email-contaier .inbox-rightbar { margin-right: 0; border: 0; padding-right: 0; } } @media (max-width: 520px) { .message-list li .col-mail-1 { width: 150px; } .message-list li .col-mail-1 .title { right: 80px; } .message-list li .col-mail-2 { right: 160px; } .message-list li .col-mail-2 .date { text-align: left; padding-left: 10px; padding-right: 20px; } } .task-search .search-input { padding-left: 12px; padding-right: 32px; } .task-search .icon-search { right: 10px; left: auto; } .tasks.tasks:not(:last-child) { margin-right: 0; margin-left: 1.25rem; } .authentication-form .form-group .form-control { padding-right: 48px; } .authentication-form .form-group .form-label-icon { left: auto; right: 7px; }