body {
font-family: {{branding.fontStyle}};
color: {{branding.fontColour}};
}
p, .text-main, .panel-title, .breadcrumb .active, .tag, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, #page-title{
color: {{branding.fontColour}};
}
.btn-default {
color: {{branding.fontColour}};
border-color: {{branding.fontColour}};
}
.has-success .form-control {
border-color: {{branding.secondaryColour}} ;
}
#content-container:before {
background-color: {{branding.primaryColour}} !important;
}
#mainnav, .mainnav-profile, .navbar-header:before, .profile-wrap, .navbar-brand {
background: {{branding.primaryColour}} !important;
}
.menu-popover .popover-title {
background: {{branding.primaryColour}} !important;
color:{{branding.headerStyle === 'standard' ? branding.textColour : '#fff'}};
}
.menu-popover .sub-menu ul {
background: {{branding.primaryColourShade || '#222d32'}} !important;
color: {{branding.headerStyle === 'standard' ? branding.textColour : '#fff'}};
}
.menu-popover .sub-menu ul * {
color: {{branding.headerStyle === 'standard' ? branding.textColour : '#fff'}} !important;
}
#mainnav-menu > .active {
background: #222d32;
}
.mainnav-widget-content p {
color:{{branding.textColour}};
}
#mainnav-menu li a, #mainnav .list-header, #mainnav-menu li button {
color: {{branding.textColour}};
}
#mainnav-menu li.active-link button {
background: {{branding.secondaryColour}} !important;
color: {{branding.secondaryColourText}} !important;
}
#mainnav-shortcut .shortcut-wrap .shortcut-grid:hover > .icon-wrap,
#mainnav-shortcut .shortcut-wrap .shortcut-grid:focus > .icon-wrap {
background: {{branding.secondaryColour}};
color: {{branding.secondaryColourText}};
}
#mainnav-menu > .active-link > a, #mainnav-menu > .active-link > a:hover, #mainnav-menu > .active-sub > a, #mainnav-menu > .active-sub > a:hover{
background: {{branding.secondaryColour}} !important;
box-shadow: inset 2px 0 0 0 {{branding.secondaryColour}};
color: {{branding.secondaryColourText}} !important;
}
#mainnav-menu > .active {
background: {{branding.primaryColour}}CC;
}
#mainnav-container a.focus-visible, #mainnav-container button.focus-visible {
outline-color: {{branding.textColour}};
}
a.btn.focus-visible.btn-success, button.btn.focus-visible.btn-success, button.btn.focus-visible.btn-hover-success, button.btn.focus-visible.btn-active-success {
border: 1px solid {{successButtonBorderColour}} !important;
box-shadow: 0 0 0px 3px {{successButtonBoxShadowColour}} !important;
}
.mnp-name {
color: {{branding.textColour}} !important;
}
.mnp-desc {
color: {{branding.textColour}}CC !important;
}
.alert-success {
background-color: {{branding.secondaryColour}};
border-left: 3px solid {{branding.primaryColour}};
color: {{branding.secondaryColourText}};
}
#container.mainnav-sm #mainnav-menu a:hover {
box-shadow: inset 2px 0 0 0 {{branding.secondaryColour}};
}
.btn-group.open .dropdown-toggle.btn.btn-active-success, .btn-hover-success.active, .btn-hover-success:active, .btn-hover-success:hover, .btn-hover-success:focus, .btn-success, .btn-success-basic, .btn-success.disabled:hover, .btn-success:disabled:hover, .btn-success:focus, .btn.btn-active-success.active, .btn.btn-active-success:active, .dropdown.open > .btn.btn-active-success, .panel-success .panel-footer, .panel-success .panel-heading, .panel-success.panel-colorful, .btn-success:hover,
.pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover, .pagination > .active > a:focus, .pagination > .active > span:focus {
background: {{branding.secondaryColour}};
border-color: {{branding.secondaryColour}} !important;
color: {{branding.secondaryColourText}};
}
.bg-primary,
.bg-success,
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
background: {{branding.secondaryColour}};
color: {{branding.secondaryColourText}};
}
.input-group.date .btn-group button, .input-group.date .btn-group + button{
color: {{branding.secondaryColourText}} !important;
}
button.btn.btn-active-primary.active {
border-color: {{ branding.primaryColour }} !important;
background: {{ branding.primaryColour }} !important;
}
button.btn.btn-active-success.active {
border-color: {{ branding.secondaryColour }} !important;
}
.alert-dark, .bg-dark {
background: {{branding.primaryColour}};
}
.alert-dark *, .bg-dark * {
color: #fff !important;
}
.alert-dark .btn-default, .bg-dark .btn-default {
color: {{branding.fontColour}} !important;
border: none;
}
#mainnav-menu .active-sub a, #mainnav-menu .active-sub a:hover {
background: {{branding.secondaryColour}} !important;
color: {{branding.secondaryColourText}} !important;
}
.form-checkbox.form-normal.form-primary.active:before, .form-radio.form-normal.form-primary.active:after {
background: {{branding.secondaryColour}};
border-color: {{branding.secondaryColour}};
color: {{branding.secondaryColourText}};
}
.btn-default.btn-active-primary:not(.disabled):not(:disabled):hover, .open > .dropdown-toggle.btn-primary, .btn-group.open .dropdown-toggle.btn.btn-active-primary, .btn-hover-primary.active, .btn-hover-primary:active, .btn-hover-primary:hover, .btn-primary, .btn-primary-basic, .btn-primary.disabled:hover, .btn-primary:disabled:hover, .btn-primary:focus, .btn.btn-active-primary.active, .btn.btn-active-primary:active, .dropdown.open > .btn.btn-active-primary, .panel-primary .panel-footer, .panel-primary .panel-heading, .panel-primary.panel-colorful, .btn-primary:hover {
background: {{branding.primaryColour}};
color: {{branding.textColour}};
border: 1px solid {{branding.primaryColour}} !important;
}
.btn-success.active, .btn-default.btn-active-success:not(.disabled):not(:disabled):hover, .btn-default.btn-hover-success:not(.disabled):not(:disabled):hover, .btn-success:active, .btn-success:hover, .open > .dropdown-toggle.btn-success, .btn-success.active.focus, .btn-success.active:focus, .btn-success.active:hover, .btn-success:active.focus, .btn-success:active:focus, .btn-success:active:hover, .open > .dropdown-toggle.btn-success.focus, .open > .dropdown-toggle.btn-success:focus, .open > .dropdown-toggle.btn-success:hover, .btn-group.open .dropdown-toggle.btn.btn-active-success, .btn-hover-success.active, .btn-hover-success:active, .btn-hover-success:hover, .btn-success, .btn-success-basic, .btn-success.disabled:hover, .btn-success:disabled:hover, .btn-success:focus, .btn.btn-active-success.active, .btn.btn-active-success:active, .dropdown.open > .btn.btn-active-success, .panel-success .panel-footer, .panel-success .panel-heading, .panel-success.panel-colorful, .btn-success:hover {
background: {{branding.secondaryColour}};
color: {{branding.secondaryColourText}};
border: 1px solid {{branding.secondaryColour}} !important;
}
.right-pane a.list-group-item:hover,
.right-pane a.list-group-item:focus,
.right-pane a.list-group-item.bg-dark:focus {
background: {{branding.secondaryColour}};
}
.btn-dark.active, .btn-dark:active, .btn-dark:hover, .open > .dropdown-toggle.btn-dark, .btn-dark.active.focus, .btn-dark.active:focus, .btn-dark.active:hover, .btn-dark:active.focus, .btn-dark:active:focus, .btn-dark:active:hover, .open > .dropdown-toggle.btn-dark.focus, .open > .dropdown-toggle.btn-dark:focus, .open > .dropdown-toggle.btn-dark:hover, .btn-group.open .dropdown-toggle.btn.btn-active-dark, .btn-hover-dark.active, .btn-hover-dark:active, .btn-hover-dark:hover, .btn-dark, .btn-dark-basic, .btn-dark.disabled:hover, .btn-dark:disabled:hover, .btn-dark:focus, .btn.btn-active-dark.active, .btn.btn-active-dark:active, .dropdown.open > .btn.btn-active-dark, .panel-dark .panel-footer, .panel-success .panel-heading, .panel-dark.panel-colorful, .btn-dark:hover {
background: {{branding.primaryColour}};
color: {{branding.textColour}};
border: none;
}
.panel-dark .panel-footer, .panel-dark .panel-heading, .panel-dark .panel-title, .panel-dark.panel-colorful {
background: {{branding.secondaryColour}};
color: {{branding.secondaryColourText}};
border: none;
}
.toggle-switch:checked + label:before {
background: {{branding.secondaryColour}};
}
.switchery.active {
box-shadow: {{branding.secondaryColour}} 0px 0px 0px 10px inset !important;
border-color: {{branding.secondaryColour}} !important;
transition: border 0.4s, box-shadow 0.4s, background-color 1.2s;
background-color: {{branding.secondaryColour}} !important;
}
.panel-shadowed-info {
box-shadow: 0px 0px 5px {{branding.secondaryColour}};
}
.loader {
border-left: 4px solid {{branding.secondaryColour}};
}
.text-success, a.text-success:hover, a.text-success:focus {
color: {{branding.secondaryColour}};
}
.bord-success {
border-color: {{branding.secondaryColour}} !important;
}
.label-success {
background-color: {{branding.secondaryColour}};
color: {{branding.secondaryColourText}};
}
#nprogress .bar {
background: {{branding.secondaryColour}};
}
#nprogress .spinner-icon {
border-top-color: {{branding.secondaryColour}};
border-left-color: {{branding.secondaryColour}};
}
.progress-bar-success, .badge-primary {
background: {{branding.secondaryColour}};
}
.badge-success {
background-color: {{branding.secondaryColour}};
color: {{branding.secondaryColourText}};
}
.dropdown-menu > li > a:hover, .dropdown-menu:not(.head-list) > li > a:hover {
background-color: {{branding.secondaryColour}};
color: {{branding.secondaryColourText}};
}
.btn-success.disabled.focus, .btn-success.disabled:focus, .btn-success.disabled:hover, .btn-success[disabled].focus, .btn-success[disabled]:focus, .btn-success[disabled]:hover, fieldset[disabled] .btn-success.focus, fieldset[disabled] .btn-success:focus, fieldset[disabled] .btn-success:hover {
background-color: {{branding.secondaryColour}};
border-color: {{branding.secondaryColour}};
color: {{branding.secondaryColourText}};
}
.panel .panel-footer {
background-color: {{branding.primaryColour}};
}
.magic-radio:checked + label:before {
border: 2px solid {{branding.secondaryColour}};
}
.magic-radio + label:after {
background: {{branding.secondaryColour}};
}
.magic-checkbox:checked + label:before {
background: {{branding.secondaryColour}};
border-color: {{branding.secondaryColour}};
}
.toast * {
color: {{branding.secondaryColourText}};
}
.input-daterange, .input-group.date *, #container .table th {
color: {{branding.fontColour}} !important;
}
#mainnav-menu > li.active a:hover {
color: {{ sidebarLinkHoverColour }} !important;
}
#mainnav-menu > li.active, #mainnav-menu li.active ul li a {
background-color: {{ sidebarGroupSelectedBgColour }} !important;
color: {{ branding.textColour }} !important;
}
#mainnav-menu > li > a:active, #mainnav-menu > li > a:hover {
color: {{ sidebarLinkHoverColour }};
}
.add-folder:hover, .folder:hover {
border-color: {{branding.secondaryColour}};
}
.panel-title .btn-link {
color: {{branding.secondaryColour}} !important;
cursor: pointer;
}
#mainnav, .mainnav-profile, .navbar-header:before, .profile-wrap {
background: #fff !important;
}
.navbar-brand, .navbar-content {
background: {{branding.primaryColour}} !important;
}
.navbar-content .navbar-top-links .username,
.navbar-content .navbar-top-links > li > a:not(.text-main),
.navbar-content .navbar-top-links > li > a:not(.text-main) i,
.navbar-content .navbar-top-links > li > button,
.navbar-content .navbar-top-links > li > button i,
.navbar-content .navbar-top-links > li .nested-header-links > li > button,
.navbar-content .navbar-top-links > li .nested-header-links > li > button i {
color: #fff !important;
}
#mainnav-menu > .active {
background: #eee;
}
.navbar-top-links > li > button:hover, .navbar-top-links > li > button:focus,
.navbar-top-links > li > a:hover, .navbar-top-links > li > a:active, .navbar-top-links > li > a:focus, .navbar-top-links > .open > a:focus, .navbar-top-links > .open > a, .navbar-top-links > .open > a:focus {
background: {{branding.secondaryColour}} !important;
}
#mainnav-menu li a, #mainnav .list-header, #mainnav-menu li button {
color: {{branding.fontColour}} !important;
}
.mainnav-profile .profile-wrap p, .mainnav-profile .profile-wrap span, .mainnav-profile .profile-wrap a {
color: {{branding.fontColour}} !important;
}
#mainnav-menu > li.active, #mainnav-menu li.active ul li a {
color: {{branding.fontColour}} !important;
}
#mainnav, .mainnav-profile, .navbar-header:before, .profile-wrap, .navbar-brand {
background: #fff !important;
}
.navbar-content {
background: {{branding.primaryColour}} !important;
}
.navbar-content .navbar-top-links .username,
.navbar-content .navbar-top-links > li > a:not(.text-main),
.navbar-content .navbar-top-links > li > a:not(.text-main) i,
.navbar-content .navbar-top-links > li > button,
.navbar-content .navbar-top-links > li > button i{
color: #fff !important;
}
#mainnav-menu > .active {
background: #eee;
}
.navbar-top-links > li > button:hover, .navbar-top-links > li > button:focus,
.navbar-top-links > li > a:hover, .navbar-top-links > li > a:active, .navbar-top-links > li > a:focus, .navbar-top-links > .open > a:focus, .navbar-top-links > .open > a, .navbar-top-links > .open > a:focus {
background: {{branding.secondaryColour}} !important;
}
.cls-content-sm.panel .panel-title {
background: #fff !important;
}
#mainnav-menu li a, #mainnav .list-header, #mainnav-menu li button {
color: {{branding.fontColour}} !important;
}
.mainnav-profile .profile-wrap p, .mainnav-profile .profile-wrap span, .mainnav-profile .profile-wrap a {
color: {{branding.fontColour}} !important;
}
#mainnav-menu > li.active, #mainnav-menu li.active ul li a {
color: {{branding.fontColour}} !important;
}
#mainnav, .mainnav-profile, .navbar-header:before, .profile-wrap, .navbar-content {
background: #fff !important;
}
.navbar-brand {
background: {{branding.primaryColour}} !important;
}
#mainnav-menu > .active {
background: #eee;
}
.navbar-top-links > li > a:hover, .navbar-top-links > li > a:active, .navbar-top-links > li > a:focus, .navbar-top-links > .open > a:focus, .navbar-top-links > .open > a, .navbar-top-links > .open > a:focus {
background: {{branding.secondaryColour}} !important;
}
#mainnav-menu li a, #mainnav .list-header, #mainnav-menu li button {
color: {{branding.fontColour}} !important;
}
.mainnav-profile .profile-wrap p, .mainnav-profile .profile-wrap span, .mainnav-profile .profile-wrap a {
color: {{branding.fontColour}} !important;
}
#mainnav-menu > li.active, #mainnav-menu li.active ul li a {
color: {{branding.fontColour}} !important;
}
.btn {
border-radius: 3px !important;
}
.btn {
border-radius: 0px !important;
}
.btn {
border-radius: 35px !important;
}