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

	GURU Framework

	Guru · CSS Layout
	Jan . 2022

	© Exactuflow
	http://guru.exactuflow.pt

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

/* Body */

	body {
		margin: 0px;
		padding: 0px;
	}

/* Overlay */
	
	.overlay {
		position: fixed;
		top: 0px;
		left: 0px;
		height: 100%;
		width: 100%;
		background-color: #ffffff;
		opacity: 1;
		z-index: 9999999999;
		transition: 0.2s opacity ease-in-out;
	}

	.overlay.inactive {
		opacity: 0;
	}

/* 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: hidden;
			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(/resources/layout/basekit/assets/media/logo.tutoris.light.png?v=3);
			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(/resources/layout/basekit/assets/media/icon.tutoris.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.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;
			}

		}

/* Resets */

	group, page, container, row, column {
		display: block;
		overflow: auto;
	}


/* Pages */

	/* Pages . Default */

		page {
			box-sizing: border-box;
			min-height: 100vh;
		}

		page.ignore_header {
			padding-top: 0px !important;
		}

	/* Pages . Extra small screens */

		@media (min-width: 100px) {

			page { padding-top: 146px !important; }

			/* Screen size specific overides */
			page.xs-ignore_header { padding-top: 0px !important; }

		}

	/* Pages . Small screens */

		@media (min-width: 768px) {

			page.xs-ignore_header,
			page { padding-top: 96px !important; }

			/* Screen size specific overides */
			page.sm-ignore_header { padding-top: 0px !important; }

		}

	/* Pages . Medium screens */

		@media (min-width: 990px) {

			page.xs-ignore_header,
			page.sm-ignore_header,
			page { padding-top: 96px !important; }

			/* Screen size specific overides */
			page.md-ignore_header { padding-top: 0px !important; }

		}

	/* Pages . Large screens */

		@media (min-width: 1200px) {

			page.xs-ignore_header,
			page.sm-ignore_header,
			page.md-ignore_header,
			page { padding-top: 96px !important; }

			/* Screen size specific overides */
			page.lg-ignore_header { padding-top: 0px !important; }

		}


/* Containers */

	/* Containers . Default */

		container {
			padding-right: 0px;
			padding-left: 0px;
			background-repeat: no-repeat;
		}

	/* Containers . Fluid */

		container.fluid {
			padding-right: 0px;
			padding-left: 0px;
			margin-right: auto;
			margin-left: auto;
		}


/* Positioning */

	/* Positioning . Horizontal Left */

		.h_left {
			float: left;
		}

	/* Positioning . Horizontal Center */

		.h_center {
			display: block !important;
			margin-left: auto;
			margin-right: auto;
		}

	/* Positioning . Horizontal Right */

		.h_right {
			float: right;
		}

	/* Positioning . Vertical Center */

		.v_center,
		.v_bottom {
			display: block;
		}


		@media (min-width: 100px) {

			.xs-h_center {
				display: block !important;
				margin-left: auto !important;
				margin-right: auto !important;
			} 

		}

		@media (min-width: 768px) {

			.xs-h_center {
				display: inherit; !important;
				margin-left: 0px !important;
				margin-right: 0px !important;
			} 

			.sm-h_center {
				display: block !important;
				margin-left: auto !important;
				margin-right: auto !important;
			} 

		}

		@media (min-width: 990px) {

			.xs-h_center,
			.sm-h_center {
				display: inherit !important;
				margin-left: 0px !important;
				margin-right: 0px !important;
			} 

			.md-h_center {
				display: block !important;
				margin-left: auto !important;
				margin-right: auto !important;
			} 

		}

		@media (min-width: 1200px) {

			.xs-h_center,
			.sm-h_center,
			.md-h_center {
				display: inherit !important;
				margin-left: 0px !important;
				margin-right: 0px !important;
			} 

			.lg-h_center {
				display: block !important;
				margin-left: auto !important;
				margin-right: auto !important;
			} 

		}


/* Visibility */

	/* Visibility . Default */

		.visible	{ display: initial; }
		.hidden		{ display: none;}

	/* Visibility . Extra small screens */

		@media (min-width: 100px) {

			/* Visible */
			.xs-visible	{ display: initial !important; }

			/* Hidden */
			.xs-hidden	{ display: none !important;}

		}

	/* Visibility . Small screens */

		@media (min-width: 768px) {

			/* Visible */
			.xs-hidden,
			.sm-visible	{ display: initial !important; }

			/* Hidden */
			.xs-visible,
			.sm-hidden	{ display: none !important;}

		}

	/* Visibility . Medium screens */

		@media (min-width: 990px) {

			/* Visible */
			.xs-hidden,
			.sm-hidden,
			.md-visible	{ display: initial !important; }

			/* Hidden */
			.xs-visible,
			.sm-visible,
			.md-hidden	{ display: none !important;}
			
		}

	/* Visibility . Large screens */

		@media (min-width: 1200px) {

			/* Visible */
			.xs-hidden,
			.sm-hidden,
			.md-hidden,
			.lg-visible	{ display: initial !important; }

			/* Hidden */
			.xs-visible,
			.sm-visible,
			.md-visible,
			.lg-hidden 	{ display: none !important;}

		}


/* Opacity */

	/* Opacity . Default */
	.op_0 	{ opacity: 0; }
	.op_10 	{ opacity: 0.1; }
	.op_20 	{ opacity: 0.2; }
	.op_30 	{ opacity: 0.3; }
	.op_40 	{ opacity: 0.4; }
	.op_50 	{ opacity: 0.5; }
	.op_60 	{ opacity: 0.6; }
	.op_70 	{ opacity: 0.7; }
	.op_80 	{ opacity: 0.8; }
	.op_90 	{ opacity: 0.9; }
	.op_100 { opacity: 1; }

	/* Opacity . Extra small screens */

		@media (min-width: 100px) {

			.xs-op_0 	{ opacity: 0; }
			.xs-op_10 	{ opacity: 0.1; }
			.xs-op_20 	{ opacity: 0.2; }
			.xs-op_30 	{ opacity: 0.3; }
			.xs-op_40 	{ opacity: 0.4; }
			.xs-op_50 	{ opacity: 0.5; }
			.xs-op_60 	{ opacity: 0.6; }
			.xs-op_70 	{ opacity: 0.7; }
			.xs-op_80 	{ opacity: 0.8; }
			.xs-op_90 	{ opacity: 0.9; }
			.xs-op_100 	{ opacity: 1; }

		}

	/* Opacity . Small screens */

		@media (min-width: 768px) {

			.xs-op_0, .xs-op_10, .xs-op_20, .xs-op_30, .xs-op_40, .xs-op_50,
			.xs-op_60, .xs-op_70, .xs-op_80, .xs-op_90, .xs-op_100 { 
				opacity: initial; 
			}

			.sm-op_0 	{ opacity: 0; }
			.sm-op_10 	{ opacity: 0.1; }
			.sm-op_20 	{ opacity: 0.2; }
			.sm-op_30 	{ opacity: 0.3; }
			.sm-op_40 	{ opacity: 0.4; }
			.sm-op_50 	{ opacity: 0.5; }
			.sm-op_60 	{ opacity: 0.6; }
			.sm-op_70 	{ opacity: 0.7; }
			.sm-op_80 	{ opacity: 0.8; }
			.sm-op_90 	{ opacity: 0.9; }
			.sm-op_100 	{ opacity: 1; }

		}

	/* Opacity . Medium screens */

		@media (min-width: 990px) {

			.xs-op_0, .xs-op_10, .xs-op_20, .xs-op_30, .xs-op_40, .xs-op_50,
			.xs-op_60, .xs-op_70, .xs-op_80, .xs-op_90, .xs-op_100,
			.sm-op_0, .sm-op_10, .sm-op_20, .sm-op_30, .sm-op_40, .sm-op_50,
			.sm-op_60, .sm-op_70, .sm-op_80, .sm-op_90, .sm-op_100 { 
				opacity: initial; 
			}

			.md-op_0 	{ opacity: 0; }
			.md-op_10 	{ opacity: 0.1; }
			.md-op_20 	{ opacity: 0.2; }
			.md-op_30 	{ opacity: 0.3; }
			.md-op_40 	{ opacity: 0.4; }
			.md-op_50 	{ opacity: 0.5; }
			.md-op_60 	{ opacity: 0.6; }
			.md-op_70 	{ opacity: 0.7; }
			.md-op_80 	{ opacity: 0.8; }
			.md-op_90 	{ opacity: 0.9; }
			.md-op_100 	{ opacity: 1; }

		}

	/* Opacity . Large screens */

		@media (min-width: 1200px) {

			.xs-op_0, .xs-op_10, .xs-op_20, .xs-op_30, .xs-op_40, .xs-op_50,
			.xs-op_60, .xs-op_70, .xs-op_80, .xs-op_90, .xs-op_100,
			.sm-op_0, .sm-op_10, .sm-op_20, .sm-op_30, .sm-op_40, .sm-op_50,
			.sm-op_60, .sm-op_70, .sm-op_80, .sm-op_90, .sm-op_100,
			.md-op_0, .md-op_10, .md-op_20, .md-op_30, .md-op_40, .md-op_50,
			.md-op_60, .md-op_70, .md-op_80, .md-op_90, .md-op_100 { 
				opacity: initial; 
			}

			.lg-op_0 	{ opacity: 0; }
			.lg-op_10 	{ opacity: 0.1; }
			.lg-op_20 	{ opacity: 0.2; }
			.lg-op_30 	{ opacity: 0.3; }
			.lg-op_40 	{ opacity: 0.4; }
			.lg-op_50 	{ opacity: 0.5; }
			.lg-op_60 	{ opacity: 0.6; }
			.lg-op_70 	{ opacity: 0.7; }
			.lg-op_80 	{ opacity: 0.8; }
			.lg-op_90 	{ opacity: 0.9; }
			.lg-op_100 	{ opacity: 1; }

		}


/* Utils */

	.clear { clear: both; }
	.hide_overflow { overflow: hidden; }
	.hide_whitespace { font-size: 0px; }



/* Print */

	@media print {

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

		section.sidebar{ display: none !important;}

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

		.printable {
			display: initial !important;
		}

	}