/* ==================================================================== */
/* 	Table Of Contents
	0. Variables
	1. Font Family
	2. Scaffolding
	3. Buttons
	4. Tables
	5. Badge
	6. Alert
	7. Well
	8. Widgets
	9. Tabs
	10. Side nav
	11. Calendar
	12. Borders
	13. Forms
	14. Breadcumbs
	15. Dashboard
	16. Listing
	17. Pagination
	18. Action Bar
	19. File Tree
	20. Modals
	21. Progress
	22. Panels
	23. Date Range
	24. Tooltip
	25. Loading
	26. Misc
/* ==================================================================== */

@import "../icons.css";

/* ==================================================================== */
/* 0. Variables															*/
/* ==================================================================== */
:root {
	--base-font-colour: var(--tertiary-colour);
	--base-font-family: "Inter", sans-serif;
	--base-font-size: 14px;
	--base-background: var(--grey-colour-1);

	--primary-colour: #e1eaec;
	--secondary-colour: #377283;
	--tertiary-colour: #20292e;
	--tertiary-colour-offset: #fff;

	--grey-colour-1: #F3F7F8;
	--grey-colour-2: #c8d7da;
	--grey-colour-3: #40555e;

	--success-colour: #22794E;
	--success-colour-contrast: #deebe5;
	--danger-colour: #C14841;
	--danger-colour-contrast: #f6e4e3;
	--info-colour: #40555e;
	--info-colour-contrast: #e1eaec;
	--warning-colour: #CA5F2C;
	--warning-colour-contrast: #f9ebe1;

	--button-text-colour: var(--tertiary-colour);
	--button-text-hover: var(--tertiary-colour);
	--button-background: var(--primary-colour);
	--button-background-hover: #c7d7da;
	--button-border-background: var(--button-background);
	--button-border-background-hover: #c7d7da;

	--button-success-text-colour: #fff;
	--button-success-text-colour-hover: var(--button-success-text-colour);	
	--button-success-background: var(--success-colour);
	--button-success-background-hover: hsl(from var(--button-success-background) h s calc(l - 5));
	--button-success-border-background: var(--button-success-background);
	--button-success-border-background-hover: hsl(from var(--button-success-background) h s calc(l - 5));

	--button-danger-text-colour: #fff;
	--button-danger-text-colour-hover: var(--button-danger-text-colour);	
	--button-danger-background: var(--danger-colour);
	--button-danger-background-hover: hsl(from var(--button-danger-background) h s calc(l - 5));
	--button-danger-border-background: var(--button-danger-background);
	--button-danger-border-background-hover: hsl(from var(--button-danger-background) h s calc(l - 5));

	--button-info-text-colour: #fff;
	--button-info-text-colour-hover: var(--button-info-text-colour);	
	--button-info-background: var(--secondary-colour);
	--button-info-background-hover: #325d6c;
	--button-info-border-background: var(--button-info-background);
	--button-info-border-background-hover: #325d6c;

	--button-warning-text-colour: var(--tertiary-colour);
	--button-warning-text-colour-hover: var(--button-warning-text-colour);	
	--button-warning-background: #fff;
	--button-warning-background-hover: var(--primary-colour);
	--button-warning-border-background: var(--grey-colour-2);
	--button-warning-border-background-hover: var(--button-warning-border-background);

	--button-border-radius: 22px;
	--button-border-size: 1px;

	--alert-colour: var(--danger-colour);

	--widget-background: #fff;
	--widget-border-radius: 11px;
}


/* ==================================================================== */
/* 1. Font Family														*/
/* ==================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwkT9nA2.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwAT9nA2.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwgT9nA2.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwcT9nA2.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwsT9nA2.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwoT9nA2.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: italic;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCm3FwrK3iLTcvnUwQT9g.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvvYwYL8g.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvmYwYL8g.woff2) format('woff2');
unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvuYwYL8g.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvhYwYL8g.woff2) format('woff2');
unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvtYwYL8g.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcvsYwYL8g.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
src: url(https://fonts.gstatic.com/s/inter/v18/UcCo3FwrK3iLTcviYwY.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ==================================================================== */
/* 2. Scaffolding														*/
/* ==================================================================== */
body {
	font-family: var(--base-font-family);
	font-optical-sizing: auto;
	font-style: normal;
	font-weight: 400;
	font-size: var(--base-font-size);
	color: var(--base-font-colour);
	background-color: var(--base-background);
	background-image: url(../../img/theme/netdirector/nd-body-bg.gif);
	background-repeat: repeat-y;
}

a,
a:hover {
	color: var(--secondary-colour);
}

h1 {
	text-transform: uppercase;
	font-size: 20px;
	font-weight: 400;
}

h2 {
	line-height: normal;
	font-weight: 500;
	font-size: var(--base-font-size);
}

h3 {
	line-height: normal;
	font-weight: 500;
	font-size: var(--base-font-size);
}

h4 {
	font-size: var(--base-font-size);
}

input, button, select, textarea {
	font-family: var(--base-font-family);
}

/* Footer */
.nd-container {
	background: url(../../img/theme/netdirector/nd-footer.png) 0 bottom no-repeat;
}

.nd-sidebar-closed .nd-container {
	background: none;
}


/* ==================================================================== */
/* 3. Buttons															*/
/* ==================================================================== */

.btn,
.btn-large,
.btn-group > .btn,
.btn-group > .dropdown-menu,
.input-append .btn,
div.ibutton-label-on,
div.ibutton-label-off {
	font-size: var(--base-font-size) !important;
	border-width: var(--button-border-size);
	border-style: solid;
}

.btn {
	font-weight: 500;
	text-shadow: none;
	box-shadow: none;
	color: var(--button-text-colour);
	border-radius: var(--button-border-radius);
	background: var(--button-background);
	border-color: var(--button-border-background);
}

.btn:hover {
	color: var(--button-text-hover);
	background: var(--button-background-hover);
	border-color: var(--button-border-background-hover);
}

.btn-group > .btn:first-child {
	border-top-left-radius: var(--button-border-radius);
	border-bottom-left-radius: var(--button-border-radius);
}

.btn-group[class*="span"] > .btn:first-child {
	border-top-right-radius: var(--button-border-radius);
	border-bottom-right-radius: var(--button-border-radius);
}

.btn-group > .btn:last-child,
.btn-group > .dropdown-toggle {
	border-top-right-radius: var(--button-border-radius);
	border-bottom-right-radius: var(--button-border-radius);
}

.btn-group > .dropdown-toggle {
	box-shadow: none !important;
	border-left: 1px solid #fff;
}

.btn .caret::before {
	font-family: "Material Icons";
    font-style: normal;
    display: inline-block;
    vertical-align: middle;
    speak: none;
    line-height: normal;
    font-size: 16px;
    position: relative;
    top: -3px;
    color: var(--button-text-colour);
    content: "\e313";
}

.btn:hover .caret::before {
	color: var(--base-font-colour);
}

.btn [class^="icon-"],
.btn [class*=" icon-"] {
	width: 14px;
	height: 16px;
}

.btn [class*="icon"]::before {
	font-size: 16px;
}

.btn:hover [class*="icon"]::before {
	color: var(--base-font-colour);
}

.btn-large {
	line-height: 18px;
}

.btn-success,
.btn-primary,
.btn-toggle-on-off.active {
	color: var(--button-success-text-colour) !important;
	background: var(--button-success-background);
	border-color: var(--button-success-border-background);
}

.btn-success.disabled,
.btn-success[disabled] {
	pointer-events: none;
}

.btn-success:hover, .btn-success:active, .btn-success.active, .btn-success.disabled, .btn-success[disabled],
.btn-primary:hover, .btn-primary:active, .btn-primary.active, .btn-primary.disabled, .btn-primary[disabled],
.btn-toggle-on-off.active:hover, .btn-toggle-on-off.active:active, .btn-toggle-on-off.active.active, .btn-toggle-on-off.active.disabled, .btn-toggle-on-off.active[disabled],
.btn-success:hover [class*="icon"]::before, .btn-success:active [class*="icon"]::before, .btn-success.active [class*="icon"]::before, .btn-success.disabled [class*="icon"]::before, .btn-success[disabled] [class*="icon"]::before,
.btn-primary:hover [class*="icon"]::before, .btn-primary:active [class*="icon"]::before, .btn-primary.active [class*="icon"]::before, .btn-primary.disabled [class*="icon"]::before, .btn-primary[disabled] [class*="icon"]::before,
.btn-toggle-on-off.active:hover [class*="icon"]::before, .btn-toggle-on-off.active:active [class*="icon"]::before, .btn-toggle-on-off.active.active [class*="icon"]::before {
	color: var(--button-success-text-colour-hover) !important;
	background: var(--button-success-background-hover) !important;	
	border-color: var(--button-success-border-background-hover);
}

.btn-danger,
.btn-toggle-on-off,
.btn-danger [class*="icon"]::before {
	color: var(--button-danger-text-colour) !important;
	background: var(--button-danger-background);
	border-color: var(--button-danger-border-background);
}

.btn-danger:hover, .btn-danger:active, .btn-danger.active, .btn-danger.disabled, .btn-danger[disabled],
.btn-toggle-on-off:hover, .btn-toggle-on-off:active, .btn-toggle-on-off.active, .btn-toggle-on-off.disabled, .btn-toggle-on-off[disabled],
.btn-danger:hover [class*="icon"]::before, .btn-danger:active [class*="icon"]::before, .btn-danger.active [class*="icon"]::before, .btn-danger.disabled [class*="icon"]::before, .btn-danger[disabled] [class*="icon"]::before,
.btn-toggle-on-off:hover [class*="icon"]::before, .btn-toggle-on-off:active [class*="icon"]::before, .btn-toggle-on-off.active [class*="icon"]::before {
	color: var(--button-danger-text-colour-hover) !important;	
	background: var(--button-danger-background-hover) !important;
	border-color: var(--button-danger-border-background-hover) !important;
}

.btn-info,
.btn-info [class*="icon"]::before {
	color: var(--button-info-text-colour);
	background: var(--button-info-background);
	border-color: var(--button-info-border-background);
}

.btn-info:hover, .btn-info:active, .btn-info.active, .btn-info.disabled, .btn-info[disabled],
.btn-info:hover [class*="icon"]::before, .btn-info:active [class*="icon"]::before, .btn-info.active [class*="icon"]::before, .btn-info.disabled [class*="icon"]::before, .btn-info[disabled] [class*="icon"]::before {
	color: var(--button-info-text-colour-hover);	
	background: var(--button-info-background-hover);
	border-color: var(--button-info-border-background-hover);
}

.btn-warning,
.btn-warning [class*="icon"]::before {
	color: var(--button-warning-text-colour);
	background: var(--button-warning-background);
	border-color: var(--button-warning-border-background);
}

.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled],
.btn-warning:hover [class*="icon"]::before, .btn-warning:active [class*="icon"]::before, .btn-warning.active [class*="icon"]::before, .btn-warning.disabled [class*="icon"]::before, .btn-warning[disabled] [class*="icon"]::before {
	color: var(--button-warning-text-colour-hover);	
	background: var(--button-warning-background-hover);
	border-color: var(--button-warning-border-background-hover);
}

.btn-group > .btn:active,
.btn-group > .btn.active {
	color: var(--button-text-colour);
	background: var(--primary-colour);
}

.btn-group .dropdown-menu li {
	border-top: 1px solid #ddd;
}

.btn-group .dropdown-menu li:first-child {
	border-top: none;
}

.btn-group .dropdown-menu li i {
	margin-right: 8px;
}

.dropdown-menu li > a:not(.btn):hover,
.dropdown-menu li > a:not(.btn):focus,
.dropdown-submenu:hover > a:not(.btn),
.dropdown-menu .active > a:not(.btn),
.dropdown-menu .active > a:not(.btn):hover {
	background-color: var(--primary-colour);
	background-image: none;
	filter: none;
	color: var(--base-font-colour);
}

.ibutton-container {
	border-radius: var(--button-border-radius);
	border: 1px solid var(--grey-colour-2);
}

div.ibutton-label-on,
div.ibutton-label-off {
	color: #fff !important;
	text-shadow: none !important;
	text-transform: capitalize !important;
	text-align: center !important;
	font-weight: 400 !important;
	font-family: var(--base-font-family) !important;
}

.ibutton-handle {
	background: var(--tertiary-colour-offset) !important;
	border: 1px solid var(--base-background) !important;
}

div.ibutton-label-on {
	background: var(--button-success-background) !important;
	border: 1px solid var(--button-success-background) !important;
}

div.ibutton-label-off {	
	background: var(--button-danger-background) !important;
	border: 1px solid var(--button-danger-background) !important;
}


/* ==================================================================== */
/* 4. Tables															*/
/* ==================================================================== */

.nd-table th,
.nd-table td {
	border-left: 0;
	border-top: 1px solid var(--grey-colour-2);
	font-size: 14px;
}

.nd-table th {
	font-weight: 500;
}

.nd-table td {
	vertical-align: middle;
}

.nd-table th a {
	color: var(--base-font-colour);
}

.nd-table th[class*="nd-sortable-header"] a,
.nd-table th[class*="order"] a {
	position: relative;
}

.nd-table th.nd-sortable-header a::after {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-family: "Material Icons";
    font-style: normal;
    display: inline-block;
    vertical-align: middle;
    speak: none;
    line-height: normal;
    font-size: 14px;
    color: var(--icon-text-colour);
    content: "\e8d5";
}

.nd-table th.nd-sortable-header-asc a::after,
.nd-table th.orderAsc a::after {
	content: "\e986";
}

.nd-table th.nd-sortable-header-desc a::after,
.nd-table th.orderDesc a::after {
	content: "\e984";
}

.nd-table.table-hover tbody tr:hover td,
.nd-table.table-hover tbody tr:hover th,
.nd-table.nd-sortable-table th.js-table-sort-header:hover,
.nd-table .nd-table-row-grey,
.nd-table.table-striped tbody tr:nth-child(odd) td,
.nd-table.table-striped tbody tr:nth-child(odd) th {
	background: var(--grey-colour-1);
}

.nd-widget-condensed .nd-table {
	border: 0;
}

.table-menu { 
	border: 1px solid var(--grey-colour-1);
	border-radius: var(--button-border-radius);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
	background-color: var(--grey-colour-1);
	background-clip: padding-box;
}

.table-menu li { border-top: 1px solid var(--grey-colour-2); }
.table-menu li:first-child { border-top: none; }
.table-menu li:hover { font-weight: normal; background: var(--primary-colour); }

.nd-table th [class*="icon"]::before,
.nd-table td [class*="icon"]::before {
	font-size: 16px;
}

.table tbody tr.success td {
	 background: var(--success-colour-contrast);
}

.table tbody tr.error td {
	background: var(--danger-colour-contrast);
}

.table tbody tr.warning td {
	background: var(--warning-colour-contrast);
}

.table tbody tr.info td {
	background: var(--info-colour-contrast);
}


/* ==================================================================== */
/* 5. Badge																*/
/* ==================================================================== */

.badge {
	border-radius: 50%;
	text-shadow: none;
	background: var(--alert-colour) !important;
}


/* ==================================================================== */
/* 6. Alert																*/
/* ==================================================================== */

.alert {
	color: var(--warning-colour);
	border-color: var(--warning-colour-contrast);
	background: var(--warning-colour-contrast);
}

.alert.alert-success {
	color: var(--success-colour);
	border-color: var(--success-colour-contrast);
	background: var(--success-colour-contrast);
}

.alert.alert-error {
	color: var(--danger-colour);
	border-color: var(--danger-colour-contrast);
	background: var(--danger-colour-contrast);
}

.alert.alert-info {
	color: var(--info-colour);
	border-color: var(--info-colour-contrast);
	background: var(--info-colour-contrast);
}


/* ==================================================================== */
/* 7. Well																*/
/* ==================================================================== */

.well {
	color: var(--base-font-colour);
	border-color: var(--base-background);
	background: var(--base-background);
}

.well.nd-well-inverse {
	color: var(--base-background);
	border-color: var(--tertiary-colour);
	background: var(--tertiary-colour);
}

.well.nd-well-warning {
	color: var(--warning-colour);
	border-color: var(--warning-colour-contrast);
	background: var(--warning-colour-contrast);
}

.well.nd-well-important {
	color: var(--danger-colour);
	border-color: var(--danger-colour-contrast);
	background: var(--danger-colour-contrast);
}

.well.nd-well-success {
	color: var(--success-colour);
	border-color: var(--success-colour-contrast);
	background: var(--success-colour-contrast);
}

.well.nd-well-info {
	color: var(--info-colour);
	border-color: var(--info-colour-contrast);
	background: var(--info-colour-contrast);
}


/* ==================================================================== */
/* 8. Widgets															*/
/* ==================================================================== */

.nd-widget-box {
	background: var(--widget-background);
	border-radius: var(--widget-border-radius);
	border: 1px solid var(--grey-colour-2);
}

.nd-widget-box .nd-widget-title, .nd-file-title {
	border-top: 1px solid var(--base-background);
	border-bottom: 1px solid var(--grey-colour-2);
	border-top-left-radius: var(--widget-border-radius);
	border-top-right-radius: var(--widget-border-radius);
}

.nd-widget-box .nd-widget-title.collapsed {
	border-bottom: 0;
}

.nd-widget-box .nd-widget-sub-heading {
	background-color: var(--grey-colour-2);
}

.nd-widget-box .nd-widget-title span.icon,
.nd-file-title span.icon {
	border-right: 1px solid var(--grey-colour-1);
}


/* ==================================================================== */
/* 9. Tabs																*/
/* ==================================================================== */

.nd-tab-system .nav-tabs > li > a {
	color: var(--secondary-colour);
	border-radius: var(--button-border-radius);
	border: 1px solid var(--primary-colour);
	background: var(--tertiary-colour-offset);
	font-size: 14px;
	padding: 8px 11px;
	margin-right: 4px;
}

.nd-tab-system .nav-tabs > li > a:hover {
	background: var(--primary-colour);
}

.nd-tab-system .nav-tabs > li.active > a {
	color: #fff;
	border: 1px solid var(--secondary-colour);
	background: var(--secondary-colour);
}


/* ==================================================================== */
/* 10. Side nav															*/
/* ==================================================================== */

.nd-sidebar > ul.nd-primary-nav {
	border-top: 1px solid var(--grey-colour-2);
	padding-top: 22px;
}

.nd-sidebar-closed .nd-sidebar > ul.nd-primary-nav {
	padding-top: 10px;
}

.nd-sidebar .nd-sidebar-form label,
.nd-sidebar > ul.nd-primary-nav > li a,
.nd-sidebar > ul.nd-primary-nav > li > a,
.nd-sidebar > ul.nd-primary-nav > li a i::before {
	color: var(--base-font-colour);
	font-size: 14px !important;
}

.nd-sidebar > ul.nd-primary-nav > li a i::before {
	font-size: 16px !important;
}

.nd-sidebar > ul.nd-primary-nav > li a:hover,
.nd-sidebar > ul.nd-primary-nav > li.active > a,
.nd-sidebar > ul.nd-primary-nav > li > a:hover > i::before,
.nd-sidebar > ul.nd-primary-nav > li.active > a > i::before,
.nd-sidebar > ul.nd-primary-nav > li > a:hover > i.icon-large::before,
.nd-sidebar > ul.nd-primary-nav > li.active > a > i.icon-large::before,
.nd-sidebar ul.nd-primary-nav > li > ul > li.active > a,
.nd-sidebar ul.nd-primary-nav > li > ul > li li.active > a {
	background: var(--primary-colour);
}

.nd-sidebar ul.nd-primary-nav > li > ul > li li > a  {
	background: var(--grey-colour-1);
}

.nd-sidebar > ul.nd-primary-nav > li.nd-nav-spacer {
	font-size: 10px;
	font-weight: 400;
	color: #fff;
	text-transform: uppercase;
}

.nd-sidebar > ul.nd-primary-nav > li.nd-primary-nav-slider {}

.nd-toggle-sidebar {
	background-color: var(--grey-colour-2);
}


/* ==================================================================== */
/* 11. Calendar															*/
/* ==================================================================== */

#cal-slide-content,
#cal-slide-content:hover { background-color: var(--base-background); }
#cal-slide-content { color: var(--base-font-colour); border-bottom: 1px solid var(--base-background); }
#cal-slide-content a.event-item { color: var(--base-font-colour); }

.event { border: 0; background-color: var(--base-background); }
.event-important { background-color: var(--danger-colour); }
.event-info { background-color: var(--primary-colour); }
.event-warning { background-color: var(--warning-colour); }
.event-inverse { background-color: var(--tertiary-colour); }
.event-success { background-color: var(--success-colour); }
.event-special { background-color: var(--primary-colour); }

.day-highlight.dh-event-important:hover,
.day-highlight.dh-event-important { background-color: var(--danger-colour-contrast); }
.day-highlight.dh-event-warning:hover,
.day-highlight.dh-event-warning { background-color: var(--warning-colour-contrast); }
.day-highlight.dh-event-info:hover,
.day-highlight.dh-event-info { background-color: var(--warning-primary-contrast); }
.day-highlight.dh-event-inverse:hover,
.day-highlight.dh-event-inverse { background-color: var(--base-background); }
.day-highlight.dh-event-success:hover,
.day-highlight.dh-event-success { background-color: var(--warning-success-contrast); }
.day-highlight.dh-event-special:hover,
.day-highlight.dh-event-special { background-color: var(--warning-primary-contrast); }

.cal-row-head [class*="cal-cell"]:first-child { background: var(--base-background); border: 1px solid var(--base-background); border-radius: 3px 0 0 0; }
.cal-row-head [class*="cal-cell"]:last-child { border-radius: 0 3px 0 0; }
.cal-row-head [class*="cal-cell"] { border: 1px solid var(--base-background); border-left: 0; }
#cal-day-box .cal-day-hour-part { border-bottom: 1px solid var(--base-background); }
.cal-week-box { border-radius: 3px; border-color: var(--base-background); }
.cal-week-box .cal-row-head [class*="cal-cell"]:first-child { border-left: 0; }
.cal-week-box .cal-row-head [class*="cal-cell"]:last-child { border-right: 0; }
.cal-week-box .cal-row-head [class*="cal-cell"]:first-child,
.cal-week-box .cal-row-head [class*="cal-cell"] { border-top: 0; }
.cal-month-box { border-top: 0; border-radius: 0 0 3px 3px; border-color: var(--base-background); }
.cal-month-box [class*="cal-cell"] { border-color: var(--base-background); }
.cal-month-box .cal-row-fluid { border-color: var(--base-background); }
.cal-year-box { border-radius: 3px; border-color: var(--base-background); }
.cal-year-box [class*="span"] { border-color: var(--base-background); }
.cal-year-box .row-fluid { border-color: var(--base-background); }


/* ==================================================================== */
/* 12. Borders															*/
/* ==================================================================== */

.nd-outer-border { border: 1px solid var(--base-background); border-radius: 3px; }
.nd-outer-border-top { border: 1px solid var(--base-background); border-radius: 3px 3px 0 0; }
.nd-outer-border-bottom { border: 1px solid var(--base-background); border-radius: 0 0 3px 3px; }
.nd-outer-border-left { border: 1px solid var(--base-background); border-radius: 3px 0 0 3px; }
.nd-outer-border-right { border: 1px solid var(--base-background); border-radius: 0 3px 3px; }
.nd-border { border: 1px solid var(--base-background) !important; }
.nd-border-top { border-top: 1px solid var(--base-background) !important; }
.nd-border-bottom { border-bottom: 1px solid var(--base-background) !important; }
.nd-border-left { border-left: 1px solid var(--base-background) !important; }
.nd-border-right { border-right: 1px solid var(--base-background) !important; }


/* ==================================================================== */
/* 13. Forms															*/
/* ==================================================================== */

label { font-weight: 400; }
label, input, button, select, textarea { line-height: 18px; }
label, input, button, select, textarea { font-size:var(--base-font-size); }
select, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="tel"], input[type="color"], .uneditable-input {
	font-size: 14px;
	border-color: var(--grey-colour-2);
}

.radio, .checkbox { line-height: 22px; }

.input-append .add-on,
.input-prepend .add-on {
	background: var(--button-background);
}

.input-append .add-on:last-child,
.input-append .btn:last-child,
.nd-file-input-visible .btn {
	border: 1px solid var(--grey-colour-2);
}

.control-group.warning > label,
.control-group.warning .help-block,
.control-group.warning .help-inline {
	color: var(--warning-colour);
}

.control-group.warning input,
.control-group.warning input:focus,
.control-group.warning select,
.control-group.warning select:focus,
.control-group.warning textarea,
.control-group.warning textarea:focus {
	border-color: var(--warning-colour);
}

.label-warning, .badge-warning {
	background: var(--warning-colour);
}

.control-group.error > label,
.control-group.error .help-block,
.control-group.error .help-inline {
	color: var(--danger-colour);
}

.control-group.error input,
.control-group.error input:focus,
.control-group.error select,
.control-group.error select:focus,
.control-group.error textarea,
.control-group.error textarea:focus {
	border-color: var(--danger-colour);
}

.label-error, .badge-error {
	background: var(--danger-colour);
}

.control-group.info > label,
.control-group.info .help-block,
.control-group.info .help-inline {
	color: var(--info-colour);
}

.control-group.info input,
.control-group.info input:focus,
.control-group.info select,
.control-group.info select:focus,
.control-group.info textarea,
.control-group.info textarea:focus {
	border-color: var(--info-colour);
}

.label-info, .badge-info {
	background: var(--info-colour);
}

.control-group.success > label,
.control-group.success .help-block,
.control-group.success .help-inline {
	color: var(--success-colour);
}

.control-group.success input,
.control-group.success input:focus,
.control-group.success select,
.control-group.success select:focus,
.control-group.success textarea,
.control-group.success textarea:focus {
	border-color: var(--success-colour);
}

.label-success, .badge-success {
	background: var(--success-colour);
}

.nd-date-field::before {
    font-size: var(--base-font-size);
    color: var(--icon-text-colour);
}

ul.token-input-list { border: 1px solid var(--grey-colour-1); border-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; border-radius: var(--button-border-radius); }
ul.token-input-list li input { border: 0; }
li.token-input-token { border-radius: var(--button-border-radius); border: 1px solid var(--primary-colour); color: #fff; background-color: var(--primary-colour); }
li.token-input-selected-token { border: 1px solid var(--grey-colour-1); }
div.token-input-dropdown { border: 1px solid var(--grey-colour-1); border-radius: var(--button-border-radius); }
li.token-input-selected-token { background-color: var(--secondary-colour); }

ul.token-input-list,
ul.token-input-list li input,
div.token-input-dropdown,
div.token-input-dropdown ul li,
div.token-input-dropdown ul li.token-input-dropdown-item,
div.token-input-dropdown ul li.token-input-dropdown-item2 { background-color: #fff; }

li.token-input-token,
div.token-input-dropdown ul li.token-input-selected-dropdown-item { background-color: var(--primary-colour); }


/* ==================================================================== */
/* 14. Breadcumbs														*/
/* ==================================================================== */
.nd-breadcrumb,
.nd-breadcrumb a,
.nd-breadcrumb [class*="icon"]::before { background: #fff; color: var(--grey-colour-3); }
.nd-breadcrumb a:hover { text-decoration: underline; }
.nd-breadcrumb a:hover,
.nd-breadcrumb a.current,
.nd-breadcrumb a:last-child { color: var(--base-font-colour); }
.nd-file-content-panel .nd-breadcrumb { border-top: 0 !important; }


/* ==================================================================== */
/* 15. Dashboard														*/
/* ==================================================================== */
.nd-dash-boxes .nd-dash-box,
.nd-dash-boxes .nd-dash-box .nd-dash-heading,
.nd-dash-box .nd-loading,
.nd-dash-heading-sub { background: var(--widget-background); }
/* Borders */
	.nd-dash-boxes .nd-dash-box { border: 1px solid var(--grey-colour-2); border-radius: 10px; }
	.nd-dash-boxes .nd-dash-box .nd-dash-heading { border-top-left-radius: 10px; border-top-right-radius: 10px; }
	.nd-dash-status { border-radius: 0 0 10px 10px; }
	/* Border Top */
	.nd-dash-status,
	.nd-tab-dash-content,
	.nd-dash-boxes .nd-dash-btn-group div { border-top: 1px solid var(--grey-colour-2); }
	.nd-dash-boxes .nd-dash-btn-group div:first-child { border-top: 0; }
	/* Border Bottom */
	.nd-dash-item .nd-dash-item-inner,
	.nd-dash-quad-layout,
	.nd-dash-list-heading,
	.nd-dash-boxes .nd-dash-box .nd-dash-heading,
	.nd-mini-dash-row4,
	.nd-mini-dash-row6 { border-bottom: 1px solid var(--grey-colour-2); }
	/* Border Left */
	.nd-dash-list,
	.nd-dash-status a,
	.nd-dash-boxes .nd-dash-box .nd-dash-heading span.nd-icon-right,
	.nd-dash-quad-layout .nd-arrow { border-left: 1px solid var(--grey-colour-2); }
	.nd-dash-content.nd-dash-col1,
	.nd-dash-content.nd-dash-col2,
	.nd-dash-content.nd-dash-col3,
	.nd-dash-content.nd-dash-col4,
	.nd-dash-content.nd-dash-col5,
	.nd-dash-content.nd-dash-col6,
	.nd-dash-content.nd-dash-col7,
	.nd-dash-content.nd-dash-col8,
	.nd-dash-content.nd-dash-col9,
	.nd-dash-content.nd-dash-col10,
	.nd-dash-content.nd-dash-col11,
	.nd-dash-content.nd-dash-col12 { border-left: 1px solid var(--grey-colour-2); margin-left: -1px; }
	/* Border Right */
	.nd-dash-boxes .nd-dash-box .nd-dash-heading span.icon { border-right: 1px solid var(--grey-colour-2); }
	/* No Border */
	.nd-dash-quad-layout .nd-dash-item-inner { border: 0; }
	.nd-dash-list:first-child,
	.nd-dash-status a:first-child { border-left: 0; }
	/* Colours */
	.nd-dash-boxes .nd-dash-black .nd-dash-heading { border-bottom: 6px solid #000; }
	.nd-dash-boxes .nd-dash-green .nd-dash-heading { border-bottom: 6px solid var(--success-colour); }
	.nd-dash-boxes .nd-dash-orange .nd-dash-heading { border-bottom: 6px solid var(--warning-colour);; }
	.nd-dash-boxes .nd-dash-red .nd-dash-heading { border-bottom: 6px solid var(--danger-colour); }
	.nd-dash-boxes .nd-dash-blue .nd-dash-heading { border-bottom: 6px solid var(--info-colour); }
	.nd-dash-boxes .nd-dash-yellow .nd-dash-heading { border-bottom: 6px solid #fff890; }
	.nd-dash-boxes .nd-dash-grey .nd-dash-heading { border-bottom: 6px solid var(--grey-colour-2); }
	.nd-dash-boxes .nd-dash-gforces-blue .nd-dash-heading { border-bottom: 6px solid var(--primary-colour); }

.nd-dash-item .nd-dash-stat-positive { color: var(--success-colour); }
.nd-dash-item .nd-dash-stat-negative { color: var(--danger-colour); }
/* Google Charts */
.google-visualization-tooltip { border-radius: var(--button-border-radius) !important; background-color: var(--primary-colour) !important; }
.google-visualization-tooltip li.google-visualization-tooltip-item { font-size: 11px !important; }
.nd-dash-pie-chart .google-visualization-tooltip { background: none !important; }
.nd-dash-pie-chart .google-visualization-tooltip li.google-visualization-tooltip-item span { color: #555 !important; font-weight: bold !important; font-size: 20px !important; }
.nd-dash-pie-chart .google-visualization-tooltip li.google-visualization-tooltip-item:first-child span { font-size: 15px !important; }
/* Status */
.nd-dash-status { background: var(--grey-colour-1); font-size: 11px; text-align: left; font-style: italic; }
.nd-dash-status a { cursor: default; }
/* Stats */
.nd-dash-item .nd-dash-item-value { font-size: 14px; }
.nd-dash-item .nd-dash-stat,
.nd-dash-list-item .nd-dash-stat { font-weight: bold; line-height: normal; }
.nd-dash-row1 .nd-dash-stat { font-size: 15px; }
.nd-dash-row2 .nd-dash-stat,
.nd-dash-row3 .nd-dash-stat,
.nd-dash-row4 .nd-dash-stat,
.nd-dash-row5 .nd-dash-stat,
.nd-dash-row6 .nd-dash-stat,
.nd-dash-row7 .nd-dash-stat,
.nd-dash-row8 .nd-dash-stat,
.nd-dash-row9 .nd-dash-stat,
.nd-dash-row10 .nd-dash-stat,
.nd-dash-row11 .nd-dash-stat,
.nd-dash-row12 .nd-dash-stat { font-size: 24px; }
.nd-dash-list-item .nd-dash-stat { font-size: 26px; }
.nd-dash-quad-layout .nd-dash-stat { font-size: 19px !important; }


/* ==================================================================== */
/* 16. Listing															*/
/* ==================================================================== */

.nd-list-item .nd-list-actions { border-bottom: 1px solid var(--grey-colour-2); }
.nd-list-item .nd-list-thumb { background: #fff; border-bottom: 1px solid var(--grey-colour-2); }
.nd-list-item-inactive .nd-list-thumb .nd-list-item-frame { background: url(../../img/theme/netdirector/nd-list-frame.png) center 50% no-repeat; }
.nd-list-item-staging .nd-list-thumb .nd-list-item-frame { background: url(../../img/theme/netdirector/nd-list-frame-staging.png) center 50% no-repeat; }


/* ==================================================================== */
/* 17. Pagination														*/
/* ==================================================================== */

.nd-widget-content .pagination ul > li > a,
.nd-widget-content .pagination ul > li > span {
	color: var(--base-font-colour);
	border-radius: var(--button-border-radius);
}

.nd-widget-content .pagination ul > .active > a,
.nd-widget-content .pagination ul > .active > span,
.nd-widget-content .pagination ul > .active > a:hover,
.nd-widget-content .pagination ul > li:first-child > a:hover,
.nd-widget-content .pagination ul > li:nth-child(2) > a:hover,
.nd-widget-content .pagination ul > li:last-child > a:hover,
.nd-widget-content .pagination ul > li:nth-last-child(2) > a:hover {
	color: #fff;
	background: var(--secondary-colour);
}

.nd-widget-content .pagination ul > li > a:hover {
	background: var(--primary-colour);
}

.nd-widget-content .pagination ul > li:first-child > a,
.nd-widget-content .pagination ul > li:nth-child(2) > a,
.nd-widget-content .pagination ul > li:last-child > a,
.nd-widget-content .pagination ul > li:nth-last-child(2) > a {
	font-size: 0;
	position: relative;
	color: var(--base-font-colour);
	background: none;
}

.nd-widget-content .pagination ul > li:first-child > a::before,
.nd-widget-content .pagination ul > li:nth-child(2) > a::before,
.nd-widget-content .pagination ul > li:last-child > a::before,
.nd-widget-content .pagination ul > li:nth-last-child(2) > a::before {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-family: "Material Icons";
    font-style: normal;
    display: inline-block;
    vertical-align: middle;
    speak: none;
    line-height: normal;
    font-size: 20px;
}

.nd-widget-content .pagination ul > li:first-child > a::before {
    content: "\eac3";
}

.nd-widget-content .pagination ul > li:nth-child(2) > a::before {
    content: "\e314";
}

.nd-widget-content .pagination ul > li:last-child > a::before {
    content: "\eac9";
}

.nd-widget-content .pagination ul > li:nth-last-child(2) > a::before {
    content: "\e315";
}


/* ==================================================================== */
/* 18. Action Bar														*/
/* ==================================================================== */

/*.nd-action-bar { background: var(--grey-colour-1); }*/
.nd-secondary-action-bar { background: var(--grey-colour-1); }


/* ==================================================================== */
/* 19. File Tree														*/
/* ==================================================================== */

.nd-file-tree ul > li > a:hover,
.nd-file-tree ul > li > a:hover [class*="icon"]::before,
.nd-file-tree ul > li.active,
.nd-file-tree ul > li.active > a,
.nd-file-tree ul > li.active > a [class*="icon"]::before,
.nd-my-message-inbox .nd-file-tree li.active { color: #fff; background: var(--secondary-colour); }
.nd-file-tree ul li { border-bottom: 1px solid var(--grey-colour-1); }
.nd-file-tree ul > li a,
.nd-file-tree ul > li > a,
.nd-file-tree ul > li > ul > li a:hover { color: var(--base-font-colour); }
.nd-file-tree ul > li > ul > li > a { background: var(--grey-colour-2); }
.nd-file-tree ul > li > ul > li > a:hover { background: var(--grey-colour-3); }
.nd-file-tree ul > li > ul > li > a:hover [class*="icon"]::before { background: var(--grey-colour-3); }
.nd-file-tree ul li ul a { border-top: 1px solid var(--grey-colour-1); }

.nd-file-list ul li a,
.nd-folder-list ul li a { color: #fff; }
.nd-file-list ul li li a { background: var(--grey-colour-2); }
.nd-file-list ul li li a:hover { background: var(--grey-colour-3); }
.nd-file-list ul li a,
.nd-file-list table td { border-bottom: 1px solid var(--grey-colour-1); }
.nd-file-list ul > li > a { background: var(--secondary-colour); }
.nd-file-list ul li li a,
.nd-folder-list ul li li a { color: var(--base-font-colour); }

.nd-software-list ul li a { color: var(--base-font-colour); }
.nd-software-list ul li.active a { color: #fff; }
.nd-software-list ul { border-top: 1px solid var(--grey-colour-1); }
.nd-software-list ul li a { background: #fff; }
.nd-software-list ul li a:hover,
.nd-software-list ul li.active a { background: var(--secondary-colour); }
.nd-software-list ul li a { border-bottom: 1px solid var(--grey-colour-1); }
.nd-software-list ul > li.active > a { background: var(--secondary-colour); }

.nd-file-upload .nd-file-upload-window { background: url(../../img/theme/netdirector/nd-icon-upload-media.png) center 90px no-repeat; }



/* ==================================================================== */
/* 20. Modals															*/
/* ==================================================================== */

.modal-header { background: var(--grey-colour-1); border-bottom: 1px solid var(--grey-colour-2); }
.modal-header h3 { font-size: var(--base-font-size); }
.modal-footer { background: var(--grey-colour-1); border-top: 1px solid var(--grey-colour-2); box-shadow: none; }


/* ==================================================================== */
/* 21. Progress															*/
/* ==================================================================== */

.progress-info.progress-striped .bar,
.progress-striped .bar-info {
	background-color: var(--secondary-colour);
	background-image: none;
}

.progress .nd-progress-bar-primary {
	background-color: var(--secondary-colour);
}

.progress .nd-progress-bar-secondary {
  background-color: var(--grey-colour-3);
}


/* ==================================================================== */
/* 22. Panels															*/
/* ==================================================================== */

.nd-main-panel { background-color: var(--base-background); }
.nd-main-panel-heading { background: #fff; }
.nd-main-panel-heading h1 { text-transform: none; }

.nd-sub-panel-heading {}
.nd-sub-panel-heading h2 { color: #fff; text-shadow: none; }


/* ==================================================================== */
/* 23. Date Range														*/
/* ==================================================================== */

.nd-date-range .nav-pills > .active > a,
.nd-date-range .nav-pills > .active > a:hover { background: var(--primary-colour); }
.nd-date-range >.nav-pills > li > a { color:var(--primary-colour); }
.nd-date-range .nav-pills > .active > a, .nav-pills > .active > a:hover { color:#fff; }
.nd-date-range >.nav-pills > .active > a,
.nd-date-range >.nav-pills > li > a { border-radius: var(--button-border-radius); }


/* ==================================================================== */
/* 24. Tooltip															*/
/* ==================================================================== */

.tooltip-inner { background-color: #000; word-wrap:break-word; }
.tooltip .tooltip-arrow { display: none; }
.google-visualization-tooltip li.google-visualization-tooltip-item { color: #fff !important; }
.google-visualization-tooltip li.google-visualization-tooltip-item span { color: #fff !important; }


/* ==================================================================== */
/* 25. Loading															*/
/* ==================================================================== */

.nd-loading {
	background: rgba(0,0,0,.5) !important;
}


/* ==================================================================== */
/* 24. Misc																*/
/* ==================================================================== */

.nd-library-folders-options { border-bottom: 1px solid var(--grey-colour-1); }
.nd-vehicle-management-status-message { border-top: 1px solid var(--grey-colour-1); }
.nd-vehicle-management-status-message:first-child { border: 0; }
.nd-variant-list-item { border-bottom: 1px solid  var(--grey-colour-1); }
.nd-variant-list-item:hover { background: #fff; }
.nd-variant-list .nd-variant-list-item .nd-variant-list-title { background: var(--grey-colour-1); }
.nd-time { font-size:11px; font-weight:normal; }

.nd-library-folders-list ul li a,
.nd-library-folders-list ul li > a { color: var(--base-font-colour); } /* only first level of anchors tags */
.nd-library-folders-list ul li a:hover { color: #fff; }
.nd-library-folders-list ul li.active a { color: #fff; }
.nd-library-folders-list ul { background: #fff; }
.nd-library-folders-list ul li ul { background: var(--grey-colour-1); }
.nd-library-folders-list ul ul { background: var(--grey-colour-2); }

.text-success { color: var(--success-colour); }
.text-error { color: var(--danger-colour); }
.nd-muted { color: var(--grey-colour-3) !important; }

.nd-main-call-out.alert h2 { font-size: 18px; }
.nd-dialog-box h2 { font-size: 20px; }
.nd-dialog-box .nd-widget-title h2 { font-size: var(--base-font-size); }
.nd-dialog-box .nd-file-upload-container .nd-widget-title h2 { font-size: 9px; }

li.token-input-token { color: #fff; }
li.token-input-token span { color: #fff; }
li.token-input-selected-token { color: #fff; }
div.token-input-dropdown ul li.token-input-selected-dropdown-item { color: #fff; }

.nd-mobile-filter.affix { background: #fff; }
.nd-mobile-filter.affix { box-shadow: 0px 5px 20px 10px var(--grey-colour-3); }

.nd-filter-date .row-fluid { border-top: 1px solid var(--grey-colour-2); }

.nd-mobile-list .nd-mobile-filter { border-bottom: 1px solid var(--grey-colour-2); }
.nd-mobile-list .nd-mobile-list-item { border-bottom: 1px solid var(--grey-colour-2); }