:root {
  --pri-color: #005c70;
  --sec-color: #435f84;
  --dark-grey: #333333;
  --middle-grey: #eeeeee;
  --light-grey: #f7f7f7;
}

/*
* Link style
*/
a {
	transition: all .25s ease-in-out;
}

/*
* Main theme css file
*/
.designer-outer {
	display: grid; 
	grid-template-columns: 75px 1fr; 
	grid-template-rows: 75px 1fr 75px; 
	gap: 0px 0px; 
	grid-template-areas: 
	"header header"
	"sidebar main"
	"footer footer"; 
}
.main-header { grid-area: header; }
.main-footer { grid-area: footer; }
.main-sidebar { grid-area: sidebar; }
.main-content { grid-area: main; }
/*
* Base layout
*/
.designer-outer {
	height: 100vh;
}
.main-header {
	border-bottom: 1px solid var(--middle-grey);
}
.main-header {
	display: flex;
	border-bottom: 1px solid var(--middle-grey);
}
.main-header > .branding {
	width: 75px;
	padding: 5px;
	text-align: center;
	border-right: 1px solid var(--middle-grey);
}
.main-header > .branding > img {
	max-width: 100%;
	height: auto;
}
.main-header > .color-control {
	flex: 1;
}
.main-sidebar {
	border-right: 1px solid var(--middle-grey);
}
.main-content {
	padding: 30px;
	overflow-x: hidden;
	overflow-Y: visible;
	scrollbar-width: thin;
	background-color: #f1f1f1;
}
.main-footer {
	padding: 15px;
	border-top: 1px solid var(--middle-grey);
	text-align: center;
}

/*
 * Toolbar styles
 */
ul.toolbar-nav {
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.toolbar-nav > li {
	display: block !important;
	border-bottom: 1px solid var(--middle-grey);
}
ul.toolbar-nav > li > a {
	display: block;
	padding: 15px;
	line-height: 40px;
	text-align: center;
	color: #333;
}
ul.toolbar-nav > li > a:hover,
ul.toolbar-nav > li > a:focus {
	background-color: #f7f7f7;
}
ul.toolbar-nav > li > a > i {
	font-size: 1.125rem;
}
ul.toolbar-nav > li > .dropdown-menu {
	width: 240px;
	margin-top: 10px;
	margin-left: 10px;
	padding: 15px;
	border-radius: 0;
	border-color: var(--middle-grey);
}
ul.toolbar-nav > li > .dropdown-menu:after, 
ul.toolbar-nav > li > .dropdown-menu:before {
	right: 100%;
	top: 25px;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
}
ul.toolbar-nav > li > .dropdown-menu:after {
	border-color: rgba(255, 255, 255, 0);
	border-right-color: #ffffff;
	border-width: 5px;
	margin-top: -5px;
}
ul.toolbar-nav > li > .dropdown-menu:before {
	border-color: rgba(238, 238, 238, 0);
	border-right-color: var(--middle-grey);
	border-width: 6px;
	margin-top: -6px;
}
.dropdown-menu h4.dropdown-head {
	font-size: 0.875rem;
	font-weight: 600;
	padding-bottom: 6px;
	text-transform: uppercase;
	border-bottom: 1px solid var(--middle-grey);
}

/* 
 * Export styles
 */
.export-outer {
	display: flex;
	align-items: center;
	justify-content: center;
}
.export-outer > a {
	margin: 0 6px;
	padding: 10px;
	text-align: center;
	border: 1px solid var(--middle-grey);
	color: var(--dark-grey);
}
.export-outer > a:hover {
	text-decoration: none;
	color: var(--sec-color);
}
.export-outer > a i {
	font-size: 1.75rem;
}
.export-outer > a small {
	display: block;
}