/* 	[ COPYRIGHT CONTEGRO  - Intelligent Website Content Management ]   */
/* 	[ http://www.contegro.com ]   */

  

/* -----[ TEMPLATE ]-------------------------------------------------------------------------- */

/*  
	Change Class Selectors and ID Selectors to reflect your Design as required.
	The aim of this file is create the 'Template' for your design.
	Such as: backgrounds, colours, borders, margins, padding.
	Alter the Property and Value to reflect your design as required.

	--Layouts
		The structure below is compliant with the current W3C standards. 
		The layout technique that is used is will allow for a liquid centre and fixed sides. 
		1.	Layout 1 - 3 column layout
		2.	Layout 2 - 2 column layout (left column #cLS)
		3.	Layout 3 - 2 column layout (right column #cRS)
		4.	Layout 4 - 1 column layout */

/* -----[ Main structure CSS]--------------------------------------------------------------------- */

* {
	-moz-outline-style: none;
	outline-syle: none;
	outline-width: 0px;
	outline-color: -moz-use-text-color;
	margin: 0px;
	box-sizing: border-box;

	font-family: 'open-sans', 'Open Sans', sans-serif;
	font-weight: 400;	
}

html, body {
	width: 100%;
	height: 100%;

}

	
body {
	background: #EFEFEF;
	font-size: 14px;
	line-height: 1.42857143;
	color: #333;
	overflow-y: scroll;
	overflow-x: hidden;
}
body.showMenu {
	overflow-y: hidden;
}

.sidebar {
	width: 103px;
	position: fixed;
	top: 0;
	left: 0;
	height: 65px;
	bottom: 0;
	z-index: 3;
	height: 65px;
	transition: height 0.01s 0.25s, width 0.25s;
}
	body.noMenuAnimation .sidebar {
		transition: none !important;
	}

	body.FullscreenSlidePreview .sidebar { z-index: 1; }
	body.showMenu .sidebar {
		height: calc(100% + 65px);
		width: 280px;
	}

	.sidebar-wrapper {
		height: 65px;
		transition: height 0.01s 0.25s;
	}
		body.showMenu .sidebar-wrapper {
			height: calc(100% + 65px);
			transition: none;
		}
	
	/*
	body:not(.showMenu) .sidebar-wrapper { height: 65px; }
	body.showMenu       .sidebar-wrapper { height: calc(100% + 65px); }
	*/

	body.Contegro_ContentEditorBody  .sidebar { position: absolute; }

	.sidebar .logo {
		padding: 0 15px;
		position: relative;
		z-index: 4;
		height: 65px;	
		background-color: white !important;
	}
		.sidebar .logo > div { height: 100%; }

		.navbar-toggle {
			width: 42px !important;
			height: 42px !important;
			min-width: 42px !important;
			background: transparent;
			top: 11px;
			left: 23px;
			border: none;
			margin-top: constant(safe-area-inset-top);
			margin-top:      env(safe-area-inset-top);
			position: fixed;
			z-index: 4;
			transition: left 0.25s;
		}
			body.showMenu .navbar-toggle {
				left: 215px;
			}

			body.FullscreenSlidePreview .navbar-toggle { z-index: 1; }
			
			.navbar-toggle .icon-bar {
				position: absolute;
				display: block;
				width: 17px;
				height: 2px;
				background: #969696;
				left: 12px;
				top: 20px;
				
				transition: margin 0.10s 0.15s, transform 0.10s;
			}
				.navbar-toggle .icon-bar:nth-child(2) { margin-top: -6px; }
				.navbar-toggle .icon-bar:nth-child(3) { }
				.navbar-toggle .icon-bar:nth-child(4) { margin-top:  6px; }

				.navbar-toggle:active .icon-bar:nth-child(2) { margin-top: -5px; }
				.navbar-toggle:active .icon-bar:nth-child(3) { }
				.navbar-toggle:active .icon-bar:nth-child(4) { margin-top:  5px; }

				.navbar-toggle .icon-bar:nth-child(3):before ,
				.navbar-toggle .icon-bar:nth-child(3):after {
					position: absolute;
					display: block;
					width: 9px;
					height: 2px;
					background: #969696;
					content: "";
					transition: transform 0.1s, left 0.10s;
				}
					.navbar-toggle .icon-bar:nth-child(3):before {
						transform: rotate(-45deg);
						left: 21px;
						top: 3px;
					}
					.navbar-toggle .icon-bar:nth-child(3):after {
						transform: rotate( 45deg);
						left: 21px;
						top: -3px;
					}

					body.showMenu .navbar-toggle .icon-bar:nth-child(3):before {
						transform: rotate( 45deg);
						left: -13px;
					}
					body.showMenu .navbar-toggle .icon-bar:nth-child(3):after {
						transform: rotate( -45deg);
						left: -13px;
					}


				body.showMenu .navbar-toggle .icon-bar { transition: margin 0.10s, transform 0.10s 0.15s; }

				
				/*
				body.showMenu .navbar-toggle .icon-bar:nth-child(2) { margin-top: 0px; transform: rotate( 45deg); }
				body.showMenu .navbar-toggle .icon-bar:nth-child(3) {                  transform: rotate( 45deg); }
				body.showMenu .navbar-toggle .icon-bar:nth-child(4) { margin-top: 0px; transform: rotate(-45deg); }
				*/


		.sidebar .logo .Banner {
			display: block;
			position: absolute;
			top: 50%;
			left: 60px;
			transform: translateY(-50%);		
			left: -35px;
			opacity: 0;
			transition: opacity 0.25s, left 0.25s;
		}
			body.showMenu .sidebar .logo .Banner {
				opacity: 1;
				transition-delay: 0.3s;
				left: 7px;
			}
			@media (max-width: 992px) {
				body.showMenu .sidebar .logo .Banner {
					left: 105px;
				}
			}
		
		.logo img{
			max-height: 34px;
			max-width: 180px;
			margin: 0;
		}
		
	.sidebar .nav {
		height: calc( 100vh - 65px );
		overflow-y: scroll;
		overflow-x: hidden;
		position: relative;
		left: -100%;
		transition: left 0.25s;	
		background: white;
		border-right: 1px #ECECEC solid;
	}
		body.showMenu .sidebar .nav {
			left: 0;
		}	
	
	.sidebar .nav .Banner img{
		max-width:110px;
		margin: 20px auto;
	}		
		

#navigationTooltip {
	background: #3A3A3A;
	position: absolute;
	display: none;
	color: white;
	padding: .5em;
	border-radius: .5em;
	font-size: 14px;
	white-space: nowrap;
	z-index: 500;
	margin: -1em 0 0 1em;
}
	body.showMenu #navigationTooltip {
		display: none !important;
	}

	@media (max-width: 992px) {
		#navigationTooltip {
			display: none !important;
		}		
	}

.main-panel {
	float: none;
	width: 100%;
	min-height: 100vh;
}
	.main-panel:after {
		content: "";
		display: table;
		clear: both;
	}


	.navbar {
		border-bottom: 1px solid rgba(0, 0, 0, 0.1);
		color: #ffffff;
		min-height: 65px;
		position: relative;
    	padding: 20px 0 16px 103px;
		z-index: 2;
		transition: padding 0.25s;
	}
		body.showMenu .navbar {
	    	padding-left: 280px;
		}

		body.FullscreenSlidePreview .navbar { z-index: 0; }
	/*
	.navbar-toggle {
		display: none;
	}
	*/

	.navbar + .content {
		padding: 30px;
		min-height: calc(100vh - 176px);
		max-width: 1400px;
		margin: 0 auto;
	}
		.contegro_mobile .navbar + .content {
			padding: 30px max(30px, constant(safe-area-inset-right) ) max(30px, constant(safe-area-inset-bottom) ) max(30px, constant(safe-area-inset-left) );
			padding: 30px max(30px,      env(safe-area-inset-right) ) max(30px,      env(safe-area-inset-bottom) ) max(30px,      env(safe-area-inset-left) );
		}

	.footer {
/*		border-top: 1px solid #e7e7e7;
		background-color: #FFFFFF;
		color: #797979;
		padding: 0 30px;
		text-align: left;
*/		height: 50px;
	}
		.footer p {
			margin: 0;
			padding: 0;
			line-height: 50px;
			font-size: 12px;
        display: none;
		}



/* login page */

	.full-page.login-page {
		height: 100vh;
	}
	.login-page .card{
		overflow:hidden;
		padding: 175px 42px 0px;
	}
	
		.login-page .card p,
		.login-page .card .LogoutText{
			margin: 0 0 10px 0;
			position: relative;
		}
		.login-page .card .LogoutText {
			margin-top: 20px;
		}
			.login-page .card .LogoutText span{
				display:block;
				color:#262626;
				text-transform:none;
				font-weight:600;
				margin-top: 10px;
			}

	.login-page a.HomeButton {
		display: inline-block;
		padding: 12px 29px;
		border: 0;
		border-radius: 2px;
		text-decoration: none;
		font-size: 14px;
		min-width: 125px;
		margin: 0 5px 5px 5px;
	}

	
	.login-page > .content {
		width: 463px;
		margin: 0 auto 20px auto;
		background: white;
	    border-radius: 0 0 3px 3px;
		position: relative;
		top: 60px;	
	}
		.login-page > .content > .container {
			background: url('/Templates/_images/login-bg-header.png') top left no-repeat;
		}

		.login-page .HTMLContent p {
			text-align: center;
		}
			.login-page .HTMLContent p a + a {
				margin-left: 16px;
			}
			.login-page .HTMLContent p + p a {
				font-size: 12px;
				color: #a0a0a0;
				text-decoration: underline;
				text-transform: uppercase;			
			}		
	
	.HomeFooter{
		margin: 20px 0 30px 0;
		text-align: center;
	}
		.HomeFooter a{
			display: inline-block;
			width: 115px;
			height: 34px;
			margin: 0;
			text-align: center;
			font-size: 12px;
			text-decoration: none;
			line-height: 34px;
			background: transparent;
		}
		.HomeFooter a        ,
		.HomeFooter a:active ,
		.HomeFooter a:focus  ,
		.HomeFooter a:hover { color: white; }

			.HomeFooter a + a { margin-left: 7px; }


			.HomeFooter a img { vertical-align: top; }

			.HomeFooter a.AdminLogin    { background: #1E6EB5; }	
			.HomeFooter a.PrivacyPolicy { background: #A0A0A0; }	

			.HomeFooter a:nth-child(1) img ,
			.HomeFooter a:nth-child(3) img {
			}
	
		.HomeFooter img{
			max-width: 126px;
		}
		
		.LoginBorder input[type=image] ,
		.Logout .LogoutButton  input[type=image],
		.ProfileManager input[type=image].EnquiryButton {
			border-radius: 2px;
			background-repeat: no-repeat;
			background-position: center center;
			width: 125px;
			height: 38px;
		}
		.LoginBorder input[type=image]                                  { background-image: url('/Templates/_images/button_login.png'); }
		.Logout .LogoutButton  input[type=image]                 {background-image: url('/Templates/_images/button_goto_logout.png'); }
		.ProfileManager input[type=image].EnquiryButton {background-image: url('/Templates/_images/button-save.png'); }
		
		.LoginBorder tr:nth-last-child(1) td ,
		.LoginBorder tr:nth-last-child(2) td {
			text-align: center;
		}

		.ForgetLoginBorder .LoginBorder tr:nth-last-child(1) td ,
		.ForgetLoginBorder .LoginBorder tr:nth-last-child(2) td {
			text-align: left;
		}
		

/* form fields */

	.content  input[type=text]:not(.MuiInputBase-input):not(.input),
	.content  input[type=password],
	.content  input[type=date],
	.content  input[type=time],
	.content  html body .riSingle .riTextBox[type="text"],
	.content  .EventsForm select,
	.content  textarea,
	.content  select {
	  background-color: #FFFFFF;
	  border: 1px solid #e2e2e2;
	  box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
	  border-radius: 2px;
	  color: #565656;
	  padding: 8px 12px;
	  /* height: 13px; */
	  /* min-width: 55px; */
	  font-size:  16px;
	  font-weight:600;
	  height: 46px;
	  /* margin:0 0 0px 0; */
	  -webkit-appearance: none;
	}
	.RadUpload .ruFileWrap{
		 height: 31px;
		 cursor: pointer;
	}
	.content select::-ms-expand {
		display: none;
	}
	.content  select,
	.content  .EventsForm select,
	.content  select option{
		-webkit-appearance: none;
		background: #ffffff url('/Templates/_images/downArrow.png') no-repeat right 7px center;
		background-size: 12px;
		font-size: 16px;
		padding-right: 25px;
		font-weight: 600;
		width: auto;
		padding: 9px 30px 9px 10px;
		border: 1px solid #e2e2e2;
		box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
		/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(63, 63, 68, 0.1); */
		background-color: #FFFFFF;
		min-height: 46px;
	}
	.content input[type=text]:not(.MuiInputBase-input):not(.input):focus,
	.content  input[type=password]:focus,
	.content  input[type=date]:focus,
	.content  input[type=time]:focus,
	.content  html body .riSingle .riTextBox[type="text"]:focus,
	.content  .EventsForm select :focus,
	.content  textarea:focus {
	  background-color: #FFFFFF;
	  border: 1px solid #AAAAAA;
	  -webkit-box-shadow: none;
	  box-shadow: none;
	  outline: 0 !important;
	  color: #333333;
	}
	input[type=file]::-webkit-file-upload-button {
			visibility: hidden;
		}
	
	
		.RadAsyncUpload span.ruFileWrap label:last-child{
			display:block !important
		}
		.RadAsyncUpload span.ruFileWrap label:last-child:before {
			content: 'Upload';
			display: block;
			background: #1668b2;
			color:#ffffff;
			border-radius: 2px;
			outline: none;
			white-space: nowrap;
			-webkit-user-select: none;
			cursor: pointer;
			font-weight: 700;
			width: 80px;
			height: 30px;
			text-align:center;
			padding: 10px 0;
			position:  absolute;
			top: 0;
			z-index: 40;
			padding: 0;
			line-height: 30px;
			right: 0;
			pointer-events: none;
		}
		input[type=file]:hover::before {
			
		}
	
		input[type=file]:active::before {
			
		}
		.RadTreeView_Default .rtPlus, .RadTreeView_Default .rtMinus {
			background: #005daa;
			width: 18px;
			height: 18px;
			margin: 0px 1px 0 -18px;
			position: relative;
	 }
		.RadTreeView_Default .rtPlus:after,
		.RadTreeView_Default .rtMinus:after{
			font-family: 'Font Awesome 5 Free';
			content: "\f067";
			font-weight:bold;
			position:absolute;
			top: 1px;
			left: 0;
			color: #ffffff;
			width: 18px;
			height: 18px;
			font-size: 15px;
			text-align: center;
			line-height: 18px;
			/* background: #ff0000; */
		}
	
	
		.RadTreeView_Default .rtMinus:after{
			content: "\f068";
		}
	.RadTreeView .rtChk,
	.BlogCategoryCheckboxes input[type="checkbox"]{
		width: 130px !important;
		height: 20px !important;
		position: absolute;
		/* left: -9999px; */
		opacity: 0;
		margin: -2px 0 0 1px;
		z-index: 5;
		-webkit-appearance: none;
		-moz-appearance:    none;
		appearance:         none;
		outline: 0;
	}
	
	.RadTreeView .rtChk + span,
	.BlogCategoryCheckboxes input[type="checkbox"] + label{
	  position: relative;
	  cursor: pointer;
	  padding: 4px 3px 3px 35px !important;
	  background:none !important;
	  color:#000000 !important;
	  border:none !important
	}
	
	
	.RadTreeView .rtChk[type="checkbox"]:not(:checked) + span:before,
	.RadTreeView .rtChk[type="checkbox"]:checked + span:before,
	.BlogCategoryCheckboxes input[type="checkbox"]:not(:checked) + label:before,
	.BlogCategoryCheckboxes input[type="checkbox"]:checked + label:before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 22px;
		height: 22px;
		border: 1px solid #ccc;
		background: #fff;
		border-radius: 4px;
		border: 1px solid #e2e2e2;
		box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
		/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(63, 63, 68, 0.1); */
		background-color: #FFFFFF;
	}
	.RadTreeView .rtChk + span:after,
	.RadTreeView .rtChk:checked + span:after,
	.BlogCategoryCheckboxes input[type="checkbox"] + label:after,
	.BlogCategoryCheckboxes input[type="checkbox"]  + label:after {
		font-family: 'Font Awesome 5 Free';
		font-weight: bold;
		content: "\f00c";
	  position: absolute;
	  top: 1px; left: 1px;
	  font-size: 1.3em;
	  line-height: 20px;
	  width:20px;
	  text-align:center;
	  color: #005daa;
	  transition: all .2s;
	}
	
	/* checked mark aspect changes */
	.RadTreeView .rtChk + span:after,
	.BlogCategoryCheckboxes input[type="checkbox"] + label:after {
	  opacity: 0;
	  transform: scale(0);
	}
	.RadTreeView .rtChk:checked + span:after,
	.BlogCategoryCheckboxes input[type="checkbox"]:checked + label:after{
	  opacity: 1 !important;
	  transform: scale(1) !important;
	}
	.RadTreeView_Default .rtHover .rtIn{
		background:none !important;
		border:none;
		color: #000000;
		padding: 4px 3px 3px;
	}
	#CategoryScrollDiv{
		height:auto !important;
		background: #ffffff;
		border: 1px solid #E3E3E3;
		width: 575px;
		max-width: 100%;
		border-radius: 2px;
		padding: 1em;
		padding: 10px 25px;
		border: 1px solid #e2e2e2;
		box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
		/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(63, 63, 68, 0.1); */
		background-color: #FFFFFF;
	}
	.LoginBorder input[type=text]:not(.MuiInputBase-input),
	input[type=password]{
		margin:0 0 15px 0;
		width: 100%;
	}
	label {
		margin-bottom: 0;
	}
	.EventsForm label +  select,
	.EventsForm label +  select + select{
		max-width: 60px;
		/* padding: 0 !important; */
		text-align: center;
	}
	.EventsForm label +  select{
		display:inline-block;
	}
	input[type=checkbox]:not(.MuiSwitch-input) { 
	  cursor: pointer;
	  -webkit-appearance: none;
	  -moz-appearance: none;
	  appearance: none;
	  outline: 0
	}
	input[type=checkbox]:not(.MuiSwitch-input):before{
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		width: 22px;
		height: 22px;
		border: 1px solid #ccc;
		background: #fff;
		border-radius: 4px;
		border: 1px solid #e2e2e2;
		box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
		/* box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(63, 63, 68, 0.1); */
		background-color: #FFFFFF;
	}
	input[type="checkbox"]:after {
	  opacity: 0;
	  transform: scale(0);
	}
	input[type=checkbox]:not(.MuiSwitch-input):after {
		font-family: 'Font Awesome 5 Free';
		font-weight:bold;
		content: "\f00c";
		position: absolute;
		top: 1px;
		left: 1px;
		font-size: 14px;
		line-height: 20px;
		width: 20px;
		text-align: center;
		color: #005daa;
		transition: all .2s;
	}
	.contegro_ios input[type=checkbox]:not(.MuiSwitch-input):before{
		top: -3px;
		left: -2px;
	}
	.contegro_ios input[type=checkbox]:not(.MuiSwitch-input):after{
		top: -1px;
		left: 0px;
	}
	
	.MuiTreeView-root .MuiIconButton-label input[type=checkbox] {
		width: initial !important;
	}
	input[type=checkbox]:not(.MuiSwitch-input):checked:after {
		opacity: 1 !important;
		transform: scale(1) !important;
	}
	input[type=checkbox]:not(.MuiSwitch-input), input[type=radio] {
		margin: 0px 0 0;
		margin-top: 1px\9;
		line-height: normal;
		width: 20px !important;
		height: 20px !important;
		position: relative;
	}
	input[type=radio] {
	position: absolute;
	left: -9999px;
	}
	input[type=radio] + label{
		margin: 0 !important;
		display: inline-block;
		padding: 8px 25px;
		text-align: center;
		cursor: pointer;
		border: 1px solid transparent;
		border-bottom: 1px solid #ffffff;
		/* border-radius: 4px 4px 0 0; */
		font-weight: 600;
		z-index: 2;
		background-color: #e4ebef;
		color: #a0a0a0;
		border: 1px solid #d6d6d6;
		position:relative;
		font-size: 12px;
	}
	input[type=radio]:checked + label{
		background-color: #ffffff;
	}
	input[type=radio]:checked + label:after {
		content: '';
		position: absolute;
		width: calc(100% +  2px);
		height: 3px;
		bottom: -1px;
		left: -1px;
		background: #444444;
	}
		.EnquiryLabelGroup textarea{
			min-height:150px;
		}
	 .EnquiryLabelGroup textarea,
	 .EnquiryLabelGroup input[type="text"]{
			width:100%;
			border: 1px solid #e2e2e2;
			box-shadow: 0px 2px 2px 0px rgba(40, 40, 40, 0.1);
		}
	
	
	.input-button-size-2{
		margin-left:-48px !important;
		margin-right: 20px !important
	}

.HTMLContent a.WebViewFullScreen {
	padding: 10px 29px;
	border: 0;
	border-radius: 2px;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
}

@media (min-width: 1240px) {
	/* for wide screens, show the menu by default, and hide the show/hide menu button */
	.wrapper { position: relative; }
	
	.navbar + .content {
		width: 1280px;
		max-width: calc(100vw - 260px);
		padding-left: 0;
		padding-right: 0;
		transition: padding-left 0.25s;
	}
		body.showMenu .navbar + .content {
			padding-left: 280px;
		}

	body.IsEditPlaylistReactComp .navbar + .content {
		max-width: inherit !important;
		width: auto;
	}

	.navbar-toggle {
		/* display: none; */
	}
	

	.sidebar ,
	.sidebar-wrapper {
		height: auto;
		bottom: 0;
		background: white !important;
	}	
		.sidebar .nav {
			left: 0;
			transition: none;
		}
			.sidebar:after {
				content: '';
				display: block;
				width: 1px;
				position: absolute;
				top: 65px;
				right: 0;
				bottom: 0;
				background: #ececec;
			}

	
	body.showMenu { overflow-y: auto; }
}



@media (max-width: 992px) {

	.logo .vibev2menutoggle {
		top: 0;
		left: 0;
	}

	.sidebar {
		width: 100%;
		z-index: 250;
	}
		body.showMenu .sidebar { left: 0; }
		
		.navbar-toggle { z-index: 255; }
		body.FullscreenSlidePreview .navbar-toggle { z-index: 1; }

		.navbar-toggle.portal-navbar-toggle .icon-bar:nth-child(2):before {
			content: '';
			position: absolute;
			top: -13px;
			left: -13px;
			width: 50px;
			height: 40px;
			border-radius: 7px;
			background: #e1251b;
			z-index: -1;
		}

		.navbar-toggle .icon-bar,
		.navbar-toggle .icon-bar:nth-child(3):before,
		.navbar-toggle .icon-bar:nth-child(3):after	{
			background: white;
		}
		

		body.showMenu .navbar-toggle .icon-bar,
		body.showMenu .navbar-toggle .icon-bar:nth-child(3):before,
		body.showMenu .navbar-toggle .icon-bar:nth-child(3):after	{
			background: white;
		}

		body.showMenu .navbar-header .CustomCode ,
		body.showMenu .navbar-header .Breadcrumb {
			display: none;
		}

		
	.sidebar .logo,
	.bootstrap-navbar .logo {
		background: transparent !important;	

	    padding: 10px 15px;
	    padding: calc( 10px + constant(safe-area-inset-top) ) 15px 10px 15px;
	    padding: calc( 10px +      env(safe-area-inset-top) ) 15px 10px 15px;

	    height: 60px;
		height: calc( 60px + constant(safe-area-inset-top) );
		height: calc( 60px +      env(safe-area-inset-top) );
	}		
		body.showMenu .sidebar .logo,
		body.showMenu .bootstrap-navbar .logo {
			background: white !important;	
		}

	.sidebar .nav {
		height: calc(100vh - 60px);
	}	

	.main-panel {
		float: none;
		width: 100%;
	}
		.main-panel > .content {
			transition: transform 0.5s;
			min-height: calc(100vh - 121px)
		}
		/*
			body.showMenu .main-panel > .content { transform: translateX(-100px); }
		*/


	.navbar {
		min-height: 60px;
		min-height: calc( 60px + constant(safe-area-inset-top) ); /* add the save top area for the iPhone X notch (pre iOS 11.2) */
		min-height: calc( 60px +      env(safe-area-inset-top) ); /* add the save top area for the iPhone X notch */
		padding: 18px 0 0 0;
		padding: calc( 18px + constant(safe-area-inset-top) ) 0 0 0;
		padding: calc( 18px +      env(safe-area-inset-top) ) 0 0 0;
	}

	/*
	.navbar-toggle {
		display: block;
		position: absolute;
		
		top: 0;
		top: constant(safe-area-inset-top);
		top:      env(safe-area-inset-top);
		
		left: 0;
		left: constant(safe-area-inset-left);
		left:      env(safe-area-inset-left);
		z-index: 500;
		width: 60px;
		height: 60px;
		background: transparent;
		border: none;
		cursor: pointer;
	}	
		.navbar-toggle .icon-bar {
			display: block;
			position: relative;
			background: #fff;
			width: 24px;
			height: 2px;
			border-radius: 1px;
			margin: 0 auto;			
			transition: all 0.5s 0.15s;
		}
			.navbar-toggle .icon-bar:nth-child(2) {	top: -4px;	}
			.navbar-toggle .icon-bar:nth-child(3) {	top:  0px;	}
			.navbar-toggle .icon-bar:nth-child(4) {	top:  4px;	}

	body.showMenu .navbar-toggle .icon-bar:nth-child(2) { top: 2px; transform: rotate(-225deg); }
	body.showMenu .navbar-toggle .icon-bar:nth-child(3) { top: 0; transform: scale(2); opacity: 0; transition-duration: 0.75s; }
	body.showMenu .navbar-toggle .icon-bar:nth-child(4) { top: -2px; transform: rotate(225deg); }
		*/

}

@media (max-width: 700px) {

	.sidebar .logo, .bootstrap-navbar .logo { display: none; }
	.sidebar .nav {
		top: 60px;
		margin-top: constant(safe-area-inset-top);
		margin-top:      env(safe-area-inset-top);
	}
}

@media screen and (max-width: 670px) {
	/*
	.content  select,
	.content  .EventsForm select {
		padding-right: 70px;
	}
	*/

	.logo img {
		margin: 0 0 0 50px;
	}
	.navbar-default:before{
		display:none
	}
	body .stickyFooter{
		position:fixed;
		width:100%;

		height: 50px;

		z-index: 200;
		bottom: 0;
		background: #ffffff;
		padding: 5px 0 0 0 !important;
		padding: 5px constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left) !important;
		padding: 5px      env(safe-area-inset-right)      env(safe-area-inset-bottom)      env(safe-area-inset-left) !important;
		margin: 0;
		/* border-top: 1px solid #e3e3e3; */
		-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
		-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
		box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.5);
	}
	.stickyFooter.InformationBarEdit .EnquiryButton a,
	.ManageTopicEdit .FormSubmit a{
			width: 48%;
			margin: 0 0 0 4px;
			display: block;
			float: left;
	}

	.content  input[type=text]:not(.MuiInputBase-input),
	.content  input[type=password],
	.content  input[type=date],
	.content  input[type=time],
	.content  html body .riSingle .riTextBox[type="text"],
	.content  .EventsForm select,
	.content  textarea,
	.content  select {
		margin-bottom:4px;
	}
}

@media (max-width: 600px) {
}

@media (max-width: 550px) {
	.sidebar .nav {
		height: calc(100vh - 60px);
		overflow-y: scroll;
	}
	.sidebar .nav .Navigation {
		width: 100%;
		float: none;
	}
}	

@media (max-width: 520px) {

	.login-page > .content {
		width: auto;
		margin: 20px;
		top: 0;
	}
	.login-page > .content {
	}

	.login-page > .content > .container { background-size: contain; }
	
	.login-page .card { padding: 36vw 30px 0px; }

}
@media (max-width: 500px) {

	.navbar + .content {
		padding: 15px;
	}
}

@media (max-width: 470px) {

	.LoginBorder input[type=text] ,
	.LoginBorder input[type=password] {
		font-size: 15px !important;
	}

	.HomeFooter { margin-top: 40px; }

	.HomeFooter a {
		display: block;
		transform: none;
	}
		.HomeFooter a ,
		.HomeFooter a + a {
			margin: 20px auto 0 auto;
		}
}	

@media (max-width: 350px) {

	.login-page .card {
    	padding: 33vw 20px 0px;
	}

	.LoginBorder input[type=text] ,
	.LoginBorder input[type=password] {
		font-size: 14px !important;
	}
}

/* -----[ Clearings ]-------------------------------------------------------------------------- */

.clearLeft,
.clear
{
	height: 0;
	font-size: 0;
	line-height: 0;
}
.clearLeft {
	clear: left;
}
.clear {
	clear: both;
}

/* -----[ Browser Specific Classes ]----------------------------------------------------------- */

/*
	Contegro will add several class names to the <form> tag surrounding the page depending on
	what browser the site is being viewed with. This can be used to make small style changes which
	only affect specific browsers, or even specific browser versions.

	These include the browser name, for example (but not limited to)...
*/
.contegro_chrome {}
.contegro_firefox {}
.contegro_ie {}
.contegro_safari {}
/*
	... the browser version, for example (but not limited to)...
*/
.contegro_ie6 {}
.contegro_ie7 {}
.contegro_ie8 {}
.contegro_ie9 {}
.contegro_firefox4 {}
.contegro_firefox5 {}
/*
	... and mobile information, for example ...
*/
.contegro_mobile {}
.contegro_tablet {}
.contegro_ipad {}
.contegro_ios {}
.contegro_android {}
.contegro_windowsphone {}
.contegro_othermobile {}
/* 
	Please view the source of a Contegro page with different browsers to see the specific classes for
	each browser configuration. Some examples of classes that will be added to the surrounding form
	for different browsers are...

	*** Internet Explorer 6 ***
	<form class="contegro_ie6 contegro_ie">

	*** Firefox 7 ***
	<form class="contegro_firefox7 contegro_firefox">

	*** The iPhone browser ***
	<form class="contegro_mobile contegro_ios">




*/

/* -----[ Printing ]-------------------------------------------------------------------------- */

@media print {
	body {
		font-size: 12pt;
	}
	#cRS, #cLS, #cTL, #cS, #cT, #cB, #cH, #cN {
		display: none;
	}
	#cPC {
			margin: 0px;
			padding: 0px 0px 20px 0px;
			border-top-style: none;
			border-left-style: none;
		}
		.layout1 #cPC /* 3 column layout */
		{
			margin: 0px;
			padding: 0px 0px 20px 0px;
		}
		.layout2 #cPC /* 2 column - left */
		{
			margin: 0px;
			padding: 0px 0px 20px 0px;
		}
		.layout3 #cPC /* 2 column - right */
		{
			margin: 0px;
			padding: 0px 0px 20px 0px;
		}
		.layout4 #cPC /* 1 column */
		{
			margin: 0px;
			padding: 0px 0px 20px 0px;
		}
}


.login-page .Logout {
    text-align: center;
    margin-bottom: 30px;
}

.wrapper.modalWindow {
	padding: 32px;
}


.MenuCssTest .sidebar {
	position: absolute;
	top: 0;
	left: 0;
}
.MenuCssTest .main-panel {
	width: 100%;
	float: none;
}


.sidebar .nav.hasSystemSettingsLink {
    display: flex;
    flex-direction: column;
}
.sidebar .nav.hasSystemSettingsLink>div:first-child {
    flex-grow: 1;
}

.IsAndroid .sidebar .nav.hasSystemSettingsLink>div:first-child {
	flex-grow: 0;
}


@media (max-width: 992px) {
	/* fix issue where .sidebar covers .navbar and blocks the back button click */
 
	.mobileBackButton {
        position: absolute;
        width: 120px;
        height: 35px;
        left: 65px;
        top: 13px;
        z-index: 255;
    }

	.sidebar .nav.hasSystemSettingsLink>div:first-child {
	    flex-grow: 0;
	}    
 
}

body .edit-playlist-page {
    margin-left: 103px;
	transition: margin-left 0.25s;
}
	body.showMenu .edit-playlist-page {
		margin-left: 280px;
	}