/* body */
body {
	font-family: var(--wwcna-body-font);
	background-color: var(--wwcna-body-bg);
	color: var(--wwcna-main-content-color);
	/* a */
	a {
		color: var(--wwcna-main-content-link-color);
	
		&:hover,
		&:focus {
			color: var(--wwcna-main-content-link-hover-color);
			background: var(--wwcna-main-content-link-hover-bg);
		}
	}
}

.body-panel {
	background-color: var(--wwcna-body-panel-bg);
	padding-top: 15px;
	padding-bottom: 15px;
	border: 1px solid var(--wwcna-body-panel-border);
}

.banner ~ .body-panel {
	padding-top: 0px;
}

/* type */
ul.inline,
ol.inline {
	margin-left: 0;
	list-style: none;
	
	> li {
		display: inline-block;
		padding-left: 5px;
		padding-right: 5px;
	}
}

/* navbar */
nav.navbar {
	margin-bottom: 0;
}

/* buttons */
/*.button-variant-bg(@color; @background; @border; @hover-color; @hover-bg; @hover-border) {
  color: @color;
  background-color: @background;
  border-color: @border;

  &:hover,
  &:focus,
  &.focus,
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    color: @hover-color;
    background-color: @hover-bg;
        border-color: @hover-border;
  }
  &:active,
  &.active,
  .open > .dropdown-toggle& {
    background-image: none;
  }
  &.disabled,
  &[disabled],
  fieldset[disabled] & {
    &,
    &:hover,
    &:focus,
    &.focus,
    &:active,
    &.active {
      background-color: @hover-bg;
          border-color: @hover-border;
    }
  }

  .badge {
    color: @background;
    background-color: &color;
  }
}*/

/*.btn-default {
  .button-variant-bg(@btn-default-color; @btn-default-bg; @btn-default-border; @btn-default-hover-color; @btn-default-hover-bg; @btn-default-hover-border);
}
.btn-primary {
  .button-variant-bg(@btn-primary-color; @btn-primary-bg; @btn-primary-border; @btn-primary-hover-color; @btn-primary-hover-bg; @btn-primary-hover-border);
}*/

/*  Success appears as green */
/*.btn-success {
  .button-variant-bg(@btn-success-color; @btn-success-bg; @btn-success-border; @btn-success-hover-color; @btn-success-hover-bg; @btn-success-hover-border);
}*/

/* Info appears as blue-green */
/*.btn-info {
  .button-variant-bg(@btn-info-color; @btn-info-bg; @btn-info-border; @btn-info-hover-color; @btn-info-hover-bg; @btn-info-hover-border);
}*/

/* Warning appears as orange */
/*.btn-warning {
  .button-variant-bg(@btn-warning-color; @btn-warning-bg; @btn-warning-border; @btn-warning-hover-color; @btn-warning-hover-bg; @btn-warning-hover-border);
}*/
/* Danger and error appear as red */
/*.btn-danger {
  .button-variant-bg(@btn-danger-color; @btn-danger-bg; @btn-danger-border; @btn-danger-hover-color; @btn-danger-hover-bg; @btn-danger-hover-border);
}*/

/* Pager */
.pager {
	li {
		> a,
		> span {
			color: var(--wwcna-pager-color);
			background-color: var(--wwcna-pager-bg);
			border: 1px solid var(--wwcna-pager-border);
		}

		> a:hover,
		> a:focus {
			color: var(--wwcna-pager-hover-color);
			background-color: var(--wwcna-pager-hover-bg);
			border: 1px solid var(--wwcna-pager-hover-border);
		}
	}

	.disabled {
		> a,
		> a:hover,
		> a:focus,
		> span {
			color: var(--wwcna-pager-disabled-color);
			background-color: var(--wwcna-pager-bg);
		}
	}
}

/* pagination */
.pagination-counter {
	padding-top: 8px;
}

.pagination {
	margin-top: 2px;
	margin-bottom: 2px;
}

.menu {
	a.card {
		&.thumbnail {
			border-color: var(--wwcna-menu-card-border-color);
			overflow: hidden;
			padding: 0px;

			&:hover, 
			&:focus {
				border-color: var(--wwcna-menu-card-hover-border-color);
			}

			img {
				-webkit-transition: 0.4s;
				-moz-transition: 0.4s;
				-o-transition: 0.4s;
				transition: 0.4s;
			}
			&:hover {
				img {
					-webkit-transform: scale(1.1);
					-moz-transform: scale(1.1);
					-ms-transform: scale(1.1);
					-o-transform: scale(1.1);
					transform: scale(1.1);
						-webkit-transition: 0.4s;
					-moz-transition: 0.4s;
					-o-transition: 0.4s;
					transition: 0.4s;
				}
			}
		}
	}
}

/* navbar user */
.navbar-user {
	background-color: var(--wwcna-navbar-user-bg);
	border-color: var(--wwcna-navbar-user-border);

	.navbar-brand {
		color: var(--wwcna-navbar-user-brand-color);

		&:hover,
		&:focus {
			color: var(--wwcna-navbar-user-brand-hover-color);
			background-color: var(--wwcna-navbar-user-brand-hover-bg);
		}	
	}

	.navbar-text {
		color: var(--wwcna-navbar-user-color);
	}

	.navbar-nav {
		> li > a {
			color: var(--wwcna-navbar-user-link-color);

			&:hover,
			&:focus {
				color: var(--wwcna-navbar-user-link-hover-color);
				background-color: var(--wwcna-navbar-user-link-hover-bg);
			}
		}
		> .active > a {
			&,
			&:hover,
			&:focus {
				color: var(--wwcna-navbar-user-link-active-color);
				background-color: var(--wwcna-navbar-user-link-active-bg);
			}
		}
		> .disabled > a {
			&,
			&:hover,
			&:focus {
			color: var(--wwcna-navbar-user-link-disabled-color);
				background-color: var(--wwcna-navbar-user-link-disabled-bg);
			}
		}
	}

	.navbar-form {
		border-color: var(--wwcna-navbar-user-border);
	}

	/* Dropdown menu items */
	.navbar-nav {
		/* Remove background color from open dropdown */
		> .open > a {
			&,
			&:hover,
			&:focus {
			background-color: var(--wwcna-navbar-user-link-active-bg);
			color: var(--wwcna-navbar-user-link-active-color);
			}
		}
	}


	/* Links in navbars

	Add a class to ensure links outside the navbar nav are colored correctly. */

	.navbar-link {
		color: var(--wwcna-navbar-user-link-color);
		&:hover {
			color: var(--wwcna-navbar-user-link-hover-color);
		}
	}

	.btn-link {
		color: var(--wwcna-navbar-user-link-color);
		&:hover,
		&:focus {
			color: var(--wwcna-navbar-user-link-hover-color);
		}
		&[disabled],
		fieldset[disabled] & {
			&:hover,
			&:focus {
				color: var(--wwcna-navbar-user-link-disabled-color);
			}
		}
	}
}

.navbar-user-avatar {
	padding-top: 3px;
	
	img {
		border:2px solid var(--wwcna-navbar-user-border);
		width: 44px;
		height: 44px;
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;		
		border-radius: 50%;
		background-clip: border-box;
		background-clip: border-box;
		box-shadow: 0 3px 6px rgba(0,0,0,0.1);
		cursor: pointer;
		background: white;
	}
}

/* banner */
.banner {
	.media-heading {
		font-family: var(--wwcna-banner-header-font);
	}
	
	/* cant use .panel-variant, as it doesnt support background color */
	.card {
		border: 1px solid var(--wwcna-banner-border);
		background-color: var(--wwcna-banner-bg);
		margin-bottom: 0px;

		.card-body {
			color: var(--wwcna-banner-color);
		}
		.row {
			padding-top: 15px;
			padding-bottom: 15px;
			height: 100%;
		
			.col {
				z-index: 201;
			}
			
		}
		
		.media-heading {
			color: var(--wwcna-banner-header-color);
		}
	}
}

.banner-xs {
	.media-heading {
		font-family: var(--wwcna-xs-banner-header-font);
	}
	
	/* cant use .panel-variant, as it doesnt support background color */
	.card {
		color: var(--wwcna-xs-banner-color);
		border: 1px var(--wwcna-xs-banner-border);
		background-color: var(--wwcna-xs-banner-bg);
		margin-bottom: 0px;
		
		.row {
			padding-top: 15px;
			padding-bottom: 15px;
		}
		
		.media-heading {
			color: var(--wwcna-xs-banner-header-color);
		}
		
	}
}

/* breadcrumbs */
.breadcrumb {
	background-color: var(--wwcna-breadcrumb-bg);
	border: 1px solid var(--wwcna-breadcrumb-border);
	color: var(--wwcna-breadcrumb-color);
	margin-bottom: 10px;

  > li {
    + li:before {
      content: "\00a0"; /* Unicode space added since inline-block means non-collapsing white-space */
      content: ""; /* Unicode space added since inline-block means non-collapsing white-space */
      padding: 0px;
    }
		
		a {
			color: var(--wwcna-breadcrumb-link-color);
			text-decoration: none;
			
			&:hover, 
			&:focus {
				color: var(--wwcna-breadcrumb-link-hover-color);
			}
		}
	}

  > .active {
    color: var(--wwcna-breadcrumb-link-active-color);
  }
}

/* search */
.search.navbar-form {
	margin-top: 4px;
	margin-bottom: 4px;
}

/* navbar mainmenu */
.navbar-mainmenu {
	background-color: var(--wwcna-navbar-mainmenu-bg);
	border-color: var(--wwcna-navbar-mainmenu-border);
	font-family: var(--wwcna-navbar-mainmenu-font);
	font-size: var(--wwcna-navbar-mainmenu-font-size);

	.navbar-brand {
		color: var(--wwcna-navbar-mainmenu-brand-color);
		padding-top: 3px;

		&:hover,
		&:focus {
			color: var(--wwcna-navbar-mainmenu-brand-hover-color);
			background-color: var(--wwcna-navbar-mainmenu-brand-hover-bg);
		}
	
		img {
			border:2px solid var(--wwcna-navbar-mainmenu-border);
			width: 44px;
			height: 44px;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;		
			border-radius: 50%;
			background-clip: border-box;
			background-clip: border-box;
			box-shadow: 0 3px 6px rgba(0,0,0,0.1);
			cursor: pointer;
			background: white;
		}
	}
 
	.navbar-text {
		color: var(--wwcna-navbar-mainmenu-color);
	}

	.nav-item {
		a {
			padding: 15px;
			color: var(--wwcna-navbar-mainmenu-link-color);
			display: block;
		
			&:hover,
			&:focus {
				color: var(--wwcna-navbar-mainmenu-link-hover-color);
				background-color: var(--wwcna-navbar-mainmenu-link-hover-bg);
			}
		}

		&.active {
			a {
				&,
				&:hover,
				&:focus {
					padding: 15px;
					color: var(--wwcna-navbar-mainmenu-link-active-color);
					background-color: var(--wwcna-navbar-mainmenu-link-active-bg);
				}
			}
		}

		> .disabled > a {
			&,
			&:hover,
			&:focus {
				color: var(--wwcna-navbar-mainmenu-link-disabled-color);
				background-color: var(--wwcna-navbar-mainmenu-link-disabled-bg);
			}
		}
	
		/* Remove background color from open dropdown */
		> .open > a {
			&,
			&:hover,
			&:focus {
				background-color: var(--wwcna-dropdown-link-active-bg);
				color: var(--wwcna-dropdown-link-active-color);
			}
		}

		 /* Links in navbars
		 
				Add a class to ensure links outside the navbar nav are colored correctly. */
		
		 .navbar-link {
			color: var(--wwcna-navbar-mainmenu-link-color);
			&:hover {
				color: var(--wwcna-navbar-mainmenu-link-hover-color);
			}
		 }

		.btn-link {
			color: var(--wwcna-navbar-mainmenu-link-color);
			&:hover,
			&:focus {
				color: var(--wwcna-navbar-mainmenu-link-hover-color);
			}
			&[disabled],
			fieldset[disabled] & {
				&:hover,
				&:focus {
				color: var(--wwcna-navbar-mainmenu-link-disabled-color);
				}
			}
		}
	}

	/* Dropdown section headers */
	.dropdown-header {
		font-family: var(--wwcna-dropdown-header-font);
		font-size: var(--wwcna-dropdown-header-font-size);
		color: var(--wwcna-dropdown-header-color);
	}	
	
	.dropdown-menu {
		font-family: var(--wwcna-dropdown-font);
		font-size: var(--wwcna-dropdown-font-size);
		background-color: var(--wwcna-dropdown-bg);
		border-color: var(--wwcna-dropdown-border);

		.divider {
			background-color: var(--wwcna-dropdown-divider-bg);
		}

		/* Links within the dropdown menu */
		> li > a {
			color: var(--wwcna-dropdown-link-color);
		}
		
		> li > a {
			&:hover,
			&:focus {
				color: var(--wwcna-dropdown-link-hover-color);
				background-color: var(--wwcna-dropdown-link-hover-bg);
			}
		}
		
		> .active > a {
			&,
			&:hover,
			&:focus {
				color: var(--wwcna-dropdown-link-active-color);
				background-color: var(--wwcna-dropdown-link-active-bg);
			}
		}
		
		/* Disabled state
		
			 Gray out text and ensure the hover/focus state remains gray */
			
		> .disabled > a {
			&,
			&:hover,
			&:focus {
				color: var(--wwcna-dropdown-link-disabled-color);
			}
		}
	}

	.navbar-form {
		border-color: var(--wwcna-navbar-mainmenu-border);
	}
}

/* navbar xs menu */
.navbar-xsmenu {
	background-color: var(--wwcna-navbar-xsmenu-bg);
	border-color: var(--wwcna-navbar-xsmenu-border);

	.navbar-divider {
		.nav-divider(@navbar-xsmenu-dropdown-divider-bg);
	}

	.navbar-brand {
		color: @navbar-xsmenu-brand-color;
		&:hover,
		&:focus {
			color: var(--wwcna-navbar-xsmenu-brand-hover-color);
			background-color: var(--wwcna-navbar-xsmenu-brand-hover-bg);
		}
	}

	.navbar-text {
		color: var(--wwcna-navbar-xsmenu-color);
	}

	.navbar-nav {
		> li > a {
			color: var(--wwcna-navbar-xsmenu-link-color);

			&:hover,
			&:focus {
				color: var(--wwcna-navbar-xsmenu-link-hover-color);
				background-color: var(--wwcna-navbar-xsmenu-link-hover-bg);
			}
		}
		> .active > a {
			&,
			&:hover,
			&:focus {
				color: var(--wwcna-navbar-xsmenu-link-active-color);
				background-color: var(--wwcna-navbar-xsmenu-link-active-bg);
			}
		}

		> .disabled > a {
			&,
			&:hover,
			&:focus {
				color: var(--wwcna-navbar-xsmenu-link-disabled-color);
				background-color: var(--wwcna-navbar-xsmenu-link-disabled-bg);
			}
		}
	}

	.navbar-toggle {
		border-color: var(--wwcna-navbar-xsmenu-toggle-border-color);
		background-color: var(--wwcna-navbar-xsmenu-toggle-bg);
		&:hover,
		&:focus {
			background-color: var(--wwcna-navbar-xsmenu-toggle-hover-bg);
		}

		.icon-bar {
			background-color: var(--wwcna-navbar-xsmenu-toggle-icon-bar-bg);
		}
	}

	.navbar-collapse,
	.navbar-form {
		border-color: var(--wwcna-navbar-xsmenu-border);
	}

	/* Dropdown menu items */
	.navbar-nav {
		/* Remove background color from open dropdown */
		> .open > a {
			&,
			&:hover,
			&:focus {
				background-color: var(--wwcna-navbar-xsmenu-bg);
				color: var(--wwcna-navbar-xsmenu-link-color);
			}
		}

		@media (max-width: @grid-float-breakpoint-max) {
			/* Dropdowns get custom display when xsmenu */
			.divider {
				background-color: var(--wwcna-navbar-xsmenu-dropdown-divider-bg);
			}

			.open .dropdown-menu {
				> li > a {
					color: var(--wwcna-navbar-xsmenu-link-color);
					&:hover,
					&:focus {
						color: var(--wwcna-navbar-xsmenu-link-hover-color);
						background-color: var(--wwcna-navbar-xsmenu-link-hover-bg);
					}
				}
				> .active > a {
					&,
					&:hover,
					&:focus {
						color: var(--wwcna-navbar-xsmenu-link-active-color);
						background-color: var(--wwcna-navbar-xsmenu-link-active-bg);
					}
				}
				> .disabled > a {
					&,
					&:hover,
					&:focus {
						color: var(--wwcna-navbar-xsmenu-link-disabled-color);
						background-color: var(--wwcna-navbar-xsmenu-link-disabled-bg);
					}
				}
			}
		}
	}


	/* Links in navbars
	
	 Add a class to ensure links outside the navbar nav are colored correctly. */
	.navbar-link {
		color: var(--wwcna-navbar-xsmenu-link-color);
		&:hover {
			color: var(--wwcna-navbar-xsmenu-link-hover-color);
		}
	}

	.btn-link {
		color: var(--wwcna-navbar-xsmenu-link-color);
		&:hover,
		&:focus {
			color: var(--wwcna-navbar-xsmenu-link-hover-color);
		}
		&[disabled],
		fieldset[disabled] & {
			&:hover,
			&:focus {
				color: var(--wwcna-navbar-xsmenu-link-disabled-color);
			}
		}
	}
}

.navbar-xsmenu-sitename-image {
	padding-top: 0px;
	padding-left:0px;
}

.navbar-xsmenu-sitename-image-2 {
	padding-top: 0px;
	padding-left:0px;
}

.navbar-xsmenu-logo {
	padding-top: 3px;
	padding-right: 0px;
	img {
		border:1px solid var(--wwcna-navbar-xsmenu-border);
		width: 44px;
		height: 44px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;		
		border-radius: 4px;
		background-clip: border-box;
		background-clip: border-box;
		box-shadow: 0 3px 6px rgba(0,0,0,0.1);
		cursor: pointer;
		background: transparent;
	}
}

.navbar-xsmenu-avatar {
	img {
		border: 1px solid var(--wwcna-navbar-xsmenu-border);
		width: 44px;
		height: 44px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;		
		border-radius: 4px;
		background-clip: border-box;
		background-clip: border-box;
		box-shadow: 0 3px 6px rgba(0,0,0,0.1);
		cursor: pointer;
		background: transparent;
	}
}

/* content */
.content {
	background: var(--wwcna-content-bg);
	border: 1px solid var(--wwcna-content-border);
}

/* main content */
.main-content {
	.card {
		background: var(--wwcna-main-content-bg);
		border: 1px solid var(--wwcna-main-content-border);
		line-height: var(--bs-body-line-height, 1.5);
		/*margin-bottom: calc(1em * var(--bs-body-line-height));*/
	}
	
	.card-body {
		padding: 19px;
	}
	
	.card-default {
		border-color: var(--wwcna-main-content-panel-body-border);
	
		& > .card-heading {
			color: var(--wwcna-main-content-panel-heading-color);
			background-color: ar(--wwcna-main-content-panel-heading-bg);
			border-color: var(--wwcna-main-content-panel-heading-border);
		}
	}

	.page-header {
		margin: 0px;
		padding-bottom: 0;
		border: 0;
		
		a {
			color: var(--wwcna-main-content-header-color);
		
			&:hover,
			&:focus {
				color: var(--wwcna-main-content-header-hover-color);
				background: var(--wwcna-main-content-header-hover-bg);
			}
		}

	}
		
	h1, h2, h3, h4, h5, h6 {
		color: var(--wwcna-main-content-header-color);
		border-bottom: 1px solid var(--wwcna-main-content-divider-color);
		padding-bottom: 9px;
		margin-bottom: 5px;

		font-family: var(--wwcna-main-content-header-font);
	}
	
	legend {
		color: var(--wwcna-main-content-header-color);
		border-bottom: 1px solid var(--wwcna-main-content-divider-color);
	}

	.text-muted {
		color: var(--wwcna-ain-content-muted-color);
		a {
			color: var(--wwcna-main-content-muted-link-color);
		
			&:hover,
			&:focus {
				color: var(--wwcna-main-content-muted-link-hover-color);
				background: var(--wwcna-main-content-muted-link-hover-bg);
			}
		}
	}
	
	.icons {
		a {
			color: var(--wwcna-main-content-icon-link-color);
		
			&:hover,
			&:focus {
				color: var(--wwcna-content-icon-link-hover-color);
				background: var(--wwcna-main-content-icon-link-hover-bg);
			}
		}	  
		padding-bottom: 20px;
	}
	
	.item-image {
		padding-bottom: 20px;
	}
	
	.table-bordered,
	.table-bordered > thead > tr > th, 
	.table-bordered > tbody > tr > th, 
	.table-bordered > tfoot > tr > th, 
	.table-bordered > thead > tr > td, 
	.table-bordered > tbody > tr > td, 
	.table-bordered > tfoot > tr > td
	{
		border-color: #757575;
	}
	
	.item-page .table thead th {
		color: #ffffff;
		font-family: 'Fjalla One';
		font-weight: normal;
	}
}

/* sidebars */
.sidebar {
	.navbar-nav {
		float: none;
	
		&>li {
			float: none;
		}
	}
	
	.page-header {
		margin: 0px 0px 5px 0px;
	}
}

/* Sidebar - Right */
.sidebar-right {
	color: var(--wwcna-sidebar-right-color);

	a {
		color: var(--wwcna-sidebar-right-link-color);
	
		&:hover,
		&:focus {
			color: var(--wwcna-sidebar-right-link-hover-color);
			background: var(--wwcna-sidebar-right-link-hover-bg);
		}
	}	  
	
	.page-header {
		color: var(--wwcna-sidebar-right-header-color);
		border-bottom: 1px solid var(--wwcna-sidebar-right-divider-color);

		font-family: var(--wwcna-sidebar-right-header-font) ;

		& h1, &.h1 { font-size: floor((var(--wwcna-sidebar-right-header-font-size-base) * 2.6)); }
		& h2, &.h2 { font-size: floor((var(--wwcna-sidebar-right-header-font-size-base) * 2.15)); }
		& h3, &.h3 { font-size: floor((var(--wwcna-sidebar-right-header-font-size-base) * 1.7)); }
		& h4, &.h4 { font-size: floor((var(--wwcna-sidebar-right-header-font-size-base) * 1.25)); }
		& h5, &.h5 { font-size: var(--wwcna-sidebar-right-header-font-size-base); }
		& h6, &.h6 { font-size: floor((var(--wwcna-sidebar-right-header-font-size-base) * 0.85)); }
	}
	.well {
		background-color: @sidebar-right-bg;
		border: 1px solid @sidebar-right-border;
		a {
			color: var(--wwcna-sidebar-right-link-color);
		
			&:hover,
			&:focus {
				color: var(--wwcna-sidebar-right-link-hover-color);
				background: var(--wwcna-sidebar-right-link-hover-bg);
			}
		}	  
	}
	
	.navbar-nav {
		> li > a {
			color: var(--wwcna-sidebar-right-navbar-link-color);

			&:hover,
			&:focus {
			color: var(--wwcna-sidebar-right-navbar-link-hover-color);
			background-color: var(--wwcna-sidebar-right-navbar-link-hover-bg);
			}
		}
		> .active > a {
			&,
			&:hover,
			&:focus {
			color: var(--wwcna-sidebar-right-navbar-link-active-color);
			background-color: var(--wwcna-sidebar-right-navbar-link-active-bg);
			}
		}
		> .disabled > a {
			&,
			&:hover,
			&:focus {
			color: var(--wwcna-sidebar-right-navbar-link-disabled-color);
			background-color: var(--wwcna-sidebar-right-navbar-link-disabled-bg);
			}
		}
	}
}

/* Sidebar - Left */
.sidebar-left {
	.well {
		color: var(--wwcna-sidebar-left-color);
		background-color: @sidebar-left-bg;
		border: 1px solid @sidebar-left-border;
		a {
			color: var(--wwcna-sidebar-left-link-color);
		
			&:hover,
			&:focus {
				color: var(--wwcna-sidebar-left-link-hover-color);
				background: var(--wwcna-sidebar-left-link-hover-bg);
			}
		}	  
	
		h1, h2, h3, h4, h5, h6 {
			color: var(--wwcna-sidebar-left-header-color);
			border-bottom: 1px solid var(--wwcna-sidebar-left-divider-color);
			
			padding-bottom: 9px;
			margin-bottom: 5px;
			font-family: var(--wwcna-sidebar-left-header-font);
			
			& h1, &.h1 { font-size: floor((var(--wwcna-sidebar-left-header-font-size-base) * 2.6)); }
			& h2, &.h2 { font-size: floor((var(--wwcna-sidebar-left-header-font-size-base) * 2.15)); }
			& h3, &.h3 { font-size: floor((var(--wwcna-sidebar-left-header-font-size-base) * 1.7)); }
			& h4, &.h4 { font-size: floor((var(--wwcna-sidebar-left-header-font-size-base) * 1.25)); }
			& h5, &.h5 { font-size: var(--wwcna-sidebar-left-header-font-size-base); }
			& h6, &.h6 { font-size: floor((var(--wwcna-sidebar-left-header-font-size-base) * 0.85)); }
		}
		.moduletable:not(:last-child) {
			margin-bottom: 19px;
		}
	}
	.navbar-nav {
		> li > a {
			color: var(--wwcna-sidebar-left-navbar-link-color);

			&:hover,
			&:focus {
				color: var(--wwcna-sidebar-left-navbar-link-hover-color);
				background-color: var(--wwcna-sidebar-left-navbar-link-hover-bg);
			}
		}

		> .active > a {
			&,
			&:hover,
			&:focus {
				color: var(--wwcna-sidebar-left-navbar-link-active-color);
				background-color: var(--wwcna-sidebar-left-navbar-link-active-bg);
			}
		}
		> .disabled > a {
			&,
			&:hover,
			&:focus {
				color: var(--wwcna-sidebar-left-navbar-link-disabled-color);
				background-color: var(--wwcna-sidebar-left-navbar-link-disabled-bg);
			}
		}
	}
}

/* footer */
.footer-outer {
	margin-top: 20px;
	color: var(--wwcna-footer-color);
	background-color: var(--wwcna-footer-outer-bg);
	border: 1px solid var(--wwcna-footer-outer-border);

	.panel {
		background-color: var(--wwcna-footer-inner-bg);
		border: 1px solid var(--wwcna-footer-inner-border);
		padding: 20px;
	}
	
	h1, h2, h3, h4, h5, h6 {
		color: var(--wwcna-footer-header-color);
	}

	a {
		color: var(--wwcna-footer-link-color);

		&:hover,
		&:focus {
			color: var(--wwcna-footer-link-hover-color);
			background-color: var(--wwcna-footer-link-hover-bg);
		}
	}
	
	#back-top {
		a {
			color: var(--wwcna-footer-back-top-color);
			background-color: var(--wwcna-footer-back-top-bg);

			&:hover,
			&:focus {
				color: var(--wwcna-footer-back-top-link-hover-color);
				background-color: var(--wwcna-footer-back-top-link-hover-bg);
			}
		}
	}
}

.footer-inner {
		border-color: var(--wwcna-footer-inner-border);
	
		& > .card-heading {
			color: var(--wwcna-footer-header-color);
			background-color: ar(--wwcna-footer-inner-bg);
			border-color: var(--wwcna-footer-inner-border);
		}

	box-shadow: none;
	-webkit-box-shadow: none;

	.nav {
		> li > a {
			&:hover,
			&:focus {
				color: var(--wwcna-footer-link-hover-color);
				background-color: var(--wwcna-footer-link-hover-bg);
			}
		}
	}
}

.footer-outer-xs {
	margin-top: 0px;
	color: var(--wwcna-footer-xs-color);
	background-color: var(--wwcna-footer-xs-outer-bg);
	border: 1px solid var(--wwcna-footer-xs-outer-border);

	.panel {
		background-color: var(--wwcna-footer-xs-inner-bg);
		border: 1px solid var(--wwcna-footer-xs-inner-border);
		padding-top: 2px;
		padding-left: 20px;
		padding-bottom: 20px;
		padding-right: 20px;
	}
	
	h1, h2, h3, h4, h5, h6 {
		color: var(--wwcna-footer-xs-header-color);
	}

	a {
		color: var(--wwcna-footer-xs-link-color);

		&:hover,
		&:focus {
			color: var(--wwcna-footer-xs-link-hover-color);
			background-color: var(--wwcna-footer-xs-link-hover-bg);
		}
	}
	#back-top {
		color: var(--wwcna-footer-xs-back-top-color);
		background-color: var(--wwcna-footer-xs-back-top-bg);
		
		a {
			&:hover,
			&:focus {
				color: var(--wwcna-footer-xs-back-top-link-hover-color);
				background-color: var(--wwcna-footer-xs-back-top-link-hover-bg);
			}
		}
	}
}

.footer-inner-xs {
	border-color: var(--wwcna-oter-xs-inner-border);
	box-shadow: none;
	-webkit-box-shadow: none;

	& > .card-heading {
		color: var(--wwcna-footer-xs-header-color);
		background-color: ar(--wwcna-footer-xs-inner-bg);
		border-color: var(--wwcna-xs-inner-border);
	}

	.nav {
		> li > a {
			&:hover,
			&:focus {
				color: var(--wwcna-footer-xs-link-hover-color);
				background-color: var(--wwcna-footer-xs-link-hover-bg);
			}
		}
	}
}


/* other */

.sidebar {
	.navbar-nav {
		&>li {
			a {
				padding-top: 8px;
				padding-bottom: 8px;
			}
		}
	}
}

.element-invisible {
	position: absolute;
	padding: 0;
	margin: 0;
	border: 0;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

#pop-print {
	float: right;
	margin: 10px;
}

.glyphicon-group:before,
.glyphicon-users:before {
	content: "\e008";
}

h1, .h1, h2, .h2, h3, .h3 {
	xmargin-top: 0px;
	xmargin-bottom: 0px;
}

a {
	text-decoration: none;

	&:hover,
	&:focus,
	&:active {
		text-decoration: none;
	}
}

a {
	.transition(~"color .25s ease, background-color .25s ease");
}

.btn, button, span {
	.transition(background-color .25s ease);
}


.navbar-xsmenu .navbar-brand.navbar-xsmenu-logo {
	&,
	&:hover,
	&:focus,
	&:active {
		background-color: transparent;
	}
}

footer .well {
	margin-top: 20px;
	margin-bottom: 20px;
}

.footer .nav-pills li a {
	min-width: 135px;
	text-align: center;
}

.footer .nav-pills li a [class^="awe-"].block,
[class*=" awe-"].block {
	display: block;
	margin-bottom: 15px;
}

.main-content {
	.nav-pills {
		> li {
			&>a:hover,
			&>a:focus {
				background: transparent;
			}
		}
	}
}

/*.footer .nav li a {
	font-size: 14px;
}
*/

.text-xs-left { text-align: left; }
.text-xs-right { text-align: right; }
.text-xs-center { text-align: center; }
.text-xs-justify { text-align: justify; }

@media (min-width: @screen-sm-min) {
		.text-sm-left { text-align: left; }
		.text-sm-right { text-align: right; }
		.text-sm-center { text-align: center; }
		.text-sm-justify { text-align: justify; }
}

@media (min-width: @screen-md-min) {
		.text-md-left { text-align: left; }
		.text-md-right { text-align: right; }
		.text-md-center { text-align: center; }
		.text-md-justify { text-align: justify; }
}

@media (min-width: @screen-lg-min) {
		.text-lg-left { text-align: left; }
		.text-lg-right { text-align: right; }
		.text-lg-center { text-align: center; }
		.text-lg-justify { text-align: justify; }
}


.btn-xs-block {
	display: block;
	width: 100%;
}
input[type="submit"].btn-xs-block,
input[type="reset"].btn-xs-block,
input[type="button"].btn-xs-block {
	width: 100%;
}
.btn-block + .btn-xs-block,
.btn-xs-block + .btn-block,
.btn-xs-block + .btn-xs-block {
	margin-top: 0.5rem;
}

@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) {
		.btn-sm-block {
				display: block;
				width: 100%;
		}
		input[type="submit"].btn-sm-block,
		input[type="reset"].btn-sm-block,
		input[type="button"].btn-sm-block {
				width: 100%;
		}
		.btn-block + .btn-sm-block,
		.btn-sm-block + .btn-block,
		.btn-sm-block + .btn-sm-block {
				margin-top: 0.5rem;
		}
}
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
		.btn-md-block {
				display: block;
				width: 100%;
		}
		input[type="submit"].btn-md-block,
		input[type="reset"].btn-md-block,
		input[type="button"].btn-md-block {
				width: 100%;
		}
		.btn-block + .btn-md-block,
		.btn-md-block + .btn-block,
		.btn-md-block + .btn-md-block {
				margin-top: 0.5rem;
		}
}
@media (min-width: @screen-lg-min) {
		.btn-lg-block {
				display: block;
				width: 100%;
		}
		input[type="submit"].btn-lg-block,
		input[type="reset"].btn-lg-block,
		input[type="button"].btn-lg-block {
				width: 100%;
		}
		.btn-block + .btn-lg-block,
		.btn-lg-block + .btn-block,
		.btn-lg-block + .btn-lg-block {
				margin-top: 0.5rem;
		}
}