:root {
    --tdt-blue: #0045a1;
    --tdt-blue-80: #336ab3;
    --tdt-blue-60: #668fc6;
    --tdt-blue-40: #99b4d9;
    --tdt-blue-20: #ccdaec;
    --tdt-black: #000000;
    --tdt-black-60: #666666;
    --tdt-black-40: #999999;
    --tdt-black-20: #cccccc;
    --tdt-grey: #ababab;
    --tdt-grey-80: #bbbbbb;
    --tdt-grey-60: #cccccc;
    --tdt-grey-40: #dddddd;
    --tdt-grey-20: #eeeeee;
}

.tdt-hal-icon {
    mask-image: url(../../../static/ui/openwisp/images/tdt-hal-icon.svg);
    -webkit-mask-image: url(../../../static/ui/openwisp/images/tdt-hal-icon.svg);
}

#header{
    background-color: var(--tdt-blue);
}

#site-name a{
    width: 290px !important;
    background: url(../../../static/ui/openwisp/images/tdt-core-logo.svg) no-repeat scroll 0 50% / 100% !important;
}

#menu,
.toggle-menu .mg-dropdown-label {
    background: var(--tdt-blue);
}

.menu-group.active,
.menu-group.active-mg:not(.active) .mg-head,
.mg-head:focus {
    background: var(--tdt-blue-80) !important;
}

.menu-group.active-mg .mg-head[aria-expanded="false"] {
    background: var(--tdt-blue-40) !important;
}

.mg-dropdown,
.toggle-menu .mg-list {
    background: var(--tdt-blue-60);
}

.menu-bar {
    border-bottom-width: 3px;
}

.mg-head,
.mg-head:focus,
a.menu-item,
.mg-dropdown-label,
#menu .mg-link,
#menu a.active {
    color: #ffffff !important;
}

#menu a.active {
    background: var(--tdt-blue-40) !important;
}

.mg-arrow,
.mg-heading .icon,
.menu-item .icon,
.mg-link .icon,
#menu a.active .icon,
.menu-group.active-mg .mg-head .icon {
    background: #ffffff !important;
}

#main-content .breadcrumbs a,
.module th a {
    color: var(--tdt-black-40);
}

div.breadcrumbs {
    color: var(--tdt-black);
}

.module caption {
    background: var(--tdt-blue-40);
}

.menu-item:hover,
#menu a.active:hover,
.mg-head:hover,
#menu .mg-link:hover {
    color: var(--tdt-black) !important;
    background: var(--tdt-grey-20) !important;
}

.menu-item:hover .icon,
#menu a.active:hover .icon,
.mg-head:hover .icon,
.menu-group.active-mg .mg-head:hover .icon,
.mg-head:hover .mg-arrow {
    background: var(--tdt-black) !important;
}

#menu .mg-link .None.icon,
#menu a.active:hover .None.icon {
    background: None !important;
}

.account-button:hover, .account-button:focus,
#header .account-menu a:hover {
    color: var(--tdt-blue-80);
}

.account-button:hover span,
.account-button:focus span,
.account-menu a:hover span,
.ow-notifications.toggle-btn:hover #ow-notification-btn,
.ow-notifications:focus #ow-notification-btn {
    background: var(--tdt-blue-80) !important;
}

.ow-filter.ow-active .filter-title {
    border-color: var(--tdt-blue) !important;
    color: var(--tdt-blue) !important;
}

.filter-options .selected,
.filter-options .selected:hover,
.filter-options .selected:focus {
	background: var(--tdt-grey) !important;
	color: #ffffff;
	cursor: default;
}

.filter-options a:hover,
.filter-options a:focus {
    background: var(--tdt-grey-40) !important;
    color: var(--tdt-black) !important;
}