/*@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap'); @import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');*/ @import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap'); $bg-color:#F8F9FA; $navbar-bg-color : #002649; $navbar-color:#ffffff; $sidebar-bg-color:#fff; $sidebar-color:#002649; $sidebar-icon-color:#c4cff9; $border-color: #E9E9E9; body { font-size: 14px; font-optical-sizing: auto; font-style: normal; } .auth-page-wrapper button.btn { font-size: 14px; line-height: 36px !important; height: 48px; } input{ border: 1px solid#73777F; } .wrapper.default-theme { background: $bg-color; nav.navbar { background: $navbar-bg-color; border-color: rgba($navbar-color, .3); .navbar-brand { color: lighten($navbar-color, 25%); } .left-nav { input.navbar-search { background: #282f48; color:$navbar-color; &::placeholder{ color:rgba($navbar-color, .6); } } } .right-nav { background: $navbar-bg-color; } .nav-link { color: $navbar-color; i { border-color: $navbar-color; background: transparent; } &:hover { color: lighten($navbar-color, 15%); } } .nav-alert { border-color: #2f3546; &.notifications { background-color: #ff61c5; box-shadow: 0px 0px 4px #ff61c5; } &.messages { background-color: #61b8ff; box-shadow: 0px 0px 4px #61b8ff; } } } main { .overlay { background: #002649; } .sidebar { background: $sidebar-bg-color; >div { border-color: rgba($sidebar-color, .1); } a.sidebar-link { color: $sidebar-color; } .sidebar-profile { .name { color: $sidebar-color; } .role { color: rgba($sidebar-color, .8); } } .sidebar-menu { .menu-header { color: rgba($sidebar-color, .5); } .menu-items { a { color: rgba($sidebar-color, .7); i { color: $sidebar-icon-color; color: #abb7da; color: rgba(140, 165, 239, 0.6); border: none; width: auto; font-size: 1rem; } &:hover, &.active { background: #f5f5f9; color: rgba($sidebar-color, .9); i { color: #95b0ff; } } } } } } } .card { .card-icon { i { color: #98a4c7; } } .card-footer { border-top: 1px solid $border-color; background: none; } .card-title { border-bottom: 1px solid $border-color; } } .table { // th, // td { // border-top: 1px solid darken($border-color,2%); // } // thead th { // border-bottom: 2px solid darken($border-color,2%); // } &.table-striped tbody tr:nth-of-type(odd) { background-color: lighten($border-color,1%); } &.table-hover tbody tr:hover { background-color: lighten($border-color, 1%); } } .btn { &.btn-lightning { color: #33A3DC; background-color: #fff; border-color: #fff; font-size: 14px; font-weight: 400; padding: 0; line-height: 21px; height: auto; border: 0; margin: 0; &:hover { background-color: #fff; } } &.btn-outline-lightning { color: #5b6582; background-color: transparent; border-color: #5b6582; &:hover { color: #f0f3ff; background-color: #5b6582; border-color: #5b6582; } } } .text-lightning { color: #98a4c7; } } .wrapper nav.navbar .right-nav ul.helpcircle li.nav-item { padding: 0 10px; } .wrapper nav.navbar .right-nav ul.helpcircle li.nav-item:last-child { padding-right: 0; } .wrapper nav.navbar .right-nav { padding-right: 10px; } .wrapper nav.navbar .right-nav ul.helpcircle li.nav-item img { vertical-align: middle; } .wrapper nav.navbar .right-nav ul.navbar-nav.helpcircle { align-items: center; } .wrapper.default-theme main .sidebar .sidebar-menu .menu-items a.active{ position: relative; background: #E6E9ED; color: #002649; } .wrapper.default-theme main .sidebar .sidebar-menu .menu-items a.active:before { width: 5px; height: 48px; background-color: #002649; border-top-right-radius: 99px; border-bottom-right-radius: 99px; content: ""; left: 0.5px; position: absolute; } .wrapper.default-theme main .sidebar .sidebar-menu .menu-items a.active:after { content: ""; top: 18px; right: 15px; position: absolute; background: url(../../assets/images/chevron-right.svg) no-repeat center top; display: inline-block; width: 20px; height: 12px; } .wrapper.default-theme main .sidebar .sidebar-menu .menu-items a { color: #002649; font-weight: 400; font-size: 14px; line-height: 21px; margin-top: 8px; } .menu-header.mt-5.mb-5 { text-align: center; margin-bottom: 0 !important; margin-top: 0 !important; } .wrapper.default-theme main .sidebar .sidebar-menu .credentia-version .menu-header, .view-source.mb-3 { color: #002649; font-weight: 400; text-align: center; margin: 0px 0px !important; font-size: 14px; line-height: 21px; padding: 4px 28px; } .wrapper nav.navbar .right-nav ul.helpcircle li.nav-item img.help-img { height: 20px; } .wrapper nav.navbar .right-nav ul.helpcircle li.nav-item img.messages-img { height: 18px; } .wrapper nav.navbar .right-nav ul.helpcircle li.nav-item img.profile-img { height: 26px; } .wrapper.default-theme nav.navbar{ padding: 0 16px; } .wrapper.default-theme.pinned-sidebar main .sidebar .sidebar-menu .menu-items a.active:after{ display: none; } .wrapper.default-theme main .sidebar .sidebar-menu .menu-items a:hover, .wrapper.default-theme main .sidebar .sidebar-menu .menu-items a.active { background: #e6e9ed; color: #002649; } .default-theme ul.navbar-nav.flex-fill .nav-item.navicon { margin-top: 135px; margin-left: 12px; } .default-theme.pinned-sidebar ul.navbar-nav.flex-fill .nav-item.navicon { margin-top: 115px; margin-left: -28px; transform: rotate(180deg); } img.img-fluidbutton { width: 25px; height: 25px; } .pl-4, .px-4 { padding-left: 1.5rem !important; } .pb-4, .py-4 { padding-bottom: 1.5rem !important; } .pr-4, .px-4 { padding-right: 1.5rem !important; } .pt-4, .py-4 { padding-top: 1.5rem !important; } ul.unstyled.inbox-pagination { display: flex; justify-content: flex-end; list-style: none; align-items: center; margin-bottom: 0; padding: 0; color:#0E0E0F; } ul.unstyled.inbox-pagination li { padding: 5.5px 4px; } ul.unstyled.inbox-pagination li img { width: auto; height: 10px; padding: 0 6px; } ul.unstyled.inbox-pagination li.item { padding-right: 0; } .table-pagination .form-group { display: flex; align-items: center; } .table-pagination .form-group select#sel1 { width: 75px; font-size: 14px; border: 1px solid #EFEFEF !important; box-shadow: none; color: #0E0E0F; margin-right: 4px; } .page-pagination { padding: 16px 24px; margin-top: 48px; } .table-pagination.d-flex { justify-content: flex-end; } .table-pagination .form-group label.form-label { margin-bottom:0px !important; font-size: 14px; font-weight: 400; margin-right: 5px; color: #929294; } .card.border-0.rounded-0 { margin-bottom: 0; } #mysearch:focus + .input-group-addon { z-index: 10; } #search-btn:hover { cursor: pointer; } #mysearch{ padding-left: 20px; } nav.sidebar-menu.pt-3 { margin-top: 2rem !important; } .form-control, select { color: #0E0E0F; } .form-control::placeholder{ color: #5F758C !important; } button:focus:not(:focus-visible){ box-shadow: none !important; } .alert { padding: 9px 20px 9px 15px; font-size: 14px; line-height: 21px; font-weight: 400; color: #0E0E0F; border-radius: 4px; margin: 24px 0px !important; } .modal .modal-body .alert{ margin-bottom: 0px !important; } .alert-dismissible .btn-close{ padding: 0.8rem 1rem; } .alert-dismissible .btn-close::after{ color: #0E0E0F !important; } .alert img { height: 18px; margin-right: 10px; } .alert-success { background: #ECF6ED; border: 1px solid #41A148; } .modal-header .delete-error img { height: 18px; margin-right: 10px; vertical-align: sub; } .modal-content p { font-size: 14px; line-height: 21px; font-weight: 400; color: #0E0E0F; text-align: left; } div#trashHoliday .modal-content { border-top: 2px solid #DE3D31; } .table-pagination .form-group { margin-bottom: 0 !important; } label { font-size: 14px; line-height: 21px; } p{ font-size: 14px; } .breadcrumbs { box-sizing: border-box; width: 100%; padding: 0px !important; background: #f8f9fa; border-radius: 4px; margin-bottom: 24px; } .breadcrumbs .item.disabled { background: transparent; } .breadcrumbs .items { margin: 0; padding: 0; list-style: none none; } .breadcrumbs .items>li { display: inline-block; vertical-align: top; } .breadcrumbs a:hover { border-bottom: 1px solid #002649; } .breadcrumbs .item:not(:last-child) { display: inline-block; text-decoration: none; } .breadcrumbs .item { margin: 0; } .breadcrumbs a { font-size: 14px; font-weight: 400; line-height: 21px; color: #002649 !important; text-decoration: none !important; } .breadcrumbs .item:not(:last-child):after { font-size: 14px; } .breadcrumbs .item:not(:last-child):after { content: "\f105"; content: "/"; display: inline-block; font: normal normal normal 14px / 1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 14px; line-height: 22px; margin: 0 8px; } .searchbar{ position: relative; min-width: 36px; width: 0%; height: 32px; float: right; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; -ms-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s; } .searchbar-input{ top: 0; right: 0; outline: 0; background: #fff; width: 100%; height: 32px; margin: 0; padding: 0px 10px 0px 10px; font-size: 14px; color: #0E0E0F; border-radius: 4px; border-color: #fff; } .searchbar-input::-webkit-input-placeholder { color: #B5B5B5; } .searchbar-input:-moz-placeholder { color: #B5B5B5; } .searchbar-input::-moz-placeholder { color: #B5B5B5; } .searchbar-input:-ms-input-placeholder { color: #B5B5B5; } .searchbar-icon, .searchbar-submit{ width: 35px; height: 32px; display: block; position: absolute; top: 0; font-size: 12px; right: 0; padding: 0; margin: 0; border: 0; outline: 0; line-height: 30px; text-align: center; cursor: pointer; color: #0E0E0F; background: #fff; border-left: 1px solid #fff;} .searchbar-open{ width:35%; border: 1px solid #B5B5B5; border-radius: 4px; margin-right: 8px; } select.form-control{ background: url(../../assets/images/down-arrow.svg); background-repeat: no-repeat !important; background-size: 14px !important; background-position: 95% 55% !important; background-color: #fff !important; } ul.customclear-filters { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; grid-gap: 16px; list-style: none; padding: 0; margin: 0 0 16px; width: 90%; } .clear-filters{ padding: 0px; } .custom-filters { padding: 0; } ul.pull-right.btn-filters { display: flex; list-style: none; justify-content: right; margin: 0; padding: 0; } .custom-filters .clearfix { border-top: 1px solid #b0bcc7; margin-bottom: 16px; } div#clearfilters.card.card-body { background: #E6E9ED; margin-top: 0px; border-radius: 0px !important; border: 1px solid #E6E9ED; padding: 16px !important; } .clearfilters-btn, .clearfilters-btn:active, .clearfilters-btn:hover, .clearfilters-btn:focus { background: #E6E9ED !important; border: 1px solid #E6E9ED !important; } .custom-filters .card.card-body { margin: 0; border-radius: 0px !important; padding: 16px 24px !important; } .customclear-filters select.form-control { background-position: 95% 55% !important; } .modal-content{ border-radius: 4px !important; } .wrapper.default-theme .modal-content .form-control::placeholder { color: #B5B5B5 !important; } .wrapper.default-theme .modal-content select.form-control{ background-repeat: no-repeat !important; background-size: 14px !important; background-position: 95% 55% !important; background-color: #fff !important; background: url(../../assets/images/down-arrow.svg); } html .table-responsive .table th, html .table th{ background: #ecf6ed; border: 1px solid #ECF6ED !important; color: #1B441E !important; } .alert-info{ background: #E9F5FE; border: 1px solid #1E89DD; } //select.form-control{ // color: #B5B5B5 !important; //} .form-control::placeholder{ color: #B5B5B5 !important; } .btn-primary:not(:disabled):not(.disabled).active, .btn-primary:not(:disabled):not(.disabled):active, .show>.btn-primary.dropdown-toggle, .btn-primary { color: #fff; background-color: #002649 !important; border-color: #002649 !important; border-radius: 4px !important; } .clearfilters-btn.btn-primary:not(:disabled):not(.disabled).active, .clearfilters-btn.btn-primary:not(:disabled):not(.disabled):active, .show>.clearfilters-btn.btn-primary.dropdown-toggle { color: #fff; background-color:transparent; border-color: #002649; } .btn-primary.focus, .btn-primary:focus { box-shadow: none !important; } .table th { font-weight: 600 !important; } .sidebar .dropdown-menu.show { position: static !important; transform: unset !important; width: 100% !important; border: 0; box-shadow: none !important; } .wrapper.default-theme .card .card-title { color: #0E0E0F; } .wrapper.default-theme .modal-content .additional-services select.form-control{ background-size: 12px !important; background-position: 91% 55% !important; height: 32px; font-size: 13px; } .tooltip-inner { font-size: 12px; padding:10px; } .alert-danger{ background-color: #FEECEB; border: 1px solid #DE3D31; } .table > :not(caption) > *> *{ // max-width: 11em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .autocomplete-container .input-container input{ font-size: 14px !important; height: 32px !important; border-radius: 4px; } .autocomplete-container .not-found { padding: 0 !important; border: solid 1px #fff !important; background: white; } .not-found a.btn { font-size: 14px; font-weight: 600; margin: 0.5rem 0rem 0rem !important; color: #002649 !important; } h4.text-muted { margin-bottom: 0; } :not(select) { scrollbar-base-color: #B5B5B5; scrollbar-face-color: #B5B5B5; scrollbar-3dlight-color: #eee; scrollbar-arrow-color: #eee; scrollbar-highlight-color: #eee; scrollbar-shadow-color: #eee; scrollbar-track-color: #eee; } :not(select)::-webkit-scrollbar-thumb { background: #B5B5B5; border-radius: 0; margin: 8px; } :not(select)::-webkit-scrollbar-track { background: #eee; border-radius: 0; } :not(select)::-webkit-scrollbar { width: 8px; height: 8px; } .wrapper.default-theme main .sidebar .sidebar-menu .menu-items a img { width: 16px; height: 16px; } .wrapper.default-theme main .sidebar .sidebar-menu .menu-items a img.dropdown-icon { width: auto; height: 12px; } .wrapper.default-theme main .sidebar .sidebar-menu .menu-items a.active, .wrapper.default-theme main .sidebar .sidebar-menu .menu-items a:hover, .wrapper.default-theme main .sidebar .sidebar-menu .menu-items a.active { font-weight: 600; } html[data-theme="default"] { background: #F8F9FA; }