/********* Header *********/

.header-alert {
	border: none;
	background: $theme-color-primary;
	color: #fff;
	font-size: 16px;
	margin-bottom: 0;
	@include border-radius(0);
	padding: 0;
	.header-alert-inner {
		position: relative;
	}
	.alert-content {
		text-align: center;
		.inner {
			padding: 15px;
		}
		p {
			margin-bottom: 0;
		}
	}
	a {
		color: rgba(256, 256, 256, 0.8);
	}
	.close {
		position: absolute;
		top: 10px;
		right: 15px;
		color: #fff;
		text-shadow: none;
		@include opacity(0.8);
		&:hover {
			@include opacity(1);
		}
	}
	.alert-cta-btn {
		display:inline-block;
		font-size: 14px;
		color: $theme-text-color-secondary;	
	}
	
}


.page-wrapper {
	position: relative;
	//padding-top: 130px;
	padding-top: 50px;
	
	&.page-wrapper-secure {
		padding-top:0;
	}
	
	&.page-wrapper-maintenance {
		padding-top:60px;
		#region-main {
			text-align: center;
			font-size: 16px;
		}
		
		#region-main>.card {
			min-height: inherit;
			padding: 60px 30px;
		}
		
	}

	
	.pagelayout-login & {
		padding-top: 0;
	}
	
}

.page-header {
	position: fixed;
	//z-index: 2002; /* higher than #nav-drawer (2000) but lower than modal window  */
	z-index: 1030;
	top: 0;
	left: 0;
	width: 100%;
	@include box-shadow(0px 1px 4px 0px rgba(0, 0, 0, 0.1));
    
    /*
	&.page-header-secure {
		position: static;
		z-index: inherit;
	}
	*/

	.top-bar {
		background: $theme-text-color-primary;
		height: 50px;
		//padding-top:10px;
		//padding-bottom: 10px;
		font-size: 14px;
		position: relative;
		z-index: 20;
	}
	.top-bar-inner {
		position: relative;
	}
	
	.social-media-list {
		margin-bottom: 0;
		li {
			margin-right: 5px;
			&:last-child {
				margin-right: 0;
			}
		}
		a {
			color: rgba(256, 256, 256, 0.8);
			font-size: 16px;
			@include border-radius(50%);
			background: rgba(0, 0, 0, 0.3);
			display:inline-block;
			width: 30px;
			height: 30px;
			text-align: center;
			padding-top:4px;
			&:hover {
				color: #fff;
			}
		}
	}
	
	
	
	.drawer-toggle {

		float: left;
		display: inline-block;
		margin-right: 16px;
		position: relative;
		top: 16px;

	}
	
	.drawer-toggle-btn {
		background: none;
		border: none;
		padding: 0;
		display: inline-block;
		&:focus {
			outline: none;
		}
		
		&:hover {
			.icon-bar {
				@include opacity(1);
			}
		}
	}
	
	button.drawer-toggle-btn[aria-expanded="true"] {
		.icon-bar {
				@include opacity(1);
			}
	}

	
	.navbar-toggler {
	    background: red;
	    position: absolute;
	    left: 0;
	    top: 3px;
	    padding: 8px 10px;
	    background: none;
	    border: 1px solid rgba(256, 256, 256, 0.4);
    }

	
	.icon-bar {
		display: block;
        background-color: $theme-text-color-primary;
        height: 2px;
        width: 24px;
        @include opacity(0.9);
        @include border-radius(1px);
        & + .icon-bar {
	        margin-top: 6px;
        }
    }


	
	.secure-login-info {		
		position: absolute;
		right: 15px;
		top: 15px;
		font-size: 14px;
		color: $theme-text-color-secondary;
	}
	
	.boost-navbar {
		@include box-shadow(none);
	    padding: 0;
		height: 50px;
		border: none;
		
		&.fixed-top {
			position: static;
			
		}
		
        .navbar-brand {
	        color: #fff;
	        font-weight: bold;
        }
        
        &.navbar.fixed-top .divider {
	        visibility: hidden;
        }
        
        .editmode-switch-form {
	        label {
		        color: rgba(256, 256, 256, 0.6);
		        
		        &.text-primary {
			        color: #fff !important;
		        }
	        }
	        .custom-control-input:checked~.custom-control-label::before {
		        border-color: $theme-info-color;
		        
	        }
	        .custom-control-input:checked~.custom-control-label::before {
		        background: $theme-info-color;
	        }
	        .custom-switch {
		        top: -1px;
		        
	        }
        }
        
     
    
		.popover-region-container {
	        top: 50px;
	        @include border-radius(4px);
			
			.content-item-container:hover {
				background: $smoky-white;
				color: $theme-text-color-secondary;
			}
			
		}
		
		.popover-region-footer-container {
			@include border-radiuses (0, 4px, 4px, 0);
		}
		
		
		.popover-region-toggle {
			padding: 0;
			color: rgba(256, 256, 256, 0.8);
		}
		
		
		
		
		.popover-region-messages {

			.popover-region-toggle {
				color: rgba(256, 256, 256, 0.8);
				& > .icon {
				//margin-right: 15px;
				color: rgba(256, 256, 256, 0.8);
				}
				&:hover {
					& > .icon {
						color: #fff;
					}
				}
			}
			
		}
		.popover-region-notifications {

			.popover-region-toggle {
				& > .icon {
				//margin-right: 15px;
				color: rgba(256, 256, 256, 0.8);
				}
				&:hover {
					& > .icon {
						color: #fff;
					}
				}
			}
		}
		.popover-region-toggle {
			&:focus {
				outline: none;
			}
			&:before {
				bottom: 0px;
				right: 6px;
				border-bottom-color: white;
				
			}
			&:after {
				display: none;
			}
		}
		
		
		div[data-region="popover-region-messages"] {
			.icon {
				font-size: 18px;
				position: relative;
                top: -2px;
			}
		}
		
		
		.popover-region-header-text {
			font-weight: 500;
			color: $theme-text-color-primary;
		}
		.count-container {
			background: $theme-color-counter;
			line-height:11px;
			top: 9px;
			right: -1px;
			width: 15px;
			height: 15px;
			text-align: center;
			font-weight: 700;
			@include border-radius(50%);
		}
		.usermenu {
			color: rgba(256, 256, 256, 0.5);
			
			.login {
				//position: relative;
				//top: -3px;
			}
			
			.login > a {
				color: rgba(256, 256, 256, 0.8);
				&:hover {
					color: #fff;
				}
			}
			.usertext {
				color: #fff;
				@include truncate(200px);
				    display: inline-block;
				    position: relative;
				    top: 7px;
				.meta {
					font-size: 12px;
					@include opacity(0.8);
					position: relative;
                    top: -8px;
				}
			}
			.dropdown-toggle {
				color: #fff;
				//position: relative;
				//top: 2px;
			}
			.userpicture {
				@include border-radius(50%);
				margin-right: 0;
			}
			.dropdown-menu {
				background: #fff;
				color: $theme-text-color-secondary;
				border: none;
				@include border-radius(4px);
				font-size: 14px;
				top: 10px !important;
				top: 35px!important;
				left: inherit;
				right: 0;


			}
			.dropdown-item {
				color: $theme-text-color-secondary;
				padding: 6px 20px;
				&:hover, &:focus {
					background: $smoky-white;
				}
				.icon {
					color: $theme-text-color-secondary;
				}
			}
		}
		

		
		.simplesearchform {
			.collapse.show, .simplesearchform .collapsing {
				//background: $theme-color-dark-bg;
				height: 50px;
			}

			.form-control {
				height: 38px;
				padding: 3px 6px;
				//border-color: $theme-color-dark-bg;
				border-right: none;
			}
			.input-group-append {
				height: 38px;
				
			}
			.btn {
				padding: 3px 6px;
				padding-top: 5px;
				

			}
			.btn-open {
				
				.icon {
					color: rgba(256, 256, 256, 0.8);
					
				}
				&:hover {
					.icon {
						color: #fff;
					}
				}
			}
			.btn-close {
				//padding-top: 2px;
				right: 1.8rem;
			}
			.btn-submit {
				background: $theme-color-primary;
				border-color: $theme-color-primary;
				@include border-radiuses (4px, 4px, 0, 0);
				.icon {
					color: #fff;
				}
			}
		}
		
		#usernavigation {
			align-items: center;
	
		}
		.divider {
			visibility: hidden;
		}
		
		
	}

}

.page-header .boost-navbar .simplesearchform .collapse.show, .page-header .boost-navbar .simplesearchform .simplesearchform .collapsing {
	background: $theme-text-color-primary;
	width: 100%;
	height: 50px;
}

.page-header .boost-navbar .popover-region-toggle:before {
	top: 20px;
}
.page-header .boost-navbar .popover-region-container {
	top: 30px;
}


.branding {
	background: #fff;
	padding-top: 15px;
	padding-bottom: 15px;
	height: 80px;
	.branding-inner {
		position: relative;
	}
	.site-name {
		color: $theme-text-color-primary;
		font-weight: bold;
		font-size: 24px;
		font-family: $headingfont;
		position: relative;
		top: 7px;
		&.has-logo {
			top: 5px;
		}
		&:hover {
			text-decoration: none;
			color: darken($theme-text-color-primary, 10%);;
		}
	}
	.site-logo {
		    width: auto;
			height: 40px;
	}
	
	.main-nav {
		position: absolute;
		right: 0;
		top: 14px;
		
		li.nav-item {
			font-weight: 500;
			font-size: 14px;
			float: left;
			display: inline-block;
			margin-right: 20px;
			&:last-child {
				margin-right: 0;
			}
		}
		
		.nav-link {
			padding: 0;
			color: $theme-text-color-primary;
			display: inline-block;
		}
		
		.dropdown-item {
			font-size: 14px;
		}
		
		.dropdown-menu {
			@include border-radiuses($topright: 0, $bottomright: 0, $bottomleft: 2px, $topleft: 2px);
	        padding: 0; 
	        border:none;
	        text-transform: none;
	        background: $theme-text-color-primary;     
	
	        a {
	            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	            padding: 8px 20px;
	            color: rgba(256, 256, 256, 0.8); 
	            @include opacity(1);   
	            display: block;            
	            
	            &:hover {
	                background: $theme-text-color-primary;
	                color: #fff;
	            }
	        }
	        .dropdown-divider {
	            display: none;
	        }

	
		}
		
	}
	
}


.navbar-nav .nav-item + .nav-item {
	margin-left: 2rem;
}

.page-header .langmenu {
	color: white;
	a#lang-menu-toggle {
		color: white;
		font-size: 12px;
		font-weight: normal;
	}
	#lang-action-menu {
		left: -2rem;
		.dropdown-item {
			padding-left: 30px !important;
			font-size: 13px;
		}
	}
	
}



/* Drawer */
#nav-drawer {
	//top: 50px;
	//height: calc(100% - 50px);
	font-size: 14px;
	padding-top: 30px;
	padding: 0;
	background: #fff;
    @include box-shadow(1px 0px 5px 0px rgba(0, 0, 0, 0.1));
	.list-group-item {
		background: none;
		border: none;
		color: $theme-text-color-secondary;
		&:hover {
			color: $theme-text-color-primary;
			background: $smoky-white;
		}
	}
	.list-group {
		&:last-child {
			margin-top: 0 !important;
		}
		& + .list-group {
			border-top: 1px solid $theme-divider-color;
		}
		
	}
	
	.list-group-item {
		&.active {
			color: #fff;
			font-weight: 500;
			background: $theme-color-primary;
			@include border-radius(0);
			.media-left {
				color: #fff;
			}

		}
		&:last-child {
			@include border-radius(0);
		}
	}

}

.page-header .dropdown-toggle::after {
	vertical-align: 0.15em;
}



/* New feature - Mega Dropdown */
.top-bar {
	.mega-dropdown {
		display: inline-block;
	}
	
	.mega-dropdown-name {
		.text_to_html {
			display: inline;
		}
	}
	
	
	.mega-dropdown-menu  {
		 width: max-content;
		 margin: 0;
		 .nav-link {
			 color: $theme-text-color-secondary;
			 padding: 0;
			 margin-bottom: 0.875rem;
			 .text_to_html {
				 display: inline;
			 }
			 &:hover {
				 color: $theme-color-primary;
			 }
		 }
	}

	.mega-dropdown-toggle {
		position: relative;
		top: -1px;
		display: inline-block;
		color: #fff;
		font-weight: bold;
		background: rgba(0, 0, 0, 0.4); 
		padding: 5px 8px;
		display: inline-block;
		@include border-radius(4px);
		
		@include opacity(0.8);
		&:hover {
			text-decoration: none;
			@include opacity(1);
		}
		
	}
	
	a.mega-dropdown-toggle[aria-expanded="true"] {
		@include opacity(1);
	}

	
	.mega-dropdown-heading {
		font-size: 1.25rem;
	}
	.columns-2 {
		-webkit-column-count: 2;
	    -moz-column-count: 2;
	    column-count: 2;
	    -webkit-column-gap: 3rem;
	    -moz-column-gap: 3rem;
	    column-gap: 3rem;
	    width: 100%;
	}
	
	.columns-3 {
		-webkit-column-count: 3;
	    -moz-column-count: 3;
	    column-count: 3;
	    -webkit-column-gap: 3rem;
	    -moz-column-gap: 3rem;
	    column-gap: 3rem;
	    width: 100%;
	}
	
	.columns-4 {
		-webkit-column-count: 4;
	    -moz-column-count: 4;
	    column-count: 4;
	    -webkit-column-gap: 3rem;
	    -moz-column-gap: 3rem;
	    column-gap: 3rem;
	    width: 100%;
	}
	
}



/* Moodle 3.10+ */
.message-app {
	.simplesearchform {
		.btn-submit {
			height: 38px;
			padding-top: 6px;
			background: $theme-text-color-primary;
			.icon {
				color: #fff;
			}
		}
	}
}

/* Moodle 3.10+ (add .navbar class hook for help plugin to work) */
.page-header.navbar {
	max-height: inherit;
	padding: 0;
	display: block;
	.container-fluid {
		display: block;
	}
}

.page-header .utilities {
	.local-edusupport-menu {
		
		.dropdown-toggle {
			color: rgba(256, 256, 256, 0.8);
			padding: 0;
			&:after {
				margin-right: 1rem;
				margin-left: 0;
			}
			&:hover {
				color: #fff;
			}
		}
	}
}


// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {

	/* Make dropdown menu drop on hover */
	.branding .main-nav .dropdown > .dropdown-menu {
		margin: 0; //must remove margin
	}
	
	.branding .main-nav .dropdown:hover > .dropdown-menu {
	    display: block;
	    right: 0;
	    left: auto !important;
	    
	}
	
	.branding .main-nav  .dropdown > .dropdown-toggle:active {
	    /*Without this, clicking will make it sticky*/
        pointer-events: none;
	}
	

}




/* Small devices (phones, less than 768px) */
@media (max-width: 767.98px)  { 
	
	.top-bar {
		.mobile-column-1 {
			-webkit-column-count: 1 !important;
	        -moz-column-count: 1 !important;
	        column-count: 1 !important;
		}
	}
	.page-header {
		.divider {
			display: none;
		}
	}

}

// Medium devices (tablets, less than 992px)
@media (max-width: 991.98px) { 
    .top-bar {
		.mega-dropdown {
			position: static;
		}
		.mega-dropdown-menu {
			max-width: 100%;
		}

	}

}

//Moodle 3.10+
@media (max-width: 991.98px) {
	.simplesearchform .collapse.show, .simplesearchform .collapsing {
	    position: absolute;
	    left: 0;
	    top: -4px;
	    width: 100%;
	    display: flex;
	    background-color: $theme-text-color-primary;
	    z-index: 1060;
	    height: 42px;
	}
}


