/*
-------------------

	Baseapp

	Template · Layout
	Jun . 2022

-------------------
*/

/* Viewport */

	/* Viewport . Base */
		.viewport.private {
			transition: 0.5s all ease-in-out;
		}
	
	/* Viewport . Extra small screens */

		@media screen and (min-width: 100px) {

			/* Viewport */

				.viewport.private {
					padding-left: 46px;
				}

		}

	/* Viewport . Small screens */

		@media screen and (min-width: 768px) {

			/* Viewport */

				.viewport.private {
					padding-left: 46px;
				}

		}

	/* Viewport . Medium screens */

		@media screen and (min-width: 990px) {

			/* Viewport */

				.viewport.private {
					padding-left: 300px;
				}

		}

	/* Viewport . Large screens */

		@media screen and (min-width: 1200px) {

			/* Viewport */

				.viewport.private {
					padding-left: 300px;
				}

				.viewport.closed {
					padding-left: 74px;
				}

		}

/* Sidebar */

	/* Sidebar . Base */

		section.sidebar {
			position: fixed;
			left: 0px;
			height: 100vh;
			width: 300px;
			overflow: auto;
			z-index: 9999;
			transition: 0.5s width ease-in-out;
		}

		section.sidebar * {
			user-select: none;
			-webkit-tap-highlight-color: transparent;
		}

		section.sidebar.initial {
			transition: unset !important;
		}

	/* Sidebar . Header */

		section.sidebar header {
			width: 100%;
			cursor: pointer;
			background-image: url(https://baseapp.exactusensu.pt/get/docs/media/icon.baseapp.light.png);
			background-repeat: no-repeat;
			transition: 0.5s all ease-in-out;
		}

		section.sidebar.closed header {
			background-image: none;
		}

		section.sidebar header .handle {
			width: 100%;
			opacity: 0;
			background-image: url(https://baseapp.exactusensu.pt/get/docs/media/icon.baseapp.light.png);
			background-repeat: no-repeat;
			background-position: left -100px;
			transition: 0.4s all ease-in-out;
		}

		section.sidebar.closed header .handle {
			opacity: 1;
		}

	/* Sidebar . Navigation */

		section.sidebar ul.navigation {
			transition: 0.2s all ease-in-out;
		}

		/* Sidebar . Navigation item */
		section.sidebar ul.navigation li {
			min-width: 200px;
			opacity: 0.8;
			overflow: auto;
			transition: 0.2s all ease-in-out;
		}

		section.sidebar ul.navigation li:last-child {
			margin-top: 48px;
		}

		section.sidebar ul.navigation li:hover,
		section.sidebar ul.navigation li.active {
			opacity: 1;
		}

		/* Sidebar . Navigation item . Links */
		section.sidebar ul.navigation li a {
			display: block;
			color: #ffffff;
			transition: 0.2s all ease-in-out;
			overflow: auto;
		}

		section.sidebar ul.navigation li:last-child a {
			color: #004b73;
		}

			/* Sidebar . Navigation item . Links . Icons */
			section.sidebar ul.navigation li a:before {
				content: "x";
				display: block;
				float: left;
				color: #ffffff;
				text-align: center;
				border: 1px solid #ffffff;
				border-radius: 50%;
				font-family: PaperIcons;
				transition: 0.2s all ease-in-out;
			}

			section.sidebar ul.navigation li.modules a:before {
				content: "";
			}

			section.sidebar ul.navigation li.courses a:before {
				content: "";
			}

			section.sidebar ul.navigation li.users a:before {
				content: "";
			}

			section.sidebar ul.navigation li.settings a:before {
				content: "";
			}

			section.sidebar ul.navigation li.signout a:before {
				content: "";
			}

			section.sidebar ul.navigation li.active a:before {
				border-color: #ffd000;
			}

			section.sidebar ul.navigation li:last-child a:before {
				border-color: #004b73;
				color: #004b73;
			}

		/* Sidebar . Navigation item . Link . Active */ 
		section.sidebar ul.navigation li.active a:before,
		section.sidebar ul.navigation li.active a:link,
		section.sidebar ul.navigation li.active a:visited {
			color: #ffd000 !important;
			cursor: default;
			font-weight: 500;
		}

		/* Sidebar . Navigation item . Link . Span */ 
		section.sidebar ul.navigation li a span {
			transition: 0.2s all ease-in-out;
		}

		section.sidebar.closed ul.navigation li a span { 
			font-size: 0px;
			line-height: 0px;
			opacity: 0;
		}

	/* Sidebar . Footer */

		section.sidebar footer {
			position: absolute;
			height: auto;
			width: 100%;
			bottom: 48px;
			opacity: 1;
			transition: 0.6s all ease-in-out;
			font-size: 0px;
		}

		section.sidebar.closed footer {
			opacity: 0;
		}

	/* Sidebar . Extra small screens */

		@media (min-width: 100px) {

			/* Sidebar */
				section.sidebar.closed { width: 46px; }

				section.sidebar header {
					height: 60px;
					background-size: auto 40%;
					background-position: center 14px;
				}

				section.sidebar header .handle,
				section.sidebar.closed header { 
					height: 60px;
					background-size: 32px;
				}

				section.sidebar.closed header .handle {
					background-position: 7px 14px;
				}

				section.sidebar ul.navigation { margin: 24px 20px; }

				section.sidebar.closed ul.navigation { margin: 24px 10px; }

				section.sidebar ul.navigation li { margin-bottom: 24px; }

				section.sidebar ul.navigation li a { padding-top: 6px; }

				section.sidebar ul.navigation li a:before {
					height: 24px;
					width: 24px;
					margin: -6px 6px 0px 0px;
					line-height: 24px;
					font-size: inherit !important;
				}

		}

	/* Sidebar . Small screens */

		@media (min-width: 768px) {

			/* Sidebar */
				section.sidebar.closed { width: 46px; }

				section.sidebar header {
					height: 60px;
					background-size: auto 40%;
					background-position: center 15px;
				}

				section.sidebar header .handle,
				section.sidebar.closed header { 
					height: 60px;
					background-size: 32px;
				}

				section.sidebar.closed header .handle {
					background-position: 7px 14px;
				}

				section.sidebar ul.navigation { margin: 24px 20px; }

				section.sidebar.closed ul.navigation { margin: 24px 10px; }

				section.sidebar ul.navigation li { margin-bottom: 24px; }

				section.sidebar ul.navigation li a { padding-top: 6px; }

				section.sidebar ul.navigation li a:before {
					height: 24px;
					width: 24px;
					margin: -6px 6px 0px 0px;
					line-height: 24px;
					font-size: inherit !important;
				}

				section.sidebar ul.navigation li a span {
					font-size: inherit;
				}

		}

	/* Sidebar . Medium screens */

		@media (min-width: 990px) {

			/* Sidebar */

				section.sidebar { width: 300px; }
				section.sidebar.closed { width: 74px; }

				section.sidebar header {
					height: 80px;
					background-size: auto 30%;
					background-position: center 26px;
				}

				section.sidebar header .handle,
				section.sidebar.closed header { 
					height: 80px;
					background-size: 40px;
				}

				section.sidebar.closed header .handle {
					background-position: 17px 20px;
				}

				section.sidebar ul.navigation { margin: 24px 20px; }

				section.sidebar.closed ul.navigation { margin: 24px 20px; }

				section.sidebar ul.navigation li { margin-bottom: 20px; }

				section.sidebar ul.navigation li a { padding-top: 8px; font-size: inherit;}

				section.sidebar ul.navigation li a:before {
					height: 32px;
					width: 32px;
					margin: -8px 10px 0px 0px;
					line-height: 32px;
					font-size: inherit !important;
				}

		}

	/* Sidebar . Large screens */

		@media (min-width: 1200px) {

			/* Sidebar */

				section.sidebar { ;width: 300px; }
				section.sidebar.closed { width: 74px; }

				section.sidebar header {
					height: 120px;
					background-size: auto 30%;
					background-position: center 36px;
				}

				section.sidebar header .handle,
				section.sidebar.closed header { 
					height: 120px;
					background-size: 40px;
				}

				section.sidebar.closed header .handle {
					background-position: 17px 40px;
				}

				section.sidebar ul.navigation { margin: 24px 20px; }

				section.sidebar.closed ul.navigation { margin: 24px 20px; }

				section.sidebar ul.navigation li { margin-bottom: 20px; }

				section.sidebar ul.navigation li a { padding-top: 8px; }

				section.sidebar ul.navigation li a:before {
					height: 32px;
					width: 32px;
					margin: -8px 10px 0px 0px;
					line-height: 32px;
					font-size: inherit !important;
				}

		}

/* Content header */

	.content-header {
		overflow: auto;
	}

	/* Main header . Content */

		.content-header .content {
			overflow: auto;
		}

	/* Main header . Icon */

		.content-header .icon {
			display: block;
			float: left;
			transition: 0.4s all ease-in-out;
		}

		.content-header .icon a,
		.content-header .icon a.button {
			display: block;
			margin: 0px 0px 0px auto;
			transition: 0.4s all ease-in-out;
			font-family: PaperIcons;
			background-color: transparent !important;
		}

	/* Main header . Text */
	
		.content-header h1 {
			font-weight: 300;
		}

		.content-header.view-mode h1 {
			font-size: 8px;
			font-weight: 400;
		}

		.content-header.view-mode h2 {
			font-size: 12px;
			font-weight: 300;
		}

	/* Main header . Extra small screens */

		@media (min-width: 100px) {

				.content-header .content {
					height: 60px;
					padding-left: 10px;
				}

			/* Main header . Icon */

				.content-header .icon {
					height: 60px;
					width: 0px;
				}

				.content-header .icon a,
				.content-header .icon a.button {
					height: 0px;
					width: 0px;
					font-size: 0px !important;
					line-height: 0px !important;
					text-align: center;
				}

			/* Main header . Text */

				.content-header h1 {
					font-size: 20px;
				}

				.content-header.view-mode h1 {
					font-size: 14px;
				}

				.content-header.view-mode h2 {
					font-size: 14px;
					line-height: 16px;
				}

		}

	/* Main header . Small screens */

		@media (min-width: 768px) {

			/* Main header . Content */

				.content-header .content {
					height: 60px;
					padding-left: 20px;
				}

			/* Main header . Icon */

				.content-header .icon {
					height: 60px;
					width: 0px;
				}

				.content-header .icon a,
				.content-header .icon a.button {
					height: 0px;
					width: 0px;
					font-size: 0px !important;
					line-height: 0px !important;
					text-align: center;
				}

			/* Main header . Text */

				.content-header h1 {
					font-size: 24px;
				}

				.content-header.view-mode h1 {
					font-size: 14px;
				}

				.content-header.view-mode h2 {
					font-size: 14px;
					line-height: 16px;
				}

		}

	/* Main header . Medium screens */

		@media (min-width: 990px) {

			/* Main header . Content */

				.content-header .content {
					height: 80px;
					padding-left: 20px;
				}

			/* Main header . Icon */

				.content-header .icon {
					height: 80px;
					width:  52px;
				}

				.content-header .icon a,
				.content-header .icon a.button {
					height: 32px;
					width: 32px;
					margin-top: 20px;
					font-size: 25px !important;
					line-height: 32px !important;
					text-align: center;
				}

			/* Main header . Text */

				.content-header h1 {
					font-size: 30px;
				}

				.content-header.view-mode h1 {
					font-size: 14px;
				}

				.content-header.view-mode h2 {
					font-size: 18px;
					line-height: 20px;
				}

		}

	/* Main header . Large screens */

		@media (min-width: 1200px) {

			/* Main header . Content */

				.content-header .content {
					height: 120px;
					padding-left: 20px;
				}

			/* Main header . Icon */

				.content-header .icon {
					height: 120px;
					width:  70px;
				}

				.content-header .icon a,
				.content-header .icon a.button {
					height: 48px;
					width: 48px;
					margin-top: 32px;
					font-size: 40px !important;
					line-height: 48px !important;
					text-align: center;
				}

			/* Main header . Text */

				.content-header h1 {
					font-size: 40px;
				}

				.content-header.view-mode h1 {
					font-size: 16px;
				}

				.content-header.view-mode h2 {
					font-size: 28px;
					line-height: 32px;
				}

		}

/* Content body */

	.content-body {
		box-sizing: border-box;
		transition: 0.2s all ease-in-out;
	}

	/* Content body . Extra small screens */

		@media (min-width: 100px) {

			.content-body {
				margin: 0px 10px;
			}

		}

	/* Content body . Small screens */

		@media (min-width: 768px) {

			.content-body {
				margin-left: 20px;
				margin-right: 20px;
			}

		}

	/* Content body . Medium screens */

		@media (min-width: 990px) {

			.content-body {
				margin-left: 72px;
				margin-right: 40px;
			}

		}

	/* Content body . Large screens */

		@media (min-width: 1200px) {

			.content-body {
				margin-left: 90px;
				margin-right: 90px;
			}

		}

/* Content footer */

	.content-footer {
		box-sizing: border-box;
		text-align: center;
		transition: 0.2s all ease-in-out;
	}

	/* Content footer . Extra small screens */

		@media (min-width: 100px) {

			.content-footer {
				margin: 0px 10px;
				margin-top: 20px;
			}

		}

	/* Content footer . Small screens */

		@media (min-width: 768px) {

			.content-footer {
				margin-left: 20px;
				margin-right: 20px;
				margin-top: 30px;
			}

		}

	/* Content footer . Medium screens */

		@media (min-width: 990px) {

			.content-footer {
				margin-left: 72px;
				margin-right: 40px;
				margin-top: 40px;
			}

		}

	/* Content footer . Large screens */

		@media (min-width: 1200px) {

			.content-footer {
				margin-left: 90px;
				margin-right: 90px;
				margin-top: 40px;
			}

		}



/* Print */

@media print {

	body {
		font-size: 10pt !important;
	}

	section.sidebar{ display: none !important;}

	.content-header .content {
		height: auto !important;
	}

	.printable {
		display: initial !important;
	}

}